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: picture in picture #136

Merged
merged 2 commits into from
Aug 20, 2020
Merged

feat: picture in picture #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
afa29c1
feat: picture in picture
kitayoshi Aug 20, 2020
d3854bd
chore: add docs
kitayoshi Aug 20, 2020
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
2 changes: 2 additions & 0 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 @@ -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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop

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
Open in desktop
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
Open in desktop

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

Loading