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