@internetarchive/bookreader 5.0.0-3 → 5.0.0-30-d

package/stat/plugins/tts/plugin.tts.js

@@ -0,0 +1,357 @@
+/* global BookReader */
+/**
+ * Plugin for Text to Speech in BookReader
+ */
+import FestivalTTSEngine from './FestivalTTSEngine.js';
+import WebTTSEngine from './WebTTSEngine.js';
+import { toISO6391, approximateWordCount } from './utils.js';
+import { en as tooltips } from './tooltip_dict.js';
+import { renderBoxesInPageContainerLayer } from '../../BookReader/PageContainer.js';
+/** @typedef {import('./PageChunk.js').default} PageChunk */
+/** @typedef {import("./AbstractTTSEngine.js").default} AbstractTTSEngine */
+
+// Default options for TTS
+jQuery.extend(BookReader.defaultOptions, {
+  server: 'ia600609.us.archive.org',
+  bookPath: '',
+  enableTtsPlugin: true,
+});
+
+// Extend the constructor to add TTS properties
+BookReader.prototype.setup = (function (super_) {
+  return function (options) {
+    super_.call(this, options);
+
+    if (this.options.enableTtsPlugin) {
+      /** @type { {[pageIndex: number]: Array<{ l: number, r: number, t: number, b: number }>} } */
+      this._ttsBoxesByIndex = {};
+
+      let TTSEngine = WebTTSEngine.isSupported() ? WebTTSEngine :
+        FestivalTTSEngine.isSupported() ? FestivalTTSEngine :
+          null;
+
+      if (/_forceTTSEngine=(festival|web)/.test(location.toString())) {
+        const engineName = location.toString().match(/_forceTTSEngine=(festival|web)/)[1];
+        TTSEngine = { festival: FestivalTTSEngine, web: WebTTSEngine }[engineName];
+      }
+
+      if (TTSEngine) {
+        /** @type {AbstractTTSEngine} */
+        this.ttsEngine = new TTSEngine({
+          server: options.server,
+          bookPath: options.bookPath,
+          bookLanguage: toISO6391(options.bookLanguage),
+          onLoadingStart: this.showProgressPopup.bind(this, 'Loading audio...'),
+          onLoadingComplete: this.removeProgressPopup.bind(this),
+          onDone: this.ttsStop.bind(this),
+          beforeChunkPlay: this.ttsBeforeChunkPlay.bind(this),
+          afterChunkPlay: this.ttsSendChunkFinishedAnalyticsEvent.bind(this),
+        });
+      }
+    }
+  };
+})(BookReader.prototype.setup);
+
+BookReader.prototype.init = (function(super_) {
+  return function() {
+    if (this.options.enableTtsPlugin) {
+      // Bind to events
+
+      this.bind(BookReader.eventNames.PostInit, () => {
+        this.$('.BRicon.read').click(() => {
+          this.ttsToggle();
+          return false;
+        });
+        if (this.ttsEngine) {
+          this.ttsEngine.init();
+          if (/[?&]_autoReadAloud=show/.test(location.toString())) {
+            this.ttsStart(false); // false flag is to initiate read aloud controls
+          }
+        }
+      });
+
+      // This is fired when the hash changes by one of the other plugins!
+      // i.e. it will fire every time the page changes -_-
+      // this.bind(BookReader.eventNames.stop, function(e, br) {
+      //     this.ttsStop();
+      // }.bind(this));
+    }
+    super_.call(this);
+  };
+})(BookReader.prototype.init);
+
+/** @override */
+BookReader.prototype._createPageContainer = (function (super_) {
+  return function (index) {
+    const pageContainer = super_.call(this, index);
+    if (this.options.enableTtsPlugin && pageContainer.page && index in this._ttsBoxesByIndex) {
+      const pageIndex = pageContainer.page.index;
+      renderBoxesInPageContainerLayer('ttsHiliteLayer', this._ttsBoxesByIndex[pageIndex], pageContainer.page, pageContainer.$container[0]);
+    }
+    return pageContainer;
+  };
+})(BookReader.prototype._createPageContainer);
+
+// Extend buildMobileDrawerElement
+BookReader.prototype.buildMobileDrawerElement = (function (super_) {
+  return function () {
+    const $el = super_.call(this);
+    if (this.options.enableTtsPlugin && this.ttsEngine) {
+      $el.find('.BRmobileMenu__moreInfoRow').after($(`
+        <li>
+            <span>
+                <span class="DrawerIconWrapper"><img class="DrawerIcon" src="${this.imagesBaseURL}icon_speaker_open.svg" alt="info-speaker"/></span>
+                Read Aloud
+            </span>
+            <div>
+                <span class="larger">Press to toggle read aloud</span>
+                <br/>
+                <button class="BRicon read"></button>
+            </div>
+        </li>`));
+    }
+    return $el;
+  };
+})(BookReader.prototype.buildMobileDrawerElement);
+
+// Extend initNavbar
+BookReader.prototype.initNavbar = (function (super_) {
+  return function () {
+    const $el = super_.call(this);
+    if (this.options.enableTtsPlugin && this.ttsEngine) {
+      this.refs.$BRReadAloudToolbar = $(`
+        <ul class="read-aloud">
+          <li>
+            <select class="playback-speed" name="playback-speed" title="${tooltips.playbackSpeed}">
+              <option value="0.25">0.25x</option>
+              <option value="0.5">0.5x</option>
+              <option value="0.75">0.75x</option>
+              <option value="1.0" selected>1.0x</option>
+              <option value="1.25">1.25x</option>
+              <option value="1.5">1.5x</option>
+              <option value="1.75">1.75x</option>
+              <option value="2">2x</option>
+            </select>
+          </li>
+          <li>
+            <button type="button" name="review" title="${tooltips.review}">
+              <div class="icon icon-review"></div>
+            </button>
+          </li>
+          <li>
+            <button type="button" name="play" title="${tooltips.play}">
+              <div class="icon icon-play"></div>
+              <div class="icon icon-pause"></div>
+            </button>
+          </li>
+          <li>
+            <button type="button" name="advance" title="${tooltips.advance}">
+              <div class="icon icon-advance"></div>
+            </button>
+          </li>
+          <li>
+            <select class="playback-voices" name="playback-voice" style="display: none" title="Change read aloud voices">
+            </select>
+          </li>
+        </ul>
+      `);
+
+      $el.find('.BRcontrols').prepend(this.refs.$BRReadAloudToolbar);
+
+      const renderVoicesMenu = (voicesMenu) => {
+        voicesMenu.empty();
+        if (this.ttsEngine.getVoices().length > 1) {
+          voicesMenu.append(this.ttsEngine.getVoices().map(
+            voice =>
+              $(`<option value="${voice.voiceURI}">${voice.lang} - ${voice.name}</option>`)));
+          voicesMenu.val(this.ttsEngine.voice.voiceURI);
+          voicesMenu.show();
+        } else {
+          voicesMenu.hide();
+        }
+      };
+      const voicesMenu = this.refs.$BRReadAloudToolbar.find('[name=playback-voice]');
+      renderVoicesMenu(voicesMenu);
+      voicesMenu.on("change", ev => this.ttsEngine.setVoice(voicesMenu.val()));
+      this.ttsEngine.events.on('pause resume start', () => this.ttsUpdateState());
+      this.ttsEngine.events.on('voiceschanged', () => renderVoicesMenu(voicesMenu));
+      this.refs.$BRReadAloudToolbar.find('[name=play]').on("click", this.ttsPlayPause.bind(this));
+      this.refs.$BRReadAloudToolbar.find('[name=advance]').on("click", this.ttsJumpForward.bind(this));
+      this.refs.$BRReadAloudToolbar.find('[name=review]').on("click", this.ttsJumpBackward.bind(this));
+      const $rateSelector = this.refs.$BRReadAloudToolbar.find('select[name="playback-speed"]');
+      $rateSelector.on("change", ev => this.ttsEngine.setPlaybackRate(parseFloat($rateSelector.val())));
+      $(`<li>
+          <button class="BRicon read js-tooltip" title="${tooltips.readAloud}">
+            <div class="icon icon-read-aloud"></div>
+            <span class="tooltip">${tooltips.readAloud}</span>
+          </button>
+        </li>`).insertBefore($el.find('.BRcontrols .BRicon.zoom_out').closest('li'));
+    }
+    return $el;
+  };
+})(BookReader.prototype.initNavbar);
+
+// ttsToggle()
+//______________________________________________________________________________
+BookReader.prototype.ttsToggle = function () {
+  if (this.autoStop) this.autoStop();
+  if (this.ttsEngine.playing) {
+    this.ttsStop();
+  } else {
+    this.ttsStart();
+  }
+};
+
+// ttsStart(
+//______________________________________________________________________________
+BookReader.prototype.ttsStart = function (startTTSEngine = true) {
+  if (this.constModeThumb == this.mode)
+    this.switchMode(this.constMode1up);
+
+  this.refs.$BRReadAloudToolbar.addClass('visible');
+  this.$('.BRicon.read').addClass('unread active');
+  this.ttsSendAnalyticsEvent('Start');
+  if (startTTSEngine)
+    this.ttsEngine.start(this.currentIndex(), this.getNumLeafs());
+};
+
+BookReader.prototype.ttsJumpForward = function () {
+  if (this.ttsEngine.paused) {
+    this.ttsEngine.resume();
+  }
+  this.ttsEngine.jumpForward();
+};
+
+BookReader.prototype.ttsJumpBackward = function () {
+  if (this.ttsEngine.paused) {
+    this.ttsEngine.resume();
+  }
+  this.ttsEngine.jumpBackward();
+};
+
+BookReader.prototype.ttsUpdateState = function() {
+  const isPlaying = !(this.ttsEngine.paused || !this.ttsEngine.playing);
+  this.$('.read-aloud [name=play]').toggleClass('playing', isPlaying);
+};
+
+BookReader.prototype.ttsPlayPause = function() {
+  if (!this.ttsEngine.playing) {
+    this.ttsToggle();
+  } else {
+    this.ttsEngine.togglePlayPause();
+    this.ttsUpdateState(this.ttsEngine.paused);
+  }
+};
+
+// ttsStop()
+//______________________________________________________________________________
+BookReader.prototype.ttsStop = function () {
+  this.refs.$BRReadAloudToolbar.removeClass('visible');
+  this.$('.BRicon.read').removeClass('unread active');
+  this.ttsSendAnalyticsEvent('Stop');
+  this.ttsEngine.stop();
+  this.ttsRemoveHilites();
+  this.removeProgressPopup();
+};
+
+/**
+ * @param {PageChunk} chunk
+ * @return {PromiseLike<void>} returns once the flip is done
+ */
+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);
+};
+
+/**
+ * @param {PageChunk} chunk
+ */
+BookReader.prototype.ttsSendChunkFinishedAnalyticsEvent = function(chunk) {
+  this.ttsSendAnalyticsEvent('ChunkFinished-Words', approximateWordCount(chunk.text));
+};
+
+/**
+ * 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) {
+    this.jumpToIndex(leafIndex);
+    resolve();
+  } else {
+    const leafVisible = leafIndex == this.twoPage.currentIndexR || leafIndex == this.twoPage.currentIndexL;
+    if (leafVisible) {
+      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));
+    }
+  }
+
+  return promise;
+};
+
+/**
+ * @param {PageChunk} chunk
+ */
+BookReader.prototype.ttsHighlightChunk = function(chunk) {
+  // The poorly-named variable leafIndex
+  const pageIndex = chunk.leafIndex;
+
+  this.ttsRemoveHilites();
+
+  // group by index; currently only possible to have chunks on one page :/
+  this._ttsBoxesByIndex = {
+    [pageIndex]: chunk.lineRects.map(([l, b, r, t]) => ({l, r, b, t}))
+  };
+
+  // update any already created pages
+  for (const [pageIndexString, boxes] of Object.entries(this._ttsBoxesByIndex)) {
+    const pageIndex = parseFloat(pageIndexString);
+    const page = this._models.book.getPage(pageIndex);
+    const pageContainers = this.getActivePageContainerElementsForIndex(pageIndex);
+    pageContainers.forEach(container => renderBoxesInPageContainerLayer('ttsHiliteLayer', boxes, page, container));
+  }
+};
+
+/**
+ * @param {PageChunk} chunk
+ */
+BookReader.prototype.ttsScrollToChunk = function(chunk) {
+  if (this.constMode1up != this.mode) return;
+
+  $(`.pagediv${chunk.leafIndex} .ttsHiliteLayer rect`)[0]?.scrollIntoView();
+};
+
+// ttsRemoveHilites()
+//______________________________________________________________________________
+BookReader.prototype.ttsRemoveHilites = function () {
+  $(this.getActivePageContainerElements()).find('.ttsHiliteLayer').remove();
+  this._ttsBoxesByIndex = {};
+};
+
+/**
+ * @private
+ * Send an analytics event with an optional value. Also attaches the book's language.
+ * @param {string} action
+ * @param {number} [value]
+ */
+BookReader.prototype.ttsSendAnalyticsEvent = function(action, value) {
+  if (this.archiveAnalyticsSendEvent) {
+    const extraValues = {};
+    const mediaLanguage = this.ttsEngine.opts.bookLanguage;
+    if (mediaLanguage) extraValues.mediaLanguage = mediaLanguage;
+    this.archiveAnalyticsSendEvent('BRReadAloud', action, value, extraValues);
+  }
+};

