feat: Add download button to player bar

Player.tsx: Download button added to the left of the album art thumbnail
in the track info section (hidden on mobile). Uses window.open() to trigger
browser download. Styled as text-lyria-muted/60 base, hover to lyria-accent.
Consistent with secondary action tier styling.
This commit is contained in:
rin.kagamine committed 2026-05-29 21:42:29 -04:00
1 parent 905201f239
commit 4ca89577d7
1 file changed
+9
+9
View File
@@ -254,6 +254,15 @@ export default function Player({ clip, isPlaying, onTogglePlay, onStop, onClose
{/* Track info with artwork */}
<div className="hidden sm:flex items-center gap-2.5 min-w-0 max-w-[220px] shrink-0">
<button
onClick={() => window.open(`/api/clips/${clip.id}/download`, '_blank')}
className="text-lyria-muted/60 hover:text-lyria-accent transition-colors shrink-0"
title="Download MP3"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</button>
<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`}