@vidispine/vdt-videojs 23.2.0-pre.1 → 23.2.0

package/src/player.js

@@ -1,1029 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable import/no-named-as-default-member */
-/*
-Eslint rules disabled for lines like these:
-
-this.props.target && this.props.target.appendChild(this.videoEl); //validity check before expression
-document.getElementsByClassName('vjs-volume-panel')[0] //rule asks for destructuring
-this.videojs.hasStarted_ //dangling underscore produced by video.js in this case
-*/
-// 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 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',
-};
-const sanitizeMimeType = (mimeType) => correctMimeTypes[mimeType] || mimeType;
-
-export default class Player {
-  constructor(props) {
-    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
-      'video-js',
-      'vjs-big-play-centered',
-      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
-    ];
-
-    this.externalTimecodes = {
-      // either one of these can hold an array of TimeCodeDisplay instances
-      duration: [],
-      playback: [],
-    };
-
-    this.timeConverter = new VideoTime({
-      frameRate: this.props.frameRate || constants.defaults.frameRate,
-    });
-
-    /*
-    video.js requires a html video to initialize
-    */
-
-    this.videoEl = document.createElement('video');
-    this.videoEl.crossOrigin = this.props.crossOrigin;
-    this.videoEl.id = 'vdt-video';
-    this.videoEl.className = classNames.join(' ');
-    this.videoEl.controls = true; // remove this line for no-controls videojs player
-
-    // attach sources, sort mp4 on top of source list
-    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));
-      }
-
-      // construct <source> els
-      this.props.sources.forEach((source) => {
-        const aSource = document.createElement('source');
-        aSource.src = source.src;
-        aSource.type = sanitizeMimeType(source.type);
-        this.videoEl.appendChild(aSource);
-      });
-    } // handle else with err later
-
-    this.videoEl.onloadedmetadata = () => {
-      // read-only duration timecode
-      if (this.durationTimeCode) {
-        this.setDurationTimeCode();
-      }
-
-      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');
-    }, 2000);
-
-    // attach subtitle tracks (these should come in last in the <video /> node)
-    if (this.props.subtitles) {
-      this.props.subtitles.forEach((sub) => {
-        const subtitleTag = document.createElement('track');
-        subtitleTag.kind = 'subtitles';
-        subtitleTag.srclang = sub.lang;
-        subtitleTag.label = sub.label;
-        // subtitleTag.default = (index === 0) //can use this later to set a default track
-
-        if (typeof sub.src === 'string') {
-          subtitleTag.src = sub.src; // external file
-        } else {
-          subtitleTag.src = window.URL.createObjectURL(sub.src); // file url from blob
-        }
-
-        this.videoEl.appendChild(subtitleTag);
-      });
-    }
-
-    // attach to dom and construct videojs player
-    if (this.props.target) this.props.target.appendChild(this.videoEl);
-
-    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,
-      controls: controlsEnabled,
-      alwaysCaptureHotkeys: false,
-      controlBar: {
-        RemainingTimeDisplay: false,
-        timeDivider: showDefaultTimeDisplay, // relates to built-in time display
-        durationDisplay: showDefaultTimeDisplay,
-        currentTimeDisplay: showDefaultTimeDisplay,
-      },
-      inactivityTimeout: this.audioOnly
-        ? constants.defaults.audioInactivityTimeout
-        : constants.defaults.inactivityTimeout,
-      preload: 'auto',
-      captionsButton: false,
-      subsCapsButton: false,
-      subtitlesButton: false,
-      textTrackSettings: false,
-      html5: {
-        nativeTextTracks: false,
-      },
-      languages: {
-        en: {
-          'captions off': 'off',
-          'subtitles off': 'off',
-        },
-      },
-      ...options,
-    });
-
-    // set the poster
-    if (this.props.posterUrl) this.videojs.poster(this.props.posterUrl);
-
-    // set other props that are passed
-    this.handleNewProps(this.props);
-
-    // lifecycle
-    this.videojs.ready(() => {
-      this.bindHotkeys();
-      this.bindEvents();
-      if (this.props.onReady) this.props.onReady(this.videojs);
-
-      this.restoreSettings();
-      this.setupTimeCode();
-      this.doEsothericWork();
-      this.setupMenu();
-      this.setupCustomSeekbar();
-    });
-  }
-
-  setupCustomSeekbar() {
-    if (this.props.seekBar) {
-      // disable the built-in videojs seekbar
-      this.videojs.controlBar.progressControl.disable();
-      this.videojs.controlBar.progressControl.hide();
-
-      const target = this.container.getElementsByClassName('vjs-control-bar')[0];
-      const props = {
-        target,
-        player: this,
-        onDark: this.props.onDark,
-        ...this.props.seekBar,
-      };
-
-      this.seekBar = new SeekBar(props);
-
-      // show & hide markers when controls hide
-      this.videojs.on('userinactive', () => {
-        if (!this.controlsBelowPlayer) {
-          if (this.seekBar) this.seekBar.hideMarkers?.();
-        } else {
-          this.seekBar?.showMarkers?.();
-        }
-      });
-
-      this.videojs.on('useractive', () => {
-        if (this.seekBar) this.seekBar.showMarkers();
-      });
-    }
-  }
-
-  setupTimeCode(externalTimecodeInstance = null) {
-    const props = {
-      onInput: (e, nodeName, values) => {
-        // TODO - check for out of bounds input
-        this.seekTo(this.timeConverter.smpteToCurrentTimeFromStart(values));
-      },
-      onInputFocus: () => {
-        /*
-        lock the control control bar in place to
-        prevent it from unexpectedly animating away while
-        doing timecode input
-        */
-        this.videojs.options_.inactivityTimeout = 0;
-        this.videojs.cache_.inactivityTimeout = 0;
-        this.videojs.reportUserActivity();
-
-        // pause the video, expected behaviour when editing timecode position
-        this.videojs.pause();
-      },
-      onInputBlur: () => {
-        this.videojs.options().inactivityTimeout = constants.defaults.inactivityTimeout;
-        this.videojs.cache_.inactivityTimeout = constants.defaults.inactivityTimeout;
-      },
-    };
-
-    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
-      // construct an in-frame timecode, if controls are enabled
-      if (this.props.controls !== false) {
-        const target = document.getElementsByClassName('vjs-volume-panel')[0];
-        // main timecode representing playhead position
-        this.timeCode = new TimeCodeDisplay(Object.assign(props, { target, appendAfter: true }));
-
-        // read-only timecode representing video duration
-        this.durationTimeCode = new TimeCodeDisplay({
-          target: this.timeCode.container,
-          appendAfter: true,
-        });
-      }
-    }
-
-    if (this.timeCode || this.externalTimecodes.playback.length > 0) {
-      // subscribe to events
-      this.videojs.on('timeupdate', () => {
-        this.updateTimeCode();
-      });
-
-      this.videojs.on('play', () => {
-        this.updateTimeCodeFrame();
-      });
-    }
-  }
-
-  updateTimeCode() {
-    // HH:MM:SS (the usual)
-    const currentSecond = this.videojs.currentTime();
-    const props = this.timeConverter.secondsFromStartToSMPTE(currentSecond);
-
-    if (this.timeCode) this.timeCode.update(props);
-
-    if (this.externalTimecodes.playback.length > 0) {
-      this.externalTimecodes.playback.forEach((timecode) => {
-        timecode.update(props);
-      });
-    }
-  }
-
-  updateTimeCodeFrame() {
-    // update the frame in this second -> 00:00:00:XX
-    const frame = this.timeConverter.currentFrame(this.videojs.currentTime()); // -> :XX
-
-    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) => {
-        timecode.update({ frame });
-      });
-    }
-
-    // recursive invocation if still playing
-    if (!this.videojs.paused()) {
-      this.rafID = requestAnimationFrame(() => {
-        this.updateTimeCodeFrame();
-      });
-    }
-  }
-
-  setDurationTimeCode() {
-    // happens once
-    const durationInSeconds = this.videojs.duration();
-    const props = this.timeConverter.secondsFromStartToSMPTE(durationInSeconds);
-    props.frame = this.timeConverter.secondsToFrame(durationInSeconds);
-
-    this.durationTimeCode.update(props);
-    this.durationTimeCode.container.classList.add('duration');
-  }
-
-  bindHotkeys() {
-    // keyboard shortcuts
-    this.bindings = [
-      {
-        key: ['space', 'k'],
-        method: (e) => {
-          // prevents page scroll on space, just like YT
-          if (e.preventDefault) e.preventDefault();
-          this.togglePlayback();
-        },
-      },
-      {
-        key: 'j',
-        method: () => {
-          if (this.videojs.hasStarted_) this.jumpBackward();
-        },
-      },
-      {
-        key: 'l',
-        method: () => {
-          if (this.videojs.hasStarted_) this.jumpForward();
-        },
-      },
-      {
-        key: ['.', 'right'],
-        method: () => {
-          this.frameForward();
-        },
-      },
-      {
-        key: [',', 'left'],
-        method: () => {
-          this.frameBackward();
-        },
-      },
-      {
-        key: 'f',
-        method: () => {
-          this.toggleFullscreen();
-        },
-      },
-      {
-        key: 'm',
-        method: () => {
-          this.toggleMute();
-        },
-      },
-      {
-        key: 'up',
-        method: (e) => {
-          if (e.preventDefault) e.preventDefault(); // prevent page scroll
-          this.volumeUp();
-        },
-      },
-      {
-        key: 'down',
-        method: (e) => {
-          if (e.preventDefault) e.preventDefault(); // prevent page scroll
-          this.volumeDown();
-        },
-      },
-      {
-        key: 'h',
-        method: () => {
-          this.help.toggle();
-        },
-      },
-      {
-        key: 'n',
-        method: () => {
-          if (this.menu) this.menu.toggle();
-        },
-      },
-    ];
-
-    if (this.props.subtitles) {
-      this.bindings.push({
-        key: 'c',
-        method: () => {
-          this.toggleSubs();
-        },
-      });
-    }
-
-    // bind
-    this.bindings.forEach((binding) => {
-      mousetrap.bind(binding.key, (e) => {
-        binding.method(e);
-        this.onHotkeyPressed(binding.key);
-      });
-    });
-  }
-
-  unbindHotKeys() {
-    if (this.bindings)
-      this.bindings.forEach((binding) => {
-        mousetrap.unbind(binding.key);
-      });
-  }
-
-  bindEvents() {
-    this.videojs.on('volumechange', () => {
-      // persist volume changes
-      this.persistSetting(constants.settings.volume, this.volume);
-    });
-
-    this.videojs.textTracks().on('change', () => {
-      // determine subtitles state
-      const tracks = this.videojs.textTracks().tracks_;
-      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
-        this.videojs.el_.classList.add(constants.classNames.subtitlesActive);
-        this.persistSetting(constants.settings.subs, true);
-        this.persistSetting(constants.settings.subLang, selected[0].language);
-      } else {
-        this.videojs.el_.classList.remove(constants.classNames.subtitlesActive);
-        this.persistSetting(constants.settings.subs, false);
-      }
-    });
-  }
-
-  volumeUp() {
-    this.videojs.controlBar.volumePanel.volumeControl.volumeBar.stepForward();
-    this.osd.feedback(constants.osd.volchange, { volume: this.volume });
-  }
-
-  volumeDown() {
-    this.videojs.controlBar.volumePanel.volumeControl.volumeBar.stepBack();
-    this.osd.feedback(constants.osd.volchange, { volume: this.volume });
-  }
-
-  toggleMute() {
-    if (!this.videojs.muted()) {
-      this.videojs.muted(true);
-      this.osd.feedback(constants.osd.volchange, { volume: this.volume });
-    } else {
-      this.videojs.muted(false);
-      this.osd.feedback(constants.osd.volchange, { volume: this.volume });
-    }
-  }
-
-  toggleFullscreen() {
-    if (this.videojs.isFullscreen()) {
-      this.videojs.exitFullscreen();
-    } else {
-      this.videojs.requestFullscreen();
-    }
-  }
-
-  seek(secs) {
-    // relative to current playback time
-    let time = this.videojs.currentTime() + secs;
-
-    if (time < 0) {
-      time = 0;
-    }
-
-    this.videojs.currentTime(time);
-  }
-
-  seekTo(sec) {
-    if (!this.videojs.hasStarted()) this.videojs.hasStarted(true);
-    this.videojs.currentTime(sec);
-  }
-
-  jumpForward() {
-    this.seek(constants.defaults.jumpSeconds);
-    this.osd.feedback(constants.osd.jumpForward);
-  }
-
-  jumpBackward() {
-    this.seek(-constants.defaults.jumpSeconds);
-    this.osd.feedback(constants.osd.jumpBackward);
-  }
-
-  frameForward() {
-    const thisFrame = this.timeConverter.secondsToFramesFromStart(this.videojs.currentTime());
-    const nextFrame = Math.round(thisFrame) + 1;
-
-    this.videojs.currentTime(this.timeConverter.frameToCurrentTimeFromStart(nextFrame));
-  }
-
-  frameBackward() {
-    const thisFrame = this.timeConverter.secondsToFramesFromStart(this.videojs.currentTime());
-    const previousFrame = Math.round(thisFrame) - 1;
-
-    this.videojs.currentTime(this.timeConverter.frameToCurrentTimeFromStart(previousFrame));
-  }
-
-  secondsToFramesFromStart(seconds) {
-    const frameRate = this.props.frameRate || constants.defaults.frameRate;
-    let frame = seconds * frameRate;
-    frame = Math.round(frame);
-    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;
-    }
-
-    // feedback gizmo, mainly for feedback on hotkey-presses
-    this.osd = new OSD({
-      target: this.videoEl.parentElement,
-    });
-
-    // add a cinema button if a callback is passed in props
-    if (this.props.onCinema) {
-      this.videoEl.parentElement.classList.add('has-cinema-button');
-      this.cinema = false;
-
-      this.addButtonToControlBar({
-        onClick: () => {
-          this.props.onCinema(!this.cinema);
-          this.cinema = !this.cinema;
-        },
-        componentName: 'CinemaButton',
-        className: 'vdt-cinema-button',
-        title: 'Cinema-mode',
-      });
-    }
-
-    // add a screenshot button if a callback is passed in props
-    if (this.props.onScreenshot) {
-      this.videoEl.parentElement.classList.add('has-screenshot-button');
-
-      this.addButtonToControlBar({
-        onClick: () => {
-          this.props.onScreenshot(this.videojs.currentTime());
-        },
-        componentName: 'ScreenshotButton',
-        className: 'vdt-screenshot-button',
-        title: 'Screenshot',
-      });
-    }
-
-    // add a help overlay explaining keyboard controls
-    this.help = new HelpOverlay({
-      target: this.videoEl.parentElement,
-      onToggle: (willShow) => {
-        if (this.menu && this.menu.opened) {
-          this.menu.close();
-        }
-        if (willShow && !this.controlsBelowPlayer) {
-          this.hideControls();
-        } else {
-          this.showControls();
-        }
-      },
-    });
-  }
-
-  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);
-    const subLang = localStorage.getItem(constants.settings.subLang);
-
-    // 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,
-    };
-
-    // apply values (settings)
-    this.volume = this.settings[constants.settings.volume]; // volume
-
-    if (this.settings[constants.settings.subs]) {
-      // subtitles
-      this.enableSubs();
-    }
-  }
-
-  persistSetting(key, val) {
-    this.settings[key] = val;
-    localStorage.setItem(key, val);
-  }
-
-  enableSubs() {
-    const subs = this.videojs.textTracks();
-
-    for (let i = 0; i < subs.length; i += 1) {
-      const sub = subs[i];
-      if (sub.language === this.settings[constants.settings.subLang]) {
-        sub.mode = 'showing';
-      } else {
-        sub.mode = 'hidden';
-      }
-    }
-  }
-
-  disableSubs() {
-    const subs = this.videojs.textTracks();
-
-    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
-        this.disableSubs();
-      } else {
-        this.enableSubs();
-      }
-    }
-  }
-
-  /*
-  A quick example
-  options = {
-    onClick: ()=>{},
-    componentName: 'ScreenshotButton',
-    className: 'vdt-screenshot-button'
-  }
-  */
-  addButtonToControlBar(options) {
-    const Button = videojs.getComponent('Button');
-    const CustomButton = videojs.extend(Button, {
-      /* eslint-disable func-names, object-shorthand */
-      constructor: function () {
-        // eslint-disable-next-line prefer-rest-params
-        Button.apply(this, arguments);
-        if (options.className) this.el_.classList.add(options.className);
-        if (options.title) {
-          this.el_.title = options.title;
-        }
-      },
-      handleClick: () => {
-        if (options.onClick) options.onClick();
-      },
-    });
-
-    videojs.registerComponent(options.componentName, CustomButton);
-    this.videojs.getChild('controlBar').addChild(options.componentName, {}, 7);
-  }
-
-  // convenient getters / setters
-  get volume() {
-    return this.videojs.controlBar.volumePanel.volumeControl.volumeBar.getPercent();
-  }
-
-  set volume(floatVal) {
-    if (floatVal === 0) {
-      this.videojs.muted(true);
-    } else {
-      this.videojs.muted(false);
-      this.videojs.volume(floatVal);
-    }
-  }
-
-  setupMenu() {
-    const menuItems = this.props.menuItems || [];
-    const sourcesMenuItems = [];
-    if (this.props.sources.length > 1) {
-      // show only if more than 1 source
-      this.props.sources.forEach((source) => {
-        if (source.label) {
-          sourcesMenuItems.push({
-            title: source.label,
-            onClick: () => {
-              this.src = source;
-            },
-          });
-        }
-      });
-
-      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),
-          );
-        },
-        items: sourcesMenuItems,
-      });
-    }
-
-    // subtitles
-    if (this.props.subtitles && this.props.subtitles.length > 0) {
-      // off option for subs
-      const subtitleMenuItems = [
-        {
-          title: 'Off',
-          onClick: () => {
-            this.disableSubs();
-          },
-        },
-      ];
-
-      // quick toggle in the control bar
-      // this.addButtonToControlBar({
-      //   onClick: () => {
-      //     this.props.onCinema(!this.cinema);
-      //     this.cinema = !this.cinema;
-      //   },
-      //   componentName: 'CinemaButton',
-      //   className: 'vdt-cinema-button',
-      // });
-
-      this.props.subtitles.forEach((subtitle, index) => {
-        subtitleMenuItems.push({
-          title: subtitle.label,
-          onClick: () => {
-            const subs = this.videojs.textTracks();
-            for (let i = 0; i < subs.length; i += 1) {
-              const sub = subs[i];
-              if (i === index) {
-                sub.mode = 'showing';
-              } else {
-                sub.mode = 'hidden';
-              }
-            }
-          },
-        });
-      });
-
-      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,
-      });
-    }
-
-    if (menuItems.length > 0) {
-      const target = this.videojs.el_;
-
-      this.menu = new Menu({
-        target,
-        items: menuItems,
-        onOpen: () => {
-          if (!this.controlsBelowPlayer) this.hideControls();
-        },
-        onClose: () => {
-          if (!this.controlsBelowPlayer) this.videojs.controls(true);
-        },
-      });
-
-      // add a cogwheel button to the player
-      this.videoEl.parentElement.classList.add('has-vdt-menu');
-
-      this.addButtonToControlBar({
-        onClick: () => {
-          this.menu.toggle();
-        },
-        componentName: 'SettingsMenuButton',
-        className: 'vdt-settings-menu-button',
-        title: 'Settings',
-      });
-    } else {
-      // no menu items, no menu
-    }
-  }
-
-  hideControls() {
-    this.videojs.userActive(false);
-    this.videojs.controls(false);
-    this.videojs.fluid(true);
-
-    this.videoEl.parentElement.classList.remove('vjs-user-active');
-    this.videojs.userActive(false);
-  }
-
-  showControls() {
-    this.videojs.fluid(!this.controlsBelowPlayer);
-    this.videojs.controls(true);
-    this.videojs.userActive(true);
-  }
-
-  toggleControls() {
-    if (this.videojs.controls()) {
-      this.hideControls();
-    } else {
-      this.showControls();
-    }
-  }
-
-  onHotkeyPressed(key) {
-    if (key !== 'h' && this.help.state.active) {
-      this.help.hide();
-    }
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  triggerHotkey(key) {
-    mousetrap.trigger(key);
-  }
-
-  toStart() {
-    this.videojs.currentTime(0);
-  }
-
-  toEnd() {
-    this.videojs.currentTime(this.videojs.duration());
-  }
-
-  replay() {
-    this.toStart();
-    this.videojs.play();
-  }
-
-  play() {
-    this.videojs.play();
-  }
-
-  pause() {
-    if (!this.videojs.paused()) this.videojs.pause();
-  }
-
-  togglePlayback() {
-    if (this.videojs.paused()) {
-      this.play();
-      if (this.videojs.hasStarted_) this.osd.feedback(constants.osd.play);
-    } else {
-      this.pause();
-      this.osd.feedback(constants.osd.pause);
-    }
-  }
-
-  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);
-    if (this.rafID) cancelAnimationFrame(this.rafID);
-    this.videojs.dispose();
-    this.unbindHotKeys();
-    if (this.seekBar) this.seekBar.destroy();
-  }
-
-  get container() {
-    return this.videoEl.parentElement;
-  }
-
-  set onDark(bool) {
-    if (bool) {
-      this.container.classList.add('on-dark');
-    } else {
-      this.container.classList.remove('on-dark');
-    }
-
-    if (this.seekBar) {
-      this.seekBar.onDark = bool;
-    }
-  }
-
-  get onDark() {
-    return this.container.classList.contains('on-dark');
-  }
-
-  set controlsBelowPlayer(bool) {
-    if (this.videojs.controls()) {
-      if (bool) {
-        this.container.classList.add('controls-below-player');
-        this.videojs.fluid(false);
-      } else {
-        this.container.classList.remove('controls-below-player');
-        this.videojs.fluid(true);
-      }
-    }
-  }
-
-  get controlsBelowPlayer() {
-    return this.container.classList.contains('controls-below-player');
-  }
-
-  get smpte() {
-    const currentSecond = this.videojs.currentTime();
-    return this.timeConverter.secondsFromStartToSMPTE(currentSecond);
-  }
-
-  set smpte(o) {
-    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);
-    // if no match try adding source
-
-    const onReady = () => {
-      let initdone = false;
-      // wait for video metadata to load, then set time
-      this.videojs.on('loadedmetadata', () => {
-        this.videojs.currentTime(currentTime);
-      });
-
-      // iPhone/iPad need to play first, then set the time
-      // events: https://www.w3.org/TR/html5/embedded-content-0.html#mediaevents
-      this.videojs.on('canplaythrough', () => {
-        if (!initdone) {
-          this.videojs.currentTime(currentTime);
-          initdone = true;
-          this.videojs.play();
-        }
-      });
-    };
-
-    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({
-        ...source[0],
-      });
-      onReady();
-    } else {
-      this.videojs.addClass('vjs-waiting');
-      this.videojs.src(this.addSrc(src, type, label));
-      onReady();
-    }
-  }
-
-  get src() {
-    return this.videojs.src();
-  }
-
-  addSrc(src, type, label) {
-    const newSource = {
-      src,
-      type,
-      label,
-    };
-    const index = this.props.sources.push(newSource) - 1;
-
-    return this.props.sources[index];
-  }
-
-  // eslint-disable-next-line class-methods-use-this, no-unused-vars
-  removeSrc(url) {
-    // should remove all url matching sources
-  }
-
-  set controls(bool) {
-    if (bool) {
-      this.showControls();
-    } else {
-      this.hideControls();
-    }
-  }
-
-  get percentLoaded() {
-    const r = this.videojs.buffered();
-
-    const percentLoaded = (r.end(0) / this.videojs.duration()) * 100;
-    return percentLoaded;
-  }
-}
-
-/*
-Some video.js prototype overrides, that
-help with undesired behaviour
-*/
-
-// take over space button, prevent video.js default behaviour
-const button = videojs.prototype.constructor.getComponent('Button');
-// eslint-disable-next-line func-names
-button.prototype.handleKeyDown = function (e) {
-  if (e.keyCode === 32) {
-    e.preventDefault();
-  }
-};
-videojs.prototype.constructor.registerComponent('Button', button);
-
-// video.js opens menu on hover by default, this prevents that
-const subsButton = videojs.prototype.constructor.getComponent('SubsCapsButton');
-class CustomSubsCapsButton extends subsButton {
-  constructor(player, options = {}) {
-    super(player, options);
-    this.menuButton_.off('mouseenter');
-    this.menuButton_.off('mouseleave');
-  }
-}
-
-/*
-TODO - see what can be done about strange behaviour
-when cc button is clicked with the menu showing
-*/
-videojs.prototype.constructor.registerComponent('SubsCapsButton', CustomSubsCapsButton);