@docyrus/shadcn 1.1.0 → 1.2.0

package/dist/radix-vega/media-player.js

@@ -0,0 +1,2696 @@
+import { useDirection } from '@radix-ui/react-direction';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { Slot } from '@radix-ui/react-slot';
+import { Loader2Icon, AlertTriangleIcon, RefreshCcwIcon, RotateCcwIcon, VolumeXIcon, Volume2Icon, Volume1Icon, PlayIcon, PauseIcon, RewindIcon, FastForwardIcon, CheckIcon, RepeatIcon, Minimize2Icon, Maximize2Icon, PictureInPicture2Icon, PictureInPictureIcon, SubtitlesIcon, CaptionsOffIcon, DownloadIcon, SettingsIcon, ChevronRightIcon } from 'lucide-react';
+import { MediaProvider, useMediaFullscreenRef, useMediaDispatch, useMediaSelector, MediaActionTypes, useMediaRef, timeUtils } from 'media-chrome/react/media-store';
+export { useMediaSelector as useMediaPlayer } from 'media-chrome/react/media-store';
+import * as React3 from 'react';
+import * as ReactDOM from 'react-dom';
+import { cva } from 'class-variance-authority';
+import { Slot as Slot$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1 } from 'radix-ui';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var badgeVariants = cva(
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot$1.Root : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+var buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot$1.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenu$1.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      align,
+      className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden", className),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn("text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8", className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu$1.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu$1.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu$1.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden", className),
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "size-2.5 rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]" })
+      ]
+    }
+  ) });
+}
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  }
+  if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup === "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React3.useCallback(composeRefs(...refs), refs);
+}
+function useLazyRef(fn) {
+  const ref = React3.useRef(null);
+  if (ref.current === null) {
+    ref.current = fn();
+  }
+  return ref;
+}
+var ROOT_NAME = "MediaPlayer";
+var SEEK_NAME = "MediaPlayerSeek";
+var SETTINGS_NAME = "MediaPlayerSettings";
+var VOLUME_NAME = "MediaPlayerVolume";
+var PLAYBACK_SPEED_NAME = "MediaPlayerPlaybackSpeed";
+var FLOATING_MENU_SIDE_OFFSET = 10;
+var SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+var SEEK_STEP_SHORT = 5;
+var SEEK_STEP_LONG = 10;
+var SEEK_COLLISION_PADDING = 10;
+var SEEK_TOOLTIP_WIDTH_FALLBACK = 240;
+var SEEK_HOVER_PERCENT = "--seek-hover-percent";
+var SEEK_TOOLTIP_X = "--seek-tooltip-x";
+var SEEK_TOOLTIP_Y = "--seek-tooltip-y";
+var SPRITE_CONTAINER_WIDTH = 224;
+var SPRITE_CONTAINER_HEIGHT = 128;
+var StoreContext = React3.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React3.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function useStore(selector) {
+  const store = useStoreContext("useStore");
+  const getSnapshot = React3.useCallback(
+    () => selector(store.getState()),
+    [store, selector]
+  );
+  return React3.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+var MediaPlayerContext = React3.createContext(
+  null
+);
+function useMediaPlayerContext(consumerName) {
+  const context = React3.useContext(MediaPlayerContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function MediaPlayer(props) {
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => ({
+    controlsVisible: true,
+    dragging: false,
+    menuOpen: false,
+    volumeIndicatorVisible: false
+  }));
+  const store = React3.useMemo(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      setState: (key, value) => {
+        if (Object.is(stateRef.current[key], value)) return;
+        stateRef.current[key] = value;
+        store.notify();
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      }
+    };
+  }, [listenersRef, stateRef]);
+  return /* @__PURE__ */ jsx(MediaProvider, { children: /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(MediaPlayerImpl, { ...props }) }) });
+}
+function MediaPlayerImpl(props) {
+  const {
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onFullscreenChange,
+    onVolumeChange,
+    onMuted,
+    onMediaError,
+    onPipError,
+    dir: dirProp,
+    label,
+    tooltipDelayDuration = 600,
+    tooltipSideOffset = FLOATING_MENU_SIDE_OFFSET,
+    asChild,
+    autoHide = false,
+    disabled = false,
+    withoutTooltip = false,
+    children,
+    className,
+    ref,
+    ...rootImplProps
+  } = props;
+  const mediaId = React3.useId();
+  const labelId = React3.useId();
+  const descriptionId = React3.useId();
+  const rootRef = React3.useRef(null);
+  const fullscreenRef = useMediaFullscreenRef();
+  const composedRef = useComposedRefs(ref, rootRef, fullscreenRef);
+  const dir = useDirection(dirProp);
+  const dispatch = useMediaDispatch();
+  const mediaRef = React3.useRef(
+    null
+  );
+  const store = useStoreContext(ROOT_NAME);
+  const controlsVisible = useStore((state) => state.controlsVisible);
+  const dragging = useStore((state) => state.dragging);
+  const menuOpen = useStore((state) => state.menuOpen);
+  const hideControlsTimeoutRef = React3.useRef(null);
+  const lastMouseMoveRef = React3.useRef(Date.now());
+  const volumeIndicatorTimeoutRef = React3.useRef(null);
+  const mediaPaused = useMediaSelector((state) => state.mediaPaused ?? true);
+  const isFullscreen = useMediaSelector(
+    (state) => state.mediaIsFullscreen ?? false
+  );
+  const [mounted, setMounted] = React3.useState(false);
+  React3.useLayoutEffect(() => {
+    setMounted(true);
+  }, []);
+  const portalContainer = mounted ? isFullscreen ? rootRef.current : globalThis.document.body : null;
+  const isVideo = typeof HTMLVideoElement !== "undefined" && mediaRef.current instanceof HTMLVideoElement || mediaRef.current?.tagName?.toLowerCase() === "mux-player";
+  const onControlsShow = React3.useCallback(() => {
+    store.setState("controlsVisible", true);
+    lastMouseMoveRef.current = Date.now();
+    if (hideControlsTimeoutRef.current) {
+      clearTimeout(hideControlsTimeoutRef.current);
+    }
+    if (autoHide && !mediaPaused && !menuOpen && !dragging) {
+      hideControlsTimeoutRef.current = setTimeout(() => {
+        store.setState("controlsVisible", false);
+      }, 3e3);
+    }
+  }, [store.setState, autoHide, mediaPaused, menuOpen, dragging]);
+  const onVolumeIndicatorTrigger = React3.useCallback(() => {
+    if (menuOpen) return;
+    store.setState("volumeIndicatorVisible", true);
+    if (volumeIndicatorTimeoutRef.current) {
+      clearTimeout(volumeIndicatorTimeoutRef.current);
+    }
+    volumeIndicatorTimeoutRef.current = setTimeout(() => {
+      store.setState("volumeIndicatorVisible", false);
+    }, 2e3);
+    if (autoHide) {
+      onControlsShow();
+    }
+  }, [store.setState, menuOpen, autoHide, onControlsShow]);
+  const onMouseLeave = React3.useCallback(
+    (event) => {
+      rootImplProps.onMouseLeave?.(event);
+      if (event.defaultPrevented) return;
+      if (autoHide && !mediaPaused && !menuOpen && !dragging) {
+        store.setState("controlsVisible", false);
+      }
+    },
+    [
+      store.setState,
+      rootImplProps.onMouseLeave,
+      autoHide,
+      mediaPaused,
+      menuOpen,
+      dragging
+    ]
+  );
+  const onMouseMove = React3.useCallback(
+    (event) => {
+      rootImplProps.onMouseMove?.(event);
+      if (event.defaultPrevented) return;
+      if (autoHide) {
+        onControlsShow();
+      }
+    },
+    [autoHide, rootImplProps.onMouseMove, onControlsShow]
+  );
+  React3.useEffect(() => {
+    if (mediaPaused || menuOpen || dragging) {
+      store.setState("controlsVisible", true);
+      if (hideControlsTimeoutRef.current) {
+        clearTimeout(hideControlsTimeoutRef.current);
+      }
+      return;
+    }
+    if (autoHide) {
+      onControlsShow();
+    }
+  }, [
+    store.setState,
+    onControlsShow,
+    autoHide,
+    menuOpen,
+    mediaPaused,
+    dragging
+  ]);
+  const onKeyDown = React3.useCallback(
+    (event) => {
+      if (disabled) return;
+      rootImplProps.onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      const mediaElement = mediaRef.current;
+      if (!mediaElement) return;
+      const isMediaFocused = document.activeElement === mediaElement;
+      const isPlayerFocused = document.activeElement?.closest('[data-slot="media-player"]') !== null;
+      if (!isMediaFocused && !isPlayerFocused) return;
+      if (autoHide) onControlsShow();
+      switch (event.key.toLowerCase()) {
+        case " ":
+        case "k":
+          event.preventDefault();
+          dispatch({
+            type: mediaElement.paused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST
+          });
+          break;
+        case "f":
+          event.preventDefault();
+          dispatch({
+            type: document.fullscreenElement ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST
+          });
+          break;
+        case "m": {
+          event.preventDefault();
+          if (isVideo) {
+            onVolumeIndicatorTrigger();
+          }
+          dispatch({
+            type: mediaElement.muted ? MediaActionTypes.MEDIA_UNMUTE_REQUEST : MediaActionTypes.MEDIA_MUTE_REQUEST
+          });
+          break;
+        }
+        case "arrowright":
+          event.preventDefault();
+          if (isVideo || mediaElement instanceof HTMLAudioElement && event.shiftKey) {
+            dispatch({
+              type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+              detail: Math.min(
+                mediaElement.duration,
+                mediaElement.currentTime + SEEK_STEP_SHORT
+              )
+            });
+          }
+          break;
+        case "arrowleft":
+          event.preventDefault();
+          if (isVideo || mediaElement instanceof HTMLAudioElement && event.shiftKey) {
+            dispatch({
+              type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+              detail: Math.max(0, mediaElement.currentTime - SEEK_STEP_SHORT)
+            });
+          }
+          break;
+        case "arrowup":
+          event.preventDefault();
+          if (isVideo) {
+            onVolumeIndicatorTrigger();
+            dispatch({
+              type: MediaActionTypes.MEDIA_VOLUME_REQUEST,
+              detail: Math.min(1, mediaElement.volume + 0.1)
+            });
+          }
+          break;
+        case "arrowdown":
+          event.preventDefault();
+          if (isVideo) {
+            onVolumeIndicatorTrigger();
+            dispatch({
+              type: MediaActionTypes.MEDIA_VOLUME_REQUEST,
+              detail: Math.max(0, mediaElement.volume - 0.1)
+            });
+          }
+          break;
+        case "<": {
+          event.preventDefault();
+          const currentRate = mediaElement.playbackRate;
+          const currentIndex = SPEEDS.indexOf(currentRate);
+          const newIndex = Math.max(0, currentIndex - 1);
+          const newRate = SPEEDS[newIndex] ?? 1;
+          dispatch({
+            type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+            detail: newRate
+          });
+          break;
+        }
+        case ">": {
+          event.preventDefault();
+          const currentRate = mediaElement.playbackRate;
+          const currentIndex = SPEEDS.indexOf(currentRate);
+          const newIndex = Math.min(SPEEDS.length - 1, currentIndex + 1);
+          const newRate = SPEEDS[newIndex] ?? 1;
+          dispatch({
+            type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+            detail: newRate
+          });
+          break;
+        }
+        case "c":
+          event.preventDefault();
+          if (isVideo && mediaElement.textTracks.length > 0) {
+            dispatch({
+              type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST
+            });
+          }
+          break;
+        case "d": {
+          const hasDownload = mediaElement.querySelector(
+            '[data-slot="media-player-download"]'
+          );
+          if (!hasDownload) break;
+          event.preventDefault();
+          if (mediaElement.currentSrc) {
+            const link = document.createElement("a");
+            link.href = mediaElement.currentSrc;
+            link.download = "";
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          }
+          break;
+        }
+        case "p": {
+          event.preventDefault();
+          if (isVideo && "requestPictureInPicture" in mediaElement) {
+            const isPip = document.pictureInPictureElement === mediaElement;
+            dispatch({
+              type: isPip ? MediaActionTypes.MEDIA_EXIT_PIP_REQUEST : MediaActionTypes.MEDIA_ENTER_PIP_REQUEST
+            });
+            if (isPip) {
+              document.exitPictureInPicture().catch((error) => {
+                onPipError?.(error, "exit");
+              });
+            } else {
+              mediaElement.requestPictureInPicture().catch((error) => {
+                onPipError?.(error, "enter");
+              });
+            }
+          }
+          break;
+        }
+        case "r": {
+          event.preventDefault();
+          mediaElement.loop = !mediaElement.loop;
+          break;
+        }
+        case "j": {
+          event.preventDefault();
+          dispatch({
+            type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: Math.max(0, mediaElement.currentTime - SEEK_STEP_LONG)
+          });
+          break;
+        }
+        case "l": {
+          event.preventDefault();
+          dispatch({
+            type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: Math.min(
+              mediaElement.duration,
+              mediaElement.currentTime + SEEK_STEP_LONG
+            )
+          });
+          break;
+        }
+        case "0":
+        case "1":
+        case "2":
+        case "3":
+        case "4":
+        case "5":
+        case "6":
+        case "7":
+        case "8":
+        case "9": {
+          event.preventDefault();
+          const percent = Number.parseInt(event.key, 10) / 10;
+          const seekTime = mediaElement.duration * percent;
+          dispatch({
+            type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: seekTime
+          });
+          break;
+        }
+        case "home": {
+          event.preventDefault();
+          dispatch({
+            type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: 0
+          });
+          break;
+        }
+        case "end": {
+          event.preventDefault();
+          dispatch({
+            type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+            detail: mediaElement.duration
+          });
+          break;
+        }
+      }
+    },
+    [
+      dispatch,
+      rootImplProps.onKeyDown,
+      onVolumeIndicatorTrigger,
+      onPipError,
+      disabled,
+      isVideo,
+      onControlsShow,
+      autoHide
+    ]
+  );
+  const onKeyUp = React3.useCallback(
+    (event) => {
+      rootImplProps.onKeyUp?.(event);
+      const key = event.key.toLowerCase();
+      if (key === "arrowup" || key === "arrowdown" || key === "m") {
+        onVolumeIndicatorTrigger();
+      }
+    },
+    [rootImplProps.onKeyUp, onVolumeIndicatorTrigger]
+  );
+  React3.useEffect(() => {
+    const mediaElement = mediaRef.current;
+    if (!mediaElement) return;
+    if (onPlay) mediaElement.addEventListener("play", onPlay);
+    if (onPause) mediaElement.addEventListener("pause", onPause);
+    if (onEnded) mediaElement.addEventListener("ended", onEnded);
+    if (onTimeUpdate)
+      mediaElement.addEventListener(
+        "timeupdate",
+        () => onTimeUpdate?.(mediaElement.currentTime)
+      );
+    if (onVolumeChange)
+      mediaElement.addEventListener("volumechange", () => {
+        onVolumeChange?.(mediaElement.volume);
+        onMuted?.(mediaElement.muted);
+      });
+    if (onMediaError)
+      mediaElement.addEventListener(
+        "error",
+        () => onMediaError?.(mediaElement.error)
+      );
+    if (onFullscreenChange) {
+      document.addEventListener(
+        "fullscreenchange",
+        () => onFullscreenChange?.(!!document.fullscreenElement)
+      );
+    }
+    return () => {
+      if (onPlay) mediaElement.removeEventListener("play", onPlay);
+      if (onPause) mediaElement.removeEventListener("pause", onPause);
+      if (onEnded) mediaElement.removeEventListener("ended", onEnded);
+      if (onTimeUpdate)
+        mediaElement.removeEventListener(
+          "timeupdate",
+          () => onTimeUpdate?.(mediaElement.currentTime)
+        );
+      if (onVolumeChange)
+        mediaElement.removeEventListener("volumechange", () => {
+          onVolumeChange?.(mediaElement.volume);
+          onMuted?.(mediaElement.muted);
+        });
+      if (onMediaError)
+        mediaElement.removeEventListener(
+          "error",
+          () => onMediaError?.(mediaElement.error)
+        );
+      if (onFullscreenChange) {
+        document.removeEventListener(
+          "fullscreenchange",
+          () => onFullscreenChange?.(!!document.fullscreenElement)
+        );
+      }
+      if (volumeIndicatorTimeoutRef.current) {
+        clearTimeout(volumeIndicatorTimeoutRef.current);
+      }
+      if (hideControlsTimeoutRef.current) {
+        clearTimeout(hideControlsTimeoutRef.current);
+      }
+    };
+  }, [
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onVolumeChange,
+    onMuted,
+    onMediaError,
+    onFullscreenChange
+  ]);
+  const contextValue = React3.useMemo(
+    () => ({
+      mediaId,
+      labelId,
+      descriptionId,
+      dir,
+      rootRef,
+      mediaRef,
+      portalContainer,
+      tooltipDelayDuration,
+      tooltipSideOffset,
+      disabled,
+      isVideo,
+      withoutTooltip
+    }),
+    [
+      mediaId,
+      labelId,
+      descriptionId,
+      dir,
+      portalContainer,
+      tooltipDelayDuration,
+      tooltipSideOffset,
+      disabled,
+      isVideo,
+      withoutTooltip
+    ]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(MediaPlayerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    RootPrimitive,
+    {
+      "aria-labelledby": labelId,
+      "aria-describedby": descriptionId,
+      "aria-disabled": disabled,
+      "data-disabled": disabled ? "" : void 0,
+      "data-controls-visible": controlsVisible ? "" : void 0,
+      "data-slot": "media-player",
+      "data-state": isFullscreen ? "fullscreen" : "windowed",
+      dir,
+      tabIndex: disabled ? void 0 : 0,
+      ...rootImplProps,
+      ref: composedRef,
+      onMouseLeave,
+      onMouseMove,
+      onKeyDown,
+      onKeyUp,
+      className: cn(
+        "dark relative isolate flex flex-col overflow-hidden rounded-lg bg-background outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_video]:relative [&_video]:object-contain",
+        "in-[:fullscreen]:flex in-[:fullscreen]:h-full in-[:fullscreen]:max-h-screen in-[:fullscreen]:flex-col in-[:fullscreen]:justify-between data-[state=fullscreen]:[&_video]:size-full",
+        "**:data-slider:relative [&_[data-slider]::before]:absolute [&_[data-slider]::before]:inset-x-0 [&_[data-slider]::before]:-top-4 [&_[data-slider]::before]:-bottom-2 [&_[data-slider]::before]:z-10 [&_[data-slider]::before]:h-8 [&_[data-slider]::before]:cursor-pointer [&_[data-slider]::before]:content-[''] [&_[data-slot='media-player-seek']:not([data-hovering])::before]:cursor-default",
+        "[&_video::-webkit-media-text-track-display]:top-auto! [&_video::-webkit-media-text-track-display]:bottom-[4%]! [&_video::-webkit-media-text-track-display]:mb-0! data-[state=fullscreen]:data-controls-visible:[&_video::-webkit-media-text-track-display]:bottom-[9%]! data-[state=fullscreen]:[&_video::-webkit-media-text-track-display]:bottom-[7%]! data-controls-visible:[&_video::-webkit-media-text-track-display]:bottom-[13%]!",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { id: labelId, className: "sr-only", children: label ?? "Media player" }),
+        /* @__PURE__ */ jsx("span", { id: descriptionId, className: "sr-only", children: isVideo ? "Video player with custom controls for playback, volume, seeking, and more. Use space bar to play/pause, arrow keys (\u2190/\u2192) to seek, and arrow keys (\u2191/\u2193) to adjust volume." : "Audio player with custom controls for playback, volume, seeking, and more. Use space bar to play/pause, Shift + arrow keys (\u2190/\u2192) to seek, and arrow keys (\u2191/\u2193) to adjust volume." }),
+        children,
+        /* @__PURE__ */ jsx(MediaPlayerVolumeIndicator, {})
+      ]
+    }
+  ) });
+}
+function MediaPlayerVideo(props) {
+  const { asChild, ref, ...videoProps } = props;
+  const context = useMediaPlayerContext("MediaPlayerVideo");
+  const dispatch = useMediaDispatch();
+  const mediaRefCallback = useMediaRef();
+  const composedRef = useComposedRefs(ref, context.mediaRef, mediaRefCallback);
+  const onPlayToggle = React3.useCallback(
+    (event) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      const mediaElement = event.currentTarget;
+      if (!mediaElement) return;
+      dispatch({
+        type: mediaElement.paused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST
+      });
+    },
+    [dispatch, props.onClick]
+  );
+  const VideoPrimitive = asChild ? Slot : "video";
+  return /* @__PURE__ */ jsx(
+    VideoPrimitive,
+    {
+      "aria-describedby": context.descriptionId,
+      "aria-labelledby": context.labelId,
+      "data-slot": "media-player-video",
+      ...videoProps,
+      id: context.mediaId,
+      ref: composedRef,
+      onClick: onPlayToggle
+    }
+  );
+}
+function MediaPlayerAudio(props) {
+  const { asChild, ref, ...audioProps } = props;
+  const context = useMediaPlayerContext("MediaPlayerAudio");
+  const mediaRefCallback = useMediaRef();
+  const composedRef = useComposedRefs(ref, context.mediaRef, mediaRefCallback);
+  const AudioPrimitive = asChild ? Slot : "audio";
+  return /* @__PURE__ */ jsx(
+    AudioPrimitive,
+    {
+      "aria-describedby": context.descriptionId,
+      "aria-labelledby": context.labelId,
+      "data-slot": "media-player-audio",
+      ...audioProps,
+      id: context.mediaId,
+      ref: composedRef
+    }
+  );
+}
+function MediaPlayerControls(props) {
+  const { asChild, className, ...controlsProps } = props;
+  const context = useMediaPlayerContext("MediaPlayerControls");
+  const isFullscreen = useMediaSelector(
+    (state) => state.mediaIsFullscreen ?? false
+  );
+  const controlsVisible = useStore((state) => state.controlsVisible);
+  const ControlsPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ControlsPrimitive,
+    {
+      "data-disabled": context.disabled ? "" : void 0,
+      "data-slot": "media-player-controls",
+      "data-state": isFullscreen ? "fullscreen" : "windowed",
+      "data-visible": controlsVisible ? "" : void 0,
+      dir: context.dir,
+      className: cn(
+        "dark pointer-events-none absolute right-0 bottom-0 left-0 z-50 flex items-center gap-2 in-[:fullscreen]:px-6 px-4 in-[:fullscreen]:py-4 py-3 opacity-0 transition-opacity duration-200 data-visible:pointer-events-auto data-visible:opacity-100",
+        className
+      ),
+      ...controlsProps
+    }
+  );
+}
+function MediaPlayerLoading(props) {
+  const {
+    delayMs = 500,
+    asChild,
+    className,
+    children,
+    ...loadingProps
+  } = props;
+  const isLoading = useMediaSelector((state) => state.mediaLoading ?? false);
+  const isPaused = useMediaSelector((state) => state.mediaPaused ?? true);
+  const hasPlayed = useMediaSelector((state) => state.mediaHasPlayed ?? false);
+  const shouldShowLoading = isLoading && !isPaused;
+  const shouldUseDelay = hasPlayed && shouldShowLoading;
+  const loadingDelayMs = shouldUseDelay ? delayMs : 0;
+  const [shouldRender, setShouldRender] = React3.useState(false);
+  const timeoutRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (shouldShowLoading) {
+      if (loadingDelayMs > 0) {
+        timeoutRef.current = setTimeout(() => {
+          setShouldRender(true);
+          timeoutRef.current = null;
+        }, loadingDelayMs);
+      } else {
+        setShouldRender(true);
+      }
+    } else {
+      setShouldRender(false);
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [shouldShowLoading, loadingDelayMs]);
+  if (!shouldRender) return null;
+  const LoadingPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    LoadingPrimitive,
+    {
+      role: "status",
+      "aria-live": "polite",
+      "data-slot": "media-player-loading",
+      ...loadingProps,
+      className: cn(
+        "fade-in-0 zoom-in-95 pointer-events-none absolute inset-0 z-50 flex animate-in items-center justify-center duration-200",
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-20 animate-spin stroke-[.0938rem] text-primary" })
+    }
+  );
+}
+function MediaPlayerError(props) {
+  const {
+    error: errorProp,
+    label,
+    description,
+    onRetry: onRetryProp,
+    onReload: onReloadProp,
+    asChild,
+    className,
+    children,
+    ...errorProps
+  } = props;
+  const context = useMediaPlayerContext("MediaPlayerError");
+  const isFullscreen = useMediaSelector(
+    (state) => state.mediaIsFullscreen ?? false
+  );
+  const mediaError = useMediaSelector((state) => state.mediaError);
+  const error = errorProp ?? mediaError;
+  const labelId = React3.useId();
+  const descriptionId = React3.useId();
+  const [actionState, setActionState] = React3.useState({
+    retryPending: false,
+    reloadPending: false
+  });
+  const onRetry = React3.useCallback(() => {
+    setActionState((prev) => ({ ...prev, retryPending: true }));
+    requestAnimationFrame(() => {
+      const mediaElement = context.mediaRef.current;
+      if (!mediaElement) {
+        setActionState((prev) => ({ ...prev, retryPending: false }));
+        return;
+      }
+      if (onRetryProp) {
+        onRetryProp();
+      } else {
+        const currentSrc = mediaElement.currentSrc ?? mediaElement.src;
+        if (currentSrc) {
+          mediaElement.load();
+        }
+      }
+      setActionState((prev) => ({ ...prev, retryPending: false }));
+    });
+  }, [context.mediaRef, onRetryProp]);
+  const onReload = React3.useCallback(() => {
+    setActionState((prev) => ({ ...prev, reloadPending: true }));
+    requestAnimationFrame(() => {
+      if (onReloadProp) {
+        onReloadProp();
+      } else {
+        window.location.reload();
+      }
+    });
+  }, [onReloadProp]);
+  const errorLabel = React3.useMemo(() => {
+    if (label) return label;
+    if (!error) return "Playback Error";
+    const labelMap = {
+      [MediaError.MEDIA_ERR_ABORTED]: "Playback Interrupted",
+      [MediaError.MEDIA_ERR_NETWORK]: "Connection Problem",
+      [MediaError.MEDIA_ERR_DECODE]: "Media Error",
+      [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]: "Unsupported Format"
+    };
+    return labelMap[error.code] ?? "Playback Error";
+  }, [label, error]);
+  const errorDescription = React3.useMemo(() => {
+    if (description) return description;
+    if (!error) return "An unknown error occurred";
+    const descriptionMap = {
+      [MediaError.MEDIA_ERR_ABORTED]: "Media playback was aborted",
+      [MediaError.MEDIA_ERR_NETWORK]: "A network error occurred while loading the media",
+      [MediaError.MEDIA_ERR_DECODE]: "An error occurred while decoding the media",
+      [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]: "The media format is not supported"
+    };
+    return descriptionMap[error.code] ?? "An unknown error occurred";
+  }, [description, error]);
+  if (!error) return null;
+  const ErrorPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ErrorPrimitive,
+    {
+      role: "alert",
+      "aria-describedby": descriptionId,
+      "aria-labelledby": labelId,
+      "aria-live": "assertive",
+      "data-slot": "media-player-error",
+      "data-state": isFullscreen ? "fullscreen" : "windowed",
+      ...errorProps,
+      className: cn(
+        "pointer-events-auto absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 text-white backdrop-blur-sm",
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsxs("div", { className: "flex max-w-md flex-col items-center gap-4 px-6 py-8 text-center", children: [
+        /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-12 text-destructive" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-px text-center", children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-xl tracking-tight", children: errorLabel }),
+          /* @__PURE__ */ jsx("p", { className: "text-balance text-muted-foreground text-sm leading-relaxed", children: errorDescription })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              onClick: onRetry,
+              disabled: actionState.retryPending,
+              children: [
+                actionState.retryPending ? /* @__PURE__ */ jsx(Loader2Icon, { className: "animate-spin" }) : /* @__PURE__ */ jsx(RefreshCcwIcon, {}),
+                "Try again"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: onReload,
+              disabled: actionState.reloadPending,
+              children: [
+                actionState.reloadPending ? /* @__PURE__ */ jsx(Loader2Icon, { className: "animate-spin" }) : /* @__PURE__ */ jsx(RotateCcwIcon, {}),
+                "Reload page"
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function MediaPlayerVolumeIndicator(props) {
+  const { asChild, className, ...indicatorProps } = props;
+  const mediaVolume = useMediaSelector((state) => state.mediaVolume ?? 1);
+  const mediaMuted = useMediaSelector((state) => state.mediaMuted ?? false);
+  const mediaVolumeLevel = useMediaSelector(
+    (state) => state.mediaVolumeLevel ?? "high"
+  );
+  const volumeIndicatorVisible = useStore(
+    (state) => state.volumeIndicatorVisible
+  );
+  if (!volumeIndicatorVisible) return null;
+  const effectiveVolume = mediaMuted ? 0 : mediaVolume;
+  const volumePercentage = Math.round(effectiveVolume * 100);
+  const barCount = 10;
+  const activeBarCount = Math.ceil(effectiveVolume * barCount);
+  const VolumeIndicatorPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    VolumeIndicatorPrimitive,
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": `Volume ${mediaMuted ? "muted" : `${volumePercentage}%`}`,
+      "data-slot": "media-player-volume-indicator",
+      ...indicatorProps,
+      className: cn(
+        "pointer-events-none absolute inset-0 z-50 flex items-center justify-center",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "fade-in-0 zoom-in-95 flex animate-in flex-col items-center gap-3 rounded-lg bg-black/30 px-6 py-4 text-white backdrop-blur-xs duration-200", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          mediaVolumeLevel === "off" || mediaMuted ? /* @__PURE__ */ jsx(VolumeXIcon, { className: "size-6" }) : mediaVolumeLevel === "high" ? /* @__PURE__ */ jsx(Volume2Icon, { className: "size-6" }) : /* @__PURE__ */ jsx(Volume1Icon, { className: "size-6" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm tabular-nums", children: mediaMuted ? "Muted" : `${volumePercentage}%` })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: Array.from({ length: barCount }, (_, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-1.5 rounded-full transition-all duration-150",
+              index < activeBarCount && !mediaMuted ? "scale-100 bg-white" : "scale-90 bg-white/30"
+            ),
+            style: {
+              height: `${12 + index * 2}px`,
+              animationDelay: `${index * 50}ms`
+            }
+          },
+          index
+        )) })
+      ] })
+    }
+  );
+}
+function MediaPlayerControlsOverlay(props) {
+  const { asChild, className, ...overlayProps } = props;
+  const isFullscreen = useMediaSelector(
+    (state) => state.mediaIsFullscreen ?? false
+  );
+  const controlsVisible = useStore((state) => state.controlsVisible);
+  const OverlayPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    OverlayPrimitive,
+    {
+      "data-slot": "media-player-controls-overlay",
+      "data-state": isFullscreen ? "fullscreen" : "windowed",
+      "data-visible": controlsVisible ? "" : void 0,
+      ...overlayProps,
+      className: cn(
+        "pointer-events-none absolute inset-0 -z-10 bg-linear-to-t from-black/80 to-transparent opacity-0 transition-opacity duration-200 data-visible:opacity-100",
+        className
+      )
+    }
+  );
+}
+function MediaPlayerPlay(props) {
+  const { children, className, disabled, ...playButtonProps } = props;
+  const context = useMediaPlayerContext("MediaPlayerPlay");
+  const dispatch = useMediaDispatch();
+  const mediaPaused = useMediaSelector((state) => state.mediaPaused ?? true);
+  const isDisabled = disabled || context.disabled;
+  const onPlayToggle = React3.useCallback(
+    (event) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      dispatch({
+        type: mediaPaused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST
+      });
+    },
+    [dispatch, props.onClick, mediaPaused]
+  );
+  return /* @__PURE__ */ jsx(
+    MediaPlayerTooltip,
+    {
+      tooltip: mediaPaused ? "Play" : "Pause",
+      shortcut: "Space",
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          "aria-controls": context.mediaId,
+          "aria-label": mediaPaused ? "Play" : "Pause",
+          "aria-pressed": !mediaPaused,
+          "data-disabled": isDisabled ? "" : void 0,
+          "data-slot": "media-player-play-button",
+          "data-state": mediaPaused ? "off" : "on",
+          disabled: isDisabled,
+          ...playButtonProps,
+          variant: "ghost",
+          size: "icon",
+          className: cn(
+            "size-8 [&_svg:not([class*='fill-'])]:fill-current",
+            className
+          ),
+          onClick: onPlayToggle,
+          children: children ?? (mediaPaused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {}))
+        }
+      )
+    }
+  );
+}
+function MediaPlayerSeekBackward(props) {
+  const {
+    seconds = SEEK_STEP_SHORT,
+    children,
+    className,
+    disabled,
+    ...seekBackwardProps
+  } = props;
+  const context = useMediaPlayerContext("MediaPlayerSeekBackward");
+  const dispatch = useMediaDispatch();
+  const mediaCurrentTime = useMediaSelector(
+    (state) => state.mediaCurrentTime ?? 0
+  );
+  const isDisabled = disabled || context.disabled;
+  const onSeekBackward = React3.useCallback(
+    (event) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      dispatch({
+        type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+        detail: Math.max(0, mediaCurrentTime - seconds)
+      });
+    },
+    [dispatch, props.onClick, mediaCurrentTime, seconds]
+  );
+  return /* @__PURE__ */ jsx(
+    MediaPlayerTooltip,
+    {
+      tooltip: `Back ${seconds}s`,
+      shortcut: context.isVideo ? ["\u2190"] : ["Shift \u2190"],
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          "aria-controls": context.mediaId,
+          "aria-label": `Back ${seconds} seconds`,
+          "data-disabled": isDisabled ? "" : void 0,
+          "data-slot": "media-player-seek-backward",
+          disabled: isDisabled,
+          ...seekBackwardProps,
+          variant: "ghost",
+          size: "icon",
+          className: cn("size-8", className),
+          onClick: onSeekBackward,
+          children: children ?? /* @__PURE__ */ jsx(RewindIcon, {})
+        }
+      )
+    }
+  );
+}
+function MediaPlayerSeekForward(props) {
+  const {
+    seconds = SEEK_STEP_LONG,
+    children,
+    className,
+    disabled,
+    ...seekForwardProps
+  } = props;
+  const context = useMediaPlayerContext("MediaPlayerSeekForward");
+  const dispatch = useMediaDispatch();
+  const mediaCurrentTime = useMediaSelector(
+    (state) => state.mediaCurrentTime ?? 0
+  );
+  const [, seekableEnd] = useMediaSelector(
+    (state) => state.mediaSeekable ?? [0, 0]
+  );
+  const isDisabled = disabled || context.disabled;
+  const onSeekForward = React3.useCallback(
+    (event) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      dispatch({
+        type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+        detail: Math.min(
+          seekableEnd ?? Number.POSITIVE_INFINITY,
+          mediaCurrentTime + seconds
+        )
+      });
+    },
+    [dispatch, props.onClick, mediaCurrentTime, seekableEnd, seconds]
+  );
+  return /* @__PURE__ */ jsx(
+    MediaPlayerTooltip,
+    {
+      tooltip: `Forward ${seconds}s`,
+      shortcut: context.isVideo ? ["\u2192"] : ["Shift \u2192"],
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          "aria-controls": context.mediaId,
+          "aria-label": `Forward ${seconds} seconds`,
+          "data-disabled": isDisabled ? "" : void 0,
+          "data-slot": "media-player-seek-forward",
+          disabled: isDisabled,
+          ...seekForwardProps,
+          variant: "ghost",
+          size: "icon",
+          className: cn("size-8", className),
+          onClick: onSeekForward,
+          children: children ?? /* @__PURE__ */ jsx(FastForwardIcon, {})
+        }
+      )
+    }
+  );
+}
+function MediaPlayerSeek(props) {
+  const {
+    withTime = false,
+    withoutChapter = false,
+    withoutTooltip = false,
+    tooltipTimeVariant = "current",
+    tooltipThumbnailSrc,
+    tooltipSideOffset,
+    tooltipCollisionPadding = SEEK_COLLISION_PADDING,
+    tooltipCollisionBoundary,
+    className,
+    disabled,
+    ...seekProps
+  } = props;
+  const context = useMediaPlayerContext(SEEK_NAME);
+  const store = useStoreContext(SEEK_NAME);
+  const dispatch = useMediaDispatch();
+  const mediaCurrentTime = useMediaSelector(
+    (state) => state.mediaCurrentTime ?? 0
+  );
+  const [seekableStart = 0, seekableEnd = 0] = useMediaSelector(
+    (state) => state.mediaSeekable ?? [0, 0]
+  );
+  const mediaBuffered = useMediaSelector((state) => state.mediaBuffered ?? []);
+  const mediaEnded = useMediaSelector((state) => state.mediaEnded ?? false);
+  const chapterCues = useMediaSelector(
+    (state) => state.mediaChaptersCues ?? []
+  );
+  const mediaPreviewTime = useMediaSelector((state) => state.mediaPreviewTime);
+  const mediaPreviewImage = useMediaSelector(
+    (state) => state.mediaPreviewImage
+  );
+  const mediaPreviewCoords = useMediaSelector(
+    (state) => state.mediaPreviewCoords
+  );
+  const seekRef = React3.useRef(null);
+  const tooltipRef = React3.useRef(null);
+  const justCommittedRef = React3.useRef(false);
+  const hoverTimeRef = React3.useRef(0);
+  const tooltipXRef = React3.useRef(0);
+  const tooltipYRef = React3.useRef(0);
+  const seekRectRef = React3.useRef(null);
+  const collisionDataRef = React3.useRef(null);
+  const [seekState, setSeekState] = React3.useState({
+    isHovering: false,
+    pendingSeekTime: null,
+    hasInitialPosition: false
+  });
+  const rafIdRef = React3.useRef(null);
+  const seekThrottleRef = React3.useRef(null);
+  const hoverTimeoutRef = React3.useRef(null);
+  const lastPointerXRef = React3.useRef(0);
+  const lastPointerYRef = React3.useRef(0);
+  const previewDebounceRef = React3.useRef(null);
+  const pointerEnterTimeRef = React3.useRef(0);
+  const horizontalMovementRef = React3.useRef(0);
+  const verticalMovementRef = React3.useRef(0);
+  const lastSeekCommitTimeRef = React3.useRef(0);
+  const timeCache = React3.useRef(/* @__PURE__ */ new Map());
+  const displayValue = seekState.pendingSeekTime ?? mediaCurrentTime;
+  const isDisabled = disabled || context.disabled;
+  const tooltipDisabled = withoutTooltip || context.withoutTooltip || store.getState().menuOpen;
+  const currentTooltipSideOffset = tooltipSideOffset ?? context.tooltipSideOffset;
+  const getCachedTime = React3.useCallback((time, duration2) => {
+    const roundedTime = Math.floor(time);
+    const key = roundedTime + duration2 * 1e4;
+    if (timeCache.current.has(key)) {
+      return timeCache.current.get(key);
+    }
+    const formatted = timeUtils.formatTime(time, duration2);
+    timeCache.current.set(key, formatted);
+    if (timeCache.current.size > 100) {
+      timeCache.current.clear();
+    }
+    return formatted;
+  }, []);
+  const currentTime = getCachedTime(displayValue, seekableEnd);
+  const duration = getCachedTime(seekableEnd, seekableEnd);
+  const remainingTime = getCachedTime(seekableEnd - displayValue, seekableEnd);
+  const onCollisionDataUpdate = React3.useCallback(() => {
+    if (collisionDataRef.current) return collisionDataRef.current;
+    const padding = typeof tooltipCollisionPadding === "number" ? {
+      top: tooltipCollisionPadding,
+      right: tooltipCollisionPadding,
+      bottom: tooltipCollisionPadding,
+      left: tooltipCollisionPadding
+    } : { top: 0, right: 0, bottom: 0, left: 0, ...tooltipCollisionPadding };
+    const boundaries = tooltipCollisionBoundary ? Array.isArray(tooltipCollisionBoundary) ? tooltipCollisionBoundary : [tooltipCollisionBoundary] : [context.rootRef.current].filter(Boolean);
+    collisionDataRef.current = { padding, boundaries };
+    return collisionDataRef.current;
+  }, [tooltipCollisionPadding, tooltipCollisionBoundary, context.rootRef]);
+  const getCurrentChapterCue = React3.useCallback(
+    (time) => {
+      if (withoutChapter || chapterCues.length === 0) return null;
+      return chapterCues.find((c) => time >= c.startTime && time < c.endTime);
+    },
+    [chapterCues, withoutChapter]
+  );
+  const getThumbnail = React3.useCallback(
+    (time) => {
+      if (tooltipDisabled) return null;
+      if (tooltipThumbnailSrc) {
+        const src = typeof tooltipThumbnailSrc === "function" ? tooltipThumbnailSrc(time) : tooltipThumbnailSrc;
+        return { src, coords: null };
+      }
+      if (mediaPreviewTime !== void 0 && Math.abs(time - mediaPreviewTime) < 0.1 && mediaPreviewImage) {
+        return {
+          src: mediaPreviewImage,
+          coords: mediaPreviewCoords ?? null
+        };
+      }
+      return null;
+    },
+    [
+      tooltipThumbnailSrc,
+      mediaPreviewTime,
+      mediaPreviewImage,
+      mediaPreviewCoords,
+      tooltipDisabled
+    ]
+  );
+  const onPreviewUpdate = React3.useCallback(
+    (time) => {
+      if (tooltipDisabled) return;
+      if (previewDebounceRef.current) {
+        cancelAnimationFrame(previewDebounceRef.current);
+      }
+      previewDebounceRef.current = requestAnimationFrame(() => {
+        dispatch({
+          type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+          detail: time
+        });
+        previewDebounceRef.current = null;
+      });
+    },
+    [dispatch, tooltipDisabled]
+  );
+  const onTooltipPositionUpdate = React3.useCallback(
+    (clientX) => {
+      if (!seekRef.current) return;
+      const tooltipWidth = tooltipRef.current?.offsetWidth ?? SEEK_TOOLTIP_WIDTH_FALLBACK;
+      let x = clientX;
+      const y = seekRectRef.current?.top ?? 0;
+      const collisionData = onCollisionDataUpdate();
+      const halfTooltipWidth = tooltipWidth / 2;
+      let minLeft = 0;
+      let maxRight = window.innerWidth;
+      for (const boundary of collisionData.boundaries) {
+        const boundaryRect = boundary.getBoundingClientRect();
+        minLeft = Math.max(
+          minLeft,
+          boundaryRect.left + collisionData.padding.left
+        );
+        maxRight = Math.min(
+          maxRight,
+          boundaryRect.right - collisionData.padding.right
+        );
+      }
+      if (x - halfTooltipWidth < minLeft) {
+        x = minLeft + halfTooltipWidth;
+      } else if (x + halfTooltipWidth > maxRight) {
+        x = maxRight - halfTooltipWidth;
+      }
+      const viewportPadding = SEEK_COLLISION_PADDING;
+      if (x - halfTooltipWidth < viewportPadding) {
+        x = viewportPadding + halfTooltipWidth;
+      } else if (x + halfTooltipWidth > window.innerWidth - viewportPadding) {
+        x = window.innerWidth - viewportPadding - halfTooltipWidth;
+      }
+      tooltipXRef.current = x;
+      tooltipYRef.current = y;
+      if (tooltipRef.current) {
+        tooltipRef.current.style.setProperty(SEEK_TOOLTIP_X, `${x}px`);
+        tooltipRef.current.style.setProperty(SEEK_TOOLTIP_Y, `${y}px`);
+      }
+      if (!seekState.hasInitialPosition) {
+        setSeekState((prev) => ({ ...prev, hasInitialPosition: true }));
+      }
+    },
+    [onCollisionDataUpdate, seekState.hasInitialPosition]
+  );
+  const onHoverProgressUpdate = React3.useCallback(() => {
+    if (!seekRef.current || seekableEnd <= 0) return;
+    const hoverPercent = Math.min(
+      100,
+      hoverTimeRef.current / seekableEnd * 100
+    );
+    seekRef.current.style.setProperty(
+      SEEK_HOVER_PERCENT,
+      `${hoverPercent.toFixed(4)}%`
+    );
+  }, [seekableEnd]);
+  React3.useEffect(() => {
+    if (seekState.pendingSeekTime !== null) {
+      const diff = Math.abs(mediaCurrentTime - seekState.pendingSeekTime);
+      if (diff < 0.5) {
+        setSeekState((prev) => ({ ...prev, pendingSeekTime: null }));
+      }
+    }
+  }, [mediaCurrentTime, seekState.pendingSeekTime]);
+  React3.useEffect(() => {
+    if (!seekState.isHovering || tooltipDisabled) return;
+    function onScroll() {
+      setSeekState((prev) => ({
+        ...prev,
+        isHovering: false,
+        hasInitialPosition: false
+      }));
+      dispatch({
+        type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+        detail: void 0
+      });
+    }
+    document.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      document.removeEventListener("scroll", onScroll);
+    };
+  }, [dispatch, seekState.isHovering, tooltipDisabled]);
+  const bufferedProgress = React3.useMemo(() => {
+    if (mediaBuffered.length === 0 || seekableEnd <= 0) return 0;
+    if (mediaEnded) return 1;
+    const containingRange = mediaBuffered.find(
+      ([start, end]) => start <= mediaCurrentTime && mediaCurrentTime <= end
+    );
+    if (containingRange) {
+      return Math.min(1, containingRange[1] / seekableEnd);
+    }
+    return Math.min(1, seekableStart / seekableEnd);
+  }, [mediaBuffered, mediaCurrentTime, seekableEnd, mediaEnded, seekableStart]);
+  const onPointerEnter = React3.useCallback(() => {
+    if (seekRef.current) {
+      seekRectRef.current = seekRef.current.getBoundingClientRect();
+    }
+    collisionDataRef.current = null;
+    pointerEnterTimeRef.current = Date.now();
+    horizontalMovementRef.current = 0;
+    verticalMovementRef.current = 0;
+    if (seekableEnd > 0) {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      if (!tooltipDisabled) {
+        if (lastPointerXRef.current && seekRectRef.current) {
+          const clientX = Math.max(
+            seekRectRef.current.left,
+            Math.min(lastPointerXRef.current, seekRectRef.current.right)
+          );
+          onTooltipPositionUpdate(clientX);
+        }
+      }
+    }
+  }, [seekableEnd, onTooltipPositionUpdate, tooltipDisabled]);
+  const onPointerLeave = React3.useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    if (rafIdRef.current) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    if (previewDebounceRef.current) {
+      cancelAnimationFrame(previewDebounceRef.current);
+      previewDebounceRef.current = null;
+    }
+    setSeekState((prev) => ({
+      ...prev,
+      isHovering: false,
+      hasInitialPosition: false
+    }));
+    justCommittedRef.current = false;
+    seekRectRef.current = null;
+    collisionDataRef.current = null;
+    pointerEnterTimeRef.current = 0;
+    horizontalMovementRef.current = 0;
+    verticalMovementRef.current = 0;
+    lastPointerXRef.current = 0;
+    lastPointerYRef.current = 0;
+    lastSeekCommitTimeRef.current = 0;
+    if (!tooltipDisabled) {
+      dispatch({
+        type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+        detail: void 0
+      });
+    }
+  }, [dispatch, tooltipDisabled]);
+  const onPointerMove = React3.useCallback(
+    (event) => {
+      if (seekableEnd <= 0) return;
+      if (!seekRectRef.current && seekRef.current) {
+        seekRectRef.current = seekRef.current.getBoundingClientRect();
+      }
+      if (!seekRectRef.current) return;
+      const currentX = event.clientX;
+      const currentY = event.clientY;
+      if (lastPointerXRef.current !== 0 && lastPointerYRef.current !== 0) {
+        const deltaX = Math.abs(currentX - lastPointerXRef.current);
+        const deltaY = Math.abs(currentY - lastPointerYRef.current);
+        horizontalMovementRef.current += deltaX;
+        verticalMovementRef.current += deltaY;
+      }
+      lastPointerXRef.current = currentX;
+      lastPointerYRef.current = currentY;
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+      rafIdRef.current = requestAnimationFrame(() => {
+        const wasJustCommitted = justCommittedRef.current;
+        if (wasJustCommitted) {
+          justCommittedRef.current = false;
+        }
+        const seekRect = seekRectRef.current;
+        if (!seekRect) {
+          rafIdRef.current = null;
+          return;
+        }
+        const clientX = lastPointerXRef.current;
+        const offsetXOnSeekBar = Math.max(
+          0,
+          Math.min(clientX - seekRect.left, seekRect.width)
+        );
+        const relativeX = offsetXOnSeekBar / seekRect.width;
+        const calculatedHoverTime = relativeX * seekableEnd;
+        hoverTimeRef.current = calculatedHoverTime;
+        onHoverProgressUpdate();
+        const wasHovering = seekState.isHovering;
+        const isCurrentlyHovering = clientX >= seekRect.left && clientX <= seekRect.right;
+        const timeHovering = Date.now() - pointerEnterTimeRef.current;
+        const totalMovement = horizontalMovementRef.current + verticalMovementRef.current;
+        const horizontalRatio = totalMovement > 0 ? horizontalMovementRef.current / totalMovement : 0;
+        const timeSinceSeekCommit = Date.now() - lastSeekCommitTimeRef.current;
+        const isInSeekCooldown = timeSinceSeekCommit < 300;
+        const shouldShowTooltip = !wasJustCommitted && !isInSeekCooldown && (timeHovering > 150 || horizontalRatio > 0.6 || totalMovement < 10 && timeHovering > 50);
+        if (!wasHovering && isCurrentlyHovering && shouldShowTooltip && !tooltipDisabled) {
+          setSeekState((prev) => ({ ...prev, isHovering: true }));
+        }
+        if (!tooltipDisabled) {
+          onPreviewUpdate(calculatedHoverTime);
+          if (isCurrentlyHovering && (wasHovering || shouldShowTooltip)) {
+            onTooltipPositionUpdate(clientX);
+          }
+        }
+        rafIdRef.current = null;
+      });
+    },
+    [
+      onPreviewUpdate,
+      onTooltipPositionUpdate,
+      onHoverProgressUpdate,
+      seekableEnd,
+      seekState.isHovering,
+      tooltipDisabled
+    ]
+  );
+  const onSeek = React3.useCallback(
+    (value) => {
+      const time = value[0] ?? 0;
+      setSeekState((prev) => ({ ...prev, pendingSeekTime: time }));
+      if (!store.getState().dragging) {
+        store.setState("dragging", true);
+      }
+      if (seekThrottleRef.current) {
+        cancelAnimationFrame(seekThrottleRef.current);
+      }
+      seekThrottleRef.current = requestAnimationFrame(() => {
+        dispatch({
+          type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+          detail: time
+        });
+        seekThrottleRef.current = null;
+      });
+    },
+    [dispatch, store.getState, store.setState]
+  );
+  const onSeekCommit = React3.useCallback(
+    (value) => {
+      const time = value[0] ?? 0;
+      if (seekThrottleRef.current) {
+        cancelAnimationFrame(seekThrottleRef.current);
+        seekThrottleRef.current = null;
+      }
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      if (previewDebounceRef.current) {
+        cancelAnimationFrame(previewDebounceRef.current);
+        previewDebounceRef.current = null;
+      }
+      setSeekState((prev) => ({
+        ...prev,
+        pendingSeekTime: time,
+        isHovering: false,
+        hasInitialPosition: false
+      }));
+      justCommittedRef.current = true;
+      collisionDataRef.current = null;
+      lastSeekCommitTimeRef.current = Date.now();
+      pointerEnterTimeRef.current = Date.now();
+      horizontalMovementRef.current = 0;
+      verticalMovementRef.current = 0;
+      if (store.getState().dragging) {
+        store.setState("dragging", false);
+      }
+      dispatch({
+        type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+        detail: time
+      });
+      dispatch({
+        type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+        detail: void 0
+      });
+    },
+    [dispatch, store.getState, store.setState]
+  );
+  React3.useEffect(() => {
+    return () => {
+      if (seekThrottleRef.current) {
+        cancelAnimationFrame(seekThrottleRef.current);
+      }
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+      if (previewDebounceRef.current) {
+        cancelAnimationFrame(previewDebounceRef.current);
+      }
+    };
+  }, []);
+  const currentChapterCue = getCurrentChapterCue(hoverTimeRef.current);
+  const thumbnail = getThumbnail(hoverTimeRef.current);
+  const hoverTime = getCachedTime(hoverTimeRef.current, seekableEnd);
+  const chapterSeparators = React3.useMemo(() => {
+    if (withoutChapter || chapterCues.length <= 1 || seekableEnd <= 0) {
+      return null;
+    }
+    return chapterCues.slice(1).map((chapterCue, index) => {
+      const position = chapterCue.startTime / seekableEnd * 100;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "presentation",
+          "aria-hidden": "true",
+          "data-slot": "media-player-seek-chapter-separator",
+          className: "absolute top-0 h-full bg-zinc-50 dark:bg-zinc-950",
+          style: {
+            width: ".1563rem",
+            left: `${position}%`,
+            transform: "translateX(-50%)"
+          }
+        },
+        `chapter-${index}-${chapterCue.startTime}`
+      );
+    });
+  }, [chapterCues, seekableEnd, withoutChapter]);
+  const spriteStyle = React3.useMemo(() => {
+    if (!thumbnail?.coords || !thumbnail?.src) {
+      return {};
+    }
+    const coordX = thumbnail.coords[0];
+    const coordY = thumbnail.coords[1];
+    const spriteWidth = Number.parseFloat(thumbnail.coords[2] ?? "0");
+    const spriteHeight = Number.parseFloat(thumbnail.coords[3] ?? "0");
+    const scaleX = spriteWidth > 0 ? SPRITE_CONTAINER_WIDTH / spriteWidth : 1;
+    const scaleY = spriteHeight > 0 ? SPRITE_CONTAINER_HEIGHT / spriteHeight : 1;
+    const scale = Math.min(scaleX, scaleY);
+    return {
+      width: `${spriteWidth}px`,
+      height: `${spriteHeight}px`,
+      backgroundImage: `url(${thumbnail.src})`,
+      backgroundPosition: `-${coordX}px -${coordY}px`,
+      backgroundRepeat: "no-repeat",
+      transform: `scale(${scale})`,
+      transformOrigin: "top left"
+    };
+  }, [thumbnail?.coords, thumbnail?.src]);
+  const SeekSlider = /* @__PURE__ */ jsxs("div", { "data-slot": "media-player-seek-container", className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        "aria-controls": context.mediaId,
+        "aria-valuetext": `${currentTime} of ${duration}`,
+        "data-hovering": seekState.isHovering ? "" : void 0,
+        "data-slider": "",
+        "data-slot": "media-player-seek",
+        disabled: isDisabled,
+        ...seekProps,
+        ref: seekRef,
+        min: seekableStart,
+        max: seekableEnd,
+        step: 0.01,
+        className: cn(
+          "relative flex w-full touch-none select-none items-center data-disabled:pointer-events-none data-disabled:opacity-50",
+          className
+        ),
+        value: [displayValue],
+        onValueChange: onSeek,
+        onValueCommit: onSeekCommit,
+        onPointerEnter,
+        onPointerLeave,
+        onPointerMove,
+        children: [
+          /* @__PURE__ */ jsxs(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-full bg-primary/40", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "media-player-seek-buffered",
+                className: "absolute h-full bg-primary/70 will-change-[width]",
+                style: {
+                  width: `${bufferedProgress * 100}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary will-change-[width]" }),
+            seekState.isHovering && seekableEnd > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "media-player-seek-hover-range",
+                className: "absolute h-full bg-primary/70 will-change-[width,opacity]",
+                style: {
+                  width: `var(${SEEK_HOVER_PERCENT}, 0%)`,
+                  transition: "opacity 150ms ease-out"
+                }
+              }
+            ),
+            chapterSeparators
+          ] }),
+          /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "relative z-10 block size-2.5 shrink-0 rounded-full bg-primary shadow-sm ring-ring/50 transition-[color,box-shadow] will-change-transform hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50" })
+        ]
+      }
+    ),
+    !withoutTooltip && !context.withoutTooltip && seekState.isHovering && seekableEnd > 0 && /* @__PURE__ */ jsx(MediaPlayerPortal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: tooltipRef,
+        className: "backface-hidden contain-[layout_style] pointer-events-none z-50 [transition:opacity_150ms_ease-in-out]",
+        style: {
+          position: "fixed",
+          left: `var(${SEEK_TOOLTIP_X}, 0rem)`,
+          top: `var(${SEEK_TOOLTIP_Y}, 0rem)`,
+          transform: `translateX(-50%) translateY(calc(-100% - ${currentTooltipSideOffset}px))`,
+          visibility: seekState.hasInitialPosition ? "visible" : "hidden",
+          opacity: seekState.hasInitialPosition ? 1 : 0
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center gap-1.5 rounded-md border bg-background text-foreground shadow-sm dark:bg-zinc-900",
+              thumbnail && "min-h-10",
+              !thumbnail && currentChapterCue && "px-3 py-1.5"
+            ),
+            children: [
+              thumbnail?.src && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "media-player-seek-thumbnail",
+                  className: "overflow-hidden rounded-md rounded-b-none",
+                  style: {
+                    width: `${SPRITE_CONTAINER_WIDTH}px`,
+                    height: `${SPRITE_CONTAINER_HEIGHT}px`
+                  },
+                  children: thumbnail.coords ? /* @__PURE__ */ jsx("div", { style: spriteStyle }) : (
+                    // biome-ignore lint/performance/noImgElement: dynamic thumbnail URLs from media don't work well with Next.js Image optimization
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: thumbnail.src,
+                        alt: `Preview at ${hoverTime}`,
+                        className: "size-full object-cover"
+                      }
+                    )
+                  )
+                }
+              ),
+              currentChapterCue && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "media-player-seek-chapter-title",
+                  className: "line-clamp-2 max-w-48 text-balance text-center text-xs",
+                  children: currentChapterCue.text
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "media-player-seek-time",
+                  className: cn(
+                    "whitespace-nowrap text-center text-xs tabular-nums",
+                    thumbnail && "pb-1.5",
+                    !(thumbnail || currentChapterCue) && "px-2.5 py-1"
+                  ),
+                  children: tooltipTimeVariant === "progress" ? `${hoverTime} / ${duration}` : hoverTime
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+  if (withTime) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums", children: currentTime }),
+      SeekSlider,
+      /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums", children: remainingTime })
+    ] });
+  }
+  return SeekSlider;
+}
+function MediaPlayerVolume(props) {
+  const { expandable = false, className, disabled, ...volumeProps } = props;
+  const context = useMediaPlayerContext(VOLUME_NAME);
+  const store = useStoreContext(VOLUME_NAME);
+  const dispatch = useMediaDispatch();
+  const mediaVolume = useMediaSelector((state) => state.mediaVolume ?? 1);
+  const mediaMuted = useMediaSelector((state) => state.mediaMuted ?? false);
+  const mediaVolumeLevel = useMediaSelector(
+    (state) => state.mediaVolumeLevel ?? "high"
+  );
+  const sliderId = React3.useId();
+  const volumeTriggerId = React3.useId();
+  const isDisabled = disabled || context.disabled;
+  const onMute = React3.useCallback(() => {
+    dispatch({
+      type: mediaMuted ? MediaActionTypes.MEDIA_UNMUTE_REQUEST : MediaActionTypes.MEDIA_MUTE_REQUEST
+    });
+  }, [dispatch, mediaMuted]);
+  const onVolumeChange = React3.useCallback(
+    (value) => {
+      const volume = value[0] ?? 0;
+      if (!store.getState().dragging) {
+        store.setState("dragging", true);
+      }
+      dispatch({
+        type: MediaActionTypes.MEDIA_VOLUME_REQUEST,
+        detail: volume
+      });
+    },
+    [dispatch, store.getState, store.setState]
+  );
+  const onVolumeCommit = React3.useCallback(
+    (value) => {
+      const volume = value[0] ?? 0;
+      if (store.getState().dragging) {
+        store.setState("dragging", false);
+      }
+      dispatch({
+        type: MediaActionTypes.MEDIA_VOLUME_REQUEST,
+        detail: volume
+      });
+    },
+    [dispatch, store]
+  );
+  const effectiveVolume = mediaMuted ? 0 : mediaVolume;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-slot": "media-player-volume-container",
+      className: cn(
+        "group flex items-center",
+        expandable ? "gap-0 group-focus-within:gap-2 group-hover:gap-1.5" : "gap-1.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(MediaPlayerTooltip, { tooltip: "Volume", shortcut: "M", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            id: volumeTriggerId,
+            type: "button",
+            "aria-controls": `${context.mediaId} ${sliderId}`,
+            "aria-label": mediaMuted ? "Unmute" : "Mute",
+            "aria-pressed": mediaMuted,
+            "data-slot": "media-player-volume-trigger",
+            "data-state": mediaMuted ? "on" : "off",
+            variant: "ghost",
+            size: "icon",
+            className: "size-8",
+            disabled: isDisabled,
+            onClick: onMute,
+            children: mediaVolumeLevel === "off" || mediaMuted ? /* @__PURE__ */ jsx(VolumeXIcon, {}) : mediaVolumeLevel === "high" ? /* @__PURE__ */ jsx(Volume2Icon, {}) : /* @__PURE__ */ jsx(Volume1Icon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          SliderPrimitive.Root,
+          {
+            id: sliderId,
+            "aria-controls": context.mediaId,
+            "aria-valuetext": `${Math.round(effectiveVolume * 100)}% volume`,
+            "data-slider": "",
+            "data-slot": "media-player-volume",
+            ...volumeProps,
+            min: 0,
+            max: 1,
+            step: 0.1,
+            className: cn(
+              "relative flex touch-none select-none items-center",
+              expandable ? "w-0 opacity-0 transition-[width,opacity] duration-200 ease-in-out group-focus-within:w-16 group-focus-within:opacity-100 group-hover:w-16 group-hover:opacity-100" : "w-16",
+              className
+            ),
+            disabled: isDisabled,
+            value: [effectiveVolume],
+            onValueChange: onVolumeChange,
+            onValueCommit: onVolumeCommit,
+            children: [
+              /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-full bg-zinc-500", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary will-change-[width]" }) }),
+              /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block size-2.5 shrink-0 rounded-full bg-primary shadow-sm ring-ring/50 transition-[color,box-shadow] will-change-transform hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MediaPlayerTime(props) {
+  const { variant = "progress", asChild, className, ...timeProps } = props;
+  const context = useMediaPlayerContext("MediaPlayerTime");
+  const mediaCurrentTime = useMediaSelector(
+    (state) => state.mediaCurrentTime ?? 0
+  );
+  const [, seekableEnd = 0] = useMediaSelector(
+    (state) => state.mediaSeekable ?? [0, 0]
+  );
+  const times = React3.useMemo(() => {
+    if (variant === "remaining") {
+      return {
+        remaining: timeUtils.formatTime(
+          seekableEnd - mediaCurrentTime,
+          seekableEnd
+        )
+      };
+    }
+    if (variant === "duration") {
+      return {
+        duration: timeUtils.formatTime(seekableEnd, seekableEnd)
+      };
+    }
+    return {
+      current: timeUtils.formatTime(mediaCurrentTime, seekableEnd),
+      duration: timeUtils.formatTime(seekableEnd, seekableEnd)
+    };
+  }, [variant, mediaCurrentTime, seekableEnd]);
+  const TimePrimitive = asChild ? Slot : "div";
+  if (variant === "remaining" || variant === "duration") {
+    return /* @__PURE__ */ jsx(
+      TimePrimitive,
+      {
+        "data-slot": "media-player-time",
+        "data-variant": variant,
+        dir: context.dir,
+        ...timeProps,
+        className: cn("text-foreground/80 text-sm tabular-nums", className),
+        children: times[variant]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    TimePrimitive,
+    {
+      "data-slot": "media-player-time",
+      "data-variant": variant,
+      dir: context.dir,
+      ...timeProps,
+      className: cn(
+        "flex items-center gap-1 text-foreground/80 text-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: times.current }),
+        /* @__PURE__ */ jsx("span", { role: "separator", "aria-hidden": "true", "aria-valuenow": 0, tabIndex: -1, children: "/" }),
+        /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: times.duration })
+      ]
+    }
+  );
+}
+function MediaPlayerPlaybackSpeed(props) {
+  const {
+    open,
+    defaultOpen,
+    onOpenChange: onOpenChangeProp,
+    sideOffset = FLOATING_MENU_SIDE_OFFSET,
+    speeds = SPEEDS,
+    modal = false,
+    className,
+    disabled,
+    ...playbackSpeedProps
+  } = props;
+  const context = useMediaPlayerContext(PLAYBACK_SPEED_NAME);
+  const store = useStoreContext(PLAYBACK_SPEED_NAME);
+  const dispatch = useMediaDispatch();
+  const mediaPlaybackRate = useMediaSelector(
+    (state) => state.mediaPlaybackRate ?? 1
+  );
+  const isDisabled = disabled || context.disabled;
+  const onPlaybackRateChange = React3.useCallback(
+    (rate) => {
+      dispatch({
+        type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+        detail: rate
+      });
+    },
+    [dispatch]
+  );
+  const onOpenChange = React3.useCallback(
+    (open2) => {
+      store.setState("menuOpen", open2);
+      onOpenChangeProp?.(open2);
+    },
+    [store.setState, onOpenChangeProp]
+  );
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu,
+    {
+      modal,
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(MediaPlayerTooltip, { tooltip: "Playback speed", shortcut: ["<", ">"], children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            "aria-controls": context.mediaId,
+            disabled: isDisabled,
+            ...playbackSpeedProps,
+            variant: "ghost",
+            size: "icon",
+            className: cn("h-8 w-16 aria-expanded:bg-accent/50", className),
+            children: [
+              mediaPlaybackRate,
+              "x"
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(
+          DropdownMenuContent,
+          {
+            sideOffset,
+            align: "center",
+            className: "min-w-(--radix-dropdown-menu-trigger-width) data-[side=top]:mb-3.5",
+            children: speeds.map((speed) => /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                className: "justify-between",
+                onSelect: () => onPlaybackRateChange(speed),
+                children: [
+                  speed,
+                  "x",
+                  mediaPlaybackRate === speed && /* @__PURE__ */ jsx(CheckIcon, {})
+                ]
+              },
+              speed
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+function MediaPlayerLoop(props) {
+  const { children, className, disabled, ...loopProps } = props;
+  const context = useMediaPlayerContext("MediaPlayerLoop");
+  const isDisabled = disabled || context.disabled;
+  const [isLooping, setIsLooping] = React3.useState(() => {
+    const mediaElement = context.mediaRef.current;
+    return mediaElement?.loop ?? false;
+  });
+  React3.useEffect(() => {
+    const mediaElement = context.mediaRef.current;
+    if (!mediaElement) return;
+    setIsLooping(mediaElement.loop);
+    const checkLoop = () => setIsLooping(mediaElement.loop);
+    const observer = new MutationObserver(checkLoop);
+    observer.observe(mediaElement, {
+      attributes: true,
+      attributeFilter: ["loop"]
+    });
+    return () => observer.disconnect();
+  }, [context.mediaRef]);
+  const onLoopToggle = React3.useCallback(
+    (event) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      const mediaElement = context.mediaRef.current;
+      if (mediaElement) {
+        const newLoopState = !mediaElement.loop;
+        mediaElement.loop = newLoopState;
+        setIsLooping(newLoopState);
+      }
+    },
+    [context.mediaRef, props.onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    MediaPlayerTooltip,
+    {
+      tooltip: isLooping ? "Disable loop" : "Enable loop",
+      shortcut: "R",
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          "aria-controls": context.mediaId,
+          "aria-label": isLooping ? "Disable loop" : "Enable loop",
+          "aria-pressed": isLooping,
+          "data-disabled": isDisabled ? "" : void 0,
+          "data-slot": "media-player-loop",
+          "data-state": isLooping ? "on" : "off",
+          disabled: isDisabled,
+          ...loopProps,
+          variant: "ghost",
+          size: "icon",
+          className: cn("size-8", className),
+          onClick: onLoopToggle,
+          children: children ?? (isLooping ? /* @__PURE__ */ jsx(RepeatIcon, { className: "text-muted-foreground" }) : /* @__PURE__ */ jsx(RepeatIcon, {}))
+        }
+      )
+    }
+  );
+}
+function MediaPlayerFullscreen(props) {
+  const { children, className, disabled, ...fullscreenProps } = props;
+  const context = useMediaPlayerContext("MediaPlayerFullscreen");
+  const dispatch = useMediaDispatch();
+  const isFullscreen = useMediaSelector(
+    (state) => state.mediaIsFullscreen ?? false
+  );
+  const isDisabled = disabled || context.disabled;
+  const onFullscreen = React3.useCallback(
+    (event) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      dispatch({
+        type: isFullscreen ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST
+      });
+    },
+    [dispatch, props.onClick, isFullscreen]
+  );
+  return /* @__PURE__ */ jsx(MediaPlayerTooltip, { tooltip: "Fullscreen", shortcut: "F", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-slot": "media-player-fullscreen",
+      "data-state": isFullscreen ? "on" : "off",
+      disabled: isDisabled,
+      ...fullscreenProps,
+      variant: "ghost",
+      size: "icon",
+      className: cn("size-8", className),
+      onClick: onFullscreen,
+      children: children ?? (isFullscreen ? /* @__PURE__ */ jsx(Minimize2Icon, {}) : /* @__PURE__ */ jsx(Maximize2Icon, {}))
+    }
+  ) });
+}
+function MediaPlayerPiP(props) {
+  const { children, className, onPipError, disabled, ...pipButtonProps } = props;
+  const context = useMediaPlayerContext("MediaPlayerPiP");
+  const dispatch = useMediaDispatch();
+  const isPictureInPicture = useMediaSelector(
+    (state) => state.mediaIsPip ?? false
+  );
+  const isDisabled = disabled || context.disabled;
+  const onPictureInPicture = React3.useCallback(
+    (event) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      dispatch({
+        type: isPictureInPicture ? MediaActionTypes.MEDIA_EXIT_PIP_REQUEST : MediaActionTypes.MEDIA_ENTER_PIP_REQUEST
+      });
+      const mediaElement = context.mediaRef.current;
+      if (mediaElement instanceof HTMLVideoElement) {
+        if (isPictureInPicture) {
+          document.exitPictureInPicture().catch((error) => {
+            onPipError?.(error, "exit");
+          });
+        } else {
+          mediaElement.requestPictureInPicture().catch((error) => {
+            onPipError?.(error, "enter");
+          });
+        }
+      }
+    },
+    [dispatch, props.onClick, isPictureInPicture, onPipError, context.mediaRef]
+  );
+  return /* @__PURE__ */ jsx(MediaPlayerTooltip, { tooltip: "Picture in picture", shortcut: "P", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "aria-controls": context.mediaId,
+      "aria-label": isPictureInPicture ? "Exit pip" : "Enter pip",
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-slot": "media-player-pip",
+      "data-state": isPictureInPicture ? "on" : "off",
+      disabled: isDisabled,
+      ...pipButtonProps,
+      variant: "ghost",
+      size: "icon",
+      className: cn("size-8", className),
+      onClick: onPictureInPicture,
+      children: typeof children === "function" ? children(isPictureInPicture) : children ?? (isPictureInPicture ? /* @__PURE__ */ jsx(PictureInPicture2Icon, {}) : /* @__PURE__ */ jsx(PictureInPictureIcon, {}))
+    }
+  ) });
+}
+function MediaPlayerCaptions(props) {
+  const { children, className, disabled, ...captionsProps } = props;
+  const context = useMediaPlayerContext("MediaPlayerCaptions");
+  const dispatch = useMediaDispatch();
+  const isSubtitlesActive = useMediaSelector(
+    (state) => (state.mediaSubtitlesShowing ?? []).length > 0
+  );
+  const isDisabled = disabled || context.disabled;
+  const onCaptionsToggle = React3.useCallback(
+    (event) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      dispatch({
+        type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST
+      });
+    },
+    [dispatch, props.onClick]
+  );
+  return /* @__PURE__ */ jsx(MediaPlayerTooltip, { tooltip: "Captions", shortcut: "C", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "aria-controls": context.mediaId,
+      "aria-label": isSubtitlesActive ? "Disable captions" : "Enable captions",
+      "aria-pressed": isSubtitlesActive,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-slot": "media-player-captions",
+      "data-state": isSubtitlesActive ? "on" : "off",
+      disabled: isDisabled,
+      ...captionsProps,
+      variant: "ghost",
+      size: "icon",
+      className: cn("size-8", className),
+      onClick: onCaptionsToggle,
+      children: children ?? (isSubtitlesActive ? /* @__PURE__ */ jsx(SubtitlesIcon, {}) : /* @__PURE__ */ jsx(CaptionsOffIcon, {}))
+    }
+  ) });
+}
+function MediaPlayerDownload(props) {
+  const { children, className, disabled, ...downloadProps } = props;
+  const context = useMediaPlayerContext("MediaPlayerDownload");
+  const isDisabled = disabled || context.disabled;
+  const onDownload = React3.useCallback(
+    (event) => {
+      props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      const mediaElement = context.mediaRef.current;
+      if (!mediaElement || !mediaElement.currentSrc) return;
+      const link = document.createElement("a");
+      link.href = mediaElement.currentSrc;
+      link.download = "";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+    [context.mediaRef, props.onClick]
+  );
+  return /* @__PURE__ */ jsx(MediaPlayerTooltip, { tooltip: "Download", shortcut: "D", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "aria-controls": context.mediaId,
+      "aria-label": "Download",
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-slot": "media-player-download",
+      disabled: isDisabled,
+      ...downloadProps,
+      variant: "ghost",
+      size: "icon",
+      className: cn("size-8", className),
+      onClick: onDownload,
+      children: children ?? /* @__PURE__ */ jsx(DownloadIcon, {})
+    }
+  ) });
+}
+function MediaPlayerSettings(props) {
+  const {
+    open,
+    defaultOpen,
+    onOpenChange: onOpenChangeProp,
+    sideOffset = FLOATING_MENU_SIDE_OFFSET,
+    speeds = SPEEDS,
+    modal = false,
+    className,
+    disabled,
+    ...settingsProps
+  } = props;
+  const context = useMediaPlayerContext(SETTINGS_NAME);
+  const store = useStoreContext(SETTINGS_NAME);
+  const dispatch = useMediaDispatch();
+  const mediaPlaybackRate = useMediaSelector(
+    (state) => state.mediaPlaybackRate ?? 1
+  );
+  const mediaSubtitlesList = useMediaSelector(
+    (state) => state.mediaSubtitlesList ?? []
+  );
+  const mediaSubtitlesShowing = useMediaSelector(
+    (state) => state.mediaSubtitlesShowing ?? []
+  );
+  const mediaRenditionList = useMediaSelector(
+    (state) => state.mediaRenditionList ?? []
+  );
+  const selectedRenditionId = useMediaSelector(
+    (state) => state.mediaRenditionSelected
+  );
+  const isDisabled = disabled || context.disabled;
+  const isSubtitlesActive = mediaSubtitlesShowing.length > 0;
+  const onPlaybackRateChange = React3.useCallback(
+    (rate) => {
+      dispatch({
+        type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+        detail: rate
+      });
+    },
+    [dispatch]
+  );
+  const onRenditionChange = React3.useCallback(
+    (renditionId) => {
+      dispatch({
+        type: MediaActionTypes.MEDIA_RENDITION_REQUEST,
+        detail: renditionId === "auto" ? void 0 : renditionId
+      });
+    },
+    [dispatch]
+  );
+  const onSubtitlesToggle = React3.useCallback(() => {
+    dispatch({
+      type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST,
+      detail: false
+    });
+  }, [dispatch]);
+  const onShowSubtitleTrack = React3.useCallback(
+    (subtitleTrack) => {
+      dispatch({
+        type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST,
+        detail: false
+      });
+      dispatch({
+        type: MediaActionTypes.MEDIA_SHOW_SUBTITLES_REQUEST,
+        detail: subtitleTrack
+      });
+    },
+    [dispatch]
+  );
+  const selectedSubtitleLabel = React3.useMemo(() => {
+    if (!isSubtitlesActive) return "Off";
+    if (mediaSubtitlesShowing.length > 0) {
+      return mediaSubtitlesShowing[0]?.label ?? "On";
+    }
+    return "Off";
+  }, [isSubtitlesActive, mediaSubtitlesShowing]);
+  const selectedRenditionLabel = React3.useMemo(() => {
+    if (!selectedRenditionId) return "Auto";
+    const currentRendition = mediaRenditionList?.find(
+      (rendition) => rendition.id === selectedRenditionId
+    );
+    if (!currentRendition) return "Auto";
+    if (currentRendition.height) return `${currentRendition.height}p`;
+    if (currentRendition.width) return `${currentRendition.width}p`;
+    return currentRendition.id ?? "Auto";
+  }, [selectedRenditionId, mediaRenditionList]);
+  const onOpenChange = React3.useCallback(
+    (open2) => {
+      store.setState("menuOpen", open2);
+      onOpenChangeProp?.(open2);
+    },
+    [store.setState, onOpenChangeProp]
+  );
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu,
+    {
+      modal,
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(MediaPlayerTooltip, { tooltip: "Settings", children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            "aria-controls": context.mediaId,
+            "aria-label": "Settings",
+            "data-disabled": isDisabled ? "" : void 0,
+            "data-slot": "media-player-settings",
+            disabled: isDisabled,
+            ...settingsProps,
+            variant: "ghost",
+            size: "icon",
+            className: cn("size-8 aria-expanded:bg-accent/50", className),
+            children: /* @__PURE__ */ jsx(SettingsIcon, {})
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs(
+          DropdownMenuContent,
+          {
+            align: "end",
+            side: "top",
+            sideOffset,
+            className: "w-56 data-[side=top]:mb-3.5",
+            children: [
+              /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "sr-only", children: "Settings" }),
+              /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+                /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Speed" }),
+                  /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "rounded-sm", children: [
+                    mediaPlaybackRate,
+                    "x"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: speeds.map((speed) => /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    className: "justify-between",
+                    onSelect: () => onPlaybackRateChange(speed),
+                    children: [
+                      speed,
+                      "x",
+                      mediaPlaybackRate === speed && /* @__PURE__ */ jsx(CheckIcon, {})
+                    ]
+                  },
+                  speed
+                )) })
+              ] }),
+              context.isVideo && mediaRenditionList.length > 0 && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+                /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Quality" }),
+                  /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "rounded-sm", children: selectedRenditionLabel })
+                ] }),
+                /* @__PURE__ */ jsxs(DropdownMenuSubContent, { children: [
+                  /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      className: "justify-between",
+                      onSelect: () => onRenditionChange("auto"),
+                      children: [
+                        "Auto",
+                        !selectedRenditionId && /* @__PURE__ */ jsx(CheckIcon, {})
+                      ]
+                    }
+                  ),
+                  mediaRenditionList.slice().sort((a, b) => {
+                    const aHeight = a.height ?? 0;
+                    const bHeight = b.height ?? 0;
+                    return bHeight - aHeight;
+                  }).map((rendition) => {
+                    const label = rendition.height ? `${rendition.height}p` : rendition.width ? `${rendition.width}p` : rendition.id ?? "Unknown";
+                    const selected = rendition.id === selectedRenditionId;
+                    return /* @__PURE__ */ jsxs(
+                      DropdownMenuItem,
+                      {
+                        className: "justify-between",
+                        onSelect: () => onRenditionChange(rendition.id ?? ""),
+                        children: [
+                          label,
+                          selected && /* @__PURE__ */ jsx(CheckIcon, {})
+                        ]
+                      },
+                      rendition.id
+                    );
+                  })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+                /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: "Captions" }),
+                  /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "rounded-sm", children: selectedSubtitleLabel })
+                ] }),
+                /* @__PURE__ */ jsxs(DropdownMenuSubContent, { children: [
+                  /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      className: "justify-between",
+                      onSelect: onSubtitlesToggle,
+                      children: [
+                        "Off",
+                        !isSubtitlesActive && /* @__PURE__ */ jsx(CheckIcon, {})
+                      ]
+                    }
+                  ),
+                  mediaSubtitlesList.map((subtitleTrack) => {
+                    const isSelected = mediaSubtitlesShowing.some(
+                      (showingSubtitle) => showingSubtitle.label === subtitleTrack.label
+                    );
+                    return /* @__PURE__ */ jsxs(
+                      DropdownMenuItem,
+                      {
+                        className: "justify-between",
+                        onSelect: () => onShowSubtitleTrack(subtitleTrack),
+                        children: [
+                          subtitleTrack.label,
+                          isSelected && /* @__PURE__ */ jsx(CheckIcon, {})
+                        ]
+                      },
+                      `${subtitleTrack.kind}-${subtitleTrack.label}-${subtitleTrack.language}`
+                    );
+                  }),
+                  mediaSubtitlesList.length === 0 && /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: true, children: "No captions available" })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MediaPlayerPortal(props) {
+  const { container: containerProp, children } = props;
+  const context = useMediaPlayerContext("MediaPlayerPortal");
+  const container = containerProp ?? context.portalContainer;
+  if (!container) return null;
+  return ReactDOM.createPortal(children, container);
+}
+function MediaPlayerTooltip(props) {
+  const {
+    tooltip,
+    shortcut,
+    delayDuration,
+    sideOffset,
+    children,
+    ...tooltipProps
+  } = props;
+  const context = useMediaPlayerContext("MediaPlayerTooltip");
+  const tooltipDelayDuration = delayDuration ?? context.tooltipDelayDuration;
+  const tooltipSideOffset = sideOffset ?? context.tooltipSideOffset;
+  if (!tooltip && !shortcut || context.withoutTooltip) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs(Tooltip, { ...tooltipProps, delayDuration: tooltipDelayDuration, children: [
+    /* @__PURE__ */ jsx(
+      TooltipTrigger,
+      {
+        className: "text-foreground focus-visible:ring-ring/50",
+        asChild: true,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      TooltipContent,
+      {
+        sideOffset: tooltipSideOffset,
+        className: "flex items-center gap-2 border bg-accent px-2 py-1 font-medium text-foreground data-[side=top]:mb-3.5 dark:bg-zinc-900 [&>span]:hidden",
+        children: [
+          /* @__PURE__ */ jsx("p", { children: tooltip }),
+          Array.isArray(shortcut) ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: shortcut.map((shortcutKey) => /* @__PURE__ */ jsx(
+            "kbd",
+            {
+              className: "select-none rounded border bg-secondary px-1.5 py-0.5 font-mono text-[11.2px] text-foreground shadow-xs",
+              children: /* @__PURE__ */ jsx("abbr", { title: shortcutKey, className: "no-underline", children: shortcutKey })
+            },
+            shortcutKey
+          )) }) : shortcut && /* @__PURE__ */ jsx(
+            "kbd",
+            {
+              className: "select-none rounded border bg-secondary px-1.5 py-px font-mono text-[11.2px] text-foreground shadow-xs",
+              children: /* @__PURE__ */ jsx("abbr", { title: shortcut, className: "no-underline", children: shortcut })
+            },
+            shortcut
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export { MediaPlayer, MediaPlayerAudio, MediaPlayerCaptions, MediaPlayerControls, MediaPlayerControlsOverlay, MediaPlayerDownload, MediaPlayerError, MediaPlayerFullscreen, MediaPlayerLoading, MediaPlayerLoop, MediaPlayerPiP, MediaPlayerPlay, MediaPlayerPlaybackSpeed, MediaPlayerPortal, MediaPlayerSeek, MediaPlayerSeekBackward, MediaPlayerSeekForward, MediaPlayerSettings, MediaPlayerTime, MediaPlayerTooltip, MediaPlayerVideo, MediaPlayerVolume, MediaPlayerVolumeIndicator, useStore as useMediaPlayerStore };
+//# sourceMappingURL=media-player.js.map
+//# sourceMappingURL=media-player.js.map