@internetarchive/bookreader 5.0.0-11 → 5.0.0-111

package/src/plugins/tts/utils.js

@@ -1,20 +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);
-  });
-}
+// @ts-check
+import langs from 'iso-language-codes';
 
 /**
  * Use regex to approximate word count in a string
@@ -26,15 +11,6 @@ export function approximateWordCount(text) {
   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]
@@ -44,48 +20,100 @@ export function isAndroid(userAgent = navigator.userAgent) {
   return /android/i.test(userAgent);
 }
 
+/** @type {{[lang: string]: string}} */
+// Handle odd one-off language pairs that might show up over time
+const specialLangs =  {
+  "zh-hans": "中文 (Zhōngwén)",
+};
+
 /**
  * @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();
+  language = language.toLocaleLowerCase();
+  if (specialLangs[language]) {
+    return language;
+  }
+  const codeObj = (
+    findLanguage(language, ['iso639_1']) ||
+    findLanguage(language, ['iso639_2T']) ||
+    findLanguage(language, ['iso639_2B', 'name', 'nativeName'])
+  );
+  if (codeObj) return codeObj.iso639_1;
+  return null;
+}
 
-  return searchForISO6391(language, ['ISO 639-1']) ||
-    searchForISO6391(language, ['ISO 639-2/B']) ||
-    searchForISO6391(language, ['ISO 639-2/T', 'Endonym', 'Name']);
+/**
+ *
+ * @param {string} language
+ * @returns {string}
+ */
+export function toNativeName(language) {
+  if (!language) return null;
+  language = language.toLocaleLowerCase();
+  if (specialLangs[language]) {
+    return specialLangs[language];
+  }
+  const codeObj = (
+    findLanguage(language, ['iso639_1']) ||
+    findLanguage(language, ['iso639_2T']) ||
+    findLanguage(language, ['iso639_2B', 'name', 'nativeName'])
+  );
+  if (codeObj?.nativeName) return codeObj.nativeName.split(", ")[0];
+  return null;
 }
 
+/** @typedef {import('iso-language-codes').Code} Code */
+
 /**
- * Searches for the given long in the given columns.
  * @param {string} language
- * @param {Array<keyof COLUMN_TO_LANG_INDEX>} columnsToSearch
- * @return {ISO6391?}
+ * @param {Array<'iso639_1' | 'iso639_2T' | 'iso639_2B' | 'nativeName' | 'name'>} fields
+ * @returns {Code | null}
  */
-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']];
+function findLanguage(language, fields) {
+  if (!language) return null;
+  language = language.toLowerCase();
+  for (const lang of langs) {
+    for (const codeType of fields) {
+      if (lang[codeType]?.toLowerCase().split(", ").includes(language)) {
+        return lang;
       }
     }
   }
   return null;
 }
+
+/**
+ * Checks whether the current browser supports localStorage or
+ * if the current context has access to it.
+ * @return {boolean}
+ */
+export function hasLocalStorage() {
+  try {
+    return !!window.localStorage;
+  } catch (e) {
+    // Will throw in sandboxed iframe
+    // DOMException: Window.localStorage getter: Forbidden in a sandboxed document without the 'allow-same-origin' flag.
+    return false;
+  }
+}
+
+export const DEBUG_READ_ALOUD = location.toString().indexOf('_debugReadAloud=true') != -1;
+
+export async function checkIfFiresPause() {
+  // Pick some random text so that if it accidentally speaks, it's not too annoying
+  const u = new SpeechSynthesisUtterance("Loading");
+  let calledPause = false;
+  u.addEventListener('pause', () => calledPause = true);
+  speechSynthesis.speak(u);
+  await new Promise(res => setTimeout(res, 10));
+  speechSynthesis.pause();
+  return calledPause;
+}

package/src/plugins/url/UrlPlugin.js

