Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Controller & ProgressDot event #177

Merged
merged 1 commit into from
Jun 24, 2021
+208 −69
Merged

feat: add Controller & ProgressDot event #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
feat: add Controller & ProgressDot event
  • Loading branch information
zhangyue04 committed Jun 24, 2021
commit 711494e2f6451adc3a13cc21e4f4fedd38e98e41
9 changes: 9 additions & 0 deletions example/src/IframePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ export default function IframePage() {
})
})

document
.getElementById('jsShowControllerFirst')
.addEventListener('click', () => {
dispatchMessage(firstVideoWindow, ACTIONS.PLAYER.SHOW_CONTROLLER)
})

return () => {
disposer.unsubscribe()
}
Expand All @@ -42,6 +48,7 @@ export default function IframePage() {
<p>场景 1：向一个视频发出暂停指令</p>
<p>场景 2：一个视频开始播放时，暂停其他视频</p>
<p>场景 3：手动 seek</p>
<p>场景 4：显示进度条</p>
<div>
<iframe src="/mp4?nonav" allowFullScreen frameBorder="0" />
<iframe src="/mp4?nonav" allowFullScreen frameBorder="0" />
Expand All @@ -54,6 +61,8 @@ export default function IframePage() {
<input id="time" />
<button id="jsSeekFirst">手动 seek 第一个视频</button>
</div>
<br />
<button id="jsShowControllerFirst">让第一个视频显示进度条</button>
</>
)
}
55 changes: 30 additions & 25 deletions packages/griffith-message/README-zh-Hans.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,23 +62,27 @@ dispatchMessage(targetWindow, messageName, data)

从播放器接收到的事件

| `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` | 退出画中画 | 无 |
| `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` | 鼠标离开播放节点 | 无 |

#### DOM 类 data

Expand All @@ -94,11 +98,12 @@ dispatchMessage(targetWindow, messageName, data)

往播放器发送的事件

| `messageName` | 说明 | `data` | 状态 |
| --------------------------------- | ---------------- | ------------------------------------------------- | ------ |
| `ACTIONS.PLAYER.PLAY` | 播放 | `{applyOnFullScreen: boolean}` 是否应用于全屏视频 | TODO |
| `ACTIONS.PLAYER.PAUSE` | 暂停 | 同上 | 已支持 |
| `ACTIONS.PLAYER.SET_VOLUME` | 设置音量 | `{volume: number}` 音量值，0 到 1 | TODO |
| `ACTIONS.PLAYER.ENTER_FULLSCREEN` | 进入全屏 | 无 | TODO |
| `ACTIONS.PLAYER.EXIT_FULLSCREEN` | 退出全屏 | 无 | TODO |
| `ACTIONS.PLAYER.TIME_UPDATE` | 设置视频播放进度 | `{currentTime: number} 设置视频当前的进度` | 已支持 |
| `messageName` | 说明 | `data` | 状态 |
| --------------------------------- | -------------------- | ------------------------------------------------- | ------ |
| `ACTIONS.PLAYER.PLAY` | 播放 | `{applyOnFullScreen: boolean}` 是否应用于全屏视频 | TODO |
| `ACTIONS.PLAYER.PAUSE` | 暂停 | 同上 | 已支持 |
| `ACTIONS.PLAYER.SET_VOLUME` | 设置音量 | `{volume: number}` 音量值，0 到 1 | TODO |
| `ACTIONS.PLAYER.ENTER_FULLSCREEN` | 进入全屏 | 无 | 已支持 |
| `ACTIONS.PLAYER.EXIT_FULLSCREEN` | 退出全屏 | 无 | 已支持 |
| `ACTIONS.PLAYER.TIME_UPDATE` | 设置视频播放进度 | `{currentTime: number} 设置视频当前的进度` | 已支持 |
| `ACTIONS.PLAYER.SHOW_CONTROLLER` | 显示播放器进度条控件 | 无 | 已支持 |
45 changes: 25 additions & 20 deletions packages/griffith-message/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,23 +62,27 @@ dispatchMessage(targetWindow, messageName, data)

Events received from the player

