bobinejs 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,1720 @@
+"use client";
+
+// src/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ../../components/ui/media-icons.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var base = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  viewBox: "0 0 24 24",
+  "aria-hidden": true
+};
+function PlayIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...base, fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M6.87 4.9v14.2a1.5 1.5 0 0 0 2.31 1.26l11.07-7.1a1.5 1.5 0 0 0 0-2.52L9.18 3.64A1.5 1.5 0 0 0 6.87 4.9Z" }) });
+}
+function PauseIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base, fill: "currentColor", ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "3.5", width: "5", height: "17", rx: "1.6" }),
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "3.5", width: "5", height: "17", rx: "1.6" })
+  ] });
+}
+function VolumeIcon({ muted: muted2, ...props }) {
+  const fade = "origin-[11px_12px] transition-[opacity,transform] duration-200 ease-media motion-reduce:transition-none";
+  return /* @__PURE__ */ jsxs("svg", { ...base, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M11 5.1v13.8a1 1 0 0 1-1.63.77L5.5 16.5h-2A1.5 1.5 0 0 1 2 15V9a1.5 1.5 0 0 1 1.5-1.5h2l3.87-3.17A1 1 0 0 1 11 5.1Z",
+        fill: "currentColor",
+        stroke: "none"
+      }
+    ),
+    /* @__PURE__ */ jsxs("g", { className: fade, style: { opacity: muted2 ? 0 : 1, transform: muted2 ? "scale(0.6)" : "none" }, children: [
+      /* @__PURE__ */ jsx("path", { d: "M15 9.5a3.5 3.5 0 0 1 0 5" }),
+      /* @__PURE__ */ jsx("path", { d: "M17.8 6.7a7.5 7.5 0 0 1 0 10.6" })
+    ] }),
+    /* @__PURE__ */ jsxs("g", { className: fade, style: { opacity: muted2 ? 1 : 0, transform: muted2 ? "none" : "scale(0.6)" }, children: [
+      /* @__PURE__ */ jsx("path", { d: "m16 9.5 5 5" }),
+      /* @__PURE__ */ jsx("path", { d: "m21 9.5-5 5" })
+    ] })
+  ] });
+}
+function EnterFullscreenIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...base, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 9V6a2 2 0 0 1 2-2h3M15 4h3a2 2 0 0 1 2 2v3M20 15v3a2 2 0 0 1-2 2h-3M9 20H6a2 2 0 0 1-2-2v-3" }) });
+}
+function ExitFullscreenIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...base, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: /* @__PURE__ */ jsx("path", { d: "M9 4v3a2 2 0 0 1-2 2H4M20 9h-3a2 2 0 0 1-2-2V4M15 20v-3a2 2 0 0 1 2-2h3M4 15h3a2 2 0 0 1 2 2v3" }) });
+}
+function PictureInPictureIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "2.5", y: "4.5", width: "19", height: "15", rx: "2.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "12", y: "11.5", width: "6.5", height: "5", rx: "1", fill: "currentColor", stroke: "none" })
+  ] });
+}
+var captionLetters = "M10.5 10.2a2.2 2.2 0 1 0 0 3.6M17 10.2a2.2 2.2 0 1 0 0 3.6";
+function CaptionsIcon({ active, ...props }) {
+  const maskId = `cc${React.useId().replace(/[^\w-]/g, "")}`;
+  return /* @__PURE__ */ jsxs("svg", { ...base, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+    /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
+      /* @__PURE__ */ jsx("rect", { width: "24", height: "24", fill: "white" }),
+      /* @__PURE__ */ jsx("path", { d: captionLetters, stroke: "black" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "2.5",
+        y: "4.5",
+        width: "19",
+        height: "15",
+        rx: "3",
+        fill: "currentColor",
+        mask: `url(#${maskId})`,
+        className: "transition-opacity duration-200 ease-media motion-reduce:transition-none",
+        style: { opacity: active ? 1 : 0 }
+      }
+    ),
+    /* @__PURE__ */ jsx("rect", { x: "2.5", y: "4.5", width: "19", height: "15", rx: "3" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: captionLetters,
+        className: "transition-opacity duration-200 ease-media motion-reduce:transition-none",
+        style: { opacity: active ? 0 : 1 }
+      }
+    )
+  ] });
+}
+function SettingsIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 7h9M17 7h3M4 17h3M11 17h9" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "7", r: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "17", r: "2" })
+  ] });
+}
+function RetryIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...base, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M3.5 12a8.5 8.5 0 1 0 2.6-6.1" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.5 4v4.5H8" })
+  ] });
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { ...base, fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 4.5 4.5L19 7.5" }) });
+}
+function SeekIcon({ direction, ...props }) {
+  return /* @__PURE__ */ jsx("svg", { ...base, fill: "currentColor", ...props, style: { transform: direction === "back" ? "scaleX(-1)" : void 0, ...props.style }, children: /* @__PURE__ */ jsx("path", { d: "M3 6.7v10.6a1 1 0 0 0 1.55.83L12 13.2v4.1a1 1 0 0 0 1.55.83l7.9-5.3a1 1 0 0 0 0-1.66l-7.9-5.3A1 1 0 0 0 12 6.7v4.1L4.55 5.87A1 1 0 0 0 3 6.7Z" }) });
+}
+
+// ../../components/ui/media.tsx
+import * as React2 from "react";
+
+// ../../lib/media-store.ts
+var MEDIA_EVENTS = [
+  "play",
+  "pause",
+  "playing",
+  "ended",
+  "waiting",
+  "canplay",
+  "seeking",
+  "seeked",
+  "timeupdate",
+  "durationchange",
+  "loadedmetadata",
+  "progress",
+  "volumechange",
+  "ratechange",
+  "emptied",
+  "loadstart",
+  "error",
+  "enterpictureinpicture",
+  "leavepictureinpicture"
+];
+var TRACK_EVENTS = ["addtrack", "removetrack", "change"];
+var initialState = {
+  paused: true,
+  ended: false,
+  started: false,
+  waiting: false,
+  currentTime: 0,
+  duration: 0,
+  bufferedEnd: 0,
+  volume: 1,
+  muted: false,
+  playbackRate: 1,
+  fullscreen: false,
+  pictureInPicture: false,
+  error: null,
+  hasSource: false,
+  textTracks: [],
+  textTrack: -1,
+  cues: []
+};
+function readBufferedEnd(media) {
+  const { buffered, currentTime } = media;
+  for (let i = 0; i < buffered.length; i++) {
+    if (buffered.start(i) <= currentTime && buffered.end(i) >= currentTime) {
+      return buffered.end(i);
+    }
+  }
+  return buffered.length ? buffered.end(buffered.length - 1) : 0;
+}
+function captionTracks(media) {
+  if (!media?.textTracks) return [];
+  return Array.from(media.textTracks).filter(
+    (track) => track.kind === "captions" || track.kind === "subtitles"
+  );
+}
+function cueText(cue) {
+  const vtt = cue;
+  const text = typeof vtt.getCueAsHTML === "function" ? vtt.getCueAsHTML().textContent : vtt.text?.replace(/<[^>]+>/g, "");
+  return (text ?? "").trim();
+}
+function defaultTrack(media, tracks) {
+  const el = Array.from(media?.querySelectorAll("track") ?? []).find((track) => track.default);
+  return el ? tracks.indexOf(el.track) : -1;
+}
+var sameList = (a, b) => a.length === b.length && a.every((value, i) => Object.is(value, b[i]));
+var sameTracks = (a, b) => a.length === b.length && a.every((t, i) => t.label === b[i].label && t.language === b[i].language && t.kind === b[i].kind);
+function readPreferences(key) {
+  try {
+    return JSON.parse(localStorage.getItem(key) ?? "{}");
+  } catch {
+    return {};
+  }
+}
+function createMediaStore({ persistKey } = {}) {
+  let state = initialState;
+  let media = null;
+  let container = null;
+  let cueTrack = null;
+  let metadata = null;
+  let trackChosen = false;
+  const listeners = /* @__PURE__ */ new Set();
+  const set = (patch) => {
+    let changed = false;
+    for (const key in patch) {
+      const k = key;
+      const next = patch[k];
+      const prev = state[k];
+      if (k === "cues" ? !sameList(prev, next) : k === "textTracks" ? !sameTracks(prev, next) : !Object.is(prev, next)) {
+        changed = true;
+        break;
+      }
+    }
+    if (!changed) return;
+    state = { ...state, ...patch };
+    listeners.forEach((l) => l());
+  };
+  const sync = () => {
+    if (!media) return;
+    set({
+      paused: media.paused,
+      ended: media.ended,
+      started: state.started || !media.paused || media.currentTime > 0,
+      currentTime: media.currentTime,
+      duration: Number.isFinite(media.duration) ? media.duration : 0,
+      bufferedEnd: readBufferedEnd(media),
+      volume: media.volume,
+      muted: media.muted,
+      playbackRate: media.playbackRate,
+      pictureInPicture: typeof document !== "undefined" && document.pictureInPictureElement === media,
+      error: media.error,
+      hasSource: Boolean(media.src || media.currentSrc || media.querySelector("source[src]"))
+    });
+  };
+  const readCues = () => {
+    const active = cueTrack?.activeCues;
+    set({ cues: active ? Array.from(active).map(cueText).filter(Boolean) : [] });
+  };
+  const bindCueTrack = (track) => {
+    if (cueTrack === track) return;
+    cueTrack?.removeEventListener("cuechange", readCues);
+    cueTrack = track;
+    cueTrack?.addEventListener("cuechange", readCues);
+  };
+  const syncTracks = (requested = state.textTrack) => {
+    const tracks = captionTracks(media);
+    let active = requested === -1 && !trackChosen ? defaultTrack(media, tracks) : requested;
+    tracks.forEach((track, i) => {
+      if (track.mode === "showing") active = i;
+    });
+    if (active >= tracks.length) active = -1;
+    tracks.forEach((track, i) => {
+      const mode = i === active ? "hidden" : "disabled";
+      if (track.mode !== mode) track.mode = mode;
+    });
+    bindCueTrack(tracks[active] ?? null);
+    set({
+      textTracks: tracks.map((track, i) => ({
+        label: track.label || track.language || `Track ${i + 1}`,
+        language: track.language,
+        kind: track.kind
+      })),
+      textTrack: active
+    });
+    readCues();
+  };
+  const onTracksChange = () => syncTracks();
+  const applyMediaSession = () => {
+    if (typeof navigator === "undefined" || !("mediaSession" in navigator) || !metadata) return;
+    const session = navigator.mediaSession;
+    session.metadata = new MediaMetadata(metadata);
+    const handlers = [
+      ["play", () => actions.play()],
+      ["pause", () => actions.pause()],
+      ["seekbackward", (d) => actions.seekBy(-(d.seekOffset ?? 10))],
+      ["seekforward", (d) => actions.seekBy(d.seekOffset ?? 10)],
+      ["seekto", (d) => d.seekTime !== void 0 && actions.seek(d.seekTime)]
+    ];
+    for (const [action, handler] of handlers) {
+      try {
+        session.setActionHandler(action, handler);
+      } catch {
+      }
+    }
+  };
+  const updatePositionState = () => {
+    if (!metadata || !media || typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+    if (!Number.isFinite(media.duration) || media.duration <= 0) return;
+    try {
+      navigator.mediaSession.setPositionState({
+        duration: media.duration,
+        playbackRate: media.playbackRate,
+        position: Math.min(media.currentTime, media.duration)
+      });
+    } catch {
+    }
+  };
+  const savePreferences = () => {
+    if (!persistKey || !media) return;
+    try {
+      const prefs = {
+        volume: media.volume,
+        muted: media.muted,
+        playbackRate: media.playbackRate
+      };
+      localStorage.setItem(persistKey, JSON.stringify(prefs));
+    } catch {
+    }
+  };
+  const onEvent = (event) => {
+    switch (event.type) {
+      case "emptied":
+        set({ started: false, waiting: false });
+        break;
+      case "waiting":
+        set({ waiting: true });
+        break;
+      case "playing":
+      case "canplay":
+      case "pause":
+      case "error":
+        set({ waiting: false });
+        break;
+      case "play":
+        applyMediaSession();
+        break;
+      case "volumechange":
+      case "ratechange":
+        savePreferences();
+        break;
+      case "loadedmetadata":
+        syncTracks();
+        break;
+    }
+    if (event.type === "durationchange" || event.type === "ratechange" || event.type === "seeked") {
+      updatePositionState();
+    }
+    sync();
+  };
+  const onFullscreenChange = () => {
+    const el = document.fullscreenElement;
+    const video = media;
+    set({
+      fullscreen: !!el && (el === container || el === media) || !!video?.webkitDisplayingFullscreen
+    });
+  };
+  const attach = (el) => {
+    if (media === el) return;
+    if (media) {
+      MEDIA_EVENTS.forEach((e) => media.removeEventListener(e, onEvent));
+      TRACK_EVENTS.forEach((e) => media.textTracks?.removeEventListener?.(e, onTracksChange));
+      media.removeEventListener("webkitbeginfullscreen", onFullscreenChange);
+      media.removeEventListener("webkitendfullscreen", onFullscreenChange);
+      bindCueTrack(null);
+    }
+    media = el;
+    if (!el) {
+      state = initialState;
+      listeners.forEach((l) => l());
+      return;
+    }
+    if (persistKey) {
+      const prefs = readPreferences(persistKey);
+      if (typeof prefs.volume === "number") el.volume = Math.min(Math.max(prefs.volume, 0), 1);
+      if (typeof prefs.muted === "boolean") el.muted = prefs.muted;
+      if (typeof prefs.playbackRate === "number") el.playbackRate = prefs.playbackRate;
+    }
+    MEDIA_EVENTS.forEach((e) => el.addEventListener(e, onEvent));
+    TRACK_EVENTS.forEach((e) => el.textTracks?.addEventListener?.(e, onTracksChange));
+    el.addEventListener("webkitbeginfullscreen", onFullscreenChange);
+    el.addEventListener("webkitendfullscreen", onFullscreenChange);
+    sync();
+    syncTracks();
+  };
+  const setContainer = (el) => {
+    if (typeof document === "undefined") return;
+    document.removeEventListener("fullscreenchange", onFullscreenChange);
+    container = el;
+    if (el) document.addEventListener("fullscreenchange", onFullscreenChange);
+  };
+  const play = async () => {
+    if (!media) return;
+    try {
+      await media.play();
+    } catch {
+    }
+  };
+  const pause = () => media?.pause();
+  const actions = {
+    play,
+    pause,
+    toggle: () => media?.paused || media?.ended ? play() : pause(),
+    seek: (time) => {
+      if (!media) return;
+      const max = Number.isFinite(media.duration) ? media.duration : time;
+      media.currentTime = Math.min(Math.max(time, 0), max);
+      sync();
+    },
+    seekBy: (delta) => actions.seek((media?.currentTime ?? 0) + delta),
+    /** Jump to a fraction (0–1) of the duration. */
+    seekToRatio: (ratio) => actions.seek(ratio * (media?.duration || 0)),
+    setVolume: (volume) => {
+      if (!media) return;
+      media.volume = Math.min(Math.max(volume, 0), 1);
+      media.muted = media.volume === 0;
+    },
+    toggleMute: () => {
+      if (!media) return;
+      if (media.muted && media.volume === 0) media.volume = 1;
+      media.muted = !media.muted;
+    },
+    setPlaybackRate: (rate) => {
+      if (media) media.playbackRate = rate;
+    },
+    /** Select a caption track by index, or -1 to turn captions off. */
+    setTextTrack: (index) => syncTracksExplicit(index),
+    toggleCaptions: () => {
+      if (!state.textTracks.length) return;
+      syncTracksExplicit(state.textTrack === -1 ? 0 : -1);
+    },
+    /** Reload the current source after an error. */
+    retry: () => {
+      if (!media) return;
+      media.load();
+      void play();
+    },
+    setMetadata: (next) => {
+      metadata = next;
+      if (media && !media.paused) applyMediaSession();
+    },
+    toggleFullscreen: async () => {
+      if (typeof document === "undefined") return;
+      if (document.fullscreenElement) {
+        await document.exitFullscreen().catch(() => {
+        });
+        return;
+      }
+      if (container?.requestFullscreen) {
+        await container.requestFullscreen().catch(() => {
+        });
+        return;
+      }
+      ;
+      media?.webkitEnterFullscreen?.();
+    },
+    togglePictureInPicture: async () => {
+      if (!(media instanceof HTMLVideoElement)) return;
+      try {
+        if (document.pictureInPictureElement) await document.exitPictureInPicture();
+        else await media.requestPictureInPicture();
+      } catch {
+      }
+    }
+  };
+  const syncTracksExplicit = (index) => {
+    trackChosen = true;
+    captionTracks(media).forEach((track, i) => {
+      if (i !== index && track.mode === "showing") track.mode = "disabled";
+    });
+    syncTracks(index);
+  };
+  return {
+    getState: () => state,
+    getServerState: () => initialState,
+    getMedia: () => media,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    attach,
+    setContainer,
+    ...actions
+  };
+}
+function formatTime(seconds, reference = seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
+  const s = Math.floor(seconds % 60);
+  const m = Math.floor(seconds / 60 % 60);
+  const h = Math.floor(seconds / 3600);
+  const ss = s.toString().padStart(2, "0");
+  const hours = h > 0 || Number.isFinite(reference) && reference >= 3600;
+  return hours ? `${h}:${m.toString().padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+function describeMediaError(error) {
+  switch (error?.code) {
+    case 1:
+      return "Playback was aborted.";
+    case 2:
+      return "A network error stopped the download.";
+    case 3:
+      return "This media could not be decoded.";
+    case 4:
+      return "This media couldn't be loaded.";
+    default:
+      return "Something went wrong during playback.";
+  }
+}
+
+// ../../components/ui/media.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MediaContext = React2.createContext(null);
+var MediaOptionsContext = React2.createContext({ tooltips: false, hotkeys: false });
+function useMediaStore() {
+  const store = React2.useContext(MediaContext);
+  if (!store) throw new Error("Media components must be rendered inside <MediaRoot>.");
+  return store;
+}
+function useMedia(selector) {
+  const store = useMediaStore();
+  return React2.useSyncExternalStore(
+    store.subscribe,
+    () => selector(store.getState()),
+    () => selector(store.getServerState())
+  );
+}
+function useComposedRefs(a, b, c) {
+  return React2.useCallback((node) => composeRefs(a, b, c)(node), [a, b, c]);
+}
+function composeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") return ref(node);
+      if (ref) ref.current = node;
+    });
+    return () => {
+      cleanups.forEach((cleanup, i) => {
+        const ref = refs[i];
+        if (typeof cleanup === "function") cleanup();
+        else if (typeof ref === "function") ref(null);
+        else if (ref) ref.current = null;
+      });
+    };
+  };
+}
+var clamp = (value) => Math.min(Math.max(value, 0), 1);
+var SETTINGS_OPEN = "[data-slot='media-settings'][data-open]";
+var holdAwakeSelector = () => window.matchMedia("(hover: hover)").matches ? `[data-slot='media-controls']:hover, ${SETTINGS_OPEN}` : SETTINGS_OPEN;
+function MediaRoot({
+  className,
+  idleTimeout = 2e3,
+  persistKey,
+  metadata,
+  hotkeys = true,
+  tooltips = false,
+  onPointerMove,
+  onPointerDown,
+  onPointerLeave,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const [store] = React2.useState(() => createMediaStore({ persistKey }));
+  const [active, setActive] = React2.useState(false);
+  const timer = React2.useRef(void 0);
+  const rootEl = React2.useRef(null);
+  const state = React2.useSyncExternalStore(store.subscribe, store.getState, store.getServerState);
+  const rootRef = useComposedRefs(ref, rootEl, store.setContainer);
+  const options = React2.useMemo(() => ({ tooltips, hotkeys }), [tooltips, hotkeys]);
+  React2.useEffect(() => () => clearTimeout(timer.current), []);
+  const { title, artist, album, artwork } = metadata ?? {};
+  const artworkKey = JSON.stringify(artwork ?? null);
+  React2.useEffect(() => {
+    store.setMetadata(title || artist || album ? { title, artist, album, artwork: JSON.parse(artworkKey) ?? void 0 } : null);
+  }, [store, title, artist, album, artworkKey]);
+  const wake = () => {
+    setActive(true);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(function sleep() {
+      if (rootEl.current?.querySelector(holdAwakeSelector())) {
+        timer.current = setTimeout(sleep, idleTimeout);
+        return;
+      }
+      setActive(false);
+    }, idleTimeout);
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (!hotkeys || event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+    const target = event.target;
+    if (target.closest("input, textarea, select, [contenteditable='true'], [data-slot='media-settings']")) return;
+    const onButton = target.tagName === "BUTTON";
+    const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+    const keymap = {
+      " ": () => store.toggle(),
+      k: () => store.toggle(),
+      j: () => store.seekBy(-10),
+      l: () => store.seekBy(10),
+      ArrowLeft: () => store.seekBy(-5),
+      ArrowRight: () => store.seekBy(5),
+      ArrowUp: () => store.setVolume(store.getState().volume + 0.1),
+      ArrowDown: () => store.setVolume(store.getState().volume - 0.1),
+      m: () => store.toggleMute(),
+      f: () => store.toggleFullscreen(),
+      c: () => store.toggleCaptions(),
+      i: () => store.togglePictureInPicture(),
+      Home: () => store.seek(0),
+      End: () => store.seekToRatio(1)
+    };
+    for (let digit = 0; digit <= 9; digit++) {
+      keymap[String(digit)] = () => store.seekToRatio(digit / 10);
+    }
+    const action = keymap[key];
+    if (!action || key === " " && onButton) return;
+    event.preventDefault();
+    action();
+    wake();
+  };
+  const idle = !active && !state.paused;
+  return /* @__PURE__ */ jsx2(MediaContext.Provider, { value: store, children: /* @__PURE__ */ jsx2(MediaOptionsContext.Provider, { value: options, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: rootRef,
+      "data-slot": "media-root",
+      "data-paused": state.paused || void 0,
+      "data-playing": !state.paused || void 0,
+      "data-started": state.started || void 0,
+      "data-waiting": state.waiting || void 0,
+      "data-fullscreen": state.fullscreen || void 0,
+      "data-error": state.error ? "" : void 0,
+      "data-captions": state.textTrack !== -1 && state.cues.length > 0 ? "" : void 0,
+      "data-idle": idle || void 0,
+      "data-active": active || void 0,
+      className: cn(
+        /* no gray tap flash, no long-press callout over the video, and no
+           double-tap-zoom wait before a tap registers */
+        "group/media relative isolate touch-manipulation [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none]",
+        idle && "cursor-none",
+        className
+      ),
+      onPointerMove: (event) => {
+        onPointerMove?.(event);
+        if (event.pointerType === "mouse") wake();
+      },
+      onPointerDown: (event) => {
+        onPointerDown?.(event);
+        wake();
+      },
+      onPointerLeave: (event) => {
+        onPointerLeave?.(event);
+        if (event.pointerType !== "mouse") return;
+        clearTimeout(timer.current);
+        setActive(false);
+      },
+      onKeyDown: handleKeyDown,
+      ...props
+    }
+  ) }) });
+}
+function useMediaElement(ref, src, loader) {
+  const store = useMediaStore();
+  const mediaRef = useComposedRefs(ref, store.attach);
+  React2.useEffect(() => {
+    const media = store.getMedia();
+    if (!loader || !src || !media) return;
+    return loader(media, src) ?? void 0;
+  }, [store, loader, src]);
+  return mediaRef;
+}
+function MediaVideo({ className, ref, src, loader, ...props }) {
+  const mediaRef = useMediaElement(ref, typeof src === "string" ? src : void 0, loader);
+  return /* @__PURE__ */ jsx2(
+    "video",
+    {
+      ref: mediaRef,
+      "data-slot": "media-video",
+      playsInline: true,
+      preload: "metadata",
+      ...props,
+      src: loader ? void 0 : src,
+      controls: false,
+      className: cn("block", className)
+    }
+  );
+}
+function MediaAudio({ ref, src, loader, ...props }) {
+  const mediaRef = useMediaElement(ref, typeof src === "string" ? src : void 0, loader);
+  return /* @__PURE__ */ jsx2(
+    "audio",
+    {
+      ref: mediaRef,
+      "data-slot": "media-audio",
+      preload: "metadata",
+      ...props,
+      src: loader ? void 0 : src,
+      controls: false
+    }
+  );
+}
+var buttonClass = "pointer-coarse:after:absolute pointer-coarse:after:-inset-1 pointer-coarse:after:content-[''] group/media-button relative inline-grid size-7 shrink-0 cursor-pointer place-items-center rounded-md outline-none transition-[background-color,scale,opacity] duration-150 ease-media hover:bg-current/15 focus-visible:ring-2 focus-visible:ring-current/60 motion-safe:enabled:active:scale-[0.96] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0";
+function MediaTooltip({ label, shortcut, align = "center" }) {
+  const { tooltips, hotkeys } = React2.useContext(MediaOptionsContext);
+  if (!tooltips || !label) return null;
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "media-tooltip",
+      className: cn(
+        "pointer-events-none absolute bottom-full mb-2 flex items-center gap-1.5 rounded-md bg-foreground px-1.5 py-0.5 text-[11px] leading-4 font-medium whitespace-nowrap text-background opacity-0",
+        "transition-[opacity,translate] duration-150 ease-media motion-safe:translate-y-0.5 motion-reduce:transition-none",
+        "group-hover/media-button:translate-y-0 group-hover/media-button:opacity-100 group-hover/media-button:delay-300",
+        "group-focus-visible/media-button:translate-y-0 group-focus-visible/media-button:opacity-100",
+        "group-aria-expanded/media-button:hidden",
+        align === "start" && "left-0",
+        align === "center" && "left-1/2 -translate-x-1/2",
+        align === "end" && "right-0"
+      ),
+      children: [
+        label,
+        hotkeys && shortcut && /* @__PURE__ */ jsx2("kbd", { className: "font-mono opacity-60", children: shortcut })
+      ]
+    }
+  );
+}
+function MediaButton({ className, type = "button", tooltip, shortcut, tooltipAlign, children, ...props }) {
+  return /* @__PURE__ */ jsxs2("button", { type, "data-slot": "media-button", className: cn(buttonClass, className), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx2(MediaTooltip, { label: tooltip, shortcut, align: tooltipAlign })
+  ] });
+}
+function IconSwap({ show, a, b }) {
+  const layer = "col-start-1 row-start-1 grid place-items-center transition-[opacity,scale,filter] duration-200 ease-media motion-reduce:transition-none";
+  return /* @__PURE__ */ jsxs2("span", { className: "grid", children: [
+    /* @__PURE__ */ jsx2("span", { className: cn(layer, show === "a" ? "opacity-100" : "scale-50 opacity-0 blur-[2px]"), children: a }),
+    /* @__PURE__ */ jsx2("span", { className: cn(layer, show === "b" ? "opacity-100" : "scale-50 opacity-0 blur-[2px]"), children: b })
+  ] });
+}
+function MediaPlayButton({ onClick, ...props }) {
+  const store = useMediaStore();
+  const paused = useMedia((s) => s.paused);
+  const hasSource = useMedia((s) => s.hasSource);
+  return /* @__PURE__ */ jsx2(
+    MediaButton,
+    {
+      "aria-label": paused ? "Play" : "Pause",
+      tooltip: paused ? "Play" : "Pause",
+      shortcut: "K",
+      disabled: !hasSource,
+      onClick: (event) => {
+        onClick?.(event);
+        store.toggle();
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx2(IconSwap, { show: paused ? "a" : "b", a: /* @__PURE__ */ jsx2(PlayIcon, {}), b: /* @__PURE__ */ jsx2(PauseIcon, {}) })
+    }
+  );
+}
+function MediaMuteButton({ onClick, ...props }) {
+  const store = useMediaStore();
+  const muted2 = useMedia((s) => s.muted || s.volume === 0);
+  return /* @__PURE__ */ jsx2(
+    MediaButton,
+    {
+      "aria-label": muted2 ? "Unmute" : "Mute",
+      tooltip: muted2 ? "Unmute" : "Mute",
+      shortcut: "M",
+      onClick: (event) => {
+        onClick?.(event);
+        store.toggleMute();
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx2(VolumeIcon, { muted: muted2 })
+    }
+  );
+}
+function MediaFullscreenButton({ onClick, ...props }) {
+  const store = useMediaStore();
+  const fullscreen = useMedia((s) => s.fullscreen);
+  return /* @__PURE__ */ jsx2(
+    MediaButton,
+    {
+      "aria-label": fullscreen ? "Exit fullscreen" : "Enter fullscreen",
+      tooltip: fullscreen ? "Exit fullscreen" : "Fullscreen",
+      shortcut: "F",
+      onClick: (event) => {
+        onClick?.(event);
+        store.toggleFullscreen();
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx2(IconSwap, { show: fullscreen ? "b" : "a", a: /* @__PURE__ */ jsx2(EnterFullscreenIcon, {}), b: /* @__PURE__ */ jsx2(ExitFullscreenIcon, {}) })
+    }
+  );
+}
+var subscribeNoop = () => () => {
+};
+function MediaPictureInPictureButton({ onClick, ...props }) {
+  const store = useMediaStore();
+  const active = useMedia((s) => s.pictureInPicture);
+  const supported = React2.useSyncExternalStore(
+    subscribeNoop,
+    () => "pictureInPictureEnabled" in document && document.pictureInPictureEnabled,
+    () => false
+  );
+  if (!supported) return null;
+  return /* @__PURE__ */ jsx2(
+    MediaButton,
+    {
+      "aria-label": active ? "Exit picture in picture" : "Enter picture in picture",
+      "aria-pressed": active,
+      tooltip: active ? "Exit picture in picture" : "Picture in picture",
+      shortcut: "I",
+      onClick: (event) => {
+        onClick?.(event);
+        store.togglePictureInPicture();
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx2(PictureInPictureIcon, {})
+    }
+  );
+}
+function MediaPlaybackRateButton({
+  rates = [1, 1.25, 1.5, 2, 0.75],
+  className,
+  style,
+  onClick,
+  ...props
+}) {
+  const store = useMediaStore();
+  const rate = useMedia((s) => s.playbackRate);
+  const chars = Math.max(...[...rates, rate].map((r) => `${r}\xD7`.length));
+  return /* @__PURE__ */ jsx2(
+    MediaButton,
+    {
+      "aria-label": `Playback speed ${rate}x`,
+      tooltip: "Playback speed",
+      dir: "ltr",
+      className: cn("w-(--media-rate-width) min-w-7 px-1.5 font-mono text-xs tabular-nums", className),
+      style: { "--media-rate-width": `calc(${chars}ch + 0.75rem)`, ...style },
+      onClick: (event) => {
+        onClick?.(event);
+        const index = rates.indexOf(rate);
+        store.setPlaybackRate(rates[(index + 1) % rates.length]);
+      },
+      ...props,
+      children: `${rate}\xD7`
+    }
+  );
+}
+function MediaControls({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "media-controls",
+      className: cn(
+        "flex items-center transition-[opacity,translate] duration-200 ease-media motion-reduce:transition-none",
+        "pointer-events-none translate-y-2 opacity-0",
+        "group-data-active/media:pointer-events-auto group-data-active/media:translate-y-0 group-data-active/media:opacity-100",
+        "group-has-focus-visible/media:pointer-events-auto group-has-focus-visible/media:translate-y-0 group-has-focus-visible/media:opacity-100",
+        "group-data-paused/media:group-data-started/media:pointer-events-auto group-data-paused/media:group-data-started/media:translate-y-0 group-data-paused/media:group-data-started/media:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var DOUBLE_TAP_MS = 280;
+function MediaSurface({
+  className,
+  doubleTapSeek = 10,
+  doubleClickFullscreen = true,
+  indicatorClassName,
+  onClick,
+  onDoubleClick,
+  onPointerDown,
+  children,
+  ...props
+}) {
+  const store = useMediaStore();
+  const paused = useMedia((s) => s.paused);
+  const pointer = React2.useRef({ type: "mouse", revealOnly: false, lastTap: 0 });
+  const tapTimer = React2.useRef(void 0);
+  const flashTimer = React2.useRef(void 0);
+  const [flash, setFlash] = React2.useState(null);
+  React2.useEffect(
+    () => () => {
+      clearTimeout(tapTimer.current);
+      clearTimeout(flashTimer.current);
+    },
+    []
+  );
+  const showFlash = (side) => {
+    setFlash((prev) => ({ side, count: prev?.side === side ? prev.count + 1 : 1 }));
+    clearTimeout(flashTimer.current);
+    flashTimer.current = setTimeout(() => setFlash(null), 650);
+  };
+  const handleTouchTap = (event) => {
+    const now = performance.now();
+    const { revealOnly, lastTap } = pointer.current;
+    if (doubleTapSeek > 0 && now - lastTap < DOUBLE_TAP_MS) {
+      clearTimeout(tapTimer.current);
+      pointer.current.lastTap = now;
+      const rect = event.currentTarget.getBoundingClientRect();
+      const side = event.clientX - rect.left < rect.width / 2 ? "back" : "forward";
+      store.seekBy(side === "back" ? -doubleTapSeek : doubleTapSeek);
+      showFlash(side);
+      return;
+    }
+    pointer.current.lastTap = now;
+    if (revealOnly) return;
+    clearTimeout(tapTimer.current);
+    tapTimer.current = setTimeout(() => store.toggle(), doubleTapSeek > 0 ? DOUBLE_TAP_MS : 0);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      "data-slot": "media-surface",
+      "aria-label": paused ? "Play" : "Pause",
+      className: cn("absolute inset-0 cursor-[inherit] outline-none", className),
+      onPointerDown: (event) => {
+        onPointerDown?.(event);
+        const root = event.currentTarget.closest("[data-slot='media-root']");
+        pointer.current.type = event.pointerType;
+        pointer.current.revealOnly = event.pointerType !== "mouse" && !store.getState().paused && !root?.hasAttribute("data-active");
+      },
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.detail !== 0 && pointer.current.type !== "mouse") {
+          handleTouchTap(event);
+          return;
+        }
+        store.toggle();
+      },
+      onDoubleClick: (event) => {
+        onDoubleClick?.(event);
+        if (doubleClickFullscreen && pointer.current.type === "mouse") store.toggleFullscreen();
+      },
+      ...props,
+      children: [
+        doubleTapSeek > 0 && /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 flex items-center justify-between px-[8%]", children: ["back", "forward"].map((side) => /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            "data-show": flash?.side === side || void 0,
+            className: cn(
+              "flex items-center gap-1.5 rounded-full px-3 py-1.5 font-mono text-xs tabular-nums opacity-0 scale-90 transition-[opacity,scale] duration-200 ease-media data-show:scale-100 data-show:opacity-100 motion-reduce:transition-none",
+              side === "forward" && "flex-row-reverse",
+              indicatorClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx2(SeekIcon, { direction: side, className: "size-3.5" }),
+              `${(flash?.side === side ? flash.count : 1) * doubleTapSeek}s`
+            ]
+          },
+          side
+        )) }),
+        children
+      ]
+    }
+  );
+}
+function MediaSeek({
+  className,
+  step = 5,
+  preview = true,
+  previewClassName,
+  ...props
+}) {
+  const store = useMediaStore();
+  const duration = useMedia((s) => s.duration);
+  const bufferedEnd = useMedia((s) => s.bufferedEnd);
+  const currentTime = useMedia((s) => Math.floor(s.currentTime));
+  const fillRef = React2.useRef(null);
+  const scrub = React2.useRef(null);
+  const [hover, setHover] = React2.useState(null);
+  React2.useEffect(() => {
+    let frame = 0;
+    const draw = () => {
+      cancelAnimationFrame(frame);
+      const media = store.getMedia();
+      const { duration: duration2, paused } = store.getState();
+      if (!scrub.current && fillRef.current) {
+        const progress = duration2 ? clamp((media?.currentTime ?? 0) / duration2) : 0;
+        fillRef.current.style.transform = `scaleX(${progress})`;
+      }
+      if (!paused) frame = requestAnimationFrame(draw);
+    };
+    draw();
+    const unsubscribe = store.subscribe(draw);
+    return () => {
+      unsubscribe();
+      cancelAnimationFrame(frame);
+    };
+  }, [store]);
+  const ratioFromEvent = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return clamp((event.clientX - rect.left) / rect.width);
+  };
+  const seekToRatio = (ratio) => {
+    if (fillRef.current) fillRef.current.style.transform = `scaleX(${ratio})`;
+    store.seek(ratio * store.getState().duration);
+  };
+  const endScrub = (event) => {
+    if (!scrub.current) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    const { resume } = scrub.current;
+    scrub.current = null;
+    if (resume) store.play();
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": "Seek",
+      "aria-valuemin": 0,
+      "aria-valuemax": Math.floor(duration),
+      "aria-valuenow": currentTime,
+      "aria-valuetext": `${formatTime(currentTime)} of ${formatTime(duration)}`,
+      "data-slot": "media-seek",
+      className: cn(
+        /* on touch, an invisible 44px-tall hit area around the 20px bar */
+        "group/seek relative flex h-5 min-w-0 grow cursor-pointer touch-none items-center rounded-full outline-none select-none pointer-coarse:before:absolute pointer-coarse:before:inset-x-0 pointer-coarse:before:-inset-y-3 pointer-coarse:before:content-['']",
+        className
+      ),
+      onPointerDown: (event) => {
+        if (event.button !== 0) return;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        scrub.current = { resume: !store.getState().paused };
+        store.pause();
+        seekToRatio(ratioFromEvent(event));
+      },
+      onPointerMove: (event) => {
+        const ratio = ratioFromEvent(event);
+        if (event.pointerType === "mouse") setHover(ratio);
+        if (scrub.current) seekToRatio(ratio);
+      },
+      onPointerUp: endScrub,
+      onPointerCancel: endScrub,
+      onPointerLeave: () => setHover(null),
+      onKeyDown: (event) => {
+        const { currentTime: currentTime2, duration: duration2 } = store.getState();
+        const moves = {
+          ArrowLeft: currentTime2 - step,
+          ArrowDown: currentTime2 - step,
+          ArrowRight: currentTime2 + step,
+          ArrowUp: currentTime2 + step,
+          PageDown: currentTime2 - duration2 / 10,
+          PageUp: currentTime2 + duration2 / 10,
+          Home: 0,
+          End: duration2
+        };
+        if (!(event.key in moves)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        store.seek(moves[event.key]);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "relative h-1 w-full overflow-hidden rounded-full bg-current/25 transition-[height] duration-150 ease-media group-hover/seek:h-1.5 group-focus-visible/seek:h-1.5 group-active/seek:h-1.5 motion-reduce:transition-none", children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: "absolute inset-0 origin-left bg-current/25 transition-transform duration-300 ease-media",
+              style: { transform: `scaleX(${duration ? clamp(bufferedEnd / duration) : 0})` }
+            }
+          ),
+          /* @__PURE__ */ jsx2("div", { ref: fillRef, className: "absolute inset-0 origin-left bg-current", style: { transform: "scaleX(0)" } })
+        ] }),
+        /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute inset-0 rounded-full ring-current/60 group-focus-visible/seek:ring-2" }),
+        preview && hover !== null && duration > 0 && /* @__PURE__ */ jsx2(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute bottom-full mb-1.5 -translate-x-1/2 rounded-md bg-foreground px-1.5 py-0.5 font-mono text-[11px] leading-4 text-background tabular-nums",
+              previewClassName
+            ),
+            style: { left: `${hover * 100}%` },
+            children: formatTime(hover * duration, duration)
+          }
+        )
+      ]
+    }
+  );
+}
+function MediaVolume({ orientation = "horizontal", className, ...props }) {
+  const store = useMediaStore();
+  const volume = useMedia((s) => s.muted ? 0 : s.volume);
+  const dragging = React2.useRef(false);
+  const vertical = orientation === "vertical";
+  const setFromEvent = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    store.setVolume(
+      clamp(vertical ? (rect.bottom - event.clientY) / rect.height : (event.clientX - rect.left) / rect.width)
+    );
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": "Volume",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(volume * 100),
+      "aria-valuetext": `${Math.round(volume * 100)}%`,
+      "aria-orientation": orientation,
+      "data-slot": "media-volume",
+      className: cn(
+        "group/volume relative flex shrink-0 cursor-pointer touch-none outline-none select-none",
+        vertical ? "h-16 w-5 justify-center" : "h-5 w-16 items-center",
+        className
+      ),
+      onPointerDown: (event) => {
+        if (event.button !== 0) return;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragging.current = true;
+        setFromEvent(event);
+      },
+      onPointerMove: (event) => dragging.current && setFromEvent(event),
+      onPointerUp: (event) => {
+        dragging.current = false;
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      },
+      onPointerCancel: () => {
+        dragging.current = false;
+      },
+      onKeyDown: (event) => {
+        const moves = {
+          ArrowLeft: volume - 0.1,
+          ArrowDown: volume - 0.1,
+          ArrowRight: volume + 0.1,
+          ArrowUp: volume + 0.1,
+          PageDown: volume - 0.25,
+          PageUp: volume + 0.25,
+          Home: 0,
+          End: 1
+        };
+        if (!(event.key in moves)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        store.setVolume(moves[event.key]);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              "relative overflow-hidden rounded-full bg-current/25 duration-150 ease-media motion-reduce:transition-none",
+              vertical ? "h-full w-1 transition-[width] group-hover/volume:w-1.5 group-focus-visible/volume:w-1.5" : "h-1 w-full transition-[height] group-hover/volume:h-1.5 group-focus-visible/volume:h-1.5"
+            ),
+            children: /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: cn("absolute inset-0 bg-current", vertical ? "origin-bottom" : "origin-left"),
+                style: { transform: vertical ? `scaleY(${volume})` : `scaleX(${volume})` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute inset-0 rounded-full ring-current/60 group-focus-visible/volume:ring-2" })
+      ]
+    }
+  );
+}
+var timeNames = { current: "elapsed", duration: "duration", remaining: "remaining" };
+function MediaTime({ type = "current", toggle = false, className, ...props }) {
+  const [picked, setPicked] = React2.useState(type);
+  const shown = toggle ? picked : type;
+  const duration = useMedia((s) => s.duration);
+  const value = useMedia((s) => {
+    if (shown === "duration") return Math.floor(s.duration) || Math.ceil(s.duration);
+    if (shown === "remaining") return Math.ceil(Math.max(s.duration - s.currentTime, 0));
+    return Math.floor(s.currentTime);
+  });
+  const time = formatTime(value, duration);
+  const text = shown === "remaining" ? `-${time}` : time;
+  const other = type === "remaining" ? "current" : "remaining";
+  const next = shown === type ? other : type;
+  return /* @__PURE__ */ jsx2("span", { "data-slot": "media-time", dir: "ltr", className: cn("font-mono text-xs tabular-nums", className), ...props, children: toggle ? /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      "aria-label": `${shown === "remaining" ? "Time remaining" : shown === "duration" ? "Duration" : "Time elapsed"} ${time}`,
+      onClick: () => setPicked(next),
+      className: "group/media-button relative cursor-pointer rounded-sm outline-none transition-colors duration-150 ease-media hover:text-current focus-visible:ring-2 focus-visible:ring-current/60",
+      children: [
+        text,
+        /* @__PURE__ */ jsx2(MediaTooltip, { label: `Show ${timeNames[next]}` })
+      ]
+    }
+  ) : text });
+}
+function MediaLoading({ className, ...props }) {
+  const waiting = useMedia((s) => s.waiting && !s.paused);
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      role: "status",
+      "aria-label": waiting ? "Loading" : void 0,
+      "data-slot": "media-loading",
+      className: cn(
+        "pointer-events-none size-6 rounded-full border-2 border-current/25 border-t-current transition-opacity duration-200 ease-media",
+        waiting ? "animate-spin opacity-100 delay-300" : "opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MediaCaptions({ className, ...props }) {
+  const cues = useMedia((s) => s.textTrack === -1 ? emptyCues : s.cues);
+  if (!cues.length) return null;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "media-captions",
+      className: cn("pointer-events-none flex flex-col items-center gap-1 text-center", className),
+      ...props,
+      children: cues.map((cue, i) => /* @__PURE__ */ jsx2("span", { dir: "auto", className: "whitespace-pre-line text-balance rounded-md px-2 py-0.5 box-decoration-clone", children: cue }, `${i}-${cue}`))
+    }
+  );
+}
+var emptyCues = [];
+function MediaCaptionsButton({ onClick, ...props }) {
+  const store = useMediaStore();
+  const available = useMedia((s) => s.textTracks.length > 0);
+  const on = useMedia((s) => s.textTrack !== -1);
+  if (!available) return null;
+  return /* @__PURE__ */ jsx2(
+    MediaButton,
+    {
+      "aria-label": "Captions",
+      "aria-pressed": on,
+      tooltip: on ? "Captions off" : "Captions",
+      shortcut: "C",
+      onClick: (event) => {
+        onClick?.(event);
+        store.toggleCaptions();
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx2(CaptionsIcon, { active: on })
+    }
+  );
+}
+function MediaSettings({ rates = [0.5, 0.75, 1, 1.25, 1.5, 2], className, panelClassName, ...props }) {
+  const store = useMediaStore();
+  const rate = useMedia((s) => s.playbackRate);
+  const tracks = useMedia((s) => s.textTracks);
+  const textTrack = useMedia((s) => s.textTrack);
+  const [open, setOpen] = React2.useState(false);
+  const rootEl = React2.useRef(null);
+  const triggerEl = React2.useRef(null);
+  const panelEl = React2.useRef(null);
+  const listEl = React2.useRef(null);
+  const panelId = React2.useId();
+  React2.useLayoutEffect(() => {
+    const panel = panelEl.current;
+    const list = listEl.current;
+    const trigger = triggerEl.current;
+    const player = rootEl.current?.closest("[data-slot='media-root']");
+    if (!open || !panel || !list || !trigger || !player) return;
+    const edge = () => {
+      const left = Math.min(24, list.scrollHeight - list.clientHeight - list.scrollTop);
+      list.style.maskImage = left > 1 ? `linear-gradient(to bottom, black calc(100% - ${left}px), rgb(0 0 0 / 0.3))` : "";
+    };
+    const fit = () => {
+      const space = trigger.getBoundingClientRect().top - player.getBoundingClientRect().top - 16;
+      panel.style.maxHeight = `${Math.max(96, Math.min(288, space))}px`;
+      edge();
+    };
+    fit();
+    const observer = new ResizeObserver(fit);
+    observer.observe(player);
+    list.addEventListener("scroll", edge, { passive: true });
+    return () => {
+      observer.disconnect();
+      list.removeEventListener("scroll", edge);
+    };
+  }, [open]);
+  React2.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!rootEl.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    rootEl.current?.querySelector("[aria-checked='true']")?.focus();
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  const close = () => {
+    setOpen(false);
+    triggerEl.current?.focus();
+  };
+  const onPanelKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      close();
+      return;
+    }
+    const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+    if (!step) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const items = Array.from(rootEl.current?.querySelectorAll("[role='menuitemradio']") ?? []);
+    const index = items.indexOf(document.activeElement);
+    const next = items[(index + step + items.length) % items.length];
+    next?.focus();
+  };
+  const option = (label, checked, select) => /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      role: "menuitemradio",
+      "aria-checked": checked,
+      tabIndex: checked ? 0 : -1,
+      onClick: () => {
+        select();
+        close();
+      },
+      className: "flex min-h-8 w-full shrink-0 cursor-pointer items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm leading-5 outline-none transition-colors duration-150 ease-media hover:bg-current/10 focus-visible:bg-current/15",
+      children: [
+        /* @__PURE__ */ jsx2("span", { dir: "auto", className: "min-w-0", children: label }),
+        /* @__PURE__ */ jsx2(CheckIcon, { className: cn("size-3.5 shrink-0 transition-opacity duration-150", checked ? "opacity-100" : "opacity-0") })
+      ]
+    },
+    label
+  );
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: rootEl,
+      "data-slot": "media-settings",
+      "data-open": open || void 0,
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(
+          MediaButton,
+          {
+            ref: triggerEl,
+            "aria-label": "Settings",
+            tooltip: "Settings",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "aria-controls": open ? panelId : void 0,
+            onClick: () => setOpen((o) => !o),
+            children: /* @__PURE__ */ jsx2(SettingsIcon, { className: cn("transition-transform duration-300 ease-media motion-reduce:transition-none", open && "rotate-90") })
+          }
+        ),
+        open && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            ref: panelEl,
+            id: panelId,
+            role: "menu",
+            "aria-label": "Playback settings",
+            onKeyDown: onPanelKeyDown,
+            className: cn(
+              "absolute right-0 bottom-full z-10 mb-2 flex max-h-72 w-48 origin-bottom-right flex-col overflow-hidden rounded-xl",
+              "transition-[opacity,translate,scale] duration-150 ease-media starting:translate-y-1 starting:scale-95 starting:opacity-0 motion-reduce:transition-none",
+              panelClassName
+            ),
+            children: /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                ref: listEl,
+                className: "flex min-h-0 flex-col gap-2 overflow-y-auto overscroll-contain p-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                children: [
+                  /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": "Speed", className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "px-2 pt-1 pb-1.5 text-xs opacity-60", children: "Speed" }),
+                    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-3 gap-1", children: rates.map((r) => /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        role: "menuitemradio",
+                        "aria-checked": rate === r,
+                        "aria-label": r === 1 ? "Normal speed" : `${r}\xD7 speed`,
+                        tabIndex: rate === r ? 0 : -1,
+                        onClick: () => {
+                          store.setPlaybackRate(r);
+                          close();
+                        },
+                        className: cn(
+                          "h-8 cursor-pointer rounded-md text-sm tabular-nums outline-none transition-colors duration-150 ease-media hover:bg-current/10 focus-visible:ring-1 focus-visible:ring-current/40",
+                          rate === r && "bg-current/15"
+                        ),
+                        children: `${r}\xD7`
+                      },
+                      r
+                    )) })
+                  ] }),
+                  tracks.length > 0 && /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": "Captions", className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "px-2 pt-1 pb-1.5 text-xs opacity-60", children: "Captions" }),
+                    option("Off", textTrack === -1, () => store.setTextTrack(-1)),
+                    tracks.map((track, i) => option(track.label, textTrack === i, () => store.setTextTrack(i)))
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function MediaErrorMessage({ className, message, ...props }) {
+  const store = useMediaStore();
+  const error = useMedia((s) => s.error);
+  if (!error) return null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "media-error",
+      className: cn("flex flex-col items-center justify-center gap-3 text-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2("p", { className: "text-pretty text-sm", children: message ? message(error) : describeMediaError(error) }),
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            onClick: () => store.retry(),
+            className: "inline-flex h-8 shrink-0 cursor-pointer items-center gap-1.5 rounded-full px-3 text-sm whitespace-nowrap outline-none ring-1 ring-current/25 transition-[background-color,scale] duration-150 ease-media hover:bg-current/10 focus-visible:ring-2 focus-visible:ring-current/60 motion-safe:active:scale-[0.96]",
+            children: [
+              /* @__PURE__ */ jsx2(RetryIcon, { className: "size-3.5" }),
+              "Try again"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// ../../components/ui/video-player.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var reveal = "transition-[opacity,scale] duration-200 ease-media motion-reduce:transition-none";
+var visibleWithControls = "group-data-active/media:opacity-100 group-has-focus-visible/media:opacity-100 group-data-paused/media:group-data-started/media:opacity-100";
+var glass = "bg-media-scrim/70 text-media-foreground ring-1 ring-media-foreground/10 backdrop-blur-xl";
+var volumeOpen = "group-hover/volume-menu:pointer-events-auto group-hover/volume-menu:translate-y-0 group-hover/volume-menu:opacity-100 group-has-focus-visible/volume-menu:pointer-events-auto group-has-focus-visible/volume-menu:translate-y-0 group-has-focus-visible/volume-menu:opacity-100";
+function VideoPlayer({
+  className,
+  frameClassName,
+  tracks,
+  loader,
+  metadata,
+  persistKey,
+  tooltips = true,
+  children,
+  crossOrigin,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(
+    MediaRoot,
+    {
+      persistKey,
+      metadata,
+      tooltips,
+      className: cn(
+        "@container/player aspect-video w-full overflow-hidden rounded-xl bg-media-scrim text-media-foreground data-fullscreen:rounded-none",
+        frameClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3(
+          MediaVideo,
+          {
+            className: cn("size-full object-contain", className),
+            loader,
+            crossOrigin: crossOrigin ?? (tracks?.length ? "anonymous" : void 0),
+            ...props,
+            children: [
+              tracks?.map((track) => /* @__PURE__ */ jsx3(
+                "track",
+                {
+                  src: track.src,
+                  label: track.label,
+                  srcLang: track.srcLang,
+                  kind: track.kind ?? "subtitles",
+                  default: track.default
+                },
+                track.src
+              )),
+              children
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(MediaSurface, { indicatorClassName: glass }),
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute top-1/2 left-1/2 grid size-12 -translate-1/2 place-items-center rounded-full bg-media-scrim/40 backdrop-blur-md",
+              reveal,
+              "group-data-started/media:scale-75 group-data-started/media:opacity-0"
+            ),
+            children: /* @__PURE__ */ jsx3(PlayIcon, { className: "size-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx3("span", { className: "pointer-events-none absolute inset-0 grid place-items-center", children: /* @__PURE__ */ jsx3(MediaLoading, {}) }),
+        /* @__PURE__ */ jsx3(
+          MediaCaptions,
+          {
+            className: cn(
+              /* sized by the player, not the viewport, so a small player keeps its cues */
+              "absolute inset-x-4 bottom-4 text-xs leading-snug transition-transform duration-200 ease-media motion-reduce:transition-none @xs/player:text-sm @2xl/player:text-base",
+              "group-data-active/media:-translate-y-10 group-has-focus-visible/media:-translate-y-10 group-data-paused/media:group-data-started/media:-translate-y-10",
+              "[&>span]:bg-media-scrim/75 [&>span]:text-media-foreground"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-linear-to-t from-media-scrim/60 to-transparent opacity-0",
+              reveal,
+              visibleWithControls
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          MediaControls,
+          {
+            dir: "ltr",
+            className: "absolute inset-x-2 bottom-2 h-9 gap-1 px-1 **:data-[slot=media-tooltip]:bg-media-foreground **:data-[slot=media-tooltip]:text-media-scrim",
+            children: [
+              /* @__PURE__ */ jsx3(MediaPlayButton, { tooltipAlign: "start" }),
+              /* @__PURE__ */ jsx3(MediaSeek, { className: "mx-2", previewClassName: "bg-media-foreground text-media-scrim" }),
+              /* @__PURE__ */ jsx3(MediaTime, { type: "remaining", toggle: true, className: "hidden min-w-10 text-right text-media-foreground/80 @xs/player:inline" }),
+              /* @__PURE__ */ jsxs3("div", { className: "group/volume-menu relative", children: [
+                /* @__PURE__ */ jsx3(MediaMuteButton, { tooltip: false }),
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: cn(
+                      "pointer-events-none absolute bottom-full left-1/2 hidden -translate-x-1/2 translate-y-1 pb-2 opacity-0 pointer-fine:block",
+                      "transition-[opacity,translate] duration-150 ease-media motion-reduce:transition-none",
+                      volumeOpen
+                    ),
+                    children: /* @__PURE__ */ jsx3("div", { className: cn("flex h-24 w-7 justify-center rounded-full py-3", glass), children: /* @__PURE__ */ jsx3(MediaVolume, { orientation: "vertical", className: "h-full" }) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx3(MediaCaptionsButton, {}),
+              /* @__PURE__ */ jsx3(MediaSettings, { panelClassName: glass }),
+              /* @__PURE__ */ jsx3(MediaPictureInPictureButton, { tooltipAlign: "end", className: "hidden @sm/player:inline-grid" }),
+              /* @__PURE__ */ jsx3(MediaFullscreenButton, { tooltipAlign: "end" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(MediaErrorMessage, { className: "absolute inset-0 bg-media-scrim/85 px-6 text-media-foreground backdrop-blur-sm" })
+      ]
+    }
+  );
+}
+
+// ../../components/ui/audio-player.tsx
+import * as React3 from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var muted = "text-muted-foreground hover:text-foreground";
+var volumeOpen2 = "group-hover/volume-menu:pointer-events-auto group-hover/volume-menu:translate-y-0 group-hover/volume-menu:opacity-100 group-has-focus-visible/volume-menu:pointer-events-auto group-has-focus-visible/volume-menu:translate-y-0 group-has-focus-visible/volume-menu:opacity-100";
+function AudioPlayer({
+  title,
+  description,
+  artwork,
+  showSpeed,
+  tooltips = true,
+  className,
+  frameClassName,
+  loader,
+  metadata,
+  persistKey,
+  ...props
+}) {
+  const sessionInfo = metadata ?? (typeof title === "string" ? {
+    title,
+    artist: typeof description === "string" ? description : void 0,
+    artwork: artwork ? [{ src: artwork }] : void 0
+  } : void 0);
+  const hasInfo = Boolean(title || description);
+  const [failedArtwork, setFailedArtwork] = React3.useState(null);
+  const showArtwork = artwork && failedArtwork !== artwork;
+  return /* @__PURE__ */ jsxs4(
+    MediaRoot,
+    {
+      persistKey,
+      metadata: sessionInfo,
+      tooltips,
+      className: cn(
+        "@container/audio grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 rounded-xl border bg-card p-2.5 pr-3 text-card-foreground",
+        frameClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx4(MediaAudio, { className, loader, ...props }),
+        /* @__PURE__ */ jsx4("div", { className: cn("flex items-center", hasInfo && "row-span-2 @max-sm/audio:row-span-1"), children: /* @__PURE__ */ jsxs4("span", { className: "relative shrink-0", children: [
+          showArtwork ? (
+            /**
+             * The tile presses as one piece. Scaling the button alone pulled
+             * its scrim in from the edges and bared a band of the image. No
+             * overflow-hidden, so the play tooltip is not clipped.
+             */
+            /* @__PURE__ */ jsxs4("span", { className: "relative block size-11 rounded-lg bg-muted transition-[scale] duration-150 ease-media motion-safe:has-[button:enabled:active]:scale-[0.96] motion-reduce:transition-none", children: [
+              /* @__PURE__ */ jsx4(
+                "img",
+                {
+                  src: artwork,
+                  alt: "",
+                  draggable: false,
+                  onError: () => setFailedArtwork(artwork),
+                  ref: (img) => {
+                    if (img?.complete && img.naturalWidth === 0) setFailedArtwork(artwork);
+                  },
+                  className: "size-full rounded-lg object-cover outline select-none outline-black/10 -outline-offset-1 dark:outline-white/10"
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                MediaPlayButton,
+                {
+                  tooltipAlign: "start",
+                  className: "absolute inset-0 size-full rounded-lg motion-safe:enabled:active:scale-100 bg-media-scrim/15 text-media-foreground hover:bg-media-scrim/35 focus-visible:bg-media-scrim/35 group-data-playing/media:bg-media-scrim/35 [&_svg]:size-4 [&_svg]:drop-shadow-sm"
+                }
+              )
+            ] })
+          ) : /* @__PURE__ */ jsx4(
+            MediaPlayButton,
+            {
+              tooltipAlign: "start",
+              className: "size-10 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 [&_svg]:size-4"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            MediaLoading,
+            {
+              className: showArtwork ? "absolute inset-0 m-auto size-5 text-background" : "absolute -inset-1 size-auto border-current/15 border-t-current text-foreground"
+            }
+          )
+        ] }) }),
+        hasInfo && /* @__PURE__ */ jsxs4("div", { className: "col-start-2 flex min-w-0 items-baseline gap-2 self-end text-sm leading-5 @max-sm/audio:col-span-3 @max-sm/audio:col-start-1 @max-sm/audio:row-start-2 @max-sm/audio:pt-1", children: [
+          title && /* @__PURE__ */ jsx4("span", { dir: "auto", title: typeof title === "string" ? title : void 0, className: "truncate font-medium", children: title }),
+          description && /* @__PURE__ */ jsx4(
+            "span",
+            {
+              dir: "auto",
+              title: typeof description === "string" ? description : void 0,
+              className: "min-w-12 shrink-[4] truncate text-muted-foreground",
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            dir: "ltr",
+            className: cn(
+              "col-start-2 flex items-center gap-2.5 text-muted-foreground",
+              hasInfo && "row-start-2 self-start @max-sm/audio:col-span-3 @max-sm/audio:col-start-1 @max-sm/audio:row-start-3"
+            ),
+            children: [
+              /* @__PURE__ */ jsx4(MediaTime, { className: "min-w-9" }),
+              /* @__PURE__ */ jsx4(MediaSeek, { className: "text-foreground" }),
+              /* @__PURE__ */ jsx4(MediaTime, { type: "duration", toggle: true, className: "min-w-9 text-right" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { className: cn("col-start-3 flex items-center gap-0.5", hasInfo && "row-span-2 row-start-1 @max-sm/audio:row-span-1"), children: [
+          showSpeed && /* @__PURE__ */ jsx4(MediaPlaybackRateButton, { rates: [1, 1.5, 2, 0.75], className: muted }),
+          /* @__PURE__ */ jsxs4("div", { className: "group/volume-menu relative", children: [
+            /* @__PURE__ */ jsx4(MediaMuteButton, { tooltip: false, className: muted }),
+            /* @__PURE__ */ jsx4(
+              "div",
+              {
+                className: cn(
+                  "pointer-events-none absolute bottom-full left-1/2 z-10 hidden -translate-x-1/2 translate-y-1 pb-2 opacity-0 pointer-fine:block",
+                  "transition-[opacity,translate] duration-150 ease-media motion-reduce:transition-none",
+                  volumeOpen2
+                ),
+                children: /* @__PURE__ */ jsx4("div", { className: "flex h-24 w-7 justify-center rounded-full bg-popover py-3 text-popover-foreground shadow-md ring-1 ring-foreground/10", children: /* @__PURE__ */ jsx4(MediaVolume, { orientation: "vertical", className: "h-full" }) })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx4(MediaErrorMessage, { className: "absolute inset-0 flex-row gap-4 rounded-[inherit] bg-card/95 px-4 text-card-foreground" })
+      ]
+    }
+  );
+}
+export {
+  AudioPlayer,
+  CaptionsIcon,
+  CheckIcon,
+  EnterFullscreenIcon,
+  ExitFullscreenIcon,
+  MediaAudio,
+  MediaButton,
+  MediaCaptions,
+  MediaCaptionsButton,
+  MediaControls,
+  MediaErrorMessage,
+  MediaFullscreenButton,
+  MediaLoading,
+  MediaMuteButton,
+  MediaPictureInPictureButton,
+  MediaPlayButton,
+  MediaPlaybackRateButton,
+  MediaRoot,
+  MediaSeek,
+  MediaSettings,
+  MediaSurface,
+  MediaTime,
+  MediaVideo,
+  MediaVolume,
+  PauseIcon,
+  PictureInPictureIcon,
+  PlayIcon,
+  RetryIcon,
+  SeekIcon,
+  SettingsIcon,
+  VideoPlayer,
+  VolumeIcon,
+  createMediaStore,
+  describeMediaError,
+  formatTime,
+  useMedia,
+  useMediaStore
+};
+//# sourceMappingURL=index.js.map