The marquee animation was working but the text was still clipped by
overflow:hidden on both the parent container and the text div itself.
Added group-hover:overflow-visible to both containers so the full
text becomes visible when the marquee animation starts on hover.
The marquee scroll effect wasn't working because 'animate-marquee'
was defined as an inline CSS class, not a Tailwind utility. Tailwind's
JIT compiler strips unknown classes, so group-hover:animate-marquee
was being removed at build time.
Fix: Added 'marquee-scroll' keyframes and 'marquee' animation to
tailwind.config.js theme.extend. Now 'animate-marquee' is a proper
Tailwind utility that works with group-hover and responsive variants.
Also removed the inline <style> block from Player.tsx since the
animation is now handled by Tailwind.
Player.tsx:
- Track name now scrolls horizontally when hovered (marquee effect)
- Uses CSS @keyframes animation with duplicated text for seamless loop
- Animation duration scales with text length (min 6s, ~0.3s per char)
- Default state: truncate with ellipsis. Hover: whitespace-nowrap + animate
- Wrapped player in React fragment with inline <style> for keyframes
- Uses Tailwind group-hover to trigger animation only on hover
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.
Player.tsx updates:
- Repeat button: ISO repeat indefinitely icon with glowing toggle state.
When active: lyria-accent color, bg-lyria-accent/10, orange glow shadow.
When inactive: muted gray, hover to white. Toggles audio.loop.
- Skip to beginning: Now uses ISO skip-backwards icon (filled, two bars
pointing left) instead of circular arrow. Title: 'Skip to beginning'.
- Track end handler respects repeat state — if repeating, stays playing
and loops; if not, pauses as before.
- New state: isRepeating (useState), toggleRepeat function sets both
React state and audioRef.current.loop.
Player.tsx completely rewritten with professional controls:
- Play/Pause: large circular button with play/pause icons
- Stop: square icon, resets audio to 0 and pauses
- Restart: circular arrow, jumps to beginning and plays
- Time display: elapsed / total (M:SS format, tabular-nums)
- Scrubber: clickable progress bar with drag support
- Visual progress fill (lyria-accent)
- White scrubber handle on hover
- Mouse drag anywhere on page while holding
- Volume: mute toggle + range slider (0-1, step 0.01)
- Three volume icons: full, half, muted
- Custom styled range input with white thumb
- Track info: title or prompt (hidden on mobile)
- Close button: X icon
- All buttons have title tooltips
- Uses useRef for audio element, useState for UI state
- useCallback for seek handler, useEffect for drag events
- Responsive: track info hidden on small screens
rin.kagamine