From 0b16bfbb2f0e67b1f06db7274dce6f2fd455f930 Mon Sep 17 00:00:00 2001
From: basboosa05 <166862890+basboosa05@users.noreply.github.com>
Date: Sat, 2 May 2026 17:22:04 +0300
Subject: [PATCH 1/3] seek working

- fixed the null array sent to the state endpoint
- fixed the waveform of track that shows running when another one is playing
---
 src/components/playlist/PlaylistComponent.tsx |  94 ++++----
 .../playlist/PlaylistStatsWaveform.tsx        | 107 ++++++++-
 .../[trackSlug]/components/TrackWaveform.tsx  | 223 +++++++++---------
 src/pages/you/sets/PlaylistSlugPage.tsx       |  46 +---
 src/services/audioService.ts                  |  84 +++----
 src/stores/player.store.ts                    |  54 ++---
 6 files changed, 340 insertions(+), 268 deletions(-)

diff --git a/src/components/playlist/PlaylistComponent.tsx b/src/components/playlist/PlaylistComponent.tsx
index 3f8e649c..66fd79b4 100644
--- a/src/components/playlist/PlaylistComponent.tsx
+++ b/src/components/playlist/PlaylistComponent.tsx
@@ -111,19 +111,29 @@ interface PlaylistWaveformProps {
   isActive: boolean;
 }
 
