@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/media-player.js

@@ -0,0 +1,1394 @@
+"use client";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "./chunk-KDPYSOYZ.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from "./chunk-3T65TLJX.js";
+import "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/media-player.tsx
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import {
+  Captions,
+  CaptionsOff,
+  Maximize,
+  Minimize,
+  Pause,
+  PictureInPicture2,
+  Play,
+  RefreshCcw,
+  Repeat2,
+  RotateCcw,
+  RotateCw,
+  Settings,
+  TriangleAlert,
+  Volume1,
+  Volume2,
+  VolumeX
+} from "lucide-react";
+import {
+  MediaActionTypes,
+  MediaProvider,
+  useMediaDispatch,
+  useMediaFullscreenRef,
+  useMediaRef,
+  useMediaSelector,
+  useMediaStore
+} from "media-chrome/react/media-store";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+var CONTROLS_HIDE_DELAY = 2500;
+var SEEK_PREVIEW_WIDTH = 160;
+var MediaPlayerContext = React.createContext({
+  onMenuOpenChange: () => {
+  },
+  portalContainer: null,
+  rootNode: null
+});
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  if (ref) {
+    ref.current = value;
+  }
+}
+function formatTime(value) {
+  if (!Number.isFinite(value)) {
+    return "0:00";
+  }
+  const safeValue = Math.max(0, Math.floor(value ?? 0));
+  const hours = Math.floor(safeValue / 3600);
+  const minutes = Math.floor(safeValue % 3600 / 60);
+  const seconds = safeValue % 60;
+  if (hours > 0) {
+    return `${hours}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+  }
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+function formatRate(value) {
+  if (!value || value === 1) {
+    return "1x";
+  }
+  return `${Number.parseFloat(value.toFixed(2))}x`;
+}
+function subtitleTrackId(track) {
+  return `${track.kind}:${track.language}:${track.label}`;
+}
+function subtitleTrackLabel(track) {
+  return track.label || track.language || "Captions";
+}
+function hasAudioChild(children) {
+  return React.Children.toArray(children).some((child) => {
+    if (!React.isValidElement(child)) {
+      return false;
+    }
+    if (child.type === MediaPlayerAudio) {
+      return true;
+    }
+    const props = child.props;
+    return hasAudioChild(props.children);
+  });
+}
+function getSeekBounds(seekable, duration) {
+  const min = seekable?.[0] ?? 0;
+  const fallbackMax = Number.isFinite(duration) ? duration ?? 0 : 0;
+  const max = seekable?.[1] ?? fallbackMax;
+  return {
+    min,
+    max: Number.isFinite(max) ? Math.max(min, max) : min
+  };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function getSeekValueFromPointer(event, min, max) {
+  const rect = event.currentTarget.getBoundingClientRect();
+  const percent = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+  return {
+    percent: percent * 100,
+    value: min + percent * (max - min)
+  };
+}
+function MediaPlayer({ mediaStore, ...props }) {
+  const audio = props.audio ?? (hasAudioChild(props.children) ? true : void 0);
+  return /* @__PURE__ */ jsx(MediaProvider, { mediaStore, children: /* @__PURE__ */ jsx(MediaPlayerRoot, { ...props, audio }) });
+}
+function MediaPlayerRoot({
+  audio,
+  children,
+  className,
+  onBlurCapture,
+  onFocusCapture,
+  onKeyDown,
+  onPointerDown,
+  onPointerLeave,
+  onPointerMove,
+  ref,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const store = useMediaStore();
+  const fullscreenRef = useMediaFullscreenRef();
+  const paused = useMediaSelector((state) => state.mediaPaused !== false);
+  const muted = useMediaSelector((state) => state.mediaMuted === true);
+  const isFullscreen = useMediaSelector(
+    (state) => state.mediaIsFullscreen === true
+  );
+  const [rootNode, setRootNode] = React.useState(null);
+  const [controlsVisible, setControlsVisible] = React.useState(true);
+  const [menuOpenCount, setMenuOpenCount] = React.useState(0);
+  const [hoveringControls, setHoveringControls] = React.useState(false);
+  const [focusPinned, setFocusPinned] = React.useState(false);
+  const hideTimerRef = React.useRef(void 0);
+  const lastActivityRef = React.useRef(0);
+  const alwaysVisible = Boolean(audio) || paused || menuOpenCount > 0 || hoveringControls || focusPinned;
+  const alwaysVisibleRef = React.useRef(alwaysVisible);
+  alwaysVisibleRef.current = alwaysVisible;
+  const scheduleHide = React.useCallback(function schedule(delay = CONTROLS_HIDE_DELAY) {
+    window.clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = window.setTimeout(() => {
+      if (alwaysVisibleRef.current) {
+        return;
+      }
+      const idleFor = Date.now() - lastActivityRef.current;
+      if (idleFor < CONTROLS_HIDE_DELAY) {
+        schedule(CONTROLS_HIDE_DELAY - idleFor);
+        return;
+      }
+      setControlsVisible(false);
+    }, delay);
+  }, []);
+  const wake = React.useCallback(() => {
+    lastActivityRef.current = Date.now();
+    setControlsVisible(true);
+    scheduleHide();
+  }, [scheduleHide]);
+  React.useEffect(() => {
+    if (alwaysVisible) {
+      window.clearTimeout(hideTimerRef.current);
+      setControlsVisible(true);
+      return;
+    }
+    scheduleHide();
+  }, [alwaysVisible, scheduleHide]);
+  React.useEffect(() => {
+    return () => window.clearTimeout(hideTimerRef.current);
+  }, []);
+  React.useEffect(() => {
+    if (!rootNode) {
+      return;
+    }
+    const loadChapters = () => {
+      const media = rootNode.querySelector("video, audio");
+      for (const track of media?.textTracks ?? []) {
+        if (track.kind === "chapters" && track.mode === "disabled") {
+          track.mode = "hidden";
+        }
+      }
+    };
+    loadChapters();
+    const textTracks = rootNode.querySelector("video, audio")?.textTracks;
+    textTracks?.addEventListener("addtrack", loadChapters);
+    return () => textTracks?.removeEventListener("addtrack", loadChapters);
+  }, [rootNode]);
+  const onMenuOpenChange = React.useCallback((open) => {
+    setMenuOpenCount((count) => open ? count + 1 : Math.max(0, count - 1));
+  }, []);
+  const contextValue = React.useMemo(
+    () => ({
+      onMenuOpenChange,
+      portalContainer: isFullscreen ? rootNode : null,
+      rootNode
+    }),
+    [isFullscreen, onMenuOpenChange, rootNode]
+  );
+  const fullscreenRefRef = React.useRef(fullscreenRef);
+  fullscreenRefRef.current = fullscreenRef;
+  const rootRef = React.useCallback(
+    (node) => {
+      fullscreenRefRef.current(node);
+      setRootNode(node);
+      setRef(ref, node);
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsx(MediaPlayerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      "aria-label": audio ? "Audio player" : "Video player",
+      "data-audio": audio ? "" : void 0,
+      "data-controls": controlsVisible ? "visible" : "hidden",
+      "data-fullscreen": isFullscreen ? "" : void 0,
+      "data-slot": "media-player",
+      role: "region",
+      tabIndex: 0,
+      className: cn(
+        "group/media-player relative isolate block w-full overflow-hidden rounded-2xl bg-fg-primary text-fg-on-brand shadow-2 outline-none",
+        "data-[controls=hidden]:cursor-none",
+        "data-[audio]:bg-[image:var(--gradient-accent-forest-to-brass)]",
+        "data-[fullscreen]:rounded-none data-[fullscreen]:shadow-none",
+        className
+      ),
+      ...props,
+      onBlurCapture: (event) => {
+        onBlurCapture?.(event);
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setFocusPinned(false);
+        }
+      },
+      onFocusCapture: (event) => {
+        onFocusCapture?.(event);
+        const keyboardFocus = event.target.matches?.(":focus-visible") ?? false;
+        setFocusPinned(keyboardFocus);
+        if (keyboardFocus) {
+          setControlsVisible(true);
+        }
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) {
+          return;
+        }
+        const target = event.target;
+        if (target.closest(
+          "input, textarea, select, [contenteditable], [role='slider'], [role='menu'], [role='menuitem'], [role='menuitemradio']"
+        )) {
+          return;
+        }
+        const state = store.getState();
+        const currentTime = state.mediaCurrentTime ?? 0;
+        const { min, max } = getSeekBounds(
+          state.mediaSeekable,
+          state.mediaDuration
+        );
+        switch (event.key) {
+          case " ":
+            if (target.closest("button")) {
+              return;
+            }
+            event.preventDefault();
+            dispatch({
+              type: paused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST
+            });
+            break;
+          case "k":
+          case "K":
+            dispatch({
+              type: paused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST
+            });
+            break;
+          case "m":
+          case "M":
+            dispatch({
+              type: muted ? MediaActionTypes.MEDIA_UNMUTE_REQUEST : MediaActionTypes.MEDIA_MUTE_REQUEST
+            });
+            break;
+          case "f":
+          case "F":
+            if (audio) {
+              return;
+            }
+            dispatch({
+              type: isFullscreen ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST
+            });
+            break;
+          case "c":
+          case "C":
+            dispatch({
+              type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST
+            });
+            break;
+          case "ArrowLeft":
+            event.preventDefault();
+            dispatch({
+              type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+              detail: clamp(currentTime - 5, min, max)
+            });
+            break;
+          case "ArrowRight":
+            event.preventDefault();
+            dispatch({
+              type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+              detail: clamp(currentTime + 5, min, max)
+            });
+            break;
+          default:
+            return;
+        }
+        wake();
+      },
+      onPointerDown: (event) => {
+        onPointerDown?.(event);
+        wake();
+      },
+      onPointerLeave: (event) => {
+        onPointerLeave?.(event);
+        setHoveringControls(false);
+        if (!alwaysVisibleRef.current) {
+          window.clearTimeout(hideTimerRef.current);
+          setControlsVisible(false);
+        }
+      },
+      onPointerMove: (event) => {
+        onPointerMove?.(event);
+        wake();
+        const controls = event.currentTarget.querySelector(
+          "[data-slot='media-player-controls']"
+        );
+        const rect = controls?.getBoundingClientRect();
+        setHoveringControls(
+          !!rect && event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom
+        );
+      },
+      children
+    }
+  ) });
+}
+function MediaPlayerVideo({ className, ref, ...props }) {
+  const mediaRef = useMediaRef();
+  const mediaRefRef = React.useRef(mediaRef);
+  mediaRefRef.current = mediaRef;
+  const videoRef = React.useCallback(
+    (node) => {
+      mediaRefRef.current(node);
+      setRef(ref, node);
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsx(
+    "video",
+    {
+      ref: videoRef,
+      "data-slot": "media-player-video",
+      className: cn(
+        "block aspect-video size-full object-cover",
+        "group-data-[fullscreen]/media-player:aspect-auto group-data-[fullscreen]/media-player:object-contain",
+        className
+      ),
+      playsInline: true,
+      ...props
+    }
+  );
+}
+function MediaPlayerAudio({ className, ref, ...props }) {
+  const mediaRef = useMediaRef();
+  const mediaRefRef = React.useRef(mediaRef);
+  mediaRefRef.current = mediaRef;
+  const audioRef = React.useCallback(
+    (node) => {
+      mediaRefRef.current(node);
+      setRef(ref, node);
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsx(
+    "audio",
+    {
+      ref: audioRef,
+      "data-slot": "media-player-audio",
+      className: cn("sr-only", className),
+      ...props
+    }
+  );
+}
+function MediaPlayerControls({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "media-player-controls",
+      className: cn(
+        "absolute inset-x-0 bottom-0 z-10 flex w-full items-center gap-2 p-3 text-fg-on-brand md:p-4",
+        "transition-opacity duration-300 ease-out group-data-[controls=hidden]/media-player:pointer-events-none group-data-[controls=hidden]/media-player:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MediaPlayerControlsOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-slot": "media-player-controls-overlay",
+      className: cn(
+        "pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-36 bg-[image:var(--gradient-overlay-photo-bottom)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MediaControlButton({
+  className,
+  shortcut,
+  tooltip,
+  ...props
+}) {
+  const { portalContainer } = React.useContext(MediaPlayerContext);
+  const button = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-surface-glass-overlay-button text-fg-on-brand shadow-1 backdrop-blur-sm transition-[background-color,color,box-shadow,transform] outline-none select-none hover:bg-surface-brand hover:text-fg-on-brand focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-95 aria-pressed:bg-surface-brand disabled:pointer-events-none disabled:opacity-45 [&_svg]:size-4.5",
+        className
+      ),
+      ...props
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { delay: 300, render: button }),
+    /* @__PURE__ */ jsxs(
+      TooltipContent,
+      {
+        className: "border-line-subtle px-2.5 py-1.5 text-gdt-xs font-bold",
+        container: portalContainer ?? void 0,
+        side: "top",
+        sideOffset: 8,
+        children: [
+          tooltip,
+          shortcut ? /* @__PURE__ */ jsx(
+            "kbd",
+            {
+              "data-slot": "kbd",
+              className: "rounded-sm border border-line bg-surface px-1.5 py-0.5 font-sans text-gdt-xs font-bold text-fg-primary",
+              children: shortcut
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function MediaPlayerPlay({
+  className,
+  onClick,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const paused = useMediaSelector((state) => state.mediaPaused !== false);
+  return /* @__PURE__ */ jsx(
+    MediaControlButton,
+    {
+      "aria-label": paused ? "Play media" : "Pause media",
+      "aria-pressed": !paused,
+      "data-slot": "media-player-play",
+      className,
+      shortcut: "Space",
+      tooltip: paused ? "Play" : "Pause",
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        dispatch({
+          type: paused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST
+        });
+      },
+      ...props,
+      children: paused ? /* @__PURE__ */ jsx(Play, { fill: "currentColor" }) : /* @__PURE__ */ jsx(Pause, { fill: "currentColor" })
+    }
+  );
+}
+function MediaPlayerSeekBackward({
+  className,
+  onClick,
+  seekOffset = 10,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const currentTime = useMediaSelector((state) => state.mediaCurrentTime ?? 0);
+  return /* @__PURE__ */ jsx(
+    MediaControlButton,
+    {
+      "aria-label": `Seek back ${seekOffset} seconds`,
+      "data-slot": "media-player-seek-backward",
+      className,
+      tooltip: `Back ${seekOffset}s`,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        dispatch({
+          type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+          detail: Math.max(0, currentTime - seekOffset)
+        });
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(RotateCcw, {})
+    }
+  );
+}
+function MediaPlayerSeekForward({
+  className,
+  onClick,
+  seekOffset = 10,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const currentTime = useMediaSelector((state) => state.mediaCurrentTime ?? 0);
+  const duration = useMediaSelector((state) => state.mediaDuration);
+  const seekable = useMediaSelector((state) => state.mediaSeekable);
+  const { max } = getSeekBounds(seekable, duration);
+  return /* @__PURE__ */ jsx(
+    MediaControlButton,
+    {
+      "aria-label": `Seek forward ${seekOffset} seconds`,
+      "data-slot": "media-player-seek-forward",
+      className,
+      tooltip: `Forward ${seekOffset}s`,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        dispatch({
+          type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+          detail: max > 0 ? Math.min(max, currentTime + seekOffset) : currentTime + seekOffset
+        });
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(RotateCw, {})
+    }
+  );
+}
+function MediaPlayerVolume({
+  className,
+  disabled,
+  expandable = false,
+  onClick,
+  rangeClassName,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const muted = useMediaSelector((state) => state.mediaMuted === true);
+  const volume = useMediaSelector((state) => state.mediaVolume ?? 1);
+  const unavailable = useMediaSelector(
+    (state) => !!state.mediaVolumeUnavailable
+  );
+  const resolvedDisabled = disabled || unavailable;
+  const Icon = muted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "media-player-volume",
+      className: cn(
+        "group/volume flex items-center gap-2 rounded-full",
+        expandable && "w-9 overflow-visible transition-[width] hover:w-32 focus-within:w-32"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          MediaControlButton,
+          {
+            "aria-label": muted ? "Unmute media" : "Mute media",
+            "aria-pressed": muted,
+            className,
+            disabled: resolvedDisabled,
+            shortcut: "M",
+            tooltip: "Volume",
+            onClick: (event) => {
+              onClick?.(event);
+              if (event.defaultPrevented) {
+                return;
+              }
+              dispatch({
+                type: muted ? MediaActionTypes.MEDIA_UNMUTE_REQUEST : MediaActionTypes.MEDIA_MUTE_REQUEST
+              });
+            },
+            ...props,
+            children: /* @__PURE__ */ jsx(Icon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Root,
+          {
+            "data-slot": "media-player-volume-slider",
+            className: cn(
+              "flex h-8 w-20 min-w-20 touch-none items-center",
+              resolvedDisabled && "pointer-events-none opacity-45",
+              expandable && "pointer-events-none opacity-0 transition-opacity group-hover/volume:pointer-events-auto group-hover/volume:opacity-100 group-focus-within/volume:pointer-events-auto group-focus-within/volume:opacity-100",
+              rangeClassName
+            ),
+            disabled: resolvedDisabled,
+            max: 1,
+            min: 0,
+            onValueChange: (value) => {
+              const nextValue = Array.isArray(value) ? value[0] ?? 0 : value;
+              dispatch({
+                type: MediaActionTypes.MEDIA_VOLUME_REQUEST,
+                detail: nextValue
+              });
+              if (muted && nextValue > 0) {
+                dispatch({ type: MediaActionTypes.MEDIA_UNMUTE_REQUEST });
+              }
+            },
+            step: 0.02,
+            value: muted ? 0 : volume,
+            children: /* @__PURE__ */ jsx(SliderPrimitive.Control, { className: "flex h-8 w-full items-center", children: /* @__PURE__ */ jsxs(SliderPrimitive.Track, { className: "h-1.5 w-full rounded-full bg-fg-on-brand/30", children: [
+              /* @__PURE__ */ jsx(SliderPrimitive.Indicator, { className: "rounded-full bg-fg-on-brand" }),
+              /* @__PURE__ */ jsx(
+                SliderPrimitive.Thumb,
+                {
+                  getAriaLabel: () => "Media volume",
+                  className: "size-3 rounded-full bg-fg-on-brand shadow-1 outline-none focus-visible:[filter:drop-shadow(0_0_0.25rem_var(--color-line-focus))]"
+                }
+              )
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function MediaPlayerPlaybackSpeed({
+  className,
+  rates = DEFAULT_PLAYBACK_RATES,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const { onMenuOpenChange, portalContainer } = React.useContext(MediaPlayerContext);
+  const playbackRate = useMediaSelector(
+    (state) => state.mediaPlaybackRate ?? 1
+  );
+  const rateLabel = formatRate(playbackRate);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { size: "sm", onOpenChange: onMenuOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          MediaControlButton,
+          {
+            "aria-label": `Playback speed ${rateLabel}`,
+            "data-slot": "media-player-playback-speed",
+            className: cn(
+              "w-auto px-3 text-gdt-xs font-bold tabular-nums",
+              className
+            ),
+            tooltip: "Playback speed",
+            ...props,
+            children: rateLabel
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        align: "end",
+        className: "min-w-24",
+        container: portalContainer ?? void 0,
+        side: "top",
+        sideOffset: 8,
+        children: /* @__PURE__ */ jsx(
+          DropdownMenuRadioGroup,
+          {
+            value: String(playbackRate),
+            onValueChange: (value) => {
+              dispatch({
+                type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+                detail: Number(value)
+              });
+            },
+            children: rates.map((rate) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { closeOnClick: true, value: String(rate), children: formatRate(rate) }, rate))
+          }
+        )
+      }
+    )
+  ] });
+}
+function MediaPlayerCaptions({
+  className,
+  disabled,
+  onClick,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const subtitlesList = useMediaSelector((state) => state.mediaSubtitlesList);
+  const subtitlesShowing = useMediaSelector(
+    (state) => state.mediaSubtitlesShowing
+  );
+  const hasSubtitles = (subtitlesList?.length ?? 0) > 0;
+  const showing = (subtitlesShowing?.length ?? 0) > 0;
+  const Icon = showing ? Captions : CaptionsOff;
+  return /* @__PURE__ */ jsx(
+    MediaControlButton,
+    {
+      "aria-label": showing ? "Disable captions" : "Enable captions",
+      "aria-pressed": showing,
+      "data-slot": "media-player-captions",
+      className,
+      disabled: disabled || !hasSubtitles,
+      shortcut: "C",
+      tooltip: "Captions",
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        dispatch({ type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST });
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, {})
+    }
+  );
+}
+function MediaPlayerSettings({
+  className,
+  rates = DEFAULT_PLAYBACK_RATES,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const { onMenuOpenChange, portalContainer } = React.useContext(MediaPlayerContext);
+  const playbackRate = useMediaSelector(
+    (state) => state.mediaPlaybackRate ?? 1
+  );
+  const subtitlesList = useMediaSelector((state) => state.mediaSubtitlesList);
+  const subtitlesShowing = useMediaSelector(
+    (state) => state.mediaSubtitlesShowing
+  );
+  const subtitles = subtitlesList ?? [];
+  const showingTrack = subtitlesShowing?.[0];
+  const captionsValue = showingTrack ? subtitleTrackId(showingTrack) : "off";
+  const captionsLabel = showingTrack ? subtitleTrackLabel(showingTrack) : "Off";
+  return /* @__PURE__ */ jsxs(DropdownMenu, { size: "sm", onOpenChange: onMenuOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          MediaControlButton,
+          {
+            "aria-label": "Player settings",
+            "data-slot": "media-player-settings",
+            className,
+            tooltip: "Settings",
+            ...props,
+            children: /* @__PURE__ */ jsx(Settings, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align: "end",
+        className: "min-w-48",
+        container: portalContainer ?? void 0,
+        side: "top",
+        sideOffset: 8,
+        children: [
+          /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+            /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+              "Speed",
+              /* @__PURE__ */ jsx("span", { className: "ml-auto rounded-md bg-surface px-1.5 py-0.5 text-gdt-xs font-bold tabular-nums", children: formatRate(playbackRate) })
+            ] }),
+            /* @__PURE__ */ jsx(DropdownMenuSubContent, { container: portalContainer ?? void 0, children: /* @__PURE__ */ jsx(
+              DropdownMenuRadioGroup,
+              {
+                value: String(playbackRate),
+                onValueChange: (value) => {
+                  dispatch({
+                    type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST,
+                    detail: Number(value)
+                  });
+                },
+                children: rates.map((rate) => /* @__PURE__ */ jsx(
+                  DropdownMenuRadioItem,
+                  {
+                    closeOnClick: true,
+                    value: String(rate),
+                    children: formatRate(rate)
+                  },
+                  rate
+                ))
+              }
+            ) })
+          ] }),
+          subtitles.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+            /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+              "Captions",
+              /* @__PURE__ */ jsx("span", { className: "ml-auto rounded-md bg-surface px-1.5 py-0.5 text-gdt-xs font-bold", children: captionsLabel })
+            ] }),
+            /* @__PURE__ */ jsx(DropdownMenuSubContent, { container: portalContainer ?? void 0, children: /* @__PURE__ */ jsxs(
+              DropdownMenuRadioGroup,
+              {
+                value: captionsValue,
+                onValueChange: (value) => {
+                  if (subtitlesShowing?.length) {
+                    dispatch({
+                      type: MediaActionTypes.MEDIA_DISABLE_SUBTITLES_REQUEST,
+                      detail: subtitlesShowing
+                    });
+                  }
+                  const track = subtitles.find(
+                    (candidate) => subtitleTrackId(candidate) === value
+                  );
+                  if (track) {
+                    dispatch({
+                      type: MediaActionTypes.MEDIA_SHOW_SUBTITLES_REQUEST,
+                      detail: [track]
+                    });
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(DropdownMenuRadioItem, { closeOnClick: true, value: "off", children: "Off" }),
+                  subtitles.map((track) => /* @__PURE__ */ jsx(
+                    DropdownMenuRadioItem,
+                    {
+                      closeOnClick: true,
+                      value: subtitleTrackId(track),
+                      children: subtitleTrackLabel(track)
+                    },
+                    subtitleTrackId(track)
+                  ))
+                ]
+              }
+            ) })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+function MediaPlayerTime({
+  className,
+  showDuration = true,
+  ...props
+}) {
+  const currentTime = useMediaSelector((state) => state.mediaCurrentTime ?? 0);
+  const duration = useMediaSelector((state) => state.mediaDuration);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "media-player-time",
+      className: cn(
+        "inline-flex shrink-0 items-center px-1 text-gdt-sm font-medium tabular-nums text-fg-on-brand/80",
+        className
+      ),
+      ...props,
+      children: showDuration ? `${formatTime(currentTime)} / ${formatTime(duration)}` : formatTime(currentTime)
+    }
+  );
+}
+function MediaPlayerSeek({
+  className,
+  disabled,
+  onValueChange,
+  "aria-label": ariaLabel,
+  step = 5,
+  withTime = true,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const { portalContainer } = React.useContext(MediaPlayerContext);
+  const controlRef = React.useRef(null);
+  const [dragValue, setDragValue] = React.useState(null);
+  const [hoverValue, setHoverValue] = React.useState(null);
+  const [pendingSeek, setPendingSeek] = React.useState(null);
+  const currentTime = useMediaSelector((state) => state.mediaCurrentTime ?? 0);
+  const duration = useMediaSelector((state) => state.mediaDuration);
+  const seekable = useMediaSelector((state) => state.mediaSeekable);
+  const buffered = useMediaSelector((state) => state.mediaBuffered);
+  const previewImage = useMediaSelector((state) => state.mediaPreviewImage);
+  const previewCoords = useMediaSelector((state) => state.mediaPreviewCoords);
+  const chapterCues = useMediaSelector((state) => state.mediaChaptersCues);
+  const { min, max } = getSeekBounds(seekable, duration);
+  const canSeek = max > min;
+  const resolvedDisabled = disabled || !canSeek;
+  const seekRafRef = React.useRef(null);
+  const latestSeekValueRef = React.useRef(0);
+  const displayTime = clamp(dragValue ?? pendingSeek ?? currentTime, min, max);
+  const sliderStep = canSeek ? clamp((max - min) / 500, 0.05, 1) : 1;
+  React.useEffect(() => {
+    if (pendingSeek !== null && Math.abs(currentTime - pendingSeek) < 0.5) {
+      setPendingSeek(null);
+    }
+  }, [currentTime, pendingSeek]);
+  React.useEffect(() => {
+    return () => {
+      if (seekRafRef.current !== null) {
+        cancelAnimationFrame(seekRafRef.current);
+      }
+    };
+  }, []);
+  const queueSeek = (value) => {
+    latestSeekValueRef.current = value;
+    if (seekRafRef.current !== null) {
+      return;
+    }
+    seekRafRef.current = requestAnimationFrame(() => {
+      seekRafRef.current = null;
+      dispatch({
+        type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+        detail: latestSeekValueRef.current
+      });
+    });
+  };
+  const previewAt = (value) => {
+    dispatch({
+      type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+      detail: clamp(value, min, max)
+    });
+  };
+  const clearPreview = () => {
+    setHoverValue(null);
+    dispatch({
+      type: MediaActionTypes.MEDIA_PREVIEW_REQUEST,
+      detail: void 0
+    });
+  };
+  const previewValue = dragValue ?? hoverValue;
+  const previewPercent = previewValue !== null && canSeek ? (clamp(previewValue, min, max) - min) / (max - min) * 100 : 0;
+  const previewChapter = previewValue !== null ? chapterCues?.find(
+    (cue) => previewValue >= cue.startTime && previewValue < cue.endTime
+  ) : void 0;
+  const previewCoordValues = previewCoords?.map(Number);
+  const hasSpriteCoords = previewCoordValues?.length === 4 && (previewCoordValues[2] ?? 0) > 0;
+  const previewScale = hasSpriteCoords ? SEEK_PREVIEW_WIDTH / (previewCoordValues?.[2] ?? 1) : 1;
+  const previewClampPx = previewImage ? SEEK_PREVIEW_WIDTH / 2 + 4 : 32;
+  const controlRect = withTime && previewValue !== null ? controlRef.current?.getBoundingClientRect() : void 0;
+  const previewLeft = controlRect ? clamp(
+    controlRect.left + previewPercent / 100 * controlRect.width,
+    controlRect.left + previewClampPx,
+    controlRect.right - previewClampPx
+  ) : 0;
+  const segmentBounds = canSeek ? [
+    min,
+    ...(chapterCues ?? []).map((cue) => cue.startTime).filter((time) => time > min && time < max).sort((a, b) => a - b),
+    max
+  ] : [0, 1];
+  const segments = segmentBounds.slice(0, -1).map((start, index) => ({
+    start,
+    end: segmentBounds[index + 1] ?? start
+  }));
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "media-player-seek",
+      className: cn(
+        "relative flex h-8 w-full min-w-0 touch-none items-center",
+        resolvedDisabled && "pointer-events-none opacity-45",
+        className
+      ),
+      disabled: resolvedDisabled,
+      largeStep: step,
+      max: canSeek ? max : 100,
+      min,
+      onValueChange: (value) => {
+        const nextValue = Array.isArray(value) ? value[0] ?? 0 : value;
+        setDragValue(nextValue);
+        previewAt(nextValue);
+        queueSeek(nextValue);
+        onValueChange?.(nextValue);
+      },
+      onValueCommitted: (value) => {
+        const nextValue = clamp(
+          Array.isArray(value) ? value[0] ?? 0 : value,
+          min,
+          max
+        );
+        if (seekRafRef.current !== null) {
+          cancelAnimationFrame(seekRafRef.current);
+          seekRafRef.current = null;
+        }
+        dispatch({
+          type: MediaActionTypes.MEDIA_SEEK_REQUEST,
+          detail: nextValue
+        });
+        setPendingSeek(nextValue);
+        setDragValue(null);
+        clearPreview();
+      },
+      step: sliderStep,
+      value: displayTime,
+      ...props,
+      children: [
+        withTime && previewValue !== null && controlRect && ReactDOM.createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "pointer-events-none fixed z-50 flex -translate-x-1/2 -translate-y-full flex-col items-center overflow-hidden rounded-lg bg-surface-overlay text-fg-primary shadow-2",
+              "data-slot": "media-player-seek-preview",
+              style: { left: previewLeft, top: controlRect.top - 6 },
+              children: [
+                previewImage ? hasSpriteCoords ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "relative block overflow-hidden bg-line-subtle/50",
+                    style: {
+                      width: SEEK_PREVIEW_WIDTH,
+                      height: (previewCoordValues?.[3] ?? 0) * previewScale
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: previewImage,
+                        alt: "",
+                        draggable: false,
+                        className: "absolute top-0 left-0 max-w-none origin-top-left",
+                        style: {
+                          transform: `scale(${previewScale}) translate(${-(previewCoordValues?.[0] ?? 0)}px, ${-(previewCoordValues?.[1] ?? 0)}px)`
+                        }
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: previewImage,
+                    alt: "",
+                    draggable: false,
+                    className: "block aspect-video bg-line-subtle/50 object-cover",
+                    style: { width: SEEK_PREVIEW_WIDTH }
+                  }
+                ) : null,
+                previewChapter?.text ? /* @__PURE__ */ jsx("span", { className: "max-w-40 truncate px-2.5 pt-1 text-gdt-xs font-bold", children: previewChapter.text }) : null,
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "px-2.5 py-1 text-gdt-xs font-bold tabular-nums",
+                      (previewImage || previewChapter?.text) && "pt-0.5 pb-1.5"
+                    ),
+                    children: formatTime(previewValue)
+                  }
+                )
+              ]
+            }
+          ),
+          portalContainer ?? document.body
+        ),
+        /* @__PURE__ */ jsxs(
+          SliderPrimitive.Control,
+          {
+            ref: controlRef,
+            className: "flex h-8 w-full items-center",
+            onPointerLeave: () => {
+              if (dragValue === null) {
+                clearPreview();
+              }
+            },
+            onPointerMove: (event) => {
+              if (resolvedDisabled || dragValue !== null) {
+                return;
+              }
+              const next = getSeekValueFromPointer(event, min, max);
+              setHoverValue(next.value);
+              previewAt(next.value);
+            },
+            children: [
+              /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative flex h-2 w-full items-center gap-[3px]", children: segments.map(({ start, end }) => {
+                const span = end - start || 1;
+                const fraction = (value) => clamp((clamp(value, start, end) - start) / span, 0, 1);
+                const playedWidth = fraction(displayTime) * 100;
+                return /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    "data-slot": "media-player-seek-segment",
+                    className: "relative h-full overflow-hidden rounded-full bg-line-subtle/65",
+                    style: { width: `${span / (max - min || 1) * 100}%` },
+                    children: [
+                      canSeek && buffered?.map(
+                        ([bufferStart, bufferEnd]) => bufferEnd > start && bufferStart < end ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-slot": "media-player-seek-buffered",
+                            className: "absolute inset-y-0 bg-fg-on-brand/25",
+                            style: {
+                              left: `${fraction(bufferStart) * 100}%`,
+                              width: `${(fraction(bufferEnd) - fraction(bufferStart)) * 100}%`
+                            }
+                          },
+                          `${bufferStart}-${bufferEnd}`
+                        ) : null
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "data-slot": "media-player-seek-progress",
+                          className: cn(
+                            "absolute inset-y-0 left-0 bg-surface-brand",
+                            dragValue === null && "transition-[width] duration-200 ease-linear"
+                          ),
+                          style: { width: `${playedWidth}%` }
+                        }
+                      )
+                    ]
+                  },
+                  start
+                );
+              }) }),
+              /* @__PURE__ */ jsx(
+                SliderPrimitive.Thumb,
+                {
+                  getAriaLabel: () => ariaLabel ?? "Media timeline",
+                  getAriaValueText: (_formatted, value) => `${formatTime(value)} of ${formatTime(max)}`,
+                  className: cn(
+                    "size-3.5 -translate-x-1/2 rounded-full bg-surface-overlay shadow-2 ring-2 ring-surface-brand outline-none",
+                    "transition-[inset-inline-start,transform] duration-200 ease-linear data-[dragging]:scale-125 data-[dragging]:transition-transform",
+                    "focus-visible:[filter:drop-shadow(0_0_0.25rem_var(--color-line-focus))]"
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MediaPlayerLoop({
+  className,
+  onClick,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const loop = useMediaSelector((state) => state.mediaLoop === true);
+  return /* @__PURE__ */ jsx(
+    MediaControlButton,
+    {
+      "aria-label": loop ? "Disable loop" : "Enable loop",
+      "aria-pressed": loop,
+      "data-slot": "media-player-loop",
+      className,
+      tooltip: loop ? "Disable loop" : "Enable loop",
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        dispatch({
+          type: MediaActionTypes.MEDIA_LOOP_REQUEST,
+          detail: !loop
+        });
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(Repeat2, {})
+    }
+  );
+}
+function MediaPlayerPiP({
+  className,
+  disabled,
+  onClick,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const isPip = useMediaSelector((state) => state.mediaIsPip === true);
+  const unavailable = useMediaSelector((state) => !!state.mediaPipUnavailable);
+  return /* @__PURE__ */ jsx(
+    MediaControlButton,
+    {
+      "aria-label": isPip ? "Exit picture in picture" : "Enter picture in picture",
+      "aria-pressed": isPip,
+      "data-slot": "media-player-pip",
+      className,
+      disabled: disabled || unavailable,
+      tooltip: isPip ? "Exit picture in picture" : "Picture in picture",
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        dispatch({
+          type: isPip ? MediaActionTypes.MEDIA_EXIT_PIP_REQUEST : MediaActionTypes.MEDIA_ENTER_PIP_REQUEST
+        });
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(PictureInPicture2, {})
+    }
+  );
+}
+function MediaPlayerFullscreen({
+  className,
+  disabled,
+  onClick,
+  ...props
+}) {
+  const dispatch = useMediaDispatch();
+  const isFullscreen = useMediaSelector(
+    (state) => state.mediaIsFullscreen === true
+  );
+  const unavailable = useMediaSelector(
+    (state) => !!state.mediaFullscreenUnavailable
+  );
+  const Icon = isFullscreen ? Minimize : Maximize;
+  return /* @__PURE__ */ jsx(
+    MediaControlButton,
+    {
+      "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+      "aria-pressed": isFullscreen,
+      "data-slot": "media-player-fullscreen",
+      className,
+      disabled: disabled || unavailable,
+      shortcut: "F",
+      tooltip: isFullscreen ? "Exit fullscreen" : "Fullscreen",
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        dispatch({
+          type: isFullscreen ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST
+        });
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, {})
+    }
+  );
+}
+var MEDIA_ERROR_CONTENT = {
+  1: {
+    title: "Playback interrupted",
+    description: "Loading the media was interrupted."
+  },
+  2: {
+    title: "Connection error",
+    description: "A network error kept the media from loading."
+  },
+  3: {
+    title: "Playback error",
+    description: "The media could not be decoded."
+  },
+  4: {
+    title: "Unsupported format",
+    description: "The media format is not supported."
+  }
+};
+function MediaPlayerError({
+  children,
+  className,
+  ...props
+}) {
+  const { rootNode } = React.useContext(MediaPlayerContext);
+  const mediaError = useMediaSelector((state) => state.mediaError);
+  const [sourceFailed, setSourceFailed] = React.useState(false);
+  React.useEffect(() => {
+    if (!rootNode) {
+      return;
+    }
+    const update = () => {
+      const media = rootNode.querySelector("video, audio");
+      setSourceFailed(
+        !!media && media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE && media.readyState === HTMLMediaElement.HAVE_NOTHING
+      );
+    };
+    update();
+    rootNode.addEventListener("error", update, true);
+    rootNode.addEventListener("loadstart", update, true);
+    rootNode.addEventListener("loadedmetadata", update, true);
+    return () => {
+      rootNode.removeEventListener("error", update, true);
+      rootNode.removeEventListener("loadstart", update, true);
+      rootNode.removeEventListener("loadedmetadata", update, true);
+    };
+  }, [rootNode]);
+  const error = mediaError ?? (sourceFailed ? { code: 4 } : null);
+  if (!error) {
+    return null;
+  }
+  const content = MEDIA_ERROR_CONTENT[error.code ?? 0] ?? {
+    title: "Something went wrong",
+    description: "The media could not be played."
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "media-player-error",
+      role: "alert",
+      className: cn(
+        "absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 bg-canvas/85 px-6 text-center text-fg-primary backdrop-blur-sm rounded-2xl",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TriangleAlert,
+          {
+            "aria-hidden": "true",
+            className: "mb-2 size-9 text-fg-danger"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-gdt-lg font-bold", children: content.title }),
+        /* @__PURE__ */ jsx("p", { className: "text-gdt-sm text-fg-secondary", children: content.description }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            MediaControlButton,
+            {
+              className: "w-auto gap-1.5 px-4 text-gdt-xs font-bold [&_svg]:size-3.5",
+              onClick: () => {
+                rootNode?.querySelector("video, audio")?.load();
+              },
+              children: [
+                /* @__PURE__ */ jsx(RefreshCcw, {}),
+                "Try again"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            MediaControlButton,
+            {
+              className: "w-auto gap-1.5 px-4 text-gdt-xs font-bold [&_svg]:size-3.5",
+              onClick: () => {
+                window.location.reload();
+              },
+              children: [
+                /* @__PURE__ */ jsx(RotateCcw, {}),
+                "Reload page"
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  MediaPlayer,
+  MediaPlayerAudio,
+  MediaPlayerCaptions,
+  MediaPlayerControls,
+  MediaPlayerControlsOverlay,
+  MediaPlayerError,
+  MediaPlayerFullscreen,
+  MediaPlayerLoop,
+  MediaPlayerPiP,
+  MediaPlayerPlay,
+  MediaPlayerPlaybackSpeed,
+  MediaPlayerSeek,
+  MediaPlayerSeekBackward,
+  MediaPlayerSeekForward,
+  MediaPlayerSettings,
+  MediaPlayerTime,
+  MediaPlayerVideo,
+  MediaPlayerVolume
+};
+//# sourceMappingURL=media-player.js.map