cloudinary-video-player 1.6.2-edge.13

package/src/utils/attributes-normalizer.js

@@ -0,0 +1,72 @@
+import { camelize } from './string';
+
+const CLD_ATTR_REGEX = /^(data-cld-)(\w+)/;
+
+const normalizers = {};
+
+function coerce(string) {
+  let val = null;
+
+  // Boolean
+  if (string === '') {
+    return true;
+  }
+
+  // Complex object
+  try {
+    val = JSON.parse(string);
+  } catch (e) {
+    // Continue execution in case str is not parsable
+  }
+  if (val) {
+    return val;
+  }
+
+  // Number
+  val = Number(string);
+  if (val) {
+    return val;
+  }
+
+  // TODO: Parse date?
+  //
+  return string;
+}
+
+const normalizeDefault = (value) => coerce(value);
+
+const normalizeAttributes = (elem) => {
+  const obj = {};
+
+  if (elem && elem.attributes && elem.attributes.length > 0) {
+    const attrs = elem.attributes;
+
+    for (let i = attrs.length - 1; i >= 0; i--) {
+      let attrName = attrs[i].name;
+      let attrVal = attrs[i].value;
+
+      if (attrName.match(CLD_ATTR_REGEX)) {
+        attrName = camelize(attrName.replace(CLD_ATTR_REGEX, '$2'));
+      }
+
+      // check for known booleans
+      // the matching element property will return a value for typeof
+      // if (typeof elem[attrName] === 'boolean' || KNOWN_BOOLEANS[attrName]) {
+      if (typeof elem[attrName] === 'boolean') {
+        // the value of an included boolean attribute is typically an empty
+        // string ('') which would equal false if we just check for a false value.
+        // we also don't want support bad code like autoplay='false'
+        attrVal = (attrVal !== null);
+      } else {
+        const normalizer = normalizers[attrName] || normalizeDefault;
+        attrVal = normalizer(attrVal);
+      }
+
+      obj[attrName] = attrVal;
+    }
+  }
+
+  return obj;
+};
+
+export { normalizeAttributes };

package/src/utils/cloudinary.js

