@internetarchive/bookreader 5.0.0-34 → 5.0.0-37

package/src/plugins/tts/FestivalTTSEngine.js

@@ -91,10 +91,10 @@ export default class FestivalTTSEngine extends AbstractTTSEngine {
    * See https://stackoverflow.com/questions/12206631/html5-audio-cant-play-through-javascript-unless-triggered-manually-once
    * @return {PromiseLike}
    */
-  iOSCaptureUserIntentHack() {
+  async iOSCaptureUserIntentHack() {
     const sound = soundManager.createSound({ url: SILENCE_1MS[this.audioFormat] });
-    return new Promise(res => sound.play({onfinish: res}))
-      .then(() => sound.destruct());
+    await new Promise(res => sound.play({onfinish: res}));
+    sound.destruct();
   }
 }
 
@@ -122,21 +122,20 @@ class FestivalTTSSound {
         if (this.rate != 1) this.sound.setPlaybackRate(this.rate);
         onload();
       },
-      onresume: () => {
-        sleep(25).then(() => {
-          if (this.rate != 1) this.sound.setPlaybackRate(this.rate);
-        });
+      onresume: async () => {
+        await sleep(25);
+        if (this.rate != 1) this.sound.setPlaybackRate(this.rate);
       }
     });
     return this.sound.load();
   }
 
