@xipkg/calls-compactview 0.0.0

package/dist/index.mjs

@@ -0,0 +1,1245 @@
+import { createContext, useMemo, useState, useEffect, useRef, useCallback, useContext } from 'react';
+import { useDraggable, useSensors, useSensor, PointerSensor, DndContext, useDndMonitor, DragOverlay, useDroppable } from '@dnd-kit/core';
+import { useRoom, useCallsNavigation, useCalls } from '@xipkg/calls-providers';
+import { restrictToWindowEdges } from '@dnd-kit/modifiers';
+import { useTracks, usePersistentUserChoices, useLocalParticipant, useTrackToggle, useAudioWaveform, RoomAudioRenderer } from '@livekit/components-react';
+import { CSS } from '@dnd-kit/utilities';
+import { Track } from 'livekit-client';
+import { useCallStore, useFeaturesStore, useFocusModeStore } from '@xipkg/calls-store';
+import { useScreenShareCleanup, useVideoBlur, useModeSync, useParticipantJoinSync, useParticipantSounds } from '@xipkg/calls-hooks';
+import { useMedia } from '@xipkg/calls-utils';
+import { Button } from '@xipkg/button';
+import { ArrowLeft, ArrowRight, Users, Account, External, ChevronUp, WhiteBoard, Maximize, ArrowUp, MicrophoneOff, RedLine, ChevronBottom } from '@xipkg/icons';
+import { cn } from '@xipkg/utils';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ParticipantTile, DevicesBar, ScreenShareButton, DisconnectButton, PermissionsDialog, TrackMutedIndicator, ParticipantName, RaisedHandIndicator } from '@xipkg/calls-ui';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@xipkg/tooltip';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem } from '@xipkg/dropdown';
+import { ChatButton, useChatStore, Chat } from '@xipkg/calls-chat';
+import { RaiseHandButton } from '@xipkg/calls-risehand';
+
+// src/ui/CompactView.tsx
+
+// src/constants.ts
+var HEADER_HEIGHT_PX = 64;
+var BOARD_BOTTOM_TOOLBAR_PX = 64;
+var BOTTOM_OFFSET_DEFAULT_PX = 16;
+var COMPACT_BOTTOM_BAR_PX = 40;
+var TILE_GAP_PX = 8;
+var EXPANDED_VIDEO_PADDING_VERTICAL_PX = 8;
+var COMPACT_VIDEO_AREA_MARGIN_PX = 8;
+var COMPACT_BOTTOM_OFFSET_BOARD_PX = BOARD_BOTTOM_TOOLBAR_PX + TILE_GAP_PX;
+var COMPACT_PANEL_WIDTH_PX = 360;
+var TILE_HEIGHT_16_9_PX = Math.round(COMPACT_PANEL_WIDTH_PX * 9 / 16);
+var PIP_PANEL_WIDTH_PX = 380;
+var PIP_BAR_HEIGHT_PX = 48;
+var PIP_VIDEO_BAR_GAP_PX = 4;
+var PIP_EXPANDED_INNER_PADDING_PX = 4;
+var PIP_RESERVED_HEIGHT_PX = PIP_BAR_HEIGHT_PX + PIP_VIDEO_BAR_GAP_PX + EXPANDED_VIDEO_PADDING_VERTICAL_PX + PIP_EXPANDED_INNER_PADDING_PX;
+var PIP_TILE_HEIGHT_16_9_PX = Math.round(PIP_PANEL_WIDTH_PX * 9 / 16);
+var PIP_EXTRA_HEIGHT_PX = 36;
+var PIP_EXTRA_HEIGHT_EXPANDED_PX = 12;
+var PIP_HEIGHT_BASIC_PX = PIP_BAR_HEIGHT_PX + PIP_TILE_HEIGHT_16_9_PX + EXPANDED_VIDEO_PADDING_VERTICAL_PX;
+function getPipHeightExpandedPx(participantCount) {
+  const n = Math.min(Math.max(1, participantCount), 4);
+  return PIP_BAR_HEIGHT_PX + n * PIP_TILE_HEIGHT_16_9_PX + (n - 1) * TILE_GAP_PX + EXPANDED_VIDEO_PADDING_VERTICAL_PX + PIP_EXTRA_HEIGHT_PX + PIP_EXTRA_HEIGHT_EXPANDED_PX;
+}
+
+// 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;
+}
+function useCompactAvailableHeight(isOnBoardPage) {
+  const initialHeight = useMemo(() => calcAvailableHeight(isOnBoardPage), [isOnBoardPage]);
+  const [availableHeight, setAvailableHeight] = useState(initialHeight);
+  useEffect(() => {
+    setAvailableHeight(initialHeight);
+    const onResize = () => setAvailableHeight(calcAvailableHeight(isOnBoardPage));
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [isOnBoardPage, initialHeight]);
+  return availableHeight;
+}
+var useCompactNavigation = () => {
+  const [currentParticipantIndex, setCurrentParticipantIndex] = useState(0);
+  const participants = useTracks(
+    [
+      { source: Track.Source.Camera, withPlaceholder: true },
+      { source: Track.Source.ScreenShare, withPlaceholder: false }
+    ],
+    {
+      onlySubscribed: false
+      // Получаем все треки, включая неподписанные для корректного подсчета участников
+    }
+  );
+  useScreenShareCleanup(participants);
+  const currentParticipant = participants[currentParticipantIndex] || null;
+  const totalParticipants = participants.length;
+  const canGoNext = currentParticipantIndex < totalParticipants - 1;
+  const canGoPrev = currentParticipantIndex > 0;
+  const goToNext = () => {
+    if (canGoNext) {
+      setCurrentParticipantIndex((prev) => prev + 1);
+    }
+  };
+  const goToPrev = () => {
+    if (canGoPrev) {
+      setCurrentParticipantIndex((prev) => prev - 1);
+    }
+  };
+  const goToParticipant = (index) => {
+    if (index >= 0 && index < totalParticipants) {
+      setCurrentParticipantIndex(index);
+    }
+  };
+  useEffect(() => {
+    if (currentParticipantIndex >= totalParticipants && totalParticipants > 0) {
+      setCurrentParticipantIndex(Math.max(0, totalParticipants - 1));
+    }
+  }, [totalParticipants, currentParticipantIndex]);
+  return {
+    currentParticipant,
+    participants,
+    currentIndex: currentParticipantIndex,
+    totalParticipants,
+    canGoNext,
+    canGoPrev,
+    goToNext,
+    goToPrev,
+    goToParticipant
+  };
+};
+function copyStylesToWindow(targetWindow) {
+  [...document.styleSheets].forEach((styleSheet) => {
+    try {
+      const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
+      const style = document.createElement("style");
+      style.textContent = cssRules;
+      targetWindow.document.head.appendChild(style);
+    } catch {
+      if (styleSheet.href) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.type = styleSheet.type || "text/css";
+        link.media = styleSheet.media.mediaText;
+        link.href = styleSheet.href;
+        targetWindow.document.head.appendChild(link);
+      }
+    }
+  });
+  try {
+    document.fonts.forEach((font) => {
+      targetWindow.document.fonts.add(font);
+    });
+  } catch {
+  }
+}
+function useDocumentPiP({
+  width = 380,
+  height = 270,
+  enabled = true,
+  microphoneActive = false,
+  cameraActive = false
+} = {}) {
+  const [pipWindow, setPipWindow] = useState(null);
+  const pipWindowRef = useRef(null);
+  const micActiveRef = useRef(microphoneActive);
+  const camActiveRef = useRef(cameraActive);
+  micActiveRef.current = microphoneActive;
+  camActiveRef.current = cameraActive;
+  const isSupported = typeof window !== "undefined" && "documentPictureInPicture" in window;
+  useEffect(() => {
+    if (!enabled) return;
+    try {
+      navigator.mediaSession.setMicrophoneActive(microphoneActive);
+    } catch {
+    }
+    try {
+      navigator.mediaSession.setCameraActive(cameraActive);
+    } catch {
+    }
+  }, [enabled, microphoneActive, cameraActive]);
+  const openPiP = useCallback(
+    async (overrides) => {
+      if (!isSupported || !enabled) return null;
+      if (pipWindowRef.current) return pipWindowRef.current;
+      const w = overrides?.width ?? width;
+      const h = overrides?.height ?? height;
+      try {
+        const pip = await window.documentPictureInPicture.requestWindow({
+          width: w,
+          height: h
+        });
+        copyStylesToWindow(pip);
+        pip.document.body.style.margin = "0";
+        pip.document.body.style.overflow = "hidden";
+        pip.document.body.style.background = "var(--xi-gray-0, #fff)";
+        pipWindowRef.current = pip;
+        setPipWindow(pip);
+        pip.addEventListener("pagehide", () => {
+          pipWindowRef.current = null;
+          setPipWindow(null);
+        });
+        return pip;
+      } catch {
+        return null;
+      }
+    },
+    [isSupported, enabled, width, height]
+  );
+  const closePiP = useCallback(() => {
+    if (pipWindowRef.current) {
+      pipWindowRef.current.close();
+    }
+  }, []);
+  useEffect(() => {
+    if (!isSupported || !enabled) return;
+    const action = "enterpictureinpicture";
+    try {
+      navigator.mediaSession.setActionHandler(action, () => void openPiP());
+    } catch {
+    }
+    return () => {
+      try {
+        navigator.mediaSession.setActionHandler(action, null);
+      } catch {
+      }
+    };
+  }, [isSupported, enabled, openPiP]);
+  useEffect(() => {
+    if (!enabled) return;
+    const handleVisibilityChange = () => {
+      if (!document.hidden && pipWindowRef.current) {
+        closePiP();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [enabled, closePiP]);
+  useEffect(() => {
+    return () => {
+      pipWindowRef.current?.close();
+      pipWindowRef.current = null;
+    };
+  }, []);
+  const resizePiP = useCallback((w, h) => {
+    if (pipWindowRef.current) {
+      try {
+        pipWindowRef.current.resizeTo(w, h);
+      } catch {
+      }
+    }
+  }, []);
+  return {
+    isSupported,
+    pipWindow,
+    isPiPActive: pipWindow !== null,
+    openPiP,
+    closePiP,
+    resizePiP
+  };
+}
+var PiPContext = createContext(null);
+function usePiP() {
+  const ctx = useContext(PiPContext);
+  return ctx;
+}
+function getMediaStreamTrack(pub) {
+  return pub?.track?.mediaStreamTrack;
+}
+function useMediaCaptureLive() {
+  const { microphoneTrack, cameraTrack } = useLocalParticipant();
+  const micTrack = getMediaStreamTrack(microphoneTrack);
+  const camTrack = getMediaStreamTrack(cameraTrack);
+  const micLive = !!micTrack && micTrack.readyState === "live" && micTrack.enabled;
+  const camLive = !!camTrack && camTrack.readyState === "live" && camTrack.enabled;
+  return { micLive, camLive };
+}
+function PiPProvider({ children }) {
+  const isMobile = useMedia("(max-width: 720px)");
+  const { micLive, camLive } = useMediaCaptureLive();
+  const { room } = useRoom();
+  const compactViewMode = useCallStore((s) => s.compactViewMode);
+  const { totalParticipants } = useCompactNavigation();
+  const {
+    pipWindow,
+    closePiP,
+    resizePiP,
+    openPiP: openPiPRaw,
+    isSupported
+  } = useDocumentPiP({
+    enabled: !isMobile,
+    width: PIP_PANEL_WIDTH_PX,
+    height: PIP_HEIGHT_BASIC_PX,
+    microphoneActive: micLive,
+    cameraActive: camLive
+  });
+  const openPiP = useCallback(async () => {
+    const height = compactViewMode === "basic" ? PIP_HEIGHT_BASIC_PX : getPipHeightExpandedPx(totalParticipants);
+    await openPiPRaw({ height });
+  }, [openPiPRaw, compactViewMode, totalParticipants]);
+  useEffect(() => {
+    if (!room || !pipWindow) return;
+    if (room.state !== "connected") {
+      closePiP();
+      return;
+    }
+    const handleState = () => {
+      if (room.state !== "connected") closePiP();
+    };
+    room.on("connectionStateChanged", handleState);
+    return () => {
+      room.off("connectionStateChanged", handleState);
+    };
+  }, [room, pipWindow, closePiP]);
+  useEffect(() => {
+    if (!pipWindow || !resizePiP) return;
+    const height = compactViewMode === "basic" ? PIP_HEIGHT_BASIC_PX + PIP_EXTRA_HEIGHT_PX : getPipHeightExpandedPx(totalParticipants);
+    resizePiP(PIP_PANEL_WIDTH_PX, height);
+  }, [pipWindow, resizePiP, compactViewMode, totalParticipants]);
+  const value = {
+    openPiP,
+    isPiPActive: pipWindow !== null,
+    isSupported: isSupported && !isMobile
+  };
+  return /* @__PURE__ */ jsxs(PiPContext.Provider, { value, children: [
+    children,
+    pipWindow && createPortal(/* @__PURE__ */ jsx(PiPCompactCall, { pipWindow }), pipWindow.document.body)
+  ] });
+}
+function CompactCallCollapsedBar({
+  participant,
+  audioTrack,
+  onExpand,
+  className
+}) {
+  const { bars } = useAudioWaveform(audioTrack ?? void 0, {
+    barCount: 24,
+    volMultiplier: 4,
+    updateInterval: 50
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-gray-20 flex items-center gap-2 rounded-2xl px-2 py-2 shadow-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-gray-0/80 flex h-6 max-w-[45%] min-w-0 shrink gap-1.5 rounded-lg px-1.5 py-1 backdrop-blur", children: participant ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            TrackMutedIndicator,
+            {
+              trackRef: {
+                participant,
+                source: Track.Source.Microphone
+              },
+              show: "muted",
+              style: { marginRight: "0.45rem", background: "transparent" }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "flex min-w-0 truncate", children: /* @__PURE__ */ jsx(ParticipantName, { participant }) })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative w-3 shrink-0", children: [
+            /* @__PURE__ */ jsx(MicrophoneOff, { className: "absolute h-4 w-4 fill-gray-100" }),
+            /* @__PURE__ */ jsx(RedLine, { className: "fill-red-80 absolute h-4 w-4" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs-base-size leading-4 text-gray-100", children: "\u041D\u0435\u0442 \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A\u043E\u0432" })
+        ] }) }),
+        participant && /* @__PURE__ */ jsx(RaisedHandIndicator, { participant: participant ?? "unknown" }),
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-center gap-0.5 py-1", children: bars.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-4 items-end justify-center gap-0.5", children: bars.map((h, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bg-brand-80 w-0.5 min-w-0.5 rounded-full transition-all duration-75",
+            style: { height: `${Math.min(100, Math.max(20, h * 150))}%` }
+          },
+          i
+        )) }) : /* @__PURE__ */ jsx("div", { className: "bg-brand-60 h-2 w-12 rounded-full" }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "icon",
+            variant: "none",
+            onClick: onExpand,
+            className: "bg-brand-100 hover:bg-brand-100/80 h-8 w-8 shrink-0 rounded-xl p-0 text-gray-100",
+            "aria-label": "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C",
+            children: /* @__PURE__ */ jsx(ChevronBottom, { className: "fill-gray-0 h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function CompactNavigationControls({
+  canPrev,
+  canNext,
+  onPrev,
+  onNext,
+  currentIndex,
+  totalParticipants
+}) {
+  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-gray-10/80 flex gap-1 rounded-full px-2 py-1 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-gray-100" : "bg-gray-100/50 hover:bg-gray-100/75"}`,
+        "aria-label": `\u0423\u0447\u0430\u0441\u0442\u043D\u0438\u043A ${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",
+      {
+        type: "button",
+        disabled: !canPrev,
+        onClick: onPrev,
+        className: "bg-gray-10/80 hover:bg-gray-10 z-10 flex items-center justify-center rounded-full fill-gray-100 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: "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A" })
+        ]
+      }
+    ) }),
+    /* @__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",
+      {
+        type: "button",
+        disabled: !canNext,
+        onClick: onNext,
+        className: "bg-gray-10/80 hover:bg-gray-10 z-10 flex items-center justify-center rounded-full fill-gray-100 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: "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A" })
+        ]
+      }
+    ) })
+  ] });
+}
+function CompactMultiViewControls({
+  canPrev,
+  canNext,
+  onPrev,
+  onNext
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0", children: [
+    canPrev && /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute top-2 left-1/2 z-10 -translate-x-1/2", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onPrev,
+        className: "bg-gray-10/80 hover:bg-gray-10 flex items-center justify-center rounded-full fill-gray-100 p-2",
+        "aria-label": "\u041B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u0432\u0435\u0440\u0445",
+        children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4 fill-inherit" })
+      }
+    ) }),
+    canNext && /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute bottom-2 left-1/2 z-10 -translate-x-1/2", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onNext,
+        className: "bg-gray-10/80 hover:bg-gray-10 flex items-center justify-center rounded-full fill-gray-100 p-2",
+        "aria-label": "\u041B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043D\u0438\u0437",
+        children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4 rotate-180 fill-inherit" })
+      }
+    ) })
+  ] });
+}
+function CompactCallVideoArea({
+  isMobile,
+  isCollapsed,
+  onCollapsedChange,
+  withOutShadows,
+  dragAttributes = {},
+  dragListeners = {},
+  compactViewMode,
+  currentParticipant,
+  currentAudioTrack,
+  totalParticipants,
+  canGoPrev,
+  canGoNext,
+  onPrev,
+  onNext,
+  currentIndex,
+  multiVisibleParticipants,
+  multiTileHeightPx,
+  multiCanPrev,
+  multiCanNext,
+  onMultiPrev,
+  onMultiNext
+}) {
+  const pip = usePiP();
+  const showPiPButton = pip?.isSupported && currentParticipant;
+  const emptyState = /* @__PURE__ */ jsx("div", { className: "bg-gray-40 flex h-full w-full items-center justify-center text-gray-100", children: /* @__PURE__ */ jsx("span", { className: "text-sm", children: "\u041D\u0435\u0442 \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A\u043E\u0432" }) });
+  if (isMobile && isCollapsed) {
+    return /* @__PURE__ */ jsx(
+      CompactCallCollapsedBar,
+      {
+        participant: currentParticipant?.participant ?? null,
+        audioTrack: currentAudioTrack ?? null,
+        onExpand: () => onCollapsedChange(false),
+        className: cn("mb-2", withOutShadows ? "" : "shadow-lg")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...isMobile ? {} : { ...dragAttributes, ...dragListeners },
+      className: cn(
+        "group relative mb-2 flex overflow-hidden rounded-2xl",
+        withOutShadows ? "" : "shadow-lg",
+        isMobile ? "h-auto w-full items-center justify-center" : "w-[360px] cursor-move flex-col",
+        !isMobile && compactViewMode === "basic" && "shrink-0",
+        !isMobile && compactViewMode === "expanded" && "h-auto"
+      ),
+      style: !isMobile && compactViewMode === "basic" ? { height: TILE_HEIGHT_16_9_PX } : void 0,
+      children: [
+        isMobile ? currentParticipant ? /* @__PURE__ */ jsx(
+          ParticipantTile,
+          {
+            trackRef: currentParticipant,
+            participant: currentParticipant.participant,
+            className: "h-full w-full",
+            isFocusToggleDisable: true
+          }
+        ) : emptyState : compactViewMode === "expanded" ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative flex flex-col gap-2 overflow-hidden rounded-2xl p-1",
+            style: { gap: TILE_GAP_PX },
+            children: [
+              multiVisibleParticipants.length === 0 ? emptyState : multiVisibleParticipants.map((trackRef) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "aspect-video w-full shrink-0 overflow-hidden rounded-xl",
+                  style: { minHeight: multiTileHeightPx },
+                  children: /* @__PURE__ */ jsx(
+                    ParticipantTile,
+                    {
+                      trackRef,
+                      participant: trackRef.participant,
+                      className: "h-full w-full [&_video]:object-cover",
+                      isFocusToggleDisable: true
+                    }
+                  )
+                },
+                `${trackRef.participant.identity}-${trackRef.source}`
+              )),
+              /* @__PURE__ */ jsx(
+                CompactMultiViewControls,
+                {
+                  canPrev: multiCanPrev,
+                  canNext: multiCanNext,
+                  onPrev: onMultiPrev,
+                  onNext: onMultiNext
+                }
+              )
+            ]
+          }
+        ) : currentParticipant ? /* @__PURE__ */ jsx(
+          ParticipantTile,
+          {
+            trackRef: currentParticipant,
+            participant: currentParticipant.participant,
+            className: "h-full w-full",
+            isFocusToggleDisable: true
+          }
+        ) : emptyState,
+        showPiPButton && /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "icon",
+              variant: "none",
+              onClick: () => void pip.openPiP(),
+              className: "bg-gray-10/80 hover:bg-gray-10 text-gray-0 absolute top-2 right-2 z-10 h-8 w-8 rounded-xl p-0",
+              "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u043E\u043C \u043E\u043A\u043D\u0435",
+              children: /* @__PURE__ */ jsx(External, { className: "h-4 w-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u043E\u043C \u043E\u043A\u043D\u0435" })
+        ] }),
+        isMobile && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "icon",
+            variant: "none",
+            onClick: () => onCollapsedChange(true),
+            className: "bg-brand-100 hover:bg-brand-100/80 absolute top-2 right-2 z-10 h-8 w-8 rounded-xl p-0 text-gray-100",
+            "aria-label": "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C",
+            children: /* @__PURE__ */ jsx(ChevronUp, { className: "fill-gray-0 h-4 w-4" })
+          }
+        ),
+        totalParticipants > 0 && (isMobile || compactViewMode === "basic") && /* @__PURE__ */ jsx(
+          CompactNavigationControls,
+          {
+            canPrev: canGoPrev,
+            canNext: canGoNext,
+            onPrev,
+            onNext,
+            currentIndex,
+            totalParticipants
+          }
+        )
+      ]
+    }
+  );
+}
+function CompactCallBottomBar({
+  withOutShadows,
+  devices,
+  isMobile,
+  compactViewMode,
+  onViewModeToggle,
+  showBackToBoardButton,
+  onBackToBoard,
+  onMaximize,
+  isTutor
+}) {
+  const barCn = cn(
+    "bg-gray-0 border-gray-20 flex items-center justify-center rounded-2xl border p-1",
+    withOutShadows ? "" : "shadow-lg"
+  );
+  const {
+    chat: isChatEnabled,
+    raiseHand: isRiseHandEnabled,
+    whiteboard: isWhiteboardEnabled
+  } = useFeaturesStore((s) => s.features);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-10 flex-row", children: [
+    /* @__PURE__ */ jsx("div", { className: barCn, children: /* @__PURE__ */ jsx(
+      DevicesBar,
+      {
+        className: "h-8 w-8",
+        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-gray-5 h-8 w-8 rounded-xl p-0 text-gray-100",
+          "aria-label": compactViewMode === "basic" ? "\u0420\u0430\u0437\u0432\u0451\u0440\u043D\u0443\u0442\u044B\u0439 \u0432\u0438\u0434" : "\u041E\u0434\u0438\u043D \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A",
+          children: compactViewMode === "basic" ? /* @__PURE__ */ jsx(Users, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Account, { className: "h-5 w-5" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: compactViewMode === "basic" ? "\u0420\u0430\u0437\u0432\u0451\u0440\u043D\u0443\u0442\u044B\u0439 \u0432\u0438\u0434 (\u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A\u043E\u0432)" : "\u041E\u0434\u0438\u043D \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A" })
+    ] }) }),
+    isWhiteboardEnabled && 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": "\u041D\u0430 \u0434\u043E\u0441\u043A\u0443",
+          children: /* @__PURE__ */ jsx(WhiteBoard, { className: "fill-gray-0 h-5 w-5" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: "\u041E\u0431\u0440\u0430\u0442\u043D\u043E \u043D\u0430 \u0434\u043E\u0441\u043A\u0443" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-auto"), children: [
+      /* @__PURE__ */ jsx(ScreenShareButton, { className: "h-8 w-8" }),
+      isChatEnabled && /* @__PURE__ */ jsx(ChatButton, { className: "h-8 w-8 min-w-8 rounded-xl" }),
+      isRiseHandEnabled && /* @__PURE__ */ jsx(RaiseHandButton, { className: "h-8 w-8" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-1"), children: [
+      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-gray-5 relative m-0 h-8 w-8 rounded-xl p-0 text-gray-100",
+              children: /* @__PURE__ */ jsx(Maximize, { className: "fill-gray-100" })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u0432 \u043A\u043E\u043D\u0444\u0435\u0440\u0435\u043D\u0446\u0438\u044E" })
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "top", align: "end", className: "z-1000 min-w-50", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-gray-60 text-sm", children: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C \u0432 \u043A\u043E\u043D\u0444\u0435\u0440\u0435\u043D\u0446\u0438\u044E" }),
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onClick: () => onMaximize(false),
+              className: "text-gray-80 cursor-pointer text-sm",
+              children: "\u0422\u043E\u043B\u044C\u043A\u043E \u043C\u0435\u043D\u044F"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              onClick: () => onMaximize(true),
+              className: "text-gray-80 cursor-pointer text-sm",
+              children: "\u0412\u0441\u0435\u0445 \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A\u043E\u0432"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "icon",
+            variant: "none",
+            onClick: () => onMaximize(false),
+            className: "hover:bg-gray-5 relative m-0 h-8 w-8 rounded-xl p-0 text-gray-100",
+            children: /* @__PURE__ */ jsx(Maximize, { className: "fill-gray-100" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u0432 \u043A\u043E\u043D\u0444\u0435\u0440\u0435\u043D\u0446\u0438\u044E" })
+      ] }),
+      /* @__PURE__ */ jsx(DisconnectButton, { className: "h-8 w-8 rounded-xl" })
+    ] })
+  ] });
+}
+var CompactCall = ({ saveUserChoices = true, withOutShadows = false }) => {
+  const isMobile = useMedia("(max-width: 720px)");
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id: "draggable-call",
+    disabled: isMobile
+  });
+  const style = isMobile ? void 0 : { transform: CSS.Translate.toString(transform) };
+  const { saveAudioInputEnabled, saveVideoInputEnabled } = usePersistentUserChoices({
+    preventSave: !saveUserChoices
+  });
+  const { isMicrophoneEnabled, isCameraEnabled, microphoneTrack, cameraTrack } = useLocalParticipant();
+  const videoTrack = cameraTrack?.track;
+  const mode = useCallStore((state) => state.mode);
+  useVideoBlur(mode === "compact" ? videoTrack : null);
+  const microphoneToggle = useTrackToggle({
+    source: Track.Source.Microphone,
+    onChange: (enabled, isUserInitiated) => {
+      if (isUserInitiated) saveAudioInputEnabled(enabled);
+    }
+  });
+  const cameraToggle = useTrackToggle({
+    source: Track.Source.Camera,
+    onChange: (enabled, isUserInitiated) => {
+      if (isUserInitiated) saveVideoInputEnabled(enabled);
+    }
+  });
+  const handleMicrophoneToggle = useCallback(() => microphoneToggle.toggle(), [microphoneToggle]);
+  const handleCameraToggle = useCallback(() => cameraToggle.toggle(), [cameraToggle]);
+  const compactNavigation = useCompactNavigation();
+  const {
+    currentParticipant,
+    participants,
+    currentIndex,
+    totalParticipants,
+    canGoNext,
+    canGoPrev,
+    goToNext,
+    goToPrev
+  } = compactNavigation;
+  const callsNavigation = useCallsNavigation();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const compactViewMode = useCallStore((state) => state.compactViewMode);
+  const updateStore = useCallStore((state) => state.updateStore);
+  const setCompactViewMode = useCallback(
+    (mode2) => updateStore("compactViewMode", mode2),
+    [updateStore]
+  );
+  const [multiScrollIndex, setMultiScrollIndex] = useState(0);
+  const currentAudioTrack = currentParticipant?.participant?.getTrackPublication(
+    Track.Source.Microphone
+  )?.track;
+  const { syncModeToOthers } = useModeSync();
+  const activeBoardId = useCallStore((state) => state.activeBoardId);
+  const activeClassroom = useCallStore((state) => state.activeClassroom);
+  const { room } = useRoom();
+  const token = useCallStore((state) => state.token);
+  const { data: user } = useCalls().auth.useCurrentUser();
+  const isTutor = user?.default_layout === "tutor";
+  const isBoardPage = callsNavigation.pathnameIncludes("/board");
+  const isOnBoardPage = callsNavigation.params.classroomId === activeClassroom && callsNavigation.params.boardId === activeBoardId;
+  const showBackToBoardButton = mode === "compact" && !!activeBoardId && !!activeClassroom && !isOnBoardPage;
+  const availableHeight = useCompactAvailableHeight(isBoardPage);
+  const multiViewLayout = useMemo(() => {
+    const heightForTiles = Math.max(
+      0,
+      availableHeight - COMPACT_BOTTOM_BAR_PX - EXPANDED_VIDEO_PADDING_VERTICAL_PX - COMPACT_VIDEO_AREA_MARGIN_PX
+    );
+    const visibleCount = Math.min(
+      totalParticipants,
+      Math.max(1, Math.floor((heightForTiles + TILE_GAP_PX) / (TILE_HEIGHT_16_9_PX + TILE_GAP_PX)))
+    );
+    return { visibleCount, tileHeightPx: TILE_HEIGHT_16_9_PX };
+  }, [availableHeight, totalParticipants]);
+  const { visibleCount: multiVisibleCount, tileHeightPx: multiTileHeightPx } = multiViewLayout;
+  const multiCanPrev = multiScrollIndex > 0;
+  const multiCanNext = multiScrollIndex + multiVisibleCount < totalParticipants;
+  const multiVisibleParticipants = participants.slice(
+    multiScrollIndex,
+    multiScrollIndex + multiVisibleCount
+  );
+  useEffect(() => {
+    if (multiScrollIndex + multiVisibleCount > totalParticipants && totalParticipants > 0) {
+      setMultiScrollIndex(Math.max(0, totalParticipants - multiVisibleCount));
+    }
+  }, [totalParticipants, multiVisibleCount, multiScrollIndex]);
+  const handleBackToBoard = useCallback(() => {
+    if (!activeBoardId || !activeClassroom) return;
+    callsNavigation.navigateToClassroomBoard(activeClassroom, activeBoardId);
+  }, [activeBoardId, activeClassroom, callsNavigation]);
+  const handleMaximize = useCallback(
+    (syncToAll = false) => {
+      if (!room || !token || room.state !== "connected") return;
+      const callParam = callsNavigation.search.call;
+      const targetCallId = (typeof callParam === "string" ? callParam.replace(/^"|"$/g, "").trim() : "") || activeClassroom || callsNavigation.params.classroomId || callsNavigation.getCallId() || "";
+      if (syncToAll && isTutor && activeBoardId && targetCallId) {
+        updateStore("localFullView", false);
+        updateStore("mode", "full");
+        updateStore("activeBoardId", void 0);
+        updateStore("activeClassroom", void 0);
+        syncModeToOthers("full", void 0, targetCallId);
+      } else {
+        updateStore("localFullView", true);
+        updateStore("mode", "full");
+      }
+      if (targetCallId) {
+        callsNavigation.navigateToCall(targetCallId, { replace: true });
+      }
+    },
+    [
+      room,
+      token,
+      callsNavigation,
+      activeClassroom,
+      isTutor,
+      activeBoardId,
+      updateStore,
+      syncModeToOthers
+    ]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: `compact-call-container flex flex-col ${isMobile ? "w-full" : "w-[360px]"}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          CompactCallVideoArea,
+          {
+            isMobile,
+            isCollapsed,
+            onCollapsedChange: setIsCollapsed,
+            withOutShadows,
+            dragAttributes: attributes,
+            dragListeners: listeners,
+            compactViewMode,
+            currentParticipant,
+            currentAudioTrack: currentAudioTrack ?? null,
+            totalParticipants,
+            canGoPrev,
+            canGoNext,
+            onPrev: goToPrev,
+            onNext: goToNext,
+            currentIndex,
+            multiVisibleParticipants,
+            multiTileHeightPx,
+            multiCanPrev,
+            multiCanNext,
+            onMultiPrev: () => setMultiScrollIndex((i) => Math.max(0, i - 1)),
+            onMultiNext: () => setMultiScrollIndex((i) => Math.min(totalParticipants - multiVisibleCount, i + 1))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CompactCallBottomBar,
+          {
+            withOutShadows,
+            devices: {
+              microTrack: microphoneTrack?.track,
+              microEnabled: isMicrophoneEnabled,
+              microTrackToggle: {
+                showIcon: true,
+                source: Track.Source.Microphone,
+                onChange: handleMicrophoneToggle
+              },
+              videoTrack: cameraTrack?.track,
+              videoEnabled: isCameraEnabled,
+              videoTrackToggle: {
+                showIcon: true,
+                source: Track.Source.Camera,
+                onChange: handleCameraToggle
+              }
+            },
+            isMobile,
+            compactViewMode,
+            onViewModeToggle: () => setCompactViewMode(compactViewMode === "basic" ? "expanded" : "basic"),
+            showBackToBoardButton: !!showBackToBoardButton,
+            onBackToBoard: handleBackToBoard,
+            onMaximize: handleMaximize,
+            isTutor: !!isTutor
+          }
+        )
+      ]
+    }
+  );
+};
+var OPPOSITE_CORNER = {
+  "top-left": "top-right",
+  "top-right": "top-left",
+  "bottom-left": "bottom-right",
+  "bottom-right": "bottom-left"
+};
+var DroppableCorner = ({ id, className }) => {
+  const { setNodeRef } = useDroppable({
+    id
+  });
+  const [isDragging, setIsDragging] = useState(false);
+  useDndMonitor({
+    onDragStart: () => {
+      setIsDragging(true);
+    },
+    onDragEnd: () => {
+      setIsDragging(false);
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className: `absolute z-100 size-1/3 ${className} pointer-events-none transition-all duration-200 ${isDragging ? "bg-brand-0/20 ring-brand-20 pointer-events-auto rounded-lg ring-2" : ""}`
+    }
+  );
+};
+var DroppableAreas = () => {
+  const [isDragging, setIsDragging] = useState(false);
+  useDndMonitor({
+    onDragStart: () => {
+      setIsDragging(true);
+    },
+    onDragEnd: () => {
+      setIsDragging(false);
+    }
+  });
+  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(DragOverlay, { children: isDragging ? /* @__PURE__ */ jsx(CompactCall, {}) : null })
+  ] });
+};
+var Compact = ({ children, hideOverlay = false }) => {
+  const navigation = useCallsNavigation();
+  const { activeCorner, updateStore } = useCallStore();
+  const focusMode = useFocusModeStore((s) => s.focusMode);
+  const isMobile = useMedia("(max-width: 720px)");
+  const headerRef = useRef(null);
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const { chat: isChatEnabled } = useFeaturesStore((s) => s.features);
+  useEffect(() => {
+    if (!isMobile || hideOverlay || !headerRef.current) return;
+    const el = headerRef.current;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setHeaderHeight(entry.contentRect.height);
+    });
+    observer.observe(el);
+    setHeaderHeight(el.getBoundingClientRect().height);
+    return () => observer.disconnect();
+  }, [isMobile, hideOverlay]);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    })
+  );
+  const handleDragEnd = (event) => {
+    const { over } = event;
+    if (over) {
+      updateStore("activeCorner", over.id);
+    }
+  };
+  const isBoardPage = navigation.pathnameIncludes("/board");
+  const bottomOffset = isBoardPage ? "bottom-[72px]" : "bottom-4";
+  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__ */ jsxs(
+    "div",
+    {
+      className: `relative flex flex-col bg-transparent ${focusMode ? "h-dvh" : "h-[calc(100dvh-64px)]"}`,
+      children: [
+        isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          !hideOverlay && /* @__PURE__ */ jsx("div", { ref: headerRef, className: "fixed top-16 right-0 left-0 z-10 w-full px-2", children: /* @__PURE__ */ jsx(CompactCall, { withOutShadows: true }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex min-h-0 flex-1 flex-col",
+              style: { marginTop: hideOverlay ? 0 : headerHeight > 0 ? headerHeight : 120 },
+              children
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          !hideOverlay && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DroppableAreas, {}),
+            isChatEnabled && /* @__PURE__ */ jsx(Chat, { compactPositionClassName: getChatPositionClasses(activeCorner) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `absolute z-100 ${getCornerPosition(activeCorner)} transition-all duration-500 ease-out`,
+                children: /* @__PURE__ */ jsx(CompactCall, {})
+              }
+            )
+          ] }),
+          children
+        ] }),
+        /* @__PURE__ */ jsx(RoomAudioRenderer, {})
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(DndContext, { sensors, onDragEnd: handleDragEnd, modifiers: [restrictToWindowEdges], children: container });
+};
+var CompactViewInner = ({ children }) => {
+  const { mode, token } = useCallStore();
+  const { room } = useRoom();
+  const pip = usePiP();
+  const isPiPActive = !!pip?.isPiPActive;
+  useParticipantJoinSync();
+  useParticipantSounds();
+  const navigation = useCallsNavigation();
+  const { updateStore: updateChatStore } = useChatStore();
+  useEffect(() => {
+    const { activeClassroom } = useCallStore.getState();
+    const isOnBoardPage = navigation.pathnameIncludes("/board");
+    if ((!room || !token) && navigation.search.call && !isOnBoardPage && !activeClassroom) {
+      navigation.clearCallSearchParam();
+      const { clearAllRaisedHands, updateStore: updateCallStore } = useCallStore.getState();
+      clearAllRaisedHands();
+      updateChatStore("isChatOpen", false);
+      updateChatStore("chatMessages", []);
+      updateChatStore("unreadMessagesCount", 0);
+      updateCallStore("activeBoardId", void 0);
+      updateCallStore("activeClassroom", void 0);
+      updateCallStore("mode", "full");
+    }
+  }, [room, token, navigation, updateChatStore]);
+  const contentWrapper = /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 flex-col", children: /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children }) });
+  if (!room || !token) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      contentWrapper,
+      /* @__PURE__ */ jsx(PermissionsDialog, {})
+    ] });
+  }
+  if (mode === "full") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      contentWrapper,
+      /* @__PURE__ */ jsx(PermissionsDialog, {})
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Compact, { hideOverlay: isPiPActive, children }),
+    /* @__PURE__ */ jsx(PermissionsDialog, {})
+  ] });
+};
+var CompactView = ({ children }) => /* @__PURE__ */ jsx(PiPProvider, { children: /* @__PURE__ */ jsx(CompactViewInner, { children }) });
+function requiredPipHeight(n) {
+  return PIP_RESERVED_HEIGHT_PX + n * PIP_TILE_HEIGHT_16_9_PX + Math.max(0, n - 1) * TILE_GAP_PX;
+}
+function PiPCompactCall({ pipWindow }) {
+  const compactViewMode = useCallStore((s) => s.compactViewMode);
+  const updateStore = useCallStore((s) => s.updateStore);
+  const setViewMode = useCallback(
+    (mode) => updateStore("compactViewMode", mode),
+    [updateStore]
+  );
+  const [multiScrollIndex, setMultiScrollIndex] = useState(0);
+  const [pipSize, setPipSize] = useState({
+    width: pipWindow.innerWidth,
+    height: pipWindow.innerHeight
+  });
+  const { saveAudioInputEnabled, saveVideoInputEnabled } = usePersistentUserChoices();
+  const { isMicrophoneEnabled, isCameraEnabled, microphoneTrack, cameraTrack } = useLocalParticipant();
+  const microphoneToggle = useTrackToggle({
+    source: Track.Source.Microphone,
+    onChange: (enabled, isUserInitiated) => {
+      if (isUserInitiated) saveAudioInputEnabled(enabled);
+    }
+  });
+  const cameraToggle = useTrackToggle({
+    source: Track.Source.Camera,
+    onChange: (enabled, isUserInitiated) => {
+      if (isUserInitiated) saveVideoInputEnabled(enabled);
+    }
+  });
+  const handleMicrophoneToggle = useCallback(() => microphoneToggle.toggle(), [microphoneToggle]);
+  const handleCameraToggle = useCallback(() => cameraToggle.toggle(), [cameraToggle]);
+  const {
+    currentParticipant,
+    participants,
+    currentIndex,
+    totalParticipants,
+    canGoNext,
+    canGoPrev,
+    goToNext,
+    goToPrev
+  } = useCompactNavigation();
+  const { raiseHand: isRiseHandEnabled } = useFeaturesStore((s) => s.features);
+  useEffect(() => {
+    const updateSize = () => setPipSize({ width: pipWindow.innerWidth, height: pipWindow.innerHeight });
+    updateSize();
+    pipWindow.addEventListener("resize", updateSize);
+    return () => pipWindow.removeEventListener("resize", updateSize);
+  }, [pipWindow]);
+  const multiVisibleCount = useMemo(() => {
+    let n = 1;
+    while (n < totalParticipants && requiredPipHeight(n + 1) <= pipSize.height) {
+      n++;
+    }
+    return n;
+  }, [pipSize.height, totalParticipants]);
+  const multiVisibleParticipants = useMemo(
+    () => participants.slice(multiScrollIndex, multiScrollIndex + multiVisibleCount),
+    [participants, multiScrollIndex, multiVisibleCount]
+  );
+  const multiCanPrev = multiScrollIndex > 0;
+  const multiCanNext = multiScrollIndex + multiVisibleCount < totalParticipants;
+  useEffect(() => {
+    if (multiScrollIndex + multiVisibleCount > totalParticipants && totalParticipants > 0) {
+      setMultiScrollIndex(Math.max(0, totalParticipants - multiVisibleCount));
+    }
+  }, [totalParticipants, multiVisibleCount, multiScrollIndex]);
+  const emptyState = /* @__PURE__ */ jsx("div", { className: "bg-gray-40 flex h-full w-full items-center justify-center rounded-2xl text-gray-100", children: /* @__PURE__ */ jsx("span", { className: "text-sm", children: "\u041D\u0435\u0442 \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A\u043E\u0432" }) });
+  const barCn = cn(
+    "bg-gray-0 border-gray-20 flex items-center justify-center rounded-2xl border p-0.5"
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-1 p-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "group relative min-h-0 flex-1 overflow-hidden rounded-2xl", children: compactViewMode === "expanded" ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative flex h-full flex-col overflow-hidden rounded-2xl p-0.5",
+        style: { gap: TILE_GAP_PX },
+        children: [
+          multiVisibleParticipants.length === 0 ? emptyState : multiVisibleParticipants.map((trackRef) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "aspect-video w-full shrink-0 overflow-hidden rounded-xl",
+              style: { minHeight: PIP_TILE_HEIGHT_16_9_PX },
+              children: /* @__PURE__ */ jsx(
+                ParticipantTile,
+                {
+                  trackRef,
+                  participant: trackRef.participant,
+                  className: "h-full w-full [&_video]:object-cover",
+                  isFocusToggleDisable: true
+                }
+              )
+            },
+            `${trackRef.participant.identity}-${trackRef.source}`
+          )),
+          /* @__PURE__ */ jsx(
+            CompactMultiViewControls,
+            {
+              canPrev: multiCanPrev,
+              canNext: multiCanNext,
+              onPrev: () => setMultiScrollIndex((i) => Math.max(0, i - 1)),
+              onNext: () => setMultiScrollIndex((i) => Math.min(totalParticipants - multiVisibleCount, i + 1))
+            }
+          )
+        ]
+      }
+    ) : currentParticipant ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ParticipantTile,
+        {
+          trackRef: currentParticipant,
+          participant: currentParticipant.participant,
+          className: "h-full w-full",
+          isFocusToggleDisable: true
+        }
+      ),
+      totalParticipants > 1 && /* @__PURE__ */ jsx(
+        CompactNavigationControls,
+        {
+          canPrev: canGoPrev,
+          canNext: canGoNext,
+          onPrev: goToPrev,
+          onNext: goToNext,
+          currentIndex,
+          totalParticipants
+        }
+      )
+    ] }) : emptyState }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-12 shrink-0 items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx("div", { className: barCn, children: /* @__PURE__ */ jsx(
+        DevicesBar,
+        {
+          className: "h-7 w-7",
+          microTrack: microphoneTrack?.track,
+          microEnabled: isMicrophoneEnabled,
+          microTrackToggle: {
+            showIcon: true,
+            source: Track.Source.Microphone,
+            onChange: handleMicrophoneToggle
+          },
+          videoTrack: cameraTrack?.track,
+          videoEnabled: isCameraEnabled,
+          videoTrackToggle: {
+            showIcon: true,
+            source: Track.Source.Camera,
+            onChange: handleCameraToggle
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: barCn, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "icon",
+            variant: "none",
+            onClick: () => setViewMode(compactViewMode === "basic" ? "expanded" : "basic"),
+            className: "hover:bg-gray-5 h-7 w-7 rounded-xl p-0 text-gray-100",
+            "aria-label": compactViewMode === "basic" ? "\u0420\u0430\u0437\u0432\u0451\u0440\u043D\u0443\u0442\u044B\u0439 \u0432\u0438\u0434" : "\u041E\u0434\u0438\u043D \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A",
+            children: compactViewMode === "basic" ? /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Account, { className: "h-4 w-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: compactViewMode === "basic" ? "\u0420\u0430\u0437\u0432\u0451\u0440\u043D\u0443\u0442\u044B\u0439 \u0432\u0438\u0434 (\u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A\u043E\u0432)" : "\u041E\u0434\u0438\u043D \u0443\u0447\u0430\u0441\u0442\u043D\u0438\u043A" })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: cn(barCn, "ml-auto"), children: [
+        /* @__PURE__ */ jsx(ScreenShareButton, { className: "h-7 w-7" }),
+        isRiseHandEnabled && /* @__PURE__ */ jsx(RaiseHandButton, { className: "h-7 w-7" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: barCn, children: /* @__PURE__ */ jsx(DisconnectButton, { className: "h-7 w-7 rounded-xl" }) })
+    ] })
+  ] });
+}
+
+export { CompactCall, CompactNavigationControls, CompactView, PiPCompactCall, PiPProvider, useCompactAvailableHeight, useCompactNavigation, useDocumentPiP, usePiP };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map