v7.1.6

frontend/src/hooks/usePreview.ts

@@ -1,32 +1,34 @@
-import { useState, useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import { GetPreviewURL } from "@/../wailsjs/go/main/App";
-import { SPOTIFY_PREVIEW_VOLUME } from "@/lib/preview";
+import { getPreviewVolume } from "@/lib/preview";
+import { createPreviewPlayback, type PreviewPlayback } from "@/lib/preview-player";
 import { toast } from "sonner";
 export function usePreview() {
     const [loadingPreview, setLoadingPreview] = useState<string | null>(null);
-    const [currentAudio, setCurrentAudio] = useState<HTMLAudioElement | null>(null);
     const [playingTrack, setPlayingTrack] = useState<string | null>(null);
+    const currentPlaybackRef = useRef<PreviewPlayback | null>(null);
+    const stopCurrentAudio = () => {
+        if (!currentPlaybackRef.current) {
+            return;
+        }
+        currentPlaybackRef.current.destroy();
+        currentPlaybackRef.current = null;
+    };
     useEffect(() => {
         return () => {
-            if (currentAudio) {
-                currentAudio.pause();
-                currentAudio.currentTime = 0;
-            }
+            stopCurrentAudio();
         };
-    }, [currentAudio]);
+    }, []);
     const playPreview = async (trackId: string, trackName: string) => {
         try {
+            const currentAudio = currentPlaybackRef.current?.audio;
             if (playingTrack === trackId && currentAudio) {
-                currentAudio.pause();
-                currentAudio.currentTime = 0;
+                stopCurrentAudio();
                 setPlayingTrack(null);
-                setCurrentAudio(null);
                 return;
             }
             if (currentAudio) {
-                currentAudio.pause();
-                currentAudio.currentTime = 0;
-                setCurrentAudio(null);
+                stopCurrentAudio();
                 setPlayingTrack(null);
             }
             setLoadingPreview(trackId);
@@ -38,15 +40,18 @@ export function usePreview() {
                 setLoadingPreview(null);
                 return;
             }
-            const audio = new Audio(previewURL);
-            audio.volume = SPOTIFY_PREVIEW_VOLUME;
+            const playback = await createPreviewPlayback(previewURL, getPreviewVolume());
+            const audio = playback.audio;
             audio.addEventListener("loadeddata", () => {
                 setLoadingPreview(null);
                 setPlayingTrack(trackId);
             });
             audio.addEventListener("ended", () => {
                 setPlayingTrack(null);
-                setCurrentAudio(null);
+                if (currentPlaybackRef.current?.audio === audio) {
+                    currentPlaybackRef.current.destroy();
+                    currentPlaybackRef.current = null;
+                }
             });
             audio.addEventListener("error", () => {
                 toast.error("Failed to play preview", {
@@ -54,27 +59,27 @@ export function usePreview() {
                 });
                 setLoadingPreview(null);
                 setPlayingTrack(null);
-                setCurrentAudio(null);
+                if (currentPlaybackRef.current?.audio === audio) {
+                    currentPlaybackRef.current.destroy();
+                    currentPlaybackRef.current = null;
+                }
             });
-            setCurrentAudio(audio);
+            currentPlaybackRef.current = playback;
             await audio.play();
         }
-        catch (error: any) {
+        catch (error: unknown) {
+            stopCurrentAudio();
             console.error("Preview error:", error);
             toast.error("Preview not available", {
-                description: error?.message || `Could not load preview for "${trackName}"`,
+                description: error instanceof Error ? error.message : `Could not load preview for "${trackName}"`,
             });
             setLoadingPreview(null);
             setPlayingTrack(null);
         }
     };
     const stopPreview = () => {
-        if (currentAudio) {
-            currentAudio.pause();
-            currentAudio.currentTime = 0;
-            setCurrentAudio(null);
-            setPlayingTrack(null);
-        }
+        stopCurrentAudio();
+        setPlayingTrack(null);
     };
     return {
         playPreview,