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:T3b44,"use client"; import * as React from "react"; import RegionsPlugin, { type Region, } from "wavesurfer.js/dist/plugins/regions.esm.js"; import { cn } from "@/lib/utils"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Slider } from "@/components/ui/slider"; import { Play, Pause, Volume2, VolumeX, RotateCcw, Repeat, Trash2, } from "lucide-react"; import WavesurferPlayer, { formatTime, useWavePlayer } from "@/lib/wave-cn"; import type WaveSurfer from "wavesurfer.js"; // ─── Types ─────────────────────────────────────────────────────────────────── export interface RegionData { id: string; start: number; end: number; color?: string; content?: string; } export interface WaveRegionsProps { /** Audio source URL */ src: string; /** Optional title shown above the waveform */ title?: string; /** Initial volume (0–1) */ defaultVolume?: number; /** Allow creating and editing regions */ editable?: boolean; /** Default color for new regions @default "color-mix(in oklab, var(--primary) 25%, transparent)" */ regionColor?: string; /** Color for the active (looping) region @default "color-mix(in oklab, var(--primary) 45%, transparent)" */ activeRegionColor?: string; /** Audio bar color. Accepts any CSS value including var(--*) tokens @default "var(--muted-foreground)" */ waveColor?: string; /** Progress bar color. Accepts any CSS value including var(--*) tokens @default "var(--primary)" */ progressColor?: string; /** Waveform bar width in px @default 3 */ barWidth?: number; /** Waveform bar gap in px @default 2 */ barGap?: number; /** Rounded borders for bars @default 2 */ barRadius?: number; /** Waveform height in px @default 64 */ waveHeight?: number; /** Called when a region is created by the user */ onRegionCreated?: (region: RegionData) => void; /** Called when a region is updated (moved/resized) */ onRegionUpdated?: (region: RegionData) => void; /** Called when a region is removed */ onRegionRemoved?: (id: string) => void; /** Called when a region is clicked */ onRegionClicked?: (region: RegionData) => void; /** Called when playback starts */ onPlay?: () => void; /** Called when playback pauses */ onPause?: () => void; /** Called when playback finishes */ onFinish?: () => void; /** Called with current time on every audio process tick */ onTimeUpdate?: (currentTime: number, duration: number) => void; className?: string; } type RegionsPluginInstance = InstanceType; // ─── Helpers ───────────────────────────────────────────────────────────────── function toRegionData(r: Region): RegionData { return { id: r.id, start: r.start, end: r.end, color: r.color, content: r.content?.textContent ?? undefined, }; } // ─── Component ─────────────────────────────────────────────────────────────── export function WaveRegions({ src, title, defaultVolume = 0.8, editable = true, regionColor = "color-mix(in oklab, var(--primary) 25%, transparent)", activeRegionColor = "color-mix(in oklab, var(--primary) 45%, transparent)", waveColor, progressColor, barWidth, barGap, barRadius, waveHeight, onRegionCreated, onRegionUpdated, onRegionRemoved, onRegionClicked, onPlay, onPause, onFinish, onTimeUpdate, className, }: WaveRegionsProps) { const [regionsPlugin, setRegionsPlugin] = React.useState(null); const [regions, setRegions] = React.useState([]); const [activeRegionId, setActiveRegionId] = React.useState( null, ); const [isLooping, setIsLooping] = React.useState(false); // Latest props/state readable from plugin listeners without re-subscribing. const latest = React.useRef({ editable, regionColor, activeRegionId, onRegionCreated, onRegionUpdated, onRegionRemoved, onRegionClicked, }); React.useEffect(() => { latest.current = { editable, regionColor, activeRegionId, onRegionCreated, onRegionUpdated, onRegionRemoved, onRegionClicked, }; }); // ── Memoized plugin ────────────────────────────────────────────────────── const plugins = React.useMemo( () => (typeof document === "undefined" ? [] : [RegionsPlugin.create()]), [], ); // ── Player ─────────────────────────────────────────────────────────────── const player = useWavePlayer({ defaultVolume, onPlay, onPause, onFinish, onTimeUpdate, onReady: (ws) => { const live = ws .getActivePlugins() .find((p) => p instanceof RegionsPlugin) as | RegionsPluginInstance | undefined; setRegionsPlugin(live ?? null); }, }); const handlers = React.useMemo( () => ({ ...player.handlers, onDestroy: (ws: WaveSurfer) => { player.handlers.onDestroy?.(ws); setRegionsPlugin(null); setRegions([]); setActiveRegionId(null); setIsLooping(false); }, }), [player.handlers], ); // ── Drag selection ─────────────────────────────────────────────────────── React.useEffect(() => { if (!regionsPlugin || !editable) return; return regionsPlugin.enableDragSelection({ color: regionColor, resize: true, drag: true, }); }, [regionsPlugin, editable, regionColor]); // ── Region events ──────────────────────────────────────────────────────── React.useEffect(() => { const rp = regionsPlugin; if (!rp) return; const unsubs = [ rp.on("region-created", (region: Region) => { const { editable, regionColor, onRegionCreated } = latest.current; if (editable) { region.setOptions({ color: regionColor, resize: true, drag: true }); } const data = toRegionData(region); setRegions((prev) => { if (prev.some((r) => r.id === data.id)) return prev; return [...prev, data]; }); onRegionCreated?.(data); }), rp.on("region-updated", (region: Region) => { const data = toRegionData(region); setRegions((prev) => prev.map((r) => (r.id === data.id ? data : r)), ); latest.current.onRegionUpdated?.(data); }), rp.on("region-removed", (region: Region) => { setRegions((prev) => prev.filter((r) => r.id !== region.id)); setActiveRegionId((prev) => (prev === region.id ? null : prev)); if (latest.current.activeRegionId === region.id) setIsLooping(false); latest.current.onRegionRemoved?.(region.id); }), rp.on("region-clicked", (region: Region, e: MouseEvent) => { e.stopPropagation(); setActiveRegionId(region.id); latest.current.onRegionClicked?.(toRegionData(region)); }), ]; return () => unsubs.forEach((u) => u()); }, [regionsPlugin]); // ── Loop active region ─────────────────────────────────────────────────── React.useEffect(() => { const ws = player.wavesurfer.current; const rp = regionsPlugin; if (!ws || !rp || !isLooping || !activeRegionId) return; const active = rp.getRegions().find((r) => r.id === activeRegionId); if (!active) return; // Play the active region active.play(); const unsub = rp.on("region-out", (region) => { if (region.id === active.id) active.play(); }); return () => unsub(); }, [player.wavesurfer, regionsPlugin, isLooping, activeRegionId]); // ── Highlight active region ────────────────────────────────────────────── React.useEffect(() => { if (!regionsPlugin) return; regionsPlugin.getRegions().forEach((r) => { r.setOptions({ color: r.id === activeRegionId ? activeRegionColor : regionColor, }); }); }, [regionsPlugin, activeRegionId, regionColor, activeRegionColor]); // ── Controls ───────────────────────────────────────────────────────────── const { seek, setVolume } = player; const handleSeek = React.useCallback(([v]: number[]) => seek(v), [seek]); const handleVolume = React.useCallback( ([v]: number[]) => setVolume(v), [setVolume], ); const toggleLoop = React.useCallback(() => { setIsLooping((prev) => !prev); }, []); const removeActiveRegion = React.useCallback(() => { if (!activeRegionId || !regionsPlugin) return; const active = regionsPlugin .getRegions() .find((r) => r.id === activeRegionId); active?.remove(); }, [regionsPlugin, activeRegionId]); // ── Derived ────────────────────────────────────────────────────────────── const { isReady, isPlaying, isMuted, volume, currentTime, duration, progress } = player; const activeRegion = activeRegionId ? regions.find((r) => r.id === activeRegionId) : undefined; // ── Render ───────────────────────────────────────────────────────────── return ( {title && (

{title}

)} {/* Waveform with regions */}

{/* Region info */} {regions.length > 0 && (

{regions.length} region{regions.length !== 1 ? "s" : ""} {activeRegionId && ( <> {" · "} Active: {formatTime(activeRegion?.start ?? 0)}– {formatTime(activeRegion?.end ?? 0)} )}

)} {/* Seek bar */}

{formatTime(currentTime)} {formatTime(duration)}

{/* Controls */}

{/* Loop active region */} {/* Remove active region */} {editable && activeRegionId && ( )}

{/* Volume */}

{/* Hint */} {editable && isReady && regions.length === 0 && (

Click and drag on the waveform to create a region

)} ); } export default WaveRegions; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","wavesurfer.js",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/wavesurfer.js","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"wavesurfer.js"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@waves-cn","registryDependencies":["@waves-cn/wave-cn","button","card","slider"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/components/wave-regions.tsx","content":"$52","type":"registry:component","target":"components/waves-cn/wave-regions.tsx"}],"className":"h-[70svh] min-h-80"}]]}]