Skip to content

Commit

Permalink
feat: replace onFullScreenChange with onEvent
Browse files Browse the repository at this point in the history
  • Loading branch information
@ambar
ambar committed May 26, 2021
1 parent 2d8d444 commit c5caf55
Show file tree
Hide file tree
Showing 9 changed files with 76 additions and 97 deletions.
53 changes: 0 additions & 53 deletions example/src/LayerTest.jsx
View file

This file was deleted.

19 changes: 19 additions & 0 deletions example/src/Logo.jsx
View file
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
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
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
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
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
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
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)}
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
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'

0 comments on commit c5caf55

Please sign in to comment.