1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
import React, { Component } from 'react'
import { connect } from 'react-redux'
import actions from 'app/actions'
import { clamp, timestamp } from 'app/utils'
import { PlayButton, VolumeControl } from 'app/views/viewer/nav/viewer.icons'
class VideoScrubber extends Component {
constructor(props) {
super(props)
this.scrubberRef = React.createRef()
this.handleScrubDotMouseDown = this.handleScrubDotMouseDown.bind(this)
this.handleScrubDotMouseMove = this.handleScrubDotMouseMove.bind(this)
this.handleScrubDotMouseUp = this.handleScrubDotMouseUp.bind(this)
}
componentDidMount() {
window.addEventListener('mousemove', this.handleScrubDotMouseMove)
window.addEventListener('mouseup', this.handleScrubDotMouseUp)
}
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleScrubDotMouseMove)
window.removeEventListener('mouseup', this.handleScrubDotMouseUp)
}
scrub(x, scrubbing) {
const { timing, start_ts, onScrub } = this.props
const bounds = this.scrubberRef.current.getBoundingClientRect()
const percent = clamp((x - bounds.left) / bounds.width, 0, 1)
const seconds = percent * timing.duration
actions.audio.seek(start_ts + seconds)
onScrub({
seek: seconds,
percent, seconds, scrubbing
})
}
handleScrubDotMouseDown(e) {
e.stopPropagation()
this.scrub(e.pageX, true)
}
handleScrubDotMouseMove(e) {
e.stopPropagation()
if (!this.props.timing.scrubbing) return
this.scrub(e.pageX, true)
}
handleScrubDotMouseUp(e) {
e.stopPropagation()
this.props.onScrub({ scrubbing: false })
}
render() {
const { playing, volume, timing } = this.props
return (
<div className='video-scrubber'>
<div className='start-controls'>
<PlayButton playing={playing} />
</div>
<div
className='scrub-bar-container'
onMouseDown={this.handleScrubDotMouseDown}
ref={this.scrubberRef}
>
<div className='scrub-bar' />
<div
className='scrub-dot'
style={{ left: (100 * timing.percent) + "%" }}
/>
</div>
<div className='end-controls'>
<div className='playerTime'>
{timestamp(clamp(timing.seconds, 0, timing.duration))}
</div>
<VolumeControl volume={volume} />
</div>
</div>
)
}
}
const mapStateToProps = state => ({
playing: state.audio.playing,
volume: state.audio.volume,
})
export default connect(mapStateToProps)(VideoScrubber)
|
