mulmocast-viewer 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.ja.md CHANGED
@@ -14,21 +14,78 @@ yarn add mulmocast-viewer
14
14
 
15
15
  ### 基本的な使用方法
16
16
 
17
- MulmoView コンポーネントを Vue アプリケーションで簡単に利用できます。
17
+ MulmoViewer コンポーネントを Vue アプリケーションで簡単に利用できます。
18
+
19
+ #### デフォルトUI(ボタン付き)
18
20
 
19
21
  ```vue
20
22
  <template>
21
23
  <div>
22
- <MulmoView :data-set="data" :base-path="basePath" />
24
+ <MulmoViewer
25
+ :data-set="data"
26
+ :base-path="basePath"
27
+ :audio-lang="audioLang"
28
+ :text-lang="textLang"
29
+ />
30
+ <div>
31
+ Audio: <SelectLanguage v-model="audioLang" />
32
+ Text: <SelectLanguage v-model="textLang" />
33
+ </div>
23
34
  </div>
24
35
  </template>
25
36
 
26
37
  <script setup lang="ts">
27
- import { MulmoView } from 'mulmocast-viewer'
38
+ import { ref } from 'vue'
39
+ import { MulmoViewer, SelectLanguage } from 'mulmocast-viewer'
28
40
  import 'mulmocast-viewer/style.css'
29
41
 
30
42
  import data from './path/to/mulmo_view.json'
31
43
  const basePath = '/media_bundle'
44
+ const audioLang = ref('en')
45
+ const textLang = ref('en')
46
+ </script>
47
+ ```
48
+
49
+ #### カスタムUIの作成
50
+
51
+ スロットを使用してナビゲーションボタンやレイアウトを自由にカスタマイズできます。
52
+
53
+ ```vue
54
+ <template>
55
+ <MulmoViewer
56
+ :data-set="data"
57
+ :base-path="basePath"
58
+ :audio-lang="audioLang"
59
+ :text-lang="textLang"
60
+ v-slot="{ MulmoPlayer, pageProps, pageMove, currentPage, pageCount }"
61
+ >
62
+ <div class="my-custom-layout">
63
+ <button @click="pageMove(-1)" :disabled="currentPage === 0">
64
+ ← 前へ
65
+ </button>
66
+
67
+ <component :is="MulmoPlayer" v-bind="pageProps" />
68
+
69
+ <button @click="pageMove(1)" :disabled="currentPage >= pageCount - 1">
70
+ 次へ →
71
+ </button>
72
+
73
+ <div class="page-info">
74
+ {{ currentPage + 1 }} / {{ pageCount }}
75
+ </div>
76
+ </div>
77
+ </MulmoViewer>
78
+ </template>
79
+
80
+ <script setup lang="ts">
81
+ import { ref } from 'vue'
82
+ import { MulmoViewer } from 'mulmocast-viewer'
83
+ import 'mulmocast-viewer/style.css'
84
+
85
+ import data from './path/to/mulmo_view.json'
86
+ const basePath = '/media_bundle'
87
+ const audioLang = ref('en')
88
+ const textLang = ref('en')
32
89
  </script>
33
90
  ```
34
91
 
@@ -78,22 +135,42 @@ const basePath = '/media_bundle'
78
135
  const basePath = 'https://example.com/bundle_demo'
79
136
  ```
80
137
 
81
- MulmoView は、この `basePath` を基準に画像・音声・動画などのメディアファイルを相対的に参照します。
138
+ MulmoViewer は、この `basePath` を基準に画像・音声・動画などのメディアファイルを相対的に参照します。
82
139
 
83
- ## Props
140
+ ## API リファレンス
84
141
 
85
- | Prop | Type | Required | Description |
86
- |------|------|----------|-------------|
87
- | `dataSet` | `ViewerData` | Yes | mulmo_view.json から読み込んだデータ |
88
- | `basePath` | `string` | Yes | メディアファイルのベースパス(ローカルまたは URL) |
89
- | `initPage` | `number` | No | 初期表示ページ(デフォルト: 0) |
142
+ ### Props
90
143
 
91
- ## Events
144
+ | Prop | Type | Required | Default | Description |
145
+ |------|------|----------|---------|-------------|
146
+ | `dataSet` | `ViewerData` | Yes | - | mulmo_view.json から読み込んだデータ |
147
+ | `basePath` | `string` | Yes | - | メディアファイルのベースパス(ローカルまたは URL) |
148
+ | `initPage` | `number` | No | `0` | 初期表示ページ |
149
+ | `audioLang` | `string` | No | `'en'` | 音声言語 |
150
+ | `textLang` | `string` | No | `'en'` | テキスト言語 |
151
+
152
+ ### Events
92
153
 
93
154
  | Event | Parameters | Description |
94
155
  |-------|------------|-------------|
95
156
  | `updatedPage` | `nextPage: number` | ページが変更されたときに発火 |
96
157
 
158
+ ### Slot Props(カスタムUI作成時)
159
+
160
+ デフォルトスロットで以下のプロパティとコンポーネントが利用可能です:
161
+
162
+ | Prop | Type | Description |
163
+ |------|------|-------------|
164
+ | `MulmoPlayer` | `Component` | プレイヤーコンポーネント(メディア表示用) |
165
+ | `pageProps` | `Object` | MulmoPlayer コンポーネントに渡す props |
166
+ | `currentPage` | `number` | 現在のページ番号(0始まり) |
167
+ | `pageCount` | `number` | 総ページ数 |
168
+ | `pageMove` | `(delta: number) => boolean` | ページ移動関数(-1: 前へ、1: 次へ) |
169
+ | `isPlaying` | `boolean` | メディアが再生中かどうか |
170
+ | `audioLang` | `Ref<string>` | 音声言語(変更可能) |
171
+ | `textLang` | `Ref<string>` | テキスト言語(変更可能) |
172
+ | `SelectLanguage` | `Component` | 言語選択コンポーネント |
173
+
97
174
  ## 開発者向け
98
175
 
99
176
  このリポジトリは、ビューアコンポーネントの開発環境を提供しています。
package/README.md CHANGED
@@ -14,21 +14,78 @@ yarn add mulmocast-viewer
14
14
 
15
15
  ### Basic Usage
16
16
 
17
- You can easily use the MulmoView component in your Vue application.
17
+ You can easily use the MulmoViewer component in your Vue application.
18
+
19
+ #### Default UI (with navigation buttons)
18
20
 
19
21
  ```vue
