@internetarchive/bookreader 5.0.0-58 → 5.0.0-59

package/src/css/_BRpages.scss

@@ -10,7 +10,7 @@
   }
 }
 
-.BRmodeThumb .BRpagecontainer, .BRmode2Up .BRpagecontainer {
+.BRmodeThumb .BRpagecontainer, .BRmode2up .BRpagecontainer {
   cursor: pointer;
 }
 .BRpagecontainer.BRemptypage {
@@ -83,57 +83,129 @@ svg.BRPageLayer {
   display: none;
 }
 
-.BRbookcover {
-  position: absolute;
-  background-image: none;
-  box-shadow: 1px 0 10px #111;
+.br-mode-2up__root {
+  display: block;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
 }
-.BRPreview .BRpageimage {
-  background-color: #eee;
-  -webkit-filter: grayscale(100%);
-  filter: grayscale(100%);
+
+.br-mode-2up__book {
+  position: relative;
+  transform-origin: 0 0;
+  width: 0px;
+  height: 0px;
 }
 
-.BRleafEdgeR {
-  border-style: solid solid solid none;
-  border-color: rgb(51, 51, 34);
-  border-width: 1px 1px 1px 0px;
+.BRmode2up {
+  // Used while loading stuff
+  transition: opacity 0.2s;
+}
 
-  background: transparent url(images/back_pages.png) repeat scroll 0% 0%;
-  position: absolute;
-  cursor: pointer;
+.BRmode2up .BRpagecontainer {
+  backface-visibility: hidden;
+  &:not(.BRpage-visible) {
+    display: none;
+  }
 }
 
-.BRleafEdgeL {
-  /* border-style: solid none solid solid;
-  border-color: rgb(51, 51, 34);
-  border-width: 1px 0px 1px 1px; */
-  background: transparent url(images/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
+.br-mode-2up__leafs {
   position: absolute;
   cursor: pointer;
-}
+  top: 0;
+  transform-style: preserve-3d;
+  
+  &[side=left] {
+    border-radius: 4px 0 0 4px;
+    .br-leaf-edges__label {
+      padding-right: 10px;
+      border-radius: 4px 0 0 4px;
+    }
+  }
+  &[side=right] {
+    border-radius: 0 4px 4px 0;
+    .br-leaf-edges__label {
+      padding-left: 20px;
+      border-radius: 0 4px 4px 0;
+    }
+  }
+  &.br-mode-2up__leafs--flipping {
+    z-index: 200000;
+    transition: transform 5s;
+    transition-timing-function: ease-in-out;
+    border-radius: 0;
 
-.BRleafEdgeTmp {
-  /* border-style: solid none solid solid;
-  border-color: rgb(51, 51, 34);
-  border-width: 1px 0px 1px 1px; */
-  background: transparent url(images/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
-  position: absolute;
+    // Have a copy of the background at a perpendicular angle,
+    // so that during the rotation, it's always visible.
+    &:before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      transform: rotateY(-90deg);
+    }
+  }
+
+  &, &.br-mode-2up__leafs--flipping::before {
+    background: transparent url(images/back_pages.png) repeat scroll 0% 0%;
+  }
+
+  .br-leaf-edges__bar {
+    display: none;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    min-width: 1px;
+    background-color: #9A9B9D;
+    opacity: 0.85;
+    transform: translateX(-50%);
+  }
+  
+  .br-leaf-edges__label {
+    display: none;
+    pointer-events: none;
+    z-index: 1000;
+    position: absolute;
+    padding: 6px;
+    color: white;
+    background-color: #9A9B9D;
+    opacity: 0.85;
+    white-space: nowrap;
+    transform: translateY(-10px);
+  }
 }
 
-.BRgutter {
-  /* border: 1px solid rgb(68, 25, 17); */
-  position: absolute;
-  background: transparent url(images/booksplit.png) repeat scroll 0% 0%;
+.br-mode-2up--flipping-left {
+  .BRpage-entering[data-side=R] {
+    z-index: 10;
+    transform-origin: left;
+    transform: rotateY(0deg);
+  }
+
+  .BRpage-exiting[data-side=L] {
+    z-index: 10;
+    transform-origin: right;
+  }
+
+  .BRpage-exiting[data-side=R] {
+    z-index: 9;
+  }
 }
 
-.BRtwoPagePopUp {
-  padding: 6px;
-  position: absolute;
-  font-size: $brFontSizeSmaller;
-  color: white;
-  background-color: #9A9B9D;
-  opacity: 0.85;
-  border-radius: 4px;
-  white-space: nowrap;
+.br-mode-2up--flipping-right {
+  .BRpage-entering[data-side=L] {
+    z-index: 10;
+    transform-origin: right;
+  }
+
+  .BRpage-exiting[data-side=R] {
+    z-index: 10;
+    transform-origin: left;
+  }
+
+  .BRpage-exiting[data-side=L] {
+    z-index: 9;
+  }
 }

package/src/plugins/plugin.autoplay.js

@@ -80,11 +80,6 @@ BookReader.prototype.autoToggle = function(overrides) {
     this.switchMode(this.constMode2up);
   }
 
-  // Change to autofit if book is too large
-  if (this.reduce < this._modes.mode2Up.getAutofitReduce()) {
-    this.zoom('auto');
-  }
-
   if (null == this.autoTimer) {
     // $$$ Draw events currently cause layout problems when they occur during animation.
     //     There is a specific problem when changing from 1-up immediately to autoplay in RTL so
@@ -102,7 +97,7 @@ BookReader.prototype.autoToggle = function(overrides) {
     this.autoTimer = setInterval(() => {
       if (this.animating) return;
 
-      if (Math.max(this.twoPage.currentIndexL, this.twoPage.currentIndexR) >= this.lastDisplayableIndex()) {
+      if (Math.max(this.twoPage.currentIndexL, this.twoPage.currentIndexR) >= this.book.getNumLeafs() - 1) {
         this.prev({ triggerStop: false }); // $$$ really what we want?
       } else {
         this.next({ triggerStop: false });

package/src/plugins/tts/WebTTSEngine.js

@@ -1,7 +1,7 @@
 /* global br */
 import { isChrome, isFirefox } from '../../util/browserSniffing.js';
-import { promisifyEvent, isAndroid } from './utils.js';
-import { sleep } from '../../BookReader/utils.js';
+import { isAndroid } from './utils.js';
+import { promisifyEvent, sleep } from '../../BookReader/utils.js';
 import AbstractTTSEngine from './AbstractTTSEngine.js';
 /** @typedef {import("./AbstractTTSEngine.js").PageChunk} PageChunk */
 /** @typedef {import("./AbstractTTSEngine.js").AbstractTTSSound} AbstractTTSSound */

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

@@ -286,27 +286,13 @@ BookReader.prototype.ttsSendChunkFinishedAnalyticsEvent = function(chunk) {
 /**
  * Flip the page if the provided leaf index is not visible
  * @param {Number} leafIndex
- * @return {PromiseLike<void>} resolves once the flip animation has completed
  */
-BookReader.prototype.ttsMaybeFlipToIndex = function (leafIndex) {
-  const in2PageMode = this.constMode2up == this.mode;
-  let resolve = null;
-  const promise = new Promise(res => resolve = res);
-
-  if (!in2PageMode) {
+BookReader.prototype.ttsMaybeFlipToIndex = async function (leafIndex) {
+  if (this.constMode2up != this.mode) {
     this.jumpToIndex(leafIndex);
-    resolve();
   } else {
-    const leafVisible = leafIndex == this.twoPage.currentIndexR || leafIndex == this.twoPage.currentIndexL;
-    if (leafVisible) {
-      resolve();
-    } else {
-      this.animationFinishedCallback = resolve;
-      this.jumpToIndex(leafIndex);
-    }
+    await this._modes.mode2Up.mode2UpLit.jumpToIndex(leafIndex);
   }
-
-  return promise;
 };
 
 /**

package/src/plugins/tts/utils.js

@@ -1,21 +1,5 @@
 import langs from 'iso-language-codes/js/data.js';
 
-/**
- * Convert a EventTarget style event into a promise
- * @param {EventTarget} target
- * @param {string} eventType
- * @return {Promise<Event>}
- */
-export function promisifyEvent(target, eventType) {
-  return new Promise(res => {
-    const resolver = ev => {
-      target.removeEventListener(eventType, resolver);
-      res(ev);
-    };
-    target.addEventListener(eventType, resolver);
-  });
-}
-
 /**
  * Use regex to approximate word count in a string
  * @param {string} text

package/tests/e2e/helpers/base.js

@@ -182,10 +182,11 @@ export function runBaseTests (br) {
     await t.expect(isModeInUrl('2up')).eql(true);
   });
 
-  test('Clicking `2 page view` brings up 2 pages at a time', async t => {
+  test('Clicking `2 page view` brings up cur page + caching', async t => {
     const { nav } = br;
     await t.click(nav.desktop.mode2Up);
-    await t.expect(Selector('.BRpagecontainer').count).eql(2);
+    await t.expect(Selector('.BRpagecontainer.BRpage-visible').count).eql(1);
+    await t.expect(Selector('.BRpagecontainer').count).eql(3);
   });
 
   test('Clicking `1 page view` brings up 1 at a time', async t => {
@@ -207,41 +208,40 @@ export function runBaseTests (br) {
   });
 
   test('Clicking `zoom out` makes book smaller', async t => {
-    const { nav, BRcontainer } = br;
-    const book = BRcontainer.child(0);
+    const { nav } = br;
+    const page = Selector('.BRpagecontainer.BRpage-visible');
 
     await t.expect(br.BRcontainer.visible).ok();
-    await t.expect(book.visible).ok();
+    await t.expect(page.visible).ok();
     await t.expect(nav.desktop.zoomOut.visible).ok();
 
-    const initialBookHeight = await book.getBoundingClientRectProperty('height');
-    const initialBookWidth = await book.getBoundingClientRectProperty('width');
+    const initialBookHeight = await page.getBoundingClientRectProperty('height');
+    const initialBookWidth = await page.getBoundingClientRectProperty('width');
 
     await t.click(nav.desktop.zoomOut);
 
-    const zoomOutBookHeight = await book.getBoundingClientRectProperty('height');
-    const zoomOutBookWidth = await book.getBoundingClientRectProperty('width');
+    const zoomOutBookHeight = await page.getBoundingClientRectProperty('height');
+    const zoomOutBookWidth = await page.getBoundingClientRectProperty('width');
 
-    await t.expect(zoomOutBookHeight).lte(initialBookHeight);
-    await t.expect(zoomOutBookWidth).lte(initialBookWidth);
+    await t.expect(zoomOutBookHeight).lt(initialBookHeight);
+    await t.expect(zoomOutBookWidth).lt(initialBookWidth);
   });
 
   test('Clicking `zoom in` makes book larger', async t => {
-    const { nav, BRcontainer } = br;
-
-    const book = await BRcontainer.child(0);
+    const { nav } = br;
+    const page = Selector('.BRpagecontainer.BRpage-visible');
 
-    await t.expect(BRcontainer.visible).ok();
-    await t.expect(book.visible).ok();
+    await t.expect(br.BRcontainer.visible).ok();
+    await t.expect(page.visible).ok();
     await t.expect(nav.desktop.zoomIn.visible).ok();
 
-    const initialBookHeight = await book.getBoundingClientRectProperty('height');
-    const initialBookWidth = await book.getBoundingClientRectProperty('width');
+    const initialBookHeight = await page.getBoundingClientRectProperty('height');
+    const initialBookWidth = await page.getBoundingClientRectProperty('width');
 
     await t.click(nav.desktop.zoomIn);
 
-    const zoomInBookHeight = await book.getBoundingClientRectProperty('height');
-    const zoomIntBookWidth = await book.getBoundingClientRectProperty('width');
+    const zoomInBookHeight = await page.getBoundingClientRectProperty('height');
+    const zoomIntBookWidth = await page.getBoundingClientRectProperty('width');
 
     await t.expect(zoomInBookHeight).gt(initialBookHeight);
     await t.expect(zoomIntBookWidth).gt(initialBookWidth);

package/tests/e2e/helpers/rightToLeft.js

@@ -6,15 +6,9 @@ export function runRightToLeftTests (br) {
     const { nav, BRcontainer} = br;
     await t.click(nav.desktop.mode2Up);
 
-    //checking right leaf edge has 0 width
-    await t.expect(BRcontainer.find('.BRleafEdgeR').getStyleProperty('width')).eql('0px');
-
-    //checking empty page before the cover is more to the left than the first page
-    const rightEmptyPage = BRcontainer.find('.BRpagecontainer.BRemptypage');
-    const leftPage = BRcontainer.find('.BRpagecontainer.pagediv0');
-    const leftPageLDistance = leftPage.getBoundingClientRectProperty('left');
-    const rightPageLDistance = rightEmptyPage.getBoundingClientRectProperty('left');
-    await t.expect(rightPageLDistance).gt(await leftPageLDistance);
+    //checking right leaf edge is not in tree
+    await t.expect(BRcontainer.find('.br-mode-2up__leafs--left').count).eql(1);
+    await t.expect(BRcontainer.find('.br-mode-2up__leafs--right').count).eql(0);
 
     //checks slider is in correct position
     await t.expect(nav.desktop.sliderRange.getStyleProperty('width')).eql('0px');
@@ -24,6 +18,6 @@ export function runRightToLeftTests (br) {
     const { nav } = br;
     await t.click(nav.desktop.mode2Up);
     await t.click(nav.desktop.goLeft);
-    await t.expect(getPageUrl()).match(/page\/n2/);
+    await t.expect(getPageUrl()).match(/page\/n1/);
   });
 }

package/tests/e2e/viewmode.test.js

@@ -16,6 +16,15 @@ ocaids.forEach(ocaid => {
     await t.resizeWindow(400, 800);
     // Flip forward one
     await t.pressKey('right');
+    await t.pressKey('right');
+    await t.pressKey('right');
+
+    // 1up to 2up
+    await t.click(nav.desktop.viewmode);
+    const twoPageContainer = Selector('.BRmode2up');
+    await t.expect(twoPageContainer.visible).ok();
+    const twoPageImages = twoPageContainer.find('img.BRpageimage');
+    await t.expect(twoPageImages.count).gte(2);
 
     // 2up to thumb
     await t.click(nav.desktop.viewmode);
@@ -30,13 +39,6 @@ ocaids.forEach(ocaid => {
     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);
+    await t.expect(onePageImages.count).gte(2);
   });
 });

package/tests/jest/BookReader/BookModel.test.js

@@ -311,6 +311,31 @@ describe('PageModel', () => {
     });
   });
 
+  describe('findLeft/findRight', () => {
+    const data = deepCopy(SAMPLE_DATA);
+
+    test('Calls findNext/findPrev based on progression', () => {
+      const bm = new BookModel({ data });
+      const page = bm.getPage(0);
+      const findNextStub = sinon.stub(page, 'findNext');
+      const findPrevStub = sinon.stub(page, 'findPrev');
+      bm.pageProgression = 'lr';
+      page.findLeft();
+      expect(findPrevStub.callCount).toBe(1);
+      expect(findNextStub.callCount).toBe(0);
+      page.findRight();
+      expect(findPrevStub.callCount).toBe(1);
+      expect(findNextStub.callCount).toBe(1);
+      bm.pageProgression = 'rl';
+      page.findLeft();
+      expect(findPrevStub.callCount).toBe(1);
+      expect(findNextStub.callCount).toBe(2);
+      page.findRight();
+      expect(findPrevStub.callCount).toBe(2);
+      expect(findNextStub.callCount).toBe(2);
+    });
+  });
+
   describe('getURISrcSet', () => {
     const data = deepCopy(SAMPLE_DATA);
     const bm = new BookModel({ data, reduceSet: NAMED_REDUCE_SETS.pow2 });

package/tests/jest/BookReader/BookReaderPublicFunctions.test.js

@@ -28,6 +28,7 @@ describe('BookReader.prototype.toggleFullscreen', ()  => {
     br.trigger = sinon.fake();
     br.switchMode = sinon.fake();
     br.updateBrClasses = sinon.fake();
+    br.jumpToIndex = sinon.fake();
     br.refs.$brContainer = {
       css: sinon.fake(),
       animate: (options, speed, style, callback) => callback()
@@ -70,9 +71,10 @@ describe('BookReader.prototype.enterFullscreen', ()  => {
     br.mode = br.constMode1up;
     br.switchMode = sinon.fake();
     br.updateBrClasses = sinon.fake();
-    br.refs.$brContainer = {
+    br.refs.$br = {
       css: sinon.fake(),
       animate: sinon.fake(),
+      addClass: sinon.fake(),
     };
     expect(br._fullscreenCloseHandler).toBeUndefined();
 
@@ -88,9 +90,13 @@ describe('BookReader.prototype.enterFullscreen', ()  => {
     br.trigger = sinon.fake();
     br.resize = sinon.fake();
     br.jumpToIndex = sinon.fake();
+    br.refs.$br = {
+      addClass: sinon.fake(),
+      removeClass: sinon.fake(),
+    };
     br.refs.$brContainer = {
       css: sinon.fake(),
-      animate: (options, speed, style, callback) => callback()
+      animate: (options, speed, style, callback) => callback(),
     };
 
     await br.enterFullscreen();
@@ -112,6 +118,10 @@ describe('BookReader.prototype.exitFullScreen', () => {
     br.updateBrClasses = sinon.fake();
     br.trigger = sinon.fake();
     br.resize = sinon.fake();
+    br.refs.$br = {
+      addClass: sinon.fake(),
+      removeClass: sinon.fake(),
+    };
     br.refs.$brContainer = {
       css: sinon.fake(),
       animate: (options, speed, style, callback) => callback()
@@ -137,17 +147,25 @@ describe('BookReader.prototype.trigger', () => {
 });
 
 describe('`BookReader.prototype.prev`', () => {
-  const br = new BookReader();
-  global.br = br;
-  br.trigger = sinon.fake();
-  br._modes.mode2Up.flipBackToIndex = sinon.fake();
-  br.jumpToIndex = sinon.fake();
+  let br;
+  let flipAnimationStub;
+  beforeEach(() => {
+    br = new BookReader();
+    global.br = br;
+    br.trigger = sinon.fake();
+    br.jumpToIndex = sinon.fake();
+    flipAnimationStub = sinon.stub(br._modes.mode2Up.mode2UpLit, 'flipAnimation');
+  });
+
+  afterEach(() => {
+    sinon.restore();
+  });
 
   test('does not take action if user is on front page', () => {
     br.firstIndex = 0;
     br.prev();
     expect(br.trigger.callCount).toBe(0);
-    expect(br._modes.mode2Up.flipBackToIndex.callCount).toBe(0);
+    expect(flipAnimationStub.callCount).toBe(0);
     expect(br.jumpToIndex.callCount).toBe(0);
   });
 
@@ -158,7 +176,7 @@ describe('`BookReader.prototype.prev`', () => {
       br.prev();
       expect(br.jumpToIndex.callCount).toBe(0); // <--  does not get called
       expect(br.trigger.callCount).toBe(1);
-      expect(br._modes.mode2Up.flipBackToIndex.callCount).toBe(1);
+      expect(flipAnimationStub.callCount).toBe(1);
     });
   });
 
@@ -168,8 +186,7 @@ describe('`BookReader.prototype.prev`', () => {
       br.mode = br.constMode1up;
       br.prev();
       expect(br.jumpToIndex.callCount).toBe(1);  // <--  gets called
-      expect(br.trigger.callCount).toBe(1); // <-- gets called by `jumpToIndex` internally
-      expect(br._modes.mode2Up.flipBackToIndex.callCount).toBe(1); // <-- gets called by `jumpToIndex` internally
+      expect(flipAnimationStub.callCount).toBe(0); // <-- gets called by `jumpToIndex` internally
     });
   });
 });

package/tests/jest/BookReader/Mode1UpLit.test.js

@@ -71,22 +71,3 @@ describe('pageTops', () => {
     ]);
   });
 });
-
-describe('worldUnitsToRenderedPixels', () => {
-  test('0 case', () => {
-    const mode = new Mode1UpLit(null, null);
-    expect(mode.worldUnitsToRenderedPixels(0)).toBe(0);
-  });
-  test('Misc cases', () => {
-    const mode = new Mode1UpLit(null, null);
-    mode.screenDPI = 100;
-    mode.realWorldReduce = 1;
-    expect(mode.worldUnitsToRenderedPixels(1)).toBe(100);
-    mode.screenDPI = 100;
-    mode.realWorldReduce = 2;
-    expect(mode.worldUnitsToRenderedPixels(1)).toBe(50);
-    mode.screenDPI = 78;
-    mode.realWorldReduce = 1;
-    expect(mode.worldUnitsToRenderedPixels(1)).toBe(78);
-  });
-});