@vidispine/vdt-videojs 21.4.0-pre.1 → 22.1.0-pre.2

package/{lib → dist}/index.umd.js

@@ -1,112 +1,55 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('video.js/dist/alt/video.core.min'), require('mousetrap')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'video.js/dist/alt/video.core.min', 'mousetrap'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.vdtVideojs = {}, global.videojs, global.mousetrap));
-})(this, (function (exports, videojs, mousetrap) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('mousetrap'), require('video.js/dist/alt/video.core.min')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'mousetrap', 'video.js/dist/alt/video.core.min'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.vdtVideojs = {}, global.mousetrap, global.videojs));
+})(this, (function (exports, mousetrap, videojs) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
   var mousetrap__default = /*#__PURE__*/_interopDefaultLegacy(mousetrap);
+  var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
 
   var name = "@vidispine/vdt-videojs";
-  var version = "21.4.0-pre.1";
+  var version = "22.1.0-pre.2";
   var license = "UNLICENSED";
-  var main = "lib/index.cjs.js";
-  var module = "lib/index.es.js";
+  var main = "dist/index.js";
+  var module = "dist/index.es.js";
+  var browser = "dist/index.umd.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"
+  	build: "rm -rf dist/ && rollup -c",
+  	"build:watch": "rm -rf dist/*.js* && rollup -c -w --environment DEVELOPMENT",
+  	lint: "eslint \"./{src/**/*,*}.{js,md}\"",
+  	"lint:fix": "yarn lint --fix"
   };
   var dependencies = {
   	mousetrap: "^1.6.3",
   	"video.js": "^7.6.6"
   };
+  var devDependencies = {
+  	"@babel/core": "^7.17.0",
+  	"@rollup/plugin-babel": "^5.3.0",
+  	"@rollup/plugin-commonjs": "^21.0.1",
+  	"@rollup/plugin-json": "^4.1.0",
+  	"@rollup/plugin-node-resolve": "^13.1.3",
+  	"@vidispine/eslint-config-base": "^22.1.0-pre.2",
+  	"@vidispine/eslint-config-storybook": "*",
+  	"babel-plugin-transform-runtime": "^6.23.0",
+  	rollup: "^2.67.0",
+  	"rollup-plugin-cleanup": "^3.2.1",
+  	"rollup-plugin-peer-deps-external": "^2.2.4",
+  	"rollup-plugin-sass": "^1.2.10"
+  };
   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 eslintConfig = {
+  	"extends": [
+  		"@vidispine/eslint-config-base",
+  		"@vidispine/eslint-config-storybook"
   	]
   };
-  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 prettier = "@vidispine/prettier-config";
   var pkgInfo = {
   	name: name,
   	version: version,
@@ -114,565 +57,295 @@
   	"private": false,
   	main: main,
   	module: module,
+  	browser: browser,
   	author: author,
   	scripts: scripts,
-  	devDependencies: devDependencies,
   	dependencies: dependencies,
+  	devDependencies: devDependencies,
   	browserslist: browserslist,
-  	changelog: changelog,
-  	wishlist: wishlist,
-  	backlog: backlog
+  	eslintConfig: eslintConfig,
+  	prettier: prettier
   };
 
   const defaults = Object.freeze({
-    frameRate: (30000 / 1001),
+    frameRate: 30000 / 1001,
     jumpSeconds: 10,
-    inactivityTimeout: 1200, // hide player controls if user inactive for this duration
-    audioInactivityTimeout: 0,
+    inactivityTimeout: 1200,
+    audioInactivityTimeout: 0
   });
-
   const osd = Object.freeze({
     play: 0,
     pause: 1,
     volchange: 2,
     jumpForward: 3,
-    jumpBackward: 4,
+    jumpBackward: 4
   });
-
   const settings = Object.freeze({
     volume: 'volume-setting',
     subLang: 'subtitles-language',
-    subs: 'subtitles-enabled',
+    subs: 'subtitles-enabled'
   });
-
   const classNames = Object.freeze({
     poster: 'has-poster',
     subtitles: 'has-subtitles',
     subtitlesActive: 'subtitles-active',
     onDark: 'on-dark',
-    loading: 'loading',
+    loading: 'loading'
   });
-
   const colors = Object.freeze({
     gray: '#787878',
-    light: 'rgba(255,255,255,.75)',
+    light: 'rgba(255,255,255,.75)'
   });
-
   const packageInfo = Object.freeze({
     name: pkgInfo.name.split('/')[1],
-    vendor: pkgInfo.name.split('/')[0],
+    vendor: pkgInfo.name.split('/')[0]
   });
-
   const constants$2 = Object.freeze({
     defaults,
     settings,
     classNames,
     colors,
     osd,
-    packageInfo,
+    packageInfo
   });
 
   function truncate(input, len) {
-    if (input.length > len) return `${input.substring(0, len)}...`;
+    if (input.length > len) return "".concat(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
+        keys.forEach(key => {
           const descriptor = Object.getOwnPropertyDescriptor(proto, key);
-
-          if (descriptor && descriptor.set) { // if a setter is defined, apply the prop
+          if (descriptor && descriptor.set) {
             this[key] = props[key];
           }
         });
       }
     }
-
-    // extends a context with handleNewProps method
     this.handleNewProps = handleNewProps;
   }
-
-  // an elegant way to prevent xss attacks
-  function sanitize(str) { 
+  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$2.osd.pause:
-          className = 'pause';
-          break;
-        case constants$2.osd.play:
-          className = 'play';
-          break;
-        case constants$2.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$2.osd.jumpForward:
-          className = 'forward-jump';
-          break;
-        case constants$2.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
+  const buttonNames = Object.freeze({
+    play: 'play-pause',
+    start: 'start',
+    fb: 'frame-backward',
+    ff: 'frame-forward',
+    end: 'end'
+  });
+  const buttons = [
+  buttonNames.start, buttonNames.fb, buttonNames.play, buttonNames.ff, buttonNames.end];
+  const CSS$2 = "\n  .vdt-external-controls{\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .control{\n    flex: 1;\n    flex-grow: 1;\n    height: 100%;\n    align-contents: center;\n    align-self: center;\n    text-align: center;\n    vertical-align: middle;\n    cursor: pointer;\n    user-select: none;\n    height: 20px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n  }\n\n  .control .icon{\n    display: inline-block;\n    height: 20px;\n    white-space: nowrap;\n    opacity: .9;\n  }\n\n  .control:hover .icon{ opacity: 1; }\n\n  .control .icon:before{\n    opacity: 1;\n    flex: 1;\n    align-self: center;\n    content: \" \";\n    display: inline-block;\n    margin: 0 auto;\n\n    /* triangles */\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 16px 0 16px 23px;\n    border-color: transparent transparent transparent ".concat(colors.gray, ";\n  }\n\n  .vdt-external-controls.").concat(classNames.onDark, " .control .icon:before{\n    border-color: transparent transparent transparent ").concat(colors.light, ";\n  }\n\n  /* specific buttons */\n\n  .control.").concat(buttonNames.start, ",\n  .control.").concat(buttonNames.end, "{\n    height: 20px;\n  }\n\n  .control.").concat(buttonNames.play, "{\n    height: 30px;\n    padding-top: 0px;\n    padding-bottom: 0px;\n  }\n\n  .control.").concat(buttonNames.play, " .icon{\n    height: 30px;\n  }\n\n  .control.").concat(buttonNames.ff, " .icon:before,\n  .control.").concat(buttonNames.fb, " .icon:before,\n  .control.").concat(buttonNames.end, " .icon:before,\n  .control.").concat(buttonNames.start, " .icon:before{\n    border-width: 10px 0 10px 16px;\n  }\n\n  .control.").concat(buttonNames.fb, " .icon,\n  .control.").concat(buttonNames.start, "{\n    transform: rotate(180deg);\n  }\n\n  .control.").concat(buttonNames.end, " .icon:after,\n  .control.").concat(buttonNames.start, " .icon:after{\n    content: \" \";\n    width: 4px;\n    height: 20px;\n    display: inline-block;\n    background: ").concat(colors.gray, ";\n  }\n\n  .vdt-external-controls.").concat(classNames.onDark, " .control.").concat(buttonNames.end, " .icon:after,\n  .vdt-external-controls.").concat(classNames.onDark, " .control.").concat(buttonNames.start, " .icon:after{\n    background: ").concat(colors.light, ";\n  }\n\n  /* stateful styles */\n  .control.").concat(buttonNames.play, ".playing .icon:before{\n    height: 30px;\n    width: 6px;\n    border-width: 0px 8px 0px 8px;\n    border-color: transparent ").concat(colors.gray, " transparent ").concat(colors.gray, ";\n  }\n\n  .vdt-external-controls.").concat(classNames.onDark, " .control.").concat(buttonNames.play, ".playing .icon:before{\n    border-color: transparent ").concat(colors.light, " transparent ").concat(colors.light, ";\n  }\n\n  .vdt-external-controls.").concat(classNames.loading, " .control.").concat(buttonNames.play, "{\n    border-color: transparent #f00 transparent #f00;\n  }\n");
+  class ExternalControls {
     constructor(props) {
       this.props = props;
-
+      reactiveSetters.apply(this);
       this.state = {
-        selectedNode: null, // avoid updating values in a selected node
+        playing: false,
+        onDark: false,
+        loading: false
       };
-
-      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.shadowRoot = document.createElement('div');
+      this.shadowRoot.className = 'vdt-external-controls-wrapper';
       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);
-      });
-
+      this.container.className = 'vdt-external-controls';
       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
+        this.props.target.appendChild(this.shadowRoot);
+        this.shadow = this.shadowRoot.attachShadow({
+          mode: 'open'
+        });
+        this.style = document.createElement('style');
+        this.style.type = 'text/css';
+        this.style.appendChild(document.createTextNode(CSS$2));
+        this.shadow.appendChild(this.style);
+        this.shadow.appendChild(this.container);
       }
