@internetarchive/bookreader 5.0.0-37 → 5.0.0-38

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# 5.0.0-38
+Dev: Add Renovate Bot @cdrini
+Dev: Update node-fetch @cdrini
+Fix: Search request promise err & fix tests @cdrini
+Dev: Split node workflow into different jobs @cdrini
+Dev: Give cache steps better names in GHA @cdrini
+Dev: Update concurrently + Small speedup to build & test @cdrini
+Dev: Renovate - Auto-update dev dependencies for minor/patch @cdrini
+Fix: Better MS Edge voice selection @cdrini
+Dev: Allow small drops in codecov coverage (< 0.5%) @cdrini
+Dev: Renovate - add `^@internetarchive/icon-` @cdrini
+
 # 5.0.0-37
 Fix: Update all `.then()` to async/await @sancodes
 Fix: Upgrade to Lit 2 @Aadilhassan

package/codecov.yml

@@ -1,6 +1,12 @@
 codecov:
   notify:
     require_ci_to_pass: yes
+  status:
+    project:
+      default:
+        # Allow small drops in coverage
+        threshold: 0.005  # .5 %
+        if_not_found: failure
 
 coverage:
   precision: 2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-37",
+  "version": "5.0.0-38",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -41,25 +41,25 @@
     "lit": "^2.1.3"
   },
   "devDependencies": {
-    "@babel/core": "7.15.0",
-    "@babel/eslint-parser": "^7.16.5",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
-    "@babel/preset-env": "7.15.0",
+    "@babel/core": "7.17.5",
+    "@babel/eslint-parser": "7.17.0",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/plugin-proposal-decorators": "7.17.2",
+    "@babel/preset-env": "7.16.11",
     "@open-wc/testing": "^3.0.4",
     "@open-wc/testing-karma": "^4.0.9",
     "@types/jest": "^27.4.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "babel-loader": "8.2.2",
+    "babel-loader": "8.2.3",
     "codecov": "^3.8.3",
-    "concurrently": "6.0.2",
+    "concurrently": "7.0.0",
     "core-js": "3.16.2",
     "cpx2": "3.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-testcafe": "^0.2.1",
     "hammerjs": "^2.0.8",
-    "http-server": "0.12.3",
+    "http-server": "14.1.0",
     "iso-language-codes": "1.1.0",
     "jest": "^27.4.7",
     "jquery": "1.11.3",
@@ -70,7 +70,7 @@
     "jquery.mmenu": "5.6.5",
     "karma-coverage": "^2.1.0",
     "live-server": "1.2.1",
-    "node-fetch": "2.6.1",
+    "node-fetch": "2.6.7",
     "regenerator-runtime": "0.13.9",
     "sass": "1.38.2",
     "sinon": "^12.0.1",
@@ -102,7 +102,7 @@
     "preversion": "npm run test && node scripts/preversion.js",
     "version": "node scripts/version.js",
     "postversion": "node scripts/postversion.js",
-    "build": "npm run clean && npm run build-js && npm run build-css && npm run build-assets",
+    "build": "npm run clean && npx concurrently --group npm:build-js npm:build-css npm:build-assets",
     "build-assets": "npx cpx \"src/assets/**/*\" BookReader && npx svgo -f BookReader/icons && npx svgo -f BookReader/images",
     "build-assets:watch": "npx cpx --watch --verbose \"src/assets/**/*\" BookReader",
     "build-js": "npx webpack",
@@ -115,7 +115,7 @@
     "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": "npm run test-jest && npm run test-karma",
+    "test": "npx concurrently --group npm:test-jest npm:test-karma",
     "test:e2e": "npm run build && npx testcafe",
     "test:e2e:dev": "npx testcafe --live --dev",
     "test-jest:watch": "npx jest --watch",

package/renovate.json

@@ -0,0 +1,43 @@
+{
+  "extends": [
+    "config:base"
+  ],
+  "packageRules": [
+    {
+      "matchPackageNames": [
+        "@babel/eslint-parser",
+        "@open-wc/testing",
+        "@open-wc/testing-karma",
+        "@types/jest",
+        "codecov",
+        "eslint",
+        "eslint-plugin-no-jquery",
+        "eslint-plugin-testcafe",
+        "jest",
+        "karma-coverage",
+        "sinon",
+        "testcafe"
+      ],
+      "automerge": true
+    },
+    {
+      "matchPackageNames": [
+        "concurrently",
+        "http-server",
+        "live-server",
+        "node-fetch"
+      ],
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["^@internetarchive/icon-"],
+      "groupName": "@internetarchive icons",
+      "rangeStrategy": "bump"
+    },
+    {
+      "matchPackagePatterns": ["^@internetarchive"],
+      "rangeStrategy": "bump"
+    }
+  ]
+}

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

@@ -144,6 +144,7 @@ BookReader.prototype.search = async function(term = '', overrides = {}) {
   };
   const options = jQuery.extend({}, defaultOptions, overrides);
   this.suppressFragmentChange = options.suppressFragmentChange;
+  this.searchCancelled = false;
 
   // strip slashes, since this goes in the url
   this.searchTerm = term.replace(/\//g, ' ');
@@ -179,13 +180,8 @@ BookReader.prototype.search = async function(term = '', overrides = {}) {
 
   const url = `${baseUrl}${paramStr}`;
 
-  const cleanup = () => {
-    this.searchXHR = null;
-    window.BRSearchInProgress = () => {};
-  };
-
   const processSearchResults = (searchInsideResults) => {
-    if (!this.searchXHR) {
+    if (this.searchCancelled) {
       return;
     }
     const responseHasError = searchInsideResults.error || !searchInsideResults.matches.length;
@@ -201,12 +197,6 @@ BookReader.prototype.search = async function(term = '', overrides = {}) {
         ? options.success.call(this, searchInsideResults, options)
         : this.BRSearchCallback(searchInsideResults, options);
     }
-    cleanup();
-  };
-
-  const beforeSend = (xhr) => {
-    this.searchXHR = xhr;
-    window.BRSearchInProgress = processSearchResults;
   };
 
   this.trigger('SearchStarted', { term: this.searchTerm, instance: this });
@@ -214,8 +204,7 @@ BookReader.prototype.search = async function(term = '', overrides = {}) {
     url: url,
     dataType: 'jsonp',
     cache: true,
-    beforeSend,
-    jsonpCallback: 'BRSearchInProgress'
+    beforeSend: xhr => { this.searchXHR = xhr; },
   }));
 };
 
@@ -228,8 +217,8 @@ BookReader.prototype._cancelSearch = function () {
   this.searchView.clearSearchFieldAndResults(false);
   this.searchTerm = '';
   this.searchXHR = null;
+  this.searchCancelled = true;
   this.searchResults = [];
-  window.BRSearchInProgress = () => {};
 };
 
 /**
@@ -237,6 +226,7 @@ BookReader.prototype._cancelSearch = function () {
  * checks for term & xhr in flight before running
  */
 BookReader.prototype.cancelSearchRequest = function () {
+  this.searchCancelled = true;
   if (this.searchXHR !== null) {
     this._cancelSearch();
     this.searchView.toggleSearchPending();

package/src/plugins/search/view.js

@@ -149,10 +149,12 @@ class SearchView {
   }
 
   updateResultsPosition() {
+    if (!this.dom.searchNavigation) return;
     this.dom.searchNavigation.find('[data-id=resultsCount]').text(this.resultsPosition());
   }
 
   updateSearchNavigationButtons() {
+    if (!this.dom.searchNavigation) return;
     this.dom.searchNavigation.find('.prev').attr('disabled', !this.currentMatchIndex);
     this.dom.searchNavigation.find('.next').attr('disabled', this.currentMatchIndex + 1 === this.matches.length);
   }

package/src/plugins/tts/AbstractTTSEngine.js

@@ -51,9 +51,7 @@ export default class AbstractTTSEngine {
     /** @type {SpeechSynthesisVoice} */
     this.voice = null;
     // Listen for voice changes (fired by subclasses)
-    this.events.on('voiceschanged', () => {
-      this.voice = AbstractTTSEngine.getBestBookVoice(this.getVoices(), this.opts.bookLanguage);
-    });
+    this.events.on('voiceschanged', this.updateBestVoice);
     this.events.trigger('voiceschanged');
   }
 
@@ -72,6 +70,10 @@ export default class AbstractTTSEngine {
   /** @abstract */
   init() { return null; }
 
+  updateBestVoice = () => {
+    this.voice = AbstractTTSEngine.getBestBookVoice(this.getVoices(), this.opts.bookLanguage);
+  }
+
   /**
    * @param {number} leafIndex
    * @param {number} numLeafs total number of leafs in the current book
@@ -134,8 +136,11 @@ export default class AbstractTTSEngine {
     this.step();
   }
 
-  /** @param {number} newRate */
+  /** @param {string} voiceURI */
   setVoice(voiceURI) {
+    // if the user actively selects a voice, don't re-choose best voice anymore
+    // MS Edge fires voices changed randomly very often
+    this.events.off('voiceschanged', this.updateBestVoice);
     this.voice = this.getVoices().find(voice => voice.voiceURI === voiceURI);
     if (this.activeSound) this.activeSound.setVoice(this.voice);
   }

package/stat/BookNavigator/BookNavigator.js

@@ -1,3 +1,44 @@
+/*
+<script src="foo-plugin.js"></script>
+
+foo-plugin.js
+
+$('#foo-plugin').dataSet('MainController', 'bar');
+
+<ia-bookreader>
+  <div slot="plugins">
+    <ia-search></ia-search>
+    <book-marks></book-marks>
+  </div>
+</ia-bookreader>
+
+iaBookreader.registerPlugin('foo-plugin', Class);
+
+
+class IABr extends LItElement {
+
+  render() {
+    
+    registerPlugins() {
+      this.pluginSlots.map(slot => {
+        .. to slot registry
+        each slot - do handshake 
+
+        
+      });
+    }
+
+    html`
+      <div slot="plugins" @onslotchange=${() => x}></div>
+    `;
+  }
+}
+*/
+
+
+
+
+
 import { css, html, LitElement } from 'lit-element';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import SearchProvider from './search/search-provider.js';
@@ -113,6 +154,7 @@ export class BookNavigator extends LitElement {
     // };
 
     this.menuProviders = {
+      // if enableSearch ?
       search: new SearchProvider(
         /**
          * Search specific menu updates

package/tests/e2e/base.test.js

@@ -1,6 +1,6 @@
 import { runBaseTests } from './helpers/base';
 import BookReader from './models/BookReader';
-// import { runDesktopSearchTests } from './helpers/desktopSearch';
+import { runDesktopSearchTests } from './helpers/desktopSearch';
 // import { runMobileSearchTests } from './helpers/mobileSearch';
 import params from './helpers/params';
 
@@ -22,10 +22,9 @@ ocaids.forEach(ocaid => {
   runBaseTests(new BookReader());
 
 
-  // Todo: Re-enable when testing side panel
-  // fixture `Desktop Search Tests for: ${ocaid}`
-  //   .page `${url}`;
-  // runDesktopSearchTests(new BookReader());
+  fixture `Desktop Search Tests for: ${ocaid}`
+    .page `${url}`;
+  runDesktopSearchTests(new BookReader());
 
   // Todo: deprecated, will remove once mmenu is removed.
   // fixture `Mobile Search Tests for: ${ocaid}`

package/tests/e2e/helpers/desktopSearch.js

@@ -19,14 +19,15 @@ export function runDesktopSearchTests(br) {
       const nav = br.nav;
 
       //assuring that the search bar is enabled
-      await t.expect(nav.desktop.searchBox.visible).ok();
+      await t.expect(nav.desktop.searchIcon.visible).ok();
+      await t.click(nav.desktop.searchIcon);
 
       //testing search for a word found in the book
-      await t
-        .selectText(nav.desktop.searchBox.child('.BRsearchInput'))
-        .pressKey('delete');
-      await t.typeText(nav.desktop.searchBox.child('.BRsearchInput'), TEST_TEXT_FOUND);
-      await t.click((nav.desktop.searchBox).child('.BRsearchSubmit'));
+      await t.selectText(nav.desktop.searchBox).pressKey('delete');
+      // FIXME: Why is it only typing every other letter?!?!
+      await t.typeText(nav.desktop.searchBox, TEST_TEXT_FOUND.split('').join('_'));
+      await t.pressKey('enter');
+
       await t.expect(nav.desktop.searchPin.exists).ok();
       await t.expect(nav.desktop.searchPin.child('.BRquery').child('div').exists).ok();
       await t.expect(nav.desktop.searchPin.child('.BRquery').child('div').innerText).contains(TEST_TEXT_FOUND);
@@ -54,14 +55,14 @@ export function runDesktopSearchTests(br) {
       const nav = br.nav;
 
       //assuring that the search bar is enabled
-      await t.expect(nav.desktop.searchBox.visible).ok();
+      await t.expect(nav.desktop.searchIcon.visible).ok();
+      await t.click(nav.desktop.searchIcon);
 
       //testing search for a word not found in the book
-      await t
-        .selectText(nav.desktop.searchBox.child('.BRsearchInput'))
-        .pressKey('delete');
-      await t.typeText(nav.desktop.searchBox.child('.BRsearchInput'), TEST_TEXT_NOT_FOUND);
-      await t.click((nav.desktop.searchBox).child('.BRsearchSubmit'));
+      await t.selectText(nav.desktop.searchBox).pressKey('delete');
+      // FIXME: Why is it only typing every other letter?!?!
+      await t.typeText(nav.desktop.searchBox, TEST_TEXT_NOT_FOUND.split('').join('_'));
+      await t.pressKey('enter');
       await t.expect(nav.desktop.searchPin.child('.BRquery').child('div').withText(TEST_TEXT_NOT_FOUND).exists).notOk();
 
       const getPageUrl = ClientFunction(() => window.location.href.toString());

package/tests/e2e/models/Navigation.js

@@ -6,7 +6,8 @@ export default class Navigation {
     this.topNavShell = new Selector('.BRtoolbar');
     this.bottomNavShell = new Selector('.BRfooter');
     this.mobileMenu = new Selector('.BRmobileMenu');
-    this.desktop = new DesktopNav(this.bottomNavShell, this.topNavShell);
+    this.itemNav = Selector('ia-bookreader').shadowRoot().find('ia-item-navigator').shadowRoot();
+    this.desktop = new DesktopNav(this.bottomNavShell, this.itemNav);
     this.mobile = new MobileNav(this.mobileMenu, this.topNavShell);
   }
 }
@@ -17,7 +18,11 @@ export default class Navigation {
  * @classdesc defines DesktopNav base elements
  */
 class DesktopNav {
-  constructor(bottomToolbar, topToolbar) {
+  /**
+   * @param {Selector} bottomToolbar
+   * @param {Selector} itemNav
+   */
+  constructor(bottomToolbar, itemNav) {
     // flipping
     this.goLeft = bottomToolbar.find('.BRicon.book_left');
     this.goRight = bottomToolbar.find('.BRicon.book_right');
@@ -35,7 +40,11 @@ class DesktopNav {
     this.zoomOut = bottomToolbar.find('.BRicon.zoom_out');
 
     // search
-    this.searchBox = topToolbar.find('.BRbooksearch.desktop');
+    this.searchIcon = itemNav.find('button.shortcut.search');
+    this.searchBox = itemNav
+      .find('ia-menu-slider').shadowRoot()
+      .find('ia-book-search-results').shadowRoot()
+      .find('input[name=query]');
     this.searchPin = bottomToolbar.find('.BRsearch');
     this.searchNavigation = bottomToolbar.find('.BRsearch-navigation');
 

package/tests/e2e/rightToLeft.test.js

@@ -9,7 +9,7 @@ const ocaids = params.ocaids || [
 ];
 
 ocaids.forEach(ocaid => {
-  const url = `${params.baseUrl}/BookReaderDemo/demo-internetarchive.html?ocaid=${ocaid}`;
+  const url = `${params.getArchiveUrl(ocaid)}`;
 
   fixture `Base Tests for right to left book: ${ocaid}`.page `${url}`;
   runBaseTests(new BookReader({ pageProgression: 'rl' }));

package/tests/e2e/viewmode.test.js

@@ -2,35 +2,41 @@ import { Selector } from 'testcafe';
 import BookReader from './models/BookReader';
 import params from './helpers/params';
 
-fixture `Viewmode carousel`.page `${params.baseUrl}/BookReaderDemo/demo-internetarchive.html?ocaid=goody`;
-
-test('Clicking `view mode` cycles through view modes', async t => {
-  const { nav } = (new BookReader());
-
-  // viewmode button only appear on mobile devices
-  await t.resizeWindow(400, 800);
-  // Flip forward one
-  await t.pressKey('right');
-
-  // 2up to thumb
-  await t.click(nav.desktop.viewmode);
-  const thumbnailContainer = Selector('.BRmodeThumb');
-  await t.expect(thumbnailContainer.visible).ok();
-  const thumbImages = thumbnailContainer.find('.BRpageview img');
-  await t.expect(thumbImages.count).gt(0);
-
-  // thumb to 1up
-  await t.click(nav.desktop.viewmode);
-  const onePageViewContainer = Selector('br-mode-1up');
-  await t.expect(onePageViewContainer.visible).ok();
-  const onePageImages = onePageViewContainer.find('.BRmode1up .BRpagecontainer');
-  // we usually pre-fetch the page in question & 1 before/after it
-  await t.expect(onePageImages.count).gte(3);
-
-  // 1up to 2up
-  await t.click(nav.desktop.viewmode);
-  const twoPageContainer = Selector('.BRtwopageview');
-  await t.expect(twoPageContainer.visible).ok();
-  const twoPageImages = twoPageContainer.find('img.BRpageimage');
-  await t.expect(twoPageImages.count).gte(2);
+const ocaids = params.ocaids || ['goody'];
+
+ocaids.forEach(ocaid => {
+  const url = params.getArchiveUrl(ocaid);
+
+  fixture `Viewmode carousel`.page `${url}`;
+
+  test('Clicking `view mode` cycles through view modes', async t => {
+    const { nav } = (new BookReader());
+
+    // viewmode button only appear on mobile devices
+    await t.resizeWindow(400, 800);
+    // Flip forward one
+    await t.pressKey('right');
+
+    // 2up to thumb
+    await t.click(nav.desktop.viewmode);
+    const thumbnailContainer = Selector('.BRmodeThumb');
+    await t.expect(thumbnailContainer.visible).ok();
+    const thumbImages = thumbnailContainer.find('.BRpageview img');
+    await t.expect(thumbImages.count).gt(0);
+
+    // thumb to 1up
+    await t.click(nav.desktop.viewmode);
+    const onePageViewContainer = Selector('br-mode-1up');
+    await t.expect(onePageViewContainer.visible).ok();
+    const onePageImages = onePageViewContainer.find('.BRmode1up .BRpagecontainer');
+    // we usually pre-fetch the page in question & 1 before/after it
+    await t.expect(onePageImages.count).gte(3);
+
+    // 1up to 2up
+    await t.click(nav.desktop.viewmode);
+    const twoPageContainer = Selector('.BRtwopageview');
+    await t.expect(twoPageContainer.visible).ok();
+    const twoPageImages = twoPageContainer.find('img.BRpageimage');
+    await t.expect(twoPageImages.count).gte(2);
+  });
 });

package/.github/dependabot.yml

@@ -1,8 +0,0 @@
-version: 2
-updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: monthly
-    time: "13:00"
-  open-pull-requests-limit: 10