public componentDidMount()

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;
    }