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:
1 parent
b0755b9063
commit
d77d9100fb
1 file changed
+18
-2
@@ -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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user