feat: Add album art thumbnail to player bar

Player.tsx track info section now shows a 32x32 album art thumbnail
left of the track name. Uses the clip's artwork endpoint with an
onError fallback to the treble clef placeholder (same SVG text
approach as gallery placeholders). Hidden on mobile (sm breakpoint).
Layout: flex row with 10px gap between thumbnail and title text.
This commit is contained in:
rin.kagamine committed 2026-05-29 20:36:57 -04:00
1 parent b0755b9063
commit d77d9100fb
1 file changed
+18 -2
+18 -2
View File
@@ -250,8 +250,24 @@ export default function Player({ clip, isPlaying, onTogglePlay, onStop, onClose
</span>
</div>
{/* Track info */}
<div className="hidden sm:block min-w-0 max-w-[200px]">
{/* Track info with artwork */}
<div className="hidden sm:flex items-center gap-2.5 min-w-0 max-w-[220px] shrink-0">
<div className="w-8 h-8 rounded bg-white/5 flex items-center justify-center shrink-0 overflow-hidden">
<img
src={`/api/clips/${clip.id}/artwork`}
alt=""
className="w-full h-full object-cover"
onError={(e) => {
// Fallback to treble clef on error
const target = e.target as HTMLImageElement
target.style.display = 'none'
const parent = target.parentElement
if (parent) {
parent.innerHTML = `<svg class='w-4 h-4 text-lyria-accent/40' viewBox='0 0 24 24'><text x='12' y='19' text-anchor='middle' font-size='16' fill='currentColor'>𝄞</text></svg>`
}
}}
/>
</div>
<p className="text-xs text-white truncate">{displayTitle}</p>
</div>