@xipkg/calls-compactview 0.1.55 → 0.1.57

package/dist/index.mjs

@@ -15,7 +15,7 @@ import { Button } from '@xipkg/button';
 import { ArrowLeft, ArrowRight, Account, SoundTwo, Users, External, ChevronUp, WhiteBoard, Maximize, MicrophoneOff, RedLine, ChevronBottom, ArrowUp } from '@xipkg/icons';
 import { cn } from '@xipkg/utils';
 import { useTranslation } from 'react-i18next';
-import { ParticipantTile, DevicesBar, LessonRecordButton, ScreenShareButton, DisconnectButton, ScreenShareStageToggle, ParticipantPinToggle, tileOverlayButtonClassName, PermissionsDialog, TrackMutedIndicator, ParticipantName, RaisedHandIndicator, ScreenShareZoom, VideoTrack } from '@xipkg/calls-ui';
+import { ParticipantTile, DevicesBar, LessonRecordButton, ScreenShareButton, DisconnectButton, ScreenShareStageToggle, ParticipantPinToggle, tileOverlayButtonClassName, PermissionsDialog, TrackMutedIndicator, ParticipantName, RaisedHandIndicator, VideoTrack, ScreenShareZoom } from '@xipkg/calls-ui';
 import { Tooltip, TooltipTrigger, TooltipContent } from '@xipkg/tooltip';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem } from '@xipkg/dropdown';
 import { useChatStore, Chat, ChatButton } from '@xipkg/calls-chat';
@@ -631,50 +631,70 @@ function CompactNavigationControls({
   onPrev,
   onNext,
   currentIndex,
-  totalParticipants
+  totalParticipants,
+  persistent = false
 }) {
   const { t } = useTranslation("calls");
+  const hoverOnly = persistent ? "" : "sm:opacity-0 sm:group-hover:opacity-100";
   if (totalParticipants <= 1) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx("div", { className: "bg-background-subtle/80 flex gap-1 rounded-full px-2 py-1 backdrop-blur-sm transition-opacity duration-200 sm:opacity-0 sm:group-hover:opacity-100", children: Array.from({ length: totalParticipants }, (_, index) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-        },
-        className: `h-1.5 w-1.5 rounded-full transition-colors ${index === currentIndex ? "bg-text-primary" : "bg-text-primary/40 hover:bg-text-primary/70"}`,
-        "aria-label": t("compactView.participant", { index: index + 1 })
-      },
-      index
-    )) }) }),
-    /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute top-1/2 left-2 -translate-y-1/2 transition-opacity duration-200 sm:opacity-0 sm:group-hover:opacity-100", children: /* @__PURE__ */ jsxs(
-      "button",
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(
+      "div",
       {
-        type: "button",
-        disabled: !canPrev,
-        onClick: onPrev,
-        className: "bg-background-subtle/80 hover:bg-background-subtle fill-icon-primary z-10 flex items-center justify-center rounded-full p-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        children: [
-          /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("compactView.prevParticipant") })
-        ]
+        className: `bg-background-subtle/80 flex gap-1 rounded-full px-2 py-1 backdrop-blur-sm transition-opacity duration-200 ${hoverOnly}`,
+        children: Array.from({ length: totalParticipants }, (_, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+            },
+            className: `h-1.5 w-1.5 rounded-full transition-colors ${index === currentIndex ? "bg-text-primary" : "bg-text-primary/40 hover:bg-text-primary/70"}`,
+            "aria-label": t("compactView.participant", { index: index + 1 })
+          },
+          index
+        ))
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute top-1/2 right-2 -translate-y-1/2 transition-opacity duration-200 sm:opacity-0 sm:group-hover:opacity-100", children: /* @__PURE__ */ jsxs(
-      "button",
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        type: "button",
-        disabled: !canNext,
-        onClick: onNext,
-        className: "bg-background-subtle/80 hover:bg-background-subtle fill-icon-primary z-10 flex items-center justify-center rounded-full p-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        children: [
-          /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("compactView.nextParticipant") })
-        ]
+        className: `pointer-events-auto absolute top-1/2 left-2 -translate-y-1/2 transition-opacity duration-200 ${hoverOnly}`,
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: !canPrev,
+            onClick: onPrev,
+            className: "bg-background-subtle/80 hover:bg-background-subtle fill-icon-primary z-10 flex items-center justify-center rounded-full p-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("compactView.prevParticipant") })
+            ]
+          }
+        )
       }
