UI update

frontend/src/components/player/FullScreenPlayer.tsx

@@ -1,7 +1,7 @@
 import { Music } from '@/types'
 import { Button } from '@/components/ui/button'
 import { Slider } from '@/components/ui/slider'
-import { X, Play, Pause, SkipBack, SkipForward, Heart, ListPlus, Share2, MessageSquareText } from 'lucide-react'
+import { X, Play, Pause, SkipBack, SkipForward, Heart, ListPlus, Share2, MessageSquareText, Repeat, Repeat1, Shuffle } from 'lucide-react'
 import { formatDuration } from '@/lib/utils'
 import { useQuery } from '@tanstack/react-query'
 import { musicApi } from '@/api/client'
@@ -24,6 +24,8 @@ interface FullScreenPlayerProps {
   showLyrics?: boolean
   onToggleLyrics?: () => void
   onSeek?: (value: number[]) => void
+  playMode: 'loop' | 'shuffle' | 'repeat-one'
+  onTogglePlayMode: () => void
 }
 
 export default function FullScreenPlayer({
@@ -43,6 +45,8 @@ export default function FullScreenPlayer({
   showLyrics = false,
   onToggleLyrics,
   onSeek,
+  playMode,
+  onTogglePlayMode,
 }: FullScreenPlayerProps) {
   const [userScrolling, setUserScrolling] = React.useState(false)
   const scrollTimeoutRef = React.useRef<number>()
@@ -270,6 +274,23 @@ export default function FullScreenPlayer({
               <Share2 className="h-6 w-6" />
             </Button>
 
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onTogglePlayMode}
+              title={
+                playMode === 'loop' 
+                  ? 'Loop playlist' 
+                  : playMode === 'shuffle' 
+                  ? 'Shuffle' 
+                  : 'Repeat one'
+              }
+            >
+              {playMode === 'loop' && <Repeat className="h-6 w-6" />}
+              {playMode === 'shuffle' && <Shuffle className="h-6 w-6" />}
+              {playMode === 'repeat-one' && <Repeat1 className="h-6 w-6" />}
+            </Button>
+
             <Button
               variant="ghost"
               size="icon"

frontend/src/components/player/Player.tsx

@@ -259,14 +259,14 @@ export default function Player({
             </div>
           </div>
 
-          <div className="flex items-center justify-between gap-4">
+          <div className="flex items-center justify-between gap-2 md:gap-4">
             {/* Album art and music info */}
-            <div className="flex items-center gap-3 flex-1 min-w-0">
+            <div className="flex items-center gap-2 md:gap-3 flex-1 min-w-0">
               {currentMusic.thumbnail && (
                 <img
                   src={currentMusic.thumbnail.startsWith('http') ? currentMusic.thumbnail : `/music/${currentMusic.thumbnail}`}
                   alt={currentMusic.title}
-                  className="w-14 h-14 rounded object-cover cursor-pointer hover:opacity-80 transition-opacity"
+                  className="w-12 h-12 md:w-14 md:h-14 rounded object-cover cursor-pointer hover:opacity-80 transition-opacity"
                   onClick={() => setShowFullScreen(true)}
                 />
               )}
@@ -288,8 +288,8 @@ export default function Player({
             </div>
 
             {/* Controls */}
-            <div className="flex items-center gap-2">
-              {/* Full Screen button */}
+            <div className="flex items-center gap-1 md:gap-2">
+              {/* Full Screen button - desktop only */}
               <Button
                 variant="ghost"
                 size="icon"
@@ -299,7 +299,7 @@ export default function Player({
                 <Maximize2 className="h-5 w-5" />
               </Button>
               
-              {/* Like, Playlist, Share, and Lyrics buttons */}
+              {/* Like button - visible on mobile, Playlist/Share/Lyrics - desktop only */}
               {currentMusic.id !== 0 && (
                 <>
                   <Button
@@ -307,14 +307,16 @@ export default function Player({
                     size="icon"
                     onClick={() => toggleLikeMutation.mutate()}
                     disabled={toggleLikeMutation.isPending}
+                    className="h-8 w-8 md:h-10 md:w-10"
                   >
-                    <Heart className={`h-5 w-5 ${isLiked ? 'fill-red-500 text-red-500' : ''}`} />
+                    <Heart className={`h-4 w-4 md:h-5 md:w-5 ${isLiked ? 'fill-red-500 text-red-500' : ''}`} />
                   </Button>
                   
                   <Button
                     variant="ghost"
                     size="icon"
                     onClick={() => setShowPlaylistSelector(true)}
+                    className="hidden md:flex"
                   >
                     <ListPlus className="h-5 w-5" />
                   </Button>
@@ -323,6 +325,7 @@ export default function Player({
                     variant="ghost"
                     size="icon"
                     onClick={handleShare}
+                    className="hidden md:flex"
                   >
                     <Share2 className="h-5 w-5" />
                   </Button>
@@ -331,27 +334,29 @@ export default function Player({
                     variant="ghost"
                     size="icon"
                     onClick={handleLyricsClick}
-                    className={showLyrics ? 'text-primary' : ''}
+                    className={`hidden md:flex ${showLyrics ? 'text-primary' : ''}`}
                   >
                     <MessageSquareText className="h-5 w-5" />
                   </Button>
                 </>
               )}
               
+              {/* Previous button - now visible on mobile with smaller size */}
               <Button
                 variant="ghost"
                 size="icon"
                 onClick={onPrevious}
-                className="hidden md:flex"
+                className="h-8 w-8 md:h-10 md:w-10"
               >
-                <SkipBack className="h-5 w-5" />
+                <SkipBack className="h-4 w-4 md:h-5 md:w-5" />
               </Button>
               
+              {/* Play/Pause button - slightly smaller on mobile */}
               <Button
                 variant="default"
                 size="icon"
                 onClick={onTogglePlay}
-                className="h-10 w-10"
+                className="h-9 w-9 md:h-10 md:w-10"
               >
                 {isPlaying ? (
                   <Pause className="h-5 w-5" />
@@ -360,21 +365,22 @@ export default function Player({
                 )}
               </Button>
               
+              {/* Next button - now visible on mobile with smaller size */}
               <Button
                 variant="ghost"
                 size="icon"
                 onClick={onNext}
-                className="hidden md:flex"
+                className="h-8 w-8 md:h-10 md:w-10"
               >
-                <SkipForward className="h-5 w-5" />
+                <SkipForward className="h-4 w-4 md:h-5 md:w-5" />
               </Button>
 
-              {/* Play Mode Toggle */}
+              {/* Play Mode Toggle - now visible on mobile with smaller size */}
               <Button
                 variant="ghost"
                 size="icon"
                 onClick={onTogglePlayMode}
-                className="hidden md:flex"
+                className="h-8 w-8 md:h-10 md:w-10"
                 title={
                   playMode === 'loop' 
                     ? 'Loop playlist' 
@@ -383,9 +389,9 @@ export default function Player({
                     : 'Repeat one'
                 }
               >
-                {playMode === 'loop' && <Repeat className="h-5 w-5" />}
-                {playMode === 'shuffle' && <Shuffle className="h-5 w-5" />}
-                {playMode === 'repeat-one' && <Repeat1 className="h-5 w-5" />}
+                {playMode === 'loop' && <Repeat className="h-4 w-4 md:h-5 md:w-5" />}
+                {playMode === 'shuffle' && <Shuffle className="h-4 w-4 md:h-5 md:w-5" />}
+                {playMode === 'repeat-one' && <Repeat1 className="h-4 w-4 md:h-5 md:w-5" />}
               </Button>
             </div>
 
@@ -450,6 +456,8 @@ export default function Player({
           showLyrics={showLyrics}
           onToggleLyrics={() => setShowLyrics(!showLyrics)}
           onSeek={handleSeek}
+          playMode={playMode}
+          onTogglePlayMode={onTogglePlayMode}
         />
       )}
     </>