Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@samvera/clover-iiif
Advanced tools
Viewer for audio, video and image file types driven by a IIIF manifest
A minimal IIIF viewer for Image, Audio, and Video canvases built with React.js
Clover IIIF is a UI component that renders a multicanvas IIIF item 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:
supplementing
with a content resource having the format of text/vtt
for Video and Sound<video>
elementInstall 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
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} />;
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}
/>
);
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
.
{
"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"
}
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} />;
}
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} />;
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} />
The manifest provided to manifestId
:
painting
and content resource with the type of Video
, Sound
, or Image
supplementing
and content resource with the format of text/vtt
.m3u8
for Sound
and Video
Clover IIIF is built with:
This will open up a local dev server with live reloading.
npm install
npm run dev
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
tsc
This project is available under the MIT License.
FAQs
Extensible IIIF front-end toolkit and Manifest viewer. Accessible. Composable. Open Source.
The npm package @samvera/clover-iiif receives a total of 706 weekly downloads. As such, @samvera/clover-iiif popularity was classified as not popular.
We found that @samvera/clover-iiif demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.