@xipkg/calls-compactview 0.1.53 → 0.1.55

package/dist/index.d.ts

@@ -6,9 +6,11 @@ type CompactViewPropsT = {
 };
 declare const CompactView: ({ children }: CompactViewPropsT) => react.JSX.Element;
 
-declare const CompactCall: ({ saveUserChoices, withOutShadows }: {
-    saveUserChoices?: boolean | undefined;
-    withOutShadows?: boolean | undefined;
+declare const CompactCall: ({ saveUserChoices, withOutShadows, freeDrag, }: {
+    saveUserChoices?: boolean;
+    withOutShadows?: boolean;
+    /** Панель тащится целиком в любую точку, в том числе на телефоне */
+    freeDrag?: boolean;
 }) => react.JSX.Element;
 
 interface CompactNavigationControlsProps {
@@ -48,6 +50,10 @@ type PiPProviderProps = {
  */
 declare function PiPProvider({ children }: PiPProviderProps): react.JSX.Element;
 
+/**
+ * Максимальная высота контейнера compact call (видео + нижняя панель).
+ * На доске учитывает отступы тулбара из CSS-переменных `--board-chrome-*`.
+ */
 declare function useCompactAvailableHeight(isOnBoardPage: boolean): number;
 
 declare const useCompactNavigation: () => {

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import '@xipkg/calls-ui/grid.css';
-import { createContext, useMemo, useState, useEffect, useRef, useCallback, useContext, useLayoutEffect } from 'react';
+import { createContext, useState, useEffect, useMemo, useRef, useCallback, useContext, useLayoutEffect } from 'react';
 import { useDraggable, PointerSensor, useSensors, useSensor, DndContext, TouchSensor, DragOverlay, useDndMonitor, useDroppable } from '@dnd-kit/core';
 import { useRoom, useCallsNavigation, useCalls } from '@xipkg/calls-providers';
 import { restrictToWindowEdges } from '@dnd-kit/modifiers';
 import { CSS } from '@dnd-kit/utilities';
-import { useTracks, usePersistentUserChoices, useLocalParticipant, useTrackToggle, useAudioWaveform } from '@livekit/components-react';
+import { useTracks, usePersistentUserChoices, useLocalParticipant, useTrackToggle, useAudioWaveform, ScreenShareIcon } from '@livekit/components-react';
 import { Track, RemoteTrackPublication } from 'livekit-client';
 import { applyPinsFirst, useCallStore } from '@xipkg/calls-store';
 import { useScreenShareCleanup, useSortedTracks, useClassroomPins, useVideoBlur, useDeviceMenuGroups, useSyncModeToOthers, useParticipantJoinSync, useParticipantSounds } from '@xipkg/calls-hooks';
@@ -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, ParticipantPinToggle, tileOverlayButtonClassName, PermissionsDialog, TrackMutedIndicator, ParticipantName, RaisedHandIndicator } from '@xipkg/calls-ui';
+import { ParticipantTile, DevicesBar, LessonRecordButton, ScreenShareButton, DisconnectButton, ScreenShareStageToggle, ParticipantPinToggle, tileOverlayButtonClassName, PermissionsDialog, TrackMutedIndicator, ParticipantName, RaisedHandIndicator, ScreenShareZoom, VideoTrack } 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';
@@ -120,21 +120,91 @@ function getPipHeightForMode(mode, participantCount) {
   return getPipWindowHeight(mode, 1);
 }
 
-// src/hooks/useCompactAvailableHeight.ts
-function calcAvailableHeight(isOnBoardPage) {
-  if (typeof window === "undefined") return 400;
-  const bottomOffset = isOnBoardPage ? COMPACT_BOTTOM_OFFSET_BOARD_PX : BOTTOM_OFFSET_DEFAULT_PX;
-  return window.innerHeight - HEADER_HEIGHT_PX - bottomOffset;
+// src/boardChromeInsets.ts
+var TOP_VAR = "--board-chrome-top";
+var RIGHT_VAR = "--board-chrome-right";
+var BOTTOM_VAR = "--board-chrome-bottom";
+var LEFT_VAR = "--board-chrome-left";
+var EDGE_PX = 16;
+var CHAT_TOP_PX = 128;
+var CHAT_LEFT_EXTRA_PX = 72;
+function readPx(name) {
+  if (typeof document === "undefined") return null;
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  if (!raw) return null;
+  const value = Number.parseFloat(raw);
+  return Number.isFinite(value) ? value : null;
+}
+function defaultBoardChromeInsets(isBoardPage) {
+  return {
+    top: HEADER_HEIGHT_PX,
+    right: EDGE_PX,
+    bottom: isBoardPage ? COMPACT_BOTTOM_OFFSET_BOARD_PX : BOTTOM_OFFSET_DEFAULT_PX,
+    left: EDGE_PX
+  };
+}
+function readBoardChromeInsets(isBoardPage) {
+  const fallback = defaultBoardChromeInsets(isBoardPage);
+  return {
+    top: readPx(TOP_VAR) ?? fallback.top,
+    right: readPx(RIGHT_VAR) ?? fallback.right,
+    bottom: readPx(BOTTOM_VAR) ?? fallback.bottom,
+    left: readPx(LEFT_VAR) ?? fallback.left
+  };
+}
+function sameInsets(left, right) {
+  return left.top === right.top && left.right === right.right && left.bottom === right.bottom && left.left === right.left;
+}
+function useBoardChromeInsets(isBoardPage) {
+  const [insets, setInsets] = useState(() => readBoardChromeInsets(isBoardPage));
+  useLayoutEffect(() => {
+    const update = () => {
+      const next = readBoardChromeInsets(isBoardPage);
+      setInsets((current) => sameInsets(current, next) ? current : next);
+    };
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["style"]
+    });
+    return () => observer.disconnect();
+  }, [isBoardPage]);
+  return insets;
 }
+function cornerStyle(corner, insets) {
+  switch (corner) {
+    case "top-left":
+      return { top: insets.top, left: insets.left };
+    case "top-right":
+      return { top: insets.top, right: insets.right };
+    case "bottom-left":
+      return { bottom: insets.bottom, left: insets.left };
+    case "bottom-right":
+      return { bottom: insets.bottom, right: insets.right };
+  }
+}
+function chatPositionStyle(corner, insets) {
+  const oppositeLeft = corner === "top-right" || corner === "bottom-right";
+  const top = CHAT_TOP_PX + Math.max(0, insets.top - HEADER_HEIGHT_PX);
+  return oppositeLeft ? { top, bottom: insets.bottom, left: insets.left + CHAT_LEFT_EXTRA_PX } : { top, bottom: insets.bottom, right: insets.right };
+}
+
+// src/hooks/useCompactAvailableHeight.ts
 function useCompactAvailableHeight(isOnBoardPage) {
-  const initialHeight = useMemo(() => calcAvailableHeight(isOnBoardPage), [isOnBoardPage]);
-  const [availableHeight, setAvailableHeight] = useState(initialHeight);
+  const insets = useBoardChromeInsets(isOnBoardPage);
+  const [availableHeight, setAvailableHeight] = useState(() => {
+    if (typeof window === "undefined") return 400;
+    return window.innerHeight - insets.top - insets.bottom;
+  });
   useEffect(() => {
-    setAvailableHeight(initialHeight);
-    const onResize = () => setAvailableHeight(calcAvailableHeight(isOnBoardPage));
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, [isOnBoardPage, initialHeight]);
+    const update = () => {
+      setAvailableHeight(window.innerHeight - insets.top - insets.bottom);
+    };
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, [insets.top, insets.bottom]);
   return availableHeight;
 }
 var useCompactNavigation = () => {
@@ -162,8 +232,13 @@ var useCompactNavigation = () => {
   const baseSorted = useSortedTracks(participants, 1);
   const { pins } = useClassroomPins();
   const sorted = useMemo(() => applyPinsFirst(baseSorted, pins), [baseSorted, pins]);
-  const currentParticipant = sorted[currentParticipantIndex] || null;
-  const totalParticipants = sorted.length;
+  const screenShareStageIdentity = useCallStore((state) => state.screenShareStageIdentity);
+  const visibleSorted = useMemo(() => {
+    if (!screenShareStageIdentity) return sorted;
+    return sorted.filter((trackRef) => trackRef.source !== Track.Source.ScreenShare);
+  }, [screenShareStageIdentity, sorted]);
+  const currentParticipant = visibleSorted[currentParticipantIndex] || null;
+  const totalParticipants = visibleSorted.length;
   const canGoNext = currentParticipantIndex < totalParticipants - 1;
   const canGoPrev = currentParticipantIndex > 0;
   const goToNext = () => {
@@ -192,9 +267,13 @@ var useCompactNavigation = () => {
       setCurrentParticipantIndex(0);
     }
   }, [pinsKey, pins.length]);
+  useEffect(() => {
+    if (!screenShareStageIdentity) return;
+    setCurrentParticipantIndex(0);
+  }, [screenShareStageIdentity]);
   return {
     currentParticipant,
-    participants: sorted,
+    participants: visibleSorted,
     currentIndex: currentParticipantIndex,
     totalParticipants,
     canGoNext,
@@ -484,7 +563,8 @@ function CompactCallCollapsedBar({
   participant,
   audioTrack,
   onExpand,
-  className
+  className,
+  style
 }) {
   const { t } = useTranslation("calls");
   const { bars } = useAudioWaveform(audioTrack ?? void 0, {
@@ -495,6 +575,7 @@ function CompactCallCollapsedBar({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      style,
       className: cn(
         "bg-background-surface border-border-default flex items-center gap-2 rounded-2xl border px-2 py-2 shadow-lg",
         className
@@ -751,6 +832,7 @@ function CompactCallVideoArea({
           }
         ) }) : emptyState,
         showPinPiPOverlay && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1", children: [
+          overlayTrackRef.source === Track.Source.ScreenShare ? /* @__PURE__ */ jsx(ScreenShareStageToggle, { trackRef: overlayTrackRef, inline: true }) : null,
           /* @__PURE__ */ jsx(ParticipantPinToggle, { trackRef: overlayTrackRef, inline: true }),
           showPiPButton && /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -804,6 +886,7 @@ function CompactCallBottomBar({
   isTutor
 }) {
   const { t } = useTranslation("calls");
+  const screenShareStage = useCallStore((state) => state.screenShareStageIdentity);
   const nextViewMode = getNextCompactViewMode(compactViewMode);
   const viewModeToggleMeta = {
     expanded: { Icon: Users, label: t("compactView.mode.expanded") },
@@ -863,7 +946,7 @@ function CompactCallBottomBar({
       /* @__PURE__ */ jsx(RaiseHandButton, { className: "h-8 w-8 min-w-8" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-1"), children: [
-      isTutor ? /* @__PURE__ */ jsxs(DropdownMenu, { 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,
@@ -907,18 +990,22 @@ function CompactCallBottomBar({
           }
         ) }),
         /* @__PURE__ */ jsx(TooltipContent, { children: t("compactView.returnToConference") })
-      ] }),
+      ] })),
       /* @__PURE__ */ jsx(DisconnectButton, { className: "h-[32px] w-[32px] rounded-xl" })
     ] })
   ] });
 }
-var CompactCall = ({ saveUserChoices = true, withOutShadows = false }) => {
+var CompactCall = ({
+  saveUserChoices = true,
+  withOutShadows = false,
+  freeDrag = false
+}) => {
   const isMobile = usePhoneLayout();
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
-    id: "draggable-call",
-    disabled: isMobile
+    id: freeDrag ? "screen-share-stage-compact" : "draggable-call",
+    disabled: freeDrag ? false : isMobile
   });
-  const style = isMobile ? void 0 : { transform: CSS.Translate.toString(transform) };
+  const style = !freeDrag && isMobile ? void 0 : { transform: CSS.Translate.toString(transform) };
   const { saveAudioInputEnabled, saveVideoInputEnabled } = usePersistentUserChoices({
     preventSave: !saveUserChoices
   });
@@ -1051,11 +1138,12 @@ var CompactCall = ({ saveUserChoices = true, withOutShadows = false }) => {
     "div",
     {
       ref: setNodeRef,
+      ...freeDrag ? listeners : {},
       style: {
         ...style,
-        ...isMobile ? {} : { width: COMPACT_PANEL_WIDTH_PX, touchAction: "none" }
+        ...isMobile && !freeDrag ? {} : { width: COMPACT_PANEL_WIDTH_PX, touchAction: "none" }
       },
-      className: `compact-call-container flex flex-col ${isMobile ? "w-full" : "touch-none [&_video]:touch-none"}`,
+      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,
@@ -1064,8 +1152,8 @@ var CompactCall = ({ saveUserChoices = true, withOutShadows = false }) => {
             isCollapsed,
             onCollapsedChange: setIsCollapsed,
             withOutShadows,
-            dragAttributes: attributes,
-            dragListeners: listeners,
+            dragAttributes: freeDrag ? void 0 : attributes,
+            dragListeners: freeDrag ? void 0 : listeners,
             compactViewMode,
             currentParticipant,
             currentAudioTrack: currentAudioTrack ?? null,
@@ -1119,11 +1207,177 @@ var CompactCall = ({ saveUserChoices = true, withOutShadows = false }) => {
     }
   );
 };
-var OPPOSITE_CORNER = {
-  "top-left": "top-right",
-  "top-right": "top-left",
-  "bottom-left": "bottom-right",
-  "bottom-right": "bottom-left"
+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);
+  return {
+    x: Math.min(Math.max(EDGE_PX2, x), maxX),
+    y: Math.min(Math.max(EDGE_PX2, y), maxY)
+  };
+}
+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 tracks = useTracks([{ source: Track.Source.ScreenShare, withPlaceholder: false }], {
+    onlySubscribed: false
+  });
+  const track = tracks.find((item) => item.participant.identity === identity) ?? null;
+  const publication = track?.publication;
+  const hasTrack = Boolean(publication);
+  const sensors = useSensors(
+    useSensor(CompactPointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(CompactTouchSensor, { activationConstraint: { distance: 8 } })
+  );
+  useEffect(() => {
+    closePiP?.();
+  }, [closePiP]);
+  useEffect(() => {
+    if (!(publication instanceof RemoteTrackPublication) || publication.isSubscribed) return;
+    publication.setSubscribed(true);
+  }, [publication]);
+  useEffect(() => {
+    if (hasTrack) return void 0;
+    const timeoutId = window.setTimeout(() => {
+      if (useCallStore.getState().screenShareStageIdentity === identity) {
+        useCallStore.getState().updateStore("screenShareStageIdentity", null);
+      }
+    }, STAGE_GONE_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [hasTrack, identity]);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      event.preventDefault();
+      updateStore("screenShareStageIdentity", null);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [updateStore]);
+  useEffect(() => {
+    const portalNode = overlayRef.current;
+    if (!portalNode) return void 0;
+    const hidden = [];
+    Array.from(document.body.children).forEach((node) => {
+      if (!(node instanceof HTMLElement)) return;
+      if (node === portalNode || node.contains(portalNode)) return;
+      if (node.hasAttribute("data-sonner-toaster")) return;
+      if (node.hasAttribute("inert")) return;
+      node.setAttribute("inert", "");
+      hidden.push(node);
+    });
+    const { body, documentElement } = document;
+    const previousBodyOverflow = body.style.overflow;
+    const previousHtmlOverflow = documentElement.style.overflow;
+    body.style.overflow = "hidden";
+    documentElement.style.overflow = "hidden";
+    portalNode?.focus();
+    return () => {
+      hidden.forEach((node) => node.removeAttribute("inert"));
+      body.style.overflow = previousBodyOverflow;
+      documentElement.style.overflow = previousHtmlOverflow;
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const node = panelRef.current;
+    if (!node) return void 0;
+    const clamp = () => {
+      const current = panelRef.current;
+      if (!current) return;
+      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;
+      });
+    };
+    clamp();
+    const observer = new ResizeObserver(clamp);
+    observer.observe(node);
+    window.addEventListener("resize", clamp);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", clamp);
+    };
+  }, []);
+  const handleDragEnd = (event) => {
+    const node = panelRef.current;
+    setPosition((prev) => {
+      const next = clampStagePosition(
+        prev.x + event.delta.x,
+        prev.y + event.delta.y,
+        node?.offsetWidth ?? COMPACT_PANEL_WIDTH_PX,
+        node?.offsetHeight ?? 320
+      );
+      if (next.x === prev.x && next.y === prev.y) return prev;
+      return next;
+    });
+  };
+  if (typeof document === "undefined") return null;
+  const sharerName = track?.participant.name;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: overlayRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": t("participant.stageTitle"),
+        tabIndex: -1,
+        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(
+              VideoTrack,
+              {
+                trackRef: track,
+                manageSubscription: false,
+                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
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            DndContext,
+            {
+              sensors,
+              onDragEnd: handleDragEnd,
+              modifiers: [restrictToWindowEdges],
+              autoScroll: false,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: panelRef,
+                  className: "absolute z-30 w-max",
+                  style: { left: position.x, top: position.y },
+                  children: /* @__PURE__ */ jsx(CompactCall, { freeDrag: true })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Chat, { compactPositionStyle: { top: 56, right: 16, bottom: 16, zIndex: 20 } })
+        ]
+      }
+    ),
+    document.body
+  );
 };
 var useCompactDragActive = () => {
   const [isDragging, setIsDragging] = useState(false);
@@ -1142,7 +1396,7 @@ var useCompactDragActive = () => {
   });
   return isDragging;
 };
