@internetarchive/bookreader 5.0.0-42-a2 → 5.0.0-44-a1

package/BookReaderDemo/IADemoBr.js

@@ -14,6 +14,25 @@ const searchTerm = urlParams.get('q');
 
 const iaBookReader = document.querySelector('ia-bookreader');
 
+const downloadListWithLCP = [
+  [
+    "PDF",
+    "regular pdf link"
+  ],
+  [
+    "lcpPDF",
+    "link to lcp pdf"
+  ],
+  [
+    "ePub",
+    "link to epub"
+  ],
+  [
+    "lcpEPUB",
+    "link to lcp epub"
+  ]
+];
+
 if (openFullImmersionTheater) {
   $(document.body).addClass('BRfullscreenActive');
   iaBookReader.fullscreen = openFullImmersionTheater;
@@ -78,6 +97,17 @@ const initializeBookReader = (brManifest) => {
 
 window.initializeBookReader = initializeBookReader;
 
+const showLCP = document.querySelector('#show-lcp');
+showLCP.addEventListener('click', async () => {
+  const iaBr = document.querySelector('ia-bookreader');
+  const bookNav = iaBr.shadowRoot.querySelector('book-navigator');
+
+  bookNav.downloadableTypes = downloadListWithLCP;
+
+  bookNav.updateMenuContents();
+  await bookNav.updateComplete;
+});
+
 const multiVolume = document.querySelector('#multi-volume');
 multiVolume.addEventListener('click', () => {
   // remove everything

package/BookReaderDemo/demo-internetarchive.html

@@ -77,6 +77,9 @@
       <p>Features behind signed in gate: Bookmarks</p>
       <p>Logged In Status: <span id="logged-in-status">Logged Out</span></p>
     </div>
+    <div class="demo">
+      <button id="show-lcp">LCP Download option</button>
+    </div>
     <div class="demo">
       <button id="multi-volume">Multiple books</button>
     </div>

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 5.0.0-43
+Fix: search results panel display asserted page numbers @cdrini
+Dev: dependency updates @renovate
+Dev: node-fetch update @cdrini
+
+# 5.0.0-42
+Dev: update testing dependencies @renovate
+Dev: update `<ia-item-navigator>` @iisa
+
 # 5.0.0-40
 Fix: Better search highlights @cdrini
 Dev: update lit 2 components @iisa

package/babel.config.js

@@ -2,7 +2,7 @@ module.exports = {
   presets: [
     [
       "@babel/preset-env",
-      {
+      process.env.NODE_ENV == 'test' ? { targets: {esmodules: true} } : {
         targets: "> 2%, ie 11, edge 14, samsung > 9, OperaMini all, UCAndroid > 12, Safari >= 9",
         useBuiltIns: "usage",
         corejs: 3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-42-a2",
+  "version": "5.0.0-44-a1",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -41,19 +41,18 @@
     "lit": "^2.2.2"
   },
   "devDependencies": {
-    "@babel/core": "7.17.5",
+    "@babel/core": "7.17.9",
     "@babel/eslint-parser": "7.17.0",
     "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/plugin-proposal-decorators": "7.17.2",
+    "@babel/plugin-proposal-decorators": "7.17.9",
     "@babel/preset-env": "7.16.11",
-    "@open-wc/testing": "^3.1.3",
-    "@open-wc/testing-karma": "^4.0.9",
-    "@types/jest": "^27.4.1",
+    "@open-wc/testing-helpers": "^2.1.2",
+    "@types/jest": "^27.5.1",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "babel-loader": "8.2.3",
+    "babel-loader": "8.2.5",
     "codecov": "^3.8.3",
-    "concurrently": "7.0.0",
-    "core-js": "3.16.2",
+    "concurrently": "7.1.0",
+    "core-js": "3.22.3",
     "cpx2": "4.2.0",
     "eslint": "^7.32.0",
     "eslint-plugin-no-jquery": "^2.7.0",
@@ -61,30 +60,30 @@
     "hammerjs": "^2.0.8",
     "http-server": "14.1.0",
     "iso-language-codes": "1.1.0",
-    "jest": "^27.5.1",
-    "jquery": "1.11.3",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "jquery": "1.12.4",
     "jquery-colorbox": "1.6.4",
     "jquery-ui": "1.12.1",
     "jquery-ui-touch-punch": "0.2.3",
     "jquery.browser": "0.1.0",
     "jquery.mmenu": "5.6.5",
-    "karma-coverage": "^2.1.0",
-    "live-server": "1.2.1",
-    "node-fetch": "2.6.7",
+    "live-server": "1.2.2",
+    "node-fetch": "3.2.4",
     "regenerator-runtime": "0.13.9",
-    "sass": "1.38.2",
-    "sinon": "^12.0.1",
+    "sass": "1.51.0",
+    "sinon": "^14.0.0",
     "soundmanager2": "2.97.20170602",
-    "svgo": "2.4.0",
+    "svgo": "2.8.0",
     "testcafe": "^1.18.6",
     "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",
     "webpack": "5.51.1",
-    "webpack-cli": "4.8.0"
+    "webpack-cli": "4.9.2"
   },
   "jest": {
     "testEnvironment": "jsdom",
     "transformIgnorePatterns": [
-      "node_modules/(?!(lit-html|lit-element|lit|@lit|@internetarchive)/)"
+      "node_modules/(?!(lit-html|lit-element|lit|@lit|@internetarchive|@open-wc)/)"
     ],
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/$1"
@@ -95,8 +94,7 @@
     "roots": [
       "<rootDir>/src/",
       "<rootDir>/tests/jest/"
-    ],
-    "coverageDirectory": "<rootDir>/coverage-jest"
+    ]
   },
   "scripts": {
     "preversion": "npm run test && node scripts/preversion.js",
@@ -115,15 +113,12 @@
     "serve": "npx http-server . --port 8000",
     "serve-live": "npx live-server . --port 8000 --watch=index.html,BookReader,BookReaderDemo",
     "serve-dev": "npm run build-css && npx concurrently --kill-others npm:serve-live npm:build-*:watch",
-    "test": "npx concurrently --group npm:test-jest npm:test-karma",
+    "test": "npx jest --coverage --colors",
+    "test:watch": "npx jest --watch",
     "test:e2e": "npm run build && npx testcafe",
     "test:e2e:dev": "npx testcafe --live --dev",
-    "test-jest:watch": "npx jest --watch",
-    "test-jest": "npx jest --coverage --colors",
-    "test-karma": "npx karma start --coverage",
-    "test-karma:watch": "npx karma start --auto-watch=true --single-run=false",
     "DOCS:update:test-deps": "If CI succeeds, these should be good to update",
-    "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing@latest @open-wc/testing-karma@latest @types/jest@latest codecov@latest eslint@latest eslint-plugin-testcafe@latest jest@latest karma-coverage@latest sinon@latest testcafe@latest",
+    "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing-helpers@latest @types/jest@latest codecov@latest eslint@latest eslint-plugin-testcafe@latest jest@latest sinon@latest testcafe@latest",
     "DOCS:update:build-deps": "These can cause strange changes, so do an npm run build + check file size (git diff --stat), and check the site is as expected",
     "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest babel-loader@latest core-js@latest regenerator-runtime@latest sass@latest svgo@latest webpack@latest webpack-cli@latest",
     "codecov": "npx codecov"

package/renovate.json

@@ -1,20 +1,20 @@
 {
   "extends": [
-    "config:base"
+    "config:base",
+    "schedule:monthly"
   ],
   "packageRules": [
     {
       "matchPackageNames": [
         "@babel/eslint-parser",
-        "@open-wc/testing",
-        "@open-wc/testing-karma",
+        "@open-wc/testing-helpers",
         "@types/jest",
         "codecov",
         "eslint",
         "eslint-plugin-no-jquery",
         "eslint-plugin-testcafe",
         "jest",
-        "karma-coverage",
+        "jest-environment-jsdom",
         "sinon",
         "testcafe"
       ],
@@ -38,6 +38,15 @@
     {
       "matchPackagePatterns": ["*"],
       "rangeStrategy": "bump"
+    },
+    {
+      "matchPackagePatterns": ["^actions/"],
+      "groupName": "GitHub Actions",
+      "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["^@internetarchive"],
+      "schedule": ["at any time"]
     }
   ]
 }

package/scripts/preversion.js

@@ -1,8 +1,11 @@
 const { version: OLD_VERSION } = require('../package.json');
-const fetch = require('node-fetch');
 const OLD_RELEASE_URL = `https://api.github.com/repos/internetarchive/bookreader/releases/tags/v${OLD_VERSION}`;
 
 async function main() {
+    // Need this because fetch is ESM-only, and we're on Node 16. Someday we should
+    // be able to move this up to the top without renaming this file to a .mjs or whatever
+    const {default: fetch} = await import('node-fetch');
+
     const {created_at} = await fetch(OLD_RELEASE_URL).then(r => r.json());
     const today = new Date().toISOString().slice(0, -5);
     const searchUrl = 'https://github.com/internetarchive/bookreader/pulls?' + new URLSearchParams({

package/src/BookNavigator/book-navigator.js

@@ -106,6 +106,10 @@ export class BookNavigator extends LitElement {
       this.loadSharedObserver();
       this.initializeBookSubmenus();
     }
+
+    if (changed.has('downloadableTypes')) {
+      this.initializeBookSubmenus();
+    }
   }
 
   /**

package/src/BookNavigator/downloads/downloads-provider.js

@@ -8,16 +8,28 @@ const menuBase = {
     url: '#',
     note: 'PDF files contain high quality images of pages.',
   },
+  lcppdf: {
+    type: 'Get LCP PDF',
+    url: '#',
+    note: 'PDF files contain high quality images of pages.',
+  },
+  lcpepub: {
+    type: 'Get LCP ePub',
+    url: '#',
+    note: 'ePub files are smaller in size, but may contain errors.',
+  },
   epub: {
     type: 'Encrypted Adobe ePub',
     url: '#',
     note: 'ePub files are smaller in size, but may contain errors.',
-  }
+  },
 };
 
 const publicMenuBase = {
   pdf: "PDF",
-  epub: "ePub"
+  epub: "ePub",
+  lcppdf: "LCP PDF",
+  lcpepub: "LCP ePub",
 };
 
 export default class DownloadsProvider {
@@ -30,9 +42,6 @@ export default class DownloadsProvider {
     this.id = 'downloads';
     this.component = '';
     this.isBookProtected = bookreader?.options?.isProtected || false;
-
-    this.computeAvailableTypes = this.computeAvailableTypes.bind(this);
-    this.update = this.update.bind(this);
   }
 
   update(downloadTypes) {

package/src/BookNavigator/downloads/downloads.js

@@ -40,6 +40,16 @@ export class IABookDownloads extends LitElement {
     ));
   }
 
+  /**
+   * checks if downloads list contains an LCP option
+   * @return {boolean}
+   */
+  get hasLCPOption() {
+    const regex = /^(LCP)/g;
+    const lcpAvailable = this.downloads.some(option => option.type?.match(regex));
+    return lcpAvailable;
+  }
+
   get header() {
     if (!this.renderHeader) {
       return nothing;
@@ -59,12 +69,24 @@ export class IABookDownloads extends LitElement {
     `;
   }
 
+  get installSimplyEAldikoThoriumMsg() {
+    return html`
+    <p>For LCP downloads, make sure you have SimplyE or Aldiko Next installed on mobile or Thorium on desktop.</p>
+    <ul>
+      <li><a href="https://librarysimplified.org/simplye/" rel="noopener noreferrer" target="_blank">Install SimplyE</a></li>
+      <li><a href="https://www.demarque.com/en-aldiko" rel="noopener noreferrer" target="_blank">Install Aldiko</a></li>
+      <li><a href="https://www.edrlab.org/software/thorium-reader/" rel="noopener noreferrer" target="_blank">Install Thorium</a></li>
+    </ul>
+  `;
+  }
+
   render() {
     return html`
       ${this.header}
       ${this.loanExpiryMessage}
       <ul>${this.renderDownloadOptions()}</ul>
-      ${this.isBookProtected ? this.accessProtectedBook : nothing}
+      ${this.hasLCPOption ? this.installSimplyEAldikoThoriumMsg : nothing}
+      ${this.isBookProtected && !this.hasLCPOption ? this.accessProtectedBook : nothing}
     `;
   }
 

package/src/BookNavigator/search/a-search-result.js

@@ -1,5 +1,6 @@
 import { html, LitElement, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
 
 export class BookSearchResult extends LitElement {
   static get properties() {
@@ -35,17 +36,14 @@ export class BookSearchResult extends LitElement {
   }
 
   render() {
-    const { match } = this;
-    const { par = [] } = match;
-    const [resultDetails = {}] = par;
-    const pageNumber = Number.isInteger(resultDetails.page)
-      ? html`<p class="page-num">Page -${resultDetails.page}-</p>` : nothing;
+    /** @type {SearchInsideMatch} */
+    const match = this.match;
     const coverImage = html`<img src="${match.cover}" />`;
     return html`
       <li @click=${this.resultSelected}>
         ${match.cover ? coverImage : nothing}
         <h4>${match.title || nothing}</h4>
-        ${pageNumber}
+        <p class="page-num">Page ${match.displayPageNumber}</p>
         ${this.highlightedHit(match.text)}
       </li>
     `;

package/src/css/_controls.scss

@@ -34,12 +34,11 @@
     -webkit-appearance: none;
     appearance: none;
     font-size: 10px;
-    text-align: center;
     text-align-last: center;
     color: $controlsText;
     border: none;
     cursor: pointer;
-    option {
+    option, optgroup {
       background: $controlsBG;
     }
   }

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

@@ -29,6 +29,8 @@ import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.
 import SearchView from './view.js';
 /** @typedef {import('../../BookReader/PageContainer').PageContainer} PageContainer */
 /** @typedef {import('../../BookReader/BookModel').PageIndex} PageIndex */
+/** @typedef {import('../../BookReader/BookModel').LeafNum} LeafNum */
+/** @typedef {import('../../BookReader/BookModel').PageNumString} PageNumString */
 
 jQuery.extend(BookReader.defaultOptions, {
   server: 'ia600609.us.archive.org',
@@ -257,6 +259,7 @@ BookReader.prototype.cancelSearchRequest = function () {
 /**
  * @typedef {object} SearchInsideMatch
  * @property {number} matchIndex This is a fake field! Not part of the API response. It is added by the JS.
+ * @property {string} displayPageNumber (fake field) The page number as it should be displayed in the UI.
  * @property {string} text
  * @property {Array<{ page: number, boxes: SearchInsideMatchBox[] }>} par
  */
@@ -269,22 +272,32 @@ BookReader.prototype.cancelSearchRequest = function () {
  */
 
 /**
- * Search Results return handler
+ * Attach some fields to search inside results
  * @param {SearchInsideResults} results
- * @param {object} options
- * @param {boolean} options.goToFirstResult
+ * @param {(pageNum: LeafNum) => PageNumString} displayPageNumberFn
  */
-BookReader.prototype.BRSearchCallback = function(results, options) {
+export function marshallSearchResults(results, displayPageNumberFn) {
   // 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);
     for (const par of match.par) {
       for (const box of par.boxes) {
         box.matchIndex = index;
       }
     }
   }
+}
+
+/**
+ * Search Results return handler
+ * @param {SearchInsideResults} results
+ * @param {object} options
+ * @param {boolean} options.goToFirstResult
+ */
+BookReader.prototype.BRSearchCallback = function(results, options) {
+  marshallSearchResults(results, pageNum => this.getPageNum(this.leafNumToIndex(pageNum)));
   this.searchResults = results || [];
 
   this.updateSearchHilites();

package/src/plugins/search/view.js

@@ -230,9 +230,7 @@ class SearchView {
     matches.forEach((match) => {
       const queryString = match.text;
       const pageIndex = this.br.leafNumToIndex(match.par[0].page);
-      const pageNumber = this.br.getPageNum(pageIndex);
       const uiStringSearch = "Search result"; // i18n
-      const uiStringPage = "Page"; // i18n
 
       const percentThrough = this.br.constructor.util.cssPercentage(pageIndex, this.br.getNumLeafs() - 1);
 
@@ -257,7 +255,7 @@ class SearchView {
         .append(`
           <div class="BRquery">
             <div>${queryStringWithBTruncated || queryStringWithB}</div>
-            <div>${uiStringPage} ${pageNumber}</div>
+            <div>Page ${match.displayPageNumber}</div>
           </div>
         `)
         .appendTo(this.br.$('.BRnavline'))

package/src/plugins/tts/plugin.tts.js

@@ -158,18 +158,30 @@ BookReader.prototype.initNavbar = (function (super_) {
 
       $el.find('.BRcontrols').prepend(this.refs.$BRReadAloudToolbar);
 
+      const renderVoiceOption = (voices) => {
+        return voices.map(voice =>
+          `<option value="${voice.voiceURI}">${voice.lang} - ${voice.name}</option>`).join('');
+      };
+
+      const voiceSortOrder = (a,b) => `${a.lang} - ${a.name}`.localeCompare(`${b.lang} - ${b.name}`);
+
       const renderVoicesMenu = (voicesMenu) => {
         voicesMenu.empty();
+        const bookLanguage = this.ttsEngine.opts.bookLanguage;
+        const bookLanguages = this.ttsEngine.getVoices().filter(v => v.lang.startsWith(bookLanguage)).sort(voiceSortOrder);
+        const otherLanguages = this.ttsEngine.getVoices().filter(v => !v.lang.startsWith(bookLanguage)).sort(voiceSortOrder);
+
         if (this.ttsEngine.getVoices().length > 1) {
-          voicesMenu.append(this.ttsEngine.getVoices().map(
-            voice =>
-              $(`<option value="${voice.voiceURI}">${voice.lang} - ${voice.name}</option>`)));
+          voicesMenu.append($(`<optgroup label="Book Language (${bookLanguage})"> ${renderVoiceOption(bookLanguages)} </optgroup>`));
+          voicesMenu.append($(`<optgroup label="Other Languages"> ${renderVoiceOption(otherLanguages)} </optgroup>`));
+
           voicesMenu.val(this.ttsEngine.voice.voiceURI);
           voicesMenu.show();
         } else {
           voicesMenu.hide();
         }
       };
+
       const voicesMenu = this.refs.$BRReadAloudToolbar.find('[name=playback-voice]');
       renderVoicesMenu(voicesMenu);
       voicesMenu.on("change", ev => this.ttsEngine.setVoice(voicesMenu.val()));