diff --git a/src/components/RouteSeeker.js b/src/components/RouteSeeker.js index 49f99ec..e3dbfcd 100644 --- a/src/components/RouteSeeker.js +++ b/src/components/RouteSeeker.js @@ -16,20 +16,24 @@ export default class RouteSeeker extends Component { onPlay: PropTypes.func, playing: PropTypes.bool, segmentProgress: PropTypes.func, + ratioTime: PropTypes.func, nearestFrameTime: PropTypes.number }; static hiddenMarkerStyle = StyleSheet.create({marker: {display: 'none', left: 0}}); static zeroSeekedBarStyle = StyleSheet.create({seekedBar: {width: 0}}); + static hiddenTooltipStyle = StyleSheet.create({tooltip: {display: 'none', left: 0}}); constructor(props) { super(props); this.state = { seekedBarStyle: RouteSeeker.zeroSeekedBarStyle, markerStyle: RouteSeeker.hiddenMarkerStyle, + tooltipStyle: RouteSeeker.hiddenTooltipStyle, ratio: 0, + tooltipTime: '0:00', isPlaying: false, - isDragging: false + isDragging: false, }; this.onMouseMove = this.onMouseMove.bind(this); @@ -92,12 +96,12 @@ export default class RouteSeeker extends Component { left: `calc(${markerOffsetPct + '%'} - ${markerWidth / 2}px)` } }); + const ratio = Math.max(0, markerOffsetPct / 100); if(this.state.isDragging) { - const ratio = Math.max(0, markerOffsetPct / 100); this.updateSeekedBar(ratio); this.updateDraggingSeek(ratio); } - this.setState({markerStyle}); + this.setState({markerStyle, tooltipTime: this.props.ratioTime(ratio)}); } onMouseLeave(e) { @@ -165,8 +169,9 @@ export default class RouteSeeker extends Component { } } + render() { - const {seekedBarStyle, markerStyle} = this.state; + const {seekedBarStyle, markerStyle, tooltipStyle} = this.state; return (
this.progressBar = ref}> +
+ {this.state.tooltipTime} +
e.stopPropagation()}>
+ playing={this.props.playing} + ratioTime={this.ratioTime} />
); } }