From 5e18d77e2910fa97f2884d6884875f71110f76c8 Mon Sep 17 00:00:00 2001 From: Kagamine Rin Date: Fri, 29 May 2026 20:46:05 -0400 Subject: [PATCH] feat: Marquee scrolling track name in player bar 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 +
+
+ {/* Play/Pause */} - + + {/* Stop */} + + + {/* Restart — ISO skip backwards to beginning */} + + + {/* Repeat — ISO repeat indefinitely with glowing toggle */} + + + {/* Time + Scrubber */} +
+ + {formatTime(currentTime)} + + +
+
+ {/* Scrubber handle */} +
+
+ + + {formatTime(duration)} + +
+ + {/* Track info with artwork */} +
+
+ { + // Fallback to treble clef on error + const target = e.target as HTMLImageElement + target.style.display = 'none' + const parent = target.parentElement + if (parent) { + parent.innerHTML = `𝄞` + } + }} + /> +
+ {/* Marquee scrolling track name */} +
+
+ {displayTitle} + + {displayTitle} +
+
+
+ + {/* Volume */} +
+ + +
+ + {/* Close */} +
- {/* Close */} - +
- -
+ ) }