Renamed component library

README.md

@@ -1,34 +1,38 @@
-# @samvera/iiif-react-media-player
+# @samvera/ramp
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/4fab1f64-7d56-4a69-b5f6-6cae5ed55537/deploy-status)](https://app.netlify.com/sites/iiif-react-media-player/deploys)
+### **Renamed component library previously known as [`@samvera/iiif-react-media-player`](https://www.npmjs.com/package/@samvera/iiif-react-media-player)**
 
-[![CircleCI](https://circleci.com/gh/samvera-labs/iiif-react-media-player.svg?style=svg)](https://app.circleci.com/pipelines/github/avalonmediasystem/react-iiif-media-player)
+<br />
+
+A library of interactive IIIF powered audio/video media player React components.
 
-Interactive, IIIF powered audio/video media player React components.
+### **[Demo](https://iiif-react-media-player.netlify.app/)**
 
-**Demo site**: https://iiif-react-media-player.netlify.app/
+<br />
 
 ## General Usage:
 
-Add the `@samvera/iiif-react-media-player` components library from [NPM](https://www.npmjs.com/package/@samvera/iiif-react-media-player) into your ReactJS application via `yarn` or `npm`.
+Add the `@samvera/ramp` components library from NPM into your ReactJS application via `yarn` or `npm`.
 
 ```
-yarn add @samvera/iiif-react-media-player
+yarn add @samvera/ramp
 
 // Add peer dependencies
-yarn add video.js
+yarn add video.js@7.21.3
 yarn add videojs-hotkeys
 ```
 
+**NOTE**: `video.js@7.21.3` needs to be used until the [fix](https://github.com/silvermine/videojs-quality-selector/pull/93) to use the latest Video.js (v8.0.4) in `@silvermine/videojs-quality-selector` is merged.
+
 ### Example usage
 
 ```
 import React from 'react';
-import { IIIFPlayer, MediaPlayer, StructuredNavigation, Transcript } from "@samvera/iiif-react-media-player";
+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/iiif-react-media-player/dist/iiif-react-media-player.css";
+import "@samvera/ramp/dist/ramp.css";
 
 const App = () => {
   // Get your manifest from somewhere
@@ -95,7 +99,7 @@ yarn styleguide:build
 
 This will output static documentation HTML files to the project's `/styleguide` directory.
 
-An example usage of the all the components in the library, is created at `/demo` directory. This displays a real-time usage of the components in this library in an application. To start this example, run:
+An example usage of all the components in the library, is served from `/demo` directory. This show-case real-time usage of the components in this library in an application. To start this example, run:
 
 ```
 yarn demo
@@ -171,15 +175,11 @@ See also the list of [contributors](https://github.com/samvera-labs/iiif-react-m
 
 ## License
 
-The gem is available as open source under the terms of the [Apache 2.0 License](https://opensource.org/licenses/Apache-2.0).
+The library is available as open source under the terms of the [Apache 2.0 License](https://opensource.org/licenses/Apache-2.0).
 
 ## Acknowledgments
 
 - [Avalon Media System](https://www.avalonmediasystem.org/)
 
-[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
-[build]: https://travis-ci.org/user/repo
-[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
-[npm]: https://www.npmjs.org/package/npm-package
-[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
-[coveralls]: https://coveralls.io/github/user/repo
+[![Netlify Status](https://api.netlify.com/api/v1/badges/4fab1f64-7d56-4a69-b5f6-6cae5ed55537/deploy-status)](https://app.netlify.com/sites/iiif-react-media-player/deploys)
+[![CircleCI](https://circleci.com/gh/samvera-labs/iiif-react-media-player.svg?style=svg)](https://app.circleci.com/pipelines/github/avalonmediasystem/react-iiif-media-player)

demo/app.js

@@ -5,7 +5,7 @@ import StructuredNavigation from '@Components/StructuredNavigation/StructuredNav
 import Transcript from '@Components/Transcript/Transcript';
 import './app.scss';
 import 'video.js/dist/video-js.css';
-import '../dist/iiif-react-media-player.css';
+import '../dist/ramp.css';
 
 const App = ({ manifestURL }) => {
   const [userURL, setUserURL] = React.useState(manifestURL);
@@ -27,17 +27,17 @@ const App = ({ manifestURL }) => {
 
   return (
     <div className='iiif-demo'>
-      <h1>React IIIF Media Player</h1>
-      <div className='irmp--description'>
+      <h1>Ramp</h1>
+      <div className='ramp--description'>
         <p>An interactive, IIIF powered A/V player built with components
-          from <a href="https://www.npmjs.com/package/@samvera/iiif-react-media-player"
+          from <a href="https://www.npmjs.com/package/@samvera/ramp"
             target="_blank">
-            @samvera/iiif-react-media-player
+            @samvera/ramp
           </a> library. This player supports <em>IIIF Presentation 3.0 Manifests</em>. Please enter the URL
           of your <em>public</em> manifest to view it in the player.
         </p>
       </div>
-      <div className='irmp--form_container'>
+      <div className='ramp--form_container'>
         <form onSubmit={handleSubmit}>
           <div className='row'>
             <div className='col-1'>
@@ -55,7 +55,7 @@ const App = ({ manifestURL }) => {
           </div>
         </form>
       </div>
-      <div className='irmp--player_container'>
+      <div className='ramp--player_container'>
         <IIIFPlayer
           manifestUrl={manifestUrl}
         >

demo/app.scss

@@ -4,20 +4,20 @@ html {
 }
 
 div.iiif-player-demo {
-  .irmp--structured-nav {
+  .ramp--structured-nav {
     float: left;
     width: 40%;
     margin-top: 20px;
   }
 
-  .irmp--transcript_nav {
+  .ramp--transcript_nav {
     float: right;
     width: 60%;
     margin-left: -20px;
     margin-top: 20px;
   }
 
-  .irmp--media_player {
+  .ramp--media_player {
     width: 60%;
     margin: auto;
   }
@@ -27,7 +27,7 @@ div.iiif-player-demo {
   margin: auto;
   width: 75%;
 
-  .irmp--description {
+  .ramp--description {
     margin-bottom: 15px;
   }
 
@@ -59,7 +59,7 @@ div.iiif-player-demo {
     background-color: #80a590;
   }
 
-  .irmp--form_container {
+  .ramp--form_container {
     background-color: #f2f2f2;
     padding: 15px;
     border-radius: 5px;
@@ -84,7 +84,7 @@ div.iiif-player-demo {
     clear: both;
   }
 
-  .irmp--player_container {
+  .ramp--player_container {
     padding: 10px;
   }
 

demo/index.html

@@ -1,7 +1,7 @@
 <html>
 
 <head>
-  <title>React IIIF Media Player</title>
+  <title>Ramp</title>
 </head>
 
 <body>