-    ) })
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `pointer-events-auto absolute top-1/2 right-2 -translate-y-1/2 transition-opacity duration-200 ${hoverOnly}`,
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: !canNext,
+            onClick: onNext,
+            className: "bg-background-subtle/80 hover:bg-background-subtle fill-icon-primary z-10 flex items-center justify-center rounded-full p-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("compactView.nextParticipant") })
+            ]
+          }
+        )
+      }
+    )
   ] });
 }
 function CompactMultiViewControls({
@@ -729,7 +749,9 @@ function CompactCallVideoArea({
   multiCanNext,
   onMultiPrev,
   onMultiNext,
-  onAudioExpand
+  onAudioExpand,
+  tileWidth,
+  tileHeight
 }) {
   const { t } = useTranslation("calls");
   const pip = usePiP();
@@ -775,9 +797,9 @@ function CompactCallVideoArea({
         !isMobile && compactViewMode === "expanded" && "h-auto"
       ),
       style: isMobile ? void 0 : {
-        width: COMPACT_PANEL_WIDTH_PX,
+        width: tileWidth != null ? "100%" : COMPACT_PANEL_WIDTH_PX,
         touchAction: "none",
-        ...compactViewMode === "basic" ? { height: TILE_HEIGHT_16_9_PX } : {}
+        ...compactViewMode === "basic" ? { height: tileHeight ?? TILE_HEIGHT_16_9_PX } : {}
       },
       children: [
         isMobile ? currentParticipant ? /* @__PURE__ */ jsx("div", { className: "relative h-full min-h-0 w-full min-w-0", children: /* @__PURE__ */ jsx(
@@ -867,7 +889,8 @@ function CompactCallVideoArea({
             onPrev,
             onNext,
             currentIndex,
-            totalParticipants
+            totalParticipants,
+            persistent: tileHeight != null
           }
         )
       ]
@@ -883,7 +906,8 @@ function CompactCallBottomBar({
   showBackToBoardButton,
   onBackToBoard,
   onMaximize,
-  isTutor
+  isTutor,
+  stageCompact = false
 }) {
   const { t } = useTranslation("calls");
   const screenShareStage = useCallStore((state) => state.screenShareStageIdentity);
@@ -898,109 +922,120 @@ function CompactCallBottomBar({
     "bg-background-surface border-border-default flex items-center justify-center rounded-2xl border p-1",
     withOutShadows ? "" : "shadow-lg"
   );
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-[40px] shrink-0 flex-row pb-[max(0px,env(safe-area-inset-bottom))]", children: [
-    /* @__PURE__ */ jsx("div", { className: barCn, children: /* @__PURE__ */ jsx(
-      DevicesBar,
-      {
-        className: "h-[32px] w-[32px]",
-        microTrack: devices.microTrack,
-        microEnabled: devices.microEnabled,
-        microTrackToggle: devices.microTrackToggle,
-        videoTrack: devices.videoTrack,
-        videoEnabled: devices.videoEnabled,
-        videoTrackToggle: devices.videoTrackToggle
-      }
-    ) }),
-    !isMobile && /* @__PURE__ */ jsx("div", { className: cn(barCn, "ml-1"), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "icon",
-          variant: "none",
-          onClick: onViewModeToggle,
-          className: "hover:bg-background-page text-text-primary h-8 w-8 rounded-xl p-0",
-          "aria-label": viewModeToggleMeta.label,
-          children: /* @__PURE__ */ jsx(ViewModeIcon, { className: "h-6 w-6" })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: viewModeToggleMeta.label })
-    ] }) }),
-    showBackToBoardButton && /* @__PURE__ */ jsx("div", { className: cn(barCn, "ml-1"), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "icon",
-          variant: "primary",
-          className: "h-8 w-8 rounded-xl p-0",
-          onClick: onBackToBoard,
-          "aria-label": t("compactView.toBoardAria"),
-          children: /* @__PURE__ */ jsx(WhiteBoard, { className: "fill-action-primary-text h-6 w-6" })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.toBoardTooltip") })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-auto"), children: [
-      /* @__PURE__ */ jsx(LessonRecordButton, { className: "h-8 w-8" }),
-      /* @__PURE__ */ jsx(ScreenShareButton, { className: "h-8 w-8" }),
-      /* @__PURE__ */ jsx(ChatButton, { className: "h-8 w-8 min-w-8 rounded-xl" }),
-      /* @__PURE__ */ jsx(RaiseHandButton, { className: "h-8 w-8 min-w-8" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-1"), children: [
-      !screenShareStage && (isTutor ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-10 shrink-0 flex-row",
+        stageCompact ? "max-w-full [scrollbar-width:none] overflow-x-auto [&::-webkit-scrollbar]:hidden [&>*]:shrink-0" : "pb-[max(0px,env(safe-area-inset-bottom))]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: barCn, children: /* @__PURE__ */ jsx(
+          DevicesBar,
+          {
+            className: "h-[32px] w-[32px]",
+            microTrack: devices.microTrack,
+            microEnabled: devices.microEnabled,
+            microTrackToggle: devices.microTrackToggle,
+            videoTrack: devices.videoTrack,
+            videoEnabled: devices.videoEnabled,
+            videoTrackToggle: devices.videoTrackToggle
+          }
+        ) }),
+        !isMobile && /* @__PURE__ */ jsx("div", { className: cn(barCn, "ml-1"), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             Button,
             {
               size: "icon",
               variant: "none",
-              className: "hover:bg-background-page text-text-primary relative m-0 h-8 w-8 rounded-xl p-0",
-              children: /* @__PURE__ */ jsx(Maximize, { className: "fill-icon-primary" })
+              onClick: onViewModeToggle,
+              className: "hover:bg-background-page text-text-primary h-8 w-8 rounded-xl p-0",
+              "aria-label": viewModeToggleMeta.label,
+              children: /* @__PURE__ */ jsx(ViewModeIcon, { className: "h-6 w-6" })
             }
-          ) }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.returnToConference") })
-        ] }),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "top", align: "end", className: "z-1000 min-w-[200px]", children: [
-          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-text-secondary text-sm", children: t("compactView.returnMenuLabel") }),
-          /* @__PURE__ */ jsx(
-            DropdownMenuItem,
-            {
-              onClick: () => onMaximize(false),
-              className: "text-text-primary cursor-pointer text-sm",
-              children: t("compactView.returnOnlyMe")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            DropdownMenuItem,
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: viewModeToggleMeta.label })
+        ] }) }),
+        showBackToBoardButton && /* @__PURE__ */ jsx("div", { className: cn(barCn, "ml-1"), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
             {
-              onClick: () => onMaximize(true),
-              className: "text-text-primary cursor-pointer text-sm",
-              children: t("compactView.returnEveryone")
+              size: "icon",
+              variant: "primary",
+              className: "h-8 w-8 rounded-xl p-0",
+              onClick: onBackToBoard,
+              "aria-label": t("compactView.toBoardAria"),
+              children: /* @__PURE__ */ jsx(WhiteBoard, { className: "fill-action-primary-text h-6 w-6" })
             }
-          )
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.toBoardTooltip") })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-auto"), children: [
+          /* @__PURE__ */ jsx(LessonRecordButton, { className: "h-8 w-8" }),
+          /* @__PURE__ */ jsx(ScreenShareButton, { className: "h-8 w-8" }),
+          /* @__PURE__ */ jsx(ChatButton, { className: "h-8 w-8 min-w-8 rounded-xl" }),
+          /* @__PURE__ */ jsx(RaiseHandButton, { className: "h-8 w-8 min-w-8" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-1"), children: [
+          !screenShareStage && (isTutor ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "icon",
+                  variant: "none",
+                  className: "hover:bg-background-page text-text-primary relative m-0 h-8 w-8 rounded-xl p-0",
+                  children: /* @__PURE__ */ jsx(Maximize, { className: "fill-icon-primary" })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.returnToConference") })
+            ] }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "top", align: "end", className: "z-1000 min-w-[200px]", children: [
+              /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-text-secondary text-sm", children: t("compactView.returnMenuLabel") }),
+              /* @__PURE__ */ jsx(
+                DropdownMenuItem,
+                {
+                  onClick: () => onMaximize(false),
+                  className: "text-text-primary cursor-pointer text-sm",
+                  children: t("compactView.returnOnlyMe")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DropdownMenuItem,
+                {
+                  onClick: () => onMaximize(true),
+                  className: "text-text-primary cursor-pointer text-sm",
+                  children: t("compactView.returnEveryone")
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "icon",
+                variant: "none",
+                onClick: () => onMaximize(false),
+                className: "hover:bg-background-page text-text-primary relative m-0 h-8 w-8 rounded-xl p-0",
+                children: /* @__PURE__ */ jsx(Maximize, { className: "fill-icon-primary" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.returnToConference") })
+          ] })),
+          /* @__PURE__ */ jsx(DisconnectButton, { className: "h-[32px] w-[32px] rounded-xl" })
         ] })
-      ] }) : /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "icon",
-            variant: "none",
-            onClick: () => onMaximize(false),
-            className: "hover:bg-background-page text-text-primary relative m-0 h-8 w-8 rounded-xl p-0",
-            children: /* @__PURE__ */ jsx(Maximize, { className: "fill-icon-primary" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.returnToConference") })
-      ] })),
-      /* @__PURE__ */ jsx(DisconnectButton, { className: "h-[32px] w-[32px] rounded-xl" })
-    ] })
-  ] });
+      ]
+    }
+  );
 }
 var CompactCall = ({
   saveUserChoices = true,
   withOutShadows = false,
-  freeDrag = false
+  freeDrag = false,
+  stageFrame = null
 }) => {
   const isMobile = usePhoneLayout();
+  const lockCompactModes = stageFrame?.lockCompactModes === true;
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
     id: freeDrag ? "screen-share-stage-compact" : "draggable-call",
     disabled: freeDrag ? false : isMobile
@@ -1141,20 +1176,26 @@ var CompactCall = ({
       ...freeDrag ? listeners : {},
       style: {
         ...style,
-        ...isMobile && !freeDrag ? {} : { width: COMPACT_PANEL_WIDTH_PX, touchAction: "none" }
+        ...isMobile && !freeDrag ? {} : {
+          width: stageFrame?.width ?? COMPACT_PANEL_WIDTH_PX,
+          touchAction: "none",
+          maxWidth: "100%"
+        }
       },
       className: `compact-call-container flex flex-col ${isMobile && !freeDrag ? "w-full" : "touch-none [&_video]:touch-none"} ${freeDrag ? "cursor-grab active:cursor-grabbing" : ""}`,
       children: [
         /* @__PURE__ */ jsx(
           CompactCallVideoArea,
           {
-            isMobile,
             isCollapsed,
             onCollapsedChange: setIsCollapsed,
             withOutShadows,
             dragAttributes: freeDrag ? void 0 : attributes,
             dragListeners: freeDrag ? void 0 : listeners,
-            compactViewMode,
+            compactViewMode: lockCompactModes ? "basic" : compactViewMode,
+            tileWidth: stageFrame?.width,
+            tileHeight: stageFrame?.tileHeight,
+            isMobile: stageFrame ? false : isMobile,
             currentParticipant,
             currentAudioTrack: currentAudioTrack ?? null,
             totalParticipants,
@@ -1194,7 +1235,8 @@ var CompactCall = ({
                 deviceGroups: cameraGroups
               }
             },
-            isMobile,
+            isMobile: lockCompactModes || isMobile && stageFrame == null,
+            stageCompact: lockCompactModes,
             compactViewMode,
             onViewModeToggle: () => setCompactViewMode(getNextCompactViewMode(compactViewMode)),
             showBackToBoardButton: !!showBackToBoardButton,
@@ -1207,23 +1249,115 @@ var CompactCall = ({
     }
   );
 };
-var EDGE_PX2 = 16;
-var STAGE_GONE_MS = 500;
-function clampStagePosition(x, y, width, height) {
-  const maxX = Math.max(EDGE_PX2, window.innerWidth - width - EDGE_PX2);
-  const maxY = Math.max(EDGE_PX2, window.innerHeight - height - EDGE_PX2);
+
+// src/ui/stageLayout.ts
+var EDGE_PX2 = 12;
+var CONTROLS_PX = 48;
+var EMPTY_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+function viewportBox() {
+  const viewport = window.visualViewport;
   return {
-    x: Math.min(Math.max(EDGE_PX2, x), maxX),
-    y: Math.min(Math.max(EDGE_PX2, y), maxY)
+    width: viewport?.width ?? window.innerWidth,
+    height: viewport?.height ?? window.innerHeight,
+    offsetLeft: viewport?.offsetLeft ?? 0,
+    offsetTop: viewport?.offsetTop ?? 0
   };
 }
+function readSafeInsets() {
+  if (typeof document === "undefined") return EMPTY_INSETS;
+  const probe = document.createElement("div");
+  probe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)";
+  document.body.appendChild(probe);
+  const style = getComputedStyle(probe);
+  const insets = {
+    top: Number.parseFloat(style.paddingTop) || 0,
+    right: Number.parseFloat(style.paddingRight) || 0,
+    bottom: Number.parseFloat(style.paddingBottom) || 0,
+    left: Number.parseFloat(style.paddingLeft) || 0
+  };
+  probe.remove();
+  return insets;
+}
+function computeStageFrame() {
+  const box = viewportBox();
+  const insets = readSafeInsets();
+  const landscape = box.width > box.height;
+  const handheld = box.width <= 720 || box.height <= 500;
+  if (!handheld) {
+    const width2 = 400;
+    return {
+      handheld: false,
+      landscape,
+      lockCompactModes: false,
+      width: width2,
+      tileHeight: Math.round(width2 * 9 / 16),
+      insets
+    };
+  }
+  const maxWidth = Math.max(220, box.width - insets.left - insets.right - EDGE_PX2 * 2);
+  const width = Math.min(400, maxWidth);
+  const naturalTile = Math.round(width * 9 / 16);
+  const maxPanel = box.height * 0.36;
+  const tileHeight = landscape ? naturalTile : Math.max(84, Math.min(naturalTile, Math.floor(maxPanel - CONTROLS_PX)));
+  return { handheld: true, landscape, lockCompactModes: !landscape, width, tileHeight, insets };
+}
+function sameStageFrame(left, right) {
+  return left.handheld === right.handheld && left.landscape === right.landscape && left.lockCompactModes === right.lockCompactModes && left.width === right.width && left.tileHeight === right.tileHeight && left.insets.top === right.insets.top && left.insets.right === right.insets.right && left.insets.bottom === right.insets.bottom && left.insets.left === right.insets.left;
+}
+function clampStagePosition(x, y, width, height, insets) {
+  const box = viewportBox();
+  const minX = box.offsetLeft + insets.left + 8;
+  const minY = box.offsetTop + insets.top + 8;
+  const maxX = Math.max(minX, box.offsetLeft + box.width - insets.right - width - 8);
+  const maxY = Math.max(minY, box.offsetTop + box.height - insets.bottom - height - 8);
+  return {
+    x: Math.min(Math.max(minX, x), maxX),
+    y: Math.min(Math.max(minY, y), maxY)
+  };
+}
+function defaultStagePosition(frame) {
+  const box = viewportBox();
+  const panelHeight = frame.tileHeight + CONTROLS_PX + 8;
+  if (!frame.handheld) {
+    return clampStagePosition(
+      EDGE_PX2 + frame.insets.left,
+      EDGE_PX2 + frame.insets.top,
+      frame.width,
+      panelHeight,
+      frame.insets
+    );
+  }
+  const y = box.offsetTop + box.height - frame.insets.bottom - EDGE_PX2 - panelHeight;
+  const x = frame.landscape ? box.offsetLeft + frame.insets.left + EDGE_PX2 : box.offsetLeft + (box.width - frame.width) / 2;
+  return clampStagePosition(x, y, frame.width, panelHeight, frame.insets);
+}
+function stagePanelHeight(frame) {
+  return frame.tileHeight + CONTROLS_PX + 8;
+}
+var STAGE_GONE_MS = 500;
+function initialStageFrame() {
+  if (typeof window === "undefined") {
+    return {
+      handheld: false,
+      landscape: false,
+      lockCompactModes: false,
+      width: 400,
+      tileHeight: 225,
+      insets: { top: 0, right: 0, bottom: 0, left: 0 }
+    };
+  }
+  return computeStageFrame();
+}
 var ScreenShareStage = ({ identity }) => {
   const { t } = useTranslation("calls");
   const updateStore = useCallStore((state) => state.updateStore);
   const closePiP = usePiP()?.closePiP;
   const overlayRef = useRef(null);
   const panelRef = useRef(null);
-  const [position, setPosition] = useState({ x: EDGE_PX2, y: EDGE_PX2 });
+  const movedRef = useRef(false);
+  const landscapeRef = useRef(null);
+  const [frame, setFrame] = useState(initialStageFrame);
+  const [position, setPosition] = useState(() => defaultStagePosition(initialStageFrame()));
   const tracks = useTracks([{ source: Track.Source.ScreenShare, withPlaceholder: false }], {
     onlySubscribed: false
   });
@@ -1284,34 +1418,58 @@ var ScreenShareStage = ({ identity }) => {
     };
   }, []);
   useLayoutEffect(() => {
-    const node = panelRef.current;
-    if (!node) return void 0;
-    const clamp = () => {
-      const current = panelRef.current;
-      if (!current) return;
+    const sync = () => {
+      const next = computeStageFrame();
+      setFrame((prev) => sameStageFrame(prev, next) ? prev : next);
+      const flipped = landscapeRef.current !== null && landscapeRef.current !== next.landscape;
+      landscapeRef.current = next.landscape;
+      if (flipped) movedRef.current = false;
       setPosition((prev) => {
-        const next = clampStagePosition(prev.x, prev.y, current.offsetWidth, current.offsetHeight);
-        if (next.x === prev.x && next.y === prev.y) return prev;
-        return next;
+        if (!movedRef.current) {
+          const placed = defaultStagePosition(next);
+          if (placed.x === prev.x && placed.y === prev.y) return prev;
+          return placed;
+        }
+        const node2 = panelRef.current;
+        const clamped = clampStagePosition(
+          prev.x,
+          prev.y,
+          node2?.offsetWidth ?? next.width,
+          node2?.offsetHeight ?? stagePanelHeight(next),
+          next.insets
+        );
+        if (clamped.x === prev.x && clamped.y === prev.y) return prev;
+        return clamped;
       });
     };
-    clamp();
-    const observer = new ResizeObserver(clamp);
-    observer.observe(node);
-    window.addEventListener("resize", clamp);
+    sync();
+    const viewport = window.visualViewport;
+    window.addEventListener("resize", sync);
+    window.addEventListener("orientationchange", sync);
+    viewport?.addEventListener("resize", sync);
+    viewport?.addEventListener("scroll", sync);
+    const node = panelRef.current;
+    const observer = new ResizeObserver(sync);
+    if (node) observer.observe(node);
     return () => {
+      window.removeEventListener("resize", sync);
+      window.removeEventListener("orientationchange", sync);
+      viewport?.removeEventListener("resize", sync);
+      viewport?.removeEventListener("scroll", sync);
       observer.disconnect();
-      window.removeEventListener("resize", clamp);
     };
   }, []);
   const handleDragEnd = (event) => {
+    movedRef.current = true;
     const node = panelRef.current;
+    const current = computeStageFrame();
     setPosition((prev) => {
       const next = clampStagePosition(
         prev.x + event.delta.x,
         prev.y + event.delta.y,
-        node?.offsetWidth ?? COMPACT_PANEL_WIDTH_PX,
-        node?.offsetHeight ?? 320
+        node?.offsetWidth ?? current.width,
+        node?.offsetHeight ?? stagePanelHeight(current),
+        current.insets
       );
       if (next.x === prev.x && next.y === prev.y) return prev;
       return next;
@@ -1331,7 +1489,14 @@ var ScreenShareStage = ({ identity }) => {
         className: "screen-share-stage fixed inset-0 z-[2100] bg-black outline-none",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full", children: [
-            track && publication ? /* @__PURE__ */ jsx(ScreenShareZoom, { trackRef: track, className: "rounded-none", children: /* @__PURE__ */ jsx(
+            track && publication ? frame.handheld ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(
+              VideoTrack,
+              {
+                trackRef: track,
+                manageSubscription: false,
+                className: "h-full w-full bg-black object-contain"
+              }
+            ) }) : /* @__PURE__ */ jsx(ScreenShareZoom, { trackRef: track, className: "rounded-none", children: /* @__PURE__ */ jsx(
               VideoTrack,
               {
                 trackRef: track,
@@ -1339,20 +1504,43 @@ var ScreenShareStage = ({ identity }) => {
                 className: "h-full w-full bg-black object-contain"
               }
             ) }) : null,
-            track ? /* @__PURE__ */ jsxs("div", { className: "bg-background-surface/80 pointer-events-none absolute bottom-4 left-4 z-20 flex h-6 items-center gap-1.5 rounded-lg px-1.5 py-1 backdrop-blur", children: [
-              /* @__PURE__ */ jsx(ScreenShareIcon, { style: { marginRight: "0.25rem" } }),
-              /* @__PURE__ */ jsxs("span", { className: "text-xs-base-size text-text-primary leading-[16px]", children: [
-                t("participant.screenSharePrefix"),
-                sharerName ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  "\xA0",
-                  sharerName
-                ] }) : null
-              ] })
-            ] }) : null,
-            /* @__PURE__ */ jsxs("div", { className: "absolute top-3 right-3 z-40 flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx(ScreenShareStageToggle, { trackRef: track ?? void 0, inline: true }),
-              track ? /* @__PURE__ */ jsx(ParticipantPinToggle, { trackRef: track, inline: true }) : null
-            ] })
+            track ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "bg-background-surface/80 pointer-events-none absolute z-20 flex h-6 max-w-[calc(100%-96px)] items-center gap-1.5 rounded-lg px-1.5 py-1 backdrop-blur",
+                style: frame.handheld ? {
+                  top: "max(12px, env(safe-area-inset-top))",
+                  left: "max(12px, env(safe-area-inset-left))"
+                } : {
+                  bottom: "max(16px, env(safe-area-inset-bottom))",
+                  left: "max(16px, env(safe-area-inset-left))"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ScreenShareIcon, { style: { marginRight: "0.25rem" } }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs-base-size text-text-primary truncate leading-[16px]", children: [
+                    t("participant.screenSharePrefix"),
+                    sharerName ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "\xA0",
+                      sharerName
+                    ] }) : null
+                  ] })
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "absolute z-40 flex items-center gap-1",
+                style: {
+                  top: "max(12px, env(safe-area-inset-top))",
+                  right: "max(12px, env(safe-area-inset-right))"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ScreenShareStageToggle, { trackRef: track ?? void 0, inline: true }),
+                  track ? /* @__PURE__ */ jsx(ParticipantPinToggle, { trackRef: track, inline: true }) : null
+                ]
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx(
             DndContext,
@@ -1367,12 +1555,28 @@ var ScreenShareStage = ({ identity }) => {
                   ref: panelRef,
                   className: "absolute z-30 w-max",
                   style: { left: position.x, top: position.y },
-                  children: /* @__PURE__ */ jsx(CompactCall, { freeDrag: true })
+                  children: /* @__PURE__ */ jsx(
+                    CompactCall,
+                    {
+                      freeDrag: true,
+                      stageFrame: frame.handheld ? {
+                        width: frame.width,
+                        tileHeight: frame.tileHeight,
+                        lockCompactModes: frame.lockCompactModes
+                      } : null
+                    }
+                  )
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx(Chat, { compactPositionStyle: { top: 56, right: 16, bottom: 16, zIndex: 20 } })
+          /* @__PURE__ */ jsx(
+            Chat,
+            {
+              forceSheet: frame.handheld,
+              compactPositionStyle: frame.handheld ? void 0 : { top: 56, right: 16, bottom: 16, zIndex: 20 }
+            }
+          )
         ]
       }
     ),