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

package/src/css/_TextSelection.scss

@@ -1,35 +1,90 @@
-.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;
     }
+}
 
-    .BRparagElement {
-        fill: red;
-        cursor: text;
-        white-space: pre;
-        fill-opacity: 0;
-        font-family: Georgia, serif;
+.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: "-";
+}
+
+// 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)):not(:has(.BRhighlight)) .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 +92,181 @@
     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;
-}
+}
+
+
+$select-menu-radius: 25px;
+$select-menu-extended-radius: 10px;
+.br-select-menu__root {
+  display: none;
+  color: white;
+  color-scheme: dark;
+  padding: 2px;
+  overflow: hidden;
+  opacity: 1;
+  transition: opacity 0.2s;
+  gap: 5px;
+
+  &[open] {
+    display: flex;
+  }
+
+  &[showextended] {
+    display: block;
+    gap: 0px;
+    background-color: #333;
+    border-radius: $select-menu-extended-radius;
+  }
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+.br-select-menu__root--scrolling {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.br-select-menu__option {
+  --iconWidth: 15px;
+  --iconHeight: 15px;
+  --iconFillColor: currentColor;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  border-radius: $select-menu-radius;
+  font-family: inherit;
+  color: inherit;
+  border: 0;
+  cursor: pointer;
+  text-wrap: nowrap;
+  background-color: #333;
+  position: relative;
+
+  @media (pointer: coarse) and (hover: none) {
+    padding: 4px 8px;
+    #br-select-more & {
+        padding: 4px;
+    }
+  }
+
+  &:hover:after {
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    top: 2px;
+    bottom: 2px;
+    content: "";
+    pointer-events: none;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: calc($select-menu-radius - 2px);
+  }
+
+  .br-select-menu__root[showextended] & {
+      width:100%;
+      &:hover:after {
+        border-radius: calc($select-menu-extended-radius - 2px);
+      }
+  }
+}
+
+.br-select-menu__icon {
+  display: block;
+  flex-shrink: 0;
+  width: 17px;
+  height: 17px;
+  padding: 2px;
+}
+
+.br-select-menu__label {
+  margin-left: 4px;
+  font-size: 12px;
+  margin-right: 4px;
+}
+
+@media (hover: hover) {
+    .br-select-menu__option {
+        padding: 4px;
+    }
+    .br-select-menu__label {
+        width: 0px;
+        margin: 0;
+        opacity: 0;
+        interpolate-size: allow-keywords;
+        transition: width 0.2s;
+    }
+    .br-select-menu__root:hover .br-select-menu__label {
+        width: auto;
+        margin: 0 4px;
+        opacity: 1;
+    }
+}
+
+.BRtextLayer .BRhighlight {
+    background-color: yellow;
+    pointer-events: all;
+    color: transparent;
+}
+
+@keyframes highlightTargetFlash {
+  to { background-color: hsla(45, 80%, 66%, 1); }
+}
+
+// Style URI TextFragments, eg ?text=example
+.BRtextLayer .BRhighlight--target-text, .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;
+    animation: highlightTargetFlash 600ms 1 reverse;
+}

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 {
@@ -119,3 +119,10 @@
   height: 12px;
   background-image: url("icons/close-circle-dark.svg");
 }
+
+.icon-toggle-slider {
+  background-size: 25px;
+  width: 25px;
+  height: 25px;
+  background-image: url("icons/slider-toggle.svg");
+}

package/src/{BookNavigator/assets → css}/button-base.js

@@ -1,10 +1,9 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export default css`
   .ia-button {
     min-height: 3rem;
     border: none;
-    outline: none;
     cursor: pointer;
     color: var(--primaryTextColor);
     line-height: normal;
@@ -12,6 +11,7 @@ export default css`
     text-align: center;
     vertical-align: middle;
     font-size: 1.4rem;
+    font-family: inherit;
     display: inline-block;
     padding: .6rem 1.2rem;
     border: 1px solid transparent;

package/src/css/icon_checkmark.js

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+
+export default html`
+<svg height="10" viewBox="0 0 13 10" width="13" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="m4.33333333 10-4.33333333-4.16666667 1.73333333-1.66666666 2.6 2.5 6.93333337-6.66666667 1.7333333 1.66666667z"
+        fill="#fff" fill-rule="evenodd" />
+</svg>
+`;

