@internetarchive/bookreader 5.0.0-5 → 5.0.0-50-a1

package/src/BookNavigator/bookmarks/bookmarks-provider.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '../delete-modal-actions.js';
 import './bookmark-button.js';
 import './ia-bookmarks.js';
@@ -10,17 +10,32 @@ import { IAIconBookmark } from '@internetarchive/icon-bookmark';
 customElements.define('icon-bookmark', IAIconBookmark);
 
 export default class BookmarksProvider {
-  constructor(options, bookreader) {
-    const boundOptions = Object.assign(this, options, {loginClicked: this.bookmarksLoginClicked});
+  constructor(options) {
+    const {
+      baseHost,
+      signedIn,
+      bookreader,
+      modal,
+      onProviderChange,
+    } = options;
+
+    const referrerStr = `referer=${encodeURIComponent(location.href)}`;
+    const loginUrl = `https://${baseHost}/account/login?${referrerStr}`;
+
     this.component = document.createElement('ia-bookmarks');
     this.component.bookreader = bookreader;
-    this.component.options = boundOptions;
-
+    this.component.displayMode = signedIn ? 'bookmarks' : 'login';
+    this.component.modal = modal;
+    this.component.loginOptions = {
+      loginClicked: this.bookmarksLoginClicked,
+      loginUrl
+    };
     this.bindEvents();
 
     this.icon = html`<icon-bookmark state="hollow" style="--iconWidth: 16px; --iconHeight: 24px;"></icon-bookmark>`;
     this.label = 'Bookmarks';
     this.id = 'bookmarks';
+    this.onProviderChange = onProviderChange;
     this.component.setup();
     this.updateMenu(this.component.bookmarks.length);
   }
@@ -31,14 +46,12 @@ export default class BookmarksProvider {
 
   bindEvents() {
     this.component.addEventListener('bookmarksChanged', this.bookmarksChanged.bind(this));
-    this.component.addEventListener('showItemNavigatorModal', this.showItemNavigatorModal);
-    this.component.addEventListener('closeItemNavigatorModal', this.closeItemNavigatorModal);
   }
 
   bookmarksChanged({ detail }) {
     const bookmarksLength = Object.keys(detail.bookmarks).length;
     this.updateMenu(bookmarksLength);
-    this.onBookmarksChanged(detail.bookmarks);
+    this.onProviderChange(detail.bookmarks, detail.showSidePanel);
   }
 
   bookmarksLoginClicked() {

package/src/BookNavigator/bookmarks/ia-bookmarks.js

@@ -1,5 +1,6 @@
-import { render, nothing } from 'lit-html';
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css, render } from 'lit';
+// eslint-disable-next-line no-unused-vars
+import { ModalConfig, ModalManager } from '@internetarchive/modal-manager';
 import buttonStyles from '../assets/button-base.js';
 import './bookmarks-loginCTA.js';
 
@@ -57,9 +58,11 @@ class IABookmarks extends LitElement {
       activeBookmarkID: { type: String },
       bookmarks: { type: Array },
       bookreader: { type: Object },
-      options: { type: Object },
       displayMode: { type: String },
       editedBookmark: { type: Object },
+      deleteModalConfig: { type: Object},
+      modal: { attribute: false },
+      loginOptions: { type: Object, attribute: false }
     };
   }
 
@@ -92,7 +95,12 @@ class IABookmarks extends LitElement {
     this.bookmarks = [];
     this.bookreader = {};
     this.editedBookmark = {};
-    this.options = {};
+    /** @type {ModalManager} */
+    this.modal = undefined;
+    this.loginOptions = {
+      loginClicked: () => {},
+      loginUrl: '',
+    };
     /**
      * Toggles display to either bookmarks or login cta
      * @param {('bookmarks'|'login')} displayMode
@@ -113,21 +121,45 @@ class IABookmarks extends LitElement {
     // eslint-disable-next-line
     this.defaultColor = this.bookmarkColors[0];
     this.api = api;
+    this.deleteModalConfig = new ModalConfig({
+      title: 'Delete Bookmark',
+      headline: 'This bookmark contains a note. Deleting it will permanently delete the note. Are you sure?',
+      headerColor: '#194880',
+    });
   }
 
-  updated() {
+  updated(changed) {
+    if (changed.has('displayMode')) {
+      this.updateDisplay();
+    }
+
     this.emitBookmarksChanged();
   }
 
   setup() {
     this.api.identifier = this.bookreader.bookId;
-    this.fetchBookmarks()
-      .then(() => this.initializeBookmarks())
-      .catch((err) => this.displayMode = 'login');
+    if (this.displayMode === 'login') {
+      return;
+    }
+    this.fetchUserBookmarks();
+    this.setBREventListeners();
   }
 
-  initializeBookmarks() {
-    this.displayMode = 'bookmarks';
+  updateDisplay() {
+    if (this.displayMode === 'bookmarks') {
+      this.fetchUserBookmarks();
+    }
+  }
+
+  async fetchUserBookmarks() {
+    if (!this.api.identifier) {
+      return;
+    }
+    await this.fetchBookmarks();
+    this.initializeBookmarks();
+  }
+
+  setBREventListeners() {
     ['3PageViewSelected'].forEach((event) => {
       window.addEventListener(`BookReader:${event}`, (e) => {
         setTimeout(() => {
@@ -147,12 +179,12 @@ class IABookmarks extends LitElement {
     });
     ['zoomOut', 'zoomIn', 'resize'].forEach((event) => {
       window.addEventListener(`BookReader:${event}`, () => {
-        if (this.bookreader.mode === this.bookreader.constModeThumb) {
-          this.renderBookmarkButtons();
-        }
+        this.renderBookmarkButtons();
       });
     });
+  }
 
+  initializeBookmarks() {
     this.renderBookmarkButtons();
     this.markActiveBookmark(true);
     this.emitBookmarksChanged();
@@ -181,8 +213,8 @@ class IABookmarks extends LitElement {
       color: this.getBookmarkColor(color) ? color : this.defaultColor.id,
     };
 
-    const page = IABookmarks.formatPage(this.bookreader.getPageNum(leafNum));
-    const thumbnail = this.bookreader.getPageURI(`${leafNum}`.replace(/\D/g, ''), 32); // Request thumbnail 1/32 the size of original image
+    const page = IABookmarks.formatPage(this.bookreader.book.getPageNum(leafNum));
+    const thumbnail = this.bookreader.book.getPageURI(`${leafNum}`.replace(/\D/g, ''), 32); // Request thumbnail 1/32 the size of original image
     const bookmark = {
       ...nomalizedParams,
       id: leafNum,
@@ -194,27 +226,35 @@ class IABookmarks extends LitElement {
     return bookmark;
   }
 
-  fetchBookmarks() {
-    return this.api.getAll().then((res) => res.json()).then(({
+  async fetchBookmarks() {
+    const resText = await this.api.getAll().then(r=> r.text());
+    let parsedResponse;
+    try {
+      parsedResponse = JSON.parse(resText);
+    } catch (e) {
+      parsedResponse = {error : e.message};
+    }
+
+    const {
       success,
       error = 'Something happened while fetching bookmarks.',
       value: bkmrks = [],
-    }) => {
-      if (!success) {
-        throw new Error(`Failed to load bookmarks: ${error}`);
-      }
+    } = parsedResponse;
 
-      const bookmarks = {};
-      Object.keys(bkmrks).forEach((leafNum) => {
-        const bookmark = bkmrks[leafNum];
-        const formattedLeafNum = parseInt(leafNum, 10);
-        const formattedBookmark = this.formatBookmark({ ...bookmark, leafNum: formattedLeafNum });
-        bookmarks[leafNum] = formattedBookmark;
-      });
+    if (!success) {
+      console?.warn('Error fetching bookmarks', error);
+    }
 
-      this.bookmarks = bookmarks;
-      return bookmarks;
+    const bookmarks = {};
+    Object.keys(bkmrks).forEach((leafNum) => {
+      const bookmark = bkmrks[leafNum];
+      const formattedLeafNum = parseInt(leafNum, 10);
+      const formattedBookmark = this.formatBookmark({ ...bookmark, leafNum: formattedLeafNum });
+      bookmarks[leafNum] = formattedBookmark;
     });
+
+    this.bookmarks = bookmarks;
+    return bookmarks;
   }
 
   emitBookmarksChanged() {
@@ -250,12 +290,14 @@ class IABookmarks extends LitElement {
 
     pages.forEach((pageEl) => {
       const existingButton = pageEl.querySelector('.bookmark-button');
-      if (existingButton) { existingButton.remove(); }
+      if (existingButton) {
+        existingButton.remove();
+      }
       const pageID = +pageEl.classList.value.match(/pagediv\d+/)[0].replace(/\D/g, '');
       const pageBookmark = this.getBookmark(pageID);
       const bookmarkState = pageBookmark ? 'filled' : 'hollow';
       // eslint-disable-next-line
-      const pageData = this.bookreader._models.book.getPage(pageID);
+      const pageData = this.bookreader.book.getPage(pageID);
       const { isViewable } = pageData;
 
       if (!isViewable) { return; }
@@ -375,7 +417,7 @@ class IABookmarks extends LitElement {
 
   bookmarkSelected({ detail }) {
     const { leafNum } = detail.bookmark;
-    this.bookreader.jumpToPage(`${this.bookreader.getPageNum(`${leafNum}`.replace(/\D/g, ''))}`);
+    this.bookreader.jumpToPage(`${this.bookreader.book.getPageNum(`${leafNum}`.replace(/\D/g, ''))}`);
     this.activeBookmarkID = leafNum;
   }
 
@@ -390,33 +432,26 @@ class IABookmarks extends LitElement {
   confirmDeletion(pageID) {
     const existingBookmark = this.getBookmark(pageID);
     if (existingBookmark.note) {
-      this.emitShowModal(pageID);
+      this.displayDeletionModal(pageID);
       return;
     }
     this.deleteBookmark({ detail: { id: `${pageID}` } });
   }
 
-  emitShowModal(pageID) {
-    this.dispatchEvent(new CustomEvent('showItemNavigatorModal', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        customModalContent: html`
-          <delete-modal-actions
-            .deleteAction=${() => this.deleteBookmark({ detail: { id: `${pageID}` } })}
-            .cancelAction=${() => this.emitCloseModal()}
-            .pageID=${pageID}
-          ></delete-modal-actions>
-        `,
-      },
-    }));
-  }
+  displayDeletionModal(pageID) {
+    const customModalContent = html`
+      <delete-modal-actions
+        .deleteAction=${() => this.deleteBookmark({ detail: { id: `${pageID}` } })}
+        .cancelAction=${() => this.modal.closeModal()}
+        .pageID=${pageID}
+      ></delete-modal-actions>
+    `;
 
-  emitCloseModal() {
-    this.dispatchEvent(new CustomEvent('closeItemNavigatorModal', {
-      bubbles: true,
-      composed: true,
-    }));
+
+    this.modal.showModal({
+      config: this.deleteModalConfig,
+      customModalContent,
+    });
   }
 
   deleteBookmark({ detail }) {
@@ -427,18 +462,10 @@ class IABookmarks extends LitElement {
 
     this.api.delete(detail.id);
     this.editedBookmark = {};
-    this.emitCloseModal();
+    this.modal.closeModal();
     this.renderBookmarkButtons();
   }
 
-  /**
-   * call `loginClicked` callback
-   */
-  loginClick() {
-    const { loginClicked = () => {} } = this.options;
-    loginClicked();
-  }
-
   /**
    * Tells us if we should allow user to add bookmark via menu panel
    * returns { Boolean }
@@ -460,6 +487,7 @@ class IABookmarks extends LitElement {
     return html`
       <button
         class="ia-button primary"
+        tabindex="-1"
         ?disabled=${this.shouldEnableAddBookmarkButton}
         @click=${this.addBookmark}>
         Add bookmark
@@ -483,15 +511,23 @@ class IABookmarks extends LitElement {
     `;
   }
 
+  get bookmarkHelperMessage() {
+    return html`<p>Please use 1up or 2up view modes to add bookmark.</p>`;
+  }
+
   render() {
-    const { loginUrl } = this.options;
     const bookmarks = html`
       ${this.bookmarksList}
-      ${this.allowAddingBookmark ? this.addBookmarkButton : nothing}
+      ${this.allowAddingBookmark ? this.addBookmarkButton : this.bookmarkHelperMessage}
     `;
     return html`
       <section class="bookmarks">
-        ${this.displayMode === 'login' ? html`<bookmarks-login @click=${this.loginClick} .url=${loginUrl}></bookmarks-login>` : bookmarks}
+      ${ this.displayMode === 'login'
+      ? html`<bookmarks-login
+        @click=${() => this.loginOptions.loginClicked()}
+        .url=${this.loginOptions.loginUrl}></bookmarks-login>`
+      : bookmarks
+      }
       </section>
     `;
   }

package/src/BookNavigator/delete-modal-actions.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 
 export default class DeleteModalActions extends LitElement {
   static get styles() {

package/src/BookNavigator/downloads/downloads-provider.js

@@ -1,42 +1,56 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
+import '@internetarchive/icon-dl/icon-dl';
+import './downloads';
 
-/* register subpanel */
-import { IABookDownloads } from './downloads';
-customElements.define('ia-book-downloads', IABookDownloads);
-
-let downloads = [];
 const menuBase = {
   pdf: {
     type: 'Encrypted Adobe PDF',
     url: '#',
     note: 'PDF files contain high quality images of pages.',
   },
+  lcppdf: {
+    type: 'Get LCP PDF',
+    url: '#',
+    note: 'PDF files contain high quality images of pages.',
+  },
+  lcpepub: {
+    type: 'Get LCP ePub',
+    url: '#',
+    note: 'ePub files are smaller in size, but may contain errors.',
+  },
   epub: {
     type: 'Encrypted Adobe ePub',
     url: '#',
     note: 'ePub files are smaller in size, but may contain errors.',
-  }
+  },
+};
+
+const publicMenuBase = {
+  pdf: "PDF",
+  epub: "ePub",
+  lcppdf: "LCP PDF",
+  lcpepub: "LCP ePub",
 };
 
-export default class {
-  constructor() {
-    this.icon = html`<ia-icon icon="download" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>`;
+export default class DownloadsProvider {
+
+  constructor({ bookreader }) {
+    this.icon = html`<ia-icon-dl style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-dl>`;
     this.label = 'Downloadable files';
     this.menuDetails = '';
+    this.downloads = [];
     this.id = 'downloads';
     this.component = '';
-
-    this.computeAvailableTypes = this.computeAvailableTypes.bind(this);
-    this.update = this.update.bind(this);
+    this.isBookProtected = bookreader?.options?.isProtected || false;
   }
 
-
   update(downloadTypes) {
     this.computeAvailableTypes(downloadTypes);
     this.component = this.menu;
+    this.component.isBookProtected = this.isBookProtected;
 
-    const ending = downloads.length === 1 ? '' : 's';
-    this.menuDetails = `(${downloads.length} format${ending})`;
+    const ending = this.downloads.length === 1 ? '' : 's';
+    this.menuDetails = `(${this.downloads.length} format${ending})`;
   }
 
   /**
@@ -45,22 +59,23 @@ export default class {
    * @param  availableTypes
    */
   computeAvailableTypes(availableTypes = []) {
-    const menuData = availableTypes.reduce((found, incoming = [], index) => {
+    const menuData = availableTypes.reduce((found, incoming = []) => {
       const [ type = '', link = '' ] = incoming;
       const formattedType = type.toLowerCase();
       const downloadOption = menuBase[formattedType] || null;
+
       if (downloadOption) {
-        const menuInfo = Object.assign({}, downloadOption, { url: link });
+        const menuButtonText = this.isBookProtected ? menuBase[formattedType].type : publicMenuBase[formattedType];
+        const menuInfo = Object.assign({}, downloadOption, { url: link,  type: menuButtonText});
         found.push(menuInfo);
       }
       return found;
     }, []);
 
-    downloads = menuData;
+    this.downloads = menuData;
   }
 
-
   get menu () {
-    return html`<ia-book-downloads .downloads=${downloads}></ia-book-downloads>`;
+    return html`<ia-book-downloads .downloads=${this.downloads}></ia-book-downloads>`;
   }
 }

package/src/BookNavigator/downloads/downloads.js

@@ -1,11 +1,12 @@
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
+import { css, html, LitElement, nothing } from 'lit';
+import buttonStyles from '../assets/button-base.js';
 export class IABookDownloads extends LitElement {
   static get properties() {
     return {
       downloads: { type: Array },
       expiration: { type: Number },
       renderHeader: { type: Boolean },
+      isBookProtected: { type: Boolean },
     };
   }
 
@@ -14,6 +15,7 @@ export class IABookDownloads extends LitElement {
     this.downloads = [];
     this.expiration = 0;
     this.renderHeader = false;
+    this.isBookProtected = false;
   }
 
   get formatsCount() {
@@ -31,13 +33,23 @@ export class IABookDownloads extends LitElement {
     return this.downloads.map(option => (
       html`
         <li>
-          <a class="button" href="${option.url}">Get ${option.type}</a>
+          <a class="ia-button link primary" href="${option.url}">Get ${option.type}</a>
           ${option.note ? html`<p>${option.note}</p>` : html``}
         </li>
       `
     ));
   }
 
+  /**
+   * checks if downloads list contains an LCP option
+   * @return {boolean}
+   */
+  get hasLCPOption() {
+    const regex = /^(LCP)/g;
+    const lcpAvailable = this.downloads.some(option => option.type?.match(regex));
+    return lcpAvailable;
+  }
+
   get header() {
     if (!this.renderHeader) {
       return nothing;
@@ -50,18 +62,38 @@ export class IABookDownloads extends LitElement {
     `;
   }
 
+  get accessProtectedBook() {
+    return html`
+      <p>To access downloaded books, you need Adobe-compliant software on your device. The Internet Archive will administer this loan, but Adobe may also collect some information.</p>
+      <a class="ia-button external primary" href="https://www.adobe.com/solutions/ebook/digital-editions/download.html" rel="noopener noreferrer" target="_blank">Install Adobe Digital Editions</a>
+    `;
+  }
+
+  get installSimplyEAldikoThoriumMsg() {
+    return html`
+    <p>For LCP downloads, make sure you have SimplyE or Aldiko Next installed on mobile or Thorium on desktop.</p>
+    <ul>
+      <li><a href="https://librarysimplified.org/simplye/" rel="noopener noreferrer nofollow" target="_blank">Install SimplyE</a></li>
+      <li><a href="https://www.demarque.com/en-aldiko" rel="noopener noreferrer nofollow" target="_blank">Install Aldiko</a></li>
+      <li><a href="https://www.edrlab.org/software/thorium-reader/" rel="noopener noreferrer nofollow" target="_blank">Install Thorium</a></li>
+    </ul>
+  `;
+  }
+
   render() {
     return html`
       ${this.header}
       ${this.loanExpiryMessage}
       <ul>${this.renderDownloadOptions()}</ul>
-      <p>To access downloaded books, you need Adobe-compliant software on your device. The Internet Archive will administer this loan, but Adobe may also collect some information.</p>
-      <a class="button external" href="https://www.adobe.com/solutions/ebook/digital-editions/download.html" rel="noopener noreferrer" target="_blank">Install Adobe Digital Editions</a>
+      ${this.hasLCPOption
+      ? this.installSimplyEAldikoThoriumMsg
+      : (this.isBookProtected ? this.accessProtectedBook : nothing)
+      }
     `;
   }
 
   static get styles() {
-    return css`
+    const mainCss = css`
       :host {
         display: block;
         height: 100%;
@@ -79,24 +111,6 @@ export class IABookDownloads extends LitElement {
         justify-self: end;
       }
 
-      .button {
-        color: var(--primaryTextColor);
-        background: var(--primaryCTAFill);
-        border: 1px solid var(--primaryCTABorder);
-        display: inline-block;
-        padding: .6rem 1rem;
-        font-size: 1.4rem;
-        text-decoration: none;
-        text-shadow: 1px 1px #484848;
-        border-radius: 4px;
-      }
-
-      .button.external {
-        background: var(--secondaryCTAFill, transparent);
-        border: 1px solid var(--secondaryCTABorder, #999);
-        text-shadow: none;
-      }
-
       header {
         display: flex;
         align-items: center;
@@ -109,7 +123,6 @@ export class IABookDownloads extends LitElement {
         font-weight: bold;
         font-style: italic;
       }
-      
       header div {
         display: flex;
         align-items: baseline;
@@ -142,5 +155,8 @@ export class IABookDownloads extends LitElement {
         line-height: 140%;
       }
     `;
+
+    return [buttonStyles, mainCss];
   }
 }
+customElements.define('ia-book-downloads', IABookDownloads);

package/src/BookNavigator/search/a-search-result.js

@@ -1,6 +1,7 @@
-import { nothing } from 'lit-html';
-import { html, LitElement } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { escapeHTML } from '../../BookReader/utils.js';
+import { html, LitElement, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
 
 export class BookSearchResult extends LitElement {
   static get properties() {
@@ -12,17 +13,24 @@ export class BookSearchResult extends LitElement {
   constructor() {
     super();
 
-    this.matchRegex = new RegExp('{{{(.+?)}}}', 'g');
+    this.matchRegex = new RegExp('{{{(.+?)}}}', 'gs');
   }
 
   createRenderRoot() {
     return this;
   }
 
+  /**
+   * Converts the search hit to a `<p>` template containing the full search result with all of
+   * its `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.
+   *
+   * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags
+   * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.
+   */
   highlightedHit(hit) {
-    return html`
-      <p>${unsafeHTML(hit.replace(this.matchRegex, '<mark>$1</mark>'))}</p>
-    `;
+    return html`<p>
+      ${unsafeHTML(escapeHTML(hit).replace(this.matchRegex, '<mark>$1</mark>'))}
+    </p>`;
   }
 
   resultSelected() {
@@ -36,17 +44,14 @@ export class BookSearchResult extends LitElement {
   }
 
   render() {
-    const { match } = this;
-    const { par = [] } = match;
-    const [resultDetails = {}] = par;
-    const pageNumber = Number.isInteger(resultDetails.page)
-      ? html`<p class="page-num">Page -${resultDetails.page}-</p>` : nothing;
+    /** @type {SearchInsideMatch} */
+    const match = this.match;
     const coverImage = html`<img src="${match.cover}" />`;
     return html`
       <li @click=${this.resultSelected}>
         ${match.cover ? coverImage : nothing}
         <h4>${match.title || nothing}</h4>
-        ${pageNumber}
+        <p class="page-num">Page ${match.displayPageNumber}</p>
         ${this.highlightedHit(match.text)}
       </li>
     `;