mulmocast-viewer 0.0.1

package/README.md

@@ -0,0 +1,28 @@
+# MulmoCast Viewer
+
+
+### cliでbundleを作る
+
+```
+yarn run cli bundle scripts/foo/bar.json
+```
+
+### 作成したfolderをviewerのpublic以下に配置する
+
+重要なのは、以下のようなpathにmulmo_view.jsonが配置されているかどうかです。
+
+```
+public/bar/mulmo_view.json
+```
+
+### DataListを更新する
+
+```
+yarn run fileList
+```
+
+### サーバを起動する
+
+```
+yarn run dev
+```

package/dist/i18n.d.ts

@@ -0,0 +1,76 @@
+import { I18n } from 'vue-i18n';
+declare const i18n: I18n<{
+    en: {
+        message: {
+            hello: string;
+        };
+        ui: {
+            common: {
+                noLang: string;
+                noMedia: string;
+            };
+            actions: {
+                translate: string;
+                generateAudio: string;
+            };
+        };
+        mulmoViewer: {
+            text: string;
+            audio: string;
+        };
+        project: {
+            productTabs: {
+                slide: {
+                    autoPlay: string;
+                    details: string;
+                };
+            };
+        };
+        languages: {
+            en: string;
+            ja: string;
+            zh: string;
+            ko: string;
+            es: string;
+            fr: string;
+            de: string;
+        };
+    };
+    ja: {
+        message: {
+            hello: string;
+        };
+        ui: {
+            common: {
+                noLang: string;
+                noMedia: string;
+            };
+            actions: {
+                translate: string;
+                generateAudio: string;
+            };
+        };
+        mulmoViewer: {
+            text: string;
+            audio: string;
+        };
+        project: {
+            productTabs: {
+                slide: {
+                    autoPlay: string;
+                    details: string;
+                };
+            };
+        };
+        languages: {
+            en: string;
+            ja: string;
+            zh: string;
+            ko: string;
+            es: string;
+            fr: string;
+            de: string;
+        };
+    };
+}, {}, {}, string, false>;
+export default i18n;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { default as MulmoView } from './components/viewer.vue';
+import { default as i18n } from './i18n';
+export { MulmoView, i18n };

package/dist/mulmocast-viewer.css

