cloudinary-video-player 1.6.2-edge.13

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

@@ -0,0 +1,107 @@
+import cloudinary from 'cloudinary-core';
+import { normalizeOptions } from '../common';
+import { sliceAndUnsetProperties } from 'utils/slicing';
+import { getCloudinaryInstanceOf } from 'utils/cloudinary';
+import { objectToQuerystring } from 'utils/querystring';
+
+class BaseSource {
+  constructor(publicId, options = {}) {
+    ({ publicId, options } = normalizeOptions(publicId, options));
+
+    let _publicId = null;
+    let _cloudinaryConfig = null;
+    let _transformation = null;
+    let _resourceConfig = null;
+    let _queryParams = null;
+
+    this.publicId = (publicId) => {
+      if (!publicId) {
+        return _publicId;
+      }
+
+      _publicId = publicId;
+
+      return this;
+    };
+
+    this.cloudinaryConfig = (config) => {
+      if (!config) {
+        return _cloudinaryConfig;
+      }
+
+      _cloudinaryConfig = getCloudinaryInstanceOf(cloudinary.Cloudinary, config);
+
+      return this;
+    };
+
+    this.resourceConfig = (config) => {
+      if (!config) {
+        return _resourceConfig;
+      }
+
+      _resourceConfig = config;
+
+      return this;
+    };
+
+    this.transformation = (trans) => {
+      if (!trans) {
+        return _transformation;
+      }
+
+      _transformation = getCloudinaryInstanceOf(cloudinary.Transformation, trans);
+
+      return this;
+    };
+
+    this.queryParams = (params) => {
+      if (!params) {
+        return _queryParams;
+      }
+
+      _queryParams = params;
+
+      return this;
+    };
+
+    this.getType = () => this._type;
+
+    const { cloudinaryConfig } = sliceAndUnsetProperties(options, 'cloudinaryConfig');
+    if (!cloudinaryConfig) {
+      throw new Error('Source is missing \'cloudinaryConfig\'.');
+    }
+    this.cloudinaryConfig(cloudinaryConfig);
+
+    const { transformation } = sliceAndUnsetProperties(options, 'transformation');
+    this.transformation(transformation);
+
+    const { queryParams } = sliceAndUnsetProperties(options, 'queryParams');
+    this.queryParams(queryParams);
+
+    this.resourceConfig(options);
+
+    this.publicId(publicId);
+  }
+
+
+  config() {
+    const cld = new cloudinary.Cloudinary(this.cloudinaryConfig().config());
+    cld.config(this.resourceConfig());
+
+    return cld;
+  }
+
+  url({ transformation } = {}) {
+    const url = this.config().url(this.publicId(), { transformation: transformation || this.transformation() });
+
+    let queryString = '';
+    if (this.queryParams()) {
+      queryString = objectToQuerystring(this.queryParams());
+    }
+
+    return `${url}${queryString}`;
+  }
+
+}
+
+export default BaseSource;

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

@@ -0,0 +1,26 @@
+import BaseSource from './base-source';
+import { normalizeOptions } from '../common';
+import { assign } from 'utils/assign';
+
+const COMMON_IMAGE_FORMATS = ['jpg', 'png', 'gif', 'webp'];
+const IMAGE_SUFFIX_REMOVAL_PATTERN = RegExp(`\\.(${COMMON_IMAGE_FORMATS.join('|')})$$`);
+const DEFAULT_IMAGE_PARAMS = {
+  resource_type: 'image',
+  type: 'upload',
+  transformation: []
+};
+
+class ImageSource extends BaseSource {
+  constructor(publicId, options = {}) {
+    ({ publicId, options } = normalizeOptions(publicId, options));
+
+    publicId = publicId.replace(IMAGE_SUFFIX_REMOVAL_PATTERN, '');
+
+    options = assign({}, DEFAULT_IMAGE_PARAMS, options);
+
+    super(publicId, options);
+    this._type = 'ImageSource';
+  }
+}
+
+export default ImageSource;

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

