audio-player

1"use client"
2 
3import {
4  ComponentProps,
5  createContext,
6  HTMLProps,
7  ReactNode,
8  RefObject,
9  useCallback,
10  useContext,
11  useEffect,
12  useMemo,
13  useRef,
14  useState,
15} from "react"
16import * as SliderPrimitive from "@radix-ui/react-slider"
17import { Check, PauseIcon, PlayIcon, Settings } from "lucide-react"
18 
19import { cn } from "@/lib/utils"
20import { Button } from "@/components/ui/button"
21import {
22  DropdownMenu,
23  DropdownMenuContent,
24  DropdownMenuItem,
25  DropdownMenuTrigger,
26} from "@/components/ui/dropdown-menu"
27 
28enum ReadyState {
29  HAVE_NOTHING = 0,
30  HAVE_METADATA = 1,
31  HAVE_CURRENT_DATA = 2,
32  HAVE_FUTURE_DATA = 3,
33  HAVE_ENOUGH_DATA = 4,
34}
35 
36enum NetworkState {
37  NETWORK_EMPTY = 0,
38  NETWORK_IDLE = 1,
39  NETWORK_LOADING = 2,
40  NETWORK_NO_SOURCE = 3,
41}
42 
43function formatTime(seconds: number) {
44  const hrs = Math.floor(seconds / 3600)
45  const mins = Math.floor((seconds % 3600) / 60)
46  const secs = Math.floor(seconds % 60)
47 
48  const formattedMins = mins < 10 ? `0${mins}` : mins
49  const formattedSecs = secs < 10 ? `0${secs}` : secs
50 
51  return hrs > 0
52    ? `${hrs}:${formattedMins}:${formattedSecs}`
53    : `${mins}:${formattedSecs}`
54}
55 
56interface AudioPlayerItem<TData = unknown> {
57  id: string | number
58  src: string
59  data?: TData
60}
61 
62interface AudioPlayerApi<TData = unknown> {
63  ref: RefObject<HTMLAudioElement | null>
64  activeItem: AudioPlayerItem<TData> | null
65  duration: number | undefined
66  error: MediaError | null
67  isPlaying: boolean
68  isBuffering: boolean
69  playbackRate: number
70  isItemActive: (id: string | number | null) => boolean
71  setActiveItem: (item: AudioPlayerItem<TData> | null) => Promise<void>
72  play: (item?: AudioPlayerItem<TData> | null) => Promise<void>
73  pause: () => void
74  seek: (time: number) => void
75  setPlaybackRate: (rate: number) => void
76}
77 
78const AudioPlayerContext = createContext<AudioPlayerApi<unknown> | null>(null)
79 
80export function useAudioPlayer<TData = unknown>(): AudioPlayerApi<TData> {
81  const api = useContext(AudioPlayerContext) as AudioPlayerApi<TData> | null
82  if (!api) {
83    throw new Error(
84      "useAudioPlayer cannot be called outside of AudioPlayerProvider"
85    )
86  }
87  return api
88}
89 
90const AudioPlayerTimeContext = createContext<number | null>(null)
91 
92export const useAudioPlayerTime = () => {
93  const time = useContext(AudioPlayerTimeContext)
94  if (time === null) {
95    throw new Error(
96      "useAudioPlayerTime cannot be called outside of AudioPlayerProvider"
97    )
98  }
99  return time
100}
101 
102// … truncated