20
22
  <template>
21
23
  <div>
22
- <MulmoView :data-set="data" :base-path="basePath" />
24
+ <MulmoViewer
25
+ :data-set="data"
26
+ :base-path="basePath"
27
+ :audio-lang="audioLang"
28
+ :text-lang="textLang"
29
+ />
30
+ <div>
31
+ Audio: <SelectLanguage v-model="audioLang" />
32
+ Text: <SelectLanguage v-model="textLang" />
33
+ </div>
23
34
  </div>
24
35
  </template>
25
36
 
26
37
  <script setup lang="ts">
27
- import { MulmoView } from 'mulmocast-viewer'
38
+ import { ref } from 'vue'
39
+ import { MulmoViewer, SelectLanguage } from 'mulmocast-viewer'
28
40
  import 'mulmocast-viewer/style.css'
29
41
 
30
42
  import data from './path/to/mulmo_view.json'
31
43
  const basePath = '/media_bundle'
44
+ const audioLang = ref('en')
45
+ const textLang = ref('en')
46
+ </script>
47
+ ```
48
+
49
+ #### Custom UI
50
+
51
+ You can customize navigation buttons and layout using slots.
52
+
53
+ ```vue
54
+ <template>
55
+ <MulmoViewer
56
+ :data-set="data"
57
+ :base-path="basePath"
58
+ :audio-lang="audioLang"
59
+ :text-lang="textLang"
60
+ v-slot="{ MulmoPlayer, pageProps, pageMove, currentPage, pageCount }"
61
+ >
62
+ <div class="my-custom-layout">
63
+ <button @click="pageMove(-1)" :disabled="currentPage === 0">
64
+ ← Previous
65
+ </button>
66
+
67
+ <component :is="MulmoPlayer" v-bind="pageProps" />
68
+
69
+ <button @click="pageMove(1)" :disabled="currentPage >= pageCount - 1">
70
+ Next →
71
+ </button>
72
+
73
+ <div class="page-info">
74
+ {{ currentPage + 1 }} / {{ pageCount }}
75
+ </div>
76
+ </div>
77
+ </MulmoViewer>
78
+ </template>
79
+
80
+ <script setup lang="ts">
81
+ import { ref } from 'vue'
82
+ import { MulmoViewer } from 'mulmocast-viewer'
83
+ import 'mulmocast-viewer/style.css'
84
+
85
+ import data from './path/to/mulmo_view.json'
86
+ const basePath = '/media_bundle'
87
+ const audioLang = ref('en')
88
+ const textLang = ref('en')
32
89
  </script>
33
90
  ```
34
91
 
@@ -78,22 +135,42 @@ const basePath = '/media_bundle'
78
135
  const basePath = 'https://example.com/bundle_demo'
79
136
  ```
80
137
 
81
- MulmoView references media files (images, audio, video) relative to this `basePath`.
138
+ MulmoViewer references media files (images, audio, video) relative to this `basePath`.
82
139
 
83
- ## Props
140
+ ## API Reference
84
141
 
85
- | Prop | Type | Required | Description |
86
- |------|------|----------|-------------|
87
- | `dataSet` | `ViewerData` | Yes | Data loaded from mulmo_view.json |
88
- | `basePath` | `string` | Yes | Base path for media files (local or URL) |
89
- | `initPage` | `number` | No | Initial page to display (default: 0) |
142
+ ### Props
90
143
 
91
- ## Events
144
+ | Prop | Type | Required | Default | Description |
145
+ |------|------|----------|---------|-------------|
146
+ | `dataSet` | `ViewerData` | Yes | - | Data loaded from mulmo_view.json |
147
+ | `basePath` | `string` | Yes | - | Base path for media files (local or URL) |
148
+ | `initPage` | `number` | No | `0` | Initial page to display |
149
+ | `audioLang` | `string` | No | `'en'` | Audio language |
150
+ | `textLang` | `string` | No | `'en'` | Text language |
151
+
152
+ ### Events
92
153
 
93
154
  | Event | Parameters | Description |
94
155
  |-------|------------|-------------|
95
156
  | `updatedPage` | `nextPage: number` | Emitted when the page is changed |
