Audio player with liner notes: use BookReader v5 (#555)

* Audio player with liner notes: use BookReader v5 * liner notes in br v5 work - simplify loader, listen for booknav postinit to load bookreader * use PB style item-nav loading & update styles to make it fit in small window * liner notes: update storybook scripts to point to archive.org + liner notes readme to note that dev is in flux
internetarchive · Apr 27, 2021 · deff0d2 · deff0d2
1 parent 31707fe
commit deff0d2
Show file tree

Hide file tree

Showing 11 changed files with 583 additions and 41 deletions.
diff --git a/packages/ia-components/.storybook/main.js b/packages/ia-components/.storybook/main.js
@@ -7,7 +7,6 @@ module.exports = {
     "@storybook/addon-essentials",
     "storybook-addon-jsx",
     "@storybook/addon-a11y",
-    "@storybook/addon-jest"
   ],
   webpackFinal: async (config, { configType }) => {
     config.module.rules.push(

diff --git a/packages/ia-components/.storybook/preview-head.html b/packages/ia-components/.storybook/preview-head.html
@@ -2,18 +2,52 @@
 <script src="https://archive.org/includes/jquery-1.10.2.min.js?v1.10.2"></script>
 <script src="https://archive.org/includes/build/js/play8.min.js"></script>
 
-<script src="https://cdn.jsdelivr.net/npm/@internetarchive/bookreader@latest/BookReader/BookReader.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@internetarchive/bookreader@latest/BookReader/plugins/plugin.tts.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@internetarchive/bookreader@latest/BookReader/plugin.search.js"></script>
 
-<script src="https://cdn.jsdelivr.net/npm/@internetarchive/bookreader@latest/BookReader/jquery-ui-1.12.0.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@internetarchive/bookreader@latest/BookReader/jquery.browser.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@internetarchive/bookreader@latest/BookReader/dragscrollable-br.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@internetarchive/bookreader@latest/BookReader/jquery.colorbox-min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@internetarchive/bookreader@latest/BookReader/jquery.bt.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@internetarchive/bookreader@latest/BookReader/soundmanager2.js"></script>
+<script src="https://archive.org/bookreader/BookReader/BookReader.js"></script>
+<script src="https://archive.org/bookreader/BookReader/plugins/plugin.tts.js"></script>
+<script src="https://archive.org/bookreader/BookReader/plugin.search.js"></script>
 
-<link href="https://cdn.jsdelivr.net/npm/@internetarchive/bookreader@latest/BookReader/BookReader.css" rel="stylesheet" type="text/css"/>
+<script src="https://archive.org/bookreader/BookReader/jquery.colorbox-min.js"></script>
+
+<link href="https://archive.org/bookreader/BookReader/BookReader.css" rel="stylesheet" type="text/css"/>
 
 <link href="https://archive.org/includes/build/css/archive.min.css" rel="stylesheet" type="text/css"/>
 <link href="https://archive.org/bookreader/BookReader-ia.css" rel="stylesheet" type="text/css"/>
+
+<script src="https://archive.org/includes/build/js/BookNavigator.min.js"></script>
+
+<style>
+  html {
+  --primaryBGColor: var(--black, #000);
+  --secondaryBGColor: #222;
+  --tertiaryBGColor: #333;
+  --primaryTextColor: var(--white, #fff);
+  --primaryCTAFill: #194880;
+  --primaryCTABorder: #c5d1df;
+  --secondaryCTAFill: #333;
+  --secondaryCTABorder: #999;
+  --primaryErrorCTAFill: #e51c26;
+  --primaryErrorCTABorder: #f8c6c8;
+}
+item-navigator {
+  display: block;
+  width: 100%;
+  color: var(--primaryTextColor);
+  --menuButtonLabelDisplay: block;
+  --menuWidth: 320px;
+  --menuSliderBg: var(--secondaryBGColor);
+  --activeButtonBg: var(--tertiaryBGColor);
+  --animationTiming: 100ms;
+  --iconFillColor: var(--primaryTextColor);
+  --iconStrokeColor: var(--primaryTextColor);
+  --menuSliderHeaderIconHeight: 2rem;
+  --menuSliderHeaderIconWidth: 2rem;
+  --iconWidth: 2.4rem;
+  --iconHeight: 2.4rem;
+  --shareLinkColor: var(--primaryTextColor);
+  --shareIconBorder: var(--primaryTextColor);
+  --shareIconBg: var(--secondaryBGColor);
+  --activityIndicatorLoadingDotColor: var(--primaryTextColor);
+  --activityIndicatorLoadingRingColor: var(--primaryTextColor);
+}
+</style>
diff --git a/packages/ia-components/components/audio-players/audio-player-main.jsx b/packages/ia-components/components/audio-players/audio-player-main.jsx
@@ -135,7 +135,7 @@ export default class TheatreAudioPlayer extends Component {
    * Render function - determines whether or not we render liner notes
    */
   showLinerNotes() {
-    const { linerNotes } = this.props;
+    const { linerNotes, userSignedIn, albumMetadataStr } = this.props;
     const { mediaSource } = this.state;
 
     // may have linerNotes with just {metadata} if bookreader jsia call fails
@@ -148,7 +148,9 @@ export default class TheatreAudioPlayer extends Component {
     return (
       <div style={bookReaderStyle}>
         <BookReaderWrapper
-          options={{ ...linerNotes.data.brOptions, defaultStartLeaf: 0, titleLeaf: 0 }}
+          options={{ ...linerNotes.data.brOptions }}
+          userSignedIn={userSignedIn}
+          item={albumMetadataStr}
           style={{
             position: 'absolute',
             top: 0,
@@ -197,6 +199,8 @@ TheatreAudioPlayer.defaultProps = {
   photoAltTag: '',
   urlExtensions: '',
   linerNotes: null,
+  albumMetadataStr: '',
+  userSignedIn: false
 };
 
 TheatreAudioPlayer.propTypes = {
@@ -216,4 +220,6 @@ TheatreAudioPlayer.propTypes = {
   customSourceLabels: PropTypes.object,
   linerNotes: PropTypes.object,
   playlist: PropTypes.array.isRequired,
+  albumMetadataStr: PropTypes.string,
+  userSignedIn: PropTypes.bool
 };
diff --git a/packages/ia-components/components/audio-players/audio-player.less b/packages/ia-components/components/audio-players/audio-player.less
@@ -16,6 +16,7 @@
   }
 
   .content-window {
+    height: 440px;
     border-bottom: none;
     border-top: .1rem solid;
     border-left: .1rem solid;
@@ -109,3 +110,20 @@
     }
   }
 }
+
+/* BookReader */
+.BRfullscreenActive .bookreader-wrapper item-navigator {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: black;
+}
+
+.bookreader-wrapper #BookReader {
+  height: 440px;
+}
+
+/* BookReader */
diff --git a/packages/ia-components/components/bookreader-component/README.md b/packages/ia-components/components/bookreader-component/README.md
@@ -1,3 +1,15 @@
-This is a wrapper for the vanilla-js BookReader component.
+April 26, 2021
 
-BookReader should be installed via NPM in the parent project and source and style tags included on the page.
+Hello, this is a very specific instance of BookReader that is being used on Archive.org.
+
+Currently, we are in the middle of moving our BookReader to version 5 and our current scripts we be in flux until we move out of beta.
+This current version of the music player with liner is specifically using archive.org scripts to load the navigation web component.
+
+Final upgrades to this music player will be complete once we finalize its UX.
+
+For tips on how to load this music player, please refer to the `<head>` section of `~/.storybook/preview-head.html` where you can find the scripts to run the player.
+
+Thanks in advance.  Do let us know if you have any concerns, suggestions by making an issue.
+
+Best, Isa HV
+teamux @ archive.org
diff --git a/packages/ia-components/components/bookreader-component/bookreader-wrapper-main.jsx b/packages/ia-components/components/bookreader-component/bookreader-wrapper-main.jsx
@@ -31,15 +31,42 @@ export default class BookReaderWrapper extends Component {
     super(props);
     this.BookReaderRef = React.createRef();
     this.bookreader = {};
+
+    this.bindEventListeners = this.bindEventListeners.bind(this);
+    this.loadBookReader = this.loadBookReader.bind(this);
+
+    this.bindEventListeners();
   }
 
   componentDidMount() {
+    this.loadBookReader();
+  }
+
+  bindEventListeners() {
+    window.addEventListener('BrBookNav:PostInit', () => {
+      this.bookreader.init();
+      setTimeout(() => {
+        this.bookreader.resize();
+        this.bookreader.jumpToIndex(0);
+      }, 250);
+    });
+
+    window.addEventListener('BookReader:fullscreenToggled', () => {
+      if (!this.bookreader.isFullscreen()) {
+        setTimeout(() => {
+          this.bookreader.resize();
+        }, 300);
+      }
+    });
+  }
+
+  loadBookReader() {
     const { options } = this.props;
 
-    const originalGetPageURI = BookReader.prototype.getPageURI;
+    const originalGetPageURI = window.BookReader.prototype.getPageURI;
     const defaultOptions = {
       el: `#${this.BookReaderRef.current.id}`,
-      mobileNavFullscreenOnly: true,
+      showToolbar: false,
       onePage: { autofit: 'height' }, // options: auto, width, height
       ui: 'full',
       enablePageResume: false,
@@ -51,6 +78,8 @@ export default class BookReaderWrapper extends Component {
       initialSearchTerm: null,
       imagesBaseURL: '/bookreader/BookReader/images/',
       useSrcSet: false,
+      defaultStartLeaf: 0,
+      titleLeaf: 0,
       /**
        * Needed bypass to generate Image URL with scale factor.
        * We must eliminate sooner than later to allow BookReader full image fetching control
@@ -70,31 +99,32 @@ export default class BookReaderWrapper extends Component {
         twoPage: { visible: false },
         viewmode: { visible: false },
       },
-      bookType: 'linerNotes', // bookType: linerNotes, book 
+      bookType: 'linerNotes', // bookType: linerNotes, book
     };
     const fullOptions = {
       ...defaultOptions,
       ...options,
     };
-    // There are two ways to initialize BookReader, eithr through JSIA which includes IA specific lending info
-    // or the simpler initialization without IA.
-    if (this.props.jsia) {
-      BookReaderJSIAinit(this.props.jsia, fullOptions); // Creates window.br
-    } else {
-      this.bookreader = new BookReader(fullOptions);
-      window.br = this.bookreader; // keep for legacy
-      this.bookreader.init();
-    }
+    this.bookreader = new window.BookReader(fullOptions);
+    window.br = this.bookreader; // keep for legacy
   }
 
   render() {
+    const { userSignedIn, item } = this.props;
+    const base64item = btoa(item);
     return (
-      <section className="bookreader-wrapper" {...this.props}>
-        {!this.props.jsia ? null :
-          <div id="IABookReaderMessageWrapper" style={{display: "none"}}></div>
-        }
-        <div id="bookreader" ref={this.BookReaderRef} style={{ height: '100%', width: '100%' }} />
+      <section className="bookreader-wrapper liner-notes" {...this.props}>
+        <item-navigator
+          baseHost="https://archive.org"
+          itemtype="bookreader"
+          signedIn={userSignedIn}
+          item={base64item}
+          class="focus-on-child-only"
+        >
+          <div slot="bookreader" id="BookReader" className="BookReader" ref={this.BookReaderRef} />
+        </item-navigator>
       </section>
+
     );
   }
 }
@@ -103,8 +133,12 @@ BookReaderWrapper.displayName = 'BookReaderWrapper';
 
 BookReaderWrapper.defaultProps = {
   options: {},
+  userSignedIn: false,
+  item: null
 };
 
 BookReaderWrapper.propTypes = {
   options: PropTypes.object,
+  userSignedIn: PropTypes.bool,
+  item: PropTypes.object
 };
diff --git a/...a-components/components/theatres/with-youtube-spotify/audio-with-youtube-spotify-main.jsx b/...a-components/components/theatres/with-youtube-spotify/audio-with-youtube-spotify-main.jsx
@@ -332,7 +332,10 @@ class AudioPlayerWithYoutubeSpotify extends Component {
   /* END CALLBACKS */
 
   render() {
-    const { jwplayerPlaylist, linerNotes } = this.props;
+    const {
+      jwplayerPlaylist, linerNotes, albumMetadataStr, userSignedIn
+    } = this.props;
+
     const { tracklistToShow, channelToPlay, albumData } = this.state;
     const {
       albumMetadaToDisplay,
@@ -382,6 +385,8 @@ class AudioPlayerWithYoutubeSpotify extends Component {
             sourceData={audioSource}
             customSourceLabels={contentBoxTabs}
             linerNotes={linerNotes}
+            albumMetadataStr={albumMetadataStr}
+            userSignedIn={userSignedIn}
             jwplayerPlaylistChange={this.jwplayerPlaylistChange}
             jwplayerStartingPoint={this.jwplayerStartingPoint}
             youtubePlaylistChange={this.youtubePlaylistChange}
@@ -431,13 +436,18 @@ AudioPlayerWithYoutubeSpotify.defaultProps = {
   jwplayerPlaylist: null,
   playFullIAAudio: false,
   linerNotes: null,
+  userSignedIn: false,
+  albumMetadataStr: '',
+  albumMetadata: null,
 };
 
 AudioPlayerWithYoutubeSpotify.propTypes = {
   albumMetadata: PropTypes.object.isRequired,
+  albumMetadataStr: PropTypes.string,
   jwplayerPlaylist: PropTypes.array,
   playFullIAAudio: PropTypes.bool,
   linerNotes: PropTypes.object,
+  userSignedIn: PropTypes.bool,
 };
 
 export default AudioPlayerWithYoutubeSpotify;
diff --git a/...es/ia-components/components/theatres/with-youtube-spotify/audio-with-youtube-spotify.less b/...es/ia-components/components/theatres/with-youtube-spotify/audio-with-youtube-spotify.less
@@ -271,5 +271,17 @@
     padding: 0.1px 0 0 0;
     overflow: hidden;
     background-color: black;
+
+    ia-bookreader {
+      display: block;
+      position: relative;
+      height: inherit;
+      width: inherit;
+    }
+
+    #liner-notes {
+      border: 1px solid green;
+      min-height: 400px;
+    }
   }
 }
diff --git a/...components/components/theatres/with-youtube-spotify/audio-with-youtube-spotify.stories.js b/...components/components/theatres/with-youtube-spotify/audio-with-youtube-spotify.stories.js
@@ -115,8 +115,8 @@ class DataHydrator extends Component {
           <h4>Archive </h4>
           <table>
             <thead>
-              <td>Collection</td>
-              <td>Identifier</td>
+              <tr>Collection</tr>
+              <tr>Identifier</tr>
             </thead>
             <tbody>
               <tr>

diff --git a/packages/ia-components/package.json b/packages/ia-components/package.json
@@ -23,7 +23,7 @@
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.13.10",
     "@babel/runtime": "^7.5.5",
-    "@internetarchive/bookreader": "^4.37.0",
+    "@internetarchive/bookreader": "^5.0.0-0",
     "@internetarchive/ia-js-client": "0.0.0-alpha.350",
     "@storybook/addon-actions": "^6.1.21",
     "@storybook/addon-essentials": "^6.1.21",