Annotations Component - samvera-labs/ramp GitHub Wiki

This component renders annotations in a given Canvas, and this component was historically named MarkersDisplay. In @samvera/[email protected] it got renamed to Annotations as support was added to display more annotation motivations. Historically this component supported only the display of annotation with highlighting motivation. As of @samvera/[email protected] it supports the display of annotations with commenting and supplementing motivations. Annotations 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.

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.

• displayMotivations (Array): accepts an Array including a list of supported motivations for Annotation type resources in IIIF Presentation 3.0 spec, which has a default value of [] in which case will display annotations with motivations 'supplementing'/'commenting'/'tagging' related to the Canvas and is not required. For playlist manifests, Ramp sets this value to ['highlighting'] overwriting any given set of values as this component is intented to markers in playlists. Introduced in @samvera/[email protected]

• showMoreSettings (Object): accepts a JSON object value, which has a default value of { enableShowMore: false, textLineLimit: 6 } and is not required. When configured, it truncates lengthy texts in annotations only displaying given textLineLimit number of lines along with a Show more button, which user can click to show/hide the rest of the annotation text. If the prop is initialized partially, Ramp applies default prop values to the rest of properties. Since the words are not getting broken in the middle in the display, sometimes the lines shown could be +/- 1 of the given textLineLimit value Introduced in @samvera/[email protected]

These annotations are displayed in a tabular format outside of the Canvas, while displaying a marker (caret) on the time-rail of the player for each Annotation at their respective timestamp. These annotations are parsed in Ramp as time-point annotations, thus always expecting a single time value in the annotation information in the Manifest.

An example Annotation compatible with the component 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"
  }

Other TextualBody annotations with motivations commenting, supplementing, and tagging are displayed in this implementation. These annotations are displayed similar to transcripts, in a list view with timestamp information. These annotations can either be time-range or time-point annotations, i.e. the annotation can have a start and an end time or a single time respectively in Annotation's target in the Manifest.

An example Annotation compatible would like,

  {
    "type": "Annotation",
    "motivation": ["supplementing", "commenting"],
    "body": [
      {
        "type": "TextualBody",
        "value": "[Laughter]",
        "format": "text/plain",
        "purpose": "commenting"
      },
      {
        "type": "TextualBody",
        "value": "Unknown",
        "format": "text/plain",
        "purpose": "tagging"
      }
    ],
    "target": "http://example.com/manifest/canvas#t=164820.0"
  },

Additionally, any TextualBody type information in body property with "purpose": "tagging" are rendered as tags next to the timestamp information in the display. The above Annotation will be displayed as follows;

Using with the IIIFPlayer to display highlighting annotations:

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

<IIIFPlayer manifestUrl=manifestUrl manifest=manifest>
    <Annotations />
</IIIFPlayer>

This will display the Annotations component with the default props;

• Implement Annotation service workflow in Ramp