npm - @internetarchive/bookreader - Versions diffs - 5.0.0-24-sortingstate-11 → 5.0.0-26 - Mend

@internetarchive/bookreader 5.0.0-24-sortingstate-11 → 5.0.0-26

Files changed (86) hide show

package/BookReader/BookReader.css +4 -0
package/BookReader/BookReader.js +2 -32145
package/BookReader/BookReader.js.map +1 -1
package/BookReader/bookreader-component-bundle.js +1286 -11256
package/BookReader/bookreader-component-bundle.js.map +1 -1
package/BookReader/icons/1up.svg +1 -12
package/BookReader/icons/2up.svg +1 -15
package/BookReader/icons/advance.svg +3 -26
package/BookReader/icons/chevron-right.svg +1 -1
package/BookReader/icons/close-circle-dark.svg +1 -1
package/BookReader/icons/close-circle.svg +1 -1
package/BookReader/icons/fullscreen.svg +1 -17
package/BookReader/icons/fullscreen_exit.svg +1 -17
package/BookReader/icons/hamburger.svg +1 -15
package/BookReader/icons/left-arrow.svg +1 -12
package/BookReader/icons/magnify-minus.svg +1 -16
package/BookReader/icons/magnify-plus.svg +1 -17
package/BookReader/icons/magnify.svg +1 -15
package/BookReader/icons/pause.svg +1 -23
package/BookReader/icons/play.svg +1 -22
package/BookReader/icons/playback-speed.svg +1 -34
package/BookReader/icons/read-aloud.svg +1 -22
package/BookReader/icons/review.svg +3 -22
package/BookReader/icons/thumbnails.svg +1 -17
package/BookReader/icons/voice.svg +1 -1
package/BookReader/icons/volume-full.svg +1 -22
package/BookReader/images/BRicons.svg +5 -94
package/BookReader/images/books_graphic.svg +1 -177
package/BookReader/images/icon_book.svg +1 -12
package/BookReader/images/icon_bookmark.svg +1 -12
package/BookReader/images/icon_gear.svg +1 -14
package/BookReader/images/icon_hamburger.svg +1 -20
package/BookReader/images/icon_home.svg +1 -21
package/BookReader/images/icon_info.svg +1 -11
package/BookReader/images/icon_one_page.svg +1 -8
package/BookReader/images/icon_pause.svg +1 -1
package/BookReader/images/icon_play.svg +1 -1
package/BookReader/images/icon_playback-rate.svg +1 -15
package/BookReader/images/icon_search_button.svg +1 -8
package/BookReader/images/icon_share.svg +1 -9
package/BookReader/images/icon_skip-ahead.svg +1 -6
package/BookReader/images/icon_skip-back.svg +2 -13
package/BookReader/images/icon_speaker.svg +1 -18
package/BookReader/images/icon_speaker_open.svg +1 -10
package/BookReader/images/icon_thumbnails.svg +1 -12
package/BookReader/images/icon_toc.svg +1 -5
package/BookReader/images/icon_two_pages.svg +1 -9
package/BookReader/images/marker_chap-off.svg +1 -11
package/BookReader/images/marker_chap-on.svg +1 -11
package/BookReader/images/marker_srch-on.svg +1 -11
package/BookReader/jquery-1.10.1.js +2 -108
package/BookReader/plugins/plugin.archive_analytics.js +1 -170
package/BookReader/plugins/plugin.archive_analytics.js.map +1 -1
package/BookReader/plugins/plugin.autoplay.js +1 -163
package/BookReader/plugins/plugin.autoplay.js.map +1 -1
package/BookReader/plugins/plugin.chapters.js +1 -333
package/BookReader/plugins/plugin.chapters.js.map +1 -1
package/BookReader/plugins/plugin.iframe.js +1 -72
package/BookReader/plugins/plugin.iframe.js.map +1 -1
package/BookReader/plugins/plugin.mobile_nav.js +1 -332
package/BookReader/plugins/plugin.mobile_nav.js.map +1 -1
package/BookReader/plugins/plugin.resume.js +1 -241
package/BookReader/plugins/plugin.resume.js.map +1 -1
package/BookReader/plugins/plugin.search.js +1 -1263
package/BookReader/plugins/plugin.search.js.map +1 -1
package/BookReader/plugins/plugin.text_selection.js +1 -839
package/BookReader/plugins/plugin.text_selection.js.map +1 -1
package/BookReader/plugins/plugin.tts.js +2 -9114
package/BookReader/plugins/plugin.tts.js.map +1 -1
package/BookReader/plugins/plugin.url.js +1 -768
package/BookReader/plugins/plugin.url.js.map +1 -1
package/BookReader/plugins/plugin.vendor-fullscreen.js +1 -326
package/BookReader/plugins/plugin.vendor-fullscreen.js.map +1 -1
package/BookReader/webcomponents-bundle.js +2 -411
package/BookReader/webcomponents-bundle.js.map +1 -1
package/BookReaderDemo/demo-internetarchive.html +86 -4
package/CHANGELOG.md +5 -0
package/package.json +1 -1
package/src/BookNavigator/bookmarks/ia-bookmarks.js +1 -0
package/src/BookNavigator/volumes/volumes-provider.js +9 -40
package/src/BookReader.js +102 -64
package/src/css/_controls.scss +4 -0
package/src/plugins/plugin.url.js +2 -218
package/tests/jest/BookReader.keyboard.test.js +190 -0
package/tests/jest/plugins/plugin.url.test.js +1 -151
package/.nvmrc +0 -1

