Transcript Component

Renders transcript data related to the A/V content. This component is implemented in a different way than the other 2 components, so that it can be used independent of the IIIFPlayer component. In other words, this is not connected to the central state management system.

Props Explained

Since this component is disconnected from the central state management system, it requires a couple of props. They are;

• playerID (String): id of the player used with the Transcript component. When using with IIIFPlayer, playerID='iiif-media-player'. For a different player pass the ID of that particular element.

• transcripts (Array): a list of JSON objects consisting the following properties for each canvas. This accommodates IIIF manifests with multiple canvases.

  • canvasId (Number): index of the Canvas in the Manifest. This starts from 0.
  • items (Array): a list of transcript files for the relevant Canvases. Each item has a,
    • title (String): the name of the transcript file to appear on the select menu. This is used as the filename when downloading the file
    • url (URL): url of the transcript file.

This component accepts and display the following file types as transcripts:

1. IIIF Manifest: with transcript data presented as an annotation with supplementing motivation. This can be in the following formats:
   • list of annotations for each transcript fragment
   • annotation pointing to an external transcript, which can be one of the following file types or a .json file with list of annotations
2. Microsoft Word Document
3. Plain text file
4. WebVTT file

Using with machine generated transcripts

Transcript component can identify machine generated transcripts and display a message when it is indicated in the data passed into the component.

• With a IIIF Manifest: the component looks for (machine generated) suffix to the label of the supplementing Annotation to identify the transcript as machine generated.
• With individual transcript files: when the transcripts are listed in the props adding (machine generated) to the end of the title will indicate the transcript component the file is machine generated.

In both cases, the component strips the (machine generated) text from the label/title before displaying it on the page as below.

Example code for the latter use-case;

<Transcript
  playerID="iiif-media-player"
  transcripts={[
    {
      canvasId: 0,
      items: [
        {
          title: 'Text Transcript (machine generated)',
          url: 'http://example.com/sample.vtt',
        }
     ]
    }
  ]}
/>

How to use the Transcript component?

This component can be used,

1. With the IIIFPlayer (from this component library);

import React from 'react';
import { IIIFPlayer, MediaPlayer, Transcript } from "@samvera/ramp";
import 'video.js/dist/video-js.css';
import "@samvera/ramp/dist/ramp.css";

const App = () => {
  // Get your manifest from somewhere
  const manifestUrl = "https://some-manifest-url-here.json";

  return (
    <IIIFPlayer manifestUrl={manifestUrl}>
      <MediaPlayer />
      <Transcript
        playerID="iiif-media-player"
        transcripts={[
          {
            canvasId: 0,
            items: [
              {
                title: 'WebVTT Transcript',
                url: 'http://example.com/sample.vtt',
              }
            ]
          }
        ]}
      />
    </IIIFPlayer>
  );
}

export default App;

2. With a different player;

import React from 'react';
import { Transcript } from "@samvera/ramp";
import "@samvera/ramp/dist/ramp.css";

const App = () => {
  return (
    <Transcript playerID={playerID} transcripts={[
      {
        canvasId: 0,
        items: [
          {
            title: 'Title',
            url: 'http://example.com/transcript.json'
          }
        ]
      }
    ]}/>
  );
}
export default App;

NOTE:

When using with an external player, the player element should have,

• an id attribute, which is passed into playerID prop in the component
• a dataset attribute, called data-canvasindex which identifies the current Canvas rendered on the player. There should be a mechanism to update this value when the player switches between the canvases. This is how the Transcript component keeps track of the current canvas, and renders the relevant set of transcript data.