From 8fe2ee235b3dea553fd4047ac81ec83c08403840 Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Thu, 19 Jun 2025 19:30:28 +0000
Subject: [PATCH] Refactor AudioPlayer controls layout for improved usability
 and accessibility

---
 app/components/AudioPlayer.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/components/AudioPlayer.tsx b/app/components/AudioPlayer.tsx
index 7b98359..14e2e55 100644
--- a/app/components/AudioPlayer.tsx
+++ b/app/components/AudioPlayer.tsx
@@ -180,15 +180,17 @@ export const AudioPlayer: React.FC = () => {
               </div>
               <p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
             </div>
-            <button 
-              className="p-2 hover:bg-gray-700/50 rounded-full transition-colors flex-shrink-0" 
-              onClick={(e) => {
-                e.stopPropagation();
-                togglePlayPause();
-              }}
-            >
-              {isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />}
-            </button>
+            <div className="flex items-center justify-center space-x-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>
           </div>
         </div>
         <audio ref={audioRef} hidden />
@@ -199,7 +201,7 @@ export const AudioPlayer: React.FC = () => {
   // Compact floating player (default state)
   return (
     <div className="fixed bottom-4 left-4 right-4 z-50">
-      <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg p-3 pb-0">
+      <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg p-3 pb-0 cursor-pointer hover:scale-[1.01] transition-transform">
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center flex-1 min-w-0">
             <Image