@webority/ui-elements 0.58.1 → 0.59.1

package/dist/{fileViewerImage-Bis2gnyc.js → fileViewerImage-DEhhKbIU.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t,t as n}from"./fileViewerUi-DasgDsU-.js";var r=[.1,.25,.5,.75,1,1.5,2,3,4],i=[.25,.5,1,2,4],a=16,o=5,s=class{constructor(e,t){this.shell=e,this.source=t,this.zoom=`fit`,this.rotation=0,this.area={width:0,height:0},this.destroyed=!1}load(){let e=document.createElement(`img`);e.className=`wui-file-viewer-image`,e.alt=this.shell.name(),e.decoding=`async`,e.draggable=!1,e.addEventListener(`load`,()=>{this.destroyed||(this.natural={width:e.naturalWidth||300,height:e.naturalHeight||150},this._build(e),this.shell.loaded({kind:`image`,pages:1}))}),e.addEventListener(`error`,()=>{this.destroyed||this.shell.fail(Error(`The image could not be decoded.`))}),e.src=this.source.src,this.img=e}destroy(){this.destroyed=!0,this._resizeObserver?.disconnect(),this._onKeyDown&&this.shell.host.removeEventListener(`keydown`,this._onKeyDown),this._printFrame?.remove(),this.img?.removeAttribute(`src`)}_build(e){let{center:r,end:a,body:o,host:s}=this.shell;this.zoomOutButton=n(`zoom-out`,`Zoom out`),this.zoomOutButton.addEventListener(`click`,()=>this._stepZoom(-1)),this.zoomButton=document.createElement(`button`),this.zoomButton.type=`button`,this.zoomButton.className=`wui-file-viewer-zoom`,t(this.zoomButton,{label:`Zoom`,items:()=>[...i.map(e=>({key:String(e),label:`${Math.round(e*100)}%`,checked:this.zoom===e})),{key:`fit-divider`,divider:!0},{key:`fit`,label:`Fit`,checked:this.zoom===`fit`}],onPick:e=>this._setZoom(e===`fit`?`fit`:Number(e))}),this.zoomInButton=n(`zoom-in`,`Zoom in`),this.zoomInButton.addEventListener(`click`,()=>this._stepZoom(1));let c=n(`rotate-ccw`,`Rotate left`);c.addEventListener(`click`,()=>this._rotate(-90));let l=n(`rotate-cw`,`Rotate right`);l.addEventListener(`click`,()=>this._rotate(90));let u=document.createElement(`span`);u.className=`wui-file-viewer-divider wui-file-viewer-print`;let d=n(`printer`,`Print`,{className:`wui-file-viewer-print`});d.addEventListener(`click`,()=>this.print()),u.hidden=d.hidden=!this.shell.print(),r.append(this.zoomOutButton,this.zoomButton,this.zoomInButton),a.prepend(c,l,u,d),this.scroller=document.createElement(`div`),this.scroller.className=`wui-file-viewer-scroll wui-file-viewer-image-scroll wui-scroll`,this.scroller.tabIndex=0,this.scroller.setAttribute(`role`,`region`),this.scroller.setAttribute(`aria-label`,`Image`),this.stage=document.createElement(`div`),this.stage.className=`wui-file-viewer-image-stage`,this.stage.append(e),this.scroller.append(this.stage),o.replaceChildren(this.scroller),this.scroller.addEventListener(`pointerdown`,e=>this._panStart(e)),this.scroller.addEventListener(`pointermove`,e=>this._panMove(e));for(let e of[`pointerup`,`pointercancel`,`lostpointercapture`])this.scroller.addEventListener(e,()=>this._panEnd());this.scroller.addEventListener(`wheel`,e=>{if(!e.ctrlKey&&!e.metaKey)return;e.preventDefault();let t=performance.now();t-(this._lastWheelZoom??0)<120||(this._lastWheelZoom=t,this._stepZoom(e.deltaY<0?1:-1))},{passive:!1}),this._onKeyDown=e=>this._keyDown(e),s.addEventListener(`keydown`,this._onKeyDown),this._resizeObserver=new ResizeObserver(()=>{let e=this.scroller.clientWidth,t=this.scroller.clientHeight;e===this.area.width&&t===this.area.height||(this.area={width:e,height:t},this._layout())}),this._resizeObserver.observe(this.scroller),this.area={width:this.scroller.clientWidth,height:this.scroller.clientHeight},this._layout()}_turned(){let{width:e,height:t}=this.natural;return this.rotation%180==0?{width:e,height:t}:{width:t,height:e}}scale(){if(typeof this.zoom==`number`)return this.zoom;let{width:e,height:t}=this._turned(),n=Math.min((this.area.width-2*a)/e,(this.area.height-2*a)/t);return Math.max(n,.01)}_layout(){if(!this.stage)return;let t=this.scale(),n=this._turned();this.stage.style.width=`${Math.round(n.width*t)}px`,this.stage.style.height=`${Math.round(n.height*t)}px`,this.img.style.width=`${Math.round(this.natural.width*t)}px`,this.img.style.height=`${Math.round(this.natural.height*t)}px`,this.img.style.transform=`translate(-50%, -50%) rotate(${this.rotation}deg)`;let r=Math.round(t*100);this.zoomButton.innerHTML=`${r}%${e(`chevron-down`,{size:12})}`,this.zoomButton.setAttribute(`aria-label`,`Zoom, ${r}%`),this.zoomOutButton.disabled=this._zoomStep(-1)==null,this.zoomInButton.disabled=this._zoomStep(1)==null}_zoomStep(e){let t=this.scale();return e>0?r.find(e=>e>t+.001)??null:[...r].reverse().find(e=>e<t-.001)??null}_stepZoom(e){let t=this._zoomStep(e);t!=null&&this._setZoom(t)}_setZoom(e){let t=this.scroller,n=(t.scrollLeft+t.clientWidth/2)/Math.max(t.scrollWidth,1),r=(t.scrollTop+t.clientHeight/2)/Math.max(t.scrollHeight,1);this.zoom=e,this._layout(),t.scrollLeft=n*t.scrollWidth-t.clientWidth/2,t.scrollTop=r*t.scrollHeight-t.clientHeight/2}_rotate(e){this.rotation=(this.rotation+e+360)%360,this._setZoom(this.zoom)}_keyDown(e){if(!(e.defaultPrevented||e.altKey||!(e.ctrlKey||e.metaKey))){if(e.key===`+`||e.key===`=`)this._stepZoom(1);else if(e.key===`-`||e.key===`_`)this._stepZoom(-1);else if(e.key===`0`)this._setZoom(`fit`);else return;e.preventDefault()}}_panStart(e){let t=this.scroller;e.button!==0||t.scrollWidth<=t.clientWidth&&t.scrollHeight<=t.clientHeight||(this._pan={id:e.pointerId,x:e.clientX,y:e.clientY,left:t.scrollLeft,top:t.scrollTop,active:!1})}_panMove(e){let t=this._pan;if(!t)return;let n=e.clientX-t.x,r=e.clientY-t.y;if(!t.active){if(Math.abs(n)<o&&Math.abs(r)<o)return;t.active=!0,this.scroller.setPointerCapture(t.id),this.scroller.classList.add(`wui-file-viewer-panning`)}this.scroller.scrollLeft=t.left-n,this.scroller.scrollTop=t.top-r}_panEnd(){let e=this._pan;e?.active&&(this.scroller.hasPointerCapture(e.id)&&this.scroller.releasePointerCapture(e.id),this.scroller.classList.remove(`wui-file-viewer-panning`)),this._pan=null}print(){this._printFrame?.remove();let e=document.createElement(`iframe`);e.className=`wui-file-viewer-print-frame`,e.title=`Image for printing`,e.tabIndex=-1,e.setAttribute(`aria-hidden`,`true`);let t=this.rotation%180!=0,n=new URL(this.source.src,document.baseURI).href,r=t?`max-width: 100vh; max-height: 100vw;`:`max-width: 100vw; max-height: 100vh;`;e.srcdoc=`<!doctype html><html><head><title>${c(this.shell.name())}</title><style>
+import{a as e,n as t,t as n}from"./fileViewerUi-KPTQsM_Y.js";var r=[.1,.25,.5,.75,1,1.5,2,3,4],i=[.25,.5,1,2,4],a=16,o=5,s=class{constructor(e,t){this.shell=e,this.source=t,this.zoom=`fit`,this.rotation=0,this.area={width:0,height:0},this.destroyed=!1}load(){let e=document.createElement(`img`);e.className=`wui-file-viewer-image`,e.alt=this.shell.name(),e.decoding=`async`,e.draggable=!1,e.addEventListener(`load`,()=>{this.destroyed||(this.natural={width:e.naturalWidth||300,height:e.naturalHeight||150},this._build(e),this.shell.loaded({kind:`image`,pages:1}))}),e.addEventListener(`error`,()=>{this.destroyed||this.shell.fail(Error(`The image could not be decoded.`))}),e.src=this.source.src,this.img=e}destroy(){this.destroyed=!0,this._resizeObserver?.disconnect(),this._onKeyDown&&this.shell.host.removeEventListener(`keydown`,this._onKeyDown),this._printFrame?.remove(),this.img?.removeAttribute(`src`)}_build(e){let{center:r,end:a,body:o,host:s}=this.shell;this.zoomOutButton=n(`zoom-out`,`Zoom out`),this.zoomOutButton.addEventListener(`click`,()=>this._stepZoom(-1)),this.zoomButton=document.createElement(`button`),this.zoomButton.type=`button`,this.zoomButton.className=`wui-file-viewer-zoom`,t(this.zoomButton,{label:`Zoom`,items:()=>[...i.map(e=>({key:String(e),label:`${Math.round(e*100)}%`,checked:this.zoom===e})),{key:`fit-divider`,divider:!0},{key:`fit`,label:`Fit`,checked:this.zoom===`fit`}],onPick:e=>this._setZoom(e===`fit`?`fit`:Number(e))}),this.zoomInButton=n(`zoom-in`,`Zoom in`),this.zoomInButton.addEventListener(`click`,()=>this._stepZoom(1));let c=n(`rotate-ccw`,`Rotate left`);c.addEventListener(`click`,()=>this._rotate(-90));let l=n(`rotate-cw`,`Rotate right`);l.addEventListener(`click`,()=>this._rotate(90));let u=document.createElement(`span`);u.className=`wui-file-viewer-divider wui-file-viewer-print`;let d=n(`printer`,`Print`,{className:`wui-file-viewer-print`});d.addEventListener(`click`,()=>this.print()),u.hidden=d.hidden=!this.shell.print(),r.append(this.zoomOutButton,this.zoomButton,this.zoomInButton),a.prepend(c,l,u,d),this.scroller=document.createElement(`div`),this.scroller.className=`wui-file-viewer-scroll wui-file-viewer-image-scroll wui-scroll`,this.scroller.tabIndex=0,this.scroller.setAttribute(`role`,`region`),this.scroller.setAttribute(`aria-label`,`Image`),this.stage=document.createElement(`div`),this.stage.className=`wui-file-viewer-image-stage`,this.stage.append(e),this.scroller.append(this.stage),o.replaceChildren(this.scroller),this.scroller.addEventListener(`pointerdown`,e=>this._panStart(e)),this.scroller.addEventListener(`pointermove`,e=>this._panMove(e));for(let e of[`pointerup`,`pointercancel`,`lostpointercapture`])this.scroller.addEventListener(e,()=>this._panEnd());this.scroller.addEventListener(`wheel`,e=>{if(!e.ctrlKey&&!e.metaKey)return;e.preventDefault();let t=performance.now();t-(this._lastWheelZoom??0)<120||(this._lastWheelZoom=t,this._stepZoom(e.deltaY<0?1:-1))},{passive:!1}),this._onKeyDown=e=>this._keyDown(e),s.addEventListener(`keydown`,this._onKeyDown),this._resizeObserver=new ResizeObserver(()=>{let e=this.scroller.clientWidth,t=this.scroller.clientHeight;e===this.area.width&&t===this.area.height||(this.area={width:e,height:t},this._layout())}),this._resizeObserver.observe(this.scroller),this.area={width:this.scroller.clientWidth,height:this.scroller.clientHeight},this._layout()}_turned(){let{width:e,height:t}=this.natural;return this.rotation%180==0?{width:e,height:t}:{width:t,height:e}}scale(){if(typeof this.zoom==`number`)return this.zoom;let{width:e,height:t}=this._turned(),n=Math.min((this.area.width-2*a)/e,(this.area.height-2*a)/t);return Math.max(n,.01)}_layout(){if(!this.stage)return;let t=this.scale(),n=this._turned();this.stage.style.width=`${Math.round(n.width*t)}px`,this.stage.style.height=`${Math.round(n.height*t)}px`,this.img.style.width=`${Math.round(this.natural.width*t)}px`,this.img.style.height=`${Math.round(this.natural.height*t)}px`,this.img.style.transform=`translate(-50%, -50%) rotate(${this.rotation}deg)`;let r=Math.round(t*100);this.zoomButton.innerHTML=`${r}%${e(`chevron-down`,{size:12})}`,this.zoomButton.setAttribute(`aria-label`,`Zoom, ${r}%`),this.zoomOutButton.disabled=this._zoomStep(-1)==null,this.zoomInButton.disabled=this._zoomStep(1)==null}_zoomStep(e){let t=this.scale();return e>0?r.find(e=>e>t+.001)??null:[...r].reverse().find(e=>e<t-.001)??null}_stepZoom(e){let t=this._zoomStep(e);t!=null&&this._setZoom(t)}_setZoom(e){let t=this.scroller,n=(t.scrollLeft+t.clientWidth/2)/Math.max(t.scrollWidth,1),r=(t.scrollTop+t.clientHeight/2)/Math.max(t.scrollHeight,1);this.zoom=e,this._layout(),t.scrollLeft=n*t.scrollWidth-t.clientWidth/2,t.scrollTop=r*t.scrollHeight-t.clientHeight/2}_rotate(e){this.rotation=(this.rotation+e+360)%360,this._setZoom(this.zoom)}_keyDown(e){if(!(e.defaultPrevented||e.altKey||!(e.ctrlKey||e.metaKey))){if(e.key===`+`||e.key===`=`)this._stepZoom(1);else if(e.key===`-`||e.key===`_`)this._stepZoom(-1);else if(e.key===`0`)this._setZoom(`fit`);else return;e.preventDefault()}}_panStart(e){let t=this.scroller;e.button!==0||t.scrollWidth<=t.clientWidth&&t.scrollHeight<=t.clientHeight||(this._pan={id:e.pointerId,x:e.clientX,y:e.clientY,left:t.scrollLeft,top:t.scrollTop,active:!1})}_panMove(e){let t=this._pan;if(!t)return;let n=e.clientX-t.x,r=e.clientY-t.y;if(!t.active){if(Math.abs(n)<o&&Math.abs(r)<o)return;t.active=!0,this.scroller.setPointerCapture(t.id),this.scroller.classList.add(`wui-file-viewer-panning`)}this.scroller.scrollLeft=t.left-n,this.scroller.scrollTop=t.top-r}_panEnd(){let e=this._pan;e?.active&&(this.scroller.hasPointerCapture(e.id)&&this.scroller.releasePointerCapture(e.id),this.scroller.classList.remove(`wui-file-viewer-panning`)),this._pan=null}print(){this._printFrame?.remove();let e=document.createElement(`iframe`);e.className=`wui-file-viewer-print-frame`,e.title=`Image for printing`,e.tabIndex=-1,e.setAttribute(`aria-hidden`,`true`);let t=this.rotation%180!=0,n=new URL(this.source.src,document.baseURI).href,r=t?`max-width: 100vh; max-height: 100vw;`:`max-width: 100vw; max-height: 100vh;`;e.srcdoc=`<!doctype html><html><head><title>${c(this.shell.name())}</title><style>
 @page { margin: 10mm; }
 html, body { margin: 0; height: 100%; }
 body { display: flex; align-items: center; justify-content: center; }

package/dist/{fileViewerMedia-CaJaVnjE.js → fileViewerMedia-B12HzBnN.js}

@@ -1 +1 @@
-import{a as e,i as t,n,r,t as i}from"./fileViewerUi-DasgDsU-.js";var a=[.5,.75,1,1.25,1.5,2],o=5,s=.1;function c(e){if(!Number.isFinite(e)||e<0)return`0:00`;let t=Math.floor(e),n=Math.floor(t/3600),r=Math.floor(t%3600/60),i=String(t%60).padStart(2,`0`);return n?`${n}:${String(r).padStart(2,`0`)}:${i}`:`${r}:${i}`}var l=e=>e instanceof Element&&e.closest(`input, textarea, select, button, a, .dropdown-menu`),u=class{constructor(e,t){this.shell=e,this.source=t,this.destroyed=!1}load(){let{kind:e,src:t,captions:n}=this.source,r=document.createElement(e);if(r.className=`wui-file-viewer-${e}`,r.preload=`metadata`,r.playsInline=!0,e===`video`&&n){let e=document.createElement(`track`);e.kind=`captions`,e.label=`Captions`,e.srclang=`en`,e.src=n,r.append(e)}let i=this.shell.prefs;typeof i.volume==`number`&&(r.volume=Math.min(Math.max(i.volume,0),1)),r.muted=i.muted===!0,r.addEventListener(`loadedmetadata`,()=>{this.destroyed||(r.playbackRate=a.includes(i.speed)?i.speed:1,this._build(),this.shell.loaded({kind:e,pages:1}))},{once:!0}),r.addEventListener(`error`,()=>{this.destroyed||this.shell.fail(Error(`The file could not be played.`))}),r.src=t,this.media=r}destroy(){this.destroyed=!0,this._onKeyDown&&this.shell.host.removeEventListener(`keydown`,this._onKeyDown),this.media&&(this.media.pause(),this.media.removeAttribute(`src`),this.media.load())}_build(){let{body:t,host:r}=this.shell,o=this.media,s=this.source.kind,c=document.createElement(`div`);c.className=`wui-file-viewer-player wui-file-viewer-player-${s}`;let l=document.createElement(`div`);if(l.className=`wui-file-viewer-stage`,l.tabIndex=0,l.setAttribute(`role`,`group`),l.setAttribute(`aria-label`,s===`video`?`Video`:`Audio`),s===`audio`){let t=document.createElement(`div`);t.className=`wui-file-viewer-audio-art`,t.innerHTML=e(`music`,{size:40}),l.append(t,o)}else l.append(o),o.addEventListener(`click`,()=>this.togglePlay());let u=document.createElement(`div`);u.className=`wui-file-viewer-controls`,this.playButton=i(`play`,`Play`,{size:18}),this.playButton.addEventListener(`click`,()=>this.togglePlay()),this.timeNow=document.createElement(`span`),this.timeNow.className=`wui-file-viewer-time`,this.seek=document.createElement(`input`),this.seek.type=`range`,this.seek.className=`form-range wui-file-viewer-seek`,this.seek.min=`0`,this.seek.step=`any`,this.seek.setAttribute(`aria-label`,`Seek`),this.seek.addEventListener(`input`,()=>{o.currentTime=Number(this.seek.value)}),this.timeTotal=document.createElement(`span`),this.timeTotal.className=`wui-file-viewer-time`,this.muteButton=i(`volume-high`,`Mute`,{size:18}),this.muteButton.addEventListener(`click`,()=>this._setMuted(!o.muted)),this.volume=document.createElement(`input`),this.volume.type=`range`,this.volume.className=`form-range wui-file-viewer-volume`,this.volume.min=`0`,this.volume.max=`1`,this.volume.step=`0.05`,this.volume.setAttribute(`aria-label`,`Volume`),this.volume.addEventListener(`input`,()=>this._setVolume(Number(this.volume.value))),this.speedButton=document.createElement(`button`),this.speedButton.type=`button`,this.speedButton.className=`wui-file-viewer-zoom wui-file-viewer-speed`,n(this.speedButton,{label:`Playback speed`,items:()=>a.map(e=>({key:String(e),label:`${e}x`,checked:o.playbackRate===e})),onPick:e=>this._setSpeed(Number(e))}),u.append(this.playButton,this.timeNow,this.seek,this.timeTotal,this.muteButton,this.volume,this.speedButton),s===`video`&&this.source.captions&&(this.captionsButton=i(`subtitle`,`Show captions`,{size:18}),this.captionsButton.addEventListener(`click`,()=>this._setCaptions(!this._captionsOn())),u.append(this.captionsButton)),c.append(l,u),t.replaceChildren(c);for(let e of[`play`,`pause`,`ended`])o.addEventListener(e,()=>this._syncPlay());o.addEventListener(`timeupdate`,()=>this._syncTime()),o.addEventListener(`durationchange`,()=>this._syncTime()),o.addEventListener(`volumechange`,()=>this._syncVolume()),o.addEventListener(`ratechange`,()=>this._syncSpeed()),this._onKeyDown=e=>this._keyDown(e),r.addEventListener(`keydown`,this._onKeyDown),this._syncPlay(),this._syncTime(),this._syncVolume(),this._syncSpeed(),this._syncCaptions()}seekTo(e){let t=this.media.duration;this.media.currentTime=Math.min(Math.max(e,0),Number.isFinite(t)?t:1/0)}togglePlay(){this.media.paused||this.media.ended?this.media.play().catch(e=>{console.warn(`[wui-file-viewer] play refused:`,e?.message)}):this.media.pause()}_setMuted(e){this.media.muted=e,!e&&this.media.volume===0&&(this.media.volume=.5),this.shell.savePrefs({muted:this.media.muted,volume:this.media.volume})}_setVolume(e){this.media.volume=Math.min(Math.max(e,0),1),this.media.muted=this.media.volume===0,this.shell.savePrefs({muted:this.media.muted,volume:this.media.volume})}_setSpeed(e){this.media.playbackRate=e,this.shell.savePrefs({speed:e})}_captionsOn(){return this.media.textTracks?.[0]?.mode===`showing`}_setCaptions(e){let t=this.media.textTracks?.[0];t&&(t.mode=e?`showing`:`hidden`),this._syncCaptions()}_syncPlay(){let e=!this.media.paused&&!this.media.ended;r(this.playButton,e?`pause`:`play`,18),t(this.playButton,e?`Pause`:`Play`),this.shell.host.classList.toggle(`wui-file-viewer-playing`,e)}_syncTime(){let e=this.media.currentTime,t=this.media.duration;this.timeNow.textContent=c(e),this.timeTotal.textContent=c(t),this.seek.max=String(Number.isFinite(t)?t:0),this.seek.value=String(e),this.seek.setAttribute(`aria-valuetext`,`${c(e)} of ${c(t)}`)}_syncVolume(){let e=this.media.muted||this.media.volume===0;r(this.muteButton,e?`volume-mute`:`volume-high`,18),t(this.muteButton,e?`Unmute`:`Mute`),this.volume.value=String(this.media.muted?0:this.media.volume)}_syncSpeed(){let e=`${this.media.playbackRate}x`;this.speedButton.textContent=e,this.speedButton.setAttribute(`aria-label`,`Playback speed, ${e}`)}_syncCaptions(){if(!this.captionsButton)return;let e=this._captionsOn();this.captionsButton.setAttribute(`aria-pressed`,String(e)),t(this.captionsButton,e?`Hide captions`:`Show captions`)}_keyDown(e){if(e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey||l(e.target))return;let t=this.media,n=e.key.toLowerCase();if(n===` `||n===`k`)this.togglePlay();else if(n===`arrowleft`)t.currentTime=Math.max(0,t.currentTime-o);else if(n===`arrowright`)t.currentTime=Math.min(t.duration||0,t.currentTime+o);else if(n===`arrowup`)this._setVolume(t.volume+s);else if(n===`arrowdown`)this._setVolume(t.volume-s);else if(n===`m`)this._setMuted(!t.muted);else if(n===`c`&&this.captionsButton)this._setCaptions(!this._captionsOn());else return;e.preventDefault()}};export{u as MediaView};
+import{a as e,i as t,n,r,t as i}from"./fileViewerUi-KPTQsM_Y.js";var a=[.5,.75,1,1.25,1.5,2],o=5,s=.1;function c(e){if(!Number.isFinite(e)||e<0)return`0:00`;let t=Math.floor(e),n=Math.floor(t/3600),r=Math.floor(t%3600/60),i=String(t%60).padStart(2,`0`);return n?`${n}:${String(r).padStart(2,`0`)}:${i}`:`${r}:${i}`}var l=e=>e instanceof Element&&e.closest(`input, textarea, select, button, a, .dropdown-menu`),u=class{constructor(e,t){this.shell=e,this.source=t,this.destroyed=!1}load(){let{kind:e,src:t,captions:n}=this.source,r=document.createElement(e);if(r.className=`wui-file-viewer-${e}`,r.preload=`metadata`,r.playsInline=!0,e===`video`&&n){let e=document.createElement(`track`);e.kind=`captions`,e.label=`Captions`,e.srclang=`en`,e.src=n,r.append(e)}let i=this.shell.prefs;typeof i.volume==`number`&&(r.volume=Math.min(Math.max(i.volume,0),1)),r.muted=i.muted===!0,r.addEventListener(`loadedmetadata`,()=>{this.destroyed||(r.playbackRate=a.includes(i.speed)?i.speed:1,this._build(),this.shell.loaded({kind:e,pages:1}))},{once:!0}),r.addEventListener(`error`,()=>{this.destroyed||this.shell.fail(Error(`The file could not be played.`))}),r.src=t,this.media=r}destroy(){this.destroyed=!0,this._onKeyDown&&this.shell.host.removeEventListener(`keydown`,this._onKeyDown),this.media&&(this.media.pause(),this.media.removeAttribute(`src`),this.media.load())}_build(){let{body:t,host:r}=this.shell,o=this.media,s=this.source.kind,c=document.createElement(`div`);c.className=`wui-file-viewer-player wui-file-viewer-player-${s}`;let l=document.createElement(`div`);if(l.className=`wui-file-viewer-stage`,l.tabIndex=0,l.setAttribute(`role`,`group`),l.setAttribute(`aria-label`,s===`video`?`Video`:`Audio`),s===`audio`){let t=document.createElement(`div`);t.className=`wui-file-viewer-audio-art`,t.innerHTML=e(`music`,{size:40}),l.append(t,o)}else l.append(o),o.addEventListener(`click`,()=>this.togglePlay());let u=document.createElement(`div`);u.className=`wui-file-viewer-controls`,this.playButton=i(`play`,`Play`,{size:18}),this.playButton.addEventListener(`click`,()=>this.togglePlay()),this.timeNow=document.createElement(`span`),this.timeNow.className=`wui-file-viewer-time`,this.seek=document.createElement(`input`),this.seek.type=`range`,this.seek.className=`form-range wui-file-viewer-seek`,this.seek.min=`0`,this.seek.step=`any`,this.seek.setAttribute(`aria-label`,`Seek`),this.seek.addEventListener(`input`,()=>{o.currentTime=Number(this.seek.value)}),this.timeTotal=document.createElement(`span`),this.timeTotal.className=`wui-file-viewer-time`,this.muteButton=i(`volume-high`,`Mute`,{size:18}),this.muteButton.addEventListener(`click`,()=>this._setMuted(!o.muted)),this.volume=document.createElement(`input`),this.volume.type=`range`,this.volume.className=`form-range wui-file-viewer-volume`,this.volume.min=`0`,this.volume.max=`1`,this.volume.step=`0.05`,this.volume.setAttribute(`aria-label`,`Volume`),this.volume.addEventListener(`input`,()=>this._setVolume(Number(this.volume.value))),this.speedButton=document.createElement(`button`),this.speedButton.type=`button`,this.speedButton.className=`wui-file-viewer-zoom wui-file-viewer-speed`,n(this.speedButton,{label:`Playback speed`,items:()=>a.map(e=>({key:String(e),label:`${e}x`,checked:o.playbackRate===e})),onPick:e=>this._setSpeed(Number(e))}),u.append(this.playButton,this.timeNow,this.seek,this.timeTotal,this.muteButton,this.volume,this.speedButton),s===`video`&&this.source.captions&&(this.captionsButton=i(`subtitle`,`Show captions`,{size:18}),this.captionsButton.addEventListener(`click`,()=>this._setCaptions(!this._captionsOn())),u.append(this.captionsButton)),c.append(l,u),t.replaceChildren(c);for(let e of[`play`,`pause`,`ended`])o.addEventListener(e,()=>this._syncPlay());o.addEventListener(`timeupdate`,()=>this._syncTime()),o.addEventListener(`durationchange`,()=>this._syncTime()),o.addEventListener(`volumechange`,()=>this._syncVolume()),o.addEventListener(`ratechange`,()=>this._syncSpeed()),this._onKeyDown=e=>this._keyDown(e),r.addEventListener(`keydown`,this._onKeyDown),this._syncPlay(),this._syncTime(),this._syncVolume(),this._syncSpeed(),this._syncCaptions()}seekTo(e){let t=this.media.duration;this.media.currentTime=Math.min(Math.max(e,0),Number.isFinite(t)?t:1/0)}togglePlay(){this.media.paused||this.media.ended?this.media.play().catch(e=>{console.warn(`[wui-file-viewer] play refused:`,e?.message)}):this.media.pause()}_setMuted(e){this.media.muted=e,!e&&this.media.volume===0&&(this.media.volume=.5),this.shell.savePrefs({muted:this.media.muted,volume:this.media.volume})}_setVolume(e){this.media.volume=Math.min(Math.max(e,0),1),this.media.muted=this.media.volume===0,this.shell.savePrefs({muted:this.media.muted,volume:this.media.volume})}_setSpeed(e){this.media.playbackRate=e,this.shell.savePrefs({speed:e})}_captionsOn(){return this.media.textTracks?.[0]?.mode===`showing`}_setCaptions(e){let t=this.media.textTracks?.[0];t&&(t.mode=e?`showing`:`hidden`),this._syncCaptions()}_syncPlay(){let e=!this.media.paused&&!this.media.ended;r(this.playButton,e?`pause`:`play`,18),t(this.playButton,e?`Pause`:`Play`),this.shell.host.classList.toggle(`wui-file-viewer-playing`,e)}_syncTime(){let e=this.media.currentTime,t=this.media.duration;this.timeNow.textContent=c(e),this.timeTotal.textContent=c(t),this.seek.max=String(Number.isFinite(t)?t:0),this.seek.value=String(e),this.seek.setAttribute(`aria-valuetext`,`${c(e)} of ${c(t)}`)}_syncVolume(){let e=this.media.muted||this.media.volume===0;r(this.muteButton,e?`volume-mute`:`volume-high`,18),t(this.muteButton,e?`Unmute`:`Mute`),this.volume.value=String(this.media.muted?0:this.media.volume)}_syncSpeed(){let e=`${this.media.playbackRate}x`;this.speedButton.textContent=e,this.speedButton.setAttribute(`aria-label`,`Playback speed, ${e}`)}_syncCaptions(){if(!this.captionsButton)return;let e=this._captionsOn();this.captionsButton.setAttribute(`aria-pressed`,String(e)),t(this.captionsButton,e?`Hide captions`:`Show captions`)}_keyDown(e){if(e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey||l(e.target))return;let t=this.media,n=e.key.toLowerCase();if(n===` `||n===`k`)this.togglePlay();else if(n===`arrowleft`)t.currentTime=Math.max(0,t.currentTime-o);else if(n===`arrowright`)t.currentTime=Math.min(t.duration||0,t.currentTime+o);else if(n===`arrowup`)this._setVolume(t.volume+s);else if(n===`arrowdown`)this._setVolume(t.volume-s);else if(n===`m`)this._setMuted(!t.muted);else if(n===`c`&&this.captionsButton)this._setCaptions(!this._captionsOn());else return;e.preventDefault()}};export{u as MediaView};