fix: resolve arpeggio widget playback leak on close or stop (#7739)

* fix: resolve arpeggio widget playback leak on close or stop

* test: cover __playNote early return when not playing

Author: KeerthiKumarR

js/widgets/__tests__/arpeggio.test.js

@@ -537,6 +537,14 @@ describe("Arpeggio Widget", () => {
 
             expect(arpeggio._playing).toBe(false);
         });
+
+        test("returns immediately if not playing", () => {
+            arpeggio._playing = false;
+            const triggerSpy = jest.spyOn(activityMock.logo.synth, "trigger");
+            arpeggio.__playNote(0);
+            expect(triggerSpy).not.toHaveBeenCalled();
+            triggerSpy.mockRestore();
+        });
     });
 
     // --- __playCell fallback Tests ---
@@ -616,4 +624,73 @@ describe("Arpeggio Widget", () => {
             expect(cell2.style.backgroundColor).toBe("black");
         });
     });
+
+    // --- Playback Teardown Tests ---
+    describe("playback teardown and stop behavior", () => {
+        beforeEach(() => {
+            jest.useFakeTimers();
+            arpeggio.notesToPlay = [["C4", 1]];
+            arpeggio.init(activityMock);
+        });
+
+        afterEach(() => {
+            jest.useRealTimers();
+        });
+
+        test("widgetWindow.onclose stops playback and clears timeout", () => {
+            // Start playing
+            const cell = document.getElementById("2,1");
+            cell.onclick({ target: cell });
+            arpeggio.playButton.onclick();
+            expect(arpeggio._playing).toBe(true);
+            expect(arpeggio._playTimeout).not.toBeNull();
+
+            const timeoutSpy = jest.spyOn(global, "clearTimeout");
+
+            // Close window
+            arpeggio.widgetWindow.onclose();
+
+            expect(arpeggio._playing).toBe(false);
+            expect(arpeggio._playTimeout).toBeNull();
+            expect(timeoutSpy).toHaveBeenCalled();
+            expect(activityMock.logo.synth.stop).toHaveBeenCalled();
+            expect(mockWidgetWindow.destroy).toHaveBeenCalled();
+
+            timeoutSpy.mockRestore();
+        });
+
+        test("clicking play button when playing stops playback and clears timeout", () => {
+            const cell = document.getElementById("2,1");
+            cell.onclick({ target: cell });
+            arpeggio.playButton.onclick();
+            expect(arpeggio._playing).toBe(true);
+            expect(arpeggio._playTimeout).not.toBeNull();
+
+            const timeoutSpy = jest.spyOn(global, "clearTimeout");
+
+            // Click to stop
+            arpeggio.playButton.onclick();
+
+            expect(arpeggio._playing).toBe(false);
+            expect(arpeggio._playTimeout).toBeNull();
+            expect(timeoutSpy).toHaveBeenCalled();
+            expect(activityMock.logo.synth.stop).toHaveBeenCalled();
+
+            timeoutSpy.mockRestore();
+        });
+
+        test("_clear stops playback, clears timeout, and resets play button state", () => {
+            const cell = document.getElementById("2,1");
+            cell.onclick({ target: cell });
+            arpeggio.playButton.onclick();
+            expect(arpeggio._playing).toBe(true);
+
+            // Clear widget
+            arpeggio._clear();
+
+            expect(arpeggio._playing).toBe(false);
+            expect(arpeggio._playTimeout).toBeNull();
+            expect(activityMock.logo.synth.stop).toHaveBeenCalled();
+        });
+    });
 });

js/widgets/arpeggio.js

@@ -45,6 +45,7 @@ class Arpeggio {
         // These arrays get created each time the matrix is built.
         this._blockMap = []; // pairs storage
         this.defaultCols = Arpeggio.DEFAULTCOLS;
+        this._playTimeout = null;
     }
 
     /**
@@ -119,6 +120,13 @@ class Arpeggio {
 
         // For the button callbacks
         widgetWindow.onclose = () => {
+            if (this._playTimeout) {
+                clearTimeout(this._playTimeout);
+                this._playTimeout = null;
+            }
+            this._playing = false;
+            this._activity.logo.synth.stop();
+
             arpeggioTableDiv.style.visibility = "hidden";
             this._activity.hideMsgs();
             widgetWindow.destroy();
@@ -522,6 +530,11 @@ class Arpeggio {
                 })(),
                 document.createTextNode("\u00a0\u00a0")
             );
+            if (this._playTimeout) {
+                clearTimeout(this._playTimeout);
+                this._playTimeout = null;
+            }
+            this._activity.logo.synth.stop();
             this._playing = false;
             return;
         }
@@ -593,6 +606,9 @@ class Arpeggio {
      * @returns {void}
      */
     __playNote(i) {
+        if (!this._playing) {
+            return;
+        }
         if (i < this._playList.length) {
             if (this._playList[i][0].length > 0) {
                 this._activity.logo.synth.trigger(
@@ -605,7 +621,7 @@ class Arpeggio {
                     null
                 );
             }
-            setTimeout(() => {
+            this._playTimeout = setTimeout(() => {
                 this.__playNote(i + 1);
             }, 2600 * this._playList[i][1]);
         } else {
@@ -734,6 +750,30 @@ class Arpeggio {
      * @returns {void}
      */
     _clear() {
+        if (this._playing) {
+            this._playing = false;
+            if (this._playTimeout) {
+                clearTimeout(this._playTimeout);
+                this._playTimeout = null;
+            }
+            this._activity.logo.synth.stop();
+            const icon = this.playButton;
+            icon.replaceChildren(
+                document.createTextNode("\u00a0\u00a0"),
+                (() => {
+                    const img = document.createElement("img");
+                    img.src = "header-icons/play-button.svg";
+                    img.title = _("Play");
+                    img.alt = _("Play");
+                    img.height = Arpeggio.ICONSIZE;
+                    img.width = Arpeggio.ICONSIZE;
+                    img.style.verticalAlign = "middle";
+                    img.style.alignContent = "center";
+                    return img;
+                })(),
+                document.createTextNode("\u00a0\u00a0")
+            );
+        }
         // "Unclick" every entry in the matrix.
         const arpeggioTable = docById("arpeggioTable");
         let table;