@webority/ui-elements 0.33.0 → 0.35.0

package/dist/ui-file-viewer.global.js

@@ -21,4 +21,4 @@ img:last-child { break-after: auto; }
 html, body { margin: 0; height: 100%; }
 body { display: flex; align-items: center; justify-content: center; }
 img { ${r} transform: rotate(${this.rotation}deg); }
-</style></head><body><img src="${Ba(n)}" alt=""></body></html>`,e.addEventListener(`load`,()=>{try{e.contentWindow.focus(),e.contentWindow.print()}catch(e){console.warn(`[wui-file-viewer] print failed:`,e?.message),window.open(this.source.src,`_blank`,`noopener`)}},{once:!0}),this._printFrame=e,document.body.append(e)}},Ba=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`).replace(/"/g,`&quot;`)})),Ha=r({MediaView:()=>Ja,formatTime:()=>Ua});function Ua(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 Wa,Ga,Ka,qa,Ja,Ya=n((()=>{_(),f(),Wa=[.5,.75,1,1.25,1.5,2],Ga=5,Ka=.1,qa=e=>e instanceof Element&&e.closest(`input, textarea, select, button, a, .dropdown-menu`),Ja=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=Wa.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:e,host:t}=this.shell,n=this.media,r=this.source.kind,i=document.createElement(`div`);i.className=`wui-file-viewer-player wui-file-viewer-player-${r}`;let a=document.createElement(`div`);if(a.className=`wui-file-viewer-stage`,a.tabIndex=0,a.setAttribute(`role`,`group`),a.setAttribute(`aria-label`,r===`video`?`Video`:`Audio`),r===`audio`){let e=document.createElement(`div`);e.className=`wui-file-viewer-audio-art`,e.innerHTML=u(`music`,{size:40}),a.append(e,n)}else a.append(n),n.addEventListener(`click`,()=>this.togglePlay());let o=document.createElement(`div`);o.className=`wui-file-viewer-controls`,this.playButton=p(`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`,()=>{n.currentTime=Number(this.seek.value)}),this.timeTotal=document.createElement(`span`),this.timeTotal.className=`wui-file-viewer-time`,this.muteButton=p(`volume-high`,`Mute`,{size:18}),this.muteButton.addEventListener(`click`,()=>this._setMuted(!n.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`,g(this.speedButton,{label:`Playback speed`,items:()=>Wa.map(e=>({key:String(e),label:`${e}x`,checked:n.playbackRate===e})),onPick:e=>this._setSpeed(Number(e))}),o.append(this.playButton,this.timeNow,this.seek,this.timeTotal,this.muteButton,this.volume,this.speedButton),r===`video`&&this.source.captions&&(this.captionsButton=p(`subtitle`,`Show captions`,{size:18}),this.captionsButton.addEventListener(`click`,()=>this._setCaptions(!this._captionsOn())),o.append(this.captionsButton)),i.append(a,o),e.replaceChildren(i);for(let e of[`play`,`pause`,`ended`])n.addEventListener(e,()=>this._syncPlay());n.addEventListener(`timeupdate`,()=>this._syncTime()),n.addEventListener(`durationchange`,()=>this._syncTime()),n.addEventListener(`volumechange`,()=>this._syncVolume()),n.addEventListener(`ratechange`,()=>this._syncSpeed()),this._onKeyDown=e=>this._keyDown(e),t.addEventListener(`keydown`,this._onKeyDown),this._syncPlay(),this._syncTime(),this._syncVolume(),this._syncSpeed(),this._syncCaptions()}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;m(this.playButton,e?`pause`:`play`,18),h(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=Ua(e),this.timeTotal.textContent=Ua(t),this.seek.max=String(Number.isFinite(t)?t:0),this.seek.value=String(e),this.seek.setAttribute(`aria-valuetext`,`${Ua(e)} of ${Ua(t)}`)}_syncVolume(){let e=this.media.muted||this.media.volume===0;m(this.muteButton,e?`volume-mute`:`volume-high`,18),h(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)),h(this.captionsButton,e?`Hide captions`:`Show captions`)}_keyDown(e){if(e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey||qa(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-Ga);else if(n===`arrowright`)t.currentTime=Math.min(t.duration||0,t.currentTime+Ga);else if(n===`arrowup`)this._setVolume(t.volume+Ka);else if(n===`arrowdown`)this._setVolume(t.volume-Ka);else if(n===`m`)this._setMuted(!t.muted);else if(n===`c`&&this.captionsButton)this._setCaptions(!this._captionsOn());else return;e.preventDefault()}}}));_();var Xa={pdf:`pdf`,jpg:`image`,jpeg:`image`,png:`image`,webp:`image`,gif:`image`,avif:`image`,bmp:`image`,svg:`image`,mp4:`video`,m4v:`video`,webm:`video`,ogv:`video`,mp3:`audio`,m4a:`audio`,aac:`audio`,wav:`audio`,ogg:`audio`,oga:`audio`,opus:`audio`,flac:`audio`},Za={"application/pdf":`pdf`,"image/jpeg":`image`,"image/png":`image`,"image/webp":`image`,"image/gif":`image`,"image/avif":`image`,"image/bmp":`image`,"image/svg+xml":`image`,"video/mp4":`video`,"video/webm":`video`,"video/ogg":`video`,"audio/mpeg":`audio`,"audio/mp4":`audio`,"audio/aac":`audio`,"audio/wav":`audio`,"audio/x-wav":`audio`,"audio/ogg":`audio`,"audio/opus":`audio`,"audio/webm":`audio`,"audio/flac":`audio`},Qa=`wui-file-viewer:load`,$a=`wui-file-viewer:error`,eo=`wui-file-viewer:prefs-change`;function to(e,t){let n=String(e??``).split(`;`)[0].trim().toLowerCase();if(n)return Za[n]??null;let r=String(t??``).split(/[?#]/)[0];return Xa[r.includes(`.`)?r.split(`.`).pop().toLowerCase():``]??null}function no(e){let t=String(e??``).split(/[?#]/)[0].split(`/`).filter(Boolean).pop()??``;try{return decodeURIComponent(t)}catch{return t}}var ro={pdf:()=>Promise.resolve().then(()=>(Na(),oa)).then(e=>e.PdfView),image:()=>Promise.resolve().then(()=>(Va(),Pa)).then(e=>e.ImageView),video:()=>Promise.resolve().then(()=>(Ya(),Ha)).then(e=>e.MediaView),audio:()=>Promise.resolve().then(()=>(Ya(),Ha)).then(e=>e.MediaView)},io=0,ao=class e extends i{static defaultAssetBase=``;static get observedAttributes(){return[`src`,`name`,`type`,`download`,`worker-src`,`asset-base`,`captions`]}constructor(){super(),io+=1,this.uid=`wui-file-viewer-${io}`,this._prefs={},this._onFullscreen=()=>this._syncFullscreen()}get src(){return this.getAttribute(`src`)??``}set src(e){this.setAttribute(`src`,String(e??``))}get name(){return this.getAttribute(`name`)??``}set name(e){this.setAttribute(`name`,String(e??``))}get type(){return this.getAttribute(`type`)??``}set type(e){this.setAttribute(`type`,String(e??``))}get viewKey(){return this.getAttribute(`view-key`)??``}set viewKey(e){this.setAttribute(`view-key`,String(e??``))}get download(){return this.hasAttribute(`download`)}set download(e){this.toggleAttribute(`download`,e===!0||e===``||e===`true`)}get workerSrc(){return this.getAttribute(`worker-src`)??``}set workerSrc(e){this.setAttribute(`worker-src`,String(e??``))}get captions(){return this.getAttribute(`captions`)??``}set captions(e){this.setAttribute(`captions`,String(e??``))}get assetBase(){return this.getAttribute(`asset-base`)??``}set assetBase(e){this.setAttribute(`asset-base`,String(e??``))}get prefs(){return{...this._prefs}}set prefs(e){this._hostPrefs=!0,this._prefs=e&&typeof e==`object`?{...e}:{}}get actionsContainer(){return this._actionsBox??null}displayName(){return this.name||no(this.src)||`Document`}connectedCallback(){if(Object.hasOwn(this,`prefs`)){let e=this.prefs;delete this.prefs,this.prefs=e}document.addEventListener(`fullscreenchange`,this._onFullscreen),this._open()}disconnectedCallback(){document.removeEventListener(`fullscreenchange`,this._onFullscreen),this._close()}attributeChangedCallback(e,t,n){!this.isConnected||!this._parts||t===n||(e===`name`?this._parts.name.textContent=this.displayName():e===`download`?this._syncDownload():this._open())}_close(){this._view?.destroy(),this._view=null,this._loadId=(this._loadId??0)+1}async _open(){this._close();let t=this._loadId;this._render(),this._prefs=this._readPrefs();let n=to(this.type,this.name||this.src);if(!this.src){this._status(`No file to show.`);return}if(!n){this._status(`This file can't be shown here.`,{offerDownload:!0});return}this._status(`Loading...`);let r;try{r=await ro[n]()}catch(e){t===this._loadId&&this._fail(e);return}t===this._loadId&&(this._view=new r(this._shell(t),{src:this.src,kind:n,captions:this.captions,workerSrc:this.workerSrc,assetBase:oo(this.assetBase||e.defaultAssetBase)}),this._view.load())}_shell(e){let t=()=>e===this._loadId,n=this._parts;return{host:this,start:n.start,center:n.center,end:n.viewEnd,search:n.search,body:n.body,prefs:{...this._prefs},name:()=>this.displayName(),savePrefs:e=>{t()&&this._savePrefs(e)},loaded:e=>{t()&&(n.body.removeAttribute(`aria-busy`),this.dispatchEvent(new CustomEvent(Qa,{bubbles:!0,detail:e})))},fail:e=>{t()&&this._fail(e)}}}_render(){let e=(e,t)=>{let n=document.createElement(e);return n.className=t,n},t=e(`div`,`wui-file-viewer-toolbar`),n=e(`div`,`wui-file-viewer-group wui-file-viewer-start`),r=e(`span`,`wui-file-viewer-name`);r.textContent=this.displayName(),r.title=this.displayName(),n.append(r);let i=e(`div`,`wui-file-viewer-group wui-file-viewer-center`),a=e(`div`,`wui-file-viewer-group wui-file-viewer-end`),o=e(`div`,`wui-file-viewer-group wui-file-viewer-view-end`),s=e(`a`,`u-action wui-file-viewer-download`);s.style.setProperty(`--wui-action-size`,`32px`),m(s,`download`),h(s,`Download`);let c=p(`maximize-4`,`Full screen`,{className:`wui-file-viewer-fullscreen`});c.addEventListener(`click`,()=>this.toggleFullscreen()),c.hidden=!document.fullscreenEnabled,this._actionsBox??=e(`div`,`wui-file-viewer-actions`);let l=this._actionsBox;l.append(...this.querySelectorAll(`:scope > [slot="actions"]`)),a.append(o,s,c,l);let u=e(`search`,`wui-file-viewer-search`);u.hidden=!0,t.append(n,i,a,u);let d=e(`div`,`wui-file-viewer-body`);d.setAttribute(`aria-busy`,`true`),this.replaceChildren(t,d),this._parts={toolbar:t,start:n,name:r,center:i,end:a,viewEnd:o,downloadLink:s,fullscreen:c,actionsBox:l,search:u,body:d},this._syncDownload(),this._syncFullscreen()}_syncDownload(){let e=this._parts.downloadLink;e.hidden=!this.download||!this.src,e.href=this.src,e.setAttribute(`download`,this.displayName())}_status(e,{offerDownload:t=!1}={}){let n=document.createElement(`div`);n.className=`wui-file-viewer-status`;let r=document.createElement(`p`);if(r.textContent=e,n.append(r),t&&this.src){let e=document.createElement(`a`);e.className=`btn btn-sm btn-outline-secondary`,e.href=this.src,e.setAttribute(`download`,this.displayName()),e.textContent=`Download`,n.append(e)}this._parts.body.replaceChildren(n)}_fail(e){this._view?.destroy(),this._view=null,this._parts.body.removeAttribute(`aria-busy`),this._status(`Couldn't open this file.`,{offerDownload:!0}),this.dispatchEvent(new CustomEvent($a,{bubbles:!0,detail:{message:e?.message??String(e)}}))}toggleFullscreen(){if(document.fullscreenElement){document.exitFullscreen();return}this.requestFullscreen().catch(e=>{console.warn(`[wui-file-viewer] full screen refused:`,e?.message)})}_syncFullscreen(){if(!this._parts)return;let e=document.fullscreenElement===this,t=this._parts.fullscreen;m(t,e?`x`:`maximize-4`),h(t,e?`Exit full screen`:`Full screen`),this._parts.actionsBox.hidden=e}_readPrefs(){if(this._hostPrefs||!this.viewKey)return{...this._prefs};try{return JSON.parse(window.localStorage.getItem(`wui-view:${this.viewKey}`)??`{}`)??{}}catch{return{}}}_savePrefs(e){if(this._prefs={...this._prefs,...e},this.dispatchEvent(new CustomEvent(eo,{bubbles:!0,detail:{...this._prefs}})),!(this._hostPrefs||!this.viewKey))try{window.localStorage.setItem(`wui-view:${this.viewKey}`,JSON.stringify(this._prefs))}catch{}}};function oo(e){return e&&new URL(e,document.baseURI).href}var so=typeof document>`u`?null:document.currentScript;return so?.src&&(ao.defaultAssetBase=new URL(`pdfjs/`,so.src).href),typeof customElements<`u`&&!customElements.get(`wui-file-viewer`)&&customElements.define(`wui-file-viewer`,ao),e.WuiFileViewer=ao,e.fileKind=to,e.fileNameFromUrl=no,e.renderPdfFirstPage=(e,t)=>Promise.resolve().then(()=>(Na(),oa)).then(n=>n.renderFirstPage(e,{assetBase:ao.defaultAssetBase||void 0,...t})),e})({});
+</style></head><body><img src="${Ba(n)}" alt=""></body></html>`,e.addEventListener(`load`,()=>{try{e.contentWindow.focus(),e.contentWindow.print()}catch(e){console.warn(`[wui-file-viewer] print failed:`,e?.message),window.open(this.source.src,`_blank`,`noopener`)}},{once:!0}),this._printFrame=e,document.body.append(e)}},Ba=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`).replace(/"/g,`&quot;`)})),Ha=r({MediaView:()=>Ja,formatTime:()=>Ua});function Ua(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 Wa,Ga,Ka,qa,Ja,Ya=n((()=>{_(),f(),Wa=[.5,.75,1,1.25,1.5,2],Ga=5,Ka=.1,qa=e=>e instanceof Element&&e.closest(`input, textarea, select, button, a, .dropdown-menu`),Ja=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=Wa.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:e,host:t}=this.shell,n=this.media,r=this.source.kind,i=document.createElement(`div`);i.className=`wui-file-viewer-player wui-file-viewer-player-${r}`;let a=document.createElement(`div`);if(a.className=`wui-file-viewer-stage`,a.tabIndex=0,a.setAttribute(`role`,`group`),a.setAttribute(`aria-label`,r===`video`?`Video`:`Audio`),r===`audio`){let e=document.createElement(`div`);e.className=`wui-file-viewer-audio-art`,e.innerHTML=u(`music`,{size:40}),a.append(e,n)}else a.append(n),n.addEventListener(`click`,()=>this.togglePlay());let o=document.createElement(`div`);o.className=`wui-file-viewer-controls`,this.playButton=p(`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`,()=>{n.currentTime=Number(this.seek.value)}),this.timeTotal=document.createElement(`span`),this.timeTotal.className=`wui-file-viewer-time`,this.muteButton=p(`volume-high`,`Mute`,{size:18}),this.muteButton.addEventListener(`click`,()=>this._setMuted(!n.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`,g(this.speedButton,{label:`Playback speed`,items:()=>Wa.map(e=>({key:String(e),label:`${e}x`,checked:n.playbackRate===e})),onPick:e=>this._setSpeed(Number(e))}),o.append(this.playButton,this.timeNow,this.seek,this.timeTotal,this.muteButton,this.volume,this.speedButton),r===`video`&&this.source.captions&&(this.captionsButton=p(`subtitle`,`Show captions`,{size:18}),this.captionsButton.addEventListener(`click`,()=>this._setCaptions(!this._captionsOn())),o.append(this.captionsButton)),i.append(a,o),e.replaceChildren(i);for(let e of[`play`,`pause`,`ended`])n.addEventListener(e,()=>this._syncPlay());n.addEventListener(`timeupdate`,()=>this._syncTime()),n.addEventListener(`durationchange`,()=>this._syncTime()),n.addEventListener(`volumechange`,()=>this._syncVolume()),n.addEventListener(`ratechange`,()=>this._syncSpeed()),this._onKeyDown=e=>this._keyDown(e),t.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;m(this.playButton,e?`pause`:`play`,18),h(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=Ua(e),this.timeTotal.textContent=Ua(t),this.seek.max=String(Number.isFinite(t)?t:0),this.seek.value=String(e),this.seek.setAttribute(`aria-valuetext`,`${Ua(e)} of ${Ua(t)}`)}_syncVolume(){let e=this.media.muted||this.media.volume===0;m(this.muteButton,e?`volume-mute`:`volume-high`,18),h(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)),h(this.captionsButton,e?`Hide captions`:`Show captions`)}_keyDown(e){if(e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey||qa(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-Ga);else if(n===`arrowright`)t.currentTime=Math.min(t.duration||0,t.currentTime+Ga);else if(n===`arrowup`)this._setVolume(t.volume+Ka);else if(n===`arrowdown`)this._setVolume(t.volume-Ka);else if(n===`m`)this._setMuted(!t.muted);else if(n===`c`&&this.captionsButton)this._setCaptions(!this._captionsOn());else return;e.preventDefault()}}}));_();var Xa={pdf:`pdf`,jpg:`image`,jpeg:`image`,png:`image`,webp:`image`,gif:`image`,avif:`image`,bmp:`image`,svg:`image`,mp4:`video`,m4v:`video`,webm:`video`,ogv:`video`,mp3:`audio`,m4a:`audio`,aac:`audio`,wav:`audio`,ogg:`audio`,oga:`audio`,opus:`audio`,flac:`audio`},Za={"application/pdf":`pdf`,"image/jpeg":`image`,"image/png":`image`,"image/webp":`image`,"image/gif":`image`,"image/avif":`image`,"image/bmp":`image`,"image/svg+xml":`image`,"video/mp4":`video`,"video/webm":`video`,"video/ogg":`video`,"audio/mpeg":`audio`,"audio/mp4":`audio`,"audio/aac":`audio`,"audio/wav":`audio`,"audio/x-wav":`audio`,"audio/ogg":`audio`,"audio/opus":`audio`,"audio/webm":`audio`,"audio/flac":`audio`},Qa=`wui-file-viewer:load`,$a=`wui-file-viewer:error`,eo=`wui-file-viewer:prefs-change`;function to(e,t){let n=String(e??``).split(`;`)[0].trim().toLowerCase();if(n)return Za[n]??null;let r=String(t??``).split(/[?#]/)[0];return Xa[r.includes(`.`)?r.split(`.`).pop().toLowerCase():``]??null}function no(e){let t=String(e??``).split(/[?#]/)[0].split(`/`).filter(Boolean).pop()??``;try{return decodeURIComponent(t)}catch{return t}}var ro={pdf:()=>Promise.resolve().then(()=>(Na(),oa)).then(e=>e.PdfView),image:()=>Promise.resolve().then(()=>(Va(),Pa)).then(e=>e.ImageView),video:()=>Promise.resolve().then(()=>(Ya(),Ha)).then(e=>e.MediaView),audio:()=>Promise.resolve().then(()=>(Ya(),Ha)).then(e=>e.MediaView)},io=0,ao=class e extends i{static defaultAssetBase=``;static get observedAttributes(){return[`src`,`name`,`type`,`download`,`worker-src`,`asset-base`,`captions`]}constructor(){super(),io+=1,this.uid=`wui-file-viewer-${io}`,this._prefs={},this._onFullscreen=()=>this._syncFullscreen()}get src(){return this.getAttribute(`src`)??``}set src(e){this.setAttribute(`src`,String(e??``))}get name(){return this.getAttribute(`name`)??``}set name(e){this.setAttribute(`name`,String(e??``))}get type(){return this.getAttribute(`type`)??``}set type(e){this.setAttribute(`type`,String(e??``))}get viewKey(){return this.getAttribute(`view-key`)??``}set viewKey(e){this.setAttribute(`view-key`,String(e??``))}get download(){return this.hasAttribute(`download`)}set download(e){this.toggleAttribute(`download`,e===!0||e===``||e===`true`)}get workerSrc(){return this.getAttribute(`worker-src`)??``}set workerSrc(e){this.setAttribute(`worker-src`,String(e??``))}get captions(){return this.getAttribute(`captions`)??``}set captions(e){this.setAttribute(`captions`,String(e??``))}get assetBase(){return this.getAttribute(`asset-base`)??``}set assetBase(e){this.setAttribute(`asset-base`,String(e??``))}get prefs(){return{...this._prefs}}set prefs(e){this._hostPrefs=!0,this._prefs=e&&typeof e==`object`?{...e}:{}}get actionsContainer(){return this._actionsBox??null}seekTo(e){if(typeof e!=`number`||!Number.isFinite(e))throw TypeError(`[wui-file-viewer] seekTo takes a number of seconds; got ${String(e)}.`);return this._view?.seekTo?(this._view.seekTo(e),!0):!1}displayName(){return this.name||no(this.src)||`Document`}connectedCallback(){if(Object.hasOwn(this,`prefs`)){let e=this.prefs;delete this.prefs,this.prefs=e}document.addEventListener(`fullscreenchange`,this._onFullscreen),this._open()}disconnectedCallback(){document.removeEventListener(`fullscreenchange`,this._onFullscreen),this._close()}attributeChangedCallback(e,t,n){!this.isConnected||!this._parts||t===n||(e===`name`?this._parts.name.textContent=this.displayName():e===`download`?this._syncDownload():this._open())}_close(){this._view?.destroy(),this._view=null,this._loadId=(this._loadId??0)+1}async _open(){this._close();let t=this._loadId;this._render(),this._prefs=this._readPrefs();let n=to(this.type,this.name||this.src);if(!this.src){this._status(`No file to show.`);return}if(!n){this._status(`This file can't be shown here.`,{offerDownload:!0});return}this._status(`Loading...`);let r;try{r=await ro[n]()}catch(e){t===this._loadId&&this._fail(e);return}t===this._loadId&&(this._view=new r(this._shell(t),{src:this.src,kind:n,captions:this.captions,workerSrc:this.workerSrc,assetBase:oo(this.assetBase||e.defaultAssetBase)}),this._view.load())}_shell(e){let t=()=>e===this._loadId,n=this._parts;return{host:this,start:n.start,center:n.center,end:n.viewEnd,search:n.search,body:n.body,prefs:{...this._prefs},name:()=>this.displayName(),savePrefs:e=>{t()&&this._savePrefs(e)},loaded:e=>{t()&&(n.body.removeAttribute(`aria-busy`),this.dispatchEvent(new CustomEvent(Qa,{bubbles:!0,detail:e})))},fail:e=>{t()&&this._fail(e)}}}_render(){let e=(e,t)=>{let n=document.createElement(e);return n.className=t,n},t=e(`div`,`wui-file-viewer-toolbar`),n=e(`div`,`wui-file-viewer-group wui-file-viewer-start`),r=e(`span`,`wui-file-viewer-name`);r.textContent=this.displayName(),r.title=this.displayName(),n.append(r);let i=e(`div`,`wui-file-viewer-group wui-file-viewer-center`),a=e(`div`,`wui-file-viewer-group wui-file-viewer-end`),o=e(`div`,`wui-file-viewer-group wui-file-viewer-view-end`),s=e(`a`,`u-action wui-file-viewer-download`);s.style.setProperty(`--wui-action-size`,`32px`),m(s,`download`),h(s,`Download`);let c=p(`maximize-4`,`Full screen`,{className:`wui-file-viewer-fullscreen`});c.addEventListener(`click`,()=>this.toggleFullscreen()),c.hidden=!document.fullscreenEnabled,this._actionsBox??=e(`div`,`wui-file-viewer-actions`);let l=this._actionsBox;l.append(...this.querySelectorAll(`:scope > [slot="actions"]`)),a.append(o,s,c,l);let u=e(`search`,`wui-file-viewer-search`);u.hidden=!0,t.append(n,i,a,u);let d=e(`div`,`wui-file-viewer-body`);d.setAttribute(`aria-busy`,`true`),this.replaceChildren(t,d),this._parts={toolbar:t,start:n,name:r,center:i,end:a,viewEnd:o,downloadLink:s,fullscreen:c,actionsBox:l,search:u,body:d},this._syncDownload(),this._syncFullscreen()}_syncDownload(){let e=this._parts.downloadLink;e.hidden=!this.download||!this.src,e.href=this.src,e.setAttribute(`download`,this.displayName())}_status(e,{offerDownload:t=!1}={}){let n=document.createElement(`div`);n.className=`wui-file-viewer-status`;let r=document.createElement(`p`);if(r.textContent=e,n.append(r),t&&this.src){let e=document.createElement(`a`);e.className=`btn btn-sm btn-outline-secondary`,e.href=this.src,e.setAttribute(`download`,this.displayName()),e.textContent=`Download`,n.append(e)}this._parts.body.replaceChildren(n)}_fail(e){this._view?.destroy(),this._view=null,this._parts.body.removeAttribute(`aria-busy`),this._status(`Couldn't open this file.`,{offerDownload:!0}),this.dispatchEvent(new CustomEvent($a,{bubbles:!0,detail:{message:e?.message??String(e)}}))}toggleFullscreen(){if(document.fullscreenElement){document.exitFullscreen();return}this.requestFullscreen().catch(e=>{console.warn(`[wui-file-viewer] full screen refused:`,e?.message)})}_syncFullscreen(){if(!this._parts)return;let e=document.fullscreenElement===this,t=this._parts.fullscreen;m(t,e?`x`:`maximize-4`),h(t,e?`Exit full screen`:`Full screen`),this._parts.actionsBox.hidden=e}_readPrefs(){if(this._hostPrefs||!this.viewKey)return{...this._prefs};try{return JSON.parse(window.localStorage.getItem(`wui-view:${this.viewKey}`)??`{}`)??{}}catch{return{}}}_savePrefs(e){if(this._prefs={...this._prefs,...e},this.dispatchEvent(new CustomEvent(eo,{bubbles:!0,detail:{...this._prefs}})),!(this._hostPrefs||!this.viewKey))try{window.localStorage.setItem(`wui-view:${this.viewKey}`,JSON.stringify(this._prefs))}catch{}}};function oo(e){return e&&new URL(e,document.baseURI).href}var so=typeof document>`u`?null:document.currentScript;return so?.src&&(ao.defaultAssetBase=new URL(`pdfjs/`,so.src).href),typeof customElements<`u`&&!customElements.get(`wui-file-viewer`)&&customElements.define(`wui-file-viewer`,ao),e.WuiFileViewer=ao,e.fileKind=to,e.fileNameFromUrl=no,e.renderPdfFirstPage=(e,t)=>Promise.resolve().then(()=>(Na(),oa)).then(n=>n.renderFirstPage(e,{assetBase:ao.defaultAssetBase||void 0,...t})),e})({});

package/dist/ui-file-viewer.js

@@ -61,8 +61,8 @@ function u(e) {
 var d = {
 	pdf: () => import("./fileViewerPdf-BnIsj-J-.js").then((e) => e.PdfView),
 	image: () => import("./fileViewerImage-Dky4nQZS.js").then((e) => e.ImageView),
-	video: () => import("./fileViewerMedia-BYBcznPT.js").then((e) => e.MediaView),
-	audio: () => import("./fileViewerMedia-BYBcznPT.js").then((e) => e.MediaView)
+	video: () => import("./fileViewerMedia-DPk_YcvC.js").then((e) => e.MediaView),
+	audio: () => import("./fileViewerMedia-DPk_YcvC.js").then((e) => e.MediaView)
 }, f = 0, p = class i extends r {
 	static defaultAssetBase = "";
 	static get observedAttributes() {
@@ -136,6 +136,10 @@ var d = {
 	get actionsContainer() {
 		return this._actionsBox ?? null;
 	}
+	seekTo(e) {
+		if (typeof e != "number" || !Number.isFinite(e)) throw TypeError(`[wui-file-viewer] seekTo takes a number of seconds; got ${String(e)}.`);
+		return this._view?.seekTo ? (this._view.seekTo(e), !0) : !1;
+	}
 	displayName() {
 		return this.name || u(this.src) || "Document";
 	}