package/stat/plugins/tts/tooltip_dict.js

@@ -0,0 +1,15 @@
+export const en = {
+  advance: 'Advance 10 seconds',
+  play: 'Play',
+  playbackSpeed: 'Playback speed',
+  readAloud: 'Read this book aloud',
+  review: 'Review 10 seconds',
+};
+
+export const es = {
+  advance: 'Avance 10 segundos',
+  play: 'Jugar',
+  playbackSpeed: 'Velocidad de reproducción',
+  readAloud: 'Lee este libro en voz alta',
+  review: 'Revisar 10 segundos',
+};

package/stat/plugins/tts/utils.js

@@ -0,0 +1,91 @@
+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
+ * @return {number}
+ */
+export function approximateWordCount(text) {
+  const m = text.match(/\S+/g);
+  return m ? m.length : 0;
+}
+
+/**
+ * Waits the provided number of ms and then resolves with a promise
+ * @param {number} ms
+ * @return {Promise}
+ */
+export function sleep(ms) {
+  return new Promise(res => setTimeout(res, ms));
+}
+
+/**
+ * Checks whether the current browser is on android
+ * @param {string} [userAgent]
+ * @return {boolean}
+ */
+export function isAndroid(userAgent = navigator.userAgent) {
+  return /android/i.test(userAgent);
+}
+
+/**
+ * @typedef {string} ISO6391
+ * Language code in ISO 639-1 format. e.g. en, fr, zh
+ **/
+
+/** Each lang is an array, with each index mapping to a different property */
+const COLUMN_TO_LANG_INDEX = {
+  'Name': 0,
+  'Endonym': 1,
+  'ISO 639-1': 2,
+  'ISO 639-2/T': 3,
+  'ISO 639-2/B': 4
+};
+
+/**
+ * @param {string} language in some format
+ * @return {ISO6391?}
+ */
+export function toISO6391(language) {
+  if (!language) return null;
+  language = language.toLowerCase();
+
+  return searchForISO6391(language, ['ISO 639-1']) ||
+    searchForISO6391(language, ['ISO 639-2/B']) ||
+    searchForISO6391(language, ['ISO 639-2/T', 'Endonym', 'Name']);
+}
+
+/**
+ * Searches for the given long in the given columns.
+ * @param {string} language
+ * @param {Array<keyof COLUMN_TO_LANG_INDEX>} columnsToSearch
+ * @return {ISO6391?}
+ */
+function searchForISO6391(language, columnsToSearch) {
+  for (let i = 0; i < langs.length; i++) {
+    for (let colI = 0; colI < columnsToSearch.length; colI++) {
+      const column = columnsToSearch[colI];
+      const columnValue = langs[i][COLUMN_TO_LANG_INDEX[column]];
+      if (columnValue.split(', ').map(x => x.toLowerCase()).indexOf(language) != -1) {
+        return langs[i][COLUMN_TO_LANG_INDEX['ISO 639-1']];
+      }
+    }
+  }
+  return null;
+}