-var DroppableCorner = ({ id, className }) => {
+var DroppableCorner = ({ id, style }) => {
   const { setNodeRef } = useDroppable({
     id
   });
@@ -1151,17 +1405,18 @@ var DroppableCorner = ({ id, className }) => {
     "div",
     {
       ref: setNodeRef,
-      className: `pointer-events-none absolute z-100 size-1/3 ${className} transition-all duration-200 ${isDragging ? "bg-status-info-background/20 ring-border-selected rounded-lg ring-2" : ""}`
+      style,
+      className: `pointer-events-none absolute z-20 size-1/3 transition-all duration-200 ${isDragging ? "bg-status-info-background/20 ring-border-selected rounded-lg ring-2" : ""}`
     }
   );
 };
-var DroppableAreas = () => {
+var DroppableAreas = ({ insets }) => {
   const isDragging = useCompactDragActive();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(DroppableCorner, { id: "top-left", className: "top-16 left-4" }),
-    /* @__PURE__ */ jsx(DroppableCorner, { id: "top-right", className: "top-16 right-4" }),
-    /* @__PURE__ */ jsx(DroppableCorner, { id: "bottom-left", className: "bottom-18 left-4" }),
-    /* @__PURE__ */ jsx(DroppableCorner, { id: "bottom-right", className: "right-4 bottom-18" }),
+    /* @__PURE__ */ jsx(DroppableCorner, { id: "top-left", style: cornerStyle("top-left", insets) }),
+    /* @__PURE__ */ jsx(DroppableCorner, { id: "top-right", style: cornerStyle("top-right", insets) }),
+    /* @__PURE__ */ jsx(DroppableCorner, { id: "bottom-left", style: cornerStyle("bottom-left", insets) }),
+    /* @__PURE__ */ jsx(DroppableCorner, { id: "bottom-right", style: cornerStyle("bottom-right", insets) }),
     /* @__PURE__ */ jsx(DragOverlay, { style: { pointerEvents: "none" }, children: isDragging ? /* @__PURE__ */ jsx(CompactCall, {}) : null })
   ] });
 };
