51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T4236,"use client" import { ComponentProps, createContext, HTMLProps, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { Check, PauseIcon, PlayIcon, Settings } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" enum ReadyState { HAVE_NOTHING = 0, HAVE_METADATA = 1, HAVE_CURRENT_DATA = 2, HAVE_FUTURE_DATA = 3, HAVE_ENOUGH_DATA = 4, } enum NetworkState { NETWORK_EMPTY = 0, NETWORK_IDLE = 1, NETWORK_LOADING = 2, NETWORK_NO_SOURCE = 3, } function formatTime(seconds: number) { const hrs = Math.floor(seconds / 3600) const mins = Math.floor((seconds % 3600) / 60) const secs = Math.floor(seconds % 60) const formattedMins = mins < 10 ? `0${mins}` : mins const formattedSecs = secs < 10 ? `0${secs}` : secs return hrs > 0 ? `${hrs}:${formattedMins}:${formattedSecs}` : `${mins}:${formattedSecs}` } interface AudioPlayerItem { id: string | number src: string data?: TData } interface AudioPlayerApi { ref: RefObject activeItem: AudioPlayerItem | null duration: number | undefined error: MediaError | null isPlaying: boolean isBuffering: boolean playbackRate: number isItemActive: (id: string | number | null) => boolean setActiveItem: (item: AudioPlayerItem | null) => Promise play: (item?: AudioPlayerItem | null) => Promise pause: () => void seek: (time: number) => void setPlaybackRate: (rate: number) => void } const AudioPlayerContext = createContext | null>(null) export function useAudioPlayer(): AudioPlayerApi { const api = useContext(AudioPlayerContext) as AudioPlayerApi | null if (!api) { throw new Error( "useAudioPlayer cannot be called outside of AudioPlayerProvider" ) } return api } const AudioPlayerTimeContext = createContext(null) export const useAudioPlayerTime = () => { const time = useContext(AudioPlayerTimeContext) if (time === null) { throw new Error( "useAudioPlayerTime cannot be called outside of AudioPlayerProvider" ) } return time } export function AudioPlayerProvider({ children, }: { children: ReactNode }) { const audioRef = useRef(null) const itemRef = useRef | null>(null) const playPromiseRef = useRef | null>(null) const [readyState, setReadyState] = useState(0) const [networkState, setNetworkState] = useState(0) const [time, setTime] = useState(0) const [duration, setDuration] = useState(undefined) const [error, setError] = useState(null) const [activeItem, _setActiveItem] = useState | null>( null ) const [paused, setPaused] = useState(true) const [playbackRate, setPlaybackRateState] = useState(1) const setActiveItem = useCallback( async (item: AudioPlayerItem | null) => { if (!audioRef.current) return if (item?.id === itemRef.current?.id) { return } itemRef.current = item const currentRate = audioRef.current.playbackRate audioRef.current.pause() audioRef.current.currentTime = 0 if (item === null) { audioRef.current.removeAttribute("src") } else { audioRef.current.src = item.src } audioRef.current.load() audioRef.current.playbackRate = currentRate }, [] ) const play = useCallback( async (item?: AudioPlayerItem | null) => { if (!audioRef.current) return if (playPromiseRef.current) { try { await playPromiseRef.current } catch (error) { console.error("Play promise error:", error) } } if (item === undefined) { const playPromise = audioRef.current.play() playPromiseRef.current = playPromise return playPromise } if (item?.id === activeItem?.id) { const playPromise = audioRef.current.play() playPromiseRef.current = playPromise return playPromise } itemRef.current = item const currentRate = audioRef.current.playbackRate if (!audioRef.current.paused) { audioRef.current.pause() } audioRef.current.currentTime = 0 if (item === null) { audioRef.current.removeAttribute("src") } else { audioRef.current.src = item.src } audioRef.current.load() audioRef.current.playbackRate = currentRate const playPromise = audioRef.current.play() playPromiseRef.current = playPromise return playPromise }, [activeItem] ) const pause = useCallback(async () => { if (!audioRef.current) return if (playPromiseRef.current) { try { await playPromiseRef.current } catch (e) { console.error(e) } } audioRef.current.pause() playPromiseRef.current = null }, []) const seek = useCallback((time: number) => { if (!audioRef.current) return audioRef.current.currentTime = time }, []) const setPlaybackRate = useCallback((rate: number) => { if (!audioRef.current) return audioRef.current.playbackRate = rate setPlaybackRateState(rate) }, []) const isItemActive = useCallback( (id: string | number | null) => { return activeItem?.id === id }, [activeItem] ) useAnimationFrame(() => { if (audioRef.current) { _setActiveItem(itemRef.current) setReadyState(audioRef.current.readyState) setNetworkState(audioRef.current.networkState) setTime(audioRef.current.currentTime) setDuration(audioRef.current.duration) setPaused(audioRef.current.paused) setError(audioRef.current.error) setPlaybackRateState(audioRef.current.playbackRate) } }) const isPlaying = !paused const isBuffering = readyState < ReadyState.HAVE_FUTURE_DATA && networkState === NetworkState.NETWORK_LOADING const api = useMemo>( () => ({ ref: audioRef, duration, error, isPlaying, isBuffering, activeItem, playbackRate, isItemActive, setActiveItem, play, pause, seek, setPlaybackRate, }), [ audioRef, duration, error, isPlaying, isBuffering, activeItem, playbackRate, isItemActive, setActiveItem, play, pause, seek, setPlaybackRate, ] ) return ( }>

) } export const AudioPlayerProgress = ({ ...otherProps }: Omit< ComponentProps, "min" | "max" | "value" >) => { const player = useAudioPlayer() const time = useAudioPlayerTime() const wasPlayingRef = useRef(false) return ( { player.seek(vals[0]) otherProps.onValueChange?.(vals) }} min={0} max={player.duration ?? 0} step={otherProps.step || 0.25} onPointerDown={(e) => { wasPlayingRef.current = player.isPlaying player.pause() otherProps.onPointerDown?.(e) }} onPointerUp={(e) => { if (wasPlayingRef.current) { player.play() } otherProps.onPointerUp?.(e) }} className={cn( "group/player relative flex h-4 touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", otherProps.className )} onKeyDown={(e) => { if (e.key === " ") { e.preventDefault() if (!player.isPlaying) { player.play() } else { player.pause() } } otherProps.onKeyDown?.(e) }} disabled={ player.duration === undefined || !Number.isFinite(player.duration) || Number.isNaN(player.duration) } >

) } export const AudioPlayerTime = ({ className, ...otherProps }: HTMLProps) => { const time = useAudioPlayerTime() return ( {formatTime(time)} ) } export const AudioPlayerDuration = ({ className, ...otherProps }: HTMLProps) => { const player = useAudioPlayer() return ( {player.duration !== null && player.duration !== undefined && !Number.isNaN(player.duration) ? formatTime(player.duration) : "--:--"} ) } interface SpinnerProps { className?: string } function Spinner({ className }: SpinnerProps) { return (

) } interface PlayButtonProps extends React.ComponentProps { playing: boolean onPlayingChange: (playing: boolean) => void loading?: boolean } const PlayButton = ({ playing, onPlayingChange, className, onClick, loading, ...otherProps }: PlayButtonProps) => { return ( ) } export interface AudioPlayerButtonProps extends React.ComponentProps { item?: AudioPlayerItem } export function AudioPlayerButton({ item, ...otherProps }: AudioPlayerButtonProps) { const player = useAudioPlayer() if (!item) { return ( { if (shouldPlay) { player.play() } else { player.pause() } }} loading={player.isBuffering && player.isPlaying} /> ) } return ( { if (shouldPlay) { player.play(item) } else { player.pause() } }} loading={ player.isItemActive(item.id) && player.isBuffering && player.isPlaying } /> ) } type Callback = (delta: number) => void function useAnimationFrame(callback: Callback) { const requestRef = useRef(null) const previousTimeRef = useRef(null) const callbackRef = useRef(callback) useEffect(() => { callbackRef.current = callback }, [callback]) useEffect(() => { const animate = (time: number) => { if (previousTimeRef.current !== null) { const delta = time - previousTimeRef.current callbackRef.current(delta) } previousTimeRef.current = time requestRef.current = requestAnimationFrame(animate) } requestRef.current = requestAnimationFrame(animate) return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current) previousTimeRef.current = null } }, []) } const PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] as const export interface AudioPlayerSpeedProps extends React.ComponentProps { speeds?: readonly number[] } export function AudioPlayerSpeed({ speeds = PLAYBACK_SPEEDS, className, variant = "ghost", size = "icon", ...props }: AudioPlayerSpeedProps) { const player = useAudioPlayer() const currentSpeed = player.playbackRate return ( {speeds.map((speed) => ( player.setPlaybackRate(speed)} className="flex items-center justify-between" > {speed === 1 ? "Normal" : `${speed}x`} {currentSpeed === speed && } ))} ) } export interface AudioPlayerSpeedButtonGroupProps extends Omit, "children"> { speeds?: readonly number[] } export function AudioPlayerSpeedButtonGroup({ speeds = [0.5, 1, 1.5, 2], className, ...props }: AudioPlayerSpeedButtonGroupProps) { const player = useAudioPlayer() const currentSpeed = player.playbackRate return (

{speeds.map((speed) => ( ))}

) } export const exampleTracks = [ { id: "0", name: "II - 00", url: "https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/00.mp3", }, { id: "1", name: "II - 01", url: "https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/01.mp3", }, { id: "2", name: "II - 02", url: "https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/02.mp3", }, { id: "3", name: "II - 03", url: "https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/03.mp3", }, { id: "4", name: "II - 04", url: "https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/04.mp3", }, { id: "5", name: "II - 05", url: "https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/05.mp3", }, { id: "6", name: "II - 06", url: "https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/06.mp3", }, { id: "7", name: "II - 07", url: "https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/07.mp3", }, { id: "8", name: "II - 08", url: "https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/08.mp3", }, { id: "9", name: "II - 09", url: "https://storage.googleapis.com/eleven-public-cdn/audio/ui-elevenlabs-io/09.mp3", }, ] 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-slider",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slider","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slider"}]]}]}],["$","li","@radix-ui/react-dropdown-menu",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-dropdown-menu","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-dropdown-menu"}]]}]}]]}],["$","$L51",null,{"namespace":"@elevenlabs-ui","registryDependencies":["button","dropdown-menu"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/audio-player.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]