4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T29cd,"use client" import * as React from "react" import { Pause, Play, SkipBack, SkipForward, Volume, Volume1, Volume2, VolumeX, } from "lucide-react" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" import { Skeleton } from "@/components/ui/skeleton" import { Button } from "@/components/ui/ds-button" import { Slider } from "@/components/ui/ds-slider" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/ds-avatar" import { Card, CardContent } from "@/components/ui/card" // ── Types ────────────────────────────────────────────────────────────────── export interface AudioPlayerProps extends React.HTMLAttributes { src: string title?: string artist?: string coverUrl?: string autoPlay?: boolean loading?: boolean } // ── Variants ─────────────────────────────────────────────────────────────── export const audioPlayerContainerVariants = cva("w-full", { variants: {}, }) // ── Helpers ──────────────────────────────────────────────────────────────── function formatTime(seconds: number): string { if (isNaN(seconds)) return "0:00" const m = Math.floor(seconds / 60) const s = Math.floor(seconds % 60) return `${m}:${s.toString().padStart(2, "0")}` } function VolumeIcon({ level }: { level: number }) { if (level === 0) return if (level < 0.33) return if (level < 0.66) return return } // ── AudioPlayer ──────────────────────────────────────────────────────────── export function AudioPlayer({ src, title = "Unknown Track", artist, coverUrl, autoPlay = false, loading = false, className, ...props }: AudioPlayerProps) { const audioRef = React.useRef(null) const [isPlaying, setIsPlaying] = React.useState(false) const [currentTime, setCurrentTime] = React.useState(0) const [duration, setDuration] = React.useState(0) const [volume, setVolume] = React.useState(0.8) const [isMuted, setIsMuted] = React.useState(false) const [isLoading, setIsLoading] = React.useState(true) const [playbackRate, setPlaybackRate] = React.useState(1) const PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2] // ── Audio event handlers ────────────────────────────────────────────── React.useEffect(() => { const audio = audioRef.current if (!audio) return const onLoadedMetadata = () => { setDuration(audio.duration) setIsLoading(false) if (autoPlay) audio.play().catch(() => {}) } const onTimeUpdate = () => setCurrentTime(audio.currentTime) const onEnded = () => setIsPlaying(false) const onWaiting = () => setIsLoading(true) const onCanPlay = () => setIsLoading(false) audio.addEventListener("loadedmetadata", onLoadedMetadata) audio.addEventListener("timeupdate", onTimeUpdate) audio.addEventListener("ended", onEnded) audio.addEventListener("waiting", onWaiting) audio.addEventListener("canplay", onCanPlay) return () => { audio.removeEventListener("loadedmetadata", onLoadedMetadata) audio.removeEventListener("timeupdate", onTimeUpdate) audio.removeEventListener("ended", onEnded) audio.removeEventListener("waiting", onWaiting) audio.removeEventListener("canplay", onCanPlay) } }, [autoPlay]) // ── Controls ────────────────────────────────────────────────────────── const togglePlay = async () => { const audio = audioRef.current if (!audio) return if (isPlaying) { audio.pause() setIsPlaying(false) } else { await audio.play() setIsPlaying(true) } } const handleSeek = (values: number[]) => { const audio = audioRef.current if (!audio) return const t = values[0] ?? 0 audio.currentTime = t setCurrentTime(t) } const handleVolumeChange = (values: number[]) => { const audio = audioRef.current const v = values[0] ?? 0 setVolume(v) if (audio) audio.volume = v setIsMuted(v === 0) } const toggleMute = () => { const audio = audioRef.current if (!audio) return const newMuted = !isMuted setIsMuted(newMuted) audio.volume = newMuted ? 0 : volume if (!newMuted && volume === 0) { setVolume(0.5) audio.volume = 0.5 } } const skip = (seconds: number) => { const audio = audioRef.current if (!audio) return audio.currentTime = Math.max( 0, Math.min(duration, audio.currentTime + seconds) ) } const cyclePlaybackRate = () => { const audio = audioRef.current const idx = PLAYBACK_RATES.indexOf(playbackRate) const next = PLAYBACK_RATES[(idx + 1) % PLAYBACK_RATES.length] ?? 1 setPlaybackRate(next) if (audio) audio.playbackRate = next } // ── Loading skeleton ─────────────────────────────────────────────────── if (loading) { return (

) } return ( {/* Hidden audio element */}

) } 4c:["$","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,["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["skeleton","button","slider","avatar","card"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/audio-player.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-audio-player.tsx"}],"className":"h-[70svh] min-h-80"}]]}]