@internetarchive/bookreader 5.0.0-12-fixsorting-7 → 5.0.0-120

package/src/plugins/plugin.experiments.js

@@ -0,0 +1,375 @@
+// @ts-check
+import { css, html, LitElement } from 'lit';
+import { BookReaderPlugin } from '../BookReaderPlugin.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { sleep } from '../BookReader/utils.js';
+
+// @ts-ignore
+const BookReader = /** @type {typeof import('@/src/BookReader.js').default} */(window.BookReader);
+
+/** @typedef {'copyLinkToHighlight' | 'annotateHighlight' | 'translate' | 'hypothesis'} ExperimentName */
+
+class ExperimentModel {
+  /** @type {ExperimentName} */
+  name;
+  /** @type {string} */
+  title;
+  /** @type {string} */
+  description;
+  /** @type {string} */
+  icon;
+  /** @type {boolean} */
+  enabled;
+  /** @type {string} */
+  learnMore;
+
+  /** @type {import("@/src/BookReader.js").default} */
+  br;
+
+  assetRoot = '/BookReader/';
+
+  enabledLoading = false;
+
+  /**
+   * @param {string} path
+   */
+  buildAssetPath(path) {
+    return `${this.assetRoot}${path}`;
+  }
+
+  /**
+   * @param {object} param0
+   * @param {boolean} param0.manual Whether the experiment was enabled manually
+   */
+  async enable({ manual }) { }
+  async disable() { }
+}
+
+export class ExperimentsPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+
+    /** Where the state of this plugin is saved in localStorage */
+    localStorageKey: 'BrExperiments',
+
+    /** @type {ExperimentName[]} Experiments shown in the experiments panel */
+    availableExperiments: ['translate', 'copyLinkToHighlight'],
+
+    /** @type {ExperimentName[]} Experiments enabled by default */
+    autoEnabledExperiments: [],
+  }
+
+  /** @type {ExperimentModel[]} */
+  allExperiments = [
+    new class extends ExperimentModel {
+      name = 'copyLinkToHighlight';
+      title = 'Copy Link to Highlight';
+      description = 'Shareable link to a text selection';
+      icon = null;
+      enabled = false;
+      async enable ({ manual = false }) {
+        if (manual) {
+          this.br.plugins.textSelection.textSelectionManager.selectMenu.copyLinkToHighlightEnabled = true;
+        }
+      }
+      async disable() {
+        this.br.plugins.textSelection.textSelectionManager.selectMenu.copyLinkToHighlightEnabled = false;
+      }
+    }(),
+    new class extends ExperimentModel {
+      name = 'annotateHighlight';
+      title = 'Highlight and annotate';
+      description = 'Create private highlights and annotations for this book';
+      icon = null;
+      enabled = false;
+      async enable ({ manual = false }) {
+        if (manual) {
+          this.br.plugins.textSelection.textSelectionManager.selectMenu.highlightAnnotationEnabled = true;
+        }
+      }
+      async disable() {
+        sleep(0).then(() => {
+          window.location.reload();
+        });
+      }
+    }(),
+    new class extends ExperimentModel {
+      name = 'translate';
+      title = 'Translate Plugin';
+      description = "Translate books directly in your browser.";
+      learnMore = 'https://mozilla.github.io/translations/';
+      icon = 'images/translate.svg';
+      enabled = false;
+      async enable({ manual = false}) {
+        if (BookReader.PLUGINS.translate) return;
+
+        await importAsScript(this.buildAssetPath('plugins/plugin.translate.js'));
+        this.br.initializePlugin('translate');
+      }
+      async disable() {
+        // need to reload to remove translate plugin script
+        // Sleep so that the event loop can finish processing before the reload
+        sleep(0).then(() => {
+          window.location.reload();
+        });
+      }
+    }(),
+    new class extends ExperimentModel {
+      name = 'hypothesis';
+      title = 'Hypothes.is';
+      description = 'Create public, collaborative, or fully private annotations on books and the web.';
+      learnMore = 'https://web.hypothes.is/about/';
+      icon = 'images/hypothesis.ico';
+      enabled = false;
+
+      async enable({ manual = false }) {
+        // Hypothesis configs ; see https://h.readthedocs.io/projects/client/en/latest/publishers/config.html
+        const configScript = document.createElement('script');
+        configScript.type = 'application/json';
+        configScript.className = 'js-hypothesis-config';
+        configScript.textContent = JSON.stringify({
+          // Open the sidebar if this is the first time enabling
+          openSidebar: manual,
+          assetRoot: this.buildAssetPath('hypothesis/'),
+        });
+
+        document.head.appendChild(configScript);
+        return importAsScript(this.buildAssetPath('hypothesis/build/boot.js'));
+        // For testing
+        // return importAsScript('http://localhost:3001/hypothesis');
+      }
+
+      async disable() {
+        // need to reload to remove the Hypothesis script
+        // Sleep so that the event loop can finish processing before the reload
+        sleep(0).then(() => {
+          window.location.reload();
+        });
+      }
+    }(),
+  ]
+
+  /** @type {BrExperimentsPanel} */
+  _panel;
+
+  async init() {
+    if (!this.options.enabled) {
+      return;
+    }
+
+    for (const experiment of this.allExperiments) {
+      // TODO: imagesBaseURL should be replaced with assetRoot everywhere
+      experiment.assetRoot = this.br.options.imagesBaseURL.replace(/images\/$/, '');
+      if (experiment.icon) {
+        experiment.icon = experiment.buildAssetPath(experiment.icon);
+      }
+
+      experiment.br = this.br;
+
+      // Enable any experiments that should be automatically enabled
+      if (!experiment.enabled && this.options.autoEnabledExperiments.includes(experiment.name)) {
+        experiment.enabled = true;
+        await experiment.enable({ manual: false });
+      }
+    }
+
+    this._loadExperimentStates();
+    await Promise.resolve();
+    this._render();
+  }
+
+  /**
+   * @param {ExperimentName} experimentName
+   */
+  isEnabled(experimentName) {
+    const experiment = this.allExperiments.find(exp => exp.name === experimentName);
+    return experiment?.enabled;
+  }
+
+  _loadExperimentStates() {
+    const savedStates = JSON.parse(localStorage.getItem(this.options.localStorageKey) || '{}');
+    this.allExperiments.forEach(experiment => {
+      if (savedStates[experiment.name] !== undefined) {
+        experiment.enabled = savedStates[experiment.name];
+        if (experiment.enabled) {
+          experiment.enable({ manual: false });
+        }
+      }
+    });
+  }
+
+  _saveExperimentStates() {
+    const states = Object.fromEntries(
+      this.allExperiments.map(experiment => [experiment.name, experiment.enabled]),
+    );
+    localStorage.setItem(this.options.localStorageKey, JSON.stringify(states));
+  }
+
+  /**
+   * @param {ExperimentModel} experiment
+   * @param {boolean} enabled
+   */
+  async _toggleExperiment(experiment, enabled) {
+    experiment.enabledLoading = true;
+    this.br.plugins.archiveAnalytics?.sendEvent(`BRExperiment-${experiment.name}`, enabled ? 'Enable' : 'Disable');
+    this._panel.requestUpdate();
+
+    if (enabled) {
+      await experiment.enable({ manual: true });
+    } else {
+      await experiment.disable();
+    }
+    experiment.enabledLoading = false;
+    experiment.enabled = enabled;
+    this._panel.requestUpdate();
+  }
+
+  _render() {
+    this.br.shell.menuProviders['experiments'] = {
+      id: 'experiments',
+      icon: html`
+        <img src="${this.br.options.imagesBaseURL}/icon_experiment.svg" alt="" width="26"/>
+      `,
+      label: 'Experiments',
+      component: html`<br-experiments-panel
+        .experiments="${this.allExperiments.filter(experiment => this.options.availableExperiments.includes(experiment.name))}"
+        @connected="${e => this._panel = e.target}"
+        @toggle="${async e => {
+        await this._toggleExperiment(e.detail.experiment, e.detail.enabled);
+        this._saveExperimentStates();
+      }}"
+      />`,
+    };
+    this.br.shell.updateMenuContents();
+  }
+}
+BookReader?.registerPlugin('experiments', ExperimentsPlugin);
+
+@customElement('br-experiments-panel')
+export class BrExperimentsPanel extends LitElement {
+
+  /** @type {ExperimentModel[]} */
+  @property({ type: Array }) experiments = [];
+
+  render() {
+    return html`
+      <div style="padding: 10px">
+        ${this.experiments.map(
+      experiment => html`
+        <br-experiment-toggle
+          .icon="${experiment.icon}"
+          .title="${experiment.title}"
+          .description="${experiment.description}"
+          .enabled="${experiment.enabled}"
+          .loading="${experiment.enabledLoading}"
+          .learnMore="${experiment.learnMore}"
+          @toggle="${e => this._dispatchToggle(experiment, e.detail.enabled)}"
+        ></br-experiment-toggle>
+      `,
+    )}
+      </div>
+    `;
+  }
+
+  /**
+   * @param {ExperimentModel} experiment
+   * @param {boolean} enabled
+   */
+  async _dispatchToggle(experiment, enabled) {
+    this.dispatchEvent(new CustomEvent('toggle', {
+      detail: { experiment, enabled },
+    }));
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent('connected'));
+  }
+}
+
+@customElement('br-experiment-toggle')
+export class BrExperimentToggle extends LitElement {
+  @property({ type: String }) icon = '';
+  @property({ type: String }) title = '';
+  @property({ type: String }) description = '';
+  @property({ type: Boolean }) enabled = false;
+  @property({ type: Boolean }) loading = false;
+  @property({ type: String }) learnMore = '';
+
+  /**
+   * We want to disable the button immediately if loading, but only display
+   * the loading indicator after 200ms.
+   */
+  @state() _longLoading = false;
+
+  /** @override */
+  update(changedProperties) {
+    super.update(changedProperties);
+    if (changedProperties.has('loading')) {
+      if (this.loading) {
+        sleep(500).then(() => {
+          if (this.loading) {
+            this._longLoading = true;
+            this.requestUpdate();
+          }
+        });
+      } else {
+        this._longLoading = false;
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="experiment-card" style="margin-bottom: 10px;">
+        <div style="display: flex; align-items: center; gap: 10px;">
+          ${this.icon ? html`<img src="${this.icon}" style="width: 20px; height: 20px;" alt="" />` : ''}
+          <div style="flex-grow: 1; font-weight: bold;">${this.title}</div>
+        </div>
+        <p style="opacity: 0.9">
+          ${this.description}
+          ${this.learnMore ? html`<a href="${this.learnMore}" target="_blank">Learn more</a>.` : ''}
+        </p>
+        <div style="display: flex">
+          <div style="flex-grow: 1;"></div>
+          <button @click="${this._dispatchToggle}" .disabled="${this.loading}">
+            ${this._longLoading ? 'Loading…' : this.enabled ? 'Disable' : 'Enable'}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      .experiment-card {
+        border-radius: 8px;
+        background-color: #fff2;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .experiment-card p {
+        margin: 6px 0;
+      }
+    `;
+  }
+
+  _dispatchToggle() {
+    this.dispatchEvent(new CustomEvent('toggle', { detail: { enabled: !this.enabled } }));
+  }
+}
+
+/**
+ * @param {string} url
+ */
+async function importAsScript(url) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = url;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
+    document.head.appendChild(script);
+  });
+}

package/src/plugins/plugin.iframe.js

@@ -1,48 +1,47 @@
-/* global BookReader */
-/**
- * Plugin for two-way communication between a BookReader in an IFrame and the
- * parent web page
- */
+// @ts-check
+import { EVENTS } from '../BookReader/events.js';
+import { BookReaderPlugin } from '../BookReaderPlugin.js';
 
 const MESSAGE_TYPE_FRAGMENT_CHANGE = 'bookReaderFragmentChange';
 
-BookReader.prototype.init = (function (super_) {
-  return function () {
-    super_.call(this);
-    _attachEventListeners(this);
-  };
-})(BookReader.prototype.init);
-
 /**
- * @private
- * Using window.postMessage() and event listeners, the plugin notifies the
- * parent window when pages change, and the parent window can also
- * explicitly request a page change by sending its own message.
- *
- * @param {BookReader} br
- * @param {Window?} [parent]
+ * Plugin for two-way communication between a BookReader in an IFrame and the
+ * parent web page. Using window.postMessage() and event listeners, the
+ * plugin notifies the parent window when pages change, and the parent
+ * window can also explicitly request a page change by sending its own
+ * message.
  */
-export function _attachEventListeners(br, parent = window.parent) {
-  // Not embedded, abort
-  if (!parent) {
-    return;
+export class IframePlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
   }
 
-  br.bind(BookReader.eventNames.fragmentChange, () => {
-    const fragment = br.fragmentFromParams(br.paramsFromCurrent());
-
-    parent.postMessage(
-      { type: MESSAGE_TYPE_FRAGMENT_CHANGE, fragment },
-      '*'
-    );
-  });
-
-  window.addEventListener('message', event => {
-    // Not a recognized message type, abort
-    if (!event.data || event.data.type !== MESSAGE_TYPE_FRAGMENT_CHANGE) {
+  /** @override */
+  init() {
+    // Not enabled, or not embedded, abort
+    if (!this.options.enabled || !window.parent) {
       return;
     }
 
-    br.updateFromParams(br.paramsFromFragment(event.data.fragment));
-  });
+    this.br.bind(EVENTS.fragmentChange, () => {
+      const fragment = this.br.fragmentFromParams(this.br.paramsFromCurrent());
+
+      window.parent.postMessage(
+        { type: MESSAGE_TYPE_FRAGMENT_CHANGE, fragment },
+        '*',
+      );
+    });
+
+    window.addEventListener('message', event => {
+      // Not a recognized message type, abort
+      if (!event.data || event.data.type !== MESSAGE_TYPE_FRAGMENT_CHANGE) {
+        return;
+      }
+
+      this.br.updateFromParams(this.br.paramsFromFragment(event.data.fragment));
+    });
+  }
 }
+
+const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
+BookReader?.registerPlugin('iframe', IframePlugin);

package/src/plugins/plugin.iiif.js

@@ -0,0 +1,147 @@
+// @ts-check
+import { BookReaderPlugin } from '../BookReaderPlugin.js';
+
+const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
+
+/**
+ * @extends BookReaderPlugin<IiifPlugin['options']>
+ */
+export class IiifPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+    /** @type {import('@iiif/presentation-3').Manifest | import('@iiif/presentation-2').Manifest | null} */
+    manifest: null,
+  }
+
+  /**
+   * @param {IiifPlugin['options']} options
+   */
+  setup(options) {
+    super.setup(options);
+    this.manifest = this.options.manifest;
+
+    if (this.options.enabled) {
+      Object.assign(this.br.options, this.load());
+    }
+  }
+
+  load() {
+    if (this.manifest["@context"] == "http://iiif.io/api/presentation/2/context.json") {
+      const manifest = /** @type {import('@iiif/presentation-2').Manifest} */(this.manifest);
+      return this.manifestToBookReaderV2(manifest);
+    } else if (this.manifest["@context"] == "http://iiif.io/api/presentation/3/context.json") {
+      const manifest = /** @type {import('@iiif/presentation-3').Manifest} */(this.manifest);
+      return this.manifestToBookReaderV3(manifest);
+    } else {
+      throw new Error("Unsupported IIIF context " + this.manifest["@context"]);
+    }
+  }
+
+  /**
+   * @param {import('@iiif/presentation-3').Manifest} manifest
+   */
+  manifestToBookReaderV3(manifest) {
+    /** @type {import('../BookReader/options.js').BookReaderOptions} */
+    const book = {
+      bookTitle: resolveInternationalString(manifest.label),
+      pageProgression: manifest.viewingDirection == "right-to-left" ? "rl" : "lr",
+      // numLeafs: manifest.items.length,
+      metadata: (manifest.metadata || []).map((metadata) => {
+        return {
+          label: resolveInternationalString(metadata.label),
+          value: resolveInternationalString(metadata.value),
+        };
+      }),
+      data: [],
+      /**
+       * @this {import('../BookReader.js').default}
+       */
+      getPageURI(pageIndex, reduce, rotate) {
+        const percent = Math.floor(100 * 1 / reduce);
+        const bodyArr = manifest.items[pageIndex].items[0].items[0].body;
+        const body = bodyArr instanceof Array ? bodyArr[0] : bodyArr;
+        const uri = body.service[0].id;
+        return `${uri}/full/pct:${percent}/0/default.jpg`;
+      },
+    };
+
+    if (manifest.viewingDirection == "top-to-bottom" || manifest.viewingDirection == "bottom-to-top") {
+      console.warn("Unsupported viewingDirection", manifest.viewingDirection);
+    }
+
+    let spread = [];
+    manifest.items.forEach((item, index) => {
+      const bodyArr = manifest.items[index].items[0].items[0].body;
+      const body = bodyArr instanceof Array ? bodyArr[0] : bodyArr;
+      const uri = body.service[0].id;
+      /** @type {import('../BookReader/options.js').PageData} */
+      const pageData = {
+        uri,
+        width: item.width,
+        height: item.height,
+        pageNum: resolveInternationalString(item.label),
+      };
+      spread.push(pageData);
+      if (index % 2 == 0) {
+        book.data.push(spread);
+        spread = [];
+      }
+    });
+    if (spread.length > 0) {
+      book.data.push(spread);
+    }
+    return book;
+  }
+
+  /**
+   * @param {import('@iiif/presentation-2').Manifest} manifest
+   */
+  manifestToBookReaderV2(manifest) {
+    /** @type {import('../BookReader/options.js').BookReaderOptions} */
+    const book = {
+      bookTitle: manifest.label,
+      metadata: manifest.metadata,
+      thumbnail: manifest.thumbnail?.['@id'],
+      // numLeafs: manifest.sequences[0].canvases.length,
+      data: [],
+      /**
+       * @this {import('../BookReader.js').default}
+       */
+      getPageURI(pageIndex, reduce, rotate) {
+        const percent = Math.floor(100 * 1 / reduce);
+        const uri = manifest.sequences[0].canvases[pageIndex].images[0].resource.service['@id'];
+        return `${uri}/full/pct:${percent}/0/default.jpg`;
+      },
+    };
+
+    let spread = [];
+    manifest.sequences[0].canvases.forEach((canvas, index) => {
+      /** @type {import('../BookReader/options.js').PageData} */
+      const pageData = {
+        uri: canvas.images[0].resource.service['@id'],
+        width: canvas.width,
+        height: canvas.height,
+        pageNum: canvas.label,
+      };
+      spread.push(pageData);
+      if (index % 2 == 0) {
+        book.data.push(spread);
+        spread = [];
+      }
+    });
+    if (spread.length > 0) {
+      book.data.push(spread);
+    }
+    return book;
+  }
+}
+
+/**
+ * @param {import('@iiif/presentation-3').InternationalString} internationalString
+ */
+function resolveInternationalString(internationalString) {
+  const anyLang = Object.keys(internationalString)[0];
+  return (internationalString[navigator.language] || internationalString[anyLang])[0];
+}
+
+BookReader?.registerPlugin('iiif', IiifPlugin);