React IIIF Media Player - samvera-labs/avalon-bundle GitHub Wiki

The Media player for avalon-bundle is an external NPM/Yarn packaged player, react-iiif-media-player imported into avalon-bundle as a front-end dependency handled by webpacker.

https://github.com/avalonmediasystem/react-iiif-media-player

The package exports a React component, which we can place within React code in our application and use like any other component.

Add the package from NPM/Yarn registery

yarn add react-iiif-media-player

General Usage

Within avalon-bundle, import the packaged component in a React script: app/javascript/react/containers/IIIFMediaPlayerContainer.js

and use as follows:

import React from 'react';

// The imported player
import IIIFMediaPlayer from 'react-iiif-media-player';

const IIIFMediaPlayerContainer = () => <IIIFMediaPlayer />;

export default IIIFMediaPlayerContainer;

Developing on react-iiif-media-player

For developing on react-iiif-media-player, there are 2 ways of working with the package before bumping the version and pushing to the NPM/Yarn registry.

Develop directly on the standalone application locally

Read instructions here for how to clone and run the app locally: (https://github.com/avalonmediasystem/react-iiif-media-player)

Before testing your local changes, remember to create a build of your updated files (located in instructions link above)

ie. yarn build

Test your local changes in `avalon-bundle`

To test your local changes to react-iiif-media-player within avalon-bundle, do the following:

cd avalon-bundle

Clear out previous package reference

Remove registry reference to the package:

yarn remove react-iiif-media-player

Import new, local package

Import your local version of the package:

yarn add file:/path/to/local/folder

ex: yarn add file:/Users/aja0137/Documents/nulib-repositories/avalonmediasystem/react-iiif-media-player

To get your file path, cd into your local cloned repo for react-iiif-media-player and run pwd. Copy your path.

Note: Test your changes, and keep in mind any new updates made to local react-iiif-media-player files will need to be re-imported. Changes are not automatically included. Yarn moves the files into avalon-bundle's node_modules directory on each yarn add ....

General process

Work on files in the demo app for react-iiif-media-player locally.
Build the package.
Remove the previous package contents of react-iiif-media-player from avalon-bundle.
(Optional) Clean yarn's cache. yarn cache clean
Add new local package contents: yarn add file:/path/to/local/folder

Push your changes upstream

When satisfied with your local fix to react-iiif-media-player, submit a PR at: