Apple 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 MusicPlayerApple({ 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-lg w-full flex flex-col gap-2.5 bg-popover border rounded-xl 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-14 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        </div>
57        <div className="flex items-center justify-center gap-1 w-full">
58          <Button
59            variant="ghost"
60            size="icon"
61            className={cn(
62              "size-7 mr-1.5 rounded-full",
63              isShuffling
64                ? "text-apple hover:text-apple"
65                : "text-muted-foreground",
66            )}
67            aria-label={`Shuffle ${isShuffling ? "on" : "off"}`}
68            onClick={toggleShuffle}
69          >
70            <ShuffleIcon className="size-3.5" />
71          </Button>
72          <Button
73            variant="ghost"
74            size="icon"
75            className="size-8 rounded-full"
76            aria-label="Skip backwords"
77          >
78            <SkipBackIcon className="size-5" />
79          </Button>
80          <Button
81            variant="ghost"
82            size="icon"
83// … truncated