| `messageName` | Description | `data` |
| -------------------------------- | ------------------------------------ | ---------------------------------------- |
| `EVENTS.DOM.PLAY` | Play | see DOM type data table |
| `EVENTS.DOM.PLAYING` | Resume playback from pause or buffer | see DOM type data table |
| `EVENTS.DOM.PAUSE` | Pause | see DOM type data table |
| `EVENTS.DOM.ENDED` | Ended | see DOM type data table |
| `EVENTS.DOM.TIMEUPDATE` | Timeupdate | see DOM type data table |
| `EVENTS.DOM.ERROR` | Error | see DOM type data table |
| `EVENTS.DOM.WAITING` | Buffer | see DOM type data table |
| `EVENTS.PLAYER.REQUEST_PLAY` | User starts playback | null |
| `EVENTS.PLAYER.QUALITY_CHANGE` | Play quality switching | `{quality: string, prevQuality: string}` |
| `EVENTS.PLAYER.PLAY_COUNT` | Playback | null |
| `EVENTS.PLAYER.PLAY_FAILED` | Play failed | `{currentTime: number}` |
| `EVENTS.PLAYER.ENTER_FULLSCREEN` | Enter Fullscreen | null |
| `EVENTS.PLAYER.EXIT_FULLSCREEN` | Exit Fullscreen | null |
| `EVENTS.PLAYER.ENTER_PIP` | Enter Picture in Picture | null |
| `EVENTS.PLAYER.EXIT_PIP` | Exit Picture in Picture | null |
| `messageName` | Description | `data` |
| ---------------------------------- | ------------------------------------ | ------------------------------------------------ |
| `EVENTS.DOM.PLAY` | Play | see DOM type data table |
| `EVENTS.DOM.PLAYING` | Resume playback from pause or buffer | see DOM type data table |
| `EVENTS.DOM.PAUSE` | Pause | see DOM type data table |
| `EVENTS.DOM.ENDED` | Ended | see DOM type data table |
| `EVENTS.DOM.TIMEUPDATE` | Timeupdate | see DOM type data table |
| `EVENTS.DOM.ERROR` | Error | see DOM type data table |
| `EVENTS.DOM.WAITING` | Buffer | see DOM type data table |
| `EVENTS.PLAYER.REQUEST_PLAY` | User starts playback | null |
| `EVENTS.PLAYER.QUALITY_CHANGE` | Play quality switching | `{quality: string, prevQuality: string}` |
| `EVENTS.PLAYER.PLAY_COUNT` | Playback | null |
| `EVENTS.PLAYER.PLAY_FAILED` | Play failed | `{currentTime: number}` |
| `EVENTS.PLAYER.ENTER_FULLSCREEN` | Enter Fullscreen | null |
| `EVENTS.PLAYER.EXIT_FULLSCREEN` | Exit Fullscreen | null |
| `EVENTS.PLAYER.ENTER_PIP` | Enter Picture in Picture | null |
| `EVENTS.PLAYER.EXIT_PIP` | Exit Picture in Picture | null |
| `EVENTS.PLAYER.SHOW_CONTROLLER` | Show Controller | null |
| `EVENTS.PLAYER.HIDE_CONTROLLER` | Hide Controller | null |
| `EVENTS.PLAYER.HOVER_PROGRESS_DOT` | Mouse hover progress dot | `{startTime: number, left: number, top: number}` |
| `EVENTS.PLAYER.LEAVE_PROGRESS_DOT` | Mouse leave progress dot | null |

#### DOM type data

Expand All @@ -99,6 +103,7 @@ Event sent to the player
| `ACTIONS.PLAYER.PLAY` | Play | `{applyOnFullScreen: boolean}` Applied to full screen video | TODO |
| `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.ENTER_FULLSCREEN` | Enter fullScreen | null | TODO |
| `ACTIONS.PLAYER.EXIT_FULLSCREEN` | Exit fullscreen | null | TODO |
| `ACTIONS.PLAYER.TIME_UPDATE` | 设置视频播放进度 | `{currentTime: number} Set the currentTime` | 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 |
| `ACTIONS.PLAYER.SHOW_CONTROLLER` | Show Controller | null | SUPPORTED |
5 changes: 5 additions & 0 deletions packages/griffith-message/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ declare const ACTIONS: {
EXIT_FULLSCREEN: string
ENTER_PIP: string
EXIT_PIP: string
SHOW_CONTROLLER: string
}
}

