public renderPlayback()

in packages/dag-history-component/src/components/History/index.tsx [74:149]
70 lines of code
4 McCabe index (conditional complexity)

	public renderPlayback() {
		const {
			history,
			onStartPlayback,
			onStopPlayback,
			selectedBookmark,
			selectedBookmarkDepth,
			onSelectBookmarkDepth,
			onSelectState,
			bookmarks,
		} = this.props

		const { graph } = history
		const historyGraph = new DagGraph(graph)
		const bookmark = bookmarks[selectedBookmark]
		const slideText =
			bookmark.data.annotation || bookmark.name || 'No Slide Data'
		const numLeadInStates = bookmark.data.numLeadInStates
		const bookmarkPath = historyGraph.shortestCommitPath(bookmark.stateId)

		const {
			handleStepBack,
			handleStepForward,
			handleNextBookmark,
			handlePreviousBookmark,
			handleStepBackUnbounded,
		} = makeActions(
			selectedBookmark,
			selectedBookmarkDepth,
			history,
			bookmarks,
			onSelectBookmarkDepth,
		)

		const bookmarkHighlight =
			selectedBookmarkDepth !== undefined
				? selectedBookmarkDepth
				: bookmarkPath.length - 1

		const initialDepth = new BookmarkHelper(
			bookmarks[0],
			new DagGraph(history.graph),
		).startingDepth()

		// End the presentation if we're on the last slide
		return (
			<PlaybackContainer>
				<PlaybackPane
					text={slideText}
					depth={bookmarks.length}
					highlight={selectedBookmark}
					bookmarkDepth={bookmarkPath.length}
					bookmarkHighlight={bookmarkHighlight}
					bookmarkNumLeadInStates={numLeadInStates}
					onDiscoveryTrailIndexClicked={(selectedIndex: number) => {
						const target = bookmarkPath[selectedIndex]
						onSelectBookmarkDepth({
							target,
							depth: selectedIndex,
							state: target,
						})
						onSelectState(target)
					}}
				/>
				<Transport
					playing={true}
					onStepBack={handleStepBackUnbounded}
					onStepForward={handleStepForward}
					onBack={handleStepBack}
					onForward={handleStepForward}
					onPlay={() => onStartPlayback({ initialDepth })}
					onStop={onStopPlayback}
				/>
			</PlaybackContainer>
		)
	}