in tutorials/viewer/src/video_view.tsx [97:148]
public componentDidMount() {
this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
window.addEventListener("keydown", this.onKeyDownHandler);
// Query playback time faster
this.timerQuery = setInterval(() => {
let currentTime = this.videoElement.currentTime;
if (currentTime > this.currentTime) {
this.currentTime = currentTime;
this.props.onTimeUpdate(currentTime, false);
this.setState({
currentTime: currentTime
});
}
}, 20);
this.videoElement.onloadedmetadata = () => {
this.setState({
duration: this.videoElement.duration,
canPlay: true
});
};
this.videoElement.onplay = () => {
this.setState({
isPlaying: true
});
if (this.props.onPlay) this.props.onPlay();
};
this.videoElement.onpause = () => {
this.setState({
isPlaying: false
});
if (this.props.onPause) this.props.onPause();
};
let hammer = new Hammer.Manager(this.svg);
hammer.add(new Hammer.Tap());
hammer.add(new Hammer.Pan());
hammer.on("pan tap", (e) => {
let x0 = this.svg.getBoundingClientRect().left;
let x = e.center.x - x0;
let xScale = this.getXScale();
let t = xScale.invert(x);
if (t < 0) t = 0;
if (t > xScale.domain()[1]) t = xScale.domain()[1];
this.seek(t);
this.props.onTimeUpdate(t, true);
});
this.hammer = hammer;
}