Clover screenshot

Clover IIIF

A minimal IIIF viewer for Image, Audio, and Video canvases built with React.js

Demo | Code

Clover IIIF is a UI component that renders a multicanvas IIIF item viewer for Video and Sound content resources with pan-zoom support for Image via OpenSeadragon. Provide a IIIF Presentation manifest and the component:


Documentation


Installation

Install the component from your command line using npm install,

npm install @samvera/clover-iiif

OR if you prefer Yarn, use yarn add.

yarn add @samvera/clover-iiif

Basic Usage

Add the CloverIIIF component to your jsx or tsx code.

import CloverIIIF from "@samvera/clover-iiif";

Mnimal usage providing the <CloverIIIF/> component with an external manifest.

const manifestId =
  "https://raw.githubusercontent.com/samvera-labs/clover-iiif/main/public/fixtures/iiif/manifests/sample.json";

return <CloverIIIF manifestId={manifestId} />;

See Example


Active Canvas

Example on using canvasIdCallback to return to your consuming application the active canvas ID. This will return as a string.

const manifestId =
  "https://raw.githubusercontent.com/samvera-labs/clover-iiif/main/public/fixtures/iiif/manifests/sample.json";

const handlCanvasIdCallback = (activeCanvasId) => {
  if (activeCanvasId) console.log(activeCanvasId);
};

return (
  <CloverIIIF
    manifestId={manifestId}
    canvasIdCallback={handlCanvasIdCallback}
  />
);

See Example


Configuring Captions

WebVTT content resources are the source for both content mapped closed captioning <track/> elements in the HTML 5 video player and to the navigator panel adjacent to it. You may ignore these resources as tracks if they are not intended for closed captioning or subtitling by string values matching the label of the content resource. This is a manual option within the viewer as there is no defined way for a manifest to prescribe motivation for these resources beyond supplementing.

Supplementing Annotation to Ignore

{
  "id": "https://raw.githubusercontent.com/samvera-labs/clover-iiif/main/public/fixtures/iiif/manifests/captions.json/canvas/1/page/annotation_page/1/annotation/2",
  "type": "Annotation",
  "motivation": "supplementing",
  "body": {
    "id": "https://raw.githubusercontent.com/samvera-labs/clover-iiif/main/public/fixtures/vtt/around_the_corner_chapters.vtt",
    "type": "Text",
    "format": "text/vtt",
    "label": {
      "en": ["Chapters"]
    },
    "language": "en"
  },
  "target": "https://raw.githubusercontent.com/samvera-labs/clover-iiif/main/public/fixtures/iiif/manifests/captions.json/canvas/1"
}

Configuration Option Implementation

export default function App() {
  const manifestId =
    "https://raw.githubusercontent.com/samvera-labs/clover-iiif/main/public/fixtures/iiif/manifests/captions.json";

  const options = {
    ignoreCaptionLabels: ["Chapters"],
  };

  return <CloverIIIF manifestId={manifestId} options={options} />;
}

See Example


Custom Theme

You may choose to override the base theme by setting optional colors and fonts. Naming conventions for colors are limited to those shown in the config example below.

const manifestId =
  "https://raw.githubusercontent.com/samvera-labs/clover-iiif/main/public/fixtures/iiif/manifests/sample.json";

const customTheme = {
  colors: {
    /**
     * Black and dark grays in a light theme.
     * All must contrast to 4.5 or greater with `secondary`.
     */
    primary: "#37474F",
    primaryMuted: "#546E7A",
    primaryAlt: "#263238",

    /**
     * Key brand color(s).
     * `accent` must contrast to 4.5 or greater with `secondary`.
     */
    accent: "#C62828",
    accentMuted: "#E57373",
    accentAlt: "#B71C1C",

    /**
     * White and light grays in a light theme.
     * All must must contrast to 4.5 or greater with `primary` and  `accent`.
     */
    secondary: "#FFFFFF",
    secondaryMuted: "#ECEFF1",
    secondaryAlt: "#CFD8DC",
  },
  fonts: {
    sans: "'Avenir', 'Helvetica Neue', sans-serif",
    display: "Optima, Georgia, Arial, sans-serif",
  },
};

return <CloverIIIF manifestId={manifestId} customTheme={customTheme} />;

See Example


Reference

Prop Type Required Default
manifestId string Yes
canvasIdCallback function No
customTheme object No
options object No
options.showTitle boolean No true
options.showIIIFBadge boolean No true
options.ignoreCaptionLabels string[] No []
options.canvasBackgroundColor string No #1a1d1e
options.canvasHeight string No 500px

Clover IIIF version 1.4.0, introduces an options prop, which will serve as a configuration object for common configuration options. Options canvasBackgroundColor and canvasHeight will apply to both <video> elements and the OpenseaDragon canvas.

import CloverIIIF from "@samvera/clover-iiif";

...

// Supported options
const options = {
  // Primary title (Manifest label) for top level canvas.  Defaults to true
  showTitle: false,

  // IIIF Badge and popover containing options.  Defaults to true
  showIIIFBadge: false,

  // Ignore supplementing canvases by label value that are not for captioning
  ignoreCaptionLabels: ['Chapters']
}
...

<CloverIIIF manifestId={...} options={options} />

Manifest Requirements

The manifest provided to manifestId:


Development

Clover IIIF is built with:

Environment

This will open up a local dev server with live reloading.

npm install
npm run dev

Build

This will build and package the component

npm run build

This will create a static version of the site to the /static directory

npm run build:static

Notes

tsc

License

This project is available under the MIT License.