@times-stories/transcript-page

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

Installation

``bash
$ 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.

`js
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 (


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


);
}
}
``