4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T11dc,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; interface WaveformProps extends React.HTMLAttributes { audioSrc?: string; bars?: number; intensity?: "low" | "medium" | "high"; label?: string; playing?: boolean; variant?: "default" | "success" | "warning" | "danger"; } const variantColor: Record = { danger: "bg-red-500", default: "bg-primary", success: "bg-green-500", warning: "bg-amber-500", }; const variantGlow: Record = { danger: "shadow-[0_0_6px_rgba(239,68,68,0.5)]", default: "shadow-[0_0_6px_var(--primary)]", success: "shadow-[0_0_6px_rgba(34,197,94,0.5)]", warning: "shadow-[0_0_6px_rgba(245,158,11,0.5)]", }; const intensityRange = { high: { max: 48, min: 14 }, low: { max: 28, min: 8 }, medium: { max: 40, min: 10 }, }; const CONTAINER_HEIGHT = 52; export function Waveform({ bars = 24, playing = true, variant = "default", label, intensity = "medium", audioSrc, className, ...props }: WaveformProps) { const [heights, setHeights] = React.useState(() => Array.from({ length: bars }, () => 4) ); const rafRef = React.useRef(0); const frameRef = React.useRef(0); const audioRef = React.useRef(null); const range = intensityRange[intensity]; React.useEffect(() => { if (!playing) { setHeights(Array.from({ length: bars }, () => 4)); cancelAnimationFrame(rafRef.current); if (audioRef.current) { audioRef.current.pause(); } return; } if (audioSrc && audioRef.current) { audioRef.current.play().catch(() => undefined); } function animate() { frameRef.current++; const f = frameRef.current; setHeights( Array.from({ length: bars }, (_, i) => { const wave1 = Math.sin(f * 0.06 + i * 0.5) * 0.5 + 0.5; const wave2 = Math.sin(f * 0.1 + i * 0.3 + 2) * 0.3 + 0.3; const noise = Math.random() * 0.2; const combined = (wave1 + wave2 + noise) / 1.5; return range.min + (range.max - range.min) * combined; }) ); rafRef.current = requestAnimationFrame(animate); } rafRef.current = requestAnimationFrame(animate); return () => { cancelAnimationFrame(rafRef.current); if (audioRef.current) { audioRef.current.pause(); } }; }, [playing, bars, range.min, range.max, audioSrc]); return (

{/* Scanline overlay */}

{label ? (

{label} {playing ? "LIVE" : "IDLE"}

) : null}

{heights.map((h, i) => (

))}

{audioSrc ? (