From 7f116f06571acbb60b74874c9ba5af5720c0f1f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A6=D0=B2=D1=8B=D0=BB=D0=B5=D0=B2=20=D0=90=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=20=D0=92=D0=B0=D0=B4=D0=B8?=
 =?UTF-8?q?=D0=BC=D0=BE=D0=B2=D0=B8=D1=87?= <Cvylev.A@prezident.ru>
Date: Wed, 29 Jul 2026 10:53:48 +0300
Subject: [PATCH] fix(player): clean up audio listeners + keep position on URL
 change

- register named listeners with cleanup so a remount (StrictMode) can't leave
  duplicates double-dispatching
- when the same track's URL changes (quality switch or token refresh), resume
  at the current position instead of restarting from 0

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/hooks/useAudioPlayer.ts | 59 ++++++++++++++++++++++++-------------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/src/hooks/useAudioPlayer.ts b/src/hooks/useAudioPlayer.ts
index 128922c..c441926 100644
--- a/src/hooks/useAudioPlayer.ts
+++ b/src/hooks/useAudioPlayer.ts
@@ -31,38 +31,43 @@ export function useAudioPlayer() {
   // on demand; a cache miss transparently falls back to the original.
   const { data: settings } = useGetSettingsQuery();
   const streamQuality = settings?.streamQuality;
-  const isSetup = useRef(false);
-  // `ended` is registered once below; read the latest loop flag through a ref
-  // so the listener doesn't need to be re-bound on every queue change.
+  // `ended` reads the latest loop flag through a ref so the listener doesn't
+  // need re-binding on every queue change.
   const loopRef = useRef(queue.loop);
   loopRef.current = queue.loop;
+  // The track id the current <audio>.src points at — lets us tell a real track
+  // change (start at 0) from a same-track URL change (preserve position).
+  const loadedTrackRef = useRef<string | null>(null);
 
   useEffect(() => {
-    if (isSetup.current) return;
-    isSetup.current = true;
-
     const audio = getAudio();
-
-    audio.addEventListener('timeupdate', () => {
-      dispatch(setPosition(audio.currentTime));
-    });
-    audio.addEventListener('durationchange', () => {
-      dispatch(setDuration(audio.duration || 0));
-    });
-    audio.addEventListener('ended', () => {
+    // Named handlers + cleanup so a remount (React StrictMode, or the hook
+    // mounting elsewhere) can't leave duplicate listeners double-dispatching.
+    const onTime = () => dispatch(setPosition(audio.currentTime));
+    const onDuration = () => dispatch(setDuration(audio.duration || 0));
+    const onEnded = () => {
       if (loopRef.current) {
         audio.currentTime = 0;
         void audio.play();
       } else {
         dispatch(nextTrack());
       }
-    });
-    audio.addEventListener('pause', () => {
-      dispatch(pause());
-    });
-    audio.addEventListener('play', () => {
-      dispatch(resume());
-    });
+    };
+    const onPause = () => dispatch(pause());
+    const onPlay = () => dispatch(resume());
+
+    audio.addEventListener('timeupdate', onTime);
+    audio.addEventListener('durationchange', onDuration);
+    audio.addEventListener('ended', onEnded);
+    audio.addEventListener('pause', onPause);
+    audio.addEventListener('play', onPlay);
+    return () => {
+      audio.removeEventListener('timeupdate', onTime);
+      audio.removeEventListener('durationchange', onDuration);
+      audio.removeEventListener('ended', onEnded);
+      audio.removeEventListener('pause', onPause);
+      audio.removeEventListener('play', onPlay);
+    };
   }, [dispatch]);
 
   useEffect(() => {
@@ -70,8 +75,20 @@ export function useAudioPlayer() {
     const audio = getAudio();
     const url = getStreamUrl(player.currentTrackId, accessToken, streamQuality);
     if (audio.src !== url) {
+      // Same track, new URL (quality changed, or the access token was refreshed
+      // mid-play) → keep the playback position instead of restarting from 0.
+      const sameTrack = loadedTrackRef.current === player.currentTrackId;
+      const resumeAt = sameTrack ? audio.currentTime : 0;
       audio.src = url;
       audio.load();
+      loadedTrackRef.current = player.currentTrackId;
+      if (resumeAt > 0) {
+        const onMeta = () => {
+          audio.currentTime = resumeAt;
+          audio.removeEventListener('loadedmetadata', onMeta);
+        };
+        audio.addEventListener('loadedmetadata', onMeta);
+      }
     }
     if (player.isPlaying) {
       void audio.play();