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:T1352,"use client"; import { useEffect, useEffectEvent, useRef } from "react"; import type { ComponentProps, CSSProperties } from "react"; import { useFrameSource } from "@/hooks/use-frame-source"; import { formatDb, SILENCE_DB } from "@/lib/audio/decibels"; import type { FrameSource, MeterFrame, MeterZone } from "@/lib/audio/types"; import { DEFAULT_ZONES, zoneForDb } from "@/lib/audio/zones"; import { cn } from "@/lib/utils"; const DEFAULT_INTERVAL_MS = 250; const DEFAULT_FLOOR_DB = -60; /** Two-digit levels, the widest a meter usually shows, on either side of 0. */ const WIDEST_MAGNITUDE_DB = 88.8; export interface DbReadoutProps extends Omit< ComponentProps<"span">, "children" > { /** A level in dB, for declarative use. */ value?: number; /** A meter source; the readout updates itself without re-rendering React. */ source?: FrameSource | null; /** Which measurement to show. Default `peak`. */ measure?: "peak" | "rms"; /** A channel index, or `max` for the loudest channel. Default `max`. */ channel?: number | "max"; /** How often the text changes. Default 250 ms. */ intervalMs?: number; /** Show the highest value seen within this window. Default 0. */ holdMs?: number; /** Digits after the decimal point. Default 1. */ decimals?: number; /** Append " dB". Default true. */ unit?: boolean; /** At or below this level, show "−∞". Default −60. */ floorDb?: number; /** Zones used for `data-zone`. */ zones?: MeterZone[]; /** Replaces all formatting. */ format?: (db: number) => string; } /** The level a readout shows from one frame. */ export const readChannel = ( frame: MeterFrame, measure: "peak" | "rms", channel: number | "max" ) => { const read = (index: number) => { const level = frame.channels[index]; if (!level) { return SILENCE_DB; } return measure === "rms" ? (level.rmsDb ?? level.peakDb) : level.peakDb; }; if (channel !== "max") { return read(channel); } let loudest = SILENCE_DB; for (let index = 0; index < frame.channels.length; index += 1) { loudest = Math.max(loudest, read(index)); } return loudest; }; export const DbReadout = ({ value, source, measure = "peak", channel = "max", intervalMs = DEFAULT_INTERVAL_MS, holdMs = 0, decimals = 1, unit = true, floorDb = DEFAULT_FLOOR_DB, zones = DEFAULT_ZONES, format, className, style, ...props }: DbReadoutProps) => { const elementRef = useRef(null); const peakRef = useRef(SILENCE_DB); const peakAtRef = useRef(0); const shownRef = useRef(null); const render = (db: number) => format ? format(db) : formatDb(db, { decimals, floorDb, unit }); const initialDb = value ?? SILENCE_DB; // Size for the widest text the readout can show, so it never changes width. // Values at or below the floor read as −∞, so measure just above it too. const justAboveFloor = Number.isFinite(floorDb) ? floorDb + 10 ** -decimals : -WIDEST_MAGNITUDE_DB; const widest = Math.max( ...[ SILENCE_DB, justAboveFloor, -WIDEST_MAGNITUDE_DB, WIDEST_MAGNITUDE_DB, ].map((db) => render(db).length) ); useFrameSource(source, (frame) => { const db = readChannel(frame, measure, channel); const now = performance.now(); if (db >= peakRef.current || now - peakAtRef.current > holdMs) { peakRef.current = db; peakAtRef.current = now; } }); // Reads the latest props on each tick, so an inline format or zones array // doesn't restart the timer (and freeze the readout) on every render. const tick = useEffectEvent(() => { const element = elementRef.current; if (!element) { return; } const db = peakRef.current; const text = render(db); if (text !== shownRef.current) { shownRef.current = text; if (element.firstChild) { element.firstChild.nodeValue = text; } else { element.textContent = text; } element.dataset.zone = zoneForDb(db, zones); element.toggleAttribute("data-silent", db <= floorDb); } // Without a hold, a source that stops sending frames falls to −∞. if (holdMs === 0) { peakRef.current = SILENCE_DB; } }); useEffect(() => { if (!source) { return; } const timer = setInterval(() => { tick(); }, intervalMs); return () => { clearInterval(timer); }; }, [intervalMs, source]); return ( {render(initialDb)} ); }; 4f:["$","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,["$","$L50",null,{"namespace":"@audiocn","registryDependencies":["@audiocn/core","@audiocn/use-frame-source"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/db-readout.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]