feat: support action set_volume & update readme

fix: remove handlePlayAction
zhihu · Aug 11, 2021 · 7b2f25f · 7b2f25f
1 parent 42dd5b6
commit 7b2f25f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/example/src/IframePage.tsx b/example/src/IframePage.tsx
@@ -24,6 +24,10 @@ export default function IframePage() {
       dispatchMessage(firstVideoWindow, ACTIONS.PLAYER.PAUSE)
     })
 
+    document.getElementById('jsPlayFirst').addEventListener('click', () => {
+      dispatchMessage(firstVideoWindow, ACTIONS.PLAYER.PLAY)
+    })
+
     document.getElementById('jsSeekFirst').addEventListener('click', () => {
       const currentTime = Number(document.getElementById('time').value)
       dispatchMessage(firstVideoWindow, ACTIONS.PLAYER.TIME_UPDATE, {
@@ -37,6 +41,14 @@ export default function IframePage() {
         dispatchMessage(firstVideoWindow, ACTIONS.PLAYER.SHOW_CONTROLLER)
       })
 
+    document
+      .getElementById('jsSetVolumeFirst')
+      .addEventListener('click', () => {
+        dispatchMessage(firstVideoWindow, ACTIONS.PLAYER.SET_VOLUME, {
+          volume: 0,
+        })
+      })
+
     return () => {
       disposer.unsubscribe()
     }
@@ -45,10 +57,11 @@ export default function IframePage() {
   return (
     <>
       <p>本页面可以测试播放器在 iframe 中的效果，还可以测试跨窗口消息接口</p>
-      <p>场景 1：向一个视频发出暂停指令</p>
+      <p>场景 1：向一个视频发出暂停 / 播放指令</p>
       <p>场景 2：一个视频开始播放时，暂停其他视频</p>
       <p>场景 3：手动 seek</p>
       <p>场景 4：显示进度条</p>
+      <p>场景 5：设置视频的音量</p>
       <div>
         <iframe src="/mp4?nonav" allowFullScreen frameBorder="0" />
         <iframe src="/mp4?nonav" allowFullScreen frameBorder="0" />
@@ -57,12 +70,16 @@ export default function IframePage() {
       </div>
       <br />
       <button id="jsPauseFirst">暂停第一个视频</button>
+      <br />
+      <button id="jsPlayFirst">播放第一个视频</button>
+      <br />
       <div>
         <input id="time" />
         <button id="jsSeekFirst">手动 seek 第一个视频</button>
       </div>
-      <br />
       <button id="jsShowControllerFirst">让第一个视频显示进度条</button>
+      <br />
+      <button id="jsSetVolumeFirst">让第一个视频静音</button>
     </>
   )
 }
diff --git a/packages/griffith-message/README-zh-Hans.md b/packages/griffith-message/README-zh-Hans.md
@@ -100,9 +100,9 @@ dispatchMessage(targetWindow, messageName, data)
 
 | `messageName`                     | 说明                 | `data`                                            | 状态   |
 | --------------------------------- | -------------------- | ------------------------------------------------- | ------ |
-| `ACTIONS.PLAYER.PLAY`             | 播放                 | `{applyOnFullScreen: boolean}` 是否应用于全屏视频 | TODO   |
+| `ACTIONS.PLAYER.PLAY`             | 播放                 | `{applyOnFullScreen: boolean}` 是否应用于全屏视频 | 已支持 |
 | `ACTIONS.PLAYER.PAUSE`            | 暂停                 | 同上                                              | 已支持 |
-| `ACTIONS.PLAYER.SET_VOLUME`       | 设置音量             | `{volume: number}` 音量值，0 到 1                 | TODO   |
+| `ACTIONS.PLAYER.SET_VOLUME`       | 设置音量             | `{volume: number}` 音量值，0 到 1                 | 已支持 |
 | `ACTIONS.PLAYER.ENTER_FULLSCREEN` | 进入全屏             | 无                                                | 已支持 |
 | `ACTIONS.PLAYER.EXIT_FULLSCREEN`  | 退出全屏             | 无                                                | 已支持 |
 | `ACTIONS.PLAYER.TIME_UPDATE`      | 设置视频播放进度     | `{currentTime: number} 设置视频当前的进度`        | 已支持 |

diff --git a/packages/griffith-message/README.md b/packages/griffith-message/README.md
@@ -100,9 +100,9 @@ Event sent to the player
 
 | `messageName`                     | Description      | `data`                                                      | Status    |
 | --------------------------------- | ---------------- | ----------------------------------------------------------- | --------- |
-| `ACTIONS.PLAYER.PLAY`             | Play             | `{applyOnFullScreen: boolean}` Applied to full screen video | TODO      |
+| `ACTIONS.PLAYER.PLAY`             | Play             | `{applyOnFullScreen: boolean}` Applied to full screen video | SUPPORTED |
 | `ACTIONS.PLAYER.PAUSE`            | Pause            | Applied to full screen video                                | SUPPORTED |
-| `ACTIONS.PLAYER.SET_VOLUME`       | Set the volume   | `{volume: number}` Volume value from 0 to 1                 | TODO      |
+| `ACTIONS.PLAYER.SET_VOLUME`       | Set the volume   | `{volume: number}` Volume value from 0 to 1                 | SUPPORTED |
 | `ACTIONS.PLAYER.ENTER_FULLSCREEN` | Enter fullScreen | null                                                        | SUPPORTED |
 | `ACTIONS.PLAYER.EXIT_FULLSCREEN`  | Exit fullscreen  | null                                                        | SUPPORTED |
 | `ACTIONS.PLAYER.TIME_UPDATE`      | Set current time | `{currentTime: number} Set the currentTime`                 | SUPPORTED |

diff --git a/packages/griffith/src/components/Player/Player.js b/packages/griffith/src/components/Player/Player.js
@@ -117,6 +117,9 @@ class Player extends Component {
         ACTIONS.PLAYER.SHOW_CONTROLLER,
         this.handleShowController
       ),
+      this.props.subscribeAction(ACTIONS.PLAYER.SET_VOLUME, ({volume}) =>
+        this.handleVideoVolumeChange(volume)
+      ),
     ]
 
     if (this.videoRef.current.root) {