mulmocast-viewer 0.0.1 → 0.0.3

package/README.ja.md

@@ -0,0 +1,221 @@
+# MulmoCast Viewer
+
+**MulmoCast Viewer** は、mulmocast-cli で生成されたバンドル（JSON とメディアファイル群）をブラウザ上で再生・表示するための Vue 3 コンポーネントライブラリです。
+
+## インストール
+
+```bash
+npm install mulmocast-viewer
+# または
+yarn add mulmocast-viewer
+```
+
+## 使い方
+
+### 基本的な使用方法
+
+MulmoViewer コンポーネントを Vue アプリケーションで簡単に利用できます。
+
+#### デフォルトUI（ボタン付き）
+
+```vue
+<template>
+  <div>
+    <MulmoViewer
+      :data-set="data"
+      :base-path="basePath"
+      :audio-lang="audioLang"
+      :text-lang="textLang"
+    />
+    <div>
+      Audio: <SelectLanguage v-model="audioLang" />
+      Text: <SelectLanguage v-model="textLang" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MulmoViewer, SelectLanguage } from 'mulmocast-viewer'
+import 'mulmocast-viewer/style.css'
+
+import data from './path/to/mulmo_view.json'
+const basePath = '/media_bundle'
+const audioLang = ref('en')
+const textLang = ref('en')
+</script>
+```
+
+#### カスタムUIの作成
+
+スロットを使用してナビゲーションボタンやレイアウトを自由にカスタマイズできます。
+
+```vue
+<template>
+  <MulmoViewer
+    :data-set="data"
+    :base-path="basePath"
+    :audio-lang="audioLang"
+    :text-lang="textLang"
+    v-slot="{ MulmoPlayer, pageProps, pageMove, currentPage, pageCount }"
+  >
+    <div class="my-custom-layout">
+      <button @click="pageMove(-1)" :disabled="currentPage === 0">
+        ← 前へ
+      </button>
+
+      <MulmoPlayer v-bind="pageProps" />
+
+      <button @click="pageMove(1)" :disabled="currentPage >= pageCount - 1">
+        次へ →
+      </button>
+
+      <div class="page-info">
+        {{ currentPage + 1 }} / {{ pageCount }}
+      </div>
+    </div>
+  </MulmoViewer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MulmoViewer } from 'mulmocast-viewer'
+import 'mulmocast-viewer/style.css'
+
+import data from './path/to/mulmo_view.json'
+const basePath = '/media_bundle'
+const audioLang = ref('en')
+const textLang = ref('en')
+</script>
+```
+
+## セットアップ手順
+
+### 1. mulmocast-cli でバンドルを作成
+
+```bash
+mulmocast bundle path/to/your/file.json
+```
+
+### 2. 生成されたフォルダを配置
+
+生成されたバンドルフォルダを、プロジェクトの公開ディレクトリに配置します。
+
+- Vue プロジェクト: `/public/media_bundle/`
+- その他: 任意の公開ディレクトリ
+
+ディレクトリ名は自由に変更できます（例: `/public/demo_bundle/`）。
+
+### 3. JSON データの読み込み
+
+`mulmo_view.json` を以下のいずれかの方法で読み込みます：
+
+#### 方法 1: 直接インポート
+
+```typescript
+import data from './path/to/mulmo_view.json'
+```
+
+#### 方法 2: 動的読み込み
+
+```typescript
+const response = await fetch('/media_bundle/mulmo_view.json')
+const data = await response.json()
+```
+
+### 4. basePath の設定
+
+`basePath` には、メディアファイルが配置されているディレクトリまたは URL を指定します。
+
+```typescript
+// ローカルパスの例
+const basePath = '/media_bundle'
+
+// 外部 URL の例
+const basePath = 'https://example.com/bundle_demo'
+```
+
+MulmoViewer は、この `basePath` を基準に画像・音声・動画などのメディアファイルを相対的に参照します。
+
+## API リファレンス
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `dataSet` | `ViewerData` | Yes | - | mulmo_view.json から読み込んだデータ |
+| `basePath` | `string` | Yes | - | メディアファイルのベースパス（ローカルまたは URL） |
+| `initPage` | `number` | No | `0` | 初期表示ページ |
+| `audioLang` | `string` | No | `'en'` | 音声言語 |
+| `textLang` | `string` | No | `'en'` | テキスト言語 |
+
+### Events
+
+| Event | Parameters | Description |
+|-------|------------|-------------|
+| `updatedPage` | `nextPage: number` | ページが変更されたときに発火 |
+
+### Slot Props（カスタムUI作成時）
+
+デフォルトスロットで以下のプロパティとコンポーネントが利用可能です：
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `MulmoPlayer` | `Component` | プレイヤーコンポーネント（メディア表示用） |
+| `pageProps` | `Object` | MulmoPlayer コンポーネントに渡す props |
+| `currentPage` | `number` | 現在のページ番号（0始まり） |
+| `pageCount` | `number` | 総ページ数 |
+| `pageMove` | `(delta: number) => boolean` | ページ移動関数（-1: 前へ、1: 次へ） |
+| `isPlaying` | `boolean` | メディアが再生中かどうか |
+| `audioLang` | `Ref<string>` | 音声言語（変更可能） |
+| `textLang` | `Ref<string>` | テキスト言語（変更可能） |
+| `SelectLanguage` | `Component` | 言語選択コンポーネント |
+
+## 開発者向け
+
+このリポジトリは、ビューアコンポーネントの開発環境を提供しています。
+
+### 開発環境のセットアップ
+
+1. **バンドルを作成**
+
+```bash
+mulmocast bundle scripts/foo/bar.json
+```
+
+2. **生成されたフォルダを配置**
+
+バンドルフォルダを `public/` 以下に配置します。以下のようなパスになるようにしてください：
+
+```
+public/bar/mulmo_view.json
+```
+
+3. **データリストを更新**
+
+```bash
+yarn run fileList
+```
+
+4. **開発サーバを起動**
+
+```bash
+yarn run dev
+```
+
+### ビルド
+
+```bash
+# ライブラリビルド
+yarn run build:lib
+
+# アプリケーションビルド
+yarn run build:app
+
+# 両方をビルド
+yarn run build
+```
+
+## ライセンス
+
+MIT

