Initial release v1.0.0

frontend/hooks/usePlayerMode.ts

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { useAudio } from "@/lib/audio-context";
+
+/**
+ * Hook that automatically switches player mode based on the current page
+ * - Full player: On media pages (album, audiobook, podcast)
+ * - Mini player: On other pages
+ * - Overlay: Manual user control (doesn't auto-switch)
+ */
+export function usePlayerMode() {
+    const pathname = usePathname();
+    const { currentTrack, currentAudiobook, currentPodcast, playerMode, setPlayerMode } = useAudio();
+
+    useEffect(() => {
+        // Don't auto-switch if in overlay mode (user manually opened it)
+        if (playerMode === "overlay") return;
+
+        // Don't auto-switch if no media is playing
+        if (!currentTrack && !currentAudiobook && !currentPodcast) return;
+
+        // Determine if we're on the EXACT page where the current media is playing
+        const isOnCurrentMediaPage =
+            (currentTrack && pathname === `/album/${currentTrack.album?.id}`) ||
+            (currentAudiobook && pathname === `/audiobooks/${currentAudiobook.id}`) ||
+            (currentPodcast && pathname.includes(`/podcasts/${currentPodcast.id}`));
+
+        // Auto-expand to full when on the current media page
+        // But don't auto-minimize - let users keep it expanded if they want
+        if (isOnCurrentMediaPage && playerMode === "mini") {
+            setPlayerMode("full");
+        }
+    }, [
+        pathname,
+        currentTrack,
+        currentAudiobook,
+        currentPodcast,
+        playerMode,
+        setPlayerMode,
+    ]);
+}