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

package/src/seekBar.js

@@ -1,904 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable no-multi-assign */
-/* eslint-disable no-unused-expressions */
-/* eslint-disable no-param-reassign */
-/* eslint-disable max-classes-per-file */
-
-import mousetrap from 'mousetrap';
-
-import { classNames, colors } from './constants';
-import { truncate, sanitize, reactiveSetters } from './helpers';
-
-const constants = Object.freeze({
-  className: 'vdt-seekbar',
-  defaults: {
-    bgColor: '#fafafa',
-    fillColor: '#f00',
-    regionColor: '#f6e58d', // yellow
-    markerWidth: 16,
-    regionAccentColor: '#00a8ff',
-    transitionTime: 300, // ms
-  },
-  markerTypes: {
-    in: 'in',
-    out: 'out',
-  },
-});
-
-const CSS = (bgColor, fillColor) => `
-  .${constants.className}{
-    user-select: none;
-    background: ${colors.light};
-    height: 6px;
-    width: 100%;
-    position: relative;
-    cursor: pointer;
-    z-index: 5;
-  }
-
-  .${classNames.onDark}.${constants.className}{
-    background: ${colors.gray};
-  }
-
-  .fill, .load-indicator{
-    height: 100%;
-    display: inline-block;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    background: ${fillColor};
-    transition: width ${constants.defaults.transitionTime}ms linear;
-    z-index: 2;
-  }
-
-  .load-indicator{
-    background: #e1e1e1;
-    z-index: 1;
-    opacity: .2;
-    transition: none;
-  }
-
-  .${classNames.onDark}.${constants.className} .load-indicator{
-    background: white;
-  }
-
-  .${constants.className}.dragging .fill{
-    transition: none;
-  }
-
-
-  .marker, .region{
-    position: absolute;
-    top: 0px;
-    height: 100%;
-    background: cyan;
-    width: 1px;
-    display: inline-block;
-    z-index: 4;
-  }
-
-  .marker{
-    transition: opacity ${constants.defaults.transitionTime}ms linear;
-  }
-
-  .marker{ display: none; }
-  .marker.active{ display: initial; }
-
-  .marker .handle{
-    position: absolute;
-    bottom: 10px; right: 0px;
-    width: ${constants.defaults.markerWidth}px;
-    height: 28px;
-    background: #999;
-    border-radius: 3px;
-    cursor: col-resize;
-    z-index: 3;
-    box-sizing: border-box;
-  }
-
-  .marker.regional .handle{
-    background: ${constants.defaults.regionAccentColor};
-    box-shadow: -2px 1px 1px rgba(0,0,0,.1);
-  }
-
-  .marker.regional.in .handle{
-    box-shadow: 2px 1px 1px rgba(0,0,0,.1);
-  }
-
-  .marker.in .handle{
-    border-bottom-left-radius: 40px;
-  }
-
-  .marker.out .handle{
-    left: 1px;
-    right: initial;
-    border-bottom-right-radius: 20px;
-  }
-
-  .handle:active{
-    background: ${constants.defaults.regionColor};
-  }
-
-  .region{
-    position: absolute;
-    width: auto;
-    background: ${constants.defaults.regionColor};
-    opacity: .7;
-  }
-
-  .region.nav{
-    background: transparent;
-    opacity: 1;
-    border-left: 1px solid cyan;
-  }
-
-  .region.nav .bubble,
-  .region.nav:after{
-    content: " ";
-    height: 16px;
-    bottom: 10px;
-    width: 16px;
-    border-radius: 16px;
-    background: ${constants.defaults.regionAccentColor};
-    position: absolute;
-    margin-left: -8px;
-    transition: transform 200ms ease-out;
-    transform: translate3d(0px, 0px, 0px);
-    transform-origin: bottom center;
-  }
-
-  .region.nav .popout{
-    width: 160px;
-    z-index: 4;
-    background: rgba(28, 28, 28, .7);
-    color: white;
-    font-size: 14px;
-    min-height: 100px;
-    bottom: 16px;
-    left: -80px;
-    position: absolute;
-    border-radius: 8px;
-    -webkit-backdrop-filter: blur(10px);
-    font-family: Arial, Helvetica, sans-serif;
-    overflow: hidden;
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  .region.nav.right-aligned .popout{
-    right: 0px;
-    left: initial;
-  }
-
-  .region.nav.left-aligned .popout{
-    left: -32px;
-  }  
-
-  .region.nav .popout .title{
-    padding: 4px 14px;
-    text-align: center;
-    color: black;
-    background: white;
-  }
-
-  .region.nav .popout .annotation{
-    padding: 8px 12px;
-    font-weight: light;
-    color: rgba(255,255,255,.9);
-  }
-
-  .region.nav:after{
-    width: 1px;
-    left: 8px;
-    height: 10px;
-    bottom: 0px;
-    background: #00a8ff;
-  }
-
-  .region.nav:hover{
-    background: rgba(28, 28, 28, .5);
-  }
-
-  .region.nav.has-popout:hover .bubble{
-    background: rgba(28, 28, 28, .8);
-    opacity: 1;
-    z-index: 3;
-  }
-
-  .region.nav:hover:after,
-  .region.nav:hover:before{
-    background: rgba(28, 28, 28, .8);
-  }
-
-  .region.nav:hover .popout{
-    opacity: 1;
-    visibility: visible;
-  }
-
-  .${constants.className}.dragging .bubble{
-    transform: scale3d(.75,.75,.75);
-  }
-
-  .${constants.className}.hide-markers .marker{
-    opacity: 0;
-  }
-
-`;
-
-export class Region {
-  constructor(props) {
-    const regionDefaultProps = {
-      in: null,
-      out: null,
-      title: '',
-      annotation: '',
-      el: null, // can store a
-    };
-
-    Object.assign(this, regionDefaultProps, props); // apply props
-  }
-}
-
-export default class SeekBar {
-  constructor(props) {
-    this.props = props;
-    reactiveSetters.apply(this); // ability to handle new props via setters
-
-    this.container = document.createElement('div');
-    this.container.className = `${constants.className}-wrapper`;
-
-    this.state = {
-      in: null, // in seconds from 0
-      out: null,
-      markersEnabled: this.props.markersEnabled === undefined ? true : this.props.markersEnabled,
-      regions: [], // array with regions providing {in: 0, out: 12} and possibly more
-      dragging: false,
-    };
-
-    this.markers = {};
-
-    if (this.props.target) {
-      this.shadow = this.container.attachShadow({ mode: 'open' });
-      this.props.target.appendChild(this.container);
-      // attach styles
-      this.style = document.createElement('style');
-      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;
-
-      this.style.innerHTML = CSS(sanitize(bgColor), sanitize(fillColor));
-      this.shadow.appendChild(this.style);
-    }
-
-    this.bindEvents();
-    this.draw();
-    this.bindHotkeys();
-
-    /*
-    run this for "in" and "out" points set in constructor
-    when the player metadata is ready (duration data is there)
-    */
-    const { player } = this.props;
-    if (player) {
-      player.videojs.on('loadedmetadata', () => {
-        this.handleNewProps(this.props);
-      });
-    }
-  }
-
-  /*
-  Video.js seekbar works a bit differently - it
-  sets an interval and checks the playback position
-  very frequently, could do it that way -
-  then could use requestAnimationFrame and
-  get a smoother animation at more expense
-  */
-  bindEvents() {
-    // bind to vdt player instance
-    if (this.props.player) {
-      const { player } = this.props;
-      player.videojs.on('timeupdate', () => {
-        const progressFraction = player.videojs.currentTime() / player.videojs.duration();
-        this.fill.style.width = `${100 * progressFraction}%`;
-      });
-
-      player.videojs.on('progress', () => {
-        this.percentLoaded = player.percentLoaded;
-      });
-    }
-  }
-
-  bindHotkeys() {
-    this.bindings = [];
-
-    // bindings related to player
-    if (this.props.player) {
-      const { player } = this.props;
-      this.bindings = [
-        {
-          key: ['i'],
-          method: () => {
-            if (this.markersEnabled) this.in = player.videojs.currentTime();
-          },
-        },
-        {
-          key: ['o'],
-          method: () => {
-            if (this.markersEnabled) this.out = player.videojs.currentTime();
-          },
-        },
-        {
-          key: ['shift+i'],
-          method: () => {
-            if (this.markersEnabled) this.navigateToIn();
-          },
-        },
-        {
-          key: ['shift+o'],
-          method: () => {
-            if (this.markersEnabled) this.navigateToOut();
-          },
-        },
-      ];
-    }
-
-    if (this.props.player) {
-      const { player } = this.props;
-      mousetrap.bind('i', () => {
-        if (this.markersEnabled) this.in = player.videojs.currentTime();
-      });
-
-      mousetrap.bind('o', () => {
-        if (this.markersEnabled) this.out = player.videojs.currentTime();
-      });
-
-      mousetrap.bind('shift+i', () => {
-        if (this.markersEnabled) this.navigateToIn();
-      });
-
-      mousetrap.bind('shift+o', () => {
-        if (this.markersEnabled) this.navigateToOut();
-      });
-    }
-
-    // bind
-    this.bindings.forEach((binding) => {
-      mousetrap.bind(binding.key, (e) => {
-        binding.method(e);
-      });
-    });
-  }
-
-  unbindHotKeys() {
-    this.bindings &&
-      this.bindings.forEach((binding) => {
-        mousetrap.unbind(binding.key);
-      });
-  }
-
-  handleSeek(event) {
-    // check if target is a region
-    if (this.props.player) {
-      const { player } = this.props;
-      if (this.state.regions) {
-        let clickedOnRegion = false;
-        let preventSeek = false; // prevent seek from happening
-        this.state.regions.forEach((region) => {
-          if (region.el.contains(event.target)) {
-            // player.seekTo(region.in);
-
-            // 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);
-              if (!preventSeek) {
-                player.seekTo(region.in);
-              }
-            } else {
-              player.seekTo(region.in);
-            }
-
-            clickedOnRegion = true;
-          }
-        });
-
-        /*
-        exit from method, TODO - implement foreach
-        for breaking more efficiently
-        */
-
-        if (clickedOnRegion) return;
-      }
-
-      const seekFractionX =
-        (event.clientX - this.bar.getBoundingClientRect().left) / this.bar.offsetWidth;
-      // -> 0.34732
-
-      const timeToSeek = seekFractionX * player.videojs.duration();
-      // -> something like 32.2323 (in seconds)
-      player.seekTo(timeToSeek);
-    } // TODO - make a callback for more generic use case (non-vdt player)
-  }
-
-  handleSeekDrag(mouseDownEvent) {
-    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ā
-    let left;
-
-    const drag = (e) => {
-      left = e.clientX - barOffset;
-      const pxDragged = Math.abs(mouseDownEvent.clientX - e.clientX);
-
-      if (left >= 0 && left < barWidth && pxDragged > 1) {
-        // prevent out-of-bounds
-        this.dragging = true;
-        const fractionFromStart = parseFloat(left) / barWidth;
-        const seconds = fractionFromStart * duration;
-        this.props.player.videojs.currentTime(seconds);
-      }
-
-      e.preventDefault();
-    };
-
-    const stopDrag = (e) => {
-      this.dragging = false;
-
-      // remove listeners
-      document.removeEventListener('mousemove', drag, false);
-      document.removeEventListener('mouseup', stopDrag, false);
-
-      const fractionFromStart = parseFloat(left) / barWidth;
-      const seconds = fractionFromStart * duration;
-      this.props.player.videojs.currentTime(seconds);
-
-      e.stopPropagation();
-    };
-
-    // add listeners
-    document.addEventListener('mousemove', drag, false);
-    document.addEventListener('mouseup', stopDrag, false);
-  }
-
-  draw() {
-    this.bar = document.createElement('div');
-    this.bar.className = constants.className;
-    this.bar.onclick = (e) => {
-      if (!e.target.classList.contains('marker') && !e.target.classList.contains('handle')) {
-        this.handleSeek(e);
-      }
-    };
-
-    // handle drag
-
-    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,
-    );
-
-    this.fill = document.createElement('div');
-    this.fill.className = 'fill';
-
-    this.loadIndicator = document.createElement('div');
-    this.loadIndicator.className = 'load-indicator';
-
-    this.region = document.createElement('div');
-    this.region.className = 'region';
-
-    this.bar.appendChild(this.fill);
-    this.bar.appendChild(this.loadIndicator);
-    this.bar.appendChild(this.region);
-    this.shadow.appendChild(this.bar);
-
-    this.drawMarkers();
-  }
-
-  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'));
-      markerIn.className = `marker ${constants.markerTypes.in}`;
-      markerOut.className = `marker ${constants.markerTypes.out}`;
-
-      const handleIn = document.createElement('div');
-      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
-
-          this.handleMarkerDrag(markerIn, constants.markerTypes.in, e);
-        },
-        false,
-      );
-
-      handleOut.addEventListener(
-        'mousedown',
-        (e) => {
-          e.preventDefault(); // prevents selection cursor
-          e.stopPropagation(); // prevent triggering seek bar drag
-
-          this.handleMarkerDrag(markerOut, constants.markerTypes.out, e);
-        },
-        false,
-      );
-
-      markerIn.appendChild(handleIn);
-      markerOut.appendChild(handleOut);
-
-      this.bar.appendChild(markerIn);
-      this.bar.appendChild(markerOut);
-    }
-  }
-
-  updateMarkers(marker) {
-    this.markers[marker.type].style.left = `${marker.value * 100}%`;
-    this.markers[marker.type].classList.add('active');
-
-    // check if marker mathes a region and add a classname to it
-    if (this.state.regions) {
-      // check if any region contains in / out matching value
-      const matchingRegions = [];
-      const isRegional = matchingRegions.length > 0;
-      if (isRegional) {
-        this.markers[marker.type].classList.add('regional');
-      } else {
-        this.markers[marker.type].classList.remove('regional');
-      }
-    }
-
-    this.drawInAndOutRegion();
-  }
-
-  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('%', ''))
-      }%`;
-    } else {
-      // remove region div or hide it
-    }
-  }
-
-  /*
-  TODO - handle touch events,
-  but find out if there is a mobile use
-  case before that
-  */
-  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ā
-    let dragHappened = false;
-
-    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 left = e.clientX - barOffset + markerOffset;
-
-      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 seconds = fractionFromStart * duration;
-        this.props.player.videojs.currentTime(seconds);
-      }
-
-      e.preventDefault();
-    };
-
-    const stopDrag = (e) => {
-      this.dragging = false;
-
-      // remove listeners
-      document.removeEventListener('mousemove', drag, false);
-      document.removeEventListener('mouseup', stopDrag, false);
-
-      const fractionFromStart =
-        parseFloat(markerNode.getBoundingClientRect().left - barOffset) / barWidth;
-      const seconds = fractionFromStart * duration;
-      this[type] = seconds;
-      this.props.player.videojs.currentTime(seconds);
-
-      /*
-      if drag did not take place,
-      user just clicked the marker -
-      jump to the time of marker in player
-      */
-      if (!dragHappened) {
-        if (type === constants.markerTypes.in) {
-          this.navigateToIn();
-        } else {
-          this.navigateToOut();
-        }
-      }
-
-      this.props.onDragFinish && this.props.onDragFinish({ type, seconds });
-      e.stopPropagation();
-    };
-
-    // add listeners
-    document.addEventListener('mousemove', drag, false);
-    document.addEventListener('mouseup', stopDrag, false);
-  }
-
-  /*
-  hide dead markers (for state parity) or ones that
-  make no sense (like out point before in point)
-  */
-  cleanupMarkers() {
-    let removedMarker = false;
-    if (this.state.in === null) {
-      this.markers[constants.markerTypes.in].classList.remove('active');
-      removedMarker = true;
-    }
-
-    if (this.state.out === null) {
-      this.markers[constants.markerTypes.out].classList.remove('active');
-      removedMarker = true;
-    }
-
-    if (removedMarker) {
-      // if a marker was removed, region no longer is valid
-      this.region.style.left = 'initial';
-      this.region.style.right = 'initial';
-    }
-  }
-
-  clearMarkers() {
-    this.in = null;
-    this.out = null;
-  }
-
-  // utilizes player instance from props
-  setInFromCurrent() {
-    this.in = this.props.player.videojs.currentTime();
-  }
-
-  setOutFromCurrent() {
-    this.out = this.props.player.videojs.currentTime();
-  }
-
-  navigateToIn() {
-    const { player } = this.props;
-    player.seekTo(this.in);
-  }
-
-  navigateToOut() {
-    const { player } = this.props;
-    player.seekTo(this.out);
-  }
-
-  // setters and getters
-  set in(val) {
-    if (!this.state.markersEnabled) return;
-
-    this.state.in = val;
-
-    if (val !== null && val !== undefined) {
-      const { player } = this.props;
-      this.updateMarkers({
-        type: constants.markerTypes.in,
-        value: val / player.videojs.duration(),
-      });
-
-      // make sure in point is not set after out point
-      if (this.state.out !== null && val > this.state.out) {
-        this.out = null;
-      }
-
-      this.props.onIn && this.props.onIn(this.state.in);
-    } else {
-      this.cleanupMarkers();
-    }
-  }
-
-  get in() {
-    return this.state.in;
-  }
-
-  set out(val) {
-    if (!this.state.markersEnabled) return;
-
-    this.state.out = val;
-
-    if (val !== null && val !== undefined) {
-      const { player } = this.props;
-      this.updateMarkers({
-        type: constants.markerTypes.out,
-        value: val / player.videojs.duration(),
-      });
-
-      // make sure out point is not set before in point
-      if (this.state.in != null && val < this.state.in) {
-        this.in = null;
-      }
-
-      this.props.onOut && this.props.onOut(this.state.out);
-    } else {
-      this.cleanupMarkers();
-    }
-  }
-
-  get out() {
-    return this.state.out;
-  }
-
-  get markersEnabled() {
-    return this.state.markersEnabled;
-  }
-
-  set markersEnabled(bool) {
-    if (typeof bool === 'boolean') {
-      if (!bool) {
-        this.clearMarkers();
-        this.state.markersEnabled = false;
-      } else {
-        !this.markersEnabled && this.drawMarkers();
-        this.state.markersEnabled = true;
-      }
-    }
-  }
-
-  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);
-      });
-
-      this.state.regions = [];
-      this.regions = regionArray; // run again
-    }
-  }
-
-  get regions() {
-    return this.state.regions;
-  }
-
-  set dragging(bool) {
-    // update only if worth updating
-    if (bool && !this.state.dragging) {
-      this.state.dragging = true;
-      this.bar.classList.add('dragging');
-    } else if (!bool && this.state.dragging) {
-      this.state.dragging = false;
-      this.bar.classList.remove('dragging');
-    }
-  }
-
-  get dragging() {
-    return this.state.dragging;
-  }
-
-  addRegion(regionObj) {
-    if (regionObj.constructor.name === Region.name) {
-      this.state.regions.push(regionObj);
-      this.drawRegion(regionObj);
-    } 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
-      // find said matching region
-    } else {
-      // it's an index
-      this.state.regions[param].el.remove();
-      this.state.regions[param] = null;
-      delete this.state.regions[param];
-    }
-  }
-
-  drawRegion(region) {
-    const duration = this.props.player.videojs.duration(); // seconds
-    const inPoint = region.in;
-
-    const leftPercentage = (inPoint / duration) * 100;
-    const rightPercentage = ((duration - region.out) / duration) * 100;
-
-    const regionEl = document.createElement('div');
-    regionEl.className = 'region nav ';
-    regionEl.innerHTML = '<div class="bubble"></div>';
-
-    if (region.title && region.annotation) {
-      let alignmentClassName = '';
-      if (leftPercentage > 70) alignmentClassName = 'right-aligned';
-      if (leftPercentage < 30) alignmentClassName = 'left-aligned';
-      regionEl.className += ` has-popout ${alignmentClassName}`;
-
-      const popout = document.createElement('div');
-
-      popout.className = 'popout';
-      popout.innerHTML = `
-        <div class="title">
-          ${sanitize(region.title)}
-        </div>
-        <div class="annotation">
-          ${truncate(sanitize(region.annotation), 72)}
-        </div>
-      `;
-
-      regionEl.appendChild(popout);
-    }
-
-    regionEl.style.left = `${leftPercentage}%`;
-    regionEl.style.right = `${rightPercentage}%`;
-
-    region.el = regionEl;
-
-    this.bar.appendChild(regionEl);
-  }
-
-  set onDark(bool) {
-    if (bool) {
-      this.bar.classList.add(classNames.onDark);
-    } else {
-      this.bar.classList.remove(classNames.onDark);
-    }
-  }
-
-  get onDark() {
-    return this.container.classList.contains(classNames.onDark);
-  }
-
-  set percentLoaded(val) {
-    this.loadIndicator.style.width = `${val}%`;
-  }
-
-  destroy() {
-    this.unbindHotKeys();
-  }
-
-  toggleMarkers() {
-    if (this.bar.classList.contains('hide-markers')) {
-      this.showMarkers();
-    } else {
-      this.hideMarkers();
-    }
-  }
-
-  hideMarkers() {
-    this.bar.classList.add('hide-markers');
-  }
-
-  showMarkers() {
-    this.bar.classList.remove('hide-markers');
-  }
-}
-
-SeekBar.Region = Region;