feat: new 'player' method with support async loading & profiles (#678)

* feat: new 'player' method with support async loading & profiles * feat: new 'player' method with support async loading & profiles * fix: review comments * fix: bump VP size * fix: allow for profile url value * fix: isRawUrl path
cloudinary · Jul 24, 2024 · 95098c0 · 95098c0
1 parent afa898f
commit 95098c0
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 70 deletions.
diff --git a/docs/es-modules/profiles.html b/docs/es-modules/profiles.html
@@ -30,18 +30,6 @@ <h5>Player with default profile</h5>
         muted
       ></video>
 
-      <br /><br />
-      <h5>Player with custom (blur) profile</h5>
-      <video
-        id="player-custom-profile"
-        class="cld-video-player"
-        width="500"
-        playsinline
-        controls
-        autoplay
-        muted
-      ></video>
-
       <p class="mt-4">
         <a href="https://cloudinary.com/documentation/cloudinary_video_player"
           >Full documentation</a
@@ -60,13 +48,6 @@ <h5>Player with custom (blur) profile</h5>
         });
 
         playerWithDefaultProfile.source('sea_turtle');
-
-        const playerWithCustomProfile = await videoPlayerWithProfile('player-custom-profile', {
-          cloudName: 'prod',
-          profile: 'https://res.cloudinary.com/prod/raw/upload/v1/video-player/example-profiles/example-profile.json'
-        });
-
-        playerWithCustomProfile.source('samples/cld-sample-video');
       })();
     </script>
 

diff --git a/docs/profiles.html b/docs/profiles.html
@@ -30,13 +30,6 @@
       });
 
       playerWithDefaultProfile.source('sea_turtle');
-
-      const playerWithCustomProfile = await cloudinary.videoPlayerWithProfile('player-custom-profile', {
-        cloud_name: 'prod',
-        profile: 'https://res.cloudinary.com/prod/raw/upload/v1/video-player/example-profiles/example-profile.json',
-      });
-
-      playerWithCustomProfile.source('samples/cld-sample-video');
     }, false);
   </script>
 </head>
@@ -59,18 +52,6 @@ <h5>Player with default profile</h5>
     width="500">
   </video>
 
-  <br/><br/>
-  <h5>Player with custom (blur) 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>
@@ -85,15 +66,6 @@ <h3 class="mt-4">Example Code:</h3>
         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() {
@@ -103,13 +75,6 @@ <h3 class="mt-4">Example Code:</h3>
           });
 
           playerWithDefaultProfile.source('sea_turtle');
-
-          const playerWithCustomProfile = await cloudinary.videoPlayerWithProfile('player-custom-profile', {
-            cloud_name: 'prod',
-            profile: 'https://res.cloudinary.com/prod/raw/upload/v1/video-player/example-profiles/example-profile.json',
-          });
-
-          playerWithCustomProfile.source('samples/cld-sample-video');
         }, false);
       </code>
     </pre>

