From 18a97e0bea91e6d27877cb07331e01c5ee7940cb Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 28 Apr 2026 19:23:44 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=A7=B9=20[Refactor]=20Use=20AbortCont?=
 =?UTF-8?q?roller=20for=20event=20listeners=20in=20useAudioPlayer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaced multiple named event handler functions with inline state setters.
- Used an AbortController to cleanly remove all event listeners with a single `controller.abort()` call in the cleanup hook.
- This improves maintainability and readability by reducing verbosity without changing functionality.

Co-authored-by: LyAhn <27559362+LyAhn@users.noreply.github.com>
---
 web/hooks/useAudioPlayer.ts | 29 +++++++++--------------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/web/hooks/useAudioPlayer.ts b/web/hooks/useAudioPlayer.ts
index f026182..3e58f0e 100644
--- a/web/hooks/useAudioPlayer.ts
+++ b/web/hooks/useAudioPlayer.ts
@@ -32,30 +32,19 @@ export function useAudioPlayer(audioUrl: string | null) {
     const audio = new Audio(audioUrl);
     audioRef.current = audio;
 
-    const onTimeUpdate = () =>
-      setState((prev) => ({ ...prev, currentTime: audio.currentTime }));
-    const onDurationChange = () =>
-      setState((prev) => ({ ...prev, duration: audio.duration }));
-    const onEnded = () =>
-      setState((prev) => ({ ...prev, isPlaying: false, currentTime: 0 }));
-    const onPlay = () => setState((prev) => ({ ...prev, isPlaying: true }));
-    const onPause = () => setState((prev) => ({ ...prev, isPlaying: false }));
+    const controller = new AbortController();
+    const { signal } = controller;
 
-    audio.addEventListener("timeupdate", onTimeUpdate);
-    audio.addEventListener("durationchange", onDurationChange);
-    audio.addEventListener("loadedmetadata", onDurationChange);
-    audio.addEventListener("ended", onEnded);
-    audio.addEventListener("play", onPlay);
-    audio.addEventListener("pause", onPause);
+    audio.addEventListener("timeupdate", () => setState((prev) => ({ ...prev, currentTime: audio.currentTime })), { signal });
+    audio.addEventListener("durationchange", () => setState((prev) => ({ ...prev, duration: audio.duration })), { signal });
+    audio.addEventListener("loadedmetadata", () => setState((prev) => ({ ...prev, duration: audio.duration })), { signal });
+    audio.addEventListener("ended", () => setState((prev) => ({ ...prev, isPlaying: false, currentTime: 0 })), { signal });
+    audio.addEventListener("play", () => setState((prev) => ({ ...prev, isPlaying: true })), { signal });
+    audio.addEventListener("pause", () => setState((prev) => ({ ...prev, isPlaying: false })), { signal });
 
     return () => {
       audio.pause();
-      audio.removeEventListener("timeupdate", onTimeUpdate);
-      audio.removeEventListener("durationchange", onDurationChange);
-      audio.removeEventListener("loadedmetadata", onDurationChange);
-      audio.removeEventListener("ended", onEnded);
-      audio.removeEventListener("play", onPlay);
-      audio.removeEventListener("pause", onPause);
+      controller.abort();
     };
   }, [audioUrl]);
 

From 153b63a90c7838d981292eaeb012f72259a6327c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 29 Apr 2026 08:19:17 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=A7=B9=20[Refactor]=20Use=20AbortCont?=
 =?UTF-8?q?roller=20for=20event=20listeners=20in=20useAudioPlayer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaced multiple named event handler functions with inline state setters.
- Used an AbortController to cleanly remove all event listeners with a single `controller.abort()` call in the cleanup hook.
- This improves maintainability and readability by reducing verbosity without changing functionality.
- Formatted inline callbacks across multiple lines for better readability as requested.

Co-authored-by: LyAhn <27559362+LyAhn@users.noreply.github.com>
---
 web/hooks/useAudioPlayer.ts | 36 ++++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/web/hooks/useAudioPlayer.ts b/web/hooks/useAudioPlayer.ts
index 3e58f0e..f13e1e0 100644
--- a/web/hooks/useAudioPlayer.ts
+++ b/web/hooks/useAudioPlayer.ts
@@ -35,12 +35,36 @@ export function useAudioPlayer(audioUrl: string | null) {
     const controller = new AbortController();
     const { signal } = controller;
 
-    audio.addEventListener("timeupdate", () => setState((prev) => ({ ...prev, currentTime: audio.currentTime })), { signal });
-    audio.addEventListener("durationchange", () => setState((prev) => ({ ...prev, duration: audio.duration })), { signal });
-    audio.addEventListener("loadedmetadata", () => setState((prev) => ({ ...prev, duration: audio.duration })), { signal });
-    audio.addEventListener("ended", () => setState((prev) => ({ ...prev, isPlaying: false, currentTime: 0 })), { signal });
-    audio.addEventListener("play", () => setState((prev) => ({ ...prev, isPlaying: true })), { signal });
-    audio.addEventListener("pause", () => setState((prev) => ({ ...prev, isPlaying: false })), { signal });
+    audio.addEventListener(
+      "timeupdate",
+      () => setState((prev) => ({ ...prev, currentTime: audio.currentTime })),
+      { signal }
+    );
+    audio.addEventListener(
+      "durationchange",
+      () => setState((prev) => ({ ...prev, duration: audio.duration })),
+      { signal }
+    );
+    audio.addEventListener(
+      "loadedmetadata",
+      () => setState((prev) => ({ ...prev, duration: audio.duration })),
+      { signal }
+    );
+    audio.addEventListener(
+      "ended",
+      () => setState((prev) => ({ ...prev, isPlaying: false, currentTime: 0 })),
+      { signal }
+    );
+    audio.addEventListener(
+      "play",
+      () => setState((prev) => ({ ...prev, isPlaying: true })),
+      { signal }
+    );
+    audio.addEventListener(
+      "pause",
+      () => setState((prev) => ({ ...prev, isPlaying: false })),
+      { signal }
+    );
 
     return () => {
       audio.pause();