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:T559b,"use client"; import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react"; import type { ComponentProps, CSSProperties, KeyboardEvent, PointerEvent, } from "react"; import { useFrameSource } from "@/hooks/use-frame-source"; 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 { formatTime } from "@/lib/audio/time"; import type { FrameSource } from "@/lib/audio/types"; import { cn } from "@/lib/utils"; const COLOR_REFRESH_FRAMES = 30; interface WaveformContextValue { peaks: ArrayLike | null; duration: number; variant: "bars" | "line" | "mirror"; barWidth: number; barGap: number; barRadius: number; loading: boolean; /** Current progress, 0..1, read by the canvas and cursor on every frame. */ progressRef: { current: number }; /** The hovered time, or null. Read it with useSyncExternalStore. */ getHover: () => number | null; subscribeHover: (listener: () => void) => () => void; /** Whether pointer seeking (and so the hover line) is on. */ interactive: boolean; timeToPosition: (time: number) => number; } const WaveformContext = createContext(null); const getNoHover = () => null; const useWaveform = (part: string) => { const context = useContext(WaveformContext); if (!context) { throw new Error(`${part} must be used inside Waveform.`); } return context; }; const seekTarget = ( key: string, current: number, amount: number, duration: number ): number | null => { const targets: Record = { ArrowDown: current - amount, ArrowLeft: current - amount, ArrowRight: current + amount, ArrowUp: current + amount, End: duration, Home: 0, }; return targets[key] ?? null; }; const defaultHoverFormat = (value: number) => formatTime(value); const drawRoundedBar = ( 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); } }; export const WaveformCanvas = ({ className, ...props }: ComponentProps<"canvas">) => { const { barGap, barRadius, barWidth, loading, peaks, progressRef, variant } = useWaveform("WaveformCanvas"); const canvasRef = useRef(null); const visibleRef = useVisibility(canvasRef); useEffect(() => { const canvas = canvasRef.current; const context = canvas?.getContext("2d"); if (!(canvas && context)) { return; } const size = { height: 0, width: 0 }; let ratio = 1; let colors = { played: "", unplayed: "" }; let framesSinceColor = COLOR_REFRESH_FRAMES; let lastProgress = -1; let levels = new Float32Array(0); const resize = () => { const rect = canvas.getBoundingClientRect(); ratio = window.devicePixelRatio || 1; size.width = rect.width; size.height = rect.height; canvas.width = Math.max(1, Math.round(size.width * ratio)); canvas.height = Math.max(1, Math.round(size.height * ratio)); const count = Math.max( 1, Math.floor((size.width + barGap) / (barWidth + barGap)) ); levels = new Float32Array(count); if (peaks && peaks.length > 0) { resampleLevels(peaks, 0, peaks.length, levels); } lastProgress = -1; }; resize(); const observer = new ResizeObserver(resize); observer.observe(canvas); const drawPass = (color: string, clipWidth: number) => { context.save(); context.beginPath(); context.rect(0, 0, clipWidth, size.height); context.clip(); context.fillStyle = color; context.strokeStyle = color; const pitch = barWidth + barGap; const middle = size.height / 2; if (variant === "line") { context.lineWidth = 1.5; context.beginPath(); for (let index = 0; index < levels.length; index += 1) { const x = index * pitch + barWidth / 2; const y = middle - (levels[index] ?? 0) * (middle - 1); if (index === 0) { context.moveTo(x, y); } else { context.lineTo(x, y); } } for (let index = levels.length - 1; index >= 0; index -= 1) { const x = index * pitch + barWidth / 2; context.lineTo(x, middle + (levels[index] ?? 0) * (middle - 1)); } context.closePath(); context.fill(); } else { for (let index = 0; index < levels.length; index += 1) { const level = levels[index] ?? 0; const barHeight = Math.max(2, level * size.height); const y = variant === "mirror" ? middle - barHeight / 2 : size.height - barHeight; drawRoundedBar( context, index * pitch, y, barWidth, barHeight, barRadius ); } } context.restore(); }; const draw = () => { framesSinceColor += 1; if (framesSinceColor >= COLOR_REFRESH_FRAMES) { framesSinceColor = 0; const style = getComputedStyle(canvas); const next = { played: style.getPropertyValue("--waveform-progress").trim() || style.color, unplayed: style.getPropertyValue("--waveform").trim() || style.color, }; if ( next.played !== colors.played || next.unplayed !== colors.unplayed ) { colors = next; lastProgress = -1; } } const progress = progressRef.current; // Off screen, leave lastProgress alone so it repaints when it returns. if ( progress === lastProgress || size.width === 0 || !visibleRef.current ) { return; } lastProgress = progress; context.setTransform(ratio, 0, 0, ratio, 0, 0); context.clearRect(0, 0, size.width, size.height); if (loading || !peaks) { return; } drawPass(colors.unplayed, size.width); drawPass(colors.played, progress * size.width); }; const unsubscribe = subscribeFrame(draw); return () => { unsubscribe(); observer.disconnect(); }; }, [ barGap, barRadius, barWidth, loading, peaks, progressRef, variant, visibleRef, ]); return ( <> {loading ? (

) : null}