-  play() {
-    return new Promise(res => {
+  async play() {
+    await new Promise(res => {
       this._finishResolver = res;
       this.sound.play({ onfinish: res });
-    })
-      .then(() => this.sound.destruct());
+    });
+    this.sound.destruct();
   }
 
   /** @override */

package/src/plugins/tts/PageChunk.js

@@ -21,27 +21,18 @@ export default class PageChunk {
    * @param {number} leafIndex
    * @return {Promise<PageChunk[]>}
    */
-  static fetch(server, bookPath, leafIndex) {
-    // jquery's ajax "PromiseLike" implementation is inconsistent with
-    // modern Promises, so convert it to a full promise (it doesn't forward
-    // a returned promise to the next handler in the chain, which kind of
-    // defeats the entire point of using promises to avoid "callback hell")
-    return new Promise((res, rej) => {
-      $.ajax({
-        type: 'GET',
-        url: `https://${server}/BookReader/BookReaderGetTextWrapper.php`,
-        dataType:'jsonp',
-        cache: true,
-        data: {
-          path: `${bookPath}_djvu.xml`,
-          page: leafIndex
-        },
-        error: rej,
-      })
-        .then(chunks => {
-          res(PageChunk._fromTextWrapperResponse(leafIndex, chunks));
-        });
+  static async fetch(server, bookPath, leafIndex) {
+    const chunks = await $.ajax({
+      type: 'GET',
+      url: `https://${server}/BookReader/BookReaderGetTextWrapper.php`,
+      dataType:'jsonp',
+      cache: true,
+      data: {
+        path: `${bookPath}_djvu.xml`,
+        page: leafIndex
+      }
     });
+    return PageChunk._fromTextWrapperResponse(leafIndex, chunks);
   }
 
   /**

package/src/plugins/tts/PageChunkIterator.js

@@ -53,22 +53,18 @@ export default class PageChunkIterator {
    * in the correct order.
    * @return {PromiseLike<"__PageChunkIterator.AT_END__" | PageChunk>}
    */
-  _nextUncontrolled() {
+  async  _nextUncontrolled() {
     if (this._cursor.page == this.pageCount) {
       return Promise.resolve(PageChunkIterator.AT_END);
     }
-
     this._recenterBuffer(this._cursor.page);
-
-    return this._fetchPageChunks(this._cursor.page)
-      .then(chunks => {
-        if (this._cursor.chunk == chunks.length) {
-          this._cursor.page++;
-          this._cursor.chunk = 0;
-          return this._nextUncontrolled();
-        }
-        return chunks[this._cursor.chunk++];
-      });
+    const chunks = await this._fetchPageChunks(this._cursor.page);
+    if (this._cursor.chunk == chunks.length) {
+      this._cursor.page++;
+      this._cursor.chunk = 0;
+      return this._nextUncontrolled();
+    }
+    return chunks[this._cursor.chunk++];
   }
 
   /**

package/src/plugins/tts/WebTTSEngine.js

@@ -167,7 +167,7 @@ export class WebTTSSound {
    * left off.
    * @return {Promise<void>}
    */
-  reload() {
+  async reload() {
     // We'll restore the pause state, so copy it here
     const wasPaused = this.paused;
     // Use recent event to determine where we'll restart from
@@ -179,14 +179,12 @@ export class WebTTSSound {
     }
 
     // We can't modify the utterance object, so we have to make a new one
-    return this.stop()
-      .then(() => {
-        this.load();
-        // Instead of playing and immediately pausing, we don't start playing. Note
-        // this is a requirement because pause doesn't work consistently across
-        // browsers.
-        if (!wasPaused) this.play();
-      });
+    await this.stop();
+    this.load();
+    // Instead of playing and immediately pausing, we don't start playing. Note
+    // this is a requirement because pause doesn't work consistently across
+    // browsers.
+    if (!wasPaused) this.play();
   }
 
   play() {
@@ -222,15 +220,16 @@ export class WebTTSSound {
     return endPromise;
   }
 
-  finish() {
-    this.stop().then(() => this.utterance.dispatchEvent(new Event('finish')));
+  async finish() {
+    await this.stop();
+    this.utterance.dispatchEvent(new Event('finish'));
   }
 
   /**
    * @override
    * Will fire a pause event unless already paused
    **/
-  pause() {
+  async pause() {
     if (this.paused) return;
 
     const pausePromise = promisifyEvent(this.utterance, 'pause');
@@ -246,19 +245,18 @@ export class WebTTSSound {
     if (pauseMightNotFire) {
       // wait for it just in case
       const timeoutPromise = sleep(100).then(() => 'timeout');
-      Promise.race([pausePromise, timeoutPromise])
-        .then(result => {
-          // We got our pause event; nothing to do!
-          if (result != 'timeout') return;
-
-          this.utterance.dispatchEvent(new CustomEvent('pause', this._lastEvents.start));
-          // if pause might not work, then we'll stop entirely and restart later
-          if (pauseMightNotWork) this.stop();
-        });
+      const result = await Promise.race([pausePromise, timeoutPromise]);
+      // We got our pause event; nothing to do!
+      if (result != 'timeout') return;
+
+      this.utterance.dispatchEvent(new CustomEvent('pause', this._lastEvents.start));
+
+      // if pause might not work, then we'll stop entirely and restart later
+      if (pauseMightNotWork) this.stop();
     }
   }
 
-  resume() {
+  async resume() {
     if (!this.started) {
       this.play();
       return;
@@ -278,16 +276,15 @@ export class WebTTSSound {
     speechSynthesis.resume();
 
     if (resumeMightNotFire) {
-      Promise.race([resumePromise, sleep(100).then(() => 'timeout')])
-        .then(result => {
-          if (result != 'timeout') return;
-
-          this.utterance.dispatchEvent(new CustomEvent('resume', {}));
-          if (resumeMightNotWork) {
-            const reloadPromise = this.reload();
-            reloadPromise.then(() => this.play());
-          }
-        });
+      const result = await Promise.race([resumePromise, sleep(100).then(() => 'timeout')]);
+
+      if (result != 'timeout') return;
+
+      this.utterance.dispatchEvent(new CustomEvent('resume', {}));
+      if (resumeMightNotWork) {
+        await this.reload();
+        this.play();
+      }
     }
   }
 
@@ -308,45 +305,39 @@ export class WebTTSSound {
    * We avoid this (as described here: https://bugs.chromium.org/p/chromium/issues/detail?id=679437#c15 )
    * by pausing after 14 seconds and ~instantly resuming.
    */
-  _chromePausingBugFix() {
+  async _chromePausingBugFix() {
     const timeoutPromise = sleep(14000).then(() => 'timeout');
     const pausePromise = promisifyEvent(this.utterance, 'pause').then(() => 'paused');
     const endPromise = promisifyEvent(this.utterance, 'end').then(() => 'ended');
-    return Promise.race([timeoutPromise, pausePromise, endPromise])
-      .then(result => {
-        if (location.toString().indexOf('_debugReadAloud=true') != -1) {
-          console.log(`CHROME-PAUSE-HACK: ${result}`);
-        }
-        switch (result) {
-        case 'ended':
-          // audio was stopped/finished; nothing to do
-          break;
-        case 'paused':
-          // audio was paused; wait for resume
-          // Chrome won't let you resume the audio if 14s have passed 🤷‍
-          // We could do the same as before (but resume+pause instead of pause+resume),
-          // but that means we'd _constantly_ be running in the background. So in that
-          // case, let's just restart the chunk
-          Promise.race([
-            promisifyEvent(this.utterance, 'resume'),
-            sleep(14000).then(() => 'timeout'),
-          ])
-            .then(result => {
-              result == 'timeout' ? this.reload() : this._chromePausingBugFix();
-            });
-          break;
-        case 'timeout':
-          // We hit Chrome's secret cut off time. Pause/resume
-          // to be able to keep TTS-ing
-          speechSynthesis.pause();
-          sleep(25)
-            .then(() => {
-              speechSynthesis.resume();
-              this._chromePausingBugFix();
-            });
-          break;
-        }
-      });
+    const result = await Promise.race([timeoutPromise, pausePromise, endPromise]);
+    if (location.toString().indexOf('_debugReadAloud=true') != -1) {
+      console.log(`CHROME-PAUSE-HACK: ${result}`);
+    }
+    switch (result) {
+    case 'ended':
+      // audio was stopped/finished; nothing to do
+      break;
+    case 'paused':
+      // audio was paused; wait for resume
+      // Chrome won't let you resume the audio if 14s have passed 🤷‍
+      // We could do the same as before (but resume+pause instead of pause+resume),
+      // but that means we'd _constantly_ be running in the background. So in that
+      // case, let's just restart the chunk
+      await Promise.race([
+        promisifyEvent(this.utterance, 'resume'),
+        sleep(14000).then(() => 'timeout'),
+      ]);
+      result == 'timeout' ? this.reload() : this._chromePausingBugFix();
+      break;
+    case 'timeout':
+      // We hit Chrome's secret cut off time. Pause/resume
+      // to be able to keep TTS-ing
+      speechSynthesis.pause();
+      await sleep(25);
+      speechSynthesis.resume();
+      this._chromePausingBugFix();
+      break;
+    }
   }
 }
 

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

@@ -261,9 +261,7 @@ BookReader.prototype.ttsStop = function () {
 BookReader.prototype.ttsBeforeChunkPlay = async function(chunk) {
   await this.ttsMaybeFlipToIndex(chunk.leafIndex);
   this.ttsHighlightChunk(chunk);
-  // This appears not to work; ttsMaybeFlipToIndex causes a scroll to the top of
-  // the active page :/ Disabling cause the extra scroll just adds an odd jitter.
-  // this.ttsScrollToChunk(chunk);
+  this.ttsScrollToChunk(chunk);
 };
 
 /**
@@ -292,10 +290,7 @@ BookReader.prototype.ttsMaybeFlipToIndex = function (leafIndex) {
       resolve();
     } else {
       this.animationFinishedCallback = resolve;
-      const mustGoNext = leafIndex > Math.max(this.twoPage.currentIndexR, this.twoPage.currentIndexL);
-      if (mustGoNext) this.next();
-      else this.prev();
-      promise.then(this.ttsMaybeFlipToIndex.bind(this, leafIndex));
+      this.jumpToIndex(leafIndex);
     }
   }
 
@@ -329,9 +324,20 @@ BookReader.prototype.ttsHighlightChunk = function(chunk) {
  * @param {PageChunk} chunk
  */
 BookReader.prototype.ttsScrollToChunk = function(chunk) {
-  if (this.constMode1up != this.mode) return;
-
-  $(`.pagediv${chunk.leafIndex} .ttsHiliteLayer rect`)[0]?.scrollIntoView();
+  // It behaves weird if used in thumb mode
+  if (this.constModeThumb == this.mode) return;
+
+  $(`.pagediv${chunk.leafIndex} .ttsHiliteLayer rect`).last()?.[0]?.scrollIntoView({
+    // Only vertically center the highlight if we're in 1up or in full screen. In
+    // 2up, if we're not fullscreen, the whole body gets scrolled around to try to
+    // center the highlight 🙄 See:
+    // https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move/11041376
+    // Note: nearest doesn't quite work great, because the ReadAloud toolbar is now
+    // full-width, and covers up the last line of the highlight.
+    block: this.constMode1up == this.mode || this.isFullscreenActive ? 'center' : 'nearest',
+    inline: 'center',
+    behavior: 'smooth',
+  });
 };
 
 // ttsRemoveHilites()

package/src/plugins/url/UrlPlugin.js

@@ -140,7 +140,7 @@ export class UrlPlugin {
     const concatenatedPath = urlStrPath !== '/' ? urlStrPath : '';
     if (this.urlMode == 'history') {
       if (window.history && window.history.replaceState) {
-        const newUrlPath = `${this.urlHistoryBasePath}${concatenatedPath}`;
+        const newUrlPath = `${this.urlHistoryBasePath}${concatenatedPath}`.trim().replace(/(\/+)/g, '/');
         window.history.replaceState({}, null, newUrlPath);
       }
     } else {

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';
 
@@ -21,10 +21,13 @@ ocaids.forEach(ocaid => {
   fixture `Base Tests for: ${ocaid}`.page `${url}`;
   runBaseTests(new BookReader());
 
-  fixture `Desktop Search Tests for: ${ocaid}`
-    .page `${url}`;
-  runDesktopSearchTests(new BookReader());
 
+  // Todo: Re-enable when testing side panel
+  // 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}`
   //   .page `${url}`
   // runMobileSearchTests(new BookReader());

package/tests/e2e/helpers/params.js

@@ -1,7 +1,7 @@
 // @ts-check
 class TestParams {
   baseUrl = process.env.BASE_URL?.replace(/\/+$/, '') ?? 'http://127.0.0.1:8000'
-  ocaids = process.env.OCAIDS?.split(',') ?? [];
+  ocaids = process.env.OCAIDS?.split(',') ?? null;
   /** Whether the url we're testing is a prod (or near prod) IA url, or a demos url */
   isIA = new URL(this.baseUrl).hostname.endsWith('archive.org');
 

package/tests/e2e/viewmode.test.js

@@ -1,36 +1,36 @@
-// import { Selector } from 'testcafe';
-// import BookReader from './models/BookReader';
-// import params from './helpers/params';
+import { Selector } from 'testcafe';
+import BookReader from './models/BookReader';
+import params from './helpers/params';
 
-// fixture `Viewmode carousel`.page `${params.baseUrl}/BookReaderDemo/viewmode-cycle.html`;
+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());
+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');
+  // 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);
+  // 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);
+  // 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);
-// });
+  // 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/tests/jest/BookReader/Mode1UpLit.test.js

@@ -35,7 +35,8 @@ describe('pageTops', () => {
     const book = new BookModel(br);
     const mode = new Mode1UpLit(book, br);
     document.body.appendChild(mode);
-    await mode.requestUpdate();
+    mode.requestUpdate();
+    await mode.updateComplete;
     expect(mode.pageTops).toEqual({});
   });
 

package/tests/jest/plugins/plugin.text_selection.test.js

@@ -19,30 +19,32 @@ const FAKE_XML_5COORDS = `<OBJECT data="file://localhost//tmp/derive/goodytwosho
 const FAKE_XML_EMPTY = '';
 
 describe("Generic tests", () => {
-  let br;
-  beforeEach(() => {
-    document.body.innerHTML = '<div id="BookReader">';
-    br = new BookreaderWithTextSelection({
-      data: [
-        [
-          { width: 800, height: 1200,
-            uri: '//archive.org/download/BookReader/img/page001.jpg' },
-        ],
-        [
-          { width: 800, height: 1200,
-            uri: '//archive.org/download/BookReader/img/page002.jpg' },
-          { width: 800, height: 1200,
-            uri: '//archive.org/download/BookReader/img/page003.jpg' },
-        ],
-        [
-          { width: 800, height: 1200,
-            uri: '//archive.org/download/BookReader/img/page004.jpg' },
-          { width: 800, height: 1200,
-            uri: '//archive.org/download/BookReader/img/page005.jpg' },
-        ]
+  document.body.innerHTML = '<div id="BookReader">';
+  const br = new BookreaderWithTextSelection({
+    data: [
+      [
+        { width: 800, height: 1200,
+          uri: '//archive.org/download/BookReader/img/page001.jpg' },
       ],
-    });
-    br.init();
+      [
+        { width: 800, height: 1200,
+          uri: '//archive.org/download/BookReader/img/page002.jpg' },
+        { width: 800, height: 1200,
+          uri: '//archive.org/download/BookReader/img/page003.jpg' },
+      ],
+      [
+        { width: 800, height: 1200,
+          uri: '//archive.org/download/BookReader/img/page004.jpg' },
+        { width: 800, height: 1200,
+          uri: '//archive.org/download/BookReader/img/page005.jpg' },
+      ]
+    ],
+  });
+  br.init();
+
+  afterEach(() => {
+    sinon.restore();
+    $('.textSelectionSVG').remove();
   });
 
   test("_createPageContainer overridden function still creates a BRpagecontainer element", () => {

package/tests/jest/plugins/search/plugin.search.test.js

@@ -123,28 +123,24 @@ describe('Plugin: Search', () => {
     expect(br.options.goToFirstResult).toBeTruthy();
   });
 
-  test('SearchCallback event fires when AJAX search returns results', () => {
+  test('SearchCallback event fires when AJAX search returns results', async () => {
     br.init();
-    const dfd = br.search('foo');
-    return dfd.then(() => {
-      expect(triggeredEvents()).toContain(`${namespace}SearchCallback`);
-    });
+    await br.search('foo');
+    expect(triggeredEvents()).toContain(`${namespace}SearchCallback`);
   });
 
-  test('SearchCallbackError event fires when AJAX search returns error', () => {
+  test('SearchCallbackError event fires when AJAX search returns error', async () => {
     $.ajax = jest.fn().mockImplementation(() => {
       return Promise.resolve({
         error: true,
       });
     });
     br.init();
-    const dfd = br.search('foo');
-    return dfd.then(() => {
-      expect(triggeredEvents()).toContain(`${namespace}SearchCallbackError`);
-    });
+    await br.search('foo');
+    expect(triggeredEvents()).toContain(`${namespace}SearchCallbackError`);
   });
 
-  test('SearchCallbackNotIndexed event fires when AJAX search returns false indexed value', () => {
+  test('SearchCallbackNotIndexed event fires when AJAX search returns false indexed value', async () => {
     $.ajax = jest.fn().mockImplementation(() => {
       return Promise.resolve({
         matches: [],
@@ -152,22 +148,18 @@ describe('Plugin: Search', () => {
       });
     });
     br.init();
-    const dfd = br.search('foo');
-    return dfd.then(() => {
-      expect(triggeredEvents()).toContain(`${namespace}SearchCallbackBookNotIndexed`);
-    });
+    await br.search('foo');
+    expect(triggeredEvents()).toContain(`${namespace}SearchCallbackBookNotIndexed`);
   });
 
-  test('SearchCallbackEmpty event fires when AJAX search returns no matches', () => {
+  test('SearchCallbackEmpty event fires when AJAX search returns no matches', async () => {
     $.ajax = jest.fn().mockImplementation(() => {
       return Promise.resolve({
         matches: [],
       });
     });
     br.init();
-    const dfd = br.search('foo');
-    return dfd.then(() => {
-      expect(triggeredEvents()).toContain(`${namespace}SearchCallbackEmpty`);
-    });
+    await br.search('foo');
+    expect(triggeredEvents()).toContain(`${namespace}SearchCallbackEmpty`);
   });
 });

package/tests/jest/plugins/tts/AbstractTTSEngine.test.js

@@ -6,7 +6,7 @@ import PageChunkIterator from '@/src/plugins/tts/PageChunkIterator.js';
 
 // Skipping because it's flaky. Fix in #672
 describe.skip('AbstractTTSEngine', () => {
-  test('stops playing once done', () => {
+  test('stops playing once done', async () => {
     class DummyEngine extends AbstractTTSEngine {
       getVoices() { return []; }
     }
@@ -15,8 +15,8 @@ describe.skip('AbstractTTSEngine', () => {
     const stopStub = sinon.stub(d, 'stop');
     expect(stopStub.callCount).toBe(0);
     d.step();
-    return afterEventLoop()
-      .then(() => expect(stopStub.callCount).toBe(1));
+    await afterEventLoop();
+    expect(stopStub.callCount).toBe(1);
   });
 });
 

package/tests/jest/plugins/url/UrlPlugin.test.js

@@ -170,6 +170,21 @@ describe('UrlPlugin tests', () => {
       const locationUrl = `${window.location.pathname}${window.location.search}`;
       expect(locationUrl).toEqual('/details/foo/page/12?q=hello&view=theater');
     });
+
+    test('strips leading slash of incoming path name for no double slash', () => {
+      const urlPlugin = new UrlPlugin();
+      urlPlugin.urlMode = 'history';
+
+      urlPlugin.urlHistoryBasePath = '/details/SubBookTest/book1/GPORFP/';
+      urlPlugin.urlState = {
+        "mode": "1up",
+      };
+
+      urlPlugin.setUrlParam('sort', 'title_asc');
+      urlPlugin.setUrlParam('mode', 'thumb');
+
+      expect(window.location.href).toEqual('http://localhost/details/SubBookTest/book1/GPORFP/mode/thumb?sort=title_asc');
+    });
   });
 
 });