+// ─── PlaylistWaveform ───────────────────────────────────────────────────────
+// FIXED: inactive tracks must NEVER touch audio src or the MediaElement backend.
+// Active track re-initializes only when the track id actually changes.
 function PlaylistWaveform({ track, isActive }: PlaylistWaveformProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const wsRef = useRef<WaveSurfer | null>(null);
   const timeRef = useRef<HTMLDivElement | null>(null);
   const durRef = useRef<HTMLDivElement | null>(null);
+  const lastTrackIdRef = useRef<string | null>(null);
 
   useEffect(() => {
-    let ws: WaveSurfer | null = null;
     let isMounted = true;
 
     const initWaveform = async () => {
       if (!containerRef.current) return;
-      if (wsRef.current) { try { wsRef.current.destroy(); } catch { /* ok */ } wsRef.current = null; }
+
+      // Destroy previous instance only if track actually changed
+      if (wsRef.current) {
+        try { wsRef.current.destroy(); } catch { /* ok */ }
+        wsRef.current = null;
+      }
+      containerRef.current.innerHTML = "";
+      lastTrackIdRef.current = track.id;
 
       const canvas = document.createElement("canvas");
       const ctx = canvas.getContext("2d");
@@ -134,88 +144,77 @@ function PlaylistWaveform({ track, isActive }: PlaylistWaveformProps) {
         track.waveformData?.length > 0
           ? track.waveformData
           : await getTrackWaveform(track.id);
-      if (!isMounted) return;
-
-      const hasPeaks = peaks && peaks.length > 0;
+      if (!isMounted || !containerRef.current) return;
 
-      let parsedDur = 0;
-      if (track.duration && typeof track.duration === "string") {
-        const parts = track.duration.split(":");
-        if (parts.length === 2) {
-          parsedDur = parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
-        }
-      }
+      const parsedDur = parseDur(track.duration ?? "");
 
       if (isActive) {
-        ws = WaveSurfer.create({
-          container: containerRef.current!,
+        // Active: share the global audio element — DO NOT provide url
+        const ws = WaveSurfer.create({
+          container: containerRef.current,
           waveColor: g,
           progressColor: pg,
           barWidth: 2,
           barGap: 0.5,
           barRadius: 2,
           height: 80,
-          backend: "MediaElement",
-          media: audio,
-          peaks: hasPeaks ? [peaks] : undefined,
+          backend: "MediaElement" as const,
+          media: audio,                         // ← share, don't load new src
+          peaks: peaks.length > 0 ? [peaks] : undefined,
           duration: parsedDur > 0 ? parsedDur : undefined,
         });
 
+        wsRef.current = ws;
         setGlobalWaveSurfer(ws, track.id);
-        setTrackLoadedLocally(track.id);
+        setTrackLoadedLocally(track.id);        // tell audioService: src already set
 
-        ws.on("timeupdate", (currentTime: number) => {
-          if (timeRef.current) timeRef.current.textContent = fmt(currentTime);
+        ws.on("timeupdate", (t: number) => {
+          if (timeRef.current) timeRef.current.textContent = fmt(t);
         });
-
-        ws.on("interaction", (newTime: number) => {
-          seekAudio(newTime);
-        });
-
-        ws.on("decode", (dur: number) => {
-          if (durRef.current) durRef.current.textContent = fmt(dur);
+        ws.on("interaction", (t: number) => seekAudio(t));
+        ws.on("decode", (d: number) => {
+          if (durRef.current) durRef.current.textContent = fmt(d);
         });
+        ws.on("error", () => {});
       } else {
-        // FIX 1: always set height (was missing in inactive branch)
-        // FIX 2: always provide url so WaveSurfer has an audio source to decode
-        //        peaks alone give shape but no duration/interaction without a url
-        ws = WaveSurfer.create({
-          container: containerRef.current!,
+        // Inactive: peaks-only, NO url, NO MediaElement — never touch global audio
+        const ws = WaveSurfer.create({
+          container: containerRef.current,
           waveColor: g,
           progressColor: pg,
           barWidth: 2,
           barGap: 0.5,
           barRadius: 2,
-          height: 80,           // ← FIX 1: was missing, caused 0px render
+          height: 80,
           interact: false,
-          peaks: hasPeaks ? [peaks] : undefined,
+          peaks: peaks.length > 0 ? [peaks] : undefined,
           duration: parsedDur > 0 ? parsedDur : undefined,
-          url: track.audioUrl,  // ← FIX 2: was `!hasPeaks ? track.audioUrl : undefined`
+          // ← NO url here: loading audio for display-only tracks hijacks the
+          //   global <audio> element and corrupts the active track's playhead
         });
 
-        ws.on("decode", (dur: number) => {
-          if (durRef.current) durRef.current.textContent = fmt(dur);
+        wsRef.current = ws;
+        ws.on("decode", (d: number) => {
+          if (durRef.current) durRef.current.textContent = fmt(d);
         });
+        ws.on("error", () => {});
       }
-
-      ws.on("error", () => { });
-      wsRef.current = ws;
     };
 
     initWaveform();
 
     return () => {
       isMounted = false;
-      try { if (ws) ws.destroy(); } catch { /* ok */ }
-      wsRef.current = null;
+      if (wsRef.current) {
+        try { wsRef.current.destroy(); } catch { /* ok */ }
+        wsRef.current = null;
+      }
     };
-  }, [isActive, track.id, track.audioUrl]);
+  }, [isActive, track.id, track.audioUrl]); // re-run when track or active state changes
 
   return (
     <div data-test="playlist-component-waveform" style={{ position: "relative", width: "100%" }}>
       <div style={{ position: "relative", cursor: isActive ? "pointer" : "default" }}>
-        {/* FIX 3: explicit height on the DOM node — WaveSurfer needs the container
-            to already have dimensions before it mounts, otherwise it collapses to 0px */}
         <div ref={containerRef} style={{ transform: "scaleY(-1)", height: 80 }} />
         <div style={{ position: "absolute", inset: 0, background: "rgba(255,255,255,0.08)", pointerEvents: "none", opacity: 0.5, borderRadius: 2 }} />
         <div ref={timeRef} style={{ position: "absolute", left: 0, top: "55%", transform: "translateY(-50%)", fontSize: 11, background: "rgba(0,0,0,0.75)", color: "#fff", padding: "2px", zIndex: 10 }}>0:00</div>
@@ -329,7 +328,8 @@ export default function PlaylistComponent({
   const { currentTrack, isPlaying, setTrack, togglePlay, addTracksNext, activeSourceId } = usePlayerStore();
   const { user } = useAuthStore();
 
-  const instanceId = useMemo(() => uniqueId ?? `playlist-instance-${Math.random().toString(36).substr(2, 9)}`, [uniqueId]);
+  const instanceIdRef = useRef(uniqueId ?? `playlist-instance-${Math.random().toString(36).substr(2, 9)}`);
+  const instanceId = uniqueId ?? instanceIdRef.current;
 
   const isOwner = !!user && user.username === playlist.creatorUsername;
 
@@ -424,8 +424,10 @@ export default function PlaylistComponent({
 
   const handleTrackPlay = (track: Track) => {
     if (currentTrack?.id === track.id && isComponentActive) {
+      // Same track, same playlist instance → just toggle
       togglePlay();
     } else {
+      // Different track OR different source → always start from 0
       setTrack(track, playlist.tracks, 0, instanceId);
     }
   };
diff --git a/src/components/playlist/PlaylistStatsWaveform.tsx b/src/components/playlist/PlaylistStatsWaveform.tsx
index 7e43e020..b600ddd7 100644
--- a/src/components/playlist/PlaylistStatsWaveform.tsx
+++ b/src/components/playlist/PlaylistStatsWaveform.tsx
@@ -1,10 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import WaveSurfer from "wavesurfer.js";
 import {
   formatDuration,
   type PlaylistDetails,
 } from "@/services/api/playlist/playlist.service";
 import { getTrackComments } from "@/services/mocks/Track.service";
-import TrackWaveform from "@/pages/[username]/[trackSlug]/components/TrackWaveform";
+import { audio, seekAudio, setGlobalWaveSurfer, setTrackLoadedLocally } from "@/services/audioService";
+import { getTrackWaveform } from "@/services/track.service";
 import type { Track } from "@/types/track";
 
 interface Comment {
@@ -21,6 +23,94 @@ interface PlaylistStatsCommentsProps {
   extraDurationSeconds?: number;
 }
 
+function fmt(sec: number) {
+  const m = Math.floor(sec / 60);
+  const s = Math.round(sec) % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+function StaticWaveform({ track, isActive }: { track: Track; isActive: boolean }) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const wsRef = useRef<WaveSurfer | null>(null);
+  const timeRef = useRef<HTMLDivElement | null>(null);
+  const durRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const init = async () => {
+      if (!containerRef.current) return;
+      if (wsRef.current) { try { wsRef.current.destroy(); } catch {} wsRef.current = null; }
+      containerRef.current.innerHTML = "";
+
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+
+      const g = ctx.createLinearGradient(0, 0, 0, 100);
+      g.addColorStop(0, "#656666"); g.addColorStop(0.7, "#656666");
+      g.addColorStop(0.71, "#ffffff"); g.addColorStop(0.72, "#ffffff");
+      g.addColorStop(0.73, "#B1B1B1"); g.addColorStop(1, "#B1B1B1");
+
+      const pg = ctx.createLinearGradient(0, 0, 0, 100);
+      pg.addColorStop(0, "#F6B094"); pg.addColorStop(0.7, "#F6B094");
+      pg.addColorStop(0.71, "#ffffff"); pg.addColorStop(0.72, "#ffffff");
+      pg.addColorStop(0.73, "#EB4926"); pg.addColorStop(1, "#EE772F");
+
+      const peaks = track.waveformData?.length > 0
+        ? track.waveformData
+        : await getTrackWaveform(track.id);
+      if (!isMounted || !containerRef.current) return;
+
+      let parsedDur = 0;
+      const parts = track.duration?.split(":");
+      if (parts?.length === 2) parsedDur = parseInt(parts[0]) * 60 + parseInt(parts[1]);
+
+      const ws = WaveSurfer.create({
+        container: containerRef.current,
+        waveColor: g,
+        progressColor: pg,
+        barWidth: 2, barGap: 1, barRadius: 2,
+        height: 80,
+        ...(isActive ? { backend: "MediaElement" as const, media: audio } : {}),
+        peaks: peaks.length > 0 ? [peaks] : undefined,
+        duration: parsedDur > 0 ? parsedDur : undefined,
+      });
+
+      wsRef.current = ws;
+
+      if (isActive) {
+        setTrackLoadedLocally(null);
+        setGlobalWaveSurfer(ws, track.id);
+        ws.on("interaction", (t: number) => seekAudio(t));
+        ws.on("timeupdate", (t: number) => {
+          if (timeRef.current) timeRef.current.textContent = fmt(t);
+        });
+      }
+
+      ws.on("decode", (d: number) => {
+        if (durRef.current) durRef.current.textContent = fmt(d);
+      });
+      ws.on("error", () => {});
+    };
+
+    init();
+    return () => {
+      isMounted = false;
+      if (wsRef.current) { try { wsRef.current.destroy(); } catch {} wsRef.current = null; }
+    };
+  }, [track.id, track.audioUrl, isActive]);
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: 80 }}>
+      <div ref={containerRef} style={{ transform: "scaleY(-1)", height: 80 }} />
+      <div style={{ position: "absolute", inset: 0, background: "rgba(255,255,255,0.08)", pointerEvents: "none", opacity: 0.5, borderRadius: 2 }} />
+      <div ref={timeRef} style={{ position: "absolute", left: 0, top: "55%", transform: "translateY(-50%)", fontSize: 11, background: "rgba(0,0,0,0.75)", color: "#fff", padding: "2px", zIndex: 10 }}>0:00</div>
+      <div ref={durRef} style={{ position: "absolute", right: 0, top: "55%", transform: "translateY(-50%)", fontSize: 11, background: "rgba(0,0,0,0.75)", color: "#fff", padding: "2px", zIndex: 10 }}>0:00</div>
+    </div>
+  );
+}
+
 export default function PlaylistStatsWaveform({
   playlist,
   isPlaying = false,
@@ -73,7 +163,6 @@ export default function PlaylistStatsWaveform({
         setComments([]);
         return;
       }
-
       try {
         const res = await getTrackComments(activeTrackId);
         const raw = Array.isArray(res) ? res : ((res as any)?.data ?? []);
@@ -87,7 +176,6 @@ export default function PlaylistStatsWaveform({
             timestamp: Number(item?.timestamp ?? item?.timestampSec ?? 0),
           }))
           .slice(0, 5);
-
         if (!cancelled) setComments(mapped);
       } catch {
         if (!cancelled) setComments([]);
@@ -95,9 +183,7 @@ export default function PlaylistStatsWaveform({
     }
 
     loadComments();
-    return () => {
-      cancelled = true;
-    };
+    return () => { cancelled = true; };
   }, [activeTrackId, commentsProp, showComments]);
 
   return (
@@ -107,11 +193,12 @@ export default function PlaylistStatsWaveform({
           <div
             data-test="playlist-waveform-container"
             className="transition-opacity duration-150 w-full min-w-0"
-            style={{ minHeight: "120px" }}
+            style={{ minHeight: "80px" }}
           >
-            <TrackWaveform
+            <StaticWaveform
               key={`${playlist.playlist_id}-${waveformTrack.id}`}
               track={waveformTrack}
+              isActive={isPlaying && hasActiveTrackInPlaylist}
             />
           </div>
         </div>
@@ -152,4 +239,4 @@ export default function PlaylistStatsWaveform({
       )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/[username]/[trackSlug]/components/TrackWaveform.tsx b/src/pages/[username]/[trackSlug]/components/TrackWaveform.tsx
index 40c07bce..2b53cfc2 100644
--- a/src/pages/[username]/[trackSlug]/components/TrackWaveform.tsx
+++ b/src/pages/[username]/[trackSlug]/components/TrackWaveform.tsx
@@ -11,6 +11,7 @@ import {
   audio,
   seekAudio,
   setGlobalWaveSurfer,
+  setTrackLoadedLocally,
 } from "../../../../services/audioService";
 import { getTrackWaveform } from "../../../../services/track.service";
 import { usePlayerStore } from "../../../../stores/player.store";
@@ -41,132 +42,136 @@ const TrackWaveform = forwardRef<
     },
   }));
 
-  useEffect(() => {
-    let ws: WaveSurfer | null = null;
-    let isMounted = true;
-
-    const initWaveform = async () => {
-      if (!waveformRef.current) return;
-
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-
-      const gradient = ctx.createLinearGradient(0, 0, 0, 100);
-      gradient.addColorStop(0, "#656666");
-      gradient.addColorStop(0.7, "#656666");
-      gradient.addColorStop(0.71, "#ffffff");
-      gradient.addColorStop(0.72, "#ffffff");
-      gradient.addColorStop(0.73, "#B1B1B1");
-      gradient.addColorStop(1, "#B1B1B1");
-
-      const progressGradient = ctx.createLinearGradient(0, 0, 0, 100);
-      progressGradient.addColorStop(0, "#F6B094");
-      progressGradient.addColorStop(0.7, "#F6B094");
-      progressGradient.addColorStop(0.71, "#ffffff");
-      progressGradient.addColorStop(0.72, "#ffffff");
-      progressGradient.addColorStop(0.73, "#EB4926");
-      progressGradient.addColorStop(1, "#EE772F");
-
-      const peaks =
-        Array.isArray(track.waveformData) && track.waveformData.length > 0
-          ? track.waveformData
-          : await getTrackWaveform(track.id);
-      if (!isMounted) return;
-
-      let parsedDur = 0;
-      if (track.duration && typeof track.duration === "string") {
-        const parts = track.duration.split(":");
-        if (parts.length === 2) {
-          parsedDur = parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
-        }
-      }
-
-      // FIX: always use MediaElement backend tied to the shared audio element.
-      // Never pass `url` here — that makes WaveSurfer own a second audio source
-      // which conflicts with the global player.
-      ws = WaveSurfer.create({
-        container: waveformRef.current,
-        waveColor: gradient,
-        progressColor: progressGradient,
-        barWidth: 2,
-        barGap: 1,
-        barRadius: 2,
-        backend: "MediaElement",
-        media: audio,
-        peaks: peaks.length > 0 ? [peaks] : undefined,
-        duration: parsedDur > 0 ? parsedDur : undefined,
-        // FIX: do NOT pass `url` — it causes WaveSurfer to load a second audio
-        // context that fights the global <audio> element owned by audioService.
-      });
 
-      waveSurferRef.current = ws;
-
-      // FIX: only register as the global waveform if this track is ALREADY the
-      // active track in the player. If another track is playing (e.g. user came
-      // from the feed) we must NOT steal the global reference — that would break
-      // the currently-playing TrackCard waveform.
-      const playerState = usePlayerStore.getState();
-      if (
-        !playerState.currentTrack ||
-        playerState.currentTrack.id === track.id
-      ) {
-        setGlobalWaveSurfer(ws, track.id);
-      }
-
-      const formatTime = (seconds: number) => {
-        const minutes = Math.floor(seconds / 60);
-        const sec = Math.round(seconds) % 60;
-        return `${minutes}:${sec.toString().padStart(2, "0")}`;
-      };
+    const isInitializedRef = useRef(false);
+
+    useEffect(() => {
+      let isMounted = true;
+      isInitializedRef.current = false;
 
-      ws.on("decode", (duration) => {
-        if (durationRef.current) {
-          durationRef.current.textContent = formatTime(duration);
+      const initWaveform = async () => {
+        if (!waveformRef.current || isInitializedRef.current) return;
+        isInitializedRef.current = true;
+
+        if (waveSurferRef.current) {
+          try { waveSurferRef.current.destroy(); } catch { /* ok */ }
+          waveSurferRef.current = null;
+        }
+        waveformRef.current.innerHTML = "";
+
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+
+        const gradient = ctx.createLinearGradient(0, 0, 0, 100);
+        gradient.addColorStop(0, "#656666");
+        gradient.addColorStop(0.7, "#656666");
+        gradient.addColorStop(0.71, "#ffffff");
+        gradient.addColorStop(0.72, "#ffffff");
+        gradient.addColorStop(0.73, "#B1B1B1");
+        gradient.addColorStop(1, "#B1B1B1");
+
+        const progressGradient = ctx.createLinearGradient(0, 0, 0, 100);
+        progressGradient.addColorStop(0, "#F6B094");
+        progressGradient.addColorStop(0.7, "#F6B094");
+        progressGradient.addColorStop(0.71, "#ffffff");
+        progressGradient.addColorStop(0.72, "#ffffff");
+        progressGradient.addColorStop(0.73, "#EB4926");
+        progressGradient.addColorStop(1, "#EE772F");
+
+        const peaks =
+          Array.isArray(track.waveformData) && track.waveformData.length > 0
+            ? track.waveformData
+            : await getTrackWaveform(track.id);
+
+        if (!isMounted || !waveformRef.current) return;
+
+        let parsedDur = 0;
+        if (track.duration && typeof track.duration === "string") {
+          const parts = track.duration.split(":");
+          if (parts.length === 2) {
+            parsedDur = parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
+          }
         }
-      });
 
-      ws.on("timeupdate", (currentTime) => {
-        if (timeRef.current) {
-          timeRef.current.textContent = formatTime(currentTime);
+        const playerState = usePlayerStore.getState();
+        const isThisTrackActive =
+          !playerState.currentTrack || playerState.currentTrack.id === track.id;
+
+        const ws = WaveSurfer.create({
+          container: waveformRef.current,
+          waveColor: gradient,
+          progressColor: progressGradient,
+          barWidth: 2,
+          barGap: 1,
+          barRadius: 2,
+          ...(isThisTrackActive
+            ? { backend: "MediaElement" as const, media: audio }
+            : {}),
+          peaks: peaks.length > 0 ? [peaks] : undefined,
+          duration: parsedDur > 0 ? parsedDur : undefined,
+        });
+
+        waveSurferRef.current = ws;
+
+        if (isThisTrackActive) {
+          setTrackLoadedLocally(null);
+          setGlobalWaveSurfer(ws, track.id);
         }
-      });
 
-      // FIX: on waveform click, only seek — never call ws.play() or audio.play().
-      // Playback is controlled exclusively by the store → audioService pipeline.
-      // WaveSurfer's built-in "interaction" event fires before our onClick, so we
-      // suppress it here and let the div's onClick bubble up to onPlayPause.
-      ws.on("interaction", (newTime: number) => {
-        lastInteractionTimeRef.current = newTime;
-        seekAudio(newTime);
-      });
+        const formatTime = (seconds: number) => {
+          const minutes = Math.floor(seconds / 60);
+          const sec = Math.round(seconds) % 60;
+          return `${minutes}:${sec.toString().padStart(2, "0")}`;
+        };
+
+        ws.on("decode", (duration) => {
+          if (durationRef.current) durationRef.current.textContent = formatTime(duration);
+        });
+        ws.on("timeupdate", (currentTime) => {
+          if (timeRef.current) timeRef.current.textContent = formatTime(currentTime);
+        });
+        ws.on("interaction", (newTime: number) => {
+          lastInteractionTimeRef.current = newTime;
+          seekAudio(newTime);
+        });
+        ws.on("error", () => {});
+      };
 
-      ws.on("error", () => {});
-    };
+      initWaveform();
 
-    initWaveform();
+      const unsubscribe = usePlayerStore.subscribe((state, prev) => {
+        const justBecameActive =
+          state.currentTrack?.id === track.id &&
+          prev.currentTrack?.id !== track.id &&
+          prev.currentTrack !== undefined;
 
-    return () => {
-      isMounted = false;
-      if (ws) {
-        try {
-          ws.destroy();
-        } catch {
-          /* ok */
+        if (justBecameActive) {
+          isInitializedRef.current = false; // allow re-init
+          initWaveform();
         }
-      }
-      waveSurferRef.current = null;
-    };
-  }, [track.audioUrl, track.id]);
+      });
 
+      return () => {
+        isMounted = false;
+        unsubscribe();
+        if (waveSurferRef.current) {
+          try { waveSurferRef.current.destroy(); } catch { /* ok */ }
+          waveSurferRef.current = null;
+        }
+      };
+    }, [track.audioUrl, track.id]);
   return (
     <div data-test="track-waveform-component">
       <div
         data-test="track-waveform-interactive-area"
         style={{ position: "relative", cursor: "pointer", width: "100%" }}
         onClick={() => {
-          onPlayPause?.(lastInteractionTimeRef.current ?? undefined);
-          lastInteractionTimeRef.current = null;
+          if (lastInteractionTimeRef.current !== null) {
+            lastInteractionTimeRef.current = null;
+            return;
+          }
+          onPlayPause?.();
         }}
         onMouseEnter={() => setIsHover(true)}
         onMouseLeave={() => setIsHover(false)}
diff --git a/src/pages/you/sets/PlaylistSlugPage.tsx b/src/pages/you/sets/PlaylistSlugPage.tsx
index 0081649e..ce9dfaf0 100644
--- a/src/pages/you/sets/PlaylistSlugPage.tsx
+++ b/src/pages/you/sets/PlaylistSlugPage.tsx
@@ -68,6 +68,7 @@ function PlaylistSlugPage() {
             return {
               ...track,
               play_count: fullTrack?.playCount ?? track.play_count ?? 0,
+              audio_url: fullTrack?.audioUrl ?? track.audio_url ?? "",
             };
           }),
         );
@@ -122,60 +123,39 @@ function PlaylistSlugPage() {
     isPrivate: !track.is_public,
   });
 
+  const isPlaylistActive =
+  isPlaying &&
+  !!playlist &&
+  playlist.tracks.some((track) => track.track_id === currentTrack?.id);
+
   const handleHeroPlayPause = () => {
     if (!playlist || !playlist.tracks.length) return;
-
     const firstTrack = playlist.tracks[0];
     const playerTrack = toPlayerTrack(firstTrack);
     const queue = playlist.tracks.map(toPlayerTrack);
-    const isThisPlaylistPlaying =
-      (currentTrack as any)?.context?.playlist_id === playlist.playlist_id;
 
-    if (isThisPlaylistPlaying) {
+    if (isPlaylistActive) {
       togglePlay();
       return;
     }
-
-    setPlayerTrack(
-      {
-        ...playerTrack,
-        context: {
-          type: "playlist",
-          playlist_id: playlist.playlist_id,
-          queue: playlist.tracks.map((t) => t.track_id),
-        },
-      } as any,
-      queue,
-    );
+    setPlayerTrack(playerTrack, queue);
   };
 
   const handleTrackPlay = (track: PlaylistTrackItem) => {
     const playerTrack = toPlayerTrack(track);
     const queue = playlist?.tracks.map(toPlayerTrack) ?? [];
-    const playlistContext = {
-      type: "playlist",
-      playlist_id: playlist?.playlist_id,
-      queue: playlist?.tracks.map((t) => t.track_id) ?? [],
-    };
 
-    if (currentTrack?.id === playerTrack.id) {
+    const isThisTrackFromThisPlaylist =
+      currentTrack?.id === playerTrack.id && isPlaylistActive;
+
+    if (isThisTrackFromThisPlaylist) {
       togglePlay();
       return;
     }
 
-    setPlayerTrack(
-      {
-        ...playerTrack,
-        context: playlistContext,
-      } as any,
-      queue,
-    );
+    setPlayerTrack(playerTrack, queue);
   };
 
-  const isPlaylistActive =
-    isPlaying &&
-    !!playlist &&
-    playlist.tracks.some((track) => track.track_id === currentTrack?.id);
 
   const handleCoverUpload = async (file: File) => {
     if (!playlist) return;
diff --git a/src/services/audioService.ts b/src/services/audioService.ts
index cf9a9a67..bf3e7338 100644
--- a/src/services/audioService.ts
+++ b/src/services/audioService.ts
@@ -88,48 +88,45 @@ export function setTrackLoadedLocally(trackId: string | null) {
 // Wire store -> audio directly via subscribe (no React, no useEffect)
 usePlayerStore.subscribe((state, prev) => {
 
-  // New track 
-  // Only fires when the track id genuinely changes (not a same-track seek).
-  if (state.currentTrack && state.currentTrack.id !== loadedAudioTrackId) {
-    // Kill the old WaveSurfer instance synchronously before we change audio.src.
-    // ONLY if the global instance belongs to a different track.
-    if (globalWaveSurfer && globalWaveSurferTrackId !== state.currentTrack.id) {
-      try {
-        globalWaveSurfer.destroy();
-      } catch (e) {
-        // Ignore destruction errors
-      }
-      globalWaveSurfer = null;
-      globalWaveSurferTrackId = null;
-    }
 
-    loadedAudioTrackId = state.currentTrack.id;
-    const targetTime = state.currentTime;
+    if (state.currentTrack && state.currentTrack.id !== loadedAudioTrackId) {
+        if (globalWaveSurfer && globalWaveSurferTrackId !== state.currentTrack.id) {
+          try { globalWaveSurfer.destroy(); } catch (e) {}
+          globalWaveSurfer = null;
+          globalWaveSurferTrackId = null;
+        }
 
-    audio.pause();
-    audio.src = state.currentTrack.audioUrl;
-    audio.load();
+        loadedAudioTrackId = state.currentTrack.id;
+        const targetTime = state.currentTime;
+
+        audio.pause();
+        // Only set src if audio doesn't already have this track loaded
+        // (WaveSurfer may have already set it via the media backend)
+        if (!audio.src || !audio.src.includes(state.currentTrack.audioUrl)) {
+          audio.src = state.currentTrack.audioUrl;
+          audio.load();
+        }
 
     // Seek to the preserved position once metadata is ready.
-    const onLoaded = () => {
-      if (targetTime > 0) {
-        audio.currentTime = targetTime;
+      const onLoaded = () => {
+          if (targetTime > 0) {
+            audio.currentTime = targetTime;
+          }
+          audio.removeEventListener("loadedmetadata", onLoaded);
+        };
+
+        if (audio.readyState >= 1) {
+          onLoaded();
+        } else {
+          audio.addEventListener("loadedmetadata", onLoaded);
+        }
+
+        if (state.isPlaying) {
+          notifyOtherTabs();
+          audio.play().catch(() => {});
+        }
+        return;
       }
-      audio.removeEventListener("loadedmetadata", onLoaded);
-    };
-
-    if (audio.readyState >= 1) {
-      onLoaded();
-    } else {
-      audio.addEventListener("loadedmetadata", onLoaded);
-    }
-
-    if (state.isPlaying) {
-      notifyOtherTabs();
-      audio.play().catch(() => { });
-    }
-    return;
-  }
 
   if (state.isPlaying !== prev.isPlaying) {
     if (state.isPlaying) {
@@ -184,8 +181,15 @@ audio.addEventListener("ended", () => {
  * Sets audio.currentTime directly and marks a seek as in-progress so the
  * store subscriber won't fire audio.play() and interrupt the operation.
  */
+
 export function seekAudio(time: number) {
   markSeekInProgress();
-  audio.currentTime = time;
-  usePlayerStore.getState().seekTo(time);
-}
\ No newline at end of file
+  if (globalWaveSurfer && globalWaveSurferTrackId === usePlayerStore.getState().currentTrack?.id) {
+    globalWaveSurfer.setTime(time);
+  } else {
+    audio.currentTime = time;
+  }
+  // Don't call seekTo — it pollutes the store and causes isPlaying side effects
+}
+
+(window as any).__seekAudio = seekAudio;
\ No newline at end of file
diff --git a/src/stores/player.store.ts b/src/stores/player.store.ts
index 1db2ce97..495d80e6 100644
--- a/src/stores/player.store.ts
+++ b/src/stores/player.store.ts
@@ -7,26 +7,22 @@ import { savePlayerState, getPlayerState } from "../services/api/playback.servic
 // Debounced helper to avoid spamming the backend
 let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 function debouncedSave(userId: string, state: PlayerState) {
+  if (!state.currentTrack?.id) return;
   if (saveTimeout) clearTimeout(saveTimeout);
   saveTimeout = setTimeout(() => {
     savePlayerState({
       trackId: state.currentTrack?.id,
       positionSeconds: state.currentTime,
       volume: state.volume,
-      queue: state.queue.map((t) => t.id),
+      queue: state.queue
+        .filter((t) => t?.id != null)
+        .map((t) => t.id),
     });
   }, 2000);
 }
 
-// Dynamic import for audioService to avoid circular dependencies
-let _seekAudio: ((time: number) => void) | null = null;
-function getSeekAudio() {
-  if (!_seekAudio) {
-    import("../services/audioService").then((m) => {
-      _seekAudio = m.seekAudio;
-    });
-  }
-  return _seekAudio;
+function getSeekAudio(): (time: number) => void {
+  return (window as any).__seekAudio;
 }
 
 interface PlayerState {
@@ -146,20 +142,22 @@ export const usePlayerStore = create<PlayerState>()(
           
           if (res && res.queue) {
             // Map backend queue format to frontend Track[]
-            const mappedQueue = res.queue.map(q => ({
-               id: q.track_id || q.id,
-               title: q.track_title || q.title || "Unknown Title",
-               artistName: q.artist_name || q.artistName || "Unknown Artist",
-               artistUsername: q.artist_username || q.username || q.artistUsername || "unknown",
-               audioUrl: q.stream_url || q.audioUrl || "",
-               coverUrl: q.cover_image || q.coverUrl || "",
-               duration: String(q.duration || 0),
-               waveformData: q.waveformData || [],
-               playCount: q.playCount || 0,
-               likeCount: q.likeCount || 0,
-               repostCount: q.repostCount || 0,
-               commentCount: q.commentCount || 0,
-            } as Track));
+              const mappedQueue = res.queue
+                .filter((q: any) => q != null && (q.track_id || q.id))
+                .map((q: any) => ({
+                    id: q.track_id || q.id,
+                    title: q.track_title || q.title || "Unknown Title",
+                    artistName: q.artist_name || q.artistName || "Unknown Artist",
+                    artistUsername: q.artist_username || q.username || q.artistUsername || "unknown",
+                    audioUrl: q.stream_url || q.audioUrl || "",
+                    coverUrl: q.cover_image || q.coverUrl || "",
+                    duration: String(q.duration || 0),
+                    waveformData: q.waveformData || [],
+                    playCount: q.playCount || 0,
+                    likeCount: q.likeCount || 0,
+                    repostCount: q.repostCount || 0,
+                    commentCount: q.commentCount || 0,
+                  } as Track));
             
             const qIndex = mappedQueue.findIndex(t => String(t.id) === String(fallbackTrack.id));
             
@@ -237,13 +235,9 @@ export const usePlayerStore = create<PlayerState>()(
         });
       },
 
+      // ✅ Replace with
       seek: (time) => {
-        const seekFn = getSeekAudio();
-        if (seekFn) {
-          seekFn(time);
-        } else {
-          set({ currentTime: time });
-        }
+        getSeekAudio()?.(time);
       },
 
       seekTo: (time) => {

From 7305ea567eef256a1067897728f64236789f2b3d Mon Sep 17 00:00:00 2001
From: basboosa05 <166862890+basboosa05@users.noreply.github.com>
Date: Sat, 2 May 2026 18:42:24 +0300
Subject: [PATCH 2/3] mini player bar fixed

---
 src/services/audioService.ts | 20 ++++++++++----------
 src/stores/player.store.ts   | 18 +++++++++++++++---
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/services/audioService.ts b/src/services/audioService.ts
index bf3e7338..7477eb2e 100644
--- a/src/services/audioService.ts
+++ b/src/services/audioService.ts
@@ -100,9 +100,7 @@ usePlayerStore.subscribe((state, prev) => {
         const targetTime = state.currentTime;
 
         audio.pause();
-        // Only set src if audio doesn't already have this track loaded
-        // (WaveSurfer may have already set it via the media backend)
-        if (!audio.src || !audio.src.includes(state.currentTrack.audioUrl)) {
+        if (!audio.src || audio.src === window.location.href || !audio.src.includes(state.currentTrack.audioUrl)) {
           audio.src = state.currentTrack.audioUrl;
           audio.load();
         }
@@ -129,15 +127,17 @@ usePlayerStore.subscribe((state, prev) => {
       }
 
   if (state.isPlaying !== prev.isPlaying) {
-    if (state.isPlaying) {
-      notifyOtherTabs();
-      if (!seekInProgress) {
-        audio.play().catch(() => { });
+      if (state.isPlaying) {
+        notifyOtherTabs();
+        if (!seekInProgress) {
+          audio.play().catch(() => { });
+        } else {
+          setTimeout(() => audio.play().catch(() => {}), 350);
+        }
+      } else {
+        audio.pause();
       }
-    } else {
-      audio.pause();
     }
-  }
 
   // Removed the automatic same-track restart heuristic because it conflicted with WaveSurfer
   // seeks and buffering, causing tracks to spontaneously repeat or jump to 0:00.
diff --git a/src/stores/player.store.ts b/src/stores/player.store.ts
index 495d80e6..91de760d 100644
--- a/src/stores/player.store.ts
+++ b/src/stores/player.store.ts
@@ -348,13 +348,25 @@ export const usePlayerStore = create<PlayerState>()(
             currentTime: backendState.position_seconds || 0,
             duration: backendState.duration || Number(fullTrack.duration) || 0,
             volume: backendState.volume ?? 1,
-            isPlaying: false,
-          });
+           isPlaying: false,
+      });
+
+      const { audio, setTrackLoadedLocally } = await import("../services/audioService");
+      const time = backendState.position_seconds || 0;
+          audio.src = fullTrack.audioUrl;
+          audio.load();
+          if (time > 0) {
+            audio.addEventListener("loadedmetadata", () => {
+              audio.currentTime = time;
+            }, { once: true });
+          }
+          setTrackLoadedLocally(fullTrack.id);
+
         } catch (e) {
           console.error("Failed to rehydrate player from backend", e);
         }
       },
-    }),
+      }),
     {
       name: "rythmify-player-storage",
       version: 1,

From 4f7492e8600e057a879643bd33dd629898b44704 Mon Sep 17 00:00:00 2001
From: basboosa05 <166862890+basboosa05@users.noreply.github.com>
Date: Sat, 2 May 2026 19:12:12 +0300
Subject: [PATCH 3/3] fix pipeline issue

---
 src/components/playlist/PlaylistStatsWaveform.tsx | 4 ++--
 src/services/audioService.ts                      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/playlist/PlaylistStatsWaveform.tsx b/src/components/playlist/PlaylistStatsWaveform.tsx
index b600ddd7..e1381040 100644
--- a/src/components/playlist/PlaylistStatsWaveform.tsx
+++ b/src/components/playlist/PlaylistStatsWaveform.tsx
@@ -40,7 +40,7 @@ function StaticWaveform({ track, isActive }: { track: Track; isActive: boolean }
 
     const init = async () => {
       if (!containerRef.current) return;
-      if (wsRef.current) { try { wsRef.current.destroy(); } catch {} wsRef.current = null; }
+      if (wsRef.current) { try { wsRef.current.destroy(); } catch (e) { /* ignore */ } wsRef.current = null; }
       containerRef.current.innerHTML = "";
 
       const canvas = document.createElement("canvas");
@@ -97,7 +97,7 @@ function StaticWaveform({ track, isActive }: { track: Track; isActive: boolean }
     init();
     return () => {
       isMounted = false;
-      if (wsRef.current) { try { wsRef.current.destroy(); } catch {} wsRef.current = null; }
+      if (wsRef.current) { try { wsRef.current.destroy(); } catch (e) { /* ignore */ } wsRef.current = null; }
     };
   }, [track.id, track.audioUrl, isActive]);
 
diff --git a/src/services/audioService.ts b/src/services/audioService.ts
index c85afd57..1b2d2f29 100644
--- a/src/services/audioService.ts
+++ b/src/services/audioService.ts
@@ -91,7 +91,7 @@ usePlayerStore.subscribe((state, prev) => {
 
     if (state.currentTrack && state.currentTrack.id !== loadedAudioTrackId) {
         if (globalWaveSurfer && globalWaveSurferTrackId !== state.currentTrack.id) {
-          try { globalWaveSurfer.destroy(); } catch (e) {}
+          try { globalWaveSurfer.destroy(); } catch (e) { /* ignore */ }
           globalWaveSurfer = null;
           globalWaveSurferTrackId = null;
         }