@@ -0,0 +1,211 @@
+export class UrlPlugin {
+  constructor(options = {}) {
+    this.bookReaderOptions = options;
+
+    // the canonical order of elements is important in the path and query string
+    this.urlSchema = [
+      { name: 'page', position: 'path', default: 'n0' },
+      { name: 'mode', position: 'path', default: '2up' },
+      { name: 'search', position: 'path', deprecated_for: 'q' },
+      { name: 'q', position: 'query_param' },
+      { name: 'sort', position: 'query_param' },
+      { name: 'view', position: 'query_param' },
+      { name: 'admin', position: 'query_param' },
+    ];
+
+    this.urlState = {};
+    this.urlMode = this.bookReaderOptions.urlMode || 'hash';
+    this.urlHistoryBasePath = this.bookReaderOptions.urlHistoryBasePath ||  '/';
+    this.urlLocationPollId = null;
+    this.oldLocationHash = null;
+    this.oldUserHash = null;
+  }
+
+  /**
+   * Parse JSON object URL state to string format
+   * Arrange path names in an order that it is positioned on the urlSchema
+   * @param {Object} urlState
+   * @returns {string}
+   */
+  urlStateToUrlString(urlState) {
+    const searchParams = new URLSearchParams();
+    const pathParams = {};
+
+    Object.keys(urlState).forEach(key => {
+      let schema = this.urlSchema.find(schema => schema.name === key);
+      if (schema?.deprecated_for) {
+        schema = this.urlSchema.find(schemaKey => schemaKey.name === schema.deprecated_for);
+      }
+      if (schema?.position == 'path') {
+        pathParams[schema?.name] = urlState[key];
+      } else {
+        searchParams.append(schema?.name || key, urlState[key]);
+      }
+    });
+
+    const strPathParams = this.urlSchema
+      .filter(s => s.position == 'path')
+      .map(schema => pathParams[schema.name] ? `${schema.name}/${encodeURIComponent(pathParams[schema.name])}` : '')
+      .join('/');
+
+    // replace consecutive slashes with a single slash + remove trailing slashes
+    const strStrippedTrailingSlash = `${strPathParams.replace(/\/+/g, '/').replace(/\/+$/, '')}`;
+    const concatenatedPath = `${strStrippedTrailingSlash}?${searchParams.toString()}`;
+    return searchParams.toString() ? concatenatedPath : `${strStrippedTrailingSlash}`;
+  }
+
+  /**
+   * Parse string URL and add it in the current urlState
+   * Example:
+   *  /page/n7/mode/2up => {page: 'n7', mode: '2up'}
+   *  /page/n7/mode/2up/search/hello => {page: 'n7', mode: '2up', q: 'hello'}
+   * @param {string} urlString
+   * @returns {object}
+   */
+  urlStringToUrlState(urlString) {
+    const urlState = {};
+
+    // Fetch searchParams from given {str}
+    // Note: whole URL path is needed for URL parsing
+    const urlPath = new URL(urlString, 'http://example.com');
+    const urlSearchParamsObj = Object.fromEntries(urlPath.searchParams.entries());
+    const splitUrlMatches = urlPath.pathname.match(/[^\\/]+\/[^\\/]+/g);
+    const urlStrSplitSlashObj = splitUrlMatches ? Object.fromEntries(splitUrlMatches.map(x => x.split('/'))) : {};
+
+    const doesKeyExists = (_object, _key) => {
+      return Object.keys(_object).some(value => value == _key);
+    };
+
+    // Add path objects to urlState
+    this.urlSchema
+      .filter(schema => schema.position == 'path')
+      .forEach(schema => {
+        const hasPropertyKey = doesKeyExists(urlStrSplitSlashObj, schema.name);
+        const hasDeprecatedKey = doesKeyExists(schema, 'deprecated_for') && hasPropertyKey;
+
+        // Not in the URL
+        if (!hasPropertyKey && !hasDeprecatedKey) {
+          return;
+        }
+
+        const urlStateParam = hasDeprecatedKey ? schema.deprecated_for : schema.name;
+        urlState[urlStateParam] = decodeURIComponent(urlStrSplitSlashObj[schema.name]);
+      });
+
+    // Add searchParams to urlState
+    Object.entries(urlSearchParamsObj).forEach(([key, value]) => {
+      urlState[key] = value;
+    });
+
+    return urlState;
+  }
+
+  /**
+   * Add or update key-value to the urlState
+   * @param {string} key
+   * @param {string} val
+   */
+  setUrlParam(key, value) {
+    this.urlState[key] = value;
+
+    this.pushToAddressBar();
+  }
+
+  /**
+   * Delete key-value to the urlState
+   * @param {string} key
+   */
+  removeUrlParam(key) {
+    delete this.urlState[key];
+
+    this.pushToAddressBar();
+  }
+
+  /**
+   * Get key-value from the urlState
+   * @param {string} key
+   * @return {string}
+   */
+  getUrlParam(key) {
+    return this.urlState[key];
+  }
+
+  /**
+   * Push URL params to addressbar
+   */
+  pushToAddressBar() {
+    const urlStrPath = this.urlStateToUrlString(this.urlState);
+    const concatenatedPath = urlStrPath !== '/' ? urlStrPath : '';
+    if (this.urlMode == 'history') {
+      if (!window.history || !window.history.replaceState) {
+        this.options.urlMode = 'hash';
+      } else {
+        const newUrlPath = `${this.urlHistoryBasePath}${concatenatedPath}`.trim().replace(/(\/+)/g, '/');
+        try {
+          window.history.replaceState({}, null, newUrlPath);
+        } catch (e) {
+          // DOMException on Chrome when in sandboxed iframe
+          this.urlMode = 'hash';
+        }
+      }
+    }
+
+    if (this.urlMode == 'hash') {
+      window.location.replace('#' + concatenatedPath);
+    }
+    this.oldLocationHash = urlStrPath;
+  }
+
+  /**
+   * Get the url and check if it has changed
+   * If it was changeed, update the urlState
+   */
+  listenForHashChanges() {
+    this.oldLocationHash = this.getHash();
+    if (this.urlLocationPollId) {
+      clearInterval(this.urlLocationPollId);
+      this.urlLocationPollId = null;
+    }
+
+    // check if the URL changes
+    const updateHash = () => {
+      const newFragment = this.getHash();
+      const hasFragmentChange = newFragment != this.oldLocationHash;
+
+      if (!hasFragmentChange) { return; }
+
+      this.urlState = this.urlStringToUrlState(newFragment);
+    };
+    this.urlLocationPollId = setInterval(updateHash, 500);
+  }
+
+  /**
+   * Will read either the hash or URL and return the bookreader fragment
+   */
+  pullFromAddressBar(location = window.location) {
+    const path = this.urlMode === 'history'
+      ? (location.pathname.substr(this.urlHistoryBasePath.length) + location.search)
+      : location.hash.substr(1);
+    this.urlState = this.urlStringToUrlState(path);
+  }
+
+  /**
+   * Get the hash out of the current URL. Also augments it with the text
+   * from the main part of the URL, since that is not readable by JS
+   * from the actual hash
+   * @returns
+   */
+  getHash() {
+    const text = this.retrieveTextFragment(window.location.search);
+    const textFragment = text ? `:~:text=${text[0]}` : '';
+    return `${window.location.hash.slice(1)}${textFragment}`;
+  }
+
+  /**
+   * @param {string} urlString
+   * @returns {string}
+   */
+  retrieveTextFragment(urlString) {
+    return urlString.match(/(?<=[&?]?text=)[^&]*/);
+  }
+}

