mulmocast-viewer 0.0.1 → 0.0.2
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 +144 -0
- package/README.md +125 -9
- package/dist/mulmocast-viewer.umd.js +1 -1
- package/package.json +1 -2
package/README.ja.md
ADDED
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
# MulmoCast Viewer
|
|
2
|
+
|
|
3
|
+
**MulmoCast Viewer** は、mulmocast-cli で生成されたバンドル（JSON とメディアファイル群）をブラウザ上で再生・表示するための Vue 3 コンポーネントライブラリです。
|
|
4
|
+
|
|
5
|
+
## インストール
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install mulmocast-viewer
|
|
9
|
+
# または
|
|
10
|
+
yarn add mulmocast-viewer
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## 使い方
|
|
14
|
+
|
|
15
|
+
### 基本的な使用方法
|
|
16
|
+
|
|
17
|
+
MulmoView コンポーネントを Vue アプリケーションで簡単に利用できます。
|
|
18
|
+
|
|
19
|
+
```vue
|
|
20
|
+
<template>
|
|
21
|
+
<div>
|
|
22
|
+
<MulmoView :data-set="data" :base-path="basePath" />
|
|
23
|
+
</div>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { MulmoView } from 'mulmocast-viewer'
|
|
28
|
+
import 'mulmocast-viewer/style.css'
|
|
29
|
+
|
|
30
|
+
import data from './path/to/mulmo_view.json'
|
|
31
|
+
const basePath = '/media_bundle'
|
|
32
|
+
</script>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## セットアップ手順
|
|
36
|
+
|
|
37
|
+
### 1. mulmocast-cli でバンドルを作成
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
mulmocast bundle path/to/your/file.json
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### 2. 生成されたフォルダを配置
|
|
44
|
+
|
|
45
|
+
生成されたバンドルフォルダを、プロジェクトの公開ディレクトリに配置します。
|
|
46
|
+
|
|
47
|
+
- Vue プロジェクト: `/public/media_bundle/`
|
|
48
|
+
- その他: 任意の公開ディレクトリ
|
|
49
|
+
|
|
50
|
+
ディレクトリ名は自由に変更できます（例: `/public/demo_bundle/`）。
|
|
51
|
+
|
|
52
|
+
### 3. JSON データの読み込み
|
|
53
|
+
|
|
54
|
+
`mulmo_view.json` を以下のいずれかの方法で読み込みます：
|
|
55
|
+
|
|
56
|
+
#### 方法 1: 直接インポート
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
import data from './path/to/mulmo_view.json'
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
#### 方法 2: 動的読み込み
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
const response = await fetch('/media_bundle/mulmo_view.json')
|
|
66
|
+
const data = await response.json()
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### 4. basePath の設定
|
|
70
|
+
|
|
71
|
+
`basePath` には、メディアファイルが配置されているディレクトリまたは URL を指定します。
|
|
72
|
+
|
|
73
|
+
```typescript
|
|
74
|
+
// ローカルパスの例
|
|
75
|
+
const basePath = '/media_bundle'
|
|
76
|
+
|
|
77
|
+
// 外部 URL の例
|
|
78
|
+
const basePath = 'https://example.com/bundle_demo'
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
MulmoView は、この `basePath` を基準に画像・音声・動画などのメディアファイルを相対的に参照します。
|
|
82
|
+
|
|
83
|
+
## Props
|
|
84
|
+
|
|
85
|
+
| Prop | Type | Required | Description |
|
|
86
|
+
|------|------|----------|-------------|
|
|
87
|
+
| `dataSet` | `ViewerData` | Yes | mulmo_view.json から読み込んだデータ |
|
|
88
|
+
| `basePath` | `string` | Yes | メディアファイルのベースパス（ローカルまたは URL） |
|
|
89
|
+
| `initPage` | `number` | No | 初期表示ページ（デフォルト: 0） |
|
|
90
|
+
|
|
91
|
+
## Events
|
|
92
|
+
|
|
93
|
+
| Event | Parameters | Description |
|
|
94
|
+
|-------|------------|-------------|
|
|
95
|
+
| `updatedPage` | `nextPage: number` | ページが変更されたときに発火 |
|
|
96
|
+
|
|
97
|
+
## 開発者向け
|
|
98
|
+
|
|
99
|
+
このリポジトリは、ビューアコンポーネントの開発環境を提供しています。
|
|
100
|
+
|
|
101
|
+
### 開発環境のセットアップ
|
|
102
|
+
|
|
103
|
+
1. **バンドルを作成**
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
mulmocast bundle scripts/foo/bar.json
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
2. **生成されたフォルダを配置**
|
|
110
|
+
|
|
111
|
+
バンドルフォルダを `public/` 以下に配置します。以下のようなパスになるようにしてください：
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
public/bar/mulmo_view.json
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
3. **データリストを更新**
|
|
118
|
+
|
|
119
|
+
```bash
|
|
120
|
+
yarn run fileList
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
4. **開発サーバを起動**
|
|
124
|
+
|
|
125
|
+
```bash
|
|
126
|
+
yarn run dev
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### ビルド
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
# ライブラリビルド
|
|
133
|
+
yarn run build:lib
|
|
134
|
+
|
|
135
|
+
# アプリケーションビルド
|
|
136
|
+
yarn run build:app
|
|
137
|
+
|
|
138
|
+
# 両方をビルド
|
|
139
|
+
yarn run build
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## ライセンス
|
|
143
|
+
|
|
144
|
+
MIT
|
package/README.md
CHANGED
|
@@ -1,28 +1,144 @@
|
|
|
1
1
|
# MulmoCast Viewer
|
|
2
2
|
|
|
3
|
+
**MulmoCast Viewer** is a Vue 3 component library for playing and displaying bundles (JSON and media files) generated by mulmocast-cli in a browser.
|
|
3
4
|
|
|
4
|
-
|
|
5
|
+
## Installation
|
|
5
6
|
|
|
7
|
+
```bash
|
|
8
|
+
npm install mulmocast-viewer
|
|
9
|
+
# or
|
|
10
|
+
yarn add mulmocast-viewer
|
|
6
11
|
```
|
|
7
|
-
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### Basic Usage
|
|
16
|
+
|
|
17
|
+
You can easily use the MulmoView component in your Vue application.
|
|
18
|
+
|
|
19
|
+
```vue
|
|
20
|
+
<template>
|
|
21
|
+
<div>
|
|
22
|
+
<MulmoView :data-set="data" :base-path="basePath" />
|
|
23
|
+
</div>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { MulmoView } from 'mulmocast-viewer'
|
|
28
|
+
import 'mulmocast-viewer/style.css'
|
|
29
|
+
|
|
30
|
+
import data from './path/to/mulmo_view.json'
|
|
31
|
+
const basePath = '/media_bundle'
|
|
32
|
+
</script>
|
|
8
33
|
```
|
|
9
34
|
|
|
10
|
-
|
|
35
|
+
## Setup Guide
|
|
11
36
|
|
|
12
|
-
|
|
37
|
+
### 1. Create a Bundle with mulmocast-cli
|
|
13
38
|
|
|
39
|
+
```bash
|
|
40
|
+
mulmocast bundle path/to/your/file.json
|
|
14
41
|
```
|
|
15
|
-
|
|
42
|
+
|
|
43
|
+
### 2. Place the Generated Folder
|
|
44
|
+
|
|
45
|
+
Place the generated bundle folder in your project's public directory.
|
|
46
|
+
|
|
47
|
+
- Vue projects: `/public/media_bundle/`
|
|
48
|
+
- Other projects: Any public directory
|
|
49
|
+
|
|
50
|
+
You can freely change the directory name (e.g., `/public/demo_bundle/`).
|
|
51
|
+
|
|
52
|
+
### 3. Load JSON Data
|
|
53
|
+
|
|
54
|
+
Load `mulmo_view.json` using one of the following methods:
|
|
55
|
+
|
|
56
|
+
#### Method 1: Direct Import
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
import data from './path/to/mulmo_view.json'
|
|
16
60
|
```
|
|
17
61
|
|
|
18
|
-
|
|
62
|
+
#### Method 2: Dynamic Loading
|
|
19
63
|
|
|
64
|
+
```typescript
|
|
65
|
+
const response = await fetch('/media_bundle/mulmo_view.json')
|
|
66
|
+
const data = await response.json()
|
|
20
67
|
```
|
|
21
|
-
|
|
68
|
+
|
|
69
|
+
### 4. Configure basePath
|
|
70
|
+
|
|
71
|
+
Set `basePath` to the directory or URL where media files are located.
|
|
72
|
+
|
|
73
|
+
```typescript
|
|
74
|
+
// Local path example
|
|
75
|
+
const basePath = '/media_bundle'
|
|
76
|
+
|
|
77
|
+
// External URL example
|
|
78
|
+
const basePath = 'https://example.com/bundle_demo'
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
MulmoView references media files (images, audio, video) relative to this `basePath`.
|
|
82
|
+
|
|
83
|
+
## Props
|
|
84
|
+
|
|
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) |
|
|
90
|
+
|
|
91
|
+
## Events
|
|
92
|
+
|
|
93
|
+
| Event | Parameters | Description |
|
|
94
|
+
|-------|------------|-------------|
|
|
95
|
+
| `updatedPage` | `nextPage: number` | Emitted when the page is changed |
|
|
96
|
+
|
|
97
|
+
## For Developers
|
|
98
|
+
|
|
99
|
+
This repository provides a development environment for the viewer component.
|
|
100
|
+
|
|
101
|
+
### Development Environment Setup
|
|
102
|
+
|
|
103
|
+
1. **Create a Bundle**
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
mulmocast bundle scripts/foo/bar.json
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
2. **Place the Generated Folder**
|
|
110
|
+
|
|
111
|
+
Place the bundle folder under `public/`. Ensure the path looks like this:
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
public/bar/mulmo_view.json
|
|
22
115
|
```
|
|
23
116
|
|
|
24
|
-
|
|
117
|
+
3. **Update Data List**
|
|
25
118
|
|
|
119
|
+
```bash
|
|
120
|
+
yarn run fileList
|
|
26
121
|
```
|
|
122
|
+
|
|
123
|
+
4. **Start Development Server**
|
|
124
|
+
|
|
125
|
+
```bash
|
|
27
126
|
yarn run dev
|
|
28
|
-
```
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Build
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
# Library build
|
|
133
|
+
yarn run build:lib
|
|
134
|
+
|
|
135
|
+
# Application build
|
|
136
|
+
yarn run build:app
|
|
137
|
+
|
|
138
|
+
# Build both
|
|
139
|
+
yarn run build
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## License
|
|
143
|
+
|
|
144
|
+
MIT
|
|
@@ -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
|
|
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"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mulmocast-viewer",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/mulmocast-viewer.umd.js",
|
|
@@ -33,7 +33,6 @@
|
|
|
33
33
|
"format:check": "prettier --check \"src/**/*.{ts,vue,css,html,json}\""
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"pinia": "^3.0.3",
|
|
37
36
|
"vue": "^3.5.22",
|
|
38
37
|
"vue-i18n": "^11.1.12",
|
|
39
38
|
"vue-router": "^4.6.3"
|