mulmocast-viewer 0.2.0 → 0.2.2

package/dist/mulmocast-viewer.es.js

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