96
157
 
158
+ ### Slot Props (for Custom UI)
159
+
160
+ The default slot exposes the following properties and components:
161
+
162
+ | Prop | Type | Description |
163
+ |------|------|-------------|
164
+ | `MulmoPlayer` | `Component` | Player component for displaying media |
165
+ | `pageProps` | `Object` | Props to pass to the MulmoPlayer component |
166
+ | `currentPage` | `number` | Current page number (0-indexed) |
167
+ | `pageCount` | `number` | Total number of pages |
168
+ | `pageMove` | `(delta: number) => boolean` | Function to move pages (-1: previous, 1: next) |
169
+ | `isPlaying` | `boolean` | Whether media is currently playing |
170
+ | `audioLang` | `Ref<string>` | Audio language (mutable) |
171
+ | `textLang` | `Ref<string>` | Text language (mutable) |
172
+ | `SelectLanguage` | `Component` | Language selection component |
173
+
97
174
  ## For Developers
98
175
 
99
176
  This repository provides a development environment for the viewer component.
package/dist/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { default as MulmoView } from './components/viewer.vue';
2
- import { default as i18n } from './i18n';
3
- export { MulmoView, i18n };
1
+ import { default as MulmoViewer } from './components/mulmo_viewer.vue';
2
+ import { default as SelectLanguage } from './components/select_language.vue';
3
+ export { MulmoViewer, SelectLanguage };
@@ -1 +1 @@
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}
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-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--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-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-xl:80rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--font-weight-medium:500;--font-weight-bold:700;--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}.fixed{position:fixed}.relative{position:relative}.right-8{right:calc(var(--spacing)*8)}.bottom-2{bottom:calc(var(--spacing)*2)}.bottom-8{bottom:calc(var(--spacing)*8)}.left-1\/2{left:50%}.z-50{z-index:50}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.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%}.max-w-screen-xl{max-width:var(--breakpoint-xl)}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.resize{resize:both}.flex-col{flex-direction:column}.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)}.gap-8{gap:calc(var(--spacing)*8)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.bg-black{background-color:var(--color-black)}.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-100{background-color:var(--color-gray-100)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-indigo-600{background-color:var(--color-indigo-600)}.object-contain{object-fit:contain}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-10{padding:calc(var(--spacing)*10)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-gray-800{color:var(--color-gray-800)}.text-white{color:var(--color-white)}.opacity-0\!{opacity:0!important}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.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))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;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)}.hover\:bg-gray-800:hover{background-color:var(--color-gray-800)}.hover\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.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-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@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}
@@ -1,13 +1,12 @@
1
- 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";
2
- import { useI18n as O, createI18n as q } from "vue-i18n";
3
- 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 = {
1
+ import { defineComponent as $, ref as m, createElementBlock as d, openBlock as l, createTextVNode as H, createElementVNode as c, createCommentVNode as R, toDisplayString as C, Fragment as N, renderList as I, computed as p, renderSlot as O, withDirectives as q, normalizeProps as W, guardReactiveProps as G, createVNode as J, mergeProps as j, unref as K, createBlock as Q, vShow as U } from "vue";
2
+ const D = async (t) => await new Promise((P) => setTimeout(P, t)), X = { class: "items-center justify-center w-full" }, Y = { key: 0 }, Z = ["src"], ee = {
4
3
  key: 1,
5
4
  class: "relative inline-block"
6
- }, ee = ["src"], ae = ["src"], oe = { key: 2 }, te = ["src", "poster"], ue = {
5
+ }, ae = ["src"], te = ["src"], oe = { key: 2 }, ue = ["src", "poster"], ne = {
7
6
  key: 3,
8
7
  class: "relative inline-block"
9
- }, ne = ["src"], le = { key: 4 }, ie = "https://github.com/receptron/mulmocast-cli/blob/main/assets/images/mulmocast_credit.png?raw=true", M = /* @__PURE__ */ W({
10
- __name: "page",
8
+ }, ie = ["src"], le = { key: 4 }, se = "https://github.com/receptron/mulmocast-cli/blob/main/assets/images/mulmocast_credit.png?raw=true", L = /* @__PURE__ */ $({
9
+ __name: "mulmo_player",
11
10
  props: {
12
11
  index: {},
13
12
  videoWithAudioSource: {},
@@ -19,276 +18,222 @@ const D = async (e) => await new Promise((g) => setTimeout(g, e)), Q = { class:
19
18
  duration: {}
20
19
  },
21
20
  emits: ["play", "pause", "ended"],
22
- setup(e, { expose: g, emit: P }) {
23
- const { t: l } = O(), b = e, i = P, a = c(), o = c(), u = c(), s = c(), x = c(), S = () => {
24
- u.value && o.value && (u.value.currentTime = o.value.currentTime, u.value.currentTime === o.value.currentTime && u.value.play()), i("play");
25
- }, n = (d) => {
26
- !o.value?.ended && u?.value && u.value?.pause(), console.log(d), p(d);
27
- }, _ = () => {
28
- !u.value?.paused && !u.value?.ended && (u.value?.currentTime ?? 0) > 0 || y();
29
- }, E = () => {
30
- !o.value?.paused && !o.value?.ended && (o.value?.currentTime ?? 0) > 0 || y();
31
- }, V = () => {
32
- i("play");
33
- }, p = (d) => {
34
- const k = d.target;
35
- k.duration !== k.currentTime && i("pause");
36
- }, y = () => {
37
- i("ended");
21
+ setup(t, { expose: P, emit: _ }) {
22
+ const u = t, s = _, n = m(), a = m(), o = m(), g = m(), f = m(), x = () => {
23
+ o.value && a.value && (o.value.currentTime = a.value.currentTime, o.value.currentTime === a.value.currentTime && o.value.play()), s("play");
24
+ }, k = (v) => {
25
+ !a.value?.ended && o?.value && o.value?.pause(), console.log(v), b(v);
26
+ }, w = () => {
27
+ !o.value?.paused && !o.value?.ended && (o.value?.currentTime ?? 0) > 0 || S();
28
+ }, r = () => {
29
+ !a.value?.paused && !a.value?.ended && (a.value?.currentTime ?? 0) > 0 || S();
30
+ }, h = () => {
31
+ s("play");
32
+ }, b = (v) => {
33
+ const y = v.target;
34
+ y.duration !== y.currentTime && s("pause");
35
+ }, S = () => {
36
+ s("ended");
38
37
  };
39
- return g({
38
+ return P({
40
39
  play: async () => {
41
- 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"));
40
+ n.value && n.value.play(), a.value && a.value.play(), g.value && g.value.play(), !n.value && !a.value && !g.value && (await D((u.duration ?? 0) * 1e3), s("ended"));
42
41
  }
43
- }), (d, k) => (r(), m("div", Q, [
44
- e.videoWithAudioSource ? (r(), m("div", X, [
45
- v("video", {
42
+ }), (v, y) => (l(), d("div", X, [
43
+ t.videoWithAudioSource ? (l(), d("div", Y, [
44
+ c("video", {
46
45
  ref_key: "videoWithAudioRef",
47
- ref: a,
48
- src: e.videoWithAudioSource,
46
+ ref: n,
47
+ src: t.videoWithAudioSource,
49
48
  class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
50
49
  controls: !0,
51
50
  playsinline: "true",
52
- onPlay: V,
53
- onPause: p,
54
- onEnded: y
55
- }, null, 40, Y)
56
- ])) : e.soundEffectSource || e.videoSource ? (r(), m("div", Z, [
57
- v("video", {
51
+ onPlay: h,
52
+ onPause: b,
53
+ onEnded: S
54
+ }, null, 40, Z)
55
+ ])) : t.soundEffectSource || t.videoSource ? (l(), d("div", ee, [
56
+ c("video", {
58
57
  ref_key: "videoRef",
59
- ref: o,
58
+ ref: a,
60
59
  class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
61
- src: e.soundEffectSource || e.videoSource,
60
+ src: t.soundEffectSource || t.videoSource,
62
61
  controls: !0,
63
62
  playsinline: "true",
64
- onPlay: S,
65
- onPause: n,
66
- onEnded: _
67
- }, null, 40, ee),
68
- e.audioSource ? (r(), m("audio", {
63
+ onPlay: x,
64
+ onPause: k,
65
+ onEnded: w
66
+ }, null, 40, ae),
67
+ t.audioSource ? (l(), d("audio", {
69
68
  key: 0,
70
69
  ref_key: "audioSyncRef",
71
- ref: u,
72
- src: e.audioSource,
70
+ ref: o,
71
+ src: t.audioSource,
73
72
  controls: !0,
74
73
  class: "hidden",
75
- onEnded: E
76
- }, null, 40, ae)) : $("", !0)
77
- ])) : e.audioSource ? (r(), m("div", oe, [
78
- v("video", {
74
+ onEnded: r
75
+ }, null, 40, te)) : R("", !0)
76
+ ])) : t.audioSource ? (l(), d("div", oe, [
77
+ c("video", {
79
78
  ref_key: "audioRef",
80
- ref: s,
79
+ ref: g,
81
80
  class: "mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",
82
- src: e.audioSource,
83
- poster: e.imageSource ?? ie,
81
+ src: t.audioSource,
82
+ poster: t.imageSource ?? se,
84
83
  controls: !0,
85
84
  playsinline: "true",
86
- onPlay: V,
87
- onPause: p,
88
- onEnded: y
89
- }, null, 40, te)
90
- ])) : e.imageSource ? (r(), m("div", ue, [
91
- v("img", {
85
+ onPlay: h,
86
+ onPause: b,
87
+ onEnded: S
88
+ }, null, 40, ue)
89
+ ])) : t.imageSource ? (l(), d("div", ne, [
90
+ c("img", {
92
91
  ref_key: "imageRef",
93
- ref: x,
94
- src: e.imageSource,
92
+ ref: f,
93
+ src: t.imageSource,
95
94
  class: "max-w-full max-h-full object-contain"
96
- }, null, 8, ne)
97
- ])) : (r(), m("div", le, R(L(l)("ui.common.noMedia")), 1)),
98
- j(" " + R(e.text), 1)
95
+ }, null, 8, ie)
96
+ ])) : (l(), d("div", le, "No media available")),
97
+ H(" " + C(t.text), 1)
99
98
  ]));
100
99
  }
101
- }), se = ["value"], de = ["value"], B = /* @__PURE__ */ W({
100
+ }), de = ["value"], ce = ["value"], re = /* @__PURE__ */ $({
102
101
  __name: "select_language",
103
102
  props: {
104
103
  modelValue: {}
105
104
  },
106
105
  emits: ["update:modelValue"],
107
- setup(e, { emit: g }) {
108
- const P = ["en", "ja"], l = g, b = (i) => {
109
- const a = i.target;
110
- l("update:modelValue", a.value);
106
+ setup(t, { emit: P }) {
107
+ const _ = ["en", "ja"], u = P, s = (n) => {
108
+ const a = n.target;
109
+ u("update:modelValue", a.value);
111
110
  };
112
- return (i, a) => (r(), m("select", {
113
- value: e.modelValue,
114
- onChange: b
111
+ return (n, a) => (l(), d("select", {
112
+ value: t.modelValue,
113
+ onChange: s
115
114
  }, [
116
- (r(), m(G, null, U(P, (o) => v("option", {
115
+ (l(), d(N, null, I(_, (o) => c("option", {
117
116
  key: o,
118
117
  value: o
119
- }, R(o), 9, de)), 64))
120
- ], 40, se));
118
+ }, C(o), 9, ce)), 64))
119
+ ], 40, de));
121
120
  }
122
- }), 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({
123
- __name: "viewer",
121
+ }), ve = { class: "w-full overflow-hidden" }, me = { class: "max-w-7xl mx-auto px-4" }, ge = { class: "flex items-center justify-between" }, fe = ["disabled"], he = { class: "px-4" }, ye = ["disabled"], Pe = ["src"], pe = /* @__PURE__ */ $({
122
+ __name: "mulmo_viewer",
124
123
  props: {
125
124
  dataSet: {},
126
125
  basePath: {},
127
- initPage: {}
126
+ initPage: {},
127
+ audioLang: { default: "en" },
128
+ textLang: { default: "en" }
128
129
  },
129
- emits: ["updatedPage"],
130
- setup(e, { expose: g, emit: P }) {
131
- 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(() => {
132
- const f = n.value?.audioSources?.[S.value];
133
- return f ? l.basePath + "/" + f : "";
134
- }), y = h(() => n.value?.imageSource ? l.basePath + "/" + n.value.imageSource : ""), C = h(() => n.value?.multiLinguals?.[x.value] ?? n.value?.text ?? ""), d = c(!1), k = () => {
135
- d.value = !0, s.value && s.value.play();
136
- }, I = () => {
137
- console.log("pause"), d.value = !1, s.value && s.value.pause();
138
- }, N = async () => {
139
- await D(500), u.value && u.value.play();
140
- }, F = (f) => {
141
- a.value !== f && (a.value = f, d.value && o.value && N());
142
- }, A = (f) => {
143
- const t = a.value + f;
144
- return t > -1 && t < i ? (F(t), b("updatedPage", t), !0) : !1;
145
- }, z = () => {
146
- console.log("end"), d.value = !1, o.value && A(1) ? N() : s.value && s.value.pause();
147
- };
148
- return g({
149
- updatePage: F
150
- }), (f, t) => (r(), m("div", ce, [
151
- v("div", re, [
152
- v("div", ve, [
153
- v("button", {
154
- class: "px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",
155
- disabled: a.value === 0,
156
- onClick: t[0] || (t[0] = (w) => A(-1))
157
- }, " Prev ", 8, me),
158
- v("div", fe, [
159
- T(M, {
160
- ref_key: "mediaPlayer",
161
- ref: u,
162
- "video-with-audio-source": _.value,
163
- "video-source": V.value,
164
- "sound-effect-source": E.value,
165
- "audio-source": p.value,
166
- "image-source": y.value,
167
- index: a.value,
168
- text: C.value,
169
- duration: n.value?.duration,
170
- onPlay: k,
171
- onPause: I,
172
- onEnded: z
173
- }, null, 8, ["video-with-audio-source", "video-source", "sound-effect-source", "audio-source", "image-source", "index", "text", "duration"]),
174
- a.value + 1 < L(i) ? H((r(), J(M, {
175
- key: 0,
176
- data: e.dataSet?.beats[a.value + 1],
177
- "base-path": e.basePath,
178
- index: a.value + 1
179
- }, null, 8, ["data", "base-path", "index"])), [
180
- [K, !1]
181
- ]) : $("", !0)
182
- ]),
183
- e.dataSet?.bgmFile ? (r(), m("audio", {
184
- key: 0,
185
- ref_key: "bgmRef",
186
- ref: s,
187
- src: e.dataSet?.bgmFile
188
- }, null, 8, ge)) : $("", !0),
189
- v("button", {
190
- class: "px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",
191
- disabled: a.value >= L(i) - 1,
192
- onClick: t[1] || (t[1] = (w) => A(1))
193
- }, " Next ", 8, he)
130
+ emits: ["updatedPage", "update:audioLang", "update:textLang"],
131
+ setup(t, { expose: P, emit: _ }) {
132
+ const u = t, s = _, n = u.dataSet?.beats?.length ?? 0, a = m(u.initPage ?? 0), o = m(!0), g = m(), f = m(), x = p({
133
+ get: () => u.audioLang,
134
+ set: (e) => s("update:audioLang", e || "en")
135
+ }), k = p({
136
+ get: () => u.textLang,
137
+ set: (e) => s("update:textLang", e || "en")
138
+ }), w = p(() => u.dataSet?.beats[a.value]), r = (e) => e ? u.basePath + "/" + e : "", h = m(!1), b = () => {
139
+ h.value = !0, f.value && f.value.play();
140
+ }, S = () => {
141
+ console.log("pause"), h.value = !1, f.value && f.value.pause();
142
+ }, E = async () => {
143
+ await D(500), g.value && g.value.play();
144
+ }, v = (e) => {
145
+ a.value !== e && (a.value = e, h.value && o.value && E());
146
+ }, y = (e) => {
147
+ const i = a.value + e;
148
+ return i > -1 && i < n ? (v(i), s("updatedPage", i), !0) : !1;
149
+ }, V = () => {
150
+ console.log("end"), o.value && y(1) ? E() : (h.value = !1, f.value && f.value.pause());
151
+ }, F = {
152
+ onPlay: b,
153
+ onPause: S,
154
+ onEnded: V
155
+ }, A = p(() => {
156
+ const e = w.value, i = e?.audioSources?.[x.value];
157
+ return {
158
+ videoWithAudioSource: r(e?.videoWithAudioSource),
159
+ videoSource: r(e?.videoSource),
160
+ soundEffectSource: r(e?.soundEffectSource),
161
+ audioSource: i ? u.basePath + "/" + i : "",
162
+ imageSource: r(e?.imageSource),
163
+ index: a.value,
164
+ text: e?.multiLinguals?.[k.value] ?? e?.text ?? "",
165
+ duration: e?.duration,
166
+ ...F
167
+ };
168
+ }), M = p(() => u.dataSet?.beats[a.value + 1]), T = p(() => {
169
+ if (a.value + 1 >= n) return null;
170
+ const e = M.value;
171
+ return {
172
+ videoWithAudioSource: r(e?.videoWithAudioSource),
173
+ videoSource: r(e?.videoSource),
174
+ soundEffectSource: r(e?.soundEffectSource),
175
+ audioSource: e?.audioSources?.[x.value] ? u.basePath + "/" + e.audioSources[x.value] : "",
176
+ imageSource: r(e?.imageSource),
177
+ index: a.value + 1,
178
+ text: e?.multiLinguals?.[k.value] ?? e?.text ?? "",
179
+ duration: e?.duration
180
+ };
181
+ }), B = p(() => ({
182
+ MulmoPlayer: L,
183
+ pageProps: A.value,
184
+ currentPage: a.value,
185
+ pageCount: n,
186
+ pageMove: y,
187
+ isPlaying: h.value,
188
+ audioLang: x,
189
+ textLang: k,
190
+ SelectLanguage: re,
191
+ mediaPlayerRef: g,
192
+ // Event handlers for direct access
193
+ handlePlay: b,
194
+ handlePause: S,
195
+ handleEnded: V
196
+ }));
197
+ return P({
198
+ updatePage: v
199
+ }), (e, i) => (l(), d(N, null, [
200
+ O(e.$slots, "default", W(G(B.value)), () => [
201
+ c("div", ve, [
202
+ c("div", me, [
203
+ c("div", ge, [
204
+ c("button", {
205
+ class: "px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",
206
+ disabled: a.value === 0,
207
+ onClick: i[0] || (i[0] = (z) => y(-1))
208
+ }, " Prev ", 8, fe),
209
+ c("div", he, [
210
+ J(L, j({
211
+ ref_key: "mediaPlayer",
212
+ ref: g
213
+ }, A.value), null, 16)
214
+ ]),
215
+ c("button", {
216
+ class: "px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 disabled:opacity-50",
217
+ disabled: a.value >= K(n) - 1,
218
+ onClick: i[1] || (i[1] = (z) => y(1))
219
+ }, " Next ", 8, ye)
220
+ ])
221
+ ])
194
222
  ])
195
223
  ]),
196
- v("div", null, [
197
- t[4] || (t[4] = j("Audio: ", -1)),
198
- T(B, {
199
- modelValue: S.value,
200
- "onUpdate:modelValue": t[2] || (t[2] = (w) => S.value = w)
201
- }, null, 8, ["modelValue"])
202
- ]),
203
- v("div", null, [
204
- t[5] || (t[5] = j("Text: ", -1)),
205
- T(B, {
206
- modelValue: x.value,
207
- "onUpdate:modelValue": t[3] || (t[3] = (w) => x.value = w)
208
- }, null, 8, ["modelValue"])
209
- ])
210
- ]));
211
- }
212
- }), ye = {
213
- en: {
214
- message: {
215
- hello: "Hello"
216
- },
217
- ui: {
218
- common: {
219
- noLang: "No language available",
220
- noMedia: "No media available"
221
- },
222
- actions: {
223
- translate: "Translate",
224
- generateAudio: "Generate Audio"
225
- }
226
- },
227
- mulmoViewer: {
228
- text: "Text",
229
- audio: "Audio"
230
- },
231
- project: {
232
- productTabs: {
233
- slide: {
234
- autoPlay: "Auto Play",
235
- details: "{current} / {pages}"
236
- }
237
- }
238
- },
239
- languages: {
240
- en: "English",
241
- ja: "Japanese",
242
- zh: "Chinese",
243
- ko: "Korean",
244
- es: "Spanish",
245
- fr: "French",
246
- de: "German"
247
- }
248
- },
249
- ja: {
250
- message: {
251
- hello: "こんにちは"
252
- },
253
- ui: {
254
- common: {
255
- noLang: "言語がありません",
256
- noMedia: "メディアがありません"
257
- },
258
- actions: {
259
- translate: "翻訳",
260
- generateAudio: "音声を生成"
261
- }
262
- },
263
- mulmoViewer: {
264
- text: "テキスト",
265
- audio: "音声"
266
- },
267
- project: {
268
- productTabs: {
269
- slide: {
270
- autoPlay: "自動再生",
271
- details: "{current} / {pages}"
272
- }
273
- }
274
- },
275
- languages: {
276
- en: "英語",
277
- ja: "日本語",
278
- zh: "中国語",
279
- ko: "韓国語",
280
- es: "スペイン語",
281
- fr: "フランス語",
282
- de: "ドイツ語"
283
- }
224
+ T.value ? q((l(), Q(L, W(j({ key: 0 }, T.value)), null, 16)), [
225
+ [U, !1]
226
+ ]) : R("", !0),
227
+ t.dataSet?.bgmFile ? (l(), d("audio", {
228
+ key: 1,
229
+ ref_key: "bgmRef",
230
+ ref: f,
231
+ src: t.dataSet?.bgmFile
232
+ }, null, 8, Pe)) : R("", !0)
233
+ ], 64));
284
234
  }
285
- }, Se = q({
286
- legacy: !1,
287
- locale: "en",
288
- fallbackLocale: "en",
289
- messages: ye
290
235
  });
291
236
  export {
292
- xe as MulmoView,
293
- Se as i18n
237
+ pe as MulmoViewer,
238
+ re as SelectLanguage
294
239
  };
@@ -1 +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.MulmoCastViewer={},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"},C={key:0},R=["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()},V=()=>{!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",C,[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,R)])):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:V},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:""),V=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())},E=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&&E(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=>E(-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":V.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=>E(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"})}));
1
+ (function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.MulmoCastViewer={},f.Vue))})(this,(function(f,e){"use strict";const _=async a=>await new Promise(y=>setTimeout(y,a)),L={class:"items-center justify-center w-full"},R={key:0},$=["src"],C={key:1,class:"relative inline-block"},T=["src"],A=["src"],j={key:2},W=["src","poster"],D={key:3,class:"relative inline-block"},M=["src"],F={key:4},z="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:y,emit:S}){const l=a,d=S,i=e.ref(),o=e.ref(),n=e.ref(),r=e.ref(),m=e.ref(),v=()=>{n.value&&o.value&&(n.value.currentTime=o.value.currentTime,n.value.currentTime===o.value.currentTime&&n.value.play()),d("play")},k=u=>{!o.value?.ended&&n?.value&&n.value?.pause(),console.log(u),P(u)},E=()=>{!n.value?.paused&&!n.value?.ended&&(n.value?.currentTime??0)>0||h()},s=()=>{!o.value?.paused&&!o.value?.ended&&(o.value?.currentTime??0)>0||h()},g=()=>{d("play")},P=u=>{const p=u.target;p.duration!==p.currentTime&&d("pause")},h=()=>{d("ended")};return y({play:async()=>{i.value&&i.value.play(),o.value&&o.value.play(),r.value&&r.value.play(),!i.value&&!o.value&&!r.value&&(await _((l.duration??0)*1e3),d("ended"))}}),(u,p)=>(e.openBlock(),e.createElementBlock("div",L,[a.videoWithAudioSource?(e.openBlock(),e.createElementBlock("div",R,[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:P,onEnded:h},null,40,$)])):a.soundEffectSource||a.videoSource?(e.openBlock(),e.createElementBlock("div",C,[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:v,onPause:k,onEnded:E},null,40,T),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,A)):e.createCommentVNode("",!0)])):a.audioSource?(e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("video",{ref_key:"audioRef",ref:r,class:"mulmocast-video mx-auto h-auto max-h-[80vh] w-auto object-contain",src:a.audioSource,poster:a.imageSource??z,controls:!0,playsinline:"true",onPlay:g,onPause:P,onEnded:h},null,40,W)])):a.imageSource?(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("img",{ref_key:"imageRef",ref:m,src:a.imageSource,class:"max-w-full max-h-full object-contain"},null,8,M)])):(e.openBlock(),e.createElementBlock("div",F,"No media available")),e.createTextVNode(" "+e.toDisplayString(a.text),1)]))}}),O=["value"],q=["value"],V=e.defineComponent({__name:"select_language",props:{modelValue:{}},emits:["update:modelValue"],setup(a,{emit:y}){const S=["en","ja"],l=y,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,q)),64))],40,O))}}),H={class:"w-full overflow-hidden"},I={class:"max-w-7xl mx-auto px-4"},G={class:"flex items-center justify-between"},J=["disabled"],K={class:"px-4"},Q=["disabled"],U=["src"],X=e.defineComponent({__name:"mulmo_viewer",props:{dataSet:{},basePath:{},initPage:{},audioLang:{default:"en"},textLang:{default:"en"}},emits:["updatedPage","update:audioLang","update:textLang"],setup(a,{expose:y,emit:S}){const l=a,d=S,i=l.dataSet?.beats?.length??0,o=e.ref(l.initPage??0),n=e.ref(!0),r=e.ref(),m=e.ref(),v=e.computed({get:()=>l.audioLang,set:t=>d("update:audioLang",t||"en")}),k=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),P=()=>{g.value=!0,m.value&&m.value.play()},h=()=>{console.log("pause"),g.value=!1,m.value&&m.value.pause()},b=async()=>{await _(500),r.value&&r.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},B=()=>{console.log("end"),n.value&&p(1)?b():(g.value=!1,m.value&&m.value.pause())},Y={onPlay:P,onPause:h,onEnded:B},w=e.computed(()=>{const t=E.value,c=t?.audioSources?.[v.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?.[k.value]??t?.text??"",duration:t?.duration,...Y}}),Z=e.computed(()=>l.dataSet?.beats[o.value+1]),N=e.computed(()=>{if(o.value+1>=i)return null;const t=Z.value;return{videoWithAudioSource:s(t?.videoWithAudioSource),videoSource:s(t?.videoSource),soundEffectSource:s(t?.soundEffectSource),audioSource:t?.audioSources?.[v.value]?l.basePath+"/"+t.audioSources[v.value]:"",imageSource:s(t?.imageSource),index:o.value+1,text:t?.multiLinguals?.[k.value]??t?.text??"",duration:t?.duration}}),ee=e.computed(()=>({MulmoPlayer:x,pageProps:w.value,currentPage:o.value,pageCount:i,pageMove:p,isPlaying:g.value,audioLang:v,textLang:k,SelectLanguage:V,mediaPlayerRef:r,handlePlay:P,handlePause:h,handleEnded:B}));return y({updatePage:u}),(t,c)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps(ee.value)),()=>[e.createElementVNode("div",H,[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]=te=>p(-1))}," Prev ",8,J),e.createElementVNode("div",K,[e.createVNode(x,e.mergeProps({ref_key:"mediaPlayer",ref:r},w.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]=te=>p(1))}," Next ",8,Q)])])])]),N.value?e.withDirectives((e.openBlock(),e.createBlock(x,e.normalizeProps(e.mergeProps({key:0},N.value)),null,16)),[[e.vShow,!1]]):e.createCommentVNode("",!0),a.dataSet?.bgmFile?(e.openBlock(),e.createElementBlock("audio",{key:1,ref_key:"bgmRef",ref:m,src:a.dataSet?.bgmFile},null,8,U)):e.createCommentVNode("",!0)],64))}});f.MulmoViewer=X,f.SelectLanguage=V,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mulmocast-viewer",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "main": "dist/mulmocast-viewer.umd.js",
@@ -18,8 +18,7 @@
18
18
  "dist/mulmocast-viewer.umd.js",
19
19
  "dist/mulmocast-viewer.es.js",
20
20
  "dist/mulmocast-viewer.css",
21
- "dist/index.d.ts",
22
- "dist/i18n.d.ts"
21
+ "dist/index.d.ts"
23
22
  ],
24
23
  "scripts": {
25
24
  "fileList": "npx tsx batch/file_list.ts",
@@ -32,6 +31,8 @@
32
31
  "format": "prettier --write \"src/**/*.{ts,vue,css,html,json}\"",
33
32
  "format:check": "prettier --check \"src/**/*.{ts,vue,css,html,json}\""
34
33
  },
34
+ "repository": "git+ssh://git@github.com/receptron/mulmocast-viewer.git",
35
+ "author": "receptron",
35
36
  "dependencies": {
36
37
  "vue": "^3.5.22",
37
38
  "vue-i18n": "^11.1.12",
package/dist/i18n.d.ts DELETED
@@ -1,76 +0,0 @@
1
- import { I18n } from 'vue-i18n';
2
- declare const i18n: I18n<{
3
- en: {
4
- message: {
5
- hello: string;
6
- };
7
- ui: {
8
- common: {
9
- noLang: string;
10
- noMedia: string;
11
- };
12
- actions: {
13
- translate: string;
14
- generateAudio: string;
15
- };
16
- };
17
- mulmoViewer: {
18
- text: string;
19
- audio: string;
20
- };
21
- project: {
22
- productTabs: {
23
- slide: {
24
- autoPlay: string;
25
- details: string;
26
- };
27
- };
28
- };
29
- languages: {
30
- en: string;
31
- ja: string;
32
- zh: string;
33
- ko: string;
34
- es: string;
35
- fr: string;
36
- de: string;
37
- };
38
- };
39
- ja: {
40
- message: {
41
- hello: string;
42
- };
43
- ui: {
44
- common: {
45
- noLang: string;
46
- noMedia: string;
47
- };
48
- actions: {
49
- translate: string;
50
- generateAudio: string;
51
- };
52
- };
53
- mulmoViewer: {
54
- text: string;
55
- audio: string;
56
- };
57
- project: {
58
- productTabs: {
59
- slide: {
60
- autoPlay: string;
61
- details: string;
62
- };
63
- };
64
- };
65
- languages: {
66
- en: string;
67
- ja: string;
68
- zh: string;
69
- ko: string;
70
- es: string;
71
- fr: string;
72
- de: string;
73
- };
74
- };
75
- }, {}, {}, string, false>;
76
- export default i18n;