feat: video profiles (#539)

* feat: video profiles * feat: video profiles * feat: video profiles - default profile json * feat: video profiles * feat: rollback webpack changes * fix: review, es export, name * fix: webpack json * fix: webpack config
cloudinary · Feb 5, 2024 · 0e99c27 · 0e99c27
1 parent 888dc61
commit 0e99c27
Show file tree

Hide file tree

Showing 11 changed files with 210 additions and 5 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -78,6 +78,7 @@ <h3 class="mt-4">Some code examples:</h3>
       <li><a href="./seek-thumbs.html">Seek Thumbnails</a></li>
       <li><a href="./interaction-area.html">Interaction Area</a></li>
       <li><a href="./chapters.html">Chapters</a></li>
+      <li><a href="./profiles.html">Profiles</a></li>
     </ul>
 
   </div>

diff --git a/docs/profiles.html b/docs/profiles.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Cloudinary Video Player</title>
+  <link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
+
+  <!-- Bootstrap -->
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
+  <!-- highlight.js -->
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+
+  <!--
+    We're loading scripts & style dynamically for development/testing.
+    Real-world usage would look like this:
+    <link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
+    <script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
+  -->
+
+  <script type="text/javascript" src="./scripts.js"></script>
+
+  <script type="text/javascript">
+    window.addEventListener('load', async function() {
+      const playerWithDefaultProfile = await cloudinary.videoPlayerWithProfile('player-default-profile', {
+        cloud_name: 'demo',
+        profile: 'cldDefault',
+      });
+
+      playerWithDefaultProfile.source('sea_turtle');
+
+      const playerWithCustomProfile = await cloudinary.videoPlayerWithProfile('player-custom-profile', {
+        cloud_name: 'dwaq5xqm4',
+        profile: 'https://res.cloudinary.com/dwaq5xqm4/raw/upload/v1/profiles/default_profile.json',
+      });
+
+      playerWithCustomProfile.source('samples/cld-sample-video');
+    }, false);
+  </script>
+</head>
+<body>
+<div class="container p-4 col-12 col-md-9 col-xl-6">
+  <nav class="nav mb-2">
+    <a href="./index.html">&#60;&#60; Back to examples index</a>
+  </nav>
+  <h1>Cloudinary Video Player</h1>
+  <h3 class="mb-4">Profiles</h3>
+
+  <h5>Player with default profile</h5>
+  <video
+    id="player-default-profile"
+    playsinline
+    controls
+    autoplay
+    muted
+    class="cld-video-player"
+    width="500">
+  </video>
+
+  <br/><br/>
+  <h5>Player with custom profile</h5>
+  <video
+    id="player-custom-profile"
+    playsinline
+    controls
+    autoplay
+    muted
+    class="cld-video-player"
+    width="500">
+  </video>
+
+  <h3 class="mt-4">Example Code:</h3>
+
+  <pre><code class="language-html">
+
+      &lt;video
+        id="player-default-profile"
+        controls
+        autoplay
+        muted
+        class="cld-video-player"
+        width="500"&gt;
+      &lt;/video&gt;
+
+    &lt;video
+        id="player-custom-profile"
+        controls
+        autoplay
+        muted
+        class="cld-video-player"
+        width="500"&gt;
+      &lt;/video&gt;
+
+      </code>
+      <code class="language-javascript">
+        window.addEventListener('load', async function() {
+          const playerWithDefaultProfile = await cloudinary.videoPlayerWithProfile('player-default-profile', {
+            cloud_name: 'demo',
+            profile: 'loopingVideo',
+          });
+
+          playerWithDefaultProfile.source('sea_turtle');
+
+          const playerWithCustomProfile = await cloudinary.videoPlayerWithProfile('player-custom-profile', {
+            cloud_name: 'dwaq5xqm4',
+            profile: 'https://res.cloudinary.com/dwaq5xqm4/raw/upload/v1/profiles/default_profile.json',
+          });
+
+          playerWithCustomProfile.source('samples/cld-sample-video');
+        }, false);
+      </code>
+    </pre>
+</div>
+
+</body>
+</html>
diff --git a/src/config/profiles/cldAdaptiveStream.json b/src/config/profiles/cldAdaptiveStream.json
@@ -0,0 +1,21 @@
+{
+  "playerOptions": {
+    "fluid": true,
+    "controls": true,
+    "controlBar": {
+      "fullscreenToggle": false
+    },
+    "showJumpControls": true,
+    "hideContextMenu": false,
+    "floatingWhenNotVisible": "none"
+  },
+  "sourceOptions": {
+    "chapters": true,
+    "sourceTypes": ["hls"],
+    "transformation": [
+      {
+        "effect": ["volume:auto"]
+      }
+    ]
+  }
+}
diff --git a/src/config/profiles/cldDefault.json b/src/config/profiles/cldDefault.json
@@ -0,0 +1,4 @@
+{
+  "playerOptions": {},
+  "sourceOptions": {}
+}
diff --git a/src/config/profiles/cldLooping.json b/src/config/profiles/cldLooping.json
@@ -0,0 +1,12 @@
+{
+  "playerOptions": {
+    "fluid": true,
+    "controls": false,
+    "muted": true,
+    "floatingWhenNotVisible": "none",
+    "hideContextMenu": false,
+    "autoplay": true,
+    "loop": true
+  },
+  "sourceOptions": {}
+}
diff --git a/src/config/profiles/index.js b/src/config/profiles/index.js
@@ -0,0 +1,9 @@
+import cldDefault from './cldDefault.json';
+import cldLooping from './cldLooping.json';
+import cldAdaptiveStream from './cldAdaptiveStream.json';
+
+export const defaultProfiles = {
+  cldDefault,
+  cldLooping,
+  cldAdaptiveStream
+};
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 import 'assets/styles/main.scss';
 import VideoPlayer from './video-player';
+import createVideoPlayerProfile from './video-player-profile';
 import { assign } from 'utils/assign';
 import { pick, convertKeysToSnakeCase } from './utils/object';
 import { CLOUDINARY_CONFIG_PARAM } from './video-player.const';
@@ -33,10 +34,14 @@ const cloudinaryVideoPlayerConfig = config => ({
 export const videoPlayer = getVideoPlayer();
 export const videoPlayers = getVideoPlayers();
 
+const getVideoPlayerWithProfile = config => (id, playerOptions, ready) => createVideoPlayerProfile(id, getConfig(playerOptions, config), ready);
+export const videoPlayerWithProfile = getVideoPlayerWithProfile();
+
 const cloudinary = {
   ...(window.cloudinary || {}),
   videoPlayer,
   videoPlayers,
+  videoPlayerWithProfile,
   Cloudinary: {
     // Backwards compatibility with SDK v1
     new: cloudinaryVideoPlayerConfig

diff --git a/src/video-player-profile.js b/src/video-player-profile.js
@@ -0,0 +1,37 @@
+import VideoPlayer from './video-player';
+
+export const getProfile = async (cloudName, profile) => {
+  const defaultProfiles = await import(/* webpackChunkName: "defaultProfiles" */ './config/profiles');
+
+  if (Object.keys(defaultProfiles).includes(profile)) {
+    return defaultProfiles[profile];
+  }
+
+  return await fetch(profile, { method: 'GET' }).then(res => res.json());
+};
+
+const videoPlayerProfile = async (elem, initOptions, ready) => {
+  if (!initOptions.profile) {
+    throw new Error('VideoPlayerProfile method requires "profile" property');
+  }
+
+  try {
+    const profileOptions = await getProfile(initOptions.cloud_name, initOptions.profile);
+    const options = Object.assign({}, profileOptions.playerOptions, initOptions);
+    const videoPlayer = new VideoPlayer(elem, options, ready);
+
+    const nativeVideoPlayerSourceMethod = videoPlayer.source;
+    videoPlayer.source = (id, options) => {
+      const extendedOptions = Object.assign({}, profileOptions.sourceOptions, options);
+      return nativeVideoPlayerSourceMethod.call(videoPlayer, id, extendedOptions);
+    };
+
+    return videoPlayer;
+  } catch (e) {
+    const videoPlayer = new VideoPlayer(elem, initOptions);
+    videoPlayer.videojs.error('Invalid profile');
+    return videoPlayer;
+  }
+};
+
+export default videoPlayerProfile;
diff --git a/src/video-profile-export.es.js b/src/video-profile-export.es.js
@@ -0,0 +1 @@
+export { videoPlayerWithProfile as default } from './index.js';
diff --git a/webpack/common.config.js b/webpack/common.config.js
@@ -59,10 +59,6 @@ const webpackConfig = {
           'eslint-loader'
         ]
       },
-      {
-        test: /\.json$/,
-        use: 'json-loader'
-      },
       {
         test: /\.scss$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']

diff --git a/webpack/es6.config.js b/webpack/es6.config.js
@@ -9,7 +9,8 @@ module.exports = merge(webpackCommon, {
 
   entry: {
     'cld-video-player': './index.all.js',
-    'videoPlayer': './index.es.js'
+    'videoPlayer': './index.es.js',
+    'videoPlayerWithProfile': './video-profile-export.es.js'
   },
 
   output: {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { videoPlayerWithProfile as default } from './index.js';