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

package/dist/{chunk-AIO2GCTL.js → chunk-JUY2JLFL.js}

@@ -1,4 +1,4 @@
-import { MediaPlayer } from './chunk-R5P7NAJQ.js';
+import { defaultMediaControlsLabels, overlayButtonClass, isInPictureInPicture, exitPictureInPicture, PIP_EVENTS, MediaPlayer, playBadgeIconClass, playBadgeClass } from './chunk-JCIQIR5V.js';
 import { Avatar } from './chunk-TI3TQQ7F.js';
 import { Modal, ModalHeader, ModalTitle, ModalClose } from './chunk-GKMMDKYY.js';
 import { usePrefersReducedMotion } from './chunk-XDU65GLW.js';
@@ -39,7 +39,8 @@ function NativeFeedMedia({
   labels,
   onActivate,
   playbackPosition,
-  playbackRequestId
+  playbackRequestId,
+  overlay
 }) {
   const mediaElementRef = React2.useRef(null);
   const [state, setState] = React2.useState("idle");
@@ -55,24 +56,29 @@ function NativeFeedMedia({
   const attemptId = React2.useRef(0);
   const activeRef = React2.useRef(active);
   const canSavePosition = React2.useRef(false);
+  const autoAttempt = React2.useRef(null);
   activeRef.current = active;
-  const tryPlay = React2.useCallback(async () => {
+  const tryPlay = React2.useCallback(async (automatic = false) => {
     const element = mediaElementRef.current;
     if (!element || !activeRef.current) return;
     const attempt = ++attemptId.current;
     setBlocked(false);
+    autoAttempt.current = automatic ? attempt : null;
     try {
       await element.play();
-      if (!activeRef.current || element !== mediaElementRef.current)
+      if ((!activeRef.current || element !== mediaElementRef.current) && !isInPictureInPicture(element))
         element.pause();
     } catch (error) {
       if (!activeRef.current || attempt !== attemptId.current) return;
       if (error instanceof Error && error.name === "AbortError") return;
       setBlocked(true);
+    } finally {
+      if (autoAttempt.current === attempt) autoAttempt.current = null;
     }
   }, []);
   const pauseForOwnership = React2.useCallback(
     (element) => {
+      if (isInPictureInPicture(element)) return;
       if (element && element === mediaElementRef.current && !element.paused)
         ownershipPause.current = true;
       element?.pause();
@@ -95,9 +101,13 @@ function NativeFeedMedia({
       else element.addEventListener("loadedmetadata", restorePosition);
     }
     if (active && (latestPlaybackRequest.current === void 0 || latestPlaybackRequest.current === handledPlaybackRequest.current) && (autoPlay || wantsPlayback.current)) {
-      void tryPlay();
+      void tryPlay(!wantsPlayback.current);
     } else if (!active) {
       attemptId.current++;
+      const fullscreen = document.fullscreenElement;
+      if (element && fullscreen && (fullscreen === element || fullscreen === element.closest('[data-slot="media-player-box"]')))
+        void document.exitFullscreen?.()?.catch(() => {
+        });
       pauseForOwnership(element);
       setBlocked(false);
     }
@@ -116,6 +126,17 @@ function NativeFeedMedia({
     retryVersion,
     tryPlay
   ]);
+  React2.useEffect(() => {
+    const element = mediaElementRef.current;
+    if (!element) return;
+    const landed = () => {
+      if (!activeRef.current && !isInPictureInPicture(element)) element.pause();
+    };
+    for (const name of PIP_EVENTS) element.addEventListener(name, landed);
+    return () => {
+      for (const name of PIP_EVENTS) element.removeEventListener(name, landed);
+    };
+  }, [retryVersion]);
   React2.useEffect(() => {
     if (!active || playbackRequestId === void 0 || playbackRequestId === handledPlaybackRequest.current)
       return;
@@ -136,64 +157,126 @@ function NativeFeedMedia({
       if (active) void tryPlay();
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 w-full flex-col items-center justify-center gap-3", children: [
-    /* @__PURE__ */ jsx(
-      MediaPlayer,
-      {
-        src: media.src,
-        kind: media.kind === "audio" ? "audio" : "video",
-        mediaElementRef,
-        muted,
-        loop,
-        poster: media.poster,
-        preload: active ? "metadata" : "none",
-        controls: active,
-        "aria-label": title,
-        onStateChange: (next) => {
-          setState(next);
-          if (next === "playing") ownershipPause.current = false;
-          if (next === "paused") {
-            if (activeRef.current && !ownershipPause.current) {
-              wantsPlayback.current = false;
-              playbackPosition.playRequested = false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full min-h-0 w-full flex-col items-center justify-center",
+        overlay ? "relative" : "gap-3"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          MediaPlayer,
+          {
+            src: media.src,
+            kind: media.kind === "audio" ? "audio" : "video",
+            mediaElementRef,
+            muted,
+            loop,
+            poster: media.poster,
+            preload: active ? "metadata" : "none",
+            controls: active,
+            controlsStyle: overlay ? "overlay" : "native",
+            "aria-label": title,
+            onStateChange: (next) => {
+              setState(next);
+              if (next === "playing") {
+                ownershipPause.current = false;
+                setBlocked(false);
+                if ((activeRef.current || isInPictureInPicture(mediaElementRef.current)) && autoAttempt.current !== attemptId.current) {
+                  wantsPlayback.current = true;
+                  playbackPosition.playRequested = true;
+                }
+              }
+              if (next === "paused") {
+                if ((activeRef.current || isInPictureInPicture(mediaElementRef.current)) && !ownershipPause.current) {
+                  wantsPlayback.current = false;
+                  playbackPosition.playRequested = false;
+                }
+                ownershipPause.current = false;
+              }
+            },
+            onTimeUpdate: (timeMs) => {
+              if (canSavePosition.current) playbackPosition.timeMs = timeMs;
+            },
+            onRetry: () => {
+              ownershipPause.current = false;
+              canSavePosition.current = false;
+              setState("idle");
+              setBlocked(false);
+              setRetryVersion((version) => version + 1);
+            },
+            labels: {
+              error: labels.mediaError,
+              retry: labels.retry,
+              play: labels.play,
+              pause: labels.pause,
+              mute: labels.mute,
+              unmute: labels.unmute,
+              seek: labels.seek,
+              fullscreen: labels.playerFullscreen,
+              exitFullscreen: labels.exitPlayerFullscreen,
+              pictureInPicture: labels.pictureInPicture,
+              exitPictureInPicture: labels.exitPictureInPicture,
+              time: labels.time,
+              rate: labels.playerRate,
+              speed: labels.playerSpeed,
+              showCaptions: labels.showCaptions,
+              hideCaptions: labels.hideCaptions
+            },
+            className: "min-h-0 flex-1 [&_video]:h-full [&_video]:w-full"
+          }
+        ),
+        overlay ? (
+          // An item that isn't the active one has no controls yet: its ▶
+          // selects it and starts it.
+          !active && state !== "error" && state !== "playing" && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              "aria-label": labels.play,
+              title: labels.play,
+              className: cn(
+                overlayButtonClass,
+                playBadgeClass,
+                "pointer-events-auto pointer-fine:h-14 pointer-fine:w-14"
+              ),
+              onClick: togglePlayback,
+              children: /* @__PURE__ */ jsx(Play, { className: playBadgeIconClass, "aria-hidden": "true" })
             }
-            ownershipPause.current = false;
+          ) })
+        ) : state !== "error" && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "sm",
+            leftIcon: state === "playing" ? /* @__PURE__ */ jsx(Pause, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Play, { className: "h-4 w-4", "aria-hidden": "true" }),
+            onClick: togglePlayback,
+            children: state === "playing" ? labels.pause : labels.play
           }
-        },
-        onTimeUpdate: (timeMs) => {
-          if (canSavePosition.current) playbackPosition.timeMs = timeMs;
-        },
-        onRetry: () => {
-          ownershipPause.current = false;
-          canSavePosition.current = false;
-          setState("idle");
-          setBlocked(false);
-          setRetryVersion((version) => version + 1);
-        },
-        labels: { error: labels.mediaError, retry: labels.retry },
-        className: "min-h-0 flex-1 [&_video]:h-full [&_video]:w-full"
-      }
-    ),
-    state !== "error" && /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "secondary",
-        size: "sm",
-        leftIcon: state === "playing" ? /* @__PURE__ */ jsx(Pause, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Play, { className: "h-4 w-4", "aria-hidden": "true" }),
-        onClick: togglePlayback,
-        children: state === "playing" ? labels.pause : labels.play
-      }
-    ),
-    blocked && /* @__PURE__ */ jsx(
-      "p",
-      {
-        role: "status",
-        className: "text-muted-foreground m-0 text-center text-sm",
-        children: labels.blockedAutoplay
-      }
-    ),
-    state === "error" && /* @__PURE__ */ jsx(SourceLink, { src: media.src, labels })
-  ] });
+        ),
+        blocked && state !== "playing" && /* @__PURE__ */ jsx(
+          "p",
+          {
+            role: "status",
+            className: cn(
+              "m-0 text-center text-sm",
+              overlay ? (
+                // Along the top, clear of the details and actions at the foot
+                // and of a host's Back button in the top corner.
+                "pointer-events-none absolute inset-x-0 top-3 flex justify-center px-14"
+              ) : "text-muted-foreground"
+            ),
+            children: overlay ? /* @__PURE__ */ jsx("span", { className: "rounded bg-black/60 px-2 py-1 text-white", children: labels.blockedAutoplay }) : labels.blockedAutoplay
+          }
+        ),
+        state === "error" && /* @__PURE__ */ jsx(SourceLink, { src: media.src, labels })
+      ]
+    }
+  );
 }
 function ImageFeedMedia({ media, title, labels }) {
   const [failed, setFailed] = React2.useState(false);
@@ -298,6 +381,7 @@ function YouTubeFeedMedia({
       id && !failed ? /* @__PURE__ */ jsx(
         Button,
         {
+          type: "button",
           variant: "secondary",
           leftIcon: /* @__PURE__ */ jsx(Play, { className: "h-4 w-4", "aria-hidden": "true" }),
           onClick: () => {
@@ -335,6 +419,21 @@ var defaultLabels = {
   next: "Next item",
   play: "Play",
   pause: "Pause",
+  // The player's own controls, in the overlay layout.
+  mute: defaultMediaControlsLabels.mute,
+  unmute: defaultMediaControlsLabels.unmute,
+  seek: defaultMediaControlsLabels.seek,
+  playerFullscreen: defaultMediaControlsLabels.fullscreen,
+  exitPlayerFullscreen: defaultMediaControlsLabels.exitFullscreen,
+  pictureInPicture: defaultMediaControlsLabels.pictureInPicture,
+  exitPictureInPicture: defaultMediaControlsLabels.exitPictureInPicture,
+  time: defaultMediaControlsLabels.time,
+  playerRate: defaultMediaControlsLabels.rate,
+  playerSpeed: defaultMediaControlsLabels.speed,
+  showCaptions: defaultMediaControlsLabels.showCaptions,
+  hideCaptions: defaultMediaControlsLabels.hideCaptions,
+  showMore: "Show more",
+  showLess: "Show less",
   blockedAutoplay: "Playback did not start. Press Play to try again.",
   mediaError: "This media is unavailable.",
   openSource: "Open source",
@@ -342,6 +441,181 @@ var defaultLabels = {
   item: (position, total) => `Media item ${position} of ${total}`,
   position: (position, total) => `${position} / ${total}`
 };
+var OVERLAY_BAR_SCRIM = "[&_[data-slot=media-controls-bar]]:bg-none [&_[data-slot=media-controls-bar]]:bg-black/55";
+function useControlsBarHeight(ref) {
+  const [height, setHeight] = React2.useState(0);
+  React2.useLayoutEffect(() => {
+    const item = ref.current?.closest('[data-slot="item"]');
+    if (!item) return;
+    let bar = null;
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(
+      () => setHeight(bar?.getBoundingClientRect().height ?? 0)
+    );
+    const attach = () => {
+      const next = item.querySelector('[data-slot="media-controls-bar"]');
+      if (next === bar) return;
+      if (bar) resize?.unobserve(bar);
+      bar = next;
+      if (bar) resize?.observe(bar);
+      setHeight(bar?.getBoundingClientRect().height ?? 0);
+    };
+    attach();
+    const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(attach);
+    mutations?.observe(item, { childList: true, subtree: true });
+    return () => {
+      mutations?.disconnect();
+      resize?.disconnect();
+    };
+  }, [ref]);
+  return height;
+}
+function OverlayDetails({
+  author,
+  title,
+  caption,
+  actions,
+  fullscreenButton,
+  labels,
+  classNames
+}) {
+  const rootRef = React2.useRef(null);
+  const barHeight = useControlsBarHeight(rootRef);
+  const showCaption = caption != null && caption !== "" && !(typeof caption === "string" && caption.trim() === (title ?? "").trim());
+  const textId = React2.useId();
+  const titleRef = React2.useRef(null);
+  const captionRef = React2.useRef(null);
+  const [expanded, setExpanded] = React2.useState(false);
+  const [clipped, setClipped] = React2.useState(false);
+  React2.useLayoutEffect(() => {
+    if (expanded) return;
+    const titleEl = titleRef.current;
+    const captionEl = captionRef.current;
+    const measure = () => setClipped(
+      !!titleEl && titleEl.scrollWidth > titleEl.clientWidth + 1 || !!captionEl && captionEl.scrollHeight > captionEl.clientHeight + 1
+    );
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    for (const el of [titleEl, captionEl]) if (el) observer.observe(el);
+    return () => observer.disconnect();
+  }, [title, caption, expanded]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "data-slot": "details",
+      "data-expanded": expanded || void 0,
+      style: { bottom: barHeight, maxHeight: `calc(100% - ${barHeight}px)` },
+      className: cn(
+        "pointer-events-none absolute inset-x-0 z-10 flex items-end justify-between gap-3 bg-gradient-to-t from-black/55 via-black/30 to-transparent ps-3 pe-2 pt-16 pb-3 text-white [text-shadow:0_1px_2px_rgb(0_0_0/0.6)]",
+        // A darker scrim behind the full text, which can run over a bright frame.
+        expanded && "via-black/55",
+        classNames.details
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: textId,
+            className: cn(
+              "flex max-w-xl min-w-0 flex-1 flex-col leading-5",
+              expanded && "pointer-events-auto min-h-0 self-stretch overflow-y-auto overscroll-contain"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "mt-auto", children: [
+              author && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "author",
+                  className: cn(
+                    "mb-1 flex min-w-0 items-center gap-2",
+                    classNames.author
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        name: author.name,
+                        src: author.avatar,
+                        alt: "",
+                        size: "sm",
+                        className: "shrink-0 ring-1 ring-white/70"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        dir: "auto",
+                        className: "m-0 w-fit max-w-full truncate text-sm font-semibold",
+                        children: author.name
+                      }
+                    )
+                  ]
+                }
+              ),
+              title && /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  ref: titleRef,
+                  "data-slot": "title",
+                  dir: "auto",
+                  className: cn(
+                    "m-0 w-fit max-w-full text-sm font-semibold",
+                    expanded ? "break-words" : "truncate",
+                    classNames.title
+                  ),
+                  children: title
+                }
+              ),
+              showCaption && // A div, not a p: a host caption can hold block content, and its
+              // links stay tappable through the details layer.
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: captionRef,
+                  "data-slot": "caption",
+                  dir: "auto",
+                  className: cn(
+                    "pointer-events-auto m-0 w-fit max-w-full text-sm break-words text-white/90",
+                    !expanded && "line-clamp-2",
+                    classNames.caption
+                  ),
+                  children: caption
+                }
+              ),
+              (clipped || expanded) && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "details-toggle",
+                  "aria-expanded": expanded,
+                  "aria-controls": textId,
+                  onClick: () => setExpanded((open) => !open),
+                  className: "pointer-events-auto mt-0.5 rounded-sm text-sm font-semibold text-white/80 underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-white/70",
+                  children: expanded ? labels.showLess : labels.showMore
+                }
+              )
+            ] })
+          }
+        ),
+        (actions || fullscreenButton) && // The action column, at the bottom end beside the text.
+        /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto flex shrink-0 flex-col items-center gap-3", children: [
+          actions && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "actions",
+              className: cn(
+                "flex flex-col items-center gap-3",
+                classNames.actions
+              ),
+              children: actions
+            }
+          ),
+          fullscreenButton
+        ] })
+      ]
+    }
+  );
+}
 function MediaFeedInner({
   items,
   getId,
@@ -351,6 +625,8 @@ function MediaFeedInner({
   getAuthor,
   renderActions,
   renderMedia,
+  layout = "stacked",
+  allowFullscreen: allowFullscreenProp,
   activeItemId,
   defaultActiveItemId,
   onActiveItemChange,
@@ -367,6 +643,8 @@ function MediaFeedInner({
   ...rest
 }, forwardedRef) {
   const labels = { ...defaultLabels, ...labelOverrides };
+  const overlay = layout === "overlay";
+  const allowFullscreen = allowFullscreenProp ?? !overlay;
   const prefersReducedMotion = usePrefersReducedMotion();
   const allowAutoPlay = autoPlay && !prefersReducedMotion;
   const ids = items.map(getId);
@@ -486,8 +764,8 @@ function MediaFeedInner({
     }
   }, [activeId, idsKey, hasObserver, loading, error]);
   React2.useEffect(() => {
-    if (!items.length) setFullscreen(false);
-  }, [items.length]);
+    if (!items.length || !allowFullscreen) setFullscreen(false);
+  }, [items.length, allowFullscreen]);
   React2.useEffect(() => {
     if (loading || error || activeIndex < 0 || !playbackRequest || playbackRequest.itemId !== activeId)
       return;
@@ -577,12 +855,76 @@ function MediaFeedInner({
       playbackPosition = { src: media.src, timeMs: 0 };
       playbackPositions.current.set(id, playbackPosition);
     }
-    const title = getTitle?.(item) || labels.item(index + 1, items.length);
+    const ownTitle = getTitle?.(item);
+    const title = ownTitle || labels.item(index + 1, items.length);
     const author = getAuthor?.(item);
     const caption = getCaption?.(item);
     const active = !loading && !error && pageVisible && (immersive ? fullscreen && id === activeId : !fullscreen && viewportVisible && id === activeId && id === visibleId);
     const playbackRequestId = active && playbackRequest?.itemId === id && consumedPlaybackRequests.current.get(id) !== playbackRequest.requestId ? playbackRequest.requestId : void 0;
-    return /* @__PURE__ */ jsxs(
+    const fullscreenButton = allowFullscreen && !immersive && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        "aria-label": labels.fullscreen,
+        title: labels.fullscreen,
+        className: overlay ? cn(overlayButtonClass, "shrink-0 bg-transparent") : void 0,
+        onClick: (event) => {
+          fullscreenTriggerRef.current = event.currentTarget;
+          const open = () => {
+            select(id);
+            setFullscreen(true);
+          };
+          const video = event.currentTarget.closest('[data-slot="item"]')?.querySelector("video");
+          if (isInPictureInPicture(video))
+            void exitPictureInPicture(video).then(() => {
+              if (isInPictureInPicture(video)) video?.pause();
+              open();
+            });
+          else open();
+        },
+        children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4", "aria-hidden": "true" })
+      }
+    );
+    const mediaSlot = /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "media",
+        className: cn(
+          overlay ? (
+            // Black letterboxing around the clip, as on VideoCard.
+            "absolute inset-0 flex items-center justify-center bg-black"
+          ) : "bg-muted flex min-h-0 flex-1 items-center justify-center p-3",
+          classNames.media
+        ),
+        children: renderMedia ? renderMedia(media, {
+          item,
+          active,
+          autoPlay: allowAutoPlay,
+          muted,
+          loop,
+          playbackRequestId
+        }) : /* @__PURE__ */ jsx(
+          FeedMedia,
+          {
+            media,
+            title,
+            active,
+            autoPlay: allowAutoPlay,
+            muted,
+            loop,
+            labels,
+            onActivate: () => select(id),
+            playbackPosition,
+            playbackRequestId,
+            overlay
+          },
+          `${id}:${media.kind}:${media.src}:${immersive}`
+        )
+      }
+    );
+    return /* @__PURE__ */ jsx(
       "article",
       {
         ref: immersive ? void 0 : (node) => {
@@ -597,44 +939,29 @@ function MediaFeedInner({
         "aria-setsize": items.length,
         tabIndex: id === activeId ? 0 : -1,
         className: cn(
-          "border-border bg-card text-card-foreground focus-visible:ring-ring flex min-h-0 w-full snap-start flex-col overflow-hidden border focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
-          immersive ? "h-full flex-1 border-0" : "h-full shrink-0 rounded-xl",
+          overlay ? cn(
+            "relative h-full min-h-0 w-full snap-start snap-always overflow-hidden bg-black focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-white/70",
+            OVERLAY_BAR_SCRIM
+          ) : "border-border bg-card text-card-foreground focus-visible:ring-ring flex min-h-0 w-full snap-start flex-col overflow-hidden border focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
+          overlay ? immersive ? "flex-1" : "shrink-0" : immersive ? "h-full flex-1 border-0" : "h-full shrink-0 rounded-xl",
           classNames.item
         ),
-        children: [
+        children: overlay ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            "div",
+            OverlayDetails,
             {
-              "data-slot": "media",
-              className: cn(
-                "bg-muted flex min-h-0 flex-1 items-center justify-center p-3",
-                classNames.media
-              ),
-              children: renderMedia ? renderMedia(media, {
-                item,
-                active,
-                autoPlay: allowAutoPlay,
-                muted,
-                loop,
-                playbackRequestId
-              }) : /* @__PURE__ */ jsx(
-                FeedMedia,
-                {
-                  media,
-                  title,
-                  active,
-                  autoPlay: allowAutoPlay,
-                  muted,
-                  loop,
-                  labels,
-                  onActivate: () => select(id),
-                  playbackPosition,
-                  playbackRequestId
-                },
-                `${id}:${media.kind}:${media.src}:${immersive}`
-              )
+              author,
+              title: ownTitle,
+              caption,
+              actions: renderActions?.(item),
+              fullscreenButton,
+              labels,
+              classNames
             }
           ),
+          mediaSlot
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          mediaSlot,
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -672,26 +999,15 @@ function MediaFeedInner({
                       "h3",
                       {
                         "data-slot": "title",
-                        className: cn("m-0 text-base font-semibold", classNames.title),
+                        className: cn(
+                          "m-0 text-base font-semibold",
+                          classNames.title
+                        ),
                         children: title
                       }
                     )
                   ] }),
-                  !immersive && /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "sm",
-                      "aria-label": labels.fullscreen,
-                      title: labels.fullscreen,
-                      onClick: (event) => {
-                        fullscreenTriggerRef.current = event.currentTarget;
-                        select(id);
-                        setFullscreen(true);
-                      },
-                      children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4", "aria-hidden": "true" })
-                    }
-                  )
+                  fullscreenButton
                 ] }),
                 caption != null && /* @__PURE__ */ jsx(
                   "div",
@@ -718,12 +1034,67 @@ function MediaFeedInner({
               ]
             }
           )
