Customizing Ramp

Customization

Specifying Audio Playback Start Time

From the following manual, we can see that the startCanvasTime property is available.

https://samvera-labs.github.io/ramp/#!/IIIFPlayer

We add processing to the following index.js file to retrieve startCanvasTime from a query parameter.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
// import config from './config';

const manifestURL = () => {
  const params = new URLSearchParams(window.location.search);
  // let url = `${config.url}/manifests/${config.env}/lunchroom_manners.json`;
  let url = "https://nakamura196.github.io/ramp_data/demo/3571280/manifest.json"
  if (params.has('iiif-content')) {
    url = params.get('iiif-content');
  }
  return url;
};

const startCanvasTime = () => {
  const params = new URLSearchParams(window.location.search);
  if (params.has('t')) {
    return parseFloat(params.get('t'));
  }
  return 0;
}

ReactDOM.render(<App
  manifestURL={manifestURL()} startCanvasTime={startCanvasTime()}
/>, document.getElementById('root'));

Then, pass the startCanvasTime property to app.js. This allows specifying the media playback start time via query parameter.

...
        <IIIFPlayer
          manifestUrl={manifestUrl}
          startCanvasTime={canvasTime}
        >
...

Localization and Layout Changes

Similarly to the above, you can localize the UI and change the layout by editing the demo/app.js file.

Deploying to Vercel

Configure the Build & Development Settings as follows.

Set Build Command to npm run demo:build and Output Directory to demo/dist.

Also, it was necessary to set the Node.js Version to 18.x. With 20.x, errors occurred during package installation.

Summary

I am grateful to those involved in the development of Ramp. I hope this serves as a useful reference for using Ramp and the IIIF Presentation API v3.