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

Jump to bottom

feat: replace onFullScreenChange with onEvent #175

Merged
merged 1 commit into from
May 26, 2021
Merged

feat: replace onFullScreenChange with onEvent #175

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
53 changes: 0 additions & 53 deletions example/src/LayerTest.jsx
View file
Open in desktop

This file was deleted.

19 changes: 19 additions & 0 deletions example/src/Logo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react'
import {StyleSheet, css} from 'aphrodite/no-important'

const styles = StyleSheet.create({
logo: {
width: '20%',
position: 'absolute',
top: '3%',
right: '4%',
},
})

const LOGO_SRC = 'http://zhstatic.zhihu.com/assets/zhihu/web-logo@2x.png'

function Logo() {
return <img className={css(styles.logo)} src={LOGO_SRC} />
}

export default Logo
25 changes: 19 additions & 6 deletions example/src/MP4Page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react'
import PlayerContainer, {MessageContext} from 'griffith'
import LayerTest from './LayerTest'
import React, {useState, useLayoutEffect, useContext} from 'react'
import PlayerContainer, {MessageContext, EVENTS} from 'griffith'
import Logo from './Logo'

const duration = 182

Expand Down Expand Up @@ -35,13 +35,26 @@ const props = {
autoplay: true,
shouldObserveResize: true,
src: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
// eslint-disable-next-line no-console
onEvent: console.log.bind(null, 'onEvent:'),
}

const canShowLogo = new URLSearchParams(location.search).has('logo')
/** 常规通讯方式，建议直接使用 `onEvent` 替代 */
const LogoListener = () => {
const [isLogoVisible, setIsLogoVisible] = useState(false)
const {subscribeEvent} = useContext(MessageContext)
useLayoutEffect(() => {
return subscribeEvent(EVENTS.PLAYER.PLAY_COUNT, () => {
setIsLogoVisible(true)
}).unsubscribe
}, [])
return canShowLogo && isLogoVisible ? <Logo /> : null
}

const App = () => (
<PlayerContainer {...props}>
<MessageContext.Consumer>
{({subscribeEvent}) => <LayerTest subscribeEvent={subscribeEvent} />}
</MessageContext.Consumer>
<LogoListener />
</PlayerContainer>
)

Expand Down
1 change: 1 addition & 0 deletions packages/griffith/README-zh-Hans.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ render(<Player {...props} />)
| `useAutoQuality` | `boolean` | `false` | 是否启用自动清晰度功能 |
| `standalone` | `boolean` | `false` | 是否启用 standalone 模式 |
| `onBeforePlay` | `function` | `void` | 视频播放之前回调函数 |
| `onEvent` | `(type: string) => void` | `void` | 公共事件的回调函数 |
| `shouldObserveResize` | `boolean` | `false` | 是否监听窗口 resize |
| `initialObjectFit` | `fill \| \contain \| cover \| none \| scale-down` | `contain` | object-fit 参数 |
| `useMSE` | `boolean` | `false` | 是否启用 MSE |
Expand Down
52 changes: 26 additions & 26 deletions packages/griffith/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,32 +18,32 @@ render(<Player {...props} />)

### `Props`

| Name | Type | Default | Description |
| ------------------------- | ------------------------------------------------ | ---------------- | ------------------------------------------------------------------------ |
| `id` | `string` | | Unique identifier of the player instance |
| `title` | `string` | | Video title |
| `cover` | `string` | | Video cover image |
| `duration` | `number` | | Initial video duration. Use actual values after video metadata is loaded |
| `sources` | `sources` | | Video playback data |
| `defaultQuality` | `ld \| sd \| hd \| fhd` | | Video default quality |
| `useAutoQuality` | `boolean` | `false` | Enable auto quality |
| `standalone` | `boolean` | `false` | Enable standalone mode |
| `onBeforePlay` | `function` | `void` | Callback function before video playback |
| `onFullScreenChange` | `function` | `status => void` | Callback function when fullScreen status has changed |
| `shouldObserveResize` | `boolean` | `false` | Listen to the window resize |
| `initialObjectFit` | `fill \| contain \| cover \| none \| scale-down` | `contain` | object-fit |
| `useMSE` | `boolean` | `false` | Enable Media Source Extensions™ |
| `locale` | `en \| ja \| zh-Hans \| zh-Hant` | `en` | UI Locale |
| `autoplay` | `boolean` | `false` | Autoplay |
| `muted` | `boolean` | `false` | Muted |
| `disablePictureInPicture` | `boolean` | `false` | Disable Picture in Picture feature |
| `hiddenPlayButton` | `boolean` | `false` | Hide play button |
| `hiddenTimeline` | `boolean` | `false` | Hide progress bar |
| `hiddenTime` | `boolean` | `false` | Hide duration and total time |
| `hiddenQualityMenu` | `boolean` | `false` | Hide quality menu (if it is shown) |
| `hiddenVolume` | `boolean` | `false` | Hide volume |
| `hiddenFullScreenButton` | `boolean` | `false` | Hide full screen button |
| `progressDots` | `ProgressDotItem[]` | `[]` | Node information on the progress bar |
| Name | Type | Default | Description |
| ------------------------- | ------------------------------------------------ | --------- | ------------------------------------------------------------------------ |
| `id` | `string` | | Unique identifier of the player instance |
| `title` | `string` | | Video title |
| `cover` | `string` | | Video cover image |
| `duration` | `number` | | Initial video duration. Use actual values after video metadata is loaded |
| `sources` | `sources` | | Video playback data |
| `defaultQuality` | `ld \| sd \| hd \| fhd` | | Video default quality |
| `useAutoQuality` | `boolean` | `false` | Enable auto quality |
| `standalone` | `boolean` | `false` | Enable standalone mode |
| `onBeforePlay` | `function` | `void` | Callback function before video playback |
| `onEvent` | `(type: string) => void` | `void` | Callback function when common event is triggered |
| `shouldObserveResize` | `boolean` | `false` | Listen to the window resize |
| `initialObjectFit` | `fill \| contain \| cover \| none \| scale-down` | `contain` | object-fit |
| `useMSE` | `boolean` | `false` | Enable Media Source Extensions™ |
| `locale` | `en \| ja \| zh-Hans \| zh-Hant` | `en` | UI Locale |
| `autoplay` | `boolean` | `false` | Autoplay |
| `muted` | `boolean` | `false` | Muted |
| `disablePictureInPicture` | `boolean` | `false` | Disable Picture in Picture feature |
| `hiddenPlayButton` | `boolean` | `false` | Hide play button |
| `hiddenTimeline` | `boolean` | `false` | Hide progress bar |
| `hiddenTime` | `boolean` | `false` | Hide duration and total time |
| `hiddenQualityMenu` | `boolean` | `false` | Hide quality menu (if it is shown) |
| `hiddenVolume` | `boolean` | `false` | Hide volume |
| `hiddenFullScreenButton` | `boolean` | `false` | Hide full screen button |
| `progressDots` | `ProgressDotItem[]` | `[]` | Node information on the progress bar |

