Merge pull request #416 from cloudinary/ME-4810-support-cloudName

ME-4810-support-cloudName

docs/index.html

@@ -21,7 +21,7 @@
   <script type="text/javascript">
     window.addEventListener('load', function(){
 
-      player = cloudinary.videoPlayer('player', { cloud_name: 'demo' });
+      player = cloudinary.videoPlayer('player', { cloudName: 'demo' });
 
     }, false);
   </script>

package.json

@@ -66,6 +66,7 @@
   "dependencies": {
     "@cloudinary/url-gen": "^1.10.2",
     "dashjs": "^4.7.1",
+    "lodash": "^4.17.21",
     "uuid": "^9.0.0",
     "video.js": "8.3.0",
     "videojs-contrib-ads": "^6.9.0",

src/index.js

@@ -1,22 +1,31 @@
 import 'assets/styles/main.scss';
 import VideoPlayer from './video-player';
 import { assign } from 'utils/assign';
-import { omit, pick } from './utils/object';
+import { pick, convertKeysToSnakeCase } from './utils/object';
 import { CLOUDINARY_CONFIG_PARAM } from './video-player.const';
 
 if (window.cloudinary && window.cloudinary.Cloudinary) {
-  console.warn('For version 1.9.0 and above, cloudinary-core is not needed for using the Cloudinary Video Player');
+  console.warn(
+    'For version 1.9.0 and above, cloudinary-core is not needed for using the Cloudinary Video Player'
+  );
 }
 
-const getConfig = (playerOptions = {}, cloudinaryConfig) => assign(
-  omit(playerOptions, CLOUDINARY_CONFIG_PARAM),
-  { cloudinaryConfig: cloudinaryConfig || pick(playerOptions, CLOUDINARY_CONFIG_PARAM) });
+const getConfig = (playerOptions = {}, cloudinaryConfig) => {
+  const snakeCaseCloudinaryConfig = pick(convertKeysToSnakeCase(playerOptions), CLOUDINARY_CONFIG_PARAM);
 
-const getVideoPlayer = (config) => (id, playerOptions, ready) => new VideoPlayer(id, getConfig(playerOptions, config), ready);
+  // pick cld-configurations and assign them to cloudinaryConfig
+  return assign(playerOptions, {
+    cloudinaryConfig: cloudinaryConfig || snakeCaseCloudinaryConfig
+  });
+};
+
+const getVideoPlayer = config => (id, playerOptions, ready) =>
+  new VideoPlayer(id, getConfig(playerOptions, config), ready);
 
-const getVideoPlayers = (config) => (selector, playerOptions, ready) => VideoPlayer.all(selector, getConfig(playerOptions, config), ready);
+const getVideoPlayers = config => (selector, playerOptions, ready) =>
+  VideoPlayer.all(selector, getConfig(playerOptions, config), ready);
 
-const cloudinaryVideoPlayerConfig = (config) => ({
+const cloudinaryVideoPlayerConfig = config => ({
   videoPlayer: getVideoPlayer(config),
   videoPlayers: getVideoPlayers(config)
 });
@@ -36,4 +45,4 @@ const cloudinary = {
 
 window.cloudinary = cloudinary;
 
-export default cloudinary;
+export default cloudinary;

src/utils/object.js

@@ -1,3 +1,4 @@
+import snakeCase from 'lodash/snakeCase';
 
 /**
  * a nested value from an object
@@ -25,7 +26,6 @@ export const get = (value, path, defaultValue) => {
   return defaultValue;
 };
 
-
 export const pick = (obj, keys) => {
   return keys.reduce((acc, key) => {
     const value = obj[key];
@@ -49,3 +49,14 @@ export const omit = (obj, keys) => {
     return acc;
   }, {});
 };
+
+export const convertKeysToSnakeCase = (obj) => {
+  let snakeCaseObj = {};
+
+  for (const key of Object.keys(obj)) {
+    const snakeCaseKey = snakeCase(key);
+    snakeCaseObj[snakeCaseKey] = obj[key];
+  }
+
+  return snakeCaseObj;
+};

src/utils/string.js

@@ -1,4 +1,3 @@
-
 function camelize(str) {
   return str.replace(/[_.-](\w|$)/g, (_, x) => x.toUpperCase());
 }

src/video-player.js

@@ -61,6 +61,10 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     };
   }
 
+  get playerOptions() {
+    return this.options.playerOptions;
+  }
+
   constructor(elem, initOptions, ready) {
     super();
 
@@ -516,10 +520,6 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     return this.videojs.cloudinary.cloudinaryConfig(config);
   }
 
-  get playerOptions() {
-    return this.options.playerOptions;
-  }
-
   currentPublicId() {
     return this.videojs.cloudinary.currentPublicId();
   }