51:I[707087,["/_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/3j06ow7w40nxu.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"],"RegistryDependencies"] 52: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/3j06ow7w40nxu.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"] 53:T40c8,"use client" import { useEffect, useRef, type HTMLAttributes } from "react" export type LiveWaveformProps = HTMLAttributes & { active?: boolean processing?: boolean deviceId?: string barWidth?: number barGap?: number barRadius?: number barColor?: string fadeEdges?: boolean fadeWidth?: number height?: string | number sensitivity?: number smoothingTimeConstant?: number fftSize?: number historySize?: number updateRate?: number mode?: "scrolling" | "static" onError?: (error: Error) => void onStreamReady?: (stream: MediaStream) => void onStreamEnd?: () => void } export function LiveWaveform({ active = false, processing = false, deviceId, barWidth = 3, barGap = 1, barRadius = 1.5, barColor, fadeEdges = true, fadeWidth = 24, height = 64, sensitivity = 1, smoothingTimeConstant = 0.8, fftSize = 256, historySize = 60, updateRate = 30, mode = "static", onError, onStreamReady, onStreamEnd, className, ...props }: LiveWaveformProps) { const canvasRef = useRef(null) const containerRef = useRef(null) const historyRef = useRef([]) const analyserRef = useRef(null) const audioContextRef = useRef(null) const streamRef = useRef(null) const animationRef = useRef(0) const lastUpdateRef = useRef(0) const processingAnimationRef = useRef(null) const lastActiveDataRef = useRef([]) const transitionProgressRef = useRef(0) const staticBarsRef = useRef([]) const needsRedrawRef = useRef(true) const gradientCacheRef = useRef(null) const lastWidthRef = useRef(0) const currentWidthRef = useRef(0) // Track current width const heightStyle = typeof height === "number" ? `${height}px` : height // Handle canvas resizing useEffect(() => { const canvas = canvasRef.current const container = containerRef.current if (!canvas || !container) return const updateCanvasSize = () => { const rect = container.getBoundingClientRect() const dpr = window.devicePixelRatio || 1 // Store the current width for use in animation loop currentWidthRef.current = rect.width canvas.width = rect.width * dpr canvas.height = rect.height * dpr canvas.style.width = `${containerRef.current?.offsetWidth}px` canvas.style.height = `${rect.height}px` const ctx = canvas.getContext("2d") if (ctx) { ctx.scale(dpr, dpr) } gradientCacheRef.current = null lastWidthRef.current = rect.width needsRedrawRef.current = true } // Initial size updateCanvasSize() const resizeObserver = new ResizeObserver(() => { updateCanvasSize() }) resizeObserver.observe(container) return () => resizeObserver.disconnect() }, []) useEffect(() => { if (processing && !active) { let time = 0 transitionProgressRef.current = 0 const animateProcessing = () => { time += 0.03 transitionProgressRef.current = Math.min( 1, transitionProgressRef.current + 0.02 ) const processingData = [] // Use currentWidthRef instead of getBoundingClientRect const barCount = Math.floor( currentWidthRef.current / (barWidth + barGap) ) if (mode === "static") { const halfCount = Math.floor(barCount / 2) for (let i = 0; i < barCount; i++) { const normalizedPosition = (i - halfCount) / halfCount const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4 const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25 const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2 const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15 const combinedWave = wave1 + wave2 + wave3 const processingValue = (0.2 + combinedWave) * centerWeight let finalValue = processingValue if ( lastActiveDataRef.current.length > 0 && transitionProgressRef.current < 1 ) { const lastDataIndex = Math.min( i, lastActiveDataRef.current.length - 1 ) const lastValue = lastActiveDataRef.current[lastDataIndex] || 0 finalValue = lastValue * (1 - transitionProgressRef.current) + processingValue * transitionProgressRef.current } processingData.push(Math.max(0.05, Math.min(1, finalValue))) } } else { for (let i = 0; i < barCount; i++) { const normalizedPosition = (i - barCount / 2) / (barCount / 2) const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4 const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25 const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2 const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15 const combinedWave = wave1 + wave2 + wave3 const processingValue = (0.2 + combinedWave) * centerWeight let finalValue = processingValue if ( lastActiveDataRef.current.length > 0 && transitionProgressRef.current < 1 ) { const lastDataIndex = Math.floor( (i / barCount) * lastActiveDataRef.current.length ) const lastValue = lastActiveDataRef.current[lastDataIndex] || 0 finalValue = lastValue * (1 - transitionProgressRef.current) + processingValue * transitionProgressRef.current } processingData.push(Math.max(0.05, Math.min(1, finalValue))) } } if (mode === "static") { staticBarsRef.current = processingData } else { historyRef.current = processingData } needsRedrawRef.current = true processingAnimationRef.current = requestAnimationFrame(animateProcessing) } animateProcessing() return () => { if (processingAnimationRef.current) { cancelAnimationFrame(processingAnimationRef.current) } } } else if (!active && !processing) { const hasData = mode === "static" ? staticBarsRef.current.length > 0 : historyRef.current.length > 0 if (hasData) { let fadeProgress = 0 const fadeToIdle = () => { fadeProgress += 0.03 if (fadeProgress < 1) { if (mode === "static") { staticBarsRef.current = staticBarsRef.current.map( (value) => value * (1 - fadeProgress) ) } else { historyRef.current = historyRef.current.map( (value) => value * (1 - fadeProgress) ) } needsRedrawRef.current = true requestAnimationFrame(fadeToIdle) } else { if (mode === "static") { staticBarsRef.current = [] } else { historyRef.current = [] } } } fadeToIdle() } } }, [processing, active, barWidth, barGap, mode]) // Handle microphone setup and teardown useEffect(() => { if (!active) { if (streamRef.current) { streamRef.current.getTracks().forEach((track) => track.stop()) streamRef.current = null onStreamEnd?.() } if ( audioContextRef.current && audioContextRef.current.state !== "closed" ) { audioContextRef.current.close() audioContextRef.current = null } if (animationRef.current) { cancelAnimationFrame(animationRef.current) animationRef.current = 0 } return } const setupMicrophone = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: deviceId ? { deviceId: { exact: deviceId }, echoCancellation: true, noiseSuppression: true, autoGainControl: true, } : { echoCancellation: true, noiseSuppression: true, autoGainControl: true, }, }) streamRef.current = stream onStreamReady?.(stream) const AudioContextConstructor = window.AudioContext || (window as any).webkitAudioContext const audioContext = new AudioContextConstructor() const analyser = audioContext.createAnalyser() analyser.fftSize = fftSize analyser.smoothingTimeConstant = smoothingTimeConstant const source = audioContext.createMediaStreamSource(stream) source.connect(analyser) audioContextRef.current = audioContext analyserRef.current = analyser historyRef.current = [] } catch (error) { onError?.(error as Error) } } setupMicrophone() return () => { if (streamRef.current) { streamRef.current.getTracks().forEach((track) => track.stop()) streamRef.current = null onStreamEnd?.() } if ( audioContextRef.current && audioContextRef.current.state !== "closed" ) { audioContextRef.current.close() audioContextRef.current = null } if (animationRef.current) { cancelAnimationFrame(animationRef.current) animationRef.current = 0 } } }, [ active, deviceId, fftSize, smoothingTimeConstant, onError, onStreamReady, onStreamEnd, ]) // Animation loop useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let rafId: number const animate = (currentTime: number) => { // Use currentWidthRef for consistent width throughout render const width = currentWidthRef.current const rect = canvas.getBoundingClientRect() // Update audio data if active if (active && currentTime - lastUpdateRef.current > updateRate) { lastUpdateRef.current = currentTime if (analyserRef.current) { const dataArray = new Uint8Array( analyserRef.current.frequencyBinCount ) analyserRef.current.getByteFrequencyData(dataArray) if (mode === "static") { const startFreq = Math.floor(dataArray.length * 0.05) const endFreq = Math.floor(dataArray.length * 0.4) const relevantData = dataArray.slice(startFreq, endFreq) const barCount = Math.floor(width / (barWidth + barGap)) const halfCount = Math.floor(barCount / 2) const newBars: number[] = [] for (let i = halfCount - 1; i >= 0; i--) { const dataIndex = Math.floor( (i / halfCount) * relevantData.length ) const value = Math.min( 1, (relevantData[dataIndex] / 255) * sensitivity ) newBars.push(Math.max(0.05, value)) } for (let i = 0; i < halfCount; i++) { const dataIndex = Math.floor( (i / halfCount) * relevantData.length ) const value = Math.min( 1, (relevantData[dataIndex] / 255) * sensitivity ) newBars.push(Math.max(0.05, value)) } staticBarsRef.current = newBars lastActiveDataRef.current = newBars } else { let sum = 0 const startFreq = Math.floor(dataArray.length * 0.05) const endFreq = Math.floor(dataArray.length * 0.4) const relevantData = dataArray.slice(startFreq, endFreq) for (let i = 0; i < relevantData.length; i++) { sum += relevantData[i] } const average = (sum / relevantData.length / 255) * sensitivity historyRef.current.push(Math.min(1, Math.max(0.05, average))) lastActiveDataRef.current = [...historyRef.current] if (historyRef.current.length > historySize) { historyRef.current.shift() } } needsRedrawRef.current = true } } if (!needsRedrawRef.current && !active) { rafId = requestAnimationFrame(animate) return } needsRedrawRef.current = active ctx.clearRect(0, 0, width, rect.height) const computedBarColor = barColor || (() => { const style = getComputedStyle(canvas) const color = style.color return color || "#000" })() const step = barWidth + barGap const barCount = Math.floor(width / step) const centerY = rect.height / 2 if (mode === "static") { const dataToRender = processing ? staticBarsRef.current : active ? staticBarsRef.current : staticBarsRef.current.length > 0 ? staticBarsRef.current : [] for (let i = 0; i < barCount && i < dataToRender.length; i++) { const value = dataToRender[i] || 0.1 const x = i * step const barHeight = Math.max(4, value * rect.height * 0.8) const y = centerY - barHeight / 2 ctx.fillStyle = computedBarColor ctx.globalAlpha = 0.4 + value * 0.6 if (barRadius > 0) { ctx.beginPath() ctx.roundRect(x, y, barWidth, barHeight, barRadius) ctx.fill() } else { ctx.fillRect(x, y, barWidth, barHeight) } } } else { for (let i = 0; i < barCount && i < historyRef.current.length; i++) { const dataIndex = historyRef.current.length - 1 - i const value = historyRef.current[dataIndex] || 0.1 const x = width - (i + 1) * step const barHeight = Math.max(4, value * rect.height * 0.8) const y = centerY - barHeight / 2 ctx.fillStyle = computedBarColor ctx.globalAlpha = 0.4 + value * 0.6 if (barRadius > 0) { ctx.beginPath() ctx.roundRect(x, y, barWidth, barHeight, barRadius) ctx.fill() } else { ctx.fillRect(x, y, barWidth, barHeight) } } } if (fadeEdges && fadeWidth > 0 && width > 0) { if (!gradientCacheRef.current || lastWidthRef.current !== width) { const gradient = ctx.createLinearGradient(0, 0, width, 0) const fadePercent = Math.min(0.3, fadeWidth / width) gradient.addColorStop(0, "rgba(255,255,255,1)") gradient.addColorStop(fadePercent, "rgba(255,255,255,0)") gradient.addColorStop(1 - fadePercent, "rgba(255,255,255,0)") gradient.addColorStop(1, "rgba(255,255,255,1)") gradientCacheRef.current = gradient lastWidthRef.current = width } ctx.globalCompositeOperation = "destination-out" ctx.fillStyle = gradientCacheRef.current ctx.fillRect(0, 0, width, rect.height) ctx.globalCompositeOperation = "source-over" } ctx.globalAlpha = 1 rafId = requestAnimationFrame(animate) } rafId = requestAnimationFrame(animate) return () => { if (rafId) { cancelAnimationFrame(rafId) } } }, [ active, processing, sensitivity, updateRate, historySize, barWidth, barGap, barRadius, barColor, fadeEdges, fadeWidth, mode, ]) return (

{!active && !processing && (

)}

) } export default LiveWaveform 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react"}]]}]}]]}],["$","$L51",null,{"namespace":"@gammaui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/gammaui/live-waveform.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]