50: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"] 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:T3251,"use client"; import { createContext, useContext, useEffect, useMemo, useRef } from "react"; import type { ComponentProps, CSSProperties, RefObject } from "react"; import { useFrameSource } from "@/hooks/use-frame-source"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { useVisibility } from "@/hooks/use-visibility"; import { clamp } from "@/lib/audio/decibels"; import { subscribeFrame } from "@/lib/audio/frame-loop"; import { linearTaper, logTaper } from "@/lib/audio/taper"; import type { FrameSource, Taper, VisualFrame } from "@/lib/audio/types"; import { cn } from "@/lib/utils"; const COLOR_REFRESH_FRAMES = 30; const PEAK_RELEASE_PER_FRAME = 0.985; /** The frame length PEAK_RELEASE_PER_FRAME is tuned for. */ const FRAME_MS = 1000 / 60; const REDUCED_MOTION_INTERVAL_MS = 250; const LEVEL_TICK_DB = 12; const DEFAULT_FREQUENCY_TICKS = [100, 1000, 10_000]; interface SpectrumContextValue { minDb: number; maxDb: number; minHz: number; maxHz: number; frequencyTaper: Taper; variant: "bars" | "line" | "area"; peakHold: boolean; grid: boolean; frameRef: RefObject; /** Bumped on every frame, so each canvas knows whether it has painted it. */ versionRef: RefObject; } const SpectrumContext = createContext(null); const useSpectrum = (part: string) => { const context = useContext(SpectrumContext); if (!context) { throw new Error(`${part} must be used inside Spectrum.`); } return context; }; const formatHz = (hz: number) => (hz >= 1000 ? `${hz / 1000}k` : String(hz)); const formatLevel = (db: number) => String(Math.round(db)); interface Size { width: number; height: number; ratio: number; } interface Colors { grid: string; line: string; peak: string; } const readColors = (canvas: HTMLCanvasElement): Colors => { const style = getComputedStyle(canvas); return { grid: style.getPropertyValue("--spectrum-grid").trim() || style.color, line: style.getPropertyValue("--spectrum").trim() || style.color, peak: style.getPropertyValue("--spectrum-peak").trim() || style.color, }; }; const drawGrid = ( context: CanvasRenderingContext2D, size: Size, settings: SpectrumContextValue, color: string ) => { const { frequencyTaper, maxDb, maxHz, minDb, minHz } = settings; const span = maxDb - minDb; context.strokeStyle = color; context.lineWidth = 1; context.beginPath(); for (const db of [maxDb, maxDb - span / 3, maxDb - (span * 2) / 3]) { const y = Math.round((1 - (db - minDb) / span) * size.height) + 0.5; context.moveTo(0, y); context.lineTo(size.width, y); } for (const hz of DEFAULT_FREQUENCY_TICKS) { if (hz > minHz && hz < maxHz) { const x = Math.round(frequencyTaper.toPosition(hz) * size.width) + 0.5; context.moveTo(x, 0); context.lineTo(x, size.height); } } context.stroke(); }; const drawBars = ( context: CanvasRenderingContext2D, size: Size, bands: Float32Array ) => { const slot = size.width / bands.length; const gap = Math.min(2, slot * 0.25); for (const [index, band] of bands.entries()) { const barHeight = clamp(band, 0, 1) * size.height; context.fillRect( index * slot + gap / 2, size.height - barHeight, Math.max(1, slot - gap), barHeight ); } }; const drawCurve = ( context: CanvasRenderingContext2D, size: Size, bands: Float32Array, filled: boolean ) => { const slot = size.width / bands.length; context.lineWidth = 1.5; context.lineJoin = "round"; context.beginPath(); for (const [index, band] of bands.entries()) { const x = (index + 0.5) * slot; const y = size.height - clamp(band, 0, 1) * size.height; if (index === 0) { context.moveTo(x, y); } else { context.lineTo(x, y); } } if (filled) { context.lineTo((bands.length - 0.5) * slot, size.height); context.lineTo(0.5 * slot, size.height); context.closePath(); context.globalAlpha = 0.3; context.fill(); context.globalAlpha = 1; } context.stroke(); }; /** Draws held peaks and reports whether any are still falling. */ const drawPeaks = ( context: CanvasRenderingContext2D, size: Size, bands: Float32Array, peaks: Float32Array, release: number ) => { const slot = size.width / bands.length; let falling = false; for (const [index, band] of bands.entries()) { const level = clamp(band, 0, 1); const held = Math.max(level, (peaks[index] ?? 0) * release); peaks[index] = held; if (held > level + 0.001) { falling = true; } context.fillRect( index * slot, size.height - held * size.height - 1, Math.max(1, slot - 1), 2 ); } return falling; }; export const SpectrumCanvas = ({ className, ...props }: ComponentProps<"canvas">) => { const settings = useSpectrum("SpectrumCanvas"); const reducedMotion = useReducedMotion(); const canvasRef = useRef(null); const visibleRef = useVisibility(canvasRef); useEffect(() => { const canvas = canvasRef.current; const context = canvas?.getContext("2d"); if (!(canvas && context)) { return; } const { frameRef, grid, peakHold, variant, versionRef } = settings; const size: Size = { height: 0, ratio: 1, width: 0 }; let colors = readColors(canvas); let framesSinceColor = 0; let peaks = new Float32Array(0); let lastPaintMs = 0; // Each canvas keeps its own state, so two in one Spectrum both paint. let dirty = true; let paintedVersion = -1; 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)); dirty = true; }; resize(); const observer = new ResizeObserver(resize); observer.observe(canvas); const shouldPaint = (nowMs: number) => { framesSinceColor += 1; if (framesSinceColor >= COLOR_REFRESH_FRAMES) { framesSinceColor = 0; const next = readColors(canvas); if ( next.grid !== colors.grid || next.line !== colors.line || next.peak !== colors.peak ) { colors = next; dirty = true; } } const stale = dirty || versionRef.current !== paintedVersion; if (!stale || size.width === 0 || !visibleRef.current) { return false; } return ( !reducedMotion || nowMs - lastPaintMs >= REDUCED_MOTION_INTERVAL_MS ); }; const draw = (nowMs: number) => { if (!shouldPaint(nowMs)) { return; } const elapsedMs = lastPaintMs === 0 ? 0 : nowMs - lastPaintMs; lastPaintMs = nowMs; dirty = false; paintedVersion = versionRef.current; context.setTransform(size.ratio, 0, 0, size.ratio, 0, 0); context.clearRect(0, 0, size.width, size.height); if (grid) { drawGrid(context, size, settings, colors.grid); } const bands = frameRef.current?.bands; if (!bands || bands.length === 0) { return; } context.fillStyle = colors.line; context.strokeStyle = colors.line; if (variant === "bars") { drawBars(context, size, bands); } else { drawCurve(context, size, bands, variant === "area"); } if (peakHold) { if (peaks.length !== bands.length) { peaks = new Float32Array(bands.length); } context.fillStyle = colors.peak; // Decay by elapsed time, not per paint, so peaks fall at the same // speed at 60 Hz, at 120 Hz and with reduced motion. dirty = drawPeaks( context, size, bands, peaks, PEAK_RELEASE_PER_FRAME ** (elapsedMs / FRAME_MS) ); } }; const unsubscribe = subscribeFrame(draw); return () => { unsubscribe(); observer.disconnect(); }; }, [reducedMotion, settings, visibleRef]); return (