@internetarchive/bookreader 5.0.0-10-alpha-3 → 5.0.0-100

package/src/css/_BRsearch.scss

@@ -1,40 +1,72 @@
+@mixin ellipsis-lines($lines: 4) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 %timeline-tooltip {
   display: none;
   position: absolute;
   bottom: calc(100% + 5px);
-  left: 50%;
-  transform: translateX(-50%);
-  width: 230px;
+  left: -14px;
+  width: 350px;
+  max-width: 100vw;
   padding: 12px 14px;
+  padding-bottom: 10px;
   color: $tooltipText;
-  font-weight: bold;
   background: $tooltipBG;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
+  border-radius: 4px;
+  animation: fadeUp 0.2s;
+
+  // Disable text selection
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+
+  // Create a triangle under the tooltip using clip-path
+  // This makes it possible to move the mouse onto the tooltip
   &:after {
-    display: none;
     position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
     content: "";
-    border: 7px solid transparent;
-    border-width: 7px 4px;
-    border-bottom: none;
-    border-top-color: $tooltipBG;
+    bottom: -9px;
+    left: 0;
+    width: 30px;
+    height: 10px;
+    clip-path: polygon(0 0, 100% 0, 50% 100%);
   }
 }
 
 #{$brScope} {
-  .BookReaderSearchHilite {
-    opacity: 0.20;
-    filter: alpha(opacity = 20);
-    background-color: #0000ff;
-    position: absolute;
-    /* z-index is important */
-    z-index: $brZindexBase + 3;
+  // FIXME: .ttsHiliteLayer should probably not be in this file,
+  // but they appear the same in the UI.
+  .searchHiliteLayer, .ttsHiliteLayer {
+    pointer-events: none;
+    z-index: 4;
+
+    rect {
+      // Note: Can't use fill-opacity ; safari inexplicably applies that to
+      // the outline as well
+      fill: rgba(0, 0, 255, 0.2);
+    }
+  }
 
-    animation: hiliteFadeIn .2s;
+  .searchHiliteLayer rect {
+    animation: highlightFocus 600ms 1 reverse;
+    stroke: blue;
+    stroke-width: 4px;
+
+    // Sass for loop for nth-child animation delay
+    @for $i from 1 through 10 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{($i - 1) * 50}ms;
+      }
+    }
   }
+
   .BRchapter, .BRsearch {
     position: absolute;
     bottom: 0;  /* Relative to nav line */
@@ -64,6 +96,10 @@
       // background-image: url(images/marker_chap-on.svg);
       background-color: blue;
     }
+    .BRchapterPage {
+      font-size: 0.85em;
+      opacity: .8;
+    }
   }
   .BRsearch {
     width: 9px;
@@ -90,7 +126,17 @@
   }
   .BRquery {
     @extend %timeline-tooltip;
-    b {
+    main {
+      @include ellipsis-lines(4);
+      margin-bottom: 6px;
+      &:before { content: "“"; }
+      &:after { content: "”"; }
+    }
+    footer {
+      font-size: 0.85em;
+      opacity: .8;
+    }
+    mark {
       color: $searchResultText;
       font-weight: bold;
       background-color: $searchResultBG;
@@ -119,7 +165,6 @@
       max-width: 160px;
       height: 100%;
       color: white;
-      outline: none;
       border: none;
       padding: 3px 0px 3px 10px;
       margin: 0;
@@ -197,17 +242,11 @@
         height: 18px;
       }
     }
-    + .BRnav {
-      .BRnavCntl {
-        display: none;
-      }
-    }
   }
 }
 
-@keyframes hiliteFadeIn {
-  from { opacity: 0; }
-  to { opacity: 0.2; }
+@keyframes highlightFocus {
+  to { stroke-width: 20px; }
 }
 
 /* Mid size breakpoint */

package/src/css/_BRtoolbar.scss

@@ -34,8 +34,6 @@
 }
 .BRtoolbarbuttons {
   white-space: nowrap;
-  text-align: right;
-  border-spacing: 0;
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
@@ -65,13 +63,11 @@
   display: none;
 }
 .BRtoolbarLeft {
-  text-align: left;
   flex: 1 auto;
   overflow-y: hidden;
 }
 // .BRtoolbarSectionTitle {}
 .BRtoolbarRight {
-  text-align: right;
   flex: none;
 }
 
@@ -81,4 +77,8 @@
     padding: 0;
     box-shadow: 0px 1px 3px 0px rgba(#666, .25);
   }
-}
+}
+
+ia-bookreader .BRtoolbar {
+  padding-left: 50px;
+}

package/src/css/_TextSelection.scss

@@ -1,35 +1,97 @@
-.textSelectionSVG {
-    width: 100%;
+.BRtextLayer, .BRtranslateLayer {
+    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;
+}
+
+.BRtextLayer {
+    mix-blend-mode: multiply;
+}
+
+.BRtranslateLayer {
+    hyphens: auto;
+}
+
+.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;
     }
+}
+
+// Style URI TextFragments, eg #:~:text=example
+.BRtextLayer ::target-text {
+    // Similar colour to the default one used in Safari, Firefox. Note Chrome uses a purple colour
+    background-color: hsla(45, 80%, 66%, 0.6);
+    color: transparent;
+}
+
+.BRtranslateLayer ::selection {
+    background: hsla(210, 74%, 62%, 0.4);
+}
+
+.BRtranslateLayer ::-moz-selection {
+    background: hsla(210, 74%, 62%, 0.4);
+}
+
+.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 {
+    // If the text layer has an annotation, don't hide it
+    .BRpagecontainer:not(.BRpagecontainer--hasSelection):not(:has(hypothesis-highlight)) .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 +99,55 @@
     user-select: none;
 }
 
-// Hides svg text layer when page animation is running
-.BRpageFlipping .textSelectionSVG {
+
+// These are Microsoft Edge specific fixed to make some of the
+// browsers features work well. These are for the in-place
+// translation.
+.BRtextLayer:has([_istranslated="1"], msreadoutspan) {
+    mix-blend-mode: normal;
+}
+
+.BRwordElement, .BRspace {
+    &[_istranslated="1"], &[_msttexthash] {
+        color: black;
+        letter-spacing: unset !important;
+    }
+}
+
+.BRlineElement:has([_istranslated="1"], [_msttexthash]) {
+    background: rgba(248, 237, 192, 0.8);
+    backdrop-filter: blur(8px);
+    color: black;
+    text-align: justify;
+    width: inherit;
+    &:not(:nth-last-child(2)) {
+        text-align-last: justify;
+    }
+}
+
+.BRlineElement[_msttexthash] {
+    word-spacing: unset !important;
+}
+
+.BRtranslateLayer .BRparagraphElement {
+    pointer-events: auto;
+    overflow-y: auto;
+    background: rgba(248, 237, 192, 0.8);
+    backdrop-filter: blur(8px);
+    color:black;
+    line-height: 1em;
+    text-align: justify;
+}
+
+.BRtranslateLayer .BRparagraphElement .BRlineElement {
+    white-space: break-spaces;
+    display: inline-block;
+}
+
+.BRtextLayer.showingTranslation {
     display: none;
 }
 
-// Hide phantom page when last page is selected
-.BRpagecontainer.BRemptypage .textSelectionSVG{
+.BRtranslateLayer .BRparagraphElement.BRtranslateHidden {
     display: none;
 }

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;
   }
@@ -72,6 +81,10 @@
     height: 30px;
   }
 
+  .controls .hide {
+    display: none;
+  }
+
   @keyframes slideUp {
     from {
       opacity: 0;
@@ -100,6 +113,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);