Overview

This is a memo on how to customize Ramp. As a result of customization, the UI is partially localized to Japanese, with the media player and metadata/transcription displayed side by side. Additionally, the query parameter t can be used to specify the playback start time for audio.

For example, playback starting from the 140-second mark can be accessed from the following URL.

ramp-iiif.vercel.app
ramp-iiif.vercel.app

Below is the pre-customization state.

Setup

Please refer to the following article.

Running Ramp Locally
Running Ramp Locally
ldas.jp

Customization

Specifying Audio Playback Start Time

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

Samvera Ramp Style Guide
samvera-labs.github.io

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.