Cancel autoscroll when the user starts scrolling

__TEST__/hyperaudio-lite.test.js

@@ -716,6 +716,43 @@ test("smoothScrollTo jumps directly under prefers-reduced-motion (#259)", () =>
   delete window.matchMedia;
 });
 
+test("user input cancels an active transcript scroll animation (#266)", () => {
+  const inst = new HyperaudioLite({
+    transcript: "hypertranscript",
+    player: "hyperplayer",
+  });
+  const originalRequestAnimationFrame = global.requestAnimationFrame;
+  const originalCancelAnimationFrame = global.cancelAnimationFrame;
+  let nextAnimationId = 1;
+  global.requestAnimationFrame = jest.fn(() => nextAnimationId++);
+  global.cancelAnimationFrame = jest.fn();
+
+  try {
+    for (const eventName of ["wheel", "touchstart", "keydown"]) {
+      inst.scrollContainer.scrollTop = 0;
+      inst.smoothScrollTo(inst.scrollContainer, 500, 800);
+      const animationId = inst.scrollAnimationId;
+
+      inst.scrollContainer.dispatchEvent(new Event(eventName, { bubbles: true }));
+
+      expect(global.cancelAnimationFrame).toHaveBeenLastCalledWith(animationId);
+      expect(inst.scrollAnimationId).toBeNull();
+    }
+  } finally {
+    inst.destroy();
+    if (originalRequestAnimationFrame === undefined) {
+      delete global.requestAnimationFrame;
+    } else {
+      global.requestAnimationFrame = originalRequestAnimationFrame;
+    }
+    if (originalCancelAnimationFrame === undefined) {
+      delete global.cancelAnimationFrame;
+    } else {
+      global.cancelAnimationFrame = originalCancelAnimationFrame;
+    }
+  }
+});
+
 test("registerPlayer() adds a custom player type (#253)", () => {
   class FakePlayer {
     constructor(instance) {

js/hyperaudio-lite.js

@@ -571,6 +571,12 @@ class HyperaudioLite {
     } else {
       this.scrollContainer = this.transcript;
     }
+
+    const cancelAutoscroll = () => this.cancelScrollAnimation();
+    const listenerOpts = { signal: this.listenerController.signal };
+    ['wheel', 'touchstart', 'keydown'].forEach(eventName => {
+      this.scrollContainer.addEventListener(eventName, cancelAutoscroll, listenerOpts);
+    });
   }
 
   // Setup event listeners for interactions
@@ -790,6 +796,13 @@ class HyperaudioLite {
     this.autoscroll = true;
   }
 
+  cancelScrollAnimation() {
+    if (this.scrollAnimationId != null) {
+      cancelAnimationFrame(this.scrollAnimationId);
+      this.scrollAnimationId = null;
+    }
+  }
+
   // Tear down the instance: stop the polling loop, cancel any in-flight
   // scroll animation and remove every DOM listener this instance added
   // (transcript, native player, popover). Embed players (YouTube, Vimeo,
@@ -798,10 +811,7 @@ class HyperaudioLite {
   destroy() {
     this.destroyed = true;
     this.clearTimer();
-    if (this.scrollAnimationId) {
-      cancelAnimationFrame(this.scrollAnimationId);
-      this.scrollAnimationId = null;
-    }
+    this.cancelScrollAnimation();
     this.listenerController.abort();
   }
 

js/hyperaudio-lite.mjs

@@ -571,6 +571,12 @@ class HyperaudioLite {
     } else {
       this.scrollContainer = this.transcript;
     }
+
+    const cancelAutoscroll = () => this.cancelScrollAnimation();
+    const listenerOpts = { signal: this.listenerController.signal };
+    ['wheel', 'touchstart', 'keydown'].forEach(eventName => {
+      this.scrollContainer.addEventListener(eventName, cancelAutoscroll, listenerOpts);
+    });
   }
 
   // Setup event listeners for interactions
@@ -790,6 +796,13 @@ class HyperaudioLite {
     this.autoscroll = true;
   }
 
+  cancelScrollAnimation() {
+    if (this.scrollAnimationId != null) {
+      cancelAnimationFrame(this.scrollAnimationId);
+      this.scrollAnimationId = null;
+    }
+  }
+
   // Tear down the instance: stop the polling loop, cancel any in-flight
   // scroll animation and remove every DOM listener this instance added
   // (transcript, native player, popover). Embed players (YouTube, Vimeo,
@@ -798,10 +811,7 @@ class HyperaudioLite {
   destroy() {
     this.destroyed = true;
     this.clearTimer();
-    if (this.scrollAnimationId) {
-      cancelAnimationFrame(this.scrollAnimationId);
-      this.scrollAnimationId = null;
-    }
+    this.cancelScrollAnimation();
     this.listenerController.abort();
   }