@@ -0,0 +1,165 @@
+import Promise from 'promise-polyfill';
+import fetchPF from 'fetch-ponyfill/build/fetch-browser';
+import { cloudinaryErrorsConverter, ERROR_CODE } from '../plugins/cloudinary/common';
+import { find } from 'utils/find';
+
+const { fetch } = fetchPF({ Promise });
+
+const GET_ERROR_DEFAULT_REQUEST = { method: 'head' };
+const ERROR_WITH_GET_REQUEST = { method: 'get', credentials: 'include', headers: { 'Content-Range': 'bytes=0-0' } };
+
+
+const getGoodSrcs = (srcs, parsedUris) => {
+  return srcs.filter((s) => {
+    const origUrl = parseUri(s.src);
+    return parsedUris.indexOf(origUrl.host + origUrl.path) !== -1 && s.try !== true;
+  });
+};
+
+
+const getParsedUris = (res) => {
+  return res.reduce((acc, r) => {
+    if (r.status >= 200 && r.status < 399 && r.url !== '') {
+      const parsedUri = parseUri(r.url);
+      acc.push(parsedUri.host + parsedUri.path);
+    }
+
+    return acc;
+  }, []);
+};
+
+const setError = (that, res) => {
+  that.videojs.error(cloudinaryErrorsConverter({
+    errorMsg: res.headers.get('x-cld-error') || '',
+    publicId: that.currentPublicId(),
+    cloudName: that.cloudinaryConfig().config().cloud_name,
+    error: res,
+    statusCode: res.status
+  }));
+};
+
+const setVideoSrc = (that, srcs) => {
+  console.log('Trying urls: ' + JSON.stringify(srcs));
+  srcs.forEach(s => {
+    s.try = true;
+  });
+  that.videojs.autoplay(that.videojs.autoplay() || that.playWasCalled);
+  that.videojs.src(srcs);
+};
+
+const handleCldError = (that, options) => {
+  const opts = options.fetchErrorUsingGet ? ERROR_WITH_GET_REQUEST : GET_ERROR_DEFAULT_REQUEST;
+  const srcs = that.videojs.cloudinary.getCurrentSources();
+
+  if (srcs.length > 0) {
+    Promise.all(srcs.map((s) => fetch(s.src, opts))).then((res) => {
+      const parsedUris = getParsedUris(res);
+      const firstRes = res[0];
+      if (!parsedUris.length) {
+        setError(that, firstRes);
+      } else {
+        const goodSrcs = getGoodSrcs(srcs, parsedUris);
+
+        if (goodSrcs && goodSrcs.length) {
+          setVideoSrc(that, goodSrcs);
+        } else {
+          console.log('No urls left to try so stopping');
+          that.videojs.error({ code: ERROR_CODE.NO_SUPPORTED_MEDIA, message: 'No supported media sources', statusCode: res.status });
+        }
+      }
+    })
+      .catch(error => {
+        that.videojs.error({
+          code: 7,
+          message: error && error.message ? error.message : 'Failed to test sources'
+        });
+      });
+  } else {
+    that.videojs.error({ code: ERROR_CODE.NO_SUPPORTED_MEDIA, message: 'No supported media sources' });
+  }
+};
+
+// for IE 11
+function parseUri(str) {
+  const o = {
+    strictMode: false,
+    key: ['source', 'protocol', 'authority', 'userInfo', 'user', 'password', 'host', 'port', 'relative', 'path', 'directory', 'file', 'query', 'anchor'],
+    q: {
+      name: 'queryKey',
+      parser: /(?:^|&)([^&=]*)=?([^&]*)/g
+    },
+    parser: {
+      strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
+      loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
+    }
+  };
+  const m = o.parser[o.strictMode ? 'strict' : 'loose'].exec(str);
+  const uri = {};
+  let i = 14;
+
+  while (i--) {
+    uri[o.key[i]] = m[i] || '';
+  }
+
+  uri[o.q.name] = {};
+  uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
+    if ($1) {
+      uri[o.q.name][$1] = $2;
+    }
+  });
+
+  return uri;
+}
+
+function getCloudinaryInstanceOf(Klass, obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(e => getCloudinaryInstanceOf(Klass, e));
+  }
+  if (obj instanceof Klass) {
+    return obj;
+  } else {
+    return new Klass(obj);
+  }
+}
+
+/**
+ * Check if key exist in transformation
+ * @param transformation
+ * @param key
+ * @returns true if key exists in transformation, false otherwise
+ */
+const isKeyInTransformation = (transformation, key) => {
+  if (!transformation || !key) {
+    return false;
+  }
+
+  // transformation is an array so run this function for each item
+  if (Array.isArray(transformation)) {
+    return !!find(transformation, (t) => isKeyInTransformation(t, key));
+  }
+
+  // transformation is a Transformation object so use getValue() to check key
+  if (transformation.getValue) {
+    return !!transformation.getValue(key);
+  }
+
+  // transformation is an Object so just check for key existence in object
+  return !!transformation[key];
+};
+
+const filterAndAddTextTracks = (tracks, videojs) => {
+  tracks.forEach(track => {
+    fetch(track.src, GET_ERROR_DEFAULT_REQUEST).then(r => {
+      if (r.status >= 200 && r.status <= 399) {
+        videojs.addRemoteTextTrack(track, true);
+      }
+    });
+  });
+};
+
+export {
+  getCloudinaryInstanceOf,
+  handleCldError,
+  isKeyInTransformation,
+  filterAndAddTextTracks
+};

package/src/utils/css-prefix.js

@@ -0,0 +1,43 @@
+import { startsWith } from './string';
+import defaults from '../config/defaults';
+import { find } from './find';
+
+const CLASS_PREFIX = 'cld-video-player';
+const SKIN_CLASS_PREFIX = `${CLASS_PREFIX}-skin-`;
+
+const playerClassPrefix = (componentInstance) => `${CLASS_PREFIX}-${componentInstance.id_}`;
+
+const skinClass = (skin) => `${SKIN_CLASS_PREFIX}${skin}`;
+
+const skinClassPrefix = (componentInstance) => find(componentInstance.el().classList, (cls) => startsWith(cls, SKIN_CLASS_PREFIX));
+
+const setSkinClassPrefix = (componentInstance, name) => {
+  const currentSkinPrefix = skinClassPrefix(componentInstance);
+  const skinName = name ? name.replace(SKIN_CLASS_PREFIX, '') : false;
+
+  let newSkinPrefix = '';
+  if (skinName) {
+    // From html class
+    newSkinPrefix = skinClass(skinName);
+  } else if (componentInstance.options_.skin) {
+    // From JS config
+    newSkinPrefix = skinClass(componentInstance.options_.skin);
+  } else {
+    // Defult
+    newSkinPrefix = skinClass(defaults.skin);
+  }
+
+  if (newSkinPrefix !== currentSkinPrefix) {
+    if (currentSkinPrefix) {
+      componentInstance.removeClass(currentSkinPrefix);
+    }
+    componentInstance.addClass(newSkinPrefix);
+  }
+
+  if (skinName && componentInstance.options_.skin !== skinName) {
+    componentInstance.options_.skin = skinName;
+  }
+
+};
+
+export { CLASS_PREFIX, playerClassPrefix, skinClassPrefix, skinClass, setSkinClassPrefix };

