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

package/dist/index.umd.cjs

@@ -0,0 +1,460 @@
+(function(g,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("mousetrap"),require("video.js/dist/alt/video.core.min")):typeof define=="function"&&define.amd?define(["exports","mousetrap","video.js/dist/alt/video.core.min"],p):(g=typeof globalThis<"u"?globalThis:g||self,p(g["@vidispine/vdt-videojs"]={},g.mousetrap,g.videojs))})(this,function(g,p,v){"use strict";const L={name:"@vidispine/vdt-videojs",version:"23.2.0-pre.2",license:"SEE LICENSE IN LICENSE.md",publishConfig:{access:"public"},description:"Javascript player based on videojs",homepage:"https://vidispine.github.io/vdt/?path=/docs/vdt-videojs",repository:{type:"git",url:"https://github.com/vidispine/vdt.git",directory:"packages/vdt-videojs"},type:"module",main:"./dist/index.umd.cjs",module:"./dist/index.js",style:"./dist/index.css",exports:{".":{import:"./dist/index.js",require:"./dist/index.umd.cjs"},"./dist/index.css":"./dist/index.css"},files:["dist"],scripts:{build:"yarn vite build","build:watch":"yarn vite build --watch --mode development",lint:"eslint . --max-warnings=0 --ext .js,.jsx,.ts,.tsx,.md,.mdx",format:"prettier . --check"},dependencies:{mousetrap:"^1.6.5","video.js":"^7.21.2"},devDependencies:{"@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.2.0"},browserslist:["since 2017-06"],eslintConfig:{extends:["@vidispine/eslint-config-base","@vidispine/eslint-config-mdx","@vidispine/eslint-config-storybook"]},prettier:"@vidispine/prettier-config"},I=Object.freeze({frameRate:3e4/1001,jumpSeconds:10,inactivityTimeout:1200,audioInactivityTimeout:0}),k=Object.freeze({play:0,pause:1,volchange:2,jumpForward:3,jumpBackward:4}),M=Object.freeze({volume:"volume-setting",subLang:"subtitles-language",subs:"subtitles-enabled"}),u=Object.freeze({poster:"has-poster",subtitles:"has-subtitles",subtitlesActive:"subtitles-active",onDark:"on-dark",loading:"loading"}),f=Object.freeze({gray:"#787878",light:"rgba(255,255,255,.75)"}),P=Object.freeze({name:L.name.split("/")[1],vendor:L.name.split("/")[0]}),l=Object.freeze({defaults:I,settings:M,classNames:u,colors:f,osd:k,packageInfo:P});function O(c,e){return c.length>e?`${c.substring(0,e)}...`:c}function j(){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"}),R=[a.start,a.fb,a.play,a.ff,a.end],H=`
+  .vdt-external-controls{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .control{
+    flex: 1;
+    flex-grow: 1;
+    height: 100%;
+    align-contents: center;
+    align-self: center;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    height: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .control .icon{
+    display: inline-block;
+    height: 20px;
+    white-space: nowrap;
+    opacity: .9;
+  }
+
+  .control:hover .icon{ opacity: 1; }
+
+  .control .icon:before{
+    opacity: 1;
+    flex: 1;
+    align-self: center;
+    content: " ";
+    display: inline-block;
+    margin: 0 auto;
+
+    /* triangles */
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 16px 0 16px 23px;
+    border-color: transparent transparent transparent ${f.gray};
+  }
+
+  .vdt-external-controls.${u.onDark} .control .icon:before{
+    border-color: transparent transparent transparent ${f.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: ${f.gray};
+  }
+
+  .vdt-external-controls.${u.onDark} .control.${a.end} .icon:after,
+  .vdt-external-controls.${u.onDark} .control.${a.start} .icon:after{
+    background: ${f.light};
+  }
+
+  /* stateful styles */
+  .control.${a.play}.playing .icon:before{
+    height: 30px;
+    width: 6px;
+    border-width: 0px 8px 0px 8px;
+    border-color: transparent ${f.gray} transparent ${f.gray};
+  }
+
+  .vdt-external-controls.${u.onDark} .control.${a.play}.playing .icon:before{
+    border-color: transparent ${f.light} transparent ${f.light};
+  }
+
+  .vdt-external-controls.${u.loading} .control.${a.play}{
+    border-color: transparent #f00 transparent #f00;
+  }
+`;class ${constructor(e){this.props=e,j.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(H)),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||[];R.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)}})}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}}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(u.onDark)):(this.state.onDark=!1,this.container.classList.remove(u.onDark))}get onDark(){return this.container.classList.contains(u.onDark)}set loading(e){e?(this.state.loading=!0,this.container.classList.add(u.loading)):(this.state.loading=!1,this.container.classList.remove(u.loading))}get loading(){return this.state.loading}}$.buttonNames=a;class A{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,p.bind("esc",()=>{this.hide()}),this.props.onToggle&&this.props.onToggle(!0))}hide(){this.state.active&&(this.container.classList.remove("active"),this.state.active=!1,p.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)"}}),z=()=>`
+    .${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 F{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 W{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=z(),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 F({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),p.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(),p.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 F({target:this.secondaryLevel,...o,onClick:n=>{this.handleSubItemSelected(n,o)},selected:i===t});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 _{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 k.pause:s="pause";break;case k.play:s="play";break;case k.volchange:const o=t.volume;let i;o===0?i="null":o>.65?i="high":o<.35?i="low":i="mid",s=`volchange ${i}`;break;case k.jumpForward:s="forward-jump";break;case k.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",markerWidth:16,regionAccentColor:"#00a8ff",transitionTime:300},markerTypes:{in:"in",out:"out"}}),U=(c,e)=>`
+  .${d.className}{
+    user-select: none;
+    background: ${f.light};
+    height: 6px;
+    width: 100%;
+    position: relative;
+    cursor: pointer;
+    z-index: 5;
+  }
+
+  .${u.onDark}.${d.className}{
+    background: ${f.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;
+  }
+
+  .${u.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},e)}}class E{constructor(e){if(this.props=e,j.apply(this),this.container=document.createElement("div"),this.container.className=`${d.className}-wrapper`,this.state={in:null,out:null,markersEnabled:this.props.markersEnabled===void 0?!0:this.props.markersEnabled,regions:[],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=U(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)})}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;p.bind("i",()=>{this.markersEnabled&&(this.in=e.videojs.currentTime())}),p.bind("o",()=>{this.markersEnabled&&(this.out=e.videojs.currentTime())}),p.bind("shift+i",()=>{this.markersEnabled&&this.navigateToIn()}),p.bind("shift+o",()=>{this.markersEnabled&&this.navigateToOut()})}this.bindings.forEach(e=>{p.bind(e.key,t=>{e.method(t)})})}unbindHotKeys(){this.bindings&&this.bindings.forEach(e=>{p.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=m=>{i=m.clientX-t;const y=Math.abs(e.clientX-m.clientX);if(i>=0&&i<s&&y>1){this.dragging=!0;const w=parseFloat(i)/s*o;this.props.player.videojs.currentTime(w)}m.preventDefault()},n=m=>{this.dragging=!1,document.removeEventListener("mousemove",r,!1),document.removeEventListener("mouseup",n,!1);const b=parseFloat(i)/s*o;this.props.player.videojs.currentTime(b),m.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("%",""))}%`)}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 m=b=>{const w=Math.abs(s.clientX-b.clientX),C=t===d.markerTypes.in?d.defaults.markerWidth/2:-(d.defaults.markerWidth/2),N=b.clientX-o+C;if(N>=0&&N<i&&w>1){n=this.dragging=!0,e.style.left=`${N}px`,e.classList.add("active");const Q=parseFloat(e.getBoundingClientRect().left-o)/i*r;this.props.player.videojs.currentTime(Q)}b.preventDefault()},y=b=>{this.dragging=!1,document.removeEventListener("mousemove",m,!1),document.removeEventListener("mouseup",y,!1);const C=parseFloat(e.getBoundingClientRect().left-o)/i*r;this[t]=C,this.props.player.videojs.currentTime(C),n||(t===d.markerTypes.in?this.navigateToIn():this.navigateToOut()),this.props.onDragFinish&&this.props.onDragFinish({type:t,seconds:C}),b.stopPropagation()};document.addEventListener("mousemove",m,!1),document.addEventListener("mouseup",y,!1)}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}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)}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 m=document.createElement("div");m.className="popout",m.innerHTML=`
+        <div class="title">
+          ${x(e.title)}
+        </div>
+        <div class="annotation">
+          ${O(x(e.annotation),72)}
+        </div>
+      `,r.appendChild(m)}r.style.left=`${o}%`,r.style.right=`${i}%`,e.el=r,this.bar.appendChild(r)}set onDark(e){e?this.bar.classList.add(u.onDark):this.bar.classList.remove(u.onDark)}get onDark(){return this.container.classList.contains(u.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")}}E.Region=T;const K=["hours","minutes","seconds","frame"];class S{constructor(e){this.props=e,this.state={selectedNode:null};const t=["vdt-timecode","vjs-time-control",this.props.onInput?"":"duration"];this.container=document.createElement("div"),this.container.className=t.join(" "),this.nodeNames=[].concat(K),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))})}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 D{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 ve="",X={"audio/x-aac":"audio/aac"},q=c=>X[c]||c;class J{constructor(e){this.props=e,j.apply(this);const t=["video-js","vjs-big-play-centered",this.props.posterUrl?l.classNames.poster:"",this.props.subtitles&&this.props.subtitles.length>0?l.classNames.subtitles:"","init"];this.externalTimecodes={duration:[],playback:[]},this.timeConverter=new D({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=q(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,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 E(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 S(Object.assign(t,{target:s,appendAfter:!0})),this.durationTimeCode=new S({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=>{p.bind(e.key,t=>{e.method(t),this.onHotkeyPressed(e.key)})})}unbindHotKeys(){this.bindings&&this.bindings.forEach(e=>{p.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 _({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 A({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={[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())}addButtonToControlBar(e){const t=v.getComponent("Button"),s=v.extend(t,{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)}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 m=r[n];n===i?m.mode="showing":m.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 W({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()}triggerHotkey(e){p.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]}removeSrc(e){}set controls(e){e?this.showControls():this.hideControls()}get percentLoaded(){return this.videojs.buffered().end(0)/this.videojs.duration()*100}}const B=v.prototype.constructor.getComponent("Button");B.prototype.handleKeyDown=function(c){c.keyCode===32&&c.preventDefault()},v.prototype.constructor.registerComponent("Button",B);const V=v.prototype.constructor.getComponent("SubsCapsButton");class G extends V{constructor(e,t={}){super(e,t),this.menuButton_.off("mouseenter"),this.menuButton_.off("mouseleave")}}v.prototype.constructor.registerComponent("SubsCapsButton",G),g.ExternalControls=$,g.Player=J,g.SeekBar=E,g.TimeCodeDisplay=S,g.VideoTime=D,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidispine/vdt-videojs",
-  "version": "23.1.0",
+  "version": "23.2.0-pre.2",
   "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
     "access": "public"
@@ -12,36 +12,38 @@
     "url": "https://github.com/vidispine/vdt.git",
     "directory": "packages/vdt-videojs"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "browser": "dist/index.umd.js",
+  "type": "module",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "style": "./dist/index.css",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "rimraf dist && rollup -c",
-    "build:watch": "yarn build -w --environment DEVELOPMENT",
-    "lint": "eslint . --ext js,md,mdx"
+    "build": "yarn vite build",
+    "build:watch": "yarn vite build --watch --mode development",
+    "lint": "eslint . --max-warnings=0 --ext .js,.jsx,.ts,.tsx,.md,.mdx",
+    "format": "prettier . --check"
   },
   "dependencies": {
-    "@babel/runtime": "^7.21.0",
     "mousetrap": "^1.6.5",
     "video.js": "^7.21.2"
   },
   "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": "23.1.0",
-    "@vidispine/eslint-config-mdx": "23.1.0",
-    "@vidispine/eslint-config-storybook": "23.1.0",
-    "@vidispine/prettier-config": "23.1.0",
+    "@vidispine/eslint-config-base": "23.2.0-pre.2",
+    "@vidispine/eslint-config-mdx": "23.2.0-pre.2",
+    "@vidispine/eslint-config-storybook": "23.2.0-pre.2",
+    "@vidispine/prettier-config": "23.2.0-pre.2",
     "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"
+    "vite": "4.2.0"
   },
   "browserslist": [
     "since 2017-06"

package/deprecated-app/README.md

@@ -1,21 +0,0 @@
-# Demo/Test app for videojs
-
-This folder contain a parcel v1 app used to demo and tests for videojs in the browser
-
-It is disabled due to parcel v1 deprecation and since we're using rollup to build all libraries.
-We should strive to demo in storybook and write tests we can use in an automated test pipeline instead.
-
-## Temporarily enable it by adding this to package.json
-
-```json
-{
-  "devDependency": {
-    "parcel-bundler": "^1.12.5"
-    //...
-  },
-  "script": {
-    "start": "rm -rf ./deprecated-app/build && rm -rf ./.cache && parcel ./deprecated-app/index.html --no-source-maps --no-hmr -p 3002 --open --out-dir ./deprecated-app/build"
-    //...
-  }
-}
-```