feat: add node information on the progress bar

packages/griffith/README-zh-Hans.md

@@ -40,6 +40,7 @@ render(<Player {...props} />)
 | `hiddenQualityMenu`       | `boolean`                                         | `false`   | 隐藏质量选择菜单（如果展示的话）           |
 | `hiddenVolume`            | `boolean`                                         | `false`   | 隐藏音量调节                               |
 | `hiddenFullScreenButton`  | `boolean`                                         | `false`   | 隐藏全屏按钮                               |
+| `progressDot`             | `ProgressDotItem[]`                               |           | 进度条节点信息                             |
 
 `sources` 字段：
 
@@ -57,6 +58,16 @@ interface sources {
 }
 ```
 
+`progressDot` 字段：
+
+```ts
+type ProgressDot = ProgressDotItem[]
+
+interface ProgressDotItem {
+  startTime: number (second)
+}
+```
+
 ### standalone 模式
 
 standalone 模式表示播放器是所在文档的唯一内容，这种使用场景一般是作为 iframe 的内部页面。

packages/griffith/README.md

@@ -41,6 +41,7 @@ render(<Player {...props} />)
 | `hiddenQualityMenu`       | `boolean`                                        | `false`   | Hide quality menu (if it is shown)                                       |
 | `hiddenVolume`            | `boolean`                                        | `false`   | Hide volume                                                              |
 | `hiddenFullScreenButton`  | `boolean`                                        | `false`   | Hide full screen button                                                  |
+| `progressDot`             | `ProgressDotItem[]`                              |           | Node information on the progress bar                                     |
 
 `sources`:
 
@@ -58,6 +59,16 @@ interface sources {
 }
 ```
 
+`progressDot`:
+
+```ts
+type ProgressDot = 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.

packages/griffith/src/components/Controller/Controller.js

@@ -34,6 +34,11 @@ class Controller extends Component {
     onToggleFullScreen: PropTypes.func,
     show: PropTypes.bool,
     showPip: PropTypes.bool,
+    progressDot: PropTypes.arrayOf(
+      PropTypes.shape({
+        startTime: PropTypes.number.isRequired,
+      })
+    ),
     hiddenPlayButton: PropTypes.bool,
     hiddenTimeline: PropTypes.bool,
     hiddenTime: PropTypes.bool,
@@ -274,6 +279,7 @@ class Controller extends Component {
       onToggleFullScreen,
       onTogglePip,
       showPip,
+      progressDot,
       hiddenPlayButton,
       hiddenTimeline,
       hiddenTime,
@@ -303,6 +309,7 @@ class Controller extends Component {
             value={currentTime}
             total={duration}
             buffered={buffered}
+            progressDot={progressDot}
             onDragStart={onDragStart}
             onDragEnd={onDragEnd}
             onChange={this.onDragMove}

packages/griffith/src/components/Player/Player.js

@@ -31,6 +31,11 @@ class Player extends Component {
     title: PropTypes.string,
     cover: PropTypes.string,
     duration: PropTypes.number,
+    progressDot: 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,
+      progressDot,
       hiddenPlayButton,
       hiddenTimeline,
       hiddenTime,
@@ -589,6 +595,7 @@ class Player extends Component {
                   duration={duration}
                   currentTime={currentTime}
                   volume={volume}
+                  progressDot={progressDot}
                   buffered={bufferedTime}
                   isFullScreen={isFullScreen}
                   isPip={isPip}

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 (
+    <div
+      className={css(styles.item)}
+      style={{
+        left: formatPercent(startTime, total),
+      }}
+    />
+  )
+}
+const ProgressDot = ({progressDot = [], total}) => {
+  return (
+    <div className={css(styles.root)}>
+      {progressDot.map((i, index) => (
+        <ProgressDotItem key={index} startTime={i.startTime} total={total} />
+      ))}
+    </div>
+  )
+}
+export default ProgressDot

packages/griffith/src/components/ProgressDot/index.js

@@ -0,0 +1 @@
+export {default} from './ProgressDot'

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%',
+  },
+})

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,6 +26,11 @@ class Slider extends Component {
     onDragEnd: PropTypes.func,
     onChange: PropTypes.func,
     noInteraction: PropTypes.bool, // 不可交互
+    progressDot: PropTypes.arrayOf(
+      PropTypes.shape({
+        startTime: PropTypes.number.isRequired,
+      })
+    ),
   }
 
   static defaultProps = {
@@ -205,7 +211,7 @@ class Slider extends Component {
   }
 
   render() {
-    const {buffered, onFocus, onBlur, noInteraction} = this.props
+    const {buffered, onFocus, onBlur, noInteraction, progressDot} = this.props
     const {isSlideActive} = this.state
     const interactionProps = noInteraction
       ? {}
@@ -236,6 +242,9 @@ class Slider extends Component {
                 [this.getSizeKey()]: this.getPercentage(),
               }}
             />
+            {!!progressDot && (
+              <ProgressDot progressDot={progressDot} total={this.props.total} />
+            )}
           </div>
           {!noInteraction && (
             <div