@times-stories/transcript-page

The transcript page for the @times-stories suite of packages

Installation

$ yarn add @times-stories/transcript-page

Usage

This component allows you to render an auto-playing (muted by default) audio player with scrolling transcript words.

You must provide both the audio source, and the transcribed words (with start time, duration, and the word itself – see below for an example). Services such as Trint can provide data in a similar format to this. You can find a full example in stories/fixtures/words.js.

The showMuteOnboarding and onMuteOnboardingClose props are left for you to determine the logic. You may choose to store a flag in localstorage so the unmute logic is not shown in the future, or you may choose to show it on the first slide. By default, the template will not close the tooltip when dismissed unless you implement onMuteOnboardingClose.

import Story from "@times-stories/story";
import Page from "@times-stories/page";
import TranscriptPage from "@times-stories/transcript-page";

const backgroundImage = {
  src: "url/to/image",
  focusPoint: {
    x: 50,
    y: 50
  }
};

const words = [
  { start: 700, duration: 15, word: "Hello" },
  { start: 715, duration: 20, word: "world" }
];

class MyStory extends React.Component {
  state = {
    showOnboarding: true
  };

  toggleOnboarding = () => {
    this.setState(({ showOnboarding }) => ({
      showOnboarding: !showOnboarding
    }));
  };

  render() {
    const { showOnboarding } = this.state;

    return (
      <Story>
        <Page>
          {props => (
            <TranscriptPage
              {...props}
              source="/path/to/audio/file.mp3"
              words={words}
              backgroundImage={{
                src: backgroundImage,
                focusPoint: {
                  x: 50,
                  y: 50
                }
              }}
              showMuteOnboarding={showOnboarding}
              onMuteOnboardingClose={this.toggleOnboarding}
            />
          )}
        </Page>
      </Story>
    );
  }
}