5c8f89675d
Show all queue entries (played and upcoming) in one list instead of splitting into a "Now playing" card + "Next up" tail, so previously played tracks don't disappear and reappear when navigating back/forward. The current track is outlined and shows a reusable "hopping bars" PlayingIndicator (modern-sk style equalizer animation) for future reuse across track lists.
23 lines
583 B
TypeScript
23 lines
583 B
TypeScript
/*
|
|
* "Hopping bars" equalizer indicator (YTM-style) shown next to the currently
|
|
* playing track. `animate` controls whether the bars bounce (playback active)
|
|
* or sit frozen at full height (paused). Reusable across track lists.
|
|
*/
|
|
interface Props {
|
|
animate?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function PlayingIndicator({ animate = true, className }: Props) {
|
|
return (
|
|
<span
|
|
className={`playing-bars${animate ? '' : ' paused'}${className ? ` ${className}` : ''}`}
|
|
aria-hidden="true"
|
|
>
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</span>
|
|
);
|
|
}
|