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:T2f2e,"use client"; import { useCallback, useEffect, useImperativeHandle, useRef } from "react"; import type { ComponentProps, Ref } from "react"; import { useFrameSource } from "@/hooks/use-frame-source"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { useVisibility } from "@/hooks/use-visibility"; import { resampleLevels } from "@/lib/audio/bands"; import { clamp } from "@/lib/audio/decibels"; import { subscribeFrame } from "@/lib/audio/frame-loop"; import type { FrameSource, VisualFrame } from "@/lib/audio/types"; import { cn } from "@/lib/utils"; const COLOR_REFRESH_FRAMES = 30; const REDUCED_MOTION_INTERVAL_MS = 250; const IDLE_ALPHA = 0.35; export interface LiveWaveformActions { /** Paint a frame directly. */ paint: (frame: VisualFrame) => void; /** Clear the canvas and forget the last frame. */ clear: () => void; } export interface LiveWaveformProps extends ComponentProps<"div"> { source?: FrameSource | null; /** `scrolling` shows the level history; `static` shows the current frame. Default `static`. */ mode?: "scrolling" | "static"; /** Default `bars`. `line` draws the waveform trace. */ variant?: "bars" | "line" | "mirror"; /** Bar width in pixels. Default 3. */ barWidth?: number; /** Gap between bars in pixels. Default 1. */ barGap?: number; /** Bar corner radius in pixels. Default 1.5. */ barRadius?: number; /** Smallest bar height in pixels. Default 4. */ minBarHeight?: number; /** Line width for the `line` variant. Default 1.5. */ lineWidth?: number; /** Fade the left and right edges. Default true. */ fadeEdges?: boolean; /** Width of the fade in pixels. Default 24. */ fadeWidth?: number; /** When false, shows an idle dotted line. Default true. */ active?: boolean; /** Visual gain. Default 1. */ sensitivity?: number; actionsRef?: Ref; } interface Size { width: number; height: number; ratio: number; } interface DrawOptions { mode: "scrolling" | "static"; variant: "bars" | "line" | "mirror"; barWidth: number; barGap: number; barRadius: number; minBarHeight: number; lineWidth: number; fadeEdges: boolean; fadeWidth: number; active: boolean; sensitivity: number; } const drawBar = ( context: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number ) => { if (typeof context.roundRect === "function") { context.beginPath(); context.roundRect( x, y, width, height, Math.min(radius, width / 2, height / 2) ); context.fill(); } else { context.fillRect(x, y, width, height); } }; const historyLevels = (frame: VisualFrame, count: number) => { const available = Math.min(frame.historyLength, count); const out = new Float32Array(available); const size = frame.history.length; const first = frame.historyStart + frame.historyLength - available; for (let index = 0; index < available; index += 1) { out[index] = frame.history[(first + index) % size] ?? 0; } return out; }; const levelsFor = ( frame: VisualFrame, count: number, options: DrawOptions ): Float32Array => { if (options.mode === "scrolling") { if (options.variant !== "mirror") { return historyLevels(frame, count); } const half = historyLevels(frame, Math.ceil(count / 2)); const out = new Float32Array(count); const center = Math.floor(count / 2); for (let offset = 0; offset < half.length; offset += 1) { const value = half[half.length - 1 - offset] ?? 0; out[center + offset] = value; out[center - offset] = value; } return out; } if (options.variant !== "mirror") { return resampleLevels( frame.bands, 0, frame.bands.length, new Float32Array(count) ); } const half = resampleLevels( frame.bands, 0, frame.bands.length, new Float32Array(Math.ceil(count / 2)) ); const out = new Float32Array(count); const center = (count - 1) / 2; for (let index = 0; index < count; index += 1) { out[index] = half[Math.min(half.length - 1, Math.floor(Math.abs(index - center)))] ?? 0; } return out; }; const drawIdle = ( context: CanvasRenderingContext2D, size: Size, options: DrawOptions ) => { const step = (options.barWidth + options.barGap) * 2; const y = size.height / 2 - 0.5; context.globalAlpha = IDLE_ALPHA; for (let x = 0; x < size.width; x += step) { context.fillRect(x, y, options.barWidth, 1); } context.globalAlpha = 1; }; const drawLine = ( context: CanvasRenderingContext2D, size: Size, frame: VisualFrame, options: DrawOptions ) => { const middle = size.height / 2; context.lineWidth = options.lineWidth; context.lineJoin = "round"; context.beginPath(); if ( options.mode === "static" && frame.timeDomain && frame.timeDomain.length > 1 ) { const samples = frame.timeDomain; for (let index = 0; index < samples.length; index += 1) { const x = (index / (samples.length - 1)) * size.width; const value = clamp((samples[index] ?? 0) * options.sensitivity, -1, 1); const y = middle - value * (middle - options.lineWidth); if (index === 0) { context.moveTo(x, y); } else { context.lineTo(x, y); } } context.stroke(); return; } const count = Math.max( 2, Math.floor(size.width / (options.barWidth + options.barGap)) ); const levels = levelsFor(frame, count, { ...options, variant: "bars" }); const offset = count - levels.length; for (let index = 0; index < levels.length; index += 1) { const x = ((offset + index) / (count - 1)) * size.width; const value = clamp((levels[index] ?? 0) * options.sensitivity, 0, 1); const y = middle - value * (middle - options.lineWidth); if (index === 0) { context.moveTo(x, y); } else { context.lineTo(x, y); } } for (let index = levels.length - 1; index >= 0; index -= 1) { const x = ((offset + index) / (count - 1)) * size.width; const value = clamp((levels[index] ?? 0) * options.sensitivity, 0, 1); context.lineTo(x, middle + value * (middle - options.lineWidth)); } context.closePath(); context.globalAlpha = 0.25; context.fill(); context.globalAlpha = 1; context.stroke(); }; const drawBars = ( context: CanvasRenderingContext2D, size: Size, frame: VisualFrame, options: DrawOptions ) => { const pitch = options.barWidth + options.barGap; const count = Math.max(1, Math.floor((size.width + options.barGap) / pitch)); const levels = levelsFor(frame, count, options); const offset = count - levels.length; const used = count * pitch - options.barGap; const left = (size.width - used) / 2; for (let index = 0; index < levels.length; index += 1) { const value = clamp((levels[index] ?? 0) * options.sensitivity, 0, 1); const height = Math.max(options.minBarHeight, value * size.height); const x = left + (offset + index) * pitch; const y = (size.height - height) / 2; context.globalAlpha = 0.4 + 0.6 * value; drawBar(context, x, y, options.barWidth, height, options.barRadius); } context.globalAlpha = 1; }; const fade = (context: CanvasRenderingContext2D, size: Size, width: number) => { const edge = Math.min(width, size.width / 2); context.globalCompositeOperation = "destination-out"; const leftGradient = context.createLinearGradient(0, 0, edge, 0); leftGradient.addColorStop(0, "rgba(0, 0, 0, 1)"); leftGradient.addColorStop(1, "rgba(0, 0, 0, 0)"); context.fillStyle = leftGradient; context.fillRect(0, 0, edge, size.height); const rightGradient = context.createLinearGradient( size.width - edge, 0, size.width, 0 ); rightGradient.addColorStop(0, "rgba(0, 0, 0, 0)"); rightGradient.addColorStop(1, "rgba(0, 0, 0, 1)"); context.fillStyle = rightGradient; context.fillRect(size.width - edge, 0, edge, size.height); context.globalCompositeOperation = "source-over"; }; export const LiveWaveform = ({ source, mode = "static", variant = "bars", barWidth = 3, barGap = 1, barRadius = 1.5, minBarHeight = 4, lineWidth = 1.5, fadeEdges = true, fadeWidth = 24, active = true, sensitivity = 1, actionsRef, className, ref, ...props }: LiveWaveformProps) => { const reducedMotion = useReducedMotion(); const canvasRef = useRef(null); const visibleRef = useVisibility(canvasRef); const frameRef = useRef(null); const dirtyRef = useRef(true); const paint = useCallback((frame: VisualFrame) => { frameRef.current = frame; dirtyRef.current = true; }, []); useFrameSource(source, paint); useImperativeHandle( actionsRef, () => ({ clear: () => { frameRef.current = null; dirtyRef.current = true; }, paint, }), [paint] ); useEffect(() => { const canvas = canvasRef.current; const context = canvas?.getContext("2d"); if (!(canvas && context)) { return; } const options: DrawOptions = { active, barGap, barRadius, barWidth, fadeEdges, fadeWidth, lineWidth, minBarHeight, mode, sensitivity, variant, }; const size: Size = { height: 0, ratio: 1, width: 0 }; let color = ""; let framesSinceColor = COLOR_REFRESH_FRAMES; let lastPaintMs = 0; dirtyRef.current = true; const resize = () => { const rect = canvas.getBoundingClientRect(); size.ratio = window.devicePixelRatio || 1; size.width = rect.width; size.height = rect.height; canvas.width = Math.max(1, Math.round(rect.width * size.ratio)); canvas.height = Math.max(1, Math.round(rect.height * size.ratio)); framesSinceColor = COLOR_REFRESH_FRAMES; dirtyRef.current = true; }; resize(); const observer = new ResizeObserver(resize); observer.observe(canvas); const tick = (nowMs: number) => { framesSinceColor += 1; if (framesSinceColor >= COLOR_REFRESH_FRAMES) { framesSinceColor = 0; const next = getComputedStyle(canvas).color; if (next !== color) { color = next; dirtyRef.current = true; } } // Off screen it stays dirty, so it repaints when it comes back. if (!dirtyRef.current || size.width === 0 || !visibleRef.current) { return; } if (reducedMotion && nowMs - lastPaintMs < REDUCED_MOTION_INTERVAL_MS) { return; } lastPaintMs = nowMs; dirtyRef.current = false; context.setTransform(size.ratio, 0, 0, size.ratio, 0, 0); context.clearRect(0, 0, size.width, size.height); context.fillStyle = color; context.strokeStyle = color; const frame = frameRef.current; if (!(options.active && frame)) { drawIdle(context, size, options); return; } if (options.variant === "line") { drawLine(context, size, frame, options); } else { drawBars(context, size, frame, options); } if (options.fadeEdges) { fade(context, size, options.fadeWidth); } }; const unsubscribe = subscribeFrame(tick); return () => { unsubscribe(); observer.disconnect(); }; }, [ active, barGap, barRadius, barWidth, fadeEdges, fadeWidth, lineWidth, minBarHeight, mode, reducedMotion, sensitivity, variant, visibleRef, ]); return (

); }; 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":[null,["$","$L51",null,{"namespace":"@audiocn","registryDependencies":["@audiocn/core","@audiocn/use-frame-source","@audiocn/use-reduced-motion","@audiocn/use-visibility"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/live-waveform.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]