TranscriptTextHighlighter Component

TranscriptTextHighlighter.js

import React, { PropTypes } from 'react';
import cx from 'classnames';

class TranscriptTextHighlighter extends React.Component {

  constructor() {
    super();
    this.state = {
      activeIndex: 3,
      transcriptText: [
        { speaker: 'SPEAKER 1',
          content: [
            ['caption text 1', 'caption text 2', 'caption text 3'],
            ['caption text 4', 'caption text 5', 'caption text 6'],
          ],
        },
        { speaker: 'SPEAKER 2',
          content: [
            ['caption text 7', 'caption text 8', 'caption text 9'],
            ['caption text 10', 'caption text 11', 'caption text 12'],
          ],
        },
      ],
    };
  }

  render() {
    const { transcriptText } = this.state;
    
    // Create captions for each sentence of a paragraph
    let captionIndex = 0;
    const getCaption = (caption, i) => {
      captionIndex += 1;
      return (<span key={i} className={cx('caption', { activeCaption: (captionIndex === this.state.activeIndex) })}>
        {caption}
      </span>);
    };

    // Create paragraphs of a single speaker
    const getParagraph = (paragraph, i) => <p key={i}>{paragraph.map(getCaption)}</p>;

    // Create speaker chunks for each time someone speaks
    const getSpeakerChunk = (speakerChunk, i) => (
      <div key={i} classname="speakerChunk">
        <span className="speaker">{speakerChunk.speaker}: </span>
        {speakerChunk.content.map(getParagraph)}
      </div>
    );
    
    // Tie things all together for ourput
    const htmlTranscript = transcriptText.map(getSpeakerChunk);

    return (
      <div>{htmlTranscript}</div>
    );
  }
}

export default TranscriptTextHighlighter;