@internetarchive/bookreader 5.0.0-36 → 5.0.0-39

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": ["*"],
+      "rangeStrategy": "bump"
+    }
+  ]
+}

package/src/BookNavigator/assets/bookmark-colors.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
   .blue {

package/src/BookNavigator/assets/button-base.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
   .ia-button {

package/src/BookNavigator/assets/ia-logo.js

@@ -1,4 +1,4 @@
-import { svg } from 'lit-element';
+import { svg } from 'lit';
 
 export default svg`
   <svg class="ia-logo" width="27" height="30" viewBox="0 0 27 30" xmlns="http://www.w3.org/2000/svg" aria-labelledby="logoTitleID logoDescID">

package/src/BookNavigator/assets/icon_checkmark.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 // Original SVG object for reference
 // <svg height="10" viewBox="0 0 13 10" width="13" xmlns="http://www.w3.org/2000/svg"><path d="m4.33333333 10-4.33333333-4.16666667 1.73333333-1.66666666 2.6 2.5 6.93333337-6.66666667 1.7333333 1.66666667z" fill="#fff" fill-rule="evenodd"/></svg>

package/src/BookNavigator/assets/icon_close.js

@@ -1,3 +1,3 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1sYWJlbGxlZGJ5PSJjbG9zZVRpdGxlSUQgY2xvc2VEZXNjSUQiPjxwYXRoIGQ9Ik0yOS4xOTIgMTAuODA4YTEuNSAxLjUgMCAwMTAgMi4xMkwyMi4xMjIgMjBsNy4wNyA3LjA3MmExLjUgMS41IDAgMDEtMi4xMiAyLjEyMWwtNy4wNzMtNy4wNy03LjA3IDcuMDdhMS41IDEuNSAwIDAxLTIuMTIxLTIuMTJsNy4wNy03LjA3My03LjA3LTcuMDdhMS41IDEuNSAwIDAxMi4xMi0yLjEyMUwyMCAxNy44NzhsNy4wNzItNy4wN2ExLjUgMS41IDAgMDEyLjEyMSAweiIgY2xhc3M9ImZpbGwtY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==`;

package/src/BookNavigator/assets/icon_sort_asc.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default html`
 <svg name="sort-asc" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z" fill="#fff" fill-rule="nonzero"/><path d="m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z" fill="#fff" fill-rule="nonzero"/><path d="m10.3846154 11.0769231 2.7692308 5.5384615 2.7692307-5.5384615m-2.7692307 4.1538461v-13.15384612" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.661538" transform="matrix(1 0 0 -1 0 18.692308)"/></g></svg>

package/src/BookNavigator/assets/icon_sort_desc.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default html`
 <svg name="sort-desc" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z" fill="#fff" fill-rule="nonzero"/><path d="m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z" fill="#fff" fill-rule="nonzero"/><path d="m10.3846154 11.0769231 2.7692308 5.5384615 2.7692307-5.5384615m-2.7692307 4.1538461v-13.15384612" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.661538"/></g></svg>

package/src/BookNavigator/assets/icon_sort_neutral.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default html`
 <svg name="sort-neutral" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd"><path d="m2.32514544 8.30769231.7756949-2.08468003h2.92824822l.75630252 2.08468003h1.01809955l-2.70523594-6.92307693h-1.01809955l-2.69553976 6.92307693zm3.41305753-2.86037492h-2.34647705l1.17323853-3.22883h.01939237z" fill-rule="nonzero"/><path d="m7.1689722 16.6153846v-.7756949h-4.4117647l4.29541047-5.3716871v-.77569491h-5.06140918v.77569491h3.97543633l-4.30510666 5.3716871v.7756949z" fill-rule="nonzero"/><circle cx="13" cy="9" r="2"/></g></svg>

package/src/BookNavigator/assets/icon_volumes.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default html`
   <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" aria-labelledby="volumesTitleID volumesDescID">

package/src/BookNavigator/book-navigator.js

@@ -2,8 +2,7 @@
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 // eslint-disable-next-line no-unused-vars
 import { ModalManager } from '@internetarchive/modal-manager';
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
+import { css, html, LitElement, nothing } from 'lit';
 import SearchProvider from './search/search-provider.js';
 import DownloadProvider from './downloads/downloads-provider.js';
 import VisualAdjustmentProvider from './visual-adjustments/visual-adjustments-provider.js';

package/src/BookNavigator/bookmarks/bookmark-button.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 
 export default class BookmarkButton extends LitElement {
   static get styles() {

package/src/BookNavigator/bookmarks/bookmark-edit.js

@@ -1,6 +1,5 @@
-import { nothing } from 'lit-html';
-import { repeat } from 'lit-html/directives/repeat.js';
-import { css, html, LitElement } from 'lit-element';
+import { repeat } from 'lit/directives/repeat.js';
+import { css, html, LitElement, nothing } from 'lit';
 import bookmarkColorsCSS from '../assets/bookmark-colors.js';
 import buttonCSS from '../assets/button-base.js';
 

package/src/BookNavigator/bookmarks/bookmarks-list.js

@@ -1,6 +1,5 @@
-import { nothing } from 'lit-html';
-import { repeat } from 'lit-html/directives/repeat.js';
-import { css, html, LitElement } from 'lit-element';
+import { repeat } from 'lit/directives/repeat.js';
+import { css, html, LitElement, nothing } from 'lit';
 import './bookmark-edit.js';
 import '@internetarchive/icon-edit-pencil/icon-edit-pencil.js';
 import bookmarkColorsCSS from '../assets/bookmark-colors.js';

package/src/BookNavigator/bookmarks/bookmarks-loginCTA.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html } from 'lit';
 import buttonStyles from '../assets/button-base.js';
 
 class BookmarksLogin extends LitElement {

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

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '../delete-modal-actions.js';
 import './bookmark-button.js';
 import './ia-bookmarks.js';

package/src/BookNavigator/bookmarks/ia-bookmarks.js

@@ -1,5 +1,4 @@
-import { render } from 'lit-html';
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css, render } from 'lit';
 // eslint-disable-next-line no-unused-vars
 import { ModalConfig, ModalManager } from '@internetarchive/modal-manager';
 import buttonStyles from '../assets/button-base.js';
@@ -152,14 +151,12 @@ class IABookmarks extends LitElement {
     }
   }
 
-  fetchUserBookmarks() {
+  async fetchUserBookmarks() {
     if (!this.api.identifier) {
       return;
     }
-    this.fetchBookmarks()
-      .then(() => {
-        this.initializeBookmarks();
-      });
+    await this.fetchBookmarks();
+    this.initializeBookmarks();
   }
 
   setBREventListeners() {

package/src/BookNavigator/delete-modal-actions.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 
 export default class DeleteModalActions extends LitElement {
   static get styles() {

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

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '@internetarchive/icon-dl/icon-dl';
 import './downloads';
 

package/src/BookNavigator/downloads/downloads.js

@@ -1,5 +1,4 @@
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
+import { css, html, LitElement, nothing } from 'lit';
 import buttonStyles from '../assets/button-base.js';
 export class IABookDownloads extends LitElement {
   static get properties() {

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

@@ -1,6 +1,5 @@
-import { nothing } from 'lit-html';
-import { html, LitElement } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html, LitElement, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export class BookSearchResult extends LitElement {
   static get properties() {

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

@@ -1,5 +1,4 @@
-import { html } from 'lit-element';
-import { nothing } from 'lit-html';
+import { html, nothing } from 'lit';
 import '@internetarchive/icon-search/icon-search';
 import './search-results';
 

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

@@ -1,6 +1,5 @@
 /* eslint-disable class-methods-use-this */
-import { nothing } from 'lit-html';
-import { css, html, LitElement } from 'lit-element';
+import { css, html, LitElement, nothing } from 'lit';
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 import './a-search-result.js';
 import checkmarkIcon from '../assets/icon_checkmark.js';

package/src/BookNavigator/sharing.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '@internetarchive/icon-share/icon-share';
 import '@internetarchive/ia-sharing-options';
 

package/src/BookNavigator/visual-adjustments/visual-adjustments-provider.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '@internetarchive/icon-visual-adjustment/icon-visual-adjustment';
 import './visual-adjustments';
 

package/src/BookNavigator/visual-adjustments/visual-adjustments.js

@@ -1,6 +1,6 @@
-import { css, html, LitElement } from "lit-element";
-import { repeat } from "lit-html/directives/repeat.js";
-import { nothing } from "lit-html";
+import { css, html, LitElement } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { nothing } from "lit";
 import checkmarkIcon from '../assets/icon_checkmark.js';
 import "@internetarchive/icon-magnify-minus/icon-magnify-minus";
 import "@internetarchive/icon-magnify-plus/icon-magnify-plus";

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

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 import sortDescIcon from '../assets/icon_sort_desc.js';
 import sortAscIcon from '../assets/icon_sort_asc.js';

package/src/BookNavigator/volumes/volumes.js

@@ -1,6 +1,5 @@
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
-import { repeat } from 'lit-html/directives/repeat';
+import { css, html, LitElement, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
 
 export class Volumes extends LitElement {
   static get properties() {

package/src/BookReader/Mode1Up.js

@@ -46,7 +46,8 @@ export class Mode1Up {
       if (!this.everShown) {
         this.mode1UpLit.initFirstRender(startLeaf);
         this.everShown = true;
-        await this.mode1UpLit.requestUpdate();
+        this.mode1UpLit.requestUpdate();
+        await this.mode1UpLit.updateComplete;
         new DragScrollable(this.mode1UpLit, {
           preventDefault: true,
           dragSelector: '.br-mode-1up__visible-world',

package/src/BookReader/Mode1UpLit.js

@@ -1,9 +1,11 @@
 // @ts-check
-import { customElement, html, LitElement, property, query } from 'lit-element';
-import { styleMap } from 'lit-html/directives/style-map';
+import { customElement, property, query } from 'lit/decorators.js';
+import {LitElement, html} from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
 import { ModeSmoothZoom } from './ModeSmoothZoom';
 import { arrChanged, calcScreenDPI, genToArray, sum, throttle } from './utils';
 import { HTMLDimensionsCacher } from "./utils/HTMLDimensionsCacher";
+import { ScrollClassAdder } from './utils/ScrollClassAdder';
 /** @typedef {import('./BookModel').BookModel} BookModel */
 /** @typedef {import('./BookModel').PageIndex} PageIndex */
 /** @typedef {import('./BookModel').PageModel} PageModel */
@@ -114,6 +116,8 @@ export class Mode1UpLit extends LitElement {
 
   smoothZoomer = new ModeSmoothZoom(this);
 
+  scrollClassAdder = new ScrollClassAdder(this, 'BRscrolling-active');
+
   /************** CONSTANT PROPERTIES **************/
 
   /** Vertical space between/around the pages in inches */
@@ -301,6 +305,7 @@ export class Mode1UpLit extends LitElement {
       }).$container[0];
 
     pageContainerEl.style.transform = transform;
+    pageContainerEl.classList.toggle('BRpage-visible', this.visiblePages.includes(page));
     return pageContainerEl;
   }
 
@@ -425,10 +430,12 @@ export class Mode1UpLit extends LitElement {
   /************** INPUT HANDLERS **************/
 
   attachScrollListeners = () => {
-    this.addEventListener("scroll", this.updateVisibleRegion, { passive: true });
+    this.addEventListener("scroll", this.updateVisibleRegion);
+    this.scrollClassAdder.attach();
   }
 
   detachScrollListeners = () => {
     this.removeEventListener("scroll", this.updateVisibleRegion);
+    this.scrollClassAdder.detach();
   }
 }

package/src/BookReader/Mode2Up.js

@@ -6,6 +6,7 @@ import { EVENTS } from './events.js';
 import { ModeSmoothZoom } from "./ModeSmoothZoom.js";
 import { HTMLDimensionsCacher } from './utils/HTMLDimensionsCacher.js';
 import { DragScrollable } from './DragScrollable.js';
+import { ScrollClassAdder } from './utils/ScrollClassAdder.js';
 
 /** @typedef {import('../BookReader.js').default} BookReader */
 /** @typedef {import('./BookModel.js').BookModel} BookModel */
@@ -36,6 +37,9 @@ export class Mode2Up {
     this.smoothZoomer = null;
     this._scale = 1;
     this.scaleCenter = { x: 0.5, y: 0.5 };
+
+    /** @type {ScrollClassAdder} */
+    this.scrollClassAdder = null;
   }
 
   get $container() {
@@ -242,6 +246,12 @@ export class Mode2Up {
 
     this.smoothZoomer = this.smoothZoomer || new ModeSmoothZoom(this);
     this.smoothZoomer.attach();
+    if (!this.scrollClassAdder) {
+      this.scrollClassAdder = new ScrollClassAdder(this.$container, 'BRscrolling-active');
+    }
+    this.scrollClassAdder.detach();
+    this.scrollClassAdder.element = this.$container;
+    this.scrollClassAdder.attach();
 
     this.htmlDimensionsCacher = this.htmlDimensionsCacher || new HTMLDimensionsCacher(this.$container);
   }
@@ -250,6 +260,7 @@ export class Mode2Up {
     // Mode2Up attaches these listeners to the main BR container, so we need to
     // detach these or it will cause issues for the other modes.
     this.smoothZoomer.detach();
+    this.scrollClassAdder.detach();
   }
 
   /**

package/src/BookReader/ModeSmoothZoom.js

@@ -89,6 +89,7 @@ export class ModeSmoothZoom {
   _pinchStart = () => {
     // Do this in case the pinchend hasn't fired yet.
     this.oldScale = 1;
+    this.mode.$visibleWorld.classList.add("BRsmooth-zooming");
     this.mode.$visibleWorld.style.willChange = "transform";
     this.detachCtrlZoom();
     this.mode.detachScrollListeners?.();
@@ -124,6 +125,7 @@ export class ModeSmoothZoom {
     await this.pinchMoveFramePromise;
     this.mode.scaleCenter = { x: 0.5, y: 0.5 };
     this.oldScale = 1;
+    this.mode.$visibleWorld.classList.remove("BRsmooth-zooming");
     this.mode.$visibleWorld.style.willChange = "auto";
     this.attachCtrlZoom();
     this.mode.attachScrollListeners?.();

package/src/BookReader/PageContainer.js

@@ -46,11 +46,17 @@ export class PageContainer {
     const alreadyLoaded = this.imageCache.imageLoaded(this.page.index, reduce);
     const nextBestLoadedReduce = !alreadyLoaded && this.imageCache.getBestLoadedReduce(this.page.index, reduce);
 
-    // Add the actual, highres image
+    // Create high res image
+    const $newImg = this.imageCache.image(this.page.index, reduce);
+
+    // Avoid removing/re-adding the image if it's already there
+    // This can be called quite a bit, so we need to be fast
+    if (this.$img?.[0].src == $newImg[0].src) {
+      return this;
+    }
+
     this.$img?.remove();
-    this.$img = this.imageCache
-      .image(this.page.index, reduce)
-      .prependTo(this.$container);
+    this.$img = $newImg.prependTo(this.$container);
 
     const backgroundLayers = [];
     if (!alreadyLoaded) {

package/src/BookReader/utils/ScrollClassAdder.js

@@ -0,0 +1,31 @@
+/** Adds a class while the given element is experiencing scrolling */
+export class ScrollClassAdder {
+  /**
+   * @param {HTMLElement} element
+   * @param {string} className
+   */
+  constructor(element, className) {
+    /** @type {HTMLElement} */
+    this.element = element;
+    /** @type {string} */
+    this.className = className;
+    this.timeout = null;
+  }
+
+  attach() {
+    this.element.addEventListener('scroll', this.onScroll);
+  }
+
+  detach() {
+    this.element.removeEventListener('scroll', this.onScroll);
+  }
+
+  onScroll = () => {
+    this.element.classList.add(this.className);
+    clearTimeout(this.timeout);
+    // TODO: Also remove class on mousemove, touch, click, etc.
+    this.timeout = setTimeout(() => {
+      this.element.classList.remove(this.className);
+    }, 600);
+  }
+}

package/src/BookReader.js

@@ -1192,7 +1192,8 @@ BookReader.prototype.enterFullscreen = async function(bindKeyboardControls = tru
   if (this.activeMode instanceof Mode1Up) {
     this.activeMode.mode1UpLit.scale = this.activeMode.mode1UpLit.computeDefaultScale(this._models.book.getPage(currentIndex));
     // Need the new scale to be applied before calling jumpToIndex
-    await this.activeMode.mode1UpLit.requestUpdate();
+    this.activeMode.mode1UpLit.requestUpdate();
+    await this.activeMode.mode1UpLit.updateComplete;
   }
   this.jumpToIndex(currentIndex);
   this.animating = false;
@@ -1241,7 +1242,8 @@ BookReader.prototype.exitFullScreen = async function () {
 
   if (this.activeMode instanceof Mode1Up) {
     this.activeMode.mode1UpLit.scale = this.activeMode.mode1UpLit.computeDefaultScale(this._models.book.getPage(this.currentIndex()));
-    await this.activeMode.mode1UpLit.requestUpdate();
+    this.activeMode.mode1UpLit.requestUpdate();
+    await this.activeMode.mode1UpLit.updateComplete;
   }
 
   this.animating = false;

package/src/assets/icons/magnify-minus.svg

@@ -1,16 +1,12 @@
 <svg
-  width="18"
-  height="18"
-  viewBox="0 0 18 18"
+  viewBox="0 0 100 100"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   aria-labelledby="magnify-minusTitleID magnify-minusDescID"
 >
   <title id="magnify-minusTitleID">Zoom out</title>
   <desc id="magnify-minusDescID">An icon of a minus symbol</desc>
-  <g fill="none" fill-rule="evenodd">
-    <circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="2" />
-    <path d="m12 12 4.335213 4.335213" stroke="#fff" stroke-linecap="round" stroke-width="2" />
-    <path d="m10 7.75v-1.5h-6v1.5z" fill="#fff" fill-rule="nonzero" />
+  <g fill="#fff" fill-rule="evenodd">
+    <path d="m2.3239824 87.3815869 25.8938394-23.8143095c-4.5929593-6.6937643-6.889439-14.1059452-6.889439-22.2365428 0-7.1360431 1.7567382-13.7186647 5.2702146-19.7478649 3.5134763-6.0292002 8.2852035-10.8003118 14.3151815-14.31333499 6.029978-3.51302314 12.6134488-5.26953471 19.7504125-5.26953471s13.7204346 1.75651157 19.7504126 5.26953471c6.029978 3.51302319 10.8017051 8.28413479 14.3151815 14.31333499 3.5134763 6.0292002 5.2702145 12.6118218 5.2702145 19.7478649s-1.7567382 13.7324143-5.2702145 19.7891137c-3.5134764 6.0566994-8.2852035 10.8415607-14.3151815 14.3545838-6.029978 3.5130232-12.6134489 5.2695347-19.7504126 5.2695347-8.5762743 0-16.3217363-2.5723212-23.2363861-7.7169637l-26.3063807 24.2302349c-1.27200216 1.1618413-2.76631826 1.742762-4.48294825 1.742762-1.826641 0-3.38971397-.6496687-4.68921892-1.949006s-1.94925743-2.8622087-1.94925743-4.688614c0-1.9364022.7746608-3.5955208 2.3239824-4.9773557zm58.3436469-19.9162976c7.1919692 0 13.3331041-2.5585716 18.4234048-7.6757149s7.635451-11.2712357 7.635451-18.4622772-2.5451503-13.3313843-7.635451-18.4210284-11.2314356-7.6344661-18.4234048-7.6344661-13.3331042 2.544822-18.4234049 7.6344661-7.635451 11.2299869-7.635451 18.4210284 2.5451503 13.3451339 7.635451 18.4622772 11.2314357 7.6757149 18.4234049 7.6757149zm-14.9374313-21.3256316h31.2878163v-9.5422233h-31.2878163z"/>
   </g>
 </svg>

package/src/assets/icons/magnify-plus.svg

@@ -1,17 +1,13 @@
 <svg
-  width="18"
-  height="18"
-  viewBox="0 0 18 18"
+  viewBox="0 0 100 100"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   aria-labelledby="magnify-plusTitleID magnify-plusDescID"
 >
   <title id="magnify-plusTitleID">Zoom in</title>
   <desc id="magnify-plusDescID">An icon of a plus symbol</desc>
-  <g fill="none" fill-rule="evenodd">
-    <circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="2" />
-    <path d="m12 12 4.335213 4.335213" stroke="#fff" stroke-linecap="round" stroke-width="2" />
-    <path d="m7.75 4v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25v-2.25z" fill="#fff" fill-rule="nonzero" />
+  <g fill="#fff" fill-rule="evenodd">
+    <path d="m2.40305276 87.4017263 25.81133064-23.7730295c-4.5356618-6.5723551-6.8034928-14.000283-6.8034928-22.2837838 0-7.1236734 1.7429868-13.6948847 5.2289603-19.7136338 3.4859736-6.0187491 8.2577006-10.7953163 14.3151813-14.32970144 6.0574806-3.53438517 12.6547027-5.30157776 19.7916662-5.30157776 10.8429591 0 20.0964884 3.85236545 27.760588 11.5570964 7.6640996 7.7047309 11.4950036 16.9684802 11.4927136 27.791248 0 10.8799585-3.8309059 20.1574336-11.4927136 27.8324254-7.6618077 7.6749917-16.915337 11.5124876-27.760588 11.5124876-8.6312796 0-16.431747-2.5678624-23.4014021-7.7035871l-26.1413636 24.188234c-1.21699671 1.2147305-2.73881553 1.8220957-4.56545649 1.8220957s-3.3897139-.6485425-4.68921882-1.9456276c-1.29950493-1.297085-1.94925739-2.8572473-1.94925739-4.6804867 0-1.8781426.80216353-3.5343852 2.4064906-4.9687279zm58.34020784-19.878343c7.1369635 0 13.264347-2.5678623 18.3821503-7.7035871 5.1178034-5.1357247 7.676705-11.2928753 7.676705-18.4714518s-2.5589016-13.3082755-7.676705-18.3890972c-5.1178033-5.0808217-11.2451868-7.6212325-18.3821503-7.6212325-7.2469746 0-13.4156121 2.5404108-18.5059127 7.6212325s-7.6354509 11.2105207-7.6354509 18.3890972 2.5589016 13.3357271 7.676705 18.4714518c5.1178033 5.1357248 11.2726895 7.7035871 18.4646586 7.7035871zm-13.3594607-21.8685793h10.206958v10.1879511h7.2194718v-10.1879511h10.206958v-7.206028h-10.206958v-10.187951h-7.2194718v10.187951h-10.206958z"/>
   </g>
 
 </svg>

package/src/css/_TextSelection.scss

@@ -24,6 +24,19 @@
     }
 }
 
+// Hide text layer for performance during zooming & scrolling
+.BRsmooth-zooming, .BRscrolling-active {
+    .textSelectionSVG {
+        display: none;
+    }
+}
+
+// Hide text selection layers of off-screen pages, and only display
+// 2 text layers regardless of zoom level
+.BRmode1up .BRpagecontainer:not(.BRpage-visible) .textSelectionSVG {
+    display: none;
+}
+
 // Makes page image unselectable
 .BRpagecontainer img {
     -webkit-user-select: none;

package/src/ia-bookreader/ia-bookreader.js

@@ -2,7 +2,7 @@
  * BookReaderTemplate to load BookNavigator components
  */
 
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 
 import '@internetarchive/ia-item-navigator';
 import '../BookNavigator/book-navigator.js';

package/src/plugins/plugin.chapters.js

@@ -174,7 +174,7 @@ BookReader.prototype.addChapterFromEntry = function(tocEntryObject) {
  * This makes a call to OL API and calls the given callback function with the
  * response from the API.
  */
-BookReader.prototype.getOpenLibraryRecord = function () {
+BookReader.prototype.getOpenLibraryRecord = async function () {
   // Try looking up by ocaid first, then by source_record
   const baseURL = `${this.olHost}/query.json?type=/type/edition&*=`;
   const fetchUrlByBookId = `${baseURL}&ocaid=${this.bookId}`;
@@ -190,20 +190,16 @@ BookReader.prototype.getOpenLibraryRecord = function () {
     }
   };
 
-  $.ajax({ url: fetchUrlByBookId, dataType: 'jsonp' })
-    .then(data => {
-      if (data && data.length > 0) {
-        return data;
-      } else {
-      // try sourceid
-        return $.ajax({ url: `${baseURL}&source_records=ia:${this.bookId}`, dataType: 'jsonp' });
-      }
-    })
-    .then(data => {
-      if (data && data.length > 0) {
-        setUpChapterMarkers(data[0]);
-      }
-    });
+  let data = await $.ajax({ url: fetchUrlByBookId, dataType: 'jsonp' });
+
+  if (!data || !data.length) {
+    // try sourceid
+    data = await $.ajax({ url: `${baseURL}&source_records=ia:${this.bookId}`, dataType: 'jsonp' });
+  }
+
+  if (data && data.length > 0) {
+    setUpChapterMarkers(data[0]);
+  }
 };
 
 // Extend buildMobileDrawerElement with table of contents list

package/src/plugins/plugin.text_selection.js

@@ -96,21 +96,20 @@ export class TextSelectionPlugin {
       if (cachedEntry) {
         return cachedEntry.response;
       }
-      return $.ajax({
+      const res = await $.ajax({
         type: "GET",
         url: applyVariables(this.options.singlePageDjvuXmlUrl, this.optionVariables, { pageIndex: index }),
         dataType: "html",
         error: (e) => undefined,
-      }).then((res) => {
-        try {
-          const xmlDoc = $.parseXML(res);
-          const result = xmlDoc && $(xmlDoc).find("OBJECT")[0];
-          this.pageTextCache.add({ index, response: result });
-          return result;
-        } catch (e) {
-          return undefined;
-        }
       });
+      try {
+        const xmlDoc = $.parseXML(res);
+        const result = xmlDoc && $(xmlDoc).find("OBJECT")[0];
+        this.pageTextCache.add({ index, response: result });
+        return result;
+      } catch (e) {
+        return undefined;
+      }
     } else {
       const XMLpagesArr = await this.djvuPagesPromise;
       if (XMLpagesArr) return XMLpagesArr[index];