@@ -0,0 +1 @@
+/*! tailwindcss v4.1.15 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.bottom-2{bottom:calc(var(--spacing)*2)}.left-1\/2{left:50%}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.flex{display:flex}.hidden{display:none}.inline-block{display:inline-block}.table{display:table}.h-4{height:calc(var(--spacing)*4)}.h-6\!{height:calc(var(--spacing)*6)!important}.h-auto{height:auto}.max-h-\[80vh\]{max-height:80vh}.max-h-full{max-height:100%}.w-4{width:calc(var(--spacing)*4)}.w-30{width:calc(var(--spacing)*30)}.w-auto{width:auto}.w-full{width:100%}.max-w-7xl{max-width:var(--container-7xl)}.max-w-full{max-width:100%}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.resize{resize:both}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab,red,red)){.bg-black\/60{background-color:color-mix(in oklab,var(--color-black)60%,transparent)}}.bg-gray-500{background-color:var(--color-gray-500)}.object-contain{object-fit:contain}.p-2{padding:calc(var(--spacing)*2)}.p-10{padding:calc(var(--spacing)*10)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-white{color:var(--color-white)}.opacity-0\!{opacity:0!important}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(hover:hover){.hover\:bg-black\/80:hover{background-color:#000c}@supports (color:color-mix(in lab,red,red)){.hover\:bg-black\/80:hover{background-color:color-mix(in oklab,var(--color-black)80%,transparent)}}.hover\:bg-gray-600:hover{background-color:var(--color-gray-600)}}.disabled\:opacity-50:disabled{opacity:.5}}.mulmocast-video::-webkit-media-controls-enclosure{background-color:#00000080!important;border-radius:0!important}.mulmocast-video::-webkit-media-controls-current-time-display{-webkit-text-fill-color:#fff!important}.mulmocast-video::-webkit-media-controls-time-remaining-display{-webkit-text-fill-color:#fff!important}.mulmocast-video::-webkit-media-controls-play-button{filter:brightness(1.1)}.mulmocast-video::-webkit-media-controls-mute-button{filter:brightness(1.1)}.mulmocast-video::-webkit-media-controls-overlay-play-button{filter:brightness(1.1)}.mulmocast-video::-webkit-media-controls-fullscreen-button{filter:brightness(1.1)}.mulmocast-video::-webkit-media-controls{opacity:0;transition:opacity .3s}.mulmocast-video:hover::-webkit-media-controls{opacity:1}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

package/dist/mulmocast-viewer.es.js

@@ -0,0 +1,294 @@
+import { defineComponent as W, ref as c, createElementBlock as m, openBlock as r, createTextVNode as j, createElementVNode as v, createCommentVNode as $, toDisplayString as R, unref as L, Fragment as G, renderList as U, computed as h, createVNode as T, withDirectives as H, createBlock as J, vShow as K } from "vue";
+import { useI18n as O, createI18n as q } from "vue-i18n";
+const D = async (e) => await new Promise((g) => setTimeout(g, e)), Q = { class: "items-center justify-center w-full" }, X = { key: 0 }, Y = ["src"], Z = {
+  key: 1,
+  class: "relative inline-block"
+}, ee = ["src"], ae = ["src"], oe = { key: 2 }, te = ["src", "poster"], ue = {
+  key: 3,
+  class: "relative inline-block"
+}, ne = ["src"], le = { key: 4 }, ie = "https://github.com/receptron/mulmocast-cli/blob/main/assets/images/mulmocast_credit.png?raw=true", M = /* @__PURE__ */ W({
+  __name: "page",
+  props: {
+    index: {},
+    videoWithAudioSource: {},
+    soundEffectSource: {},
+    videoSource: {},
+    imageSource: {},
+    audioSource: {},
+    text: {},
+    duration: {}
+  },
+  emits: ["play", "pause", "ended"],
+  setup(e, { expose: g, emit: P }) {
+    const { t: l } = O(), b = e, i = P, a = c(), o = c(), u = c(), s = c(), x = c(), S = () => {
+      u.value && o.value && (u.value.currentTime = o.value.currentTime, u.value.currentTime === o.value.currentTime && u.value.play()), i("play");
+    }, n = (d) => {
+      !o.value?.ended && u?.value && u.value?.pause(), console.log(d), p(d);
+    }, _ = () => {
+      !u.value?.paused && !u.value?.ended && (u.value?.currentTime ?? 0) > 0 || y();
+    }, E = () => {
+      !o.value?.paused && !o.value?.ended && (o.value?.currentTime ?? 0) > 0 || y();
+    }, V = () => {
+      i("play");
+    }, p = (d) => {
+      const k = d.target;
+      k.duration !== k.currentTime && i("pause");
+    }, y = () => {
+      i("ended");
+    };
+    return g({
+      play: async () => {
+        a.value && a.value.play(), o.value && o.value.play(), s.value && s.value.play(), !a.value && !o.value && !s.value && (await D((b.duration ?? 0) * 1e3), i("ended"));
+      }
+    }), (d, k) => (r(), m("div", Q, [
+      e.videoWithAudioSource ? (r(), m("div", X, [
+        v("video", {
+          ref_key: "videoWithAudioRef",
+          ref: a,
+          src: e.videoWithAudioSource,
+          class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
+          controls: !0,
+          playsinline: "true",
+          onPlay: V,
+          onPause: p,
+          onEnded: y
+        }, null, 40, Y)
+      ])) : e.soundEffectSource || e.videoSource ? (r(), m("div", Z, [
+        v("video", {
+          ref_key: "videoRef",
+          ref: o,
+          class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
+          src: e.soundEffectSource || e.videoSource,
+          controls: !0,
+          playsinline: "true",
+          onPlay: S,
+          onPause: n,
+          onEnded: _
+        }, null, 40, ee),
+        e.audioSource ? (r(), m("audio", {
+          key: 0,
+          ref_key: "audioSyncRef",
+          ref: u,
+          src: e.audioSource,
+          controls: !0,
+          class: "hidden",
+          onEnded: E
+        }, null, 40, ae)) : $("", !0)
+      ])) : e.audioSource ? (r(), m("div", oe, [
+        v("video", {
+          ref_key: "audioRef",
+          ref: s,
+          class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
+          src: e.audioSource,
+          poster: e.imageSource ?? ie,
+          controls: !0,
+          playsinline: "true",
+          onPlay: V,
+          onPause: p,
+          onEnded: y
+        }, null, 40, te)
+      ])) : e.imageSource ? (r(), m("div", ue, [
+        v("img", {
+          ref_key: "imageRef",
+          ref: x,
+          src: e.imageSource,
+          class: "max-w-full max-h-full object-contain"
+        }, null, 8, ne)
+      ])) : (r(), m("div", le, R(L(l)("ui.common.noMedia")), 1)),
+      j(" " + R(e.text), 1)
+    ]));
+  }
+}), se = ["value"], de = ["value"], B = /* @__PURE__ */ W({
+  __name: "select_language",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: g }) {
+    const P = ["en", "ja"], l = g, b = (i) => {
+      const a = i.target;
+      l("update:modelValue", a.value);
+    };
+    return (i, a) => (r(), m("select", {
+      value: e.modelValue,
+      onChange: b
+    }, [
+      (r(), m(G, null, U(P, (o) => v("option", {
+        key: o,
+        value: o
+      }, R(o), 9, de)), 64))
+    ], 40, se));
+  }
+}), ce = { class: "w-full overflow-hidden" }, re = { class: "max-w-7xl mx-auto px-4" }, ve = { class: "flex items-center justify-between" }, me = ["disabled"], fe = { class: "px-4" }, ge = ["src"], he = ["disabled"], xe = /* @__PURE__ */ W({
+  __name: "viewer",
+  props: {
+    dataSet: {},
+    basePath: {},
+    initPage: {}
+  },
+  emits: ["updatedPage"],
+  setup(e, { expose: g, emit: P }) {
+    const l = e, b = P, i = l.dataSet?.beats?.length ?? 0, a = c(l.initPage ?? 0), o = c(!0), u = c(), s = c(), x = c("en"), S = c("ja"), n = h(() => l.dataSet?.beats[a.value]), _ = h(() => n.value?.videoWithAudioSource ? l.basePath + "/" + n.value.videoWithAudioSource : ""), E = h(() => n.value?.soundEffectSource ? l.basePath + "/" + n.value.soundEffectSource : ""), V = h(() => n.value?.videoSource ? l.basePath + "/" + n.value.videoSource : ""), p = h(() => {
+      const f = n.value?.audioSources?.[S.value];
+      return f ? l.basePath + "/" + f : "";
+    }), y = h(() => n.value?.imageSource ? l.basePath + "/" + n.value.imageSource : ""), C = h(() => n.value?.multiLinguals?.[x.value] ?? n.value?.text ?? ""), d = c(!1), k = () => {
+      d.value = !0, s.value && s.value.play();
+    }, I = () => {
+      console.log("pause"), d.value = !1, s.value && s.value.pause();
+    }, N = async () => {
+      await D(500), u.value && u.value.play();
+    }, F = (f) => {
+      a.value !== f && (a.value = f, d.value && o.value && N());
+    }, A = (f) => {
+      const t = a.value + f;
+      return t > -1 && t < i ? (F(t), b("updatedPage", t), !0) : !1;
+    }, z = () => {
+      console.log("end"), d.value = !1, o.value && A(1) ? N() : s.value && s.value.pause();
+    };
+    return g({
+      updatePage: F
+    }), (f, t) => (r(), m("div", ce, [
+      v("div", re, [
+        v("div", ve, [
+          v("button", {
+            class: "px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",
+            disabled: a.value === 0,
+            onClick: t[0] || (t[0] = (w) => A(-1))
+          }, " Prev ", 8, me),
+          v("div", fe, [
+            T(M, {
+              ref_key: "mediaPlayer",
+              ref: u,
+              "video-with-audio-source": _.value,
+              "video-source": V.value,
+              "sound-effect-source": E.value,
+              "audio-source": p.value,
+              "image-source": y.value,
+              index: a.value,
+              text: C.value,
+              duration: n.value?.duration,
+              onPlay: k,
+              onPause: I,
+              onEnded: z
+            }, null, 8, ["video-with-audio-source", "video-source", "sound-effect-source", "audio-source", "image-source", "index", "text", "duration"]),
+            a.value + 1 < L(i) ? H((r(), J(M, {
+              key: 0,
+              data: e.dataSet?.beats[a.value + 1],
+              "base-path": e.basePath,
+              index: a.value + 1
+            }, null, 8, ["data", "base-path", "index"])), [
+              [K, !1]
+            ]) : $("", !0)
+          ]),
+          e.dataSet?.bgmFile ? (r(), m("audio", {
+            key: 0,
+            ref_key: "bgmRef",
+            ref: s,
+            src: e.dataSet?.bgmFile
+          }, null, 8, ge)) : $("", !0),
+          v("button", {
+            class: "px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",
+            disabled: a.value >= L(i) - 1,
+            onClick: t[1] || (t[1] = (w) => A(1))
+          }, " Next ", 8, he)
+        ])
+      ]),
+      v("div", null, [
+        t[4] || (t[4] = j("Audio: ", -1)),
+        T(B, {
+          modelValue: S.value,
+          "onUpdate:modelValue": t[2] || (t[2] = (w) => S.value = w)
+        }, null, 8, ["modelValue"])
+      ]),
+      v("div", null, [
+        t[5] || (t[5] = j("Text: ", -1)),
+        T(B, {
+          modelValue: x.value,
+          "onUpdate:modelValue": t[3] || (t[3] = (w) => x.value = w)
+        }, null, 8, ["modelValue"])
+      ])
+    ]));
+  }
+}), ye = {
+  en: {
+    message: {
+      hello: "Hello"
+    },
+    ui: {
+      common: {
+        noLang: "No language available",
+        noMedia: "No media available"
+      },
+      actions: {
+        translate: "Translate",
+        generateAudio: "Generate Audio"
+      }
+    },
+    mulmoViewer: {
+      text: "Text",
+      audio: "Audio"
+    },
+    project: {
+      productTabs: {
+        slide: {
+          autoPlay: "Auto Play",
+          details: "{current} / {pages}"
+        }
+      }
+    },
+    languages: {
+      en: "English",
+      ja: "Japanese",
+      zh: "Chinese",
+      ko: "Korean",
+      es: "Spanish",
+      fr: "French",
+      de: "German"
+    }
+  },
+  ja: {
+    message: {
+      hello: "こんにちは"
+    },
+    ui: {
+      common: {
+        noLang: "言語がありません",
+        noMedia: "メディアがありません"
+      },
+      actions: {
+        translate: "翻訳",
+        generateAudio: "音声を生成"
+      }
+    },
+    mulmoViewer: {
+      text: "テキスト",
+      audio: "音声"
+    },
+    project: {
+      productTabs: {
+        slide: {
+          autoPlay: "自動再生",
+          details: "{current} / {pages}"
+        }
+      }
+    },
+    languages: {
+      en: "英語",
+      ja: "日本語",
+      zh: "中国語",
+      ko: "韓国語",
+      es: "スペイン語",
+      fr: "フランス語",
+      de: "ドイツ語"
+    }
+  }
+}, Se = q({
+  legacy: !1,
+  locale: "en",
+  fallbackLocale: "en",
+  messages: ye
+});
+export {
+  xe as MulmoView,
+  Se as i18n
+};