package/src/utils/dom.js

@@ -0,0 +1,74 @@
+import { castArray } from './array';
+import { isElement } from './type-inference';
+
+const wrap = (el, wrapper) => {
+  el.parentNode.insertBefore(wrapper, el);
+  wrapper.appendChild(el);
+
+  return wrapper;
+};
+
+const createElement = (elementName, attributes = {}, children) => {
+  const element = document.createElement(elementName);
+
+  for (let key in attributes) {
+    if (Object.prototype.hasOwnProperty.call(attributes, key)) {
+      element.setAttribute(key, attributes[key]);
+    }
+  }
+
+  castArray(children).forEach(child => appendChild(child, element));
+
+  return element;
+};
+
+const appendChild = (child, element) => {
+  if (isElement(child)) {
+    element.appendChild(child);
+  } else if (child && typeof child !== 'object') {
+    const text = document.createTextNode(child);
+    element.appendChild(text);
+  }
+};
+
+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, elementsCreator, addEventListener };

package/src/utils/find.js

@@ -0,0 +1,28 @@
+function find(list, callback) {
+  if (Array.prototype.find && Array.isArray(list)) {
+    return list.find(callback);
+  }
+
+  return findElementAndIndex(list, callback)[0];
+}
+
+function findIndex(list, callback) {
+  if (Array.prototype.findIndex) {
+    return list.findIndex(callback);
+  }
+
+  return findElementAndIndex(list, callback)[1];
+}
+
+function findElementAndIndex(list, callback) {
+  for (let i = 0; i < list.length; i++) {
+    const element = list[i];
+    if (callback(element, i, list)) {
+      return [element, i];
+    }
+  }
+
+  return [undefined, -1];
+}
+
+export { find, findIndex, findElementAndIndex };

package/src/utils/fontFace.js

@@ -0,0 +1,25 @@
+import WebFont from 'webfontloader';
+
+const FONT_FAMILY = 'Fira Sans';
+
+const fontFace = (elem, options) => {
+  let fontFace = options.cloudinary.fontFace;
+
+  // Default font-face is "Fira sans"
+  if (typeof fontFace === 'undefined') {
+    fontFace = FONT_FAMILY;
+  }
+
+  if (fontFace && fontFace !== 'inherit') {
+    WebFont.load({
+      google: {
+        families: [fontFace]
+      }
+    });
+    elem.style.fontFamily = fontFace;
+  } else if (fontFace === 'inherit') {
+    elem.style.fontFamily = 'inherit';
+  }
+};
+
+export { fontFace };

package/src/utils/groupBy.js

@@ -0,0 +1,12 @@
+
+const groupBy = (collection, iteratee) => collection.reduce((result, value, key) => {
+  key = iteratee(value);
+  if (Object.prototype.hasOwnProperty.call(result, key)) {
+    result[key].push(value);
+  } else {
+    result[key] = [value];
+  }
+  return result;
+}, {});
+
+export { groupBy };

package/src/utils/index.js

@@ -0,0 +1,29 @@
+import * as assign from './assign';
+import * as slicing from './slicing';
+import * as positioning from './positioning';
+import * as string from './string';
+import * as cloudinaryUtils from './cloudinary';
+import * as applyWithProps from './apply-with-props';
+import * as groupBy from './groupBy';
+import * as mixin from './mixin';
+import * as fontFace from './fontFace';
+import * as playButton from './playButton';
+import * as cssPrefix from './css-prefix';
+import * as normalizeAttributes from './attributes-normalizer';
+
+const Utils = assign.assign({},
+  assign,
+  slicing,
+  positioning,
+  string,
+  cloudinaryUtils,
+  fontFace,
+  playButton,
+  groupBy,
+  applyWithProps,
+  mixin,
+  cssPrefix,
+  normalizeAttributes
+);
+
+export default Utils;

package/src/utils/matches.js

@@ -0,0 +1,11 @@
+
+// Test for matches()/
+const elMatches = (el, selector) => {
+  let p = Element.prototype;
+  let f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function (s) {
+    return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
+  };
+  return f.call(el, selector);
+};
+
+export { elMatches };

package/src/utils/mixin.js

@@ -0,0 +1,5 @@
+function mixin(...mixins) {
+  return mixins.reduce((c, mixin) => mixin(c), class Blank {});
+}
+
+export { mixin };

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/playButton.js

@@ -0,0 +1,9 @@
+
+const playButton = (elem, options) => {
+  if (options.bigPlayButton === 'init') {
+    elem.classList.add('vjs-big-play-button-init-only');
+    options.bigPlayButton = true;
+  }
+};
+
+export { playButton };

