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

package/lib/index.esm.js

@@ -1,3227 +0,0 @@
-import videojs from 'video.js/dist/alt/video.core.min';
-import mousetrap from 'mousetrap';
-
-var name = "@vidispine/vdt-videojs";
-var version = "21.3.0";
-var license = "UNLICENSED";
-var main = "lib/index.cjs.js";
-var module = "lib/index.es.js";
-var author = "Oto Inša <otoinsa@bertelsmann.de>";
-var scripts = {
-	cleanup: "rm -rf ./dist && rm -rf ./.cache",
-	start: "npm run cleanup && parcel ./demo.html --no-source-maps --no-hmr -p 2222 -t browser --open --out-dir ./dev",
-	"build-legacy": "parcel build ./src/player.js --out-dir ./lib --no-source-maps",
-	build: "node ./build.js",
-	"build:watch": "node ./build.js --watch",
-	"build:demo": "rm -rf ./demo/ && parcel build ./demo.html --out-file index.html --out-dir ./demo --no-source-maps --public-url ./",
-	docs: "jsdoc ./src/player.js -d ./docs/"
-};
-var devDependencies = {
-	"@babel/core": "^7.7.7",
-	"babel-plugin-transform-runtime": "^6.23.0",
-	chokidar: "^3.3.1",
-	colors: "^1.4.0",
-	"parcel-bundler": "^1.12.4",
-	rollup: "^2.20.0",
-	"rollup-plugin-json": "^4.0.0",
-	sass: "^1.24.3",
-	"strip-comments": "^2.0.1"
-};
-var dependencies = {
-	mousetrap: "^1.6.3",
-	"video.js": "^7.6.6"
-};
-var browserslist = [
-	"since 2017-06"
-];
-var changelog = {
-	"0.1.2": [
-		"Removed unwanted videojs markup",
-		"Implemented playback hotkeys",
-		"Borrowed styling ideas from a popular online video platform",
-		"Visual feedback gizmo as hotkey feedback",
-		"Subtitle support (VVT)",
-		"Persistance - volume level",
-		"Custom timecode display (SMPTE)",
-		"Frame forward / frame backward 6unctionality"
-	],
-	"0.1.3": [
-		"Renamed 'subtitles off' to just 'off'",
-		"Timecode SMPTE - current time in SMPTE with input capabilities",
-		"Timecode SMPTE - total video duration timecode (read-only)",
-		"Settings persistance - storing wether subtitles should be on and the selected language as well"
-	],
-	"0.1.4": [
-		"Subtitles toggle hotkey - c",
-		"Now accepts Blob as subtitles source file",
-		"Timecode input improvements",
-		"Screenshot button with currentTime callback",
-		"Moved OSD in its own class"
-	],
-	"0.1.6": [
-		"Help overlay for keyboard controls",
-		"External player controls component (js, React)",
-		"External seek-bar component (js, React)"
-	],
-	"0.1.7": [
-		"In / Out markers for seek bar"
-	],
-	"0.1.8": [
-		"External TimeCodeDisplay support for player"
-	],
-	"0.1.9": [
-		"Multiple regions with annotations for SeekBar"
-	],
-	"0.2.2": [
-		"Overall version bump (improvements)"
-	],
-	"0.3.0": [
-		"controlsBelowPlayer - reactive option",
-		"onDark - used in conjuction with controlsBelowPlayer for dark backgrounds",
-		"Bug fixes, convenience class methods"
-	],
-	"0.3.1": [
-		"SeekBar - Seek animation, dark mode improvements",
-		"Bug fixes, refactor & code sharing improvements"
-	],
-	"0.5.3": [
-		"vdt-videojs now provides a commonjs module with named exports"
-	],
-	"0.6.1": [
-		"Internal refactor before splitting main features into videojs plugins",
-		"More bugfixes"
-	]
-};
-var wishlist = [
-	"Timecode offset capabilities - i.e. start time from 10:00:00:00"
-];
-var backlog = [
-	"External player controls component",
-	"Check for hijacked hotkeys and player focus"
-];
-var pkgInfo = {
-	name: name,
-	version: version,
-	license: license,
-	"private": false,
-	main: main,
-	module: module,
-	author: author,
-	scripts: scripts,
-	devDependencies: devDependencies,
-	dependencies: dependencies,
-	browserslist: browserslist,
-	changelog: changelog,
-	wishlist: wishlist,
-	backlog: backlog
-};
-
-const defaults = Object.freeze({
-  frameRate: (30000 / 1001),
-  jumpSeconds: 10,
-  inactivityTimeout: 1200, // hide player controls if user inactive for this duration
-  audioInactivityTimeout: 0,
-});
-
-const osd = Object.freeze({
-  play: 0,
-  pause: 1,
-  volchange: 2,
-  jumpForward: 3,
-  jumpBackward: 4,
-});
-
-const settings = Object.freeze({
-  volume: 'volume-setting',
-  subLang: 'subtitles-language',
-  subs: 'subtitles-enabled',
-});
-
-const classNames = Object.freeze({
-  poster: 'has-poster',
-  subtitles: 'has-subtitles',
-  subtitlesActive: 'subtitles-active',
-  onDark: 'on-dark',
-  loading: 'loading',
-});
-
-const colors = Object.freeze({
-  gray: '#787878',
-  light: 'rgba(255,255,255,.75)',
-});
-
-const packageInfo = Object.freeze({
-  name: pkgInfo.name.split('/')[1],
-  vendor: pkgInfo.name.split('/')[0],
-});
-
-const constants = Object.freeze({
-  defaults,
-  settings,
-  classNames,
-  colors,
-  osd,
-  packageInfo,
-});
-
-function truncate(input, len) {
-  if (input.length > len) return `${input.substring(0, len)}...`;
-  return input;
-}
-
-
-/*
-Make certain component props React-ive
-by being able to call respective component .handleNewProps()
-method in react wrappers
-*/
-function reactiveSetters() {
-  // will try to find a matching setter in context
-  // TODO - switch to for loop for more efficient updates
-  function handleNewProps(props) {
-    if (typeof props === 'object') {
-      const keys = Object.getOwnPropertyNames(props);
-      const proto = Object.getPrototypeOf(this);
-      keys.forEach((key) => {
-        // check for own setters / getters
-        const descriptor = Object.getOwnPropertyDescriptor(proto, key);
-
-        if (descriptor && descriptor.set) { // if a setter is defined, apply the prop
-          this[key] = props[key];
-        }
-      });
-    }
-  }
-
-  // extends a context with handleNewProps method
-  this.handleNewProps = handleNewProps;
-}
-
-// an elegant way to prevent xss attacks
-function sanitize(str) { 
-  const temp = document.createElement('div');
-  temp.textContent = str;
-  return temp.innerHTML;
-}
-
-/* eslint-disable prefer-destructuring */
-
-class OSD {
-  constructor(props) {
-    this.props = props;
-
-    this.state = {
-      enabled: true,
-    };
-
-    this.container = document.createElement('div');
-    this.container.className = 'vdt-player-osd';
-
-    // vertically center with css
-    this.container.innerHTML = `
-            <table>
-                <tbody>
-                    <td>
-                        <div class="osd-feedback-icon"></div>
-                    </td>
-                </tbody>
-            </table>
-        `;
-
-    this.iconEl = this.container.getElementsByClassName('osd-feedback-icon')[0];
-
-    this.props.target && this.props.target.appendChild(this.container);
-  }
-
-  feedback(feedbackType, details = null) { // details - {} - can contain additional data
-    if (!this.state.enabled) {
-      return;
-    }
-
-    let className;
-
-    switch (feedbackType) {
-      case constants.osd.pause:
-        className = 'pause';
-        break;
-      case constants.osd.play:
-        className = 'play';
-        break;
-      case constants.osd.volchange:
-        const currentVolumeLevel = details.volume;
-        let perceivedVolumeLevel; // 'low' | 'mid' | 'high' string to utilize video js eisting icons
-
-        /*
-        case switch will be too slow for this, if's are 2x more performant for this case
-        (Except in IE)
-        so... no case switch inside case switch this time :/
-        */
-
-        // alues here are a bit of a guess, but they seem to match videojs thresholds
-        if (currentVolumeLevel === 0) { perceivedVolumeLevel = 'null'; } else
-        if (currentVolumeLevel > 0.65) { perceivedVolumeLevel = 'high'; } else
-        if (currentVolumeLevel < 0.35) { perceivedVolumeLevel = 'low'; } else { perceivedVolumeLevel = 'mid'; }
-
-        className = `volchange ${perceivedVolumeLevel}`;
-        break;
-      case constants.osd.jumpForward:
-        className = 'forward-jump';
-        break;
-      case constants.osd.jumpBackward:
-        className = 'backward-jump';
-        break;
-    }
-
-
-    if (this.osdTimeout) { // should clear previous timeout/classname if in progress
-      this.container.classList.remove('active');
-      clearTimeout(this.osdTimeout);
-    }
-
-    // do feedback
-    this.container.classList.add('active');
-    this.osdTimeout = setTimeout(() => {
-      this.container.classList.remove('active');
-    }, 200);
-
-    // get specific with classnames
-    this.iconEl.className = `osd-feedback-icon ${className}`; // gets an overwrite each time
-  }
-
-  disable() {
-    this.state.enabled = false;
-  }
-
-  enable() {
-    this.state.enabled = true;
-  }
-}
-
-/* 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',
-];
-
-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;
-    }
-  }
-
-  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 spmte(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'));
-  }
-}
-
-/* eslint-disable no-plusplus */
-
-class HelpOverlay {
-  constructor(props) {
-    this.props = props;
-
-    this.state = {
-      active: this.props.active || false,
-    };
-
-    this.container = document.createElement('div');
-    this.container.className = 'vdt-help-overlay';
-    this.container.innerHTML = '';
-    this.container.onclick = () => {
-      this.hide();
-    };
-
-    this.props.target && this.props.target.appendChild(this.container);
-
-    this.draw();
-  }
-
-  draw() { // draws keyboard controls
-    let tableRowMarkup = ''; // will insert a DOM string here
-    const rows = [
-      ['⎵', 'Play / Pause'],
-      ['⇧', 'Increase volume '],
-      ['⇩', 'Decrease volume'],
-      ['⇨', 'Step frame forward'],
-      ['⇦', 'Step frame backward'],
-      ['M', 'Mute / Unmute'],
-
-      ['J', 'Seek 10 seconds backward'],
-      ['K', 'Play / Pause'],
-      ['L', 'Seek 10 seconds forward'],
-      ['C', 'Toggle subtitles'],
-      ['N', 'Toggle settings menu'],
-      ['H', 'Toggle this help overlay'],
-    ];
-
-
-    // split the data for 2 columns
-    const halfpointIndex = Math.round(rows.length / 2);
-    const columns = [
-      rows.slice(0, halfpointIndex),
-      rows.slice(halfpointIndex, rows.length),
-    ];
-
-    // table will niceley auto adjust td's according to length
-    for (let i = 0; i < halfpointIndex; i++) {
-      tableRowMarkup += `
-            <tr>
-                <td><div>${columns[0][i][0]}</div></td>
-                <td>- ${columns[0][i][1]}</td>
-
-                <td>${(columns[1][i]) ? `<div>${columns[1][i][0]}</div>` : ''}</td>
-                <td>${(columns[1][i]) ? `- ${columns[1][i][1]}` : ''}</td>
-            </tr>
-        `;
-    }
-
-    /*
-    insert table row markup in the table;
-    note that there are two tables going
-    on here - one is for vertically centering the
-    content of help overlay (the other table)
-    */
-
-    this.container.innerHTML = `
-        <table>
-            <tbody>
-                <tr>
-                    <td class="vdt-help-contents">
-                        <table><tbody>${tableRowMarkup}</tbody></table>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    `;
-  }
-
-  show() {
-    if (!this.state.active) {
-      this.container.classList.add('active');
-      this.state.active = true;
-
-      mousetrap.bind('esc', () => { this.hide(); });
-
-      this.props.onToggle && this.props.onToggle(true);
-    }
-  }
-
-  hide() {
-    if (this.state.active) {
-      this.container.classList.remove('active');
-      this.state.active = false;
-
-      mousetrap.unbind('esc');
-
-      this.props.onToggle && this.props.onToggle(false);
-    }
-  }
-
-  toggle() {
-    if (this.state.active) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-}
-
-/* eslint-disable no-param-reassign */
-
-
-const constants$1 = Object.freeze({
-  className: 'vdt-menu',
-  menuClassName: 'menu',
-  subLvlClassName: 'sub-level',
-  menuItemClassName: 'menu-item',
-  animationLength: 300,
-  defaults: {
-    bgColor: 'rgba(0,0,0,.8)',
-    textColor: '#999',
-    textColorDark: '#333',
-    textColorLight: 'rgba(255,255,255)',
-    bgColorLight: 'rgba(255,255,255,.2)',
-    bgColorSelected: 'rgba(255,255,255,.1)',
-  },
-});
-
-
-const CSS = () => `
-    .${constants$1.menuClassName}{
-        position: relative;
-        height: 100%;
-        width: 200%;
-        // min-width: 200px;
-        right: 0px;
-        bottom: 0px;
-        background: ${constants$1.defaults.bgColor};
-        z-index: 1px;
-        transform: translate3d(100%, 0px, 0px);
-        transition: all 300ms ease-in-out;
-        box-shadow: 0px 0px 30px rgb;
-        -webkit-backdrop-filter: blur(10px);
-        overflow: hidden;
-    }
-
-    .${constants$1.menuClassName} .level-1{
-        float: left;
-    }
-
-    .${constants$1.menuClassName} div h3{
-        padding: 16px 24px;
-        font-size: 12px;
-        border-bottom: 1px solid ${constants$1.defaults.bgColorLight}
-    }
-
-    .${constants$1.menuClassName} .level-2 h3{
-        cursor: pointer;
-        position: relative;
-    }
-    .${constants$1.menuClassName} .level-2 h3:before{
-        content: '◂';
-        margin-left: -12px;
-        width: 12px;
-        display: inline-block;
-        position: absolute;
-        margin-top: -1px;
-    }
-
-    .${constants$1.menuClassName} .level-1,
-    .${constants$1.menuClassName} .level-2{
-        transform: translate3d(0px, 0px, 0px);
-        transition: all 300ms ease-in-out;
-        width: 50%;
-        height: 100%;
-        float: left;
-    }
-
-    .${constants$1.menuClassName}.sub-level .level-1,
-    .${constants$1.menuClassName}.sub-level .level-2{
-        transform: translate3d(-100%, 0px, 0px);
-    }
-
-    .${constants$1.menuClassName} table{
-        border-collapse: collapse;
-        width: 100%;
-    }
-
-    .${constants$1.menuClassName}.open{
-        transform: translate3d(0px, 0px, 0px);
-    }
-
-    .${constants$1.menuClassName} tr{
-        cursor: pointer;
-        height: 40px;
-    }
-
-    .${constants$1.menuClassName} tr.selected{
-        background: ${constants$1.defaults.bgColorSelected};
-    }
-
-
-    .${constants$1.menuClassName} tr td{
-        color: white;
-        font-size: 15px;
-        vertical-align: middle;
-    }
-
-    
-    .${constants$1.menuClassName} tr:hover td{
-        color: white;
-        background: ${constants$1.defaults.bgColorLight};
-    }
-
-    .${constants$1.menuClassName} tr td.title{
-        padding-top: 12px;
-        padding-bottom: 12px;
-        font-weight: 300;
-        font-family: Helvetica, Arial, sans-serif; 
-    }
-
-    .${constants$1.menuClassName} tr td.caret{
-        font-size: 12px;
-    }
-
-    .${constants$1.menuClassName} tr td:first-child{
-        padding-left: 24px;
-    }
-
-    .${constants$1.menuClassName} tr td:last-child{
-        padding-right: 16px;
-    }
-
-    .${constants$1.menuClassName} tr.has-items td:last-child{
-        text-align: right;
-    }
-
-    .${constants$1.menuClassName} tr.has-items td.subtitle{
-      font-size: 12px;
-      text-align: right;
-      color: ${constants$1.defaults.textColorLight};
-    }
-`;
-
-class MenuDisplayItem {
-  constructor(props) {
-    this.props = props;
-
-    const classNames = [
-      constants$1.menuItemClassName,
-      this.props.items && 'has-items',
-      this.props.selected && 'selected',
-    ];
-    this.container = document.createElement('tr');
-    this.container.className = classNames.join(' ');
-
-
-    this.props.target && this.props.target.appendChild(this.container);
-
-    // bind click
-    this.container.onclick = (event) => {
-      this.props.onClick && this.props.onClick(event);
-    };
-
-    this.render();
-  }
-
-  render() {
-    if (this.props.items) { // will transition to 2nd level
-      this.container.innerHTML = `
-          <td class="title"></td>
-          <td class="subtitle"></td>
-          <td class="caret">▷</td>
-      `;
-    } else {
-      this.container.innerHTML = `
-          <td class="title"></td>
-      `;
-    }
-
-    const titleNode = this.container.getElementsByClassName('title')[0];
-    const subtitleNode = (this.props.items) ? this.container.getElementsByClassName('subtitle')[0] : false;
-
-    titleNode.textContent = this.props.title;
-    subtitleNode && (subtitleNode.textContent = this.props.subtitle);
-  }
-}
-
-class Menu {
-  constructor(props) {
-    this.props = props;
-
-    this.container = document.createElement('div');
-    this.container.className = `${constants$1.className}`;
-
-    this.state = {
-      opened: false,
-      selectedItem: 0,
-      items: [],
-      subItems: [],
-    };
-
-    this.mount();
-    this.draw();
-  }
-
-  mount() {
-    // this.props.target && this.props.target.appendChild(this.container)
-    if (this.props.target) {
-      // container node, acts as an overlay in is stylable from outside
-      this.container.style.position = 'absolute';
-      this.container.style.bottom = this.container.style.right = '0px';
-      this.container.style.height = '100%';
-      this.container.style.overflow = 'hidden';
-      this.container.style.width = '30%';
-      this.container.style.minWidth = '250px';
-      this.container.style.maxWidth = '320px';
-
-      // shadow node encapsulates style and prevents css collisions
-      this.shadow = this.container.attachShadow({ mode: 'open' });
-      this.props.target && this.props.target.appendChild(this.container);
-
-
-      // node for menu itself
-      this.menuContainer = document.createElement('div');
-      this.menuContainer.className = 'menu';
-
-      this.shadow.appendChild(this.menuContainer);
-
-      // attach styles
-      this.style = document.createElement('style');
-      this.style.type = 'text/css';
-      this.style.innerHTML = CSS();
-      this.shadow.appendChild(this.style);
-    }
-  }
-
-  draw() { // first draw
-    const mainDiv = document.createElement('div');
-    mainDiv.className = 'level-1';
-    this.mainLevel = document.createElement('table');
-    mainDiv.innerHTML = '<h3>Settings</h3>';
-    mainDiv.appendChild(this.mainLevel);
-
-    const subDiv = document.createElement('div');
-    subDiv.className = 'level-2';
-    this.subLvlTitle = document.createElement('h3');
-    this.subLvlTitle.onclick = () => { this.up(); };
-    subDiv.appendChild(this.subLvlTitle);
-    this.secondaryLevel = document.createElement('table');
-    subDiv.appendChild(this.secondaryLevel);
-
-
-    this.menuContainer.appendChild(mainDiv);
-    this.menuContainer.appendChild(subDiv);
-
-    this.props.items.forEach((menuItem) => {
-      // get selected item title if such exists
-      const activeTitle = menuItem.items[menuItem.getActiveIndex(menuItem.items)].title || '';
-      const displayItem = new MenuDisplayItem({
-        target: this.mainLevel,
-        subtitle: activeTitle,
-        onClick: () => {
-          this.handleSupItemSelected(menuItem);
-        },
-        ...menuItem,
-      });
-
-      this.state.items.push(displayItem);
-    });
-  }
-
-  open() {
-    this.render();
-
-    this.menuContainer.classList.add('open');
-    this.props.onOpen && this.props.onOpen();
-    this.state.opened = true;
-
-    // close the menu when user clicks outside it
-    if (!this.handleClicksWhenMenuOpened) {
-      this.handleClicksWhenMenuOpened = function (event) {
-        if (this.state.opened) {
-          event.stopPropagation();
-          const isClickInside = this.container.contains(event.target);
-          if (!isClickInside) {
-            this.close();
-          }
-        }
-      }.bind(this);
-    }
-
-    this.handleClicksWhenMenuOpenedTimeout = setTimeout(() => {
-      document.addEventListener('click', this.handleClicksWhenMenuOpened);
-      mousetrap.bind('esc', this.close.bind(this)); // esc closes menu aswell
-    }, constants$1.animationLength);
-  }
-
-  close() {
-    this.menuContainer.classList.remove('open');
-    this.state.opened = false;
-
-    this.handleClicksWhenMenuOpenedTimeout && clearTimeout(this.handleClicksWhenMenuOpenedTimeout);
-    document.removeEventListener('click', this.handleClicksWhenMenuOpened);
-
-    this.props.onClose && this.props.onClose();
-
-    mousetrap.unbind('esc');
-  }
-
-  toggle() {
-    if (this.state.opened) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-
-  up() { // go to level 1
-    this.menuContainer.classList.remove(constants$1.subLvlClassName);
-    this.render();
-  }
-
-  handleSupItemSelected(item) {
-    this.subLvlTitle.textContent = item.title;
-    this.renderSubItems(item.items, item.getActiveIndex(item.items));
-    this.menuContainer.classList.add(constants$1.subLvlClassName);
-  }
-
-  renderSubItems(items, activeIndex = false) {
-    this.secondaryLevel.innerHTML = '';
-
-    const subItemRefs = [];
-    items.forEach((menuItem, index) => {
-      const displayItem = new MenuDisplayItem({
-        target: this.secondaryLevel,
-        ...menuItem,
-        onClick: (event) => {
-          this.handleSubItemSelected(event, menuItem);
-        },
-        selected: (index === activeIndex), // mark selected
-      });
-
-      subItemRefs.push(displayItem);
-    });
-
-    this.state.subItems = subItemRefs;
-  }
-
-  handleSubItemSelected(event, item) {
-    this.close();
-    item.onClick && item.onClick(event, item);
-    this.up();
-  }
-
-  get opened() {
-    return this.state.opened;
-  }
-
-  set opened(bool) {
-    this.state.opened = bool;
-  }
-
-  render() {
-    // update selections at level 1
-    this.state.items.forEach((menuDisplayItem, index) => {
-      const { items } = this.props;
-      const activeIndex = items[index].getActiveIndex(items[index].items);
-      const activeTitle = items[index].items[activeIndex].title;
-      menuDisplayItem.props.subtitle = activeTitle;
-      menuDisplayItem.render();
-    });
-  }
-}
-
-/* eslint-disable max-len */
-
-const constants$2 = 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$1 = (bgColor, fillColor) => `
-  .${constants$2.className}{
-    user-select: none;
-    background: ${colors.light};
-    height: 6px;
-    width: 100%;
-    position: relative;
-    cursor: pointer;
-    z-index: 5;
-  }
-
-  .${classNames.onDark}.${constants$2.className}{
-    background: ${colors.gray};
-  }
-
-  .fill, .load-indicator{
-    height: 100%;
-    display: inline-block;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    background: ${fillColor};
-    transition: width ${constants$2.defaults.transitionTime}ms linear;
-    z-index: 2;
-  }
-
-  .load-indicator{
-    background: #e1e1e1;
-    z-index: 1;
-    opacity: .2;
-    transition: none;
-  }
-
-  .${classNames.onDark}.${constants$2.className} .load-indicator{
-    background: white;
-  }
-
-  .${constants$2.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$2.defaults.transitionTime}ms linear;
-  }
-
-  .marker{ display: none; }
-  .marker.active{ display: initial; }
-
-  .marker .handle{
-    position: absolute;
-    bottom: 10px; right: 0px;
-    width: ${constants$2.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$2.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$2.defaults.regionColor};
-  }
-
-  .region{
-    position: absolute;
-    width: auto;
-    background: ${constants$2.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$2.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$2.className}.dragging .bubble{
-    transform: scale3d(.75,.75,.75);
-  }
-
-  .${constants$2.className}.hide-markers .marker{
-    opacity: 0;
-  }
-
-`;
-
-class Region {
-  constructor(props) {
-    const regionDefaultProps = {
-      in: null,
-      out: null,
-      title: '',
-      annotation: '',
-      el: null, // can store a
-    };
-
-    Object.assign(this, regionDefaultProps, props); // apply props
-  }
-}
-
-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$2.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$2.defaults.bgColor;
-      const fillColor = (this.props.fillColor) ? this.props.fillColor : constants$2.defaults.fillColor;
-
-      this.style.innerHTML = CSS$1(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$2.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$2.markerTypes.in] = document.createElement('div');
-      const markerOut = this.markers[constants$2.markerTypes.out] = document.createElement('div');
-      markerIn.className = `marker ${constants$2.markerTypes.in}`;
-      markerOut.className = `marker ${constants$2.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$2.markerTypes.in, e);
-      }, false);
-
-      handleOut.addEventListener('mousedown', (e) => {
-        e.preventDefault(); // prevents selection cursor
-        e.stopPropagation(); // prevent triggering seek bar drag
-
-        this.handleMarkerDrag(markerOut, constants$2.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$2.markerTypes.in].style.left;
-      this.region.style.right = `${100 - parseFloat(this.markers[constants$2.markerTypes.out].style.left.replace('%', ''))}%`;
-    }
-  }
-
-  /*
-  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$2.markerTypes.in) ? (constants$2.defaults.markerWidth / 2) : -(constants$2.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$2.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$2.markerTypes.in].classList.remove('active');
-      removedMarker = true;
-    }
-
-    if (this.state.out === null) {
-      this.markers[constants$2.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$2.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$2.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) ; 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;
-
-// TODO - move this to @vidispine/vdt-js when finalized and use as dependency
-
-class VideoTime {
-  constructor(props) {
-    if (props.frameRate === undefined) {
-      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,
-    };
-  }
-}
-
-/* eslint-disable no-param-reassign */
-
-const correctMimeTypes = {
-  'audio/x-aac': 'audio/aac',
-};
-const sanitizeMimeType = (mimeType) => correctMimeTypes[mimeType] || mimeType;
-
-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();
-      }
-
-      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 && this.props.target.appendChild(this.videoEl);
-    }
-
-    const showDefaultTimeDisplay = (this.props.timecode !== true);
-    const controlsEnabled = (this.props.controls !== false);
-    const options = this.props.options || {};
-
-    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
-    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();
-      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) {
-          this.seekBar && this.seekBar.hideMarkers();
-        } else {
-          this.seekBar && this.seekBar.showMarkers();
-        }
-      });
-
-      this.videojs.on('useractive', () => {
-        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
-      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);
-
-    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
-
-    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
-          (e.preventDefault) && e.preventDefault();
-          this.togglePlayback();
-        },
-      },
-      {
-        key: 'j',
-        method: () => {
-          this.videojs.hasStarted_ && this.jumpBackward();
-        },
-      },
-      {
-        key: 'l',
-        method: () => {
-          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) => {
-          e.preventDefault && e.preventDefault(); // prevent page scroll
-          this.volumeUp();
-        },
-      },
-      {
-        key: 'down',
-        method: (e) => {
-          e.preventDefault && e.preventDefault(); // prevent page scroll
-          this.volumeDown();
-        },
-      },
-      {
-        key: 'h',
-        method: () => {
-          this.help.toggle();
-        },
-      },
-      {
-        key: 'n',
-        method: () => {
-          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() {
-    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) {
-    !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++) {
-      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++) {
-      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 () {
-        Button.apply(this, arguments);
-        options.className && this.el_.classList.add(options.className);
-        if (options.title) { this.el_.title = options.title; }
-      },
-      handleClick: () => {
-        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++) {
-              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++) {
-              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: () => {
-          !this.controlsBelowPlayer && this.hideControls();
-        },
-        onClose: () => {
-          !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',
-      });
-    }
-  }
-
-  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() {
-    !this.videojs.paused() && this.videojs.pause();
-  }
-
-  togglePlayback() {
-    if (this.videojs.paused()) {
-      this.play();
-      this.videojs.hasStarted_ && this.osd.feedback(constants.osd.play);
-    } else {
-      this.pause();
-      this.osd.feedback(constants.osd.pause);
-    }
-  }
-
-  destroy() { // clean up
-    this.videojs.paused(true);
-    this.rafID && cancelAnimationFrame(this.rafID);
-    this.videojs.dispose();
-    this.unbindHotKeys();
-    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(smpte) {
-    const currentSecond = this.videojs.currentTime();
-    return this.timeConverter.secondsFromStartToSMPTE(currentSecond);
-  }
-
-  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 && typeof souce === 'Array' && 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];
-  }
-
-  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);
-
-/* eslint-disable no-plusplus */
-
-const buttonNames = Object.freeze({
-  play: 'play-pause',
-  start: 'start',
-  fb: 'frame-backward',
-  ff: 'frame-forward',
-  end: 'end',
-});
-
-const buttons = [ // order matters
-  buttonNames.start,
-  buttonNames.fb,
-  buttonNames.play,
-  buttonNames.ff,
-  buttonNames.end,
-];
-
-/*
-Since this could possibly be used in a
-context without the player and vice versa -
-will try and make it as self-contained
-as possible, currently utilizing
-shadow DOM (style encapsulation as main reason),
-https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
-BEWARE - IE < Edge is unsupported
-*/
-
-const CSS$2 = `
-  .vdt-external-controls{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .control{
-    flex: 1;
-    flex-grow: 1;
-    height: 100%;
-    align-contents: center;
-    align-self: center;
-    text-align: center;
-    vertical-align: middle;
-    cursor: pointer;
-    user-select: none;
-    height: 20px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
-  .control .icon{
-    display: inline-block;
-    height: 20px;
-    white-space: nowrap;
-    opacity: .9;
-  }
-
-  .control:hover .icon{ opacity: 1; }
-
-  .control .icon:before{
-    opacity: 1;
-    flex: 1;
-    align-self: center;
-    content: " ";
-    display: inline-block;
-    margin: 0 auto;
-
-    /* triangles */
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 16px 0 16px 23px;
-    border-color: transparent transparent transparent ${colors.gray};
-  }
-
-  .vdt-external-controls.${classNames.onDark} .control .icon:before{
-    border-color: transparent transparent transparent ${colors.light};
-  }
-
-  /* specific buttons */
-
-  .control.${buttonNames.start},
-  .control.${buttonNames.end}{
-    height: 20px;
-  }
-
-  .control.${buttonNames.play}{
-    height: 30px;
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
-  .control.${buttonNames.play} .icon{
-    height: 30px;
-  }
-
-  .control.${buttonNames.ff} .icon:before,
-  .control.${buttonNames.fb} .icon:before,
-  .control.${buttonNames.end} .icon:before,
-  .control.${buttonNames.start} .icon:before{
-    border-width: 10px 0 10px 16px;
-  }
-
-  .control.${buttonNames.fb} .icon,
-  .control.${buttonNames.start}{
-    transform: rotate(180deg);
-  }
-
-  .control.${buttonNames.end} .icon:after,
-  .control.${buttonNames.start} .icon:after{
-    content: " ";
-    width: 4px;
-    height: 20px;
-    display: inline-block;
-    background: ${colors.gray};
-  }
-
-  .vdt-external-controls.${classNames.onDark} .control.${buttonNames.end} .icon:after,
-  .vdt-external-controls.${classNames.onDark} .control.${buttonNames.start} .icon:after{
-    background: ${colors.light};
-  }
-
-  /* stateful styles */
-  .control.${buttonNames.play}.playing .icon:before{
-    height: 30px;
-    width: 6px;
-    border-width: 0px 8px 0px 8px;
-    border-color: transparent ${colors.gray} transparent ${colors.gray};
-  }
-
-  .vdt-external-controls.${classNames.onDark} .control.${buttonNames.play}.playing .icon:before{
-    border-color: transparent ${colors.light} transparent ${colors.light};
-  }
-
-  .vdt-external-controls.${classNames.loading} .control.${buttonNames.play}{
-    border-color: transparent #f00 transparent #f00;
-  }
-`;
-
-class ExternalControls {
-  constructor(props) {
-    this.props = props;
-    reactiveSetters.apply(this);
-
-    this.state = {
-      playing: false,
-      onDark: false,
-      loading: false,
-    };
-
-    this.shadowRoot = document.createElement('div'); // will attach shadow here, after appending to target
-    this.shadowRoot.className = 'vdt-external-controls-wrapper';
-    this.container = document.createElement('div');
-    this.container.className = 'vdt-external-controls';
-
-    if (this.props.target) {
-      this.props.target.appendChild(this.shadowRoot);
-      this.shadow = this.shadowRoot.attachShadow({ mode: 'open' });
-      // attach styles
-      this.style = document.createElement('style');
-      this.style.type = 'text/css';
-      this.style.appendChild(document.createTextNode(CSS$2));
-      this.shadow.appendChild(this.style);
-
-      // attach container to shadow root
-      this.shadow.appendChild(this.container);
-    }
-
-    this.handleNewProps(props);
-    this.bindEvents();
-    this.draw();
-  }
-
-  draw() {
-    this.buttons = {}; // map of html nodes for DOM manipulations
-    const excludes = this.props.excludes || [];
-
-    buttons.forEach((buttonName) => {
-      if (excludes.indexOf(buttonName) < 0) {
-        const btn = document.createElement('div');
-        btn.className = `control ${buttonName}`;
-        btn.innerHTML = '<span class="icon"></span>';
-
-        btn.onclick = () => {
-          this.handlePress(buttonName);
-        };
-
-        this.buttons[buttonName] = btn;
-        this.container.appendChild(btn);
-      }
-    });
-  }
-
-  /*
-  bind to play / pause / stop and other events,
-  so that controls reflect the player state
-  */
-  bindEvents() {
-    if (this.props.player && this.props.player.videojs) {
-      const { player } = this.props;
-
-      player.videojs.on('play', () => {
-        this.playing = true;
-      });
-
-      player.videojs.on('pause', () => {
-        this.playing = false;
-      });
-
-      player.videojs.on('stop', () => {
-        this.playing = false;
-      });
-    }
-  }
-
-  handlePress(buttonName) {
-    if (this.props.player) { // control a vdt player instance directly
-      const player = this.props.player;
-      console.log(player);
-      player.osd && player.osd.disable(); // temporarily disable OSD
-
-      switch (buttonName) {
-        case buttonNames.start:
-          player.toStart();
-          break;
-        case buttonNames.fb:
-          player.triggerHotkey('left');
-          break;
-        case buttonNames.play:
-          player.triggerHotkey('k'); // TODO - triggering hotkeys has a side effect - OSD will give feedback
-          break;
-        case buttonNames.ff:
-          player.triggerHotkey('right');
-          break;
-        case buttonNames.end:
-          player.toEnd();
-          break;
-      }
-
-      player.osd && player.osd.enable(); // re-enable OSD
-    } else {
-      switch (buttonName) {
-        case buttonNames.start:
-          this.props.onPrev && this.props.onPrev();
-          break;
-        case buttonNames.fb:
-          this.props.onFB && this.props.onFB();
-          break;
-        case buttonNames.play:
-          if (this.playing) {
-            this.props.onPause && this.props.onPause();
-          } else {
-            this.props.onPlay && this.props.onPlay();
-          }
-          break;
-        case buttonNames.ff:
-          this.props.onFF && this.props.onFF();
-          break;
-        case buttonNames.end:
-          this.props.onNext && this.props.onNext();
-          break;
-      }
-    }
-  }
-
-  // setters and getters for state
-  set playing(bool) {
-    if (bool) {
-      this.state.playing = true;
-      this.buttons[buttonNames.play].classList.add('playing');
-    } else {
-      this.state.playing = false;
-      this.buttons[buttonNames.play].classList.remove('playing');
-    }
-  }
-
-  get playing() {
-    return this.state.playing;
-  }
-
-  set onDark(bool) {
-    if (bool) {
-      this.state.onDark = true;
-      this.container.classList.add(classNames.onDark);
-    } else {
-      this.state.onDark = false;
-      this.container.classList.remove(classNames.onDark);
-    }
-  }
-
-  get onDark() {
-    return this.container.classList.contains(classNames.onDark);
-  }
-
-  set loading(bool) {
-    if (bool) {
-      this.state.loading = true;
-      this.container.classList.add(classNames.loading);
-    } else {
-      this.state.loading = false;
-      this.container.classList.remove(classNames.loading);
-    }
-  }
-
-  get loading() {
-    return this.state.loading;
-  }
-}
-
-ExternalControls.buttonNames = buttonNames;
-
-export { ExternalControls, Player, SeekBar, TimeCodeDisplay, VideoTime };