Skip to content

Commit

Permalink
feat: expose onFullScreenChange event (#174)
Browse files Browse the repository at this point in the history 
Co-authored-by: xiabaoying <xiabaoying@zhihu.com>
  • Loading branch information
@xia5517
xia5517 and xiabaoying authored May 25, 2021
1 parent 28695aa commit 2d8d444
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 28 deletions.
51 changes: 26 additions & 25 deletions packages/griffith/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,31 +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 |
| `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 |
| `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 |

`sources`:

Expand Down
1 change: 1 addition & 0 deletions packages/griffith/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ interface PlayerContainerProps {
message: string
}
onBeforePlay?: (src: string) => Promise<void>
onFullScreenChange?: (status: boolean) => void
shouldObserveResize?: boolean
initialObjectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
useMSE?: boolean
Expand Down
13 changes: 10 additions & 3 deletions packages/griffith/src/components/Player/Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ 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 @@ -305,9 +306,15 @@ class Player extends Component {

handleToggleFullScreen = () => {
if (BigScreen.enabled) {
const {onEvent} = this.props
const onEnter = () => onEvent(EVENTS.PLAYER.ENTER_FULLSCREEN)
const onExit = () => onEvent(EVENTS.PLAYER.EXIT_FULLSCREEN)
const {onEvent, onFullScreenChange} = 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
3 changes: 3 additions & 0 deletions packages/griffith/src/components/PlayerContainer/PlayerContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const PlayerContainer = ({
sources,
error,
onBeforePlay = () => Promise.resolve(),
onFullScreenChange = () => {},
shouldObserveResize,
children,
initialObjectFit = 'contain',
Expand Down Expand Up @@ -74,6 +75,7 @@ const PlayerContainer = ({
onEvent={emitEvent}
subscribeAction={subscribeAction}
onBeforePlay={() => onBeforePlay(currentSrc)}
onFullScreenChange={onFullScreenChange}
/>
)}
</VideoSourceContext.Consumer>
Expand Down Expand Up @@ -108,6 +110,7 @@ PlayerContainer.propTypes = {
message: PropTypes.string,
}),
onBeforePlay: PropTypes.func,
onFullScreenChange: PropTypes.func,
initialObjectFit: PropTypes.oneOf(VALID_FIT),
useMSE: PropTypes.bool,
defaultQuality: PropTypes.oneOf(['ld', 'sd', 'hd', 'fhd']),
Expand Down

0 comments on commit 2d8d444

Please sign in to comment.