Starting Guide - samvera-labs/ramp GitHub Wiki

Prerequisites

In order to use this in an application you should have the following;

• Installed node version > 10
• ReactJS version >= 16.8.0

Install from NPM

Depending on your environment use either of the following commands to fetch the package from NPM:

yarn add @samvera/iiif-react-media-player
OR
npm install @samvera/iiif-react-media-player

Install dependencies

yarn add video.js
yarn add videojs-hotkeys

Sample usage

When using the entire set of components

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";

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

export default App;

Using the Transcript component with a different player

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;