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

package/dist/chunk-TZKBW4GA.cjs

@@ -0,0 +1,578 @@
+'use strict';
+
+var chunkNZUQL42A_cjs = require('./chunk-NZUQL42A.cjs');
+var chunkLTCHD3K5_cjs = require('./chunk-LTCHD3K5.cjs');
+var chunkHDZQLTBP_cjs = require('./chunk-HDZQLTBP.cjs');
+var chunkFSARTLUE_cjs = require('./chunk-FSARTLUE.cjs');
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+var React = require('react');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// 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) => chunkLTCHD3K5_cjs.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__namespace.useState(false);
+  React__namespace.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__namespace.useState([]);
+  const [showing, setShowing] = React__namespace.useState(false);
+  React__namespace.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__namespace.useState(element?.muted ?? false);
+  React__namespace.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__namespace.useState(false);
+  React__namespace.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__namespace.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__namespace.useRef(null);
+  const captions = useCaptionTracks(video, barRef);
+  const [support, setSupport] = React__namespace.useState({ box: false, pip: false });
+  React__namespace.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__ */ jsxRuntime.jsx(
+    chunkFSARTLUE_cjs.Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon",
+      "aria-label": label,
+      title: label,
+      onClick,
+      className: chunkS5RVSXDV_cjs.cn(overlayButtonClass, "shrink-0 bg-transparent", className2),
+      children: icon
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "media-controls",
+      className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: playBadgeClass, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: playBadgeIconClass }) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Pause, { className: "h-5 w-5 fill-current", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "h-5 w-5 fill-current", "aria-hidden": "true" })
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-slot": "media-controls-time",
+                  className: "shrink-0 px-1 text-xs whitespace-nowrap tabular-nums @max-md:me-auto",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("bdi", { children: labels.time(
+                    formatMs(transport.currentTimeMs),
+                    formatMs(durationMs)
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkNZUQL42A_cjs.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Captions, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CaptionsOff, { className: "h-5 w-5", "aria-hidden": "true" })
+              ),
+              barButton(
+                muted ? labels.unmute : labels.mute,
+                toggleMuted,
+                muted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "h-5 w-5", "aria-hidden": "true" })
+              ),
+              support.pip && barButton(
+                inPip ? labels.exitPictureInPicture : labels.pictureInPicture,
+                togglePictureInPicture,
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PictureInPicture2, { className: "h-5 w-5", "aria-hidden": "true" }),
+                SMALL_PLAYER_HIDDEN
+              ),
+              canFullscreen && barButton(
+                isFullscreen ? labels.exitFullscreen : labels.fullscreen,
+                toggleFullscreen,
+                isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { className: "h-5 w-5", "aria-hidden": "true" })
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+var mediaPlayerVariants = classVarianceAuthority.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__namespace.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__namespace.useState(null);
+    React__namespace.useEffect(() => {
+      setError(null);
+    }, [src]);
+    const resolvedKind = kind ?? inferMediaKind(src);
+    const transport = chunkHDZQLTBP_cjs.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__namespace.useCallback(
+      (el) => {
+        setMediaElement(el);
+        if (mediaElementRef) {
+          mediaElementRef.current = el;
+        }
+      },
+      [setMediaElement, mediaElementRef]
+    );
+    React__namespace.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__namespace.useCallback(() => {
+      setError(null);
+      mediaElement?.load();
+      onRetry?.();
+    }, [mediaElement, onRetry]);
+    const overlay = controlsStyle === "overlay" && resolvedKind === "video";
+    const boxRef = React__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: mediaPlayerVariants({ variant, className }), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-destructive-700 dark:text-destructive-300 m-0 text-sm", children: error }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunkFSARTLUE_cjs.Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "bg-background",
+                onClick: handleRetry,
+                children: labels?.retry ?? "Retry"
+              }
+            )
+          ]
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              MediaControls,
+              {
+                transport,
+                fullscreenTarget: boxRef,
+                labels,
+                playbackRates
+              }
+            )
+          ]
+        }
+      )
+    ) : (
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "audio",
+        {
+          ref: setElement,
+          className: "my-4 w-[90%] max-w-lg",
+          ...sharedMediaProps,
+          children
+        }
+      )
+    ) });
+  }
+);
+MediaPlayer.displayName = "MediaPlayer";
+
+exports.MediaControls = MediaControls;
+exports.MediaPlayer = MediaPlayer;
+exports.PIP_EVENTS = PIP_EVENTS;
+exports.defaultMediaControlsLabels = defaultMediaControlsLabels;
+exports.exitPictureInPicture = exitPictureInPicture;
+exports.inferMediaKind = inferMediaKind;
+exports.isInPictureInPicture = isInPictureInPicture;
+exports.mediaPlayerVariants = mediaPlayerVariants;
+exports.overlayButtonClass = overlayButtonClass;
+exports.playBadgeClass = playBadgeClass;
+exports.playBadgeIconClass = playBadgeIconClass;
+//# sourceMappingURL=chunk-TZKBW4GA.cjs.map
+//# sourceMappingURL=chunk-TZKBW4GA.cjs.map