Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add url template for video player profiles #696

Merged
merged 9 commits into from
Oct 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 46 additions & 1 deletion docs/es-modules/profiles.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -49,6 +71,29 @@ <h5>Player with default profile</h5>

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 -->
Expand Down
2 changes: 1 addition & 1 deletion docs/es-modules/raw-url.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
104 changes: 104 additions & 0 deletions docs/profiles.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,29 @@

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>
Expand Down Expand Up @@ -78,6 +101,87 @@ <h3 class="mt-4">Example Code:</h3>
}, 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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest adding another example with a custom profile and overriding configuration code to make sure it works as expected (It could be same page but two different players and i think this is even more favourable)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good point, added another example with overrides

Expand Down
4 changes: 2 additions & 2 deletions docs/raw-url.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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);

Expand Down
1 change: 0 additions & 1 deletion src/index.es.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
5 changes: 0 additions & 5 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -51,7 +47,6 @@ const cloudinary = {
...(window.cloudinary || {}),
videoPlayer,
videoPlayers,
videoPlayerWithProfile,
player,
players,
Cloudinary: {
Expand Down
6 changes: 0 additions & 6 deletions src/index.videoPlayerWithProfile.js

This file was deleted.

21 changes: 15 additions & 6 deletions src/player.js
Original file line number Diff line number Diff line change
@@ -1,23 +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) => {
export const getProfile = async (profile, initOptions) => {
if (Object.keys(defaultProfiles).includes(profile)) {
return defaultProfiles[profile];
}

if (isRawUrl(profile)) {
return await fetch(profile, { method: 'GET' }).then(res => res.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,
);
Comment on lines +11 to +20
Copy link
Collaborator

@tsi tsi Oct 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jakub-roch instead of creating that list can't you use CLOUDINARY_CONFIG_PARAM, like in getConfig() ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image this helper requires specific properties, some of them are ignored like ```'shorten', 'sign_url', 'api_secret', 'url_suffix', 'use_root_path', 'auth_token'```

as I can see cloudinaryConfig provides same values as from initOptions


throw new Error('Custom profiles will be supported soon, please use one of default profiles: "cldDefault", "cldLooping" or "cldAdaptiveStream"');
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) => {
const { profile, ...otherInitOptions } = initOptions;
try {
const profileOptions = profile ? await getProfile(otherInitOptions.cloud_name, profile) : {};
const profileOptions = profile ? await getProfile(profile, otherInitOptions) : {};
const options = Object.assign({}, profileOptions.playerOptions, otherInitOptions);
const videoPlayer = new VideoPlayer(elem, options, ready);

Expand Down
1 change: 1 addition & 0 deletions test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
1 change: 0 additions & 1 deletion webpack/es6.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
},
Expand Down
Loading