@inferencesh/ui 0.0.0-stage → 0.1.2

package/src/components/audio-player.tsx

@@ -0,0 +1,549 @@
+"use client"
+
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+import { PauseIcon, PlayIcon } from "lucide-react"
+import {
+    ComponentProps,
+    createContext,
+    HTMLProps,
+    ReactNode,
+    RefObject,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState
+} from "react"
+
+import { Button } from "../shadcn/button"
+import { cn } from "cn"
+
+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<TData = unknown> {
+  id: string | number
+  src: string
+  data?: TData
+}
+
+interface AudioPlayerApi<TData = unknown> {
+  ref: RefObject<HTMLAudioElement | null>
+  activeItem: AudioPlayerItem<TData> | null
+  duration: number | undefined
+  error: MediaError | null
+  isPlaying: boolean
+  isBuffering: boolean
+  isItemActive: (id: string | number | null) => boolean
+  setActiveItem: (item: AudioPlayerItem<TData> | null) => Promise<void>
+  play: (item?: AudioPlayerItem<TData> | null) => Promise<void>
+  pause: () => void
+  seek: (time: number) => void
+}
+
+const AudioPlayerContext = createContext<AudioPlayerApi<unknown> | null>(null)
+
+export function useAudioPlayer<TData = unknown>(): AudioPlayerApi<TData> {
+  const api = useContext(AudioPlayerContext) as AudioPlayerApi<TData> | null
+  if (!api) {
+    throw new Error(
+      "useAudioPlayer cannot be called outside of AudioPlayerProvider"
+    )
+  }
+  return api
+}
+
+const AudioPlayerTimeContext = createContext<number | null>(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<TData = unknown>({
+  children,
+}: {
+  children: ReactNode
+}) {
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const itemRef = useRef<AudioPlayerItem<TData> | null>(null)
+  const playPromiseRef = useRef<Promise<void> | null>(null)
+  const [readyState, setReadyState] = useState<number>(0)
+  const [networkState, setNetworkState] = useState<number>(0)
+  const [time, setTime] = useState<number>(0)
+  const [duration, setDuration] = useState<number | undefined>(undefined)
+  const [error, setError] = useState<MediaError | null>(null)
+  const [activeItem, _setActiveItem] = useState<AudioPlayerItem<TData> | null>(
+    null
+  )
+  const [paused, setPaused] = useState(true)
+
+  const setActiveItem = useCallback(
+    async (item: AudioPlayerItem<TData> | null) => {
+      if (!audioRef.current) return
+
+      if (item?.id === itemRef.current?.id) {
+        return
+      }
+      itemRef.current = item
+      audioRef.current.pause()
+      audioRef.current.currentTime = 0
+      if (item === null) {
+        audioRef.current.removeAttribute("src")
+      } else {
+        audioRef.current.src = item.src
+      }
+      audioRef.current.load()
+    },
+    []
+  )
+
+  const play = useCallback(
+    async (item?: AudioPlayerItem<TData> | 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
+      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()
+      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 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)
+    }
+  })
+
+  const isPlaying = !paused
+  const isBuffering =
+    readyState < ReadyState.HAVE_FUTURE_DATA &&
+    networkState === NetworkState.NETWORK_LOADING
+
+  const api = useMemo<AudioPlayerApi<TData>>(
+    () => ({
+      ref: audioRef,
+      duration,
+      error,
+      isPlaying,
+      isBuffering,
+      activeItem,
+      isItemActive,
+      setActiveItem,
+      play,
+      pause,
+      seek,
+    }),
+    [
+      audioRef,
+      duration,
+      error,
+      isPlaying,
+      isBuffering,
+      activeItem,
+      isItemActive,
+      setActiveItem,
+      play,
+      pause,
+      seek,
+    ]
+  )
+
+  return (
+    <AudioPlayerContext.Provider value={api as AudioPlayerApi<unknown>}>
+      <AudioPlayerTimeContext.Provider value={time}>
+        <audio ref={audioRef} className="hidden" crossOrigin="anonymous" />
+        {children}
+      </AudioPlayerTimeContext.Provider>
+    </AudioPlayerContext.Provider>
+  )
+}
+
+export const AudioPlayerProgress = ({
+  ...otherProps
+}: Omit<
+  ComponentProps<typeof SliderPrimitive.Root>,
+  "min" | "max" | "value"
+>) => {
+  const player = useAudioPlayer()
+  const time = useAudioPlayerTime()
+  const wasPlayingRef = useRef(false)
+
+  return (
+    <SliderPrimitive.Root
+      {...otherProps}
+      value={[time]}
+      onValueChange={(vals, details) => {
+        const val = Array.isArray(vals) ? (vals as number[])[0] : (vals as number)
+        if (val !== undefined) player.seek(val)
+        otherProps.onValueChange?.(vals, details)
+      }}
+      min={0}
+      max={player.duration ?? 0}
+      step={otherProps.step || 0.25}
+      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
+      )}
+      disabled={
+        player.duration === undefined ||
+        !Number.isFinite(player.duration) ||
+        Number.isNaN(player.duration)
+      }
+    >
+      <SliderPrimitive.Control
+        onPointerDown={(e) => {
+          wasPlayingRef.current = player.isPlaying
+          player.pause()
+        }}
+        onPointerUp={() => {
+          if (wasPlayingRef.current) {
+            player.play()
+          }
+        }}
+        onKeyDown={(e) => {
+          if (e.key === " ") {
+            e.preventDefault()
+            if (!player.isPlaying) {
+              player.play()
+            } else {
+              player.pause()
+            }
+          }
+        }}
+        className="relative flex h-4 w-full touch-none items-center select-none"
+      >
+        <SliderPrimitive.Track className="bg-muted relative h-[4px] w-full grow overflow-hidden rounded-full">
+          <SliderPrimitive.Indicator className="bg-primary absolute h-full" />
+        </SliderPrimitive.Track>
+        <SliderPrimitive.Thumb
+          className="relative flex h-0 w-0 items-center justify-center opacity-0 group-hover/player:opacity-100 focus-visible:opacity-100 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+          data-slot="slider-thumb"
+        >
+          <div className="bg-foreground absolute size-3 rounded-full" />
+        </SliderPrimitive.Thumb>
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  )
+}
+
+export const AudioPlayerTime = ({
+  className,
+  ...otherProps
+}: HTMLProps<HTMLSpanElement>) => {
+  const time = useAudioPlayerTime()
+  return (
+    <span
+      {...otherProps}
+      className={cn("text-muted-foreground text-sm tabular-nums", className)}
+    >
+      {formatTime(time)}
+    </span>
+  )
+}
+
+export const AudioPlayerDuration = ({
+  className,
+  ...otherProps
+}: HTMLProps<HTMLSpanElement>) => {
+  const player = useAudioPlayer()
+  return (
+    <span
+      {...otherProps}
+      className={cn("text-muted-foreground text-sm tabular-nums", className)}
+    >
+      {player.duration !== null &&
+      player.duration !== undefined &&
+      !Number.isNaN(player.duration)
+        ? formatTime(player.duration)
+        : "--:--"}
+    </span>
+  )
+}
+
+interface SpinnerProps {
+  className?: string
+}
+
+function Spinner({ className }: SpinnerProps) {
+  return (
+    <div
+      className={cn(
+        "border-muted border-t-foreground size-3.5 animate-spin rounded-full border-2",
+        className
+      )}
+      role="status"
+      aria-label="Loading"
+    >
+      <span className="sr-only">Loading...</span>
+    </div>
+  )
+}
+
+interface PlayButtonProps extends React.ComponentProps<typeof Button> {
+  playing: boolean
+  onPlayingChange: (playing: boolean) => void
+  loading?: boolean
+}
+
+const PlayButton = ({
+  playing,
+  onPlayingChange,
+  className,
+  onClick,
+  loading,
+  ...otherProps
+}: PlayButtonProps) => {
+  return (
+    <Button
+      {...otherProps}
+      onClick={(e) => {
+        onPlayingChange(!playing)
+        onClick?.(e)
+      }}
+      className={cn("relative", className)}
+      aria-label={playing ? "Pause" : "Play"}
+      type="button"
+    >
+      {playing ? (
+        <PauseIcon
+          className={cn("size-4", loading && "opacity-0")}
+          aria-hidden="true"
+        />
+      ) : (
+        <PlayIcon
+          className={cn("size-4", loading && "opacity-0")}
+          aria-hidden="true"
+        />
+      )}
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center rounded-[inherit] backdrop-blur-xs">
+          <Spinner />
+        </div>
+      )}
+    </Button>
+  )
+}
+
+export interface AudioPlayerButtonProps<TData = unknown>
+  extends React.ComponentProps<typeof Button> {
+  item?: AudioPlayerItem<TData>
+}
+
+export function AudioPlayerButton<TData = unknown>({
+  item,
+  ...otherProps
+}: AudioPlayerButtonProps<TData>) {
+  const player = useAudioPlayer<TData>()
+
+  if (!item) {
+    return (
+      <PlayButton
+        {...otherProps}
+        playing={player.isPlaying}
+        onPlayingChange={(shouldPlay) => {
+          if (shouldPlay) {
+            player.play()
+          } else {
+            player.pause()
+          }
+        }}
+        loading={player.isBuffering && player.isPlaying}
+      />
+    )
+  }
+
+  return (
+    <PlayButton
+      {...otherProps}
+      playing={player.isItemActive(item.id) && player.isPlaying}
+      onPlayingChange={(shouldPlay) => {
+        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<number | null>(null)
+  const previousTimeRef = useRef<number | null>(null)
+  const callbackRef = useRef<Callback>(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
+    }
+  }, [])
+}
+
+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",
+  },
+]

package/src/components/button.tsx

@@ -0,0 +1,13 @@
+import * as React from "react"
+
+import { Button as ButtonBase } from "../shadcn/button"
+
+export { buttonVariants } from "../shadcn/button"
+
+// The shadcn button, and a button rendered as something else (a Link, an
+// anchor) is told so: Base UI otherwise treats the element as a native
+// <button>, writes type="button" on it and skips the button role and key
+// handling. ui/shadcn/button.tsx stays as the CLI writes it.
+export function Button({ nativeButton, render, ...props }: React.ComponentProps<typeof ButtonBase>) {
+  return <ButtonBase nativeButton={nativeButton ?? (render ? false : undefined)} render={render} {...props} />
+}