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 ( + + + + + + + {isPlaying ? : } + + + + + + + + + + ) + } + if (isMinimized) { return ( @@ -106,7 +131,16 @@ export function MusicPlayer() { alt={currentTrack.title} className="h-full w-full object-cover" /> - + + + + 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, }