Music Player

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { Button } from "@/components/ui/button";
5import { Slider } from "@/components/ui/slider";
6import {
7  PauseIcon,
8  RepeatIcon,
9  ShuffleIcon,
10  SkipBackIcon,
11  SkipForwardIcon,
12  MusicIcon,
13  PlayIcon,
14  Repeat1Icon,
15} from "lucide-react";
16import { useMusicPlayer, Song } from "@/hooks/use-music-player";
17 
18export default function MusicPlayer({ song }: { song: Song }) {
19  const {
20    isPlaying,
21    duration,
22    progressPercentage,
23    formattedCurrentTime,
24    formattedDuration,
25    isShuffling,
26    repeatMode,
27    togglePlayPause,
28    handleSliderChange,
29    toggleShuffle,
30    toggleRepeat,
31  } = useMusicPlayer({ song });
32 
33  return (
34    <div className="md:max-w-md w-full flex flex-col gap-4 bg-popover border rounded-lg p-4">
35      <div className="flex items-start md:items-center flex-col md:flex-row gap-4 min-w-0">
36        {song.album.image ? (
37          <img
38            src={song.album.image}
39            alt={`${song.name} by ${song.artists.join(", ")}`}
40            className="size-full md:size-16 rounded-md object-cover"
41            aria-hidden="true"
42          />
43        ) : (
44          <div
45            className="size-full md:size-16 rounded-md bg-muted flex items-center justify-center"
46            aria-hidden="true"
47          >
48            <MusicIcon className="size-8 text-muted-foreground" />
49          </div>
50        )}
51        <div className="w-full">
52          <p className="text-lg font-semibold truncate">{song.name}</p>
53          <p className="text-sm text-muted-foreground truncate">
54            {song.artists.join(", ")}
55          </p>
56          <p className="text-sm text-muted-foreground truncate">
57            {song.album.name}
58          </p>
59        </div>
60      </div>
61      <div className="relative">
62        <Slider
63          value={[progressPercentage]}
64          max={100}
65          step={1}
66          aria-label="Music progress slider"
67          onValueChange={handleSliderChange}
68          disabled={duration === 0}
69        />
70        <div className="w-full flex justify-between mt-1.5 text-xs text-muted-foreground">
71          <span>{formattedCurrentTime}</span>
72          <span>{formattedDuration}</span>
73        </div>
74      </div>
75      <div className="flex items-center justify-center -mt-2 -mb-1">
76        <Button
77          variant="ghost"
78          size="icon"
79          className={cn(
80            "size-7 mr-1.5",
81            isShuffling ? "text-primary" : "text-muted-foreground",
82// … truncated