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.

Sign up for GitHub

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

Jump to bottom

feat: add url template for video player profiles #696

Merged
merged 9 commits into from
Oct 7, 2024
+169 −23
Merged

feat: add url template for video player profiles #696

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3e8d981
feat: add url template for video player profiles
jakub-roch Oct 1, 2024
a6b3f63
feat: add url template for video player profiles
jakub-roch Oct 1, 2024
1139d9f
feat: add url template for video player profiles
jakub-roch Oct 1, 2024
d5deaa2
feat: docs profile url
jakub-roch Oct 2, 2024
a8545b3
feat: docs profile url
jakub-roch Oct 2, 2024
6b005aa
fix: review
jakub-roch Oct 5, 2024
a7a5a26
fix: flaky tests
jakub-roch Oct 6, 2024
4233c58
fix: tests
jakub-roch Oct 7, 2024
d833625
fix: ESM flaky test
jakub-roch Oct 7, 2024
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
22 changes: 21 additions & 1 deletion docs/es-modules/profiles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,20 @@ <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>

<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 +60,15 @@ <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');
})();
</script>

<!-- Bootstrap -->
Expand Down
47 changes: 47 additions & 0 deletions docs/profiles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,15 @@

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);
</script>
</head>
<body>
Expand Down Expand Up @@ -78,6 +87,44 @@ <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>
</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
1 change: 0 additions & 1 deletion src/index.es.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop

This file was deleted.

21 changes: 15 additions & 6 deletions src/player.js
View file
Open in desktop
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,
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
initOptions.cloudName || initOptions.cloud_name,
initOptions.cloudName ?? initOptions.cloud_name,

Copy link
Contributor Author

Choose a reason for hiding this comment

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

👍

initOptions.private_cdn,
initOptions.cdn_subdomain,
initOptions.secure_cdn_subdomain,
initOptions.cname,
initOptions.secure,
initOptions.secure_distribution,
);

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}.json`;
return await fetch(profileUrl, { method: 'GET' }).then(res => res.json());
Copy link
Contributor

Choose a reason for hiding this comment

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

I think the await here and the async in the function declaration are both redundant, but especially here it is really not needed

Suggested change
return await fetch(profileUrl, { method: 'GET' }).then(res => res.json());
return fetch(profileUrl, { method: 'GET' }).then(res => res.json());

Copy link
Contributor Author

Choose a reason for hiding this comment

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

changed, I would like to keep entire method as async just in case - so w need to have async declaration on the top but there await can be removed

};

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: 0 additions & 1 deletion webpack/es6.config.js
View file
Open in desktop
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