62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
|
import { filesService } from '@/lib/api/services/files'
|
|
import type { PlayerState } from '@/lib/api/services/player'
|
|
import { cn } from '@/lib/utils'
|
|
import { Maximize2, Music } from 'lucide-react'
|
|
import { memo } from 'react'
|
|
|
|
interface CompactPlayerTrackInfoProps {
|
|
currentSound: PlayerState['current_sound']
|
|
playlistName?: string
|
|
onExpand: () => void
|
|
}
|
|
|
|
export const CompactPlayerTrackInfo = memo(function CompactPlayerTrackInfo({
|
|
currentSound,
|
|
playlistName,
|
|
onExpand,
|
|
}: CompactPlayerTrackInfoProps) {
|
|
return (
|
|
<div className="flex items-center gap-2 mb-3 px-1">
|
|
<div className="flex-shrink-0 w-8 h-8 bg-muted rounded flex items-center justify-center overflow-hidden">
|
|
{currentSound?.thumbnail ? (
|
|
<img
|
|
src={filesService.getThumbnailUrl(currentSound.id)}
|
|
alt={currentSound.name}
|
|
className="w-full h-full object-cover"
|
|
onError={e => {
|
|
// Hide image and show music icon if thumbnail fails to load
|
|
const target = e.target as HTMLImageElement
|
|
target.style.display = 'none'
|
|
const musicIcon = target.nextElementSibling as HTMLElement
|
|
if (musicIcon) musicIcon.style.display = 'block'
|
|
}}
|
|
/>
|
|
) : null}
|
|
<Music
|
|
className={cn(
|
|
'h-4 w-4 text-muted-foreground',
|
|
currentSound?.thumbnail ? 'hidden' : 'block',
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium truncate">
|
|
{currentSound?.name || 'No track selected'}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{playlistName}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={onExpand}
|
|
className="h-6 w-6 p-0 flex-shrink-0"
|
|
title="Expand Player"
|
|
>
|
|
<Maximize2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
)
|
|
}) |