renderPlayback()

in src/components/History/index.tsx [137:199]

• 57 lines of code
• 4 McCabe index (conditional complexity)

  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 Bookmark(bookmarks[0], new DagGraph(history.graph)).startingDepth();

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