in src/frontends/live_api_react/frontend/src/components/audio-pulse/AudioPulse.tsx [30:64]
export default function AudioPulse({ active, volume, hover }: AudioPulseProps) {
const lines = useRef<HTMLDivElement[]>([]);
useEffect(() => {
let timeout: number | null = null;
const update = () => {
lines.current.forEach(
(line, i) =>
(line.style.height = `${Math.min(
24,
4 + volume * (i === 1 ? 400 : 60),
)}px`),
);
timeout = window.setTimeout(update, 100);
};
update();
return () => clearTimeout((timeout as number)!);
}, [volume]);
return (
<div className={c("audioPulse", { active, hover })}>
{Array(lineCount)
.fill(null)
.map((_, i) => (
<div
key={i}
ref={(el) => (lines.current[i] = el!)}
style={{ animationDelay: `${i * 133}ms` }}
/>
))}
</div>
);
}