package/src/plugins/{plugin.url.js → url/plugin.url.js}

@@ -1,4 +1,8 @@
 /* global BookReader */
+
+import { UrlPlugin } from "./UrlPlugin.js";
+import { sleep } from "../../BookReader/utils.js";
+
 /**
  * Plugin for URL management in BookReader
  * Note read more about the url "fragment" here:
@@ -22,7 +26,7 @@ jQuery.extend(BookReader.defaultOptions, {
   urlHistoryBasePath: '/',
 
   /** Only these params will be reflected onto the URL */
-  urlTrackedParams: ['page', 'search', 'mode', 'region', 'highlight'],
+  urlTrackedParams: ['page', 'search', 'mode', 'region', 'highlight', 'view', 'text'],
 
   /** If true, don't update the URL when `page == n0 (eg "/page/n0")` */
   urlTrackIndex0: false,
@@ -39,6 +43,10 @@ BookReader.prototype.setup = (function(super_) {
     this.locationPollId = null;
     this.oldLocationHash = null;
     this.oldUserHash = null;
+    // Should include the :~:text= prefix
+    this.textFragment = null;
+    // Tracks the original textFragment page num when first loaded
+    this.textFragmentPage = null;
   };
 })(BookReader.prototype.setup);
 
@@ -50,7 +58,7 @@ BookReader.prototype.init = (function(super_) {
       this.bind(BookReader.eventNames.PostInit, () => {
         const { updateWindowTitle, urlMode } = this.options;
         if (updateWindowTitle) {
-          document.title = this.shortTitle(50);
+          document.title = this.shortTitle(this.bookTitle, 50);
         }
         if (urlMode === 'hash') {
           this.urlStartLocationPolling();
@@ -58,7 +66,7 @@ BookReader.prototype.init = (function(super_) {
       });
 
       this.bind(BookReader.eventNames.fragmentChange,
-        this.urlUpdateFragment.bind(this)
+        this.urlUpdateFragment.bind(this),
       );
     }
     super_.call(this);
@@ -86,7 +94,7 @@ BookReader.prototype.urlStartLocationPolling = function() {
   this.oldLocationHash = this.urlReadFragment();
 
   if (this.locationPollId) {
-    clearInterval(this.locationPollID);
+    clearInterval(this.locationPollId);
     this.locationPollId = null;
   }
 
@@ -103,7 +111,7 @@ BookReader.prototype.urlStartLocationPolling = function() {
     this.trigger(BookReader.eventNames.stop);
     if (this.animating) {
       // Queue change if animating
-      if (this.autoStop) this.autoStop();
+      this.plugins.autoplay?.stop();
       this.animationFinishedCallback = updateParams;
     } else {
       // update immediately
@@ -121,7 +129,7 @@ BookReader.prototype.urlStartLocationPolling = function() {
  */
 BookReader.prototype.urlUpdateFragment = function() {
   const allParams = this.paramsFromCurrent();
-  const { urlMode, urlTrackIndex0, urlTrackedParams } = this.options;
+  const { urlTrackIndex0, urlTrackedParams } = this.options;
 
   if (!urlTrackIndex0
       && (typeof(allParams.index) !== 'undefined')
@@ -137,29 +145,69 @@ BookReader.prototype.urlUpdateFragment = function() {
     return validParams;
   }, {});
 
-  const newFragment = this.fragmentFromParams(params, urlMode);
+  // eg 'page/3/mode/2up'; no query params (in hash mode, it might have /search/term)
+  // Does NOT have the :~:text fragment
+  const newFragment = this.fragmentFromParams(params, this.options.urlMode);
+  const newFragmentWithSlash = newFragment === '' ? '' : `/${newFragment}`;
+  // eg 'page/3/mode/2up'; no query params
+  // WILL CONTAIN the :~:text fragment in hash mode (!)
   const currFragment = this.urlReadFragment();
+  // This should have both ?q=foo&text=bar (and any other params) as an encoded string
   const currQueryString = this.getLocationSearch();
-  const newQueryString = this.queryStringFromParams(params, currQueryString, urlMode);
-  if (currFragment === newFragment && currQueryString === newQueryString) {
+  // Eg ?q=foo&text=bar; only query params, no fragment
+  const newQueryString = this.queryStringFromParams(params, currQueryString, this.options.urlMode);
+
+  // NOTE: If ?text is in the URL, we will fire fragment change events on every render; which is
+  // not desireable, but currently don't have a way to handle re-writing ?text to the hash text
+  // fragment form, :~:text=foo.
+  const hasTextParam = this.urlPlugin.retrieveTextFragment(currQueryString);
+  if (currFragment === newFragment && currQueryString === newQueryString && !hasTextParam) {
     return;
   }
 
-  if (urlMode === 'history') {
-    if (window.history && window.history.replaceState) {
+  if (this.options.urlMode === 'history') {
+    if (!window.history || !window.history.replaceState) {
+      this.options.urlMode = 'hash';
+    } else {
       const baseWithoutSlash = this.options.urlHistoryBasePath.replace(/\/+$/, '');
-      const newFragmentWithSlash = newFragment === '' ? '' : `/${newFragment}`;
-
+      const textFragment = this.urlPlugin.retrieveTextFragment(newQueryString);
       const newUrlPath = `${baseWithoutSlash}${newFragmentWithSlash}${newQueryString}`;
-      window.history.replaceState({}, null, newUrlPath);
-      this.oldLocationHash = newFragment + newQueryString;
-
+      const extractedPage = this.urlPlugin.urlStringToUrlState(newFragmentWithSlash)?.page;
+      if (!this.textFragmentPage && textFragment) {
+        this.textFragmentPage =  extractedPage ? extractedPage : null;
+        this.textFragment = `:~:text=${textFragment}`;
+      }
+      try {
+        window.history.replaceState({}, null, newUrlPath);
+        this.oldLocationHash = newFragment + newQueryString;
+        if (textFragment) {
+          this.oldLocationHash += `:~:text=${textFragment[0]}`;
+        }
+      } catch (e) {
+        // DOMException on Chrome when in sandboxed iframe
+        this.options.urlMode = 'hash';
+      }
     }
-  } else {
+  }
+
+  if (this.options.urlMode === 'hash')  {
     const newQueryStringSearch = this.urlParamsFiltersOnlySearch(this.readQueryString());
-    window.location.replace('#' + newFragment + newQueryStringSearch);
-    this.oldLocationHash = newFragment + newQueryStringSearch;
+    let textFragment = this.urlPlugin.retrieveTextFragment(this.readQueryString());
+    const extractedPage = this.urlPlugin.urlStringToUrlState(newFragmentWithSlash)?.page;
 
+    if (textFragment) {
+      textFragment = `:~:text=${textFragment[0]}`;
+    } else {
+      textFragment = '';
+    }
+    if (!this.textFragmentPage && textFragment) {
+      this.textFragmentPage = extractedPage ? extractedPage : null;
+      this.textFragment = textFragment;
+    } else if (this.textFragmentPage && extractedPage != this.textFragmentPage) {
+      textFragment = '';
+    }
+    window.location.replace('#' + newFragment + newQueryStringSearch + textFragment);
+    this.oldLocationHash = newFragment + newQueryStringSearch + textFragment;
   }
 };
 
@@ -185,7 +233,7 @@ BookReader.prototype.urlReadFragment = function() {
   if (urlMode === 'history') {
     return window.location.pathname.substr(urlHistoryBasePath.length);
   } else {
-    return window.location.hash.substr(1);
+    return this.urlPlugin.getHash();
   }
 };
 
@@ -196,3 +244,40 @@ BookReader.prototype.urlReadFragment = function() {
 BookReader.prototype.urlReadHashFragment = function() {
   return window.location.hash.substr(1);
 };
+export class BookreaderUrlPlugin extends BookReader {
+  init() {
+    if (this.options.enableUrlPlugin) {
+      this.urlPlugin = new UrlPlugin(this.options);
+      const location = this.getLocationSearch();
+      if (location.includes("text=")) {
+        this.on('textLayerVisible', async (_, {pageContainerEl}) => {
+          const visiblePageNum = pageContainerEl.getAttribute('data-page-num');
+
+          // Hack: More time mode 1up page "settle down" from user scrolling
+          await sleep(this.mode === 1 ? 900 : 100);
+
+          // No textFragment found or the textFragment stored doesn't match current visible page loaded
+          if (!this.textFragment || this.textFragmentPage !== visiblePageNum) return;
+          if (this.options.urlMode === 'history') {
+            window.location.replace(`#${this.textFragment}`);
+          } else {
+            // for urlMode hash, textFragment is stored in oldLocationHash already
+            window.location.replace(`#${this.oldLocationHash}`);
+          }
+        });
+      }
+      this.bind(BookReader.eventNames.PostInit, () => {
+        const { urlMode } = this.options;
+
+        if (urlMode === 'hash') {
+          this.urlPlugin.listenForHashChanges();
+        }
+      });
+    }
+
+    super.init();
+  }
+}
+
+window.BookReader = BookreaderUrlPlugin;
+export default BookreaderUrlPlugin;