quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
JSC
2025-08-04 10:28:01 +02:00
parent 6cbf0e5e6d
commit 671d034b9f
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/player/Player.tsx
View File

@@ -22,7 +22,9 @@ import {
Music, Music,
ExternalLink, ExternalLink,
Download, Download,
MoreVertical MoreVertical,
ArrowRight,
ArrowRightToLine
} from 'lucide-react' } from 'lucide-react'
import { playerService, type PlayerState, type PlayerMode } from '@/lib/api/services/player' import { playerService, type PlayerState, type PlayerMode } from '@/lib/api/services/player'
import { filesService } from '@/lib/api/services/files' import { filesService } from '@/lib/api/services/files'
@@ -156,6 +158,8 @@ export function Player({ className }: PlayerProps) {
const getModeIcon = () => { const getModeIcon = () => {
switch (state.mode) { switch (state.mode) {
case 'continuous':
return <ArrowRight className='h-4 w-4' />
case 'loop': case 'loop':
return <Repeat className="h-4 w-4" /> return <Repeat className="h-4 w-4" />
case 'loop_one': case 'loop_one':
@@ -163,7 +167,7 @@ export function Player({ className }: PlayerProps) {
case 'random': case 'random':
return <Shuffle className="h-4 w-4" /> return <Shuffle className="h-4 w-4" />
default: 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 = () => ( 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"> <CardContent className="p-2">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Button <Button
@@ -236,10 +240,10 @@ export function Player({ className }: PlayerProps) {
) )
const renderNormalPlayer = () => ( const renderNormalPlayer = () => (
<Card className="w-80 bg-background/90 backdrop-blur-sm"> <Card className="w-80 bg-background/90 backdrop-blur-sm pt-3 pb-3">
<CardContent className="p-4"> <CardContent className="pt-0 pb-0 pl-3 pr-3">
{/* Window Controls */} {/* 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 <Button
size="sm" size="sm"
variant="ghost" variant="ghost"
@@ -263,7 +267,7 @@ export function Player({ className }: PlayerProps) {
{/* Album Art / Thumbnail */} {/* Album Art / Thumbnail */}
<div className="mb-4"> <div className="mb-4">
{state.current_sound?.thumbnail ? ( {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 <img
src={filesService.getThumbnailUrl(state.current_sound.id)} src={filesService.getThumbnailUrl(state.current_sound.id)}
alt={state.current_sound.name} alt={state.current_sound.name}