Full documentationPlayer with custom (blur) profile }); 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'); })(); diff --git a/docs/profiles.html b/docs/profiles.html index 70ddedd7..194f0f7d 100644 --- 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); @@ -59,18 +52,6 @@
@@ -85,15 +66,6 @@diff --git a/package.json b/package.json index 1c579578..76a31ba7 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "files": [ { "path": "./dist/cld-video-player.min.js", - "maxSize": "245kb" + "maxSize": "250kb" }, { "path": "./dist/cld-video-player.light.min.js", @@ -65,11 +65,11 @@ }, { "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 index b4ab13b8..da6e2826 100644 --- 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 index 629b66cb..9a0cf729 100644 --- 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 new file mode 100644 index 00000000..8e2eded4 --- /dev/null +++ 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 b/src/player.js similarity index 55% rename from src/video-player-profile.js rename to src/player.js index abb6c5bf..0c6250bb 100644 --- a/src/video-player-profile.js +++ b/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 index 2d82b611..1e82ee76 100644 --- 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' },Example Code:
width="500"> </video> - <video - id="player-custom-profile" - controls - autoplay - muted - class="cld-video-player" - width="500"> - </video> -window.addEventListener('load', async function() { @@ -103,13 +75,6 @@Example Code:
}); 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);