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

package/dist/index.es.js

@@ -0,0 +1,2099 @@
+import mousetrap from 'mousetrap';
+import videojs from 'video.js/dist/alt/video.core.min';
+
+var name = "@vidispine/vdt-videojs";
+var version = "22.1.0-pre.1";
+var license = "UNLICENSED";
+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 = {
+	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.1",
+	"@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 eslintConfig = {
+	"extends": [
+		"@vidispine/eslint-config-base",
+		"@vidispine/eslint-config-storybook"
+	]
+};
+var prettier = "@vidispine/prettier-config";
+var pkgInfo = {
+	name: name,
+	version: version,
+	license: license,
+	"private": false,
+	main: main,
+	module: module,
+	browser: browser,
+	author: author,
+	scripts: scripts,
+	dependencies: dependencies,
+	devDependencies: devDependencies,
+	browserslist: browserslist,
+	eslintConfig: eslintConfig,
+	prettier: prettier
+};
+
+const defaults = Object.freeze({
+  frameRate: 30000 / 1001,
+  jumpSeconds: 10,
+  inactivityTimeout: 1200,
+  audioInactivityTimeout: 0
+});
+const osd = Object.freeze({
+  play: 0,
+  pause: 1,
+  volchange: 2,
+  jumpForward: 3,
+  jumpBackward: 4
+});
+const settings = Object.freeze({
+  volume: 'volume-setting',
+  subLang: 'subtitles-language',
+  subs: 'subtitles-enabled'
+});
+const classNames = Object.freeze({
+  poster: 'has-poster',
+  subtitles: 'has-subtitles',
+  subtitlesActive: 'subtitles-active',
+  onDark: 'on-dark',
+  loading: 'loading'
+});
+const colors = Object.freeze({
+  gray: '#787878',
+  light: 'rgba(255,255,255,.75)'
+});
+const packageInfo = Object.freeze({
+  name: pkgInfo.name.split('/')[1],
+  vendor: pkgInfo.name.split('/')[0]
+});
+const constants$2 = Object.freeze({
+  defaults,
+  settings,
+  classNames,
+  colors,
+  osd,
+  packageInfo
+});
+
+function truncate(input, len) {
+  if (input.length > len) return "".concat(input.substring(0, len), "...");
+  return input;
+}
+function reactiveSetters() {
+  function handleNewProps(props) {
+    if (typeof props === 'object') {
+      const keys = Object.getOwnPropertyNames(props);
+      const proto = Object.getPrototypeOf(this);
+      keys.forEach(key => {
+        const descriptor = Object.getOwnPropertyDescriptor(proto, key);
+        if (descriptor && descriptor.set) {
+          this[key] = props[key];
+        }
+      });
+    }
+  }
+  this.handleNewProps = handleNewProps;
+}
+function sanitize(str) {
+  const temp = document.createElement('div');
+  temp.textContent = str;
+  return temp.innerHTML;
+}
+
+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 = {
+      playing: false,
+      onDark: false,
+      loading: false
+    };
+    this.shadowRoot = document.createElement('div');
+    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'
+      });
+      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();
+  }
+  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);
+      }
+    });
+  }
+  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) {
+      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;
+      }
+      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;
+      }
+    }
+  }
+  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;
+
+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;
+}
+
+class HelpOverlay {
+  constructor(props) {
+    this.props = props;
+    this.state = {
+      active: this.props.active || false
+    };
+    this.container = document.createElement('div');
+    this.container.className = 'vdt-help-overlay';
+    this.container.innerHTML = '';
+    this.container.onclick = () => {
+      this.hide();
+    };
+    if (this.props.target) this.props.target.appendChild(this.container);
+    this.draw();
+  }
+  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)];
+    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        ");
+    }
+    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.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.unbind('esc');
+      if (this.props.onToggle) this.props.onToggle(false);
+    }
+  }
+  toggle() {
+    if (this.state.active) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+}
+
+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',
+  subLvlClassName: 'sub-level',
+  menuItemClassName: 'menu-item',
+  animationLength: 300,
+  defaults: {
+    bgColor: 'rgba(0,0,0,.8)',
+    textColor: '#999',
+    textColorDark: '#333',
+    textColorLight: 'rgba(255,255,255)',
+    bgColorLight: 'rgba(255,255,255,.2)',
+    bgColorSelected: 'rgba(255,255,255,.1)'
+  }
+});
+const CSS$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'];
+    this.container = document.createElement('tr');
+    this.container.className = classNames.join(' ');
+    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) {
+      this.container.innerHTML = "\n          <td class=\"title\"></td>\n          <td class=\"subtitle\"></td>\n          <td class=\"caret\">\u25B7</td>\n      ";
+    } else {
+      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;
+    titleNode.textContent = this.props.title;
+    if (subtitleNode) subtitleNode.textContent = this.props.subtitle;
+  }
+}
+class Menu {
+  constructor(props) {
+    this.props = props;
+    this.container = document.createElement('div');
+    this.container.className = "".concat(constants$1.className);
+    this.state = {
+      opened: false,
+      selectedItem: 0,
+      items: [],
+      subItems: []
+    };
+    this.mount();
+    this.draw();
+  }
+  mount() {
+    if (this.props.target) {
+      this.container.style.position = 'absolute';
+      this.container.style.bottom = this.container.style.right = '0px';
+      this.container.style.height = '100%';
+      this.container.style.overflow = 'hidden';
+      this.container.style.width = '30%';
+      this.container.style.minWidth = '250px';
+      this.container.style.maxWidth = '320px';
+      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);
+      this.style = document.createElement('style');
+      this.style.type = 'text/css';
+      this.style.innerHTML = CSS$1();
+      this.shadow.appendChild(this.style);
+    }
+  }
+  draw() {
+    const mainDiv = document.createElement('div');
+    mainDiv.className = 'level-1';
+    this.mainLevel = document.createElement('table');
+    mainDiv.innerHTML = '<h3>Settings</h3>';
+    mainDiv.appendChild(this.mainLevel);
+    const subDiv = document.createElement('div');
+    subDiv.className = 'level-2';
+    this.subLvlTitle = document.createElement('h3');
+    this.subLvlTitle.onclick = () => {
+      this.up();
+    };
+    subDiv.appendChild(this.subLvlTitle);
+    this.secondaryLevel = document.createElement('table');
+    subDiv.appendChild(this.secondaryLevel);
+    this.menuContainer.appendChild(mainDiv);
+    this.menuContainer.appendChild(subDiv);
+    this.props.items.forEach(menuItem => {
+      const activeTitle = menuItem.items[menuItem.getActiveIndex(menuItem.items)].title || '';
+      const displayItem = new MenuDisplayItem(_objectSpread$1({
+        target: this.mainLevel,
+        subtitle: activeTitle,
+        onClick: () => {
+          this.handleSupItemSelected(menuItem);
+        }
+      }, menuItem));
+      this.state.items.push(displayItem);
+    });
+  }
+  open() {
+    this.render();
+    this.menuContainer.classList.add('open');
+    if (this.props.onOpen) this.props.onOpen();
+    this.state.opened = true;
+    if (!this.handleClicksWhenMenuOpened) {
+      this.handleClicksWhenMenuOpened = function (event) {
+        if (this.state.opened) {
+          event.stopPropagation();
+          const isClickInside = this.container.contains(event.target);
+          if (!isClickInside) {
+            this.close();
+          }
+        }
+      }.bind(this);
+    }
+    this.handleClicksWhenMenuOpenedTimeout = setTimeout(() => {
+      document.addEventListener('click', this.handleClicksWhenMenuOpened);
+      mousetrap.bind('esc', this.close.bind(this));
+    }, constants$1.animationLength);
+  }
+  close() {
+    this.menuContainer.classList.remove('open');
+    this.state.opened = false;
+    if (this.handleClicksWhenMenuOpenedTimeout) clearTimeout(this.handleClicksWhenMenuOpenedTimeout);
+    document.removeEventListener('click', this.handleClicksWhenMenuOpened);
+    if (this.props.onClose) this.props.onClose();
+    mousetrap.unbind('esc');
+  }
+  toggle() {
+    if (this.state.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  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) {
+    let activeIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    this.secondaryLevel.innerHTML = '';
+    const subItemRefs = [];
+    items.forEach((menuItem, index) => {
+      const displayItem = new MenuDisplayItem(_objectSpread$1(_objectSpread$1({
+        target: this.secondaryLevel
+      }, menuItem), {}, {
+        onClick: event => {
+          this.handleSubItemSelected(event, menuItem);
+        },
+        selected: index === activeIndex
+      }));
+      subItemRefs.push(displayItem);
+    });
+    this.state.subItems = subItemRefs;
+  }
+  handleSubItemSelected(event, item) {
+    this.close();
+    if (item.onClick) item.onClick(event, item);
+    this.up();
+  }
+  get opened() {
+    return this.state.opened;
+  }
+  set opened(bool) {
+    this.state.opened = bool;
+  }
+  render() {
+    this.state.items.forEach((menuDisplayItem, index) => {
+      const {
+        items
+      } = this.props;
+      const activeIndex = items[index].getActiveIndex(items[index].items);
+      const activeTitle = items[index].items[activeIndex].title;
+      menuDisplayItem.props.subtitle = activeTitle;
+      menuDisplayItem.render();
+    });
+  }
+}
+
+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',
+    markerWidth: 16,
+    regionAccentColor: '#00a8ff',
+    transitionTime: 300
+  },
+  markerTypes: {
+    in: 'in',
+    out: 'out'
+  }
+});
+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 = {
+      in: null,
+      out: null,
+      title: '',
+      annotation: '',
+      el: null
+    };
+    Object.assign(this, regionDefaultProps, props);
+  }
+}
+class SeekBar {
+  constructor(props) {
+    this.props = props;
+    reactiveSetters.apply(this);
+    this.container = document.createElement('div');
+    this.container.className = "".concat(constants.className, "-wrapper");
+    this.state = {
+      in: null,
+      out: null,
+      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.props.target.appendChild(this.container);
+      this.style = document.createElement('style');
+      this.style.type = 'text/css';
+      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();
+    const {
+      player
+    } = this.props;
+    if (player) {
+      player.videojs.on('loadedmetadata', () => {
+        this.handleNewProps(this.props);
+      });
+    }
+  }
+  bindEvents() {
+    if (this.props.player) {
+      const {
+        player
+      } = this.props;
+      player.videojs.on('timeupdate', () => {
+        const progressFraction = player.videojs.currentTime() / player.videojs.duration();
+        this.fill.style.width = "".concat(100 * progressFraction, "%");
+      });
+      player.videojs.on('progress', () => {
+        this.percentLoaded = player.percentLoaded;
+      });
+    }
+  }
+  bindHotkeys() {
+    this.bindings = [];
+    if (this.props.player) {
+      const {
+        player
+      } = this.props;
+      this.bindings = [{
+        key: ['i'],
+        method: () => {
+          if (this.markersEnabled) this.in = player.videojs.currentTime();
+        }
+      }, {
+        key: ['o'],
+        method: () => {
+          if (this.markersEnabled) this.out = player.videojs.currentTime();
+        }
+      }, {
+        key: ['shift+i'],
+        method: () => {
+          if (this.markersEnabled) this.navigateToIn();
+        }
+      }, {
+        key: ['shift+o'],
+        method: () => {
+          if (this.markersEnabled) this.navigateToOut();
+        }
+      }];
+    }
+    if (this.props.player) {
+      const {
+        player
+      } = this.props;
+      mousetrap.bind('i', () => {
+        if (this.markersEnabled) this.in = player.videojs.currentTime();
+      });
+      mousetrap.bind('o', () => {
+        if (this.markersEnabled) this.out = player.videojs.currentTime();
+      });
+      mousetrap.bind('shift+i', () => {
+        if (this.markersEnabled) this.navigateToIn();
+      });
+      mousetrap.bind('shift+o', () => {
+        if (this.markersEnabled) this.navigateToOut();
+      });
+    }
+    this.bindings.forEach(binding => {
+      mousetrap.bind(binding.key, e => {
+        binding.method(e);
+      });
+    });
+  }
+  unbindHotKeys() {
+    this.bindings && this.bindings.forEach(binding => {
+      mousetrap.unbind(binding.key);
+    });
+  }
+  handleSeek(event) {
+    if (this.props.player) {
+      const {
+        player
+      } = this.props;
+      if (this.state.regions) {
+        let clickedOnRegion = false;
+        let preventSeek = false;
+        this.state.regions.forEach(region => {
+          if (region.el.contains(event.target)) {
+            if (this.props.onRegionClick) {
+              preventSeek = this.props.onRegionClick(region);
+              if (!preventSeek) {
+                player.seekTo(region.in);
+              }
+            } else {
+              player.seekTo(region.in);
+            }
+            clickedOnRegion = true;
+          }
+        });
+        if (clickedOnRegion) return;
+      }
+      const seekFractionX = (event.clientX - this.bar.getBoundingClientRect().left) / this.bar.offsetWidth;
+      const timeToSeek = seekFractionX * player.videojs.duration();
+      player.seekTo(timeToSeek);
+    }
+  }
+  handleSeekDrag(mouseDownEvent) {
+    const barOffset = this.bar.getBoundingClientRect().left;
+    const barWidth = this.bar.getBoundingClientRect().width;
+    const duration = this.props.player.videojs.duration();
+    let left;
+    const drag = e => {
+      left = e.clientX - barOffset;
+      const pxDragged = Math.abs(mouseDownEvent.clientX - e.clientX);
+      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 => {
+      this.dragging = false;
+      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();
+    };
+    document.addEventListener('mousemove', drag, false);
+    document.addEventListener('mouseup', stopDrag, false);
+  }
+  draw() {
+    this.bar = document.createElement('div');
+    this.bar.className = constants.className;
+    this.bar.onclick = e => {
+      if (!e.target.classList.contains('marker') && !e.target.classList.contains('handle')) {
+        this.handleSeek(e);
+      }
+    };
+    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() {
+    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 ".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();
+        e.stopPropagation();
+        this.handleMarkerDrag(markerIn, constants.markerTypes.in, e);
+      }, false);
+      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 = "".concat(marker.value * 100, "%");
+    this.markers[marker.type].classList.add('active');
+    if (this.state.regions) {
+      const matchingRegions = [];
+      const isRegional = matchingRegions.length > 0;
+      if (isRegional) {
+        this.markers[marker.type].classList.add('regional');
+      } else {
+        this.markers[marker.type].classList.remove('regional');
+      }
+    }
+    this.drawInAndOutRegion();
+  }
+  drawInAndOutRegion() {
+    if (this.state.in !== null && this.state.out !== null) {
+      this.region.style.left = this.markers[constants.markerTypes.in].style.left;
+      this.region.style.right = "".concat(100 - parseFloat(this.markers[constants.markerTypes.out].style.left.replace('%', '')), "%");
+    }
+  }
+  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 pxDragged = Math.abs(mouseDownEvent.clientX - e.clientX);
+      const markerOffset = type === constants.markerTypes.in ? constants.defaults.markerWidth / 2 : -(constants.defaults.markerWidth / 2);
+      const left = e.clientX - barOffset + markerOffset;
+      if (left >= 0 && left < barWidth && pxDragged > 1) {
+        dragHappened = this.dragging = true;
+        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 => {
+      this.dragging = false;
+      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 (!dragHappened) {
+        if (type === constants.markerTypes.in) {
+          this.navigateToIn();
+        } else {
+          this.navigateToOut();
+        }
+      }
+      this.props.onDragFinish && this.props.onDragFinish({
+        type,
+        seconds
+      });
+      e.stopPropagation();
+    };
+    document.addEventListener('mousemove', drag, false);
+    document.addEventListener('mouseup', stopDrag, false);
+  }
+  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) {
+      this.region.style.left = 'initial';
+      this.region.style.right = 'initial';
+    }
+  }
+  clearMarkers() {
+    this.in = null;
+    this.out = null;
+  }
+  setInFromCurrent() {
+    this.in = this.props.player.videojs.currentTime();
+  }
+  setOutFromCurrent() {
+    this.out = this.props.player.videojs.currentTime();
+  }
+  navigateToIn() {
+    const {
+      player
+    } = this.props;
+    player.seekTo(this.in);
+  }
+  navigateToOut() {
+    const {
+      player
+    } = this.props;
+    player.seekTo(this.out);
+  }
+  set in(val) {
+    if (!this.state.markersEnabled) return;
+    this.state.in = val;
+    if (val !== null && val !== undefined) {
+      const {
+        player
+      } = this.props;
+      this.updateMarkers({
+        type: constants.markerTypes.in,
+        value: val / player.videojs.duration()
+      });
+      if (this.state.out !== null && val > this.state.out) {
+        this.out = null;
+      }
+      this.props.onIn && this.props.onIn(this.state.in);
+    } else {
+      this.cleanupMarkers();
+    }
+  }
+  get in() {
+    return this.state.in;
+  }
+  set out(val) {
+    if (!this.state.markersEnabled) return;
+    this.state.out = val;
+    if (val !== null && val !== undefined) {
+      const {
+        player
+      } = this.props;
+      this.updateMarkers({
+        type: constants.markerTypes.out,
+        value: val / player.videojs.duration()
+      });
+      if (this.state.in != null && val < this.state.in) {
+        this.in = null;
+      }
+      this.props.onOut && this.props.onOut(this.state.out);
+    } else {
+      this.cleanupMarkers();
+    }
+  }
+  get out() {
+    return this.state.out;
+  }
+  get markersEnabled() {
+    return this.state.markersEnabled;
+  }
+  set markersEnabled(bool) {
+    if (typeof bool === 'boolean') {
+      if (!bool) {
+        this.clearMarkers();
+        this.state.markersEnabled = false;
+      } else {
+        !this.markersEnabled && this.drawMarkers();
+        this.state.markersEnabled = true;
+      }
+    }
+  }
+  set regions(regionArray) {
+    if (this.state.regions.length < 1) {
+      regionArray && regionArray.forEach(region => {
+        this.addRegion(region);
+      });
+    } else {
+      this.state.regions.forEach((region, index) => {
+        this.removeRegion(index);
+      });
+      this.state.regions = [];
+      this.regions = regionArray;
+    }
+  }
+  get regions() {
+    return this.state.regions;
+  }
+  set dragging(bool) {
+    if (bool && !this.state.dragging) {
+      this.state.dragging = true;
+      this.bar.classList.add('dragging');
+    } else if (!bool && this.state.dragging) {
+      this.state.dragging = false;
+      this.bar.classList.remove('dragging');
+    }
+  }
+  get dragging() {
+    return this.state.dragging;
+  }
+  addRegion(regionObj) {
+    if (regionObj.constructor.name === Region.name) {
+      this.state.regions.push(regionObj);
+      this.drawRegion(regionObj);
+    } else {
+      this.addRegion(new Region(regionObj));
+    }
+  }
+  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);
+  }
+  get hours() {
+    return parseInt(this.nodes.hours.value, 10);
+  }
+  getFormatted(key) {
+    return this.toDigitPairStr(this[key].toString());
+  }
+  get smpte() {
+    return {
+      hours: this.hours,
+      minutes: this.minutes,
+      seconds: this.seconds,
+      frame: this.frame
+    };
+  }
+  set smpte(o) {
+    this.update(o);
+  }
+  get smpteString() {
+    return "".concat(this.getFormatted('hours'), ":").concat(this.getFormatted('minutes'), ":").concat(this.getFormatted('seconds'), ":").concat(this.getFormatted('frame'));
+  }
+  set external(bool) {
+    if (bool) {
+      this.container.classList.add('external');
+    } else {
+      this.container.classList.remove('external');
+    }
+  }
+  get external() {
+    return this.container.classList.contains('external');
+  }
+}
+
+class VideoTime {
+  constructor(props) {
+    if (props.frameRate === undefined) {
+      delete this;
+      throw new Error('No "frameRate" option provided, refer to docs.');
+    } else {
+      this.props = props;
+    }
+  }
+  secondsToFramesFromStart(seconds) {
+    let frame = seconds * this.props.frameRate;
+    frame = Math.round(frame);
+    return frame;
+  }
+  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;
+  }
+  smpteToCurrentTimeFromStart(values) {
+    return values.hours * 3600 + values.minutes * 60 + values.seconds + values.frame / this.props.frameRate;
+  }
+  secondsFromStartToSMPTE(secondsFromStart) {
+    let secondsFS = secondsFromStart;
+    const hours = Math.floor(secondsFS / 3600);
+    const minutesWithoutHours = secondsFS / 60 - 60 * hours;
+    secondsFS %= 3600;
+    const minutes = Math.floor(minutesWithoutHours);
+    const seconds = Math.floor(secondsFS % 60);
+    const frame = this.secondsToFrame(secondsFS);
+    return {
+      hours,
+      minutes,
+      seconds,
+      frame
+    };
+  }
+}
+
+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'
+};
+const sanitizeMimeType = mimeType => correctMimeTypes[mimeType] || mimeType;
+class Player {
+  constructor(props) {
+    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 = {
+      duration: [],
+      playback: []
+    };
+    this.timeConverter = new VideoTime({
+      frameRate: this.props.frameRate || constants$2.defaults.frameRate
+    });
+    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;
+    if (this.props.sources) {
+      if (this.props.sources.length > 1) {
+        this.props.sources.sort(a => a.type.indexOf('mp4') > 0 ? 1 : -1);
+      }
+      this.props.sources.forEach(source => {
+        const aSource = document.createElement('source');
+        aSource.src = source.src;
+        aSource.type = sanitizeMimeType(source.type);
+        this.videoEl.appendChild(aSource);
+      });
+    }
+    this.videoEl.onloadedmetadata = () => {
+      if (this.durationTimeCode) {
+        this.setDurationTimeCode();
+      }
+      if (this.videojs.el_) this.videojs.el_.classList.remove('init');
+    };
+    setTimeout(() => {
+      if (this.videojs.el_) this.videojs.el_.classList.remove('init');
+    }, 2000);
+    if (this.props.subtitles) {
+      this.props.subtitles.forEach(sub => {
+        const subtitleTag = document.createElement('track');
+        subtitleTag.kind = 'subtitles';
+        subtitleTag.srclang = sub.lang;
+        subtitleTag.label = sub.label;
+        if (typeof sub.src === 'string') {
+          subtitleTag.src = sub.src;
+        } else {
+          subtitleTag.src = window.URL.createObjectURL(sub.src);
+        }
+        this.videoEl.appendChild(subtitleTag);
+      });
+    }
+    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('vdt-video', _objectSpread({
+      responsive: true,
+      fluid: true,
+      controls: controlsEnabled,
+      alwaysCaptureHotkeys: false,
+      controlBar: {
+        RemainingTimeDisplay: false,
+        timeDivider: showDefaultTimeDisplay,
+        durationDisplay: showDefaultTimeDisplay,
+        currentTimeDisplay: showDefaultTimeDisplay
+      },
+      inactivityTimeout: this.audioOnly ? constants$2.defaults.audioInactivityTimeout : constants$2.defaults.inactivityTimeout,
+      preload: 'auto',
+      captionsButton: false,
+      subsCapsButton: false,
+      subtitlesButton: false,
+      textTrackSettings: false,
+      html5: {
+        nativeTextTracks: false
+      },
+      languages: {
+        en: {
+          'captions off': 'off',
+          'subtitles off': 'off'
+        }
+      }
+    }, options));
+    if (this.props.posterUrl) this.videojs.poster(this.props.posterUrl);
+    this.handleNewProps(this.props);
+    this.videojs.ready(() => {
+      this.bindHotkeys();
+      this.bindEvents();
+      if (this.props.onReady) this.props.onReady(this.videojs);
+      this.restoreSettings();
+      this.setupTimeCode();
+      this.doEsothericWork();
+      this.setupMenu();
+      this.setupCustomSeekbar();
+    });
+  }
+  setupCustomSeekbar() {
+    if (this.props.seekBar) {
+      this.videojs.controlBar.progressControl.disable();
+      this.videojs.controlBar.progressControl.hide();
+      const target = this.container.getElementsByClassName('vjs-control-bar')[0];
+      const props = _objectSpread({
+        target,
+        player: this,
+        onDark: this.props.onDark
+      }, this.props.seekBar);
+      this.seekBar = new SeekBar(props);
+      this.videojs.on('userinactive', () => {
+        if (!this.controlsBelowPlayer) {
+          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 {
+          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', () => {
+        if (this.seekBar) this.seekBar.showMarkers();
+      });
+    }
+  }
+  setupTimeCode() {
+    let externalTimecodeInstance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    const props = {
+      onInput: (e, nodeName, values) => {
+        this.seekTo(this.timeConverter.smpteToCurrentTimeFromStart(values));
+      },
+      onInputFocus: () => {
+        this.videojs.options_.inactivityTimeout = 0;
+        this.videojs.cache_.inactivityTimeout = 0;
+        this.videojs.reportUserActivity();
+        this.videojs.pause();
+      },
+      onInputBlur: () => {
+        this.videojs.options().inactivityTimeout = constants$2.defaults.inactivityTimeout;
+        this.videojs.cache_.inactivityTimeout = constants$2.defaults.inactivityTimeout;
+      }
+    };
+    if (externalTimecodeInstance !== null) {
+      externalTimecodeInstance.props = Object.assign(externalTimecodeInstance.props, props);
+      this.externalTimecodes.playback.push(externalTimecodeInstance);
+    } else if (this.props.timecode === true) {
+      if (this.props.controls !== false) {
+        const target = document.getElementsByClassName('vjs-volume-panel')[0];
+        this.timeCode = new TimeCodeDisplay(Object.assign(props, {
+          target,
+          appendAfter: true
+        }));
+        this.durationTimeCode = new TimeCodeDisplay({
+          target: this.timeCode.container,
+          appendAfter: true
+        });
+      }
+    }
+    if (this.timeCode || this.externalTimecodes.playback.length > 0) {
+      this.videojs.on('timeupdate', () => {
+        this.updateTimeCode();
+      });
+      this.videojs.on('play', () => {
+        this.updateTimeCodeFrame();
+      });
+    }
+  }
+  updateTimeCode() {
+    const currentSecond = this.videojs.currentTime();
+    const props = this.timeConverter.secondsFromStartToSMPTE(currentSecond);
+    if (this.timeCode) this.timeCode.update(props);
+    if (this.externalTimecodes.playback.length > 0) {
+      this.externalTimecodes.playback.forEach(timecode => {
+        timecode.update(props);
+      });
+    }
+  }
+  updateTimeCodeFrame() {
+    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
+        });
+      });
+    }
+    if (!this.videojs.paused()) {
+      this.rafID = requestAnimationFrame(() => {
+        this.updateTimeCodeFrame();
+      });
+    }
+  }
+  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() {
+    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();
+        }
+      });
+    }
+    this.bindings.forEach(binding => {
+      mousetrap.bind(binding.key, e => {
+        binding.method(e);
+        this.onHotkeyPressed(binding.key);
+      });
+    });
+  }
+  unbindHotKeys() {
+    if (this.bindings) this.bindings.forEach(binding => {
+      mousetrap.unbind(binding.key);
+    });
+  }
+  bindEvents() {
+    this.videojs.on('volumechange', () => {
+      this.persistSetting(constants$2.settings.volume, this.volume);
+    });
+    this.videojs.textTracks().on('change', () => {
+      const tracks = this.videojs.textTracks().tracks_;
+      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);
+      } else {
+        this.videojs.el_.classList.remove(constants$2.classNames.subtitlesActive);
+        this.persistSetting(constants$2.settings.subs, false);
+      }
+    });
+  }
+  volumeUp() {
+    this.videojs.controlBar.volumePanel.volumeControl.volumeBar.stepForward();
+    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
+    });
+  }
+  toggleMute() {
+    if (!this.videojs.muted()) {
+      this.videojs.muted(true);
+      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
+      });
+    }
+  }
+  toggleFullscreen() {
+    if (this.videojs.isFullscreen()) {
+      this.videojs.exitFullscreen();
+    } else {
+      this.videojs.requestFullscreen();
+    }
+  }
+  seek(secs) {
+    let time = this.videojs.currentTime() + secs;
+    if (time < 0) {
+      time = 0;
+    }
+    this.videojs.currentTime(time);
+  }
+  seekTo(sec) {
+    if (!this.videojs.hasStarted()) this.videojs.hasStarted(true);
+    this.videojs.currentTime(sec);
+  }
+  jumpForward() {
+    this.seek(constants$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;
+  }
+  doEsothericWork() {
+    if (this.props.color) {
+      document.getElementsByClassName('vjs-play-progress')[0].style.backgroundColor = this.props.color;
+    }
+    this.osd = new OSD({
+      target: this.videoEl.parentElement
+    });
+    if (this.props.onCinema) {
+      this.videoEl.parentElement.classList.add('has-cinema-button');
+      this.cinema = false;
+      this.addButtonToControlBar({
+        onClick: () => {
+          this.props.onCinema(!this.cinema);
+          this.cinema = !this.cinema;
+        },
+        componentName: 'CinemaButton',
+        className: 'vdt-cinema-button',
+        title: 'Cinema-mode'
+      });
+    }
+    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'
+      });
+    }
+    this.help = new HelpOverlay({
+      target: this.videoEl.parentElement,
+      onToggle: willShow => {
+        if (this.menu && this.menu.opened) {
+          this.menu.close();
+        }
+        if (willShow && !this.controlsBelowPlayer) {
+          this.hideControls();
+        } else {
+          this.showControls();
+        }
+      }
+    });
+  }
+  restoreSettings() {
+    const volume = localStorage.getItem(constants$2.settings.volume);
+    const subsEnabled = localStorage.getItem(constants$2.settings.subs);
+    const subLang = localStorage.getItem(constants$2.settings.subLang);
+    this.settings = {
+      [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
+    };
+    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 += 1) {
+      const sub = subs[i];
+      if (sub.language === this.settings[constants$2.settings.subLang]) {
+        sub.mode = 'showing';
+      } else {
+        sub.mode = 'hidden';
+      }
+    }
+  }
+  disableSubs() {
+    const subs = this.videojs.textTracks();
+    for (let i = 0; i < subs.length; i += 1) {
+      const sub = subs[i];
+      sub.mode = 'hidden';
+    }
+  }
+  toggleSubs() {
+    if (this.videojs.textTracks().length > 0) {
+      if (this.videojs.textTracks().tracks_.filter(track => track.mode === 'showing').length > 0) {
+        this.disableSubs();
+      } else {
+        this.enableSubs();
+      }
+    }
+  }
+  addButtonToControlBar(options) {
+    const Button = videojs.getComponent('Button');
+    const CustomButton = videojs.extend(Button, {
+      constructor: function constructor() {
+        Button.apply(this, arguments);
+        if (options.className) this.el_.classList.add(options.className);
+        if (options.title) {
+          this.el_.title = options.title;
+        }
+      },
+      handleClick: () => {
+        if (options.onClick) options.onClick();
+      }
+    });
+    videojs.registerComponent(options.componentName, CustomButton);
+    this.videojs.getChild('controlBar').addChild(options.componentName, {}, 7);
+  }
+  get volume() {
+    return this.videojs.controlBar.volumePanel.volumeControl.volumeBar.getPercent();
+  }
+  set volume(floatVal) {
+    if (floatVal === 0) {
+      this.videojs.muted(true);
+    } else {
+      this.videojs.muted(false);
+      this.videojs.volume(floatVal);
+    }
+  }
+  setupMenu() {
+    const menuItems = this.props.menuItems || [];
+    const sourcesMenuItems = [];
+    if (this.props.sources.length > 1) {
+      this.props.sources.forEach(source => {
+        if (source.label) {
+          sourcesMenuItems.push({
+            title: source.label,
+            onClick: () => {
+              this.src = source;
+            }
+          });
+        }
+      });
+      menuItems.push({
+        title: 'Sources',
+        getActiveIndex: () => {
+          const matchingSource = this.props.sources.find(source => source.src === this.videojs.src());
+          return sourcesMenuItems.indexOf(sourcesMenuItems.find(menuItem => menuItem.title === matchingSource.label));
+        },
+        items: sourcesMenuItems
+      });
+    }
+    if (this.props.subtitles && this.props.subtitles.length > 0) {
+      const subtitleMenuItems = [{
+        title: 'Off',
+        onClick: () => {
+          this.disableSubs();
+        }
+      }];
+      this.props.subtitles.forEach((subtitle, index) => {
+        subtitleMenuItems.push({
+          title: subtitle.label,
+          onClick: () => {
+            const subs = this.videojs.textTracks();
+            for (let i = 0; i < subs.length; i += 1) {
+              const sub = subs[i];
+              if (i === index) {
+                sub.mode = 'showing';
+              } else {
+                sub.mode = 'hidden';
+              }
+            }
+          }
+        });
+      });
+      menuItems.push({
+        title: 'Subtitles',
+        getActiveIndex: () => {
+          const subs = this.videojs.textTracks();
+          for (let i = 0; i < subs.length; i += 1) {
+            const sub = subs[i];
+            if (sub.mode === 'showing') {
+              return i + 1;
+            }
+          }
+          return 0;
+        },
+        items: subtitleMenuItems
+      });
+    }
+    if (menuItems.length > 0) {
+      const target = this.videojs.el_;
+      this.menu = new Menu({
+        target,
+        items: menuItems,
+        onOpen: () => {
+          if (!this.controlsBelowPlayer) this.hideControls();
+        },
+        onClose: () => {
+          if (!this.controlsBelowPlayer) this.videojs.controls(true);
+        }
+      });
+      this.videoEl.parentElement.classList.add('has-vdt-menu');
+      this.addButtonToControlBar({
+        onClick: () => {
+          this.menu.toggle();
+        },
+        componentName: 'SettingsMenuButton',
+        className: 'vdt-settings-menu-button',
+        title: 'Settings'
+      });
+    }
+  }
+  hideControls() {
+    this.videojs.userActive(false);
+    this.videojs.controls(false);
+    this.videojs.fluid(true);
+    this.videoEl.parentElement.classList.remove('vjs-user-active');
+    this.videojs.userActive(false);
+  }
+  showControls() {
+    this.videojs.fluid(!this.controlsBelowPlayer);
+    this.videojs.controls(true);
+    this.videojs.userActive(true);
+  }
+  toggleControls() {
+    if (this.videojs.controls()) {
+      this.hideControls();
+    } else {
+      this.showControls();
+    }
+  }
+  onHotkeyPressed(key) {
+    if (key !== 'h' && this.help.state.active) {
+      this.help.hide();
+    }
+  }
+  triggerHotkey(key) {
+    mousetrap.trigger(key);
+  }
+  toStart() {
+    this.videojs.currentTime(0);
+  }
+  toEnd() {
+    this.videojs.currentTime(this.videojs.duration());
+  }
+  replay() {
+    this.toStart();
+    this.videojs.play();
+  }
+  play() {
+    this.videojs.play();
+  }
+  pause() {
+    if (!this.videojs.paused()) this.videojs.pause();
+  }
+  togglePlayback() {
+    if (this.videojs.paused()) {
+      this.play();
+      if (this.videojs.hasStarted_) this.osd.feedback(constants$2.osd.play);
+    } else {
+      this.pause();
+      this.osd.feedback(constants$2.osd.pause);
+    }
+  }
+  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);
+    if (this.rafID) cancelAnimationFrame(this.rafID);
+    this.videojs.dispose();
+    this.unbindHotKeys();
+    if (this.seekBar) this.seekBar.destroy();
+  }
+  get container() {
+    return this.videoEl.parentElement;
+  }
+  set onDark(bool) {
+    if (bool) {
+      this.container.classList.add('on-dark');
+    } else {
+      this.container.classList.remove('on-dark');
+    }
+    if (this.seekBar) {
+      this.seekBar.onDark = bool;
+    }
+  }
+  get onDark() {
+    return this.container.classList.contains('on-dark');
+  }
+  set controlsBelowPlayer(bool) {
+    if (this.videojs.controls()) {
+      if (bool) {
+        this.container.classList.add('controls-below-player');
+        this.videojs.fluid(false);
+      } else {
+        this.container.classList.remove('controls-below-player');
+        this.videojs.fluid(true);
+      }
+    }
+  }
+  get controlsBelowPlayer() {
+    return this.container.classList.contains('controls-below-player');
+  }
+  get smpte() {
+    const currentSecond = this.videojs.currentTime();
+    return this.timeConverter.secondsFromStartToSMPTE(currentSecond);
+  }
+  set smpte(o) {
+    this.updateSmpte(o);
+  }
+  set src(_ref) {
+    let {
+      src,
+      type = 'video/mp4',
+      label = null
+    } = _ref;
+    const currentTime = this.videojs.currentTime();
+    const source = this.props.sources.find(aSource => aSource.src === src);
+    const onReady = () => {
+      let initdone = false;
+      this.videojs.on('loadedmetadata', () => {
+        this.videojs.currentTime(currentTime);
+      });
+      this.videojs.on('canplaythrough', () => {
+        if (!initdone) {
+          this.videojs.currentTime(currentTime);
+          initdone = true;
+          this.videojs.play();
+        }
+      });
+    };
+    if (source && Array.isArray(source) && source.length > 0) {
+      this.videojs.addClass('vjs-waiting');
+      this.videojs.src(_objectSpread({}, source[0]));
+      onReady();
+    } else {
+      this.videojs.addClass('vjs-waiting');
+      this.videojs.src(this.addSrc(src, type, label));
+      onReady();
+    }
+  }
+  get src() {
+    return this.videojs.src();
+  }
+  addSrc(src, type, label) {
+    const newSource = {
+      src,
+      type,
+      label
+    };
+    const index = this.props.sources.push(newSource) - 1;
+    return this.props.sources[index];
+  }
+  removeSrc(url) {
+  }
+  set controls(bool) {
+    if (bool) {
+      this.showControls();
+    } else {
+      this.hideControls();
+    }
+  }
+  get percentLoaded() {
+    const r = this.videojs.buffered();
+    const percentLoaded = r.end(0) / this.videojs.duration() * 100;
+    return percentLoaded;
+  }
+}
+const button = videojs.prototype.constructor.getComponent('Button');
+button.prototype.handleKeyDown = function (e) {
+  if (e.keyCode === 32) {
+    e.preventDefault();
+  }
+};
+videojs.prototype.constructor.registerComponent('Button', button);
+const subsButton = videojs.prototype.constructor.getComponent('SubsCapsButton');
+class CustomSubsCapsButton extends subsButton {
+  constructor(player) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    super(player, options);
+    this.menuButton_.off('mouseenter');
+    this.menuButton_.off('mouseleave');
+  }
+}
+videojs.prototype.constructor.registerComponent('SubsCapsButton', CustomSubsCapsButton);
+
+export { ExternalControls, Player, SeekBar, TimeCodeDisplay, VideoTime };