package/src/utils/positioning.js

@@ -0,0 +1,78 @@
+function getElementPosition(el) {
+  const box = el.getBoundingClientRect();
+
+  const body = document.body;
+  const docEl = document.documentElement;
+
+  const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+  const scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+
+  const clientTop = docEl.clientTop || body.clientTop || 0;
+  const clientLeft = docEl.clientLeft || body.clientLeft || 0;
+
+  const top = box.top + scrollTop - clientTop;
+  const left = box.left + scrollLeft - clientLeft;
+
+  return {
+    top: Math.round(top),
+    left: Math.round(left)
+  };
+}
+
+/**
+ * Get pointer position in element
+ * Returns an object with x and y coordinates.
+ * The base on the coordinates are the bottom left of the element.
+ *
+ * @function getPointerPosition
+ * @param {Element} el Element on which to get the pointer position on
+ * @param {Event} event Event object
+ * @return {Object}
+ *         This object will have x and y coordinates corresponding to the
+ *         mouse position
+ */
+function getPointerPosition(el, event) {
+  const position = {};
+  const box = getElementPosition(el);
+  const boxW = el.offsetWidth;
+  const boxH = el.offsetHeight;
+  const boxY = box.top;
+  const boxX = box.left;
+  let pageY = event.pageY;
+  let pageX = event.pageX;
+
+  if (event.changedTouches) {
+    pageX = event.changedTouches[0].pageX;
+    pageY = event.changedTouches[0].pageY;
+  }
+
+  position.y = Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH));
+  position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW));
+
+  return position;
+}
+
+function isElementInViewport(el, { fraction }) {
+  const topLeft = getElementPosition(el);
+  const x = topLeft.left;
+  const y = topLeft.top;
+  const h = el.offsetHeight;
+  const w = el.offsetWidth;
+  const r = x + w;
+  const b = y + h;
+  const visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x,
+    r - window.pageXOffset));
+  const visibleY = Math.max(0, Math.min(w, window.pageYOffset + window.innerHeight - y,
+    b - window.pageYOffset));
+
+  const visible = visibleX * visibleY / (w * h);
+
+  return visible > fraction;
+}
+
+function setPosition(el, left, top) {
+  el.style.left = `${left}px`;
+  el.style.top = `${top}px`;
+}
+
+export { getElementPosition, getPointerPosition, isElementInViewport, setPosition };

package/src/utils/querystring.js

@@ -0,0 +1,12 @@
+const objectToQuerystring = (obj) => {
+  const keys = Object.keys(obj);
+
+  if (!keys.length) {
+    return '';
+  }
+
+  const query = keys.map((key) => `${key}=${obj[key]}`).join('&');
+  return `?${query}`;
+};
+
+export { objectToQuerystring };

package/src/utils/slicing.js

@@ -0,0 +1,21 @@
+function _sliceProperties(obj, isUnset, ...props) {
+  return props.reduce((acc, prop) => {
+    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
+      acc[prop] = obj[prop];
+      if (isUnset) {
+        delete obj[prop];
+      }
+    }
+    return acc;
+  }, {});
+}
+
+function sliceProperties(obj, ...props) {
+  return _sliceProperties(obj, false, ...props);
+}
+
+function sliceAndUnsetProperties(obj, ...props) {
+  return _sliceProperties(obj, true, ...props);
+}
+
+export { sliceProperties, sliceAndUnsetProperties };

package/src/utils/string.js

@@ -0,0 +1,15 @@
+
+function camelize(str) {
+  return str.replace(/[_.-](\w|$)/g, (_, x) => x.toUpperCase());
+}
+
+function startsWith(str, searchStr, position) {
+  if (String.prototype.startsWith) {
+    return str.startsWith(searchStr, position);
+  } else {
+    let position = position || 0;
+    return str.indexOf(searchStr, position) === position;
+  }
+}
+
+export { camelize, startsWith };

package/src/utils/throttle.js

@@ -0,0 +1,30 @@
+/**
+ * Wraps the given function, `fn`, with a new function that only invokes `fn`
+ * at most once per every `wait` milliseconds.
+ *
+ * @function
+ * @param    {Function} fn
+ *           The function to be throttled.
+ *
+ * @param    {number}   wait
+ *           The number of milliseconds by which to throttle.
+ *
+ * @return   {Function}
+ */
+
+function throttle(fn, wait) {
+  let last = window.performance.now();
+
+  const throttled = function(...args) {
+    const now = window.performance.now();
+
+    if (now - last >= wait) {
+      fn(...args);
+      last = now;
+    }
+  };
+
+  return throttled;
+}
+
+export { throttle };