@internetarchive/bookreader 5.0.0-38 → 5.0.0-39

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/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/tests/jest/BookReader/PageContainer.test.js

@@ -62,17 +62,18 @@ describe('update', () => {
     expect(pc.$img[0].style.background).toBe('');
   });
 
-  test('removes image between updates', () => {
+  test('removes image between updates only if changed', () => {
     const fakeImageCache = {
       imageLoaded: () => true,
-      image: () => $('<img/>'),
+      image: (index, reduce) => $(`<img src="page${index}-${reduce}.jpg" />`),
     };
     const pc = new PageContainer({index: 12}, {imageCache: fakeImageCache});
     pc.update({ reduce: 7 });
     const $im1 = pc.$img;
     pc.update({ reduce: 7 });
-    const $im2 = pc.$img;
-    expect($im1).not.toBe($im2);
+    expect(pc.$img).toBe($im1);
+    pc.update({ reduce: 16 });
+    expect(pc.$img).not.toBe($im1);
     expect($im1.parent().length).toBe(0);
   });
 

package/tests/jest/BookReader/utils/ScrollClassAdder.test.js

@@ -0,0 +1,49 @@
+// @ts-check
+import  sinon from 'sinon';
+import { ScrollClassAdder } from '@/src/BookReader/utils/ScrollClassAdder';
+
+describe('ScrollClassAdder', () => {
+  test('Does not attach during construction', () => {
+    const element = document.createElement('div');
+    const attachSpy = sinon.spy(ScrollClassAdder.prototype, 'attach');
+    new ScrollClassAdder(element, 'foo');
+    expect(attachSpy.callCount).toBe(0);
+  });
+
+  test('Attach/detach call correct methods', () => {
+    const el = document.createElement('div');
+    const addEventListenerSpy = sinon.spy(el, 'addEventListener');
+    const removeEventListenerSpy = sinon.spy(el, 'removeEventListener');
+    const sca = new ScrollClassAdder(el, 'foo');
+    expect(addEventListenerSpy.callCount).toBe(0);
+    sca.attach();
+    expect(addEventListenerSpy.callCount).toBe(1);
+    sca.detach();
+    expect(removeEventListenerSpy.callCount).toBe(1);
+  });
+
+  test('onScroll adds class at right time', () => {
+    const clock = sinon.useFakeTimers();
+    const el = document.createElement('div');
+    const sca = new ScrollClassAdder(el, 'foo');
+    expect(el.getAttribute('class')).toBeFalsy();
+    sca.onScroll();
+    expect(el.getAttribute('class')).toBe('foo');
+    clock.tick(600);
+    expect(el.getAttribute('class')).toBeFalsy();
+
+    sca.onScroll();
+    expect(el.getAttribute('class')).toBe('foo');
+    clock.tick(500);
+    expect(el.getAttribute('class')).toBe('foo');
+    sca.onScroll();
+    expect(el.getAttribute('class')).toBe('foo');
+    clock.tick(100);
+    expect(el.getAttribute('class')).toBe('foo');
+    clock.tick(499);
+    expect(el.getAttribute('class')).toBe('foo');
+    clock.tick(1);
+    expect(el.getAttribute('class')).toBeFalsy();
+    clock.restore();
+  });
+});

package/.husky/_/husky.sh

@@ -1,30 +0,0 @@
-#!/bin/sh
-if [ -z "$husky_skip_init" ]; then
-  debug () {
-    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
-  }
-
-  readonly hook_name="$(basename "$0")"
-  debug "starting $hook_name..."
-
-  if [ "$HUSKY" = "0" ]; then
-    debug "HUSKY env variable is set to 0, skipping hook"
-    exit 0
-  fi
-
-  if [ -f ~/.huskyrc ]; then
-    debug "sourcing ~/.huskyrc"
-    . ~/.huskyrc
-  fi
-
-  export readonly husky_skip_init=1
-  sh -e "$0" "$@"
-  exitCode="$?"
-
-  if [ $exitCode != 0 ]; then
-    echo "husky - $hook_name hook exited with code $exitCode (error)"
-    exit $exitCode
-  fi
-
-  exit 0
-fi

package/stat/BookNavigator/BookModel.js

@@ -1,14 +0,0 @@
-export class Book {
-  constructor() {
-    this.metadata = {};
-    this.isRestricted = null;
-  }
-
-  setMetadata(itemMetadata) {
-    this.metadata = itemMetadata;
-  }
-
-  setRestriction(isRestricted) {
-    this.isRestricted = isRestricted;
-  }
-}