@vidispine/vdt-videojs 22.4.0 → 23.1.0-pre.2

package/dist/index.umd.js

@@ -11,7 +11,7 @@
   var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
 
   var name = "@vidispine/vdt-videojs";
-  var version = "22.4.0";
+  var version = "23.1.0-pre.2";
   var license = "SEE LICENSE IN LICENSE.md";
   var publishConfig = {
   	access: "public"
@@ -84,2028 +84,261 @@
   	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
-  });
+  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;
-  }
+  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;
+  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;
 
-  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();
-      }
-    }
-  }
+  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__default["default"](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();
-      });
-    }
-  }
+  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__default["default"](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;
-    }
-  }
+  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 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');
-    }
-  }
+  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
-      };
-    }
-  }
+  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__default["default"](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);
+  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__default["default"](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;