@vidispine/vdt-videojs 23.2.0-pre.1 → 23.2.0

package/dist/index.js

@@ -1,350 +1,1922 @@
-'use strict';
+import m from "mousetrap";
+import v from "video.js/dist/alt/video.core.min";
+const D = "@vidispine/vdt-videojs", B = "23.2.0", I = "SEE LICENSE IN LICENSE.md", M = {
+  access: "public"
+}, P = "Javascript player based on videojs", O = "https://vidispine.github.io/vdt/?path=/docs/vdt-videojs", R = {
+  type: "git",
+  url: "https://github.com/vidispine/vdt.git",
+  directory: "packages/vdt-videojs"
+}, H = "module", A = "./dist/index.umd.cjs", z = "./dist/index.js", W = "./dist/index.css", _ = {
+  ".": {
+    import: "./dist/index.js",
+    require: "./dist/index.umd.cjs"
+  },
+  "./dist/index.css": "./dist/index.css"
+}, U = [
+  "dist"
+], K = {
+  build: "yarn vite build",
+  "build:watch": "yarn vite build --watch --mode development",
+  lint: "eslint . --cache --max-warnings=0 --ext .js,.jsx,.ts,.tsx,.md,.mdx",
+  format: "prettier . --check"
+}, X = {
+  mousetrap: "^1.6.5",
+  "video.js": "^7.21.2"
+}, q = {
+  "@vidispine/eslint-config-base": "workspace:*",
+  "@vidispine/eslint-config-mdx": "workspace:*",
+  "@vidispine/eslint-config-storybook": "workspace:*",
+  "@vidispine/prettier-config": "workspace:*",
+  eslint: "8.34.0",
+  prettier: "2.8.4",
+  vite: "4.3.1"
+}, J = [
+  "since 2017-06"
+], G = {
+  extends: [
+    "@vidispine/eslint-config-base",
+    "@vidispine/eslint-config-mdx",
+    "@vidispine/eslint-config-storybook"
+  ]
+}, Q = "@vidispine/prettier-config", E = {
+  name: D,
+  version: B,
+  license: I,
+  publishConfig: M,
+  description: P,
+  homepage: O,
+  repository: R,
+  type: H,
+  main: A,
+  module: z,
+  style: W,
+  exports: _,
+  files: U,
+  scripts: K,
+  dependencies: X,
+  devDependencies: q,
+  browserslist: J,
+  eslintConfig: G,
+  prettier: Q
+}, V = Object.freeze({
+  frameRate: 3e4 / 1001,
+  jumpSeconds: 10,
+  inactivityTimeout: 1200,
+  // hide player controls if user inactive for this duration
+  audioInactivityTimeout: 0
+}), b = Object.freeze({
+  play: 0,
+  pause: 1,
+  volchange: 2,
+  jumpForward: 3,
+  jumpBackward: 4
+}), Y = Object.freeze({
+  volume: "volume-setting",
+  subLang: "subtitles-language",
+  subs: "subtitles-enabled"
+}), p = Object.freeze({
+  poster: "has-poster",
+  subtitles: "has-subtitles",
+  subtitlesActive: "subtitles-active",
+  onDark: "on-dark",
+  loading: "loading"
+}), g = Object.freeze({
+  gray: "#787878",
+  light: "rgba(255,255,255,.75)"
+}), Z = Object.freeze({
+  name: E.name.split("/")[1],
+  vendor: E.name.split("/")[0]
+}), l = Object.freeze({
+  defaults: V,
+  settings: Y,
+  classNames: p,
+  colors: g,
+  osd: b,
+  packageInfo: Z
+});
+function ee(c, e) {
+  return c.length > e ? `${c.substring(0, e)}...` : c;
+}
+function w() {
+  function c(e) {
+    if (typeof e == "object") {
+      const t = Object.getOwnPropertyNames(e), s = Object.getPrototypeOf(this);
+      t.forEach((o) => {
+        const i = Object.getOwnPropertyDescriptor(s, o);
+        i && i.set && (this[o] = e[o]);
+      });
+    }
+  }
+  this.handleNewProps = c;
+}
+function x(c) {
+  const e = document.createElement("div");
+  return e.textContent = c, e.innerHTML;
+}
+const a = Object.freeze({
+  play: "play-pause",
+  start: "start",
+  fb: "frame-backward",
+  ff: "frame-forward",
+  end: "end"
+}), te = [
+  // order matters
+  a.start,
+  a.fb,
+  a.play,
+  a.ff,
+  a.end
+], se = `
+  .vdt-external-controls{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-Object.defineProperty(exports, '__esModule', { value: true });
+  .control{
+    flex: 1;
+    flex-grow: 1;
+    height: 100%;
+    align-contents: center;
+    align-self: center;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    height: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var mousetrap = require('mousetrap');
-var videojs = require('video.js/dist/alt/video.core.min');
+  .control .icon{
+    display: inline-block;
+    height: 20px;
+    white-space: nowrap;
+    opacity: .9;
+  }
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+  .control:hover .icon{ opacity: 1; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var mousetrap__default = /*#__PURE__*/_interopDefaultLegacy(mousetrap);
-var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
+  .control .icon:before{
+    opacity: 1;
+    flex: 1;
+    align-self: center;
+    content: " ";
+    display: inline-block;
+    margin: 0 auto;
 
-var name = "@vidispine/vdt-videojs";
-var version = "23.2.0-pre.1";
-var license = "SEE LICENSE IN LICENSE.md";
-var publishConfig = {
-	access: "public"
-};
-var description = "Javascript player based on videojs";
-var homepage = "https://vidispine.github.io/vdt/?path=/docs/vdt-videojs";
-var repository = {
-	type: "git",
-	url: "https://github.com/vidispine/vdt.git",
-	directory: "packages/vdt-videojs"
-};
-var main = "dist/index.js";
-var module$1 = "dist/index.es.js";
-var browser = "dist/index.umd.js";
-var scripts = {
-	build: "rimraf dist && rollup -c",
-	"build:watch": "yarn build -w --environment DEVELOPMENT",
-	lint: "eslint . --max-warnings=0",
-	format: "prettier . --check"
-};
-var dependencies = {
-	"@babel/runtime": "^7.21.0",
-	mousetrap: "^1.6.5",
-	"video.js": "^7.21.2"
-};
-var devDependencies = {
-	"@babel/core": "7.21.0",
-	"@babel/plugin-transform-runtime": "7.21.0",
-	"@rollup/plugin-babel": "5.3.1",
-	"@rollup/plugin-commonjs": "21.1.0",
-	"@rollup/plugin-json": "4.1.0",
-	"@rollup/plugin-node-resolve": "13.3.0",
-	"@vidispine/eslint-config-base": "workspace:*",
-	"@vidispine/eslint-config-mdx": "workspace:*",
-	"@vidispine/eslint-config-storybook": "workspace:*",
-	"@vidispine/prettier-config": "workspace:*",
-	eslint: "8.34.0",
-	prettier: "2.8.4",
-	rimraf: "3.0.2",
-	rollup: "2.79.1",
-	"rollup-plugin-cleanup": "3.2.1",
-	"rollup-plugin-sass": "1.12.17"
-};
-var browserslist = [
-	"since 2017-06"
-];
-var eslintConfig = {
-	"extends": [
-		"@vidispine/eslint-config-base",
-		"@vidispine/eslint-config-mdx",
-		"@vidispine/eslint-config-storybook"
-	]
+    /* triangles */
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 16px 0 16px 23px;
+    border-color: transparent transparent transparent ${g.gray};
+  }
+
+  .vdt-external-controls.${p.onDark} .control .icon:before{
+    border-color: transparent transparent transparent ${g.light};
+  }
+
+  /* specific buttons */
+
+  .control.${a.start},
+  .control.${a.end}{
+    height: 20px;
+  }
+
+  .control.${a.play}{
+    height: 30px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
+  .control.${a.play} .icon{
+    height: 30px;
+  }
+
+  .control.${a.ff} .icon:before,
+  .control.${a.fb} .icon:before,
+  .control.${a.end} .icon:before,
+  .control.${a.start} .icon:before{
+    border-width: 10px 0 10px 16px;
+  }
+
+  .control.${a.fb} .icon,
+  .control.${a.start}{
+    transform: rotate(180deg);
+  }
+
+  .control.${a.end} .icon:after,
+  .control.${a.start} .icon:after{
+    content: " ";
+    width: 4px;
+    height: 20px;
+    display: inline-block;
+    background: ${g.gray};
+  }
+
+  .vdt-external-controls.${p.onDark} .control.${a.end} .icon:after,
+  .vdt-external-controls.${p.onDark} .control.${a.start} .icon:after{
+    background: ${g.light};
+  }
+
+  /* stateful styles */
+  .control.${a.play}.playing .icon:before{
+    height: 30px;
+    width: 6px;
+    border-width: 0px 8px 0px 8px;
+    border-color: transparent ${g.gray} transparent ${g.gray};
+  }
+
+  .vdt-external-controls.${p.onDark} .control.${a.play}.playing .icon:before{
+    border-color: transparent ${g.light} transparent ${g.light};
+  }
+
+  .vdt-external-controls.${p.loading} .control.${a.play}{
+    border-color: transparent #f00 transparent #f00;
+  }
+`;
+class ie {
+  constructor(e) {
+    this.props = e, w.apply(this), this.state = {
+      playing: !1,
+      onDark: !1,
+      loading: !1
+    }, this.shadowRoot = document.createElement("div"), this.shadowRoot.className = "vdt-external-controls-wrapper", this.container = document.createElement("div"), this.container.className = "vdt-external-controls", 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(se)), this.shadow.appendChild(this.style), this.shadow.appendChild(this.container)), this.handleNewProps(e), this.bindEvents(), this.draw();
+  }
+  draw() {
+    this.buttons = {};
+    const e = this.props.excludes || [];
+    te.forEach((t) => {
+      if (e.indexOf(t) < 0) {
+        const s = document.createElement("div");
+        s.className = `control ${t}`, s.innerHTML = '<span class="icon"></span>', s.onclick = () => {
+          this.handlePress(t);
+        }, this.buttons[t] = s, this.container.appendChild(s);
+      }
+    });
+  }
+  /*
+  bind to play / pause / stop and other events,
+  so that controls reflect the player state
+  */
+  bindEvents() {
+    if (this.props.player && this.props.player.videojs) {
+      const { player: e } = this.props;
+      e.videojs.on("play", () => {
+        this.playing = !0;
+      }), e.videojs.on("pause", () => {
+        this.playing = !1;
+      }), e.videojs.on("stop", () => {
+        this.playing = !1;
+      });
+    }
+  }
+  handlePress(e) {
+    if (this.props.player) {
+      const { player: t } = this.props;
+      switch (t.osd && t.osd.disable(), e) {
+        case a.start:
+          t.toStart();
+          break;
+        case a.fb:
+          t.triggerHotkey("left");
+          break;
+        case a.play:
+          t.triggerHotkey("k");
+          break;
+        case a.ff:
+          t.triggerHotkey("right");
+          break;
+        case a.end:
+          t.toEnd();
+          break;
+      }
+      t.osd && t.osd.enable();
+    } else
+      switch (e) {
+        case a.start:
+          this.props.onPrev && this.props.onPrev();
+          break;
+        case a.fb:
+          this.props.onFB && this.props.onFB();
+          break;
+        case a.play:
+          this.playing ? this.props.onPause && this.props.onPause() : this.props.onPlay && this.props.onPlay();
+          break;
+        case a.ff:
+          this.props.onFF && this.props.onFF();
+          break;
+        case a.end:
+          this.props.onNext && this.props.onNext();
+          break;
+      }
+  }
+  // setters and getters for state
+  set playing(e) {
+    e ? (this.state.playing = !0, this.buttons[a.play].classList.add("playing")) : (this.state.playing = !1, this.buttons[a.play].classList.remove("playing"));
+  }
+  get playing() {
+    return this.state.playing;
+  }
+  set onDark(e) {
+    e ? (this.state.onDark = !0, this.container.classList.add(p.onDark)) : (this.state.onDark = !1, this.container.classList.remove(p.onDark));
+  }
+  get onDark() {
+    return this.container.classList.contains(p.onDark);
+  }
+  set loading(e) {
+    e ? (this.state.loading = !0, this.container.classList.add(p.loading)) : (this.state.loading = !1, this.container.classList.remove(p.loading));
+  }
+  get loading() {
+    return this.state.loading;
+  }
+}
+ie.buttonNames = a;
+class oe {
+  constructor(e) {
+    this.props = e, this.state = {
+      active: this.props.active || !1
+    }, this.container = document.createElement("div"), this.container.className = "vdt-help-overlay", this.container.innerHTML = "", this.container.onclick = () => {
+      this.hide();
+    }, this.props.target && this.props.target.appendChild(this.container), this.draw();
+  }
+  draw() {
+    let e = "";
+    const t = [
+      ["⎵", "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"]
+    ], s = Math.round(t.length / 2), o = [t.slice(0, s), t.slice(s, t.length)];
+    for (let i = 0; i < s; i += 1)
+      e += `
+            <tr>
+                <td><div>${o[0][i][0]}</div></td>
+                <td>- ${o[0][i][1]}</td>
+
+                <td>${o[1][i] ? `<div>${o[1][i][0]}</div>` : ""}</td>
+                <td>${o[1][i] ? `- ${o[1][i][1]}` : ""}</td>
+            </tr>
+        `;
+    this.container.innerHTML = `
+        <table>
+            <tbody>
+                <tr>
+                    <td class="vdt-help-contents">
+                        <table><tbody>${e}</tbody></table>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    `;
+  }
+  show() {
+    this.state.active || (this.container.classList.add("active"), this.state.active = !0, m.bind("esc", () => {
+      this.hide();
+    }), this.props.onToggle && this.props.onToggle(!0));
+  }
+  hide() {
+    this.state.active && (this.container.classList.remove("active"), this.state.active = !1, m.unbind("esc"), this.props.onToggle && this.props.onToggle(!1));
+  }
+  toggle() {
+    this.state.active ? this.hide() : this.show();
+  }
+}
+const h = 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)"
+  }
+}), ne = () => `
+    .${h.menuClassName}{
+        position: relative;
+        height: 100%;
+        width: 200%;
+        // min-width: 200px;
+        right: 0px;
+        bottom: 0px;
+        background: ${h.defaults.bgColor};
+        z-index: 1px;
+        transform: translate3d(100%, 0px, 0px);
+        transition: all 300ms ease-in-out;
+        box-shadow: 0px 0px 30px rgb;
+        -webkit-backdrop-filter: blur(10px);
+        overflow: hidden;
+    }
+
+    .${h.menuClassName} .level-1{
+        float: left;
+    }
+
+    .${h.menuClassName} div h3{
+        padding: 16px 24px;
+        font-size: 12px;
+        border-bottom: 1px solid ${h.defaults.bgColorLight}
+    }
+
+    .${h.menuClassName} .level-2 h3{
+        cursor: pointer;
+        position: relative;
+    }
+    .${h.menuClassName} .level-2 h3:before{
+        content: '◂';
+        margin-left: -12px;
+        width: 12px;
+        display: inline-block;
+        position: absolute;
+        margin-top: -1px;
+    }
+
+    .${h.menuClassName} .level-1,
+    .${h.menuClassName} .level-2{
+        transform: translate3d(0px, 0px, 0px);
+        transition: all 300ms ease-in-out;
+        width: 50%;
+        height: 100%;
+        float: left;
+    }
+
+    .${h.menuClassName}.sub-level .level-1,
+    .${h.menuClassName}.sub-level .level-2{
+        transform: translate3d(-100%, 0px, 0px);
+    }
+
+    .${h.menuClassName} table{
+        border-collapse: collapse;
+        width: 100%;
+    }
+
+    .${h.menuClassName}.open{
+        transform: translate3d(0px, 0px, 0px);
+    }
+
+    .${h.menuClassName} tr{
+        cursor: pointer;
+        height: 40px;
+    }
+
+    .${h.menuClassName} tr.selected{
+        background: ${h.defaults.bgColorSelected};
+    }
+
+
+    .${h.menuClassName} tr td{
+        color: white;
+        font-size: 15px;
+        vertical-align: middle;
+    }
+
+    
+    .${h.menuClassName} tr:hover td{
+        color: white;
+        background: ${h.defaults.bgColorLight};
+    }
+
+    .${h.menuClassName} tr td.title{
+        padding-top: 12px;
+        padding-bottom: 12px;
+        font-weight: 300;
+        font-family: Helvetica, Arial, sans-serif; 
+    }
+
+    .${h.menuClassName} tr td.caret{
+        font-size: 12px;
+    }
+
+    .${h.menuClassName} tr td:first-child{
+        padding-left: 24px;
+    }
+
+    .${h.menuClassName} tr td:last-child{
+        padding-right: 16px;
+    }
+
+    .${h.menuClassName} tr.has-items td:last-child{
+        text-align: right;
+    }
+
+    .${h.menuClassName} tr.has-items td.subtitle{
+      font-size: 12px;
+      text-align: right;
+      color: ${h.defaults.textColorLight};
+    }
+`;
+class S {
+  constructor(e) {
+    this.props = e;
+    const t = [
+      h.menuItemClassName,
+      this.props.items && "has-items",
+      this.props.selected && "selected"
+    ];
+    this.container = document.createElement("tr"), this.container.className = t.join(" "), this.props.target && this.props.target.appendChild(this.container), this.container.onclick = (s) => {
+      this.props.onClick && this.props.onClick(s);
+    }, this.render();
+  }
+  render() {
+    this.props.items ? this.container.innerHTML = `
+          <td class="title"></td>
+          <td class="subtitle"></td>
+          <td class="caret">▷</td>
+      ` : this.container.innerHTML = `
+          <td class="title"></td>
+      `;
+    const e = this.container.getElementsByClassName("title")[0], t = this.props.items ? this.container.getElementsByClassName("subtitle")[0] : !1;
+    e.textContent = this.props.title, t && (t.textContent = this.props.subtitle);
+  }
+}
+class re {
+  constructor(e) {
+    this.props = e, this.container = document.createElement("div"), this.container.className = `${h.className}`, this.state = {
+      opened: !1,
+      selectedItem: 0,
+      items: [],
+      subItems: []
+    }, this.mount(), this.draw();
+  }
+  mount() {
+    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" }), 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 = ne(), this.shadow.appendChild(this.style));
+  }
+  draw() {
+    const e = document.createElement("div");
+    e.className = "level-1", this.mainLevel = document.createElement("table"), e.innerHTML = "<h3>Settings</h3>", e.appendChild(this.mainLevel);
+    const t = document.createElement("div");
+    t.className = "level-2", this.subLvlTitle = document.createElement("h3"), this.subLvlTitle.onclick = () => {
+      this.up();
+    }, t.appendChild(this.subLvlTitle), this.secondaryLevel = document.createElement("table"), t.appendChild(this.secondaryLevel), this.menuContainer.appendChild(e), this.menuContainer.appendChild(t), this.props.items.forEach((s) => {
+      const o = s.items[s.getActiveIndex(s.items)].title || "", i = new S({
+        target: this.mainLevel,
+        subtitle: o,
+        onClick: () => {
+          this.handleSupItemSelected(s);
+        },
+        ...s
+      });
+      this.state.items.push(i);
+    });
+  }
+  open() {
+    this.render(), this.menuContainer.classList.add("open"), this.props.onOpen && this.props.onOpen(), this.state.opened = !0, this.handleClicksWhenMenuOpened || (this.handleClicksWhenMenuOpened = function(e) {
+      this.state.opened && (e.stopPropagation(), this.container.contains(e.target) || this.close());
+    }.bind(this)), this.handleClicksWhenMenuOpenedTimeout = setTimeout(() => {
+      document.addEventListener("click", this.handleClicksWhenMenuOpened), m.bind("esc", this.close.bind(this));
+    }, h.animationLength);
+  }
+  close() {
+    this.menuContainer.classList.remove("open"), this.state.opened = !1, this.handleClicksWhenMenuOpenedTimeout && clearTimeout(this.handleClicksWhenMenuOpenedTimeout), document.removeEventListener("click", this.handleClicksWhenMenuOpened), this.props.onClose && this.props.onClose(), m.unbind("esc");
+  }
+  toggle() {
+    this.state.opened ? this.close() : this.open();
+  }
+  up() {
+    this.menuContainer.classList.remove(h.subLvlClassName), this.render();
+  }
+  handleSupItemSelected(e) {
+    this.subLvlTitle.textContent = e.title, this.renderSubItems(e.items, e.getActiveIndex(e.items)), this.menuContainer.classList.add(h.subLvlClassName);
+  }
+  renderSubItems(e, t = !1) {
+    this.secondaryLevel.innerHTML = "";
+    const s = [];
+    e.forEach((o, i) => {
+      const r = new S({
+        target: this.secondaryLevel,
+        ...o,
+        onClick: (n) => {
+          this.handleSubItemSelected(n, o);
+        },
+        selected: i === t
+        // mark selected
+      });
+      s.push(r);
+    }), this.state.subItems = s;
+  }
+  handleSubItemSelected(e, t) {
+    this.close(), t.onClick && t.onClick(e, t), this.up();
+  }
+  get opened() {
+    return this.state.opened;
+  }
+  set opened(e) {
+    this.state.opened = e;
+  }
+  render() {
+    this.state.items.forEach((e, t) => {
+      const { items: s } = this.props, o = s[t].getActiveIndex(s[t].items), i = s[t].items[o].title;
+      e.props.subtitle = i, e.render();
+    });
+  }
+}
+class ae {
+  constructor(e) {
+    this.props = e, this.state = {
+      enabled: !0
+    }, this.container = document.createElement("div"), this.container.className = "vdt-player-osd", this.container.innerHTML = `
+            <table>
+                <tbody>
+                    <td>
+                        <div class="osd-feedback-icon"></div>
+                    </td>
+                </tbody>
+            </table>
+        `, this.iconEl = this.container.getElementsByClassName("osd-feedback-icon")[0], this.props.target && this.props.target.appendChild(this.container);
+  }
+  feedback(e, t = null) {
+    if (!this.state.enabled)
+      return;
+    let s;
+    switch (e) {
+      case b.pause:
+        s = "pause";
+        break;
+      case b.play:
+        s = "play";
+        break;
+      case b.volchange:
+        const o = t.volume;
+        let i;
+        o === 0 ? i = "null" : o > 0.65 ? i = "high" : o < 0.35 ? i = "low" : i = "mid", s = `volchange ${i}`;
+        break;
+      case b.jumpForward:
+        s = "forward-jump";
+        break;
+      case b.jumpBackward:
+        s = "backward-jump";
+        break;
+    }
+    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 ${s}`;
+  }
+  disable() {
+    this.state.enabled = !1;
+  }
+  enable() {
+    this.state.enabled = !0;
+  }
+}
+const d = Object.freeze({
+  className: "vdt-seekbar",
+  defaults: {
+    bgColor: "#fafafa",
+    fillColor: "#f00",
+    regionColor: "#f6e58d",
+    // yellow
+    markerWidth: 16,
+    regionAccentColor: "#00a8ff",
+    transitionTime: 300
+    // ms
+  },
+  markerTypes: {
+    in: "in",
+    out: "out"
+  }
+}), le = (c, e) => `
+  .${d.className}{
+    user-select: none;
+    background: ${g.light};
+    height: 6px;
+    width: 100%;
+    position: relative;
+    cursor: pointer;
+    z-index: 5;
+  }
+
+  .${p.onDark}.${d.className}{
+    background: ${g.gray};
+  }
+
+  .fill, .load-indicator{
+    height: 100%;
+    display: inline-block;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    background: ${e};
+    transition: width ${d.defaults.transitionTime}ms linear;
+    z-index: 2;
+  }
+
+  .load-indicator{
+    background: #e1e1e1;
+    z-index: 1;
+    opacity: .2;
+    transition: none;
+  }
+
+  .${p.onDark}.${d.className} .load-indicator{
+    background: white;
+  }
+
+  .${d.className}.dragging .fill{
+    transition: none;
+  }
+
+
+  .marker, .region{
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    background: cyan;
+    width: 1px;
+    display: inline-block;
+    z-index: 4;
+  }
+
+  .marker{
+    transition: opacity ${d.defaults.transitionTime}ms linear;
+  }
+
+  .marker{ display: none; }
+  .marker.active{ display: initial; }
+
+  .marker .handle{
+    position: absolute;
+    bottom: 10px; right: 0px;
+    width: ${d.defaults.markerWidth}px;
+    height: 28px;
+    background: #999;
+    border-radius: 3px;
+    cursor: col-resize;
+    z-index: 3;
+    box-sizing: border-box;
+  }
+
+  .marker.regional .handle{
+    background: ${d.defaults.regionAccentColor};
+    box-shadow: -2px 1px 1px rgba(0,0,0,.1);
+  }
+
+  .marker.regional.in .handle{
+    box-shadow: 2px 1px 1px rgba(0,0,0,.1);
+  }
+
+  .marker.in .handle{
+    border-bottom-left-radius: 40px;
+  }
+
+  .marker.out .handle{
+    left: 1px;
+    right: initial;
+    border-bottom-right-radius: 20px;
+  }
+
+  .handle:active{
+    background: ${d.defaults.regionColor};
+  }
+
+  .region{
+    position: absolute;
+    width: auto;
+    background: ${d.defaults.regionColor};
+    opacity: .7;
+  }
+
+  .region.nav{
+    background: transparent;
+    opacity: 1;
+    border-left: 1px solid cyan;
+  }
+
+  .region.nav .bubble,
+  .region.nav:after{
+    content: " ";
+    height: 16px;
+    bottom: 10px;
+    width: 16px;
+    border-radius: 16px;
+    background: ${d.defaults.regionAccentColor};
+    position: absolute;
+    margin-left: -8px;
+    transition: transform 200ms ease-out;
+    transform: translate3d(0px, 0px, 0px);
+    transform-origin: bottom center;
+  }
+
+  .region.nav .popout{
+    width: 160px;
+    z-index: 4;
+    background: rgba(28, 28, 28, .7);
+    color: white;
+    font-size: 14px;
+    min-height: 100px;
+    bottom: 16px;
+    left: -80px;
+    position: absolute;
+    border-radius: 8px;
+    -webkit-backdrop-filter: blur(10px);
+    font-family: Arial, Helvetica, sans-serif;
+    overflow: hidden;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .region.nav.right-aligned .popout{
+    right: 0px;
+    left: initial;
+  }
+
+  .region.nav.left-aligned .popout{
+    left: -32px;
+  }  
+
+  .region.nav .popout .title{
+    padding: 4px 14px;
+    text-align: center;
+    color: black;
+    background: white;
+  }
+
+  .region.nav .popout .annotation{
+    padding: 8px 12px;
+    font-weight: light;
+    color: rgba(255,255,255,.9);
+  }
+
+  .region.nav:after{
+    width: 1px;
+    left: 8px;
+    height: 10px;
+    bottom: 0px;
+    background: #00a8ff;
+  }
+
+  .region.nav:hover{
+    background: rgba(28, 28, 28, .5);
+  }
+
+  .region.nav.has-popout:hover .bubble{
+    background: rgba(28, 28, 28, .8);
+    opacity: 1;
+    z-index: 3;
+  }
+
+  .region.nav:hover:after,
+  .region.nav:hover:before{
+    background: rgba(28, 28, 28, .8);
+  }
+
+  .region.nav:hover .popout{
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .${d.className}.dragging .bubble{
+    transform: scale3d(.75,.75,.75);
+  }
+
+  .${d.className}.hide-markers .marker{
+    opacity: 0;
+  }
+
+`;
+class T {
+  constructor(e) {
+    Object.assign(this, {
+      in: null,
+      out: null,
+      title: "",
+      annotation: "",
+      el: null
+      // can store a
+    }, e);
+  }
+}
+class L {
+  constructor(e) {
+    if (this.props = e, w.apply(this), this.container = document.createElement("div"), this.container.className = `${d.className}-wrapper`, this.state = {
+      in: null,
+      // in seconds from 0
+      out: null,
+      markersEnabled: this.props.markersEnabled === void 0 ? !0 : this.props.markersEnabled,
+      regions: [],
+      // array with regions providing {in: 0, out: 12} and possibly more
+      dragging: !1
+    }, this.markers = {}, 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 s = this.props.bgColor ? this.props.bgColor : d.defaults.bgColor, o = this.props.fillColor ? this.props.fillColor : d.defaults.fillColor;
+      this.style.innerHTML = le(x(s), x(o)), this.shadow.appendChild(this.style);
+    }
+    this.bindEvents(), this.draw(), this.bindHotkeys();
+    const { player: t } = this.props;
+    t && t.videojs.on("loadedmetadata", () => {
+      this.handleNewProps(this.props);
+    });
+  }
+  /*
+  Video.js seekbar works a bit differently - it
+  sets an interval and checks the playback position
+  very frequently, could do it that way -
+  then could use requestAnimationFrame and
+  get a smoother animation at more expense
+  */
+  bindEvents() {
+    if (this.props.player) {
+      const { player: e } = this.props;
+      e.videojs.on("timeupdate", () => {
+        const t = e.videojs.currentTime() / e.videojs.duration();
+        this.fill.style.width = `${100 * t}%`;
+      }), e.videojs.on("progress", () => {
+        this.percentLoaded = e.percentLoaded;
+      });
+    }
+  }
+  bindHotkeys() {
+    if (this.bindings = [], this.props.player) {
+      const { player: e } = this.props;
+      this.bindings = [
+        {
+          key: ["i"],
+          method: () => {
+            this.markersEnabled && (this.in = e.videojs.currentTime());
+          }
+        },
+        {
+          key: ["o"],
+          method: () => {
+            this.markersEnabled && (this.out = e.videojs.currentTime());
+          }
+        },
+        {
+          key: ["shift+i"],
+          method: () => {
+            this.markersEnabled && this.navigateToIn();
+          }
+        },
+        {
+          key: ["shift+o"],
+          method: () => {
+            this.markersEnabled && this.navigateToOut();
+          }
+        }
+      ];
+    }
+    if (this.props.player) {
+      const { player: e } = this.props;
+      m.bind("i", () => {
+        this.markersEnabled && (this.in = e.videojs.currentTime());
+      }), m.bind("o", () => {
+        this.markersEnabled && (this.out = e.videojs.currentTime());
+      }), m.bind("shift+i", () => {
+        this.markersEnabled && this.navigateToIn();
+      }), m.bind("shift+o", () => {
+        this.markersEnabled && this.navigateToOut();
+      });
+    }
+    this.bindings.forEach((e) => {
+      m.bind(e.key, (t) => {
+        e.method(t);
+      });
+    });
+  }
+  unbindHotKeys() {
+    this.bindings && this.bindings.forEach((e) => {
+      m.unbind(e.key);
+    });
+  }
+  handleSeek(e) {
+    if (this.props.player) {
+      const { player: t } = this.props;
+      if (this.state.regions) {
+        let i = !1, r = !1;
+        if (this.state.regions.forEach((n) => {
+          n.el.contains(e.target) && (this.props.onRegionClick ? (r = this.props.onRegionClick(n), r || t.seekTo(n.in)) : t.seekTo(n.in), i = !0);
+        }), i)
+          return;
+      }
+      const o = (e.clientX - this.bar.getBoundingClientRect().left) / this.bar.offsetWidth * t.videojs.duration();
+      t.seekTo(o);
+    }
+  }
+  handleSeekDrag(e) {
+    const t = this.bar.getBoundingClientRect().left, s = this.bar.getBoundingClientRect().width, o = this.props.player.videojs.duration();
+    let i;
+    const r = (u) => {
+      i = u.clientX - t;
+      const k = Math.abs(e.clientX - u.clientX);
+      if (i >= 0 && i < s && k > 1) {
+        this.dragging = !0;
+        const C = parseFloat(i) / s * o;
+        this.props.player.videojs.currentTime(C);
+      }
+      u.preventDefault();
+    }, n = (u) => {
+      this.dragging = !1, document.removeEventListener("mousemove", r, !1), document.removeEventListener("mouseup", n, !1);
+      const f = parseFloat(i) / s * o;
+      this.props.player.videojs.currentTime(f), u.stopPropagation();
+    };
+    document.addEventListener("mousemove", r, !1), document.addEventListener("mouseup", n, !1);
+  }
+  draw() {
+    this.bar = document.createElement("div"), this.bar.className = d.className, this.bar.onclick = (e) => {
+      !e.target.classList.contains("marker") && !e.target.classList.contains("handle") && this.handleSeek(e);
+    }, this.bar.addEventListener(
+      "mousedown",
+      (e) => {
+        e.preventDefault(), this.dragging || this.handleSeekDrag(e);
+      },
+      !1
+    ), 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 e = this.markers[d.markerTypes.in] = document.createElement("div"), t = this.markers[d.markerTypes.out] = document.createElement("div");
+      e.className = `marker ${d.markerTypes.in}`, t.className = `marker ${d.markerTypes.out}`;
+      const s = document.createElement("div"), o = document.createElement("div");
+      s.className = o.className = "handle", s.addEventListener(
+        "mousedown",
+        (i) => {
+          i.preventDefault(), i.stopPropagation(), this.handleMarkerDrag(e, d.markerTypes.in, i);
+        },
+        !1
+      ), o.addEventListener(
+        "mousedown",
+        (i) => {
+          i.preventDefault(), i.stopPropagation(), this.handleMarkerDrag(t, d.markerTypes.out, i);
+        },
+        !1
+      ), e.appendChild(s), t.appendChild(o), this.bar.appendChild(e), this.bar.appendChild(t);
+    }
+  }
+  updateMarkers(e) {
+    this.markers[e.type].style.left = `${e.value * 100}%`, this.markers[e.type].classList.add("active"), this.state.regions && ([].length > 0 ? this.markers[e.type].classList.add("regional") : this.markers[e.type].classList.remove("regional")), this.drawInAndOutRegion();
+  }
+  drawInAndOutRegion() {
+    this.state.in !== null && this.state.out !== null && (this.region.style.left = this.markers[d.markerTypes.in].style.left, this.region.style.right = `${100 - parseFloat(this.markers[d.markerTypes.out].style.left.replace("%", ""))}%`);
+  }
+  /*
+  TODO - handle touch events,
+  but find out if there is a mobile use
+  case before that
+  */
+  handleMarkerDrag(e, t, s) {
+    const o = this.bar.getBoundingClientRect().left, i = this.bar.getBoundingClientRect().width, r = this.props.player.videojs.duration();
+    let n = !1;
+    const u = (f) => {
+      const C = Math.abs(s.clientX - f.clientX), y = t === d.markerTypes.in ? d.defaults.markerWidth / 2 : -(d.defaults.markerWidth / 2), j = f.clientX - o + y;
+      if (j >= 0 && j < i && C > 1) {
+        n = this.dragging = !0, e.style.left = `${j}px`, e.classList.add("active");
+        const F = parseFloat(e.getBoundingClientRect().left - o) / i * r;
+        this.props.player.videojs.currentTime(F);
+      }
+      f.preventDefault();
+    }, k = (f) => {
+      this.dragging = !1, document.removeEventListener("mousemove", u, !1), document.removeEventListener("mouseup", k, !1);
+      const y = parseFloat(e.getBoundingClientRect().left - o) / i * r;
+      this[t] = y, this.props.player.videojs.currentTime(y), n || (t === d.markerTypes.in ? this.navigateToIn() : this.navigateToOut()), this.props.onDragFinish && this.props.onDragFinish({ type: t, seconds: y }), f.stopPropagation();
+    };
+    document.addEventListener("mousemove", u, !1), document.addEventListener("mouseup", k, !1);
+  }
+  /*
+  hide dead markers (for state parity) or ones that
+  make no sense (like out point before in point)
+  */
+  cleanupMarkers() {
+    let e = !1;
+    this.state.in === null && (this.markers[d.markerTypes.in].classList.remove("active"), e = !0), this.state.out === null && (this.markers[d.markerTypes.out].classList.remove("active"), e = !0), e && (this.region.style.left = "initial", this.region.style.right = "initial");
+  }
+  clearMarkers() {
+    this.in = null, this.out = null;
+  }
+  // utilizes player instance from props
+  setInFromCurrent() {
+    this.in = this.props.player.videojs.currentTime();
+  }
+  setOutFromCurrent() {
+    this.out = this.props.player.videojs.currentTime();
+  }
+  navigateToIn() {
+    const { player: e } = this.props;
+    e.seekTo(this.in);
+  }
+  navigateToOut() {
+    const { player: e } = this.props;
+    e.seekTo(this.out);
+  }
+  // setters and getters
+  set in(e) {
+    if (this.state.markersEnabled)
+      if (this.state.in = e, e != null) {
+        const { player: t } = this.props;
+        this.updateMarkers({
+          type: d.markerTypes.in,
+          value: e / t.videojs.duration()
+        }), this.state.out !== null && e > 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(e) {
+    if (this.state.markersEnabled)
+      if (this.state.out = e, e != null) {
+        const { player: t } = this.props;
+        this.updateMarkers({
+          type: d.markerTypes.out,
+          value: e / t.videojs.duration()
+        }), this.state.in != null && e < 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(e) {
+    typeof e == "boolean" && (e ? (!this.markersEnabled && this.drawMarkers(), this.state.markersEnabled = !0) : (this.clearMarkers(), this.state.markersEnabled = !1));
+  }
+  set regions(e) {
+    this.state.regions.length < 1 ? e && e.forEach((t) => {
+      this.addRegion(t);
+    }) : (this.state.regions.forEach((t, s) => {
+      this.removeRegion(s);
+    }), this.state.regions = [], this.regions = e);
+  }
+  get regions() {
+    return this.state.regions;
+  }
+  set dragging(e) {
+    e && !this.state.dragging ? (this.state.dragging = !0, this.bar.classList.add("dragging")) : !e && this.state.dragging && (this.state.dragging = !1, this.bar.classList.remove("dragging"));
+  }
+  get dragging() {
+    return this.state.dragging;
+  }
+  addRegion(e) {
+    e.constructor.name === T.name ? (this.state.regions.push(e), this.drawRegion(e)) : this.addRegion(new T(e));
+  }
+  removeRegion(e) {
+    typeof e == typeof T || (this.state.regions[e].el.remove(), this.state.regions[e] = null, delete this.state.regions[e]);
+  }
+  drawRegion(e) {
+    const t = this.props.player.videojs.duration(), o = e.in / t * 100, i = (t - e.out) / t * 100, r = document.createElement("div");
+    if (r.className = "region nav ", r.innerHTML = '<div class="bubble"></div>', e.title && e.annotation) {
+      let n = "";
+      o > 70 && (n = "right-aligned"), o < 30 && (n = "left-aligned"), r.className += ` has-popout ${n}`;
+      const u = document.createElement("div");
+      u.className = "popout", u.innerHTML = `
+        <div class="title">
+          ${x(e.title)}
+        </div>
+        <div class="annotation">
+          ${ee(x(e.annotation), 72)}
+        </div>
+      `, r.appendChild(u);
+    }
+    r.style.left = `${o}%`, r.style.right = `${i}%`, e.el = r, this.bar.appendChild(r);
+  }
+  set onDark(e) {
+    e ? this.bar.classList.add(p.onDark) : this.bar.classList.remove(p.onDark);
+  }
+  get onDark() {
+    return this.container.classList.contains(p.onDark);
+  }
+  set percentLoaded(e) {
+    this.loadIndicator.style.width = `${e}%`;
+  }
+  destroy() {
+    this.unbindHotKeys();
+  }
+  toggleMarkers() {
+    this.bar.classList.contains("hide-markers") ? this.showMarkers() : this.hideMarkers();
+  }
+  hideMarkers() {
+    this.bar.classList.add("hide-markers");
+  }
+  showMarkers() {
+    this.bar.classList.remove("hide-markers");
+  }
+}
+L.Region = T;
+const de = ["hours", "minutes", "seconds", "frame"];
+class N {
+  // displays and renders smpte timecodes
+  constructor(e) {
+    this.props = e, this.state = {
+      selectedNode: null
+      // avoid updating values in a selected node
+    };
+    const t = [
+      "vdt-timecode",
+      "vjs-time-control",
+      // will apply default videojs style to the whole container, centers things vertically
+      this.props.onInput ? "" : "duration"
+      // if no input capability, assume it's a duration timecode
+    ];
+    this.container = document.createElement("div"), this.container.className = t.join(" "), this.nodeNames = [].concat(de), this.nodes = {}, this.nodeNames.forEach((s, o) => {
+      const i = document.createElement("input");
+      i.className = s, i.tabIndex = -1, this.props.onInput ? (i.maxLength = 2, i.onfocus = (n) => {
+        this.handleInputFocus(n, s);
+      }, i.onblur = (n) => {
+        this.handleInputBlur(n, s);
+      }, i.onmouseup = (n) => {
+        n.preventDefault(), n.currentTarget.select();
+      }, i.onkeydown = (n) => {
+        this.handleTimeCodeInput(n, s);
+      }, i.onkeyup = (n) => {
+        this.handleTimeCodeInputOnKeyUp(n, s);
+      }) : i.readOnly = !0, this.nodes[s] = i;
+      const r = document.createElement("span");
+      r.innerHTML = ":", this.container.appendChild(i), o !== this.nodeNames.length - 1 && this.container.appendChild(r);
+    }), this.props.target ? (this.props.appendAfter ? this.props.target.parentNode.insertBefore(this.container, this.props.target.nextSibling) : this.props.target.appendChild(this.container), this.reset()) : console.error(`Unable to instantiate a new ${this.constructor.name} without target DOM node`);
+  }
+  update(e) {
+    const t = this.nodeNames.length - 1;
+    let s;
+    for (s = t; s > -1; s--) {
+      const o = this.nodeNames[s];
+      if (typeof e[o] < "u" && e[o] !== parseInt(this.nodes[o].value, 10) && o !== this.state.selectedNode) {
+        const i = e[o].toString();
+        this.nodes[o].value = this.toDigitPairStr(i);
+      }
+    }
+  }
+  reset() {
+    this.update({
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      frame: 0
+    });
+  }
+  handleInputFocus(e, t) {
+    this.state.selectedNode = t, this.nodes[t].select(), this.props.onInputFocus && this.props.onInputFocus(t);
+  }
+  handleInputBlur(e, t) {
+    this.state.selectedNode = null, this.props.onInputBlur && this.props.onInputBlur(t);
+  }
+  sanitize(e) {
+    return e.replace(/[^0-9]/g, "");
+  }
+  toDigitPairStr(e) {
+    return e.length < 2 ? `0${e}` : e;
+  }
+  handleTimeCodeInput(e, t) {
+    const s = this.nodeNames.indexOf(t);
+    switch (e.code) {
+      case "Enter":
+        this.checkAndNormalizeAllInputs(), this.props.onInput && this.props.onInput(e, t, {
+          hours: this.hours,
+          minutes: this.minutes,
+          seconds: this.seconds,
+          frame: this.frame
+        }), this[t] = e.currentTarget.value, e.currentTarget.blur();
+        break;
+      case "Tab":
+        e.preventDefault(), e.shiftKey ? s - 1 >= 0 ? this.nodes[this.nodeNames[s - 1]].focus() : this.nodes[this.nodeNames[this.nodeNames.length - 1]].focus() : s + 1 <= this.nodeNames.length - 1 ? this.nodes[this.nodeNames[s + 1]].focus() : this.nodes[this.nodeNames[0]].focus();
+        break;
+    }
+  }
+  handleTimeCodeInputOnKeyUp(e, t) {
+    if (this.nodes[t].value.length === 2 && !isNaN(e.key)) {
+      const s = this.nodeNames.indexOf(t);
+      s + 1 <= this.nodeNames.length - 1 && this.nodes[this.nodeNames[s + 1]].focus();
+    }
+  }
+  checkAndNormalizeAllInputs() {
+    this.nodeNames.forEach((e) => {
+      this.nodes[e].value.length < 1 && (this.nodes[e].value = "00"), this.nodes[e].value = this.toDigitPairStr(this.sanitize(this.nodes[e].value));
+    });
+  }
+  // setters and getters
+  set frame(e) {
+    this.nodes.frame.value = this.toDigitPairStr(e);
+  }
+  get frame() {
+    return parseInt(this.nodes.frame.value, 10);
+  }
+  set seconds(e) {
+    this.nodes.seconds.value = this.toDigitPairStr(e);
+  }
+  get seconds() {
+    return parseInt(this.nodes.seconds.value, 10);
+  }
+  set minutes(e) {
+    this.nodes.minutes.value = this.toDigitPairStr(e);
+  }
+  get minutes() {
+    return parseInt(this.nodes.minutes.value, 10);
+  }
+  set hours(e) {
+    this.nodes.hours.value = this.toDigitPairStr(e);
+  }
+  get hours() {
+    return parseInt(this.nodes.hours.value, 10);
+  }
+  getFormatted(e) {
+    return this.toDigitPairStr(this[e].toString());
+  }
+  get smpte() {
+    return {
+      hours: this.hours,
+      minutes: this.minutes,
+      seconds: this.seconds,
+      frame: this.frame
+    };
+  }
+  set smpte(e) {
+    this.update(e);
+  }
+  get smpteString() {
+    return `${this.getFormatted("hours")}:${this.getFormatted("minutes")}:${this.getFormatted(
+      "seconds"
+    )}:${this.getFormatted("frame")}`;
+  }
+  set external(e) {
+    e ? this.container.classList.add("external") : this.container.classList.remove("external");
+  }
+  get external() {
+    return this.container.classList.contains("external");
+  }
+}
+class he {
+  constructor(e) {
+    if (e.frameRate === void 0)
+      throw delete this, new Error('No "frameRate" option provided, refer to docs.');
+    this.props = e;
+  }
+  secondsToFramesFromStart(e) {
+    let t = e * this.props.frameRate;
+    return t = Math.round(t), t;
+  }
+  currentTimeToFramesFromStart(e) {
+    return this.secondsToFramesFromStart(e);
+  }
+  secondsToFrame(e) {
+    let t = this.secondsToFramesFromStart(e) % this.props.frameRate;
+    return t = Math.round(t), t;
+  }
+  currentFrame(e) {
+    return Math.round(this.secondsToFrame(e));
+  }
+  frameToCurrentTimeFromStart(e) {
+    return e / this.props.frameRate;
+  }
+  smpteToCurrentTimeFromStart(e) {
+    return e.hours * 3600 + e.minutes * 60 + e.seconds + e.frame / this.props.frameRate;
+  }
+  secondsFromStartToSMPTE(e) {
+    let t = e;
+    const s = Math.floor(t / 3600), o = t / 60 - 60 * s;
+    t %= 3600;
+    const i = Math.floor(o), r = Math.floor(t % 60), n = this.secondsToFrame(t);
+    return {
+      hours: s,
+      minutes: i,
+      seconds: r,
+      frame: n
+    };
+  }
+}
+const ce = {
+  "audio/x-aac": "audio/aac"
+}, pe = (c) => ce[c] || c;
+class be {
+  constructor(e) {
+    this.props = e, w.apply(this);
+    const t = [
+      // add conditional css classes here for the whole container
+      "video-js",
+      "vjs-big-play-centered",
+      this.props.posterUrl ? l.classNames.poster : "",
+      this.props.subtitles && this.props.subtitles.length > 0 ? l.classNames.subtitles : "",
+      "init"
+      // make player height 0 while no metadata for video size available with css
+    ];
+    this.externalTimecodes = {
+      // either one of these can hold an array of TimeCodeDisplay instances
+      duration: [],
+      playback: []
+    }, this.timeConverter = new he({
+      frameRate: this.props.frameRate || l.defaults.frameRate
+    }), this.videoEl = document.createElement("video"), this.videoEl.crossOrigin = this.props.crossOrigin, this.videoEl.id = "vdt-video", this.videoEl.className = t.join(" "), this.videoEl.controls = !0, this.props.sources && (this.props.sources.length > 1 && this.props.sources.sort((r) => r.type.indexOf("mp4") > 0 ? 1 : -1), this.props.sources.forEach((r) => {
+      const n = document.createElement("source");
+      n.src = r.src, n.type = pe(r.type), this.videoEl.appendChild(n);
+    })), this.videoEl.onloadedmetadata = () => {
+      this.durationTimeCode && this.setDurationTimeCode(), this.videojs.el_ && this.videojs.el_.classList.remove("init");
+    }, setTimeout(() => {
+      this.videojs.el_ && this.videojs.el_.classList.remove("init");
+    }, 2e3), this.props.subtitles && this.props.subtitles.forEach((r) => {
+      const n = document.createElement("track");
+      n.kind = "subtitles", n.srclang = r.lang, n.label = r.label, typeof r.src == "string" ? n.src = r.src : n.src = window.URL.createObjectURL(r.src), this.videoEl.appendChild(n);
+    }), this.props.target && this.props.target.appendChild(this.videoEl);
+    const s = this.props.timecode !== !0, o = this.props.controls !== !1, i = this.props.options || {};
+    this.videojs = new v("vdt-video", {
+      responsive: !0,
+      fluid: !0,
+      controls: o,
+      alwaysCaptureHotkeys: !1,
+      controlBar: {
+        RemainingTimeDisplay: !1,
+        timeDivider: s,
+        // relates to built-in time display
+        durationDisplay: s,
+        currentTimeDisplay: s
+      },
+      inactivityTimeout: this.audioOnly ? l.defaults.audioInactivityTimeout : l.defaults.inactivityTimeout,
+      preload: "auto",
+      captionsButton: !1,
+      subsCapsButton: !1,
+      subtitlesButton: !1,
+      textTrackSettings: !1,
+      html5: {
+        nativeTextTracks: !1
+      },
+      languages: {
+        en: {
+          "captions off": "off",
+          "subtitles off": "off"
+        }
+      },
+      ...i
+    }), this.props.posterUrl && this.videojs.poster(this.props.posterUrl), this.handleNewProps(this.props), this.videojs.ready(() => {
+      this.bindHotkeys(), this.bindEvents(), this.props.onReady && this.props.onReady(this.videojs), this.restoreSettings(), this.setupTimeCode(), this.doEsothericWork(), this.setupMenu(), this.setupCustomSeekbar();
+    });
+  }
+  setupCustomSeekbar() {
+    if (this.props.seekBar) {
+      this.videojs.controlBar.progressControl.disable(), this.videojs.controlBar.progressControl.hide();
+      const t = {
+        target: this.container.getElementsByClassName("vjs-control-bar")[0],
+        player: this,
+        onDark: this.props.onDark,
+        ...this.props.seekBar
+      };
+      this.seekBar = new L(t), this.videojs.on("userinactive", () => {
+        var s, o, i, r;
+        this.controlsBelowPlayer ? (r = (i = this.seekBar) == null ? void 0 : i.showMarkers) == null || r.call(i) : this.seekBar && ((o = (s = this.seekBar).hideMarkers) == null || o.call(s));
+      }), this.videojs.on("useractive", () => {
+        this.seekBar && this.seekBar.showMarkers();
+      });
+    }
+  }
+  setupTimeCode(e = null) {
+    const t = {
+      onInput: (s, o, i) => {
+        this.seekTo(this.timeConverter.smpteToCurrentTimeFromStart(i));
+      },
+      onInputFocus: () => {
+        this.videojs.options_.inactivityTimeout = 0, this.videojs.cache_.inactivityTimeout = 0, this.videojs.reportUserActivity(), this.videojs.pause();
+      },
+      onInputBlur: () => {
+        this.videojs.options().inactivityTimeout = l.defaults.inactivityTimeout, this.videojs.cache_.inactivityTimeout = l.defaults.inactivityTimeout;
+      }
+    };
+    if (e !== null)
+      e.props = Object.assign(e.props, t), this.externalTimecodes.playback.push(e);
+    else if (this.props.timecode === !0 && this.props.controls !== !1) {
+      const s = document.getElementsByClassName("vjs-volume-panel")[0];
+      this.timeCode = new N(Object.assign(t, { target: s, appendAfter: !0 })), this.durationTimeCode = new N({
+        target: this.timeCode.container,
+        appendAfter: !0
+      });
+    }
+    (this.timeCode || this.externalTimecodes.playback.length > 0) && (this.videojs.on("timeupdate", () => {
+      this.updateTimeCode();
+    }), this.videojs.on("play", () => {
+      this.updateTimeCodeFrame();
+    }));
+  }
+  updateTimeCode() {
+    const e = this.videojs.currentTime(), t = this.timeConverter.secondsFromStartToSMPTE(e);
+    this.timeCode && this.timeCode.update(t), this.externalTimecodes.playback.length > 0 && this.externalTimecodes.playback.forEach((s) => {
+      s.update(t);
+    });
+  }
+  updateTimeCodeFrame() {
+    const e = this.timeConverter.currentFrame(this.videojs.currentTime());
+    this.timeCode && this.timeCode.update({ frame: e }), this.externalTimecodes.playback.length > 0 && this.externalTimecodes.playback.forEach((t) => {
+      t.update({ frame: e });
+    }), this.videojs.paused() || (this.rafID = requestAnimationFrame(() => {
+      this.updateTimeCodeFrame();
+    }));
+  }
+  setDurationTimeCode() {
+    const e = this.videojs.duration(), t = this.timeConverter.secondsFromStartToSMPTE(e);
+    t.frame = this.timeConverter.secondsToFrame(e), this.durationTimeCode.update(t), this.durationTimeCode.container.classList.add("duration");
+  }
+  bindHotkeys() {
+    this.bindings = [
+      {
+        key: ["space", "k"],
+        method: (e) => {
+          e.preventDefault && e.preventDefault(), this.togglePlayback();
+        }
+      },
+      {
+        key: "j",
+        method: () => {
+          this.videojs.hasStarted_ && this.jumpBackward();
+        }
+      },
+      {
+        key: "l",
+        method: () => {
+          this.videojs.hasStarted_ && this.jumpForward();
+        }
+      },
+      {
+        key: [".", "right"],
+        method: () => {
+          this.frameForward();
+        }
+      },
+      {
+        key: [",", "left"],
+        method: () => {
+          this.frameBackward();
+        }
+      },
+      {
+        key: "f",
+        method: () => {
+          this.toggleFullscreen();
+        }
+      },
+      {
+        key: "m",
+        method: () => {
+          this.toggleMute();
+        }
+      },
+      {
+        key: "up",
+        method: (e) => {
+          e.preventDefault && e.preventDefault(), this.volumeUp();
+        }
+      },
+      {
+        key: "down",
+        method: (e) => {
+          e.preventDefault && e.preventDefault(), this.volumeDown();
+        }
+      },
+      {
+        key: "h",
+        method: () => {
+          this.help.toggle();
+        }
+      },
+      {
+        key: "n",
+        method: () => {
+          this.menu && this.menu.toggle();
+        }
+      }
+    ], this.props.subtitles && this.bindings.push({
+      key: "c",
+      method: () => {
+        this.toggleSubs();
+      }
+    }), this.bindings.forEach((e) => {
+      m.bind(e.key, (t) => {
+        e.method(t), this.onHotkeyPressed(e.key);
+      });
+    });
+  }
+  unbindHotKeys() {
+    this.bindings && this.bindings.forEach((e) => {
+      m.unbind(e.key);
+    });
+  }
+  bindEvents() {
+    this.videojs.on("volumechange", () => {
+      this.persistSetting(l.settings.volume, this.volume);
+    }), this.videojs.textTracks().on("change", () => {
+      const t = this.videojs.textTracks().tracks_.filter((o) => o.mode === "showing");
+      t.length > 0 ? (this.videojs.el_.classList.add(l.classNames.subtitlesActive), this.persistSetting(l.settings.subs, !0), this.persistSetting(l.settings.subLang, t[0].language)) : (this.videojs.el_.classList.remove(l.classNames.subtitlesActive), this.persistSetting(l.settings.subs, !1));
+    });
+  }
+  volumeUp() {
+    this.videojs.controlBar.volumePanel.volumeControl.volumeBar.stepForward(), this.osd.feedback(l.osd.volchange, { volume: this.volume });
+  }
+  volumeDown() {
+    this.videojs.controlBar.volumePanel.volumeControl.volumeBar.stepBack(), this.osd.feedback(l.osd.volchange, { volume: this.volume });
+  }
+  toggleMute() {
+    this.videojs.muted() ? (this.videojs.muted(!1), this.osd.feedback(l.osd.volchange, { volume: this.volume })) : (this.videojs.muted(!0), this.osd.feedback(l.osd.volchange, { volume: this.volume }));
+  }
+  toggleFullscreen() {
+    this.videojs.isFullscreen() ? this.videojs.exitFullscreen() : this.videojs.requestFullscreen();
+  }
+  seek(e) {
+    let t = this.videojs.currentTime() + e;
+    t < 0 && (t = 0), this.videojs.currentTime(t);
+  }
+  seekTo(e) {
+    this.videojs.hasStarted() || this.videojs.hasStarted(!0), this.videojs.currentTime(e);
+  }
+  jumpForward() {
+    this.seek(l.defaults.jumpSeconds), this.osd.feedback(l.osd.jumpForward);
+  }
+  jumpBackward() {
+    this.seek(-l.defaults.jumpSeconds), this.osd.feedback(l.osd.jumpBackward);
+  }
+  frameForward() {
+    const e = this.timeConverter.secondsToFramesFromStart(this.videojs.currentTime()), t = Math.round(e) + 1;
+    this.videojs.currentTime(this.timeConverter.frameToCurrentTimeFromStart(t));
+  }
+  frameBackward() {
+    const e = this.timeConverter.secondsToFramesFromStart(this.videojs.currentTime()), t = Math.round(e) - 1;
+    this.videojs.currentTime(this.timeConverter.frameToCurrentTimeFromStart(t));
+  }
+  secondsToFramesFromStart(e) {
+    const t = this.props.frameRate || l.defaults.frameRate;
+    let s = e * t;
+    return s = Math.round(s), s;
+  }
+  doEsothericWork() {
+    this.props.color && (document.getElementsByClassName("vjs-play-progress")[0].style.backgroundColor = this.props.color), this.osd = new ae({
+      target: this.videoEl.parentElement
+    }), this.props.onCinema && (this.videoEl.parentElement.classList.add("has-cinema-button"), this.cinema = !1, this.addButtonToControlBar({
+      onClick: () => {
+        this.props.onCinema(!this.cinema), this.cinema = !this.cinema;
+      },
+      componentName: "CinemaButton",
+      className: "vdt-cinema-button",
+      title: "Cinema-mode"
+    })), 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 oe({
+      target: this.videoEl.parentElement,
+      onToggle: (e) => {
+        this.menu && this.menu.opened && this.menu.close(), e && !this.controlsBelowPlayer ? this.hideControls() : this.showControls();
+      }
+    });
+  }
+  restoreSettings() {
+    const e = localStorage.getItem(l.settings.volume), t = localStorage.getItem(l.settings.subs), s = localStorage.getItem(l.settings.subLang);
+    this.settings = {
+      // avoid .99999999 and other float pecularities in js
+      [l.settings.volume]: e !== null ? Math.round(e * 100) / 100 : 1,
+      [l.settings.subLang]: s !== null ? s : "en",
+      [l.settings.subs]: t !== null ? JSON.parse(t) : !1
+    }, this.volume = this.settings[l.settings.volume], this.settings[l.settings.subs] && this.enableSubs();
+  }
+  persistSetting(e, t) {
+    this.settings[e] = t, localStorage.setItem(e, t);
+  }
+  enableSubs() {
+    const e = this.videojs.textTracks();
+    for (let t = 0; t < e.length; t += 1) {
+      const s = e[t];
+      s.language === this.settings[l.settings.subLang] ? s.mode = "showing" : s.mode = "hidden";
+    }
+  }
+  disableSubs() {
+    const e = this.videojs.textTracks();
+    for (let t = 0; t < e.length; t += 1) {
+      const s = e[t];
+      s.mode = "hidden";
+    }
+  }
+  toggleSubs() {
+    this.videojs.textTracks().length > 0 && (this.videojs.textTracks().tracks_.filter((e) => e.mode === "showing").length > 0 ? this.disableSubs() : this.enableSubs());
+  }
+  /*
+  A quick example
+  options = {
+    onClick: ()=>{},
+    componentName: 'ScreenshotButton',
+    className: 'vdt-screenshot-button'
+  }
+  */
+  addButtonToControlBar(e) {
+    const t = v.getComponent("Button"), s = v.extend(t, {
+      /* eslint-disable func-names, object-shorthand */
+      constructor: function() {
+        t.apply(this, arguments), e.className && this.el_.classList.add(e.className), e.title && (this.el_.title = e.title);
+      },
+      handleClick: () => {
+        e.onClick && e.onClick();
+      }
+    });
+    v.registerComponent(e.componentName, s), this.videojs.getChild("controlBar").addChild(e.componentName, {}, 7);
+  }
+  // convenient getters / setters
+  get volume() {
+    return this.videojs.controlBar.volumePanel.volumeControl.volumeBar.getPercent();
+  }
+  set volume(e) {
+    e === 0 ? this.videojs.muted(!0) : (this.videojs.muted(!1), this.videojs.volume(e));
+  }
+  setupMenu() {
+    const e = this.props.menuItems || [], t = [];
+    if (this.props.sources.length > 1 && (this.props.sources.forEach((s) => {
+      s.label && t.push({
+        title: s.label,
+        onClick: () => {
+          this.src = s;
+        }
+      });
+    }), e.push({
+      title: "Sources",
+      getActiveIndex: () => {
+        const s = this.props.sources.find(
+          (o) => o.src === this.videojs.src()
+        );
+        return t.indexOf(
+          t.find((o) => o.title === s.label)
+        );
+      },
+      items: t
+    })), this.props.subtitles && this.props.subtitles.length > 0) {
+      const s = [
+        {
+          title: "Off",
+          onClick: () => {
+            this.disableSubs();
+          }
+        }
+      ];
+      this.props.subtitles.forEach((o, i) => {
+        s.push({
+          title: o.label,
+          onClick: () => {
+            const r = this.videojs.textTracks();
+            for (let n = 0; n < r.length; n += 1) {
+              const u = r[n];
+              n === i ? u.mode = "showing" : u.mode = "hidden";
+            }
+          }
+        });
+      }), e.push({
+        title: "Subtitles",
+        getActiveIndex: () => {
+          const o = this.videojs.textTracks();
+          for (let i = 0; i < o.length; i += 1)
+            if (o[i].mode === "showing")
+              return i + 1;
+          return 0;
+        },
+        items: s
+      });
+    }
+    if (e.length > 0) {
+      const s = this.videojs.el_;
+      this.menu = new re({
+        target: s,
+        items: e,
+        onOpen: () => {
+          this.controlsBelowPlayer || this.hideControls();
+        },
+        onClose: () => {
+          this.controlsBelowPlayer || this.videojs.controls(!0);
+        }
+      }), 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(!1), this.videojs.controls(!1), this.videojs.fluid(!0), this.videoEl.parentElement.classList.remove("vjs-user-active"), this.videojs.userActive(!1);
+  }
+  showControls() {
+    this.videojs.fluid(!this.controlsBelowPlayer), this.videojs.controls(!0), this.videojs.userActive(!0);
+  }
+  toggleControls() {
+    this.videojs.controls() ? this.hideControls() : this.showControls();
+  }
+  onHotkeyPressed(e) {
+    e !== "h" && this.help.state.active && this.help.hide();
+  }
+  // eslint-disable-next-line class-methods-use-this
+  triggerHotkey(e) {
+    m.trigger(e);
+  }
+  toStart() {
+    this.videojs.currentTime(0);
+  }
+  toEnd() {
+    this.videojs.currentTime(this.videojs.duration());
+  }
+  replay() {
+    this.toStart(), this.videojs.play();
+  }
+  play() {
+    this.videojs.play();
+  }
+  pause() {
+    this.videojs.paused() || this.videojs.pause();
+  }
+  togglePlayback() {
+    this.videojs.paused() ? (this.play(), this.videojs.hasStarted_ && this.osd.feedback(l.osd.play)) : (this.pause(), this.osd.feedback(l.osd.pause));
+  }
+  updateSmpte(e) {
+    const t = this.nodeNames.length - 1;
+    let s;
+    for (s = t; s > -1; s -= 1) {
+      const o = this.nodeNames[s];
+      if (typeof e[o] < "u" && e[o] !== parseInt(this.nodes[o].value, 10) && o !== this.state.selectedNode) {
+        const i = e[o].toString();
+        this.nodes[o].value = this.toDigitPairStr(i);
+      }
+    }
+  }
+  destroy() {
+    this.videojs.paused(!0), this.rafID && cancelAnimationFrame(this.rafID), this.videojs.dispose(), this.unbindHotKeys(), this.seekBar && this.seekBar.destroy();
+  }
+  get container() {
+    return this.videoEl.parentElement;
+  }
+  set onDark(e) {
+    e ? this.container.classList.add("on-dark") : this.container.classList.remove("on-dark"), this.seekBar && (this.seekBar.onDark = e);
+  }
+  get onDark() {
+    return this.container.classList.contains("on-dark");
+  }
+  set controlsBelowPlayer(e) {
+    this.videojs.controls() && (e ? (this.container.classList.add("controls-below-player"), this.videojs.fluid(!1)) : (this.container.classList.remove("controls-below-player"), this.videojs.fluid(!0)));
+  }
+  get controlsBelowPlayer() {
+    return this.container.classList.contains("controls-below-player");
+  }
+  get smpte() {
+    const e = this.videojs.currentTime();
+    return this.timeConverter.secondsFromStartToSMPTE(e);
+  }
+  set smpte(e) {
+    this.updateSmpte(e);
+  }
+  set src({ src: e, type: t = "video/mp4", label: s = null }) {
+    const o = this.videojs.currentTime(), i = this.props.sources.find((n) => n.src === e), r = () => {
+      let n = !1;
+      this.videojs.on("loadedmetadata", () => {
+        this.videojs.currentTime(o);
+      }), this.videojs.on("canplaythrough", () => {
+        n || (this.videojs.currentTime(o), n = !0, this.videojs.play());
+      });
+    };
+    i && Array.isArray(i) && i.length > 0 ? (this.videojs.addClass("vjs-waiting"), this.videojs.src({
+      ...i[0]
+    }), r()) : (this.videojs.addClass("vjs-waiting"), this.videojs.src(this.addSrc(e, t, s)), r());
+  }
+  get src() {
+    return this.videojs.src();
+  }
+  addSrc(e, t, s) {
+    const o = {
+      src: e,
+      type: t,
+      label: s
+    }, i = this.props.sources.push(o) - 1;
+    return this.props.sources[i];
+  }
+  // eslint-disable-next-line class-methods-use-this, no-unused-vars
+  removeSrc(e) {
+  }
+  set controls(e) {
+    e ? this.showControls() : this.hideControls();
+  }
+  get percentLoaded() {
+    return this.videojs.buffered().end(0) / this.videojs.duration() * 100;
+  }
+}
+const $ = v.prototype.constructor.getComponent("Button");
+$.prototype.handleKeyDown = function(c) {
+  c.keyCode === 32 && c.preventDefault();
 };
-var prettier = "@vidispine/prettier-config";
-var pkgInfo = {
-	name: name,
-	version: version,
-	license: license,
-	publishConfig: publishConfig,
-	description: description,
-	homepage: homepage,
-	repository: repository,
-	main: main,
-	module: module$1,
-	browser: browser,
-	scripts: scripts,
-	dependencies: dependencies,
-	devDependencies: devDependencies,
-	browserslist: browserslist,
-	eslintConfig: eslintConfig,
-	prettier: prettier
+v.prototype.constructor.registerComponent("Button", $);
+const ue = v.prototype.constructor.getComponent("SubsCapsButton");
+class me extends ue {
+  constructor(e, t = {}) {
+    super(e, t), this.menuButton_.off("mouseenter"), this.menuButton_.off("mouseleave");
+  }
+}
+v.prototype.constructor.registerComponent("SubsCapsButton", me);
+export {
+  ie as ExternalControls,
+  be as Player,
+  L as SeekBar,
+  N as TimeCodeDisplay,
+  he as VideoTime
 };
-
-const defaults=Object.freeze({frameRate:30000/1001,jumpSeconds:10,inactivityTimeout:1200,
-audioInactivityTimeout:0});const osd=Object.freeze({play:0,pause:1,volchange:2,jumpForward:3,jumpBackward:4});const settings=Object.freeze({volume:'volume-setting',subLang:'subtitles-language',subs:'subtitles-enabled'});const classNames=Object.freeze({poster:'has-poster',subtitles:'has-subtitles',subtitlesActive:'subtitles-active',onDark:'on-dark',loading:'loading'});const colors=Object.freeze({gray:'#787878',light:'rgba(255,255,255,.75)'});const packageInfo=Object.freeze({name:pkgInfo.name.split('/')[1],vendor:pkgInfo.name.split('/')[0]});const constants$2=Object.freeze({defaults,settings,classNames,colors,osd,packageInfo});
-
-function truncate(input,len){if(input.length>len)return "".concat(input.substring(0,len),"...");return input;}
-function reactiveSetters(){
-function handleNewProps(props){if(typeof props==='object'){const keys=Object.getOwnPropertyNames(props);const proto=Object.getPrototypeOf(this);keys.forEach(key=>{
-const descriptor=Object.getOwnPropertyDescriptor(proto,key);if(descriptor&&descriptor.set){
-this[key]=props[key];}});}}
-this.handleNewProps=handleNewProps;}
-function sanitize(str){const temp=document.createElement('div');temp.textContent=str;return temp.innerHTML;}
-
-const buttonNames=Object.freeze({play:'play-pause',start:'start',fb:'frame-backward',ff:'frame-forward',end:'end'});const buttons=[
-buttonNames.start,buttonNames.fb,buttonNames.play,buttonNames.ff,buttonNames.end];
-const CSS$2="\n  .vdt-external-controls{\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .control{\n    flex: 1;\n    flex-grow: 1;\n    height: 100%;\n    align-contents: center;\n    align-self: center;\n    text-align: center;\n    vertical-align: middle;\n    cursor: pointer;\n    user-select: none;\n    height: 20px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n  }\n\n  .control .icon{\n    display: inline-block;\n    height: 20px;\n    white-space: nowrap;\n    opacity: .9;\n  }\n\n  .control:hover .icon{ opacity: 1; }\n\n  .control .icon:before{\n    opacity: 1;\n    flex: 1;\n    align-self: center;\n    content: \" \";\n    display: inline-block;\n    margin: 0 auto;\n\n    /* triangles */\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 16px 0 16px 23px;\n    border-color: transparent transparent transparent ".concat(colors.gray,";\n  }\n\n  .vdt-external-controls.").concat(classNames.onDark," .control .icon:before{\n    border-color: transparent transparent transparent ").concat(colors.light,";\n  }\n\n  /* specific buttons */\n\n  .control.").concat(buttonNames.start,",\n  .control.").concat(buttonNames.end,"{\n    height: 20px;\n  }\n\n  .control.").concat(buttonNames.play,"{\n    height: 30px;\n    padding-top: 0px;\n    padding-bottom: 0px;\n  }\n\n  .control.").concat(buttonNames.play," .icon{\n    height: 30px;\n  }\n\n  .control.").concat(buttonNames.ff," .icon:before,\n  .control.").concat(buttonNames.fb," .icon:before,\n  .control.").concat(buttonNames.end," .icon:before,\n  .control.").concat(buttonNames.start," .icon:before{\n    border-width: 10px 0 10px 16px;\n  }\n\n  .control.").concat(buttonNames.fb," .icon,\n  .control.").concat(buttonNames.start,"{\n    transform: rotate(180deg);\n  }\n\n  .control.").concat(buttonNames.end," .icon:after,\n  .control.").concat(buttonNames.start," .icon:after{\n    content: \" \";\n    width: 4px;\n    height: 20px;\n    display: inline-block;\n    background: ").concat(colors.gray,";\n  }\n\n  .vdt-external-controls.").concat(classNames.onDark," .control.").concat(buttonNames.end," .icon:after,\n  .vdt-external-controls.").concat(classNames.onDark," .control.").concat(buttonNames.start," .icon:after{\n    background: ").concat(colors.light,";\n  }\n\n  /* stateful styles */\n  .control.").concat(buttonNames.play,".playing .icon:before{\n    height: 30px;\n    width: 6px;\n    border-width: 0px 8px 0px 8px;\n    border-color: transparent ").concat(colors.gray," transparent ").concat(colors.gray,";\n  }\n\n  .vdt-external-controls.").concat(classNames.onDark," .control.").concat(buttonNames.play,".playing .icon:before{\n    border-color: transparent ").concat(colors.light," transparent ").concat(colors.light,";\n  }\n\n  .vdt-external-controls.").concat(classNames.loading," .control.").concat(buttonNames.play,"{\n    border-color: transparent #f00 transparent #f00;\n  }\n");class ExternalControls{constructor(props){this.props=props;reactiveSetters.apply(this);this.state={playing:false,onDark:false,loading:false};this.shadowRoot=document.createElement('div');
-this.shadowRoot.className='vdt-external-controls-wrapper';this.container=document.createElement('div');this.container.className='vdt-external-controls';if(this.props.target){this.props.target.appendChild(this.shadowRoot);this.shadow=this.shadowRoot.attachShadow({mode:'open'});
-this.style=document.createElement('style');this.style.type='text/css';this.style.appendChild(document.createTextNode(CSS$2));this.shadow.appendChild(this.style);
-this.shadow.appendChild(this.container);}this.handleNewProps(props);this.bindEvents();this.draw();}draw(){this.buttons={};
-const excludes=this.props.excludes||[];buttons.forEach(buttonName=>{if(excludes.indexOf(buttonName)<0){const btn=document.createElement('div');btn.className="control ".concat(buttonName);btn.innerHTML='<span class="icon"></span>';btn.onclick=()=>{this.handlePress(buttonName);};this.buttons[buttonName]=btn;this.container.appendChild(btn);}});}
-bindEvents(){if(this.props.player&&this.props.player.videojs){const{player}=this.props;player.videojs.on('play',()=>{this.playing=true;});player.videojs.on('pause',()=>{this.playing=false;});player.videojs.on('stop',()=>{this.playing=false;});}}handlePress(buttonName){if(this.props.player){
-const{player}=this.props;if(player.osd)player.osd.disable();
-switch(buttonName){case buttonNames.start:player.toStart();break;case buttonNames.fb:player.triggerHotkey('left');break;case buttonNames.play:player.triggerHotkey('k');
-break;case buttonNames.ff:player.triggerHotkey('right');break;case buttonNames.end:player.toEnd();break;}if(player.osd)player.osd.enable();
-}else {switch(buttonName){case buttonNames.start:if(this.props.onPrev)this.props.onPrev();break;case buttonNames.fb:if(this.props.onFB)this.props.onFB();break;case buttonNames.play:if(this.playing){if(this.props.onPause)this.props.onPause();}else if(this.props.onPlay)this.props.onPlay();break;case buttonNames.ff:if(this.props.onFF)this.props.onFF();break;case buttonNames.end:if(this.props.onNext)this.props.onNext();break;}}}
-set playing(bool){if(bool){this.state.playing=true;this.buttons[buttonNames.play].classList.add('playing');}else {this.state.playing=false;this.buttons[buttonNames.play].classList.remove('playing');}}get playing(){return this.state.playing;}set onDark(bool){if(bool){this.state.onDark=true;this.container.classList.add(classNames.onDark);}else {this.state.onDark=false;this.container.classList.remove(classNames.onDark);}}get onDark(){return this.container.classList.contains(classNames.onDark);}set loading(bool){if(bool){this.state.loading=true;this.container.classList.add(classNames.loading);}else {this.state.loading=false;this.container.classList.remove(classNames.loading);}}get loading(){return this.state.loading;}}ExternalControls.buttonNames=buttonNames;
-
-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();});}}
-
-class OSD{constructor(props){this.props=props;this.state={enabled:true};this.container=document.createElement('div');this.container.className='vdt-player-osd';
-this.container.innerHTML="\n            <table>\n                <tbody>\n                    <td>\n                        <div class=\"osd-feedback-icon\"></div>\n                    </td>\n                </tbody>\n            </table>\n        ";
-this.iconEl=this.container.getElementsByClassName('osd-feedback-icon')[0];if(this.props.target)this.props.target.appendChild(this.container);}feedback(feedbackType){let details=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;
-if(!this.state.enabled){return;}let className;switch(feedbackType){case osd.pause:className='pause';break;case osd.play:className='play';break;case osd.volchange:
-const currentVolumeLevel=details.volume;
-let perceivedVolumeLevel;
-if(currentVolumeLevel===0){perceivedVolumeLevel='null';}else if(currentVolumeLevel>0.65){perceivedVolumeLevel='high';}else if(currentVolumeLevel<0.35){perceivedVolumeLevel='low';}else {perceivedVolumeLevel='mid';}className="volchange ".concat(perceivedVolumeLevel);break;case osd.jumpForward:className='forward-jump';break;case osd.jumpBackward:className='backward-jump';break;}if(this.osdTimeout){
-this.container.classList.remove('active');clearTimeout(this.osdTimeout);}
-this.container.classList.add('active');this.osdTimeout=setTimeout(()=>{this.container.classList.remove('active');},200);
-this.iconEl.className="osd-feedback-icon ".concat(className);
-}disable(){this.state.enabled=false;}enable(){this.state.enabled=true;}}
-
-const constants=Object.freeze({className:'vdt-seekbar',defaults:{bgColor:'#fafafa',fillColor:'#f00',regionColor:'#f6e58d',
-markerWidth:16,regionAccentColor:'#00a8ff',transitionTime:300
-},markerTypes:{in:'in',out:'out'}});const CSS=(bgColor,fillColor)=>"\n  .".concat(constants.className,"{\n    user-select: none;\n    background: ").concat(colors.light,";\n    height: 6px;\n    width: 100%;\n    position: relative;\n    cursor: pointer;\n    z-index: 5;\n  }\n\n  .").concat(classNames.onDark,".").concat(constants.className,"{\n    background: ").concat(colors.gray,";\n  }\n\n  .fill, .load-indicator{\n    height: 100%;\n    display: inline-block;\n    position: absolute;\n    left: 0px;\n    top: 0px;\n    background: ").concat(fillColor,";\n    transition: width ").concat(constants.defaults.transitionTime,"ms linear;\n    z-index: 2;\n  }\n\n  .load-indicator{\n    background: #e1e1e1;\n    z-index: 1;\n    opacity: .2;\n    transition: none;\n  }\n\n  .").concat(classNames.onDark,".").concat(constants.className," .load-indicator{\n    background: white;\n  }\n\n  .").concat(constants.className,".dragging .fill{\n    transition: none;\n  }\n\n\n  .marker, .region{\n    position: absolute;\n    top: 0px;\n    height: 100%;\n    background: cyan;\n    width: 1px;\n    display: inline-block;\n    z-index: 4;\n  }\n\n  .marker{\n    transition: opacity ").concat(constants.defaults.transitionTime,"ms linear;\n  }\n\n  .marker{ display: none; }\n  .marker.active{ display: initial; }\n\n  .marker .handle{\n    position: absolute;\n    bottom: 10px; right: 0px;\n    width: ").concat(constants.defaults.markerWidth,"px;\n    height: 28px;\n    background: #999;\n    border-radius: 3px;\n    cursor: col-resize;\n    z-index: 3;\n    box-sizing: border-box;\n  }\n\n  .marker.regional .handle{\n    background: ").concat(constants.defaults.regionAccentColor,";\n    box-shadow: -2px 1px 1px rgba(0,0,0,.1);\n  }\n\n  .marker.regional.in .handle{\n    box-shadow: 2px 1px 1px rgba(0,0,0,.1);\n  }\n\n  .marker.in .handle{\n    border-bottom-left-radius: 40px;\n  }\n\n  .marker.out .handle{\n    left: 1px;\n    right: initial;\n    border-bottom-right-radius: 20px;\n  }\n\n  .handle:active{\n    background: ").concat(constants.defaults.regionColor,";\n  }\n\n  .region{\n    position: absolute;\n    width: auto;\n    background: ").concat(constants.defaults.regionColor,";\n    opacity: .7;\n  }\n\n  .region.nav{\n    background: transparent;\n    opacity: 1;\n    border-left: 1px solid cyan;\n  }\n\n  .region.nav .bubble,\n  .region.nav:after{\n    content: \" \";\n    height: 16px;\n    bottom: 10px;\n    width: 16px;\n    border-radius: 16px;\n    background: ").concat(constants.defaults.regionAccentColor,";\n    position: absolute;\n    margin-left: -8px;\n    transition: transform 200ms ease-out;\n    transform: translate3d(0px, 0px, 0px);\n    transform-origin: bottom center;\n  }\n\n  .region.nav .popout{\n    width: 160px;\n    z-index: 4;\n    background: rgba(28, 28, 28, .7);\n    color: white;\n    font-size: 14px;\n    min-height: 100px;\n    bottom: 16px;\n    left: -80px;\n    position: absolute;\n    border-radius: 8px;\n    -webkit-backdrop-filter: blur(10px);\n    font-family: Arial, Helvetica, sans-serif;\n    overflow: hidden;\n    opacity: 0;\n    visibility: hidden;\n  }\n\n  .region.nav.right-aligned .popout{\n    right: 0px;\n    left: initial;\n  }\n\n  .region.nav.left-aligned .popout{\n    left: -32px;\n  }  \n\n  .region.nav .popout .title{\n    padding: 4px 14px;\n    text-align: center;\n    color: black;\n    background: white;\n  }\n\n  .region.nav .popout .annotation{\n    padding: 8px 12px;\n    font-weight: light;\n    color: rgba(255,255,255,.9);\n  }\n\n  .region.nav:after{\n    width: 1px;\n    left: 8px;\n    height: 10px;\n    bottom: 0px;\n    background: #00a8ff;\n  }\n\n  .region.nav:hover{\n    background: rgba(28, 28, 28, .5);\n  }\n\n  .region.nav.has-popout:hover .bubble{\n    background: rgba(28, 28, 28, .8);\n    opacity: 1;\n    z-index: 3;\n  }\n\n  .region.nav:hover:after,\n  .region.nav:hover:before{\n    background: rgba(28, 28, 28, .8);\n  }\n\n  .region.nav:hover .popout{\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .").concat(constants.className,".dragging .bubble{\n    transform: scale3d(.75,.75,.75);\n  }\n\n  .").concat(constants.className,".hide-markers .marker{\n    opacity: 0;\n  }\n\n");class Region{constructor(props){const regionDefaultProps={in:null,out:null,title:'',annotation:'',el:null
-};Object.assign(this,regionDefaultProps,props);
-}}class SeekBar{constructor(props){this.props=props;reactiveSetters.apply(this);
-this.container=document.createElement('div');this.container.className="".concat(constants.className,"-wrapper");this.state={in:null,
-out:null,markersEnabled:this.props.markersEnabled===undefined?true:this.props.markersEnabled,regions:[],
-dragging:false};this.markers={};if(this.props.target){this.shadow=this.container.attachShadow({mode:'open'});this.props.target.appendChild(this.container);
-this.style=document.createElement('style');this.style.type='text/css';
-const bgColor=this.props.bgColor?this.props.bgColor:constants.defaults.bgColor;const fillColor=this.props.fillColor?this.props.fillColor:constants.defaults.fillColor;this.style.innerHTML=CSS(sanitize(bgColor),sanitize(fillColor));this.shadow.appendChild(this.style);}this.bindEvents();this.draw();this.bindHotkeys();
-const{player}=this.props;if(player){player.videojs.on('loadedmetadata',()=>{this.handleNewProps(this.props);});}}
-bindEvents(){
-if(this.props.player){const{player}=this.props;player.videojs.on('timeupdate',()=>{const progressFraction=player.videojs.currentTime()/player.videojs.duration();this.fill.style.width="".concat(100*progressFraction,"%");});player.videojs.on('progress',()=>{this.percentLoaded=player.percentLoaded;});}}bindHotkeys(){this.bindings=[];
-if(this.props.player){const{player}=this.props;this.bindings=[{key:['i'],method:()=>{if(this.markersEnabled)this.in=player.videojs.currentTime();}},{key:['o'],method:()=>{if(this.markersEnabled)this.out=player.videojs.currentTime();}},{key:['shift+i'],method:()=>{if(this.markersEnabled)this.navigateToIn();}},{key:['shift+o'],method:()=>{if(this.markersEnabled)this.navigateToOut();}}];}if(this.props.player){const{player}=this.props;mousetrap__default["default"].bind('i',()=>{if(this.markersEnabled)this.in=player.videojs.currentTime();});mousetrap__default["default"].bind('o',()=>{if(this.markersEnabled)this.out=player.videojs.currentTime();});mousetrap__default["default"].bind('shift+i',()=>{if(this.markersEnabled)this.navigateToIn();});mousetrap__default["default"].bind('shift+o',()=>{if(this.markersEnabled)this.navigateToOut();});}
-this.bindings.forEach(binding=>{mousetrap__default["default"].bind(binding.key,e=>{binding.method(e);});});}unbindHotKeys(){this.bindings&&this.bindings.forEach(binding=>{mousetrap__default["default"].unbind(binding.key);});}handleSeek(event){
-if(this.props.player){const{player}=this.props;if(this.state.regions){let clickedOnRegion=false;let preventSeek=false;
-this.state.regions.forEach(region=>{if(region.el.contains(event.target)){
-if(this.props.onRegionClick){preventSeek=this.props.onRegionClick(region);if(!preventSeek){player.seekTo(region.in);}}else {player.seekTo(region.in);}clickedOnRegion=true;}});
-if(clickedOnRegion)return;}const seekFractionX=(event.clientX-this.bar.getBoundingClientRect().left)/this.bar.offsetWidth;
-const timeToSeek=seekFractionX*player.videojs.duration();
-player.seekTo(timeToSeek);}
-}handleSeekDrag(mouseDownEvent){const barOffset=this.bar.getBoundingClientRect().left;
-const barWidth=this.bar.getBoundingClientRect().width;
-const duration=this.props.player.videojs.duration();
-let left;const drag=e=>{left=e.clientX-barOffset;const pxDragged=Math.abs(mouseDownEvent.clientX-e.clientX);if(left>=0&&left<barWidth&&pxDragged>1){
-this.dragging=true;const fractionFromStart=parseFloat(left)/barWidth;const seconds=fractionFromStart*duration;this.props.player.videojs.currentTime(seconds);}e.preventDefault();};const stopDrag=e=>{this.dragging=false;
-document.removeEventListener('mousemove',drag,false);document.removeEventListener('mouseup',stopDrag,false);const fractionFromStart=parseFloat(left)/barWidth;const seconds=fractionFromStart*duration;this.props.player.videojs.currentTime(seconds);e.stopPropagation();};
-document.addEventListener('mousemove',drag,false);document.addEventListener('mouseup',stopDrag,false);}draw(){this.bar=document.createElement('div');this.bar.className=constants.className;this.bar.onclick=e=>{if(!e.target.classList.contains('marker')&&!e.target.classList.contains('handle')){this.handleSeek(e);}};
-this.bar.addEventListener('mousedown',e=>{e.preventDefault();
-if(!this.dragging){
-this.handleSeekDrag(e);}},false);this.fill=document.createElement('div');this.fill.className='fill';this.loadIndicator=document.createElement('div');this.loadIndicator.className='load-indicator';this.region=document.createElement('div');this.region.className='region';this.bar.appendChild(this.fill);this.bar.appendChild(this.loadIndicator);this.bar.appendChild(this.region);this.shadow.appendChild(this.bar);this.drawMarkers();}drawMarkers(){
-if(this.markersEnabled){const markerIn=this.markers[constants.markerTypes.in]=document.createElement('div');const markerOut=this.markers[constants.markerTypes.out]=document.createElement('div');markerIn.className="marker ".concat(constants.markerTypes.in);markerOut.className="marker ".concat(constants.markerTypes.out);const handleIn=document.createElement('div');const handleOut=document.createElement('div');handleIn.className=handleOut.className='handle';handleIn.addEventListener('mousedown',e=>{e.preventDefault();
-e.stopPropagation();
-this.handleMarkerDrag(markerIn,constants.markerTypes.in,e);},false);handleOut.addEventListener('mousedown',e=>{e.preventDefault();
-e.stopPropagation();
-this.handleMarkerDrag(markerOut,constants.markerTypes.out,e);},false);markerIn.appendChild(handleIn);markerOut.appendChild(handleOut);this.bar.appendChild(markerIn);this.bar.appendChild(markerOut);}}updateMarkers(marker){this.markers[marker.type].style.left="".concat(marker.value*100,"%");this.markers[marker.type].classList.add('active');
-if(this.state.regions){
-const matchingRegions=[];const isRegional=matchingRegions.length>0;if(isRegional){this.markers[marker.type].classList.add('regional');}else {this.markers[marker.type].classList.remove('regional');}}this.drawInAndOutRegion();}drawInAndOutRegion(){
-if(this.state.in!==null&&this.state.out!==null){this.region.style.left=this.markers[constants.markerTypes.in].style.left;this.region.style.right="".concat(100-parseFloat(this.markers[constants.markerTypes.out].style.left.replace('%','')),"%");}}
-handleMarkerDrag(markerNode,type,mouseDownEvent){
-const barOffset=this.bar.getBoundingClientRect().left;
-const barWidth=this.bar.getBoundingClientRect().width;
-const duration=this.props.player.videojs.duration();
-let dragHappened=false;const drag=e=>{const pxDragged=Math.abs(mouseDownEvent.clientX-e.clientX);const markerOffset=type===constants.markerTypes.in?constants.defaults.markerWidth/2:-(constants.defaults.markerWidth/2);const left=e.clientX-barOffset+markerOffset;if(left>=0&&left<barWidth&&pxDragged>1){
-dragHappened=this.dragging=true;markerNode.style.left="".concat(left,"px");markerNode.classList.add('active');const fractionFromStart=parseFloat(markerNode.getBoundingClientRect().left-barOffset)/barWidth;const seconds=fractionFromStart*duration;this.props.player.videojs.currentTime(seconds);}e.preventDefault();};const stopDrag=e=>{this.dragging=false;
-document.removeEventListener('mousemove',drag,false);document.removeEventListener('mouseup',stopDrag,false);const fractionFromStart=parseFloat(markerNode.getBoundingClientRect().left-barOffset)/barWidth;const seconds=fractionFromStart*duration;this[type]=seconds;this.props.player.videojs.currentTime(seconds);
-if(!dragHappened){if(type===constants.markerTypes.in){this.navigateToIn();}else {this.navigateToOut();}}this.props.onDragFinish&&this.props.onDragFinish({type,seconds});e.stopPropagation();};
-document.addEventListener('mousemove',drag,false);document.addEventListener('mouseup',stopDrag,false);}
-cleanupMarkers(){let removedMarker=false;if(this.state.in===null){this.markers[constants.markerTypes.in].classList.remove('active');removedMarker=true;}if(this.state.out===null){this.markers[constants.markerTypes.out].classList.remove('active');removedMarker=true;}if(removedMarker){
-this.region.style.left='initial';this.region.style.right='initial';}}clearMarkers(){this.in=null;this.out=null;}
-setInFromCurrent(){this.in=this.props.player.videojs.currentTime();}setOutFromCurrent(){this.out=this.props.player.videojs.currentTime();}navigateToIn(){const{player}=this.props;player.seekTo(this.in);}navigateToOut(){const{player}=this.props;player.seekTo(this.out);}
-set in(val){if(!this.state.markersEnabled)return;this.state.in=val;if(val!==null&&val!==undefined){const{player}=this.props;this.updateMarkers({type:constants.markerTypes.in,value:val/player.videojs.duration()});
-if(this.state.out!==null&&val>this.state.out){this.out=null;}this.props.onIn&&this.props.onIn(this.state.in);}else {this.cleanupMarkers();}}get in(){return this.state.in;}set out(val){if(!this.state.markersEnabled)return;this.state.out=val;if(val!==null&&val!==undefined){const{player}=this.props;this.updateMarkers({type:constants.markerTypes.out,value:val/player.videojs.duration()});
-if(this.state.in!=null&&val<this.state.in){this.in=null;}this.props.onOut&&this.props.onOut(this.state.out);}else {this.cleanupMarkers();}}get out(){return this.state.out;}get markersEnabled(){return this.state.markersEnabled;}set markersEnabled(bool){if(typeof bool==='boolean'){if(!bool){this.clearMarkers();this.state.markersEnabled=false;}else {!this.markersEnabled&&this.drawMarkers();this.state.markersEnabled=true;}}}set regions(regionArray){
-if(this.state.regions.length<1){
-regionArray&&regionArray.forEach(region=>{this.addRegion(region);});}else {
-this.state.regions.forEach((region,index)=>{this.removeRegion(index);});this.state.regions=[];this.regions=regionArray;
-}}get regions(){return this.state.regions;}set dragging(bool){
-if(bool&&!this.state.dragging){this.state.dragging=true;this.bar.classList.add('dragging');}else if(!bool&&this.state.dragging){this.state.dragging=false;this.bar.classList.remove('dragging');}}get dragging(){return this.state.dragging;}addRegion(regionObj){if(regionObj.constructor.name===Region.name){this.state.regions.push(regionObj);this.drawRegion(regionObj);}else {
-this.addRegion(new Region(regionObj));}}removeRegion(param){if(typeof param===typeof Region);else {
-this.state.regions[param].el.remove();this.state.regions[param]=null;delete this.state.regions[param];}}drawRegion(region){const duration=this.props.player.videojs.duration();
-const inPoint=region.in;const leftPercentage=inPoint/duration*100;const rightPercentage=(duration-region.out)/duration*100;const regionEl=document.createElement('div');regionEl.className='region nav ';regionEl.innerHTML='<div class="bubble"></div>';if(region.title&&region.annotation){let alignmentClassName='';if(leftPercentage>70)alignmentClassName='right-aligned';if(leftPercentage<30)alignmentClassName='left-aligned';regionEl.className+=" has-popout ".concat(alignmentClassName);const popout=document.createElement('div');popout.className='popout';popout.innerHTML="\n        <div class=\"title\">\n          ".concat(sanitize(region.title),"\n        </div>\n        <div class=\"annotation\">\n          ").concat(truncate(sanitize(region.annotation),72),"\n        </div>\n      ");regionEl.appendChild(popout);}regionEl.style.left="".concat(leftPercentage,"%");regionEl.style.right="".concat(rightPercentage,"%");region.el=regionEl;this.bar.appendChild(regionEl);}set onDark(bool){if(bool){this.bar.classList.add(classNames.onDark);}else {this.bar.classList.remove(classNames.onDark);}}get onDark(){return this.container.classList.contains(classNames.onDark);}set percentLoaded(val){this.loadIndicator.style.width="".concat(val,"%");}destroy(){this.unbindHotKeys();}toggleMarkers(){if(this.bar.classList.contains('hide-markers')){this.showMarkers();}else {this.hideMarkers();}}hideMarkers(){this.bar.classList.add('hide-markers');}showMarkers(){this.bar.classList.remove('hide-markers');}}SeekBar.Region=Region;
-
-const timeCodeNodeNames=['hours','minutes','seconds','frame'];class TimeCodeDisplay{
-constructor(props){this.props=props;this.state={selectedNode:null
-};const classNames=['vdt-timecode','vjs-time-control',
-!this.props.onInput?'duration':''
-];this.container=document.createElement('div');this.container.className=classNames.join(' ');this.nodeNames=[].concat(timeCodeNodeNames);
-this.nodes={};
-this.nodeNames.forEach((nodeName,index)=>{const node=document.createElement('input');node.className=nodeName;node.tabIndex=-1;
-if(this.props.onInput){
-node.maxLength=2;node.onfocus=e=>{this.handleInputFocus(e,nodeName);};node.onblur=e=>{this.handleInputBlur(e,nodeName);};node.onmouseup=e=>{e.preventDefault();e.currentTarget.select();};node.onkeydown=e=>{this.handleTimeCodeInput(e,nodeName);};node.onkeyup=e=>{this.handleTimeCodeInputOnKeyUp(e,nodeName);};}else {node.readOnly=true;
-}this.nodes[nodeName]=node;const colon=document.createElement('span');colon.innerHTML=':';this.container.appendChild(node);index!==this.nodeNames.length-1&&this.container.appendChild(colon);});if(this.props.target){if(this.props.appendAfter){
-this.props.target.parentNode.insertBefore(this.container,this.props.target.nextSibling);}else {this.props.target.appendChild(this.container);}
-this.reset();}else {
-console.error("Unable to instantiate a new ".concat(this.constructor.name," without target DOM node"));
-}}update(valuesObj){
-const startCount=this.nodeNames.length-1;let i;for(i=startCount;i>-1;i--){
-const key=this.nodeNames[i];if(typeof valuesObj[key]!=='undefined'&&valuesObj[key]!==parseInt(this.nodes[key].value,10)&&key!==this.state.selectedNode){
-const str=valuesObj[key].toString();this.nodes[key].value=this.toDigitPairStr(str);}}}reset(){this.update({hours:0,minutes:0,seconds:0,frame:0});}handleInputFocus(e,nodeName){this.state.selectedNode=nodeName;
-this.nodes[nodeName].select();this.props.onInputFocus&&this.props.onInputFocus(nodeName);}handleInputBlur(e,nodeName){this.state.selectedNode=null;
-this.props.onInputBlur&&this.props.onInputBlur(nodeName);}sanitize(input){const output=input.replace(/[^0-9]/g,'');return output;}toDigitPairStr(strValue){return strValue.length<2?"0".concat(strValue):strValue;}handleTimeCodeInput(e,nodeName){const nodeIndex=this.nodeNames.indexOf(nodeName);switch(e.code){case'Enter':
-this.checkAndNormalizeAllInputs();this.props.onInput&&this.props.onInput(e,nodeName,{hours:this.hours,minutes:this.minutes,seconds:this.seconds,frame:this.frame});this[nodeName]=e.currentTarget.value;e.currentTarget.blur();
-break;case'Tab':
-e.preventDefault();
-if(!e.shiftKey){if(nodeIndex+1<=this.nodeNames.length-1){this.nodes[this.nodeNames[nodeIndex+1]].focus();
-}else {this.nodes[this.nodeNames[0]].focus();
-}}else if(nodeIndex-1>=0){this.nodes[this.nodeNames[nodeIndex-1]].focus();
-}else {this.nodes[this.nodeNames[this.nodeNames.length-1]].focus();
-}break;}}handleTimeCodeInputOnKeyUp(e,nodeName){
-if(this.nodes[nodeName].value.length===2&&!isNaN(e.key)){const nodeIndex=this.nodeNames.indexOf(nodeName);
-if(nodeIndex+1<=this.nodeNames.length-1){
-this.nodes[this.nodeNames[nodeIndex+1]].focus();
-}}}checkAndNormalizeAllInputs(){this.nodeNames.forEach(nodeName=>{if(this.nodes[nodeName].value.length<1){
-this.nodes[nodeName].value='00';}
-this.nodes[nodeName].value=this.toDigitPairStr(this.sanitize(this.nodes[nodeName].value));});}
-set frame(val){this.nodes.frame.value=this.toDigitPairStr(val);}get frame(){return parseInt(this.nodes.frame.value,10);}set seconds(val){this.nodes.seconds.value=this.toDigitPairStr(val);}get seconds(){return parseInt(this.nodes.seconds.value,10);}set minutes(val){this.nodes.minutes.value=this.toDigitPairStr(val);}get minutes(){return parseInt(this.nodes.minutes.value,10);}set hours(val){this.nodes.hours.value=this.toDigitPairStr(val);}get hours(){return parseInt(this.nodes.hours.value,10);}getFormatted(key){return this.toDigitPairStr(this[key].toString());}get smpte(){return {hours:this.hours,minutes:this.minutes,seconds:this.seconds,frame:this.frame};}set smpte(o){this.update(o);}get smpteString(){return "".concat(this.getFormatted('hours'),":").concat(this.getFormatted('minutes'),":").concat(this.getFormatted('seconds'),":").concat(this.getFormatted('frame'));}set external(bool){if(bool){this.container.classList.add('external');}else {this.container.classList.remove('external');}}get external(){return this.container.classList.contains('external');}}
-
-class VideoTime{constructor(props){if(props.frameRate===undefined){delete this;throw new Error('No "frameRate" option provided, refer to docs.');}else {this.props=props;}}secondsToFramesFromStart(seconds){let frame=seconds*this.props.frameRate;frame=Math.round(frame);return frame;
-}currentTimeToFramesFromStart(currentTime){return this.secondsToFramesFromStart(currentTime);}secondsToFrame(seconds){let frame=this.secondsToFramesFromStart(seconds)%this.props.frameRate;frame=Math.round(frame);return frame;}currentFrame(currentTime){return Math.round(this.secondsToFrame(currentTime));}frameToCurrentTimeFromStart(frame){return frame/this.props.frameRate;
-}smpteToCurrentTimeFromStart(values){return values.hours*3600+values.minutes*60+values.seconds+values.frame/this.props.frameRate;}secondsFromStartToSMPTE(secondsFromStart){let secondsFS=secondsFromStart;const hours=Math.floor(secondsFS/3600);const minutesWithoutHours=secondsFS/60-60*hours;
-secondsFS%=3600;const minutes=Math.floor(minutesWithoutHours);const seconds=Math.floor(secondsFS%60);const frame=this.secondsToFrame(secondsFS);return {hours,minutes,seconds,frame};}}
-
-function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;})),keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty__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;
-exports.SeekBar = SeekBar;
-exports.TimeCodeDisplay = TimeCodeDisplay;
-exports.VideoTime = VideoTime;