diff --git a/package.json b/package.json
@@ -57,19 +57,19 @@
     "files": [
       {
         "path": "./dist/cld-video-player.min.js",
-        "maxSize": "245kb"
+        "maxSize": "250kb"
       },
       {
         "path": "./dist/cld-video-player.light.min.js",
         "maxSize": "130kb"
       },
       {
         "path": "./lib/cld-video-player.js",
-        "maxSize": "245kb"
+        "maxSize": "250kb"
       },
       {
         "path": "./lib/videoPlayer.js",
-        "maxSize": "245kb"
+        "maxSize": "250kb"
       },
       {
         "path": "./lib/all.js",

diff --git a/src/index.es.js b/src/index.es.js
@@ -15,4 +15,6 @@ export const videoPlayer = cloudinary.videoPlayer;
 export const videoPlayers = cloudinary.videoPlayers;
 export const videoPlayerWithProfile = cloudinary.videoPlayerWithProfile;
 
+export const player = cloudinary.player;
+
 export default cloudinary;
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,7 @@
 import 'assets/styles/main.scss';
 import pick from 'lodash/pick';
 import VideoPlayer from './video-player';
-import createVideoPlayerProfile from './video-player-profile';
+import createPlayer from './player';
 import { convertKeysToSnakeCase } from './utils/object';
 import { CLOUDINARY_CONFIG_PARAM } from './video-player.const';
 
@@ -20,11 +20,22 @@ const getVideoPlayer = config => (id, playerOptions, ready) =>
 const getVideoPlayers = config => (selector, playerOptions, ready) =>
   VideoPlayer.all(selector, getConfig(playerOptions, config), ready);
 
-const getVideoPlayerWithProfile = config => (id, playerOptions, ready) => createVideoPlayerProfile(id, getConfig(playerOptions, config), ready);
+const getPlayer = config => (id, playerOptions, ready) => createPlayer(id, getConfig(playerOptions, config), ready);
+const getPlayers = config => (selector, playerOptions, ready) => {
+  const nodeList = document.querySelectorAll(selector);
+  const playerConfig = getConfig(playerOptions, config);
+  return [...nodeList].map((node) => createPlayer(node, playerConfig, ready));
+};
 
 export const videoPlayer = getVideoPlayer();
 export const videoPlayers = getVideoPlayers();
-export const videoPlayerWithProfile = getVideoPlayerWithProfile();
+export const videoPlayerWithProfile = (id, playerOptions, ready) => {
+  console.warn('videoPlayerWithProfile method is DEPRECATED and will be removed soon, please use new `player` method instead');
+  return getPlayer()(id, playerOptions, ready);
+};
+
+export const player = getPlayer();
+export const players = getPlayers();
 
 const cloudinaryVideoPlayerLegacyConfig = config => {
   console.warn(
@@ -41,6 +52,8 @@ const cloudinary = {
   videoPlayer,
   videoPlayers,
   videoPlayerWithProfile,
+  player,
+  players,
   Cloudinary: {
     // Backwards compatibility with SDK v1
     new: cloudinaryVideoPlayerLegacyConfig

diff --git a/src/index.player.js b/src/index.player.js
@@ -0,0 +1,6 @@
+// This file is bundled as `player.js` to be imported as a tree-shaken module.
+
+// Usage:
+// import player from 'cloudinary-video-player/player';
+
+export { player as default } from './index.js';
diff --git a/src/video-player-profile.js → src/player.js b/src/video-player-profile.js → src/player.js
@@ -1,22 +1,24 @@
 import VideoPlayer from './video-player';
 import { defaultProfiles } from './config/profiles';
+import { isRawUrl } from './plugins/cloudinary/common';
 
 export const getProfile = async (cloudName, profile) => {
   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');
+  if (isRawUrl(profile)) {
+    return await fetch(profile, { method: 'GET' }).then(res => res.json());
   }
 
+  throw new Error('Custom profiles will be supported soon, please use one of default profiles: "cldDefault", "cldLooping" or "cldAdaptiveStream"');
+};
+
+const player = async (elem, initOptions, ready) => {
+  const { profile, ...otherInitOptions } = initOptions;
   try {
-    const profileOptions = await getProfile(initOptions.cloud_name, initOptions.profile);
-    const options = Object.assign({}, profileOptions.playerOptions, initOptions);
+    const profileOptions = profile ? await getProfile(otherInitOptions.cloud_name, profile) : {};
+    const options = Object.assign({}, profileOptions.playerOptions, otherInitOptions);
     const videoPlayer = new VideoPlayer(elem, options, ready);
 
     const nativeVideoPlayerSourceMethod = videoPlayer.source;
@@ -27,10 +29,10 @@ const videoPlayerProfile = async (elem, initOptions, ready) => {
 
     return videoPlayer;
   } catch (e) {
-    const videoPlayer = new VideoPlayer(elem, initOptions);
+    const videoPlayer = new VideoPlayer(elem, otherInitOptions);
     videoPlayer.videojs.error('Invalid profile');
     throw e;
   }
 };
 
-export default videoPlayerProfile;
+export default player;
diff --git a/webpack/es6.config.js b/webpack/es6.config.js
@@ -14,6 +14,7 @@ module.exports = merge(webpackCommon, {
     'cld-video-player': './index.es.js', // default
     'videoPlayer': './index.videoPlayer.js',
     'videoPlayerWithProfile': './index.videoPlayerWithProfile.js',
+    'player': './index.player.js',
     'all': './index.all.js'
   },