@vidispine/vdt-videojs 21.3.0 → 22.1.0-pre.1

package/src/player.js

@@ -1,12 +1,5 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-case-declarations */
 /* eslint-disable no-underscore-dangle */
-/* eslint-disable no-unused-expressions */
-/* eslint-disable max-classes-per-file */
-/* eslint-disable no-plusplus */
-/* eslint-disable prefer-rest-params */
 /* eslint-disable import/no-named-as-default-member */
-
 /*
 Eslint rules disabled for lines like these:
 
@@ -14,20 +7,21 @@ this.props.target && this.props.target.appendChild(this.videoEl); //validity che
 document.getElementsByClassName('vjs-volume-panel')[0] //rule asks for destructuring
 this.videojs.hasStarted_ //dangling underscore produced by video.js in this case
 */
-import videojs from 'video.js/dist/alt/video.core.min';
+// eslint-disable-next-line max-classes-per-file
 import mousetrap from 'mousetrap';
+import videojs from 'video.js/dist/alt/video.core.min';
 
 import constants from './constants';
 import { reactiveSetters } from './helpers';
-
-import OSD from './osd';
-import TimeCodeDisplay from './timeCodeDisplay';
 import HelpOverlay from './helpOverlay';
 import Menu from './menu';
+import OSD from './osd';
 import SeekBar from './seekBar';
-
+import TimeCodeDisplay from './timeCodeDisplay';
 import VideoTime from './videoTime';
 
+import './player.scss';
+
 const correctMimeTypes = {
   'audio/x-aac': 'audio/aac',
 };