-        ]
+        ] })
       },
       id
     );
   };
-  const controls = /* @__PURE__ */ jsxs(
+  const controls = overlay ? (
+    // Over the middle of the feed's end edge, stacked the way the feed
+    // scrolls, above the actions and the player's bar at the bottom. On a
+    // short screen (a phone held sideways, as SuperChat reckons it) the middle
+    // runs into the actions, so they move to the top end, clear of a host's
+    // Back at the top start.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "controls",
+        className: cn(
+          "pointer-events-none absolute end-2 top-1/2 z-10 flex -translate-y-1/2 flex-col items-center gap-1.5 [@media(max-height:30rem)]:top-2 [@media(max-height:30rem)]:translate-y-0",
+          classNames.controls
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              "aria-label": labels.previous,
+              title: labels.previous,
+              className: cn(overlayButtonClass, "pointer-events-auto"),
+              disabled: activeIndex <= 0,
+              onClick: () => navigate(activeIndex - 1),
+              children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-5 w-5", "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "status",
+              "aria-live": "polite",
+              className: "rounded-full bg-black/45 px-1.5 py-0.5 text-xs whitespace-nowrap text-white tabular-nums backdrop-blur-sm",
+              children: /* @__PURE__ */ jsx("bdi", { children: labels.position(activeIndex + 1, items.length) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              "aria-label": labels.next,
+              title: labels.next,
+              className: cn(overlayButtonClass, "pointer-events-auto"),
+              disabled: activeIndex >= items.length - 1,
+              onClick: () => navigate(activeIndex + 1),
+              children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-5 w-5", "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    )
+  ) : /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "controls",
@@ -735,6 +1106,7 @@ function MediaFeedInner({
         /* @__PURE__ */ jsx(
           Button,
           {
+            type: "button",
             variant: "ghost",
             size: "sm",
             className: "h-auto min-h-8 flex-1 py-2 [&_[data-slot=button-label]]:whitespace-normal",
@@ -750,12 +1122,13 @@ function MediaFeedInner({
             role: "status",
             "aria-live": "polite",
             className: "text-muted-foreground shrink-0 text-sm whitespace-nowrap",
-            children: labels.position(activeIndex + 1, items.length)
+            children: /* @__PURE__ */ jsx("bdi", { children: labels.position(activeIndex + 1, items.length) })
           }
         ),
         /* @__PURE__ */ jsx(
           Button,
           {
+            type: "button",
             variant: "ghost",
             size: "sm",
             className: "h-auto min-h-8 flex-1 py-2 [&_[data-slot=button-label]]:whitespace-normal",
@@ -774,8 +1147,11 @@ function MediaFeedInner({
       ref: setRoot,
       "data-slot": "root",
       "data-component": "media-feed",
+      "data-layout": layout,
+      "data-theme": overlay ? "dark" : void 0,
       className: cn(
         "bg-background text-foreground flex h-[min(48rem,80dvh)] min-h-0 w-full flex-col",
+        overlay && "relative",
         classNames.root,
         className
       ),
@@ -796,6 +1172,7 @@ function MediaFeedInner({
               error && onRetry && /* @__PURE__ */ jsx(
                 Button,
                 {
+                  type: "button",
                   variant: "outline",
                   isLoading: retrying,
                   loadingText: labels.loading,
@@ -820,7 +1197,8 @@ function MediaFeedInner({
               tabIndex: 0,
               onKeyDown: handleKeyDown,
               className: cn(
-                "focus-visible:ring-ring relative flex min-h-0 flex-1 snap-y snap-mandatory flex-col gap-4 overflow-y-auto overscroll-contain focus-visible:ring-2 focus-visible:outline-none",
+                "focus-visible:ring-ring relative flex min-h-0 flex-1 snap-y snap-mandatory flex-col overflow-y-auto overscroll-contain focus-visible:ring-2 focus-visible:outline-none",
+                !overlay && "gap-4",
                 classNames.viewport
               ),
               children: items.map((item, index) => renderCard(item, index, false))
@@ -831,7 +1209,7 @@ function MediaFeedInner({
         /* @__PURE__ */ jsxs(
           Modal,
           {
-            open: fullscreen && !loading && !error && !!items.length,
+            open: allowFullscreen && fullscreen && !loading && !error && !!items.length,
             onOpenChange: setFullscreen,
             size: "full",
             className: "h-dvh min-h-0 sm:h-[calc(100dvh-2rem)]",
@@ -845,12 +1223,15 @@ function MediaFeedInner({
                 {
                   "data-slot": "fullscreen",
                   "data-component": "media-feed",
+                  "data-layout": layout,
+                  "data-theme": overlay ? "dark" : void 0,
                   role: "feed",
                   "aria-label": labels.feed,
                   tabIndex: 0,
                   onKeyDown: handleKeyDown,
                   className: cn(
                     "flex min-h-0 flex-1 flex-col px-2 pb-2 sm:px-4",
+                    overlay && "relative",
                     classNames.fullscreen
                   ),
                   children: [
@@ -870,5 +1251,5 @@ var MediaFeed = React2.forwardRef(MediaFeedInner);
 MediaFeed.displayName = "MediaFeed";
 
 export { MediaFeed };
-//# sourceMappingURL=chunk-AIO2GCTL.js.map
-//# sourceMappingURL=chunk-AIO2GCTL.js.map
+//# sourceMappingURL=chunk-JUY2JLFL.js.map
+//# sourceMappingURL=chunk-JUY2JLFL.js.map