From 30317b7617191287b54d5eb85d8443d885fc646e Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Tue, 8 Jul 2025 11:01:35 +0200
Subject: [PATCH] feat: add ultra-minimized view and toggle functionality in
 MusicPlayer

---
 src/components/MusicPlayer.tsx      | 38 +++++++++++++++++++++++++++--
 src/contexts/MusicPlayerContext.tsx | 13 ++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/components/MusicPlayer.tsx b/src/components/MusicPlayer.tsx
index 70cda77..ad21a89 100644
--- a/src/components/MusicPlayer.tsx
+++ b/src/components/MusicPlayer.tsx
@@ -16,7 +16,8 @@ import {
   Shuffle,
   List,
   Maximize2,
-  Minimize2
+  Minimize2,
+  Minus
 } from 'lucide-react'
 
 export function MusicPlayer() {
@@ -31,6 +32,7 @@ export function MusicPlayer() {
     playlist,
     currentTrackIndex,
     isMinimized,
+    isUltraMinimized,
     showPlaylist,
     togglePlayPause,
     stop,
@@ -42,6 +44,7 @@ export function MusicPlayer() {
     setPlayMode,
     playTrack,
     toggleMaximize,
+    toggleUltraMinimize,
     togglePlaylistVisibility,
   } = useMusicPlayer()
 
@@ -95,6 +98,28 @@ export function MusicPlayer() {
 
   const progressPercentage = (currentTime / duration) * 100
 
+  // Ultra-minimized view - only essential controls
+  if (isUltraMinimized) {
+    return (
+      <Card className="fixed bottom-4 right-4 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border shadow-lg z-50">
+        <div className="p-3 flex items-center space-x-2">
+          <Button variant="ghost" size="sm" onClick={previousTrack}>
+            <SkipBack className="h-4 w-4" />
+          </Button>
+          <Button variant="default" size="sm" onClick={togglePlayPause}>
+            {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+          </Button>
+          <Button variant="ghost" size="sm" onClick={nextTrack}>
+            <SkipForward className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="sm" onClick={toggleUltraMinimize}>
+            <Maximize2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </Card>
+    )
+  }
+
   if (isMinimized) {
     return (
       <Card className="fixed bottom-4 right-4 w-80 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border shadow-lg z-50">
@@ -106,7 +131,16 @@ export function MusicPlayer() {
               alt={currentTrack.title}
               className="h-full w-full object-cover"
             />
-            <div className="absolute top-2 right-2">
+            <div className="absolute top-2 right-2 flex space-x-1">
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={toggleUltraMinimize}
+                className="h-8 w-8 p-0 bg-black/50 hover:bg-black/70"
+                title="Minimize to controls only"
+              >
+                <Minus className="h-4 w-4" />
+              </Button>
               <Button
                 variant="secondary"
                 size="sm"
diff --git a/src/contexts/MusicPlayerContext.tsx b/src/contexts/MusicPlayerContext.tsx
index 17eef3b..2051813 100644
--- a/src/contexts/MusicPlayerContext.tsx
+++ b/src/contexts/MusicPlayerContext.tsx
@@ -29,6 +29,7 @@ interface MusicPlayerContextType {
   
   // UI state
   isMinimized: boolean
+  isUltraMinimized: boolean
   showPlaylist: boolean
   
   // Actions
@@ -48,6 +49,7 @@ interface MusicPlayerContextType {
   removeFromPlaylist: (trackId: string) => void
   clearPlaylist: () => void
   toggleMaximize: () => void
+  toggleUltraMinimize: () => void
   togglePlaylistVisibility: () => void
 }
 
@@ -84,6 +86,7 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) {
   
   // UI state
   const [isMinimized, setIsMinimized] = useState(true)
+  const [isUltraMinimized, setIsUltraMinimized] = useState(false)
   const [showPlaylist, setShowPlaylist] = useState(false)
 
   // Fetch initial player state on mount
@@ -254,6 +257,14 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) {
 
   const toggleMaximize = () => {
     setIsMinimized(!isMinimized)
+    setIsUltraMinimized(false)  // When maximizing, exit ultra-minimize mode
+  }
+
+  const toggleUltraMinimize = () => {
+    setIsUltraMinimized(!isUltraMinimized)
+    if (!isUltraMinimized) {
+      setIsMinimized(true)  // When ultra-minimizing, ensure we're in minimized mode
+    }
   }
 
   const togglePlaylistVisibility = () => {
@@ -276,6 +287,7 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) {
     
     // UI state
     isMinimized,
+    isUltraMinimized,
     showPlaylist,
     
     // Actions
@@ -295,6 +307,7 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) {
     removeFromPlaylist,
     clearPlaylist,
     toggleMaximize,
+    toggleUltraMinimize,
     togglePlaylistVisibility,
   }