@@ -38,11 +32,12 @@ export default class Player {
     this.props = props; // save props
     reactiveSetters.apply(this); // ability to handle new props via setters
 
-    const classNames = [ // add conditional css classes here for the whole container
+    const classNames = [
+      // add conditional css classes here for the whole container
       'video-js',
       'vjs-big-play-centered',
-      (this.props.posterUrl) ? constants.classNames.poster : '',
-      (this.props.subtitles && this.props.subtitles.length > 0) ? constants.classNames.subtitles : '',
+      this.props.posterUrl ? constants.classNames.poster : '',
+      this.props.subtitles && this.props.subtitles.length > 0 ? constants.classNames.subtitles : '',
       'init', // make player height 0 while no metadata for video size available with css
     ];
 
@@ -70,7 +65,7 @@ export default class Player {
     if (this.props.sources) {
       // sort mp4 at the top
       if (this.props.sources.length > 1) {
-        this.props.sources.sort((a) => ((a.type.indexOf('mp4') > 0) ? 1 : -1));
+        this.props.sources.sort((a) => (a.type.indexOf('mp4') > 0 ? 1 : -1));
       }
 
       // construct <source> els
@@ -80,21 +75,20 @@ export default class Player {
         aSource.type = sanitizeMimeType(source.type);
         this.videoEl.appendChild(aSource);
       });
-    }// handle else with err later
+    } // handle else with err later
 
-    this.videoEl.onloadedmetadata = () => { // read-only duration timecode
+    this.videoEl.onloadedmetadata = () => {
+      // read-only duration timecode
       if (this.durationTimeCode) {
         this.setDurationTimeCode();
       }
 
-      this.videojs.el_.classList.remove('init');
+      if (this.videojs.el_) this.videojs.el_.classList.remove('init');
     };
 
     // if video has not loaded by now, show the player w/ errors
     setTimeout(() => {
-      if (this.videojs.el_) {
-        this.videojs.el_.classList.remove('init');
-      }
+      if (this.videojs.el_) this.videojs.el_.classList.remove('init');
     }, 2000);
 
     // attach subtitle tracks (these should come in last in the <video /> node)
@@ -117,14 +111,13 @@ export default class Player {
     }
 
     // attach to dom and construct videojs player
-    if (this.props.target) {
-      this.props.target && this.props.target.appendChild(this.videoEl);
-    }
+    if (this.props.target) this.props.target.appendChild(this.videoEl);
 
-    const showDefaultTimeDisplay = (this.props.timecode !== true);
-    const controlsEnabled = (this.props.controls !== false);
+    const showDefaultTimeDisplay = this.props.timecode !== true;
+    const controlsEnabled = this.props.controls !== false;
     const options = this.props.options || {};
 
+    // eslint-disable-next-line new-cap
     this.videojs = new videojs('vdt-video', {
       responsive: true,
       fluid: true,
@@ -136,7 +129,9 @@ export default class Player {
         durationDisplay: showDefaultTimeDisplay,
         currentTimeDisplay: showDefaultTimeDisplay,
       },
-      inactivityTimeout: (this.audioOnly) ? constants.defaults.audioInactivityTimeout : constants.defaults.inactivityTimeout,
+      inactivityTimeout: this.audioOnly
+        ? constants.defaults.audioInactivityTimeout
+        : constants.defaults.inactivityTimeout,
       preload: 'auto',
       captionsButton: false,
       subsCapsButton: false,
@@ -155,7 +150,7 @@ export default class Player {
     });
 
     // set the poster
-    this.props.posterUrl && this.videojs.poster(this.props.posterUrl);
+    if (this.props.posterUrl) this.videojs.poster(this.props.posterUrl);
 
     // set other props that are passed
     this.handleNewProps(this.props);
@@ -164,7 +159,7 @@ export default class Player {
     this.videojs.ready(() => {
       this.bindHotkeys();
       this.bindEvents();
-      this.props.onReady && this.props.onReady(this.videojs);
+      if (this.props.onReady) this.props.onReady(this.videojs);
 
       this.restoreSettings();
       this.setupTimeCode();
@@ -193,14 +188,14 @@ export default class Player {
       // show & hide markers when controls hide
       this.videojs.on('userinactive', () => {
         if (!this.controlsBelowPlayer) {
-          this.seekBar && this.seekBar.hideMarkers();
+          if (this.seekBar) this.seekBar.hideMarkers?.();
         } else {
-          this.seekBar && this.seekBar.showMarkers();
+          this.seekBar?.showMarkers?.();
         }
       });
 
       this.videojs.on('useractive', () => {
-        this.seekBar && this.seekBar.showMarkers();
+        if (this.seekBar) this.seekBar.showMarkers();
       });
     }
   }
@@ -230,10 +225,13 @@ export default class Player {
       },
     };
 
-    if (externalTimecodeInstance !== null) { // setting up an external playback timecode
+    if (externalTimecodeInstance !== null) {
+      // setting up an external playback timecode
+      // eslint-disable-next-line no-param-reassign
       externalTimecodeInstance.props = Object.assign(externalTimecodeInstance.props, props);
       this.externalTimecodes.playback.push(externalTimecodeInstance);
-    } else if (this.props.timecode === true) { // player uses timecode
+    } else if (this.props.timecode === true) {
+      // player uses timecode
       // construct an in-frame timecode, if controls are enabled
       if (this.props.controls !== false) {
         const target = document.getElementsByClassName('vjs-volume-panel')[0];
@@ -260,11 +258,12 @@ export default class Player {
     }
   }
 
-  updateTimeCode() { // HH:MM:SS (the usual)
+  updateTimeCode() {
+    // HH:MM:SS (the usual)
     const currentSecond = this.videojs.currentTime();
     const props = this.timeConverter.secondsFromStartToSMPTE(currentSecond);
 
-    this.timeCode && this.timeCode.update(props);
+    if (this.timeCode) this.timeCode.update(props);
 
     if (this.externalTimecodes.playback.length > 0) {
       this.externalTimecodes.playback.forEach((timecode) => {
@@ -273,10 +272,11 @@ export default class Player {
     }
   }
 
-  updateTimeCodeFrame() { // update the frame in this second -> 00:00:00:XX
+  updateTimeCodeFrame() {
+    // update the frame in this second -> 00:00:00:XX
     const frame = this.timeConverter.currentFrame(this.videojs.currentTime()); // -> :XX
 
-    this.timeCode && this.timeCode.update({ frame }); // TODO - figure out a way to drop frames
+    if (this.timeCode) this.timeCode.update({ frame }); // TODO - figure out a way to drop frames
 
     if (this.externalTimecodes.playback.length > 0) {
       this.externalTimecodes.playback.forEach((timecode) => {
@@ -286,11 +286,14 @@ export default class Player {
 
     // recursive invocation if still playing
     if (!this.videojs.paused()) {
-      this.rafID = requestAnimationFrame(() => { this.updateTimeCodeFrame(); });
+      this.rafID = requestAnimationFrame(() => {
+        this.updateTimeCodeFrame();
+      });
     }
   }
 
-  setDurationTimeCode() { // happens once
+  setDurationTimeCode() {
+    // happens once
     const durationInSeconds = this.videojs.duration();
     const props = this.timeConverter.secondsFromStartToSMPTE(durationInSeconds);
     props.frame = this.timeConverter.secondsToFrame(durationInSeconds);
@@ -299,26 +302,27 @@ export default class Player {
     this.durationTimeCode.container.classList.add('duration');
   }
 
-  bindHotkeys() { // keyboard shortcuts
+  bindHotkeys() {
+    // keyboard shortcuts
     this.bindings = [
       {
         key: ['space', 'k'],
         method: (e) => {
           // prevents page scroll on space, just like YT
-          (e.preventDefault) && e.preventDefault();
+          if (e.preventDefault) e.preventDefault();
           this.togglePlayback();
         },
       },
       {
         key: 'j',
         method: () => {
-          this.videojs.hasStarted_ && this.jumpBackward();
+          if (this.videojs.hasStarted_) this.jumpBackward();
         },
       },
       {
         key: 'l',
         method: () => {
-          this.videojs.hasStarted_ && this.jumpForward();
+          if (this.videojs.hasStarted_) this.jumpForward();
         },
       },
       {
@@ -348,14 +352,14 @@ export default class Player {
       {
         key: 'up',
         method: (e) => {
-          e.preventDefault && e.preventDefault(); // prevent page scroll
+          if (e.preventDefault) e.preventDefault(); // prevent page scroll
           this.volumeUp();
         },
       },
       {
         key: 'down',
         method: (e) => {
-          e.preventDefault && e.preventDefault(); // prevent page scroll
+          if (e.preventDefault) e.preventDefault(); // prevent page scroll
           this.volumeDown();
         },
       },
@@ -368,7 +372,7 @@ export default class Player {
       {
         key: 'n',
         method: () => {
-          this.menu && this.menu.toggle();
+          if (this.menu) this.menu.toggle();
         },
       },
     ];
@@ -392,22 +396,26 @@ export default class Player {
   }
 
   unbindHotKeys() {
-    this.bindings && this.bindings.forEach((binding) => {
-      mousetrap.unbind(binding.key);
-    });
+    if (this.bindings)
+      this.bindings.forEach((binding) => {
+        mousetrap.unbind(binding.key);
+      });
   }
 
   bindEvents() {
-    this.videojs.on('volumechange', () => { // persist volume changes
+    this.videojs.on('volumechange', () => {
+      // persist volume changes
       this.persistSetting(constants.settings.volume, this.volume);
     });
 
-    this.videojs.textTracks().on('change', () => { // determine subtitles state
+    this.videojs.textTracks().on('change', () => {
+      // determine subtitles state
       const tracks = this.videojs.textTracks().tracks_;
-      const selected = tracks.filter((track) => (track.mode === 'showing'));
+      const selected = tracks.filter((track) => track.mode === 'showing');
       const areAnyTxtTracksActive = selected.length > 0; // -> true if any text tracks are showing
 
-      if (areAnyTxtTracksActive) { // update container with appropriate className
+      if (areAnyTxtTracksActive) {
+        // update container with appropriate className
         this.videojs.el_.classList.add(constants.classNames.subtitlesActive);
         this.persistSetting(constants.settings.subs, true);
         this.persistSetting(constants.settings.subLang, selected[0].language);
@@ -446,7 +454,8 @@ export default class Player {
     }
   }
 
-  seek(secs) { // relative to current playback time
+  seek(secs) {
+    // relative to current playback time
     let time = this.videojs.currentTime() + secs;
 
     if (time < 0) {
@@ -457,7 +466,7 @@ export default class Player {
   }
 
   seekTo(sec) {
-    !this.videojs.hasStarted() && this.videojs.hasStarted(true);
+    if (!this.videojs.hasStarted()) this.videojs.hasStarted(true);
     this.videojs.currentTime(sec);
   }
 
@@ -492,9 +501,12 @@ export default class Player {
     return frame; // we're on this frame, could be for example 23.45
   }
 
-  doEsothericWork() { // non critical parts, that are nice to have
-    if (this.props.color) { // change the seekbar color from props
-      document.getElementsByClassName('vjs-play-progress')[0].style.backgroundColor = this.props.color;
+  doEsothericWork() {
+    // non critical parts, that are nice to have
+    if (this.props.color) {
+      // change the seekbar color from props
+      document.getElementsByClassName('vjs-play-progress')[0].style.backgroundColor =
+        this.props.color;
     }
 
     // feedback gizmo, mainly for feedback on hotkey-presses
@@ -548,7 +560,8 @@ export default class Player {
     });
   }
 
-  restoreSettings() { // restore settings, like volume level or language track
+  restoreSettings() {
+    // restore settings, like volume level or language track
     // get values from storage
     const volume = localStorage.getItem(constants.settings.volume);
     const subsEnabled = localStorage.getItem(constants.settings.subs);
@@ -557,15 +570,16 @@ export default class Player {
     // values vs default behaviours in a neatly readable map
     this.settings = {
       // avoid .99999999 and other float pecularities in js
-      [constants.settings.volume]: (volume !== null) ? Math.round(volume * 100) / 100 : 1,
-      [constants.settings.subLang]: (subLang !== null) ? subLang : 'en',
-      [constants.settings.subs]: (subsEnabled !== null) ? JSON.parse(subsEnabled) : false,
+      [constants.settings.volume]: volume !== null ? Math.round(volume * 100) / 100 : 1,
+      [constants.settings.subLang]: subLang !== null ? subLang : 'en',
+      [constants.settings.subs]: subsEnabled !== null ? JSON.parse(subsEnabled) : false,
     };
 
     // apply values (settings)
     this.volume = this.settings[constants.settings.volume]; // volume
 
-    if (this.settings[constants.settings.subs]) { // subtitles
+    if (this.settings[constants.settings.subs]) {
+      // subtitles
       this.enableSubs();
     }
   }
@@ -578,7 +592,7 @@ export default class Player {
   enableSubs() {
     const subs = this.videojs.textTracks();
 
-    for (let i = 0; i < subs.length; i++) {
+    for (let i = 0; i < subs.length; i += 1) {
       const sub = subs[i];
       if (sub.language === this.settings[constants.settings.subLang]) {
         sub.mode = 'showing';
@@ -591,15 +605,19 @@ export default class Player {
   disableSubs() {
     const subs = this.videojs.textTracks();
 
-    for (let i = 0; i < subs.length; i++) {
+    for (let i = 0; i < subs.length; i += 1) {
       const sub = subs[i];
       sub.mode = 'hidden';
     }
   }
 
   toggleSubs() {
-    if (this.videojs.textTracks().length > 0) { // check if subtitles exist
-      if (this.videojs.textTracks().tracks_.filter((track) => (track.mode === 'showing')).length > 0) { // a certain subtitle track is enabled
+    if (this.videojs.textTracks().length > 0) {
+      // check if subtitles exist
+      if (
+        this.videojs.textTracks().tracks_.filter((track) => track.mode === 'showing').length > 0
+      ) {
+        // a certain subtitle track is enabled
         this.disableSubs();
       } else {
         this.enableSubs();
@@ -620,12 +638,15 @@ export default class Player {
     const CustomButton = videojs.extend(Button, {
       /* eslint-disable func-names, object-shorthand */
       constructor: function () {
+        // eslint-disable-next-line prefer-rest-params
         Button.apply(this, arguments);
-        options.className && this.el_.classList.add(options.className);
-        if (options.title) { this.el_.title = options.title; }
+        if (options.className) this.el_.classList.add(options.className);
+        if (options.title) {
+          this.el_.title = options.title;
+        }
       },
       handleClick: () => {
-        options.onClick && options.onClick();
+        if (options.onClick) options.onClick();
       },
     });
 
@@ -650,7 +671,8 @@ export default class Player {
   setupMenu() {
     const menuItems = this.props.menuItems || [];
     const sourcesMenuItems = [];
-    if (this.props.sources.length > 1) { // show only if more than 1 source
+    if (this.props.sources.length > 1) {
+      // show only if more than 1 source
       this.props.sources.forEach((source) => {
         if (source.label) {
           sourcesMenuItems.push({
@@ -665,8 +687,12 @@ export default class Player {
       menuItems.push({
         title: 'Sources',
         getActiveIndex: () => {
-          const matchingSource = this.props.sources.find((source) => (source.src === this.videojs.src()));
-          return sourcesMenuItems.indexOf(sourcesMenuItems.find((menuItem) => (menuItem.title === matchingSource.label)));
+          const matchingSource = this.props.sources.find(
+            (source) => source.src === this.videojs.src(),
+          );
+          return sourcesMenuItems.indexOf(
+            sourcesMenuItems.find((menuItem) => menuItem.title === matchingSource.label),
+          );
         },
         items: sourcesMenuItems,
       });
@@ -675,12 +701,14 @@ export default class Player {
     // subtitles
     if (this.props.subtitles && this.props.subtitles.length > 0) {
       // off option for subs
-      const subtitleMenuItems = [{
-        title: 'Off',
-        onClick: () => {
-          this.disableSubs();
+      const subtitleMenuItems = [
+        {
+          title: 'Off',
+          onClick: () => {
+            this.disableSubs();
+          },
         },
-      }];
+      ];
 
       // quick toggle in the control bar
       // this.addButtonToControlBar({
@@ -697,7 +725,7 @@ export default class Player {
           title: subtitle.label,
           onClick: () => {
             const subs = this.videojs.textTracks();
-            for (let i = 0; i < subs.length; i++) {
+            for (let i = 0; i < subs.length; i += 1) {
               const sub = subs[i];
               if (i === index) {
                 sub.mode = 'showing';
@@ -709,23 +737,21 @@ export default class Player {
         });
       });
 
-      menuItems.push(
-        {
-          title: 'Subtitles',
-          getActiveIndex: () => {
-            const subs = this.videojs.textTracks();
-            for (let i = 0; i < subs.length; i++) {
-              const sub = subs[i];
-              if (sub.mode === 'showing') {
-                return i + 1; // offset "off" option
-              }
+      menuItems.push({
+        title: 'Subtitles',
+        getActiveIndex: () => {
+          const subs = this.videojs.textTracks();
+          for (let i = 0; i < subs.length; i += 1) {
+            const sub = subs[i];
+            if (sub.mode === 'showing') {
+              return i + 1; // offset "off" option
             }
+          }
 
-            return 0; // if none are showing, then probably "off"
-          },
-          items: subtitleMenuItems,
+          return 0; // if none are showing, then probably "off"
         },
-      );
+        items: subtitleMenuItems,
+      });
     }
 
     if (menuItems.length > 0) {
@@ -735,10 +761,10 @@ export default class Player {
         target,
         items: menuItems,
         onOpen: () => {
-          !this.controlsBelowPlayer && this.hideControls();
+          if (!this.controlsBelowPlayer) this.hideControls();
         },
         onClose: () => {
-          !this.controlsBelowPlayer && this.videojs.controls(true);
+          if (!this.controlsBelowPlayer) this.videojs.controls(true);
         },
       });
 
@@ -755,7 +781,6 @@ export default class Player {
       });
     } else {
       // no menu items, no menu
-
     }
   }
 
@@ -811,25 +836,47 @@ export default class Player {
   }
 
   pause() {
-    !this.videojs.paused() && this.videojs.pause();
+    if (!this.videojs.paused()) this.videojs.pause();
   }
 
   togglePlayback() {
     if (this.videojs.paused()) {
       this.play();
-      this.videojs.hasStarted_ && this.osd.feedback(constants.osd.play);
+      if (this.videojs.hasStarted_) this.osd.feedback(constants.osd.play);
     } else {
       this.pause();
       this.osd.feedback(constants.osd.pause);
     }
   }
 
-  destroy() { // clean up
+  // TODO: Check that this works, I took what was in timeCodeDisplay.js
+  updateSmpte(valuesObj) {
+    // Object.keys and array.forEach are too slow, classic for is faster
+    const startCount = this.nodeNames.length - 1;
+    let i;
+    for (i = startCount; i > -1; i -= 1) {
+      // updates follow frame -> seconds -> minutes -> hours order
+      const key = this.nodeNames[i];
+
+      if (
+        typeof valuesObj[key] !== 'undefined' &&
+        valuesObj[key] !== parseInt(this.nodes[key].value, 10) &&
+        key !== this.state.selectedNode
+      ) {
+        // re-render node if value is defineed and is different from current value
+        const str = valuesObj[key].toString();
+        this.nodes[key].value = this.toDigitPairStr(str);
+      }
+    }
+  }
+
+  destroy() {
+    // clean up
     this.videojs.paused(true);
-    this.rafID && cancelAnimationFrame(this.rafID);
+    if (this.rafID) cancelAnimationFrame(this.rafID);
     this.videojs.dispose();
     this.unbindHotKeys();
-    this.seekBar && this.seekBar.destroy();
+    if (this.seekBar) this.seekBar.destroy();
   }
 
   get container() {
@@ -873,15 +920,16 @@ export default class Player {
     return this.timeConverter.secondsFromStartToSMPTE(currentSecond);
   }
 
-  set smpte(smpte) {
-    const currentSecond = this.videojs.currentTime();
-    return this.timeConverter.secondsFromStartToSMPTE(currentSecond);
+  set smpte(o) {
+    // TODO: Verify that this works.
+    //       Prior to this it used the getter as setter here...
+    this.updateSmpte(o);
   }
 
   set src({ src, type = 'video/mp4', label = null }) {
     const currentTime = this.videojs.currentTime();
     // iterate trough sources, find existing matches
-    const source = this.props.sources.find((aSource) => (aSource.src === src));
+    const source = this.props.sources.find((aSource) => aSource.src === src);
     // if no match try adding source
 
     const onReady = () => {
@@ -902,7 +950,7 @@ export default class Player {
       });
     };
 
-    if (source && typeof souce === 'Array' && source.length > 0) {
+    if (source && Array.isArray(source) && source.length > 0) {
       // TODO - if(source.length > 1) - try one by one until a successful load happens
       this.videojs.addClass('vjs-waiting');
       this.videojs.src({
@@ -931,6 +979,7 @@ export default class Player {
     return this.props.sources[index];
   }
 
+  // eslint-disable-next-line class-methods-use-this, no-unused-vars
   removeSrc(url) {
     // should remove all url matching sources
   }

package/src/player.scss

@@ -1,3 +1,5 @@
+@import '~video.js/src/css/video-js.scss';
+
 $red: #f00;
 $dark-translucent: rgba(28,28,28,0.9);
 $dark-gray: #333;

package/src/{player.example.md → player.usage.stories.mdx}

@@ -1,4 +1,16 @@
-# Player Example Usage
+import { Meta } from '@storybook/addon-docs';
+
+<Meta
+  title="vdt-videojs/Player/Example usage"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+## Example Usage
 
 `import { Player } from '@vidispine/vdt-videojs'`
 
@@ -7,12 +19,12 @@ Here's an example how to use the Player class in a pure js way in your project:
 ```
 const playerReference = new Player({
 	target: document.getElementById('player-node'),	//HTML mount point
-	
+
 	sources: [
 		{ src: 'https://some.domain/video-file.mp4', type: 'video/mp4'},
 		{ src: 'https://some.domain/video-file.webm', type: 'video/webm'}
 	],
-	
+
 	posterUrl: 'https://some.domain/poster-image.jpg',	 //optional
 	color: '#e84393',	 //optional - replaces primary color
 
@@ -34,14 +46,14 @@ const playerReference = new Player({
 			label: 'Danish'
 		}
 	],
-	
+
 	timecode: false, //optional - replaces time display with SMPTE timecode
 	frameRate: (24000/1001), //optional - use together with timecode option
-	
+
 	onReady: ()=>{ //optional
 		// invoke methods after player has done initializing
 	},
-	
+
 	/*
 	optional - will add a screenshot button to player
 	control bar and invoke method callback on click with player's
@@ -53,5 +65,3 @@ const playerReference = new Player({
 })
 
 ```
-
-See the [vdt-videojs-react](/?path=/story/vdt-videojs-react-videoplayer--basic) package for use with React.