package/stat/util/browserSniffing.js

@@ -0,0 +1,30 @@
+
+/**
+ * Checks whether the current browser is a Chrome/Chromium browser
+ * Code from https://stackoverflow.com/a/4565120/2317712
+ * @param {string} [userAgent]
+ * @param {string} [vendor]
+ * @return {boolean}
+ */
+export function isChrome(userAgent = navigator.userAgent, vendor = navigator.vendor) {
+  return /chrome/i.test(userAgent) && /google inc/i.test(vendor);
+}
+
+/**
+ * Checks whether the current browser is firefox
+ * @param {string} [userAgent]
+ * @return {boolean}
+ */
+export function isFirefox(userAgent = navigator.userAgent) {
+  return /firefox/i.test(userAgent);
+}
+
+/**
+ * Checks whether the current browser is safari
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#Browser_Name
+ * @param {string} [userAgent]
+ * @return {boolean}
+ */
+export function isSafari(userAgent = navigator.userAgent) {
+  return /safari/i.test(userAgent) && !/chrome|chromium/i.test(userAgent);
+}

package/stat/util/debouncer.js

@@ -0,0 +1,26 @@
+/**
+ * Wait until some time has passed before executing a callback.
+ *
+ * @param {Function} callback
+ * @param {Number}   threshhold - in milliseconds
+ * @param {*}        context    - will be bound to callback as its "this" value
+ */
+class Debouncer {
+  constructor(callback, threshhold = 250, context = undefined) {
+    this.callback = callback;
+    this.threshhold = threshhold;
+    this.context = context;
+    this.deferTimeout = undefined;
+  }
+
+  execute() {
+    clearTimeout(this.deferTimeout);
+    this.deferTimeout = setTimeout(this.executeCallback.bind(this), this.threshhold);
+  }
+
+  executeCallback() {
+    this.callback.apply(this.context);
+  }
+}
+
+export { Debouncer as default };

