61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T23fa,"use client"; import React from "react"; import { Play, Pause, SkipBack, SkipForward, Volume2 } from "lucide-react"; import { cn } from "@/lib/utils"; import { useAudioPlayback } from "@/hooks/use-audio-playback"; // Utility function to format time export const formatTime = (seconds: number): string => { if (!isFinite(seconds) || isNaN(seconds)) { return "0:00"; } const mins = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${mins}:${secs.toString().padStart(2, "0")}`; }; // Progress Bar Component interface ProgressBarProps { currentTime: number; duration: number; isLoaded: boolean; onSeek?: (time: number) => void; className?: string; } const ProgressBar: React.FC = ({ currentTime, duration, isLoaded, onSeek, className, }) => { const getProgressPercentage = (): number => { if (duration === 0 || !isFinite(duration) || isNaN(duration)) return 0; if (!isFinite(currentTime) || isNaN(currentTime)) return 0; return Math.min(100, Math.max(0, (currentTime / duration) * 100)); }; const handleClick = (e: React.MouseEvent): void => { if (!onSeek || !isLoaded || duration === 0) return; const rect = e.currentTarget.getBoundingClientRect(); const clickX = e.clientX - rect.left; const percentage = clickX / rect.width; const newTime = percentage * duration; onSeek(Math.max(0, Math.min(duration, newTime))); }; return (

{onSeek && (

)}

{formatTime(currentTime)} {isLoaded ? formatTime(duration) : "Loading..."}

); }; // Controls Component interface ControlsProps { isPlaying: boolean; onPlayPause: () => void; onSkipBackward?: () => void; onSkipForward?: () => void; disabled?: boolean; size?: "sm" | "md" | "lg"; className?: string; } const Controls: React.FC = ({ isPlaying, onPlayPause, onSkipBackward, onSkipForward, disabled = false, size = "md", className, }) => { const sizeClasses = { sm: "h-8 w-8", md: "h-10 w-10", lg: "h-12 w-12", }; const iconSizes = { sm: 16, md: 20, lg: 24, }; return (

{onSkipBackward && ( )} {onSkipForward && ( )}

); }; // Main Audio Player Component export interface AudioPlayerProps { source: File | Blob | string; title?: string; artist?: string; coverImage?: string; showTitle?: boolean; showProgress?: boolean; showControls?: boolean; showVolume?: boolean; allowSeek?: boolean; autoPlay?: boolean; loop?: boolean; onPlay?: () => void; onPause?: () => void; onEnd?: () => void; onError?: (error: Error) => void; className?: string; variant?: "default" | "minimal" | "compact"; } export const AudioPlayer: React.FC = ({ source, title, artist, coverImage, showTitle = true, showProgress = true, showControls = true, showVolume = false, allowSeek = true, autoPlay = false, loop = false, onPlay, onPause, onEnd, onError, className, variant = "default", }) => { const { isPlaying, audioUrl, playbackTime, duration, audioLoaded, audioRef, togglePlayback, seek, } = useAudioPlayback(source, { onPlay, onPause, onEnd, onError }); // Apply autoPlay and loop React.useEffect(() => { if (audioRef.current) { audioRef.current.loop = loop; if (autoPlay && audioLoaded) { togglePlayback(); } } }, [audioLoaded, autoPlay, loop, audioRef, togglePlayback]); const handleSeek = allowSeek ? seek : undefined; if (variant === "minimal") { return (

