Skip to content

Commit

Permalink
feat: add event params type
Browse files Browse the repository at this point in the history
  • Loading branch information
@ambar
ambar committed Sep 16, 2021
1 parent e814282 commit 20dea5a
Show file tree
Hide file tree
Showing 17 changed files with 364 additions and 264 deletions.
44 changes: 14 additions & 30 deletions example/src/IframePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,19 @@ export default function IframePage(): JSX.Element {
useEffect(() => {
helperRef.current = createMessageHelper()

function pauseAllOtherVideos(thisWindow: MessageEventSource) {
function pauseAllOtherVideos(source: MessageEventSource) {
iframeRefs
.map((ref) => ref.current!.contentWindow!)
.filter((w) => w !== thisWindow)
.forEach((w) =>
helperRef.current!.dispatchMessage(w, ACTIONS.PLAYER.PAUSE)
)
.filter((w) => w !== source)
.forEach((w) => helperRef.current!.dispatchMessage(w, ACTIONS.PAUSE))
}

const disposer = helperRef.current.subscribeMessage(
(messageName, data, sourceWindow) => {
if (messageName === EVENTS.DOM.PLAY) {
pauseAllOtherVideos(sourceWindow!)
}
}
)
helperRef.current.subscribeMessage(EVENTS.PLAY, (data, source) => {
pauseAllOtherVideos(source!)
})

return () => {
disposer.unsubscribe()
helperRef.current?.dispose()
}
}, [iframeRefs])

Expand All @@ -56,20 +50,14 @@ export default function IframePage(): JSX.Element {
<h2>场景演示</h2>
<button
onClick={() => {
helperRef.current!.dispatchMessage(
getFirstWindow(),
ACTIONS.PLAYER.PAUSE
)
helperRef.current!.dispatchMessage(getFirstWindow(), ACTIONS.PAUSE)
}}
>
暂停第一个视频
</button>
<button
onClick={() => {
helperRef.current!.dispatchMessage(
getFirstWindow(),
ACTIONS.PLAYER.PLAY
)
helperRef.current!.dispatchMessage(getFirstWindow(), ACTIONS.PLAY)
}}
>
播放第一个视频（暂停其他视频）
Expand All @@ -81,10 +69,8 @@ export default function IframePage(): JSX.Element {
const currentTime = Number(timeInputRef.current!.value)
helperRef.current!.dispatchMessage(
getFirstWindow(),
ACTIONS.PLAYER.TIME_UPDATE,
{
currentTime,
}
ACTIONS.TIME_UPDATE,
{currentTime}
)
}}
>
Expand All @@ -95,7 +81,7 @@ export default function IframePage(): JSX.Element {
onClick={() => {
helperRef.current!.dispatchMessage(
getFirstWindow(),
ACTIONS.PLAYER.SHOW_CONTROLLER
ACTIONS.SHOW_CONTROLLER
)
}}
>
Expand All @@ -105,10 +91,8 @@ export default function IframePage(): JSX.Element {
onClick={() => {
helperRef.current!.dispatchMessage(
getFirstWindow(),
ACTIONS.PLAYER.SET_VOLUME,
{
volume: 0,
}
ACTIONS.SET_VOLUME,
{volume: 0}
)
}}
>
Expand Down
44 changes: 25 additions & 19 deletions example/src/MP4Page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
import React, {
useRef,
useState,
useLayoutEffect,
useContext,
useEffect,
} from 'react'
import React, {useState, useLayoutEffect, useContext, useEffect} from 'react'
import Player, {
MessageContext,
MessageContextValue,
useMessageContextRef,
ACTIONS,
EVENTS,
} from 'griffith'
Expand Down Expand Up @@ -71,16 +65,25 @@ const LogoListener: React.FC<{shouldShowLogo: boolean}> = ({
const [isLogoVisible, setIsLogoVisible] = useState(false)
const {subscribeEvent} = useContext(MessageContext)
useLayoutEffect(() => {
return subscribeEvent(EVENTS.PLAYER.PLAY_COUNT, () => {
return subscribeEvent(EVENTS.PLAY_COUNT, () => {
setIsLogoVisible(true)
}).unsubscribe
}, [subscribeEvent])
return shouldShowLogo && isLogoVisible ? <Logo /> : null
}

const App = () => {
const dispatchRef = useRef<MessageContextValue['dispatchAction']>()
const messageContextRef = useMessageContextRef()
const query = useQuery()
const loop = 'loop' in query

useEffect(() => {
return messageContextRef.subscribeEvent(EVENTS.ENDED, () => {
if (loop) {
messageContextRef.dispatchAction(ACTIONS.PLAY)
}
}).unsubscribe
}, [messageContextRef, loop])

return (
<>
Expand All @@ -95,20 +98,23 @@ const App = () => {
},
}}
locale={'ja'}
dispatchRef={dispatchRef}
onEvent={(e, data) => {
if ('loop' in query && e === EVENTS.DOM.ENDED) {
dispatchRef.current?.(ACTIONS.PLAYER.PLAY)
}
logEvent(e, data)
}}
messageContextRef={messageContextRef}
onEvent={logEvent}
>
<LogoListener shouldShowLogo={'logo' in query} />
</Player>
<button onClick={() => dispatchRef.current?.(ACTIONS.PLAYER.PLAY)}>
<button
onClick={() => {
messageContextRef.dispatchAction(ACTIONS.PLAY)
}}
>
Play
</button>
<button onClick={() => dispatchRef.current?.(ACTIONS.PLAYER.PAUSE)}>
<button
onClick={() => {
messageContextRef.dispatchAction(ACTIONS.PAUSE)
}}
>
Pause
</button>
</>
Expand Down
2 changes: 1 addition & 1 deletion example/src/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const groupedLogger = createGroupedLogger('TIMEUPDATE', 2000)

export const logEvent = (e: string, data: any) => {
const args = ['onEvent', e, data]
if (e === EVENTS.DOM.TIMEUPDATE) {
if (e === EVENTS.TIMEUPDATE) {
groupedLogger(...args)
} else {
console.log(...args)
Expand Down
117 changes: 61 additions & 56 deletions packages/griffith-message/README-zh-Hans.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,27 @@ Griffith 消息通信插件

```js
import {EVENTS, ACTIONS, createMessageHelper} from 'griffith-message'

const helper = createMessageHelper()
// register event listener
helper.subscribeMessage(EVENTS.PLAY, (r) => {
r.currentTime
})
helper.subscribeMessage(EVENTS.QUALITY_CHANGE, (r) => {
r.quality
})
// dispatch action to player
helper.dispatchMessage(window, ACTIONS.SET_VOLUME, {volume: 0.5})
// dispose all event listeners
helper.dispose()
```

### `createMessageHelper`

`帮助跨窗口通信`
帮助跨窗口通信。

```js
const {subscribeMessage, dispatchMessage} = createMessageHelper(
id,
targetOrigin,
validateId
)
```ts
createMessageHelper(id?, targetOrigin?, shouldValidateId?)
```
| Name | Type | Description |
Expand All @@ -30,60 +39,56 @@ const {subscribeMessage, dispatchMessage} = createMessageHelper(
#### `subscribeMessage`
```js
const subscription = subscribeMessage((messageName, data, sourceWindow) => {
// do something
})

subscription.unsubscribe()
```ts
subscribeMessage(name: EVENTS, (data?: object, source?: MessageEventSource) => void): () => void
```
| 字段 | 类型 | 说明 |
| -------------- | -------------------- | ------------------------------- |
| `messageName` | `string` | 消息名 |
| `data` | `object` | 消息附加数据，没有的时候为 null |
| `sourceWindow` | `MessageEventSource` | [消息来源][messageeventsource] |
| 字段 | 类型 | 说明 |
| -------------- | -------------------- | --------------------------------- |
| `name` | `EVENTS` | 消息名 |
| `data` | `object` | 消息附加数据，没有的时候为 `void` |
| `sourceWindow` | `MessageEventSource` | [消息来源][messageeventsource] |
[messageeventsource]: https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/source 'MessageEventSource'
#### dispatchMessage
```js
dispatchMessage(targetWindow, messageName, data)
```ts
dispatchMessage(target: Window, name: ACTIONS, data?: object): void
```
| 字段 | 类型 | 说明 |
| -------------- | -------- | ------------------ |
| `targetWindow` | `Window` | 目标窗口 |
| `messageName` | `string` | 消息名 |
| `data` | `object` | 消息附加数据，可选 |
| 字段 | 类型 | 说明 |
| -------- | --------- | ------------------ |
| `target` | `Window` | 目标窗口 |
| `name` | `ACTIONS` | 消息名 |
| `data` | `object` | 消息附加数据，可选 |
### EVENTS
从播放器接收到的事件
| `messageName` | 说明 | `data` |
| ---------------------------------- | ---------------------------------- | ------------------------------------------------ |
| `EVENTS.DOM.PLAY` | 播放 | 见下表 |
| `EVENTS.DOM.PLAYING` | 从暂停或缓冲中恢复播放 | 见下表 |
| `EVENTS.DOM.PAUSE` | 暂停 | 见下表 |
| `EVENTS.DOM.ENDED` | 停止 | 见下表 |
| `EVENTS.DOM.TIMEUPDATE` | 进度更新 | 见下表 |
| `EVENTS.DOM.ERROR` | 错误 | 见下表 |
| `EVENTS.DOM.WAITING` | 缓冲 | 见下表 |
| `EVENTS.PLAYER.REQUEST_PLAY` | 用户触发播放 | 无 |
| `EVENTS.PLAYER.QUALITY_CHANGE` | 清晰度切换 | `{quality: string, prevQuality: string}` |
| `EVENTS.PLAYER.PLAY_COUNT` | 播放一次 | 无 |
| `EVENTS.PLAYER.PLAY_FAILED` | 播放失败 | `{currentTime: number}` |
| `EVENTS.PLAYER.ENTER_FULLSCREEN` | 进入全屏 | 无 |
| `EVENTS.PLAYER.EXIT_FULLSCREEN` | 退出全屏 | 无 |
| `EVENTS.PLAYER.ENTER_PIP` | 进入画中画 | 无 |
| `EVENTS.PLAYER.EXIT_PIP` | 退出画中画 | 无 |
| `EVENTS.PLAYER.SHOW_CONTROLLER` | 显示播放器进度条控件 | 无 |
| `EVENTS.PLAYER.HIDE_CONTROLLER` | 隐藏播放器进度条控件 | 无 |
| `EVENTS.PLAYER.HOVER_PROGRESS_DOT` | 鼠标 hover 播放节点 | `{startTime: number, left: number, top: number}` |
| `EVENTS.PLAYER.LEAVE_PROGRESS_DOT` | 鼠标离开播放节点 | 无 |
| `EVENTS.PLAYER.SUBSCRIPTION_READY` | 播放器事件注册完成，可监听 ACTIONS | 无 |
| `messageName` | 说明 | `data` |
| --------------------------- | ---------------------------------- | ------------------------------------------------ |
| `EVENTS.PLAY` | 播放 | 见下表 |
| `EVENTS.PLAYING` | 从暂停或缓冲中恢复播放 | 见下表 |
| `EVENTS.PAUSE` | 暂停 | 见下表 |
| `EVENTS.ENDED` | 停止 | 见下表 |
| `EVENTS.TIMEUPDATE` | 进度更新 | 见下表 |
| `EVENTS.ERROR` | 错误 | 见下表 |
| `EVENTS.WAITING` | 缓冲 | 见下表 |
| `EVENTS.REQUEST_PLAY` | 用户触发播放 | `void` |
| `EVENTS.QUALITY_CHANGE` | 清晰度切换 | `{quality: string, prevQuality: string}` |
| `EVENTS.PLAY_COUNT` | 播放一次 | `void` |
| `EVENTS.PLAY_FAILED` | 播放失败 | `{currentTime: number}` |
| `EVENTS.ENTER_FULLSCREEN` | 进入全屏 | `void` |
| `EVENTS.EXIT_FULLSCREEN` | 退出全屏 | `void` |
| `EVENTS.ENTER_PIP` | 进入画中画 | `void` |
| `EVENTS.EXIT_PIP` | 退出画中画 | `void` |
| `EVENTS.SHOW_CONTROLLER` | 显示播放器进度条控件 | `void` |
| `EVENTS.HIDE_CONTROLLER` | 隐藏播放器进度条控件 | `void` |
| `EVENTS.HOVER_PROGRESS_DOT` | 鼠标悬停播放节点 | `{startTime: number, left: number, top: number}` |
| `EVENTS.LEAVE_PROGRESS_DOT` | 鼠标离开播放节点 | `void` |
| `EVENTS.SUBSCRIPTION_READY` | 播放器事件注册完成，可监听 ACTIONS | `void` |
#### DOM 类 data
Expand All @@ -99,12 +104,12 @@ dispatchMessage(targetWindow, messageName, data)
往播放器发送的事件
| `messageName` | 说明 | `data` |
| --------------------------------- | -------------------- | ----------------------------------------------------- |
| `ACTIONS.PLAYER.PLAY` | 播放 | `void` |
| `ACTIONS.PLAYER.PAUSE` | 暂停 | `{dontApplyOnFullScreen: boolean}` 是否应用于全屏视频 |
| `ACTIONS.PLAYER.SET_VOLUME` | 设置音量 | `{volume: number}` 音量值，0 到 1 |
| `ACTIONS.PLAYER.ENTER_FULLSCREEN` | 进入全屏 | `void` |
| `ACTIONS.PLAYER.EXIT_FULLSCREEN` | 退出全屏 | `void` |
| `ACTIONS.PLAYER.TIME_UPDATE` | 设置视频播放进度 | `{currentTime: number}` 设置视频当前的进度 |
| `ACTIONS.PLAYER.SHOW_CONTROLLER` | 显示播放器进度条控件 | `void` |
| `messageName` | 说明 | `data` |
| -------------------------- | -------------------- | ----------------------------------------------------- |
| `ACTIONS.PLAY` | 播放 | `void` |
| `ACTIONS.PAUSE` | 暂停 | `{dontApplyOnFullScreen: boolean}` 是否应用于全屏视频 |
| `ACTIONS.SET_VOLUME` | 设置音量 | `{volume: number}` 音量值，0 到 1 |
| `ACTIONS.ENTER_FULLSCREEN` | 进入全屏 | `void` |
| `ACTIONS.EXIT_FULLSCREEN` | 退出全屏 | `void` |
| `ACTIONS.TIME_UPDATE` | 设置视频播放进度 | `{currentTime: number}` 设置视频当前的进度 |
| `ACTIONS.SHOW_CONTROLLER` | 显示播放器进度条控件 | `void` |
Loading

0 comments on commit 20dea5a

Please sign in to comment.