From 671d034b9fc58f04a91f537aeaa915c08bbc88ce Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Mon, 4 Aug 2025 10:28:01 +0200
Subject: [PATCH] feat: update Player component with new icons and adjust
 layout padding

---
 src/components/player/Player.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx
index d8443dd..c97fedb 100644
--- a/src/components/player/Player.tsx
+++ b/src/components/player/Player.tsx
@@ -22,7 +22,9 @@ import {
   Music,
   ExternalLink,
   Download,
-  MoreVertical
+  MoreVertical,
+  ArrowRight,
+  ArrowRightToLine
 } from 'lucide-react'
 import { playerService, type PlayerState, type PlayerMode } from '@/lib/api/services/player'
 import { filesService } from '@/lib/api/services/files'
@@ -156,6 +158,8 @@ export function Player({ className }: PlayerProps) {
 
   const getModeIcon = () => {
     switch (state.mode) {
+      case 'continuous':
+        return <ArrowRight className='h-4 w-4' />
       case 'loop':
         return <Repeat className="h-4 w-4" />
       case 'loop_one':
@@ -163,7 +167,7 @@ export function Player({ className }: PlayerProps) {
       case 'random':
         return <Shuffle className="h-4 w-4" />
       default:
-        return <Repeat className="h-4 w-4 opacity-50" />
+        return <ArrowRightToLine className="h-4 w-4" />
     }
   }
 
@@ -179,7 +183,7 @@ export function Player({ className }: PlayerProps) {
   }
 
   const renderMinimizedPlayer = () => (
-    <Card className="w-48 bg-background/90 backdrop-blur-sm">
+    <Card className="w-48 bg-background/90 backdrop-blur-sm pt-0 pb-0">
       <CardContent className="p-2">
         <div className="flex items-center gap-1">
           <Button
@@ -236,10 +240,10 @@ export function Player({ className }: PlayerProps) {
   )
 
   const renderNormalPlayer = () => (
-    <Card className="w-80 bg-background/90 backdrop-blur-sm">
-      <CardContent className="p-4">
+    <Card className="w-80 bg-background/90 backdrop-blur-sm pt-3 pb-3">
+      <CardContent className="pt-0 pb-0 pl-3 pr-3">
         {/* Window Controls */}
-        <div className="flex items-center justify-end gap-1 mb-4 -mt-2 -mr-2">
+        <div className="flex items-center justify-end gap-1 pb-2">
           <Button
             size="sm"
             variant="ghost"
@@ -263,7 +267,7 @@ export function Player({ className }: PlayerProps) {
         {/* Album Art / Thumbnail */}
         <div className="mb-4">
           {state.current_sound?.thumbnail ? (
-            <div className="w-full aspect-square bg-muted rounded-lg flex items-center justify-center overflow-hidden">
+            <div className="w-full aspect-auto bg-muted rounded-lg flex items-center justify-center overflow-hidden">
               <img 
                 src={filesService.getThumbnailUrl(state.current_sound.id)} 
                 alt={state.current_sound.name}