package/dist/mulmocast-viewer.umd.js

@@ -0,0 +1 @@
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vue-i18n")):typeof define=="function"&&define.amd?define(["exports","vue","vue-i18n"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r["mulmoast-viewer"]={},r.Vue,r.VueI18n))})(this,(function(r,e,w){"use strict";const B=async t=>await new Promise(f=>setTimeout(f,t)),$={class:"items-center justify-center w-full"},R={key:0},C=["src"],L={key:1,class:"relative inline-block"},W=["src"],M=["src"],D={key:2},F=["src","poster"],I={key:3,class:"relative inline-block"},q=["src"],z={key:4},G="https://github.com/receptron/mulmocast-cli/blob/main/assets/images/mulmocast_credit.png?raw=true",N=e.defineComponent({__name:"page",props:{index:{},videoWithAudioSource:{},soundEffectSource:{},videoSource:{},imageSource:{},audioSource:{},text:{},duration:{}},emits:["play","pause","ended"],setup(t,{expose:f,emit:h}){const{t:d}=w.useI18n(),y=t,c=h,o=e.ref(),a=e.ref(),l=e.ref(),s=e.ref(),v=e.ref(),p=()=>{l.value&&a.value&&(l.value.currentTime=a.value.currentTime,l.value.currentTime===a.value.currentTime&&l.value.play()),c("play")},i=u=>{!a.value?.ended&&l?.value&&l.value?.pause(),console.log(u),k(u)},b=()=>{!l.value?.paused&&!l.value?.ended&&(l.value?.currentTime??0)>0||g()},E=()=>{!a.value?.paused&&!a.value?.ended&&(a.value?.currentTime??0)>0||g()},P=()=>{c("play")},k=u=>{const S=u.target;S.duration!==S.currentTime&&c("pause")},g=()=>{c("ended")};return f({play:async()=>{o.value&&o.value.play(),a.value&&a.value.play(),s.value&&s.value.play(),!o.value&&!a.value&&!s.value&&(await B((y.duration??0)*1e3),c("ended"))}}),(u,S)=>(e.openBlock(),e.createElementBlock("div",$,[t.videoWithAudioSource?(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("video",{ref_key:"videoWithAudioRef",ref:o,src:t.videoWithAudioSource,class:"mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",controls:!0,playsinline:"true",onPlay:P,onPause:k,onEnded:g},null,40,C)])):t.soundEffectSource||t.videoSource?(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("video",{ref_key:"videoRef",ref:a,class:"mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",src:t.soundEffectSource||t.videoSource,controls:!0,playsinline:"true",onPlay:p,onPause:i,onEnded:b},null,40,W),t.audioSource?(e.openBlock(),e.createElementBlock("audio",{key:0,ref_key:"audioSyncRef",ref:l,src:t.audioSource,controls:!0,class:"hidden",onEnded:E},null,40,M)):e.createCommentVNode("",!0)])):t.audioSource?(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("video",{ref_key:"audioRef",ref:s,class:"mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",src:t.audioSource,poster:t.imageSource??G,controls:!0,playsinline:"true",onPlay:P,onPause:k,onEnded:g},null,40,F)])):t.imageSource?(e.openBlock(),e.createElementBlock("div",I,[e.createElementVNode("img",{ref_key:"imageRef",ref:v,src:t.imageSource,class:"max-w-full max-h-full object-contain"},null,8,q)])):(e.openBlock(),e.createElementBlock("div",z,e.toDisplayString(e.unref(d)("ui.common.noMedia")),1)),e.createTextVNode(" "+e.toDisplayString(t.text),1)]))}}),O=["value"],U=["value"],T=e.defineComponent({__name:"select_language",props:{modelValue:{}},emits:["update:modelValue"],setup(t,{emit:f}){const h=["en","ja"],d=f,y=c=>{const o=c.target;d("update:modelValue",o.value)};return(c,o)=>(e.openBlock(),e.createElementBlock("select",{value:t.modelValue,onChange:y},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(h,a=>e.createElementVNode("option",{key:a,value:a},e.toDisplayString(a),9,U)),64))],40,O))}}),H={class:"w-full overflow-hidden"},J={class:"max-w-7xl mx-auto px-4"},K={class:"flex items-center justify-between"},Q=["disabled"],X={class:"px-4"},Y=["src"],Z=["disabled"],ee=e.defineComponent({__name:"viewer",props:{dataSet:{},basePath:{},initPage:{}},emits:["updatedPage"],setup(t,{expose:f,emit:h}){const d=t,y=h,c=d.dataSet?.beats?.length??0,o=e.ref(d.initPage??0),a=e.ref(!0),l=e.ref(),s=e.ref(),v=e.ref("en"),p=e.ref("ja"),i=e.computed(()=>d.dataSet?.beats[o.value]),b=e.computed(()=>i.value?.videoWithAudioSource?d.basePath+"/"+i.value.videoWithAudioSource:""),E=e.computed(()=>i.value?.soundEffectSource?d.basePath+"/"+i.value.soundEffectSource:""),P=e.computed(()=>i.value?.videoSource?d.basePath+"/"+i.value.videoSource:""),k=e.computed(()=>{const m=i.value?.audioSources?.[p.value];return m?d.basePath+"/"+m:""}),g=e.computed(()=>i.value?.imageSource?d.basePath+"/"+i.value.imageSource:""),_=e.computed(()=>i.value?.multiLinguals?.[v.value]??i.value?.text??""),u=e.ref(!1),S=()=>{u.value=!0,s.value&&s.value.play()},ae=()=>{console.log("pause"),u.value=!1,s.value&&s.value.pause()},A=async()=>{await B(500),l.value&&l.value.play()},j=m=>{o.value!==m&&(o.value=m,u.value&&a.value&&A())},V=m=>{const n=o.value+m;return n>-1&&n<c?(j(n),y("updatedPage",n),!0):!1},ne=()=>{console.log("end"),u.value=!1,a.value&&V(1)?A():s.value&&s.value.pause()};return f({updatePage:j}),(m,n)=>(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("div",J,[e.createElementVNode("div",K,[e.createElementVNode("button",{class:"px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",disabled:o.value===0,onClick:n[0]||(n[0]=x=>V(-1))}," Prev ",8,Q),e.createElementVNode("div",X,[e.createVNode(N,{ref_key:"mediaPlayer",ref:l,"video-with-audio-source":b.value,"video-source":P.value,"sound-effect-source":E.value,"audio-source":k.value,"image-source":g.value,index:o.value,text:_.value,duration:i.value?.duration,onPlay:S,onPause:ae,onEnded:ne},null,8,["video-with-audio-source","video-source","sound-effect-source","audio-source","image-source","index","text","duration"]),o.value+1<e.unref(c)?e.withDirectives((e.openBlock(),e.createBlock(N,{key:0,data:t.dataSet?.beats[o.value+1],"base-path":t.basePath,index:o.value+1},null,8,["data","base-path","index"])),[[e.vShow,!1]]):e.createCommentVNode("",!0)]),t.dataSet?.bgmFile?(e.openBlock(),e.createElementBlock("audio",{key:0,ref_key:"bgmRef",ref:s,src:t.dataSet?.bgmFile},null,8,Y)):e.createCommentVNode("",!0),e.createElementVNode("button",{class:"px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",disabled:o.value>=e.unref(c)-1,onClick:n[1]||(n[1]=x=>V(1))}," Next ",8,Z)])]),e.createElementVNode("div",null,[n[4]||(n[4]=e.createTextVNode("Audio: ",-1)),e.createVNode(T,{modelValue:p.value,"onUpdate:modelValue":n[2]||(n[2]=x=>p.value=x)},null,8,["modelValue"])]),e.createElementVNode("div",null,[n[5]||(n[5]=e.createTextVNode("Text: ",-1)),e.createVNode(T,{modelValue:v.value,"onUpdate:modelValue":n[3]||(n[3]=x=>v.value=x)},null,8,["modelValue"])])]))}}),te={en:{message:{hello:"Hello"},ui:{common:{noLang:"No language available",noMedia:"No media available"},actions:{translate:"Translate",generateAudio:"Generate Audio"}},mulmoViewer:{text:"Text",audio:"Audio"},project:{productTabs:{slide:{autoPlay:"Auto Play",details:"{current} / {pages}"}}},languages:{en:"English",ja:"Japanese",zh:"Chinese",ko:"Korean",es:"Spanish",fr:"French",de:"German"}},ja:{message:{hello:"こんにちは"},ui:{common:{noLang:"言語がありません",noMedia:"メディアがありません"},actions:{translate:"翻訳",generateAudio:"音声を生成"}},mulmoViewer:{text:"テキスト",audio:"音声"},project:{productTabs:{slide:{autoPlay:"自動再生",details:"{current} / {pages}"}}},languages:{en:"英語",ja:"日本語",zh:"中国語",ko:"韓国語",es:"スペイン語",fr:"フランス語",de:"ドイツ語"}}},oe=w.createI18n({legacy:!1,locale:"en",fallbackLocale:"en",messages:te});r.MulmoView=ee,r.i18n=oe,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "mulmocast-viewer",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "main": "dist/mulmocast-viewer.umd.js",
+  "module": "dist/mulmocast-viewer.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/mulmocast-viewer.es.js",
+      "require": "./dist/mulmocast-viewer.umd.js"
+    },
+    "./style.css": "./dist/mulmocast-viewer.css"
+  },
+  "files": [
+    "dist/mulmocast-viewer.umd.js",
+    "dist/mulmocast-viewer.es.js",
+    "dist/mulmocast-viewer.css",
+    "dist/index.d.ts",
+    "dist/i18n.d.ts"
+  ],
+  "scripts": {
+    "fileList": "npx tsx batch/file_list.ts",
+    "dev": "vite --config vite.app.ts",
+    "build:app": "vue-tsc -b && vite build --config vite.app.ts",
+    "build:lib": "vite build --config vite.lib.ts",
+    "build": "yarn run build:app && yarn run build:lib",
+    "preview": "vite preview",
+    "lint": "eslint src --fix",
+    "format": "prettier --write \"src/**/*.{ts,vue,css,html,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,vue,css,html,json}\""
+  },
+  "dependencies": {
+    "pinia": "^3.0.3",
+    "vue": "^3.5.22",
+    "vue-i18n": "^11.1.12",
+    "vue-router": "^4.6.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.38.0",
+    "@tailwindcss/vite": "^4.1.15",
+    "@types/node": "^24.9.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.38.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-sonarjs": "^3.0.5",
+    "eslint-plugin-vue": "^10.5.1",
+    "globals": "^16.4.0",
+    "prettier": "^3.6.2",
+    "tailwindcss": "^4.1.15",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.2",
+    "vite": "^7.1.11",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.1.0"
+  }
+}