@internetarchive/bookreader 5.0.0-100 → 5.0.0-102

package/src/BookReader/Navbar/Navbar.js

@@ -23,11 +23,11 @@ export class Navbar {
 
     /** @type {Object} controls will be switch over "this.maximumControls" */
     this.minimumControls = [
-      'viewmode',
+      'toggle_slider', 'viewmode',
     ];
     /** @type {Object} controls will be switch over "this.minimumControls" */
     this.maximumControls = [
-      'book_left', 'book_right', 'zoom_in', 'zoom_out', 'onepg', 'twopg', 'thumb',
+      'BRnavpos', 'book_left', 'book_right', 'zoom_in', 'zoom_out', 'onepg', 'twopg', 'thumb',
     ];
 
     this.updateNavIndexThrottled = throttle(this.updateNavIndex.bind(this), 250, false);
@@ -50,6 +50,7 @@ export class Navbar {
   /** @private */
   _renderControls() {
     return [
+      'toggleSlider',
       'bookLeft',
       'bookRight',
       'onePage',
@@ -126,6 +127,9 @@ export class Navbar {
 
     // Map of jIcon class -> click handler
     const navigationControls = {
+      toggle_slider: () => {
+        this.br.toggleSlider();
+      },
       book_left: () => {
         this.br.trigger(EVENTS.stop);
         this.br.left();
@@ -199,71 +203,48 @@ export class Navbar {
    * Switch navbar controls on mobile and desktop
    */
   switchNavbarControls() {
-    if (this.br.refs.$brContainer.prop('clientWidth') < 640) {
-      this.showMinimumNavPageNum();
-      // we don't want navbar controls switching with liner-notes
-      if (this.br.options.bookType !== 'linerNotes') {
-        this.showMinimumNavbarControls();
-      }
-    } else {
-      this.showMaximumNavPageNum();
-      // we don't want navbar controls switching with liner-notes
-      if (this.br.options.bookType !== 'linerNotes') {
-        this.showMaximumNavbarControls();
+    // we don't want navbar controls switching with liner-notes
+    if (this.br.options.bookType !== 'linerNotes') {
+      if (this.br.refs.$brContainer.prop('clientWidth') < 640) {
+        this.showMobileControls();
+      } else {
+        this.showDesktopControls();
       }
     }
   }
 
   /**
-   * Switch Book Nav page number display to minimum/mobile
-   */
-  showMinimumNavPageNum() {
-    const minElement = document.querySelector('.BRcurrentpage.BRmin');
-    const maxElement = document.querySelector('.BRcurrentpage.BRmax');
-
-    if (minElement) minElement.classList.remove('hide');
-    if (maxElement) maxElement.classList.add('hide');
-  }
-
-  /**
-   * Switch Book Nav page number display to maximum/desktop
-   */
-  showMaximumNavPageNum() {
-    const minElement = document.querySelector('.BRcurrentpage.BRmin');
-    const maxElement = document.querySelector('.BRcurrentpage.BRmax');
-
-    if (minElement) minElement.classList.add('hide');
-    if (maxElement) maxElement.classList.remove('hide');
-  }
-
-  /**
-   * Switch Book Navbar controls to minimised
-   * NOTE: only `this.minimumControls` and `this.maximumControls` switch on resize
+   * Switch Book controls to mobile mode
+   * NOTE: `this.minimumControls`, `this.maximumControls`, and .BRnavMobile switch on resize
    */
-  showMinimumNavbarControls() {
+  showMobileControls() {
     this.minimumControls.forEach((control) => {
-      const element = document.querySelector(`.controls .${control}`);
+      const element = document.querySelector(`.BRnavMain .controls .${control}`);
       if (element) element.classList.remove('hide');
     });
     this.maximumControls.forEach((control) => {
-      const element = document.querySelector(`.controls .${control}`);
+      const element = document.querySelector(`.BRnavMain .controls .${control}`);
       if (element) element.classList.add('hide');
     });
+    const mobileNav = document.querySelector(`.BRnavMobile`);
+    if (mobileNav) mobileNav.classList.remove('hide');
   }
 
   /**
-   * Switch Book Navbar controls to maximized
-   * NOTE: only `this.minimumControls` and `this.maximumControls` switch on resize
+   * Switch Book controls to desktop mode
+   * NOTE: `this.minimumControls`, `this.maximumControls`, and .BRnavMobile switch on resize
    */
-  showMaximumNavbarControls() {
+  showDesktopControls() {
     this.maximumControls.forEach((control) => {
-      const element = document.querySelector(`.controls .${control}`);
+      const element = document.querySelector(`.BRnavMain .controls .${control}`);
       if (element) element.classList.remove('hide');
     });
     this.minimumControls.forEach((control) => {
-      const element = document.querySelector(`.controls .${control}`);
+      const element = document.querySelector(`.BRnavMain .controls .${control}`);
       if (element) element.classList.add('hide');
     });
+    const mobileNav = document.querySelector(`.BRnavMobile`);
+    if (mobileNav) mobileNav.classList.add('hide');
   }
 
   /**
@@ -282,7 +263,7 @@ export class Navbar {
 
     br.refs.$BRfooter = this.$root = $(`<div class="BRfooter"></div>`);
     br.refs.$BRnav = this.$nav = $(
-      `<div class="BRnav BRnavDesktop">
+      `<div class="BRnav BRnavMobile docked">
           ${title ? `<div class="BRnavTitle">${title}</div>` : ''}
           <nav class="BRcontrols">
             <ul class="controls">
@@ -291,10 +272,24 @@ export class Navbar {
                   <div class="BRpager"></div>
                   <div class="BRnavline"></div>
                 </div>
+              </li>
+              ${this.controlFor('bookLeft')}
+              ${this.controlFor('bookRight')}
+            </ul>
+          </nav>
+        </div>
+        <div class="BRnav BRnavMain">
+          ${title ? `<div class="BRnavTitle">${title}</div>` : ''}
+          <nav class="BRcontrols">
+            <ul class="controls">
+              <li class="scrubber">
                 <p>
-                  <span class="BRcurrentpage BRmax"></span>
-                  <span class="BRcurrentpage BRmin"></span>
+                  <span class="BRcurrentpage"></span>
                 </p>
+                <div class="BRnavpos">
+                  <div class="BRpager"></div>
+                  <div class="BRnavline"></div>
+                </div>
               </li>
               ${this._renderControls()}
             </ul>
@@ -304,7 +299,8 @@ export class Navbar {
     this.$root.append(this.$nav);
     br.refs.$br.append(this.$root);
 
-    const $slider = this.$root.find('.BRpager').slider({
+    /** @type {JQuery} sliders */
+    const $sliders = this.$root.find('.BRpager').slider({
       animate: true,
       min: 0,
       max: br.book.getNumLeafs() - 1,
@@ -312,16 +308,16 @@ export class Navbar {
       range: "min",
     });
 
-    $slider.on('slide', (event, ui) => {
+    $sliders.on('slide', (event, ui) => {
       this.updateNavPageNum(ui.value);
       return true;
     });
 
-    $slider.on('slidechange', (event, ui) => {
+    $sliders.on('slidechange', (event, ui) => {
       this.updateNavPageNum(ui.value);
       // recursion prevention for jumpToIndex
-      if ($slider.data('swallowchange')) {
-        $slider.data('swallowchange', false);
+      if ($(event.currentTarget).data('swallowchange')) {
+        $(event.currentTarget).data('swallowchange', false);
       } else {
         br.jumpToIndex(ui.value);
       }
@@ -337,10 +333,9 @@ export class Navbar {
   /**
   * Returns the textual representation of the current page for the navbar
   * @param {number} index
-  * @param {boolean} [useMaxFormat = false]
   * @return {string}
   */
-  getNavPageNumString(index, useMaxFormat = false) {
+  getNavPageNumString(index) {
     const { br } = this;
     // Accessible index starts at 0 (alas) so we add 1 to make human
     const pageNum = br.book.getPageNum(index);
@@ -360,7 +355,7 @@ export class Navbar {
       this.maxPageNum = maxPageNum;
     }
 
-    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum, useMaxFormat);
+    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum);
 
   }
 
@@ -369,8 +364,7 @@ export class Navbar {
    * @param {number} index
    */
   updateNavPageNum(index) {
-    this.$root.find('.BRcurrentpage.BRmax').html(this.getNavPageNumString(index, true));
-    this.$root.find('.BRcurrentpage.BRmin').html(this.getNavPageNumString(index));
+    this.$root.find('.BRcurrentpage').html(this.getNavPageNumString(index, true));
   }
 
   /**
@@ -392,25 +386,14 @@ export class Navbar {
  * @param {number|string} pageNum
  * @param {*} pageType - Deprecated
  * @param {number} maxPageNum
- * @param {boolean} [useMaxFormat = false]
  * @return {string}
  */
-export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum, useMaxFormat = false) {
+export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum) {
   const pageIsAsserted = pageNum[0] != 'n';
   const pageIndex = index + 1;
 
   if (!pageIsAsserted) {
     pageNum = '—';
   }
-
-  if (useMaxFormat === true) {
-    return `Page ${pageNum} (${pageIndex}/${numLeafs})`;
-  }
-
-  if (!pageIsAsserted) {
-    return `(${pageIndex} of ${numLeafs})`;
-  }
-
-  const bookLengthLabel = (maxPageNum && parseFloat(pageNum)) ? ` of ${maxPageNum}` : '';
-  return `${pageNum}${bookLengthLabel}`;
+  return `Page ${pageNum} (${pageIndex}/${numLeafs})`;
 }

package/src/BookReader/options.js

@@ -258,6 +258,12 @@ export const DEFAULT_OPTIONS = {
   getEmbedCode: null,
 
   controls: {
+    toggleSlider: {
+      visible: true,
+      label: 'Toggle page controls',
+      className: 'toggle_slider',
+      iconClassName: 'toggle-slider',
+    },
     bookLeft: {
       visible: true,
       label: 'Flip left',

package/src/BookReader.js

@@ -1380,6 +1380,17 @@ BookReader.prototype.exitFullScreen = async function () {
   this.refs.$br.removeClass('BRfullscreenAnimation');
 };
 
+/**
+ * Toggles the mobile slider and page controls
+ */
+BookReader.prototype.toggleSlider = function () {
+  const toggleButton = this.refs.$BRnav.find('.toggle_slider');
+  const mobileControls = this.refs.$br.find('.BRnavMobile');
+
+  toggleButton.toggleClass('active');
+  mobileControls.toggleClass('docked');
+};
+
 /**
  * Returns the currently active index
  * @return {number}
@@ -1734,6 +1745,7 @@ BookReader.prototype.initUIStrings = function() {
     '.share': 'Share this book',
     '.info': 'About this book',
     '.full': 'Toggle fullscreen',
+    '.toggle_slider': 'Toggle page controls',
     '.book_left': 'Flip left',
     '.book_right': 'Flip right',
     '.play': 'Play',

package/src/assets/icons/slider-toggle.svg

@@ -0,0 +1 @@
+<svg height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd" transform="translate(0 23)"><path d="m35 0v54l-35-27.8266318zm30 0 35 26.1733682-35 27.8266318z"/><circle cx="50" cy="27.236059" r="10"/></g></svg>

package/src/css/_BRnav.scss

@@ -118,7 +118,6 @@
     height: 100%;
   }
 
-
   .BRToolbarButton {
     .icon {
       width: $toolbarHeight;
@@ -226,6 +225,12 @@
     border: none;
   }
 
+  &.ui-slider-docked {
+    height: 1px;
+    width: 100%;
+    margin: 0px;
+  }
+
   .ui-slider-horizontal .ui-slider-handle,
   .ui-slider-handle {
     position: absolute;
@@ -262,10 +267,10 @@
 }
 .BRcurrentpage {
   display: inline-block;
-  text-align: center;
+  text-align: left;
   padding: 0 0 0 0;
   font-size: $brFontSizeSmaller;
-  margin-left: 5px;
+  margin-left: 15px;
   margin-right: 10px;
   line-height: 1;
 }
@@ -310,7 +315,6 @@
   .BRnavline .BRchapter { display: none; }
 
   .BRpager.ui-slider {
-    height: 10px;
     top: math.div($brNavHeightMobile, 2) - 5px;
   }
 }
@@ -325,3 +329,52 @@
 .DrawerSettingsWrapper .zoom_in {
   background-position: -1384px center;
 }
+
+.BRnavMobile {
+  box-sizing: content-box;
+}
+
+.BRnavMobile.docked {
+  height: 0px;
+  border: none;
+  .BRcontrols .scrubber .BRpager.ui-slider {
+    top: -1px;
+  }
+
+  .ui-slider,
+  .ui-slider-range {
+    height: 2px;
+    border-radius: 0px;
+  }
+
+  .BRnavpos {
+    margin: 0px;
+  }
+
+  .scrubber {
+    margin: 0px;
+    padding: 0px;
+    height: 0px;
+  }
+
+  .controls {
+    padding: 0px;
+    background-color: transparent;
+  }
+
+  .BRnavline {
+    display: none;
+  }
+
+  .ui-slider-handle {
+    display: none;
+  }
+
+  button {
+    display: none;
+  }
+}
+
+.BRnavMobile.hide {
+  display: none;
+}

package/src/css/_BRpages.scss

@@ -91,6 +91,15 @@
   }
 }
 
+// Used for search result rectangles
+svg.BRPageLayer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 // Hides page layers during page flip animation
 .BRpageFlipping .BRtextLayer {
   display: none;

package/src/css/_icons.scss

@@ -119,3 +119,10 @@
   height: 12px;
   background-image: url("icons/close-circle-dark.svg");
 }
+
+.icon-toggle-slider {
+  background-size: 25px;
+  width: 25px;
+  height: 25px;
+  background-image: url("icons/slider-toggle.svg");
+}

package/src/plugins/plugin.text_selection.js

@@ -137,6 +137,15 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     if ($textLayers.length) return;
     const XMLpage = await this.getPageText(pageIndex);
     if (!XMLpage) return;
+    // Seeing some 0 left and 0 top coordinates in OCR, remove it entirely to prevent odd rendering
+    // eg https://archive.org/details/illustratedbooko00robe/page/n11/mode/2up
+    $(XMLpage).find("WORD").filter((_, ele) => {
+      const [left, , , top] = ele.getAttribute('coords').split(",").map(parseFloat);
+      if (left == 0 && top == 0) {
+        console.error("Found invalid ocr word coordinates");
+        return true;
+      }
+    }).remove();
     recursivelyAddCoords(XMLpage);
 
     const totalWords = $(XMLpage).find("WORD").length;

package/src/plugins/search/plugin.search.js

@@ -26,6 +26,7 @@ import SearchView from './view.js';
 import { marshallSearchResults } from './utils.js';
 import { BookReaderPlugin } from '../../BookReaderPlugin.js';
 import { applyVariables } from '../../util/strings.js';
+import { toISO6391 } from '../tts/utils.js';
 /** @typedef {import('../../BookReader/PageContainer').PageContainer} PageContainer */
 /** @typedef {import('../../BookReader/BookModel').PageIndex} PageIndex */
 /** @typedef {import('../../BookReader/BookModel').LeafNum} LeafNum */
@@ -239,11 +240,13 @@ export class SearchPlugin extends BookReaderPlugin {
    * @param {boolean} options.goToFirstResult
    */
   BRSearchCallback(results, options) {
+    const bookLangCode = toISO6391(this.br.options.bookLanguage);
     marshallSearchResults(
       results,
       pageNum => this.br.book.getPageNum(this.br.book.leafNumToIndex(pageNum)),
       this.options.preTag,
       this.options.postTag,
+      bookLangCode,
     );
     this.searchResults = results || null;
 
@@ -435,6 +438,7 @@ BookReader?.registerPlugin('search', SearchPlugin);
  * @property {string} displayPageNumber (fake field) The page number as it should be displayed in the UI.
  * @property {string} html (computed field) The html-escaped raw html to display in the UI.
  * @property {string} text
+ * @property {string} lang (fake field) The ISO 639-1 language code of the book
  * @property {Array<{ page: number, boxes: SearchInsideMatchBox[] }>} par
  */
 

package/src/plugins/search/utils.js

@@ -1,4 +1,8 @@
+// @ts-check
 import { escapeHTML, escapeRegExp } from '../../BookReader/utils.js';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideResults} SearchInsideResults */
+/** @typedef {import('@/src/plugins/search/plugin.search.js').LeafNum} LeafNum */
+/** @typedef {import('@/src/plugins/search/plugin.search.js').PageNumString} PageNumString */
 
 /**
  * @param {string} match
@@ -26,14 +30,17 @@ export function renderMatch(match, preTag, postTag) {
  * @param {(pageNum: LeafNum) => PageNumString} displayPageNumberFn
  * @param {string} preTag
  * @param {string} postTag
+ * @param {string | null} bookLanguage The ISO 639-1 language code of the book
  */
-export function marshallSearchResults(results, displayPageNumberFn, preTag, postTag) {
+export function marshallSearchResults(results, displayPageNumberFn, preTag, postTag, bookLanguage) {
   // Attach matchIndex to a few things to make it easier to identify
   // an active/selected match
+
   for (const [index, match] of results.matches.entries()) {
     match.matchIndex = index;
     match.displayPageNumber = displayPageNumberFn(match.par[0].page);
     match.html = renderMatch(match.text, preTag, postTag);
+    match.lang = bookLanguage;
     for (const par of match.par) {
       for (const box of par.boxes) {
         box.matchIndex = index;

package/src/plugins/search/view.js

@@ -60,7 +60,7 @@ class SearchView {
 
   renderSearchNavigation() {
     const selector = 'BRsearch-navigation';
-    $('.BRnav').before(`
+    $('.BRnav.BRnavMain').before(`
       <div class="${selector}">
         <button class="toggle-sidebar">
           <h4>