package/BookReaderDemo/demo-internetarchive.html CHANGED Viewed

@@ -29,6 +29,10 @@
     <script type="module" src="../BookReader/bookreader-component-bundle.js"></script>
     <link rel="stylesheet" href="BookReaderDemo.css"/>
+    <!-- IA scripts -->
+    <script src="https://archive.org/bookreader/BookReaderJSIA.js"></script>
 </head>
 <body>
@@ -59,16 +63,94 @@
   <script id="pageUrl" type="text/javascript"></script>
   <script>
-    var ocaid = location.href.match(/ocaid=([^&#]+)/i)[1];
+    // gather params here
+    const urlParams = new URLSearchParams(window.location.search);
+    const ocaid = urlParams.get('ocaid');
+    const openFullImmersionTheater = urlParams.get('view') === 'theater';
+    const ui = urlParams.get('ui');
+    const autoflip = urlParams.get('autoflip');
+    const searchTerm = urlParams.get('q');
     // Override options coming from IA
     BookReader.optionOverrides.imagesBaseURL = '/BookReader/images/';
+    const initializeBookReader = (brManifest) => {
+      console.log('initializeBookReader', brManifest);
+      const br = new BookReader();
+      const iaBookManifestUrl = '';
+      const customAutoflipParams = {
+          autoflip: !!autoflip,
+          flipSpeed: urlParams.flipSpeed || 2000,
+          flipDelay: urlParams.flipDelay || 5000
+        };
+      const options = {
+        el: '#BookReader',
+        /* Url plugin - IA uses History mode for URL */
+        // commenting these out as demo uses hash mode
+        // keeping them here for reference
+        // urlHistoryBasePath: `/details/{$ocaid}/`,
+        // resumeCookiePath: `/details/{$ocaid}/`,
+        // urlMode: 'history',
+        // Only reflect these params onto the URL
+        // urlTrackedParams: ['page', 'search', 'mode'],
+        /* End url plugin */
+        enableBookTitleLink: false,
+        bookUrlText: null,
+        startFullscreen: urlParams.view === 'theater',
+        initialSearchTerm: searchTerm ? searchTerm : '',
+        // leaving this option commented out bc we change given user agent on archive.org
+        // onePage: { autofit: <?=json_encode($this->ios ? 'width' : 'auto')?> },
+        showToolbar: false,
+        /* Multiple volumes */
+        // To show multiple volumes:
+        enableMultipleBooks: false, // turn this on
+        multipleBooksList: [], // populate this  // TODO: get sample blob and tie into demo
+        /* End multiple volumes */
+      };
+      // we want to show item as embedded when ?ui=embed is in URI
+      if (ui === 'embed') {
+        options.mode = 1;
+        options.ui = 'embed';
+      }
+      // we expect this at the global level
+      BookReaderJSIAinit(brManifest.data, { ...options });
+      if (customAutoflipParams.autoflip) {
+        br.autoToggle(customAutoflipParams);
+      }
+    }
+    const fetchBookManifestAndInitializeBookreader = async (iaMetadata) => {
+      const {
+        metadata: {
+          identifier
+        },
+      } = iaMetadata;
+    const locator =`https://archive.org/bookreader/BookReaderJSLocate.php?format=json&subPrefix=&id=${identifier}`;
+      // Todo: move from `locator` to create `iaManifestUrl` url from `iaMetadata`
+      // so we can support multiple volumes
+      // const iaManifestUrl = `https://${server}/BookReader/BookReaderJSIA.php?format=jsonp&itemPath=${dir}&id=${identifier}`;
+      const manifest = await fetch(locator)
+      .then(response => response.json())
+      initializeBookReader(manifest);
+    }
     // Temp; Circumvent bug in BookReaderJSIA code
     window.Sentry = null;
-    var script_url = 'https://archive.org/bookreader/BookReaderJSLocate.php?subPrefix=&id=' + ocaid;
-    document.getElementById('pageUrl').src = script_url;
+    window.logError = function(e) {
+      console.error(e);
+    };
+    fetch(`https://archive.org/metadata/${ocaid}`)
+      .then(response => response.json())
+      .then(iaMetadata => fetchBookManifestAndInitializeBookreader(iaMetadata));
   </script>
 </body>

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,8 @@
+# 5.0.0-26
+Fix: read aloud play/pause button @nsharma123
+Dev: strict keyboard shortcuts @mc2
+Dev: update IA demo page @iisa
 # 5.0.0-24
 Fix: book-nav side panel zoom out @mc2
 Dev: refactor zoom code @mc2

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-24-sortingstate-11",
+  "version": "5.0.0-26",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",

package/src/BookNavigator/bookmarks/ia-bookmarks.js CHANGED Viewed

@@ -463,6 +463,7 @@ class IABookmarks extends LitElement {
     return html`
       <button
         class="ia-button primary"
+        tabindex="-1"
         ?disabled=${this.shouldEnableAddBookmarkButton}
         @click=${this.addBookmark}>
         Add bookmark

package/src/BookNavigator/volumes/volumes-provider.js CHANGED Viewed

@@ -7,16 +7,8 @@ import volumesIcon from '../assets/icon_volumes.js';
 import './volumes.js';
-const sortType = {
-  title_asc: 'title_asc',
-  title_desc: 'title_desc',
-  default: 'default'
-};
 export default class VolumesProvider {
-  /**
-   * @param {import('../../BookReader').default} bookreader
-   */
   constructor(baseHost, bookreader, optionChange) {
     this.optionChange = optionChange;
     this.component = document.createElement("viewable-files");
@@ -25,9 +17,6 @@ export default class VolumesProvider {
     this.viewableFiles = Object.keys(files).map(item => files[item]);
     this.volumeCount = Object.keys(files).length;
-    /** @type {import('../../BookReader').default} */
-    this.bookreader = bookreader;
     this.component.subPrefix = bookreader.options.subPrefix || "";
     this.component.hostUrl = baseHost;
     this.component.viewableFiles = this.viewableFiles;
@@ -36,28 +25,20 @@ export default class VolumesProvider {
     this.label = `Viewable files (${this.volumeCount})`;
     this.icon = html`${volumesIcon}`;
-    // get sort state from query param
-    this.bookreader.urlPlugin.pullFromAddressBar();
-    const urlSortValue = this.bookreader.urlPlugin.getUrlParam('sort');
-    console.log('urlSortValue: ', urlSortValue);
-    if (urlSortValue === sortType.title_asc || urlSortValue === sortType.title_desc) {
-      this.sortOrderBy = urlSortValue;
-    } else {
-      this.sortOrderBy = sortType.default;
-    }
-    this.sortVolumes(this.sortOrderBy);
+    this.sortOrderBy = "orig_sort";
+    this.sortVolumes("orig_sort");
   }
   get sortButton() {
     const sortIcons = {
-      default: html`
+      orig_sort: html`
         <button class="sort-by neutral-icon" aria-label="Sort volumes in initial order" @click=${() => this.sortVolumes("title_asc")}>${sortNeutralIcon}</button>
       `,
       title_asc: html`
         <button class="sort-by asc-icon" aria-label="Sort volumes in ascending order" @click=${() => this.sortVolumes("title_desc")}>${sortAscIcon}</button>
       `,
       title_desc: html`
-        <button class="sort-by desc-icon" aria-label="Sort volumes in descending order" @click=${() => this.sortVolumes("default")}>${sortDescIcon}</button>
+        <button class="sort-by desc-icon" aria-label="Sort volumes in descending order" @click=${() => this.sortVolumes("orig_sort")}>${sortDescIcon}</button>
       `,
     };
@@ -65,40 +46,28 @@ export default class VolumesProvider {
   }
   /**
-   * @param {'default' | 'title_asc' | 'title_desc'} sortByType
+   * @param {'orig_sort' | 'title_asc' | 'title_desc'} sortByType
    */
   sortVolumes(sortByType) {
     let sortedFiles = [];
     const files = this.viewableFiles;
     sortedFiles = files.sort((a, b) => {
-      if (sortByType === sortType.title_asc) return a.title.localeCompare(b.title);
-      else if (sortByType === sortType.title_desc) return b.title.localeCompare(a.title);
-      else return a.orig_sort - b.orig_sort;
+      if (sortByType === 'orig_sort') return a.orig_sort - b.orig_sort;
+      else if (sortByType === 'title_asc') return a.title.localeCompare(b.title);
+      else return b.title.localeCompare(a.title);
     });
     this.sortOrderBy = sortByType;
     this.component.viewableFiles  = [...sortedFiles];
     this.actionButton = this.sortButton;
-    if (this.sortOrderBy !== sortType.default) {
-      this.bookreader.urlPlugin.setUrlParam('sort', sortByType);
-    } else {
-      this.bookreader.urlPlugin.removeUrlParam('sort');
-    }
-    const urlSchema = this.bookreader.urlPlugin.urlSchema;
-    const urlState = this.bookreader.urlPlugin.urlState;
-    this.bookreader.urlPlugin.urlStateToUrlString(urlSchema, urlState);
-    this.bookreader.urlPlugin.pushToAddressBar();
     this.optionChange(this.bookreader);
     this.multipleFilesClicked(sortByType);
   }
   /**
-   * @param {'default' | 'title_asc' | 'title_desc'} orderBy
+   * @param {'orig_sort' | 'title_asc' | 'title_desc'} orderBy
    */
   multipleFilesClicked(orderBy) {
     if (!window.archive_analytics) {

package/src/BookReader.js CHANGED Viewed

@@ -264,6 +264,15 @@ BookReader.prototype.setup = function(options) {
     useSrcSet: this.options.useSrcSet,
     reduceSet: this.reduceSet,
   });
+  /**
+   * Flag if BookReader has "focus" for keyboard shortcuts
+   * Initially true, set to false when:
+   * - BookReader scrolled out of view
+   * Set to true when:
+   * - BookReader scrolled into view
+   */
+  this.hasKeyFocus = true;
 };
 /**
@@ -662,87 +671,116 @@ BookReader.prototype.resize = function() {
 };
 /**
- * Binds keyboard event listeners
+ * Binds keyboard and keyboard focus event listeners
  */
-BookReader.prototype.setupKeyListeners = function() {
-  var self = this;
+BookReader.prototype.setupKeyListeners = function () {
-  var KEY_PGUP = 33;
-  var KEY_PGDOWN = 34;
-  var KEY_END = 35;
-  var KEY_HOME = 36;
-  var KEY_LEFT = 37;
-  var KEY_UP = 38;
-  var KEY_RIGHT = 39;
-  var KEY_DOWN = 40;
-  // The minus(-) and equal(=) keys have different mappings for different browsers
-  var KEY_MINUS = 189; // Chrome
-  var KEY_MINUS_F = 173; // Firefox
-  var KEY_NUMPAD_SUBTRACT = 109;
-  var KEY_EQUAL = 187; // Chrome
-  var KEY_EQUAL_F = 61; // Firefox
-  var KEY_NUMPAD_ADD = 107;
-  // We use document here instead of window to avoid a bug in jQuery on IE7
-  $(document).on("keydown", function(e) {
-    // Keyboard navigation
-    switch (e.keyCode) {
-    case KEY_PGUP:
-    case KEY_UP:
-      // In 1up mode page scrolling is handled by browser
-      if (!utils.isInputActive() && self.constMode2up == self.mode) {
-        e.preventDefault();
-        self.prev();
-      }
+  // Keyboard focus by BookReader in viewport
+  //
+  // Intersection observer and callback sets BookReader keyboard
+  // "focus" flag off when the BookReader is not in the viewport.
+  if (window.IntersectionObserver) {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.intersectionRatio === 0) {
+          this.hasKeyFocus = false;
+        } else {
+          this.hasKeyFocus = true;
+        }
+      });
+    }, {
+      root: null,
+      rootMargin: '0px',
+      threshold: [0, 0.05, 1],
+    });
+    observer.observe(this.refs.$br[0]);
+  }
+  // Keyboard listeners
+  document.addEventListener('keydown', (e) => {
+    // Ignore if BookReader "focus" flag not set
+    if (!this.hasKeyFocus) {
+      return;
+    }
+    // Ignore if modifiers are active.
+    if (e.getModifierState('Control') ||
+      e.getModifierState('Alt') ||
+      e.getModifierState('Meta') ||
+      e.getModifierState('Win') /* hack for IE */) {
+      return;
+    }
+    // Ignore in input elements
+    if (utils.isInputActive()) {
+      return;
+    }
+    // KeyboardEvent code values:
+    //   https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
+    switch (e.key) {
+    // Page navigation
+    case "Home":
+      e.preventDefault();
+      this.first();
       break;
-    case KEY_DOWN:
-    case KEY_PGDOWN:
-      if (!utils.isInputActive() && self.constMode2up == self.mode) {
-        e.preventDefault();
-        self.next();
-      }
+    case "End":
+      e.preventDefault();
+      this.last();
       break;
-    case KEY_END:
-      if (!utils.isInputActive()) {
+    case "ArrowDown":
+    case "PageDown":
+    case "Down": // hack for IE and old Gecko
+      // In 1up and thumb mode page scrolling handled by browser
+      if (this.constMode2up === this.mode) {
         e.preventDefault();
-        self.last();
+        this.next();
       }
       break;
-    case KEY_HOME:
-      if (!utils.isInputActive()) {
+    case "ArrowUp":
+    case "PageUp":
+    case "Up": // hack for IE and old Gecko
+      // In 1up and thumb mode page scrolling handled by browser
+      if (this.constMode2up === this.mode) {
         e.preventDefault();
-        self.first();
+        this.prev();
       }
       break;
-    case KEY_LEFT:
-      if (!utils.isInputActive() && self.constModeThumb != self.mode) {
+    case "ArrowLeft":
+    case "Left": // hack for IE and old Gecko
+      // No y-scrolling in thumb mode
+      if (this.constModeThumb != this.mode) {
         e.preventDefault();
-        self.left();
+        this.left();
       }
       break;
-    case KEY_RIGHT:
-      if (!utils.isInputActive() && self.constModeThumb != self.mode) {
+    case "ArrowRight":
+    case "Right": // hack for IE and old Gecko
+      // No y-scrolling in thumb mode
+      if (this.constModeThumb != this.mode) {
         e.preventDefault();
-        self.right();
+        this.right();
       }
       break;
-    case KEY_MINUS:
-    case KEY_MINUS_F:
-    case KEY_NUMPAD_SUBTRACT:
-      if (!utils.isInputActive()) {
-        e.preventDefault();
-        self.zoom(-1);
-      }
+    // Zoom
+    case '-':
+    case 'Subtract':
+      e.preventDefault();
+      this.zoom(-1);
       break;
-    case KEY_EQUAL:
-    case KEY_EQUAL_F:
-    case KEY_NUMPAD_ADD:
-      if (!utils.isInputActive()) {
-        e.preventDefault();
-        self.zoom(+1);
-      }
+    case '+':
+    case '=':
+    case 'Add':
+      e.preventDefault();
+      this.zoom(1);
+      break;
+    // Fullscreen
+    case 'F':
+    case 'f':
+      e.preventDefault();
+      this.toggleFullscreen();
       break;
     }
   });

package/src/css/_controls.scss CHANGED Viewed

@@ -109,6 +109,10 @@
     &.visible {
       display: flex;
       animation: slideUp 0.2s;
+      button {
+        width: unset;
+        height: unset;
+      }
     }
     li {