@vidispine/vdt-videojs 23.1.0 → 23.2.0-pre.2

package/src/timeCodeDisplay.js

@@ -1,274 +0,0 @@
-/* eslint-disable no-restricted-globals */
-/* eslint-disable class-methods-use-this */
-/* eslint-disable no-plusplus */
-/* eslint-disable no-unused-expressions */
-
-const timeCodeNodeNames = ['hours', 'minutes', 'seconds', 'frame'];
-
-export default class TimeCodeDisplay {
-  // displays and renders smpte timecodes
-  constructor(props) {
-    this.props = props;
-
-    this.state = {
-      selectedNode: null, // avoid updating values in a selected node
-    };
-
-    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.container = document.createElement('div');
-    this.container.className = classNames.join(' ');
-
-    this.nodeNames = [].concat(timeCodeNodeNames); // used internally
-    this.nodes = {}; // store sub-element nodes for mapped access here
-
-    this.nodeNames.forEach((nodeName, index) => {
-      const node = document.createElement('input');
-      node.className = nodeName;
-      node.tabIndex = -1; // prevent default Tab behaviour for cycling inputs
-
-      if (this.props.onInput) {
-        // optional input capabilities
-        node.maxLength = 2;
-
-        node.onfocus = (e) => {
-          this.handleInputFocus(e, nodeName);
-        };
-
-        node.onblur = (e) => {
-          this.handleInputBlur(e, nodeName);
-        };
-
-        node.onmouseup = (e) => {
-          e.preventDefault();
-          e.currentTarget.select();
-        };
-
-        node.onkeydown = (e) => {
-          this.handleTimeCodeInput(e, nodeName);
-        };
-
-        node.onkeyup = (e) => {
-          this.handleTimeCodeInputOnKeyUp(e, nodeName);
-        };
-      } else {
-        node.readOnly = true; // display-only timecode
-      }
-
-      this.nodes[nodeName] = node;
-
-      const colon = document.createElement('span');
-      colon.innerHTML = ':';
-
-      this.container.appendChild(node);
-      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
-        this.props.target.parentNode.insertBefore(this.container, this.props.target.nextSibling);
-      } else {
-        this.props.target.appendChild(this.container);
-      }
-
-      // start at 0 values for now, if player will "remember" playback position, revisit this
-      this.reset();
-    } else {
-      // eslint-disable-next-line no-console
-      console.error(`Unable to instantiate a new ${this.constructor.name} without target DOM node`); // no joy
-    }
-  }
-
-  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
-      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);
-      }
-    }
-  }
-
-  reset() {
-    this.update({
-      hours: 0,
-      minutes: 0,
-      seconds: 0,
-      frame: 0,
-    });
-  }
-
-  handleInputFocus(e, nodeName) {
-    this.state.selectedNode = nodeName; // prevent updates on this input
-    this.nodes[nodeName].select();
-    this.props.onInputFocus && this.props.onInputFocus(nodeName);
-  }
-
-  handleInputBlur(e, nodeName) {
-    this.state.selectedNode = null; // allow updates on this input
-    this.props.onInputBlur && this.props.onInputBlur(nodeName);
-  }
-
-  sanitize(input) {
-    const output = input.replace(/[^0-9]/g, '');
-    return output;
-  }
-
-  toDigitPairStr(strValue) {
-    return strValue.length < 2 ? `0${strValue}` : strValue;
-  }
-
-  handleTimeCodeInput(e, nodeName) {
-    const nodeIndex = this.nodeNames.indexOf(nodeName);
-
-    switch (e.code) {
-      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[nodeName] = e.currentTarget.value;
-        e.currentTarget.blur(); // done
-        break;
-      case 'Tab': // custom tab behaviour
-        e.preventDefault();
-
-        // tab trough inputs in a loop fashion
-        if (!e.shiftKey) {
-          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) {
-          this.nodes[this.nodeNames[nodeIndex - 1]].focus(); // focus previous
-        } else {
-          this.nodes[this.nodeNames[this.nodeNames.length - 1]].focus(); // focus last
-        }
-        break;
-      default:
-        break;
-    }
-  }
-
-  handleTimeCodeInputOnKeyUp(e, nodeName) {
-    /*
-    cycle to next input if this one is done being populated,
-    has to happen onkeyup, since the timecode is already populated
-    with valid values most of the time, keydown would always trigger
-    false positive length check.
-
-    Also check if the input is a number (!isNaN),
-    to prevent double-triggering Tab key or other logic
-    */
-    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
-        this.nodes[this.nodeNames[nodeIndex + 1]].focus(); // focus next
-      }
-    }
-  }
-
-  checkAndNormalizeAllInputs() {
-    this.nodeNames.forEach((nodeName) => {
-      if (this.nodes[nodeName].value.length < 1) {
-        // somebody left the input blank
-        this.nodes[nodeName].value = '00';
-      }
-
-      // make sure displayed timecode stays consistent after input and before time-based updates
-      this.nodes[nodeName].value = this.toDigitPairStr(this.sanitize(this.nodes[nodeName].value));
-    });
-  }
-
-  // setters and getters
-
-  set frame(val) {
-    this.nodes.frame.value = this.toDigitPairStr(val);
-  }
-
-  get frame() {
-    return parseInt(this.nodes.frame.value, 10);
-  }
-
-  set seconds(val) {
-    this.nodes.seconds.value = this.toDigitPairStr(val);
-  }
-
-  get seconds() {
-    return parseInt(this.nodes.seconds.value, 10);
-  }
-
-  set minutes(val) {
-    this.nodes.minutes.value = this.toDigitPairStr(val);
-  }
-
-  get minutes() {
-    return parseInt(this.nodes.minutes.value, 10);
-  }
-
-  set hours(val) {
-    this.nodes.hours.value = this.toDigitPairStr(val);
-  }
-
-  get hours() {
-    return parseInt(this.nodes.hours.value, 10);
-  }
-
-  getFormatted(key) {
-    return this.toDigitPairStr(this[key].toString());
-  }
-
-  get smpte() {
-    return {
-      hours: this.hours,
-      minutes: this.minutes,
-      seconds: this.seconds,
-      frame: this.frame,
-    };
-  }
-
-  set smpte(o) {
-    this.update(o);
-  }
-
-  get smpteString() {
-    return `${this.getFormatted('hours')}:${this.getFormatted('minutes')}:${this.getFormatted(
-      'seconds',
-    )}:${this.getFormatted('frame')}`;
-  }
-
-  set external(bool) {
-    if (bool) {
-      this.container.classList.add('external');
-    } else {
-      this.container.classList.remove('external');
-    }
-  }
-
-  get external() {
-    return this.container.classList.contains('external');
-  }
-}

