cloudinary-video-player 1.5.5 → 1.5.9

package/src/plugins/cloudinary/models/video-source/video-source.utils.js

@@ -1,5 +1,8 @@
 import { CONTAINER_MIME_TYPES, FORMAT_MAPPINGS } from './video-source.const';
-import { codecShorthandTrans, codecToSrcTransformation } from '../../common';
+import { codecShorthandTrans, codecToSrcTransformation, VIDEO_CODEC } from '../../common';
+import { isPlainObject, isString } from '../../../../utils/type-inference';
+import { isKeyInTransformation } from 'utils/cloudinary';
+import { some } from '../../../../utils/array';
 
 export function formatToMimeTypeAndTransformation(format) {
   const [container, codec] = format.toLowerCase().split('\/');
@@ -28,3 +31,27 @@ export function normalizeFormat(format) {
 
   return res;
 }
+
+const isContainCodec = (value) => value && some(Object.values(VIDEO_CODEC), (codec) => value.includes(codec));
+
+const hasCodecSrcTrans = (transformations) => some(['video_codec', 'streaming_profile'], (key) => isKeyInTransformation(transformations, key));
+
+export const isCodecAlreadyExist = (transformations, rawTransformation) => {
+  if (!(transformations || rawTransformation)) {
+    return false;
+  }
+
+  if (hasCodecSrcTrans(transformations)) {
+    return true;
+  }
+
+  if (isString(rawTransformation)) {
+    return isContainCodec(rawTransformation);
+  }
+
+  return some(transformations, (transformation) => {
+    const options = transformation.toOptions();
+
+    return some(options && options.transformation, (item) => isContainCodec(isPlainObject(item) ? item.video_codec : item));
+  });
+};

package/src/plugins/colors/index.js

@@ -1,5 +1,6 @@
 import { assign } from 'utils/assign';
 import { playerClassPrefix } from 'utils/css-prefix';
+import { isLight } from '../../video-player.utils';
 
 const playerColors = `
   .PLAYER-CLASS-PREFIX {
@@ -233,11 +234,15 @@ const defaults = {
   }
 };
 
+export const getDefaultPlayerColor = (options) => {
+  return isLight(options) ? defaults.colorsLight : defaults.colorsDark;
+};
+
 class Colors {
   constructor(player, opts = {}) {
     this.player = player;
 
-    const skinDefaults = this.player.options_.skin === 'light' ? defaults.colorsLight : defaults.colorsDark;
+    const skinDefaults = getDefaultPlayerColor(this.player.options_);
 
     opts.colors = assign({}, skinDefaults, opts.colors);
 

package/src/plugins/dash/videojs-dash.js

@@ -4,7 +4,7 @@ import dashjs from 'dashjs';
 import setupAudioTracks from './setup-audio-tracks';
 import setupTextTracks from './setup-text-tracks';
 import document from 'global/document';
-import {assign} from '../../utils/assign';
+import { assign } from '../../utils/assign';
 
 /**
  * videojs-contrib-dash

package/src/plugins/floating-player/index.js

@@ -2,6 +2,7 @@ import { isElementInViewport } from 'utils/positioning';
 import { sliceProperties } from 'utils/slicing';
 import { assign } from 'utils/assign';
 import './floating-player.scss';
+import { FLOATING_TO } from '../../video-player.const';
 
 const defaults = {
   fraction: 0.5,
@@ -10,10 +11,11 @@ const defaults = {
 };
 
 class FloatingPlayer {
+
   constructor(player, opts = {}) {
     opts = assign({}, defaults, opts);
     // Handle non left-right values.
-    if (opts.floatTo && opts.floatTo !== 'left' && opts.floatTo !== 'right') {
+    if (opts.floatTo && opts.floatTo !== FLOATING_TO.LEFT && opts.floatTo !== FLOATING_TO.RIGHT) {
       opts.floatTo = defaults.floatTo;
     }
 

package/src/utils/array.js

@@ -1 +1,22 @@
+
 export const castArray = (value) => Array.isArray(value) ? value : [value];
+
+export const forEach = (value, callback) => {
+  if (Array.isArray(value) && value.length) {
+    value.forEach(callback);
+  }
+};
+
+export const some = (value, callback) => {
+  if (Array.isArray(value) && value.length) {
+    return value.some(callback);
+  }
+
+  return false;
+};
+
+export const map = (value, callback) => {
+  if (Array.isArray(value) && value.length) {
+    return value.map(callback);
+  }
+};

package/src/utils/dom.js

@@ -12,7 +12,7 @@ const createElement = (elementName, attributes = {}, children) => {
   const element = document.createElement(elementName);
 
   for (let key in attributes) {
-    if (attributes[key]) {
+    if (Object.prototype.hasOwnProperty.call(attributes, key)) {
       element.setAttribute(key, attributes[key]);
     }
   }
@@ -31,5 +31,44 @@ const appendChild = (child, element) => {
   }
 };
 
+export const styleElement = (element, style) => {
+  for (let key in style) {
+    if (Object.prototype.hasOwnProperty.call(style, key)) {
+      element.style[key] = style[key];
+    }
+  }
+
+  return element;
+};
+
+const elementsCreator = (item) => {
+  const children = Array.isArray(item.children) ? item.children.map(elementsCreator) : item.children;
+
+  const element = isElement(item) ? item : createElement(item.tag, item.attr, children);
+
+  if (item.onClick) {
+    item.event = { name: 'click', callback: item.onClick };
+  }
+
+  if (item.event) {
+    element.addEventListener(item.event.name, item.event.callback, false);
+  }
+
+  if (item.style) {
+    styleElement(element, item.style);
+  }
+
+  return element;
+};
+
+
+const addEventListener = (element, name, cb) => {
+  element.addEventListener(name, cb, false);
+
+  return () => {
+    element.removeEventListener(name, cb, false);
+  };
+};
+
 
-export { wrap, createElement };
+export { wrap, createElement, elementsCreator, addEventListener };

package/src/utils/object.js

@@ -0,0 +1,26 @@
+
+/**
+ * a nested value from an object
+ * @param  {object} value -  a object you want to get a nested value from
+ * @param  {string} path - path to the nested value, key separated by . (dots)
+ * @param  {any} defaultValue - a default Value in case the value is not defined
+ * @returns a nested value from an object / array
+ */
+export const get = (value, path, defaultValue) => {
+  if (value && typeof value === 'object') {
+    const keysArray = path.split('.');
+    let getValue = value;
+
+    for (let objectValue of keysArray) {
+      if (Object.prototype.hasOwnProperty.call(getValue, objectValue) && getValue[objectValue] !== undefined) {
+        getValue = getValue[objectValue];
+      } else {
+        return defaultValue;
+      }
+    }
+
+    return getValue;
+  }
+
+  return defaultValue;
+};

package/src/utils/time.js

@@ -47,4 +47,31 @@ const parseTime = function (hms) {
   return sum;
 };
 
-export { parseISO8601, parseTime };
+const debounce = (func, wait) => {
+
+  let _timeout = null;
+
+  return (...args) => {
+    clearTimeout(_timeout);
+
+    _timeout = setTimeout(() => {
+      func.apply(this, args);
+    }, wait);
+  };
+
+};
+
+const throttle = (func, wait) => {
+  let last = 0;
+
+  return (...args) => {
+    const now = new Date();
+
+    if (now - last >= wait) {
+      func.apply(this, args);
+      last = now;
+    }
+  };
+};
+
+export { parseISO8601, parseTime, debounce, throttle };

package/src/utils/type-inference.js

@@ -16,6 +16,10 @@ function isInteger(data) {
   return typeof data === 'number' && (data % 1) === 0;
 }
 
+function isBoolean(data) {
+  return typeof data === 'boolean';
+}
+
 function isElement(value) {
   return value instanceof Element;
 }
@@ -28,4 +32,4 @@ function noop() {
   return null;
 }
 
-export { isPlainObject, isString, isInteger, isNumber, isElement, noop, isFunction };
+export { isPlainObject, isString, isInteger, isNumber, isElement, noop, isFunction, isBoolean };

package/src/validators/validators-functions.js

@@ -0,0 +1,48 @@
+import { isFunction, isPlainObject } from '../utils/type-inference';
+
+
+export const getValidatorItem = (validator) => isFunction(validator) ? validator() : validator;
+
+/**
+ * check if a value is valid or not
+ * @param  {object | function} validator -  a config object
+ * @param  {any} value
+ * @param  {key} string
+ * @returns boolean - using the validators to check if the value is a valid value or not
+ */
+export const isValueValid = (validator, value, configPropertyName) => {
+  const validatorItem = getValidatorItem(validator);
+  const isValid = validatorItem.value(value);
+
+  if (!isValid) {
+    console.error(`cloudinary video player: ${validatorItem.message(configPropertyName)}`);
+  }
+
+  return isValid;
+};
+
+/**
+ * check if a configuration object is valid or not
+ * @param  {object} config -  a config object
+ * @param  {object} validators
+ * @returns boolean - true is the configuration object is valid and false if it is not
+ */
+export const isValidConfig = (config, validators) => {
+  if (isPlainObject(validators)) {
+    for (let key in config) {
+      if (Object.prototype.hasOwnProperty.call(validators, key)) {
+        const configValue = config[key];
+        const validatorValue = validators[key];
+        const isObject = isPlainObject(configValue);
+
+        if (isObject && !isValidConfig(configValue, validatorValue)) {
+          return false;
+        } else if (!isObject && !isValueValid(validatorValue, configValue, key)) {
+          return false;
+        }
+      }
+    }
+  }
+
+  return true;
+};

package/src/validators/validators-types.js

@@ -0,0 +1,78 @@
+import { isBoolean, isFunction, isNumber, isPlainObject, isString } from '../utils/type-inference';
+import { getValidatorItem, isValueValid } from './validators-functions';
+import { some, map } from '../utils/array';
+
+const getOptionsString = (options) => isPlainObject(options) ? `:(${Object.values(options).join('/')})` : '';
+
+const arrayOfStringsValidator = () => ({
+  value: (arr) => Array.isArray(arr) && arr.every(isString),
+  message: (key) => `'${key}' should be an array of strings`
+});
+
+const arrayOfNumbersValidator = () => ({
+  value: (arr) => Array.isArray(arr) && arr.every(isNumber),
+  message: (key) => `'${key}' should be an array of numbers`
+});
+
+const arrayOfObjectsValidator = (options) => ({
+  value: (arr) => {
+    return arr.every((item) => {
+      for (let key in item) {
+        if (Object.prototype.hasOwnProperty.call(item, key)) {
+          const value = item[key];
+          const validator = options[key];
+          const isValid = validator && isValueValid(validator(value), value, key);
+
+          if (!isValid) {
+            return false;
+          }
+        }
+      }
+
+      return true;
+    });
+  },
+  message: () => 'invalid array'
+});
+
+const orValidator = (...validators) => {
+  return () => ({
+    value: (value) => some(validators, (validator) => getValidatorItem(validator).value(value)),
+    message: (configPropertyName) => map(validators, (validator) => getValidatorItem(validator).message(configPropertyName)).join(' or ')
+  });
+};
+
+export const validator = {
+  isString: (options) => ({
+    value: isString,
+    message: (key) => `'${key}' should be a string${getOptionsString(options)}`
+  }),
+  isNumber: (options) => ({
+    value: isNumber,
+    message: (key) => `'${key}' should be a number${getOptionsString(options)}`
+  }),
+  isBoolean: () => ({
+    value: isBoolean,
+    message: (key) => `'${key}' should be a boolean`
+  }),
+  isFunction: () => ({
+    value: isFunction,
+    message: (key) => `'${key}' should be a function`
+  }),
+  isPlainObject: () => ({
+    value: isPlainObject,
+    message: (key) => `'${key}' should be an object`
+  }),
+  isObject: () => ({
+    value: (value) => value && typeof value === 'object',
+    message: (key) => `'${key}' should be an object`
+  }),
+  isArray: () => ({
+    value: Array.isArray,
+    message: (key) => `'${key}' should be an array`
+  }),
+  isArrayOfNumbers: arrayOfNumbersValidator,
+  isArrayOfStrings: arrayOfStringsValidator,
+  isArrayOfObjects: arrayOfObjectsValidator,
+  or: orValidator
+};

package/src/validators/validators.js

@@ -0,0 +1,110 @@
+import { ADS_IN_PLAYLIST, AUTO_PLAY_MODE, FLOATING_TO } from '../video-player.const';
+import {
+  INTERACTION_AREAS_TEMPLATE,
+  INTERACTION_AREAS_THEME
+} from '../components/interaction-area/interaction-area.const';
+import { validator } from './validators-types';
+
+export const playerValidators = {
+  videojsOptions: {
+    loop: validator.isBoolean,
+    controls: validator.isBoolean,
+    autoplay: validator.isBoolean,
+    autoplayMode: validator.isString(AUTO_PLAY_MODE),
+    bigPlayButton: validator.isBoolean,
+    playbackRates: validator.isArray,
+    showLogo: validator.isBoolean,
+    logoImageUrl: validator.isString,
+    logoOnclickUrl: validator.isString,
+    videoJS: validator.isPlainObject,
+    maxTries: validator.isNumber,
+    muted: validator.isBoolean,
+    playsinline: validator.isBoolean,
+    videoTimeout: validator.isNumber,
+    preload: validator.isString,
+    sourceTransformation: validator.isPlainObject,
+    allowUsageReport: validator.isBoolean,
+    interactionAreas: {
+      theme: {
+        template: validator.isString(INTERACTION_AREAS_THEME)
+      },
+      layout: {
+        enable: validator.isBoolean,
+        showAgain: validator.isBoolean
+      }
+    }
+  },
+  playerOptions: {
+    publicId: validator.isString,
+    fluid: validator.isBoolean,
+    analytics: validator.isBoolean,
+    hideContextMenu: validator.isBoolean,
+    playedEventPercents: validator.isArrayOfNumbers,
+    showJumpControls: validator.isBoolean,
+    seekThumbnails: validator.isBoolean,
+    floatingWhenNotVisible: validator.isString(FLOATING_TO),
+    playedEventTimes: validator.isArray,
+    playlistWidget: {
+      direction: validator.isString,
+      total: validator.isNumber
+    },
+    colors: {
+      base: validator.isString,
+      accent: validator.isString,
+      text: validator.isString
+    },
+    ads: {
+      adTagUrl: validator.isString,
+      showCountdown: validator.isBoolean,
+      adLabel: validator.isString,
+      locale: validator.isString,
+      prerollTimeout: validator.isNumber,
+      postrollTimeout: validator.isNumber,
+      adsInPlaylist: validator.isString(ADS_IN_PLAYLIST)
+    },
+    cloudinary: {
+      autoShowRecommendations: validator.isBoolean,
+      sourceTypes: validator.isArrayOfStrings,
+      transformation: validator.isObject,
+      fontFace: validator.isString,
+      posterOptions: {
+        publicId: validator.isString,
+        transformation: validator.isObject
+      }
+    }
+  }
+};
+
+export const sourceValidators = {
+  raw_transformation: validator.isString,
+  shoppable: validator.isPlainObject,
+  withCredentials: validator.isBoolean,
+  interactionAreas: {
+    enable: validator.isBoolean,
+    template: validator.or(validator.isString(INTERACTION_AREAS_TEMPLATE), validator.isArray),
+    vttUrl: validator.isString,
+    onClick: validator.isFunction
+  },
+  textTracks: {
+    captions: {
+      label: validator.isString,
+      language: validator.isString,
+      default: validator.isBoolean,
+      url: validator.isString
+    },
+    subtitles: validator.isArrayOfObjects({
+      label: validator.isString,
+      language: validator.isString,
+      url: validator.isString
+    })
+  },
+  info: {
+    title: validator.isString,
+    subtitle: validator.isString,
+    description: validator.isString
+  },
+  cloudinary: {
+    sourceTypes: validator.isArrayOfStrings,
+    transformation: validator.isObject
+  }
+};

package/src/video-player.const.js

@@ -33,20 +33,6 @@ export const PLAYER_PARAMS = CLOUDINARY_PARAMS.concat([
   'seekThumbnails'
 ]);
 
-const INTERACTION_AREAS_TEMPLATE = {
-  PORTRAIT: 'portrait',
-  LANDSCAPE: 'landscape',
-  All: 'all',
-  CENTER: 'center'
-};
-
-export const TEMPLATE_INTERACTION_AREAS_VTT = {
-  [INTERACTION_AREAS_TEMPLATE.PORTRAIT]: 'https://res.cloudinary.com/prod/raw/upload/v1623772481/video-player/vtts/portrait.vtt',
-  [INTERACTION_AREAS_TEMPLATE.LANDSCAPE]: 'https://res.cloudinary.com/prod/raw/upload/v1623772303/video-player/vtts/landscape.vtt',
-  [INTERACTION_AREAS_TEMPLATE.All]: 'https://res.cloudinary.com/prod/raw/upload/v1623250266/video-player/vtts/all.vtt',
-  [INTERACTION_AREAS_TEMPLATE.CENTER]: 'https://res.cloudinary.com/prod/raw/upload/v1623250265/video-player/vtts/center.vtt'
-};
-
 export const DEFAULT_HLS_OPTIONS = {
   html5: {
     handlePartialData: false,
@@ -56,6 +42,27 @@ export const DEFAULT_HLS_OPTIONS = {
   }
 };
 
-export const INTERACTION_AREAS_CONTAINER_CLASS_NAME = 'interaction-areas-container';
-
 export const FLUID_CLASS_NAME = 'cld-fluid';
+
+export const AUTO_PLAY_MODE = {
+  ALWAYS: 'always',
+  ON_SCROLL: 'on-scroll',
+  NEVER: 'never'
+};
+
+export const FLOATING_TO = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  NONE: 'none'
+};
+
+export const ADS_IN_PLAYLIST = {
+  FIRST_VIDEO: 'first-video',
+  EVERY_VIDEO: 'every-video'
+};
+
+export const PRELOAD = {
+  AUTO: 'auto',
+  METADATA: 'metadata',
+  NONE: 'none'
+};