Skip to Content

Timeline

<Clover.Timeline /><clover-timeline>41 kB loaded by a page with it alone to first view, gzipped87 kB loaded by a page with it alone to first view, styles included, gzipped

Sound, as Presentation 4 shapes it: a Timeline, played as a music app plays it, its artwork beside its title, its captions as lyrics and its chapters as tracks.

<div style={{ height:  }}>
  <Clover.Timeline iiifContent={url} />
</div>
<div style="height: px">
  <clover-timeline
    iiif-content="https://clover.iiif.library.northwestern.edu/mocks/hindenburg/manifest.json">
  </clover-timeline>
</div>

API reference

Plays the Presentation 4 Timeline you hand it, or loads one itself (iiifContentiiif-content: a Manifest gives its first Timeline). Inside a Root<clover-root>, given nothing, it plays the Root’s view when that is a Timeline; Body<clover-body> draws a Timeline view with it. A Presentation 3 Canvas of sound alone is a Timeline once upgraded, so the Viewer plays one with it too. It fills its parent, so give the parent a height.

It plays through Canvas, with its transport, captions, chapters and annotations on the recording’s time, as a player: the Timeline’s label is its title and its Manifest’s is under it; its captions and annotations show as lyrics; and where it has room, its chapters are listed as tracks under it. Its artwork is the Timeline’s placeholder Canvas until it first plays, then its accompanying Canvas, each standing in for the other, else its thumbnail, at its own shape. The player’s ground takes the artwork’s colors.

PropTypeDefaultDescription
timelineobjectThe Root’s viewA Presentation 4 Timeline to play; toPresentation4() upgrades older ones.
iiifContentstring | object—A Timeline to load and play, or a Manifest’s first: URL or JSON.
labellanguage map or stringThe Timeline’s labelThe view’s accessible name, and the player’s title.
partOflanguage map or stringThe Manifest’s labelWhat it is part of, under its title.
languagestringThe reader’s, or the Root’sThe language to read labels, captions’ names and annotations in.
controlsboolean | { annotations, information }trueThe round controls over the Body; the transport stays.
placeholderbooleantrueShow the Timeline’s placeholderContainer as its artwork until it plays.
annotations{ annotation, targetIndex, pageLabel?, pageId? }[]The Root’sAnnotations on its time, each a cue while its stretch plays.
chapters{ id?, label, lang?, start, end? }[]The Ranges, in a RootChapters, on its seek bar, in a menu, and as tracks where there is room.
captionstring | null—The caption file (id) to show while captions are on.
onCaptionChange(caption: { id, language? } | null) => void—The reader chose a caption file, or Off (null).
onMediaElement(element: HTMLVideoElement | null) => void—The recording’s element, for a transcript of your own.
onEnded() => void—Playback reached the end: a cue to move on.
optionsobject—Canvas’s: request and hideDelay among them.
classNamestring—Added to clover-canvas clover-timeline, on its figure.
childrenReactNode—Your own controls, kept over the Body.

<clover-timeline>

A IIIF Presentation 4 Timeline (sound), played through Canvas, with its transport, captions, chapters and annotations on its time, and its accompanying or placeholder Canvas while it plays. Alone, it plays what it is given; inside a clover-root, given nothing, the root's view when that is a Timeline. As tall as --clover-body-height (60vh) or its own style.

NameTypeDefaultDescription
iiif-contentstring—A Timeline, or a Manifest (its first Timeline), by URL, in any Presentation version.
labelstring—The Body's name. A Timeline names it by its own label.
languagestring—The language to read IIIF text in.
controlsbooleantrue"false" leaves out the controls over the Body; the transport stays.
placeholderbooleantrue"false" opens a Timeline straight away, past its placeholderContainer.
.iiifContentstring | Record<string, unknown> | null—As a property: What to load and play, as a URL or a IIIF resource.
.timelineRecord<string, unknown> | null—A Presentation 4 Timeline to play.
.annotationsRecord<string, unknown>[] | null—Annotations on its time, each shown as a cue while its stretch plays, as Canvas's annotations property takes them.
.optionsRecord<string, unknown> | null—As Canvas's options: request (credentials, headers) and hideDelay among them.
.controlsboolean | { information?: boolean; annotations?: boolean; [option: string]: unknown } | null—As a property: Which of the Body's controls it shows, as Canvas's controls takes it, in place of the attribute.
clover-caption-change{ caption: { id: string; language?: string } | null }—An event. The reader chose a caption file in the Body's Captions menu, or Off (null).
clover-endedRecord<string, never>—An event. Playback reached the end.

Examples

In a Viewer

The Viewer plays a Manifest’s Timelines with it, as it shows its Canvases with Canvas.

<Viewer iiifContent="https://clover.iiif.library.northwestern.edu/mocks/hindenburg/manifest.json" />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/hindenburg/manifest.json"></clover-viewer>

Its artwork

A Timeline’s accompanyingContainer is its artwork while it plays, here the box the broadcast’s reel came in, at its own shape; its ground takes the artwork’s colors.

<Clover.Timeline iiifContent="https://clover.iiif.library.northwestern.edu/mocks/hindenburg/manifest.json" />
<clover-timeline
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/hindenburg/manifest.json"></clover-timeline>

Formats

Timeline plays what a browser’s audio and video elements play: MP4 (AAC), MP3, Ogg and WebM, and HLS streams through hls.js, which loads only for one. The format a recording declares is passed to the browser as it is. A body of Presentation 4’s type Audio plays, and so does Presentation 3’s Sound. A recording in several files, painted one after another on its time, plays as one, its time, seek bar and chapters across them all, as 0064 ’s opera in two acts does.

The IIIF Cookbook’s recipes for sound play with it: 0002  in either version, 0014’s accompanying image, 0103’s annotations and 0434’s choice of formats.

Accessibility

Timeline’s transport is the one Canvas plays video with. Every button and slider is named and has its key in its popover, and the controls stay on screen while keyboard focus is in them. With the view focused, Space or K plays and pauses, J and L skip ten seconds back or forward, and M mutes.

Captions come from the Timeline’s WebVTT files, each in its own language, and show in the player as lyrics; its plain-text transcript shows in the Panel’s Transcript. The artwork is described by its Canvas’s label, and every word and control on the player’s ground keeps its contrast whatever the artwork’s colors. The chapters listed as tracks say which is playing in words and weight, not color alone. A recording never starts by itself: it plays when the reader presses Play, or follows a link or the Manifest’s auto-advance.

Size

A page with a Timeline alone loads the figure beside the title to its first view, playing MP4 audio; hls.js, for a stream, loads only when one plays. In a Viewer it adds nothing up front: Body<clover-body> loads Timeline the first time a Timeline shows, and the Default template stays

94 kB to first view.

What’s next

  • The player made without Canvas’s 2D renderer at all, which it no longer draws with.
  • Timelines painted into Scenes, and Presentation 4’s timeMode.