3 Stage MiniPlayer, Mini Player, Compact, "Full expanded player"

app/components/AudioPlayer.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
-import { FaPlay, FaPause, FaVolumeHigh, FaForward, FaBackward } from "react-icons/fa6";
+import { FaPlay, FaPause, FaVolumeHigh, FaForward, FaBackward, FaExpand, FaCompress, FaVolumeXmark } from "react-icons/fa6";
 import ColorThief from '@neutrixs/colorthief';
 import { Progress } from '@/components/ui/progress';
 import { useToast } from '@/hooks/use-toast';
@@ -15,6 +15,8 @@ export const AudioPlayer: React.FC = () => {
   const [showVolumeSlider, setShowVolumeSlider] = useState(false);
   const [volume, setVolume] = useState(1);
   const [isClient, setIsClient] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isMinimized, setIsMinimized] = useState(false);
   const audioCurrent = audioRef.current;
   const { toast } = useToast();
   
@@ -151,65 +153,187 @@ export const AudioPlayer: React.FC = () => {
     return `${minutes}:${secs}`;
   }
   
-  if (!isClient) {
+  if (!isClient || !currentTrack) {
     return null;
   }
 
-  return (
-    <div className="bg-background w-full text-white border-t border-t-1">
-      {currentTrack ? (
-        <div className="flex items-center justify-between px-4 py-4">
-          {/* Left side - Album art and track info */}
-          <div className="flex items-center flex-1 min-w-0">
+  // Mini player (collapsed state)
+  if (isMinimized) {
+    return (
+      <div className="fixed bottom-4 right-4 z-50">
+        <div 
+          className="bg-background/95 backdrop-blur-sm border rounded-full shadow-lg cursor-pointer hover:scale-105 transition-transform"
+          onClick={() => setIsMinimized(false)}
+        >
+          <div className="flex items-center p-2">
             <Image 
               src={currentTrack.coverArt || '/default-user.jpg'} 
               alt={currentTrack.name} 
-              width={96} 
-              height={96} 
-              className="w-12 h-12 mr-3 rounded-md flex-shrink-0" 
+              width={40} 
+              height={40} 
+              className="w-10 h-10 rounded-full" 
             />
-            <div className="flex-1 min-w-0">
-              <p className="font-semibold truncate">{currentTrack.name}</p>
-              <p className='text-sm text-gray-400 truncate'>{currentTrack.artist}</p>
+            <button 
+              className="ml-2 p-2 hover:bg-gray-700/50 rounded-full transition-colors" 
+              onClick={(e) => {
+                e.stopPropagation();
+                togglePlayPause();
+              }}
+            >
+              {isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />}
+            </button>
+          </div>
+        </div>
+        <audio ref={audioRef} hidden />
+      </div>
+    );
+  }
+
+  // Compact floating player (default state)
+  if (!isExpanded) {
+    return (
+      <div className="fixed bottom-4 right-4 z-50">
+        <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg p-3 w-80">
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center flex-1 min-w-0">
+              <Image 
+                src={currentTrack.coverArt || '/default-user.jpg'} 
+                alt={currentTrack.name} 
+                width={48} 
+                height={48} 
+                className="w-12 h-12 rounded-md mr-3 flex-shrink-0" 
+              />
+              <div className="flex-1 min-w-0">
+                <p className="font-semibold truncate text-sm">{currentTrack.name}</p>
+                <p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-1 ml-2">
+              <button 
+                className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" 
+                onClick={() => setIsMinimized(true)}
+                title="Minimize"
+              >
+                <FaCompress className="w-3 h-3" />
+              </button>
+              <button 
+                className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" 
+                onClick={() => setIsExpanded(true)}
+                title="Expand"
+              >
+                <FaExpand className="w-3 h-3" />
+              </button>
             </div>
           </div>
           
-          {/* Center - Control buttons and progress bar */}
-          <div className="flex flex-col items-center flex-1 max-w-md mx-6">
-            {/* Control buttons */}
-            <div className="flex items-center space-x-2 mb-2">
-              <button className="p-2 hover:bg-gray-700 rounded-full transition-colors" onClick={playPreviousTrack}>
-                <FaBackward className="w-4 h-4" />
-              </button>
-              <button className='p-3 hover:bg-gray-700 rounded-full transition-colors' onClick={togglePlayPause}>
-                {isPlaying ? <FaPause className="w-5 h-5" /> : <FaPlay className="w-5 h-5" />}
-              </button>
-              <button className='p-2 hover:bg-gray-700 rounded-full transition-colors' onClick={playNextTrack}>
-                <FaForward className="w-4 h-4" />
-              </button>
-            </div>
-            
-            {/* Progress bar below buttons - full width of this section */}
-            <div className="flex items-center space-x-2 w-full">
-              <span className="text-xs text-gray-400 w-10 text-right">
-                {formatTime(audioCurrent?.currentTime ?? 0)}
-              </span>
-              <Progress value={progress} className="flex-1 cursor-pointer" onClick={handleProgressClick}/>
-              <span className="text-xs text-gray-400 w-10">
-                {formatTime(audioCurrent?.duration ?? 0)}
-              </span>
-            </div>
+          {/* Control buttons */}
+          <div className="flex items-center justify-center space-x-2 mb-2">
+            <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
+              <FaBackward className="w-3 h-3" />
+            </button>
+            <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
+              {isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />}
+            </button>
+            <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
+              <FaForward className="w-3 h-3" />
+            </button>
           </div>
           
-          {/* Right side - Extra space for balance */}
-          <div className="flex-1"></div>
+          {/* Progress bar */}
+          <div className="flex items-center space-x-2">
+            <span className="text-xs text-muted-foreground w-8 text-right">
+              {formatTime(audioCurrent?.currentTime ?? 0)}
+            </span>
+            <Progress value={progress} className="flex-1 cursor-pointer h-1" onClick={handleProgressClick}/>
+            <span className="text-xs text-muted-foreground w-8">
+              {formatTime(audioCurrent?.duration ?? 0)}
+            </span>
+          </div>
         </div>
-      ) : (
-        <div className="p-4">
-          <p>No track playing</p>
+        <audio ref={audioRef} hidden />
+      </div>
+    );
+  }
+
+  // Full expanded player
+  return (
+    <div className="fixed bottom-4 right-4 z-50">
+      <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg p-4 w-96">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="font-semibold">Now Playing</h3>
+          <div className="flex items-center space-x-1">
+            <button 
+              className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" 
+              onClick={() => setIsExpanded(false)}
+              title="Collapse"
+            >
+              <FaCompress className="w-3 h-3" />
+            </button>
+          </div>
         </div>
-      )}
-      <audio ref={audioRef} hidden />
+        
+        <div className="flex items-center mb-4">
+          <Image 
+            src={currentTrack.coverArt || '/default-user.jpg'} 
+            alt={currentTrack.name} 
+            width={80} 
+            height={80} 
+            className="w-20 h-20 rounded-lg mr-4 flex-shrink-0" 
+          />
+          <div className="flex-1 min-w-0">
+            <p className="font-semibold text-lg leading-tight">{currentTrack.name}</p>
+            <p className="text-muted-foreground">{currentTrack.artist}</p>
+            <p className="text-sm text-muted-foreground">{currentTrack.album}</p>
+          </div>
+        </div>
+        
+        {/* Control buttons */}
+        <div className="flex items-center justify-center space-x-4 mb-4">
+          <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
+            <FaBackward className="w-4 h-4" />
+          </button>
+          <button className="p-3 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
+            {isPlaying ? <FaPause className="w-5 h-5" /> : <FaPlay className="w-5 h-5" />}
+          </button>
+          <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
+            <FaForward className="w-4 h-4" />
+          </button>
+        </div>
+        
+        {/* Progress bar */}
+        <div className="flex items-center space-x-2 mb-4">
+          <span className="text-xs text-muted-foreground w-10 text-right">
+            {formatTime(audioCurrent?.currentTime ?? 0)}
+          </span>
+          <Progress value={progress} className="flex-1 cursor-pointer" onClick={handleProgressClick}/>
+          <span className="text-xs text-muted-foreground w-10">
+            {formatTime(audioCurrent?.duration ?? 0)}
+          </span>
+        </div>
+        
+        {/* Volume control */}
+        <div className="flex items-center space-x-2">
+          <button 
+            className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" 
+            onClick={() => setShowVolumeSlider(!showVolumeSlider)}
+          >
+            {volume === 0 ? <FaVolumeXmark className="w-4 h-4" /> : <FaVolumeHigh className="w-4 h-4" />}
+          </button>
+          {showVolumeSlider && (
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.1"
+              value={volume}
+              onChange={handleVolumeChange}
+              className="flex-1 h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+            />
+          )}
+        </div>
+        
+        <audio ref={audioRef} hidden />
+      </div>
     </div>
   );
 };

app/components/ihateserverside.tsx

@@ -45,16 +45,14 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
             />
           </div>
         )}
-        <div className={`flex-1 overflow-y-auto ${isStatusBarVisible ? 'pb-24' : ''}`}>
+        <div className="flex-1 overflow-y-auto">
           <div>{children}</div>
         </div>
       </div>
 
-      {/* Audio Player */}
+      {/* Floating Audio Player */}
       {isStatusBarVisible && (
-        <div className="fixed bottom-0 left-0 right-0 z-50 bg-background">
-          <AudioPlayer />
-        </div>
+        <AudioPlayer />
       )}
       <Toaster />
     </div>