Merge edge to master1 (#729)

feat: add url template for video player profiles feat: add internal analytics about new method & profiles fix: use cld player profiles package for default profiles fix: Me 18059 esm tests over preview build
cloudinary · Nov 4, 2024 · 63e06a9 · 63e06a9
1 parent 3af5c2f
commit 63e06a9
Show file tree

Hide file tree

Showing 21 changed files with 264 additions and 95 deletions.
diff --git a/.github/workflows/e2e_pr.yml b/.github/workflows/e2e_pr.yml
@@ -26,8 +26,17 @@ jobs:
       - name: NPM Install
         run: npm install
 
+      - name: Extract PR Number
+        id: extract_pr_number
+        run: echo "PR_NUMBER=${{ github.event.pull_request.number }}" >> $GITHUB_ENV
+
+      - name: Set Deploy Preview URL
+        run: echo "PREVIEW_URL=https://deploy-preview-${{ env.PR_NUMBER }}--cld-vp-esm-pages.netlify.app" >> $GITHUB_ENV
+
       - name: E2E tests
         run: npm run test:e2e
+        env:
+          PREVIEW_URL: ${{ env.PREVIEW_URL }}
 
       - name: Upload report to artifact
         uses: actions/upload-artifact@v4

diff --git a/CHANGELOG-edge.md b/CHANGELOG-edge.md
@@ -1,5 +1,31 @@
 # Changelog
 
+## [2.1.1-edge.2](https://github.com/cloudinary/cloudinary-video-player/compare/v2.1.1-edge.1...v2.1.1-edge.2) (2024-10-27)
+
+
+### Bug Fixes
+
+* use cld player profiles package for default profiles ([#701](https://github.com/cloudinary/cloudinary-video-player/issues/701)) ([1083b94](https://github.com/cloudinary/cloudinary-video-player/commit/1083b94ac96f4e075d8d820a894703eb644bec7a))
+
+## [2.1.1-edge.1](https://github.com/cloudinary/cloudinary-video-player/compare/v2.1.1-edge.0...v2.1.1-edge.1) (2024-10-18)
+
+
+### Features
+
+* add internal analytics about new method & profiles ([#699](https://github.com/cloudinary/cloudinary-video-player/issues/699)) ([a1c8c1e](https://github.com/cloudinary/cloudinary-video-player/commit/a1c8c1eb4ffd8362ce4cc7ab5ed47276cc5651ee))
+
+## [2.1.1-edge.0](https://github.com/cloudinary/cloudinary-video-player/compare/v2.0.6-edge.0...v2.1.1-edge.0) (2024-10-07)
+
+
+### Features
+
+* add url template for video player profiles ([#696](https://github.com/cloudinary/cloudinary-video-player/issues/696)) ([d60cb4f](https://github.com/cloudinary/cloudinary-video-player/commit/d60cb4f4fc9d8b0ff2a6f0e21621c6c84063c898))
+
+
+### Bug Fixes
+
+* default secure option for new method ([#698](https://github.com/cloudinary/cloudinary-video-player/issues/698)) ([0d95b76](https://github.com/cloudinary/cloudinary-video-player/commit/0d95b76381b2130a01755feab87bb2766ead9d59))
+
 ## [2.0.6-edge.0](https://github.com/cloudinary/cloudinary-video-player/compare/v2.0.5-edge.2...v2.0.6-edge.0) (2024-08-08)
 
 

diff --git a/docs/es-modules/profiles.html b/docs/es-modules/profiles.html
@@ -30,9 +30,31 @@ <h5>Player with default profile</h5>
         muted
       ></video>
 
+      <h5>Player with custom profile</h5>
+      <video
+        id="player-custom-profile"
+        class="cld-video-player"
+        width="500"
+        playsinline
+        controls
+        autoplay
+        muted
+      ></video>
+
+      <h5>Player with custom profile and overrides</h5>
+      <video
+        id="player-custom-profile-overrides"
+        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
+        >Full documentation</a
         >
       </p>
     </div>
@@ -44,11 +66,34 @@ <h5>Player with default profile</h5>
       (async () => {
         const playerWithDefaultProfile = await player('player-default-profile', {
           cloudName: 'demo',
-          profile: 'cldDefault'
+          profile: 'cld-default'
         });
 
         playerWithDefaultProfile.source('sea_turtle');
       })();
+
+      (async () => {
+        const playerWithCustomProfile = await player('player-custom-profile', {
+          cloudName: 'prod',
+          profile: 'myCustomProfile'
+        });
+
+        playerWithCustomProfile.source('samples/cld-sample-video');
+      })();
+
+      (async () => {
+        const playerWithCustomProfileAndOverrides = await cloudinary.player('player-custom-profile-overrides', {
+          cloudName: 'prod',
+          profile: 'myCustomProfile',
+          colors: {
+            base: "#1532a8"
+          },
+          seekThumbnails: false,
+          aiHighlightsGraph: true,
+        });
+
+        playerWithCustomProfileAndOverrides.source('samples/cld-sample-video');
+      })();
     </script>
 
     <!-- Bootstrap -->

diff --git a/docs/es-modules/raw-url.html b/docs/es-modules/raw-url.html
@@ -63,7 +63,7 @@ <h3 class="mb-4">Video with raw URL - ABR</h3>
 
       const player = videoPlayer('player', config);
 
-      player.source('https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_10mb.mp4');
+      player.source('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');
 
       const abrPlayer = videoPlayer('abrPlayer', config);
 

diff --git a/docs/profiles.html b/docs/profiles.html
@@ -26,11 +26,34 @@
     window.addEventListener('load', async () => {
       const playerWithDefaultProfile = await cloudinary.player('player-default-profile', {
         cloudName: 'demo',
-        profile: 'cldDefault',
+        profile: 'cld-default',
       });
 
       playerWithDefaultProfile.source('sea_turtle');
     }, false);
+
+    window.addEventListener('load', async function() {
+      const playerWithCustomProfile = await cloudinary.player('player-custom-profile', {
+        cloudName: 'prod',
+        profile: 'myCustomProfile',
+      });
+
+      playerWithCustomProfile.source('samples/cld-sample-video');
+    }, false);
+
+    window.addEventListener('load', async function() {
+      const playerWithCustomProfileAndOverrides = await cloudinary.player('player-custom-profile-overrides', {
+        cloudName: 'prod',
+        profile: 'myCustomProfile',
+        colors: {
+          base: "#1532a8"
+        },
+        seekThumbnails: false,
+        aiHighlightsGraph: true,
+      });
+
+      playerWithCustomProfileAndOverrides.source('samples/cld-sample-video');
+    }, false);
   </script>
 </head>
 <body>
@@ -71,13 +94,94 @@ <h3 class="mt-4">Example Code:</h3>
         window.addEventListener('load', async function() {
           const playerWithDefaultProfile = await cloudinary.player('player-default-profile', {
             cloudName: 'demo',
-            profile: 'cldDefault',
+            profile: 'cld-default',
           });
 
           playerWithDefaultProfile.source('sea_turtle');
         }, false);
       </code>
     </pre>
+
+  <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-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 playerWithCustomProfile = await cloudinary.player('player-custom-profile', {
+            cloudName: 'prod',
+            profile: 'myCustomProfile',
+          });
+
+          playerWithCustomProfile.source('samples/cld-sample-video');
+        }, false);
+      </code>
+    </pre>
+
+  <h5>Player with custom profile and overrides</h5>
+  <video
+    id="player-custom-profile-overrides"
+    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-custom-profile-overrides"
+        controls
+        autoplay
+        muted
+        class="cld-video-player"
+        width="500"&gt;
+      &lt;/video&gt;
+
+      </code>
+      <code class="language-javascript">
+        window.addEventListener('load', async function() {
+          const playerWithCustomProfileAndOverrides = await cloudinary.player('player-custom-profile-overrides', {
+            cloudName: 'prod',
+            profile: 'myCustomProfile',
+            colors: {
+              base: "#1532a8"
+            },
+            seekThumbnails: false,
+            aiHighlightsGraph: true,
+          });
+
+          playerWithCustomProfileAndOverrides.source('samples/cld-sample-video');
+        }, false);
+      </code>
+    </pre>
   </div>
 
 </body>

diff --git a/docs/raw-url.html b/docs/raw-url.html
@@ -35,7 +35,7 @@
 
       player = cloudinary.videoPlayer('player', config);
 
-      player.source('https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_10mb.mp4');
+      player.source('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');
 
       adpPlayer = cloudinary.videoPlayer('adpPlayer',config);
 
@@ -106,7 +106,7 @@ <h3 class="mt-4">Example Code:</h3>
 
         player = cloudinary.videoPlayer('player', config);
 
-        player.source('https://res.cloudinary.com/demo/video/upload/sea_turtle.mp4');
+        player.source('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');
 
         adpPlayer = cloudinary.videoPlayer('adpPlayer',config);
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
       },
       {
         "path": "./dist/cld-video-player.light.min.js",
-        "maxSize": "130kb"
+        "maxSize": "131kb"
       },
       {
         "path": "./lib/cld-video-player.js",
@@ -80,6 +80,7 @@
   "dependencies": {
     "@cloudinary/url-gen": "^1.20.0",
     "cloudinary-video-analytics": "1.7.1",
+    "cloudinary-video-player-profiles": "1.1.0",
     "lodash": "^4.17.21",
     "uuid": "^10.0.0",
     "video.js": "^8.17.1",

diff --git a/src/config/profiles/cldAdaptiveStream.json b/src/config/profiles/cldAdaptiveStream.json
diff --git a/src/config/profiles/cldDefault.json b/src/config/profiles/cldDefault.json
diff --git a/src/config/profiles/cldLooping.json b/src/config/profiles/cldLooping.json
diff --git a/src/config/profiles/index.js b/src/config/profiles/index.js
diff --git a/src/index.es.js b/src/index.es.js
@@ -13,7 +13,6 @@ import cloudinary from './index.js';
 
 export const videoPlayer = cloudinary.videoPlayer;
 export const videoPlayers = cloudinary.videoPlayers;
-export const videoPlayerWithProfile = cloudinary.videoPlayerWithProfile;
 
 export const player = cloudinary.player;
 

diff --git a/src/index.js b/src/index.js
@@ -29,10 +29,6 @@ const getPlayers = config => (selector, playerOptions, ready) => {
 
 export const videoPlayer = getVideoPlayer();
 export const videoPlayers = getVideoPlayers();
-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();
@@ -51,7 +47,6 @@ const cloudinary = {
   ...(window.cloudinary || {}),
   videoPlayer,
   videoPlayers,
-  videoPlayerWithProfile,
   player,
   players,
   Cloudinary: {

diff --git a/src/index.videoPlayerWithProfile.js b/src/index.videoPlayerWithProfile.js