audio-player-demo

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