package/src/css/sharedStyles.js

@@ -0,0 +1,15 @@
+import { css } from "lit";
+
+export const sharedStyles = css`
+    .sr-only {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      clip: rect(0 0 0 0) !important;
+      white-space: nowrap !important;
+      border: 0 !important;
+    }
+`;

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

@@ -0,0 +1,81 @@
+import { html } from 'lit';
+import '@internetarchive/icon-dl/icon-dl.js';
+import './downloads.js';
+
+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 DownloadsProvider {
+
+  constructor({ bookreader }) {
+    this.icon = html`<ia-icon-dl aria-hidden="true" role="presentation" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-dl>`;
+    this.label = 'Downloadable files';
+    this.menuDetails = '';
+    this.downloads = [];
+    this.id = 'downloads';
+    this.component = '';
+    this.isBookProtected = bookreader?.options?.isProtected || false;
+  }
+
+  update(downloadTypes) {
+    this.computeAvailableTypes(downloadTypes);
+    this.component = this.menu;
+    this.component.isBookProtected = this.isBookProtected;
+
+    const ending = this.downloads.length === 1 ? '' : 's';
+    this.menuDetails = `(${this.downloads.length} format${ending})`;
+  }
+
+  /**
+   * Generates Download Menu Info for available types
+   * sets global `downloads`
+   * @param  availableTypes
+   */
+  computeAvailableTypes(availableTypes = []) {
+    const menuData = availableTypes.reduce((found, incoming = []) => {
+      const [ type = '', link = '' ] = incoming;
+      const formattedType = type.toLowerCase();
+      const downloadOption = menuBase[formattedType] || null;
+
+      if (downloadOption) {
+        const menuButtonText = this.isBookProtected ? menuBase[formattedType].type : publicMenuBase[formattedType];
+        const menuInfo = Object.assign({}, downloadOption, { url: link,  type: menuButtonText});
+        found.push(menuInfo);
+      }
+      return found;
+    }, []);
+
+    this.downloads = menuData;
+  }
+
+  get menu () {
+    return html`<ia-book-downloads .downloads=${this.downloads}></ia-book-downloads>`;
+  }
+}

package/src/{BookNavigator → ia-bookreader}/downloads/downloads.js

@@ -1,12 +1,12 @@
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
-import buttonStyles from '../assets/button-base.js';
+import { css, html, LitElement, nothing } from 'lit';
+import buttonStyles from '../../css/button-base.js';
 export class IABookDownloads extends LitElement {
   static get properties() {
     return {
       downloads: { type: Array },
       expiration: { type: Number },
       renderHeader: { type: Boolean },
+      isBookProtected: { type: Boolean },
     };
   }
 
@@ -15,6 +15,7 @@ export class IABookDownloads extends LitElement {
     this.downloads = [];
     this.expiration = 0;
     this.renderHeader = false;
+    this.isBookProtected = false;
   }
 
   get formatsCount() {
@@ -39,6 +40,16 @@ export class IABookDownloads extends LitElement {
     ));
   }
 
+  /**
+   * 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;
@@ -51,13 +62,21 @@ export class IABookDownloads extends LitElement {
     `;
   }
 
+  get installLCPSoftwareMsg() {
+    return html`
+    <p>For LCP downloads, make sure you have LCP software such as <a href="https://thorium.edrlab.org/" rel="noopener noreferrer nofollow" target="_blank">Thorium (desktop)</a>, <a href="https://apps.apple.com/us/app/cantook-by-aldiko/id1476410111" rel="noopener noreferrer nofollow" target="_blank">Cantook (iOS)</a> or <a href="https://play.google.com/store/apps/details?id=com.aldiko.android" rel="noopener noreferrer nofollow" target="_blank">Cantook (Android)</a> installed on your device.</p>
+  `;
+  }
+
   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="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>
+      ${this.hasLCPOption
+      ? this.installLCPSoftwareMsg
+      : nothing
+      }
     `;
   }
 
@@ -128,3 +147,4 @@ export class IABookDownloads extends LitElement {
     return [buttonStyles, mainCss];
   }
 }
+customElements.define('ia-book-downloads', IABookDownloads);