From 3e8d981964c10e8321a988f27bec2f1b7fac8078 Mon Sep 17 00:00:00 2001 From: jakubroch Date: Tue, 1 Oct 2024 05:33:30 +0200 Subject: [PATCH 1/9] feat: add url template for video player profiles --- docs/profiles.html | 47 +++++++++++++++++++++++++++++ src/index.es.js | 1 - src/index.js | 5 --- src/index.videoPlayerWithProfile.js | 6 ---- src/player.js | 13 ++++---- webpack/es6.config.js | 1 - 6 files changed, 53 insertions(+), 20 deletions(-) delete mode 100644 src/index.videoPlayerWithProfile.js diff --git a/docs/profiles.html b/docs/profiles.html index 00b09f7c..d3c3c98d 100644 --- a/docs/profiles.html +++ b/docs/profiles.html @@ -31,6 +31,15 @@ playerWithDefaultProfile.source('sea_turtle'); }, false); + + window.addEventListener('load', async function() { + const playerWithCustomProfile = await cloudinary.player('player-custom-profile', { + cloudName: 'demo', + profile: 'myCustomProfile', + }); + + playerWithCustomProfile.source('sea_turtle'); + }, false); @@ -78,6 +87,44 @@

Example Code:

}, false); + +
Player with custom profile
+ + +

Example Code:

+ + 
+    
+
+      <video
+        id="player-custom-profile"
+        controls
+        autoplay
+        muted
+        class="cld-video-player"
+        width="500">
+      </video>
+
+      
+      
+        window.addEventListener('load', async function() {
+          const playerWithCustomProfile = await cloudinary.player('player-custom-profile', {
+            cloudName: 'demo',
+            profile: 'myCustomProfile',
+          });
+
+          playerWithCustomProfile.source('sea_turtle');
+        }, false);
+      
+
diff --git a/src/index.es.js b/src/index.es.js index da6e2826..f19be260 100644 --- 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 index 9a0cf729..252c105e 100644 --- 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 deleted file mode 100644 index e739ba95..00000000 --- a/src/index.videoPlayerWithProfile.js +++ /dev/null @@ -1,6 +0,0 @@ -// This file is bundled as `videoPlayerWithProfile.js` to be imported as a tree-shaken module. - -// Usage: -// import videoPlayerWithProfile from 'cloudinary-video-player/videoPlayerWithProfile'; - -export { videoPlayerWithProfile as default } from './index.js'; diff --git a/src/player.js b/src/player.js index 0c6250bb..0ed736c3 100644 --- a/src/player.js +++ b/src/player.js @@ -2,22 +2,21 @@ import VideoPlayer from './video-player'; import { defaultProfiles } from './config/profiles'; import { isRawUrl } from './plugins/cloudinary/common'; -export const getProfile = async (cloudName, profile) => { +export const getProfile = async (cloudName, profile, secureDistribution) => { if (Object.keys(defaultProfiles).includes(profile)) { return defaultProfiles[profile]; } - 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 cloudinaryDomain = secureDistribution === 'res-staging.cloudinary.com' ? secureDistribution : 'res.cloudinary.com'; + const profileUrl = isRawUrl(profile) ? profile : + `https://${cloudinaryDomain}/${cloudName}/_applet_/video_service/video_player_profiles/${profile}.json`; + return await fetch(profileUrl, { method: 'GET' }).then(res => res.json()); }; const player = async (elem, initOptions, ready) => { const { profile, ...otherInitOptions } = initOptions; try { - const profileOptions = profile ? await getProfile(otherInitOptions.cloud_name, profile) : {}; + const profileOptions = profile ? await getProfile(otherInitOptions.cloud_name, profile, otherInitOptions.secure_distribution) : {}; const options = Object.assign({}, profileOptions.playerOptions, otherInitOptions); const videoPlayer = new VideoPlayer(elem, options, ready); diff --git a/webpack/es6.config.js b/webpack/es6.config.js index 1e82ee76..f3bea539 100644 --- a/webpack/es6.config.js +++ b/webpack/es6.config.js @@ -13,7 +13,6 @@ module.exports = merge(webpackCommon, { entry: { 'cld-video-player': './index.es.js', // default 'videoPlayer': './index.videoPlayer.js', - 'videoPlayerWithProfile': './index.videoPlayerWithProfile.js', 'player': './index.player.js', 'all': './index.all.js' }, From a6b3f631cd242288b18a6dab70f23d843ffa0e3f Mon Sep 17 00:00:00 2001 From: jakubroch Date: Tue, 1 Oct 2024 05:36:22 +0200 Subject: [PATCH 2/9] feat: add url template for video player profiles --- docs/es-modules/profiles.html | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/es-modules/profiles.html b/docs/es-modules/profiles.html index f2481395..3a977af0 100644 --- a/docs/es-modules/profiles.html +++ b/docs/es-modules/profiles.html @@ -30,9 +30,20 @@
Player with default profile
muted > +
Player with custom profile
+ +

