Spotify 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 MusicPlayerSpotify({ 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-2 bg-popover border rounded-2xl p-4">
35      <div className="flex items-start md:items-center flex-col md:flex-row gap-2 md:gap-4">
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>
52          <p className="text-lg font-semibold">{song.name}</p>
53          <p className="text-sm text-muted-foreground">
54            {song.artists.join(", ")}
55          </p>
56        </div>
57      </div>
58      <div className="md:order-2 md:flex mt-2 md:mt-0 items-center gap-2 relative">
59        <span className="text-xs text-muted-foreground hidden md:block">
60          {formattedCurrentTime}
61        </span>
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          style={{ "--primary": "var(--spotify)" } as React.CSSProperties}
70        />
71        <span className="text-xs text-muted-foreground hidden md:block">
72          {formattedDuration}
73        </span>
74        <div className="w-full flex justify-between mt-1.5 text-xs text-muted-foreground md:hidden">
75          <span>{formattedCurrentTime}</span>
76          <span>{formattedDuration}</span>
77        </div>
78      </div>
79// … truncated