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

package/dist/index.umd.js

@@ -0,0 +1,2115 @@
+(function (global, factory) {
+  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 mousetrap__default = /*#__PURE__*/_interopDefaultLegacy(mousetrap);
+  var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
+
+  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__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');
+        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__default["default"].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__default["default"].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__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();
+        });
+      }
+      this.bindings.forEach(binding => {
+        mousetrap__default["default"].bind(binding.key, e => {
+          binding.method(e);
+        });
+      });
+    }
+    unbindHotKeys() {
+      this.bindings && this.bindings.forEach(binding => {
+        mousetrap__default["default"].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__default["default"]('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__default["default"].bind(binding.key, e => {
+          binding.method(e);
+          this.onHotkeyPressed(binding.key);
+        });
+      });
+    }
+    unbindHotKeys() {
+      if (this.bindings) this.bindings.forEach(binding => {
+        mousetrap__default["default"].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__default["default"].getComponent('Button');
+      const CustomButton = videojs__default["default"].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__default["default"].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__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() {
+      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__default["default"].prototype.constructor.getComponent('Button');
+  button.prototype.handleKeyDown = function (e) {
+    if (e.keyCode === 32) {
+      e.preventDefault();
+    }
+  };
+  videojs__default["default"].prototype.constructor.registerComponent('Button', button);
+  const subsButton = videojs__default["default"].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__default["default"].prototype.constructor.registerComponent('SubsCapsButton', CustomSubsCapsButton);
+
+  exports.ExternalControls = ExternalControls;
+  exports.Player = Player;
+  exports.SeekBar = SeekBar;
+  exports.TimeCodeDisplay = TimeCodeDisplay;
+  exports.VideoTime = VideoTime;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));