@internetarchive/bookreader 5.0.0-43 → 5.0.0-44-a3

package/BookReaderDemo/IADemoBr.js

@@ -14,6 +14,17 @@ const searchTerm = urlParams.get('q');
 
 const iaBookReader = document.querySelector('ia-bookreader');
 
+const downloadListWithLCP = [
+  [
+    "lcpPDF",
+    "link to lcp pdf"
+  ],
+  [
+    "lcpEPUB",
+    "link to lcp epub"
+  ]
+];
+
 if (openFullImmersionTheater) {
   $(document.body).addClass('BRfullscreenActive');
   iaBookReader.fullscreen = openFullImmersionTheater;
@@ -78,6 +89,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/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-43",
+  "version": "5.0.0-44-a3",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -46,38 +46,36 @@
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/plugin-proposal-decorators": "7.17.9",
     "@babel/preset-env": "7.16.11",
-    "@open-wc/testing": "^3.1.4",
-    "@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.5",
     "codecov": "^3.8.3",
-    "concurrently": "7.1.0",
+    "concurrently": "7.2.2",
     "core-js": "3.22.3",
     "cpx2": "4.2.0",
     "eslint": "^7.32.0",
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-testcafe": "^0.2.1",
     "hammerjs": "^2.0.8",
-    "http-server": "14.1.0",
+    "http-server": "14.1.1",
     "iso-language-codes": "1.1.0",
-    "jest": "^28.0.3",
-    "jest-environment-jsdom": "^28.0.2",
+    "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.2",
-    "node-fetch": "3.2.4",
+    "node-fetch": "3.2.10",
     "regenerator-runtime": "0.13.9",
-    "sass": "1.51.0",
-    "sinon": "^13.0.2",
+    "sass": "1.52.1",
+    "sinon": "^14.0.0",
     "soundmanager2": "2.97.20170602",
     "svgo": "2.8.0",
-    "testcafe": "^1.18.6",
+    "testcafe": "^1.19.0",
     "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",
     "webpack": "5.51.1",
     "webpack-cli": "4.9.2"
@@ -96,8 +94,7 @@
     "roots": [
       "<rootDir>/src/",
       "<rootDir>/tests/jest/"
-    ],
-    "coverageDirectory": "<rootDir>/coverage-jest"
+    ]
   },
   "scripts": {
     "preversion": "npm run test && node scripts/preversion.js",
@@ -116,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,13 +1,13 @@
 {
   "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",
@@ -15,7 +15,6 @@
         "eslint-plugin-testcafe",
         "jest",
         "jest-environment-jsdom",
-        "karma-coverage",
         "sinon",
         "testcafe"
       ],
@@ -44,6 +43,10 @@
       "matchPackagePatterns": ["^actions/"],
       "groupName": "GitHub Actions",
       "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["^@internetarchive"],
+      "schedule": ["at any time"]
     }
   ]
 }

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,26 @@ 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 nofollow" target="_blank">Install SimplyE</a></li>
+      <li><a href="https://www.demarque.com/en-aldiko" rel="noopener noreferrer nofollow" target="_blank">Install Aldiko</a></li>
+      <li><a href="https://www.edrlab.org/software/thorium-reader/" rel="noopener noreferrer nofollow" 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
+      : (this.isBookProtected ? this.accessProtectedBook : nothing)
+      }
     `;
   }
 

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

@@ -146,6 +146,7 @@ export default class SearchProvider {
     };
     this.updateMenu({ openMenu: false });
     this.bookreader?.searchView?.clearSearchFieldAndResults(false);
+    this.bookreader?.urlPlugin?.removeUrlParam('q');
   }
 
   /**

package/src/BookNavigator/search/search-results.js

@@ -60,6 +60,9 @@ export class IABookSearchResults extends LitElement {
 
   setQuery(e) {
     this.query = e.currentTarget.value;
+    if (!this.query) {
+      this.cancelSearch();
+    }
   }
 
   performSearch(e) {
@@ -148,6 +151,7 @@ export class IABookSearchResults extends LitElement {
             name="query"
             alt="Search inside this book."
             @keyup=${this.setQuery}
+            @search=${this.setQuery}
             .value=${this.query}
           />
         </fieldset>

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

@@ -217,6 +217,12 @@ BookReader.prototype.search = async function(term = '', overrides = {}) {
     cache: true,
     beforeSend: xhr => { this.searchXHR = xhr; },
   }));
+
+  if (!this.searchTerm) {
+    this.bookreader?.urlPlugin?.removeUrlParam('q');
+  } else {
+    this.bookreader?.urlPlugin?.setUrlParam('q', this.searchTerm);
+  }
 };
 
 /**
@@ -230,6 +236,7 @@ BookReader.prototype._cancelSearch = function () {
   this.searchXHR = null;
   this.searchCancelled = true;
   this.searchResults = [];
+  this.bookreader?.urlPlugin?.removeUrlParam('q');
 };
 
 /**
@@ -243,6 +250,7 @@ BookReader.prototype.cancelSearchRequest = function () {
     this.searchView.toggleSearchPending();
     this.trigger('SearchCanceled', { term: this.searchTerm, instance: this });
   }
+  this?.urlPlugin?.removeUrlParam('q');
 };
 
 /**

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()));