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

package/src/seekBar.js

@@ -5,8 +5,9 @@
 /* eslint-disable max-classes-per-file */
 
 import mousetrap from 'mousetrap';
-import { truncate, sanitize, reactiveSetters } from './helpers';
+
 import { classNames, colors } from './constants';
+import { truncate, sanitize, reactiveSetters } from './helpers';
 
 const constants = Object.freeze({
   className: 'vdt-seekbar',
@@ -249,7 +250,7 @@ export default class SeekBar {
     this.state = {
       in: null, // in seconds from 0
       out: null,
-      markersEnabled: (this.props.markersEnabled === undefined) ? true : this.props.markersEnabled,
+      markersEnabled: this.props.markersEnabled === undefined ? true : this.props.markersEnabled,
       regions: [], // array with regions providing {in: 0, out: 12} and possibly more
       dragging: false,
     };
@@ -264,8 +265,8 @@ export default class SeekBar {
       this.style.type = 'text/css';
 
       // colors from props
-      const bgColor = (this.props.bgColor) ? this.props.bgColor : constants.defaults.bgColor;
-      const fillColor = (this.props.fillColor) ? this.props.fillColor : constants.defaults.fillColor;
+      const bgColor = this.props.bgColor ? this.props.bgColor : constants.defaults.bgColor;
+      const fillColor = this.props.fillColor ? this.props.fillColor : constants.defaults.fillColor;
 
       this.style.innerHTML = CSS(sanitize(bgColor), sanitize(fillColor));
       this.shadow.appendChild(this.style);
@@ -294,7 +295,8 @@ export default class SeekBar {
   then could use requestAnimationFrame and
   get a smoother animation at more expense
   */
-  bindEvents() { // bind to vdt player instance
+  bindEvents() {
+    // bind to vdt player instance
     if (this.props.player) {
       const { player } = this.props;
       player.videojs.on('timeupdate', () => {
@@ -370,9 +372,10 @@ export default class SeekBar {
   }
 
   unbindHotKeys() {
-    this.bindings && this.bindings.forEach((binding) => {
-      mousetrap.unbind(binding.key);
-    });
+    this.bindings &&
+      this.bindings.forEach((binding) => {
+        mousetrap.unbind(binding.key);
+      });
   }
 
   handleSeek(event) {
@@ -389,7 +392,7 @@ export default class SeekBar {
             // callback for clicking on a region, if callback returns false, no seek happens
             // TODO - make a convention of returning true / false to break from seek
             if (this.props.onRegionClick) {
-              preventSeek = (this.props.onRegionClick(region));
+              preventSeek = this.props.onRegionClick(region);
               if (!preventSeek) {
                 player.seekTo(region.in);
               }
@@ -409,7 +412,8 @@ export default class SeekBar {
         if (clickedOnRegion) return;
       }
 
-      const seekFractionX = (event.clientX - this.bar.getBoundingClientRect().left) / this.bar.offsetWidth;
+      const seekFractionX =
+        (event.clientX - this.bar.getBoundingClientRect().left) / this.bar.offsetWidth;
       // -> 0.34732
 
       const timeToSeek = seekFractionX * player.videojs.duration();
@@ -428,7 +432,8 @@ export default class SeekBar {
       left = e.clientX - barOffset;
       const pxDragged = Math.abs(mouseDownEvent.clientX - e.clientX);
 
-      if (left >= 0 && left < barWidth && pxDragged > 1) { // prevent out-of-bounds
+      if (left >= 0 && left < barWidth && pxDragged > 1) {
+        // prevent out-of-bounds
         this.dragging = true;
         const fractionFromStart = parseFloat(left) / barWidth;
         const seconds = fractionFromStart * duration;
@@ -468,13 +473,18 @@ export default class SeekBar {
 
     // handle drag
 
-    this.bar.addEventListener('mousedown', (e) => {
-      e.preventDefault(); // prevents selection cursor
+    this.bar.addEventListener(
+      'mousedown',
+      (e) => {
+        e.preventDefault(); // prevents selection cursor
 
-      if (!this.dragging) { // don't attach listeners if something is already dragging
-        this.handleSeekDrag(e);
-      }
-    }, false);
+        if (!this.dragging) {
+          // don't attach listeners if something is already dragging
+          this.handleSeekDrag(e);
+        }
+      },
+      false,
+    );
 
     this.fill = document.createElement('div');
     this.fill.className = 'fill';
@@ -493,10 +503,11 @@ export default class SeekBar {
     this.drawMarkers();
   }
 
-  drawMarkers() { // TODO - add touch events
+  drawMarkers() {
+    // TODO - add touch events
     if (this.markersEnabled) {
-      const markerIn = this.markers[constants.markerTypes.in] = document.createElement('div');
-      const markerOut = this.markers[constants.markerTypes.out] = document.createElement('div');
+      const markerIn = (this.markers[constants.markerTypes.in] = document.createElement('div'));
+      const markerOut = (this.markers[constants.markerTypes.out] = document.createElement('div'));
       markerIn.className = `marker ${constants.markerTypes.in}`;
       markerOut.className = `marker ${constants.markerTypes.out}`;
 
@@ -504,19 +515,27 @@ export default class SeekBar {
       const handleOut = document.createElement('div');
       handleIn.className = handleOut.className = 'handle';
 
-      handleIn.addEventListener('mousedown', (e) => {
-        e.preventDefault(); // prevents selection cursor
-        e.stopPropagation(); // prevent triggering seek bar drag
+      handleIn.addEventListener(
+        'mousedown',
+        (e) => {
+          e.preventDefault(); // prevents selection cursor
+          e.stopPropagation(); // prevent triggering seek bar drag
 
-        this.handleMarkerDrag(markerIn, constants.markerTypes.in, e);
-      }, false);
+          this.handleMarkerDrag(markerIn, constants.markerTypes.in, e);
+        },
+        false,
+      );
 
-      handleOut.addEventListener('mousedown', (e) => {
-        e.preventDefault(); // prevents selection cursor
-        e.stopPropagation(); // prevent triggering seek bar drag
+      handleOut.addEventListener(
+        'mousedown',
+        (e) => {
+          e.preventDefault(); // prevents selection cursor
+          e.stopPropagation(); // prevent triggering seek bar drag
 
-        this.handleMarkerDrag(markerOut, constants.markerTypes.out, e);
-      }, false);
+          this.handleMarkerDrag(markerOut, constants.markerTypes.out, e);
+        },
+        false,
+      );
 
       markerIn.appendChild(handleIn);
       markerOut.appendChild(handleOut);
@@ -534,7 +553,7 @@ export default class SeekBar {
     if (this.state.regions) {
       // check if any region contains in / out matching value
       const matchingRegions = [];
-      const isRegional = (matchingRegions.length > 0);
+      const isRegional = matchingRegions.length > 0;
       if (isRegional) {
         this.markers[marker.type].classList.add('regional');
       } else {
@@ -545,10 +564,13 @@ export default class SeekBar {
     this.drawInAndOutRegion();
   }
 
-  drawInAndOutRegion() { // triggered after drawMarkers if in + out is set
+  drawInAndOutRegion() {
+    // triggered after drawMarkers if in + out is set
     if (this.state.in !== null && this.state.out !== null) {
       this.region.style.left = this.markers[constants.markerTypes.in].style.left;
-      this.region.style.right = `${100 - parseFloat(this.markers[constants.markerTypes.out].style.left.replace('%', ''))}%`;
+      this.region.style.right = `${
+        100 - parseFloat(this.markers[constants.markerTypes.out].style.left.replace('%', ''))
+      }%`;
     } else {
       // remove region div or hide it
     }
@@ -559,7 +581,8 @@ export default class SeekBar {
   but find out if there is a mobile use
   case before that
   */
-  handleMarkerDrag(markerNode, type, mouseDownEvent) { // marker node, marker type (constants.markerTypes)
+  handleMarkerDrag(markerNode, type, mouseDownEvent) {
+    // marker node, marker type (constants.markerTypes)
     const barOffset = this.bar.getBoundingClientRect().left; // px from page left side
     const barWidth = this.bar.getBoundingClientRect().width; // seek bar width
     const duration = this.props.player.videojs.duration(); // in secondsā
@@ -567,15 +590,20 @@ export default class SeekBar {
 
     const drag = (e) => {
       const pxDragged = Math.abs(mouseDownEvent.clientX - e.clientX);
-      const markerOffset = (type === constants.markerTypes.in) ? (constants.defaults.markerWidth / 2) : -(constants.defaults.markerWidth / 2);
+      const markerOffset =
+        type === constants.markerTypes.in
+          ? constants.defaults.markerWidth / 2
+          : -(constants.defaults.markerWidth / 2);
       const left = e.clientX - barOffset + markerOffset;
 
-      if (left >= 0 && left < barWidth && pxDragged > 1) { // prevent out-of-bounds
+      if (left >= 0 && left < barWidth && pxDragged > 1) {
+        // prevent out-of-bounds
         dragHappened = this.dragging = true;
         markerNode.style.left = `${left}px`;
         markerNode.classList.add('active');
 
-        const fractionFromStart = parseFloat(markerNode.getBoundingClientRect().left - barOffset) / barWidth;
+        const fractionFromStart =
+          parseFloat(markerNode.getBoundingClientRect().left - barOffset) / barWidth;
         const seconds = fractionFromStart * duration;
         this.props.player.videojs.currentTime(seconds);
       }
@@ -590,7 +618,8 @@ export default class SeekBar {
       document.removeEventListener('mousemove', drag, false);
       document.removeEventListener('mouseup', stopDrag, false);
 
-      const fractionFromStart = parseFloat(markerNode.getBoundingClientRect().left - barOffset) / barWidth;
+      const fractionFromStart =
+        parseFloat(markerNode.getBoundingClientRect().left - barOffset) / barWidth;
       const seconds = fractionFromStart * duration;
       this[type] = seconds;
       this.props.player.videojs.currentTime(seconds);
@@ -633,7 +662,8 @@ export default class SeekBar {
       removedMarker = true;
     }
 
-    if (removedMarker) { // if a marker was removed, region no longer is valid
+    if (removedMarker) {
+      // if a marker was removed, region no longer is valid
       this.region.style.left = 'initial';
       this.region.style.right = 'initial';
     }
@@ -734,12 +764,16 @@ export default class SeekBar {
     }
   }
 
-  set regions(regionArray) { // different than i / o markers
-    if (this.state.regions.length < 1) { // first time add
-      regionArray && regionArray.forEach((region) => {
-        this.addRegion(region);
-      });
-    } else { // state redraw
+  set regions(regionArray) {
+    // different than i / o markers
+    if (this.state.regions.length < 1) {
+      // first time add
+      regionArray &&
+        regionArray.forEach((region) => {
+          this.addRegion(region);
+        });
+    } else {
+      // state redraw
       this.state.regions.forEach((region, index) => {
         this.removeRegion(index);
       });
@@ -772,15 +806,18 @@ export default class SeekBar {
     if (regionObj.constructor.name === Region.name) {
       this.state.regions.push(regionObj);
       this.drawRegion(regionObj);
-    } else { // try to construct region if has accepted properties
+    } else {
+      // try to construct region if has accepted properties
       this.addRegion(new Region(regionObj));
     }
   }
 
   removeRegion(param) {
-    if (typeof param === typeof Region) { // TODO - implement this - find by region obj
+    if (typeof param === typeof Region) {
+      // TODO - implement this - find by region obj
       // find said matching region
-    } else { // it's an index
+    } else {
+      // it's an index
       this.state.regions[param].el.remove();
       this.state.regions[param] = null;
       delete this.state.regions[param];

package/src/timeCodeDisplay.js

@@ -3,14 +3,10 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable no-unused-expressions */
 
-const timeCodeNodeNames = [
-  'hours',
-  'minutes',
-  'seconds',
-  'frame',
-];
-
-export default class TimeCodeDisplay {// displays and renders smpte timecodes
+const timeCodeNodeNames = ['hours', 'minutes', 'seconds', 'frame'];
+
+export default class TimeCodeDisplay {
+  // displays and renders smpte timecodes
   constructor(props) {
     this.props = props;
 
@@ -21,7 +17,7 @@ export default class TimeCodeDisplay {// displays and renders smpte timecodes
     const classNames = [
       'vdt-timecode',
       'vjs-time-control', // will apply default videojs style to the whole container, centers things vertically
-      (!(this.props.onInput)) ? 'duration' : '', // if no input capability, assume it's a duration timecode
+      !this.props.onInput ? 'duration' : '', // if no input capability, assume it's a duration timecode
     ];
     this.container = document.createElement('div');
     this.container.className = classNames.join(' ');
@@ -34,7 +30,8 @@ export default class TimeCodeDisplay {// displays and renders smpte timecodes
       node.className = nodeName;
       node.tabIndex = -1; // prevent default Tab behaviour for cycling inputs
 
-      if (this.props.onInput) { // optional input capabilities
+      if (this.props.onInput) {
+        // optional input capabilities
         node.maxLength = 2;
 
         node.onfocus = (e) => {
@@ -63,17 +60,16 @@ export default class TimeCodeDisplay {// displays and renders smpte timecodes
 
       this.nodes[nodeName] = node;
 
-
       const colon = document.createElement('span');
       colon.innerHTML = ':';
 
-
       this.container.appendChild(node);
-      (index !== this.nodeNames.length - 1) && this.container.appendChild(colon);
+      index !== this.nodeNames.length - 1 && this.container.appendChild(colon);
     });
 
     if (this.props.target) {
-      if (this.props.appendAfter) { // so it's possible to append after volume control, for example
+      if (this.props.appendAfter) {
+        // so it's possible to append after volume control, for example
         this.props.target.parentNode.insertBefore(this.container, this.props.target.nextSibling);
       } else {
         this.props.target.appendChild(this.container);
@@ -87,13 +83,20 @@ export default class TimeCodeDisplay {// displays and renders smpte timecodes
     }
   }
 
-  update(valuesObj) { // Object.keys and array.forEach are too slow, classic for is faster
+  update(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--) { // updates follow frame -> seconds -> minutes -> hours order
+    for (i = startCount; i > -1; i--) {
+      // 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
+      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);
       }
@@ -126,7 +129,7 @@ export default class TimeCodeDisplay {// displays and renders smpte timecodes
   }
 
   toDigitPairStr(strValue) {
-    return (strValue.length < 2) ? `0${strValue}` : strValue;
+    return strValue.length < 2 ? `0${strValue}` : strValue;
   }
 
   handleTimeCodeInput(e, nodeName) {
@@ -136,12 +139,13 @@ export default class TimeCodeDisplay {// displays and renders smpte timecodes
       case 'Enter': // do work before submitting input
         this.checkAndNormalizeAllInputs();
 
-        this.props.onInput && this.props.onInput(e, nodeName, {
-          hours: this.hours,
-          minutes: this.minutes,
-          seconds: this.seconds,
-          frame: this.frame,
-        });
+        this.props.onInput &&
+          this.props.onInput(e, nodeName, {
+            hours: this.hours,
+            minutes: this.minutes,
+            seconds: this.seconds,
+            frame: this.frame,
+          });
 
         this[nodeName] = e.currentTarget.value;
         e.currentTarget.blur(); // done
@@ -151,12 +155,12 @@ export default class TimeCodeDisplay {// displays and renders smpte timecodes
 
         // tab trough inputs in a loop fashion
         if (!e.shiftKey) {
-          if ((nodeIndex + 1) <= (this.nodeNames.length - 1)) {
+          if (nodeIndex + 1 <= this.nodeNames.length - 1) {
             this.nodes[this.nodeNames[nodeIndex + 1]].focus(); // focus next
           } else {
             this.nodes[this.nodeNames[0]].focus(); // focus first
           }
-        } else if ((nodeIndex - 1) >= 0) {
+        } else if (nodeIndex - 1 >= 0) {
           this.nodes[this.nodeNames[nodeIndex - 1]].focus(); // focus previous
         } else {
           this.nodes[this.nodeNames[this.nodeNames.length - 1]].focus(); // focus last
@@ -180,7 +184,8 @@ export default class TimeCodeDisplay {// displays and renders smpte timecodes
     if (this.nodes[nodeName].value.length === 2 && !isNaN(e.key)) {
       const nodeIndex = this.nodeNames.indexOf(nodeName); // determine position in timecode
 
-      if ((nodeIndex + 1) <= (this.nodeNames.length - 1)) { // check bounds
+      if (nodeIndex + 1 <= this.nodeNames.length - 1) {
+        // check bounds
         this.nodes[this.nodeNames[nodeIndex + 1]].focus(); // focus next
       }
     }
@@ -188,7 +193,8 @@ export default class TimeCodeDisplay {// displays and renders smpte timecodes
 
   checkAndNormalizeAllInputs() {
     this.nodeNames.forEach((nodeName) => {
-      if (this.nodes[nodeName].value.length < 1) { // somebody left the input blank
+      if (this.nodes[nodeName].value.length < 1) {
+        // somebody left the input blank
         this.nodes[nodeName].value = '00';
       }
 
@@ -244,12 +250,14 @@ export default class TimeCodeDisplay {// displays and renders smpte timecodes
     };
   }
 
-  set spmte(o) {
+  set smpte(o) {
     this.update(o);
   }
 
   get smpteString() {
-    return `${this.getFormatted('hours')}:${this.getFormatted('minutes')}:${this.getFormatted('seconds')}:${this.getFormatted('frame')}`;
+    return `${this.getFormatted('hours')}:${this.getFormatted('minutes')}:${this.getFormatted(
+      'seconds',
+    )}:${this.getFormatted('frame')}`;
   }
 
   set external(bool) {
@@ -261,6 +269,6 @@ export default class TimeCodeDisplay {// displays and renders smpte timecodes
   }
 
   get external() {
-    return (this.container.classList.contains('external'));
+    return this.container.classList.contains('external');
   }
 }

package/src/videoTime.js

@@ -36,10 +36,10 @@ class VideoTime {
 
   smpteToCurrentTimeFromStart(values) {
     return (
-      values.hours * 3600
-      + values.minutes * 60
-      + values.seconds
-      + values.frame / this.props.frameRate
+      values.hours * 3600 +
+      values.minutes * 60 +
+      values.seconds +
+      values.frame / this.props.frameRate
     );
   }