@@ -1201,26 +1456,9 @@ var Compact = ({ children, hideOverlay = false }) => {
     }
   };
   const isBoardPage = navigation.pathnameIncludes("/board");
-  const bottomOffset = isBoardPage ? "bottom-[72px]" : "bottom-4";
+  const insets = useBoardChromeInsets(isBoardPage);
   const mobileContentMarginTop = hideOverlay || !isMobile ? 0 : (headerHeight > 0 ? headerHeight : COMPACT_MOBILE_OVERLAY_FALLBACK_PX) + COMPACT_MOBILE_CONTENT_GAP_PX;
-  const getCornerPosition = (corner) => {
-    switch (corner) {
-      case "top-left":
-        return "top-16 left-4";
-      case "top-right":
-        return "top-16 right-4";
-      case "bottom-left":
-        return `${bottomOffset} left-4`;
-      case "bottom-right":
-        return `${bottomOffset} right-4`;
-    }
-  };
-  const getChatPositionClasses = (corner) => {
-    const opposite = OPPOSITE_CORNER[corner];
-    const horizontal = opposite.includes("left") ? "left-22" : "right-4";
-    return `top-32 ${bottomOffset} ${horizontal}`;
-  };
-  const container = /* @__PURE__ */ jsx("div", { className: `relative flex h-dvh flex-col bg-transparent`, children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const container = /* @__PURE__ */ jsx("div", { className: `relative flex h-dvh flex-col bg-transparent`, "data-board-chrome-aware": "", children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
     !hideOverlay && /* @__PURE__ */ jsx("div", { ref: headerRef, className: "fixed top-2 right-0 left-0 z-10 w-full px-2", children: /* @__PURE__ */ jsx(CompactCall, { withOutShadows: true }) }),
     /* @__PURE__ */ jsx(
       "div",
@@ -1232,12 +1470,13 @@ var Compact = ({ children, hideOverlay = false }) => {
     )
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     !hideOverlay && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(DroppableAreas, {}),
-      /* @__PURE__ */ jsx(Chat, { compactPositionClassName: getChatPositionClasses(activeCorner) }),
+      /* @__PURE__ */ jsx(DroppableAreas, { insets }),
+      /* @__PURE__ */ jsx(Chat, { compactPositionStyle: chatPositionStyle(activeCorner, insets) }),
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: `absolute z-100 ${getCornerPosition(activeCorner)} transition-all duration-500 ease-out`,
+          className: "absolute z-20 transition-all duration-500 ease-out",
+          style: cornerStyle(activeCorner, insets),
           children: /* @__PURE__ */ jsx(CompactCall, {})
         }
       )
@@ -1248,11 +1487,19 @@ var Compact = ({ children, hideOverlay = false }) => {
 };
 var CompactViewInner = ({ children }) => {
   const { mode, token } = useCallStore();
+  const screenShareStageIdentity = useCallStore((state) => state.screenShareStageIdentity);
+  const isStarted = useCallStore((state) => state.isStarted);
   const { room } = useRoom();
   const pip = usePiP();
   const isPiPActive = !!pip?.isPiPActive;
   useParticipantJoinSync();
   useParticipantSounds();
+  useEffect(() => {
+    if (!screenShareStageIdentity) return;
+    if (!room || !token || !isStarted) {
+      useCallStore.getState().updateStore("screenShareStageIdentity", null);
+    }
+  }, [isStarted, room, screenShareStageIdentity, token]);
   const navigation = useCallsNavigation();
   const { updateStore: updateChatStore } = useChatStore();
   useEffect(() => {
@@ -1277,14 +1524,17 @@ var CompactViewInner = ({ children }) => {
       /* @__PURE__ */ jsx(PermissionsDialog, {})
     ] });
   }
+  const stageLayer = screenShareStageIdentity && room && token && isStarted ? /* @__PURE__ */ jsx(ScreenShareStage, { identity: screenShareStageIdentity }, screenShareStageIdentity) : null;
   if (mode === "full") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       contentWrapper,
+      stageLayer,
       /* @__PURE__ */ jsx(PermissionsDialog, {})
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Compact, { hideOverlay: isPiPActive, children }),
+    /* @__PURE__ */ jsx(Compact, { hideOverlay: isPiPActive || Boolean(screenShareStageIdentity), children }),
+    stageLayer,
     /* @__PURE__ */ jsx(PermissionsDialog, {})
   ] });
 };