mulmocast-viewer 0.2.0 → 0.2.2

package/dist/mulmocast-viewer.umd.js

@@ -1 +1 @@
-(function(b,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(b=typeof globalThis<"u"?globalThis:b||self,e(b.MulmoCastViewer={},b.Vue))})(this,(function(b,e){"use strict";const j=async t=>await new Promise(c=>setTimeout(c,t)),H=(t,c)=>{const o=a=>a instanceof Error?a:new Error("Aborted");return new Promise((a,f)=>{if(c.aborted){f(o(c.reason));return}const p=()=>{clearTimeout(n),f(o(c.reason))},n=setTimeout(()=>{c.removeEventListener("abort",p),a()},t);c.addEventListener("abort",p,{once:!0})})},G={class:"items-center justify-center w-full"},O={key:0,class:"group relative"},q=["src"],J={class:"play-overlay absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none"},K={key:0,class:"w-8 h-8 text-white ml-1",fill:"currentColor",viewBox:"0 0 24 24"},Q={key:1,class:"w-8 h-8 text-white",fill:"currentColor",viewBox:"0 0 24 24"},X={key:1,class:"group relative inline-block"},Y=["src"],Z=["src"],I={class:"play-overlay absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none"},ee={key:0,class:"w-8 h-8 text-white ml-1",fill:"currentColor",viewBox:"0 0 24 24"},te={key:1,class:"w-8 h-8 text-white",fill:"currentColor",viewBox:"0 0 24 24"},oe={key:2,class:"group relative inline-block"},ae=["src"],le=["src"],ne={class:"play-overlay absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none"},se={key:0,class:"w-8 h-8 text-white ml-1",fill:"currentColor",viewBox:"0 0 24 24"},re={key:1,class:"w-8 h-8 text-white",fill:"currentColor",viewBox:"0 0 24 24"},ie={key:3,class:"group relative inline-block"},ce=["src"],de={class:"play-overlay absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none"},ue={key:0,class:"w-8 h-8 text-white ml-1",fill:"currentColor",viewBox:"0 0 24 24"},me={key:1,class:"w-8 h-8 text-white",fill:"currentColor",viewBox:"0 0 24 24"},pe={key:4},fe={key:5,class:"mt-4 px-6 py-4 text-left"},ge={class:"text-lg leading-relaxed font-sans text-gray-800"},ye={key:0,class:"text-base leading-relaxed font-sans text-gray-400 mt-3 italic"},ke="https://github.com/receptron/mulmocast-cli/blob/main/assets/images/mulmocast_credit.png?raw=true",he=e.defineComponent({__name:"mulmo_player",props:{index:{},videoWithAudioSource:{},soundEffectSource:{},videoSource:{},imageSource:{},audioSource:{},text:{},originalText:{},duration:{},defaultLang:{},currentLang:{},playbackSpeed:{default:1}},emits:["play","pause","ended"],setup(t,{expose:c,emit:o}){const a=t,f=o,p=e.ref(),n=e.ref(),i=e.ref(),l=e.ref(),m=()=>{if(n.value){if(a.soundEffectSource){n.value.volume=1;return}a.videoSource&&(a.audioSource&&a.currentLang&&a.defaultLang&&a.currentLang!==a.defaultLang?n.value.volume=.2:n.value.volume=0)}},u=()=>{const k=a.playbackSpeed??1;p.value&&(p.value.playbackRate=k),n.value&&(n.value.playbackRate=k),i.value&&(i.value.playbackRate=k),l.value&&(l.value.playbackRate=k)};e.watch([()=>a.currentLang,()=>a.defaultLang,()=>a.videoSource,()=>a.audioSource],()=>{m()}),e.watch(()=>a.playbackSpeed,()=>{u()}),e.watch(n,k=>{k&&(m(),u())}),e.watch([p,i,l],()=>{u()}),e.onMounted(()=>{m(),u()});const r=e.ref(!1),x=e.ref(!1),E=e.computed(()=>g.value||x.value);let h=null;const L=()=>{h&&(h.abort(),h=null)},w=()=>{g.value=!0,i.value&&n.value&&!i.value.ended&&(i.value.currentTime=n.value.currentTime,i.value.play().catch(()=>{})),f("play")},_=k=>{x.value||(document.hidden||(g.value=!1),!n.value?.ended&&i?.value&&i.value?.pause(),B(k))},M=()=>{if(r.value)return;(!i.value||i.value.ended)&&N()},U=()=>{if(r.value)return;(!n.value||n.value.ended)&&N()},T=()=>{g.value=!0,f("play")},B=k=>{if(x.value)return;document.hidden||(g.value=!1);const d=k.target;d.duration!==d.currentTime&&f("pause")},N=()=>{r.value||(r.value=!0,g.value=!1,f("ended"))},P=()=>{p.value?.pause(),n.value?.pause(),l.value?.pause()},g=e.ref(!1);let v=null;const S=async()=>{if(x.value=!1,r.value=!1,g.value=!0,p.value&&(u(),p.value.play().catch(()=>{})),n.value&&(m(),u(),n.value.play().catch(()=>{}),i.value&&(i.value.currentTime=n.value.currentTime,i.value.play().catch(()=>{}))),l.value&&(u(),l.value.play().catch(()=>{})),!p.value&&!n.value&&!l.value)try{L(),h=new AbortController,await H((a.duration??0)*1e3,h.signal),h=null,r.value||(g.value=!1,r.value=!0,f("ended"))}catch{}},z=()=>{x.value=!0,g.value=!1,r.value=!0,L(),p.value?.pause(),n.value?.pause(),i.value?.pause(),l.value?.pause()},s=()=>{i.value&&n.value&&!i.value.ended&&(i.value.currentTime=n.value.currentTime)},y=k=>{k?.paused&&!k.ended&&k.play().catch(()=>{})},$=(k,d)=>{d.paused&&!d.ended&&(k.ended||(d.currentTime=k.currentTime),d.play().catch(()=>{}))},D=()=>{g.value&&(y(p.value),n.value&&i.value?(y(n.value),$(n.value,i.value)):y(n.value),y(l.value))},F=()=>{document.hidden&&g.value?v||(v=setInterval(D,500)):document.hidden||v&&(clearInterval(v),v=null)},V=()=>{document.hidden&&g.value&&setTimeout(D,50)};return e.onMounted(()=>{document.addEventListener("visibilitychange",F),p.value?.addEventListener("pause",V),n.value?.addEventListener("pause",V),l.value?.addEventListener("pause",V),i.value?.addEventListener("pause",V)}),e.onUnmounted(()=>{document.removeEventListener("visibilitychange",F),p.value?.removeEventListener("pause",V),n.value?.removeEventListener("pause",V),l.value?.removeEventListener("pause",V),i.value?.removeEventListener("pause",V),v&&(clearInterval(v),v=null),L()}),c({play:S,stop:z}),(k,d)=>(e.openBlock(),e.createElementBlock("div",G,[t.videoWithAudioSource?(e.openBlock(),e.createElementBlock("div",O,[e.createElementVNode("video",{ref_key:"videoWithAudioRef",ref:p,src:t.videoWithAudioSource,class:"mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",controls:!0,playsinline:"true",onPlay:T,onPause:B,onEnded:N},null,40,q),e.createElementVNode("div",J,[e.createElementVNode("button",{class:"pointer-events-auto w-16 h-16 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center transition-colors cursor-pointer",onClick:d[0]||(d[0]=R=>E.value?P():S())},[E.value?(e.openBlock(),e.createElementBlock("svg",Q,[...d[5]||(d[5]=[e.createElementVNode("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",K,[...d[4]||(d[4]=[e.createElementVNode("path",{d:"M8 5v14l11-7z"},null,-1)])]))])])])):t.soundEffectSource||t.videoSource?(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("video",{ref_key:"videoRef",ref:n,class:"mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",src:t.soundEffectSource||t.videoSource,controls:!0,playsinline:"true",onPlay:w,onPause:_,onEnded:M,onSeeked:s},null,40,Y),t.audioSource?(e.openBlock(),e.createElementBlock("audio",{key:0,ref_key:"audioSyncRef",ref:i,src:t.audioSource,controls:!0,class:"hidden",onEnded:U},null,40,Z)):e.createCommentVNode("",!0),e.createElementVNode("div",I,[e.createElementVNode("button",{class:"pointer-events-auto w-16 h-16 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center transition-colors cursor-pointer",onClick:d[1]||(d[1]=R=>E.value?P():S())},[E.value?(e.openBlock(),e.createElementBlock("svg",te,[...d[7]||(d[7]=[e.createElementVNode("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",ee,[...d[6]||(d[6]=[e.createElementVNode("path",{d:"M8 5v14l11-7z"},null,-1)])]))])])])):t.audioSource?(e.openBlock(),e.createElementBlock("div",oe,[t.imageSource?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.imageSource,class:"mx-auto h-auto max-h-[80vh] w-auto object-contain",alt:"Background"},null,8,ae)):(e.openBlock(),e.createElementBlock("img",{key:1,src:ke,class:"mx-auto h-auto max-h-[80vh] w-auto object-contain",alt:"Background"})),e.createElementVNode("audio",{ref_key:"audioRef",ref:l,class:"mulmocast-audio absolute inset-0 w-full h-full",src:t.audioSource,controls:!0,onPlay:T,onPause:B,onEnded:N},null,40,le),e.createElementVNode("div",ne,[e.createElementVNode("button",{class:"pointer-events-auto w-16 h-16 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center transition-colors cursor-pointer",onClick:d[2]||(d[2]=R=>E.value?P():S())},[E.value?(e.openBlock(),e.createElementBlock("svg",re,[...d[9]||(d[9]=[e.createElementVNode("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",se,[...d[8]||(d[8]=[e.createElementVNode("path",{d:"M8 5v14l11-7z"},null,-1)])]))])])])):t.imageSource?(e.openBlock(),e.createElementBlock("div",ie,[e.createElementVNode("img",{src:t.imageSource,class:"max-w-full max-h-full object-contain"},null,8,ce),e.createElementVNode("div",de,[e.createElementVNode("button",{class:"pointer-events-auto w-16 h-16 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center transition-colors cursor-pointer",onClick:d[3]||(d[3]=R=>E.value?P():S())},[E.value?(e.openBlock(),e.createElementBlock("svg",me,[...d[11]||(d[11]=[e.createElementVNode("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",ue,[...d[10]||(d[10]=[e.createElementVNode("path",{d:"M8 5v14l11-7z"},null,-1)])]))])])])):(e.openBlock(),e.createElementBlock("div",pe,"No media available")),t.text?(e.openBlock(),e.createElementBlock("div",fe,[e.createElementVNode("p",ge,e.toDisplayString(t.text),1),t.originalText&&t.originalText!==t.text?(e.openBlock(),e.createElementBlock("p",ye,e.toDisplayString(t.originalText),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]))}}),W=(t,c)=>{const o=t.__vccOpts||t;for(const[a,f]of c)o[a]=f;return o},A=W(he,[["__scopeId","data-v-cbee8ea0"]]),xe=["value"],be=["value"],C=e.defineComponent({__name:"select_language",props:{modelValue:{}},emits:["update:modelValue"],setup(t,{emit:c}){const o=["en","ja"],a={en:"English",ja:"日本語"},f=c,p=n=>{const i=n.target;f("update:modelValue",i.value)};return(n,i)=>(e.openBlock(),e.createElementBlock("select",{value:t.modelValue,class:"px-4 py-2 bg-white border-2 border-gray-300 rounded-lg shadow-sm hover:border-indigo-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none transition-colors cursor-pointer text-base font-medium text-gray-700",onChange:p},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(o,l=>e.createElementVNode("option",{key:l,value:l},e.toDisplayString(a[l]||l),9,be)),64))],40,xe))}}),Ee={class:"w-full overflow-hidden"},we={class:"max-w-7xl mx-auto px-4"},ve={class:"grid grid-cols-[auto,1fr,auto] gap-x-4 gap-y-4 max-sm:grid-cols-2"},Be=["disabled"],Se={class:"col-start-2 row-start-1 min-w-0 max-sm:col-span-2 max-sm:col-start-1"},Ve=["disabled"],Ne={key:0,class:"mulmo-text-box col-start-2 row-start-2 min-w-0 mt-1 rounded-lg px-6 py-4 text-left max-sm:col-span-2 max-sm:col-start-1 max-sm:row-start-3"},$e={class:"mulmo-text-primary text-lg leading-relaxed font-sans"},Ce={key:0,class:"mulmo-text-secondary text-base leading-relaxed font-sans mt-3 italic"},Le=["src"],Pe=W(e.defineComponent({__name:"mulmo_viewer",props:{dataSet:{},basePath:{},initPage:{},audioLang:{default:"en"},textLang:{default:"en"},playbackSpeed:{default:1}},emits:["updatedPage","update:audioLang","update:textLang","allCompleted"],setup(t,{expose:c,emit:o}){const a=t,f=o,p=a.dataSet?.beats?.length??0,n=e.ref(a.initPage??0),i=e.ref(!0),l=e.ref(),m=e.ref(),u=e.computed({get:()=>a.audioLang,set:s=>f("update:audioLang",s||"en")}),r=e.computed({get:()=>a.textLang,set:s=>f("update:textLang",s||"en")});let x=0;e.watch(()=>a.audioLang,async(s,y)=>{if(s!==y&&w.value){x++;const $=x;if(l.value?.stop(),await j(500),$!==x)return;l.value&&(w.value=!0,await l.value.play())}}),e.watch(()=>a.textLang,async(s,y)=>{s!==y&&w.value&&(await j(100),l.value&&await l.value.play())}),e.watch(m,s=>{s&&(s.volume=.3)});const E=e.computed(()=>a.dataSet?.beats[n.value]),h=s=>s?a.basePath+"/"+s:"",L=e.computed(()=>h(a.dataSet?.bgmSource)),w=e.ref(!1),_=()=>{w.value=!0,m.value&&(m.value.volume=.3,m.value.play())},M=()=>{w.value=!1,m.value&&m.value.pause()},U=async()=>{x++;const s=x;l.value?.stop(),await j(500),s===x&&l.value&&l.value.play()},T=s=>{n.value!==s&&(n.value=s,w.value&&i.value&&U())},B=s=>{const y=n.value+s;return y>-1&&y<p?(T(y),f("updatedPage",y),!0):!1},N=()=>{i.value&&B(1)||(w.value=!1,m.value&&m.value.pause(),f("allCompleted"))},P={onPlay:_,onPause:M,onEnded:N},g=e.computed(()=>{const s=E.value,y=s?.audioSources?.[u.value],$=s?.multiLinguals?.[r.value]??s?.text??"",D=a.dataSet?.lang?s?.multiLinguals?.[a.dataSet.lang]??s?.text??"":"";return{videoWithAudioSource:h(s?.videoWithAudioSource),videoSource:h(s?.videoSource),soundEffectSource:h(s?.soundEffectSource),audioSource:h(y),imageSource:h(s?.imageSource),index:n.value,text:$,originalText:D,duration:s?.duration,defaultLang:a.dataSet?.lang,currentLang:u.value,playbackSpeed:a.playbackSpeed,...P}}),v=e.computed(()=>a.dataSet?.beats[n.value+1]),S=e.computed(()=>{if(n.value+1>=p)return null;const s=v.value;return{videoWithAudioSource:h(s?.videoWithAudioSource),videoSource:h(s?.videoSource),soundEffectSource:h(s?.soundEffectSource),audioSource:h(s?.audioSources?.[u.value]),imageSource:h(s?.imageSource),index:n.value+1,text:s?.multiLinguals?.[r.value]??s?.text??"",duration:s?.duration}}),z=e.computed(()=>({MulmoPlayer:A,pageProps:g.value,currentPage:n.value,pageCount:p,pageMove:B,isPlaying:w.value,audioLang:u,textLang:r,SelectLanguage:C,mediaPlayerRef:l,handlePlay:_,handlePause:M,handleEnded:N}));return c({updatePage:T}),(s,y)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(s.$slots,"default",e.normalizeProps(e.guardReactiveProps(z.value)),()=>[e.createElementVNode("div",Ee,[e.createElementVNode("div",we,[e.createElementVNode("div",ve,[e.createElementVNode("button",{class:"col-start-1 row-start-1 justify-self-start w-auto px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50 self-center max-sm:row-start-2",disabled:n.value===0,onClick:y[0]||(y[0]=$=>B(-1))}," Prev ",8,Be),e.createElementVNode("div",Se,[e.createVNode(A,e.mergeProps({ref_key:"mediaPlayer",ref:l},{...g.value,text:"",originalText:""}),null,16)]),e.createElementVNode("button",{class:"col-start-3 row-start-1 justify-self-end w-auto px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50 self-center max-sm:col-start-2 max-sm:row-start-2",disabled:n.value>=e.unref(p)-1,onClick:y[1]||(y[1]=$=>B(1))}," Next ",8,Ve),g.value.text?(e.openBlock(),e.createElementBlock("div",Ne,[e.createElementVNode("p",$e,e.toDisplayString(g.value.text),1),g.value.originalText&&g.value.originalText!==g.value.text?(e.openBlock(),e.createElementBlock("p",Ce,e.toDisplayString(g.value.originalText),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)])])])],!0),S.value?e.withDirectives((e.openBlock(),e.createBlock(A,e.normalizeProps(e.mergeProps({key:0},S.value)),null,16)),[[e.vShow,!1]]):e.createCommentVNode("",!0),L.value?(e.openBlock(),e.createElementBlock("audio",{key:1,ref_key:"bgmRef",ref:m,src:L.value},null,8,Le)):e.createCommentVNode("",!0)],64))}}),[["__scopeId","data-v-889afa79"]]),Te={class:"container mx-auto px-4 py-2 sm:py-4"},_e={class:"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 sm:gap-4"},Me={class:"flex items-center gap-4 flex-wrap"},De={class:"flex items-center gap-2 sm:gap-4 flex-wrap w-full sm:w-auto"},je={key:0,class:"hidden sm:flex items-center gap-3"},Ae=["value"],Ue={key:1,class:"hidden sm:flex items-center gap-3"},ze={class:"hidden sm:flex items-center gap-3"},Re={class:"flex items-center justify-between mb-4"},We={key:0,class:"space-y-2"},Fe=["value"],He={key:1,class:"space-y-2"},Ge={class:"space-y-2"},Oe=e.defineComponent({__name:"mulmo_viewer_header",props:{audioLang:{},textLang:{},playbackSpeed:{default:1},showSpeedControl:{type:Boolean,default:!0},showAudioLang:{type:Boolean,default:!0},hideDesktopControls:{type:Boolean,default:!1},showMobileSettings:{type:Boolean,default:!1},sticky:{type:Boolean,default:!1}},emits:["update:audioLang","update:textLang","update:playbackSpeed","update:showMobileSettings"],setup(t){return(c,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["bg-white shadow-md border-b border-gray-200",{"sticky top-0 z-50":t.sticky}])},[e.createElementVNode("div",Te,[e.createElementVNode("div",_e,[e.createElementVNode("div",Me,[e.renderSlot(c.$slots,"left")]),e.createElementVNode("div",De,[e.renderSlot(c.$slots,"actions"),t.hideDesktopControls?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.showSpeedControl?(e.openBlock(),e.createElementBlock("div",je,[o[11]||(o[11]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide"},"Speed:",-1)),e.createElementVNode("select",{value:t.playbackSpeed,class:"px-3 py-2 border border-gray-300 rounded-lg bg-white text-gray-700 font-medium shadow-sm hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors",onChange:o[0]||(o[0]=a=>c.$emit("update:playbackSpeed",Number(a.target.value)))},[...o[10]||(o[10]=[e.createElementVNode("option",{value:1},"1x",-1),e.createElementVNode("option",{value:1.25},"1.25x",-1),e.createElementVNode("option",{value:1.5},"1.5x",-1),e.createElementVNode("option",{value:1.75},"1.75x",-1),e.createElementVNode("option",{value:2},"2x",-1)])],40,Ae)])):e.createCommentVNode("",!0),t.showAudioLang?(e.openBlock(),e.createElementBlock("div",Ue,[o[12]||(o[12]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide"},"Audio:",-1)),e.createVNode(C,{"model-value":t.audioLang,"onUpdate:modelValue":o[1]||(o[1]=a=>c.$emit("update:audioLang",a))},null,8,["model-value"])])):e.createCommentVNode("",!0),e.createElementVNode("div",ze,[o[13]||(o[13]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide"},"Text:",-1)),e.createVNode(C,{"model-value":t.textLang,"onUpdate:modelValue":o[2]||(o[2]=a=>c.$emit("update:textLang",a))},null,8,["model-value"])])],64)),e.renderSlot(c.$slots,"mobile-actions")])])])],2),t.showMobileSettings?(e.openBlock(),e.createElementBlock("div",{key:0,class:"fixed inset-0 bg-black bg-opacity-50 z-50 sm:hidden",onClick:o[9]||(o[9]=a=>c.$emit("update:showMobileSettings",!1))},[e.createElementVNode("div",{class:"absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-xl p-6 space-y-4",onClick:o[8]||(o[8]=e.withModifiers(()=>{},["stop"]))},[e.createElementVNode("div",Re,[o[14]||(o[14]=e.createElementVNode("h2",{class:"text-xl font-bold text-gray-800"},"Settings",-1)),e.createElementVNode("button",{class:"text-gray-500 hover:text-gray-700 text-2xl",onClick:o[3]||(o[3]=a=>c.$emit("update:showMobileSettings",!1))}," × ")]),t.showSpeedControl?(e.openBlock(),e.createElementBlock("div",We,[o[16]||(o[16]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide block"},"Playback Speed",-1)),e.createElementVNode("select",{value:t.playbackSpeed,class:"w-full px-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-700 font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500",onChange:o[4]||(o[4]=a=>c.$emit("update:playbackSpeed",Number(a.target.value)))},[...o[15]||(o[15]=[e.createElementVNode("option",{value:1},"1x (Normal)",-1),e.createElementVNode("option",{value:1.25},"1.25x",-1),e.createElementVNode("option",{value:1.5},"1.5x",-1),e.createElementVNode("option",{value:1.75},"1.75x",-1),e.createElementVNode("option",{value:2},"2x (Double)",-1)])],40,Fe)])):e.createCommentVNode("",!0),t.showAudioLang?(e.openBlock(),e.createElementBlock("div",He,[o[17]||(o[17]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide block"},"Audio Language",-1)),e.createVNode(C,{"model-value":t.audioLang,class:"w-full","onUpdate:modelValue":o[5]||(o[5]=a=>c.$emit("update:audioLang",a))},null,8,["model-value"])])):e.createCommentVNode("",!0),e.createElementVNode("div",Ge,[o[18]||(o[18]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide block"},"Text Language",-1)),e.createVNode(C,{"model-value":t.textLang,class:"w-full","onUpdate:modelValue":o[6]||(o[6]=a=>c.$emit("update:textLang",a))},null,8,["model-value"])]),e.createElementVNode("button",{class:"w-full px-4 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium shadow-sm transition-colors mt-4",onClick:o[7]||(o[7]=a=>c.$emit("update:showMobileSettings",!1))}," Done ")])])):e.createCommentVNode("",!0)],64))}}),qe={class:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"},Je={class:"relative aspect-video bg-gray-200"},Ke=["src","alt"],Qe={class:"absolute top-2 left-2 bg-black bg-opacity-70 text-white px-3 py-1 rounded-full text-sm font-semibold"},Xe={class:"p-4"},Ye={class:"text-gray-700 text-sm line-clamp-3 group-hover:text-indigo-600 transition-colors"},Ze={class:"text-gray-500 text-xs mt-2 space-y-1"},Ie={key:0},et={key:1},tt=e.defineComponent({__name:"beat_grid_view",props:{beats:{},basePath:{default:""},textLang:{default:"en"},linkUrlBuilder:{},linkComponent:{default:"a"}},emits:["beat-click"],setup(t,{emit:c}){const o=t,a=c,f=l=>{const m=Math.floor(l/3600),u=Math.floor(l%3600/60),r=Math.floor(l%60);return m>0?`${m}:${u.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`:`${u}:${r.toString().padStart(2,"0")}`},p=l=>l.multiLinguals?.[o.textLang]||l.text||"No text available",n=l=>`${o.basePath}/${l+1}.jpg`,i=(l,m)=>{o.linkComponent==="a"&&o.linkUrlBuilder&&m.preventDefault(),a("beat-click",l)};return(l,m)=>(e.openBlock(),e.createElementBlock("div",qe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.beats,({beat:u,originalIndex:r})=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.linkComponent),{key:r,to:t.linkUrlBuilder?t.linkUrlBuilder(r):void 0,href:t.linkUrlBuilder?t.linkUrlBuilder(r):void 0,class:"group block bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden",onClick:x=>i(r,x)},{default:e.withCtx(()=>[e.createElementVNode("div",Je,[e.createElementVNode("img",{src:n(r),alt:`Beat ${r+1}`,class:"w-full h-full object-cover"},null,8,Ke),e.createElementVNode("div",Qe,e.toDisplayString(r+1),1)]),e.createElementVNode("div",Xe,[e.createElementVNode("p",Ye,e.toDisplayString(p(u)),1),e.createElementVNode("div",Ze,[u.startTime!==void 0?(e.openBlock(),e.createElementBlock("p",Ie,"Start: "+e.toDisplayString(f(u.startTime)),1)):e.createCommentVNode("",!0),u.duration?(e.openBlock(),e.createElementBlock("p",et,"Duration: "+e.toDisplayString(f(u.duration)),1)):e.createCommentVNode("",!0)])])]),_:2},1032,["to","href","onClick"]))),128))]))}}),ot={class:"space-y-6"},at=["id"],lt={class:"flex items-center gap-3 mb-2 flex-wrap"},nt={class:"bg-indigo-600 text-white px-4 py-1 rounded-full text-sm font-semibold"},st={key:0,class:"text-gray-500 text-sm"},rt={key:1,class:"text-gray-500 text-sm"},it=["src","alt"],ct={class:"text-gray-800 text-base leading-relaxed font-sans"},dt=e.defineComponent({__name:"beat_list_view",props:{beats:{},basePath:{default:""},textLang:{default:"en"},linkUrlBuilder:{},linkComponent:{default:"a"}},emits:["beat-click"],setup(t,{emit:c}){const o=t,a=c,f=l=>{const m=Math.floor(l/3600),u=Math.floor(l%3600/60),r=Math.floor(l%60);return m>0?`${m}:${u.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`:`${u}:${r.toString().padStart(2,"0")}`},p=l=>l.multiLinguals?.[o.textLang]||l.text||"No text available",n=l=>`${o.basePath}/${l+1}.jpg`,i=(l,m)=>{o.linkComponent==="a"&&o.linkUrlBuilder&&m.preventDefault(),a("beat-click",l)};return(l,m)=>(e.openBlock(),e.createElementBlock("div",ot,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.beats,({beat:u,originalIndex:r})=>(e.openBlock(),e.createElementBlock("div",{id:`beat-${r}`,key:r,class:"bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.linkComponent),{to:t.linkUrlBuilder?t.linkUrlBuilder(r):void 0,href:t.linkUrlBuilder?t.linkUrlBuilder(r):void 0,class:"float-left mr-4 mb-2 w-64 flex-shrink-0",onClick:x=>i(r,x)},{default:e.withCtx(()=>[e.createElementVNode("div",lt,[e.createElementVNode("span",nt," #"+e.toDisplayString(r+1),1),u.startTime!==void 0?(e.openBlock(),e.createElementBlock("span",st," Start: "+e.toDisplayString(f(u.startTime)),1)):e.createCommentVNode("",!0),u.duration?(e.openBlock(),e.createElementBlock("span",rt," Duration: "+e.toDisplayString(f(u.duration)),1)):e.createCommentVNode("",!0)]),e.createElementVNode("img",{src:n(r),alt:`Beat ${r+1}`,class:"w-full h-auto object-cover rounded-lg hover:opacity-80 transition-opacity shadow-sm"},null,8,it)]),_:2},1032,["to","href","onClick"])),e.createElementVNode("p",ct,e.toDisplayString(p(u)),1),m[0]||(m[0]=e.createElementVNode("div",{class:"clear-both"},null,-1))],8,at))),128))]))}});b.BeatGridView=tt,b.BeatListView=dt,b.MulmoViewer=Pe,b.MulmoViewerHeader=Oe,b.SelectLanguage=C,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));
+(function(b,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(b=typeof globalThis<"u"?globalThis:b||self,e(b.MulmoCastViewer={},b.Vue))})(this,(function(b,e){"use strict";const j=async o=>await new Promise(r=>setTimeout(r,o)),O=(o,r)=>{const a=l=>l instanceof Error?l:new Error("Aborted");return new Promise((l,p)=>{if(r.aborted){p(a(r.reason));return}const f=()=>{clearTimeout(t),p(a(r.reason))},t=setTimeout(()=>{r.removeEventListener("abort",f),l()},o);r.addEventListener("abort",f,{once:!0})})},q={class:"items-center justify-center w-full"},J={key:0,class:"group relative"},K=["src"],Q={class:"play-overlay absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none"},X={key:0,class:"w-8 h-8 text-white ml-1",fill:"currentColor",viewBox:"0 0 24 24"},Y={key:1,class:"w-8 h-8 text-white",fill:"currentColor",viewBox:"0 0 24 24"},Z={key:1,class:"group relative inline-block"},I=["src","controls"],ee=["src"],te={class:"play-overlay absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none"},oe={key:0,class:"w-8 h-8 text-white ml-1",fill:"currentColor",viewBox:"0 0 24 24"},ae={key:1,class:"w-8 h-8 text-white",fill:"currentColor",viewBox:"0 0 24 24"},le={key:2,class:"group relative inline-block"},ne=["src"],se=["src"],ie={class:"play-overlay absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none"},re={key:0,class:"w-8 h-8 text-white ml-1",fill:"currentColor",viewBox:"0 0 24 24"},de={key:1,class:"w-8 h-8 text-white",fill:"currentColor",viewBox:"0 0 24 24"},ce={key:3,class:"group relative inline-block"},ue=["src"],me={class:"play-overlay absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none"},fe={key:0,class:"w-8 h-8 text-white ml-1",fill:"currentColor",viewBox:"0 0 24 24"},pe={key:1,class:"w-8 h-8 text-white",fill:"currentColor",viewBox:"0 0 24 24"},ge={key:4},ye={key:5,class:"mt-4 px-6 py-4 text-left"},he={class:"text-lg leading-relaxed font-sans text-gray-800"},ke={key:0,class:"text-base leading-relaxed font-sans text-gray-400 mt-3 italic"},xe="https://github.com/receptron/mulmocast-cli/blob/main/assets/images/mulmocast_credit.png?raw=true",ve=e.defineComponent({__name:"mulmo_player",props:{index:{},videoWithAudioSource:{default:void 0},soundEffectSource:{default:void 0},videoSource:{default:void 0},imageSource:{default:void 0},audioSource:{default:void 0},text:{default:void 0},originalText:{default:void 0},duration:{default:void 0},defaultLang:{default:void 0},currentLang:{default:void 0},playbackSpeed:{default:1}},emits:["play","pause","ended"],setup(o,{expose:r,emit:a}){const l=o,p=a,f=e.ref(),t=e.ref(),i=e.ref(),n=e.ref(),m=e.ref(!1),g=()=>{t.value&&i.value&&!isNaN(t.value.duration)&&!isNaN(i.value.duration)&&(m.value=i.value.duration>t.value.duration+1)},c=()=>{if(t.value){if(l.soundEffectSource){t.value.volume=1;return}l.videoSource&&(l.audioSource&&l.currentLang&&l.defaultLang&&l.currentLang!==l.defaultLang?t.value.volume=.2:t.value.volume=0)}},h=()=>{const y=l.playbackSpeed??1;f.value&&(f.value.playbackRate=y),t.value&&(t.value.playbackRate=y),i.value&&(i.value.playbackRate=y),n.value&&(n.value.playbackRate=y)};e.watch([()=>l.currentLang,()=>l.defaultLang,()=>l.videoSource,()=>l.audioSource],()=>{c()}),e.watch(()=>l.playbackSpeed,()=>{h()}),e.watch(t,y=>{y&&(c(),h())}),e.watch([f,i,n],()=>{h()}),e.onMounted(()=>{c(),h()});const w=e.ref(!1),k=e.ref(!1),E=e.computed(()=>u.value||k.value);let x=null;const $=()=>{x&&(x.abort(),x=null)},T=()=>{u.value=!0,i.value&&t.value&&!i.value.ended&&(i.value.currentTime=t.value.currentTime,i.value.play().catch(()=>{})),p("play")},z=y=>{k.value||t.value?.ended&&i.value&&!i.value.ended||(document.hidden||(u.value=!1),!t.value?.ended&&i?.value&&i.value?.pause(),L(y))},M=()=>{if(w.value)return;(!i.value||i.value.ended)&&P()},C=()=>{if(w.value)return;(!t.value||t.value.ended)&&P()},_=()=>{if(!t.value||!i.value)return;const y=Math.min(i.value.currentTime,t.value.duration);Math.abs(t.value.currentTime-y)>.5&&(t.value.currentTime=y)},R=()=>{u.value=!0,t.value&&!t.value.ended&&t.value.play().catch(()=>{}),p("play")},S=()=>{k.value||i.value?.ended||(document.hidden||(u.value=!1),t.value&&!t.value.ended&&t.value.pause(),p("pause"))},D=()=>{u.value=!0,p("play")},L=y=>{if(k.value)return;document.hidden||(u.value=!1);const d=y.target;d.duration!==d.currentTime&&p("pause")},P=()=>{w.value||(w.value=!0,u.value=!1,p("ended"))},s=()=>{f.value?.pause(),t.value?.pause(),i.value?.pause(),n.value?.pause()},u=e.ref(!1);let v=null;const V=async()=>{if(k.value=!1,w.value=!1,u.value=!0,f.value&&(h(),f.value.play().catch(()=>{})),t.value&&(c(),h(),t.value.play().catch(()=>{}),i.value&&(i.value.currentTime=t.value.currentTime,i.value.play().catch(()=>{}))),n.value&&(h(),n.value.play().catch(()=>{})),!f.value&&!t.value&&!n.value)try{$(),x=new AbortController,await O((l.duration??0)*1e3,x.signal),x=null,w.value||(u.value=!1,w.value=!0,p("ended"))}catch{}},ft=()=>{k.value=!0,u.value=!1,w.value=!0,$(),f.value?.pause(),t.value?.pause(),i.value?.pause(),n.value?.pause()},pt=()=>{!i.value||!t.value||i.value.ended||Math.abs(i.value.currentTime-t.value.currentTime)>.5&&(i.value.currentTime=t.value.currentTime)},A=y=>{y?.paused&&!y.ended&&y.play().catch(()=>{})},gt=(y,d)=>{d.paused&&!d.ended&&(y.ended||(d.currentTime=y.currentTime),d.play().catch(()=>{}))},H=()=>{u.value&&(A(f.value),t.value&&i.value?(A(t.value),gt(t.value,i.value)):A(t.value),A(n.value))},G=()=>{document.hidden&&u.value?v||(v=setInterval(H,500)):document.hidden||v&&(clearInterval(v),v=null)},B=()=>{document.hidden&&u.value&&setTimeout(H,50)};return e.onMounted(()=>{document.addEventListener("visibilitychange",G),f.value?.addEventListener("pause",B),t.value?.addEventListener("pause",B),n.value?.addEventListener("pause",B),i.value?.addEventListener("pause",B)}),e.onUnmounted(()=>{document.removeEventListener("visibilitychange",G),f.value?.removeEventListener("pause",B),t.value?.removeEventListener("pause",B),n.value?.removeEventListener("pause",B),i.value?.removeEventListener("pause",B),v&&(clearInterval(v),v=null),$()}),r({play:V,stop:ft}),(y,d)=>(e.openBlock(),e.createElementBlock("div",q,[o.videoWithAudioSource?(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("video",{ref_key:"videoWithAudioRef",ref:f,src:o.videoWithAudioSource,class:"mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",controls:!0,playsinline:"true",onPlay:D,onPause:L,onEnded:P},null,40,K),e.createElementVNode("div",Q,[e.createElementVNode("button",{class:"pointer-events-auto w-16 h-16 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center transition-colors cursor-pointer",onClick:d[0]||(d[0]=F=>E.value?s():V())},[E.value?(e.openBlock(),e.createElementBlock("svg",Y,[...d[5]||(d[5]=[e.createElementVNode("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",X,[...d[4]||(d[4]=[e.createElementVNode("path",{d:"M8 5v14l11-7z"},null,-1)])]))])])])):o.soundEffectSource||o.videoSource?(e.openBlock(),e.createElementBlock("div",Z,[e.createElementVNode("video",{ref_key:"videoRef",ref:t,class:"mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",src:o.soundEffectSource||o.videoSource,controls:!m.value,playsinline:"true",onPlay:T,onPause:z,onEnded:M,onSeeked:pt,onLoadedmetadata:g},null,40,I),o.audioSource?(e.openBlock(),e.createElementBlock("audio",{key:0,ref_key:"audioSyncRef",ref:i,src:o.audioSource,controls:!0,class:e.normalizeClass(m.value?"mulmocast-audio absolute bottom-0 left-0 w-full":"hidden"),onEnded:C,onSeeked:_,onPlay:R,onPause:S,onLoadedmetadata:g},null,42,ee)):e.createCommentVNode("",!0),e.createElementVNode("div",te,[e.createElementVNode("button",{class:"pointer-events-auto w-16 h-16 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center transition-colors cursor-pointer",onClick:d[1]||(d[1]=F=>E.value?s():V())},[E.value?(e.openBlock(),e.createElementBlock("svg",ae,[...d[7]||(d[7]=[e.createElementVNode("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",oe,[...d[6]||(d[6]=[e.createElementVNode("path",{d:"M8 5v14l11-7z"},null,-1)])]))])])])):o.audioSource?(e.openBlock(),e.createElementBlock("div",le,[o.imageSource?(e.openBlock(),e.createElementBlock("img",{key:0,src:o.imageSource,class:"mx-auto h-auto max-h-[80vh] w-auto object-contain",alt:"Background"},null,8,ne)):(e.openBlock(),e.createElementBlock("img",{key:1,src:xe,class:"mx-auto h-auto max-h-[80vh] w-auto object-contain",alt:"Background"})),e.createElementVNode("audio",{ref_key:"audioRef",ref:n,class:"mulmocast-audio absolute inset-0 w-full h-full",src:o.audioSource,controls:!0,onPlay:D,onPause:L,onEnded:P},null,40,se),e.createElementVNode("div",ie,[e.createElementVNode("button",{class:"pointer-events-auto w-16 h-16 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center transition-colors cursor-pointer",onClick:d[2]||(d[2]=F=>E.value?s():V())},[E.value?(e.openBlock(),e.createElementBlock("svg",de,[...d[9]||(d[9]=[e.createElementVNode("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",re,[...d[8]||(d[8]=[e.createElementVNode("path",{d:"M8 5v14l11-7z"},null,-1)])]))])])])):o.imageSource?(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("img",{src:o.imageSource,class:"max-w-full max-h-full object-contain"},null,8,ue),e.createElementVNode("div",me,[e.createElementVNode("button",{class:"pointer-events-auto w-16 h-16 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center transition-colors cursor-pointer",onClick:d[3]||(d[3]=F=>E.value?s():V())},[E.value?(e.openBlock(),e.createElementBlock("svg",pe,[...d[11]||(d[11]=[e.createElementVNode("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",fe,[...d[10]||(d[10]=[e.createElementVNode("path",{d:"M8 5v14l11-7z"},null,-1)])]))])])])):(e.openBlock(),e.createElementBlock("div",ge,"No media available")),o.text?(e.openBlock(),e.createElementBlock("div",ye,[e.createElementVNode("p",he,e.toDisplayString(o.text),1),o.originalText&&o.originalText!==o.text?(e.openBlock(),e.createElementBlock("p",ke,e.toDisplayString(o.originalText),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]))}}),W=(o,r)=>{const a=o.__vccOpts||o;for(const[l,p]of r)a[l]=p;return a},U=W(ve,[["__scopeId","data-v-843621f0"]]),be=["value"],Ee=["value"],N=e.defineComponent({__name:"select_language",props:{modelValue:{}},emits:["update:modelValue"],setup(o,{emit:r}){const a=["en","ja"],l={en:"English",ja:"日本語"},p=r,f=t=>{const i=t.target;p("update:modelValue",i.value)};return(t,i)=>(e.openBlock(),e.createElementBlock("select",{value:o.modelValue,class:"px-4 py-2 bg-white border-2 border-gray-300 rounded-lg shadow-sm hover:border-indigo-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none transition-colors cursor-pointer text-base font-medium text-gray-700",onChange:f},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(a,n=>e.createElementVNode("option",{key:n,value:n},e.toDisplayString(l[n]||n),9,Ee)),64))],40,be))}}),we={class:"w-full overflow-hidden"},Se={class:"max-w-7xl mx-auto px-4"},Be={class:"grid grid-cols-[auto,1fr,auto] gap-x-4 gap-y-4 max-sm:grid-cols-2"},Ve=["disabled"],Ne={class:"col-start-2 row-start-1 min-w-0 max-sm:col-span-2 max-sm:col-start-1"},$e=["disabled"],Ce={key:0,class:"mulmo-text-box col-start-2 row-start-2 min-w-0 mt-1 rounded-lg px-6 py-4 text-left max-sm:col-span-2 max-sm:col-start-1 max-sm:row-start-3"},Le={class:"mulmo-text-primary text-lg leading-relaxed font-sans"},Pe={key:0,class:"mulmo-text-secondary text-base leading-relaxed font-sans mt-3 italic"},Te=["src"],Me=W(e.defineComponent({__name:"mulmo_viewer",props:{dataSet:{default:void 0},basePath:{},initPage:{default:void 0},audioLang:{default:"en"},textLang:{default:"en"},playbackSpeed:{default:1}},emits:["updatedPage","update:audioLang","update:textLang","allCompleted"],setup(o,{expose:r,emit:a}){const l=o,p=a,f=l.dataSet?.beats?.length??0,t=e.ref(l.initPage??0),i=e.ref(!0),n=e.ref(),m=e.ref(),g=e.computed({get:()=>l.audioLang,set:s=>p("update:audioLang",s||"en")}),c=e.computed({get:()=>l.textLang,set:s=>p("update:textLang",s||"en")});let h=0;e.watch(()=>l.audioLang,async(s,u)=>{if(s!==u&&x.value){h++;const v=h;if(n.value?.stop(),await j(500),v!==h)return;n.value&&(x.value=!0,await n.value.play())}}),e.watch(()=>l.textLang,async(s,u)=>{s!==u&&x.value&&(await j(100),n.value&&await n.value.play())}),e.watch(m,s=>{s&&(s.volume=.3)});const w=e.computed(()=>l.dataSet?.beats[t.value]),k=s=>s?l.basePath+"/"+s:"",E=e.computed(()=>k(l.dataSet?.bgmSource)),x=e.ref(!1),$=()=>{x.value=!0,m.value&&(m.value.volume=.3,m.value.play())},T=()=>{x.value=!1,m.value&&m.value.pause()},z=async()=>{h++;const s=h;n.value?.stop(),await j(500),s===h&&n.value&&n.value.play()},M=s=>{t.value!==s&&(t.value=s,x.value&&i.value&&z())},C=s=>{const u=t.value+s;return u>-1&&u<f?(M(u),p("updatedPage",u),!0):!1},_=()=>{i.value&&C(1)||(x.value=!1,m.value&&m.value.pause(),p("allCompleted"))},R={onPlay:$,onPause:T,onEnded:_},S=e.computed(()=>{const s=w.value,u=s?.audioSources?.[g.value],v=s?.multiLinguals?.[c.value]??s?.text??"",V=l.dataSet?.lang?s?.multiLinguals?.[l.dataSet.lang]??s?.text??"":"";return{videoWithAudioSource:k(s?.videoWithAudioSource),videoSource:k(s?.videoSource),soundEffectSource:k(s?.soundEffectSource),audioSource:k(u),imageSource:k(s?.imageSource),index:t.value,text:v,originalText:V,duration:s?.duration,defaultLang:l.dataSet?.lang,currentLang:g.value,playbackSpeed:l.playbackSpeed,...R}}),D=e.computed(()=>l.dataSet?.beats[t.value+1]),L=e.computed(()=>{if(t.value+1>=f)return null;const s=D.value;return{videoWithAudioSource:k(s?.videoWithAudioSource),videoSource:k(s?.videoSource),soundEffectSource:k(s?.soundEffectSource),audioSource:k(s?.audioSources?.[g.value]),imageSource:k(s?.imageSource),index:t.value+1,text:s?.multiLinguals?.[c.value]??s?.text??"",duration:s?.duration}}),P=e.computed(()=>({MulmoPlayer:U,pageProps:S.value,currentPage:t.value,pageCount:f,pageMove:C,isPlaying:x.value,audioLang:g,textLang:c,SelectLanguage:N,mediaPlayerRef:n,handlePlay:$,handlePause:T,handleEnded:_}));return r({updatePage:M}),(s,u)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(s.$slots,"default",e.normalizeProps(e.guardReactiveProps(P.value)),()=>[e.createElementVNode("div",we,[e.createElementVNode("div",Se,[e.createElementVNode("div",Be,[e.createElementVNode("button",{class:"col-start-1 row-start-1 justify-self-start w-auto px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50 self-center max-sm:row-start-2",disabled:t.value===0,onClick:u[0]||(u[0]=v=>C(-1))}," Prev ",8,Ve),e.createElementVNode("div",Ne,[e.createVNode(U,e.mergeProps({ref_key:"mediaPlayer",ref:n},{...S.value,text:"",originalText:""}),null,16)]),e.createElementVNode("button",{class:"col-start-3 row-start-1 justify-self-end w-auto px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50 self-center max-sm:col-start-2 max-sm:row-start-2",disabled:t.value>=e.unref(f)-1,onClick:u[1]||(u[1]=v=>C(1))}," Next ",8,$e),S.value.text?(e.openBlock(),e.createElementBlock("div",Ce,[e.createElementVNode("p",Le,e.toDisplayString(S.value.text),1),S.value.originalText&&S.value.originalText!==S.value.text?(e.openBlock(),e.createElementBlock("p",Pe,e.toDisplayString(S.value.originalText),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)])])])],!0),L.value?e.withDirectives((e.openBlock(),e.createBlock(U,e.normalizeProps(e.mergeProps({key:0},L.value)),null,16)),[[e.vShow,!1]]):e.createCommentVNode("",!0),E.value?(e.openBlock(),e.createElementBlock("audio",{key:1,ref_key:"bgmRef",ref:m,src:E.value},null,8,Te)):e.createCommentVNode("",!0)],64))}}),[["__scopeId","data-v-fdffe885"]]),_e={class:"container mx-auto px-4 py-2 sm:py-4"},De={class:"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 sm:gap-4"},Ae={class:"flex items-center gap-4 flex-wrap"},je={class:"flex items-center gap-2 sm:gap-4 flex-wrap w-full sm:w-auto"},Ue={key:0,class:"hidden sm:flex items-center gap-3"},ze=["value"],Re={key:1,class:"hidden sm:flex items-center gap-3"},Fe={class:"hidden sm:flex items-center gap-3"},We={class:"flex items-center justify-between mb-4"},He={key:0,class:"space-y-2"},Ge=["value"],Oe={key:1,class:"space-y-2"},qe={class:"space-y-2"},Je=e.defineComponent({__name:"mulmo_viewer_header",props:{audioLang:{},textLang:{},playbackSpeed:{default:1},showSpeedControl:{type:Boolean,default:!0},showAudioLang:{type:Boolean,default:!0},hideDesktopControls:{type:Boolean,default:!1},showMobileSettings:{type:Boolean,default:!1},sticky:{type:Boolean,default:!1}},emits:["update:audioLang","update:textLang","update:playbackSpeed","update:showMobileSettings"],setup(o){return(r,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["bg-white shadow-md border-b border-gray-200",{"sticky top-0 z-50":o.sticky}])},[e.createElementVNode("div",_e,[e.createElementVNode("div",De,[e.createElementVNode("div",Ae,[e.renderSlot(r.$slots,"left")]),e.createElementVNode("div",je,[e.renderSlot(r.$slots,"actions"),o.hideDesktopControls?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[o.showSpeedControl?(e.openBlock(),e.createElementBlock("div",Ue,[a[11]||(a[11]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide"},"Speed:",-1)),e.createElementVNode("select",{value:o.playbackSpeed,class:"px-3 py-2 border border-gray-300 rounded-lg bg-white text-gray-700 font-medium shadow-sm hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors",onChange:a[0]||(a[0]=l=>r.$emit("update:playbackSpeed",Number(l.target.value)))},[...a[10]||(a[10]=[e.createElementVNode("option",{value:1},"1x",-1),e.createElementVNode("option",{value:1.25},"1.25x",-1),e.createElementVNode("option",{value:1.5},"1.5x",-1),e.createElementVNode("option",{value:1.75},"1.75x",-1),e.createElementVNode("option",{value:2},"2x",-1)])],40,ze)])):e.createCommentVNode("",!0),o.showAudioLang?(e.openBlock(),e.createElementBlock("div",Re,[a[12]||(a[12]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide"},"Audio:",-1)),e.createVNode(N,{"model-value":o.audioLang,"onUpdate:modelValue":a[1]||(a[1]=l=>r.$emit("update:audioLang",l))},null,8,["model-value"])])):e.createCommentVNode("",!0),e.createElementVNode("div",Fe,[a[13]||(a[13]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide"},"Text:",-1)),e.createVNode(N,{"model-value":o.textLang,"onUpdate:modelValue":a[2]||(a[2]=l=>r.$emit("update:textLang",l))},null,8,["model-value"])])],64)),e.renderSlot(r.$slots,"mobile-actions")])])])],2),o.showMobileSettings?(e.openBlock(),e.createElementBlock("div",{key:0,class:"fixed inset-0 bg-black bg-opacity-50 z-50 sm:hidden",onClick:a[9]||(a[9]=l=>r.$emit("update:showMobileSettings",!1))},[e.createElementVNode("div",{class:"absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-xl p-6 space-y-4",onClick:a[8]||(a[8]=e.withModifiers(()=>{},["stop"]))},[e.createElementVNode("div",We,[a[14]||(a[14]=e.createElementVNode("h2",{class:"text-xl font-bold text-gray-800"},"Settings",-1)),e.createElementVNode("button",{class:"text-gray-500 hover:text-gray-700 text-2xl",onClick:a[3]||(a[3]=l=>r.$emit("update:showMobileSettings",!1))}," × ")]),o.showSpeedControl?(e.openBlock(),e.createElementBlock("div",He,[a[16]||(a[16]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide block"},"Playback Speed",-1)),e.createElementVNode("select",{value:o.playbackSpeed,class:"w-full px-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-700 font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500",onChange:a[4]||(a[4]=l=>r.$emit("update:playbackSpeed",Number(l.target.value)))},[...a[15]||(a[15]=[e.createElementVNode("option",{value:1},"1x (Normal)",-1),e.createElementVNode("option",{value:1.25},"1.25x",-1),e.createElementVNode("option",{value:1.5},"1.5x",-1),e.createElementVNode("option",{value:1.75},"1.75x",-1),e.createElementVNode("option",{value:2},"2x (Double)",-1)])],40,Ge)])):e.createCommentVNode("",!0),o.showAudioLang?(e.openBlock(),e.createElementBlock("div",Oe,[a[17]||(a[17]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide block"},"Audio Language",-1)),e.createVNode(N,{"model-value":o.audioLang,class:"w-full","onUpdate:modelValue":a[5]||(a[5]=l=>r.$emit("update:audioLang",l))},null,8,["model-value"])])):e.createCommentVNode("",!0),e.createElementVNode("div",qe,[a[18]||(a[18]=e.createElementVNode("label",{class:"text-sm font-semibold text-gray-700 uppercase tracking-wide block"},"Text Language",-1)),e.createVNode(N,{"model-value":o.textLang,class:"w-full","onUpdate:modelValue":a[6]||(a[6]=l=>r.$emit("update:textLang",l))},null,8,["model-value"])]),e.createElementVNode("button",{class:"w-full px-4 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium shadow-sm transition-colors mt-4",onClick:a[7]||(a[7]=l=>r.$emit("update:showMobileSettings",!1))}," Done ")])])):e.createCommentVNode("",!0)],64))}}),Ke={class:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"},Qe={class:"relative aspect-video bg-gray-200"},Xe=["src","alt"],Ye={class:"absolute top-2 left-2 bg-black bg-opacity-70 text-white px-3 py-1 rounded-full text-sm font-semibold"},Ze={class:"p-4"},Ie={class:"text-gray-700 text-sm line-clamp-3 group-hover:text-indigo-600 transition-colors"},et={class:"text-gray-500 text-xs mt-2 space-y-1"},tt={key:0},ot={key:1},at=e.defineComponent({__name:"beat_grid_view",props:{beats:{},basePath:{default:""},textLang:{default:"en"},linkUrlBuilder:{type:Function,default:void 0},linkComponent:{default:"a"}},emits:["beat-click"],setup(o,{emit:r}){const a=o,l=r,p=n=>{const m=Math.floor(n/3600),g=Math.floor(n%3600/60),c=Math.floor(n%60);return m>0?`${m}:${g.toString().padStart(2,"0")}:${c.toString().padStart(2,"0")}`:`${g}:${c.toString().padStart(2,"0")}`},f=n=>n.multiLinguals?.[a.textLang]||n.text||"No text available",t=n=>`${a.basePath}/${n+1}.jpg`,i=(n,m)=>{a.linkComponent==="a"&&a.linkUrlBuilder&&m.preventDefault(),l("beat-click",n)};return(n,m)=>(e.openBlock(),e.createElementBlock("div",Ke,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.beats,({beat:g,originalIndex:c})=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.linkComponent),{key:c,to:o.linkUrlBuilder?o.linkUrlBuilder(c):void 0,href:o.linkUrlBuilder?o.linkUrlBuilder(c):void 0,class:"group block bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden",onClick:h=>i(c,h)},{default:e.withCtx(()=>[e.createElementVNode("div",Qe,[e.createElementVNode("img",{src:t(c),alt:`Beat ${c+1}`,class:"w-full h-full object-cover"},null,8,Xe),e.createElementVNode("div",Ye,e.toDisplayString(c+1),1)]),e.createElementVNode("div",Ze,[e.createElementVNode("p",Ie,e.toDisplayString(f(g)),1),e.createElementVNode("div",et,[g.startTime!==void 0?(e.openBlock(),e.createElementBlock("p",tt,"Start: "+e.toDisplayString(p(g.startTime)),1)):e.createCommentVNode("",!0),g.duration?(e.openBlock(),e.createElementBlock("p",ot,"Duration: "+e.toDisplayString(p(g.duration)),1)):e.createCommentVNode("",!0)])])]),_:2},1032,["to","href","onClick"]))),128))]))}}),lt={class:"space-y-6"},nt=["id"],st={class:"flex items-center gap-3 mb-2 flex-wrap"},it={class:"bg-indigo-600 text-white px-4 py-1 rounded-full text-sm font-semibold"},rt={key:0,class:"text-gray-500 text-sm"},dt={key:1,class:"text-gray-500 text-sm"},ct=["src","alt"],ut={class:"text-gray-800 text-base leading-relaxed font-sans"},mt=e.defineComponent({__name:"beat_list_view",props:{beats:{},basePath:{default:""},textLang:{default:"en"},linkUrlBuilder:{type:Function,default:void 0},linkComponent:{default:"a"}},emits:["beat-click"],setup(o,{emit:r}){const a=o,l=r,p=n=>{const m=Math.floor(n/3600),g=Math.floor(n%3600/60),c=Math.floor(n%60);return m>0?`${m}:${g.toString().padStart(2,"0")}:${c.toString().padStart(2,"0")}`:`${g}:${c.toString().padStart(2,"0")}`},f=n=>n.multiLinguals?.[a.textLang]||n.text||"No text available",t=n=>`${a.basePath}/${n+1}.jpg`,i=(n,m)=>{a.linkComponent==="a"&&a.linkUrlBuilder&&m.preventDefault(),l("beat-click",n)};return(n,m)=>(e.openBlock(),e.createElementBlock("div",lt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.beats,({beat:g,originalIndex:c})=>(e.openBlock(),e.createElementBlock("div",{id:`beat-${c}`,key:c,class:"bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.linkComponent),{to:o.linkUrlBuilder?o.linkUrlBuilder(c):void 0,href:o.linkUrlBuilder?o.linkUrlBuilder(c):void 0,class:"float-left mr-4 mb-2 w-64 flex-shrink-0",onClick:h=>i(c,h)},{default:e.withCtx(()=>[e.createElementVNode("div",st,[e.createElementVNode("span",it," #"+e.toDisplayString(c+1),1),g.startTime!==void 0?(e.openBlock(),e.createElementBlock("span",rt," Start: "+e.toDisplayString(p(g.startTime)),1)):e.createCommentVNode("",!0),g.duration?(e.openBlock(),e.createElementBlock("span",dt," Duration: "+e.toDisplayString(p(g.duration)),1)):e.createCommentVNode("",!0)]),e.createElementVNode("img",{src:t(c),alt:`Beat ${c+1}`,class:"w-full h-auto object-cover rounded-lg hover:opacity-80 transition-opacity shadow-sm"},null,8,ct)]),_:2},1032,["to","href","onClick"])),e.createElementVNode("p",ut,e.toDisplayString(f(g)),1),m[0]||(m[0]=e.createElementVNode("div",{class:"clear-both"},null,-1))],8,nt))),128))]))}});b.BeatGridView=at,b.BeatListView=mt,b.MulmoViewer=Me,b.MulmoViewerHeader=Je,b.SelectLanguage=N,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast-viewer",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "license": "MIT",
   "main": "dist/mulmocast-viewer.umd.js",
@@ -36,26 +36,29 @@
   },
   "repository": "git+ssh://git@github.com/receptron/mulmocast-viewer.git",
   "author": "receptron",
+  "dependencies": {
+    "@mulmocast/types": "2.1.36"
+  },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.58.2",
     "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.2.2",
+    "@types/node": "^25.2.3",
     "@vitejs/plugin-vue": "^6.0.4",
     "@vue/tsconfig": "^0.8.1",
-    "eslint": "^9.39.2",
+    "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-sonarjs": "^3.0.6",
+    "eslint-plugin-sonarjs": "^3.0.7",
     "eslint-plugin-vue": "^10.7.0",
     "globals": "^17.3.0",
     "prettier": "^3.8.1",
     "tailwindcss": "^4.1.18",
     "tsx": "^4.21.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.54.0",
+    "typescript-eslint": "^8.55.0",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vue": "^3.5.27",
+    "vue": "^3.5.28",
     "vue-eslint-parser": "^10.2.0",
     "vue-i18n": "^11.2.8",
     "vue-router": "^5.0.2",