feat: add node information on the progress bar (#154)

Co-authored-by: lisuhan <[email protected]>
zhihu · Apr 19, 2021 · 48a2f95 · 48a2f95
1 parent 79543bc
commit 48a2f95
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 2 deletions.
diff --git a/packages/griffith/README-zh-Hans.md b/packages/griffith/README-zh-Hans.md
@@ -40,6 +40,7 @@ render(<Player {...props} />)
 | `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
@@ -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                                                  |
+| `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
@@ -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
@@ -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
@@ -35,6 +35,7 @@ const PlayerContainer = ({
   hiddenFullScreenButton,
   defaultQuality,
   useAutoQuality = false,
+  progressDots = [],
 }) => (
   <ObjectFitProvider initialObjectFit={initialObjectFit}>
     <PositionProvider shouldObserveResize={shouldObserveResize}>
@@ -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
@@ -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 ProgressDots = ({progressDots = [], total}) => {
+  return (
+    <div className={css(styles.root)}>
+      {progressDots.map((i, index) => (
+        <ProgressDotItem key={index} startTime={i.startTime} total={total} />
+      ))}
+    </div>
+  )
+}
+export default ProgressDots
diff --git a/packages/griffith/src/components/ProgressDot/index.js 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
@@ -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
@@ -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,15 +26,20 @@ 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,
     value: 0,
     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 && (
+              <ProgressDot progressDots={progressDots} total={total} />
+            )}
           </div>
           {!noInteraction && (
             <div

diff --git a/...ges/griffith/src/components/Timeline/__tests__/__snapshots__/MinimalTimeline.spec.js.snap b/...ges/griffith/src/components/Timeline/__tests__/__snapshots__/MinimalTimeline.spec.js.snap
@@ -5,6 +5,7 @@ exports[`MinimalTimeline get MinimalTimeline component 1`] = `
   buffered={0}
   noInteraction={true}
   orientation="horizontal"
+  progressDots={Array []}
   reverse={false}
   step={1}
   styles={
@@ -96,6 +97,7 @@ exports[`MinimalTimeline get MinimalTimeline component 2`] = `
   buffered={0}
   noInteraction={true}
   orientation="horizontal"
+  progressDots={Array []}
   reverse={false}
   step={1}
   styles={

diff --git a/packages/griffith/src/components/Timeline/__tests__/__snapshots__/Timeline.spec.js.snap b/packages/griffith/src/components/Timeline/__tests__/__snapshots__/Timeline.spec.js.snap
@@ -15,6 +15,7 @@ exports[`Timeline get Timeline component 1`] = `
     onFocus={[Function]}
     onSeek={[MockFunction]}
     orientation="horizontal"
+    progressDots={Array []}
     reverse={false}
     step={1}
     styles={