Skip to content

Commit

Permalink
feat: picture in picture (#136)
Browse files Browse the repository at this point in the history 
* feat: picture in picture

* chore: add docs
  • Loading branch information
@kitayoshi
kitayoshi authored Aug 20, 2020
1 parent fa3a8fd commit f4cc4e5
Show file tree
Hide file tree
Showing 17 changed files with 204 additions and 34 deletions.
2 changes: 2 additions & 0 deletions packages/griffith-message/README-zh-Hans.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@ dispatchMessage(targetWindow, messageName, data)
| `EVENTS.PLAYER.PLAY_FAILED` | 播放失败 | `{currentTime: number}` |
| `EVENTS.PLAYER.ENTER_FULLSCREEN` | 进入全屏 | 无 |
| `EVENTS.PLAYER.EXIT_FULLSCREEN` | 退出全屏 | 无 |
| `EVENTS.PLAYER.ENTER_PIP` | 进入画中画 | 无 |
| `EVENTS.PLAYER.EXIT_PIP` | 退出画中画 | 无 |

#### DOM 类 data

Expand Down
6 changes: 4 additions & 2 deletions packages/griffith-message/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,10 @@ Events received from the player
| `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_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 |

#### DOM type data

Expand Down
4 changes: 4 additions & 0 deletions packages/griffith-message/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ declare const ACTIONS: {
SET_VOLUME: string
ENTER_FULLSCREEN: string
EXIT_FULLSCREEN: string
ENTER_PIP: string
EXIT_PIP: string
}
}

Expand All @@ -27,6 +29,8 @@ declare const EVENTS: {
PLAY_FAILED: string
ENTER_FULLSCREEN: string
EXIT_FULLSCREEN: string
ENTER_PIP: string
EXIT_PIP: string
}
}

Expand Down
2 changes: 2 additions & 0 deletions packages/griffith-message/src/constants/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,6 @@ export const PLAYER = {
SET_VOLUME: 'action/player/set-volume',
ENTER_FULLSCREEN: 'action/player/enter-fullscreen',
EXIT_FULLSCREEN: 'action/player/exit-fullscreen',
ENTER_PIP: 'action/player/enter-pip',
EXIT_PIP: 'action/player/exit-pip',
}
2 changes: 2 additions & 0 deletions packages/griffith-message/src/constants/events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,6 @@ export const PLAYER = {
PLAY_FAILED: 'event/player/play-failed',
ENTER_FULLSCREEN: 'event/player/enter-fullscreen',
EXIT_FULLSCREEN: 'event/player/exit-fullscreen',
ENTER_PIP: 'event/player/enter-pip',
EXIT_PIP: 'event/player/exit-pip',
}
29 changes: 15 additions & 14 deletions packages/griffith/README-zh-Hans.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,21 @@ render(<Player {...props} />)

### `props`

| 字段 | 类型 | 默认值 | 说明 |
| --------------------- | ------------------------------------------------- | --------- | ------------------------------------------ |
| `id` | `string` | | 播放器实例唯一标识 |
| `title` | `string` | | 视频标题 |
| `cover` | `string` | | 视频封面图片 URL |
| `duration` | `number` | | 初始视频时长。在视频元数据载入后使用实际值 |
| `sources` | `sources` | | 视频播放数据。具体见下, |
| `standalone` | `boolean` | `false` | 是否启用 standalone 模式 |
| `onBeforePlay` | `function` | `void` | 视频播放之前回调函数 |
| `shouldObserveResize` | `boolean` | `false` | 是否监听窗口 resize |
| `initialObjectFit` | `fill \| \contain \| cover \| none \| scale-down` | `contain` | object-fit 参数 |
| `useMSE` | `boolean` | `false` | 是否启用 MSE |
| `locale` | `en \| ja \| zh-Hans \| zh-Hant` | `en` | 界面语言 |
| `autoplay` | `boolean` | `false` | 自动播放（自动播放时会静音） |
| 字段 | 类型 | 默认值 | 说明 |
| ------------------------- | ------------------------------------------------- | --------- | ------------------------------------------ |
| `id` | `string` | | 播放器实例唯一标识 |
| `title` | `string` | | 视频标题 |
| `cover` | `string` | | 视频封面图片 URL |
| `duration` | `number` | | 初始视频时长。在视频元数据载入后使用实际值 |
| `sources` | `sources` | | 视频播放数据。具体见下, |
| `standalone` | `boolean` | `false` | 是否启用 standalone 模式 |
| `onBeforePlay` | `function` | `void` | 视频播放之前回调函数 |
| `shouldObserveResize` | `boolean` | `false` | 是否监听窗口 resize |
| `initialObjectFit` | `fill \| \contain \| cover \| none \| scale-down` | `contain` | object-fit 参数 |
| `useMSE` | `boolean` | `false` | 是否启用 MSE |
| `locale` | `en \| ja \| zh-Hans \| zh-Hant` | `en` | 界面语言 |
| `autoplay` | `boolean` | `false` | 自动播放（自动播放时会静音） |
| `disablePictureInPicture` | `boolean` | `false` | 禁用画中画功能 |

`sources` 字段：

Expand Down
29 changes: 15 additions & 14 deletions packages/griffith/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,21 @@ 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 |
| `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` | Muted Autoplay |
| 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 |
| `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` | Muted Autoplay |
| `disablePictureInPicture` | `boolean` | `false` | Disable Picture in Picture feature |

`sources`:

Expand Down
7 changes: 7 additions & 0 deletions packages/griffith/src/components/Controller/Controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import CombinedTimeItem from './items/CombinedTimeItem'
import QualityMenuItem from './items/QualityMenuItem'
import VolumeItem from './items/VolumeItem'
import FullScreenButtonItem from './items/FullScreenButtonItem'
import PipButtonItem from './items/PipButtonItem'

import styles from './styles'

Expand All @@ -32,6 +33,7 @@ class Controller extends Component {
onVolumeChange: PropTypes.func,
onToggleFullScreen: PropTypes.func,
show: PropTypes.bool,
showPip: PropTypes.bool,
hiddenQualityMenu: PropTypes.bool,
hiddenVolumeItem: PropTypes.bool,
}
Expand All @@ -44,6 +46,7 @@ class Controller extends Component {
volume: 0.5,
buffered: 0,
isFullScreen: false,
showPip: false,
hiddenVolumeItem: false,
hiddenQualityMenu: false,
}
Expand Down Expand Up @@ -257,9 +260,12 @@ class Controller extends Component {
currentTime,
volume,
isFullScreen,
isPip,
onDragStart,
onDragEnd,
onToggleFullScreen,
onTogglePip,
showPip,
hiddenVolumeItem,
hiddenQualityMenu,
} = this.props
Expand Down Expand Up @@ -304,6 +310,7 @@ class Controller extends Component {
onChange={this.handleVolumeChange}
/>
)}
{showPip && <PipButtonItem isPip={isPip} onClick={onTogglePip} />}
<FullScreenButtonItem
isFullScreen={isFullScreen}
onClick={onToggleFullScreen}
Expand Down
35 changes: 35 additions & 0 deletions packages/griffith/src/components/Controller/items/PipButtonItem.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react'
import {css} from 'aphrodite/no-important'
import {ua} from 'griffith-utils'
import styles from '../styles'
import Icon from '../../Icon'
import * as icons from '../../Icon/icons/controller'
import Tooltip from '../../Tooltip'
import Hover from '../../Hover'

const {isMobile} = ua

const PipButtonItem = ({isPip, onClick}) => (
<Hover className={css(styles.menuContainer)}>
{isPipHovered => (
<React.Fragment>
<button className={css(styles.button)} onClick={onClick}>
<Icon icon={isPip ? icons.exitPip : icons.pip} />
</button>
<div
className={css(
styles.pipTooltip,
styles.menu,
isPipHovered && styles.menuShown
)}
>
{!isMobile && (
<Tooltip content={isPip ? 'action-exit-pip' : 'action-enter-pip'} />
)}
</div>
</React.Fragment>
)}
</Hover>
)

export default PipButtonItem
4 changes: 4 additions & 0 deletions packages/griffith/src/components/Controller/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,4 +117,8 @@ export default StyleSheet.create({
fullScreenTooltipWide: {
left: '30%',
},

pipTooltip: {
pointerEvents: 'none',
},
})
7 changes: 7 additions & 0 deletions packages/griffith/src/components/Icon/icons/controller/exitPip.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions packages/griffith/src/components/Icon/icons/controller/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
export {default as exitPip} from './exitPip'
export {default as fullscreen} from './fullscreen'
export {default as muted} from './muted'
export {default as pause} from './pause'
export {default as pip} from './pip'
export {default as play} from './play'
export {default as smallscreen} from './smallscreen'
export {default as volume} from './volume'
7 changes: 7 additions & 0 deletions packages/griffith/src/components/Icon/icons/controller/pip.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit f4cc4e5

Please sign in to comment.