From 447627ef5eb60dfb7869df1ffd88a0c8eecaeb9e Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Sun, 2 Nov 2025 20:59:34 +1100
Subject: [PATCH] UI update on mobile devices

---
 frontend/src/components/player/Player.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/player/Player.tsx b/frontend/src/components/player/Player.tsx
index 3032175..f5a3585 100644
--- a/frontend/src/components/player/Player.tsx
+++ b/frontend/src/components/player/Player.tsx
@@ -262,16 +262,28 @@ export default function Player({
           <div className="flex items-center justify-between gap-2 md:gap-4">
             {/* Album art and music info */}
             <div className="flex items-center gap-2 md:gap-3 flex-1 min-w-0">
-              {currentMusic.thumbnail && (
+              {currentMusic.thumbnail ? (
                 <img
                   src={currentMusic.thumbnail.startsWith('http') ? currentMusic.thumbnail : `/music/${currentMusic.thumbnail}`}
                   alt={currentMusic.title}
                   className="w-12 h-12 md:w-14 md:h-14 rounded object-cover cursor-pointer hover:opacity-80 transition-opacity"
                   onClick={() => setShowFullScreen(true)}
                 />
+              ) : (
+                <div 
+                  className="w-12 h-12 md:w-14 md:h-14 rounded bg-secondary flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity"
+                  onClick={() => setShowFullScreen(true)}
+                >
+                  <Play className="h-6 w-6 md:h-7 md:w-7 text-muted-foreground" />
+                </div>
               )}
               <div className="flex-1 min-w-0">
-                <h3 className="font-semibold truncate">{currentMusic.title}</h3>
+                <h3 
+                  className="font-semibold truncate cursor-pointer hover:underline"
+                  onClick={() => setShowFullScreen(true)}
+                >
+                  {currentMusic.title}
+                </h3>
                 {currentMusic.artist && currentMusic.artist !== 'Unknown' ? (
                   <button
                     onClick={() => navigate(`/artists/${encodeURIComponent(currentMusic.artist!)}`)}