blob: 01911aff2d7a965af6c5e00a6f4ca68408864955 (
plain)
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
|
import React from 'react'
import PlayButtonContainer from '../../../containers/app/timeline/PlayButtonContainer'
import { convertTickToPercentage } from '../../../util/timeline'
class TimelineControlsComponent extends React.Component {
onTimelineClick(e) {
const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth
const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1))
this.props.goToTick(tick)
}
render() {
return (
<div className="timeline-controls">
<PlayButtonContainer/>
<div
className="timeline"
ref={timeline => (this.timeline = timeline)}
onClick={this.onTimelineClick.bind(this)}
>
<div
className="time-marker"
style={{
left: convertTickToPercentage(
this.props.currentTick,
this.props.lastSimulatedTick,
),
}}
/>
</div>
</div>
)
}
}
export default TimelineControlsComponent
|
