MarkersDisplay Component

This component renders annotations in a Canvas with highlighting motivation with time information. It displays these Annotation information in a tabular format outside of the Canvas, while displaying a marker on the time-rail of the player for each Annotation. An example Annotation compatible with the componenet looks as follows;

  {
    "type": "Annotation",
    "motivation": "highlighting",
    "body": {
      "type": "TextualBody",
      "format": "text/html",
      "value": "Marker"
    },
    "id": "http://example.com/manifest/canvas/1/marker/1",
    "target": "http://example.com/manifest/canvas/1#t=60.001"
  }

MarkersDisplay component reads manifest data from central state management provided by Contexts. Thus it should be wrapped by context providers using IIIFPlayer which is the component in Ramp providing these out of the box.

---

Props Explained

There are 2 props the component accepts to adjust the display according to the user preference;

• showHeading (Boolean): this has a default value of true and is not required. This enables to hide the Details heading on top of the component allowing to customize the user interface.

• headingText (String): this has a default value of Markers and is not required. This value is used in the heading of the component, and enables to customize the text.

---

How to use the MarkersDisplay component?

Using with the IIIFPlayer:

import {
  IIIFPlayer,
  MarkersDisplay
} from '@samvera/ramp';
import 'video.js/dist/video-js.css';
import '@samvera/ramp/dist/ramp.css';

<IIIFPlayer manifestUrl=manifestUrl manifest=manifest>
    <MarkersDisplay />
</IIIFPlayer>

This will display the MarkersDisplay component with the default props;

---

Future Work:

• Display actions column only when there is Annotation service information in the given Manifest
• Implement Annotation service workflow in Ramp