public render()

in tutorials/viewer/src/tutorial_view.tsx [134:189]


    public render() {
        const { tutorial } = this.props;
        return (
            <div
                className="charticulator__tutorial-view"
                style={{ height: this.props.height + "px" }}
            >
                <div
                    className="charticulator__tutorial-view-video"
                    style={{ height: this.props.height + "px" }}
                >
                    <VideoView
                        ref={(e) => this.videoView = e}
                        source={tutorial.videoSource}
                        width={this.props.width - 440}
                        height={(this.props.height - 40)}
                        renderTimeAxis={this.renderTimeAxis.bind(this)}
                        onTimeUpdate={(timestamp, isUserInitiated) => {
                            this.onTimestampUpdated(timestamp, isUserInitiated);
                        }}
                        onPlay={() => {
                            let index = this.getCaptionAtTimestamp(this.videoView.time);
                            trackEvent("play-video", {
                                type: "tutorial",
                                name: tutorial.name || "Unknown",
                                url: tutorial.videoSource.mp4 || tutorial.videoSource.webm,
                                index,
                            });
                            this.setState({
                                currentCaptionIndex: index,
                                keepCurrentInView: true
                            });
                        }}
                    />
                </div>
                <div
                    className="charticulator__tutorial-view-captions"
                    style={{ height: this.props.height + "px" }}
                    ref={(e) => this.captions = e}
                    onScroll={() => {
                        this.setState({ keepCurrentInView: false });
                    }}
                >
                    {tutorial.captions.map((caption, index) => (
                        <CaptionView
                            key={index}
                            caption={caption}
                            active={this.state.currentCaptionIndex == index}
                            onClick={() => this.onCaptionClick(caption, index)}
                            ref={(e) => this.captionMap[index] = e}
                        />
                    ))}
                </div>
            </div>
        );
    }