package/stat/util/docCookies.js

@@ -0,0 +1,67 @@
+/**
+ * Helper module use to get, set and remove item from cookie
+ *
+ * See more:
+ *  https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
+ *  https://developer.mozilla.org/User:fusionchess
+ *  https://github.com/madmurphy/cookies.js
+ *  This framework is released under the GNU Public License, version 3 or later.
+ *  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+ */
+
+/**
+ * Get specific key's value stored in cookie
+ *
+ * @param {string} sKey
+ *
+ * @returns {string|null}
+ */
+export function getItem(sKey) {
+  if (!sKey) return null;
+
+  return decodeURIComponent(
+    // eslint-disable-next-line no-useless-escape
+    document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1')) || null;
+}
+
+/**
+ * Set specific key's value in cookie
+ *
+ * @param {string} sKey cookie name
+ * @param {string} sValue cookie value
+ * @param {string} [vEnd] expire|max-age
+ * @param {string} [sPath] path of current item
+ * @param {string} [sDomain] domain name
+ * @param {boolean} [bSecure]
+ *
+ * @returns {true}
+ */
+export function setItem(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
+  document.cookie = encodeURIComponent(sKey) + '=' + encodeURIComponent(sValue)
+  + (vEnd ? `; expires=${vEnd.toUTCString()}` : '')
+  + (sDomain ? `; domain=${sDomain}` : '')
+  + (sPath ? `; path=${sPath}` : '')
+  + (bSecure ? `; secure` : '');
+
+  return true;
+}
+
+/**
+ * BROKEN Remove specific key's value from cookie
+ * @fixme hasItem isn't even implemented! This will always error.
+ * @param {string} sKey cookie name
+ * @param {string} [sPath] path of current item
+ * @param {string} [sDomain]
+ *
+ * @returns {boolean}
+ */
+export function removeItem(sKey, sPath, sDomain) {
+  // eslint-disable-next-line
+  if (!hasItem(sKey)) return false;
+
+  document.cookie = encodeURIComponent(sKey) + `=; expires=Thu, 01 Jan 1970 00:00:00 GMT`
+  + (sDomain ? `; domain=${sDomain}` : '')
+  + (sPath ? `; path=${sPath}` : '');
+
+  return true;
+}

package/stat/util/strings.js

@@ -0,0 +1,34 @@
+/**
+ * @typedef {String} StringWithVars
+ * A template string with {{foo}} style variables
+ * Also supports filters, like {{bookPath|urlencode}} (See APPLY_FILTERS for the
+ * supported list of filters)
+ **/
+
+/**
+ * @param {StringWithVars|String} template
+ * @param { {[varName: string]: { toString: () => string} } } vars
+ * @param { {[varName: string]: { toString: () => string} } } [overrides]
+ */
+export function applyVariables(template, vars, overrides = {}, possibleFilters = APPLY_FILTERS) {
+  return template?.replace(/\{\{([^}]*?)\}\}/g, ($0, $1) => {
+    if (!$1) return $0;
+    /** @type {string} */
+    const expression = $1;
+    const [varName, ...filterNames] = expression.split('|').map(x => x.trim());
+    const defined = varName in overrides || varName in vars;
+
+    // If it's not defined, don't expand it at all
+    if (!defined) return $0;
+
+    const value = varName in overrides ? overrides[varName]
+      : varName in vars ? vars[varName] : null;
+    const filters = filterNames.map(n => possibleFilters[n]);
+    return filters.reduce((acc, cur) => cur(acc), value && value.toString());
+  });
+}
+
+/** @type { {[filterName: String]:( string => string)} } */
+export const APPLY_FILTERS = {
+  urlencode: encodeURIComponent,
+};

