From 20c58d032bb8cf90df336dce0219d379534d4858 Mon Sep 17 00:00:00 2001
From: Nitin Rajpoot <nitinrajpoot.dev@gmail.com>
Date: Thu, 9 Oct 2025 07:06:25 +0530
Subject: [PATCH 1/4] music-player-redesigned

---
 src/components/music/MusicPlayer.jsx | 130 +++++++++++++--------------
 1 file changed, 61 insertions(+), 69 deletions(-)

diff --git a/src/components/music/MusicPlayer.jsx b/src/components/music/MusicPlayer.jsx
index c6bd1ba..3e311e3 100644
--- a/src/components/music/MusicPlayer.jsx
+++ b/src/components/music/MusicPlayer.jsx
@@ -155,86 +155,78 @@ function MusicPlayer() {
         <DrawerContent className="h-[15dvh]">
           <DrawerTitle hidden />
           <div
-            className="h-full fixed bottom-0 left-0 right-0 text-white p-4"
-            style={{ background: `linear-gradient(${bgColor?.bg1} 0%, ${bgColor?.bg2} 100%)` }}
+            className="fixed bottom-0 left-0 right-0 bg-black text-white flex items-center justify-between px-4 py-2 shadow-lg"
           >
-            <div className="max-w-screen-lg mx-auto">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-4">
-                  {song?.image?.[2]?.url ? (
-                    <img
-                      src={song?.image?.[2]?.url}
-                      alt=""
-                      loading="lazy"
-                      className="w-12 h-12 rounded-md shadow-lg object-cover"
-                      onError={(e) => {
+            <div className="flex items-center space-x-3 w-1/4">
+              {song?.image?.[2]?.url ? (
+                <img
+                  src={song.image[2].url}
+                  alt={song.name}
+                  loading="lazy"
+                  className="w-12 h-12 object-cover rounded-md"
+                  onError={(e) => {
                         e.currentTarget.onerror = null;
                         e.currentTarget.src = "/image.png";
                       }}
-                    />
-                  ) : (
-                    <div className="w-12 h-12 rounded-md shadow-lg grid place-items-center bg-black/30">
-                      <Play className="w-5 h-5 text-white" />
-                    </div>
-                  )}
-                  <div>
-                    <h3 className="text-sm font-semibold bg-gray-200/20 px-2 rounded-md">{song?.name}</h3>
-                    <p className="text-xs text-gray-400">{song?.artist}</p>
-                  </div>
-                </div>
-                <div className="flex items-center space-x-4">
-                  <button onClick={() => setShuffle(!shuffle)} className={`${shuffle ? "text-secondary" : "text-white"}`}>
-                    <Shuffle className="w-5 h-5" />
-                  </button>
-                  <button className="focus:outline-none" onClick={playPrevious}>
-                    <SkipBack className="w-5 h-5" />
-                  </button>
-                  <button onClick={handlePlayPause} className="focus:outline-none bg-white text-black rounded-full p-2">
-                    {isPlaying ? <Pause className="w-6 h-6" /> : <Play className="w-6 h-6" />}
-                  </button>
-                  <button className="focus:outline-none" onClick={playNext}>
-                    <SkipForward className="w-5 h-5" />
-                  </button>
+                />
+              ) : (
+                <div className="w-12 h-12 rounded-md shadow-lg grid place-items-center bg-black/30">
+                  <Play className="w-5 h-5 text-white" />
                 </div>
+              )}
+              <div className="flex flex-col">
+                <span className="text-sm font-semibold">{song?.name}</span>
+                <span className="text-xs text-gray-400">{song?.artist}</span>
               </div>
-
-              <div className="flex items-center space-x-4">
-                <span className="text-xs">{formatTime(duration * played)}</span>
-                <div className="flex-grow">
-                  <input
-                    type="range"
-                    min={0}
-                    max={0.999999}
-                    step="any"
-                    value={played}
-                    onChange={handleSeekChange}
-                    onMouseUp={handleSeekMouseUp}
-                    onTouchEnd={handleSeekMouseUp}
-                    className="w-full h-1 bg-gray-600 rounded-full appearance-none cursor-pointer"
-                    style={{
-                      background: `linear-gradient(to right, #1db954 0%, #1db954 ${played * 100}%, #4B5563 ${played * 100}%, #4B5563 100%)`,
-                    }}
-                  />
-                </div>
-                <span className="text-xs">{formatTime(duration)}</span>
-                <div className="flex items-center space-x-2">
-                  <button onClick={handleToggleMute} className="focus:outline-none">
-                    <VolumeIcon />
-                  </button>
-                  <input
-                    type="range"
-                    min={0}
-                    max={1}
-                    step="any"
-                    value={volume}
-                    onChange={handleVolumeChange}
-                    className="w-20 h-1 bg-gray-600 rounded-full appearance-none cursor-pointer"
+            </div>
+          
+            <div className="flex flex-col items-center w-2/4">
+              <div className="flex items-center space-x-4 mb-1">
+                <button onClick={() => setShuffle(!shuffle)} className={`${shuffle ? "text-green-500" : "text-white"}`}><Shuffle className="w-4 h-4"/></button>
+                <button onClick={playPrevious}><SkipBack className="w-5 h-5"/></button>
+                <button onClick={handlePlayPause} className="bg-white text-black rounded-full p-2">
+                  {isPlaying ? <Pause className="w-5 h-5"/> : <Play className="w-5 h-5"/>}
+                </button>
+                <button onClick={playNext}><SkipForward className="w-5 h-5"/></button>
+              </div>
+              <div className="flex items-center space-x-2 w-full">
+                <span className="text-sm">{formatTime(duration * played)}</span>
+                <input
+                  type="range"
+                  min={0}
+                  max={0.999999}
+                  step="any"
+                  value={played}
+                  onChange={handleSeekChange}
+                  onMouseUp={handleSeekMouseUp}
+                  onTouchEnd={handleSeekMouseUp}
+                    className="flex-grow h-1 rounded-full cursor-pointer"
                     style={{
-                      background: `linear-gradient(to right, #1db954 0%, #1db954 ${volume * 100}%, #4B5563 ${volume * 100}%, #4B5563 100%)`,
+                      background: `linear-gradient(to right, #1db954 0%, #1db954 ${played*100}%, #4B5563 ${played*100}%, #4B5563 100%)`
                     }}
                   />
+                  <span className="text-sm">{formatTime(duration)}</span>
                 </div>
               </div>
+            
+              <div className="flex items-center space-x-3 w-1/4 justify-end">
+                <button onClick={handleToggleMute}>
+                <VolumeIcon className="w-4 h-4"/>
+              </button>
+              <input
+                type="range"
+                min={0}
+                max={1}
+                step="any"
+                value={volume}
+                onChange={handleVolumeChange}
+                className="w-20 h-1 rounded-full cursor-pointer"
+                style={{
+                  background: `linear-gradient(to right, #1db954 0%, #1db954 ${volume*100}%, #4B5563 ${volume*100}%, #4B5563 100%)`
+                }}
+              />
+              <button>
+              </button>
             </div>
           </div>
         </DrawerContent>

From c4932bef875fd69a647222cd775335b2267f91ad Mon Sep 17 00:00:00 2001
From: Nitin Rajpoot <nitinrajpoot.dev@gmail.com>
Date: Thu, 9 Oct 2025 09:14:09 +0530
Subject: [PATCH 2/4] dynamic-background

---
 src/components/music/MusicPlayer.jsx | 246 +++++++++++++++------------
 1 file changed, 136 insertions(+), 110 deletions(-)

diff --git a/src/components/music/MusicPlayer.jsx b/src/components/music/MusicPlayer.jsx
index 3e311e3..3dbd213 100644
--- a/src/components/music/MusicPlayer.jsx
+++ b/src/components/music/MusicPlayer.jsx
@@ -1,5 +1,14 @@
 import React, { useRef, useEffect } from "react";
-import { Play, Pause, SkipBack, SkipForward, Volume1, Volume2, VolumeX, Shuffle } from "lucide-react";
+import {
+  Play,
+  Pause,
+  SkipBack,
+  SkipForward,
+  Volume1,
+  Volume2,
+  VolumeX,
+  Shuffle,
+} from "lucide-react";
 import ReactPlayer from "react-player";
 import Api from "../../Api";
 import { getImageColors } from "../color/ColorGenrator";
@@ -13,7 +22,7 @@ function MusicPlayer() {
   const [bgColor, setBgColor] = React.useState();
   const [musicPlayerDrawer, setMusicPlayerDrawer] = React.useState(false);
   const [song, setSong] = React.useState();
-  
+
   // Get state from Zustand stores
   const { songs } = useFetch();
   const {
@@ -32,7 +41,7 @@ function MusicPlayer() {
     setDuration,
     setShuffle,
     playNext,
-    playPrevious
+    playPrevious,
   } = useStore();
 
   // Keyboard shortcuts
@@ -122,131 +131,148 @@ function MusicPlayer() {
   const VolumeIcon = muted || volume === 0 ? VolumeX : volume > 0.5 ? Volume2 : Volume1;
 
   return (
-    song &&
-    ( <> 
-      <Drawer open={musicPlayerDrawer} onOpenChange={setMusicPlayerDrawer}>
-        <DrawerTrigger asChild>
-          <Button
-            variant="outline"
-            aria-label="Open player"
-            style={{ animationDuration: "5s"}}
-            className={`absolute right-6 bottom-6 p-0 h-16 w-16 rounded-full overflow-hidden shadow-lg ring-1 ring-white/10 hover:ring-white/30 transition ${
-              isPlaying && (song?.image?.[1]?.url ? "animate-spin" : "")
-            }`}
-          >
-            {song?.image?.[1]?.url ? (
-              <img
-                className="h-full w-full object-cover"
-                src={song?.image?.[1]?.url}
-                alt=""
-                loading="lazy"
-                onError={(e) => {
-                  e.currentTarget.onerror = null;
-                  e.currentTarget.src = "/image.png";
-                }}
-              />
-            ) : (
-              <div className="h-full w-full grid place-items-center bg-black/30 text-white">
-                <Play className="h-6 w-6" />
-              </div>
-            )}
-          </Button>
-        </DrawerTrigger>
-        <DrawerContent className="h-[15dvh]">
-          <DrawerTitle hidden />
-          <div
-            className="fixed bottom-0 left-0 right-0 bg-black text-white flex items-center justify-between px-4 py-2 shadow-lg"
-          >
-            <div className="flex items-center space-x-3 w-1/4">
-              {song?.image?.[2]?.url ? (
+    song && (
+      <>
+        <Drawer open={musicPlayerDrawer} onOpenChange={setMusicPlayerDrawer}>
+          <DrawerTrigger asChild>
+            <Button
+              variant="outline"
+              aria-label="Open player"
+              style={{ animationDuration: "5s" }}
+              className={`absolute right-6 bottom-6 p-0 h-16 w-16 rounded-full overflow-hidden shadow-lg ring-1 ring-white/10 hover:ring-white/30 transition ${
+                isPlaying && (song?.image?.[1]?.url ? "animate-spin" : "")
+              }`}
+            >
+              {song?.image?.[1]?.url ? (
                 <img
-                  src={song.image[2].url}
-                  alt={song.name}
+                  className="h-full w-full object-cover"
+                  src={song?.image?.[1]?.url}
+                  alt=""
                   loading="lazy"
-                  className="w-12 h-12 object-cover rounded-md"
                   onError={(e) => {
-                        e.currentTarget.onerror = null;
-                        e.currentTarget.src = "/image.png";
-                      }}
+                    e.currentTarget.onerror = null;
+                    e.currentTarget.src = "/image.png";
+                  }}
                 />
               ) : (
-                <div className="w-12 h-12 rounded-md shadow-lg grid place-items-center bg-black/30">
-                  <Play className="w-5 h-5 text-white" />
+                <div className="h-full w-full grid place-items-center bg-black/30 text-white">
+                  <Play className="h-6 w-6" />
                 </div>
               )}
-              <div className="flex flex-col">
-                <span className="text-sm font-semibold">{song?.name}</span>
-                <span className="text-xs text-gray-400">{song?.artist}</span>
-              </div>
-            </div>
-          
-            <div className="flex flex-col items-center w-2/4">
-              <div className="flex items-center space-x-4 mb-1">
-                <button onClick={() => setShuffle(!shuffle)} className={`${shuffle ? "text-green-500" : "text-white"}`}><Shuffle className="w-4 h-4"/></button>
-                <button onClick={playPrevious}><SkipBack className="w-5 h-5"/></button>
-                <button onClick={handlePlayPause} className="bg-white text-black rounded-full p-2">
-                  {isPlaying ? <Pause className="w-5 h-5"/> : <Play className="w-5 h-5"/>}
-                </button>
-                <button onClick={playNext}><SkipForward className="w-5 h-5"/></button>
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <DrawerTitle hidden />
+            <div
+              className="fixed bottom-0 left-0 right-0 h-[80px] text-white flex items-center justify-between px-4 py-2 shadow-2xl z-50 transition-all duration-700"
+              style={
+                bgColor
+                  ? { background: `linear-gradient(90deg, ${bgColor.bg1}, ${bgColor.bg2})` }
+                  : { backgroundColor: "#1d1d1d" }
+              }
+            >
+              <div className="flex items-center space-x-3 w-1/4">
+                {song?.image?.[2]?.url ? (
+                  <img
+                    src={song.image[2].url}
+                    alt={song.name}
+                    loading="lazy"
+                    className="w-12 h-12 object-cover rounded-md"
+                    onError={(e) => {
+                      e.currentTarget.onerror = null;
+                      e.currentTarget.src = "/image.png";
+                    }}
+                  />
+                ) : (
+                  <div className="w-12 h-12 rounded-md shadow-lg grid place-items-center bg-black/30">
+                    <Play className="w-5 h-5 text-white" />
+                  </div>
+                )}
+                <div className="flex flex-col">
+                  <span className="text-sm font-semibold">{song?.name}</span>
+                  <span className="text-xs text-gray-400">{song?.artist}</span>
+                </div>
               </div>
-              <div className="flex items-center space-x-2 w-full">
-                <span className="text-sm">{formatTime(duration * played)}</span>
-                <input
-                  type="range"
-                  min={0}
-                  max={0.999999}
-                  step="any"
-                  value={played}
-                  onChange={handleSeekChange}
-                  onMouseUp={handleSeekMouseUp}
-                  onTouchEnd={handleSeekMouseUp}
+
+              <div className="flex flex-col items-center w-2/4">
+                <div className="flex items-center space-x-4 mb-1">
+                  <button
+                    onClick={() => setShuffle(!shuffle)}
+                    className={`${shuffle ? "text-green-500" : "text-white"}`}
+                  >
+                    <Shuffle className="w-4 h-4" />
+                  </button>
+                  <button onClick={playPrevious}>
+                    <SkipBack className="w-5 h-5" />
+                  </button>
+                  <button
+                    onClick={handlePlayPause}
+                    className="bg-white text-black rounded-full p-2"
+                  >
+                    {isPlaying ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
+                  </button>
+                  <button onClick={playNext}>
+                    <SkipForward className="w-5 h-5" />
+                  </button>
+                </div>
+                <div className="flex items-center space-x-2 w-full">
+                  <span className="text-sm">{formatTime(duration * played)}</span>
+                  <input
+                    type="range"
+                    min={0}
+                    max={0.999999}
+                    step="any"
+                    value={played}
+                    onChange={handleSeekChange}
+                    onMouseUp={handleSeekMouseUp}
+                    onTouchEnd={handleSeekMouseUp}
                     className="flex-grow h-1 rounded-full cursor-pointer"
                     style={{
-                      background: `linear-gradient(to right, #1db954 0%, #1db954 ${played*100}%, #4B5563 ${played*100}%, #4B5563 100%)`
+                      background: `linear-gradient(to right, #1db954 0%, #1db954 ${played * 100}%, #4B5563 ${played * 100}%, #4B5563 100%)`,
                     }}
                   />
                   <span className="text-sm">{formatTime(duration)}</span>
                 </div>
               </div>
-            
+
               <div className="flex items-center space-x-3 w-1/4 justify-end">
                 <button onClick={handleToggleMute}>
-                <VolumeIcon className="w-4 h-4"/>
-              </button>
-              <input
-                type="range"
-                min={0}
-                max={1}
-                step="any"
-                value={volume}
-                onChange={handleVolumeChange}
-                className="w-20 h-1 rounded-full cursor-pointer"
-                style={{
-                  background: `linear-gradient(to right, #1db954 0%, #1db954 ${volume*100}%, #4B5563 ${volume*100}%, #4B5563 100%)`
-                }}
-              />
-              <button>
-              </button>
+                  <VolumeIcon className="w-4 h-4" />
+                </button>
+                <input
+                  type="range"
+                  min={0}
+                  max={1}
+                  step="any"
+                  value={volume}
+                  onChange={handleVolumeChange}
+                  className="w-20 h-1 rounded-full cursor-pointer"
+                  style={{
+                    background: `linear-gradient(to right, #1db954 0%, #1db954 ${volume * 100}%, #4B5563 ${volume * 100}%, #4B5563 100%)`,
+                  }}
+                />
+                <button></button>
+              </div>
             </div>
-          </div>
-        </DrawerContent>
-      </Drawer>
-
-      <ReactPlayer
-        ref={playerRef}
-        key={musicId} // Force re-render on song change to prevent multiple audio instances
-        url={song?.downloadUrl?.[4]?.url || ""}
-        playing={isPlaying}
-        volume={muted ? 0 : volume}
-        onProgress={handleProgress}
-        onDuration={handleDuration}
-        onPlay={() => setIsPlaying(true)}  
-        onPause={() => setIsPlaying(false)}
-        onEnded={playNext} // Use centralized next function
-        width="0"
-        height="0"
-      />
-    </>)
+          </DrawerContent>
+        </Drawer>
+
+        <ReactPlayer
+          ref={playerRef}
+          key={musicId} // Force re-render on song change to prevent multiple audio instances
+          url={song?.downloadUrl?.[4]?.url || ""}
+          playing={isPlaying}
+          volume={muted ? 0 : volume}
+          onProgress={handleProgress}
+          onDuration={handleDuration}
+          onPlay={() => setIsPlaying(true)}
+          onPause={() => setIsPlaying(false)}
+          onEnded={playNext} // Use centralized next function
+          width="0"
+          height="0"
+        />
+      </>
+    )
   );
 }
 

From 87903619ae49d1e682eef5fbdfb63506ad8260cc Mon Sep 17 00:00:00 2001
From: Nitin Rajpoot <nitinrajpoot.dev@gmail.com>
Date: Thu, 9 Oct 2025 14:52:16 +0530
Subject: [PATCH 3/4] responsive-design

---
 src/components/music/MusicPlayer.jsx | 36 +++++++++++++++-------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/music/MusicPlayer.jsx b/src/components/music/MusicPlayer.jsx
index 3dbd213..175f1ed 100644
--- a/src/components/music/MusicPlayer.jsx
+++ b/src/components/music/MusicPlayer.jsx
@@ -164,20 +164,20 @@ function MusicPlayer() {
           <DrawerContent>
             <DrawerTitle hidden />
             <div
-              className="fixed bottom-0 left-0 right-0 h-[80px] text-white flex items-center justify-between px-4 py-2 shadow-2xl z-50 transition-all duration-700"
+              className="fixed bottom-0 left-0 right-0 h-[80px] sm:h-20 flex flex-col sm:flex-row items-center justify-between px-2 sm:px-4 py-2 shadow-2xl z-50 transition-all duration-700"
               style={
                 bgColor
                   ? { background: `linear-gradient(90deg, ${bgColor.bg1}, ${bgColor.bg2})` }
                   : { backgroundColor: "#1d1d1d" }
               }
             >
-              <div className="flex items-center space-x-3 w-1/4">
+              <div className="flex items-center space-x-3 w-1/4 justify-end min-w-0">
                 {song?.image?.[2]?.url ? (
                   <img
                     src={song.image[2].url}
                     alt={song.name}
                     loading="lazy"
-                    className="w-12 h-12 object-cover rounded-md"
+                    className="sm:w-14 sm:h-14 h-10 w-10 object-cover rounded-md"
                     onError={(e) => {
                       e.currentTarget.onerror = null;
                       e.currentTarget.src = "/image.png";
@@ -188,35 +188,40 @@ function MusicPlayer() {
                     <Play className="w-5 h-5 text-white" />
                   </div>
                 )}
-                <div className="flex flex-col">
-                  <span className="text-sm font-semibold">{song?.name}</span>
-                  <span className="text-xs text-gray-400">{song?.artist}</span>
+                <div className="flex flex-col min-w-0">
+                  <span className="text-sm font-semibold truncate">{song?.name}</span>
+                  <span className="text-xs text-gray-400 truncate">{song?.artist}</span>
                 </div>
               </div>
 
               <div className="flex flex-col items-center w-2/4">
-                <div className="flex items-center space-x-4 mb-1">
+                <div className="flex items-center justify-center flex-shrink-0 flex-grow space-x-2 sm:space-x-4 mb-1">
                   <button
                     onClick={() => setShuffle(!shuffle)}
                     className={`${shuffle ? "text-green-500" : "text-white"}`}
                   >
-                    <Shuffle className="w-4 h-4" />
+                    <Shuffle className="w-3 h-3 sm:w-4 sm:h-4" />
                   </button>
                   <button onClick={playPrevious}>
-                    <SkipBack className="w-5 h-5" />
+                    <SkipBack className="w-4 h-4 sm:w-5 sm:h-5" />
                   </button>
                   <button
                     onClick={handlePlayPause}
                     className="bg-white text-black rounded-full p-2"
                   >
-                    {isPlaying ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
+                    {isPlaying ? (
+                      <Pause className="w-4 h-4 sm:w-5 sm:h-5" />
+                    ) : (
+                      <Play className="w-4 h-4 sm:w-5 sm:h-5" />
+                    )}
                   </button>
                   <button onClick={playNext}>
-                    <SkipForward className="w-5 h-5" />
+                    <SkipForward className="w-4 h-4 sm:w-5 sm:h-5" />
                   </button>
                 </div>
-                <div className="flex items-center space-x-2 w-full">
-                  <span className="text-sm">{formatTime(duration * played)}</span>
+
+                <div className="flex items-center space-x-2 w-full min-w-0">
+                  <span className="text-xs sm:text-sm">{formatTime(duration * played)}</span>
                   <input
                     type="range"
                     min={0}
@@ -231,11 +236,11 @@ function MusicPlayer() {
                       background: `linear-gradient(to right, #1db954 0%, #1db954 ${played * 100}%, #4B5563 ${played * 100}%, #4B5563 100%)`,
                     }}
                   />
-                  <span className="text-sm">{formatTime(duration)}</span>
+                  <span className="text-xs sm:text-sm">{formatTime(duration)}</span>
                 </div>
               </div>
 
-              <div className="flex items-center space-x-3 w-1/4 justify-end">
+              <div className="flex items-center space-x-3 w-1/4 justify-end min-w-0">
                 <button onClick={handleToggleMute}>
                   <VolumeIcon className="w-4 h-4" />
                 </button>
@@ -251,7 +256,6 @@ function MusicPlayer() {
                     background: `linear-gradient(to right, #1db954 0%, #1db954 ${volume * 100}%, #4B5563 ${volume * 100}%, #4B5563 100%)`,
                   }}
                 />
-                <button></button>
               </div>
             </div>
           </DrawerContent>

From 6846936247ed0120eacf92c6a7ea83846ced6d58 Mon Sep 17 00:00:00 2001
From: Nitin Rajpoot <nitinrajpoot.dev@gmail.com>
Date: Fri, 10 Oct 2025 19:02:29 +0530
Subject: [PATCH 4/4] improve-design

---
 src/components/music/MusicPlayer.jsx | 36 +++++++++++++++-------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/music/MusicPlayer.jsx b/src/components/music/MusicPlayer.jsx
index 175f1ed..a61a1f8 100644
--- a/src/components/music/MusicPlayer.jsx
+++ b/src/components/music/MusicPlayer.jsx
@@ -164,59 +164,63 @@ function MusicPlayer() {
           <DrawerContent>
             <DrawerTitle hidden />
             <div
-              className="fixed bottom-0 left-0 right-0 h-[80px] sm:h-20 flex flex-col sm:flex-row items-center justify-between px-2 sm:px-4 py-2 shadow-2xl z-50 transition-all duration-700"
+              className="fixed bottom-0 left-0 right-0 flex flex-wrap items-center justify-between sm:px-4 px-2 py-3 z-50 transition-all duration-700"
               style={
                 bgColor
                   ? { background: `linear-gradient(90deg, ${bgColor.bg1}, ${bgColor.bg2})` }
                   : { backgroundColor: "#1d1d1d" }
               }
             >
-              <div className="flex items-center space-x-3 w-1/4 justify-end min-w-0">
+              <div className="flex items-center space-x-1 sm:space-x-3 flex-shrink-0 w-auto sm:w-1/4 order-1 min-w-0">
                 {song?.image?.[2]?.url ? (
                   <img
                     src={song.image[2].url}
                     alt={song.name}
                     loading="lazy"
-                    className="sm:w-14 sm:h-14 h-10 w-10 object-cover rounded-md"
+                    className="sm:w-16 sm:h-16 h-10 w-10 object-contain rounded-sm"
                     onError={(e) => {
                       e.currentTarget.onerror = null;
                       e.currentTarget.src = "/image.png";
                     }}
                   />
                 ) : (
-                  <div className="w-12 h-12 rounded-md shadow-lg grid place-items-center bg-black/30">
+                  <div className="w-16 h-16 rounded-sm grid place-items-center bg-black/30">
                     <Play className="w-5 h-5 text-white" />
                   </div>
                 )}
                 <div className="flex flex-col min-w-0">
-                  <span className="text-sm font-semibold truncate">{song?.name}</span>
-                  <span className="text-xs text-gray-400 truncate">{song?.artist}</span>
+                  <span className="text-md font-semibold truncate">{song?.name}</span>
+                  <span className="text-xs text-gray-300 truncate">
+                    {song?.artists?.primary?.length
+                      ? song.artists.primary.map((a) => a.name).join(", ")
+                      : "Unknown Artist"}
+                  </span>
                 </div>
               </div>
 
-              <div className="flex flex-col items-center w-2/4">
-                <div className="flex items-center justify-center flex-shrink-0 flex-grow space-x-2 sm:space-x-4 mb-1">
+              <div className="flex flex-col items-center flex-grow order-2 mt-0 sm:mt-2 min-w-0">
+                <div className="flex items-center justify-center space-x-2 sm:space-x-4 mb-1">
                   <button
                     onClick={() => setShuffle(!shuffle)}
                     className={`${shuffle ? "text-green-500" : "text-white"}`}
                   >
-                    <Shuffle className="w-3 h-3 sm:w-4 sm:h-4" />
+                    <Shuffle className="w-3 h-3 sm:w-5 sm:h-5" />
                   </button>
                   <button onClick={playPrevious}>
-                    <SkipBack className="w-4 h-4 sm:w-5 sm:h-5" />
+                    <SkipBack className="w-3 h-3 sm:w-5 sm:h-5" />
                   </button>
                   <button
                     onClick={handlePlayPause}
                     className="bg-white text-black rounded-full p-2"
                   >
                     {isPlaying ? (
-                      <Pause className="w-4 h-4 sm:w-5 sm:h-5" />
+                      <Pause className="w-3 h-3 sm:w-5 sm:h-5" />
                     ) : (
-                      <Play className="w-4 h-4 sm:w-5 sm:h-5" />
+                      <Play className="w-3 h-3 sm:w-5 sm:h-5" />
                     )}
                   </button>
                   <button onClick={playNext}>
-                    <SkipForward className="w-4 h-4 sm:w-5 sm:h-5" />
+                    <SkipForward className="w-3 h-3 sm:w-5 sm:h-5" />
                   </button>
                 </div>
 
@@ -231,7 +235,7 @@ function MusicPlayer() {
                     onChange={handleSeekChange}
                     onMouseUp={handleSeekMouseUp}
                     onTouchEnd={handleSeekMouseUp}
-                    className="flex-grow h-1 rounded-full cursor-pointer"
+                    className="flex-grow h-1 rounded-full cursor-pointe min-w-0"
                     style={{
                       background: `linear-gradient(to right, #1db954 0%, #1db954 ${played * 100}%, #4B5563 ${played * 100}%, #4B5563 100%)`,
                     }}
@@ -240,7 +244,7 @@ function MusicPlayer() {
                 </div>
               </div>
 
-              <div className="flex items-center space-x-3 w-1/4 justify-end min-w-0">
+              <div className="flex items-center space-x-2 justify-end w-full sm:w-1/4 order-3 mt-2 sm:mt-0 min-w-0">
                 <button onClick={handleToggleMute}>
                   <VolumeIcon className="w-4 h-4" />
                 </button>
@@ -251,7 +255,7 @@ function MusicPlayer() {
                   step="any"
                   value={volume}
                   onChange={handleVolumeChange}
-                  className="w-20 h-1 rounded-full cursor-pointer"
+                  className="w-10 sm:w-20 md:w-28 h-1 rounded-full cursor-pointer"
                   style={{
                     background: `linear-gradient(to right, #1db954 0%, #1db954 ${volume * 100}%, #4B5563 ${volume * 100}%, #4B5563 100%)`,
                   }}