@mieweb/ui 0.11.0-dev.36 → 0.11.0-dev.38

package/dist/{chunk-QHCAWDMG.cjs → chunk-HDZQLTBP.cjs}

@@ -74,6 +74,7 @@ function useMediaTransport(options = {}) {
     };
     const onDurationChange = () => setDurationMs(toMs(element.duration));
     const onTimeUpdateEvt = () => emitTime();
+    const onRateChange = () => setPlaybackRateState(element.playbackRate);
     const onPlay = () => setState("playing");
     const onPlaying = () => setState("playing");
     const onPause = () => setState("paused");
@@ -96,6 +97,7 @@ function useMediaTransport(options = {}) {
     element.addEventListener("loadedmetadata", onLoadedMetadata);
     element.addEventListener("durationchange", onDurationChange);
     element.addEventListener("timeupdate", onTimeUpdateEvt);
+    element.addEventListener("ratechange", onRateChange);
     element.addEventListener("play", onPlay);
     element.addEventListener("playing", onPlaying);
     element.addEventListener("pause", onPause);
@@ -110,6 +112,7 @@ function useMediaTransport(options = {}) {
       element.removeEventListener("loadedmetadata", onLoadedMetadata);
       element.removeEventListener("durationchange", onDurationChange);
       element.removeEventListener("timeupdate", onTimeUpdateEvt);
+      element.removeEventListener("ratechange", onRateChange);
       element.removeEventListener("play", onPlay);
       element.removeEventListener("playing", onPlaying);
       element.removeEventListener("pause", onPause);
@@ -129,7 +132,8 @@ function useMediaTransport(options = {}) {
   const togglePlay = react.useCallback(() => {
     const el = elementRef.current;
     if (!el) return;
-    if (el.paused) void el.play();
+    if (el.paused) void el.play()?.catch(() => {
+    });
     else el.pause();
   }, []);
   const seekToMs = react.useCallback((timeMs) => {
@@ -173,5 +177,5 @@ function useMediaTransport(options = {}) {
 }
 
 exports.useMediaTransport = useMediaTransport;
-//# sourceMappingURL=chunk-QHCAWDMG.cjs.map
-//# sourceMappingURL=chunk-QHCAWDMG.cjs.map
+//# sourceMappingURL=chunk-HDZQLTBP.cjs.map
+//# sourceMappingURL=chunk-HDZQLTBP.cjs.map

package/dist/chunk-HDZQLTBP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useMediaTransport.ts"],"names":["useState","useRef","useCallback","useEffect"],"mappings":"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","file":"chunk-HDZQLTBP.cjs","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type MediaTransportState =\n  | 'idle'\n  | 'loading'\n  | 'playing'\n  | 'paused'\n  | 'error';\n\nexport interface UseMediaTransportOptions {\n  /** Fired on every native `timeupdate` and on metadata load, in milliseconds. */\n  onTimeUpdate?: (currentTimeMs: number, durationMs: number) => void;\n  /** Fired whenever the derived transport state changes. */\n  onStateChange?: (state: MediaTransportState) => void;\n  /** Fired when playback reaches the end. */\n  onEnded?: () => void;\n  /** Fired on a media error, with a descriptive Error. */\n  onError?: (error: Error) => void;\n  /** Initial playback rate (default `1`). Kept in sync with the element. */\n  initialRate?: number;\n  /** Transport state to enter when playback ends (default `'paused'`). */\n  endedState?: Extract<MediaTransportState, 'idle' | 'paused'>;\n  /** Reset the position to `0` when playback ends (default `false`). */\n  resetTimeOnEnd?: boolean;\n  /** Human-readable label used in the error message (default `'media'`). */\n  errorLabel?: string;\n}\n\nexport interface UseMediaTransportReturn {\n  /**\n   * Callback ref for the `<audio>`/`<video>` element to control. Pass this to\n   * the element's `ref` (or call it imperatively). Transport listeners attach\n   * when an element mounts and detach when it unmounts.\n   */\n  setMediaElement: (element: HTMLMediaElement | null) => void;\n  /** The currently attached media element, or `null`. */\n  mediaElement: HTMLMediaElement | null;\n\n  /** Derived transport state. */\n  state: MediaTransportState;\n  /** Current playback position in milliseconds. */\n  currentTimeMs: number;\n  /** Media duration in milliseconds (`0` until known / non-finite). */\n  durationMs: number;\n  /** Current playback rate. */\n  playbackRate: number;\n  /** `true` while `state === 'playing'`. */\n  isPlaying: boolean;\n  /** `true` while `state === 'loading'`. */\n  isLoading: boolean;\n\n  /** Start playback. */\n  play: () => void;\n  /** Pause playback. */\n  pause: () => void;\n  /** Toggle between play and pause. */\n  togglePlay: () => void;\n  /** Seek to a position in milliseconds. */\n  seekToMs: (timeMs: number) => void;\n  /** Set the playback rate multiplier. */\n  setPlaybackRate: (rate: number) => void;\n  /** Read the current position in milliseconds. */\n  getCurrentTimeMs: () => number;\n  /** Read the duration in milliseconds (`0` when unknown). */\n  getDurationMs: () => number;\n  /** Whether playback is currently paused (reads the element directly). */\n  isPaused: () => boolean;\n}\n\n// =============================================================================\n// Helpers\n// =============================================================================\n\nconst toMs = (seconds: number): number =>\n  Number.isFinite(seconds) ? seconds * 1000 : 0;\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Headless playback transport for a native `HTMLMediaElement`.\n *\n * Owns the derived transport state (idle/loading/playing/paused/error),\n * position, duration and playback rate, and exposes imperative controls — all\n * in **milliseconds**. It never creates or renders an element: pass the\n * returned {@link UseMediaTransportReturn.setMediaElement} callback to an\n * `<audio>`/`<video>` `ref` and the hook wires the native listeners.\n *\n * Shared by `MediaPlayer` (ms API) and TranscriptPlayer's `usePlayback` (seconds,\n * converted at the boundary). The WaveSurfer waveform variant is\n * out of scope; this hook targets native media transport only.\n *\n * @example\n * ```tsx\n * function Player({ src }: { src: string }) {\n *   const t = useMediaTransport({ onEnded: () => console.log('done') });\n *   return (\n *     <div>\n *       <video ref={t.setMediaElement} src={src} controls />\n *       <button onClick={t.togglePlay}>{t.isPlaying ? 'Pause' : 'Play'}</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useMediaTransport(\n  options: UseMediaTransportOptions = {}\n): UseMediaTransportReturn {\n  const {\n    onTimeUpdate,\n    onStateChange,\n    onEnded,\n    onError,\n    initialRate = 1,\n    endedState = 'paused',\n    resetTimeOnEnd = false,\n    errorLabel = 'media',\n  } = options;\n\n  const [element, setElementState] = useState<HTMLMediaElement | null>(null);\n  const [state, setStateRaw] = useState<MediaTransportState>('idle');\n  const stateRef = useRef<MediaTransportState>('idle');\n  const [currentTimeMs, setCurrentTimeMs] = useState(0);\n  const [durationMs, setDurationMs] = useState(0);\n  const [playbackRate, setPlaybackRateState] = useState(initialRate);\n\n  const elementRef = useRef<HTMLMediaElement | null>(null);\n\n  // Keep the latest callbacks/options in a ref so the listener effect does not\n  // re-subscribe on every render when callers pass inline functions.\n  const handlers = useRef({\n    onTimeUpdate,\n    onStateChange,\n    onEnded,\n    onError,\n    endedState,\n    resetTimeOnEnd,\n    errorLabel,\n  });\n  handlers.current = {\n    onTimeUpdate,\n    onStateChange,\n    onEnded,\n    onError,\n    endedState,\n    resetTimeOnEnd,\n    errorLabel,\n  };\n\n  const setState = useCallback((next: MediaTransportState) => {\n    if (stateRef.current === next) return;\n    stateRef.current = next;\n    setStateRaw(next);\n    // Consumers often update parent state here. Keep that notification outside\n    // React's state updater, which may run during render or twice in StrictMode.\n    handlers.current.onStateChange?.(next);\n  }, []);\n\n  const setMediaElement = useCallback((el: HTMLMediaElement | null) => {\n    elementRef.current = el;\n    setElementState(el);\n  }, []);\n\n  // Attach native transport listeners whenever an element mounts.\n  useEffect(() => {\n    if (!element) {\n      // A detached element (e.g. the source was removed) leaves nothing playing or loaded;\n      // an error stays visible to hosts that swap the element for an error panel.\n      if (stateRef.current !== 'error') setState('idle');\n      setDurationMs(0);\n      setCurrentTimeMs(0);\n      return;\n    }\n\n    const emitTime = () => {\n      const ms = toMs(element.currentTime);\n      const dur = toMs(element.duration);\n      setCurrentTimeMs(ms);\n      handlers.current.onTimeUpdate?.(ms, dur);\n    };\n\n    const onLoadStart = () => setState('loading');\n    // canplay can also follow a seek mid-playback; only leave the loading state here.\n    const onCanPlay = () => {\n      if (stateRef.current === 'loading')\n        setState(element.paused ? 'idle' : 'playing');\n    };\n    const onLoadedMetadata = () => {\n      setDurationMs(toMs(element.duration));\n      emitTime();\n    };\n    // MediaRecorder webm often reports Infinity until the end is known.\n    const onDurationChange = () => setDurationMs(toMs(element.duration));\n    const onTimeUpdateEvt = () => emitTime();\n    // The speed can change outside these controls (iOS's own full screen player).\n    const onRateChange = () => setPlaybackRateState(element.playbackRate);\n    const onPlay = () => setState('playing');\n    const onPlaying = () => setState('playing');\n    const onPause = () => setState('paused');\n    const onEndedEvt = () => {\n      setState(handlers.current.endedState);\n      if (handlers.current.resetTimeOnEnd) {\n        element.currentTime = 0;\n        setCurrentTimeMs(0);\n      }\n      handlers.current.onEnded?.();\n    };\n    const onErrorEvt = () => {\n      setState('error');\n      handlers.current.onError?.(\n        new Error(`Failed to load ${handlers.current.errorLabel}`)\n      );\n    };\n\n    element.addEventListener('loadstart', onLoadStart);\n    element.addEventListener('canplay', onCanPlay);\n    element.addEventListener('loadedmetadata', onLoadedMetadata);\n    element.addEventListener('durationchange', onDurationChange);\n    element.addEventListener('timeupdate', onTimeUpdateEvt);\n    element.addEventListener('ratechange', onRateChange);\n    element.addEventListener('play', onPlay);\n    element.addEventListener('playing', onPlaying);\n    element.addEventListener('pause', onPause);\n    element.addEventListener('ended', onEndedEvt);\n    element.addEventListener('error', onErrorEvt);\n\n    // Sync on attach; a new element must not inherit the previous one's duration or play state.\n    setDurationMs(toMs(element.duration));\n    if (element.paused && stateRef.current === 'playing') setState('paused');\n    // e.g. a 404 that failed before hydration attached these listeners.\n    if (element.error) onErrorEvt();\n\n    return () => {\n      element.removeEventListener('loadstart', onLoadStart);\n      element.removeEventListener('canplay', onCanPlay);\n      element.removeEventListener('loadedmetadata', onLoadedMetadata);\n      element.removeEventListener('durationchange', onDurationChange);\n      element.removeEventListener('timeupdate', onTimeUpdateEvt);\n      element.removeEventListener('ratechange', onRateChange);\n      element.removeEventListener('play', onPlay);\n      element.removeEventListener('playing', onPlaying);\n      element.removeEventListener('pause', onPause);\n      element.removeEventListener('ended', onEndedEvt);\n      element.removeEventListener('error', onErrorEvt);\n    };\n  }, [element, setState]);\n\n  // Keep the element's playback rate in sync with hook state.\n  useEffect(() => {\n    if (element) element.playbackRate = playbackRate;\n  }, [element, playbackRate]);\n\n  const play = useCallback(() => {\n    void elementRef.current?.play();\n  }, []);\n\n  const pause = useCallback(() => {\n    elementRef.current?.pause();\n  }, []);\n\n  const togglePlay = useCallback(() => {\n    const el = elementRef.current;\n    if (!el) return;\n    // A refused start (autoplay policy) leaves it paused; nothing to report.\n    if (el.paused) void el.play()?.catch(() => {});\n    else el.pause();\n  }, []);\n\n  const seekToMs = useCallback((timeMs: number) => {\n    const el = elementRef.current;\n    if (el) {\n      el.currentTime = timeMs / 1000;\n      setCurrentTimeMs(timeMs);\n    }\n  }, []);\n\n  const setPlaybackRate = useCallback((rate: number) => {\n    setPlaybackRateState(rate);\n    if (elementRef.current) elementRef.current.playbackRate = rate;\n  }, []);\n\n  const getCurrentTimeMs = useCallback(\n    () => toMs(elementRef.current?.currentTime ?? 0),\n    []\n  );\n\n  const getDurationMs = useCallback(\n    () => toMs(elementRef.current?.duration ?? 0),\n    []\n  );\n\n  const isPaused = useCallback(() => elementRef.current?.paused ?? true, []);\n\n  return {\n    setMediaElement,\n    mediaElement: element,\n    state,\n    currentTimeMs,\n    durationMs,\n    playbackRate,\n    isPlaying: state === 'playing',\n    isLoading: state === 'loading',\n    play,\n    pause,\n    togglePlay,\n    seekToMs,\n    setPlaybackRate,\n    getCurrentTimeMs,\n    getDurationMs,\n    isPaused,\n  };\n}\n"]}

package/dist/chunk-JCIQIR5V.js

@@ -0,0 +1,546 @@
+import { Slider } from './chunk-CRR7AE5D.js';
+import { formatTime } from './chunk-CKECOCYJ.js';
+import { useMediaTransport } from './chunk-4LKAZW2W.js';
+import { Button } from './chunk-WX2XB6FP.js';
+import { cn } from './chunk-TQONQSJO.js';
+import * as React from 'react';
+import { Play, Pause, Captions, CaptionsOff, VolumeX, Volume2, PictureInPicture2, Minimize, Maximize } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+// src/components/MediaPlayer/overlayButton.ts
+var overlayButtonClass = [
+  "rounded-full bg-black/45 text-white backdrop-blur-sm",
+  "hover:bg-black/65 hover:text-white active:bg-black/75",
+  "dark:text-white dark:hover:bg-black/65 dark:active:bg-black/75",
+  "focus-visible:ring-white focus-visible:ring-offset-0",
+  "pointer-fine:h-9 pointer-fine:w-9"
+].join(" ");
+var playBadgeClass = "flex h-14 w-14 items-center justify-center rounded-full bg-black/60 text-white";
+var playBadgeIconClass = "h-6 w-6 translate-x-0.5 fill-current";
+
+// src/components/MediaPlayer/pictureInPicture.ts
+var PIP_EVENTS = [
+  "enterpictureinpicture",
+  "leavepictureinpicture",
+  "webkitpresentationmodechanged"
+];
+var PIP_EXIT_TIMEOUT_MS = 1e3;
+function isInPictureInPicture(video) {
+  if (!video || typeof document === "undefined") return false;
+  return document.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
+}
+function exitPictureInPicture(video) {
+  if (!video || !isInPictureInPicture(video)) return Promise.resolve();
+  if (document.pictureInPictureElement === video)
+    return document.exitPictureInPicture().catch(() => {
+    });
+  return new Promise((resolve) => {
+    const done = () => {
+      clearTimeout(timer);
+      video.removeEventListener("webkitpresentationmodechanged", done);
+      resolve();
+    };
+    const timer = setTimeout(done, PIP_EXIT_TIMEOUT_MS);
+    video.addEventListener("webkitpresentationmodechanged", done, {
+      once: true
+    });
+    video.webkitSetPresentationMode?.("inline");
+  });
+}
+function canPictureInPicture(video) {
+  if (!video || typeof document === "undefined") return false;
+  if (video.disablePictureInPicture) return false;
+  return document.pictureInPictureEnabled || !!video.webkitSupportsPresentationMode?.("picture-in-picture");
+}
+var defaultMediaControlsLabels = {
+  play: "Play",
+  pause: "Pause",
+  mute: "Mute",
+  unmute: "Unmute",
+  seek: "Seek",
+  fullscreen: "Full screen",
+  exitFullscreen: "Exit full screen",
+  pictureInPicture: "Picture in picture",
+  exitPictureInPicture: "Exit picture in picture",
+  time: (current, duration) => `${current} / ${duration}`,
+  rate: (rate) => `${rate}\xD7`,
+  speed: (rate) => `Playback speed ${rate}`,
+  showCaptions: "Show captions",
+  hideCaptions: "Hide captions"
+};
+var defaultPlaybackRates = [1, 1.5, 2];
+var SMALL_PLAYER_HIDDEN = "@max-xs:hidden";
+var SEEK_STEP_MS = 100;
+var KEYBOARD_SEEK_FRACTION = 0.02;
+var CUE_LINE_HEIGHT_FRACTION = 0.05;
+var DEFAULT_CUE_LINE = -4;
+var formatMs = (ms) => formatTime(ms / 1e3);
+function cueLineAboveBar(video, bar) {
+  const lineHeight = video.getBoundingClientRect().height * CUE_LINE_HEIGHT_FRACTION;
+  if (!bar || lineHeight <= 0) return DEFAULT_CUE_LINE;
+  const controls = bar.getBoundingClientRect().height - (parseFloat(getComputedStyle(bar).paddingTop) || 0);
+  return -(Math.ceil(Math.max(controls, 0) / lineHeight) + 1);
+}
+function useInPictureInPicture(video) {
+  const [inPip, setInPip] = React.useState(false);
+  React.useEffect(() => {
+    if (!video) return;
+    const update = () => setInPip(isInPictureInPicture(video));
+    update();
+    for (const event of PIP_EVENTS) video.addEventListener(event, update);
+    return () => {
+      for (const event of PIP_EVENTS) video.removeEventListener(event, update);
+    };
+  }, [video]);
+  return inPip;
+}
+function useCaptionTracks(video, barRef) {
+  const [tracks, setTracks] = React.useState([]);
+  const [showing, setShowing] = React.useState(false);
+  React.useEffect(() => {
+    const list = video?.textTracks;
+    if (!list) {
+      setTracks([]);
+      setShowing(false);
+      return;
+    }
+    const lifted = /* @__PURE__ */ new Map();
+    const place = (track, cue, line) => {
+      cue.line = line;
+      if (track && Array.from(track.activeCues ?? []).includes(cue)) {
+        track.removeCue(cue);
+        track.addCue(cue);
+      }
+    };
+    const liftCues = (track) => {
+      const line = video ? cueLineAboveBar(video, barRef.current) : DEFAULT_CUE_LINE;
+      for (const each of Array.from(track.cues ?? [])) {
+        if (!("line" in each)) continue;
+        const cue = each;
+        if (cue.line !== "auto" && lifted.get(cue) !== cue.line) continue;
+        if (cue.line === line) continue;
+        lifted.set(cue, line);
+        place(track, cue, line);
+      }
+    };
+    const lift = (event) => liftCues(event.target);
+    let watched = [];
+    const update = () => {
+      const captions = Array.from(list).filter(
+        (track) => track.kind === "captions" || track.kind === "subtitles"
+      );
+      for (const track of watched)
+        track.removeEventListener?.("cuechange", lift);
+      for (const track of captions) track.addEventListener?.("cuechange", lift);
+      watched = captions;
+      setTracks(captions);
+      setShowing(captions.some((track) => track.mode === "showing"));
+    };
+    update();
+    const events = ["addtrack", "removetrack", "change"];
+    for (const name of events) list.addEventListener?.(name, update);
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => watched.forEach(liftCues));
+    for (const element of [video, barRef.current])
+      if (element) resize?.observe(element);
+    return () => {
+      resize?.disconnect();
+      for (const name of events) list.removeEventListener?.(name, update);
+      for (const track of watched)
+        track.removeEventListener?.("cuechange", lift);
+      for (const [cue, line] of lifted)
+        if (cue.line === line) place(cue.track, cue, "auto");
+    };
+  }, [video, barRef]);
+  return { tracks, showing };
+}
+function useMuted(element) {
+  const [muted, setMuted] = React.useState(element?.muted ?? false);
+  React.useEffect(() => {
+    if (!element) return;
+    const update = () => setMuted(element.muted);
+    update();
+    element.addEventListener("volumechange", update);
+    return () => element.removeEventListener("volumechange", update);
+  }, [element]);
+  return muted;
+}
+function useIsFullscreen(target) {
+  const [fullscreen, setFullscreen] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const update = () => setFullscreen(
+      !!target?.current && document.fullscreenElement === target.current
+    );
+    update();
+    document.addEventListener("fullscreenchange", update);
+    return () => document.removeEventListener("fullscreenchange", update);
+  }, [target]);
+  return fullscreen;
+}
+var MediaControls = React.forwardRef(function MediaControls2({
+  transport,
+  fullscreenTarget,
+  labels: labelOverrides,
+  playbackRates = defaultPlaybackRates,
+  className,
+  ...rest
+}, ref) {
+  const labels = { ...defaultMediaControlsLabels, ...labelOverrides };
+  const video = transport.mediaElement;
+  const muted = useMuted(video);
+  const isFullscreen = useIsFullscreen(fullscreenTarget);
+  const inPip = useInPictureInPicture(video);
+  const barRef = React.useRef(null);
+  const captions = useCaptionTracks(video, barRef);
+  const [support, setSupport] = React.useState({ box: false, pip: false });
+  React.useEffect(() => {
+    const read = () => setSupport({
+      box: document.fullscreenEnabled && !!fullscreenTarget,
+      pip: canPictureInPicture(video)
+    });
+    read();
+    video?.addEventListener("loadedmetadata", read);
+    return () => video?.removeEventListener("loadedmetadata", read);
+  }, [video, fullscreenTarget]);
+  const playing = transport.isPlaying;
+  const durationMs = transport.durationMs;
+  const togglePlay = transport.togglePlay;
+  const toggleMuted = () => {
+    if (video) video.muted = !video.muted;
+  };
+  const canFullscreen = support.box || !!video?.webkitEnterFullscreen && !!video.webkitSupportsFullscreen;
+  const toggleFullscreen = () => {
+    if (isFullscreen) {
+      void document.exitFullscreen?.()?.catch(() => {
+      });
+    } else if (support.box && fullscreenTarget?.current) {
+      void fullscreenTarget.current.requestFullscreen?.()?.catch(() => {
+      });
+    } else {
+      video?.webkitEnterFullscreen?.();
+    }
+  };
+  const rate = transport.playbackRate;
+  const cycleSpeed = () => {
+    const index = playbackRates.indexOf(rate);
+    transport.setPlaybackRate(
+      playbackRates[(index + 1) % playbackRates.length] ?? 1
+    );
+  };
+  const toggleCaptions = () => {
+    const [first] = captions.tracks;
+    for (const track of captions.tracks)
+      track.mode = !captions.showing && track === first ? "showing" : "disabled";
+  };
+  const togglePictureInPicture = () => {
+    if (!video) return;
+    if (isInPictureInPicture(video)) {
+      void exitPictureInPicture(video);
+    } else if (document.pictureInPictureEnabled) {
+      void video.requestPictureInPicture().catch(() => {
+      });
+    } else {
+      video.webkitSetPresentationMode?.("picture-in-picture");
+    }
+  };
+  const barButton = (label, onClick, icon, className2) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon",
+      "aria-label": label,
+      title: label,
+      onClick,
+      className: cn(overlayButtonClass, "shrink-0 bg-transparent", className2),
+      children: icon
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "media-controls",
+      className: cn(
+        // A container query: a narrow player (a portrait clip) gives the seek
+        // bar a row of its own, so it's always long enough to drag.
+        "@container pointer-events-none absolute inset-0 flex flex-col justify-end",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "media-controls-surface",
+            "aria-hidden": "true",
+            className: "pointer-events-auto absolute inset-0 flex cursor-pointer items-center justify-center",
+            onClick: togglePlay,
+            children: !playing && /* @__PURE__ */ jsx("span", { className: playBadgeClass, children: /* @__PURE__ */ jsx(Play, { className: playBadgeIconClass }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: barRef,
+            "data-slot": "media-controls-bar",
+            dir: "ltr",
+            className: "pointer-events-auto relative flex flex-wrap items-center gap-x-1 bg-gradient-to-t from-black/75 via-black/40 to-transparent px-1 pt-6 pb-1 text-white sm:px-2 @max-xs:pt-2",
+            children: [
+              barButton(
+                playing ? labels.pause : labels.play,
+                togglePlay,
+                playing ? /* @__PURE__ */ jsx(Pause, { className: "h-5 w-5 fill-current", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Play, { className: "h-5 w-5 fill-current", "aria-hidden": "true" })
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "media-controls-time",
+                  className: "shrink-0 px-1 text-xs whitespace-nowrap tabular-nums @max-md:me-auto",
+                  children: /* @__PURE__ */ jsx("bdi", { children: labels.time(
+                    formatMs(transport.currentTimeMs),
+                    formatMs(durationMs)
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Slider,
+                {
+                  className: "mx-1 min-w-0 flex-1 @max-md:order-first @max-md:mx-2 @max-md:basis-full pointer-coarse:[&_[data-slot=slider-track-wrapper]]:py-4",
+                  trackClassName: "bg-white/30 dark:bg-white/30",
+                  size: "sm",
+                  min: 0,
+                  max: durationMs > 0 ? durationMs : 1,
+                  step: SEEK_STEP_MS,
+                  keyboardStep: Math.max(
+                    SEEK_STEP_MS,
+                    Math.round(durationMs * KEYBOARD_SEEK_FRACTION)
+                  ),
+                  value: transport.currentTimeMs,
+                  onValueChange: transport.seekToMs,
+                  formatValue: formatMs,
+                  disabled: durationMs <= 0,
+                  "aria-label": labels.seek
+                }
+              ),
+              playbackRates.length > 1 && barButton(
+                labels.speed(labels.rate(rate)),
+                cycleSpeed,
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold tabular-nums", children: labels.rate(rate) }),
+                SMALL_PLAYER_HIDDEN
+              ),
+              captions.tracks.length > 0 && barButton(
+                captions.showing ? labels.hideCaptions : labels.showCaptions,
+                toggleCaptions,
+                // The icon shows the state, as mute's does.
+                captions.showing ? /* @__PURE__ */ jsx(Captions, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CaptionsOff, { className: "h-5 w-5", "aria-hidden": "true" })
+              ),
+              barButton(
+                muted ? labels.unmute : labels.mute,
+                toggleMuted,
+                muted ? /* @__PURE__ */ jsx(VolumeX, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Volume2, { className: "h-5 w-5", "aria-hidden": "true" })
+              ),
+              support.pip && barButton(
+                inPip ? labels.exitPictureInPicture : labels.pictureInPicture,
+                togglePictureInPicture,
+                /* @__PURE__ */ jsx(PictureInPicture2, { className: "h-5 w-5", "aria-hidden": "true" }),
+                SMALL_PLAYER_HIDDEN
+              ),
+              canFullscreen && barButton(
+                isFullscreen ? labels.exitFullscreen : labels.fullscreen,
+                toggleFullscreen,
+                isFullscreen ? /* @__PURE__ */ jsx(Minimize, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Maximize, { className: "h-5 w-5", "aria-hidden": "true" })
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+var mediaPlayerVariants = cva(
+  "flex h-full w-full items-center justify-center",
+  {
+    variants: {
+      variant: {
+        plain: "",
+        card: "rounded-xl border border-border bg-card text-card-foreground p-2"
+      }
+    },
+    defaultVariants: {
+      variant: "plain"
+    }
+  }
+);
+var VIDEO_EXTENSIONS = /\.(mp4|mov|avi|webm|mkv|m4v)$/i;
+function inferMediaKind(src) {
+  const path = src.split(/[?#]/, 1)[0];
+  return VIDEO_EXTENSIONS.test(path) ? "video" : "audio";
+}
+var MediaPlayer = React.forwardRef(
+  ({
+    src,
+    kind,
+    controls = true,
+    controlsStyle = "native",
+    muted,
+    loop,
+    poster,
+    preload,
+    children,
+    playbackRates,
+    labels,
+    variant,
+    onStateChange,
+    onEnded,
+    onError,
+    onRetry,
+    onTimeUpdate,
+    className,
+    "aria-label": ariaLabel,
+    mediaElementRef
+  }, ref) => {
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+      setError(null);
+    }, [src]);
+    const resolvedKind = kind ?? inferMediaKind(src);
+    const transport = useMediaTransport({
+      onTimeUpdate,
+      onStateChange,
+      onEnded,
+      onError: (err) => {
+        setError(
+          labels?.error ?? "Unable to load media. The server may be unavailable."
+        );
+        onError?.(err);
+      },
+      endedState: "paused",
+      errorLabel: `media: ${src}`
+    });
+    const { setMediaElement, mediaElement } = transport;
+    const setElement = React.useCallback(
+      (el) => {
+        setMediaElement(el);
+        if (mediaElementRef) {
+          mediaElementRef.current = el;
+        }
+      },
+      [setMediaElement, mediaElementRef]
+    );
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        seekToMs: transport.seekToMs,
+        play: transport.play,
+        pause: transport.pause,
+        getCurrentTimeMs: transport.getCurrentTimeMs,
+        getDurationMs: transport.getDurationMs,
+        isPaused: transport.isPaused,
+        setPlaybackRate: transport.setPlaybackRate,
+        get mediaElement() {
+          return mediaElement;
+        }
+      }),
+      [transport, mediaElement]
+    );
+    const handleRetry = React.useCallback(() => {
+      setError(null);
+      mediaElement?.load();
+      onRetry?.();
+    }, [mediaElement, onRetry]);
+    const overlay = controlsStyle === "overlay" && resolvedKind === "video";
+    const boxRef = React.useRef(null);
+    const sharedMediaProps = {
+      src,
+      controls: controls && !overlay,
+      muted,
+      loop,
+      preload,
+      "aria-label": ariaLabel
+    };
+    const video = (
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: setElement,
+          playsInline: true,
+          poster,
+          className: overlay ? "h-full w-full object-contain" : "h-auto max-h-full w-auto max-w-full object-contain",
+          ...sharedMediaProps,
+          children
+        }
+      )
+    );
+    if (error) {
+      return /* @__PURE__ */ jsx("div", { className: mediaPlayerVariants({ variant, className }), children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "alert",
+          className: "border-destructive/30 bg-destructive/10 flex min-h-36 flex-col items-center justify-center gap-3 rounded-lg border p-8 text-center",
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "text-destructive-700 dark:text-destructive-300 m-0 text-sm", children: error }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "bg-background",
+                onClick: handleRetry,
+                children: labels?.retry ?? "Retry"
+              }
+            )
+          ]
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: mediaPlayerVariants({ variant, className }), children: resolvedKind === "video" ? (
+      // The controls cover the player's box, so the video fills it at its
+      // own shape and the bar spans the box. The box is a dark surface in
+      // every theme (black letterboxing, as on VideoCard), so library
+      // controls inside it take their dark-theme colours. With the
+      // browser's controls the box is `contents`, leaving the video laid
+      // out as before; it stays in the tree either way, so changing
+      // `controlsStyle` keeps the same video, its time and playback.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: boxRef,
+          "data-slot": overlay ? "media-player-box" : void 0,
+          "data-theme": overlay ? "dark" : void 0,
+          className: overlay ? "relative h-full w-full bg-black" : "contents",
+          children: [
+            video,
+            overlay && controls && /* @__PURE__ */ jsx(
+              MediaControls,
+              {
+                transport,
+                fullscreenTarget: boxRef,
+                labels,
+                playbackRates
+              }
+            )
+          ]
+        }
+      )
+    ) : (
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      /* @__PURE__ */ jsx(
+        "audio",
+        {
+          ref: setElement,
+          className: "my-4 w-[90%] max-w-lg",
+          ...sharedMediaProps,
+          children
+        }
+      )
+    ) });
+  }
+);
+MediaPlayer.displayName = "MediaPlayer";
+
+export { MediaControls, MediaPlayer, PIP_EVENTS, defaultMediaControlsLabels, exitPictureInPicture, inferMediaKind, isInPictureInPicture, mediaPlayerVariants, overlayButtonClass, playBadgeClass, playBadgeIconClass };
+//# sourceMappingURL=chunk-JCIQIR5V.js.map
+//# sourceMappingURL=chunk-JCIQIR5V.js.map