feat: new 'player' method with support async loading & profiles

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;

src/index.js

@@ -2,6 +2,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';
 
@@ -22,10 +23,14 @@ const getVideoPlayers = config => (selector, playerOptions, 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);
+
 export const videoPlayer = getVideoPlayer();
 export const videoPlayers = getVideoPlayers();
 export const videoPlayerWithProfile = getVideoPlayerWithProfile();
 
+export const player = getPlayer();
+
 const cloudinaryVideoPlayerLegacyConfig = config => {
   console.warn(
     'Cloudinary.new() is deprecated and will be removed. Please use cloudinary.videoPlayer() instead.'
@@ -41,6 +46,7 @@ const cloudinary = {
   videoPlayer,
   videoPlayers,
   videoPlayerWithProfile,
+  player,
   Cloudinary: {
     // Backwards compatibility with SDK v1
     new: cloudinaryVideoPlayerLegacyConfig

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';

src/player.js

@@ -0,0 +1,34 @@
+import VideoPlayer from './video-player';
+import { defaultProfiles } from './config/profiles';
+
+export const getProfile = async (cloudName, profile) => {
+  if (Object.keys(defaultProfiles).includes(profile)) {
+    return defaultProfiles[profile];
+  }
+
+  console.warn('Custom profiles loading mechanism will be changed soon');
+  return await fetch(profile, { method: 'GET' }).then(res => res.json());
+};
+
+const player = async (elem, initOptions, ready) => {
+  const { profile, ...filteredInitOptions } = initOptions;
+  try {
+    const profileOptions = profile ? await getProfile(filteredInitOptions.cloud_name, profile) : {};
+    const options = Object.assign({}, profileOptions.playerOptions, filteredInitOptions);
+    const videoPlayer = new VideoPlayer(elem, options, ready);
+
+    const nativeVideoPlayerSourceMethod = videoPlayer.source;
+    videoPlayer.source = (id, options) => {
+      const extendedOptions = Object.assign({}, profileOptions.sourceOptions, options);
+      return nativeVideoPlayerSourceMethod.call(videoPlayer, id, extendedOptions);
+    };
+
+    return videoPlayer;
+  } catch (e) {
+    const videoPlayer = new VideoPlayer(elem, filteredInitOptions);
+    videoPlayer.videojs.error('Invalid profile');
+    throw e;
+  }
+};
+
+export default player;

src/video-player-profile.js

@@ -10,6 +10,8 @@ export const getProfile = async (cloudName, profile) => {
 };
 
 const videoPlayerProfile = async (elem, initOptions, ready) => {
+  console.warn('videoPlayerProfile method is DEPRECATED and will be removed soon, please use new `player` method instead');
+
   if (!initOptions.profile) {
     throw new Error('VideoPlayerProfile method requires "profile" property');
   }

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'
   },