Renamed component library previously known as @samvera/iiif-react-media-player
A library of interactive IIIF powered audio/video media player React components.
Add the @samvera/ramp components library from NPM into your ReactJS application via yarn or npm.
yarn add @samvera/ramp
// Add peer dependencies
yarn add [email protected]
NOTE: [email protected] needs to be used until the fix to use the latest Video.js (v8.0.4) in @silvermine/videojs-quality-selector is merged and released.
import React from 'react';
import { IIIFPlayer, MediaPlayer, StructuredNavigation, Transcript } from "@samvera/ramp";
import 'video.js/dist/video-js.css';
// Import starter styles (in the future this will be optional)
import "@samvera/ramp/dist/ramp.css";
const App = () => {
// Get your manifest from somewhere
const manifestUrl = "https://some-manifest-url-here.json";
// Transcript props
const props = {
playerID: 'player-id',
transcripts: [
{
canvasId: 0,
items: [ { title: "Title", url: "https://some-transcript-url-here.json" } ]
}
]
}
return (
<IIIFPlayer manifestUrl={manifestUrl}>
<MediaPlayer enableFileDownload={false} />
<StructuredNavigation />
<Transcript {...props} />
</IIIFPlayer>
);
}
export default App;
More detailed explanation and usage of these components, please refer to the Wiki documentation.
** This info pulled from the Diva.js package**
You may receive an error that looks something like this:
XMLHttpRequest cannot load http://example.com/demo/imagefiles.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.This is a security precaution that all browsers use to prevent cross-site request forgeries. If you receive this message it is because your manifestUrl prop and the server used to serve the OpenSeadragon React Viewer are not at the same server address.
To fix this you must ensure that the OpenSeadragon React Viewer host's React application, and the location pointed to by the manifestUrl prop are being served by the same server, or you must create an exception using the Access-Control-Allow-Origin header on your server to explicitly white-list the manifestUrl location.
http://iiif.io/api/presentation/3.0/
Styleguidist, in addition to providing documentation, also offers an isolated development environment. To start the dev environment, run:
yarn dev
To build a static html version of the docs (which Github pages uses), run:
yarn styleguide:build
This will output static documentation HTML files to the project's /styleguide directory.
An example usage of all the components in the library is served from the /demo directory. This showcases real-time usage of the components in this library in an application. To start this example, run:
yarn demo
Then open up a browser and navigate to http://localhost:3003. Live reload via webpack is enabled, so you'll be able to see live updates in the browser during development.
To deploy your forked version of this repo, run:
yarn build
This will create CommoneJS, ES Module, and UMD distribution files located in the /dist/ directory.
A demo site is hosted with Netlify.
This demo instance can read a publicly available IIIF Presentation 3.0 Manifest given the URL of the manifest and display content in the manifest.
A new build is triggered and published in Netlify when code changes are merged to the main branch in this repository.
See the Styleguidist docs for documentation on the components. And our GitHub Wiki for more details on usage and implementation of these components.
To run the tests, with a full coverage report:
yarn test
To run tests in watch mode:
yarn test:watch
Jest is our testing framework, and we're in the process of incorporating react-testing-library https://github.com/testing-library/react-testing-library.
There is a prettierrc file with project coding style settings.
If you're working on PR for this project, create a feature branch off of main.
This repository follows the Samvera Community Code of Conduct and language recommendations.
We use SemVer for versioning. For the versions available, see the tags on this repository.
- Dananji Withana - Front End Developer - Indiana University
- Adam J. Arling - Front End Developer - Northwestern University
- Phuong Dinh - Front End Developer - Indiana University
- Divya Katpally - Front End Developer - Northwestern University
See also the list of contributors who participated in this project.
The library is available as open source under the terms of the Apache 2.0 License.