Full documentationFull documentation

@@ -49,6 +60,15 @@
Player with default profile
playerWithDefaultProfile.source('sea_turtle'); })(); + + (async () => { + const playerWithCustomProfile = await player('player-custom-profile', { + cloudName: 'demo', + profile: 'myCustomProfile' + }); + + playerWithCustomProfile.source('sea_turtle'); + })(); From 1139d9f3b3a59392c11dbf044bb300321265733d Mon Sep 17 00:00:00 2001 From: jakubroch Date: Tue, 1 Oct 2024 11:17:46 +0200 Subject: [PATCH 3/9] feat: add url template for video player profiles --- src/player.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/player.js b/src/player.js index 0ed736c3..923cc8a2 100644 --- a/src/player.js +++ b/src/player.js @@ -1,22 +1,32 @@ import VideoPlayer from './video-player'; import { defaultProfiles } from './config/profiles'; import { isRawUrl } from './plugins/cloudinary/common'; +import { unsigned_url_prefix } from '@cloudinary/url-gen/backwards/utils/unsigned_url_prefix'; -export const getProfile = async (cloudName, profile, secureDistribution) => { +export const getProfile = async (profile, initOptions) => { if (Object.keys(defaultProfiles).includes(profile)) { return defaultProfiles[profile]; } - const cloudinaryDomain = secureDistribution === 'res-staging.cloudinary.com' ? secureDistribution : 'res.cloudinary.com'; - const profileUrl = isRawUrl(profile) ? profile : - `https://${cloudinaryDomain}/${cloudName}/_applet_/video_service/video_player_profiles/${profile}.json`; + const urlPrefix = unsigned_url_prefix( + null, + initOptions.cloudName || initOptions.cloud_name, + initOptions.private_cdn, + initOptions.cdn_subdomain, + initOptions.secure_cdn_subdomain, + initOptions.cname, + initOptions.secure, + initOptions.secure_distribution, + ); + + const profileUrl = isRawUrl(profile) ? profile : `${urlPrefix}/_applet_/video_service/video_player_profiles/${profile}.json`; return await fetch(profileUrl, { method: 'GET' }).then(res => res.json()); }; const player = async (elem, initOptions, ready) => { const { profile, ...otherInitOptions } = initOptions; try { - const profileOptions = profile ? await getProfile(otherInitOptions.cloud_name, profile, otherInitOptions.secure_distribution) : {}; + const profileOptions = profile ? await getProfile(profile, otherInitOptions) : {}; const options = Object.assign({}, profileOptions.playerOptions, otherInitOptions); const videoPlayer = new VideoPlayer(elem, options, ready); From d5deaa25bdda36356618758f1ed7daeab7429add Mon Sep 17 00:00:00 2001 From: jakubroch Date: Wed, 2 Oct 2024 14:11:20 +0200 Subject: [PATCH 4/9] feat: docs profile url --- docs/es-modules/profiles.html | 2 +- docs/profiles.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/es-modules/profiles.html b/docs/es-modules/profiles.html index 3a977af0..df3bb48d 100644 --- a/docs/es-modules/profiles.html +++ b/docs/es-modules/profiles.html @@ -63,7 +63,7 @@
Player with custom profile
(async () => { const playerWithCustomProfile = await player('player-custom-profile', { - cloudName: 'demo', + cloudName: 'prod', profile: 'myCustomProfile' }); diff --git a/docs/profiles.html b/docs/profiles.html index d3c3c98d..fbd893b1 100644 --- a/docs/profiles.html +++ b/docs/profiles.html @@ -34,7 +34,7 @@ window.addEventListener('load', async function() { const playerWithCustomProfile = await cloudinary.player('player-custom-profile', { - cloudName: 'demo', + cloudName: 'prod', profile: 'myCustomProfile', }); @@ -117,7 +117,7 @@

Example Code:

window.addEventListener('load', async function() { const playerWithCustomProfile = await cloudinary.player('player-custom-profile', { - cloudName: 'demo', + cloudName: 'prod', profile: 'myCustomProfile', }); From a8545b3d873e89737c510b34bdf19e22c0c4bb1c Mon Sep 17 00:00:00 2001 From: jakubroch Date: Wed, 2 Oct 2024 14:12:31 +0200 Subject: [PATCH 5/9] feat: docs profile url --- docs/es-modules/profiles.html | 2 +- docs/profiles.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/es-modules/profiles.html b/docs/es-modules/profiles.html index df3bb48d..840fb4ac 100644 --- a/docs/es-modules/profiles.html +++ b/docs/es-modules/profiles.html @@ -67,7 +67,7 @@
Player with custom profile
profile: 'myCustomProfile' }); - playerWithCustomProfile.source('sea_turtle'); + playerWithCustomProfile.source('samples/cld-sample-video'); })(); diff --git a/docs/profiles.html b/docs/profiles.html index fbd893b1..2f0278d6 100644 --- a/docs/profiles.html +++ b/docs/profiles.html @@ -38,7 +38,7 @@ profile: 'myCustomProfile', }); - playerWithCustomProfile.source('sea_turtle'); + playerWithCustomProfile.source('samples/cld-sample-video'); }, false); @@ -121,7 +121,7 @@

Example Code:

profile: 'myCustomProfile', }); - playerWithCustomProfile.source('sea_turtle'); + playerWithCustomProfile.source('samples/cld-sample-video'); }, false); From 6b005aa98b710905b646777d0a44eb31b8722f56 Mon Sep 17 00:00:00 2001 From: jakubroch Date: Sat, 5 Oct 2024 17:49:04 +0200 Subject: [PATCH 6/9] fix: review --- docs/es-modules/profiles.html | 25 +++++++++++++++ docs/profiles.html | 57 +++++++++++++++++++++++++++++++++++ src/player.js | 6 ++-- 3 files changed, 85 insertions(+), 3 deletions(-) diff --git a/docs/es-modules/profiles.html b/docs/es-modules/profiles.html index 840fb4ac..73195488 100644 --- a/docs/es-modules/profiles.html +++ b/docs/es-modules/profiles.html @@ -41,6 +41,17 @@
Player with custom profile
muted > +
Player with custom profile and overrides
+ +

