music-player-01

1"use client"
2 
3import { PauseIcon, PlayIcon } from "lucide-react"
4 
5import { cn } from "@/lib/utils"
6import {
7  AudioPlayerButton,
8  AudioPlayerDuration,
9  AudioPlayerProgress,
10  AudioPlayerProvider,
11  AudioPlayerTime,
12  exampleTracks,
13  useAudioPlayer,
14} from "@/components/ui/audio-player"
15import { Button } from "@/components/ui/button"
16import { Card } from "@/components/ui/card"
17import { ScrollArea } from "@/components/ui/scroll-area"
18 
19interface Track {
20  id: string
21  name: string
22  url: string
23}
24 
25export default function Page() {
26  return (
27    <AudioPlayerProvider<Track>>
28      <MusicPlayer />
29    </AudioPlayerProvider>
30  )
31}
32 
33const MusicPlayer = () => {
34  return (
35    <Card className="mx-auto w-full overflow-hidden p-0">
36      <div className="flex flex-col lg:h-[180px] lg:flex-row">
37        <div className="bg-muted/50 flex flex-col overflow-hidden lg:h-full lg:w-64">
38          <ScrollArea className="h-48 w-full lg:h-full">
39            <div className="space-y-1 p-3">
40              {exampleTracks.map((song, index) => (
41                <SongListItem
42                  key={song.id}
43                  song={song}
44                  trackNumber={index + 1}
45                />
46              ))}
47            </div>
48          </ScrollArea>
49        </div>
50        <Player />
51      </div>
52    </Card>
53  )
54}
55 
56const Player = () => {
57  const player = useAudioPlayer<Track>()
58 
59  return (
60    <div className="flex flex-1 items-center p-4 sm:p-6">
61      <div className="mx-auto w-full max-w-2xl">
62        <div className="mb-4">
63          <h3 className="text-base font-semibold sm:text-lg">
64            {player.activeItem?.data?.name ?? "No track selected"}
65          </h3>
66        </div>
67        <div className="flex items-center gap-3 sm:gap-4">
68          <AudioPlayerButton
69            variant="outline"
70            size="default"
71            className="h-12 w-12 shrink-0 sm:h-10 sm:w-10"
72            disabled={!player.activeItem}
73          />
74          <div className="flex flex-1 items-center gap-2 sm:gap-3">
75            <AudioPlayerTime className="text-xs tabular-nums" />
76            <AudioPlayerProgress className="flex-1" />
77            <AudioPlayerDuration className="text-xs tabular-nums" />
78          </div>
79        </div>
80      </div>
81    </div>
82  )
83}
84 
85const SongListItem = ({
86  song,
87  trackNumber,
88}: {
89  song: Track
90  trackNumber: number
91}) => {
92  const player = useAudioPlayer<Track>()
93  const isActive = player.isItemActive(song.id)
94// … truncated