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:T5357,import { Show, createContext, createSignal, useContext } from "solid-js"; 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 { provideContext } from "@/lib/solid/context"; import { createCompatEffect } from "@/lib/solid/effect"; import type { CanvasDOMProps, DivDOMProps } 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 { mergeStyleVars } from "@/lib/solid/style"; import type { StyleValue } from "@/lib/solid/style"; import { cn } from "@/lib/utils"; interface WaveformContextValue { readonly peaks: ArrayLike | null; readonly duration: number; readonly variant: "bars" | "line" | "mirror"; readonly barWidth: number; readonly barGap: number; readonly barRadius: number; readonly loading: boolean; readonly progress: number; readonly hover: number | null; readonly interactive: boolean; timeToPosition: (time: number) => number; } const WaveformContext = createContext(); const useWaveform = (part: string) => { const context = useContext(WaveformContext); if (!context) throw new Error(`${part} must be used inside Waveform.`); return context; }; interface WaveformCanvasProps extends Omit { className?: string; ref?: RefTarget; } export const WaveformCanvas = (props: WaveformCanvasProps) => { const settings = useWaveform("WaveformCanvas"); let canvas: HTMLCanvasElement | undefined; const visible = useVisibility(() => canvas ?? null); createCompatEffect( () => ({ barGap: settings.barGap, barRadius: settings.barRadius, barWidth: settings.barWidth, loading: settings.loading, peaks: settings.peaks, variant: settings.variant, }), (options) => { const element = canvas; const context = element?.getContext("2d"); if (!(element && context)) return; const size = { width: 0, height: 0 }; let ratio = 1; let levels = new Float32Array(0); let lastProgress = -1; let colors = { played: "", unplayed: "" }; let sinceColor = 30; const resize = () => { const rect = element.getBoundingClientRect(); size.width = rect.width; size.height = rect.height; ratio = window.devicePixelRatio || 1; element.width = Math.max(1, Math.round(size.width * ratio)); element.height = Math.max(1, Math.round(size.height * ratio)); const count = Math.max( 1, Math.floor( (size.width + options.barGap) / (options.barWidth + options.barGap) ) ); levels = new Float32Array(count); if (options.peaks?.length) resampleLevels(options.peaks, 0, options.peaks.length, levels); lastProgress = -1; }; const drawPass = (color: string, width: number) => { context.save(); context.beginPath(); context.rect(0, 0, width, size.height); context.clip(); context.fillStyle = color; context.strokeStyle = color; const pitch = options.barWidth + options.barGap; const middle = size.height / 2; if (options.variant === "line") { context.beginPath(); for (let index = 0; index < levels.length; index++) { const x = index * pitch + options.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--) { context.lineTo( index * pitch + options.barWidth / 2, middle + (levels[index] ?? 0) * (middle - 1) ); } context.closePath(); context.fill(); } else { for (let index = 0; index < levels.length; index++) { const height = Math.max(2, (levels[index] ?? 0) * size.height); const y = options.variant === "mirror" ? middle - height / 2 : size.height - height; context.beginPath(); context.roundRect( index * pitch, y, options.barWidth, height, Math.min(options.barRadius, options.barWidth / 2, height / 2) ); context.fill(); } } context.restore(); }; resize(); const observer = new ResizeObserver(resize); observer.observe(element); const unsubscribe = subscribeFrame(() => { if (++sinceColor >= 30) { sinceColor = 0; const style = getComputedStyle(element); 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 = settings.progress; if (progress === lastProgress || !size.width || !visible.current) return; lastProgress = progress; context.setTransform(ratio, 0, 0, ratio, 0, 0); context.clearRect(0, 0, size.width, size.height); if (options.loading || !options.peaks) return; drawPass(colors.unplayed, size.width); drawPass(colors.played, progress * size.width); }); return () => { unsubscribe(); observer.disconnect(); }; } ); const rest = omitProps(props, ["class", "className", "ref"]); return ( <>