@samvera/iiif-react-media-player

@samvera/iiif-react-media-player

Interactive, IIIF powered audio/video media player React components.

General Usage:

Add the @samvera/iiif-react-media-player component into your ReactJS application via yarn or npm.

yarn add @samvera/iiif-react-media-player

// Add peer dependencies
yarn add video.js
yarn add videojs-hotkeys

Example usage

import React from 'react';
import { IIIFPlayer, MediaPlayer, StructuredNavigation, Transcript } from "@samvera/iiif-react-media-player";
import 'video.js/dist/video-js.css';

// Import starter styles (in the future this will be optional)
import "@samvera/iiif-react-media-player/dist/iiif-react-media-player.css";

const App = () => {
  // Get your manifest from somewhere
  const manifestUrl = "https://some-manifest-url-here.json";

  return (
    <IIIFPlayer manifestUrl={manifestUrl}>
      <MediaPlayer />
      <StructuredNavigation />
      <Transcript {...props} />
    </IIIFPlayer>
  );
}

export default App;

The Transcript component is written in a way that it can be used independently of the other components. Therefore Transcript component can be used by itself as follows;

import React from 'react';
import { Transcript } from "@samvera/iiif-react-media-player";

// Import starter styles (in the future this will be optional)
import "@samvera/iiif-react-media-player/dist/iiif-react-media-player.css";

const App = () => {
  return (
    <Transcript playerID={playerID} transcripts={[
      {
        canvasId: 0,
        items: [
          {
            title: 'Title',
            url: 'http://example.com/transcript.json'
          }
        ]
      }
    ]}/>
  );
}
export default App;

NOTE: When using the Transcript component with a different player (other than IIIFPlayer), the media player (the one with the given playerID in the props) needs to have a couple of attributes. Read more about this requirement in the Wiki.

Cross-site Requests

** 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.

IIIF 3.0 spec

http://iiif.io/api/presentation/3.0/

Developing

Styleguidist development

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.

Deployment

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.

Documentation

See the Styleguidist docs for documentation on the components.

Running the tests

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.

Coding style tests

There is a prettierrc file with project coding style settings.

Built With

• React - JavaScript component library
• Jest - Testing framework

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Adam J. Arling - Front End Developer - Northwestern University
• Phuong Dinh - Front End Developer - Indiana University
• Dananji Withana - Front End Developer - Indiana University
• Divya Katpally - Front End Developer - Northwestern University

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Avalon Media System