Expand All @@ -31,6 +32,10 @@ declare const EVENTS: {
EXIT_FULLSCREEN: string
ENTER_PIP: string
EXIT_PIP: string
SHOW_CONTROLLER: string
HIDE_CONTROLLER: string
HOVER_PROGRESS_DOT: string
LEAVE_PROGRESS_DOT: string
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/griffith-message/src/constants/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ export const PLAYER = {
ENTER_PIP: 'action/player/enter-pip',
EXIT_PIP: 'action/player/exit-pip',
TIME_UPDATE: 'action/player/time-update',
SHOW_CONTROLLER: 'action/player/show-controller',
}
4 changes: 4 additions & 0 deletions packages/griffith-message/src/constants/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,8 @@ export const PLAYER = {
EXIT_FULLSCREEN: 'event/player/exit-fullscreen',
ENTER_PIP: 'event/player/enter-pip',
EXIT_PIP: 'event/player/exit-pip',
SHOW_CONTROLLER: 'event/player/show-controller',
HIDE_CONTROLLER: 'event/player/hide-controller',
HOVER_PROGRESS_DOT: 'event/player/hover-progress-dot',
LEAVE_PROGRESS_DOT: 'event/player/leave-progress-dot',
}
6 changes: 6 additions & 0 deletions packages/griffith/src/components/Controller/Controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ class Controller extends Component {
onQualityChange: PropTypes.func,
onVolumeChange: PropTypes.func,
onToggleFullScreen: PropTypes.func,
onProgressDotHover: PropTypes.func,
onProgressDotLeave: PropTypes.func,
show: PropTypes.bool,
showPip: PropTypes.bool,
progressDots: PropTypes.arrayOf(
Expand Down Expand Up @@ -287,6 +289,8 @@ class Controller extends Component {
hiddenQualityMenu,
hiddenVolumeItem,
hiddenFullScreenButton,
onProgressDotHover,
onProgressDotLeave,
} = this.props
const {
isVolumeHovered,
Expand Down Expand Up @@ -315,6 +319,8 @@ class Controller extends Component {
onDragEnd={onDragEnd}
onChange={this.onDragMove}
onSeek={this.handleSeek}
onProgressDotHover={onProgressDotHover}
onProgressDotLeave={onProgressDotLeave}
/>
)}
{hiddenTimeline && <div className={css(styles.timelineHolder)} />}
Expand Down
72 changes: 55 additions & 17 deletions packages/griffith/src/components/Player/Player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,10 @@ class Player extends Component {
this.setDocumentTitle()
this.initPip()

if (this.getShowController(this.state)) {
this.props.onEvent(EVENTS.PLAYER.SHOW_CONTROLLER)
}

const historyVolume = storage.get('@griffith/history-volume')
if (historyVolume) {
this.setState({volume: historyVolume})
Expand All @@ -112,6 +116,11 @@ class Player extends Component {
({currentTime}) => this.handleSeek(currentTime)
)

this.showControllerActionSubscription = this.props.subscribeAction(
ACTIONS.PLAYER.SHOW_CONTROLLER,
this.handleShowController
)

if (this.videoRef.current.root) {
if (this.props.muted) {
this.handleVideoVolumeChange(0)
Expand All @@ -122,9 +131,41 @@ class Player extends Component {
}
}

componentDidUpdate() {
componentDidUpdate(preProps, preState) {
this.setDocumentTitle()
this.initPip()

const preShowController = this.getShowController(preState)
const showController = this.getShowController(this.state)

if (preShowController !== showController) {
if (showController) {
this.props.onEvent(EVENTS.PLAYER.SHOW_CONTROLLER)
} else {
this.props.onEvent(EVENTS.PLAYER.HIDE_CONTROLLER)
}
}
}

getShowController = ({
TaraLoveCats marked this conversation as resolved.
Show resolved Hide resolved
isPlaybackStarted,
isPlaying,
isControllerShown,
isControllerHovered,
isControllerDragging,
currentTime,
}) => {
// 播放中：暂停 或 Controller shown/hovered/dragging 时展示 Controller
if (isPlaybackStarted) {
return (
!isPlaying ||
isControllerShown ||
isControllerHovered ||
isControllerDragging
)
}
// 非播放中：播放结束时展示 Controller（未播放时不展示）
return currentTime !== 0
}

setDocumentTitle = () => {
Expand All @@ -151,6 +192,8 @@ class Player extends Component {

componentWillUnmount() {
this.pauseActionSubscription.unsubscribe()
this.timeUpdateActionSubscription.unsubscribe()
this.showControllerActionSubscription.unsubscribe()
}

handlePauseAction = ({dontApplyOnFullScreen} = {}) => {
Expand Down Expand Up @@ -384,6 +427,14 @@ class Player extends Component {
this.handleShowController()
}

handleProgressDotHover = info => {
this.props.onEvent(EVENTS.PLAYER.HOVER_PROGRESS_DOT, info)
}

handleProgressDotLeave = () => {
this.props.onEvent(EVENTS.PLAYER.LEAVE_PROGRESS_DOT)
}

render() {
const {
error,
Expand All @@ -409,9 +460,6 @@ class Player extends Component {
isPlaying,
isLoading,
duration,
isControllerShown,
isControllerHovered,
isControllerDragging,
currentTime,
isNeverPlayed,
volume,
Expand All @@ -424,19 +472,7 @@ class Player extends Component {
const isPip = Boolean(Pip.pictureInPictureElement)
// Safari 会将 pip 状态视为全屏
const isFullScreen = Boolean(BigScreen.element) && !isPip

// 未播放时不展示 Controller
// 播放中暂停时展示 Controller
// 播放中 Controller shown/hovered/dragging 时展示 Controller
// 播放结束展示 Controller
const showController =
(isPlaybackStarted &&
(!isPlaying ||
isControllerShown ||
isControllerHovered ||
isControllerDragging)) ||
(!isPlaybackStarted && currentTime !== 0)

const showController = this.getShowController(this.state)
const bufferedTime = getBufferedTime(currentTime, buffered)

return (
Expand Down Expand Up @@ -614,6 +650,8 @@ class Player extends Component {
onVolumeChange={this.handleVideoVolumeChange}
onToggleFullScreen={this.handleToggleFullScreen}
onTogglePip={this.handleTogglePip}
onProgressDotHover={this.handleProgressDotHover}
onProgressDotLeave={this.handleProgressDotLeave}
show={showController}
showPip={Pip.supported && !disablePictureInPicture}
hiddenPlayButton={hiddenPlayButton}
Expand Down
Loading