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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import React, { Component } from 'react'
import { connect } from 'react-redux'
import actions from 'app/actions'
import { VIDEO_SCRUBBER_HIDE_DELAY } from 'app/constants'
import { clamp, timestamp } from 'app/utils'
import { PlayButton, VolumeControl } from 'app/views/viewer/nav/viewer.icons'
class VideoScrubber extends Component {
state = {
hovering: false,
showing: true,
}
constructor(props) {
super(props)
this.scrubberRef = React.createRef()
this.handleMouseDown = this.handleMouseDown.bind(this)
this.handleMouseMove = this.handleMouseMove.bind(this)
this.handleMouseUp = this.handleMouseUp.bind(this)
this.handleMouseEnter = this.handleMouseEnter.bind(this)
this.handleMouseLeave = this.handleMouseLeave.bind(this)
this.hide = this.hide.bind(this)
}
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
window.addEventListener('mouseup', this.handleMouseUp)
this.show()
}
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
window.removeEventListener('mouseup', this.handleMouseUp)
clearTimeout(this.timeout)
}
show() {
clearTimeout(this.timeout)
this.timeout = setTimeout(this.hide, VIDEO_SCRUBBER_HIDE_DELAY)
if (!this.showing) {
this.setState({ showing: true })
}
}
hide() {
clearTimeout(this.timeout)
this.setState({ showing: false })
}
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
})
}
handleMouseDown(e) {
e.stopPropagation()
this.scrub(e.pageX, true)
}
handleMouseMove(e) {
e.stopPropagation()
this.show()
if (!this.props.timing.scrubbing) return
this.scrub(e.pageX, true)
}
handleMouseUp(e) {
e.stopPropagation()
this.props.onScrub({ scrubbing: false })
}
handleMouseEnter() {
this.setState({ hovering: true })
}
handleMouseLeave() {
this.setState({ hovering: false })
}
render() {
const { playing, volume, timing } = this.props
const { hovering, showing } = this.state
const timestampText = timestamp(clamp(timing.seconds, 0, timing.duration))
const className = (hovering || showing) ? 'video-scrubber show' : 'video-scrubber'
return (
<div className={className}>
<div className='start-controls'>
<PlayButton playing={playing} />
</div>
<div
className='scrub-bar-container'
onMouseDown={this.handleMouseDown}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
ref={this.scrubberRef}
>
<div className='scrub-bar' />
<div
className='scrub-dot'
style={{ left: (100 * timing.percent) + "%" }}
/>
<div
className='scrub-timestamp'
style={{ left: (100 * (timing.percent)) + "%" }}
>
{timestampText}
</div>
</div>
<div className='end-controls'>
<div className='playerTime'>
{timestampText}
</div>
<VolumeControl volume={volume} />
</div>
</div>
)
}
}
const mapStateToProps = state => ({
playing: state.audio.playing,
volume: state.audio.volume,
})
export default connect(mapStateToProps)(VideoScrubber)
|
