@internetarchive/bookreader 5.0.0-70-a3 → 5.0.0-70

package/src/BookNavigator/sharing.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
-import { iauxShareIcon } from '@internetarchive/ia-item-navigator/dist/src/menus/share-panel';
-import '@internetarchive/ia-item-navigator/dist/src/menus/share-panel';
+import '@internetarchive/icon-share/icon-share';
+import '@internetarchive/ia-sharing-options';
 
 export default class SharingProvider {
   constructor({
@@ -12,16 +12,16 @@ export default class SharingProvider {
     const creatorToUse = Array.isArray(creator) ? creator[0] : creator;
     const subPrefix = bookreader.options.subPrefix || '';
     const label = `Share this book`;
-    this.icon = html`${iauxShareIcon}`;
+    this.icon = html`<ia-icon-share style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-share>`;
     this.label = label;
     this.id = 'share';
-    this.component = html`<iaux-in-share-panel
+    this.component = html`<ia-sharing-options
       .identifier=${identifier}
       .type=${`book`}
       .creator=${creatorToUse}
       .description=${title}
       .baseHost=${baseHost}
       .fileSubPrefix=${subPrefix}
-    ></iaux-in-share-panel>`;
+    ></ia-sharing-options>`;
   }
 }

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

@@ -0,0 +1,111 @@
+import { html } from 'lit';
+
+import sortDescIcon from '../assets/icon_sort_desc.js';
+import sortAscIcon from '../assets/icon_sort_asc.js';
+import sortNeutralIcon from '../assets/icon_sort_neutral.js';
+import volumesIcon from '../assets/icon_volumes.js';
+
+import './volumes.js';
+
+const sortType = {
+  title_asc: 'title_asc',
+  title_desc: 'title_desc',
+  default: 'default'
+};
+export default class VolumesProvider {
+  /**
+   * @param {import('../../BookReader').default} bookreader
+   */
+  constructor({ baseHost, bookreader, onProviderChange }) {
+    this.onProviderChange = onProviderChange;
+    this.component = document.createElement("viewable-files");
+
+    const files = bookreader.options.multipleBooksList.by_subprefix;
+    this.viewableFiles = Object.keys(files).map(item => files[item]);
+    this.volumeCount = Object.keys(files).length;
+
+    /** @type {import('../../BookReader').default} */
+    this.bookreader = bookreader;
+
+    this.component.subPrefix = bookreader.options.subPrefix || "";
+    this.component.hostUrl = baseHost;
+    this.component.viewableFiles = this.viewableFiles;
+
+    this.id = "volumes";
+    this.label = `Viewable files (${this.volumeCount})`;
+    this.icon = html`${volumesIcon}`;
+
+    this.sortOrderBy = sortType.default;
+
+    // get sort state from query param
+    if (this.bookreader.urlPlugin) {
+      this.bookreader.urlPlugin.pullFromAddressBar();
+
+      const urlSortValue = this.bookreader.urlPlugin.getUrlParam('sort');
+      if (urlSortValue === sortType.title_asc || urlSortValue === sortType.title_desc) {
+        this.sortOrderBy = urlSortValue;
+      }
+    }
+    this.sortVolumes(this.sortOrderBy);
+  }
+
+  get sortButton() {
+    const sortIcons = {
+      default: html`
+        <button class="sort-by neutral-icon" aria-label="Sort volumes in initial order" @click=${() => this.sortVolumes("title_asc")}>${sortNeutralIcon}</button>
+      `,
+      title_asc: html`
+        <button class="sort-by asc-icon" aria-label="Sort volumes in ascending order" @click=${() => this.sortVolumes("title_desc")}>${sortAscIcon}</button>
+      `,
+      title_desc: html`
+        <button class="sort-by desc-icon" aria-label="Sort volumes in descending order" @click=${() => this.sortVolumes("default")}>${sortDescIcon}</button>
+      `,
+    };
+
+    return sortIcons[this.sortOrderBy];
+  }
+
+  /**
+   * @param {'default' | 'title_asc' | 'title_desc'} sortByType
+   */
+  sortVolumes(sortByType) {
+    let sortedFiles = [];
+
+    const files = this.viewableFiles;
+    sortedFiles = files.sort((a, b) => {
+      if (sortByType === sortType.title_asc) return a.title.localeCompare(b.title);
+      else if (sortByType === sortType.title_desc) return b.title.localeCompare(a.title);
+      else return a.orig_sort - b.orig_sort;
+    });
+
+    this.sortOrderBy = sortByType;
+    this.component.sortOrderBy = sortByType;
+    this.component.viewableFiles  = [...sortedFiles];
+    this.actionButton = this.sortButton;
+
+    if (this.bookreader.urlPlugin) {
+      this.bookreader.urlPlugin.pullFromAddressBar();
+      if (this.sortOrderBy !== sortType.default) {
+        this.bookreader.urlPlugin.setUrlParam('sort', sortByType);
+      } else {
+        this.bookreader.urlPlugin.removeUrlParam('sort');
+      }
+    }
+
+    this.onProviderChange(this.bookreader);
+
+    this.multipleFilesClicked(sortByType);
+  }
+
+  /**
+   * @param {'default' | 'title_asc' | 'title_desc'} orderBy
+   */
+  multipleFilesClicked(orderBy) {
+    window.archive_analytics?.send_event(
+      'BookReader',
+      `VolumesSort|${orderBy}`,
+      window.location.path,
+    );
+  }
+
+}

package/src/BookNavigator/volumes/volumes.js

@@ -0,0 +1,188 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+export class Volumes extends LitElement {
+  static get properties() {
+    return {
+      subPrefix: { type: String },
+      hostUrl: { type: String },
+      viewableFiles: { type: Array },
+      sortOrderBy: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.hostUrl = '';
+    this.sortOrderBy = '';
+    this.subPrefix = '';
+    this.viewableFiles = [];
+  }
+
+  firstUpdated() {
+    const activeFile = this.shadowRoot.querySelector('.content.active');
+    // allow for css animations to run before scrolling to active file
+    setTimeout(() => {
+      // scroll active file into view if needed
+      // note: `scrollIntoViewIfNeeded` handles auto-scroll gracefully for Chrome, Safari
+      // Firefox does not have this capability yet as it does not support `scrollIntoViewIfNeeded`
+      if (activeFile?.scrollIntoViewIfNeeded) {
+        activeFile?.scrollIntoViewIfNeeded(true);
+        return;
+      }
+
+      // Todo: support `scrollIntoView` or `parentContainer.crollTop = x` for FF & "IE 11"
+      // currently, the hard `position: absolutes` misaligns subpanel when `scrollIntoView` is applied :(
+    }, 350);
+  }
+
+  volumeItemWithImageTitle(item) {
+    const hrefUrl = this.sortOrderBy === 'default'
+      ? `${this.hostUrl}${item.url_path}`
+      : `${this.hostUrl}${item.url_path}?sort=${this.sortOrderBy}`;
+
+    return html`
+      <li class="content active">
+        <div class="separator"></div>
+        <a class="container" href="${hrefUrl}">
+          <div class="image">
+            <img src="${item.image}">
+          </div>
+          <div class="text">
+            <p class="item-title">${item.title}</p>
+            <small>by: ${item.author}</small>
+          </div>
+        </a>
+      </li>
+    `;
+  }
+
+  volumeItem(item) {
+    const activeClass = this.subPrefix === item.file_subprefix ? ' active' : '';
+
+    const hrefUrl = this.sortOrderBy === 'default'
+      ? `${this.hostUrl}${item.url_path}`
+      : `${this.hostUrl}${item.url_path}?sort=${this.sortOrderBy}`;
+
+    return html`
+      <li>
+        <div class="separator"></div>
+        <div class="content${activeClass}">
+          <a href="https://${hrefUrl}">
+            <p class="item-title">${item.title}</p>
+          </a>
+        </div>
+      </li>
+    `;
+  }
+
+  get volumesList() {
+    const volumes = repeat(this.viewableFiles, volume => volume?.file_prefix, this.volumeItem.bind(this));
+    return html`
+      <ul>
+        ${volumes}
+        <div class="separator"></div> 
+      </ul>
+    `;
+  }
+
+  render() {
+    return html`
+      ${this.viewableFiles.length ? this.volumesList : nothing}
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        overflow-y: auto;
+        box-sizing: border-box;
+        color: var(--primaryTextColor);
+        margin-top: 14px;
+        margin-bottom: 2rem;
+        --activeBorderWidth: 2px;
+      }
+
+      a {
+        color: #ffffff;
+        text-decoration: none
+      }
+
+      img {
+        width: 35px;
+        height: 45px;
+      }
+
+      ul {
+        padding: 0;
+        list-style: none;
+        margin: var(--activeBorderWidth) 0.5rem 1rem 0;
+      }
+
+      ul > li:first-child .separator {
+        display: none;
+      }
+
+      li {
+        cursor: pointer;
+        outline: none;
+        position: relative;
+      }
+
+      li .content {
+        padding: 2px 0 4px 2px;
+        border: var(--activeBorderWidth) solid transparent;
+        padding: .2rem 0 .4rem .2rem;
+      }
+      
+      li .content.active {
+        border: var(--activeBorderWidth) solid #538bc5;
+      }
+
+      small {
+        font-style: italic;
+        white-space: initial;
+      }
+
+      .container {
+        display: flex;
+        align-items: center;
+        justify-content: center
+      }
+
+      .item-title {
+        margin-block-start: 0em;
+        margin-block-end: 0em;
+        font-size: 14px;
+        font-weight: bold;
+        word-wrap: break-word;
+        padding-left: 5px;
+      }
+
+      .separator {
+        background-color: var(--secondaryBGColor);
+        width: 98%;
+        margin: 1px auto;
+        height: 1px;
+      }
+
+      .text {
+        padding-left: 10px;
+      }
+
+      .icon {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        margin-left: .7rem;
+        border: 1px solid var(--primaryTextColor);
+        border-radius: 2px;
+        background: var(--activeButtonBg) 50% 50% no-repeat;
+      }
+
+    `;
+  }
+}
+
+customElements.define('viewable-files', Volumes);

package/src/BookReader.js

@@ -1788,7 +1788,7 @@ BookReader.prototype.paramsFromFragment = function(fragment) {
   // Index and page
   if ('undefined' != typeof(urlHash['page'])) {
     // page was set -- may not be int
-    params.page = urlHash['page'];
+    params.page = decodeURIComponent(urlHash['page']);
   }
 
   // $$$ process /region
@@ -1820,11 +1820,10 @@ BookReader.prototype.paramsFromFragment = function(fragment) {
  * @return {string}
  */
 BookReader.prototype.fragmentFromParams = function(params, urlMode = 'hash') {
-  const separator = '/';
   const fragments = [];
 
   if ('undefined' != typeof(params.page)) {
-    fragments.push('page', params.page);
+    fragments.push('page', encodeURIComponent(params.page));
   } else {
     if ('undefined' != typeof(params.index)) {
       // Don't have page numbering but we do have the index
@@ -1850,10 +1849,10 @@ BookReader.prototype.fragmentFromParams = function(params, urlMode = 'hash') {
 
   // search
   if (params.search && urlMode === 'hash') {
-    fragments.push('search', params.search);
+    fragments.push('search', utils.encodeURIComponentPlus(params.search));
   }
 
-  return utils.encodeURIComponentPlus(fragments.join(separator)).replace(/%2F/g, '/');
+  return fragments.join('/');
 };
 
 /**

package/src/ia-bookreader/ia-bookreader.js

@@ -30,7 +30,7 @@ export class IaBookReader extends LitElement {
     super();
     this.item = undefined;
     this.bookreader = undefined;
-    this.baseHost = 'archive.org';
+    this.baseHost = 'https://archive.org';
     this.fullscreen = false;
     this.signedIn = false;
     /** @type {ModalManager} */
@@ -54,7 +54,7 @@ export class IaBookReader extends LitElement {
   }
 
   get itemNav() {
-    return this.shadowRoot.querySelector('iaux-item-navigator');
+    return this.shadowRoot.querySelector('ia-item-navigator');
   }
 
   /** Creates modal DOM & attaches to `<body>` */
@@ -111,7 +111,7 @@ export class IaBookReader extends LitElement {
   render() {
     return html`
       <div class="main-component">
-        <iaux-item-navigator
+        <ia-item-navigator
           ?viewportInFullscreen=${this.fullscreen}
           .basehost=${this.baseHost}
           .item=${this.item}
@@ -145,7 +145,7 @@ export class IaBookReader extends LitElement {
               </div>
             </book-navigator>
           </div>
-        </iaux-item-navigator>
+        </ia-item-navigator>
       </div>
     `;
   }
@@ -169,7 +169,7 @@ export class IaBookReader extends LitElement {
       }
 
       :host([fullscreen]),
-      iaux-item-navigator[viewportinfullscreen] {
+      ia-item-navigator[viewportinfullscreen] {
         position: fixed;
         inset: 0;
         height: 100%;
@@ -193,7 +193,7 @@ export class IaBookReader extends LitElement {
         flex: 1;
       }
 
-      iaux-item-navigator {
+      ia-item-navigator {
         min-height: var(--br-height, inherit);
         height: var(--br-height, inherit);
         display: block;

package/src/plugins/tts/AbstractTTSEngine.js

@@ -142,6 +142,10 @@ export default class AbstractTTSEngine {
     // MS Edge fires voices changed randomly very often
     this.events.off('voiceschanged', this.updateBestVoice);
     this.voice = this.getVoices().find(voice => voice.voiceURI === voiceURI);
+    // if the current book has a language set, store the selected voice with the book language as a suffix
+    if (this.opts.bookLanguage) {
+      localStorage.setItem(`BRtts-voice-${this.opts.bookLanguage}`, this.voice.voiceURI);
+    }
     if (this.activeSound) this.activeSound.setVoice(this.voice);
   }
 
@@ -221,10 +225,12 @@ export default class AbstractTTSEngine {
     // user languages that match the book language
     const matchingUserLangs = userLanguages.filter(lang => lang.startsWith(bookLanguage));
 
-    // Try to find voices that intersect these two sets
-    return AbstractTTSEngine.getMatchingVoice(matchingUserLangs, bookLangVoices) ||
+    // First try to find the last chosen voice from localStorage for the current book language
+    return AbstractTTSEngine.getMatchingStoredVoice(bookLangVoices, bookLanguage)
+        // Try to find voices that intersect these two sets
+        || AbstractTTSEngine.getMatchingVoice(matchingUserLangs, bookLangVoices)
         // no user languages match the books; let's return the best voice for the book language
-        (bookLangVoices.find(v => v.default) || bookLangVoices[0])
+        || (bookLangVoices.find(v => v.default) || bookLangVoices[0])
         // No voices match the book language? let's find a voice in the user's language
         // and ignore book lang
         || AbstractTTSEngine.getMatchingVoice(userLanguages, voices)
@@ -232,6 +238,19 @@ export default class AbstractTTSEngine {
         || (voices.find(v => v.default) || voices[0]);
   }
 
+  /**
+   * @private
+   * Get the voice last selected by the user for the book language from localStorage.
+   * Returns undefined if no voice is stored or found.
+   * @param {SpeechSynthesisVoice[]} voices  browser voices to choose from
+   * @param {ISO6391} bookLanguage  book language to look for
+   * @return {SpeechSynthesisVoice | undefined}
+   */
+  static getMatchingStoredVoice(voices, bookLanguage) {
+    const storedVoice = localStorage.getItem(`BRtts-voice-${bookLanguage}`);
+    return (storedVoice ? voices.find(v => v.voiceURI === storedVoice) : undefined);
+  }
+
   /**
      * @private
      * Get the best voice that matches one of the BCP47 languages (order by preference)

package/src/plugins/url/UrlPlugin.js

@@ -45,7 +45,7 @@ export class UrlPlugin {
 
     const strPathParams = this.urlSchema
       .filter(s => s.position == 'path')
-      .map(schema => pathParams[schema.name] ? `${schema.name}/${pathParams[schema.name]}` : '')
+      .map(schema => pathParams[schema.name] ? `${schema.name}/${encodeURIComponent(pathParams[schema.name])}` : '')
       .join('/');
 
     // replace consecutive slashes with a single slash + remove trailing slashes
@@ -83,15 +83,13 @@ export class UrlPlugin {
         const hasPropertyKey = doesKeyExists(urlStrSplitSlashObj, schema.name);
         const hasDeprecatedKey = doesKeyExists(schema, 'deprecated_for') && hasPropertyKey;
 
-        if (hasDeprecatedKey) {
-          urlState[schema.deprecated_for] = urlStrSplitSlashObj[schema.name];
+        // Not in the URL
+        if (!hasPropertyKey && !hasDeprecatedKey) {
           return;
         }
 
-        if (hasPropertyKey) {
-          urlState[schema.name] = urlStrSplitSlashObj[schema.name];
-          return;
-        }
+        const urlStateParam = hasDeprecatedKey ? schema.deprecated_for : schema.name;
+        urlState[urlStateParam] = decodeURIComponent(urlStrSplitSlashObj[schema.name]);
       });
 
     // Add searchParams to urlState

package/tests/e2e/models/Navigation.js

@@ -5,7 +5,7 @@ export default class Navigation {
   constructor() {
     this.topNavShell = new Selector('.BRtoolbar');
     this.bottomNavShell = new Selector('.BRfooter');
-    this.itemNav = Selector('ia-bookreader').shadowRoot().find('iaux-item-navigator').shadowRoot();
+    this.itemNav = Selector('ia-bookreader').shadowRoot().find('ia-item-navigator').shadowRoot();
 
     // flipping
     this.goLeft = this.bottomNavShell.find('.BRicon.book_left');

package/tests/jest/BookNavigator/book-navigator.test.js

@@ -9,7 +9,7 @@ import DownloadsProvider from '@/src/BookNavigator/downloads/downloads-provider.
 import SearchProvider from '@/src/BookNavigator/search/search-provider.js';
 import SharingProvider from '@/src/BookNavigator/sharing.js';
 import VisualAdjustmentsProvider from '@/src/BookNavigator/visual-adjustments/visual-adjustments-provider.js';
-import ViewableFilesProvider from '@/src/BookNavigator/viewable-files.js';
+import VolumesProvider from '@/src/BookNavigator/volumes/volumes-provider.js';
 import { ModalManager } from '@internetarchive/modal-manager';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import '@/src/BookNavigator/book-navigator.js';
@@ -214,7 +214,7 @@ describe('<book-navigator>', () => {
           await el.elementUpdated;
 
           expect(el.menuProviders.volumes).toBeDefined();
-          expect(el.menuProviders.volumes).toBeInstanceOf(ViewableFilesProvider);
+          expect(el.menuProviders.volumes).toBeInstanceOf(VolumesProvider);
 
           // also adds a menu shortcut
           expect(el.menuShortcuts.find(m => m.id === 'volumes')).toBeDefined();

package/tests/jest/BookNavigator/sharing/sharing-provider.test.js

@@ -30,7 +30,7 @@ describe('Sharing Provider', () => {
     expect(provider.id).toEqual('share');
     expect(provider.icon).toBeDefined();
     expect(provider.label).toEqual('Share this book');
-    expect(fixtureSync(provider.component).tagName).toContain('IAUX-IN-SHARE-PANEL');
+    expect(fixtureSync(provider.component).tagName).toContain('IA-SHARING-OPTIONS');
   });
 
   describe('Handles being a sub file/volume', () => {