feat: update Player component with new icons and adjust layout padding

This commit is contained in:
JSC
2025-08-04 10:28:01 +02:00
parent 6cbf0e5e6d
commit 671d034b9f

View File

@@ -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}