52: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"] 53: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"] 54:T320a,import { For, createContext, createMemo, useContext } from "solid-js"; 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 { provideContext } from "@/lib/solid/context"; import { createCompatEffect } from "@/lib/solid/effect"; import type { CanvasDOMProps, DivDOMProps, JSXElement, } from "@/lib/solid/jsx-types"; import { omitProps } from "@/lib/solid/props"; import { setRefValue } from "@/lib/solid/ref"; import type { RefTarget } from "@/lib/solid/ref"; import { cn } from "@/lib/utils"; const DEFAULT_FREQUENCY_TICKS = [100, 1000, 10_000]; const LEVEL_TICK_DB = 12; interface SpectrumContextValue { minDb: number; maxDb: number; minHz: number; maxHz: number; frequencyTaper: Taper; variant: "bars" | "line" | "area"; peakHold: boolean; grid: boolean; frame: VisualFrame | null; version: number; } const SpectrumContext = createContext(); const useSpectrum = (part: string) => { const value = useContext(SpectrumContext); if (!value) throw new Error(`${part} must be used inside Spectrum.`); return value; }; 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 span = settings.maxDb - settings.minDb; context.strokeStyle = color; context.lineWidth = 1; context.beginPath(); for (const db of [ settings.maxDb, settings.maxDb - span / 3, settings.maxDb - (span * 2) / 3, ]) { const y = Math.round((1 - (db - settings.minDb) / span) * size.height) + 0.5; context.moveTo(0, y); context.lineTo(size.width, y); } for (const hz of DEFAULT_FREQUENCY_TICKS) { if (hz > settings.minHz && hz < settings.maxHz) { const x = Math.round(settings.frequencyTaper.toPosition(hz) * size.width) + 0.5; context.moveTo(x, 0); context.lineTo(x, size.height); } } context.stroke(); }; const drawBands = ( context: CanvasRenderingContext2D, size: Size, bands: Float32Array, variant: SpectrumContextValue["variant"] ) => { const slot = size.width / bands.length; if (variant === "bars") { const gap = Math.min(2, slot * 0.25); for (const [index, band] of bands.entries()) { const height = clamp(band, 0, 1) * size.height; context.fillRect( index * slot + gap / 2, size.height - height, Math.max(1, slot - gap), height ); } return; } 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 (variant === "area") { 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(); }; 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; }; interface CanvasProps extends Omit { ref?: RefTarget; className?: string; } export const SpectrumCanvas = (props: CanvasProps) => { const settings = useSpectrum("SpectrumCanvas"); const reducedMotion = useReducedMotion(); let canvas: HTMLCanvasElement | undefined; const visible = useVisibility(() => canvas ?? null); createCompatEffect( () => ({ variant: settings.variant, grid: settings.grid, peakHold: settings.peakHold, minDb: settings.minDb, maxDb: settings.maxDb, minHz: settings.minHz, maxHz: settings.maxHz, taper: settings.frequencyTaper, reduced: reducedMotion(), }), (options) => { const element = canvas; const context = element?.getContext("2d"); if (!(element && context)) return; const size: Size = { width: 0, height: 0, ratio: 1 }; let colors = readColors(element); let sinceColor = 0; let peaks = new Float32Array(0); let lastPaint = 0; let dirty = true; let paintedVersion = -1; const resize = () => { const rect = element.getBoundingClientRect(); size.ratio = window.devicePixelRatio || 1; size.width = rect.width; size.height = rect.height; element.width = Math.max(1, Math.round(rect.width * size.ratio)); element.height = Math.max(1, Math.round(rect.height * size.ratio)); dirty = true; }; resize(); const observer = new ResizeObserver(resize); observer.observe(element); const unsubscribe = subscribeFrame((nowMs) => { if (++sinceColor >= 30) { sinceColor = 0; const next = readColors(element); if ( next.grid !== colors.grid || next.line !== colors.line || next.peak !== colors.peak ) { colors = next; dirty = true; } } if ( (!dirty && settings.version === paintedVersion) || size.width === 0 || !visible.current ) return; if (options.reduced && nowMs - lastPaint < 250) return; const elapsed = lastPaint === 0 ? 0 : nowMs - lastPaint; lastPaint = nowMs; dirty = false; paintedVersion = settings.version; context.setTransform(size.ratio, 0, 0, size.ratio, 0, 0); context.clearRect(0, 0, size.width, size.height); if (options.grid) drawGrid(context, size, settings, colors.grid); const bands = settings.frame?.bands; if (!bands?.length) return; context.fillStyle = colors.line; context.strokeStyle = colors.line; drawBands(context, size, bands, options.variant); if (options.peakHold) { if (peaks.length !== bands.length) peaks = new Float32Array(bands.length); context.fillStyle = colors.peak; dirty = drawPeaks( context, size, bands, peaks, 0.985 ** (elapsed / (1000 / 60)) ); } }); return () => { unsubscribe(); observer.disconnect(); }; } ); const rest = omitProps(props, ["ref", "class", "className"]); return (