@internetarchive/bookreader 5.0.0-8 → 5.0.0-80

package/src/css/_TextSelection.scss

@@ -1,35 +1,73 @@
-.textSelectionSVG {
-    width: 100%;
+.BRtextLayer {
+    z-index: 2;
     position: absolute;
-    height: 100%;
     top: 0;
     left: 0;
-    // Make it so right-clicking on "blank" part of svg sends events to the image (for saving)
+    color: transparent;
+    transform-origin: 0 0;
+    // Make it so right-clicking on "blank" part of text layer sends events to the image (for saving)
     pointer-events: none;
-    .BRwordElement { pointer-events: all; }
-    &.selectingSVG { 
-        pointer-events: auto; 
-        cursor: text;
-    }
-   
-    // Highlight colors for text selection layer ( these 2 properties do not work if joined)
-    .BRwordElement::selection {
+    cursor: text;
+}
+
+.BRparagraphElement {
+    margin: 0;
+    cursor: text;
+    font-family: Georgia, serif;
+    line-height: 0;
+}
+
+.BRlineElement {
+    pointer-events: all;
+    white-space: nowrap;
+    display: inline-block;
+
+    // We use display: inline-block, otherwise this causes every line
+    // to have newlines at the end in safari. BUT, since they're inline,
+    // if the OCR has to short line in the same paragraph, they can wrap
+    // and one can go onto the other. This adds an arbitrary margin to
+    // the right of each line, forcing things to wrap.
+    // See eg https://www-drini.archive.org/details/countofmontecris00duma_7/page/261/mode/2up
+    // Page 261, second last line on the page.
+    .BRtextLayer[dir=ltr] & { margin-right: 100%; }
+    .BRtextLayer[dir=rtl] & { margin-left: 100%; }
+}
+
+// Highlight colors for text selection layer
+.BRwordElement, .BRspace, .BRparagraphElement, .BRparagraphElement br {
+    // these 2 properties do not work if joined
+    &::selection {
         background: hsla(210, 74%, 62%, 0.4);
     }
-    .BRwordElement::-moz-selection {
+
+    &::-moz-selection {
         background: hsla(210, 74%, 62%, 0.4);
-        color: transparent;
+        color:transparent;
     }
+}
+
+.BRparagraphElement br {
+    visibility: hidden;
+}
+
+// Use CSS pseudo-elements to render the hyphens. This makes them
+// not selectable, so copy/pasting text doesn't include them.
+.BRwordElement--hyphen::after {
+    content: "-";
+}
 
-    .BRparagElement {
-        fill: red;
-        cursor: text;
-        white-space: pre;
-        fill-opacity: 0;
-        font-family: Georgia, serif;
+// Hide text layer for performance during zooming & scrolling
+.BRsmooth-zooming, .BRscrolling-active {
+    .BRpagecontainer:not(.BRpagecontainer--hasSelection) .BRtextLayer {
+        display: none;
     }
 }
 
+// Hide text selection layers of off-screen pages
+.BRmode1up .BRpagecontainer:not(.BRpage-visible) .BRtextLayer {
+    display: none;
+}
+
 // Makes page image unselectable
 .BRpagecontainer img {
     -webkit-user-select: none;
@@ -37,12 +75,34 @@
     user-select: none;
 }
 
-// Hides svg text layer when page animation is running
-.BRpageFlipping .textSelectionSVG {
-    display: none;
+
+// These are Microsoft Edge specific fixed to make some of the
+// browsers features work well. These are for the in-place
+// translation.
+.BRwordElement, .BRspace {
+    &[_istranslated="1"], &[_msttexthash] {
+        background-color: #e4dccd;
+        color: black;
+        letter-spacing: unset !important;
+        background: #ccbfa7;
+    }
 }
 
-// Hide phantom page when last page is selected
-.BRpagecontainer.BRemptypage .textSelectionSVG{
-    display: none;
-}
+.BRlineElement font[_mstmutation="1"] {
+    background: #ccbfa7;
+}
+
+.BRlineElement:has([_istranslated="1"], [_msttexthash]) {
+    background-color: #e4dccd;
+    color: black;
+    text-align: justify;
+    width: inherit;
+    &:not(:nth-last-child(2)) {
+        text-align-last: justify;
+    }
+}
+
+.BRlineElement[_msttexthash] {
+    background: #ccbfa7;
+    word-spacing: unset !important;
+}

package/src/css/_colorbox.scss

@@ -46,7 +46,7 @@
         }
         #cboxLoadingOverlay{background:transparent;}
 
-.shift{
+.br-colorbox-shift {
     position: absolute !important;
     left: -10000px !important;
-}
+}

package/src/css/_controls.scss

@@ -1,7 +1,7 @@
 .BRcontrols {
   width: 100%;
 
-  .tooltip {
+  .BRtooltip {
     display: none;
     position: absolute;
     width: auto;
@@ -14,9 +14,10 @@
     color: $controlsText;
     border-radius: 3px;
     background: $tooltipBG;
+    pointer-events: none;
   }
 
-  .full .tooltip {
+  .full .BRtooltip {
     left: auto;
     right: 0;
     transform: translateX(0);
@@ -28,24 +29,32 @@
     }
   }
 
-  select.playback-speed {
-    width: 24px;
+  select.playback-speed, select.playback-voices {
     padding-top: 18px;
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
     font-size: 10px;
-    text-align: center;
     text-align-last: center;
     color: $controlsText;
     border: none;
     cursor: pointer;
-    background: transparent url("icons/playback-speed.svg") 50% 0 no-repeat;
-    option {
+    option, optgroup {
       background: $controlsBG;
     }
   }
 
+  select.playback-speed {
+      width: 30px;
+      background: transparent url("icons/playback-speed.svg") 50% 0 no-repeat;
+  }
+
+  select.playback-voices {
+      width: 30px;
+      background: transparent url("icons/voice.svg") 50% 0 no-repeat;
+      background-size: 18px;
+  }
+
   .active {
     background: $activeButtonBG;
   }
@@ -100,6 +109,10 @@
     &.visible {
       display: flex;
       animation: slideUp 0.2s;
+      button {
+        width: unset;
+        height: unset;
+      }
     }
 
     li {

package/src/css/_icons.scss

@@ -37,7 +37,7 @@
 }
 
 .icon-fullscreen-exit {
-  background-image: url("icons/fullscreen-exit.svg");
+  background-image: url("icons/fullscreen_exit.svg");
 }
 
 .icon-thumb {

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

@@ -0,0 +1,224 @@
+/**
+ * BookReaderTemplate to load BookNavigator components
+ */
+
+import { LitElement, html, css } from 'lit';
+
+import '@internetarchive/ia-item-navigator';
+import '../BookNavigator/book-navigator.js';
+// eslint-disable-next-line no-unused-vars
+import { ModalManager } from '@internetarchive/modal-manager';
+import '@internetarchive/modal-manager';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+
+export class IaBookReader extends LitElement {
+  static get properties() {
+    return {
+      item: { type: Object },
+      baseHost: { type: String },
+      signedIn: { type: Boolean },
+      fullscreen: { type: Boolean, reflect: true, attribute: true },
+      sharedObserver: { type: Object, attribute: false },
+      modal: { type: Object, attribute: false },
+      loaded: { type: Boolean },
+      menuShortcuts: { type: Array },
+      menuContents: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this.item = undefined;
+    this.bookreader = undefined;
+    this.baseHost = 'archive.org';
+    this.fullscreen = false;
+    this.signedIn = false;
+    /** @type {ModalManager} */
+    this.modal = undefined;
+    /** @type {SharedResizeObserver} */
+    this.sharedObserver = undefined;
+    this.loaded = false;
+    this.menuShortcuts = [];
+    this.menuContents = [];
+    this.openMenuName = '';
+  }
+
+  updated() {
+    if (!this.modal) {
+      this.setModalManager();
+    }
+
+    if (!this.sharedObserver) {
+      this.sharedObserver = new SharedResizeObserver();
+    }
+  }
+
+  get itemNav() {
+    return this.shadowRoot.querySelector('iaux-item-navigator');
+  }
+
+  /** Creates modal DOM & attaches to `<body>` */
+  setModalManager() {
+    let modalManager = document.querySelector('modal-manager');
+    if (!modalManager) {
+      modalManager = document.createElement(
+        'modal-manager'
+      );
+      document.body.appendChild(modalManager);
+    }
+
+    this.modal = modalManager;
+  }
+
+  manageFullscreen(e) {
+    const { detail } = e;
+    const fullscreen = !!detail.isFullScreen;
+    this.fullscreen = fullscreen;
+    this.dispatchEvent(new CustomEvent('fullscreenStateUpdated', { detail: { fullscreen }}));
+
+  }
+
+  loadingStateUpdated(e) {
+    const { loaded } = e.detail;
+    this.loaded = loaded || null;
+    this.dispatchEvent(new CustomEvent('loadingStateUpdated', { detail: { loaded }}));
+  }
+
+  setMenuShortcuts(e) {
+    this.menuShortcuts = [...e.detail];
+  }
+
+  setMenuContents(e) {
+    const updatedContents = [...e.detail];
+    this.menuContents = updatedContents;
+  }
+
+  manageSideMenuEvents(e) {
+    const { menuId, action } = e.detail;
+    if (!menuId) {
+      return;
+    }
+
+    this.openMenuName = menuId;
+
+    if (action === 'open') {
+      this.itemNav?.openShortcut(menuId);
+    } else if (action === 'toggle') {
+      this.itemNav?.toggleMenu();
+    }
+  }
+
+  render() {
+    return html`
+      <div class="main-component">
+        <iaux-item-navigator
+          ?viewportInFullscreen=${this.fullscreen}
+          .basehost=${this.baseHost}
+          .item=${this.item}
+          .modal=${this.modal}
+          .loaded=${this.loaded}
+          .sharedObserver=${this.sharedObserver}
+          ?signedIn=${this.signedIn}
+          .menuShortcuts=${this.menuShortcuts}
+          .menuContents=${this.menuContents}
+          .openMenu=${this.openMenuName}
+        >
+          <div slot="header">
+            <slot name="header"></slot>
+          </div>
+          <div slot="main">
+            <book-navigator
+              .modal=${this.modal}
+              .baseHost=${this.baseHost}
+              .itemMD=${this.item}
+              ?signedIn=${this.signedIn}
+              ?sideMenuOpen=${this.menuOpened}
+              .sharedObserver=${this.sharedObserver}
+              @ViewportInFullScreen=${this.manageFullscreen}
+              @loadingStateUpdated=${this.loadingStateUpdated}
+              @updateSideMenu=${this.manageSideMenuEvents}
+              @menuUpdated=${this.setMenuContents}
+              @menuShortcutsUpdated=${this.setMenuShortcuts}
+            >
+              <div slot="main">
+                <slot name="main"></slot>
+              </div>
+            </book-navigator>
+          </div>
+        </iaux-item-navigator>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        --primaryBGColor: var(--black, #000);
+        --secondaryBGColor: #222;
+        --tertiaryBGColor: #333;
+        --primaryTextColor: var(--white, #fff);
+        --primaryCTAFill: #194880;
+        --primaryCTABorder: #c5d1df;
+        --secondaryCTAFill: #333;
+        --secondaryCTABorder: #999;
+        --primaryErrorCTAFill: #e51c26;
+        --primaryErrorCTABorder: #f8c6c8;
+        background-color: var(--primaryBGColor);
+        position: relative;
+      }
+
+      :host([fullscreen]),
+      iaux-item-navigator[viewportinfullscreen] {
+        position: fixed;
+        inset: 0;
+        height: 100%;
+        min-height: unset;
+      }
+
+      .main-component {
+        height: 100%;
+        width: 100%;
+        min-height: inherit;
+      }
+
+      div[slot="header"],
+      div[slot="main"] {
+        display: flex;
+        width: 100%;
+      }
+
+      slot {
+        display: block;
+        flex: 1;
+      }
+
+      iaux-item-navigator {
+        min-height: var(--br-height, inherit);
+        height: var(--br-height, inherit);
+        display: block;
+        width: 100%;
+        color: var(--primaryTextColor);
+        --menuButtonLabelDisplay: block;
+        --menuWidth: 320px;
+        --menuSliderBg: var(--secondaryBGColor);
+        --activeButtonBg: var(--tertiaryBGColor);
+        --subpanelRightBorderColor: var(--secondaryCTABorder);
+        --animationTiming: 100ms;
+        --iconFillColor: var(--primaryTextColor);
+        --iconStrokeColor: var(--primaryTextColor);
+        --menuSliderHeaderIconHeight: 2rem;
+        --menuSliderHeaderIconWidth: 2rem;
+        --iconWidth: 2.4rem;
+        --iconHeight: 2.4rem;
+        --shareLinkColor: var(--primaryTextColor);
+        --shareIconBorder: var(--primaryTextColor);
+        --shareIconBg: var(--secondaryBGColor);
+        --activityIndicatorLoadingDotColor: var(--primaryTextColor);
+        --activityIndicatorLoadingRingColor: var(--primaryTextColor);
+      }
+    `;
+  }
+}
+
+window.customElements.define("ia-bookreader", IaBookReader);

package/src/plugins/plugin.archive_analytics.js

@@ -1,4 +1,4 @@
-/* global BookReader, archive_analytics */
+/* global BookReader */
 /**
  * Plugin for Archive.org analytics
  */
@@ -50,13 +50,13 @@ BookReader.prototype.archiveAnalyticsSendFragmentChange = function() {
     // avoids embed cross site exceptions -- but on (+) side, means it is and keeps marked offite!
 
     // Send bookreader ping
-    archive_analytics.send_ping(values, null, "augment_for_ao_site");
+    window.archive_analytics.send_ping(values, null, "augment_for_ao_site");
 
     // Also send tracking event ping
     const additionalEventParams = this.options.lendingInfo && this.options.lendingInfo.loanId
       ? { loanId: this.options.lendingInfo.loanId }
       : {};
-    archive_analytics.send_event('BookReader', 'UserChangedView', window.location.pathname, additionalEventParams);
+    window.archive_analytics.send_event('BookReader', 'UserChangedView', window.location.pathname, additionalEventParams);
 
     this.archiveAnalyticsSendFragmentChange.prevFragment = newFragment;
   }

package/src/plugins/plugin.autoplay.js

@@ -41,8 +41,7 @@ BookReader.prototype.bindNavigationHandlers = (function(super_) {
 
     if (!this.options.enableAutoPlayPlugin) return;
 
-    // Note the mobile plugin attaches itself to body, so we need to select outside
-    const jIcons = this.$('.BRicon').add('.BRmobileMenu .BRicon');
+    const jIcons = this.$('.BRicon');
 
     jIcons.filter('.play').click(() => {
       this.autoToggle();
@@ -80,11 +79,6 @@ BookReader.prototype.autoToggle = function(overrides) {
     this.switchMode(this.constMode2up);
   }
 
-  // Change to autofit if book is too large
-  if (this.reduce < this.twoPageGetAutofitReduce()) {
-    this.zoom('auto');
-  }
-
   if (null == this.autoTimer) {
     // $$$ Draw events currently cause layout problems when they occur during animation.
     //     There is a specific problem when changing from 1-up immediately to autoplay in RTL so
@@ -94,7 +88,7 @@ BookReader.prototype.autoToggle = function(overrides) {
       // don't flip immediately -- wait until timer fires
     } else {
       // flip immediately
-      this.flipFwdToIndex();
+      this.next({ triggerStop: false });
     }
 
     this.$('.play').hide();
@@ -102,10 +96,10 @@ BookReader.prototype.autoToggle = function(overrides) {
     this.autoTimer = setInterval(() => {
       if (this.animating) return;
 
-      if (Math.max(this.twoPage.currentIndexL, this.twoPage.currentIndexR) >= this.lastDisplayableIndex()) {
-        this.flipBackToIndex(1); // $$$ really what we want?
+      if (Math.max(this.twoPage.currentIndexL, this.twoPage.currentIndexR) >= this.book.getNumLeafs() - 1) {
+        this.prev({ triggerStop: false }); // $$$ really what we want?
       } else {
-        this.flipFwdToIndex();
+        this.next({ triggerStop: false });
       }
     }, this.flipDelay);
   } else {