@d-i-t-a/reader 2.0.0-beta.12 → 2.0.0-beta.15

package/dist/esm/index.js

@@ -46855,7 +46855,7 @@ var ReflowableBookView = class {
     const wrapper = findRequiredElement(document, "#iframe-wrapper");
     if (this.scrollMode) {
       const leftHeight = wrapper.scrollTop;
-      const height = this.getScreenHeight();
+      const height = this.getScreenHeight() - 40;
       const offset = leftHeight - height;
       if (offset >= 0) {
         wrapper.scrollTop = offset;
@@ -46881,7 +46881,7 @@ var ReflowableBookView = class {
     const wrapper = findRequiredElement(document, "#iframe-wrapper");
     if (this.scrollMode) {
       const leftHeight = wrapper.scrollTop;
-      const height = this.getScreenHeight();
+      const height = this.getScreenHeight() - 40;
       const scrollHeight = this.scrollingElement.scrollHeight;
       const offset = leftHeight + height;
       if (offset < scrollHeight) {
@@ -52688,7 +52688,7 @@ var MediaOverlayModule = class {
         console.log("ontimeupdate");
       this.trackCurrentTime();
     };
-    this.ensureOnTimeUpdate = (remove) => {
+    this.ensureOnTimeUpdate = (remove, replace) => {
       if (this.audioElement) {
         if (remove) {
           if (this.__ontimeupdate) {
@@ -52697,8 +52697,11 @@ var MediaOverlayModule = class {
             cancelAnimationFrame(this.myReq);
           }
         } else {
-          if (!this.__ontimeupdate) {
+          if (!this.__ontimeupdate || replace) {
             this.__ontimeupdate = true;
+            if (replace) {
+              this.audioElement.removeEventListener("timeupdate", this.ontimeupdate);
+            }
             this.audioElement.addEventListener("timeupdate", this.ontimeupdate);
           }
         }
@@ -52742,7 +52745,7 @@ var MediaOverlayModule = class {
   async playLink() {
     let link = this.currentLinks[this.currentLinkIndex];
     if (link?.Properties?.MediaOverlay) {
-      this.ensureOnTimeUpdate(false);
+      this.ensureOnTimeUpdate(false, false);
       const moUrl = link.Properties?.MediaOverlay;
       const moUrlObjFull = new URL(moUrl, this.publication.manifestUrl);
       const moUrlFull = moUrlObjFull.toString();
@@ -52797,6 +52800,7 @@ var MediaOverlayModule = class {
         const timeToSeekTo = this.currentAudioBegin ? this.currentAudioBegin : 0;
         this.audioElement.currentTime = timeToSeekTo;
         await this.audioElement.play();
+        this.ensureOnTimeUpdate(false, true);
         this.audioElement.volume = this.settings.volume;
         this.audioElement.playbackRate = this.settings.rate;
       } else {
@@ -53110,25 +53114,22 @@ var MediaOverlayModule = class {
           if (IS_DEV) {
             console.log("playMediaOverlaysAudio() - playClip() - _currentAudioElement.play()");
           }
-          this.ensureOnTimeUpdate(false);
+          this.ensureOnTimeUpdate(false, false);
           this.audioElement.playbackRate = this.settings.rate;
           this.audioElement.volume = this.settings.volume;
           if (this.settings.playing) {
-            if (!initial) {
-              let checkReady = function() {
-                if (!self2.settings.resourceReady) {
-                  setTimeout(checkReady, 200);
-                } else {
-                  setTimeout(async () => {
-                    await self2.audioElement.play();
-                  }, self2.settings.wait * 1200);
-                }
-              };
-              let self2 = this;
-              checkReady();
-            } else {
-              await this.audioElement.play();
-            }
+            let checkReady = function() {
+              if (!self2.settings.resourceReady) {
+                setTimeout(checkReady, 200);
+              } else {
+                setTimeout(async () => {
+                  await self2.audioElement.play();
+                  self2.ensureOnTimeUpdate(false, true);
+                }, self2.settings.wait * 1e3);
+              }
+            };
+            let self2 = this;
+            checkReady();
           }
         } else {
           if (IS_DEV) {
@@ -53139,26 +53140,23 @@ var MediaOverlayModule = class {
             if (IS_DEV) {
               console.log("playMediaOverlaysAudio() - playClip() - ontimeupdateSeeked - .play()");
             }
-            this.ensureOnTimeUpdate(false);
+            this.ensureOnTimeUpdate(false, false);
             if (this.audioElement) {
               this.audioElement.playbackRate = this.settings.rate;
               this.audioElement.volume = this.settings.volume;
               if (this.settings.playing) {
-                if (!initial) {
-                  let checkReady = function() {
-                    if (!self2.settings.resourceReady) {
-                      setTimeout(checkReady, 200);
-                    } else {
-                      setTimeout(async () => {
-                        await self2.audioElement.play();
-                      }, self2.settings.wait * 1200);
-                    }
-                  };
-                  let self2 = this;
-                  checkReady();
-                } else {
-                  await this.audioElement.play();
-                }
+                let checkReady = function() {
+                  if (!self2.settings.resourceReady) {
+                    setTimeout(checkReady, 200);
+                  } else {
+                    setTimeout(async () => {
+                      await self2.audioElement.play();
+                      self2.ensureOnTimeUpdate(false, true);
+                    }, self2.settings.wait * 1e3);
+                  }
+                };
+                let self2 = this;
+                checkReady();
               }
             }
           };
@@ -53167,7 +53165,7 @@ var MediaOverlayModule = class {
         }
       } else {
         const contiguous = this.previousAudioUrl === this.currentAudioUrl && typeof this.previousAudioEnd !== "undefined" && this.previousAudioEnd > timeToSeekTo - 0.02 && this.previousAudioEnd <= timeToSeekTo && this.audioElement.currentTime >= timeToSeekTo - 0.1;
-        this.ensureOnTimeUpdate(false);
+        this.ensureOnTimeUpdate(false, false);
         if (contiguous) {
           if (IS_DEV) {
             console.log("playMediaOverlaysAudio() - playClip() - ensureOnTimeUpdate");
@@ -58751,10 +58749,12 @@ var TTSModule2 = class {
       }
     });
   }
-  cancel() {
-    if (this.api?.stopped)
-      this.api?.stopped();
-    this.delegate.emit("readaloud.stopped", "stopped");
+  cancel(api = true) {
+    if (api) {
+      if (this.api?.stopped)
+        this.api?.stopped();
+      this.delegate.emit("readaloud.stopped", "stopped");
+    }
     this.userScrolled = false;
     this.speaking = false;
     setTimeout(() => {
@@ -58771,7 +58771,7 @@ var TTSModule2 = class {
     this.delegate.emit("readaloud.started", "started");
     const self2 = this;
     this.userScrolled = false;
-    this.cancel();
+    this.cancel(false);
     let utterance;
     if (partial) {
       let iframe = document.querySelector("main#iframe-wrapper iframe");
@@ -58911,7 +58911,9 @@ var TTSModule2 = class {
     callback();
   }
   speakPlay() {
-    this.cancel();
+    this.cancel(false);
+    if (this.api?.started)
+      this.api?.started();
     this.delegate.emit("readaloud.started", "started");
     let self2 = this;
     let iframe = document.querySelector("main#iframe-wrapper iframe");
@@ -58921,47 +58923,27 @@ var TTSModule2 = class {
         let node = self2.highlighter.visibleTextRects[0];
         let doc = self2.delegate.iframes[0].contentDocument;
         if (doc) {
-          let isOutsideViewport = function(rect) {
-            const windowLeft = window.scrollX;
-            const windowRight = windowLeft + window.innerWidth;
-            const right = rect.left + rect.width;
-            const bottom = rect.top + rect.height;
-            const windowTop = window.scrollY;
-            const windowBottom = windowTop + window.innerHeight;
-            const isAbove = bottom < windowTop;
-            const isBelow = rect.top > windowBottom;
-            const isLeft = right < windowLeft;
-            const isRight = rect.left > windowRight;
-            return isAbove || isBelow || isLeft || isRight;
-          };
           const range = self2.highlighter.dom(doc.body).getWindow().document.createRange();
           const selection = self2.highlighter.dom(self2.delegate.iframes[0].contentDocument?.body).getSelection();
           selection.removeAllRanges();
           range.selectNodeContents(node.node);
           selection.addRange(range);
-          const clientRects = getClientRectsNoOverlap(range, false);
           let index2 = 0;
-          for (const rect of clientRects) {
-            if (!isOutsideViewport(rect)) {
-              const endNode = selection.focusNode;
-              const endOffset = selection.focusOffset;
-              selection.collapse(selection.anchorNode, selection.anchorOffset);
-              for (let i = 0; i < index2; i++) {
-                selection.modify("move", "forward", "line");
-              }
-              selection.extend(endNode, endOffset);
-              selection.collapse(selection.anchorNode, selection.anchorOffset);
-              if (rootEl) {
-                const idx = self2.findTtsQueueItemIndex(ttsQueue, selection.anchorNode, selection.focusNode, selection.focusOffset, rootEl);
-                if (idx >= 0) {
-                  ttsQueueIndex = idx;
-                }
-              }
-              selection.removeAllRanges();
-              break;
+          const endNode = selection.focusNode;
+          const endOffset = selection.focusOffset;
+          selection.collapse(selection.anchorNode, selection.anchorOffset);
+          for (let i = 0; i < index2; i++) {
+            selection.modify("move", "forward", "line");
+          }
+          selection.extend(endNode, endOffset);
+          selection.collapse(selection.anchorNode, selection.anchorOffset);
+          if (rootEl) {
+            const idx = self2.findTtsQueueItemIndex(ttsQueue, selection.anchorNode, selection.focusNode, selection.focusOffset, rootEl);
+            if (idx >= 0) {
+              ttsQueueIndex = idx;
             }
-            index2++;
           }
+          selection.removeAllRanges();
         }
       };
       const ttsQueue = this.generateTtsQueue(rootEl, true);
@@ -58975,7 +58957,7 @@ var TTSModule2 = class {
       }
       setTimeout(() => {
         this.startTTSSession(ttsQueue, ttsQueueIndex);
-      }, 100);
+      }, 200);
     }
   }
   speakPause() {
@@ -59663,7 +59645,7 @@ var DefinitionsModule = class {
                 }
               });
             }, { threshold: 1 });
-            if (highlightFragments) {
+            if (highlightFragments && highlightFragments.length > 0) {
               observer.observe(highlightFragments[0]);
             }
           });
@@ -59730,6 +59712,7 @@ var LineFocusModule = class {
     this.isActive = false;
     this.isDebug = false;
     this.lineFocusContainer = document.getElementById(`lineFocusContainer`);
+    this.readerContainer = document.getElementById(`D2Reader-Container`);
     this.lineFocusTopBlinder = document.getElementById(`lineFocusTopBlinder`);
     this.lineFocusBottomBlinder = document.getElementById(`lineFocusBottomBlinder`);
     this.wrapperHeight = void 0;
@@ -59750,6 +59733,16 @@ var LineFocusModule = class {
   }
   async start() {
     this.delegate.lineFocusModule = this;
+    const wrapper = findRequiredElement(document, "#iframe-wrapper");
+    if (wrapper.style.height.length > 0) {
+      this.wrapperHeight = wrapper.style.height;
+      if (this.lineFocusContainer)
+        this.lineFocusContainer.style.height = this.wrapperHeight;
+      if (this.readerContainer) {
+        this.readerContainer.style.height = this.wrapperHeight;
+        this.readerContainer.style.overflow = "hidden";
+      }
+    }
   }
   handleResize() {
     if (this.isActive) {
@@ -59759,7 +59752,6 @@ var LineFocusModule = class {
   async enableLineFocus() {
     if (!this.isActive) {
       const wrapper = findRequiredElement(document, "#iframe-wrapper");
-      wrapper.style.overflow = "hidden";
       if (wrapper.style.height.length > 0) {
         this.wrapperHeight = wrapper.style.height;
       }
@@ -59772,12 +59764,14 @@ var LineFocusModule = class {
   disableLineFocus(resetHeight = true) {
     this.isActive = false;
     const wrapper = findRequiredElement(document, "#iframe-wrapper");
-    wrapper.style.overflow = "auto";
     if (this.wrapperHeight) {
       wrapper.style.height = this.wrapperHeight;
     } else if (resetHeight) {
       wrapper.style.removeProperty("height");
     }
+    const doc = this.delegate.iframes[0].contentDocument;
+    const html = findIframeElement(doc, "html");
+    html.style.removeProperty("--USER__maxMediaHeight");
     this.wrapperHeight = void 0;
     if (this.lineFocusContainer)
       this.lineFocusContainer.style.display = "none";
@@ -59797,6 +59791,10 @@ var LineFocusModule = class {
   }
   lineFocus() {
     const wrapper = findRequiredElement(document, "#iframe-wrapper");
+    const doc = this.delegate.iframes[0].contentDocument;
+    const html = findIframeElement(doc, "html");
+    let maxHeight = this.properties.maxHeight ? getHeight() * this.properties.maxHeight / 100 : getHeight() / 2;
+    html.style.setProperty("--USER__maxMediaHeight", maxHeight + "px");
     function insertAfter(referenceNode, newNode) {
       referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
     }
@@ -59828,8 +59826,6 @@ var LineFocusModule = class {
       insertAfter(wrapper, divAfter2);
     }
     this.lines = [];
-    const self2 = this;
-    const doc = self2.delegate.iframes[0].contentDocument;
     if (doc) {
       let random_rgba = function() {
         const o = Math.round, r = Math.random, s = 255;
@@ -59992,10 +59988,8 @@ var LineFocusModule = class {
   }
   currentLine() {
     let current = this.lines[this.index];
-    let previous = this.lines[this.index];
-    let next = this.lines[this.index];
-    let top = previous.style.top;
-    let bottom = parseInt(next.style.top.replace("px", "")) + parseInt(next.style.height.replace("px", ""));
+    let top = current.style.top;
+    let bottom = parseInt(current.style.top.replace("px", "")) + parseInt(current.style.height.replace("px", ""));
     let height = bottom - parseInt(top.replace("px", ""));
     if (this.lineFocusContainer) {
       let lineFocusHeight = parseInt(getComputedStyle(this.lineFocusContainer).height.replace("px", ""));
@@ -60018,10 +60012,8 @@ var LineFocusModule = class {
         this.index = this.lines.length - 1;
       }
       let current = this.lines[this.index];
-      let previous = this.lines[this.index];
-      let next = this.lines[this.index];
-      let top = previous.style.top;
-      let bottom = parseInt(next.style.top.replace("px", "")) + parseInt(next.style.height.replace("px", ""));
+      let top = current.style.top;
+      let bottom = parseInt(current.style.top.replace("px", "")) + parseInt(current.style.height.replace("px", ""));
       let height = bottom - parseInt(top.replace("px", ""));
       if (this.lineFocusContainer) {
         let lineFocusHeight = parseInt(getComputedStyle(this.lineFocusContainer).height.replace("px", ""));
@@ -60045,10 +60037,8 @@ var LineFocusModule = class {
         this.index = 0;
       }
       let current = this.lines[this.index];
-      let previous = this.lines[this.index];
-      let next = this.lines[this.index];
-      let top = previous.style.top;
-      let bottom = parseInt(next.style.top.replace("px", "")) + parseInt(next.style.height.replace("px", ""));
+      let top = current.style.top;
+      let bottom = parseInt(current.style.top.replace("px", "")) + parseInt(current.style.height.replace("px", ""));
       let height = bottom - parseInt(top.replace("px", ""));
       if (this.lineFocusContainer) {
         let lineFocusHeight = parseInt(getComputedStyle(this.lineFocusContainer).height.replace("px", ""));
@@ -60070,10 +60060,14 @@ var LineFocusModule = class {
   }
   findRects(parent) {
     const textNodes = this.findTextNodes(parent);
+    const imageNodes = Array.from(parent.getElementsByTagName("img"));
     let newNodes = [];
     textNodes.forEach((node) => {
       newNodes.push(...this.measureTextNodes(node));
     });
+    imageNodes.forEach((node) => {
+      newNodes.push(...this.measureImageNodes(node));
+    });
     return newNodes;
   }
   findTextNodes(parentElement, nodes = []) {
@@ -60106,6 +60100,21 @@ var LineFocusModule = class {
       }
     }
   }
+  measureImageNodes(node) {
+    try {
+      const range = document.createRange();
+      range.selectNode(node);
+      const rect = Array.from(range.getClientRects());
+      range.detach();
+      return rect;
+    } catch (error) {
+      if (IS_DEV) {
+        console.log("measureTextNode " + error);
+        console.log("measureTextNode " + node);
+        console.log(node.textContent);
+      }
+    }
+  }
 };
 
 // src/reader.ts
@@ -60535,14 +60544,23 @@ var D2Reader = class {
   }
   async applyLineFocusSettings(userSettings) {
     if (userSettings.lines) {
-      if (this.lineFocusModule)
+      if (this.lineFocusModule) {
+        const lines = this.lineFocusModule.properties.lines ?? 1;
+        this.lineFocusModule.index = this.lineFocusModule.index * lines / parseInt(userSettings.lines);
+        this.lineFocusModule.index = Math.abs(parseInt(this.lineFocusModule.index.toFixed()));
         this.lineFocusModule.properties.lines = parseInt(userSettings.lines);
-      await this.lineFocusModule?.enableLineFocus();
+        if (this.lineFocusModule.isActive) {
+          await this.lineFocusModule.enableLineFocus();
+        }
+      }
     }
     if (userSettings.debug !== void 0) {
-      if (this.lineFocusModule)
+      if (this.lineFocusModule) {
         this.lineFocusModule.isDebug = userSettings.debug;
-      await this.lineFocusModule?.enableLineFocus();
+        if (this.lineFocusModule.isActive) {
+          await this.lineFocusModule.enableLineFocus();
+        }
+      }
     }
   }
   lineUp() {