package/src/videoTime.js

@@ -1,66 +0,0 @@
-// TODO - move this to @vidispine/vdt-js when finalized and use as dependency
-
-class VideoTime {
-  constructor(props) {
-    if (props.frameRate === undefined) {
-      delete this;
-      throw new Error('No "frameRate" option provided, refer to docs.');
-    } else {
-      this.props = props;
-    }
-  }
-
-  secondsToFramesFromStart(seconds) {
-    let frame = seconds * this.props.frameRate;
-    frame = Math.round(frame);
-    return frame; // we're on this frame, could be for example 23.45
-  }
-
-  currentTimeToFramesFromStart(currentTime) {
-    return this.secondsToFramesFromStart(currentTime);
-  }
-
-  secondsToFrame(seconds) {
-    let frame = this.secondsToFramesFromStart(seconds) % this.props.frameRate;
-    frame = Math.round(frame);
-    return frame;
-  }
-
-  currentFrame(currentTime) {
-    return Math.round(this.secondsToFrame(currentTime));
-  }
-
-  frameToCurrentTimeFromStart(frame) {
-    return frame / this.props.frameRate; // in seconds from start
-  }
-
-  smpteToCurrentTimeFromStart(values) {
-    return (
-      values.hours * 3600 +
-      values.minutes * 60 +
-      values.seconds +
-      values.frame / this.props.frameRate
-    );
-  }
-
-  secondsFromStartToSMPTE(secondsFromStart) {
-    let secondsFS = secondsFromStart;
-    const hours = Math.floor(secondsFS / 3600);
-    const minutesWithoutHours = secondsFS / 60 - 60 * hours;
-    // eslint-disable-next-line no-param-reassign
-    secondsFS %= 3600;
-
-    const minutes = Math.floor(minutesWithoutHours);
-    const seconds = Math.floor(secondsFS % 60);
-    const frame = this.secondsToFrame(secondsFS);
-
-    return {
-      hours,
-      minutes,
-      seconds,
-      frame,
-    };
-  }
-}
-
-export default VideoTime;