`sources`:

Expand Down
5 changes: 3 additions & 2 deletions packages/griffith/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react'
import {EVENTS} from 'griffith-message'

type RealQuality = 'ld' | 'sd' | 'hd' | 'fhd'

Expand All @@ -23,7 +24,7 @@ interface PlayerContainerProps {
message: string
}
onBeforePlay?: (src: string) => Promise<void>
onFullScreenChange?: (status: boolean) => void
onEvent?: (type: string) => void
shouldObserveResize?: boolean
initialObjectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
useMSE?: boolean
Expand Down Expand Up @@ -73,4 +74,4 @@ declare const Layer: React.ComponentType

export default PlayerContainer

export {VideoSourceContext, MessageContext, Layer}
export {VideoSourceContext, MessageContext, Layer, EVENTS}
5 changes: 1 addition & 4 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 @@ -38,7 +38,6 @@ class Player extends Component {
),
onEvent: PropTypes.func.isRequired,
onBeforePlay: PropTypes.func.isRequired,
onFullScreenChange: PropTypes.func.isRequired,
autoplay: PropTypes.bool,
muted: PropTypes.bool,
disablePictureInPicture: PropTypes.bool,
Expand Down Expand Up @@ -306,13 +305,11 @@ class Player extends Component {

handleToggleFullScreen = () => {
if (BigScreen.enabled) {
const {onEvent, onFullScreenChange} = this.props
const {onEvent} = this.props
const onEnter = () => {
onFullScreenChange(true)
return onEvent(EVENTS.PLAYER.ENTER_FULLSCREEN)
}
const onExit = () => {
onFullScreenChange(false)
return onEvent(EVENTS.PLAYER.EXIT_FULLSCREEN)
}
BigScreen.toggle(this.playerRef.current, onEnter, onExit)
Expand Down
12 changes: 6 additions & 6 deletions packages/griffith/src/components/PlayerContainer/PlayerContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'

import noop from 'lodash/noop'
import {sequence} from 'griffith-utils'
import Player from '../Player'
import {
VideoSourceProvider,
Expand All @@ -20,7 +21,7 @@ const PlayerContainer = ({
sources,
error,
onBeforePlay = () => Promise.resolve(),
onFullScreenChange = () => {},
onEvent,
shouldObserveResize,
children,
initialObjectFit = 'contain',
Expand All @@ -45,7 +46,7 @@ const PlayerContainer = ({
<InternalContext.Consumer>
{({emitEvent, subscribeAction}) => (
<VideoSourceProvider
onEvent={emitEvent}
onEvent={sequence(emitEvent, onEvent || noop)}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

应该 hook 化，把这里的所有 Consumer 都删掉（在各自组件内使用 useContext），props 就能直接传递下去不需要 sequence

sources={sources}
id={id}
defaultQuality={defaultQuality}
Expand All @@ -72,10 +73,9 @@ const PlayerContainer = ({
title={title}
duration={duration}
error={error}
onEvent={emitEvent}
onEvent={sequence(emitEvent, onEvent || noop)}
subscribeAction={subscribeAction}
onBeforePlay={() => onBeforePlay(currentSrc)}
onFullScreenChange={onFullScreenChange}
/>
)}
</VideoSourceContext.Consumer>
Expand Down Expand Up @@ -110,7 +110,7 @@ PlayerContainer.propTypes = {
message: PropTypes.string,
}),
onBeforePlay: PropTypes.func,
onFullScreenChange: PropTypes.func,
onEvent: PropTypes.func,
initialObjectFit: PropTypes.oneOf(VALID_FIT),
useMSE: PropTypes.bool,
defaultQuality: PropTypes.oneOf(['ld', 'sd', 'hd', 'fhd']),
Expand Down
1 change: 1 addition & 0 deletions packages/griffith/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export {ExternalContext as MessageContext} from './contexts/Message'
export {VideoSourceContext} from './contexts/VideoSource'
export {default as Controller} from './components/Controller'
export {default as Layer} from './components/Layer'
export {EVENTS} from 'griffith-message'