feat: add ultra-minimized view and toggle functionality in MusicPlayer

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"

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
@@ -91,19 +94,7 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) {
     const fetchInitialState = async () => {
       try {
         const response = await apiService.get('/api/player/state')
-        let state = await response.json()
+        const state = await response.json()
-        
-        // If no playlist is loaded, try to load the main playlist
-        if (!state.playlist_id) {
-          try {
-            await apiService.post('/api/player/load-main-playlist')
-            // Fetch state again after loading main playlist
-            const newResponse = await apiService.get('/api/player/state')
-            state = await newResponse.json()
-          } catch (loadError) {
-            console.warn('Failed to load main playlist:', loadError)
-          }
-        }
         
         // Update all state from backend
         setIsPlaying(state.is_playing || false)
@@ -266,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 = () => {
@@ -288,6 +287,7 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) {
     
     // UI state
     isMinimized,
+    isUltraMinimized,
     showPlaylist,
     
     // Actions
@@ -307,6 +307,7 @@ export function MusicPlayerProvider({ children }: MusicPlayerProviderProps) {
     removeFromPlaylist,
     clearPlaylist,
     toggleMaximize,
+    toggleUltraMinimize,
     togglePlaylistVisibility,
   }