package/README.md

@@ -1,28 +1,221 @@
 # MulmoCast Viewer
 
+**MulmoCast Viewer** is a Vue 3 component library for playing and displaying bundles (JSON and media files) generated by mulmocast-cli in a browser.
 
-### cliでbundleを作る
+## Installation
 
+```bash
+npm install mulmocast-viewer
+# or
+yarn add mulmocast-viewer
 ```
-yarn run cli bundle scripts/foo/bar.json
+
+## Usage
+
+### Basic Usage
+
+You can easily use the MulmoViewer component in your Vue application.
+
+#### Default UI (with navigation buttons)
+
+```vue
+<template>
+  <div>
+    <MulmoViewer
+      :data-set="data"
+      :base-path="basePath"
+      :audio-lang="audioLang"
+      :text-lang="textLang"
+    />
+    <div>
+      Audio: <SelectLanguage v-model="audioLang" />
+      Text: <SelectLanguage v-model="textLang" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MulmoViewer, SelectLanguage } from 'mulmocast-viewer'
+import 'mulmocast-viewer/style.css'
+
+import data from './path/to/mulmo_view.json'
+const basePath = '/media_bundle'
+const audioLang = ref('en')
+const textLang = ref('en')
+</script>
 ```
 
-### 作成したfolderをviewerのpublic以下に配置する
+#### Custom UI
+
+You can customize navigation buttons and layout using slots.
 
