feat: update Player component with new icons and adjust layout padding
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user