+      this.handleNewProps(props);
+      this.bindEvents();
+      this.draw();
     }
-
-    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);
+    draw() {
+      this.buttons = {};
+      const excludes = this.props.excludes || [];
+      buttons.forEach(buttonName => {
+        if (excludes.indexOf(buttonName) < 0) {
+          const btn = document.createElement('div');
+          btn.className = "control ".concat(buttonName);
+          btn.innerHTML = '<span class="icon"></span>';
+          btn.onclick = () => {
+            this.handlePress(buttonName);
+          };
+          this.buttons[buttonName] = btn;
+          this.container.appendChild(btn);
         }
-      }
-    }
-
-    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;
+    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;
+        });
       }
     }
-
-    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
+    handlePress(buttonName) {
+      if (this.props.player) {
+        const {
+          player
+        } = this.props;
+        if (player.osd) player.osd.disable();
+        switch (buttonName) {
+          case buttonNames.start:
+            player.toStart();
+            break;
+          case buttonNames.fb:
+            player.triggerHotkey('left');
+            break;
+          case buttonNames.play:
+            player.triggerHotkey('k');
+            break;
+          case buttonNames.ff:
+            player.triggerHotkey('right');
+            break;
+          case buttonNames.end:
+            player.toEnd();
+            break;
         }
-      }
-    }
-
-    checkAndNormalizeAllInputs() {
-      this.nodeNames.forEach((nodeName) => {
-        if (this.nodes[nodeName].value.length < 1) { // somebody left the input blank
-          this.nodes[nodeName].value = '00';
+        if (player.osd) player.osd.enable();
+      } else {
+        switch (buttonName) {
+          case buttonNames.start:
+            if (this.props.onPrev) this.props.onPrev();
+            break;
+          case buttonNames.fb:
+            if (this.props.onFB) this.props.onFB();
+            break;
+          case buttonNames.play:
+            if (this.playing) {
+              if (this.props.onPause) this.props.onPause();
+            } else if (this.props.onPlay) this.props.onPlay();
+            break;
+          case buttonNames.ff:
+            if (this.props.onFF) this.props.onFF();
+            break;
+          case buttonNames.end:
+            if (this.props.onNext) this.props.onNext();
+            break;
         }
-
-        // 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());
+    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 smpte() {
-      return {
-        hours: this.hours,
-        minutes: this.minutes,
-        seconds: this.seconds,
-        frame: this.frame,
-      };
+    get playing() {
+      return this.state.playing;
     }
-
-    set spmte(o) {
-      this.update(o);
+    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 smpteString() {
-      return `${this.getFormatted('hours')}:${this.getFormatted('minutes')}:${this.getFormatted('seconds')}:${this.getFormatted('frame')}`;
+    get onDark() {
+      return this.container.classList.contains(classNames.onDark);
     }
-
-    set external(bool) {
+    set loading(bool) {
       if (bool) {
-        this.container.classList.add('external');
+        this.state.loading = true;
+        this.container.classList.add(classNames.loading);
       } else {
-        this.container.classList.remove('external');
+        this.state.loading = false;
+        this.container.classList.remove(classNames.loading);
       }
     }
+    get loading() {
+      return this.state.loading;
+    }
+  }
+  ExternalControls.buttonNames = buttonNames;
 
-    get external() {
-      return (this.container.classList.contains('external'));
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
     }
+    return obj;
   }
 
-  /* eslint-disable no-plusplus */
-
   class HelpOverlay {
     constructor(props) {
       this.props = props;
-
       this.state = {
-        active: this.props.active || false,
+        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);
-
+      if (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
+    draw() {
+      let tableRowMarkup = '';
+      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']];
       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>
-        `;
+      const columns = [rows.slice(0, halfpointIndex), rows.slice(halfpointIndex, rows.length)];
+      for (let i = 0; i < halfpointIndex; i += 1) {
+        tableRowMarkup += "\n            <tr>\n                <td><div>".concat(columns[0][i][0], "</div></td>\n                <td>- ").concat(columns[0][i][1], "</td>\n\n                <td>").concat(columns[1][i] ? "<div>".concat(columns[1][i][0], "</div>") : '', "</td>\n                <td>").concat(columns[1][i] ? "- ".concat(columns[1][i][1]) : '', "</td>\n            </tr>\n        ");
       }
-
-      /*
-      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>
-    `;
+      this.container.innerHTML = "\n        <table>\n            <tbody>\n                <tr>\n                    <td class=\"vdt-help-contents\">\n                        <table><tbody>".concat(tableRowMarkup, "</tbody></table>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    ");
     }
-
     show() {
       if (!this.state.active) {
         this.container.classList.add('active');
         this.state.active = true;
-
-        mousetrap__default["default"].bind('esc', () => { this.hide(); });
-
-        this.props.onToggle && this.props.onToggle(true);
+        mousetrap__default["default"].bind('esc', () => {
+          this.hide();
+        });
+        if (this.props.onToggle) this.props.onToggle(true);
       }
     }
-
     hide() {
       if (this.state.active) {
         this.container.classList.remove('active');
         this.state.active = false;
-
         mousetrap__default["default"].unbind('esc');
-
-        this.props.onToggle && this.props.onToggle(false);
+        if (this.props.onToggle) this.props.onToggle(false);
       }
     }
-
     toggle() {
       if (this.state.active) {
         this.hide();
@@ -682,9 +355,8 @@
     }
   }
 
-  /* eslint-disable no-param-reassign */
-
-
+  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   const constants$1 = Object.freeze({
     className: 'vdt-menu',
     menuClassName: 'menu',
@@ -697,192 +369,50 @@
       textColorDark: '#333',
       textColorLight: 'rgba(255,255,255)',
       bgColorLight: 'rgba(255,255,255,.2)',
-      bgColorSelected: 'rgba(255,255,255,.1)',
-    },
-  });
-
-
-  const CSS$2 = () => `
-    .${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;
+      bgColorSelected: 'rgba(255,255,255,.1)'
     }
-
-    .${constants$1.menuClassName} tr.has-items td.subtitle{
-      font-size: 12px;
-      text-align: right;
-      color: ${constants$1.defaults.textColorLight};
-    }
-`;
-
+  });
+  const CSS$1 = () => "\n    .".concat(constants$1.menuClassName, "{\n        position: relative;\n        height: 100%;\n        width: 200%;\n        // min-width: 200px;\n        right: 0px;\n        bottom: 0px;\n        background: ").concat(constants$1.defaults.bgColor, ";\n        z-index: 1px;\n        transform: translate3d(100%, 0px, 0px);\n        transition: all 300ms ease-in-out;\n        box-shadow: 0px 0px 30px rgb;\n        -webkit-backdrop-filter: blur(10px);\n        overflow: hidden;\n    }\n\n    .").concat(constants$1.menuClassName, " .level-1{\n        float: left;\n    }\n\n    .").concat(constants$1.menuClassName, " div h3{\n        padding: 16px 24px;\n        font-size: 12px;\n        border-bottom: 1px solid ").concat(constants$1.defaults.bgColorLight, "\n    }\n\n    .").concat(constants$1.menuClassName, " .level-2 h3{\n        cursor: pointer;\n        position: relative;\n    }\n    .").concat(constants$1.menuClassName, " .level-2 h3:before{\n        content: '\u25C2';\n        margin-left: -12px;\n        width: 12px;\n        display: inline-block;\n        position: absolute;\n        margin-top: -1px;\n    }\n\n    .").concat(constants$1.menuClassName, " .level-1,\n    .").concat(constants$1.menuClassName, " .level-2{\n        transform: translate3d(0px, 0px, 0px);\n        transition: all 300ms ease-in-out;\n        width: 50%;\n        height: 100%;\n        float: left;\n    }\n\n    .").concat(constants$1.menuClassName, ".sub-level .level-1,\n    .").concat(constants$1.menuClassName, ".sub-level .level-2{\n        transform: translate3d(-100%, 0px, 0px);\n    }\n\n    .").concat(constants$1.menuClassName, " table{\n        border-collapse: collapse;\n        width: 100%;\n    }\n\n    .").concat(constants$1.menuClassName, ".open{\n        transform: translate3d(0px, 0px, 0px);\n    }\n\n    .").concat(constants$1.menuClassName, " tr{\n        cursor: pointer;\n        height: 40px;\n    }\n\n    .").concat(constants$1.menuClassName, " tr.selected{\n        background: ").concat(constants$1.defaults.bgColorSelected, ";\n    }\n\n\n    .").concat(constants$1.menuClassName, " tr td{\n        color: white;\n        font-size: 15px;\n        vertical-align: middle;\n    }\n\n    \n    .").concat(constants$1.menuClassName, " tr:hover td{\n        color: white;\n        background: ").concat(constants$1.defaults.bgColorLight, ";\n    }\n\n    .").concat(constants$1.menuClassName, " tr td.title{\n        padding-top: 12px;\n        padding-bottom: 12px;\n        font-weight: 300;\n        font-family: Helvetica, Arial, sans-serif; \n    }\n\n    .").concat(constants$1.menuClassName, " tr td.caret{\n        font-size: 12px;\n    }\n\n    .").concat(constants$1.menuClassName, " tr td:first-child{\n        padding-left: 24px;\n    }\n\n    .").concat(constants$1.menuClassName, " tr td:last-child{\n        padding-right: 16px;\n    }\n\n    .").concat(constants$1.menuClassName, " tr.has-items td:last-child{\n        text-align: right;\n    }\n\n    .").concat(constants$1.menuClassName, " tr.has-items td.subtitle{\n      font-size: 12px;\n      text-align: right;\n      color: ").concat(constants$1.defaults.textColorLight, ";\n    }\n");
   class MenuDisplayItem {
     constructor(props) {
       this.props = props;
-
-      const classNames = [
-        constants$1.menuItemClassName,
-        this.props.items && 'has-items',
-        this.props.selected && 'selected',
-      ];
+      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);
+      if (this.props.target) this.props.target.appendChild(this.container);
+      this.container.onclick = event => {
+        if (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>
-      `;
+      if (this.props.items) {
+        this.container.innerHTML = "\n          <td class=\"title\"></td>\n          <td class=\"subtitle\"></td>\n          <td class=\"caret\">\u25B7</td>\n      ";
       } else {
-        this.container.innerHTML = `
-          <td class="title"></td>
-      `;
+        this.container.innerHTML = "\n          <td class=\"title\"></td>\n      ";
       }
-
       const titleNode = this.container.getElementsByClassName('title')[0];
-      const subtitleNode = (this.props.items) ? this.container.getElementsByClassName('subtitle')[0] : false;
-
+      const subtitleNode = this.props.items ? this.container.getElementsByClassName('subtitle')[0] : false;
       titleNode.textContent = this.props.title;
-      subtitleNode && (subtitleNode.textContent = this.props.subtitle);
+      if (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.container.className = "".concat(constants$1.className);
       this.state = {
         opened: false,
         selectedItem: 0,
         items: [],
-        subItems: [],
+        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%';
@@ -890,69 +420,53 @@
         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.shadow = this.container.attachShadow({
+          mode: 'open'
+        });
+        if (this.props.target) this.props.target.appendChild(this.container);
         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$2();
+        this.style.innerHTML = CSS$1();
         this.shadow.appendChild(this.style);
       }
     }
-
-    draw() { // first draw
+    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(); };
+      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
+      this.props.items.forEach(menuItem => {
         const activeTitle = menuItem.items[menuItem.getActiveIndex(menuItem.items)].title || '';
-        const displayItem = new MenuDisplayItem({
+        const displayItem = new MenuDisplayItem(_objectSpread$1({
           target: this.mainLevel,
           subtitle: activeTitle,
           onClick: () => {
             this.handleSupItemSelected(menuItem);
-          },
-          ...menuItem,
-        });
-
+          }
+        }, menuItem));
         this.state.items.push(displayItem);
       });
     }
-
     open() {
       this.render();
-
       this.menuContainer.classList.add('open');
-      this.props.onOpen && this.props.onOpen();
+      if (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) {
@@ -964,25 +478,19 @@
           }
         }.bind(this);
       }
-
       this.handleClicksWhenMenuOpenedTimeout = setTimeout(() => {
         document.addEventListener('click', this.handleClicksWhenMenuOpened);
-        mousetrap__default["default"].bind('esc', this.close.bind(this)); // esc closes menu aswell
+        mousetrap__default["default"].bind('esc', this.close.bind(this));
       }, constants$1.animationLength);
     }
-
     close() {
       this.menuContainer.classList.remove('open');
       this.state.opened = false;
-
-      this.handleClicksWhenMenuOpenedTimeout && clearTimeout(this.handleClicksWhenMenuOpenedTimeout);
+      if (this.handleClicksWhenMenuOpenedTimeout) clearTimeout(this.handleClicksWhenMenuOpenedTimeout);
       document.removeEventListener('click', this.handleClicksWhenMenuOpened);
-
-      this.props.onClose && this.props.onClose();
-
+      if (this.props.onClose) this.props.onClose();
       mousetrap__default["default"].unbind('esc');
     }
-
     toggle() {
       if (this.state.opened) {
         this.close();
@@ -990,56 +498,48 @@
         this.open();
       }
     }
-
-    up() { // go to level 1
+    up() {
       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) {
+    renderSubItems(items) {
+      let activeIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       this.secondaryLevel.innerHTML = '';
-
       const subItemRefs = [];
       items.forEach((menuItem, index) => {
-        const displayItem = new MenuDisplayItem({
-          target: this.secondaryLevel,
-          ...menuItem,
-          onClick: (event) => {
+        const displayItem = new MenuDisplayItem(_objectSpread$1(_objectSpread$1({
+          target: this.secondaryLevel
+        }, menuItem), {}, {
+          onClick: event => {
             this.handleSubItemSelected(event, menuItem);
           },
-          selected: (index === activeIndex), // mark selected
-        });
-
+          selected: index === activeIndex
+        }));
         subItemRefs.push(displayItem);
       });
-
       this.state.subItems = subItemRefs;
     }
-
     handleSubItemSelected(event, item) {
       this.close();
-      item.onClick && item.onClick(event, item);
+      if (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 {
+          items
+        } = this.props;
         const activeIndex = items[index].getActiveIndex(items[index].items);
         const activeTitle = items[index].items[activeIndex].title;
         menuDisplayItem.props.subtitle = activeTitle;
@@ -1048,224 +548,86 @@
     }
   }
 
-  /* eslint-disable max-len */
+  class OSD {
+    constructor(props) {
+      this.props = props;
+      this.state = {
+        enabled: true
+      };
+      this.container = document.createElement('div');
+      this.container.className = 'vdt-player-osd';
+      this.container.innerHTML = "\n            <table>\n                <tbody>\n                    <td>\n                        <div class=\"osd-feedback-icon\"></div>\n                    </td>\n                </tbody>\n            </table>\n        ";
+      this.iconEl = this.container.getElementsByClassName('osd-feedback-icon')[0];
+      if (this.props.target) this.props.target.appendChild(this.container);
+    }
+    feedback(feedbackType) {
+      let details = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      if (!this.state.enabled) {
+        return;
+      }
+      let className;
+      switch (feedbackType) {
+        case osd.pause:
+          className = 'pause';
+          break;
+        case osd.play:
+          className = 'play';
+          break;
+        case osd.volchange:
+          const currentVolumeLevel = details.volume;
+          let perceivedVolumeLevel;
+          if (currentVolumeLevel === 0) {
+            perceivedVolumeLevel = 'null';
+          } else if (currentVolumeLevel > 0.65) {
+            perceivedVolumeLevel = 'high';
+          } else if (currentVolumeLevel < 0.35) {
+            perceivedVolumeLevel = 'low';
+          } else {
+            perceivedVolumeLevel = 'mid';
+          }
+          className = "volchange ".concat(perceivedVolumeLevel);
+          break;
+        case osd.jumpForward:
+          className = 'forward-jump';
+          break;
+        case osd.jumpBackward:
+          className = 'backward-jump';
+          break;
+      }
+      if (this.osdTimeout) {
+        this.container.classList.remove('active');
+        clearTimeout(this.osdTimeout);
+      }
+      this.container.classList.add('active');
+      this.osdTimeout = setTimeout(() => {
+        this.container.classList.remove('active');
+      }, 200);
+      this.iconEl.className = "osd-feedback-icon ".concat(className);
+    }
+    disable() {
+      this.state.enabled = false;
+    }
+    enable() {
+      this.state.enabled = true;
+    }
+  }
 
   const constants = Object.freeze({
     className: 'vdt-seekbar',
     defaults: {
       bgColor: '#fafafa',
       fillColor: '#f00',
-      regionColor: '#f6e58d', // yellow
+      regionColor: '#f6e58d',
       markerWidth: 16,
       regionAccentColor: '#00a8ff',
-      transitionTime: 300, // ms
+      transitionTime: 300
     },
     markerTypes: {
       in: 'in',
-      out: 'out',
-    },
+      out: 'out'
+    }
   });
-
-  const CSS$1 = (bgColor, fillColor) => `
-  .${constants.className}{
-    user-select: none;
-    background: ${colors.light};
-    height: 6px;
-    width: 100%;
-    position: relative;
-    cursor: pointer;
-    z-index: 5;
-  }
-
-  .${classNames.onDark}.${constants.className}{
-    background: ${colors.gray};
-  }
-
-  .fill, .load-indicator{
-    height: 100%;
-    display: inline-block;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    background: ${fillColor};
-    transition: width ${constants.defaults.transitionTime}ms linear;
-    z-index: 2;
-  }
-
-  .load-indicator{
-    background: #e1e1e1;
-    z-index: 1;
-    opacity: .2;
-    transition: none;
-  }
-
-  .${classNames.onDark}.${constants.className} .load-indicator{
-    background: white;
-  }
-
-  .${constants.className}.dragging .fill{
-    transition: none;
-  }
-
-
-  .marker, .region{
-    position: absolute;
-    top: 0px;
-    height: 100%;
-    background: cyan;
-    width: 1px;
-    display: inline-block;
-    z-index: 4;
-  }
-
-  .marker{
-    transition: opacity ${constants.defaults.transitionTime}ms linear;
-  }
-
-  .marker{ display: none; }
-  .marker.active{ display: initial; }
-
-  .marker .handle{
-    position: absolute;
-    bottom: 10px; right: 0px;
-    width: ${constants.defaults.markerWidth}px;
-    height: 28px;
-    background: #999;
-    border-radius: 3px;
-    cursor: col-resize;
-    z-index: 3;
-    box-sizing: border-box;
-  }
-
-  .marker.regional .handle{
-    background: ${constants.defaults.regionAccentColor};
-    box-shadow: -2px 1px 1px rgba(0,0,0,.1);
-  }
-
-  .marker.regional.in .handle{
-    box-shadow: 2px 1px 1px rgba(0,0,0,.1);
-  }
-
-  .marker.in .handle{
-    border-bottom-left-radius: 40px;
-  }
-
-  .marker.out .handle{
-    left: 1px;
-    right: initial;
-    border-bottom-right-radius: 20px;
-  }
-
-  .handle:active{
-    background: ${constants.defaults.regionColor};
-  }
-
-  .region{
-    position: absolute;
-    width: auto;
-    background: ${constants.defaults.regionColor};
-    opacity: .7;
-  }
-
-  .region.nav{
-    background: transparent;
-    opacity: 1;
-    border-left: 1px solid cyan;
-  }
-
-  .region.nav .bubble,
-  .region.nav:after{
-    content: " ";
-    height: 16px;
-    bottom: 10px;
-    width: 16px;
-    border-radius: 16px;
-    background: ${constants.defaults.regionAccentColor};
-    position: absolute;
-    margin-left: -8px;
-    transition: transform 200ms ease-out;
-    transform: translate3d(0px, 0px, 0px);
-    transform-origin: bottom center;
-  }
-
-  .region.nav .popout{
-    width: 160px;
-    z-index: 4;
-    background: rgba(28, 28, 28, .7);
-    color: white;
-    font-size: 14px;
-    min-height: 100px;
-    bottom: 16px;
-    left: -80px;
-    position: absolute;
-    border-radius: 8px;
-    -webkit-backdrop-filter: blur(10px);
-    font-family: Arial, Helvetica, sans-serif;
-    overflow: hidden;
-    opacity: 0;
-    visibility: hidden;
-  }
-
-  .region.nav.right-aligned .popout{
-    right: 0px;
-    left: initial;
-  }
-
-  .region.nav.left-aligned .popout{
-    left: -32px;
-  }  
-
-  .region.nav .popout .title{
-    padding: 4px 14px;
-    text-align: center;
-    color: black;
-    background: white;
-  }
-
-  .region.nav .popout .annotation{
-    padding: 8px 12px;
-    font-weight: light;
-    color: rgba(255,255,255,.9);
-  }
-
-  .region.nav:after{
-    width: 1px;
-    left: 8px;
-    height: 10px;
-    bottom: 0px;
-    background: #00a8ff;
-  }
-
-  .region.nav:hover{
-    background: rgba(28, 28, 28, .5);
-  }
-
-  .region.nav.has-popout:hover .bubble{
-    background: rgba(28, 28, 28, .8);
-    opacity: 1;
-    z-index: 3;
-  }
-
-  .region.nav:hover:after,
-  .region.nav:hover:before{
-    background: rgba(28, 28, 28, .8);
-  }
-
-  .region.nav:hover .popout{
-    opacity: 1;
-    visibility: visible;
-  }
-
-  .${constants.className}.dragging .bubble{
-    transform: scale3d(.75,.75,.75);
-  }
-
-  .${constants.className}.hide-markers .marker{
-    opacity: 0;
-  }
-
-`;
-
+  const CSS = (bgColor, fillColor) => "\n  .".concat(constants.className, "{\n    user-select: none;\n    background: ").concat(colors.light, ";\n    height: 6px;\n    width: 100%;\n    position: relative;\n    cursor: pointer;\n    z-index: 5;\n  }\n\n  .").concat(classNames.onDark, ".").concat(constants.className, "{\n    background: ").concat(colors.gray, ";\n  }\n\n  .fill, .load-indicator{\n    height: 100%;\n    display: inline-block;\n    position: absolute;\n    left: 0px;\n    top: 0px;\n    background: ").concat(fillColor, ";\n    transition: width ").concat(constants.defaults.transitionTime, "ms linear;\n    z-index: 2;\n  }\n\n  .load-indicator{\n    background: #e1e1e1;\n    z-index: 1;\n    opacity: .2;\n    transition: none;\n  }\n\n  .").concat(classNames.onDark, ".").concat(constants.className, " .load-indicator{\n    background: white;\n  }\n\n  .").concat(constants.className, ".dragging .fill{\n    transition: none;\n  }\n\n\n  .marker, .region{\n    position: absolute;\n    top: 0px;\n    height: 100%;\n    background: cyan;\n    width: 1px;\n    display: inline-block;\n    z-index: 4;\n  }\n\n  .marker{\n    transition: opacity ").concat(constants.defaults.transitionTime, "ms linear;\n  }\n\n  .marker{ display: none; }\n  .marker.active{ display: initial; }\n\n  .marker .handle{\n    position: absolute;\n    bottom: 10px; right: 0px;\n    width: ").concat(constants.defaults.markerWidth, "px;\n    height: 28px;\n    background: #999;\n    border-radius: 3px;\n    cursor: col-resize;\n    z-index: 3;\n    box-sizing: border-box;\n  }\n\n  .marker.regional .handle{\n    background: ").concat(constants.defaults.regionAccentColor, ";\n    box-shadow: -2px 1px 1px rgba(0,0,0,.1);\n  }\n\n  .marker.regional.in .handle{\n    box-shadow: 2px 1px 1px rgba(0,0,0,.1);\n  }\n\n  .marker.in .handle{\n    border-bottom-left-radius: 40px;\n  }\n\n  .marker.out .handle{\n    left: 1px;\n    right: initial;\n    border-bottom-right-radius: 20px;\n  }\n\n  .handle:active{\n    background: ").concat(constants.defaults.regionColor, ";\n  }\n\n  .region{\n    position: absolute;\n    width: auto;\n    background: ").concat(constants.defaults.regionColor, ";\n    opacity: .7;\n  }\n\n  .region.nav{\n    background: transparent;\n    opacity: 1;\n    border-left: 1px solid cyan;\n  }\n\n  .region.nav .bubble,\n  .region.nav:after{\n    content: \" \";\n    height: 16px;\n    bottom: 10px;\n    width: 16px;\n    border-radius: 16px;\n    background: ").concat(constants.defaults.regionAccentColor, ";\n    position: absolute;\n    margin-left: -8px;\n    transition: transform 200ms ease-out;\n    transform: translate3d(0px, 0px, 0px);\n    transform-origin: bottom center;\n  }\n\n  .region.nav .popout{\n    width: 160px;\n    z-index: 4;\n    background: rgba(28, 28, 28, .7);\n    color: white;\n    font-size: 14px;\n    min-height: 100px;\n    bottom: 16px;\n    left: -80px;\n    position: absolute;\n    border-radius: 8px;\n    -webkit-backdrop-filter: blur(10px);\n    font-family: Arial, Helvetica, sans-serif;\n    overflow: hidden;\n    opacity: 0;\n    visibility: hidden;\n  }\n\n  .region.nav.right-aligned .popout{\n    right: 0px;\n    left: initial;\n  }\n\n  .region.nav.left-aligned .popout{\n    left: -32px;\n  }  \n\n  .region.nav .popout .title{\n    padding: 4px 14px;\n    text-align: center;\n    color: black;\n    background: white;\n  }\n\n  .region.nav .popout .annotation{\n    padding: 8px 12px;\n    font-weight: light;\n    color: rgba(255,255,255,.9);\n  }\n\n  .region.nav:after{\n    width: 1px;\n    left: 8px;\n    height: 10px;\n    bottom: 0px;\n    background: #00a8ff;\n  }\n\n  .region.nav:hover{\n    background: rgba(28, 28, 28, .5);\n  }\n\n  .region.nav.has-popout:hover .bubble{\n    background: rgba(28, 28, 28, .8);\n    opacity: 1;\n    z-index: 3;\n  }\n\n  .region.nav:hover:after,\n  .region.nav:hover:before{\n    background: rgba(28, 28, 28, .8);\n  }\n\n  .region.nav:hover .popout{\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .").concat(constants.className, ".dragging .bubble{\n    transform: scale3d(.75,.75,.75);\n  }\n\n  .").concat(constants.className, ".hide-markers .marker{\n    opacity: 0;\n  }\n\n");
   class Region {
     constructor(props) {
       const regionDefaultProps = {
@@ -1273,373 +635,273 @@
         out: null,
         title: '',
         annotation: '',
-        el: null, // can store a
+        el: null
       };
-
-      Object.assign(this, regionDefaultProps, props); // apply props
+      Object.assign(this, regionDefaultProps, props);
     }
   }
-
   class SeekBar {
     constructor(props) {
       this.props = props;
-      reactiveSetters.apply(this); // ability to handle new props via setters
-
+      reactiveSetters.apply(this);
       this.container = document.createElement('div');
-      this.container.className = `${constants.className}-wrapper`;
-
+      this.container.className = "".concat(constants.className, "-wrapper");
       this.state = {
-        in: null, // in seconds from 0
+        in: null,
         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,
+        markersEnabled: this.props.markersEnabled === undefined ? true : this.props.markersEnabled,
+        regions: [],
+        dragging: false
       };
-
       this.markers = {};
-
       if (this.props.target) {
-        this.shadow = this.container.attachShadow({ mode: 'open' });
+        this.shadow = this.container.attachShadow({
+          mode: 'open'
+        });
         this.props.target.appendChild(this.container);
-        // attach styles
         this.style = document.createElement('style');
         this.style.type = 'text/css';
-
-        // colors from props
-        const bgColor = (this.props.bgColor) ? this.props.bgColor : constants.defaults.bgColor;
-        const fillColor = (this.props.fillColor) ? this.props.fillColor : constants.defaults.fillColor;
-
-        this.style.innerHTML = CSS$1(sanitize(bgColor), sanitize(fillColor));
+        const bgColor = this.props.bgColor ? this.props.bgColor : constants.defaults.bgColor;
+        const fillColor = this.props.fillColor ? this.props.fillColor : constants.defaults.fillColor;
+        this.style.innerHTML = CSS(sanitize(bgColor), sanitize(fillColor));
         this.shadow.appendChild(this.style);
       }
-
       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;
+      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
+    bindEvents() {
       if (this.props.player) {
-        const { player } = this.props;
+        const {
+          player
+        } = this.props;
         player.videojs.on('timeupdate', () => {
           const progressFraction = player.videojs.currentTime() / player.videojs.duration();
-          this.fill.style.width = `${100 * progressFraction}%`;
+          this.fill.style.width = "".concat(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();
-            },
-          },
-        ];
+        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;
+        const {
+          player
+        } = this.props;
         mousetrap__default["default"].bind('i', () => {
           if (this.markersEnabled) this.in = player.videojs.currentTime();
         });
-
         mousetrap__default["default"].bind('o', () => {
           if (this.markersEnabled) this.out = player.videojs.currentTime();
         });
-
         mousetrap__default["default"].bind('shift+i', () => {
           if (this.markersEnabled) this.navigateToIn();
         });
-
         mousetrap__default["default"].bind('shift+o', () => {
           if (this.markersEnabled) this.navigateToOut();
         });
       }
-
-      // bind
-      this.bindings.forEach((binding) => {
-        mousetrap__default["default"].bind(binding.key, (e) => {
+      this.bindings.forEach(binding => {
+        mousetrap__default["default"].bind(binding.key, e => {
           binding.method(e);
         });
       });
     }
-
     unbindHotKeys() {
-      this.bindings && this.bindings.forEach((binding) => {
+      this.bindings && this.bindings.forEach(binding => {
         mousetrap__default["default"].unbind(binding.key);
       });
     }
-
     handleSeek(event) {
-      // check if target is a region
       if (this.props.player) {
-        const { player } = this.props;
+        const {
+          player
+        } = this.props;
         if (this.state.regions) {
           let clickedOnRegion = false;
-          let preventSeek = false; // prevent seek from happening
-          this.state.regions.forEach((region) => {
+          let preventSeek = false;
+          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));
+                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ā
+      const barOffset = this.bar.getBoundingClientRect().left;
+      const barWidth = this.bar.getBoundingClientRect().width;
+      const duration = this.props.player.videojs.duration();
       let left;
-
-      const drag = (e) => {
+      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
+        if (left >= 0 && left < barWidth && pxDragged > 1) {
           this.dragging = true;
           const fractionFromStart = parseFloat(left) / barWidth;
           const seconds = fractionFromStart * duration;
           this.props.player.videojs.currentTime(seconds);
         }
-
         e.preventDefault();
       };
-
-      const stopDrag = (e) => {
+      const stopDrag = e => {
         this.dragging = false;
-
-        // remove listeners
         document.removeEventListener('mousemove', drag, false);
         document.removeEventListener('mouseup', stopDrag, false);
-
         const fractionFromStart = parseFloat(left) / barWidth;
         const seconds = fractionFromStart * duration;
         this.props.player.videojs.currentTime(seconds);
-
         e.stopPropagation();
       };
-
-      // add listeners
       document.addEventListener('mousemove', drag, false);
       document.addEventListener('mouseup', stopDrag, false);
     }
-
     draw() {
       this.bar = document.createElement('div');
       this.bar.className = constants.className;
-      this.bar.onclick = (e) => {
+      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.bar.addEventListener('mousedown', e => {
+        e.preventDefault();
+        if (!this.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
+    drawMarkers() {
       if (this.markersEnabled) {
         const markerIn = this.markers[constants.markerTypes.in] = document.createElement('div');
         const markerOut = this.markers[constants.markerTypes.out] = document.createElement('div');
-        markerIn.className = `marker ${constants.markerTypes.in}`;
-        markerOut.className = `marker ${constants.markerTypes.out}`;
-
+        markerIn.className = "marker ".concat(constants.markerTypes.in);
+        markerOut.className = "marker ".concat(constants.markerTypes.out);
         const handleIn = document.createElement('div');
         const handleOut = document.createElement('div');
         handleIn.className = handleOut.className = 'handle';
-
-        handleIn.addEventListener('mousedown', (e) => {
-          e.preventDefault(); // prevents selection cursor
-          e.stopPropagation(); // prevent triggering seek bar drag
-
+        handleIn.addEventListener('mousedown', e => {
+          e.preventDefault();
+          e.stopPropagation();
           this.handleMarkerDrag(markerIn, constants.markerTypes.in, e);
         }, false);
-
-        handleOut.addEventListener('mousedown', (e) => {
-          e.preventDefault(); // prevents selection cursor
-          e.stopPropagation(); // prevent triggering seek bar drag
-
+        handleOut.addEventListener('mousedown', e => {
+          e.preventDefault();
+          e.stopPropagation();
           this.handleMarkerDrag(markerOut, constants.markerTypes.out, e);
         }, false);
-
         markerIn.appendChild(handleIn);
         markerOut.appendChild(handleOut);
-
         this.bar.appendChild(markerIn);
         this.bar.appendChild(markerOut);
       }
     }
-
     updateMarkers(marker) {
-      this.markers[marker.type].style.left = `${marker.value * 100}%`;
+      this.markers[marker.type].style.left = "".concat(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);
+        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
+    drawInAndOutRegion() {
       if (this.state.in !== null && this.state.out !== null) {
         this.region.style.left = this.markers[constants.markerTypes.in].style.left;
-        this.region.style.right = `${100 - parseFloat(this.markers[constants.markerTypes.out].style.left.replace('%', ''))}%`;
+        this.region.style.right = "".concat(100 - parseFloat(this.markers[constants.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ā
+    handleMarkerDrag(markerNode, type, mouseDownEvent) {
+      const barOffset = this.bar.getBoundingClientRect().left;
+      const barWidth = this.bar.getBoundingClientRect().width;
+      const duration = this.props.player.videojs.duration();
       let dragHappened = false;
-
-      const drag = (e) => {
+      const drag = e => {
         const pxDragged = Math.abs(mouseDownEvent.clientX - e.clientX);
-        const markerOffset = (type === constants.markerTypes.in) ? (constants.defaults.markerWidth / 2) : -(constants.defaults.markerWidth / 2);
+        const markerOffset = type === constants.markerTypes.in ? constants.defaults.markerWidth / 2 : -(constants.defaults.markerWidth / 2);
         const left = e.clientX - barOffset + markerOffset;
-
-        if (left >= 0 && left < barWidth && pxDragged > 1) { // prevent out-of-bounds
+        if (left >= 0 && left < barWidth && pxDragged > 1) {
           dragHappened = this.dragging = true;
-          markerNode.style.left = `${left}px`;
+          markerNode.style.left = "".concat(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) => {
+      const stopDrag = e => {
         this.dragging = false;
-
-        // remove listeners
         document.removeEventListener('mousemove', drag, false);
         document.removeEventListener('mouseup', stopDrag, false);
-
         const fractionFromStart = parseFloat(markerNode.getBoundingClientRect().left - barOffset) / barWidth;
         const seconds = fractionFromStart * duration;
         this[type] = seconds;
         this.props.player.videojs.currentTime(seconds);
-
-        /*
-        if drag did not take place,
-        user just clicked the marker -
-        jump to the time of marker in player
-        */
         if (!dragHappened) {
           if (type === constants.markerTypes.in) {
             this.navigateToIn();
@@ -1647,121 +909,99 @@
             this.navigateToOut();
           }
         }
-
-        this.props.onDragFinish && this.props.onDragFinish({ type, seconds });
+        this.props.onDragFinish && this.props.onDragFinish({
+          type,
+          seconds
+        });
         e.stopPropagation();
       };
-
-      // add listeners
       document.addEventListener('mousemove', drag, false);
       document.addEventListener('mouseup', stopDrag, false);
     }
-
-    /*
-    hide dead markers (for state parity) or ones that
-    make no sense (like out point before in point)
-    */
     cleanupMarkers() {
       let removedMarker = false;
       if (this.state.in === null) {
         this.markers[constants.markerTypes.in].classList.remove('active');
         removedMarker = true;
       }
-
       if (this.state.out === null) {
         this.markers[constants.markerTypes.out].classList.remove('active');
         removedMarker = true;
       }
-
-      if (removedMarker) { // if a marker was removed, region no longer is valid
+      if (removedMarker) {
         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;
+      const {
+        player
+      } = this.props;
       player.seekTo(this.in);
     }
-
     navigateToOut() {
-      const { player } = this.props;
+      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;
+        const {
+          player
+        } = this.props;
         this.updateMarkers({
           type: constants.markerTypes.in,
-          value: val / player.videojs.duration(),
+          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;
+        const {
+          player
+        } = this.props;
         this.updateMarkers({
           type: constants.markerTypes.out,
-          value: val / player.videojs.duration(),
+          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) {
@@ -1773,28 +1013,23 @@
         }
       }
     }
-
-    set regions(regionArray) { // different than i / o markers
-      if (this.state.regions.length < 1) { // first time add
-        regionArray && regionArray.forEach((region) => {
+    set regions(regionArray) {
+      if (this.state.regions.length < 1) {
+        regionArray && regionArray.forEach(region => {
           this.addRegion(region);
         });
-      } else { // state redraw
+      } else {
         this.state.regions.forEach((region, index) => {
           this.removeRegion(index);
         });
-
         this.state.regions = [];
-        this.regions = regionArray; // run again
+        this.regions = regionArray;
       }
     }
-
     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');
@@ -1803,109 +1038,269 @@
         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
+      } else {
         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];
-      }
+    removeRegion(param) {
+      if (typeof param === typeof Region) ; else {
+        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();
+      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 ".concat(alignmentClassName);
+        const popout = document.createElement('div');
+        popout.className = 'popout';
+        popout.innerHTML = "\n        <div class=\"title\">\n          ".concat(sanitize(region.title), "\n        </div>\n        <div class=\"annotation\">\n          ").concat(truncate(sanitize(region.annotation), 72), "\n        </div>\n      ");
+        regionEl.appendChild(popout);
+      }
+      regionEl.style.left = "".concat(leftPercentage, "%");
+      regionEl.style.right = "".concat(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 = "".concat(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;
+
+  const timeCodeNodeNames = ['hours', 'minutes', 'seconds', 'frame'];
+  class TimeCodeDisplay {
+    constructor(props) {
+      this.props = props;
+      this.state = {
+        selectedNode: null
+      };
+      const classNames = ['vdt-timecode', 'vjs-time-control',
+      !this.props.onInput ? 'duration' : ''
+      ];
+      this.container = document.createElement('div');
+      this.container.className = classNames.join(' ');
+      this.nodeNames = [].concat(timeCodeNodeNames);
+      this.nodes = {};
+      this.nodeNames.forEach((nodeName, index) => {
+        const node = document.createElement('input');
+        node.className = nodeName;
+        node.tabIndex = -1;
+        if (this.props.onInput) {
+          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;
+        }
+        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) {
+          this.props.target.parentNode.insertBefore(this.container, this.props.target.nextSibling);
+        } else {
+          this.props.target.appendChild(this.container);
+        }
+        this.reset();
+      } else {
+        console.error("Unable to instantiate a new ".concat(this.constructor.name, " without target DOM node"));
+      }
+    }
+    update(valuesObj) {
+      const startCount = this.nodeNames.length - 1;
+      let i;
+      for (i = startCount; i > -1; i--) {
+        const key = this.nodeNames[i];
+        if (typeof valuesObj[key] !== 'undefined' && valuesObj[key] !== parseInt(this.nodes[key].value, 10) && key !== this.state.selectedNode) {
+          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;
+      this.nodes[nodeName].select();
+      this.props.onInputFocus && this.props.onInputFocus(nodeName);
+    }
+    handleInputBlur(e, nodeName) {
+      this.state.selectedNode = null;
+      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".concat(strValue) : strValue;
+    }
+    handleTimeCodeInput(e, nodeName) {
+      const nodeIndex = this.nodeNames.indexOf(nodeName);
+      switch (e.code) {
+        case 'Enter':
+          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();
+          break;
+        case 'Tab':
+          e.preventDefault();
+          if (!e.shiftKey) {
+            if (nodeIndex + 1 <= this.nodeNames.length - 1) {
+              this.nodes[this.nodeNames[nodeIndex + 1]].focus();
+            } else {
+              this.nodes[this.nodeNames[0]].focus();
+            }
+          } else if (nodeIndex - 1 >= 0) {
+            this.nodes[this.nodeNames[nodeIndex - 1]].focus();
+          } else {
+            this.nodes[this.nodeNames[this.nodeNames.length - 1]].focus();
+          }
+          break;
+      }
+    }
+    handleTimeCodeInputOnKeyUp(e, nodeName) {
+      if (this.nodes[nodeName].value.length === 2 && !isNaN(e.key)) {
+        const nodeIndex = this.nodeNames.indexOf(nodeName);
+        if (nodeIndex + 1 <= this.nodeNames.length - 1) {
+          this.nodes[this.nodeNames[nodeIndex + 1]].focus();
+        }
+      }
+    }
+    checkAndNormalizeAllInputs() {
+      this.nodeNames.forEach(nodeName => {
+        if (this.nodes[nodeName].value.length < 1) {
+          this.nodes[nodeName].value = '00';
+        }
+        this.nodes[nodeName].value = this.toDigitPairStr(this.sanitize(this.nodes[nodeName].value));
+      });
+    }
+    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);
     }
-
-    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);
+    get hours() {
+      return parseInt(this.nodes.hours.value, 10);
     }
-
-    set onDark(bool) {
-      if (bool) {
-        this.bar.classList.add(classNames.onDark);
-      } else {
-        this.bar.classList.remove(classNames.onDark);
-      }
+    getFormatted(key) {
+      return this.toDigitPairStr(this[key].toString());
     }
-
-    get onDark() {
-      return this.container.classList.contains(classNames.onDark);
+    get smpte() {
+      return {
+        hours: this.hours,
+        minutes: this.minutes,
+        seconds: this.seconds,
+        frame: this.frame
+      };
     }
-
-    set percentLoaded(val) {
-      this.loadIndicator.style.width = `${val}%`;
+    set smpte(o) {
+      this.update(o);
     }
-
-    destroy() {
-      this.unbindHotKeys();
+    get smpteString() {
+      return "".concat(this.getFormatted('hours'), ":").concat(this.getFormatted('minutes'), ":").concat(this.getFormatted('seconds'), ":").concat(this.getFormatted('frame'));
     }
-
-    toggleMarkers() {
-      if (this.bar.classList.contains('hide-markers')) {
-        this.showMarkers();
+    set external(bool) {
+      if (bool) {
+        this.container.classList.add('external');
       } else {
-        this.hideMarkers();
+        this.container.classList.remove('external');
       }
     }
-
-    hideMarkers() {
-      this.bar.classList.add('hide-markers');
-    }
-
-    showMarkers() {
-      this.bar.classList.remove('hide-markers');
+    get external() {
+      return this.container.classList.contains('external');
     }
   }
 
-  SeekBar.Region = Region;
-
-  // TODO - move this to @vidispine/vdt-js when finalized and use as dependency
-
   class VideoTime {
     constructor(props) {
       if (props.frameRate === undefined) {
@@ -1915,200 +1310,141 @@
         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
+      return frame;
     }
-
     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
+      return frame / this.props.frameRate;
     }
-
     smpteToCurrentTimeFromStart(values) {
-      return (
-        values.hours * 3600
-        + values.minutes * 60
-        + values.seconds
-        + values.frame / this.props.frameRate
-      );
+      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,
+        frame
       };
     }
   }
 
-  /* eslint-disable no-param-reassign */
-
+  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   const correctMimeTypes = {
-    'audio/x-aac': 'audio/aac',
+    'audio/x-aac': 'audio/aac'
   };
-  const sanitizeMimeType = (mimeType) => correctMimeTypes[mimeType] || mimeType;
-
+  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$2.classNames.poster : '',
-        (this.props.subtitles && this.props.subtitles.length > 0) ? constants$2.classNames.subtitles : '',
-        'init', // make player height 0 while no metadata for video size available with css
+      this.props = props;
+      reactiveSetters.apply(this);
+      const classNames = [
+      'video-js', 'vjs-big-play-centered', this.props.posterUrl ? constants$2.classNames.poster : '', this.props.subtitles && this.props.subtitles.length > 0 ? constants$2.classNames.subtitles : '', 'init'
       ];
-
       this.externalTimecodes = {
-        // either one of these can hold an array of TimeCodeDisplay instances
         duration: [],
-        playback: [],
+        playback: []
       };
-
       this.timeConverter = new VideoTime({
-        frameRate: this.props.frameRate || constants$2.defaults.frameRate,
+        frameRate: this.props.frameRate || constants$2.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
+      this.videoEl.controls = true;
       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));
+          this.props.sources.sort(a => a.type.indexOf('mp4') > 0 ? 1 : -1);
         }
-
-        // construct <source> els
-        this.props.sources.forEach((source) => {
+        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
+      }
+      this.videoEl.onloadedmetadata = () => {
         if (this.durationTimeCode) {
           this.setDurationTimeCode();
         }
-
-        this.videojs.el_.classList.remove('init');
+        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');
-        }
+        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) => {
+        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
+            subtitleTag.src = sub.src;
           } else {
-            subtitleTag.src = window.URL.createObjectURL(sub.src); // file url from blob
+            subtitleTag.src = window.URL.createObjectURL(sub.src);
           }
-
           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);
+      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 || {};
-
-      this.videojs = new videojs__default["default"]('vdt-video', {
+      this.videojs = new videojs__default["default"]('vdt-video', _objectSpread({
         responsive: true,
         fluid: true,
         controls: controlsEnabled,
         alwaysCaptureHotkeys: false,
         controlBar: {
           RemainingTimeDisplay: false,
-          timeDivider: showDefaultTimeDisplay, // relates to built-in time display
+          timeDivider: showDefaultTimeDisplay,
           durationDisplay: showDefaultTimeDisplay,
-          currentTimeDisplay: showDefaultTimeDisplay,
+          currentTimeDisplay: showDefaultTimeDisplay
         },
-        inactivityTimeout: (this.audioOnly) ? constants$2.defaults.audioInactivityTimeout : constants$2.defaults.inactivityTimeout,
+        inactivityTimeout: this.audioOnly ? constants$2.defaults.audioInactivityTimeout : constants$2.defaults.inactivityTimeout,
         preload: 'auto',
         captionsButton: false,
         subsCapsButton: false,
         subtitlesButton: false,
         textTrackSettings: false,
         html5: {
-          nativeTextTracks: false,
+          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
+            'subtitles off': 'off'
+          }
+        }
+      }, options));
+      if (this.props.posterUrl) this.videojs.poster(this.props.posterUrl);
       this.handleNewProps(this.props);
-
-      // lifecycle
       this.videojs.ready(() => {
         this.bindHotkeys();
         this.bindEvents();
-        this.props.onReady && this.props.onReady(this.videojs);
-
+        if (this.props.onReady) this.props.onReady(this.videojs);
         this.restoreSettings();
         this.setupTimeCode();
         this.doEsothericWork();
@@ -2116,241 +1452,197 @@
         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 = {
+        const props = _objectSpread({
           target,
           player: this,
-          onDark: this.props.onDark,
-          ...this.props.seekBar,
-        };
-
+          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();
+            var _this$seekBar$hideMar, _this$seekBar;
+            if (this.seekBar) (_this$seekBar$hideMar = (_this$seekBar = this.seekBar).hideMarkers) === null || _this$seekBar$hideMar === void 0 ? void 0 : _this$seekBar$hideMar.call(_this$seekBar);
           } else {
-            this.seekBar && this.seekBar.showMarkers();
+            var _this$seekBar2, _this$seekBar2$showMa;
+            (_this$seekBar2 = this.seekBar) === null || _this$seekBar2 === void 0 ? void 0 : (_this$seekBar2$showMa = _this$seekBar2.showMarkers) === null || _this$seekBar2$showMa === void 0 ? void 0 : _this$seekBar2$showMa.call(_this$seekBar2);
           }
         });
-
         this.videojs.on('useractive', () => {
-          this.seekBar && this.seekBar.showMarkers();
+          if (this.seekBar) this.seekBar.showMarkers();
         });
       }
     }
-
-    setupTimeCode(externalTimecodeInstance = null) {
+    setupTimeCode() {
+      let externalTimecodeInstance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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$2.defaults.inactivityTimeout;
           this.videojs.cache_.inactivityTimeout = constants$2.defaults.inactivityTimeout;
-        },
+        }
       };
-
-      if (externalTimecodeInstance !== null) { // setting up an external playback timecode
+      if (externalTimecodeInstance !== null) {
         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
+      } else if (this.props.timecode === true) {
         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.timeCode = new TimeCodeDisplay(Object.assign(props, {
+            target,
+            appendAfter: true
+          }));
           this.durationTimeCode = new TimeCodeDisplay({
             target: this.timeCode.container,
-            appendAfter: true,
+            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)
+    updateTimeCode() {
       const currentSecond = this.videojs.currentTime();
       const props = this.timeConverter.secondsFromStartToSMPTE(currentSecond);
-
-      this.timeCode && this.timeCode.update(props);
-
+      if (this.timeCode) this.timeCode.update(props);
       if (this.externalTimecodes.playback.length > 0) {
-        this.externalTimecodes.playback.forEach((timecode) => {
+        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
-
+    updateTimeCodeFrame() {
+      const frame = this.timeConverter.currentFrame(this.videojs.currentTime());
+      if (this.timeCode) this.timeCode.update({
+        frame
+      });
       if (this.externalTimecodes.playback.length > 0) {
-        this.externalTimecodes.playback.forEach((timecode) => {
-          timecode.update({ frame });
+        this.externalTimecodes.playback.forEach(timecode => {
+          timecode.update({
+            frame
+          });
         });
       }
-
-      // recursive invocation if still playing
       if (!this.videojs.paused()) {
-        this.rafID = requestAnimationFrame(() => { this.updateTimeCodeFrame(); });
+        this.rafID = requestAnimationFrame(() => {
+          this.updateTimeCodeFrame();
+        });
       }
     }
-
-    setDurationTimeCode() { // happens once
+    setDurationTimeCode() {
       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();
-          },
-        },
-      ];
-
+    bindHotkeys() {
+      this.bindings = [{
+        key: ['space', 'k'],
+        method: e => {
+          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();
+          this.volumeUp();
+        }
+      }, {
+        key: 'down',
+        method: e => {
+          if (e.preventDefault) e.preventDefault();
+          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__default["default"].bind(binding.key, (e) => {
+      this.bindings.forEach(binding => {
+        mousetrap__default["default"].bind(binding.key, e => {
           binding.method(e);
           this.onHotkeyPressed(binding.key);
         });
       });
     }
-
     unbindHotKeys() {
-      this.bindings && this.bindings.forEach((binding) => {
+      if (this.bindings) this.bindings.forEach(binding => {
         mousetrap__default["default"].unbind(binding.key);
       });
     }
-
     bindEvents() {
-      this.videojs.on('volumechange', () => { // persist volume changes
+      this.videojs.on('volumechange', () => {
         this.persistSetting(constants$2.settings.volume, this.volume);
       });
-
-      this.videojs.textTracks().on('change', () => { // determine subtitles state
+      this.videojs.textTracks().on('change', () => {
         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
+        const selected = tracks.filter(track => track.mode === 'showing');
+        const areAnyTxtTracksActive = selected.length > 0;
+        if (areAnyTxtTracksActive) {
           this.videojs.el_.classList.add(constants$2.classNames.subtitlesActive);
           this.persistSetting(constants$2.settings.subs, true);
           this.persistSetting(constants$2.settings.subLang, selected[0].language);
@@ -2360,27 +1652,31 @@
         }
       });
     }
-
     volumeUp() {
       this.videojs.controlBar.volumePanel.volumeControl.volumeBar.stepForward();
-      this.osd.feedback(constants$2.osd.volchange, { volume: this.volume });
+      this.osd.feedback(constants$2.osd.volchange, {
+        volume: this.volume
+      });
     }
-
     volumeDown() {
       this.videojs.controlBar.volumePanel.volumeControl.volumeBar.stepBack();
-      this.osd.feedback(constants$2.osd.volchange, { volume: this.volume });
+      this.osd.feedback(constants$2.osd.volchange, {
+        volume: this.volume
+      });
     }
-
     toggleMute() {
       if (!this.videojs.muted()) {
         this.videojs.muted(true);
-        this.osd.feedback(constants$2.osd.volchange, { volume: this.volume });
+        this.osd.feedback(constants$2.osd.volchange, {
+          volume: this.volume
+        });
       } else {
         this.videojs.muted(false);
-        this.osd.feedback(constants$2.osd.volchange, { volume: this.volume });
+        this.osd.feedback(constants$2.osd.volchange, {
+          volume: this.volume
+        });
       }
     }
-
     toggleFullscreen() {
       if (this.videojs.isFullscreen()) {
         this.videojs.exitFullscreen();
@@ -2388,68 +1684,51 @@
         this.videojs.requestFullscreen();
       }
     }
-
-    seek(secs) { // relative to current playback time
+    seek(secs) {
       let time = this.videojs.currentTime() + secs;
-
       if (time < 0) {
         time = 0;
       }
-
       this.videojs.currentTime(time);
     }
-
     seekTo(sec) {
-      !this.videojs.hasStarted() && this.videojs.hasStarted(true);
+      if (!this.videojs.hasStarted()) this.videojs.hasStarted(true);
       this.videojs.currentTime(sec);
     }
-
     jumpForward() {
       this.seek(constants$2.defaults.jumpSeconds);
       this.osd.feedback(constants$2.osd.jumpForward);
     }
-
     jumpBackward() {
       this.seek(-constants$2.defaults.jumpSeconds);
       this.osd.feedback(constants$2.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$2.defaults.frameRate;
       let frame = seconds * frameRate;
       frame = Math.round(frame);
-      return frame; // we're on this frame, could be for example 23.45
+      return frame;
     }
-
-    doEsothericWork() { // non critical parts, that are nice to have
-      if (this.props.color) { // change the seekbar color from props
+    doEsothericWork() {
+      if (this.props.color) {
         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,
+        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);
@@ -2457,28 +1736,23 @@
           },
           componentName: 'CinemaButton',
           className: 'vdt-cinema-button',
-          title: 'Cinema-mode',
+          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',
+          title: 'Screenshot'
         });
       }
-
-      // add a help overlay explaining keyboard controls
       this.help = new HelpOverlay({
         target: this.videoEl.parentElement,
-        onToggle: (willShow) => {
+        onToggle: willShow => {
           if (this.menu && this.menu.opened) {
             this.menu.close();
           }
@@ -2487,41 +1761,30 @@
           } else {
             this.showControls();
           }
-        },
+        }
       });
     }
-
-    restoreSettings() { // restore settings, like volume level or language track
-      // get values from storage
+    restoreSettings() {
       const volume = localStorage.getItem(constants$2.settings.volume);
       const subsEnabled = localStorage.getItem(constants$2.settings.subs);
       const subLang = localStorage.getItem(constants$2.settings.subLang);
-
-      // values vs default behaviours in a neatly readable map
       this.settings = {
-        // avoid .99999999 and other float pecularities in js
-        [constants$2.settings.volume]: (volume !== null) ? Math.round(volume * 100) / 100 : 1,
-        [constants$2.settings.subLang]: (subLang !== null) ? subLang : 'en',
-        [constants$2.settings.subs]: (subsEnabled !== null) ? JSON.parse(subsEnabled) : false,
+        [constants$2.settings.volume]: volume !== null ? Math.round(volume * 100) / 100 : 1,
+        [constants$2.settings.subLang]: subLang !== null ? subLang : 'en',
+        [constants$2.settings.subs]: subsEnabled !== null ? JSON.parse(subsEnabled) : false
       };
-
-      // apply values (settings)
-      this.volume = this.settings[constants$2.settings.volume]; // volume
-
-      if (this.settings[constants$2.settings.subs]) { // subtitles
+      this.volume = this.settings[constants$2.settings.volume];
+      if (this.settings[constants$2.settings.subs]) {
         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++) {
+      for (let i = 0; i < subs.length; i += 1) {
         const sub = subs[i];
         if (sub.language === this.settings[constants$2.settings.subLang]) {
           sub.mode = 'showing';
@@ -2530,57 +1793,42 @@
         }
       }
     }
-
     disableSubs() {
       const subs = this.videojs.textTracks();
-
-      for (let i = 0; i < subs.length; i++) {
+      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
+      if (this.videojs.textTracks().length > 0) {
+        if (this.videojs.textTracks().tracks_.filter(track => track.mode === 'showing').length > 0) {
           this.disableSubs();
         } else {
           this.enableSubs();
         }
       }
     }
-
-    /*
-    A quick example
-    options = {
-      onClick: ()=>{},
-      componentName: 'ScreenshotButton',
-      className: 'vdt-screenshot-button'
-    }
-    */
     addButtonToControlBar(options) {
       const Button = videojs__default["default"].getComponent('Button');
       const CustomButton = videojs__default["default"].extend(Button, {
-        /* eslint-disable func-names, object-shorthand */
-        constructor: function () {
+        constructor: function constructor() {
           Button.apply(this, arguments);
-          options.className && this.el_.classList.add(options.className);
-          if (options.title) { this.el_.title = options.title; }
+          if (options.className) this.el_.classList.add(options.className);
+          if (options.title) {
+            this.el_.title = options.title;
+          }
         },
         handleClick: () => {
-          options.onClick && options.onClick();
-        },
+          if (options.onClick) options.onClick();
+        }
       });
-
       videojs__default["default"].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);
@@ -2589,58 +1837,42 @@
         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 (this.props.sources.length > 1) {
+        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)));
+            const matchingSource = this.props.sources.find(source => source.src === this.videojs.src());
+            return sourcesMenuItems.indexOf(sourcesMenuItems.find(menuItem => menuItem.title === matchingSource.label));
           },
-          items: sourcesMenuItems,
+          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++) {
+              for (let i = 0; i < subs.length; i += 1) {
                 const sub = subs[i];
                 if (i === index) {
                   sub.mode = 'showing';
@@ -2648,72 +1880,59 @@
                   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
-                }
+        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;
               }
-
-              return 0; // if none are showing, then probably "off"
-            },
-            items: subtitleMenuItems,
+            }
+            return 0;
           },
-        );
+          items: subtitleMenuItems
+        });
       }
-
       if (menuItems.length > 0) {
         const target = this.videojs.el_;
-
         this.menu = new Menu({
           target,
           items: menuItems,
           onOpen: () => {
-            !this.controlsBelowPlayer && this.hideControls();
+            if (!this.controlsBelowPlayer) this.hideControls();
           },
           onClose: () => {
-            !this.controlsBelowPlayer && this.videojs.controls(true);
-          },
+            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',
+          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();
@@ -2721,77 +1940,73 @@
         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__default["default"].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();
+      if (!this.videojs.paused()) this.videojs.pause();
     }
-
     togglePlayback() {
       if (this.videojs.paused()) {
         this.play();
-        this.videojs.hasStarted_ && this.osd.feedback(constants$2.osd.play);
+        if (this.videojs.hasStarted_) this.osd.feedback(constants$2.osd.play);
       } else {
         this.pause();
         this.osd.feedback(constants$2.osd.pause);
       }
     }
-
-    destroy() { // clean up
+    updateSmpte(valuesObj) {
+      const startCount = this.nodeNames.length - 1;
+      let i;
+      for (i = startCount; i > -1; i -= 1) {
+        const key = this.nodeNames[i];
+        if (typeof valuesObj[key] !== 'undefined' && valuesObj[key] !== parseInt(this.nodes[key].value, 10) && key !== this.state.selectedNode) {
+          const str = valuesObj[key].toString();
+          this.nodes[key].value = this.toDigitPairStr(str);
+        }
+      }
+    }
+    destroy() {
       this.videojs.paused(true);
-      this.rafID && cancelAnimationFrame(this.rafID);
+      if (this.rafID) cancelAnimationFrame(this.rafID);
       this.videojs.dispose();
       this.unbindHotKeys();
-      this.seekBar && this.seekBar.destroy();
+      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) {
@@ -2803,36 +2018,29 @@
         }
       }
     }
-
     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 smpte(o) {
+      this.updateSmpte(o);
     }
-
-    set src({ src, type = 'video/mp4', label = null }) {
+    set src(_ref) {
+      let {
+        src,
+        type = 'video/mp4',
+        label = null
+      } = _ref;
       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 source = this.props.sources.find(aSource => aSource.src === src);
       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);
@@ -2841,13 +2049,9 @@
           }
         });
       };
-
-      if (source && typeof souce === 'Array' && source.length > 0) {
-        // TODO - if(source.length > 1) - try one by one until a successful load happens
+      if (source && Array.isArray(source) && source.length > 0) {
         this.videojs.addClass('vjs-waiting');
-        this.videojs.src({
-          ...source[0],
-        });
+        this.videojs.src(_objectSpread({}, source[0]));
         onReady();
       } else {
         this.videojs.addClass('vjs-waiting');
@@ -2855,26 +2059,20 @@
         onReady();
       }
     }
-
     get src() {
       return this.videojs.src();
     }
-
     addSrc(src, type, label) {
       const newSource = {
         src,
         type,
-        label,
+        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();
@@ -2882,357 +2080,30 @@
         this.hideControls();
       }
     }
-
     get percentLoaded() {
       const r = this.videojs.buffered();
-
-      const percentLoaded = (r.end(0) / this.videojs.duration()) * 100;
+      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__default["default"].prototype.constructor.getComponent('Button');
-  // eslint-disable-next-line func-names
   button.prototype.handleKeyDown = function (e) {
     if (e.keyCode === 32) {
       e.preventDefault();
     }
   };
   videojs__default["default"].prototype.constructor.registerComponent('Button', button);
-
-  // video.js opens menu on hover by default, this prevents that
   const subsButton = videojs__default["default"].prototype.constructor.getComponent('SubsCapsButton');
   class CustomSubsCapsButton extends subsButton {
-    constructor(player, options = {}) {
+    constructor(player) {
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       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__default["default"].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 = `
-  .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));
-        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;
-
   exports.ExternalControls = ExternalControls;
   exports.Player = Player;
   exports.SeekBar = SeekBar;