fix: made the logic for emitting the id of sprites more efficient

chore: added a test for the auto-pause feature
ReadAlongs · Mar 22, 2024 · 3e6c6a3 · 3e6c6a3
1 parent b2ca647
commit 3e6c6a3
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 21 deletions.
diff --git a/packages/web-component/cypress/e2e/customizations.cy.js b/packages/web-component/cypress/e2e/customizations.cy.js
@@ -25,4 +25,18 @@ context("Testing creator enabled settings", () => {
       cy.get("[data-cy=translation-toggle]").should("be.visible");
     });
   });
+
+  it("testing creator enabling auto pause ", function () {
+    cy.visit("/ej-fra/index-auto-pause.html");
+    cy.wait("@text");
+    cy.wait("@audio");
+    cy.readalong().within(() => {
+      cy.get("[data-cy=play-button]").click();
+      cy.wait(12000); //wait for the last word of the first page (at 6.4) + ~5 sec
+
+      cy.get("#t0b0d0p0s2w15")
+        .should("be.visible")
+        .should("have.class", "reading"); //check the last word is still highlighted
+    });
+  });
 });
diff --git a/packages/web-component/src/components/read-along-component/read-along.tsx b/packages/web-component/src/components/read-along-component/read-along.tsx
@@ -967,24 +967,12 @@ export class ReadAlongComponent {
               el_tag in this.endOfPageTags &&
               this.finalTaggedWord !== el_tag
             ) {
-              //console.log(this.audio_howl_sprites.sound.seek() ,el_tag, this.endOfPageTags[el_tag], this.play_id);
-              //this is a work around to ignore id's not close to current sound time
-              //
-              const timeDiff = Math.round(
-                (this.audio_howl_sprites.sound.seek() -
-                  this.endOfPageTags[el_tag][0]) *
-                  100 //in microsecond
-              );
-
-              if (timeDiff < 100) {
-                //if under a microsecond
-                if (this.autoPauseTimer)
-                  window.clearTimeout(this.autoPauseTimer);
-
-                this.autoPauseTimer = window.setTimeout(() => {
-                  this.pause();
-                }, this.endOfPageTags[el_tag][1] - 50);
-              }
+              //if under a microsecond
+              if (this.autoPauseTimer) window.clearTimeout(this.autoPauseTimer);
+              //pause 50ms before end of word
+              this.autoPauseTimer = window.setTimeout(() => {
+                this.pause();
+              }, this.endOfPageTags[el_tag][1] - 25);
             }
             // Turn tag to query
             let query = this.tagToQuery(el_tag);

diff --git a/packages/web-component/src/utils/utils.ts b/packages/web-component/src/utils/utils.ts
@@ -90,6 +90,7 @@ export var Sprite = function (options) {
   self._tinySprite = Object.keys(options.sprite).map((str) => [
     self._sprite[str][0],
     str,
+    self._sprite[str][0] + self._sprite[str][1], //start time + duration (real time upper limit of the sprite)
   ]);
   // remove the 'all' sprite
   self._tinySprite.pop();
@@ -147,7 +148,10 @@ Sprite.prototype = {
       for (var j = 0; j < self._spriteLeft.length; j++) {
         // if seek passes sprite start point, replace self._reading with that sprite and slice the array of sprites left
         if (seek * 1000 >= self._spriteLeft[j][0]) {
-          self._reading$.next(self._spriteLeft[j][1]);
+          if (seek * 1000 <= self._spriteLeft[j][2]) {
+            self._reading$.next(self._spriteLeft[j][1]); // only emit current sprite
+          }
+
           self._spriteLeft = self._spriteLeft.slice(j, self._spriteLeft.length);
         }
       }
@@ -179,7 +183,9 @@ Sprite.prototype = {
     for (var j = 0; j < self._spriteLeft.length; j++) {
       // if seek passes sprite start point, replace self._reading with that sprite and slice the array of sprites left
       if (seek * 1000 >= self._spriteLeft[j][0]) {
-        self._reading$.next(self._spriteLeft[j][1]);
+        if (seek * 1000 <= self._spriteLeft[j][2]) {
+          self._reading$.next(self._spriteLeft[j][1]); // only emit current sprite
+        }
         self._spriteLeft = self._spriteLeft.slice(j, self._spriteLeft.length);
       }
     }
@@ -213,7 +219,9 @@ Sprite.prototype = {
         if (seek > 0) {
           // if seek passes sprite start point, replace self._reading with that sprite and slice the array of sprites left
           if (seek * 1000 >= self._spriteLeft[j][0]) {
-            self._reading$.next(self._spriteLeft[j][1]);
+            if (seek * 1000 <= self._spriteLeft[j][2]) {
+              self._reading$.next(self._spriteLeft[j][1]); // only emit current sprite
+            }
             self._spriteLeft = self._spriteLeft.slice(
               j,
               self._spriteLeft.length

diff --git a/packages/web-component/test-data/ej-fra/index-auto-pause.html b/packages/web-component/test-data/ej-fra/index-auto-pause.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Insert Title Here</title>
+  </head>
+
+  <body>
+    <!-- Here is how you declare the Web Component. Supported languages: en, fr -->
+    <read-along
+      use-assets-folder="false"
+      href="ej-fra.readalong"
+      audio="ej-fra.m4a"
+      language="fra"
+      auto-pause-at-end-of-page="true"
+    >
+      <span slot="read-along-header">Insert Title Here Too</span>
+    </read-along>
+  </body>
+
+  <!-- The last step needed is to import the package -->
+  <script
+    type="module"
+    src="//127.0.0.1:3333/build/web-component.esm.js"
+  ></script>
+</html>