Music Player

1"use client";
2import React from "react";
3import { useState, useEffect, useRef } from "react";
4import {
5  Play,
6  Pause,
7  SkipForward,
8  SkipBack,
9  Heart,
10  Repeat,
11  Shuffle,
12  Volume2,
13  VolumeX,
14  MoreHorizontal,
15  Maximize2,
16  Minimize2,
17  List,
18  X,
19} from "lucide-react";
20import Image from "next/image";
21 
22export interface Track {
23  id: string;
24  title: string;
25  artist: string;
26  album: string;
27  artwork: string;
28  duration: number;
29  url?: string;
30}
31 
32export interface MusicPlayerProps {
33  theme?: "default" | "spotify" | "cosmic" | "midnight";
34  currentTrack?: Track;
35  queue?: Track[];
36  currentIndex?: number;
37  initialTime?: number;
38  className?: string;
39  autoPlay?: boolean;
40  showEqualizer?: boolean;
41  onPlayPause?: (isPlaying: boolean) => void;
42  onTimeChange?: (time: number) => void;
43  onTrackEnd?: () => void;
44  onTrackChange?: (track: Track, index: number) => void;
45  onVolumeChange?: (volume: number) => void;
46}
47 
48const defaultTrack: Track = {
49  id: "default",
50  title: "Sample Track",
51  artist: "Sample Artist",
52  album: "Sample Album",
53  artwork: "/placeholder.svg?height=300&width=300",
54  duration: 180,
55};
56 
57export const MusicPlayer = ({
58  theme = "default",
59  currentTrack,
60  queue = [],
61  currentIndex = 0,
62  initialTime = 0,
63  className = "",
64  autoPlay = false,
65  showEqualizer = true,
66  onPlayPause,
67  onTimeChange,
68  onTrackEnd,
69  onTrackChange,
70  onVolumeChange,
71}: MusicPlayerProps) => {
72  const track = currentTrack || defaultTrack;
73  const [isPlaying, setIsPlaying] = useState(autoPlay);
74  const [currentTime, setCurrentTime] = useState(initialTime);
75  const [volume, setVolume] = useState(75);
76  const [isMuted, setIsMuted] = useState(false);
77  const [liked, setLiked] = useState(false);
78  const [isShuffled, setIsShuffled] = useState(false);
79  const [repeatMode, setRepeatMode] = useState<"off" | "all" | "one">("off");
80  const [mounted, setMounted] = useState(false);
81  const [isExpanded, setIsExpanded] = useState(false);
82  const [showVolumeSlider, setShowVolumeSlider] = useState(false);
83  // <CHANGE> Added queue panel state
84  const [showQueue, setShowQueue] = useState(false);
85  const [hoverTime, setHoverTime] = useState<number | null>(null);
86  const [equalizerBars, setEqualizerBars] = useState(Array(12).fill(0));
87  const progressRef = useRef<HTMLDivElement>(null);
88  const volumeRef = useRef<HTMLDivElement>(null);
89 
90  useEffect(() => {
91    setMounted(true);
92  }, []);
93 
94  // Keyboard shortcuts
95  useEffect(() => {
96// … truncated