cloudinary-video-player 1.6.2-edge.13

package/src/plugins/cloudinary/common.js

@@ -0,0 +1,216 @@
+import cloudinary from 'cloudinary-core';
+import { assign } from 'utils/assign';
+import { sliceAndUnsetProperties } from 'utils/slicing';
+import { isString, isPlainObject } from 'utils/type-inference';
+
+const normalizeOptions = (publicId, options, { tolerateMissingId = false } = {}) => {
+  if (isPlainObject(publicId)) {
+    const _options = assign({}, publicId);
+
+    publicId = sliceAndUnsetProperties(_options, 'publicId').publicId;
+
+    if (!isString(publicId) && !tolerateMissingId) {
+      throw new Error('Source is missing \'publicId\'.');
+    }
+
+    if (options) {
+      options = assign({}, _options, options);
+    }
+  }
+
+  return { publicId, options };
+};
+
+const isSrcEqual = (source1, source2) => {
+  let src1 = source1;
+  let src2 = source2;
+
+  if (typeof source1 === 'object') {
+    src1 = source1.src;
+  }
+
+  if (typeof source2 === 'object') {
+    src2 = source2.src;
+  }
+
+  if (/^\/\//.test(src1)) {
+    src2 = src2.slice(src2.indexOf('//'));
+  }
+  if (/^\/\//.test(src2)) {
+    src1 = src1.slice(src1.indexOf('//'));
+  }
+
+  return src1 === src2;
+};
+
+const mergeCloudinaryConfig = (config1, config2) => {
+  if (config1.constructor.name === 'Cloudinary' && config1.config) {
+    config1 = config1.config();
+  }
+
+  const newConfig = new cloudinary.Cloudinary(config1);
+
+  if (config2.constructor.name === 'Cloudinary' && config2.config) {
+    config2 = config1.config();
+  }
+
+  return newConfig.config(config2);
+};
+
+const mergeTransformation = (transformation1, transformation2) => {
+  if (transformation1.constructor.name === 'Transformation' && transformation1.toOptions) {
+    transformation1 = transformation1.toOptions();
+  }
+
+  const newTransformation = new cloudinary.Transformation(transformation1);
+
+  return newTransformation.fromOptions(transformation2);
+};
+
+const ERROR_CODE = {
+  NO_SUPPORTED_MEDIA: 6,
+  CUSTOM: 10,
+  UNKNOWN_CUSTOMER: 11,
+  RESOURCE_NOT_FOUND: 12,
+  PRIVATE_RESOURCE: 13,
+  UNAUTHENTICATED: 14
+};
+
+const cloudinaryErrorsConverter = ({ errorMsg, publicId, cloudName, statusCode }) => {
+  const msg = 'Video cannot be played';
+  let error = { code: ERROR_CODE.CUSTOM, message: `${msg}${errorMsg ? '- ' + errorMsg : ''}`, statusCode: statusCode };
+  let err = errorMsg.toLowerCase();
+  if (err.startsWith('unknown customer')) {
+    error.code = ERROR_CODE.UNKNOWN_CUSTOMER;
+    error.message = `${msg} Unknown cloud-name ${cloudName}`;
+  }
+  if (err.startsWith('resource not found')) {
+    error.code = ERROR_CODE.RESOURCE_NOT_FOUND;
+    error.message = `${msg} Public ID ${publicId} not found`;
+  }
+  if (err.startsWith('private resource')) {
+    error.code = ERROR_CODE.PRIVATE_RESOURCE;
+    error.message = `${msg} Private video`;
+  }
+  if (err.startsWith('unauthenticated access')) {
+    error.message = `${msg} Requires authentication`;
+    error.code = ERROR_CODE.UNAUTHENTICATED;
+  }
+  return error;
+};
+
+const codecShorthandTrans = (short) => {
+  const transTable = {
+    h265: 'hev1.1.6.L93.B0',
+    vp9: 'vp09.00.50.08',
+    h264: 'avc1.42E01E'
+  };
+  return transTable[short] ? transTable[short] : short;
+};
+
+const ISOAVC_MAP = {
+  'avc1': 'h264',
+  'avc2': 'h264',
+  'svc1': 'Scalable Video Coding',
+  'mvc1': 'Multiview Video Coding',
+  'mvc2': 'Multiview Video Coding'
+};
+
+
+const PROFILE = {
+  '0': 'No', //  0             - *** when profile=RCDO and level=0 - "RCDO"  - RCDO bitstream MUST obey to all the constraints of the Baseline profile
+  '42': 'baseline', // 66 in-decimal
+  '4d': 'main', // 77 in-decimal
+  '58': 'extended', // 88 in-decimal
+  '64': 'high', // 100 in-decimal
+  '6e': 'high 10', // 110 in-decimal
+  '7a': 'high 4:2:2', // 122 in-decimal
+  'f4': 'high 4:4:4', // 244 in-decimal
+  '2c': 'CAVLC 4:4:4', // 44 in-decimal
+
+  // profiles for SVC - Scalable Video Coding extension to H.264
+  '53': 'Scalable Baseline', // 83 in-decimal
+  '56': 'Scalable High', // 86 in-decimal
+
+  // profiles for MVC - Multiview Video Coding extension to H.264
+  '80': 'Stereo High', // 128 in-decimal
+  '76': 'Multiview High', // 118 in-decimal
+  '8a': 'Multiview Depth High' // 138 in-decimal
+};
+
+
+function avcotiToStr(s) {
+  let REGEX = /([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i;
+
+  if (REGEX.test(s) === false) {
+    throw new Error('error: please provide a 3-bytes hex-sequence for example: 42001e');
+  }
+  let matches = s.match(REGEX);
+  matches.shift(); // kills first one (regex matchs entire string)
+
+  let profile_idc = matches[0];
+  profile_idc = PROFILE[profile_idc];
+  profile_idc = typeof profile_idc === 'string' ? profile_idc : 'Unknown'; // explicit fix.
+
+  // constraint_set_flags  = matches[1]; //maybe some other time..
+
+  let level_idc = matches[2];
+  level_idc = parseInt(level_idc, 16); // will give something like 30  (integer thirty)
+  level_idc = String(level_idc).split('').join('.'); // will give something like "3.0"
+  return `${profile_idc}:${level_idc}`;
+}
+
+
+const h264avcToString = (s) => {
+  let REGEX = /(avc1|avc2|svc1|mvc1|mvc2)\.([0-9a-f]{6})/i;
+  if (REGEX.test('avc1.42001e') === false) {
+    throw new Error('Codec string is not formatted according to H.264/AVC standards for example avc1.42001e (maybe an iOS friendly version...)');
+  }
+  let matches = s.match(REGEX);
+  if (matches !== null) {
+    matches.shift(); // first one is the entire-string.
+
+    let vc_codec = ISOAVC_MAP[matches[0]];
+    let avc_codec = typeof avc_codec === 'string' ? avc_codec : 'Unknown'; // explicit fix
+
+    return vc_codec + ':' + avcotiToStr(matches[1]);
+  }
+  return s;
+};
+
+export const VIDEO_CODEC = {
+  VP9: 'vp9',
+  HEV1: 'hev1',
+  H265: 'h265',
+  H264: 'h264'
+};
+
+const codecToSrcTransformation = (codec) => {
+  if (!codec) {
+    return {};
+  }
+
+  switch (codec) {
+    case VIDEO_CODEC.VP9:
+      return { video_codec: VIDEO_CODEC.VP9 };
+    case VIDEO_CODEC.HEV1:
+      return { video_codec: VIDEO_CODEC.H265 };
+    case VIDEO_CODEC.H264:
+      return { video_codec: `${VIDEO_CODEC.H264}:baseline:3.0` };
+    default:
+      return { video_codec: h264avcToString(codec) };
+  }
+};
+
+
+export {
+  normalizeOptions,
+  isSrcEqual,
+  mergeCloudinaryConfig,
+  mergeTransformation,
+  cloudinaryErrorsConverter,
+  codecShorthandTrans,
+  h264avcToString,
+  codecToSrcTransformation,
+  ERROR_CODE
+};

package/src/plugins/cloudinary/event-handler-registry.js

@@ -0,0 +1,46 @@
+import { findIndex } from 'utils/find';
+
+class EventHandlerRegistry {
+  constructor(emitter) {
+    this._emitter = emitter;
+    this._eventHandlers = [];
+  }
+
+  on(type, handler) {
+    this._eventHandlers.push({ type, handler });
+    this._emitter.on(type, handler);
+  }
+
+  one(type, handler) {
+    const wrapper = (...args) => {
+      handler(...args);
+      this.off(type, handler);
+    };
+
+    this._eventHandlers.push({ type, handler, wrapper });
+    this._emitter.one(type, handler);
+  }
+
+  off(type, handler) {
+    const index = findIndex(this._eventHandlers, (event) =>
+      event.type === type && event.handler === handler);
+
+    if (index === -1) {
+      return;
+    }
+
+    const event = this._eventHandlers[index];
+
+    this._emitter.off(type, event.wrapper || event.handler);
+
+    this._eventHandlers.splice(index, 1);
+  }
+
+  removeAllListeners() {
+    this._eventHandlers.forEach((event) => {
+      this.off(event);
+    });
+  }
+}
+
+export default EventHandlerRegistry;

package/src/plugins/cloudinary/index.js

@@ -0,0 +1,345 @@
+import cloudinary from 'cloudinary-core';
+import { default as vjs } from 'video.js';
+import { mixin } from 'utils/mixin';
+import { applyWithProps } from 'utils/apply-with-props';
+import { sliceAndUnsetProperties } from 'utils/slicing';
+import { getCloudinaryInstanceOf, isKeyInTransformation } from 'utils/cloudinary';
+import { assign } from 'utils/assign';
+import { normalizeOptions, mergeTransformation, mergeCloudinaryConfig, codecShorthandTrans } from './common';
+import Playlistable from 'mixins/playlistable';
+import VideoSource from './models/video-source/video-source';
+import EventHandlerRegistry from './event-handler-registry';
+import AudioSource from './models/audio-source/audio-source';
+import { isFunction } from '../../utils/type-inference';
+
+const DEFAULT_PARAMS = {
+  transformation: {},
+  sourceTypes: [],
+  sourceTransformation: [],
+  posterOptions: {}
+};
+
+export const CONSTRUCTOR_PARAMS = ['cloudinaryConfig', 'transformation',
+  'sourceTypes', 'sourceTransformation', 'posterOptions', 'autoShowRecommendations'];
+
+class CloudinaryContext extends mixin(Playlistable) {
+  constructor(player, options = {}) {
+    super(player, options);
+
+    this.player = player;
+    options = assign({}, DEFAULT_PARAMS, options);
+
+    let _source = null;
+    let _sources = null;
+    let _lastSource = null;
+    let _lastPlaylist = null;
+    let _posterOptions = null;
+    let _cloudinaryConfig = null;
+    let _transformation = null;
+    let _sourceTypes = null;
+    let _sourceTransformation = null;
+    let _chainTarget = options.chainTarget;
+    let _playerEvents = null;
+    let _recommendations = null;
+    let _autoShowRecommendations = false;
+
+    this.source = (source, options = {}) => {
+      options = assign({}, options);
+
+      if (!source) {
+        return _source;
+      }
+
+      let src = null;
+
+      if (source instanceof VideoSource) {
+        src = source;
+      } else {
+        let { publicId, options: _options } = normalizeOptions(source, options);
+        src = this.buildSource(publicId, _options);
+      }
+
+      if (src.recommendations()) {
+        const recommendations = src.recommendations();
+
+        let itemBuilder = null;
+        let disableAutoShow = false;
+
+        if (options.recommendationOptions) {
+          ({ disableAutoShow, itemBuilder } = sliceAndUnsetProperties(options.recommendationOptions, 'disableAutoShow', 'itemBuilder'));
+        }
+        setRecommendations(recommendations, { disableAutoShow, itemBuilder });
+      } else {
+        unsetRecommendations();
+      }
+
+      _source = src;
+      if (!options.skipRefresh) {
+        refresh();
+      }
+      this.player.trigger('cldsourcechanged', { source: src });
+
+      return _chainTarget;
+    };
+
+    this.buildSource = (publicId, options = {}) => {
+      let builtSrc = null;
+      ({ publicId, options } = normalizeOptions(publicId, options));
+
+      options.cloudinaryConfig = mergeCloudinaryConfig(this.cloudinaryConfig(), options.cloudinaryConfig || {});
+      options.transformation = mergeTransformation(this.transformation(), options.transformation || {});
+      options.sourceTransformation = options.sourceTransformation || this.sourceTransformation();
+      options.sourceTypes = options.sourceTypes || this.sourceTypes();
+      options.poster = options.poster || posterOptionsForCurrent();
+      options.queryParams = options.usageReport ? { _s: `vp-${VERSION}` } : {};
+
+      if (options.sourceTypes.indexOf('audio') > -1) {
+        builtSrc = new AudioSource(publicId, options);
+      } else {
+        builtSrc = new VideoSource(publicId, options);
+      }
+
+      return builtSrc;
+    };
+
+    this.posterOptions = (options) => {
+      if (!options) {
+        return _posterOptions;
+      }
+
+      _posterOptions = options;
+
+      return _chainTarget;
+    };
+
+    this.cloudinaryConfig = (config) => {
+      if (!config) {
+        return _cloudinaryConfig;
+      }
+
+      _cloudinaryConfig = getCloudinaryInstanceOf(cloudinary.Cloudinary, config);
+
+      return _chainTarget;
+    };
+
+    this.transformation = (trans) => {
+      if (!trans) {
+        return _transformation;
+      }
+
+      _transformation = getCloudinaryInstanceOf(cloudinary.Transformation, trans);
+
+      return _chainTarget;
+    };
+
+    this.sourceTypes = (types) => {
+      if (!types) {
+        return _sourceTypes;
+      }
+
+      _sourceTypes = types;
+
+      return _chainTarget;
+    };
+
+    this.getCurrentSources = () => _sources;
+
+    this.sourceTransformation = (trans) => {
+      if (!trans) {
+        return _sourceTransformation;
+      }
+
+      _sourceTransformation = trans;
+
+      return _chainTarget;
+    };
+
+    this.on = (...args) => _playerEvents.on(...args);
+    this.one = (...args) => _playerEvents.one(...args);
+    this.off = (...args) => _playerEvents.off(...args);
+
+    this.autoShowRecommendations = (autoShow) => {
+      if (autoShow === undefined) {
+        return _autoShowRecommendations;
+      }
+
+      _autoShowRecommendations = autoShow;
+
+      return _chainTarget;
+    };
+
+    this.dispose = () => {
+      if (this.playlist()) {
+        this.disposePlaylist();
+      }
+      unsetRecommendations();
+      _source = undefined;
+      _playerEvents.removeAllListeners();
+    };
+
+    const setRecommendations = (recommendations, { disableAutoShow = false, itemBuilder = null }) => {
+      unsetRecommendations();
+
+      if (!Array.isArray(recommendations) && typeof recommendations !== 'function' && !recommendations.then) {
+        throw new Error('"recommendations" must be either an array or a function');
+      }
+
+      _recommendations = {};
+
+      itemBuilder = itemBuilder || ((source) => ({ source: source instanceof VideoSource ? source : this.buildSource(source), action: () => this.source(source) }));
+
+      _recommendations.sourceChangedHandler = () => {
+        const trigger = (sources) => {
+          if (typeof sources !== 'undefined' && sources.length > 0) {
+            const items = sources.map((_source) => itemBuilder(_source));
+            this.player.trigger('recommendationschanged', { items });
+          } else {
+            this.player.trigger('recommendationsnoshow');
+          }
+          _recommendations.sources = sources;
+        };
+
+        if (isFunction(recommendations)) {
+          trigger(recommendations());
+        } else if (recommendations.then) {
+          recommendations.then(trigger);
+        } else {
+          trigger(recommendations);
+        }
+      };
+
+      this.one('cldsourcechanged', _recommendations.sourceChangedHandler);
+
+      _recommendations.endedHandler = () => {
+        if (!disableAutoShow && this.autoShowRecommendations()) {
+          this.player.trigger('recommendationsshow');
+        }
+      };
+
+      this.on('ended', _recommendations.endedHandler);
+    };
+
+    const unsetRecommendations = () => {
+      if (_recommendations) {
+        this.off('cldsourcechanged', _recommendations.sourceChangedHandler);
+        this.off('ended', _recommendations.endedHandler);
+        delete _recommendations.endedHandler;
+        delete _recommendations.sourceChangedHandler;
+      }
+
+      _recommendations = null;
+    };
+
+    const refresh = () => {
+      const src = this.source();
+      if (src.poster()) {
+        this.player.poster(src.poster().url());
+      }
+
+      _sources = src.generateSources().reduce((srcs, src) => {
+        if (src.isAdaptive) {
+          let codec = src.type.split('; ')[1] || null;
+          if (codec && 'MediaSource' in window) {
+            const parts = src.type.split('; ');
+            let typeStr = `video/mp4; ${parts[1] || ''}`;
+            const canPlay = testCanPlayTypeAndTypeSupported(typeStr);
+            if (vjs.browser.IS_ANY_SAFARI) {
+              // work around safari saying it cant play h265
+              src.type = `${parts[0]}; ${codecShorthandTrans('h264')}`;
+            }
+            if (canPlay) {
+              srcs.push(src);
+            }
+          } else {
+            srcs.push(src);
+          }
+        } else {
+          srcs.push(src);
+        }
+        return srcs;
+      }, []);
+      this.player.src(_sources);
+
+      _lastSource = src;
+      _lastPlaylist = this.playlist();
+    };
+    const testCanPlayTypeAndTypeSupported = (codec) => {
+      const v = document.createElement('video');
+      return v.canPlayType(codec) || 'MediaSource' in window && MediaSource.isTypeSupported(codec);
+    };
+
+    const posterOptionsForCurrent = () => {
+      const opts = assign({}, this.posterOptions());
+      if (opts.transformation) {
+        if ((opts.transformation.width || opts.transformation.height) && !opts.transformation.crop) {
+          opts.transformation.crop = 'scale';
+        }
+      }
+
+      opts.transformation = getCloudinaryInstanceOf(cloudinary.Transformation, opts.transformation || {});
+
+      // Set poster dimensions to player actual size.
+      // (unless they were explicitly set via `posterOptions`)
+      const playerEl = this.player.el();
+      if (playerEl && playerEl.clientWidth && playerEl.clientHeight && !isKeyInTransformation(opts.transformation, 'width') && !isKeyInTransformation(opts.transformation, 'height')) {
+        const roundUp100 = (val) => 100 * Math.ceil(val / 100);
+
+        opts.transformation
+          .width(roundUp100(playerEl.clientWidth))
+          .height(roundUp100(playerEl.clientHeight))
+          .crop('limit');
+      }
+
+      return opts;
+    };
+
+    // Handle external (non-cloudinary plugin) source changes (e.g. by ad plugins)
+    const syncState = (_, data) => {
+      let src = data.to;
+
+      // When source is cloudinary's
+      if (_lastSource && _lastSource.contains(src)) {
+        // If plugin state doesn't have an active VideoSource
+        if (!this.source()) {
+          // We might have been running a playlist, reset playlist's state.
+          if (_lastPlaylist) {
+            this.playlist(_lastPlaylist);
+          }
+          // Rebuild last source state without calling vjs's 'src' and 'poster'
+          this.source(_lastSource, { skipRefresh: true });
+        }
+      } else {
+        // Used by cloudinary-only components
+        this.player.trigger('cldsourcechanged', {});
+
+        // When source isn't cloudinary's - reset the plugin's state.
+        this.dispose();
+      }
+    };
+
+    _playerEvents = new EventHandlerRegistry(this.player);
+
+    const constructorParams = sliceAndUnsetProperties(options, ...CONSTRUCTOR_PARAMS);
+
+    applyWithProps(this, constructorParams);
+
+    this.on('sourcechanged', syncState);
+  }
+
+  currentSourceType() {
+    return this.source().getType();
+  }
+
+  currentPublicId() {
+    return this.source() && this.source().publicId();
+  }
+
+  currentPoster() {
+    return this.source() && this.source().poster();
+  }
+}
+
+export default function(options = {}) {
+  options.chainTarget = options.chainTarget || this;
+  this.cloudinary = new CloudinaryContext(this, options);
+}

package/src/plugins/cloudinary/models/audio-source/audio-source.const.js

@@ -0,0 +1,11 @@
+export const DEFAULT_POSTER_PARAMS = { format: 'jpg', resource_type: 'video', transformation: { flags: 'waveform' } };
+
+export const COMMON_AUDIO_FORMATS = ['mp3', 'ogg', 'wav', 'mp4'];
+
+export const AUDIO_SUFFIX_REMOVAL_PATTERN = RegExp(`\\.(${COMMON_AUDIO_FORMATS.join('|')})$$`);
+
+export const DEFAULT_AUDIO_PARAMS = {
+  resource_type: 'video',
+  type: 'upload',
+  transformation: []
+};

package/src/plugins/cloudinary/models/audio-source/audio-source.js

@@ -0,0 +1,82 @@
+import VideoSource from '../video-source/video-source';
+import ImageSource from '../image-source';
+import { normalizeOptions } from '../../common';
+import { sliceAndUnsetProperties } from 'utils/slicing';
+import { assign } from 'utils/assign';
+import { objectToQuerystring } from 'utils/querystring';
+import { AUDIO_SUFFIX_REMOVAL_PATTERN, DEFAULT_AUDIO_PARAMS, DEFAULT_POSTER_PARAMS } from './audio-source.const';
+
+
+class AudioSource extends VideoSource {
+
+  constructor(publicId, options = {}) {
+    ({ publicId, options } = normalizeOptions(publicId, options));
+
+    publicId = publicId.replace(AUDIO_SUFFIX_REMOVAL_PATTERN, '');
+
+    options = assign({}, DEFAULT_AUDIO_PARAMS, options);
+    const { poster } = sliceAndUnsetProperties(options, 'poster');
+
+    super(publicId, options);
+    this._poster = null;
+    this._type = 'AudioSource';
+    this.poster(poster);
+  }
+
+  getPoster () {
+    return this._poster;
+  }
+
+  poster(publicId, options = {}) {
+    if (!publicId) {
+      return this._poster;
+    }
+
+    if (publicId instanceof ImageSource) {
+      this._poster = publicId;
+      return this;
+    }
+
+    ({ publicId, options } = normalizeOptions(publicId, options, { tolerateMissingId: true }));
+
+    if (!publicId) {
+      publicId = this.publicId();
+      options = assign({}, options, DEFAULT_POSTER_PARAMS);
+    }
+
+    options.cloudinaryConfig = options.cloudinaryConfig || this.cloudinaryConfig();
+    this._poster = new ImageSource(publicId, options);
+
+    return this;
+  }
+
+  generateSources() {
+    return this.sourceTypes().map((sourceType) => {
+
+      if (sourceType === 'audio') {
+        const format = 'mp3';
+        const opts = {};
+        const srcTransformation = this.sourceTransformation()[sourceType] || [this.transformation()];
+
+        if (srcTransformation) {
+          opts.transformation = srcTransformation;
+        }
+
+        assign(opts, { resource_type: 'video', format });
+        let queryString = '';
+
+        if (this.queryParams()) {
+          queryString = objectToQuerystring(this.queryParams());
+        }
+
+        const src = `${this.config().url(this.publicId(), opts)}${queryString}`;
+        const type = 'video/mp4';
+        return { type, src, cldSrc: this, poster: this.getPoster().url() };
+      } else {
+        return null;
+      }
+    }, this);
+  }
+}
+
+export default AudioSource;