51: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"] 52:T43a4,"use client" import { useEffect, useRef, type HTMLAttributes } from "react" import { cn } from "@/lib/utils" export type LiveWaveformProps = HTMLAttributes & { active?: boolean processing?: boolean deviceId?: string barWidth?: number barHeight?: 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 const LiveWaveform = ({ active = false, processing = false, deviceId, barWidth = 3, barGap = 1, barRadius = 1.5, barColor, fadeEdges = true, fadeWidth = 24, barHeight: baseBarHeight = 4, 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 heightStyle = typeof height === "number" ? `${height}px` : height // Handle canvas resizing useEffect(() => { const canvas = canvasRef.current const container = containerRef.current if (!canvas || !container) return const resizeObserver = new ResizeObserver(() => { const rect = container.getBoundingClientRect() const dpr = window.devicePixelRatio || 1 canvas.width = rect.width * dpr canvas.height = rect.height * dpr canvas.style.width = `${rect.width}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 }) 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 = [] const barCount = Math.floor( (containerRef.current?.getBoundingClientRect().width || 200) / (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 unknown as { webkitAudioContext: typeof AudioContext }) .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 // Clear history when starting 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) => { // Render waveform 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") { // For static mode, update bars in place 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(rect.width / (barWidth + barGap)) const halfCount = Math.floor(barCount / 2) const newBars: number[] = [] // Mirror the data for symmetric display 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 { // Scrolling mode - original behavior 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 // Add to history historyRef.current.push(Math.min(1, Math.max(0.05, average))) lastActiveDataRef.current = [...historyRef.current] // Maintain history size if (historyRef.current.length > historySize) { historyRef.current.shift() } } needsRedrawRef.current = true } } // Only redraw if needed if (!needsRedrawRef.current && !active) { rafId = requestAnimationFrame(animate) return } needsRedrawRef.current = active ctx.clearRect(0, 0, rect.width, rect.height) const computedBarColor = barColor || (() => { const style = getComputedStyle(canvas) // Try to get the computed color value directly const color = style.color return color || "#000" })() const step = barWidth + barGap const barCount = Math.floor(rect.width / step) const centerY = rect.height / 2 // Draw bars based on mode if (mode === "static") { // Static mode - bars in fixed positions 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(baseBarHeight, 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 { // Scrolling mode - original behavior 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 = rect.width - (i + 1) * step const barHeight = Math.max(baseBarHeight, 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) } } } // Apply edge fading if (fadeEdges && fadeWidth > 0 && rect.width > 0) { // Cache gradient if width hasn't changed if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) { const gradient = ctx.createLinearGradient(0, 0, rect.width, 0) const fadePercent = Math.min(0.3, fadeWidth / rect.width) // destination-out: removes destination where source alpha is high // We want: fade edges out, keep center solid // Left edge: start opaque (1) = remove, fade to transparent (0) = keep gradient.addColorStop(0, "rgba(255,255,255,1)") gradient.addColorStop(fadePercent, "rgba(255,255,255,0)") // Center stays transparent = keep everything gradient.addColorStop(1 - fadePercent, "rgba(255,255,255,0)") // Right edge: fade from transparent (0) = keep to opaque (1) = remove gradient.addColorStop(1, "rgba(255,255,255,1)") gradientCacheRef.current = gradient lastWidthRef.current = rect.width } ctx.globalCompositeOperation = "destination-out" ctx.fillStyle = gradientCacheRef.current ctx.fillRect(0, 0, rect.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, baseBarHeight, barGap, barRadius, barColor, fadeEdges, fadeWidth, mode, ]) return (

{!active && !processing && (

)}

) } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"components/ui/live-waveform.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]