Full documentationPlayer with custom profile 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'); + })(); diff --git a/docs/profiles.html b/docs/profiles.html index 2f0278d6..676a1850 100644 --- a/docs/profiles.html +++ b/docs/profiles.html @@ -40,6 +40,20 @@ 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); @@ -125,6 +139,49 @@

Example Code:

}, false); + +
Player with custom profile and overrides
+ + +

Example Code:

+ + 
+    
+
+      <video
+        id="player-custom-profile-overrides"
+        controls
+        autoplay
+        muted
+        class="cld-video-player"
+        width="500">
+      </video>
+
+      
+      
+        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);
+      
+
diff --git a/src/player.js b/src/player.js index 923cc8a2..21580ed4 100644 --- a/src/player.js +++ b/src/player.js @@ -10,7 +10,7 @@ export const getProfile = async (profile, initOptions) => { const urlPrefix = unsigned_url_prefix( null, - initOptions.cloudName || initOptions.cloud_name, + initOptions.cloudName ?? initOptions.cloud_name, initOptions.private_cdn, initOptions.cdn_subdomain, initOptions.secure_cdn_subdomain, @@ -19,8 +19,8 @@ export const getProfile = async (profile, initOptions) => { initOptions.secure_distribution, ); - const profileUrl = isRawUrl(profile) ? profile : `${urlPrefix}/_applet_/video_service/video_player_profiles/${profile}.json`; - return await fetch(profileUrl, { method: 'GET' }).then(res => res.json()); + const profileUrl = isRawUrl(profile) ? profile : `${urlPrefix}/_applet_/video_service/video_player_profiles/${profile.replaceAll(' ', '+')}.json`; + return fetch(profileUrl, { method: 'GET' }).then(res => res.json()); }; const player = async (elem, initOptions, ready) => { From a7a5a267c21ea34823c6dab027186060d1ca37d4 Mon Sep 17 00:00:00 2001 From: jakubroch Date: Sun, 6 Oct 2024 09:38:30 +0200 Subject: [PATCH 7/9] fix: flaky tests --- test/e2e/specs/linksConsolErros.spec.ts | 1 + test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/test/e2e/specs/linksConsolErros.spec.ts b/test/e2e/specs/linksConsolErros.spec.ts index 6be1cdde..883b405e 100644 --- a/test/e2e/specs/linksConsolErros.spec.ts +++ b/test/e2e/specs/linksConsolErros.spec.ts @@ -10,6 +10,7 @@ import { validatePageErrors } from '../src/helpers/validatePageErrors'; for (const link of LINKS) { vpTest(`Test console errors on link ${link.name}`, async ({ page, consoleErrors, vpExamples }) => { vpTest.skip(link.name === 'Adaptive Streaming', 'Flaky on CI'); + vpTest.skip(link.name === 'Raw URL', 'Flaky'); await vpExamples.clickLinkByName(link.name); await waitForPageToLoadWithTimeout(page, 5000); expect(page.url()).toContain(link.endpoint); diff --git a/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts b/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts index c198ffbf..7f6ff6cb 100644 --- a/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts +++ b/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts @@ -11,6 +11,7 @@ const ESM_URL = 'https://cld-vp-esm-pages.netlify.app/'; for (const link of ESM_LINKS) { vpTest(`Test console errors on link ${link.name}`, async ({ page, consoleErrors, vpExamples }) => { vpTest.skip(link.name === 'Adaptive Streaming', 'Flaky on CI'); + vpTest.skip(link.name === 'Raw URL', 'Flaky'); /** * Navigate to ESM Imports examples page */ From 4233c584d7463441a73f586e05032e22a02b15b8 Mon Sep 17 00:00:00 2001 From: jakubroch Date: Mon, 7 Oct 2024 08:40:59 +0200 Subject: [PATCH 8/9] fix: tests --- docs/es-modules/raw-url.html | 2 +- docs/raw-url.html | 4 ++-- test/e2e/specs/linksConsolErros.spec.ts | 1 - test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts | 1 - 4 files changed, 3 insertions(+), 5 deletions(-) diff --git a/docs/es-modules/raw-url.html b/docs/es-modules/raw-url.html index 915a9ddb..617fe7e2 100644 --- a/docs/es-modules/raw-url.html +++ b/docs/es-modules/raw-url.html @@ -63,7 +63,7 @@

Video with raw URL - ABR

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/raw-url.html b/docs/raw-url.html index 43dcaa5d..dcc5cd5c 100644 --- 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 @@

Example Code:

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/test/e2e/specs/linksConsolErros.spec.ts b/test/e2e/specs/linksConsolErros.spec.ts index 883b405e..6be1cdde 100644 --- a/test/e2e/specs/linksConsolErros.spec.ts +++ b/test/e2e/specs/linksConsolErros.spec.ts @@ -10,7 +10,6 @@ import { validatePageErrors } from '../src/helpers/validatePageErrors'; for (const link of LINKS) { vpTest(`Test console errors on link ${link.name}`, async ({ page, consoleErrors, vpExamples }) => { vpTest.skip(link.name === 'Adaptive Streaming', 'Flaky on CI'); - vpTest.skip(link.name === 'Raw URL', 'Flaky'); await vpExamples.clickLinkByName(link.name); await waitForPageToLoadWithTimeout(page, 5000); expect(page.url()).toContain(link.endpoint); diff --git a/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts b/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts index 7f6ff6cb..c198ffbf 100644 --- a/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts +++ b/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts @@ -11,7 +11,6 @@ const ESM_URL = 'https://cld-vp-esm-pages.netlify.app/'; for (const link of ESM_LINKS) { vpTest(`Test console errors on link ${link.name}`, async ({ page, consoleErrors, vpExamples }) => { vpTest.skip(link.name === 'Adaptive Streaming', 'Flaky on CI'); - vpTest.skip(link.name === 'Raw URL', 'Flaky'); /** * Navigate to ESM Imports examples page */ From d833625a99d3de851831df4eaeb833ae63a74c44 Mon Sep 17 00:00:00 2001 From: jakubroch Date: Mon, 7 Oct 2024 08:48:49 +0200 Subject: [PATCH 9/9] fix: ESM flaky test --- test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts b/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts index c198ffbf..7f6ff6cb 100644 --- a/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts +++ b/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts @@ -11,6 +11,7 @@ const ESM_URL = 'https://cld-vp-esm-pages.netlify.app/'; for (const link of ESM_LINKS) { vpTest(`Test console errors on link ${link.name}`, async ({ page, consoleErrors, vpExamples }) => { vpTest.skip(link.name === 'Adaptive Streaming', 'Flaky on CI'); + vpTest.skip(link.name === 'Raw URL', 'Flaky'); /** * Navigate to ESM Imports examples page */