@@ -0,0 +1,32 @@
+export const DEFAULT_POSTER_PARAMS = { format: 'jpg', resource_type: 'video' };
+
+const DEFAULT_VIDEO_SOURCE_TYPES = ['webm/vp9', 'mp4/h265', 'mp4'];
+
+export const DEFAULT_VIDEO_PARAMS = {
+  resource_type: 'video',
+  type: 'upload',
+  transformation: [],
+  sourceTransformation: {},
+  sourceTypes: DEFAULT_VIDEO_SOURCE_TYPES,
+  recommendations: null,
+  info: {},
+  interactionAreas: {}
+};
+
+export const VIDEO_SUFFIX_REMOVAL_PATTERN = RegExp(`\\.(${DEFAULT_VIDEO_SOURCE_TYPES.join('|')})$$`);
+
+// eslint-disable-next-line no-control-regex
+export const URL_PATTERN = RegExp('https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_\+.~#?&/=]*)');
+
+
+export const CONTAINER_MIME_TYPES = {
+  dash: ['application/dash+xml'],
+  hls: ['application/x-mpegURL'],
+  mpd: ['application/dash+xml'],
+  m3u8: ['application/x-mpegURL']
+};
+
+export const FORMAT_MAPPINGS = {
+  hls: 'm3u8',
+  dash: 'mpd'
+};

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

