feat: enhance MusicPlayer and SocketProvider with playlist management and real-time updates

src/components/MusicPlayer.tsx

@@ -47,7 +47,8 @@ export function MusicPlayer() {
 
   const progressBarRef = useRef<HTMLDivElement>(null)
 
-  if (!currentTrack) {
+  // Show player if there's a playlist, even if no current track is playing
+  if (playlist.length === 0) {
     return null
   }
 
@@ -98,7 +99,7 @@ export function MusicPlayer() {
     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">
         {/* Thumbnail */}
-        {currentTrack.thumbnail && (
+        {currentTrack?.thumbnail && (
           <div className="relative h-32 w-full overflow-hidden rounded-t-lg">
             <img 
               src={currentTrack.thumbnail} 
@@ -122,9 +123,9 @@ export function MusicPlayer() {
           {/* Track info */}
           <div className="space-y-1">
             <h3 className="font-medium text-sm leading-tight line-clamp-1">
-              {currentTrack.title}
+              {currentTrack?.title || 'No track selected'}
             </h3>
-            {currentTrack.artist && (
+            {currentTrack?.artist && (
               <p className="text-xs text-muted-foreground line-clamp-1">
                 {currentTrack.artist}
               </p>
@@ -262,7 +263,7 @@ export function MusicPlayer() {
         {/* Main player area */}
         <div className="flex-1 flex flex-col items-center justify-center p-8">
           {/* Large thumbnail */}
-          {currentTrack.thumbnail && (
+          {currentTrack?.thumbnail && (
             <div className="w-80 h-80 rounded-lg overflow-hidden mb-6 shadow-lg">
               <img 
                 src={currentTrack.thumbnail} 
@@ -274,8 +275,8 @@ export function MusicPlayer() {
 
           {/* Track info */}
           <div className="text-center mb-6">
-            <h1 className="text-2xl font-bold mb-2">{currentTrack.title}</h1>
-            {currentTrack.artist && (
+            <h1 className="text-2xl font-bold mb-2">{currentTrack?.title || 'No track selected'}</h1>
+            {currentTrack?.artist && (
               <p className="text-lg text-muted-foreground">{currentTrack.artist}</p>
             )}
           </div>