Clover IIIF
An A/V media viewer driven by IIIF Presentation API built with React.js
Demo
Clover IIIF is a UI component that renders a multicanvas IIIF viewer intended for Video
and Sound
content resources with basic pan-zoom support for Image
via OpenSeadragon. Provide a IIIF Presentation manifest and the component:
- Renders a multi-canvas Video, Sound, and Image viewer
- Renders thumbnails as navigation between canvases
- Renders annotations with the motivation of
supplementing
with a content resource having the format of text/vtt
for Video and Sound - Video and Sound are rendered within a HTML5
<video>
element - Image canvases are renderered with OpenSeadragon
- Supports HLS streaming for .m3u8 extensions
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: {
primary: "#37474F",
primaryMuted: "#546E7A",
primaryAlt: "#263238",
accent: "#C62828",
accentMuted: "#E57373",
accentAlt: "#B71C1C",
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 | [] |
Clover IIIF version 1.4.0, introduces an options
prop, which will serve as a configuration object for common configuration options.
import CloverIIIF from "@samvera/clover-iiif";
...
const options = {
showTitle: false,
showIIIFBadge: false,
ignoreCaptionLabels: ['Chapters']
}
...
<CloverIIIF manifestId={...} options={options} />
Manifest Requirements
The manifest provided to manifestId
:
- MUST be a IIIF Presentation API valid manifest,
- MUST have at least one canvas with an annotation of the motivation of
painting
and content resource with the type of Video
, Sound
, or Image
- SHOULD have canvases with annotations of the motivation of
supplementing
and content resource with the format of text/vtt
- MAY have HLS streaming media, however, the file extension MUST be
.m3u8
for Sound
and Video
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
- ESBuild compiles TypeScript to JavaScript, but does not do type checking. To view type checking errors (in addtion to what your IDE will be complaining about), run:
tsc
License
This project is available under the MIT License.