Transcript from the Manifest

This demo passes annotations="auto" to Root. The host writes no VTT-parsing code: the player reads the transcript out of the IIIF manifest itself.

"auto" looks first for embedded TextualBody annotations on the canvas (the AVAnnotate shape). When there are none — as in this IIIF Cookbook manifest — it fetches the canvas's external WebVTT supplementing track, reduces each cue to plain text, and builds the transcript from it. The status strip above the transcript reads transcriptStatus (loading → ready) from Root's children snippet. Because the transcript panel now shows the same text, Viewer hides the native caption track once per canvas so it isn't displayed twice.

<script>
  import { IIIFPlayer } from '@umd-mith/iiif-timed-transcript';
</script>

<IIIFPlayer.Root {manifestUrl} annotations="auto">
  {#snippet children({ player })}
    <IIIFPlayer.Viewer />
    <IIIFPlayer.Controls>...</IIIFPlayer.Controls>

    <!-- "idle" | "loading" | "ready" | "error" -->
    <p>{player.transcriptStatus} · {player.annotations.length} segments</p>

    <!-- No annotations prop: Transcript reads them from Root -->
    <IIIFPlayer.Transcript>
      <IIIFPlayer.TranscriptSearch />
      <IIIFPlayer.TranscriptSegments />
    </IIIFPlayer.Transcript>
  {/snippet}
</IIIFPlayer.Root>