@internetarchive/bookreader 5.0.0-101 → 5.0.0-103

package/src/BookReader/Navbar/Navbar.js

@@ -23,18 +23,23 @@ 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);
   }
 
-  controlFor(controlName) {
-    const option = this.br.options.controls[controlName];
+  /**
+   * @param {string} controlName
+   * @param {Object} optionOverrides
+   */
+  controlFor(controlName, optionOverrides = null) {
+    const brOption = this.br.options.controls[controlName];
+    const option = Object.assign({},brOption, optionOverrides);
     if (!option.visible) { return ''; }
     if (option.template) {
       return `<li>${option.template(this.br)}</li>`;
@@ -50,6 +55,7 @@ export class Navbar {
   /** @private */
   _renderControls() {
     return [
+      'toggleSlider',
       'bookLeft',
       'bookRight',
       'onePage',
@@ -126,6 +132,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 +208,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 +268,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 +277,24 @@ export class Navbar {
                   <div class="BRpager"></div>
                   <div class="BRnavline"></div>
                 </div>
+              </li>
+              ${this.controlFor('bookLeft', {visible: true})}
+              ${this.controlFor('bookRight', {visible: true})}
+            </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 hide">
+                  <div class="BRpager"></div>
+                  <div class="BRnavline"></div>
+                </div>
               </li>
               ${this._renderControls()}
             </ul>
@@ -304,7 +304,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 +313,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 +338,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 +360,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 +369,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 +391,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/_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.chapters.js

@@ -110,7 +110,7 @@ export class ChaptersPlugin extends BookReaderPlugin {
   _render() {
     this.br.shell.menuProviders['chapters'] = {
       id: 'chapters',
-      icon: html`<ia-icon-toc style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-toc>`,
+      icon: html`<ia-icon-toc aria-hidden="true" role="presentation" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-toc>`,
       label: 'Table of Contents',
       component: html`<br-chapters-panel
         .contents="${this._tocEntries}"

package/src/plugins/plugin.experiments.js

@@ -174,7 +174,7 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     this.br.shell.menuProviders['experiments'] = {
       id: 'experiments',
       icon: html`
-        <img src="${this.br.options.imagesBaseURL}/icon_experiment.svg" width="26"/>
+        <img src="${this.br.options.imagesBaseURL}/icon_experiment.svg" alt="" width="26"/>
       `,
       label: 'Experiments',
       component: html`<br-experiments-panel

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>

package/src/plugins/translate/TranslationManager.js

@@ -1,7 +1,7 @@
 // @ts-check
 import { Cache } from '../../util/cache.js';
 import { BatchTranslator } from '@internetarchive/bergamot-translator/translator.js';
-import { toISO6391 } from '../tts/utils.js';
+import { toISO6391, toNativeName } from '../tts/utils.js';
 
 export class TranslationManager {
   /** @type {Cache<{index: string, response: string}>} */
@@ -36,7 +36,7 @@ export class TranslationManager {
 
   constructor() {
     //TODO Should default to the book language as the first element
-    const enModel = {code: "en", name: "English", type: "prod"};
+    const enModel = {code: "en", name: "English (en)", type: "prod"};
     this.fromLanguages.push(enModel);
     this.toLanguages.push(enModel);
   }
@@ -77,10 +77,12 @@ export class TranslationManager {
       // List of dev models found here https://github.com/mozilla/firefox-translations-models/tree/main/models/base
       // There are also differences between the model types in the repo above here: https://github.com/mozilla/firefox-translations-models?tab=readme-ov-file#firefox-translations-models
       if (firstLang !== "en") {
-        this.fromLanguages.push({code: firstLang, name: toISO6391(firstLang, true), type: "prod"});
+        const name = `${toNativeName(firstLang)} (${toISO6391(firstLang)})`;
+        this.fromLanguages.push({code: firstLang, name: name, type: "prod"});
       }
       if (secondLang !== "en") {
-        this.toLanguages.push({code: secondLang, name: toISO6391(secondLang, true), type: "prod"});
+        const name = `${toNativeName(secondLang)} (${toISO6391(secondLang)})`;
+        this.toLanguages.push({code: secondLang, name: name, type: "prod"});
       }
     }
     this._initResolve([this.modelRegistry]);

package/src/plugins/tts/utils.js

@@ -1,3 +1,4 @@
+// @ts-check
 import langs from 'iso-language-codes';
 
 /**
@@ -24,43 +25,68 @@ export function isAndroid(userAgent = navigator.userAgent) {
 const specialLangs =  {
   "zh-hans": "中文 (Zhōngwén)",
 };
+
 /**
  * @typedef {string} ISO6391
  * Language code in ISO 639-1 format. e.g. en, fr, zh
- * Can also retrieve language native name + ISO 639-1 code
  **/
 
 /**
  * @param {string} language in some format
- * @param {boolean?} getName gets Native Name + language code if true
  * @return {ISO6391?}
  */
-export function toISO6391(language, getName = false) {
+export function toISO6391(language) {
   if (!language) return null;
-  language = language.toLowerCase();
+  language = language.toLocaleLowerCase();
+  if (specialLangs[language]) {
+    return language;
+  }
+  const codeObj = (
+    findLanguage(language, ['iso639_1']) ||
+    findLanguage(language, ['iso639_2T']) ||
+    findLanguage(language, ['iso639_2B', 'name', 'nativeName'])
+  );
+  if (codeObj) return codeObj.iso639_1;
+  return null;
+}
 
-  return searchForISO6391(language, ['iso639_1'], getName) ||
-    searchForISO6391(language, ['iso639_2T'], getName) ||
-    searchForISO6391(language, ['iso639_2B', 'nativeName', 'name'], getName);
+/**
+ *
+ * @param {string} language
+ * @returns {string}
+ */
+export function toNativeName(language) {
+  if (!language) return null;
+  language = language.toLocaleLowerCase();
+  if (specialLangs[language]) {
+    return specialLangs[language];
+  }
+  const codeObj = (
+    findLanguage(language, ['iso639_1']) ||
+    findLanguage(language, ['iso639_2T']) ||
+    findLanguage(language, ['iso639_2B', 'name', 'nativeName'])
+  );
+  if (codeObj?.nativeName) return codeObj.nativeName.split(", ")[0];
+  return null;
 }
 
+/** @typedef {import('iso-language-codes').Code} Code */
+
 /**
- * Searches for the given long in the given columns.
  * @param {string} language
- * @param {Array<keyof import('iso-language-codes').Code>} columnsToSearch
- * @param {boolean?} getName
- * @return {ISO6391?}
+ * @param {Array<'iso639_1' | 'iso639_2T' | 'iso639_2B' | 'nativeName' | 'name'>} fields
+ * @returns {Code | null}
  */
-function searchForISO6391(language, columnsToSearch, getName) {
+function findLanguage(language, fields) {
+  if (!language) return null;
+  language = language.toLowerCase();
   for (const lang of langs) {
-    for (const colName of columnsToSearch) {
-      if (lang[colName].split(', ').map(x => x.toLowerCase()).indexOf(language) != -1) {
-        if (getName) return `${lang.nativeName.split(", ")[0]} (${lang.iso639_1})`;
-        return lang.iso639_1;
+    for (const codeType of fields) {
+      if (lang[codeType]?.toLowerCase().split(", ").includes(language)) {
+        return lang;
       }
     }
   }
-  if (specialLangs[language]) return `${specialLangs[language]} (${language})`;
   return null;
 }