cloudinary-video-player 1.5.5 → 1.5.9

package/src/video-player.js

@@ -10,23 +10,18 @@ import PlaylistWidget from './components/playlist/playlist-widget';
 import qualitySelector from './components/qualitySelector/qualitySelector.js';
 // #endif
 import VideoSource from './plugins/cloudinary/models/video-source/video-source';
-import { createElement } from './utils/dom';
-import { isFunction, isString, noop, isPlainObject } from './utils/type-inference';
+import { isFunction, isString, isPlainObject } from './utils/type-inference';
 import {
-  addMetadataTrack,
   extractOptions,
-  getMetaDataTracker,
   getResolveVideoElement,
-  getInteractionAreaItem,
-  getZoomTransformation,
-  overrideDefaultVideojsComponents,
-  setInteractionAreasContainer
+  overrideDefaultVideojsComponents
 } from './video-player.utils';
-import {
-  FLUID_CLASS_NAME,
-  TEMPLATE_INTERACTION_AREAS_VTT,
-  INTERACTION_AREAS_CONTAINER_CLASS_NAME
-} from './video-player.const';
+import { FLOATING_TO, FLUID_CLASS_NAME } from './video-player.const';
+// #if (!process.env.WEBPACK_BUILD_LIGHT)
+import { interactionAreaService } from './components/interaction-area/interaction-area.service';
+// #endif
+import { isValidConfig } from './validators/validators-functions';
+import { playerValidators, sourceValidators } from './validators/validators';
 
 
 // Register all plugins
