Audio

1"use client";
2 
3import * as React from "react";
4import { Pause, Play } from "lucide-react";
5import { cn, Button, Slider } from "./_adapter";
6 
7import { AudioProvider, useAudio } from "./context";
8import type { SerializableAudio, AudioVariant } from "./schema";
9 
10const FALLBACK_LOCALE = "en-US";
11 
12function formatTime(seconds: number): string {
13  if (!Number.isFinite(seconds)) return "0:00";
14  const mins = Math.floor(seconds / 60);
15  const secs = Math.floor(seconds % 60);
16  return `${mins}:${secs.toString().padStart(2, "0")}`;
17}
18 
19export interface AudioProps extends SerializableAudio {
20  variant?: AudioVariant;
21  className?: string;
22  onMediaEvent?: (type: "play" | "pause" | "mute" | "unmute") => void;
23}
24 
25export function Audio(props: AudioProps) {
26  return (
27    <AudioProvider>
28      <AudioInner {...props} />
29    </AudioProvider>
30  );
31}
32 
33interface PlayerControls {
34  isPlaying: boolean;
35  currentTime: number;
36  duration: number;
37  onPlayPause: () => void;
38  onSeek: (value: number[]) => void;
39  onSeekStart: () => void;
40  onSeekEnd: () => void;
41}
42 
43interface FullPlayerProps {
44  artwork?: string;
45  title?: string;
46  description?: string;
47  controls: PlayerControls;
48}
49 
50function FullPlayer({
51  artwork,
52  title,
53  description,
54  controls,
55}: FullPlayerProps) {
56  return (
57    <div className="flex w-full flex-col">
58      {artwork && (
59        <div className="bg-muted relative aspect-[4/3] w-full overflow-hidden">
60          <img
61            src={artwork}
62            alt=""
63            aria-hidden="true"
64            loading="lazy"
65            decoding="async"
66            className="absolute inset-0 h-full w-full object-cover"
67          />
68        </div>
69      )}
70      <div className="flex flex-col gap-5 p-4">
71        {(title || description) && (
72          <div className="space-y-0.5">
73            {title && (
74              <div className="text-foreground line-clamp-2 font-semibold leading-snug">
75                {title}
76              </div>
77            )}
78            {description && (
79              <div className="text-muted-foreground line-clamp-2 text-sm leading-snug">
80                {description}
81              </div>
82            )}
83          </div>
84        )}
85        <div className="flex items-start gap-3">
86          <div className="flex flex-1 flex-col gap-2">
87            <Slider
88              value={[controls.currentTime]}
89              max={controls.duration || 100}
90              step={0.1}
91              onValueChange={controls.onSeek}
92// … truncated