Audio Player

1"use client"
2import React, { useRef, useState } from "react"
3import { Button } from "@/components/ui/button" // Registry
4import {
5  Play,
6  Pause,
7  SkipBack,
8  SkipForward,
9  Shuffle,
10  Repeat,
11} from "lucide-react"
12import { motion, AnimatePresence } from "motion/react"
13import { cn } from "@/lib/utils"
14 
15const formatTime = (seconds: number) => {
16  const minutes = Math.floor(seconds / 60)
17  const remainingSeconds = Math.floor(seconds % 60)
18  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
19}
20 
21const CustomSlider = ({
22  value,
23  onChange,
24  className,
25}: {
26  value: number
27  onChange: (value: number) => void
28  className?: string
29}) => {
30  return (
31    <motion.div
32      className={cn(
33        "bg-secondary relative h-1 w-full cursor-pointer rounded-full",
34        className,
35      )}
36      onClick={(e) => {
37        const rect = e.currentTarget.getBoundingClientRect()
38        const x = e.clientX - rect.left
39        const percentage = (x / rect.width) * 100
40        onChange(Math.min(Math.max(percentage, 0), 100))
41      }}
42    >
43      <motion.div
44        className="bg-primary absolute top-0 left-0 h-full rounded-full"
45        style={{ width: `${value}%` }}
46        initial={{ width: 0 }}
47        animate={{ width: `${value}%` }}
48        transition={{ type: "spring", stiffness: 300, damping: 30 }}
49      />
50    </motion.div>
51  )
52}
53 
54const AudioPlayer = ({
55  src,
56  cover,
57  title,
58}: {
59  src: string
60  cover?: string
61  title?: string
62}) => {
63  const audioRef = useRef<HTMLAudioElement>(null)
64  const [isPlaying, setIsPlaying] = useState(false)
65  const [progress, setProgress] = useState(0)
66  const [currentTime, setCurrentTime] = useState(0)
67  const [duration, setDuration] = useState(0)
68  const [isShuffle, setIsShuffle] = useState(false)
69  const [isRepeat, setIsRepeat] = useState(false)
70 
71  const togglePlay = () => {
72    if (audioRef.current) {
73      if (isPlaying) {
74        audioRef.current.pause()
75      } else {
76        audioRef.current.play()
77      }
78      setIsPlaying(!isPlaying)
79    }
80  }
81 
82  const handleTimeUpdate = () => {
83    if (audioRef.current) {
84      const progress =
85        (audioRef.current.currentTime / audioRef.current.duration) * 100
86      setProgress(isFinite(progress) ? progress : 0)
87      setCurrentTime(audioRef.current.currentTime)
88      setDuration(audioRef.current.duration)
89    }
90  }
91 
92  const handleSeek = (value: number) => {
93    if (audioRef.current && audioRef.current.duration) {
94// … truncated