package/tests/e2e/README.md

@@ -48,6 +48,43 @@ To run a particular fixture, add the path to the file at the end of your argumen
 
 `npm run test:e2e chrome tests/e2e/example.test.js`
 
+### Testing netlify or archive.org
+
+```sh
+BASE_URL='https://lucid-poitras-9a1249.netlify.app' npx testcafe
+BASE_URL='https://archive.org' npx testcafe
+```
+
+### Testing any OCAID
+
+For OCAIDs you should pick the specific test file to run, since things like autoplay tests won't work. The main tests are in `base.test.js`.
+
+```sh
+OCAIDS='goody,goodytwoshoes00newyiala' npx testcafe tests/e2e/base.test.js
+OCAIDS='goody,goodytwoshoes00newyiala' BASE_URL='https://archive.org' npx testcafe tests/e2e/base.test.js
+
+# right to left book; note this also runs the base tests
+OCAIDS='gendaitankashu00meijuoft' BASE_URL='https://archive.org' npx testcafe tests/e2e/rightToLeft.test.js
+```
+
+### Running tests with browserstack
+
+Note these can only test a public url, so you either need to create a draft PR and use the netlify link, or use ngrok to publish your dev server's port.
+
+Note: Windows users, there is a bug that prevents spaces in the browser field when using `npx`, so you'll need to have `testcafe` globally installed, and run it without `npx`. (See https://github.com/DevExpress/testcafe/issues/6600 ). Or, you can add browserstack browsers the `.testcaferc.js` file.
+
+```sh
+# Set auth; find yours at https://www.browserstack.com/accounts/settings
+export BROWSERSTACK_USERNAME="YOUR_USERNAME"
+export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"
+
+BASE_URL='https://archive.org' OCAIDS='goody,goodytwoshoes00newyiala' npx testcafe 'browserstack:iPad Pro 12.9 2018@15' tests/e2e/base.test.js
+```
+
+See a list of available browsers with `npx testcafe -b browserstack`. Note there are some browsers which appear to not work for some reason (eg `browserstack:iPad Mini 4@9.3`).
+
+Read more about other options/etc at the browserstack docs: https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs/testcafe .
+
 ## Pending (skip) tests
 
 You can skip any tests by calling the method `.skip` on the test object rather

package/tests/e2e/autoplay.test.js

@@ -1,11 +1,11 @@
 import { ClientFunction } from 'testcafe';
+import params from './helpers/params';
 
-const { BASE_URL } = process.env;
 const getLocationHref = ClientFunction(() => window.location.href.toString());
 const FLIP_SPEED = 1000;
 const FIRST_PAGE_DELAY = 2000;
 
-fixture `Autoplay plugin`.page `${BASE_URL}demo-autoplay.html`;
+fixture `Autoplay plugin`.page `${params.baseUrl}/BookReaderDemo/demo-autoplay.html`;
 
 test('page auto-advances after allotted flip speed and delay', async t => {
   await t.wait(2 * FLIP_SPEED + FIRST_PAGE_DELAY);