diff --git a/packages/griffith/README-zh-Hans.md b/packages/griffith/README-zh-Hans.md index 532a3229..f16d2780 100644 --- a/packages/griffith/README-zh-Hans.md +++ b/packages/griffith/README-zh-Hans.md @@ -40,6 +40,7 @@ render() | `hiddenQualityMenu` | `boolean` | `false` | 隐藏质量选择菜单（如果展示的话） | | `hiddenVolume` | `boolean` | `false` | 隐藏音量调节 | | `hiddenFullScreenButton` | `boolean` | `false` | 隐藏全屏按钮 | +| `progressDots` | `ProgressDotItem[]` | `[]` | 进度条节点信息 | `sources` 字段： @@ -57,6 +58,16 @@ interface sources { } ``` +`progressDots` 字段： + +```ts +type ProgressDots = ProgressDotItem[] + +interface ProgressDotItem { + startTime: number (second) +} +``` + ### standalone 模式 standalone 模式表示播放器是所在文档的唯一内容，这种使用场景一般是作为 iframe 的内部页面。 diff --git a/packages/griffith/README.md b/packages/griffith/README.md index 235c257a..ac438af7 100644 --- a/packages/griffith/README.md +++ b/packages/griffith/README.md @@ -41,6 +41,7 @@ render() | `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`: @@ -58,6 +59,16 @@ interface sources { } ``` +`progressDots`: + +```ts +type ProgressDots = ProgressDotItem[] + +interface ProgressDotItem { + startTime: number (second) +} +``` + ### Standalone mode The standalone mode indicates that the player is the only content of the document and is generally used as an internal page of the iframe. diff --git a/packages/griffith/src/components/Controller/Controller.js b/packages/griffith/src/components/Controller/Controller.js index 959a217a..d08f7385 100644 --- a/packages/griffith/src/components/Controller/Controller.js +++ b/packages/griffith/src/components/Controller/Controller.js @@ -34,6 +34,11 @@ class Controller extends Component { onToggleFullScreen: PropTypes.func, show: PropTypes.bool, showPip: PropTypes.bool, + progressDots: PropTypes.arrayOf( + PropTypes.shape({ + startTime: PropTypes.number.isRequired, + }) + ), hiddenPlayButton: PropTypes.bool, hiddenTimeline: PropTypes.bool, hiddenTime: PropTypes.bool, @@ -57,6 +62,7 @@ class Controller extends Component { hiddenQualityMenu: false, hiddenVolumeItem: false, hiddenFullScreenButton: false, + progressDots: [], } state = { @@ -274,6 +280,7 @@ class Controller extends Component { onToggleFullScreen, onTogglePip, showPip, + progressDots, hiddenPlayButton, hiddenTimeline, hiddenTime, @@ -303,6 +310,7 @@ class Controller extends Component { value={currentTime} total={duration} buffered={buffered} + progressDots={progressDots} onDragStart={onDragStart} onDragEnd={onDragEnd} onChange={this.onDragMove} diff --git a/packages/griffith/src/components/Player/Player.js b/packages/griffith/src/components/Player/Player.js index ebb42b4b..804fd4e2 100644 --- a/packages/griffith/src/components/Player/Player.js +++ b/packages/griffith/src/components/Player/Player.js @@ -31,6 +31,11 @@ class Player extends Component { title: PropTypes.string, cover: PropTypes.string, duration: PropTypes.number, + progressDots: PropTypes.arrayOf( + PropTypes.shape({ + startTime: PropTypes.number.isRequired, + }) + ), onEvent: PropTypes.func.isRequired, onBeforePlay: PropTypes.func.isRequired, autoplay: PropTypes.bool, @@ -383,6 +388,7 @@ class Player extends Component { useMSE, useAutoQuality, disablePictureInPicture, + progressDots, hiddenPlayButton, hiddenTimeline, hiddenTime, @@ -589,6 +595,7 @@ class Player extends Component { duration={duration} currentTime={currentTime} volume={volume} + progressDots={progressDots} buffered={bufferedTime} isFullScreen={isFullScreen} isPip={isPip} diff --git a/packages/griffith/src/components/PlayerContainer/PlayerContainer.js b/packages/griffith/src/components/PlayerContainer/PlayerContainer.js index b726dfc2..ef163110 100644 --- a/packages/griffith/src/components/PlayerContainer/PlayerContainer.js +++ b/packages/griffith/src/components/PlayerContainer/PlayerContainer.js @@ -35,6 +35,7 @@ const PlayerContainer = ({ hiddenFullScreenButton, defaultQuality, useAutoQuality = false, + progressDots = [], }) => ( @@ -62,6 +63,7 @@ const PlayerContainer = ({ hiddenQualityMenu={hiddenQualityMenu} hiddenVolumeItem={hiddenVolume} hiddenFullScreenButton={hiddenFullScreenButton} + progressDots={progressDots} standalone={standalone} cover={cover} title={title} diff --git a/packages/griffith/src/components/ProgressDot/ProgressDot.js b/packages/griffith/src/components/ProgressDot/ProgressDot.js new file mode 100644 index 00000000..9b241e84 --- /dev/null +++ b/packages/griffith/src/components/ProgressDot/ProgressDot.js @@ -0,0 +1,25 @@ +import React from 'react' +import {css} from 'aphrodite/no-important' +import formatPercent from '../../utils/formatPercent' +import styles from './styles' + +const ProgressDotItem = ({startTime, total}) => { + return ( +
+ ) +} +const ProgressDots = ({progressDots = [], total}) => { + return ( +
+ {progressDots.map((i, index) => ( + + ))} +
+ ) +} +export default ProgressDots diff --git a/packages/griffith/src/components/ProgressDot/index.js b/packages/griffith/src/components/ProgressDot/index.js new file mode 100644 index 00000000..7d7a2f8b --- /dev/null +++ b/packages/griffith/src/components/ProgressDot/index.js @@ -0,0 +1 @@ +export {default} from './ProgressDot' diff --git a/packages/griffith/src/components/ProgressDot/styles.js b/packages/griffith/src/components/ProgressDot/styles.js new file mode 100644 index 00000000..da32c80d --- /dev/null +++ b/packages/griffith/src/components/ProgressDot/styles.js @@ -0,0 +1,17 @@ +import {StyleSheet} from 'aphrodite/no-important' + +export default StyleSheet.create({ + root: { + position: 'absolute', + display: 'flex', + top: 0, + bottom: 0, + width: '100%', + }, + item: { + position: 'absolute', + backgroundColor: '#ff9607', + width: '6px', + height: '100%', + }, +}) diff --git a/packages/griffith/src/components/Slider/Slider.js b/packages/griffith/src/components/Slider/Slider.js index af680c57..acf1a064 100644 --- a/packages/griffith/src/components/Slider/Slider.js +++ b/packages/griffith/src/components/Slider/Slider.js @@ -2,6 +2,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import {css} from 'aphrodite/no-important' import clamp from 'lodash/clamp' +import ProgressDot from '../ProgressDot' import formatPercent from '../../utils/formatPercent' import KeyCode from '../../constants/KeyCode' @@ -25,8 +26,12 @@ class Slider extends Component { onDragEnd: PropTypes.func, onChange: PropTypes.func, noInteraction: PropTypes.bool, // 不可交互 + progressDots: PropTypes.arrayOf( + PropTypes.shape({ + startTime: PropTypes.number.isRequired, + }) + ), } - static defaultProps = { orientation: 'horizontal', reverse: false, @@ -34,6 +39,7 @@ class Slider extends Component { buffered: 0, total: 0, step: 1, + progressDots: [], } state = { @@ -205,7 +211,14 @@ class Slider extends Component { } render() { - const {buffered, onFocus, onBlur, noInteraction} = this.props + const { + buffered, + onFocus, + onBlur, + noInteraction, + progressDots, + total, + } = this.props const {isSlideActive} = this.state const interactionProps = noInteraction ? {} @@ -236,6 +249,9 @@ class Slider extends Component { [this.getSizeKey()]: this.getPercentage(), }} /> + {!!progressDots.length && ( + + )}
{!noInteraction && (