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 <style> for keyframes - Uses Tailwind group-hover to trigger animation only on hover
This commit is contained in:
rin.kagamine committed
1 parent
56bb484fd9
commit
5e18d77e29
2 files changed
+226
-1
No files matched your search
@@ -0,0 +1,203 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="160" viewBox="0 0 800 160" preserveAspectRatio="none">
|
||||||
|
<rect width="800" height="160" fill="transparent" />
|
||||||
|
<rect x="0.00" y="35.55" width="3.00" height="88.90" fill="hsl(20.0, 75.0%, 40.0%)" rx="1.50" />
|
||||||
|
<rect x="4.00" y="31.19" width="3.00" height="97.62" fill="hsl(20.1, 75.1%, 40.1%)" rx="1.50" />
|
||||||
|
<rect x="8.01" y="26.67" width="3.00" height="106.66" fill="hsl(20.2, 75.2%, 40.2%)" rx="1.50" />
|
||||||
|
<rect x="12.02" y="35.08" width="3.00" height="89.85" fill="hsl(20.3, 75.2%, 40.3%)" rx="1.50" />
|
||||||
|
<rect x="16.02" y="39.55" width="3.00" height="80.90" fill="hsl(20.4, 75.3%, 40.4%)" rx="1.50" />
|
||||||
|
<rect x="20.02" y="27.25" width="3.00" height="105.49" fill="hsl(20.5, 75.4%, 40.5%)" rx="1.50" />
|
||||||
|
<rect x="24.03" y="27.83" width="3.00" height="104.33" fill="hsl(20.6, 75.5%, 40.6%)" rx="1.50" />
|
||||||
|
<rect x="28.04" y="35.60" width="3.00" height="88.79" fill="hsl(20.7, 75.5%, 40.7%)" rx="1.50" />
|
||||||
|
<rect x="32.04" y="34.78" width="3.00" height="90.43" fill="hsl(20.8, 75.6%, 40.8%)" rx="1.50" />
|
||||||
|
<rect x="36.05" y="38.61" width="3.00" height="82.78" fill="hsl(20.9, 75.7%, 40.9%)" rx="1.50" />
|
||||||
|
<rect x="40.05" y="32.92" width="3.00" height="94.17" fill="hsl(21.0, 75.8%, 41.0%)" rx="1.50" />
|
||||||
|
<rect x="44.05" y="26.34" width="3.00" height="107.33" fill="hsl(21.1, 75.8%, 41.1%)" rx="1.50" />
|
||||||
|
<rect x="48.06" y="31.61" width="3.00" height="96.79" fill="hsl(21.2, 75.9%, 41.2%)" rx="1.50" />
|
||||||
|
<rect x="52.06" y="29.07" width="3.00" height="101.85" fill="hsl(21.3, 76.0%, 41.3%)" rx="1.50" />
|
||||||
|
<rect x="56.07" y="27.05" width="3.00" height="105.91" fill="hsl(21.4, 76.1%, 41.4%)" rx="1.50" />
|
||||||
|
<rect x="60.07" y="30.57" width="3.00" height="98.86" fill="hsl(21.5, 76.1%, 41.5%)" rx="1.50" />
|
||||||
|
<rect x="64.08" y="28.02" width="3.00" height="103.96" fill="hsl(21.6, 76.2%, 41.6%)" rx="1.50" />
|
||||||
|
<rect x="68.08" y="25.83" width="3.00" height="108.33" fill="hsl(21.7, 76.3%, 41.7%)" rx="1.50" />
|
||||||
|
<rect x="72.09" y="24.07" width="3.00" height="111.85" fill="hsl(21.8, 76.4%, 41.8%)" rx="1.50" />
|
||||||
|
<rect x="76.09" y="23.15" width="3.00" height="113.71" fill="hsl(21.9, 76.4%, 41.9%)" rx="1.50" />
|
||||||
|
<rect x="80.10" y="29.81" width="3.00" height="100.38" fill="hsl(22.0, 76.5%, 42.0%)" rx="1.50" />
|
||||||
|
<rect x="84.11" y="29.87" width="3.00" height="100.26" fill="hsl(22.1, 76.6%, 42.1%)" rx="1.50" />
|
||||||
|
<rect x="88.11" y="24.43" width="3.00" height="111.14" fill="hsl(22.2, 76.7%, 42.2%)" rx="1.50" />
|
||||||
|
<rect x="92.11" y="27.48" width="3.00" height="105.04" fill="hsl(22.3, 76.7%, 42.3%)" rx="1.50" />
|
||||||
|
<rect x="96.12" y="27.64" width="3.00" height="104.72" fill="hsl(22.4, 76.8%, 42.4%)" rx="1.50" />
|
||||||
|
<rect x="100.12" y="29.99" width="3.00" height="100.02" fill="hsl(22.5, 76.9%, 42.5%)" rx="1.50" />
|
||||||
|
<rect x="104.13" y="37.70" width="3.00" height="84.60" fill="hsl(22.6, 77.0%, 42.6%)" rx="1.50" />
|
||||||
|
<rect x="108.13" y="30.71" width="3.00" height="98.58" fill="hsl(22.7, 77.0%, 42.7%)" rx="1.50" />
|
||||||
|
<rect x="112.14" y="25.17" width="3.00" height="109.66" fill="hsl(22.8, 77.1%, 42.8%)" rx="1.50" />
|
||||||
|
<rect x="116.14" y="29.45" width="3.00" height="101.10" fill="hsl(22.9, 77.2%, 42.9%)" rx="1.50" />
|
||||||
|
<rect x="120.15" y="31.57" width="3.00" height="96.85" fill="hsl(23.0, 77.3%, 43.0%)" rx="1.50" />
|
||||||
|
<rect x="124.16" y="36.84" width="3.00" height="86.33" fill="hsl(23.1, 77.3%, 43.1%)" rx="1.50" />
|
||||||
|
<rect x="128.16" y="33.24" width="3.00" height="93.51" fill="hsl(23.2, 77.4%, 43.2%)" rx="1.50" />
|
||||||
|
<rect x="132.16" y="28.66" width="3.00" height="102.68" fill="hsl(23.3, 77.5%, 43.3%)" rx="1.50" />
|
||||||
|
<rect x="136.17" y="37.60" width="3.00" height="84.81" fill="hsl(23.4, 77.6%, 43.4%)" rx="1.50" />
|
||||||
|
<rect x="140.17" y="35.57" width="3.00" height="88.86" fill="hsl(23.5, 77.6%, 43.5%)" rx="1.50" />
|
||||||
|
<rect x="144.18" y="25.94" width="3.00" height="108.12" fill="hsl(23.6, 77.7%, 43.6%)" rx="1.50" />
|
||||||
|
<rect x="148.19" y="29.30" width="3.00" height="101.41" fill="hsl(23.7, 77.8%, 43.7%)" rx="1.50" />
|
||||||
|
<rect x="152.19" y="31.05" width="3.00" height="97.90" fill="hsl(23.8, 77.9%, 43.8%)" rx="1.50" />
|
||||||
|
<rect x="156.19" y="25.11" width="3.00" height="109.78" fill="hsl(23.9, 77.9%, 43.9%)" rx="1.50" />
|
||||||
|
<rect x="160.20" y="22.30" width="3.00" height="115.41" fill="hsl(24.0, 78.0%, 44.0%)" rx="1.50" />
|
||||||
|
<rect x="164.20" y="23.03" width="3.00" height="113.93" fill="hsl(24.1, 78.1%, 44.1%)" rx="1.50" />
|
||||||
|
<rect x="168.21" y="23.27" width="3.00" height="113.45" fill="hsl(24.2, 78.2%, 44.2%)" rx="1.50" />
|
||||||
|
<rect x="172.22" y="20.35" width="3.00" height="119.29" fill="hsl(24.3, 78.2%, 44.3%)" rx="1.50" />
|
||||||
|
<rect x="176.22" y="21.98" width="3.00" height="116.05" fill="hsl(24.4, 78.3%, 44.4%)" rx="1.50" />
|
||||||
|
<rect x="180.22" y="29.85" width="3.00" height="100.29" fill="hsl(24.5, 78.4%, 44.5%)" rx="1.50" />
|
||||||
|
<rect x="184.23" y="29.72" width="3.00" height="100.56" fill="hsl(24.6, 78.5%, 44.6%)" rx="1.50" />
|
||||||
|
<rect x="188.23" y="29.20" width="3.00" height="101.60" fill="hsl(24.7, 78.5%, 44.7%)" rx="1.50" />
|
||||||
|
<rect x="192.24" y="39.90" width="3.00" height="80.19" fill="hsl(24.8, 78.6%, 44.8%)" rx="1.50" />
|
||||||
|
<rect x="196.25" y="37.47" width="3.00" height="85.06" fill="hsl(24.9, 78.7%, 44.9%)" rx="1.50" />
|
||||||
|
<rect x="200.25" y="25.53" width="3.00" height="108.95" fill="hsl(25.0, 78.8%, 45.0%)" rx="1.50" />
|
||||||
|
<rect x="204.25" y="26.92" width="3.00" height="106.16" fill="hsl(25.1, 78.8%, 45.1%)" rx="1.50" />
|
||||||
|
<rect x="208.26" y="29.65" width="3.00" height="100.70" fill="hsl(25.2, 78.9%, 45.2%)" rx="1.50" />
|
||||||
|
<rect x="212.26" y="30.74" width="3.00" height="98.52" fill="hsl(25.3, 79.0%, 45.3%)" rx="1.50" />
|
||||||
|
<rect x="216.27" y="39.28" width="3.00" height="81.43" fill="hsl(25.4, 79.1%, 45.4%)" rx="1.50" />
|
||||||
|
<rect x="220.28" y="46.51" width="3.00" height="66.98" fill="hsl(25.5, 79.1%, 45.5%)" rx="1.50" />
|
||||||
|
<rect x="224.28" y="42.64" width="3.00" height="74.73" fill="hsl(25.6, 79.2%, 45.6%)" rx="1.50" />
|
||||||
|
<rect x="228.28" y="31.88" width="3.00" height="96.24" fill="hsl(25.7, 79.3%, 45.7%)" rx="1.50" />
|
||||||
|
<rect x="232.29" y="25.33" width="3.00" height="109.35" fill="hsl(25.8, 79.4%, 45.8%)" rx="1.50" />
|
||||||
|
<rect x="236.29" y="30.68" width="3.00" height="98.65" fill="hsl(25.9, 79.4%, 45.9%)" rx="1.50" />
|
||||||
|
<rect x="240.30" y="31.00" width="3.00" height="98.00" fill="hsl(26.0, 79.5%, 46.0%)" rx="1.50" />
|
||||||
|
<rect x="244.31" y="31.70" width="3.00" height="96.61" fill="hsl(26.1, 79.6%, 46.1%)" rx="1.50" />
|
||||||
|
<rect x="248.31" y="47.86" width="3.00" height="64.28" fill="hsl(26.2, 79.7%, 46.2%)" rx="1.50" />
|
||||||
|
<rect x="252.31" y="58.17" width="3.00" height="43.67" fill="hsl(26.3, 79.7%, 46.3%)" rx="1.50" />
|
||||||
|
<rect x="256.32" y="58.49" width="3.00" height="43.02" fill="hsl(26.4, 79.8%, 46.4%)" rx="1.50" />
|
||||||
|
<rect x="260.32" y="47.94" width="3.00" height="64.11" fill="hsl(26.5, 79.9%, 46.5%)" rx="1.50" />
|
||||||
|
<rect x="264.33" y="32.04" width="3.00" height="95.91" fill="hsl(26.6, 80.0%, 46.6%)" rx="1.50" />
|
||||||
|
<rect x="268.33" y="31.31" width="3.00" height="97.37" fill="hsl(26.7, 80.1%, 46.7%)" rx="1.50" />
|
||||||
|
<rect x="272.34" y="32.01" width="3.00" height="95.98" fill="hsl(26.8, 80.1%, 46.8%)" rx="1.50" />
|
||||||
|
<rect x="276.34" y="24.45" width="3.00" height="111.11" fill="hsl(26.9, 80.2%, 46.9%)" rx="1.50" />
|
||||||
|
<rect x="280.35" y="25.70" width="3.00" height="108.60" fill="hsl(27.0, 80.3%, 47.0%)" rx="1.50" />
|
||||||
|
<rect x="284.36" y="25.68" width="3.00" height="108.64" fill="hsl(27.1, 80.4%, 47.1%)" rx="1.50" />
|
||||||
|
<rect x="288.36" y="22.09" width="3.00" height="115.83" fill="hsl(27.2, 80.4%, 47.2%)" rx="1.50" />
|
||||||
|
<rect x="292.37" y="31.12" width="3.00" height="97.76" fill="hsl(27.3, 80.5%, 47.3%)" rx="1.50" />
|
||||||
|
<rect x="296.37" y="31.77" width="3.00" height="96.45" fill="hsl(27.4, 80.6%, 47.4%)" rx="1.50" />
|
||||||
|
<rect x="300.38" y="23.95" width="3.00" height="112.09" fill="hsl(27.5, 80.7%, 47.5%)" rx="1.50" />
|
||||||
|
<rect x="304.38" y="27.97" width="3.00" height="104.07" fill="hsl(27.6, 80.7%, 47.6%)" rx="1.50" />
|
||||||
|
<rect x="308.38" y="26.46" width="3.00" height="107.07" fill="hsl(27.7, 80.8%, 47.7%)" rx="1.50" />
|
||||||
|
<rect x="312.39" y="23.44" width="3.00" height="113.13" fill="hsl(27.8, 80.9%, 47.8%)" rx="1.50" />
|
||||||
|
<rect x="316.39" y="29.16" width="3.00" height="101.67" fill="hsl(27.9, 81.0%, 47.9%)" rx="1.50" />
|
||||||
|
<rect x="320.40" y="26.08" width="3.00" height="107.83" fill="hsl(28.0, 81.0%, 48.0%)" rx="1.50" />
|
||||||
|
<rect x="324.40" y="27.20" width="3.00" height="105.60" fill="hsl(28.1, 81.1%, 48.1%)" rx="1.50" />
|
||||||
|
<rect x="328.41" y="34.91" width="3.00" height="90.19" fill="hsl(28.2, 81.2%, 48.2%)" rx="1.50" />
|
||||||
|
<rect x="332.41" y="30.60" width="3.00" height="98.81" fill="hsl(28.3, 81.3%, 48.3%)" rx="1.50" />
|
||||||
|
<rect x="336.42" y="21.95" width="3.00" height="116.11" fill="hsl(28.4, 81.3%, 48.4%)" rx="1.50" />
|
||||||
|
<rect x="340.43" y="18.94" width="3.00" height="122.12" fill="hsl(28.5, 81.4%, 48.5%)" rx="1.50" />
|
||||||
|
<rect x="344.43" y="21.07" width="3.00" height="117.85" fill="hsl(28.6, 81.5%, 48.6%)" rx="1.50" />
|
||||||
|
<rect x="348.44" y="23.23" width="3.00" height="113.53" fill="hsl(28.7, 81.6%, 48.7%)" rx="1.50" />
|
||||||
|
<rect x="352.44" y="22.88" width="3.00" height="114.24" fill="hsl(28.8, 81.6%, 48.8%)" rx="1.50" />
|
||||||
|
<rect x="356.44" y="22.67" width="3.00" height="114.67" fill="hsl(28.9, 81.7%, 48.9%)" rx="1.50" />
|
||||||
|
<rect x="360.45" y="27.57" width="3.00" height="104.86" fill="hsl(29.0, 81.8%, 49.0%)" rx="1.50" />
|
||||||
|
<rect x="364.45" y="27.42" width="3.00" height="105.16" fill="hsl(29.1, 81.9%, 49.1%)" rx="1.50" />
|
||||||
|
<rect x="368.46" y="23.05" width="3.00" height="113.90" fill="hsl(29.2, 81.9%, 49.2%)" rx="1.50" />
|
||||||
|
<rect x="372.46" y="23.94" width="3.00" height="112.12" fill="hsl(29.3, 82.0%, 49.3%)" rx="1.50" />
|
||||||
|
<rect x="376.47" y="23.67" width="3.00" height="112.67" fill="hsl(29.4, 82.1%, 49.4%)" rx="1.50" />
|
||||||
|
<rect x="380.47" y="27.06" width="3.00" height="105.88" fill="hsl(29.5, 82.2%, 49.5%)" rx="1.50" />
|
||||||
|
<rect x="384.48" y="27.64" width="3.00" height="104.72" fill="hsl(29.6, 82.2%, 49.6%)" rx="1.50" />
|
||||||
|
<rect x="388.49" y="24.98" width="3.00" height="110.05" fill="hsl(29.7, 82.3%, 49.7%)" rx="1.50" />
|
||||||
|
<rect x="392.49" y="31.74" width="3.00" height="96.51" fill="hsl(29.8, 82.4%, 49.8%)" rx="1.50" />
|
||||||
|
<rect x="396.50" y="29.69" width="3.00" height="100.61" fill="hsl(29.9, 82.5%, 49.9%)" rx="1.50" />
|
||||||
|
<rect x="400.50" y="21.18" width="3.00" height="117.64" fill="hsl(30.1, 82.5%, 50.1%)" rx="1.50" />
|
||||||
|
<rect x="404.50" y="27.87" width="3.00" height="104.26" fill="hsl(30.2, 82.6%, 50.2%)" rx="1.50" />
|
||||||
|
<rect x="408.51" y="30.77" width="3.00" height="98.47" fill="hsl(30.3, 82.7%, 50.3%)" rx="1.50" />
|
||||||
|
<rect x="412.51" y="25.67" width="3.00" height="108.66" fill="hsl(30.4, 82.8%, 50.4%)" rx="1.50" />
|
||||||
|
<rect x="416.52" y="29.54" width="3.00" height="100.92" fill="hsl(30.5, 82.8%, 50.5%)" rx="1.50" />
|
||||||
|
<rect x="420.52" y="29.84" width="3.00" height="100.32" fill="hsl(30.6, 82.9%, 50.6%)" rx="1.50" />
|
||||||
|
<rect x="424.53" y="25.31" width="3.00" height="109.39" fill="hsl(30.7, 83.0%, 50.7%)" rx="1.50" />
|
||||||
|
<rect x="428.53" y="24.09" width="3.00" height="111.82" fill="hsl(30.8, 83.1%, 50.8%)" rx="1.50" />
|
||||||
|
<rect x="432.54" y="19.67" width="3.00" height="120.65" fill="hsl(30.9, 83.1%, 50.9%)" rx="1.50" />
|
||||||
|
<rect x="436.55" y="19.64" width="3.00" height="120.72" fill="hsl(31.0, 83.2%, 51.0%)" rx="1.50" />
|
||||||
|
<rect x="440.55" y="23.29" width="3.00" height="113.42" fill="hsl(31.1, 83.3%, 51.1%)" rx="1.50" />
|
||||||
|
<rect x="444.56" y="20.02" width="3.00" height="119.95" fill="hsl(31.2, 83.4%, 51.2%)" rx="1.50" />
|
||||||
|
<rect x="448.56" y="28.50" width="3.00" height="103.01" fill="hsl(31.3, 83.4%, 51.3%)" rx="1.50" />
|
||||||
|
<rect x="452.56" y="35.68" width="3.00" height="88.63" fill="hsl(31.4, 83.5%, 51.4%)" rx="1.50" />
|
||||||
|
<rect x="456.57" y="26.31" width="3.00" height="107.39" fill="hsl(31.5, 83.6%, 51.5%)" rx="1.50" />
|
||||||
|
<rect x="460.57" y="27.51" width="3.00" height="104.97" fill="hsl(31.6, 83.7%, 51.6%)" rx="1.50" />
|
||||||
|
<rect x="464.58" y="27.33" width="3.00" height="105.34" fill="hsl(31.7, 83.7%, 51.7%)" rx="1.50" />
|
||||||
|
<rect x="468.58" y="25.73" width="3.00" height="108.54" fill="hsl(31.8, 83.8%, 51.8%)" rx="1.50" />
|
||||||
|
<rect x="472.59" y="30.94" width="3.00" height="98.12" fill="hsl(31.9, 83.9%, 51.9%)" rx="1.50" />
|
||||||
|
<rect x="476.59" y="24.98" width="3.00" height="110.03" fill="hsl(32.0, 84.0%, 52.0%)" rx="1.50" />
|
||||||
|
<rect x="480.60" y="22.15" width="3.00" height="115.70" fill="hsl(32.1, 84.0%, 52.1%)" rx="1.50" />
|
||||||
|
<rect x="484.60" y="25.20" width="3.00" height="109.60" fill="hsl(32.2, 84.1%, 52.2%)" rx="1.50" />
|
||||||
|
<rect x="488.61" y="21.23" width="3.00" height="117.53" fill="hsl(32.3, 84.2%, 52.3%)" rx="1.50" />
|
||||||
|
<rect x="492.62" y="28.48" width="3.00" height="103.05" fill="hsl(32.4, 84.3%, 52.4%)" rx="1.50" />
|
||||||
|
<rect x="496.62" y="37.57" width="3.00" height="84.86" fill="hsl(32.5, 84.3%, 52.5%)" rx="1.50" />
|
||||||
|
<rect x="500.62" y="27.42" width="3.00" height="105.16" fill="hsl(32.6, 84.4%, 52.6%)" rx="1.50" />
|
||||||
|
<rect x="504.63" y="28.14" width="3.00" height="103.71" fill="hsl(32.7, 84.5%, 52.7%)" rx="1.50" />
|
||||||
|
<rect x="508.63" y="34.83" width="3.00" height="90.35" fill="hsl(32.8, 84.6%, 52.8%)" rx="1.50" />
|
||||||
|
<rect x="512.64" y="27.16" width="3.00" height="105.68" fill="hsl(32.9, 84.6%, 52.9%)" rx="1.50" />
|
||||||
|
<rect x="516.64" y="21.34" width="3.00" height="117.32" fill="hsl(33.0, 84.7%, 53.0%)" rx="1.50" />
|
||||||
|
<rect x="520.65" y="20.20" width="3.00" height="119.59" fill="hsl(33.1, 84.8%, 53.1%)" rx="1.50" />
|
||||||
|
<rect x="524.65" y="20.38" width="3.00" height="119.24" fill="hsl(33.2, 84.9%, 53.2%)" rx="1.50" />
|
||||||
|
<rect x="528.66" y="19.35" width="3.00" height="121.29" fill="hsl(33.3, 84.9%, 53.3%)" rx="1.50" />
|
||||||
|
<rect x="532.66" y="18.72" width="3.00" height="122.57" fill="hsl(33.4, 85.0%, 53.4%)" rx="1.50" />
|
||||||
|
<rect x="536.67" y="27.26" width="3.00" height="105.47" fill="hsl(33.5, 85.1%, 53.5%)" rx="1.50" />
|
||||||
|
<rect x="540.67" y="33.52" width="3.00" height="92.97" fill="hsl(33.6, 85.2%, 53.6%)" rx="1.50" />
|
||||||
|
<rect x="544.68" y="28.76" width="3.00" height="102.48" fill="hsl(33.7, 85.3%, 53.7%)" rx="1.50" />
|
||||||
|
<rect x="548.68" y="31.36" width="3.00" height="97.28" fill="hsl(33.8, 85.3%, 53.8%)" rx="1.50" />
|
||||||
|
<rect x="552.69" y="29.15" width="3.00" height="101.69" fill="hsl(33.9, 85.4%, 53.9%)" rx="1.50" />
|
||||||
|
<rect x="556.69" y="23.29" width="3.00" height="113.43" fill="hsl(34.0, 85.5%, 54.0%)" rx="1.50" />
|
||||||
|
<rect x="560.70" y="31.76" width="3.00" height="96.48" fill="hsl(34.1, 85.6%, 54.1%)" rx="1.50" />
|
||||||
|
<rect x="564.71" y="31.69" width="3.00" height="96.62" fill="hsl(34.2, 85.6%, 54.2%)" rx="1.50" />
|
||||||
|
<rect x="568.71" y="25.55" width="3.00" height="108.91" fill="hsl(34.3, 85.7%, 54.3%)" rx="1.50" />
|
||||||
|
<rect x="572.72" y="27.55" width="3.00" height="104.90" fill="hsl(34.4, 85.8%, 54.4%)" rx="1.50" />
|
||||||
|
<rect x="576.72" y="25.62" width="3.00" height="108.75" fill="hsl(34.5, 85.9%, 54.5%)" rx="1.50" />
|
||||||
|
<rect x="580.73" y="26.87" width="3.00" height="106.27" fill="hsl(34.6, 85.9%, 54.6%)" rx="1.50" />
|
||||||
|
<rect x="584.73" y="32.35" width="3.00" height="95.29" fill="hsl(34.7, 86.0%, 54.7%)" rx="1.50" />
|
||||||
|
<rect x="588.74" y="26.61" width="3.00" height="106.77" fill="hsl(34.8, 86.1%, 54.8%)" rx="1.50" />
|
||||||
|
<rect x="592.74" y="29.58" width="3.00" height="100.83" fill="hsl(34.9, 86.2%, 54.9%)" rx="1.50" />
|
||||||
|
<rect x="596.75" y="38.03" width="3.00" height="83.94" fill="hsl(35.0, 86.2%, 55.0%)" rx="1.50" />
|
||||||
|
<rect x="600.75" y="30.11" width="3.00" height="99.78" fill="hsl(35.1, 86.3%, 55.1%)" rx="1.50" />
|
||||||
|
<rect x="604.75" y="25.96" width="3.00" height="108.07" fill="hsl(35.2, 86.4%, 55.2%)" rx="1.50" />
|
||||||
|
<rect x="608.76" y="23.97" width="3.00" height="112.07" fill="hsl(35.3, 86.5%, 55.3%)" rx="1.50" />
|
||||||
|
<rect x="612.76" y="18.67" width="3.00" height="122.66" fill="hsl(35.4, 86.5%, 55.4%)" rx="1.50" />
|
||||||
|
<rect x="616.77" y="24.73" width="3.00" height="110.55" fill="hsl(35.5, 86.6%, 55.5%)" rx="1.50" />
|
||||||
|
<rect x="620.77" y="28.88" width="3.00" height="102.25" fill="hsl(35.6, 86.7%, 55.6%)" rx="1.50" />
|
||||||
|
<rect x="624.78" y="25.45" width="3.00" height="109.10" fill="hsl(35.7, 86.8%, 55.7%)" rx="1.50" />
|
||||||
|
<rect x="628.78" y="22.30" width="3.00" height="115.39" fill="hsl(35.8, 86.8%, 55.8%)" rx="1.50" />
|
||||||
|
<rect x="632.79" y="21.79" width="3.00" height="116.41" fill="hsl(35.9, 86.9%, 55.9%)" rx="1.50" />
|
||||||
|
<rect x="636.79" y="29.28" width="3.00" height="101.45" fill="hsl(36.0, 87.0%, 56.0%)" rx="1.50" />
|
||||||
|
<rect x="640.80" y="32.65" width="3.00" height="94.69" fill="hsl(36.1, 87.1%, 56.1%)" rx="1.50" />
|
||||||
|
<rect x="644.80" y="34.43" width="3.00" height="91.14" fill="hsl(36.2, 87.1%, 56.2%)" rx="1.50" />
|
||||||
|
<rect x="648.81" y="43.61" width="3.00" height="72.78" fill="hsl(36.3, 87.2%, 56.3%)" rx="1.50" />
|
||||||
|
<rect x="652.81" y="36.23" width="3.00" height="87.55" fill="hsl(36.4, 87.3%, 56.4%)" rx="1.50" />
|
||||||
|
<rect x="656.82" y="23.66" width="3.00" height="112.68" fill="hsl(36.5, 87.4%, 56.5%)" rx="1.50" />
|
||||||
|
<rect x="660.82" y="30.37" width="3.00" height="99.26" fill="hsl(36.6, 87.4%, 56.6%)" rx="1.50" />
|
||||||
|
<rect x="664.83" y="31.37" width="3.00" height="97.25" fill="hsl(36.7, 87.5%, 56.7%)" rx="1.50" />
|
||||||
|
<rect x="668.84" y="23.77" width="3.00" height="112.46" fill="hsl(36.8, 87.6%, 56.8%)" rx="1.50" />
|
||||||
|
<rect x="672.84" y="26.13" width="3.00" height="107.73" fill="hsl(36.9, 87.7%, 56.9%)" rx="1.50" />
|
||||||
|
<rect x="676.85" y="23.89" width="3.00" height="112.22" fill="hsl(37.0, 87.7%, 57.0%)" rx="1.50" />
|
||||||
|
<rect x="680.85" y="18.14" width="3.00" height="123.73" fill="hsl(37.1, 87.8%, 57.1%)" rx="1.50" />
|
||||||
|
<rect x="684.86" y="21.94" width="3.00" height="116.12" fill="hsl(37.2, 87.9%, 57.2%)" rx="1.50" />
|
||||||
|
<rect x="688.86" y="23.32" width="3.00" height="113.35" fill="hsl(37.3, 88.0%, 57.3%)" rx="1.50" />
|
||||||
|
<rect x="692.87" y="19.47" width="3.00" height="121.05" fill="hsl(37.4, 88.0%, 57.4%)" rx="1.50" />
|
||||||
|
<rect x="696.87" y="15.33" width="3.00" height="129.33" fill="hsl(37.5, 88.1%, 57.5%)" rx="1.50" />
|
||||||
|
<rect x="700.88" y="11.25" width="3.00" height="137.50" fill="hsl(37.6, 88.2%, 57.6%)" rx="1.50" />
|
||||||
|
<rect x="704.88" y="14.74" width="3.00" height="130.53" fill="hsl(37.7, 88.3%, 57.7%)" rx="1.50" />
|
||||||
|
<rect x="708.88" y="22.14" width="3.00" height="115.73" fill="hsl(37.8, 88.3%, 57.8%)" rx="1.50" />
|
||||||
|
<rect x="712.89" y="26.17" width="3.00" height="107.66" fill="hsl(37.9, 88.4%, 57.9%)" rx="1.50" />
|
||||||
|
<rect x="716.89" y="33.12" width="3.00" height="93.75" fill="hsl(38.0, 88.5%, 58.0%)" rx="1.50" />
|
||||||
|
<rect x="720.90" y="32.82" width="3.00" height="94.36" fill="hsl(38.1, 88.6%, 58.1%)" rx="1.50" />
|
||||||
|
<rect x="724.90" y="25.24" width="3.00" height="109.52" fill="hsl(38.2, 88.6%, 58.2%)" rx="1.50" />
|
||||||
|
<rect x="728.91" y="25.00" width="3.00" height="109.99" fill="hsl(38.3, 88.7%, 58.3%)" rx="1.50" />
|
||||||
|
<rect x="732.91" y="25.18" width="3.00" height="109.63" fill="hsl(38.4, 88.8%, 58.4%)" rx="1.50" />
|
||||||
|
<rect x="736.92" y="30.88" width="3.00" height="98.23" fill="hsl(38.5, 88.9%, 58.5%)" rx="1.50" />
|
||||||
|
<rect x="740.92" y="37.39" width="3.00" height="85.23" fill="hsl(38.6, 88.9%, 58.6%)" rx="1.50" />
|
||||||
|
<rect x="744.93" y="34.58" width="3.00" height="90.83" fill="hsl(38.7, 89.0%, 58.7%)" rx="1.50" />
|
||||||
|
<rect x="748.93" y="36.50" width="3.00" height="87.01" fill="hsl(38.8, 89.1%, 58.8%)" rx="1.50" />
|
||||||
|
<rect x="752.94" y="32.54" width="3.00" height="94.92" fill="hsl(38.9, 89.2%, 58.9%)" rx="1.50" />
|
||||||
|
<rect x="756.94" y="22.29" width="3.00" height="115.42" fill="hsl(39.0, 89.2%, 59.0%)" rx="1.50" />
|
||||||
|
<rect x="760.95" y="28.23" width="3.00" height="103.54" fill="hsl(39.1, 89.3%, 59.1%)" rx="1.50" />
|
||||||
|
<rect x="764.95" y="34.09" width="3.00" height="91.81" fill="hsl(39.2, 89.4%, 59.2%)" rx="1.50" />
|
||||||
|
<rect x="768.96" y="27.24" width="3.00" height="105.51" fill="hsl(39.3, 89.5%, 59.3%)" rx="1.50" />
|
||||||
|
<rect x="772.97" y="27.25" width="3.00" height="105.49" fill="hsl(39.4, 89.5%, 59.4%)" rx="1.50" />
|
||||||
|
<rect x="776.97" y="26.94" width="3.00" height="106.11" fill="hsl(39.5, 89.6%, 59.5%)" rx="1.50" />
|
||||||
|
<rect x="780.98" y="19.45" width="3.00" height="121.11" fill="hsl(39.6, 89.7%, 59.6%)" rx="1.50" />
|
||||||
|
<rect x="784.98" y="19.06" width="3.00" height="121.88" fill="hsl(39.7, 89.8%, 59.7%)" rx="1.50" />
|
||||||
|
<rect x="788.99" y="20.95" width="3.00" height="118.10" fill="hsl(39.8, 89.8%, 59.8%)" rx="1.50" />
|
||||||
|
<rect x="792.99" y="28.36" width="3.00" height="103.28" fill="hsl(39.9, 89.9%, 59.9%)" rx="1.50" />
|
||||||
|
<rect x="797.00" y="36.33" width="3.00" height="87.34" fill="hsl(40.0, 90.0%, 60.0%)" rx="1.50" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 20 KiB |
@@ -163,8 +163,19 @@ export default function Player({ clip, isPlaying, onTogglePlay, onStop, onClose
|
|||||||
|
|
||||||
const progress = duration > 0 ? (currentTime / duration) * 100 : 0
|
const progress = duration > 0 ? (currentTime / duration) * 100 : 0
|
||||||
const displayTitle = clip.title || clip.prompt
|
const displayTitle = clip.title || clip.prompt
|
||||||
|
const marqueeDuration = Math.max(6, displayTitle.length * 0.3)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<style>{`
|
||||||
|
@keyframes marquee-scroll {
|
||||||
|
0% { transform: translateX(0); }
|
||||||
|
100% { transform: translateX(-50%); }
|
||||||
|
}
|
||||||
|
.animate-marquee {
|
||||||
|
animation: marquee-scroll linear infinite;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
<div className="fixed bottom-0 left-0 right-0 bg-lyria-panel border-t border-white/10 px-4 py-3 z-40">
|
<div className="fixed bottom-0 left-0 right-0 bg-lyria-panel border-t border-white/10 px-4 py-3 z-40">
|
||||||
<div className="max-w-6xl mx-auto flex items-center gap-3">
|
<div className="max-w-6xl mx-auto flex items-center gap-3">
|
||||||
{/* Play/Pause */}
|
{/* Play/Pause */}
|
||||||
@@ -268,7 +279,17 @@ export default function Player({ clip, isPlaying, onTogglePlay, onStop, onClose
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-white truncate">{displayTitle}</p>
|
{/* Marquee scrolling track name */}
|
||||||
|
<div className="overflow-hidden flex-1 min-w-0 group">
|
||||||
|
<div
|
||||||
|
className="text-xs text-white truncate group-hover:whitespace-nowrap group-hover:animate-marquee"
|
||||||
|
style={{ animationDuration: `${marqueeDuration}s` }}
|
||||||
|
>
|
||||||
|
{displayTitle}
|
||||||
|
<span className="inline-block w-8" />
|
||||||
|
{displayTitle}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Volume */}
|
{/* Volume */}
|
||||||
@@ -329,5 +350,6 @@ export default function Player({ clip, isPlaying, onTogglePlay, onStop, onClose
|
|||||||
className="hidden"
|
className="hidden"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user