{showControls && ( )} {showProgress && ( )}

); } if (variant === "compact") { return (

{coverImage && ( {title

)}

{showTitle && (title || artist) && (

{title && (

{title}

)} {artist && (

{artist}

)}

{showControls && ( )} {showProgress && ( )}

); } // Default variant return (

{coverImage && (

)} {showTitle && (title || artist) && (

{title &&

{title}

} {artist && (

{artist}

)}

)} {showProgress && ( )}

{showControls && ( )} {showVolume && (

)}

); };64:T194d,import { useState, useRef, useEffect, useCallback } from "react"; export interface UseAudioPlaybackOptions { onPlay?: () => void; onPause?: () => void; onEnd?: () => void; onError?: (error: Error) => void; } export interface UseAudioPlaybackReturn { isPlaying: boolean; audioUrl: string; playbackTime: number; duration: number; audioLoaded: boolean; audioRef: React.RefObject; togglePlayback: () => Promise; stop: () => void; seek: (time: number) => void; setPlaybackRate: (rate: number) => void; resetAudio: () => void; } export const useAudioPlayback = ( source: File | Blob | string | null, options?: UseAudioPlaybackOptions ): UseAudioPlaybackReturn => { const [isPlaying, setIsPlaying] = useState(false); const [audioUrl, setAudioUrl] = useState(""); const [playbackTime, setPlaybackTime] = useState(0); const [duration, setDuration] = useState(0); const [audioLoaded, setAudioLoaded] = useState(false); const audioRef = useRef(null); const animationRef = useRef(null); const objectUrlRef = useRef(null); const optionsRef = useRef(options); optionsRef.current = options; // Update audio URL when source changes useEffect(() => { // Clean up previous object URL if (objectUrlRef.current) { URL.revokeObjectURL(objectUrlRef.current); objectUrlRef.current = null; } setAudioLoaded(false); setDuration(0); setPlaybackTime(0); setIsPlaying(false); if (source instanceof File || source instanceof Blob) { const url = URL.createObjectURL(source); objectUrlRef.current = url; setAudioUrl(url); } else if (typeof source === "string") { setAudioUrl(source); } else { setAudioUrl(""); } }, [source]); // Cleanup on unmount useEffect(() => { return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current); } if (objectUrlRef.current) { URL.revokeObjectURL(objectUrlRef.current); } }; }, []); const updatePlaybackTime = useCallback(function updateTime() { if (audioRef.current && isPlaying && !audioRef.current.paused) { setPlaybackTime(audioRef.current.currentTime); animationRef.current = requestAnimationFrame(updateTime); } }, [isPlaying]); const togglePlayback = useCallback(async () => { if (!audioRef.current || !audioLoaded) return; try { if (isPlaying) { audioRef.current.pause(); setIsPlaying(false); if (animationRef.current) { cancelAnimationFrame(animationRef.current); animationRef.current = null; } optionsRef.current?.onPause?.(); } else { await audioRef.current.play(); setIsPlaying(true); updatePlaybackTime(); optionsRef.current?.onPlay?.(); } } catch (error) { console.error("Error playing audio:", error); setIsPlaying(false); optionsRef.current?.onError?.(error as Error); } }, [isPlaying, audioLoaded, updatePlaybackTime]); const stop = () => { if (!audioRef.current) return; audioRef.current.pause(); audioRef.current.currentTime = 0; setIsPlaying(false); setPlaybackTime(0); if (animationRef.current) { cancelAnimationFrame(animationRef.current); animationRef.current = null; } }; const seek = (time: number) => { if (!audioRef.current) return; audioRef.current.currentTime = Math.max(0, Math.min(time, duration)); setPlaybackTime(audioRef.current.currentTime); }; const setPlaybackRate = (rate: number) => { if (!audioRef.current) return; audioRef.current.playbackRate = rate; }; const resetAudio = () => { stop(); if (objectUrlRef.current) { URL.revokeObjectURL(objectUrlRef.current); objectUrlRef.current = null; } setDuration(0); setAudioLoaded(false); setAudioUrl(""); }; // Audio event handlers const handleLoadedMetadata = useCallback(() => { if ( audioRef.current && !isNaN(audioRef.current.duration) && isFinite(audioRef.current.duration) ) { setDuration(audioRef.current.duration); setAudioLoaded(true); } }, []); const handleCanPlay = useCallback(() => { if ( audioRef.current && !isNaN(audioRef.current.duration) && isFinite(audioRef.current.duration) ) { setDuration(audioRef.current.duration); setAudioLoaded(true); } }, []); const handleTimeUpdate = useCallback(() => { if (audioRef.current && isPlaying) { setPlaybackTime(audioRef.current.currentTime); } }, [isPlaying]); const handleEnded = useCallback(() => { setIsPlaying(false); setPlaybackTime(0); if (animationRef.current) { cancelAnimationFrame(animationRef.current); animationRef.current = null; } if (audioRef.current) { audioRef.current.currentTime = 0; } optionsRef.current?.onEnd?.(); }, []); const handleError = useCallback((e: React.SyntheticEvent) => { console.error("Audio error:", e); setAudioLoaded(false); setIsPlaying(false); optionsRef.current?.onError?.(new Error("Error loading audio file")); }, []); // Attach event handlers useEffect(() => { const audio = audioRef.current; if (!audio) return; audio.addEventListener("loadedmetadata", handleLoadedMetadata); audio.addEventListener("canplay", handleCanPlay); audio.addEventListener("timeupdate", handleTimeUpdate); audio.addEventListener("ended", handleEnded); // eslint-disable-next-line @typescript-eslint/no-explicit-any audio.addEventListener("error", handleError as any); return () => { audio.removeEventListener("loadedmetadata", handleLoadedMetadata); audio.removeEventListener("canplay", handleCanPlay); audio.removeEventListener("timeupdate", handleTimeUpdate); audio.removeEventListener("ended", handleEnded); // eslint-disable-next-line @typescript-eslint/no-explicit-any audio.removeEventListener("error", handleError as any); }; }, [handleTimeUpdate, handleEnded, handleError, handleLoadedMetadata, handleCanPlay]); return { isPlaying, audioUrl, playbackTime, duration, audioLoaded, audioRef, togglePlayback, stop, seek, setPlaybackRate, resetAudio, }; };60:["$","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","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@watermelon","registryDependencies":["utils"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/components/watermelon-ui/audio-player.tsx","content":"$63","type":"registry:ui","target":"components/ui/audio-player.tsx"},{"path":"src/hooks/use-audio-playback.ts","content":"$64","type":"registry:hook","target":"hooks/use-audio-playback.ts"}],"className":"h-[70svh] min-h-80"}]]}]