Renamed NPM component library previously known as @samvera/iiif-react-media-player
An NPM component library of interactive IIIF Presentation 3.0 API powered audio/video media player ReactJS 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 (Ramp <= v3.1.2): [email protected] needs to be used because the included version of @silvermine/videojs-quality-selector is incompatible with Video.js >= v8.0.0.
NOTE (Next release): Ramp will be upgrading to [email protected] in its next release because @silvermine/videojs-quality-selector has been updated. If you are installing Ramp from the Main branch you need to run yarn add [email protected] in your ReactJS application to get the correct peer dependency.
import React from 'react';
import { IIIFPlayer, MediaPlayer, StructuredNavigation, Transcript } from "@samvera/ramp";
import 'video.js/dist/video-js.css';
// Import starter styles
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;
See the Styleguidist docs for documentation on the components. And the GitHub Wiki for more details on usage and implementation of these components.
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 create a set of static documentation HTML files in the project's /styleguide directory. In this documentation, each component is explained with a code sample and a description of its props and functionality.
An example usage of all the components in the library is served from the /demo directory. This showcases the real-time usage of the components in an application. To start this example, run:
yarn demo
Then open up a browser and navigate to http://localhost:3003. It has live reload enabled via webpack, so live updates are immediately rendered 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.
To run the tests, with a full coverage report, run:
yarn test
To run tests in watch mode:
yarn test:watch
Ramp uses Jest and react-testing-library to build its test suite.
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
- Mason Ballengee - Software Engineer - Indiana University
- Chris Colvard - DevOps Engineer - Indiana University
- Adam J. Arling - Front End Developer - Northwestern University
- Phuong Dinh - DevOps Engineer - Indiana University
- Divya Katpally - Front End Developer - Northwestern University
See also the list of contributors to see others who participated in this project.
The library is available as open source under the terms of the Apache 2.0 License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent