diff --git a/docs/index.html b/docs/index.html index f4cd1189..e51537a1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -21,7 +21,7 @@ diff --git a/package.json b/package.json index 997432f2..2a8340b3 100644 --- a/package.json +++ b/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", diff --git a/src/index.js b/src/index.js index 7039c419..d3b2c60d 100644 --- a/src/index.js +++ b/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; \ No newline at end of file +export default cloudinary; diff --git a/src/utils/object.js b/src/utils/object.js index f61670a6..4de5c354 100644 --- a/src/utils/object.js +++ b/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; +}; diff --git a/src/utils/string.js b/src/utils/string.js index a22ea144..a26b0bdb 100644 --- a/src/utils/string.js +++ b/src/utils/string.js @@ -1,4 +1,3 @@ - function camelize(str) { return str.replace(/[_.-](\w|$)/g, (_, x) => x.toUpperCase()); } diff --git a/src/video-player.js b/src/video-player.js index 8f34eac7..1d22ee66 100644 --- a/src/video-player.js +++ b/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(); }