@@ -73,11 +68,9 @@ class VideoPlayer extends Utils.mixin(Eventable) {
   constructor(elem, initOptions, ready) {
     super();
 
-    this._isZoomed = false;
-    this.unZoom = noop;
-    this._setStaticInteractionAreas = noop;
     this._playlistWidget = null;
     this.nbCalls = 0;
+    this._firstPlayed = false;
 
     this.videoElement = getResolveVideoElement(elem);
 
@@ -101,6 +94,16 @@ class VideoPlayer extends Utils.mixin(Eventable) {
 
     this.videojs = videojs(this.videoElement, this._videojsOptions);
 
+    // to do, should be change by isValidConfig
+    this._isPlayerConfigValid = true;
+
+    isValidConfig(this.options, playerValidators);
+
+    if (!this._isPlayerConfigValid) {
+      this.videojs.error('invalid player configuration');
+      return;
+    }
+
     if (this._videojsOptions.muted) {
       this.videojs.volume(0.4);
     }
@@ -115,6 +118,10 @@ class VideoPlayer extends Utils.mixin(Eventable) {
       imaAdsLoaded: (typeof google === 'object' && typeof google.ima === 'object')
     };
 
+    // #if (!process.env.WEBPACK_BUILD_LIGHT)
+    this.interactionArea = interactionAreaService(this, this.playerOptions, this._videojsOptions);
+    // #endif
+
     this._setCssClasses();
     this._initPlugins(loaded);
     this._initPlaylistWidget();
@@ -127,7 +134,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     this.videojs.on('error', () => {
       const error = this.videojs.error();
       if (error) {
-        const type = this.videojs.cloudinary.currentSourceType();
+        const type = this._isPlayerConfigValid && this.videojs.cloudinary.currentSourceType();
         if (error.code === 4 && (type === 'VideoSource' || type === 'AudioSource')) {
           this.videojs.error(null);
           Utils.handleCldError(this, this.playerOptions);
@@ -152,13 +159,9 @@ class VideoPlayer extends Utils.mixin(Eventable) {
         ready(this);
       }
 
-      this.videojs.on('sourcechanged', () => {
-        this._updateInteractionAreasTrack();
-      });
-
-      this.videojs.on('ended', () => {
-        this.unZoom();
-      });
+      // #if (!process.env.WEBPACK_BUILD_LIGHT)
+      this.interactionArea.init();
+      // #endif
     });
 
     if (this.adsEnabled && Object.keys(this.playerOptions.ads).length > 0 && typeof this.videojs.ima === 'object') {
@@ -191,22 +194,8 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     this._initSeekThumbs();
   }
 
-  _updateInteractionAreasTrack() {
-    const interactionAreasConfig = this.getInteractionAreasConfig();
-    this._currentTrack && this.videojs.removeRemoteTextTrack(this._currentTrack);
-
-    if (!interactionAreasConfig) {
-      return;
-    }
-
-    const vttUrl = interactionAreasConfig.vttUrl || TEMPLATE_INTERACTION_AREAS_VTT[interactionAreasConfig.template];
-
-    this.videojs.removeRemoteTextTrack(this._currentTrack);
-
-    if (!this._isZoomed && interactionAreasConfig.enable && vttUrl) {
-      this._currentTrack = addMetadataTrack(this.videojs, vttUrl);
-      this.addCueListener(interactionAreasConfig);
-    }
+  _isFullScreen() {
+    return this.videojs.player().isFullscreen();
   }
 
   _initIma (loaded) {
@@ -367,6 +356,11 @@ class VideoPlayer extends Utils.mixin(Eventable) {
   _initAnalytics() {
     const analyticsOpts = this.playerOptions.analytics;
 
+    if (!window.ga && analyticsOpts) {
+      console.error('Google Analytics script is missing');
+      return;
+    }
+
     if (analyticsOpts) {
       const opts = typeof analyticsOpts === 'object' ? analyticsOpts : {};
       this.videojs.analytics(opts);
@@ -377,7 +371,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     if (!this.isVideoReady()) {
       if (this.nbCalls < maxNumberOfCalls) {
         this.nbCalls++;
-        this.reTryId = this.videojs.setTimeout(this.reTryVideo, timeout);
+        this.reTryId = this.videojs.setTimeout(() => this.reTryVideo(maxNumberOfCalls, timeout), timeout);
       } else {
         let e = new Error('Video is not ready please try later');
         this.videojs.trigger('error', e);
@@ -446,7 +440,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
   }
 
   _initFloatingPlayer() {
-    if (this.playerOptions.floatingWhenNotVisible) {
+    if (this.playerOptions.floatingWhenNotVisible !== FLOATING_TO.NONE) {
       this.videojs.floatingPlayer({ 'floatTo': this.playerOptions.floatingWhenNotVisible });
     }
   }
@@ -509,91 +503,6 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     return this.options.playerOptions;
   }
 
-  _setGoBackButton() {
-    const button = createElement('div', { 'class': 'go-back-button' });
-
-    button.addEventListener('click', () => {
-      this.unZoom();
-    }, false);
-
-    const tracksContainer = createElement('div', { 'class': INTERACTION_AREAS_CONTAINER_CLASS_NAME }, button);
-    setInteractionAreasContainer(this.videojs, tracksContainer);
-  }
-
-  addInteractionAreas(interactionAreas, interactionAreasOptions) {
-    this._setStaticInteractionAreas = () => {
-      this._addInteractionAreasItems(interactionAreas, interactionAreasOptions);
-    };
-
-    this._addInteractionAreasItems(interactionAreas, interactionAreasOptions);
-  }
-
-  getInteractionAreasConfig() {
-    return this.videojs.currentSource().cldSrc.getInteractionAreas();
-  }
-
-  _onZoom(src, newOption, item) {
-    const currentSource = this.videojs.currentSource();
-    const { cldSrc } = currentSource;
-    const currentSrcOptions = cldSrc.getInitOptions();
-    const option = newOption || { transformation: currentSrcOptions.transformation.toOptions() };
-    const transformation = !src && getZoomTransformation(this.videoElement, item);
-    const sourceOptions = transformation ? videojs.mergeOptions({ transformation }, option) : option;
-
-    const newSource = cldSrc.isRawUrl ? currentSource.src : { publicId: cldSrc.publicId() };
-    this.source(transformation ? { publicId: cldSrc.publicId() } : src, sourceOptions).play();
-
-    this._isZoomed = true;
-
-    this._setGoBackButton();
-
-    this.unZoom = () => {
-      if (this._isZoomed) {
-        this._isZoomed = false;
-        this._setStaticInteractionAreas();
-        this.source(newSource, currentSrcOptions).play();
-      }
-    };
-  }
-
-  _addInteractionAreasItems(interactionAreasData, interactionAreasOptions = {}) {
-    const interactionAreasItems = interactionAreasData.map((item, index) => {
-      return getInteractionAreaItem(item, (event) => {
-        interactionAreasOptions.onClick && interactionAreasOptions.onClick({
-          item,
-          index,
-          event,
-          zoom: (source, option) => {
-            this._onZoom(source, option, item);
-          }
-        });
-      });
-    });
-
-    const interactionAreasContainer = createElement('div', { 'class': INTERACTION_AREAS_CONTAINER_CLASS_NAME }, interactionAreasItems);
-    setInteractionAreasContainer(this.videojs, interactionAreasContainer);
-  }
-
-  addCueListener(interactionAreasConfig) {
-    const textTracks = this.videojs.textTracks();
-    if (!textTracks.length) {
-      return;
-    }
-
-    const track = getMetaDataTracker(textTracks);
-
-    if (!track) {
-      return;
-    }
-
-    track.mode = 'hidden';
-
-    track.addEventListener('cuechange', () => {
-      const tracksData = JSON.parse(track.activeCues[0].text);
-      this._addInteractionAreasItems(tracksData, interactionAreasConfig);
-    });
-  }
-
   currentPublicId() {
     return this.videojs.cloudinary.currentPublicId();
   }
@@ -607,6 +516,17 @@ class VideoPlayer extends Utils.mixin(Eventable) {
   }
 
   source(publicId, options = {}) {
+    if (!this._isPlayerConfigValid) {
+      return;
+    }
+
+    const isSourceConfigValid = isValidConfig(options, sourceValidators);
+
+    if (!isSourceConfigValid) {
+      this.videojs.error('invalid source configuration');
+      return;
+    }
+
     if (publicId instanceof VideoSource) {
       return this.videojs.cloudinary.source(publicId, options);
     }

package/src/video-player.utils.js

@@ -1,4 +1,3 @@
-import { createElement } from './utils/dom';
 import videojs from 'video.js';
 import Utils from './utils';
 import defaults from './config/defaults';
@@ -6,74 +5,11 @@ import {
   CLOUDINARY_PARAMS,
   DEFAULT_HLS_OPTIONS,
   PLAYER_PARAMS,
-  INTERACTION_AREAS_CONTAINER_CLASS_NAME,
-  FLUID_CLASS_NAME
+  FLUID_CLASS_NAME,
+  AUTO_PLAY_MODE
 } from './video-player.const';
 import { isString } from './utils/type-inference';
 
-export const getMetaDataTracker = (textTracks) => {
-  for (let i = 0; textTracks.length; i++) {
-    const value = textTracks[i];
-    if (value.kind === 'metadata') {
-      return value;
-    }
-  }
-};
-
-
-export const setInteractionAreasContainer = (videojs, newInteractionAreasContainer) => {
-  const videoContainer = videojs.el();
-  const currentInteractionAreasContainer = videoContainer.querySelector(`.${INTERACTION_AREAS_CONTAINER_CLASS_NAME}`);
-
-  if (currentInteractionAreasContainer) {
-    currentInteractionAreasContainer.replaceWith(newInteractionAreasContainer);
-  } else {
-    videoContainer.append(newInteractionAreasContainer);
-  }
-};
-
-export const percentageToFixedValue = (outOf, value) => (outOf / (100 / +value));
-
-export const getZoomTransformation = (videoElement, interactionAreaItem) => {
-
-  const { videoHeight, videoWidth } = videoElement;
-
-  const itemX = percentageToFixedValue(videoWidth, interactionAreaItem.left);
-  const itemY = percentageToFixedValue(videoHeight, interactionAreaItem.top);
-  const itemWidth = percentageToFixedValue(videoWidth, interactionAreaItem.width);
-  const itemHeight = percentageToFixedValue(videoHeight, interactionAreaItem.height);
-
-  const videoAspectRatio = videoWidth / videoHeight;
-  const itemAspectRatio = itemWidth / itemHeight;
-
-  const width = Math.round(itemAspectRatio > 1 || videoAspectRatio > 1 ? itemHeight * itemAspectRatio : itemWidth);
-  const height = Math.round(width / videoAspectRatio);
-
-  const x = Math.round(itemX - (width - itemWidth) / 2);
-  const y = Math.round(itemY - (height - itemHeight) / 2);
-
-  return {
-    width,
-    height,
-    x: Math.min(Math.max(x, 0), videoWidth - width),
-    y: Math.min(Math.max(y, 0), videoHeight - height),
-    crop: 'crop'
-  };
-};
-
-export const getInteractionAreaItem = (item, onClick) => {
-  const element = createElement('div', { class: 'video-player-interaction-area' });
-  element.style.left = `${item.left}%`;
-  element.style.top = `${item.top}%`;
-  element.style.width = `${item.width}%`;
-  element.style.height = `${item.height}%`;
-
-  element.addEventListener('click', onClick, false);
-
-  return element;
-};
-
-
 export const addMetadataTrack = (videoJs, vttSource) => {
   return videoJs.addRemoteTextTrack({
     kind: 'metadata',
@@ -83,6 +19,10 @@ export const addMetadataTrack = (videoJs, vttSource) => {
   }, true).track;
 };
 
+export const isLight = (opts) => {
+  return opts.class.indexOf('cld-video-player-skin-light') > -1 || opts.skin === 'light';
+};
+
 export const getResolveVideoElement = (elem) => {
   if (isString(elem)) {
     let id = elem;
@@ -117,11 +57,11 @@ export const normalizeAutoplay = (options) => {
   const autoplayMode = options.autoplayMode;
   if (autoplayMode) {
     switch (autoplayMode) {
-      case 'always':
+      case AUTO_PLAY_MODE.ALWAYS:
         options.autoplay = true;
         break;
-      case 'on-scroll':
-      case 'never':
+      case AUTO_PLAY_MODE.ON_SCROLL:
+      case AUTO_PLAY_MODE.NEVER:
       default:
         options.autoplay = false;
     }
@@ -134,7 +74,6 @@ export const extractOptions = (elem, options) => {
   if (videojs.dom.hasClass(elem, FLUID_CLASS_NAME) || videojs.dom.hasClass(elem, 'vjs-fluid')) {
     options.fluid = true;
   }
-
   // Default HLS options < Default options < Markup options < Player options
   options = Utils.assign({}, DEFAULT_HLS_OPTIONS, defaults, elemOptions, options);
 

package/test/isValidConfig.test.js

@@ -0,0 +1,224 @@
+import { isValidConfig } from '../src/validators/validators-functions';
+import { validator } from '../src/validators/validators-types';
+import { noop } from '../src/utils/type-inference';
+
+describe('test isValidConfig method', () => {
+
+  describe('should be a number', () => {
+
+    const validators = {
+      test: validator.isNumber
+    };
+
+    it('is valid number', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid number', () => {
+      const isValid = isValidConfig({
+        test: 'a'
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be a string', () => {
+
+    const validators = {
+      test: validator.isString
+    };
+
+    it('is valid string', () => {
+      const isValid = isValidConfig({
+        test: 'a'
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid string', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be a boolean', () => {
+
+    const validators = {
+      test: validator.isBoolean
+    };
+
+    it('is valid boolean', () => {
+      const isValid = isValidConfig({
+        test: true
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid boolean', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be a function', () => {
+
+    const validators = {
+      test: validator.isFunction
+    };
+
+    it('is valid function', () => {
+      const isValid = isValidConfig({
+        test: noop
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid function', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be an array Of strings', () => {
+
+    const validators = {
+      test: validator.isArrayOfStrings
+    };
+
+    it('is valid array of strings', () => {
+      const isValid = isValidConfig({
+        test: ['a', 'b', 'c']
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid array of strings', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be an array Of numbers', () => {
+
+    const validators = {
+      test: validator.isArrayOfNumbers
+    };
+
+    it('is valid array of numbers', () => {
+      const isValid = isValidConfig({
+        test: [1, 1, 1]
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid array of numbers', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be an object', () => {
+    const validators = {
+      test: validator.isPlainObject
+    };
+
+    it('is valid object', () => {
+      const isValid = isValidConfig({
+        test: { a: 1 }
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid object', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+  describe('should be an array of object', () => {
+    const validators = {
+      test: validator.isArrayOfObjects({
+        a: validator.isString,
+        b: validator.isNumber,
+        c: validator.isBoolean
+      })
+    };
+    it('is valid array of object', () => {
+      const isValid = isValidConfig({
+        test: [{ a: 'a', b: 1, c: true }]
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid object', () => {
+      const isValid = isValidConfig({
+        test: [{ a: 'a', b: 1, c: 1 }]
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+
+  describe('or validator', () => {
+    const validators = {
+      test: validator.or(validator.isNumber, validator.isString)
+    };
+
+    it('could be a number', () => {
+      const isValid = isValidConfig({
+        test: 1
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('could be a string', () => {
+      const isValid = isValidConfig({
+        test: 'a'
+      }, validators);
+
+      expect(isValid).toBe(true);
+    });
+
+    it('is invalid or', () => {
+      const isValid = isValidConfig({
+        test: true
+      }, validators);
+
+      expect(isValid).toBe(false);
+    });
+  });
+
+
+});

package/test/unit/utils.test.js

@@ -0,0 +1,27 @@
+import { get } from '../../src/utils/object.js';
+
+describe('test get utils function', () => {
+  const value = { a: { b: [{ c: 2 }], d: undefined } };
+
+  it('should get primitive value', () => {
+    expect(get(value, 'a.b.0.c')).toBe(value.a.b[0].c);
+  });
+
+  it('should get object value', () => {
+    expect(get(value, 'a.b')).toBe(value.a.b);
+  });
+
+  it('should get default value', () => {
+    const defaultValue = 10;
+    expect(get(value, 'a.c', defaultValue)).toBe(defaultValue);
+  });
+
+  it('should get default value if value is undefined', () => {
+    expect(get(value, 'a.d', 10)).toBe(10);
+  });
+
+  it('should get default value if the value is not an object', () => {
+    expect(get(1, 'a.b', 12)).toBe(12);
+  });
+
+});