-重要なのは、以下のようなpathにmulmo_view.jsonが配置されているかどうかです。
+```vue
+<template>
+  <MulmoViewer
+    :data-set="data"
+    :base-path="basePath"
+    :audio-lang="audioLang"
+    :text-lang="textLang"
+    v-slot="{ MulmoPlayer, pageProps, pageMove, currentPage, pageCount }"
+  >
+    <div class="my-custom-layout">
+      <button @click="pageMove(-1)" :disabled="currentPage === 0">
+        ← Previous
+      </button>
 
+      <MulmoPlayer v-bind="pageProps" />
+
+      <button @click="pageMove(1)" :disabled="currentPage >= pageCount - 1">
+        Next →
+      </button>
+
+      <div class="page-info">
+        {{ currentPage + 1 }} / {{ pageCount }}
+      </div>
+    </div>
+  </MulmoViewer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MulmoViewer } from 'mulmocast-viewer'
+import 'mulmocast-viewer/style.css'
+
+import data from './path/to/mulmo_view.json'
+const basePath = '/media_bundle'
+const audioLang = ref('en')
+const textLang = ref('en')
+</script>
 ```
-public/bar/mulmo_view.json
+
+## Setup Guide
+
+### 1. Create a Bundle with mulmocast-cli
+
+```bash
+mulmocast bundle path/to/your/file.json
 ```
 
-### DataListを更新する
+### 2. Place the Generated Folder
 
+Place the generated bundle folder in your project's public directory.
+
+- Vue projects: `/public/media_bundle/`
+- Other projects: Any public directory
+
+You can freely change the directory name (e.g., `/public/demo_bundle/`).
+
+### 3. Load JSON Data
+
+Load `mulmo_view.json` using one of the following methods:
+
+#### Method 1: Direct Import
+
+```typescript
+import data from './path/to/mulmo_view.json'
 ```
-yarn run fileList
+
+#### Method 2: Dynamic Loading
+
+```typescript
+const response = await fetch('/media_bundle/mulmo_view.json')
+const data = await response.json()
+```
+
+### 4. Configure basePath
+
+Set `basePath` to the directory or URL where media files are located.
+
+```typescript
+// Local path example
+const basePath = '/media_bundle'
+
+// External URL example
+const basePath = 'https://example.com/bundle_demo'
+```
+
+MulmoViewer references media files (images, audio, video) relative to this `basePath`.
+
+## API Reference
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `dataSet` | `ViewerData` | Yes | - | Data loaded from mulmo_view.json |
+| `basePath` | `string` | Yes | - | Base path for media files (local or URL) |
+| `initPage` | `number` | No | `0` | Initial page to display |
+| `audioLang` | `string` | No | `'en'` | Audio language |
+| `textLang` | `string` | No | `'en'` | Text language |
+
+### Events
+
+| Event | Parameters | Description |
+|-------|------------|-------------|
+| `updatedPage` | `nextPage: number` | Emitted when the page is changed |
+
+### Slot Props (for Custom UI)
+
+The default slot exposes the following properties and components:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `MulmoPlayer` | `Component` | Player component for displaying media |
+| `pageProps` | `Object` | Props to pass to the MulmoPlayer component |
+| `currentPage` | `number` | Current page number (0-indexed) |
+| `pageCount` | `number` | Total number of pages |
+| `pageMove` | `(delta: number) => boolean` | Function to move pages (-1: previous, 1: next) |
+| `isPlaying` | `boolean` | Whether media is currently playing |
+| `audioLang` | `Ref<string>` | Audio language (mutable) |
+| `textLang` | `Ref<string>` | Text language (mutable) |
+| `SelectLanguage` | `Component` | Language selection component |
+
+## For Developers
+
+This repository provides a development environment for the viewer component.
+
+### Development Environment Setup
+
+1. **Create a Bundle**
+
+```bash
+mulmocast bundle scripts/foo/bar.json
 ```
 