@@ -0,0 +1,239 @@
+import BaseSource from '../base-source';
+import ImageSource from '../image-source';
+import { normalizeOptions, isSrcEqual } from '../../common';
+import { sliceAndUnsetProperties } from 'utils/slicing';
+import { assign } from 'utils/assign';
+import { objectToQuerystring } from 'utils/querystring';
+import { default as vjs } from 'video.js';
+import {
+  CONTAINER_MIME_TYPES,
+  DEFAULT_POSTER_PARAMS,
+  DEFAULT_VIDEO_PARAMS,
+  URL_PATTERN,
+  VIDEO_SUFFIX_REMOVAL_PATTERN
+} from './video-source.const';
+import { formatToMimeTypeAndTransformation, isCodecAlreadyExist, normalizeFormat } from './video-source.utils';
+import { castArray } from '../../../../utils/array';
+
+let objectId = 0;
+
+const generateId = () => objectId++;
+
+class VideoSource extends BaseSource {
+
+  constructor(_publicId, initOptions = {}) {
+
+    const isRawUrl = URL_PATTERN.test(_publicId);
+    let { publicId, options } = normalizeOptions(_publicId, initOptions);
+
+    if (!isRawUrl) {
+      publicId = publicId.replace(VIDEO_SUFFIX_REMOVAL_PATTERN, '');
+    }
+
+    options = assign({}, DEFAULT_VIDEO_PARAMS, options);
+
+    if (!options.poster) {
+      options.poster = assign({ publicId }, DEFAULT_POSTER_PARAMS);
+    }
+
+    const {
+      poster,
+      sourceTypes,
+      sourceTransformation,
+      info,
+      recommendations,
+      textTracks,
+      withCredentials,
+      interactionAreas
+    } = sliceAndUnsetProperties(
+      options,
+      'poster',
+      'sourceTypes',
+      'sourceTransformation',
+      'info',
+      'recommendations',
+      'textTracks',
+      'withCredentials',
+      'interactionAreas'
+    );
+
+    super(publicId, options);
+
+    this._sourceTypes = null;
+    this._recommendations = null;
+    this._textTracks = null;
+    this._poster = null;
+    this._info = null;
+    this._sourceTransformation = null;
+    this._interactionAreas = null;
+    this._type = 'VideoSource';
+    this.isRawUrl = isRawUrl;
+    this._rawTransformation = options.raw_transformation;
+    this.withCredentials = !!withCredentials;
+    this.getInitOptions = () => initOptions;
+
+    this.poster(poster);
+    this.sourceTypes(sourceTypes);
+    this.sourceTransformation(sourceTransformation);
+    this.info(info);
+    this.interactionAreas(interactionAreas);
+    this.recommendations(recommendations);
+    this.textTracks(textTracks);
+    this.objectId = generateId();
+  }
+
+  textTracks(textTracks) {
+    if (textTracks === undefined) {
+      return this._textTracks;
+    }
+
+    this._textTracks = textTracks;
+
+    return this;
+  }
+
+  recommendations(recommends) {
+    if (recommends === undefined) {
+      return this._recommendations;
+    }
+
+    this._recommendations = recommends;
+
+    return this;
+  }
+
+  sourceTypes (types) {
+    if (!types) {
+      return this._sourceTypes;
+    }
+    this._sourceTypes = types;
+
+    return this;
+  }
+
+  info(info) {
+    if (!info) {
+      return this._info;
+    }
+
+    this._info = info;
+
+    return this;
+  }
+
+  interactionAreas(interactionAreas) {
+    if (!interactionAreas) {
+      return this._interactionAreas;
+    }
+
+    this._interactionAreas = interactionAreas;
+
+    return this;
+  }
+
+  sourceTransformation(trans) {
+    if (!trans) {
+      return this._sourceTransformation;
+    }
+
+    this._sourceTransformation = trans;
+
+    return this;
+  }
+
+  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;
+  }
+
+  contains(source) {
+    const sources = this.generateSources();
+    return sources.some((_source) => isSrcEqual(_source, source));
+  }
+
+  generateSources() {
+    if (this.isRawUrl) {
+      const type = this.sourceTypes().length > 1 ? null : this.sourceTypes()[0];
+      return [this.generateRawSource(this.publicId(), type)];
+    }
+
+    const srcs = this.sourceTypes().map((sourceType) => {
+      const srcTransformation = this.sourceTransformation()[sourceType] || this.transformation();
+      const format = normalizeFormat(sourceType);
+      const isAdaptive = (['mpd', 'm3u8'].indexOf(format) !== -1);
+      const opts = {};
+
+      if (srcTransformation) {
+        opts.transformation = castArray(srcTransformation);
+      }
+
+      assign(opts, { resource_type: 'video', format });
+
+      const [type, codecTrans] = formatToMimeTypeAndTransformation(sourceType);
+
+      // If user's transformation include video_codec then don't add another video codec to transformation
+      if (codecTrans && !isCodecAlreadyExist(opts.transformation, this._rawTransformation)) {
+        opts.transformation.push(codecTrans);
+      }
+
+      if (opts.format === 'auto') {
+        delete opts.format;
+      }
+
+      const queryString = this.queryParams() ? objectToQuerystring(this.queryParams()) : '';
+
+      const src = this.config().url(this.publicId(), opts);
+      // if src is a url that already contains query params then replace '?' with '&'
+      const params = src.indexOf('?') > -1 ? queryString.replace('?', '&') : queryString;
+
+      return { type, src: src + params, cldSrc: this, isAdaptive: isAdaptive, withCredentials: this.withCredentials };
+    });
+
+    const isIe = typeof navigator !== 'undefined' && (/MSIE/.test(navigator.userAgent) || /Trident\//.test(navigator.appVersion));
+
+    if (isIe) {
+      return srcs.filter(s => s.type !== 'video/mp4; codec="hev1.1.6.L93.B0"');
+    } else if (vjs.browser.IS_ANY_SAFARI) {
+      // filter out dash on safari
+      return srcs.filter(s => s.type.indexOf('application/dash+xml') === -1);
+    } else {
+      return srcs;
+    }
+  }
+
+  generateRawSource(url, type) {
+    const t = type || url.split('.').pop();
+    const isAdaptive = !!CONTAINER_MIME_TYPES[t];
+    if (isAdaptive) {
+      type = CONTAINER_MIME_TYPES[t][0];
+    } else {
+      type = type ? `video/${type}` : null;
+    }
+
+    return { type, src: url, cldSrc: this, isAdaptive, withCredentials: this.withCredentials };
+  }
+
+  getInteractionAreas() {
+    return this._interactionAreas;
+  }
+}
+
+export default VideoSource;

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

@@ -0,0 +1,57 @@
+import { CONTAINER_MIME_TYPES, FORMAT_MAPPINGS } from './video-source.const';
+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('\/');
+  let result = CONTAINER_MIME_TYPES[container];
+  let transformation = null;
+
+  if (!result) {
+    result = [`video/${container}`, transformation];
+  }
+
+  if (codec) {
+    transformation = codecToSrcTransformation(codec);
+    result = [`${result[0]}; codecs="${codecShorthandTrans(codec)}"`, transformation];
+  }
+
+  return result;
+}
+
+export function normalizeFormat(format) {
+  format = format.toLowerCase().split('\/').shift();
+
+  let res = FORMAT_MAPPINGS[format];
+  if (!res) {
+    res = format.split('\/').shift();
+  }
+
+  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));
+  });
+};