public render()

in tutorials/viewer/src/video_view.tsx [213:266]
54 lines of code
6 McCabe index (conditional complexity)

    public render() {
        return (
            <div className="charticulator__tutorial-video-view" style={{
                width: this.props.width + "px",
                height: this.props.height + "px"
            }}>
                <div className="el-video" style={{
                    width: this.props.width + "px",
                    height: (this.props.height - 34) + "px"
                }}>
                    <video
                        ref={(e) => this.videoElement = e}
                        style={{
                            maxWidth: this.props.width + "px",
                            maxHeight: (this.props.height - 34) + "px"
                        }}
                        preload="preload"
                    >
                        {this.props.source.webm ? <source src={this.props.source.webm} type="video/webm" /> : null}
                        {this.props.source.mp4 ? <source src={this.props.source.mp4} type="video/mp4" /> : null}
                    </video>
                </div>
                <div className="el-controls">
                    <button className="el-button"
                        tabIndex={0}
                        onMouseDown={(e) => e.preventDefault()}
                        title={this.state.isPlaying ? "Pause" : "Play"}
                        onClick={() => {
                            if (this.videoElement.paused) {
                                this.videoElement.play();
                            } else {
                                this.videoElement.pause();
                            }
                        }}
                    >
                        <SVGIcon url={this.state.isPlaying ? R.ICON_PAUSE : R.ICON_PLAY} />
                    </button>
                    <button className={classNames("el-button", "el-button-onoff", ["is-on", this.state.autoplay])}
                        tabIndex={0}
                        onMouseDown={(e) => e.preventDefault()}
                        title="Toggle Autoplay"
                        onClick={() => {
                            this.setState({ autoplay: !this.state.autoplay });
                        }}
                    >
                        <SVGIcon url={this.state.autoplay ? R.ICON_ON : R.ICON_OFF} />
                        Autoplay
                    </button>
                    {this.renderTimeAxis()}
                    {this.state.canPlay ? <span className="el-timestamp">{formatTimestamp(this.state.currentTime)}/{formatTimestamp(this.state.duration)}</span> : null}
                </div>
            </div>
        );
    }