-### サーバを起動する
+2. **Place the Generated Folder**
+
+Place the bundle folder under `public/`. Ensure the path looks like this:
 
 ```
+public/bar/mulmo_view.json
+```
+
+3. **Update Data List**
+
+```bash
+yarn run fileList
+```
+
+4. **Start Development Server**
+
+```bash
 yarn run dev
-```
+```
+
+### Build
+
+```bash
+# Library build
+yarn run build:lib
+
+# Application build
+yarn run build:app
+
+# Build both
+yarn run build
+```
+
+## License
+
+MIT

package/dist/index.d.ts

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

package/dist/mulmocast-viewer.es.js

@@ -1,13 +1,12 @@
-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 = {
+import { defineComponent as R, ref as m, createElementBlock as d, openBlock as l, createTextVNode as z, createElementVNode as c, createCommentVNode as $, toDisplayString as j, Fragment as C, renderList as I, computed as P, renderSlot as O, withDirectives as q, normalizeProps as T, guardReactiveProps as G, createVNode as H, mergeProps as W, unref as J, createBlock as K, vShow as Q } from "vue";
+const N = async (t) => await new Promise((S) => setTimeout(S, t)), U = { 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 = {
+}, ee = ["src"], ae = ["src"], te = { key: 2 }, oe = ["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",
+}, ne = ["src"], ie = { key: 4 }, le = "https://github.com/receptron/mulmocast-cli/blob/main/assets/images/mulmocast_credit.png?raw=true", L = /* @__PURE__ */ R({
+  __name: "mulmo_player",
   props: {
     index: {},
     videoWithAudioSource: {},
@@ -19,276 +18,215 @@ const D = async (e) => await new Promise((g) => setTimeout(g, e)), Q = { class:
     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");
+  setup(t, { expose: S, emit: b }) {
+    const u = t, s = b, n = m(), a = m(), o = m(), f = m(), g = m(), p = () => {
+      o.value && a.value && (o.value.currentTime = a.value.currentTime, o.value.currentTime === a.value.currentTime && o.value.play()), s("play");
+    }, _ = (v) => {
+      !a.value?.ended && o?.value && o.value?.pause(), console.log(v), k(v);
+    }, w = () => {
+      !o.value?.paused && !o.value?.ended && (o.value?.currentTime ?? 0) > 0 || x();
+    }, r = () => {
+      !a.value?.paused && !a.value?.ended && (a.value?.currentTime ?? 0) > 0 || x();
+    }, h = () => {
+      s("play");
+    }, k = (v) => {
+      const y = v.target;
+      y.duration !== y.currentTime && s("pause");
+    }, x = () => {
+      s("ended");
     };
-    return g({
+    return S({
       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"));
+        n.value && n.value.play(), a.value && a.value.play(), f.value && f.value.play(), !n.value && !a.value && !f.value && (await N((u.duration ?? 0) * 1e3), s("ended"));
       }
-    }), (d, k) => (r(), m("div", Q, [
-      e.videoWithAudioSource ? (r(), m("div", X, [
-        v("video", {
+    }), (v, y) => (l(), d("div", U, [
+      t.videoWithAudioSource ? (l(), d("div", X, [
+        c("video", {
           ref_key: "videoWithAudioRef",
-          ref: a,
-          src: e.videoWithAudioSource,
+          ref: n,
+          src: t.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
+          onPlay: h,
+          onPause: k,
+          onEnded: x
         }, null, 40, Y)
-      ])) : e.soundEffectSource || e.videoSource ? (r(), m("div", Z, [
-        v("video", {
+      ])) : t.soundEffectSource || t.videoSource ? (l(), d("div", Z, [
+        c("video", {
           ref_key: "videoRef",
-          ref: o,
+          ref: a,
           class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
-          src: e.soundEffectSource || e.videoSource,
+          src: t.soundEffectSource || t.videoSource,
           controls: !0,
           playsinline: "true",
-          onPlay: S,
-          onPause: n,
-          onEnded: _
+          onPlay: p,
+          onPause: _,
+          onEnded: w
         }, null, 40, ee),
-        e.audioSource ? (r(), m("audio", {
+        t.audioSource ? (l(), d("audio", {
           key: 0,
           ref_key: "audioSyncRef",
-          ref: u,
-          src: e.audioSource,
+          ref: o,
+          src: t.audioSource,
           controls: !0,
           class: "hidden",
-          onEnded: E
+          onEnded: r
         }, null, 40, ae)) : $("", !0)
-      ])) : e.audioSource ? (r(), m("div", oe, [
-        v("video", {
+      ])) : t.audioSource ? (l(), d("div", te, [
+        c("video", {
           ref_key: "audioRef",
-          ref: s,
+          ref: f,
           class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
-          src: e.audioSource,
-          poster: e.imageSource ?? ie,
+          src: t.audioSource,
+          poster: t.imageSource ?? le,
           controls: !0,
           playsinline: "true",
-          onPlay: V,
-          onPause: p,
-          onEnded: y
-        }, null, 40, te)
-      ])) : e.imageSource ? (r(), m("div", ue, [
-        v("img", {
+          onPlay: h,
+          onPause: k,
+          onEnded: x
+        }, null, 40, oe)
+      ])) : t.imageSource ? (l(), d("div", ue, [
+        c("img", {
           ref_key: "imageRef",
-          ref: x,
-          src: e.imageSource,
+          ref: g,
+          src: t.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)
+      ])) : (l(), d("div", ie, "No media available")),
+      z(" " + j(t.text), 1)
     ]));
   }
-}), se = ["value"], de = ["value"], B = /* @__PURE__ */ W({
+}), se = ["value"], de = ["value"], ce = /* @__PURE__ */ R({
   __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);
+  setup(t, { emit: S }) {
+    const b = ["en", "ja"], u = S, s = (n) => {
+      const a = n.target;
+      u("update:modelValue", a.value);
     };
-    return (i, a) => (r(), m("select", {
-      value: e.modelValue,
-      onChange: b
+    return (n, a) => (l(), d("select", {
+      value: t.modelValue,
+      onChange: s
     }, [
-      (r(), m(G, null, U(P, (o) => v("option", {
+      (l(), d(C, null, I(b, (o) => c("option", {
         key: o,
         value: o
-      }, R(o), 9, de)), 64))
+      }, j(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",
+}), re = { class: "w-full overflow-hidden" }, ve = { class: "max-w-7xl mx-auto px-4" }, me = { class: "flex items-center justify-between" }, ge = ["disabled"], fe = { class: "px-4" }, he = ["disabled"], ye = ["src"], Pe = /* @__PURE__ */ R({
+  __name: "mulmo_viewer",
   props: {
     dataSet: {},
     basePath: {},
-    initPage: {}
+    initPage: {},
+    audioLang: { default: "en" },
+    textLang: { default: "en" }
   },
-  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)
+  emits: ["updatedPage", "update:audioLang", "update:textLang"],
+  setup(t, { expose: S, emit: b }) {
+    const u = t, s = b, n = u.dataSet?.beats?.length ?? 0, a = m(u.initPage ?? 0), o = m(!0), f = m(), g = m(), p = P({
+      get: () => u.audioLang,
+      set: (e) => s("update:audioLang", e || "en")
+    }), _ = P({
+      get: () => u.textLang,
+      set: (e) => s("update:textLang", e || "en")
+    }), w = P(() => u.dataSet?.beats[a.value]), r = (e) => e ? u.basePath + "/" + e : "", h = m(!1), k = () => {
+      h.value = !0, g.value && g.value.play();
+    }, x = () => {
+      console.log("pause"), h.value = !1, g.value && g.value.pause();
+    }, E = async () => {
+      await N(500), f.value && f.value.play();
+    }, v = (e) => {
+      a.value !== e && (a.value = e, h.value && o.value && E());
+    }, y = (e) => {
+      const i = a.value + e;
+      return i > -1 && i < n ? (v(i), s("updatedPage", i), !0) : !1;
+    }, D = () => {
+      console.log("end"), h.value = !1, o.value && y(1) ? E() : g.value && g.value.pause();
+    }, V = P(() => {
+      const e = w.value, i = e?.audioSources?.[p.value];
+      return {
+        videoWithAudioSource: r(e?.videoWithAudioSource),
+        videoSource: r(e?.videoSource),
+        soundEffectSource: r(e?.soundEffectSource),
+        audioSource: i ? u.basePath + "/" + i : "",
+        imageSource: r(e?.imageSource),
+        index: a.value,
+        text: e?.multiLinguals?.[_.value] ?? e?.text ?? "",
+        duration: e?.duration,
+        onPlay: k,
+        onPause: x,
+        onEnded: D
+      };
+    }), F = P(() => u.dataSet?.beats[a.value + 1]), A = P(() => {
+      if (a.value + 1 >= n) return null;
+      const e = F.value;
+      return {
+        videoWithAudioSource: r(e?.videoWithAudioSource),
+        videoSource: r(e?.videoSource),
+        soundEffectSource: r(e?.soundEffectSource),
+        audioSource: e?.audioSources?.[p.value] ? u.basePath + "/" + e.audioSources[p.value] : "",
+        imageSource: r(e?.imageSource),
+        index: a.value + 1,
+        text: e?.multiLinguals?.[_.value] ?? e?.text ?? "",
+        duration: e?.duration
+      };
+    }), M = P(() => ({
+      MulmoPlayer: L,
+      pageProps: V.value,
+      currentPage: a.value,
+      pageCount: n,
+      pageMove: y,
+      isPlaying: h.value,
+      audioLang: p,
+      textLang: _,
+      SelectLanguage: ce
+    }));
+    return S({
+      updatePage: v
+    }), (e, i) => (l(), d(C, null, [
+      O(e.$slots, "default", T(G(M.value)), () => [
+        c("div", re, [
+          c("div", ve, [
+            c("div", me, [
+              c("button", {
+                class: "px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",
+                disabled: a.value === 0,
+                onClick: i[0] || (i[0] = (B) => y(-1))
+              }, " Prev ", 8, ge),
+              c("div", fe, [
+                H(L, W({
+                  ref_key: "mediaPlayer",
+                  ref: f
+                }, V.value), null, 16)
+              ]),
+              c("button", {
+                class: "px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",
+                disabled: a.value >= J(n) - 1,
+                onClick: i[1] || (i[1] = (B) => y(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: "ドイツ語"
-    }
+      A.value ? q((l(), K(L, T(W({ key: 0 }, A.value)), null, 16)), [
+        [Q, !1]
+      ]) : $("", !0),
+      t.dataSet?.bgmFile ? (l(), d("audio", {
+        key: 1,
+        ref_key: "bgmRef",
+        ref: g,
+        src: t.dataSet?.bgmFile
+      }, null, 8, ye)) : $("", !0)
+    ], 64));
   }
-}, Se = q({
-  legacy: !1,
-  locale: "en",
-  fallbackLocale: "en",
-  messages: ye
 });
 export {
-  xe as MulmoView,
-  Se as i18n
+  Pe as MulmoViewer,
+  ce as SelectLanguage
 };

package/dist/mulmocast-viewer.umd.js

@@ -1 +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"})}));
+(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.MulmoCastViewer={},m.Vue))})(this,(function(m,e){"use strict";const _=async a=>await new Promise(h=>setTimeout(h,a)),N={class:"items-center justify-center w-full"},L={key:0},$=["src"],R={key:1,class:"relative inline-block"},C=["src"],T=["src"],A={key:2},j=["src","poster"],W={key:3,class:"relative inline-block"},D=["src"],M={key:4},F="https://github.com/receptron/mulmocast-cli/blob/main/assets/images/mulmocast_credit.png?raw=true",x=e.defineComponent({__name:"mulmo_player",props:{index:{},videoWithAudioSource:{},soundEffectSource:{},videoSource:{},imageSource:{},audioSource:{},text:{},duration:{}},emits:["play","pause","ended"],setup(a,{expose:h,emit:S}){const l=a,d=S,i=e.ref(),o=e.ref(),n=e.ref(),f=e.ref(),r=e.ref(),y=()=>{n.value&&o.value&&(n.value.currentTime=o.value.currentTime,n.value.currentTime===o.value.currentTime&&n.value.play()),d("play")},P=u=>{!o.value?.ended&&n?.value&&n.value?.pause(),console.log(u),k(u)},E=()=>{!n.value?.paused&&!n.value?.ended&&(n.value?.currentTime??0)>0||v()},s=()=>{!o.value?.paused&&!o.value?.ended&&(o.value?.currentTime??0)>0||v()},g=()=>{d("play")},k=u=>{const p=u.target;p.duration!==p.currentTime&&d("pause")},v=()=>{d("ended")};return h({play:async()=>{i.value&&i.value.play(),o.value&&o.value.play(),f.value&&f.value.play(),!i.value&&!o.value&&!f.value&&(await _((l.duration??0)*1e3),d("ended"))}}),(u,p)=>(e.openBlock(),e.createElementBlock("div",N,[a.videoWithAudioSource?(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("video",{ref_key:"videoWithAudioRef",ref:i,src:a.videoWithAudioSource,class:"mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",controls:!0,playsinline:"true",onPlay:g,onPause:k,onEnded:v},null,40,$)])):a.soundEffectSource||a.videoSource?(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("video",{ref_key:"videoRef",ref:o,class:"mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",src:a.soundEffectSource||a.videoSource,controls:!0,playsinline:"true",onPlay:y,onPause:P,onEnded:E},null,40,C),a.audioSource?(e.openBlock(),e.createElementBlock("audio",{key:0,ref_key:"audioSyncRef",ref:n,src:a.audioSource,controls:!0,class:"hidden",onEnded:s},null,40,T)):e.createCommentVNode("",!0)])):a.audioSource?(e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("video",{ref_key:"audioRef",ref:f,class:"mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",src:a.audioSource,poster:a.imageSource??F,controls:!0,playsinline:"true",onPlay:g,onPause:k,onEnded:v},null,40,j)])):a.imageSource?(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("img",{ref_key:"imageRef",ref:r,src:a.imageSource,class:"max-w-full max-h-full object-contain"},null,8,D)])):(e.openBlock(),e.createElementBlock("div",M,"No media available")),e.createTextVNode(" "+e.toDisplayString(a.text),1)]))}}),z=["value"],O=["value"],V=e.defineComponent({__name:"select_language",props:{modelValue:{}},emits:["update:modelValue"],setup(a,{emit:h}){const S=["en","ja"],l=h,d=i=>{const o=i.target;l("update:modelValue",o.value)};return(i,o)=>(e.openBlock(),e.createElementBlock("select",{value:a.modelValue,onChange:d},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(S,n=>e.createElementVNode("option",{key:n,value:n},e.toDisplayString(n),9,O)),64))],40,z))}}),q={class:"w-full overflow-hidden"},I={class:"max-w-7xl mx-auto px-4"},G={class:"flex items-center justify-between"},H=["disabled"],J={class:"px-4"},K=["disabled"],Q=["src"],U=e.defineComponent({__name:"mulmo_viewer",props:{dataSet:{},basePath:{},initPage:{},audioLang:{default:"en"},textLang:{default:"en"}},emits:["updatedPage","update:audioLang","update:textLang"],setup(a,{expose:h,emit:S}){const l=a,d=S,i=l.dataSet?.beats?.length??0,o=e.ref(l.initPage??0),n=e.ref(!0),f=e.ref(),r=e.ref(),y=e.computed({get:()=>l.audioLang,set:t=>d("update:audioLang",t||"en")}),P=e.computed({get:()=>l.textLang,set:t=>d("update:textLang",t||"en")}),E=e.computed(()=>l.dataSet?.beats[o.value]),s=t=>t?l.basePath+"/"+t:"",g=e.ref(!1),k=()=>{g.value=!0,r.value&&r.value.play()},v=()=>{console.log("pause"),g.value=!1,r.value&&r.value.pause()},b=async()=>{await _(500),f.value&&f.value.play()},u=t=>{o.value!==t&&(o.value=t,g.value&&n.value&&b())},p=t=>{const c=o.value+t;return c>-1&&c<i?(u(c),d("updatedPage",c),!0):!1},X=()=>{console.log("end"),g.value=!1,n.value&&p(1)?b():r.value&&r.value.pause()},B=e.computed(()=>{const t=E.value,c=t?.audioSources?.[y.value];return{videoWithAudioSource:s(t?.videoWithAudioSource),videoSource:s(t?.videoSource),soundEffectSource:s(t?.soundEffectSource),audioSource:c?l.basePath+"/"+c:"",imageSource:s(t?.imageSource),index:o.value,text:t?.multiLinguals?.[P.value]??t?.text??"",duration:t?.duration,onPlay:k,onPause:v,onEnded:X}}),Y=e.computed(()=>l.dataSet?.beats[o.value+1]),w=e.computed(()=>{if(o.value+1>=i)return null;const t=Y.value;return{videoWithAudioSource:s(t?.videoWithAudioSource),videoSource:s(t?.videoSource),soundEffectSource:s(t?.soundEffectSource),audioSource:t?.audioSources?.[y.value]?l.basePath+"/"+t.audioSources[y.value]:"",imageSource:s(t?.imageSource),index:o.value+1,text:t?.multiLinguals?.[P.value]??t?.text??"",duration:t?.duration}}),Z=e.computed(()=>({MulmoPlayer:x,pageProps:B.value,currentPage:o.value,pageCount:i,pageMove:p,isPlaying:g.value,audioLang:y,textLang:P,SelectLanguage:V}));return h({updatePage:u}),(t,c)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps(Z.value)),()=>[e.createElementVNode("div",q,[e.createElementVNode("div",I,[e.createElementVNode("div",G,[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:c[0]||(c[0]=ee=>p(-1))}," Prev ",8,H),e.createElementVNode("div",J,[e.createVNode(x,e.mergeProps({ref_key:"mediaPlayer",ref:f},B.value),null,16)]),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(i)-1,onClick:c[1]||(c[1]=ee=>p(1))}," Next ",8,K)])])])]),w.value?e.withDirectives((e.openBlock(),e.createBlock(x,e.normalizeProps(e.mergeProps({key:0},w.value)),null,16)),[[e.vShow,!1]]):e.createCommentVNode("",!0),a.dataSet?.bgmFile?(e.openBlock(),e.createElementBlock("audio",{key:1,ref_key:"bgmRef",ref:r,src:a.dataSet?.bgmFile},null,8,Q)):e.createCommentVNode("",!0)],64))}});m.MulmoViewer=U,m.SelectLanguage=V,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast-viewer",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "license": "MIT",
   "main": "dist/mulmocast-viewer.umd.js",
@@ -18,8 +18,7 @@
     "dist/mulmocast-viewer.umd.js",
     "dist/mulmocast-viewer.es.js",
     "dist/mulmocast-viewer.css",
-    "dist/index.d.ts",
-    "dist/i18n.d.ts"
+    "dist/index.d.ts"
   ],
   "scripts": {
     "fileList": "npx tsx batch/file_list.ts",
@@ -33,7 +32,6 @@
     "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"

package/dist/i18n.d.ts

@@ -1,76 +0,0 @@
-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;