@gui-chat-plugin/mulmocast 0.0.2 → 0.1.0

package/dist/vue.js

@@ -1,703 +1,744 @@
-import { v as le, s as oe, p as ne } from "./index-BaFRLiBo.js";
-import { T as ft, e as yt } from "./index-BaFRLiBo.js";
-import { defineComponent as W, ref as b, computed as L, watch as T, createElementBlock as r, openBlock as s, Fragment as z, renderSlot as ue, withDirectives as Q, createCommentVNode as _, normalizeProps as H, guardReactiveProps as se, createElementVNode as v, createVNode as ie, mergeProps as Y, unref as X, createBlock as ee, vShow as re, renderList as te, toDisplayString as N, onMounted as Z, onUnmounted as ae, createTextVNode as D, normalizeClass as K, vModelText as de } from "vue";
-const G = async (o) => await new Promise((w) => setTimeout(w, o)), ce = { class: "items-center justify-center w-full" }, ve = { key: 0 }, me = ["src"], pe = {
-  key: 1,
-  class: "relative inline-block"
-}, ge = ["src"], fe = ["src"], ye = {
-  key: 2,
-  class: "relative inline-block"
-}, be = ["src"], he = ["src"], Se = {
-  key: 3,
-  class: "relative inline-block"
-}, we = ["src"], ke = { key: 4 }, xe = {
-  key: 5,
-  class: "mt-4 px-6 py-4 text-left"
-}, Pe = { class: "text-lg leading-relaxed font-sans text-gray-800" }, Re = {
-  key: 0,
-  class: "text-base leading-relaxed font-sans text-gray-400 mt-3 italic"
-}, Le = "https://github.com/receptron/mulmocast-cli/blob/main/assets/images/mulmocast_credit.png?raw=true", q = /* @__PURE__ */ W({
-  __name: "mulmo_player",
-  props: {
-    index: {},
-    videoWithAudioSource: {},
-    soundEffectSource: {},
-    videoSource: {},
-    imageSource: {},
-    audioSource: {},
-    text: {},
-    originalText: {},
-    duration: {},
-    defaultLang: {},
-    currentLang: {},
-    playbackSpeed: { default: 1 }
-  },
-  emits: ["play", "pause", "ended"],
-  setup(o, { expose: w, emit: u }) {
-    const n = o, h = u, m = b(), l = b(), i = b(), d = b(), y = () => {
-      l.value && n.videoSource && (n.audioSource && n.currentLang && n.defaultLang && n.currentLang !== n.defaultLang ? l.value.volume = 0.2 : l.value.volume = 0);
-    }, p = () => {
-      const g = n.playbackSpeed ?? 1;
-      m.value && (m.value.playbackRate = g), l.value && (l.value.playbackRate = g), i.value && (i.value.playbackRate = g), d.value && (d.value.playbackRate = g);
-    };
-    T([() => n.currentLang, () => n.defaultLang, () => n.videoSource, () => n.audioSource], () => {
-      y();
-    }), T(
-      () => n.playbackSpeed,
-      () => {
-        p();
-      }
-    ), T(l, (g) => {
-      g && (y(), p());
-    }), T([m, i, d], () => {
-      p();
-    }), Z(() => {
-      y(), p();
-    });
-    const U = () => {
-      x.value = !0, i.value && l.value && (i.value.currentTime = l.value.currentTime, i.value.currentTime === l.value.currentTime && i.value.play()), h("play");
-    }, V = (g) => {
-      document.hidden || (x.value = !1), !l.value?.ended && i?.value && i.value?.pause(), console.log(g), C(g);
-    }, k = () => {
-      (!i.value || i.value.ended) && j();
-    }, P = () => {
-      (!l.value || l.value.ended) && j();
-    }, f = () => {
-      x.value = !0, h("play");
-    }, C = (g) => {
-      document.hidden || (x.value = !1);
-      const t = g.target;
-      t.duration !== t.currentTime && h("pause");
-    }, j = () => {
-      x.value = !1, h("ended");
-    }, x = b(!1);
-    let R = null;
-    const J = async () => {
-      x.value = !0, m.value && (p(), m.value.play()), l.value && (y(), p(), l.value.play(), i.value && (i.value.currentTime = l.value.currentTime, i.value.play())), d.value && (p(), d.value.play()), !m.value && !l.value && !d.value && (await G((n.duration ?? 0) * 1e3), x.value = !1, h("ended"));
-    }, M = (g) => {
-      g?.paused && !g.ended && g.play().catch(() => {
-      });
-    }, A = (g, t) => {
-      t.paused && !t.ended && (g.ended || (t.currentTime = g.currentTime), t.play().catch(() => {
-      }));
-    }, $ = () => {
-      x.value && (M(m.value), l.value && i.value ? (M(l.value), A(l.value, i.value)) : M(l.value), M(d.value));
-    }, I = () => {
-      document.hidden && x.value ? R || (R = setInterval($, 500)) : document.hidden || R && (clearInterval(R), R = null);
-    }, E = () => {
-      document.hidden && x.value && setTimeout($, 50);
-    };
-    return Z(() => {
-      document.addEventListener("visibilitychange", I), m.value?.addEventListener("pause", E), l.value?.addEventListener("pause", E), d.value?.addEventListener("pause", E), i.value?.addEventListener("pause", E);
-    }), ae(() => {
-      document.removeEventListener("visibilitychange", I), m.value?.removeEventListener("pause", E), l.value?.removeEventListener("pause", E), d.value?.removeEventListener("pause", E), i.value?.removeEventListener("pause", E), R && (clearInterval(R), R = null);
-    }), w({
-      play: J
-    }), (g, t) => (s(), r("div", ce, [
-      o.videoWithAudioSource ? (s(), r("div", ve, [
-        v("video", {
-          ref_key: "videoWithAudioRef",
-          ref: m,
-          src: o.videoWithAudioSource,
-          class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
-          controls: !0,
-          playsinline: "true",
-          onPlay: f,
-          onPause: C,
-          onEnded: j
-        }, null, 40, me)
-      ])) : o.soundEffectSource || o.videoSource ? (s(), r("div", pe, [
-        v("video", {
-          ref_key: "videoRef",
-          ref: l,
-          class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
-          src: o.soundEffectSource || o.videoSource,
-          controls: !0,
-          playsinline: "true",
-          onPlay: U,
-          onPause: V,
-          onEnded: k
-        }, null, 40, ge),
-        o.audioSource ? (s(), r("audio", {
-          key: 0,
-          ref_key: "audioSyncRef",
-          ref: i,
-          src: o.audioSource,
-          controls: !0,
-          class: "hidden",
-          onEnded: P
-        }, null, 40, fe)) : _("", !0)
-      ])) : o.audioSource ? (s(), r("div", ye, [
-        o.imageSource ? (s(), r("img", {
-          key: 0,
-          src: o.imageSource,
-          class: "mx-auto h-auto max-h-[80vh] w-auto object-contain",
-          alt: "Background"
-        }, null, 8, be)) : (s(), r("img", {
-          key: 1,
-          src: Le,
-          class: "mx-auto h-auto max-h-[80vh] w-auto object-contain",
-          alt: "Background"
-        })),
-        v("audio", {
-          ref_key: "audioRef",
-          ref: d,
-          class: "mulmocast-audio absolute inset-0 w-full h-full",
-          src: o.audioSource,
-          controls: !0,
-          onPlay: f,
-          onPause: C,
-          onEnded: j
-        }, null, 40, he)
-      ])) : o.imageSource ? (s(), r("div", Se, [
-        v("img", {
-          src: o.imageSource,
-          class: "max-w-full max-h-full object-contain"
-        }, null, 8, we)
-      ])) : (s(), r("div", ke, "No media available")),
-      o.text ? (s(), r("div", xe, [
-        v("p", Pe, N(o.text), 1),
-        o.originalText && o.originalText !== o.text ? (s(), r("p", Re, N(o.originalText), 1)) : _("", !0)
-      ])) : _("", !0)
-    ]));
-  }
-}), Ee = ["value"], _e = ["value"], Ce = /* @__PURE__ */ W({
-  __name: "select_language",
-  props: {
-    modelValue: {}
-  },
-  emits: ["update:modelValue"],
-  setup(o, { emit: w }) {
-    const u = ["en", "ja"], n = {
-      en: "English",
-      ja: "日本語"
-    }, h = w, m = (l) => {
-      const i = l.target;
-      h("update:modelValue", i.value);
-    };
-    return (l, i) => (s(), r("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: m
-    }, [
-      (s(), r(z, null, te(u, (d) => v("option", {
-        key: d,
-        value: d
-      }, N(n[d] || d), 9, _e)), 64))
-    ], 40, Ee));
-  }
-}), Te = { class: "w-full overflow-hidden" }, Oe = { class: "max-w-7xl mx-auto px-4" }, je = { class: "flex items-center justify-between" }, Me = ["disabled"], Ne = { class: "px-4" }, Ue = ["disabled"], Je = ["src"], $e = /* @__PURE__ */ W({
-  __name: "mulmo_viewer",
-  props: {
-    dataSet: {},
-    basePath: {},
-    initPage: {},
-    audioLang: { default: "en" },
-    textLang: { default: "en" },
-    playbackSpeed: { default: 1 }
-  },
-  emits: ["updatedPage", "update:audioLang", "update:textLang", "allCompleted"],
-  setup(o, { expose: w, emit: u }) {
-    const n = o, h = u, m = n.dataSet?.beats?.length ?? 0, l = b(n.initPage ?? 0), i = b(!0), d = b(), y = b(), p = L({
-      get: () => n.audioLang,
-      set: (t) => h("update:audioLang", t || "en")
-    }), U = L({
-      get: () => n.textLang,
-      set: (t) => h("update:textLang", t || "en")
-    });
-    T(
-      () => n.audioLang,
-      async (t, e) => {
-        if (t !== e && f.value) {
-          const a = f.value;
-          f.value = !1, await G(500), a && d.value && (f.value = !0, await d.value.play());
-        }
-      }
-    ), T(
-      () => n.textLang,
-      async (t, e) => {
-        t !== e && f.value && (await G(100), d.value && await d.value.play());
-      }
-    ), T(y, (t) => {
-      t && (t.volume = 0.3);
-    });
-    const V = L(() => n.dataSet?.beats[l.value]), k = (t) => t ? n.basePath + "/" + t : "", P = L(() => k(n.dataSet?.bgmSource)), f = b(!1), C = () => {
-      f.value = !0, y.value && (y.value.volume = 0.3, y.value.play());
-    }, j = () => {
-      console.log("pause"), f.value = !1, y.value && y.value.pause();
-    }, x = async () => {
-      await G(500), d.value && d.value.play();
-    }, R = (t) => {
-      l.value !== t && (l.value = t, f.value && i.value && x());
-    }, J = (t) => {
-      const e = l.value + t;
-      return e > -1 && e < m ? (R(e), h("updatedPage", e), !0) : !1;
-    }, M = () => {
-      console.log("end"), i.value && J(1) ? x() : (f.value = !1, y.value && y.value.pause(), h("allCompleted"));
-    }, A = {
-      onPlay: C,
-      onPause: j,
-      onEnded: M
-    }, $ = L(() => {
-      const t = V.value, e = t?.audioSources?.[p.value], a = t?.multiLinguals?.[U.value] ?? t?.text ?? "", c = n.dataSet?.lang ? t?.multiLinguals?.[n.dataSet.lang] ?? t?.text ?? "" : "";
-      return {
-        videoWithAudioSource: k(t?.videoWithAudioSource),
-        videoSource: k(t?.videoSource),
-        soundEffectSource: k(t?.soundEffectSource),
-        audioSource: k(e),
-        imageSource: k(t?.imageSource),
-        index: l.value,
-        text: a,
-        originalText: c,
-        duration: t?.duration,
-        defaultLang: n.dataSet?.lang,
-        currentLang: p.value,
-        playbackSpeed: n.playbackSpeed,
-        ...A
-      };
-    }), I = L(() => n.dataSet?.beats[l.value + 1]), E = L(() => {
-      if (l.value + 1 >= m) return null;
-      const t = I.value;
-      return {
-        videoWithAudioSource: k(t?.videoWithAudioSource),
-        videoSource: k(t?.videoSource),
-        soundEffectSource: k(t?.soundEffectSource),
-        audioSource: k(t?.audioSources?.[p.value]),
-        imageSource: k(t?.imageSource),
-        index: l.value + 1,
-        text: t?.multiLinguals?.[U.value] ?? t?.text ?? "",
-        duration: t?.duration
-      };
-    }), g = L(() => ({
-      MulmoPlayer: q,
-      pageProps: $.value,
-      currentPage: l.value,
-      pageCount: m,
-      pageMove: J,
-      isPlaying: f.value,
-      audioLang: p,
-      textLang: U,
-      SelectLanguage: Ce,
-      mediaPlayerRef: d,
-      // Event handlers for direct access
-      handlePlay: C,
-      handlePause: j,
-      handleEnded: M
-    }));
-    return w({
-      updatePage: R
-    }), (t, e) => (s(), r(z, null, [
-      ue(t.$slots, "default", H(se(g.value)), () => [
-        v("div", Te, [
-          v("div", Oe, [
-            v("div", je, [
-              v("button", {
-                class: "px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",
-                disabled: l.value === 0,
-                onClick: e[0] || (e[0] = (a) => J(-1))
-              }, " Prev ", 8, Me),
-              v("div", Ne, [
-                ie(q, Y({
-                  ref_key: "mediaPlayer",
-                  ref: d
-                }, $.value), null, 16)
-              ]),
-              v("button", {
-                class: "px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",
-                disabled: l.value >= X(m) - 1,
-                onClick: e[1] || (e[1] = (a) => J(1))
-              }, " Next ", 8, Ue)
-            ])
-          ])
-        ])
-      ]),
-      E.value ? Q((s(), ee(q, H(Y({ key: 0 }, E.value)), null, 16)), [
-        [re, !1]
-      ]) : _("", !0),
-      P.value ? (s(), r("audio", {
-        key: 1,
-        ref_key: "bgmRef",
-        ref: y,
-        src: P.value
-      }, null, 8, Je)) : _("", !0)
-    ], 64));
-  }
-}), Ve = { class: "mulmocast-container" }, Ie = { class: "mulmocast-content-wrapper" }, Ae = { class: "p-4" }, Be = {
-  key: 0,
-  class: "header-row"
-}, We = { class: "document-title" }, Fe = { class: "button-group" }, De = ["disabled"], Ge = {
-  key: 0,
-  class: "error-message"
+import { a as e, n as t, o as n, r, t as i } from "./samples-SOf0ey-s.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeProps as h, normalizeClass as g, normalizeProps as _, normalizeStyle as v, onMounted as y, onUnmounted as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, vModelText as D, vShow as O, watch as k, withDirectives as A } from "vue";
+//#region node_modules/mulmocast-viewer/dist/mulmocast-viewer.es.js
+var j = {
+	video: "16/9",
+	square: "1/1"
+}, M = /^(\d+(?:\.\d+)?)\s*\/\s*(\d+(?:\.\d+)?)$/, N = (e) => {
+	let t = M.exec(e);
+	return t ? Number(t[1]) > 0 && Number(t[2]) > 0 : !1;
+}, P = (e) => {
+	if (!e) return;
+	let t = j[e];
+	if (t) return t;
+	if (N(e)) return e;
+}, F = async (e) => await new Promise((t) => setTimeout(t, e)), I = (e, t) => {
+	let n = (e) => e instanceof Error ? e : /* @__PURE__ */ Error("Aborted");
+	return new Promise((r, i) => {
+		if (t.aborted) {
+			i(n(t.reason));
+			return;
+		}
+		let a = () => {
+			clearTimeout(o), i(n(t.reason));
+		}, o = setTimeout(() => {
+			t.removeEventListener("abort", a), r();
+		}, e);
+		t.addEventListener("abort", a, { once: !0 });
+	});
+}, L = 1, R = .5, z = .5, B = .2, V = (e, t) => e > t + L, H = (e) => {
+	if (!e || e.ended || isNaN(e.duration) || e.duration <= 0) return !0;
+	let t = Math.min(R, e.duration / 2);
+	return e.currentTime >= e.duration - t;
+}, U = (e) => e.soundEffectSource ? 1 : e.videoSource && e.audioSource && e.currentLang && e.defaultLang && e.currentLang !== e.defaultLang ? B : 0, W = (e, t, n) => {
+	if (isNaN(e) || isNaN(t) || isNaN(n)) return null;
+	let r = Math.min(e, n);
+	return Math.abs(t - r) > z ? r : null;
+}, G = (e, t, n) => e ? !1 : n ? t : !0, ee = (e, t) => e ? !1 : H(t), te = (e) => !(e.isStopping || e.videoEnded && e.audioExists && !e.audioEnded), ne = { class: "items-center justify-center w-full" }, re = {
+	key: 0,
+	class: "group relative"
+}, ie = ["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" }, oe = {
+	key: 0,
+	class: "w-8 h-8 text-white ml-1",
+	fill: "currentColor",
+	viewBox: "0 0 24 24"
+}, se = {
+	key: 1,
+	class: "w-8 h-8 text-white",
+	fill: "currentColor",
+	viewBox: "0 0 24 24"
+}, ce = {
+	key: 1,
+	class: "group relative inline-block"
+}, le = ["src", "controls"], ue = ["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" }, 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"
+}, me = {
+	key: 2,
+	class: "group relative inline-block"
+}, he = ["src"], ge = ["src"], _e = { class: "play-overlay absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" }, ve = {
+	key: 0,
+	class: "w-8 h-8 text-white ml-1",
+	fill: "currentColor",
+	viewBox: "0 0 24 24"
+}, ye = {
+	key: 1,
+	class: "w-8 h-8 text-white",
+	fill: "currentColor",
+	viewBox: "0 0 24 24"
+}, be = {
+	key: 3,
+	class: "group relative inline-block"
+}, xe = ["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" }, Ce = {
+	key: 0,
+	class: "w-8 h-8 text-white ml-1",
+	fill: "currentColor",
+	viewBox: "0 0 24 24"
+}, we = {
+	key: 1,
+	class: "w-8 h-8 text-white",
+	fill: "currentColor",
+	viewBox: "0 0 24 24"
+}, Te = { key: 4 }, Ee = {
+	key: 0,
+	class: "mt-4 px-6 py-4 text-left"
+}, De = { 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"
+}, ke = "https://github.com/receptron/mulmocast-cli/blob/main/assets/images/mulmocast_credit.png?raw=true", K = /* @__PURE__ */ p({
+	__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 },
+		mediaAspectRatio: { default: void 0 }
+	},
+	emits: [
+		"play",
+		"pause",
+		"ended"
+	],
+	setup(e, { expose: t, emit: n }) {
+		let r = o(() => {
+			let e = P(i.mediaAspectRatio);
+			return e ? { aspectRatio: e } : {};
+		}), i = e, a = n, s = S(), d = S(), f = S(), p = S(), m = S(!1), h = () => {
+			d.value && f.value && !isNaN(d.value.duration) && !isNaN(f.value.duration) && (m.value = V(f.value.duration, d.value.duration));
+		}, _ = () => {
+			d.value && (d.value.volume = U({
+				soundEffectSource: i.soundEffectSource,
+				videoSource: i.videoSource,
+				audioSource: i.audioSource,
+				currentLang: i.currentLang,
+				defaultLang: i.defaultLang
+			}));
+		}, C = () => {
+			let e = i.playbackSpeed ?? 1;
+			s.value && (s.value.playbackRate = e), d.value && (d.value.playbackRate = e), f.value && (f.value.playbackRate = e), p.value && (p.value.playbackRate = e);
+		};
+		k([
+			() => i.currentLang,
+			() => i.defaultLang,
+			() => i.videoSource,
+			() => i.audioSource
+		], () => {
+			_();
+		}), k(() => i.playbackSpeed, () => {
+			C();
+		}), k(d, (e) => {
+			e && (_(), C());
+		}), k([
+			s,
+			f,
+			p
+		], () => {
+			C();
+		}), y(() => {
+			_(), C();
+		});
+		let w = S(!1), E = S(!1), D = o(() => J.value || E.value), O = null, A = () => {
+			O &&= (O.abort(), null);
+		}, j = () => {
+			J.value = !0, f.value && d.value && !f.value.ended && (f.value.currentTime = d.value.currentTime, f.value.play().catch(() => {})), a("play");
+		}, M = (e) => {
+			te({
+				isStopping: E.value,
+				videoEnded: d.value?.ended ?? !1,
+				audioExists: !!f.value,
+				audioEnded: f.value?.ended ?? !0
+			}) && (document.hidden || (J.value = !1), !d.value?.ended && f?.value && f.value?.pause(), H(e));
+		}, N = () => {
+			G(w.value, f.value?.ended ?? !0, !!f.value) && K();
+		}, F = () => {
+			let e = d.value ? {
+				ended: d.value.ended,
+				duration: d.value.duration,
+				currentTime: d.value.currentTime
+			} : null;
+			ee(w.value, e) && K();
+		}, L = () => {
+			if (!d.value || !f.value) return;
+			let e = W(f.value.currentTime, d.value.currentTime, d.value.duration);
+			e !== null && (d.value.currentTime = e);
+		}, R = () => {
+			J.value = !0, d.value && !d.value.ended && d.value.play().catch(() => {}), a("play");
+		}, z = () => {
+			E.value || f.value?.ended || (document.hidden || (J.value = !1), d.value && !d.value.ended && d.value.pause(), a("pause"));
+		}, B = () => {
+			J.value = !0, a("play");
+		}, H = (e) => {
+			if (E.value) return;
+			document.hidden || (J.value = !1);
+			let t = e.target;
+			t.duration !== t.currentTime && a("pause");
+		}, K = () => {
+			w.value || (w.value = !0, J.value = !1, a("ended"));
+		}, q = () => {
+			s.value?.pause(), d.value?.pause(), f.value?.pause(), p.value?.pause();
+		}, J = S(!1), Y = null, X = async () => {
+			if (E.value = !1, w.value = !1, J.value = !0, s.value && (C(), s.value.play().catch(() => {})), d.value && (_(), C(), d.value.play().catch(() => {}), f.value && (f.value.currentTime = d.value.currentTime, f.value.play().catch(() => {}))), p.value && (C(), p.value.play().catch(() => {})), !s.value && !d.value && !p.value) try {
+				A(), O = new AbortController(), await I((i.duration ?? 0) * 1e3, O.signal), O = null, w.value || (J.value = !1, w.value = !0, a("ended"));
+			} catch {}
+		}, Ae = () => {
+			E.value = !0, J.value = !1, w.value = !0, A(), s.value?.pause(), d.value?.pause(), f.value?.pause(), p.value?.pause();
+		}, je = () => {
+			if (!f.value || !d.value || f.value.ended) return;
+			let e = W(d.value.currentTime, f.value.currentTime, f.value.duration);
+			e !== null && (f.value.currentTime = e);
+		}, Z = (e) => {
+			e?.paused && !e.ended && e.play().catch(() => {});
+		}, Me = (e, t) => {
+			t.paused && !t.ended && (e.ended || (t.currentTime = e.currentTime), t.play().catch(() => {}));
+		}, Q = () => {
+			J.value && (Z(s.value), d.value && f.value ? (Z(d.value), Me(d.value, f.value)) : Z(d.value), Z(p.value));
+		}, Ne = () => {
+			document.hidden && J.value ? Y ||= setInterval(Q, 500) : document.hidden || (Y &&= (clearInterval(Y), null));
+		}, $ = () => {
+			document.hidden && J.value && setTimeout(Q, 50);
+		};
+		return y(() => {
+			document.addEventListener("visibilitychange", Ne), s.value?.addEventListener("pause", $), d.value?.addEventListener("pause", $), p.value?.addEventListener("pause", $), f.value?.addEventListener("pause", $);
+		}), b(() => {
+			document.removeEventListener("visibilitychange", Ne), s.value?.removeEventListener("pause", $), d.value?.removeEventListener("pause", $), p.value?.removeEventListener("pause", $), f.value?.removeEventListener("pause", $), Y &&= (clearInterval(Y), null), A();
+		}), t({
+			play: X,
+			stop: Ae
+		}), (t, n) => (x(), l("div", ne, [u("div", {
+			class: g(["w-full flex items-center justify-center overflow-hidden", { "[&>*]:w-full [&>*]:h-full": e.mediaAspectRatio }]),
+			style: v(r.value)
+		}, [e.videoWithAudioSource ? (x(), l("div", re, [u("video", {
+			ref_key: "videoWithAudioRef",
+			ref: s,
+			src: e.videoWithAudioSource,
+			class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
+			controls: !0,
+			playsinline: "true",
+			onPlay: B,
+			onPause: H,
+			onEnded: K
+		}, null, 40, ie), u("div", ae, [u("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: n[0] ||= (e) => D.value ? q() : X()
+		}, [D.value ? (x(), l("svg", se, [...n[5] ||= [u("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }, null, -1)]])) : (x(), l("svg", oe, [...n[4] ||= [u("path", { d: "M8 5v14l11-7z" }, null, -1)]]))])])])) : e.soundEffectSource || e.videoSource ? (x(), l("div", ce, [
+			u("video", {
+				ref_key: "videoRef",
+				ref: d,
+				class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
+				src: e.soundEffectSource || e.videoSource,
+				controls: !m.value,
+				playsinline: "true",
+				onPlay: j,
+				onPause: M,
+				onEnded: N,
+				onSeeked: je,
+				onLoadedmetadata: h
+			}, null, 40, le),
+			e.audioSource ? (x(), l("audio", {
+				key: 0,
+				ref_key: "audioSyncRef",
+				ref: f,
+				src: e.audioSource,
+				controls: !0,
+				class: g(m.value ? "mulmocast-audio absolute bottom-0 left-0 w-full" : "hidden"),
+				onEnded: F,
+				onSeeked: L,
+				onPlay: R,
+				onPause: z,
+				onLoadedmetadata: h
+			}, null, 42, ue)) : c("", !0),
+			u("div", de, [u("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: n[1] ||= (e) => D.value ? q() : X()
+			}, [D.value ? (x(), l("svg", pe, [...n[7] ||= [u("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }, null, -1)]])) : (x(), l("svg", fe, [...n[6] ||= [u("path", { d: "M8 5v14l11-7z" }, null, -1)]]))])])
+		])) : e.audioSource ? (x(), l("div", me, [
+			e.imageSource ? (x(), l("img", {
+				key: 0,
+				src: e.imageSource,
+				class: "mx-auto h-auto max-h-[80vh] w-auto object-contain",
+				alt: "Background"
+			}, null, 8, he)) : (x(), l("img", {
+				key: 1,
+				src: ke,
+				class: "mx-auto h-auto max-h-[80vh] w-auto object-contain",
+				alt: "Background"
+			})),
+			u("audio", {
+				ref_key: "audioRef",
+				ref: p,
+				class: "mulmocast-audio absolute inset-0 w-full h-full",
+				src: e.audioSource,
+				controls: !0,
+				onPlay: B,
+				onPause: H,
+				onEnded: K
+			}, null, 40, ge),
+			u("div", _e, [u("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: n[2] ||= (e) => D.value ? q() : X()
+			}, [D.value ? (x(), l("svg", ye, [...n[9] ||= [u("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }, null, -1)]])) : (x(), l("svg", ve, [...n[8] ||= [u("path", { d: "M8 5v14l11-7z" }, null, -1)]]))])])
+		])) : e.imageSource ? (x(), l("div", be, [u("img", {
+			src: e.imageSource,
+			class: "max-w-full max-h-full object-contain"
+		}, null, 8, xe), u("div", Se, [u("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: n[3] ||= (e) => D.value ? q() : X()
+		}, [D.value ? (x(), l("svg", we, [...n[11] ||= [u("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" }, null, -1)]])) : (x(), l("svg", Ce, [...n[10] ||= [u("path", { d: "M8 5v14l11-7z" }, null, -1)]]))])])])) : (x(), l("div", Te, "No media available"))], 6), e.text ? (x(), l("div", Ee, [u("p", De, T(e.text), 1), e.originalText && e.originalText !== e.text ? (x(), l("p", Oe, T(e.originalText), 1)) : c("", !0)])) : c("", !0)]));
+	}
+}), q = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, J = /* @__PURE__ */ q(K, [["__scopeId", "data-v-0e76dd6a"]]), Y = ["value"], X = ["value"], Ae = /* @__PURE__ */ p({
+	__name: "select_language",
+	props: { modelValue: {} },
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = ["en", "ja"], r = {
+			en: "English",
+			ja: "日本語"
+		}, i = t, o = (e) => {
+			let t = e.target;
+			i("update:modelValue", t.value);
+		};
+		return (t, i) => (x(), l("select", {
+			value: e.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: o
+		}, [(x(), l(a, null, C(n, (e) => u("option", {
+			key: e,
+			value: e
+		}, T(r[e] || e), 9, X)), 64))], 40, Y));
+	}
+}), je = { class: "w-full overflow-hidden" }, Z = { class: "max-w-7xl mx-auto px-4" }, Me = { class: "grid grid-cols-[auto,1fr,auto] gap-x-4 gap-y-4 max-sm:grid-cols-2" }, Q = ["disabled"], Ne = { class: "col-start-2 row-start-1 min-w-0 max-sm:col-span-2 max-sm:col-start-1" }, $ = ["disabled"], Pe = {
+	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"
+}, Fe = { class: "mulmo-text-primary text-lg leading-relaxed font-sans" }, Ie = {
+	key: 0,
+	class: "mulmo-text-secondary text-base leading-relaxed font-sans mt-3 italic"
+}, Le = ["src"], Re = /* @__PURE__ */ q(/* @__PURE__ */ p({
+	__name: "mulmo_viewer",
+	props: {
+		dataSet: { default: void 0 },
+		basePath: {},
+		initPage: { default: void 0 },
+		audioLang: { default: "en" },
+		textLang: { default: "en" },
+		playbackSpeed: { default: 1 },
+		mediaAspectRatio: { default: void 0 }
+	},
+	emits: [
+		"updatedPage",
+		"update:audioLang",
+		"update:textLang",
+		"allCompleted"
+	],
+	setup(e, { expose: t, emit: n }) {
+		let r = e, i = n, d = r.dataSet?.beats?.length ?? 0, p = S(r.initPage ?? 0), g = S(!0), v = S(), y = S(), b = o({
+			get: () => r.audioLang,
+			set: (e) => i("update:audioLang", e || "en")
+		}), C = o({
+			get: () => r.textLang,
+			set: (e) => i("update:textLang", e || "en")
+		}), D = 0;
+		k(() => r.audioLang, async (e, t) => {
+			if (e !== t && P.value) {
+				D++;
+				let e = D;
+				if (v.value?.stop(), await F(500), e !== D) return;
+				v.value && (P.value = !0, await v.value.play());
+			}
+		}), k(() => r.textLang, async (e, t) => {
+			e !== t && P.value && (await F(100), v.value && await v.value.play());
+		}), k(y, (e) => {
+			e && (e.volume = .3);
+		});
+		let j = o(() => r.dataSet?.beats[p.value]), M = (e) => e ? r.basePath + "/" + e : "", N = o(() => M(r.dataSet?.bgmSource)), P = S(!1), I = () => {
+			P.value = !0, y.value && (y.value.volume = .3, y.value.play());
+		}, L = () => {
+			P.value = !1, y.value && y.value.pause();
+		}, R = async () => {
+			D++;
+			let e = D;
+			v.value?.stop(), await F(500), e === D && v.value && v.value.play();
+		}, z = (e) => {
+			p.value !== e && (p.value = e, P.value && g.value && R());
+		}, B = (e) => {
+			let t = p.value + e;
+			return t > -1 && t < d ? (z(t), i("updatedPage", t), !0) : !1;
+		}, V = () => {
+			g.value && B(1) || (P.value = !1, y.value && y.value.pause(), i("allCompleted"));
+		}, H = {
+			onPlay: I,
+			onPause: L,
+			onEnded: V
+		}, U = o(() => {
+			let e = j.value, t = e?.audioSources?.[b.value], n = e?.multiLinguals?.[C.value] ?? e?.text ?? "", i = r.dataSet?.lang ? e?.multiLinguals?.[r.dataSet.lang] ?? e?.text ?? "" : "";
+			return {
+				videoWithAudioSource: M(e?.videoWithAudioSource),
+				videoSource: M(e?.videoSource),
+				soundEffectSource: M(e?.soundEffectSource),
+				audioSource: M(t),
+				imageSource: M(e?.imageSource),
+				index: p.value,
+				text: n,
+				originalText: i,
+				duration: e?.duration,
+				defaultLang: r.dataSet?.lang,
+				currentLang: b.value,
+				playbackSpeed: r.playbackSpeed,
+				mediaAspectRatio: r.mediaAspectRatio,
+				...H
+			};
+		}), W = o(() => r.dataSet?.beats[p.value + 1]), G = o(() => {
+			if (p.value + 1 >= d) return null;
+			let e = W.value;
+			return {
+				videoWithAudioSource: M(e?.videoWithAudioSource),
+				videoSource: M(e?.videoSource),
+				soundEffectSource: M(e?.soundEffectSource),
+				audioSource: M(e?.audioSources?.[b.value]),
+				imageSource: M(e?.imageSource),
+				index: p.value + 1,
+				text: e?.multiLinguals?.[C.value] ?? e?.text ?? "",
+				duration: e?.duration
+			};
+		}), ee = o(() => ({
+			MulmoPlayer: J,
+			pageProps: U.value,
+			currentPage: p.value,
+			pageCount: d,
+			pageMove: B,
+			isPlaying: P.value,
+			audioLang: b,
+			textLang: C,
+			SelectLanguage: Ae,
+			mediaPlayerRef: v,
+			mediaAspectRatio: r.mediaAspectRatio,
+			handlePlay: I,
+			handlePause: L,
+			handleEnded: V
+		}));
+		return t({ updatePage: z }), (e, t) => (x(), l(a, null, [
+			w(e.$slots, "default", _(m(ee.value)), () => [u("div", je, [u("div", Z, [u("div", Me, [
+				u("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: p.value === 0,
+					onClick: t[0] ||= (e) => B(-1)
+				}, " Prev ", 8, Q),
+				u("div", Ne, [f(J, h({
+					ref_key: "mediaPlayer",
+					ref: v
+				}, {
+					...U.value,
+					text: "",
+					originalText: ""
+				}), null, 16)]),
+				u("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: p.value >= E(d) - 1,
+					onClick: t[1] ||= (e) => B(1)
+				}, " Next ", 8, $),
+				U.value.text ? (x(), l("div", Pe, [u("p", Fe, T(U.value.text), 1), U.value.originalText && U.value.originalText !== U.value.text ? (x(), l("p", Ie, T(U.value.originalText), 1)) : c("", !0)])) : c("", !0)
+			])])])], !0),
+			G.value ? A((x(), s(J, _(h({ key: 0 }, G.value)), null, 16)), [[O, !1]]) : c("", !0),
+			N.value ? (x(), l("audio", {
+				key: 1,
+				ref_key: "bgmRef",
+				ref: y,
+				src: N.value
+			}, null, 8, Le)) : c("", !0)
+		], 64));
+	}
+}), [["__scopeId", "data-v-5693d3ec"]]), ze = { class: "mulmocast-container" }, Be = { class: "mulmocast-content-wrapper" }, Ve = { class: "p-4" }, He = {
+	key: 0,
+	class: "header-row"
+}, Ue = { class: "document-title" }, We = { class: "button-group" }, Ge = ["disabled"], Ke = {
+	key: 0,
+	class: "error-message"
 }, qe = {
-  key: 1,
-  class: "viewer-container"
-}, ze = ["src"], He = ["src", "alt"], Ye = { class: "beat-text" }, Ze = {
-  key: 0,
-  class: "script-source"
-}, Ke = {
-  key: 0,
-  class: "error"
-}, Qe = ["disabled"], Xe = /* @__PURE__ */ W({
-  __name: "View",
-  props: {
-    selectedResult: {},
-    setMute: { type: Function },
-    pluginConfigs: {}
-  },
-  emits: ["updateResult"],
-  setup(o, { emit: w }) {
-    const u = o, n = L(
-      () => u.pluginConfigs?.mulmocast ?? !0
-    ), h = w, m = b(null), l = b(!1), i = b(null), d = b(null), y = b(
-      JSON.stringify(u.selectedResult?.data?.mulmoScript, null, 2) || ""
-    ), p = b(null), U = b("en"), V = b("en"), k = b(1), P = b(0), f = L(() => u.selectedResult?.data?.moviePath || null), C = L(
-      () => u.selectedResult?.data?.viewerJsonPath || null
-    ), j = L(() => {
-      if (!C.value) return "";
-      const e = C.value.indexOf("/output/");
-      if (e !== -1) {
-        const a = C.value.substring(e), c = a.lastIndexOf("/");
-        return a.substring(0, c);
-      }
-      return "";
-    }), x = L(() => {
-      const e = JSON.stringify(
-        u.selectedResult?.data?.mulmoScript,
-        null,
-        2
-      );
-      return y.value !== e;
-    });
-    ae(() => {
-      m.value && URL.revokeObjectURL(m.value);
-    });
-    async function R() {
-      const e = u.selectedResult?.data?.mulmoScript;
-      if (!(!e || l.value || !u.selectedResult)) {
-        l.value = !0, i.value = null;
-        try {
-          const a = le(), c = await fetch("/api/generate-movie", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-              mulmoScript: e,
-              uuid: a,
-              images: u.selectedResult?.data?.images || {}
-            })
-          });
-          if (c.ok) {
-            const S = await c.json(), O = {
-              ...u.selectedResult,
-              data: {
-                ...u.selectedResult.data,
-                moviePath: S.outputPath,
-                viewerJsonPath: S.viewerJsonPath
-              }
-            };
-            h("updateResult", O);
-          } else {
-            const S = await c.json();
-            i.value = S.details || S.error || "Failed to generate movie";
-          }
-        } catch (a) {
-          i.value = a instanceof Error ? a.message : "Unknown error";
-        } finally {
-          l.value = !1;
-        }
-      }
-    }
-    T(
-      () => u.selectedResult?.data?.mulmoScript,
-      async (e) => {
-        !e || u.selectedResult?.data?.moviePath || l.value || !u.selectedResult || n.value === !1 || await R();
-      },
-      { immediate: !0 }
-    ), T(
-      C,
-      async (e) => {
-        if (!e) {
-          p.value = null;
-          return;
-        }
-        try {
-          const a = await fetch("/api/viewer-json", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-              viewerJsonPath: e
-            })
-          });
-          if (!a.ok)
-            throw new Error("Failed to load viewer JSON");
-          p.value = await a.json();
-        } catch (a) {
-          console.error("Viewer JSON loading failed:", a), p.value = null;
-        }
-      },
-      { immediate: !0 }
-    ), T(
-      f,
-      async (e) => {
-        if (e)
-          try {
-            const a = await fetch("/api/download-movie", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json"
-              },
-              body: JSON.stringify({
-                moviePath: e
-              })
-            });
-            if (!a.ok)
-              throw new Error("Failed to load movie");
-            const c = await a.blob();
-            m.value && URL.revokeObjectURL(m.value), m.value = URL.createObjectURL(c);
-          } catch (a) {
-            console.error("Movie loading failed:", a);
-          }
-      },
-      { immediate: !0 }
-    );
-    const J = () => {
-      if (!u.selectedResult?.data?.mulmoScript) return;
-      const e = JSON.stringify(
-        u.selectedResult.data.mulmoScript,
-        null,
-        2
-      ), a = new Blob([e], { type: "application/json" }), c = URL.createObjectURL(a), S = document.createElement("a");
-      S.href = c;
-      const F = (u.selectedResult.data.mulmoScript.title || "mulmoscript").replace(/[^a-z0-9]/gi, "_").replace(/_+/g, "_").replace(/^_|_$/g, "").toLowerCase();
-      S.download = `${F}.json`, document.body.appendChild(S), S.click(), document.body.removeChild(S), URL.revokeObjectURL(c);
-    }, M = async () => {
-      if (f.value)
-        try {
-          const e = await fetch("/api/download-movie", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-              moviePath: f.value
-            })
-          });
-          if (!e.ok)
-            throw new Error("Failed to download movie");
-          const c = e.headers.get("Content-Disposition")?.match(/filename="(.+)"/), S = c ? c[1] : "movie.mp4", O = await e.blob(), F = URL.createObjectURL(O), B = document.createElement("a");
-          B.href = F, B.download = S, document.body.appendChild(B), B.click(), document.body.removeChild(B), URL.revokeObjectURL(F);
-        } catch (e) {
-          console.error("Movie download failed:", e), alert(
-            `Failed to download movie: ${e instanceof Error ? e.message : "Unknown error"}`
-          );
-        }
-    }, A = () => {
-      u.setMute?.(!0);
-    }, $ = () => {
-      u.setMute?.(!1);
-    }, I = () => {
-      u.setMute?.(!1);
-    };
-    function E() {
-      try {
-        const e = JSON.parse(y.value);
-        d.value = null;
-        const a = {
-          ...u.selectedResult,
-          data: {
-            ...u.selectedResult.data,
-            mulmoScript: e,
-            moviePath: void 0,
-            viewerJsonPath: void 0
-          }
-        };
-        h("updateResult", a);
-      } catch (e) {
-        d.value = e instanceof Error ? e.message : "Invalid JSON";
-      }
-    }
-    T(
-      () => u.selectedResult?.data?.mulmoScript,
-      (e) => {
-        y.value = JSON.stringify(e, null, 2) || "", d.value = null;
-      }
-    );
-    function g() {
-      if (p.value && P.value < p.value.beats.length - 1) {
-        const e = document.querySelector("video, audio"), a = e && !e.paused;
-        P.value++, a && setTimeout(() => {
-          const c = document.querySelector("video, audio");
-          c && c.play().catch(() => {
-          });
-        }, 100);
-      }
-    }
-    function t() {
-      if (P.value > 0) {
-        const e = document.querySelector("video, audio"), a = e && !e.paused;
-        P.value--, a && setTimeout(() => {
-          const c = document.querySelector("video, audio");
-          c && c.play().catch(() => {
-          });
-        }, 100);
-      }
-    }
-    return (e, a) => (s(), r("div", Ve, [
-      v("div", Ie, [
-        v("div", Ae, [
-          o.selectedResult?.data?.mulmoScript?.title ? (s(), r("div", Be, [
-            v("h1", We, N(o.selectedResult.data.mulmoScript.title), 1),
-            v("div", Fe, [
-              v("button", {
-                onClick: J,
-                class: "download-btn download-btn-green"
-              }, [...a[4] || (a[4] = [
-                v("span", { class: "material-icons" }, "download", -1),
-                D(" Script ", -1)
-              ])]),
-              !f.value && !l.value && n.value === !1 ? (s(), r("button", {
-                key: 0,
-                onClick: R,
-                class: "download-btn download-btn-orange"
-              }, [...a[5] || (a[5] = [
-                v("span", { class: "material-icons" }, "movie", -1),
-                D(" Generate Movie ", -1)
-              ])])) : (s(), r("button", {
-                key: 1,
-                onClick: M,
-                disabled: !f.value,
-                class: K(["download-btn", f.value ? "download-btn-blue" : "download-btn-disabled"])
-              }, [
-                v("span", {
-                  class: K(["material-icons", { "animate-spin": l.value }])
-                }, N(l.value ? "hourglass_empty" : "download"), 3),
-                a[6] || (a[6] = D(" Movie ", -1))
-              ], 10, De))
-            ])
-          ])) : _("", !0),
-          o.selectedResult?.data?.mulmoScript?.beats ? (s(!0), r(z, { key: 1 }, te(o.selectedResult.data.mulmoScript.beats, (c, S) => (s(), r("div", {
-            key: c.id || S,
-            class: "beat-container"
-          }, [
-            S === 0 && i.value ? (s(), r("div", Ge, " Movie generation failed: " + N(i.value), 1)) : S === 0 && p.value ? (s(), r("div", qe, [
-              P.value > 0 ? (s(), r("button", {
-                key: 0,
-                onClick: t,
-                class: "nav-button nav-button-prev",
-                "aria-label": "Previous page"
-              }, " ‹ ")) : _("", !0),
-              (s(), ee(X($e), {
-                ref_for: !0,
-                ref: "viewerRef",
-                key: `viewer-${P.value}`,
-                "audio-lang": U.value,
-                "onUpdate:audioLang": a[0] || (a[0] = (O) => U.value = O),
-                "text-lang": V.value,
-                "onUpdate:textLang": a[1] || (a[1] = (O) => V.value = O),
-                "data-set": p.value,
-                "base-path": j.value,
-                "init-page": P.value,
-                "playback-speed": k.value,
-                onUpdatedPage: a[2] || (a[2] = (O) => P.value = O)
-              }, null, 8, ["audio-lang", "text-lang", "data-set", "base-path", "init-page", "playback-speed"])),
-              p.value && P.value < p.value.beats.length - 1 ? (s(), r("button", {
-                key: 1,
-                onClick: g,
-                class: "nav-button nav-button-next",
-                "aria-label": "Next page"
-              }, " › ")) : _("", !0)
-            ])) : S === 0 && f.value && m.value && !p.value ? (s(), r("video", {
-              key: 2,
-              ref_for: !0,
-              ref: "videoEl",
-              src: m.value,
-              controls: "",
-              class: "video-player",
-              onPlay: A,
-              onPause: $,
-              onEnded: I
-            }, null, 40, ze)) : c.id && o.selectedResult.data?.images?.[c.id] ? (s(), r("img", {
-              key: 3,
-              src: `data:image/png;base64,${o.selectedResult.data.images[c.id]}`,
-              alt: c.text,
-              class: "beat-image"
-            }, null, 8, He)) : _("", !0),
-            v("p", Ye, N(c.text), 1)
-          ]))), 128)) : _("", !0)
-        ])
-      ]),
-      o.selectedResult?.data?.mulmoScript ? (s(), r("details", Ze, [
-        a[8] || (a[8] = v("summary", null, "Edit MulmoScript Source", -1)),
-        d.value ? (s(), r("div", Ke, [
-          a[7] || (a[7] = v("strong", null, "Parse Error:", -1)),
-          D(" " + N(d.value), 1)
-        ])) : _("", !0),
-        Q(v("textarea", {
-          "onUpdate:modelValue": a[3] || (a[3] = (c) => y.value = c),
-          class: "script-editor",
-          spellcheck: "false"
-        }, null, 512), [
-          [de, y.value]
-        ]),
-        v("button", {
-          onClick: E,
-          class: "apply-btn",
-          disabled: !x.value
-        }, " Apply Changes ", 8, Qe)
-      ])) : _("", !0)
-    ]));
-  }
-}), et = (o, w) => {
-  const u = o.__vccOpts || o;
-  for (const [n, h] of w)
-    u[n] = h;
-  return u;
-}, tt = /* @__PURE__ */ et(Xe, [["__scopeId", "data-v-1e1901ce"]]), at = { class: "bg-green-100 rounded overflow-hidden" }, lt = {
-  key: 0,
-  class: "w-full aspect-video bg-gray-200",
-  style: { position: "relative" }
-}, ot = ["src", "alt"], nt = { class: "p-2" }, ut = { class: "text-green-600 font-medium text-sm truncate" }, st = /* @__PURE__ */ W({
-  __name: "Preview",
-  props: {
-    result: {}
-  },
-  setup(o) {
-    const w = o, u = L(() => {
-      const n = w.result.data?.mulmoScript?.beats?.[0];
-      return n?.id && w.result.data?.images?.[n.id] ? w.result.data.images[n.id] : null;
-    });
-    return (n, h) => (s(), r("div", at, [
-      u.value ? (s(), r("div", lt, [
-        v("img", {
-          src: `data:image/png;base64,${u.value}`,
-          alt: o.result.data?.mulmoScript?.title || "Presentation",
-          class: "w-full h-full object-cover"
-        }, null, 8, ot)
-      ])) : _("", !0),
-      v("div", nt, [
-        v("div", ut, N(o.result.data?.mulmoScript?.title || o.result.title || "Presentation"), 1)
-      ])
-    ]));
-  }
-}), it = "showPresentation", rt = `Call the ${it} API to display presentations when the user is asking for a presentation.`, dt = {
-  ...ne,
-  viewComponent: tt,
-  previewComponent: st,
-  samples: oe,
-  systemPrompt: rt
-}, mt = { plugin: dt };
-export {
-  st as Preview,
-  rt as SYSTEM_PROMPT,
-  ft as TOOL_DEFINITION,
-  it as TOOL_NAME,
-  tt as View,
-  mt as default,
-  yt as executeMulmocast,
-  dt as plugin,
-  ne as pluginCore,
-  oe as samples
-};
+	key: 1,
+	class: "viewer-container"
+}, Je = ["src"], Ye = ["src", "alt"], Xe = { class: "beat-text" }, Ze = {
+	key: 0,
+	class: "script-source"
+}, Qe = {
+	key: 0,
+	class: "error"
+}, $e = ["disabled"], et = /* @__PURE__ */ ((e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+})(/* @__PURE__ */ p({
+	__name: "View",
+	props: {
+		selectedResult: {},
+		setMute: { type: Function },
+		pluginConfigs: {}
+	},
+	emits: ["updateResult"],
+	setup(t, { emit: n }) {
+		let r = t, i = o(() => r.pluginConfigs?.mulmocast ?? !0), f = n, p = S(null), m = S(!1), h = S(null), _ = S(null), v = S(JSON.stringify(r.selectedResult?.data?.mulmoScript, null, 2) || ""), y = S(null), w = S("en"), O = S("en"), j = S(1), M = S(0), N = o(() => r.selectedResult?.data?.moviePath || null), P = o(() => r.selectedResult?.data?.viewerJsonPath || null), F = o(() => {
+			if (!P.value) return "";
+			let e = P.value.indexOf("/output/");
+			if (e !== -1) {
+				let t = P.value.substring(e), n = t.lastIndexOf("/");
+				return t.substring(0, n);
+			}
+			return "";
+		}), I = o(() => {
+			let e = JSON.stringify(r.selectedResult?.data?.mulmoScript, null, 2);
+			return v.value !== e;
+		});
+		b(() => {
+			p.value && URL.revokeObjectURL(p.value);
+		});
+		async function L() {
+			let t = r.selectedResult?.data?.mulmoScript;
+			if (!(!t || m.value || !r.selectedResult)) {
+				m.value = !0, h.value = null;
+				try {
+					let n = e(), i = await fetch("/api/generate-movie", {
+						method: "POST",
+						headers: { "Content-Type": "application/json" },
+						body: JSON.stringify({
+							mulmoScript: t,
+							uuid: n,
+							images: r.selectedResult?.data?.images || {}
+						})
+					});
+					if (i.ok) {
+						let e = await i.json();
+						f("updateResult", {
+							...r.selectedResult,
+							data: {
+								...r.selectedResult.data,
+								moviePath: e.outputPath,
+								viewerJsonPath: e.viewerJsonPath
+							}
+						});
+					} else {
+						let e = await i.json();
+						h.value = e.details || e.error || "Failed to generate movie";
+					}
+				} catch (e) {
+					h.value = e instanceof Error ? e.message : "Unknown error";
+				} finally {
+					m.value = !1;
+				}
+			}
+		}
+		k(() => r.selectedResult?.data?.mulmoScript, async (e) => {
+			!e || r.selectedResult?.data?.moviePath || m.value || !r.selectedResult || i.value === !1 || await L();
+		}, { immediate: !0 }), k(P, async (e) => {
+			if (!e) {
+				y.value = null;
+				return;
+			}
+			try {
+				let t = await fetch("/api/viewer-json", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ viewerJsonPath: e })
+				});
+				if (!t.ok) throw Error("Failed to load viewer JSON");
+				y.value = await t.json();
+			} catch (e) {
+				console.error("Viewer JSON loading failed:", e), y.value = null;
+			}
+		}, { immediate: !0 }), k(N, async (e) => {
+			if (e) try {
+				let t = await fetch("/api/download-movie", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ moviePath: e })
+				});
+				if (!t.ok) throw Error("Failed to load movie");
+				let n = await t.blob();
+				p.value && URL.revokeObjectURL(p.value), p.value = URL.createObjectURL(n);
+			} catch (e) {
+				console.error("Movie loading failed:", e);
+			}
+		}, { immediate: !0 });
+		let R = () => {
+			if (!r.selectedResult?.data?.mulmoScript) return;
+			let e = JSON.stringify(r.selectedResult.data.mulmoScript, null, 2), t = new Blob([e], { type: "application/json" }), n = URL.createObjectURL(t), i = document.createElement("a");
+			i.href = n, i.download = `${(r.selectedResult.data.mulmoScript.title || "mulmoscript").replace(/[^a-z0-9]/gi, "_").replace(/_+/g, "_").replace(/^_|_$/g, "").toLowerCase()}.json`, document.body.appendChild(i), i.click(), document.body.removeChild(i), URL.revokeObjectURL(n);
+		}, z = async () => {
+			if (N.value) try {
+				let e = await fetch("/api/download-movie", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ moviePath: N.value })
+				});
+				if (!e.ok) throw Error("Failed to download movie");
+				let t = e.headers.get("Content-Disposition")?.match(/filename="(.+)"/), n = t ? t[1] : "movie.mp4", r = await e.blob(), i = URL.createObjectURL(r), a = document.createElement("a");
+				a.href = i, a.download = n, document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(i);
+			} catch (e) {
+				console.error("Movie download failed:", e), alert(`Failed to download movie: ${e instanceof Error ? e.message : "Unknown error"}`);
+			}
+		}, B = () => {
+			r.setMute?.(!0);
+		}, V = () => {
+			r.setMute?.(!1);
+		}, H = () => {
+			r.setMute?.(!1);
+		};
+		function U() {
+			try {
+				let e = JSON.parse(v.value);
+				_.value = null, f("updateResult", {
+					...r.selectedResult,
+					data: {
+						...r.selectedResult.data,
+						mulmoScript: e,
+						moviePath: void 0,
+						viewerJsonPath: void 0
+					}
+				});
+			} catch (e) {
+				_.value = e instanceof Error ? e.message : "Invalid JSON";
+			}
+		}
+		k(() => r.selectedResult?.data?.mulmoScript, (e) => {
+			v.value = JSON.stringify(e, null, 2) || "", _.value = null;
+		});
+		function W() {
+			if (y.value && M.value < y.value.beats.length - 1) {
+				let e = document.querySelector("video, audio"), t = e && !e.paused;
+				M.value++, t && setTimeout(() => {
+					let e = document.querySelector("video, audio");
+					e && e.play().catch(() => {});
+				}, 100);
+			}
+		}
+		function G() {
+			if (M.value > 0) {
+				let e = document.querySelector("video, audio"), t = e && !e.paused;
+				M.value--, t && setTimeout(() => {
+					let e = document.querySelector("video, audio");
+					e && e.play().catch(() => {});
+				}, 100);
+			}
+		}
+		return (e, n) => (x(), l("div", ze, [u("div", Be, [u("div", Ve, [t.selectedResult?.data?.mulmoScript?.title ? (x(), l("div", He, [u("h1", Ue, T(t.selectedResult.data.mulmoScript.title), 1), u("div", We, [u("button", {
+			onClick: R,
+			class: "download-btn download-btn-green"
+		}, [...n[4] ||= [u("span", { class: "material-icons" }, "download", -1), d(" Script ", -1)]]), !N.value && !m.value && i.value === !1 ? (x(), l("button", {
+			key: 0,
+			onClick: L,
+			class: "download-btn download-btn-orange"
+		}, [...n[5] ||= [u("span", { class: "material-icons" }, "movie", -1), d(" Generate Movie ", -1)]])) : (x(), l("button", {
+			key: 1,
+			onClick: z,
+			disabled: !N.value,
+			class: g(["download-btn", N.value ? "download-btn-blue" : "download-btn-disabled"])
+		}, [u("span", { class: g(["material-icons", { "animate-spin": m.value }]) }, T(m.value ? "hourglass_empty" : "download"), 3), n[6] ||= d(" Movie ", -1)], 10, Ge))])])) : c("", !0), t.selectedResult?.data?.mulmoScript?.beats ? (x(!0), l(a, { key: 1 }, C(t.selectedResult.data.mulmoScript.beats, (e, r) => (x(), l("div", {
+			key: e.id || r,
+			class: "beat-container"
+		}, [r === 0 && h.value ? (x(), l("div", Ke, " Movie generation failed: " + T(h.value), 1)) : r === 0 && y.value ? (x(), l("div", qe, [
+			M.value > 0 ? (x(), l("button", {
+				key: 0,
+				onClick: G,
+				class: "nav-button nav-button-prev",
+				"aria-label": "Previous page"
+			}, " ‹ ")) : c("", !0),
+			(x(), s(E(Re), {
+				ref_for: !0,
+				ref: "viewerRef",
+				key: `viewer-${M.value}`,
+				"audio-lang": w.value,
+				"onUpdate:audioLang": n[0] ||= (e) => w.value = e,
+				"text-lang": O.value,
+				"onUpdate:textLang": n[1] ||= (e) => O.value = e,
+				"data-set": y.value,
+				"base-path": F.value,
+				"init-page": M.value,
+				"playback-speed": j.value,
+				onUpdatedPage: n[2] ||= (e) => M.value = e
+			}, null, 8, [
+				"audio-lang",
+				"text-lang",
+				"data-set",
+				"base-path",
+				"init-page",
+				"playback-speed"
+			])),
+			y.value && M.value < y.value.beats.length - 1 ? (x(), l("button", {
+				key: 1,
+				onClick: W,
+				class: "nav-button nav-button-next",
+				"aria-label": "Next page"
+			}, " › ")) : c("", !0)
+		])) : r === 0 && N.value && p.value && !y.value ? (x(), l("video", {
+			key: 2,
+			ref_for: !0,
+			ref: "videoEl",
+			src: p.value,
+			controls: "",
+			class: "video-player",
+			onPlay: B,
+			onPause: V,
+			onEnded: H
+		}, null, 40, Je)) : e.id && t.selectedResult.data?.images?.[e.id] ? (x(), l("img", {
+			key: 3,
+			src: `data:image/png;base64,${t.selectedResult.data.images[e.id]}`,
+			alt: e.text,
+			class: "beat-image"
+		}, null, 8, Ye)) : c("", !0), u("p", Xe, T(e.text), 1)]))), 128)) : c("", !0)])]), t.selectedResult?.data?.mulmoScript ? (x(), l("details", Ze, [
+			n[8] ||= u("summary", null, "Edit MulmoScript Source", -1),
+			_.value ? (x(), l("div", Qe, [n[7] ||= u("strong", null, "Parse Error:", -1), d(" " + T(_.value), 1)])) : c("", !0),
+			A(u("textarea", {
+				"onUpdate:modelValue": n[3] ||= (e) => v.value = e,
+				class: "script-editor",
+				spellcheck: "false"
+			}, null, 512), [[D, v.value]]),
+			u("button", {
+				onClick: U,
+				class: "apply-btn",
+				disabled: !I.value
+			}, " Apply Changes ", 8, $e)
+		])) : c("", !0)]));
+	}
+}), [["__scopeId", "data-v-0070ab10"]]), tt = { class: "bg-green-100 rounded overflow-hidden" }, nt = {
+	key: 0,
+	class: "w-full aspect-video bg-gray-200",
+	style: { position: "relative" }
+}, rt = ["src", "alt"], it = { class: "p-2" }, at = { class: "text-green-600 font-medium text-sm truncate" }, ot = /* @__PURE__ */ p({
+	__name: "Preview",
+	props: { result: {} },
+	setup(e) {
+		let t = e, n = o(() => {
+			let e = t.result.data?.mulmoScript?.beats?.[0];
+			return e?.id && t.result.data?.images?.[e.id] ? t.result.data.images[e.id] : null;
+		});
+		return (t, r) => (x(), l("div", tt, [n.value ? (x(), l("div", nt, [u("img", {
+			src: `data:image/png;base64,${n.value}`,
+			alt: e.result.data?.mulmoScript?.title || "Presentation",
+			class: "w-full h-full object-cover"
+		}, null, 8, rt)])) : c("", !0), u("div", it, [u("div", at, T(e.result.data?.mulmoScript?.title || e.result.title || "Presentation"), 1)])]));
+	}
+}), st = "showPresentation", ct = `Call the ${st} API to display presentations when the user is asking for a presentation.`, lt = {
+	...r,
+	viewComponent: et,
+	previewComponent: ot,
+	samples: i,
+	systemPrompt: ct
+}, ut = { plugin: lt };
+//#endregion
+export { ot as Preview, ct as SYSTEM_PROMPT, n as TOOL_DEFINITION, st as TOOL_NAME, et as View, ut as default, t as executeMulmocast, lt as plugin, r as pluginCore, i as samples };