cloudinary-video-player 1.6.2-edge.13

package/src/utils/time.js

@@ -0,0 +1,77 @@
+// https://github.com/csnover/js-iso8601/blob/master/iso8601.js
+const numericKeys = [1, 4, 5, 6, 7, 10, 11];
+
+const parseISO8601 = function (date) {
+  let timestamp = 0;
+  let struct = 0;
+  let minutesOffset = 0;
+
+  // ES5 §15.9.4.2 states that the string should attempt to be parsed as a Date Time String Format string
+  // before falling back to any implementation-specific date parsing, so that’s what we do, even if native
+  // implementations could be faster
+  //              1 YYYY                2 MM       3 DD           4 HH    5 mm       6 ss        7 msec        8 Z 9 ±    10 tzHH    11 tzmm
+  if ((struct = /^(\d{4}|[+\-]\d{6})(?:-(\d{2})(?:-(\d{2}))?)?(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/.exec(date))) {
+    // avoid NaN timestamps caused by “undefined” values being passed to Date.UTC
+    for (let i = 0, k; (k = numericKeys[i]); ++i) {
+      struct[k] = +struct[k] || 0;
+    }
+
+    // allow undefined days and months
+    struct[2] = (+struct[2] || 1) - 1;
+    struct[3] = +struct[3] || 1;
+
+    if (struct[8] !== 'Z' && struct[9] !== undefined) {
+      minutesOffset = struct[10] * 60 + struct[11];
+
+      if (struct[9] === '+') {
+        minutesOffset = 0 - minutesOffset;
+      }
+    }
+
+    timestamp = Date.UTC(struct[1], struct[2], struct[3], struct[4], struct[5] + minutesOffset, struct[6], struct[7]);
+  } else {
+    timestamp = NaN;
+  }
+
+  return timestamp;
+};
+
+// Convert time string i.e. '2:40' to seconds number (160)
+// Also allows h:m:s format and mm:ss, m:s etc.
+const parseTime = function (hms) {
+  const [seconds, minutes, hours] = hms.split(':').reverse();
+  let sum = null;
+  if (!isNaN(seconds)) {
+    sum = (+hours || 0) * 60 * 60 + (+minutes || 0) * 60 + (+seconds);
+  }
+  return sum;
+};
+
+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

@@ -0,0 +1,35 @@
+function isPlainObject(obj) {
+  return obj !== null &&
+    typeof obj === 'object' &&
+    Object.prototype.toString.call(obj) === '[object Object]';
+}
+
+function isString(obj) {
+  return obj instanceof String || typeof obj === 'string';
+}
+
+function isNumber(data) {
+  return data instanceof Number || typeof data === 'number';
+}
+
+function isInteger(data) {
+  return typeof data === 'number' && (data % 1) === 0;
+}
+
+function isBoolean(data) {
+  return typeof data === 'boolean';
+}
+
+function isElement(value) {
+  return value instanceof Element;
+}
+
+function isFunction(data) {
+  return typeof data === 'function';
+}
+
+function noop() {
+  return null;
+}
+
+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

@@ -0,0 +1,68 @@
+import videojs from 'video.js';
+
+export const CLOUDINARY_PARAMS = [
+  'cloudinaryConfig',
+  'transformation',
+  'sourceTypes',
+  'sourceTransformation',
+  'posterOptions',
+  'autoShowRecommendations',
+  'fontFace',
+  'secure'
+];
+
+export const PLAYER_PARAMS = CLOUDINARY_PARAMS.concat([
+  'publicId',
+  'source',
+  'autoplayMode',
+  'playedEventPercents',
+  'playedEventTimes',
+  'analytics',
+  'fluid',
+  'ima',
+  'playlistWidget',
+  'hideContextMenu',
+  'colors',
+  'floatingWhenNotVisible',
+  'ads',
+  'showJumpControls',
+  'textTracks',
+  'qualitySelector',
+  'fetchErrorUsingGet',
+  'withCredentials',
+  'seekThumbnails'
+]);
+
+export const DEFAULT_HLS_OPTIONS = {
+  html5: {
+    handlePartialData: false,
+    hls: {
+      overrideNative: videojs && videojs.browser ? !videojs.browser.IS_IOS && !videojs.browser.IS_SAFARI : true
+    }
+  }
+};
+
+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'
+};