fix: fix the position of the node & add progressDots in minimalTimeli…

…ne (#157)
zhihu · Apr 20, 2021 · afa2ae8 · afa2ae8
1 parent ce34d34
commit afa2ae8
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/packages/griffith/src/components/Player/Player.js b/packages/griffith/src/components/Player/Player.js
@@ -569,6 +569,7 @@ class Player extends Component {
                 )}
               >
                 <MinimalTimeline
+                  progressDots={progressDots}
                   buffered={bufferedTime}
                   duration={duration}
                   currentTime={currentTime}

diff --git a/packages/griffith/src/components/ProgressDot/styles.js b/packages/griffith/src/components/ProgressDot/styles.js
@@ -13,5 +13,6 @@ export default StyleSheet.create({
     backgroundColor: '#ff9607',
     width: '6px',
     height: '100%',
+    transform: 'translate(-50%)',
   },
 })
diff --git a/packages/griffith/src/components/Timeline/MinimalTimeline.js b/packages/griffith/src/components/Timeline/MinimalTimeline.js
@@ -11,25 +11,32 @@ class MinimalTimeline extends Component {
     currentTime: PropTypes.number.isRequired,
     buffered: PropTypes.number.isRequired,
     show: PropTypes.bool,
+    progressDots: PropTypes.arrayOf(
+      PropTypes.shape({
+        startTime: PropTypes.number.isRequired,
+      })
+    ),
   }
 
   static defaultProps = {
     duration: 0,
     currentTime: 0,
     buffered: 0,
+    progressDots: [],
   }
 
   shouldComponentUpdate(nextProps) {
     return this.props.show || nextProps.show
   }
 
   render() {
-    const {duration, currentTime, buffered} = this.props
+    const {duration, currentTime, buffered, progressDots} = this.props
     return (
       <Slider
         value={currentTime}
         total={duration}
         buffered={buffered}
+        progressDots={progressDots}
         styles={[slider, minimal]}
         noInteraction
       />