@whereby.com/browser-sdk 2.12.3 → 3.0.0

package/dist/react/index.esm.js

@@ -1,7 +1,14 @@
 import * as React from 'react';
-import { useState, useEffect, useCallback } from 'react';
-import { debounce, selectChatMessages, selectCloudRecordingRaw, selectLocalParticipantRaw, selectLocalMediaStream, selectRemoteParticipants, selectScreenshares, selectRoomConnectionStatus, selectStreamingRaw, selectWaitingParticipants, createServices, createStore, observeStore, doAppStart, doAppStop, doRtcReportStreamResolution, doSendChatMessage, doKnockRoom, doSetDisplayName, toggleCameraEnabled, toggleMicrophoneEnabled, toggleLowDataModeEnabled, doAcceptWaitingParticipant, doRejectWaitingParticipant, doStartCloudRecording, doStartScreenshare, doStopCloudRecording, doStopScreenshare, doLockRoom, doRequestAudioEnable, doKickParticipant, doEndMeeting, selectCameraDeviceError, selectCameraDevices, selectCurrentCameraDeviceId, selectCurrentMicrophoneDeviceId, selectIsSettingCameraDevice, selectIsSettingMicrophoneDevice, selectIsLocalMediaStarting, selectMicrophoneDeviceError, selectMicrophoneDevices, selectSpeakerDevices, selectLocalMediaStartError, doStartLocalMedia, doStopLocalMedia, setCurrentCameraDeviceId, setCurrentMicrophoneDeviceId } from '@whereby.com/core';
+import { Provider as Provider$1, useDispatch, useSelector } from 'react-redux';
+import { createServices, createStore, selectCurrentSpeakerDeviceId, debounce, doRtcReportStreamResolution, selectChatMessages, selectCloudRecordingRaw, selectLocalParticipantRaw, selectLocalMediaStream, selectRemoteParticipants, selectScreenshares, selectRoomConnectionStatus, selectStreamingRaw, selectWaitingParticipants, selectNotificationsEmitter, selectSpotlightedClientViews, doAppStop, doSendChatMessage, doKnockRoom, doSetDisplayName, toggleCameraEnabled, toggleMicrophoneEnabled, toggleLowDataModeEnabled, doSetLocalStickyReaction, doRequestAudioEnable, doAcceptWaitingParticipant, doRejectWaitingParticipant, doStartCloudRecording, doStartScreenshare, doStopCloudRecording, doStopScreenshare, doAppStart, doLockRoom, doSpotlightParticipant, doRemoveSpotlight, doKickParticipant, doEndMeeting, selectCameraDeviceError, selectCameraDevices, selectCurrentCameraDeviceId, selectCurrentMicrophoneDeviceId, selectIsSettingCameraDevice, selectIsSettingMicrophoneDevice, selectIsLocalMediaStarting, selectMicrophoneDeviceError, selectMicrophoneDevices, selectSpeakerDevices, selectLocalMediaStartError, doStartLocalMedia, doStopLocalMedia, setCurrentCameraDeviceId, setCurrentMicrophoneDeviceId, setCurrentSpeakerDeviceId, selectAllClientViews, selectNumParticipants } from '@whereby.com/core';
 import { createSelector } from '@reduxjs/toolkit';
+import runes from 'runes';
+
+function Provider({ children }) {
+    const services = createServices();
+    const store = createStore({ injectServices: services });
+    return React.createElement(Provider$1, { store: store }, children);
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -37,27 +44,50 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var VideoView = (_a) => {
-    var { muted, mirror = false, stream, onResize, onSetAspectRatio } = _a, rest = __rest(_a, ["muted", "mirror", "stream", "onResize", "onSetAspectRatio"]);
+const useAppDispatch = useDispatch.withTypes();
+const useAppSelector = useSelector.withTypes();
+
+const VideoView = React.forwardRef((_a, ref) => {
+    var { muted, mirror = false, stream, onVideoResize } = _a, rest = __rest(_a, ["muted", "mirror", "stream", "onVideoResize"]);
+    const dispatch = useAppDispatch();
+    const currentSpeakerId = useAppSelector(selectCurrentSpeakerDeviceId);
     const videoEl = React.useRef(null);
+    const audioEl = React.useRef(null);
+    React.useImperativeHandle(ref, () => {
+        return Object.assign(videoEl.current, {
+            captureAspectRatio: () => {
+                if (!videoEl.current) {
+                    return null;
+                }
+                const h = videoEl.current.clientHeight;
+                const w = videoEl.current.clientWidth;
+                if (w && h && w + h > 20) {
+                    return w / h;
+                }
+                return null;
+            },
+        });
+    });
     React.useEffect(() => {
         if (!videoEl.current) {
             return;
         }
         const resizeObserver = new ResizeObserver(debounce(() => {
             if (videoEl.current && (stream === null || stream === void 0 ? void 0 : stream.id)) {
-                if (onResize) {
-                    onResize({
-                        width: videoEl.current.clientWidth,
-                        height: videoEl.current.clientHeight,
+                const width = videoEl.current.clientWidth;
+                const height = videoEl.current.clientHeight;
+                dispatch(doRtcReportStreamResolution({
+                    streamId: stream.id,
+                    width,
+                    height,
+                }));
+                if (onVideoResize) {
+                    onVideoResize({
+                        width,
+                        height,
                         stream,
                     });
                 }
-                const h = videoEl.current.videoHeight;
-                const w = videoEl.current.videoWidth;
-                if (onSetAspectRatio && w && h && w + h > 20) {
-                    onSetAspectRatio({ aspectRatio: w / h });
-                }
             }
         }, { delay: 1000, edges: true }));
         resizeObserver.observe(videoEl.current);
@@ -76,38 +106,47 @@ var VideoView = (_a) => {
             videoEl.current.muted = Boolean(muted);
         }
     }, [muted, stream, videoEl]);
-    return (React.createElement("video", Object.assign({ ref: videoEl, autoPlay: true, playsInline: true }, rest, { style: Object.assign({ transform: mirror ? "scaleX(-1)" : "none", width: "100%", height: "100%" }, rest.style) })));
-};
+    React.useEffect(() => {
+        if (!audioEl.current || muted || !stream || !currentSpeakerId) {
+            return;
+        }
+        if (audioEl.current.srcObject !== stream) {
+            audioEl.current.srcObject = stream;
+        }
+        if (audioEl.current.setSinkId) {
+            audioEl.current.setSinkId(currentSpeakerId);
+        }
+    }, [stream, audioEl, currentSpeakerId, muted]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("video", Object.assign({ ref: videoEl, autoPlay: true, playsInline: true }, rest, { style: Object.assign({ transform: mirror ? "scaleX(-1)" : "none", width: "100%", height: "100%" }, rest.style) })),
+        React.createElement("audio", { ref: audioEl, autoPlay: true, playsInline: true })));
+});
+VideoView.displayName = "VideoView";
 
-const selectRoomConnectionState = createSelector(selectChatMessages, selectCloudRecordingRaw, selectLocalParticipantRaw, selectLocalMediaStream, selectRemoteParticipants, selectScreenshares, selectRoomConnectionStatus, selectStreamingRaw, selectWaitingParticipants, (chatMessages, cloudRecording, localParticipant, localMediaStream, remoteParticipants, screenshares, connectionStatus, streaming, waitingParticipants) => {
+const selectRoomConnectionState = createSelector(selectChatMessages, selectCloudRecordingRaw, selectLocalParticipantRaw, selectLocalMediaStream, selectRemoteParticipants, selectScreenshares, selectRoomConnectionStatus, selectStreamingRaw, selectWaitingParticipants, selectNotificationsEmitter, selectSpotlightedClientViews, (chatMessages, cloudRecording, localParticipant, localMediaStream, remoteParticipants, screenshares, connectionStatus, streaming, waitingParticipants, notificationsEmitter, spotlightedClientViews) => {
     const state = {
         chatMessages,
         cloudRecording: cloudRecording.isRecording ? { status: "recording" } : undefined,
-        localScreenshareStatus: localParticipant.isScreenSharing ? "active" : undefined,
-        localParticipant: Object.assign(Object.assign({}, localParticipant), { stream: localMediaStream }),
-        remoteParticipants,
-        screenshares,
         connectionStatus,
+        events: notificationsEmitter,
         liveStream: streaming.isStreaming
             ? {
                 status: "streaming",
                 startedAt: streaming.startedAt,
             }
             : undefined,
+        localScreenshareStatus: localParticipant.isScreenSharing ? "active" : undefined,
+        localParticipant: Object.assign(Object.assign({}, localParticipant), { stream: localMediaStream }),
+        remoteParticipants,
+        screenshares,
         waitingParticipants,
+        spotlightedParticipants: spotlightedClientViews,
     };
     return state;
 });
 
-const browserSdkVersion = "2.12.3";
+const browserSdkVersion = "3.0.0";
 
-const initialState$1 = {
-    chatMessages: [],
-    remoteParticipants: [],
-    connectionStatus: "ready",
-    screenshares: [],
-    waitingParticipants: [],
-};
 const defaultRoomConnectionOptions = {
     localMediaOptions: {
         audio: true,
@@ -115,22 +154,13 @@ const defaultRoomConnectionOptions = {
     },
 };
 function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectionOptions) {
-    const [roomConfig, setRoomConfig] = React.useState();
-    const [store] = React.useState(() => {
-        if (roomConnectionOptions.localMedia) {
-            return roomConnectionOptions.localMedia.store;
-        }
-        const services = createServices();
-        return createStore({ injectServices: services });
-    });
-    const [boundVideoView, setBoundVideoView] = React.useState();
-    const [roomConnectionState, setRoomConnectionState] = React.useState(initialState$1);
-    React.useEffect(() => {
-        const unsubscribe = observeStore(store, selectRoomConnectionState, setRoomConnectionState);
+    const dispatch = useAppDispatch();
+    const roomConnectionState = useAppSelector(selectRoomConnectionState);
+    const roomConfig = React.useMemo(() => {
         const url = new URL(roomUrl);
         const searchParams = new URLSearchParams(url.search);
         const roomKey = roomConnectionOptions.roomKey || searchParams.get("roomKey");
-        const roomConfig = {
+        return {
             displayName: roomConnectionOptions.displayName || "Guest",
             localMediaOptions: roomConnectionOptions.localMedia ? undefined : roomConnectionOptions.localMediaOptions,
             roomKey,
@@ -138,52 +168,44 @@ function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectio
             userAgent: `browser-sdk:${browserSdkVersion}`,
             externalId: roomConnectionOptions.externalId || null,
         };
-        setRoomConfig(roomConfig);
-        store.dispatch(doAppStart(roomConfig));
+    }, [roomUrl, roomConnectionOptions]);
+    React.useEffect(() => {
         return () => {
-            store.dispatch(doAppStop());
-            unsubscribe();
+            dispatch(doAppStop());
         };
     }, []);
-    React.useEffect(() => {
-        if (store && !boundVideoView) {
-            setBoundVideoView(() => (props) => {
-                return React.createElement(VideoView, Object.assign({}, props, {
-                    onResize: ({ stream, width, height, }) => {
-                        store.dispatch(doRtcReportStreamResolution({
-                            streamId: stream.id,
-                            width,
-                            height,
-                        }));
-                    },
-                }));
-            });
-        }
-    }, [store, boundVideoView]);
-    const sendChatMessage = React.useCallback((text) => store.dispatch(doSendChatMessage({ text })), [store]);
-    const knock = React.useCallback(() => store.dispatch(doKnockRoom()), [store]);
-    const setDisplayName = React.useCallback((displayName) => store.dispatch(doSetDisplayName({ displayName })), [store]);
-    const toggleCamera = React.useCallback((enabled) => store.dispatch(toggleCameraEnabled({ enabled })), [store]);
-    const toggleMicrophone = React.useCallback((enabled) => store.dispatch(toggleMicrophoneEnabled({ enabled })), [store]);
-    const toggleLowDataMode = React.useCallback((enabled) => store.dispatch(toggleLowDataModeEnabled({ enabled })), [store]);
-    const acceptWaitingParticipant = React.useCallback((participantId) => store.dispatch(doAcceptWaitingParticipant({ participantId })), [store]);
-    const rejectWaitingParticipant = React.useCallback((participantId) => store.dispatch(doRejectWaitingParticipant({ participantId })), [store]);
-    const startCloudRecording = React.useCallback(() => store.dispatch(doStartCloudRecording()), [store]);
-    const startScreenshare = React.useCallback(() => store.dispatch(doStartScreenshare()), [store]);
-    const stopCloudRecording = React.useCallback(() => store.dispatch(doStopCloudRecording()), [store]);
-    const stopScreenshare = React.useCallback(() => store.dispatch(doStopScreenshare()), [store]);
-    const joinRoom = React.useCallback(() => (roomConfig ? store.dispatch(doAppStart(roomConfig)) : () => { }), [store, roomConfig]);
-    const leaveRoom = React.useCallback(() => store.dispatch(doAppStop()), [store]);
-    const lockRoom = React.useCallback((locked) => store.dispatch(doLockRoom({ locked })), [store]);
-    const muteParticipants = React.useCallback((clientIds) => {
-        store.dispatch(doRequestAudioEnable({ clientIds, enable: false }));
-    }, [store]);
-    const kickParticipant = React.useCallback((clientId) => store.dispatch(doKickParticipant({ clientId })), [store]);
-    const endMeeting = React.useCallback((stayBehind) => store.dispatch(doEndMeeting({ stayBehind })), [store]);
+    const sendChatMessage = React.useCallback((text) => dispatch(doSendChatMessage({ text })), [dispatch]);
+    const knock = React.useCallback(() => dispatch(doKnockRoom()), [dispatch]);
+    const setDisplayName = React.useCallback((displayName) => dispatch(doSetDisplayName({ displayName })), [dispatch]);
+    const toggleCamera = React.useCallback((enabled) => dispatch(toggleCameraEnabled({ enabled })), [dispatch]);
+    const toggleMicrophone = React.useCallback((enabled) => dispatch(toggleMicrophoneEnabled({ enabled })), [dispatch]);
+    const toggleLowDataMode = React.useCallback((enabled) => dispatch(toggleLowDataModeEnabled({ enabled })), [dispatch]);
+    const toggleRaiseHand = React.useCallback((enabled) => dispatch(doSetLocalStickyReaction({ enabled })), [dispatch]);
+    const askToSpeak = React.useCallback((participantId) => dispatch(doRequestAudioEnable({ clientIds: [participantId], enable: true })), [dispatch]);
+    const acceptWaitingParticipant = React.useCallback((participantId) => dispatch(doAcceptWaitingParticipant({ participantId })), [dispatch]);
+    const rejectWaitingParticipant = React.useCallback((participantId) => dispatch(doRejectWaitingParticipant({ participantId })), [dispatch]);
+    const startCloudRecording = React.useCallback(() => dispatch(doStartCloudRecording()), [dispatch]);
+    const startScreenshare = React.useCallback(() => dispatch(doStartScreenshare()), [dispatch]);
+    const stopCloudRecording = React.useCallback(() => dispatch(doStopCloudRecording()), [dispatch]);
+    const stopScreenshare = React.useCallback(() => dispatch(doStopScreenshare()), [dispatch]);
+    const joinRoom = React.useCallback(() => dispatch(doAppStart(roomConfig)), [dispatch]);
+    const leaveRoom = React.useCallback(() => dispatch(doAppStop()), [dispatch]);
+    const lockRoom = React.useCallback((locked) => dispatch(doLockRoom({ locked })), [dispatch]);
+    const muteParticipants = React.useCallback((participantIds) => {
+        dispatch(doRequestAudioEnable({ clientIds: participantIds, enable: false }));
+    }, [dispatch]);
+    const spotlightParticipant = React.useCallback((participantId) => dispatch(doSpotlightParticipant({ id: participantId })), [dispatch]);
+    const removeSpotlight = React.useCallback((participantId) => dispatch(doRemoveSpotlight({ id: participantId })), [dispatch]);
+    const kickParticipant = React.useCallback((participantId) => dispatch(doKickParticipant({ clientId: participantId })), [dispatch]);
+    const endMeeting = React.useCallback((stayBehind) => dispatch(doEndMeeting({ stayBehind })), [dispatch]);
+    const { events } = roomConnectionState, state = __rest(roomConnectionState, ["events"]);
     return {
-        state: roomConnectionState,
+        state,
+        events,
         actions: {
             toggleLowDataMode,
+            toggleRaiseHand,
+            askToSpeak,
             acceptWaitingParticipant,
             knock,
             joinRoom,
@@ -201,20 +223,19 @@ function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectio
             stopScreenshare,
             toggleCamera,
             toggleMicrophone,
+            spotlightParticipant,
+            removeSpotlight,
         },
-        components: {
-            VideoView: boundVideoView || VideoView,
-        },
-        _ref: store,
     };
 }
 
-const selectLocalMediaState = createSelector(selectCameraDeviceError, selectCameraDevices, selectCurrentCameraDeviceId, selectCurrentMicrophoneDeviceId, selectIsSettingCameraDevice, selectIsSettingMicrophoneDevice, selectIsLocalMediaStarting, selectLocalMediaStream, selectMicrophoneDeviceError, selectMicrophoneDevices, selectSpeakerDevices, selectLocalMediaStartError, (cameraDeviceError, cameraDevices, currentCameraDeviceId, currentMicrophoneDeviceId, isSettingCameraDevice, isSettingMicrophoneDevice, isStarting, localStream, microphoneDeviceError, microphoneDevices, speakerDevices, startError) => {
+const selectLocalMediaState = createSelector(selectCameraDeviceError, selectCameraDevices, selectCurrentCameraDeviceId, selectCurrentMicrophoneDeviceId, selectCurrentSpeakerDeviceId, selectIsSettingCameraDevice, selectIsSettingMicrophoneDevice, selectIsLocalMediaStarting, selectLocalMediaStream, selectMicrophoneDeviceError, selectMicrophoneDevices, selectSpeakerDevices, selectLocalMediaStartError, (cameraDeviceError, cameraDevices, currentCameraDeviceId, currentMicrophoneDeviceId, currentSpeakerDeviceId, isSettingCameraDevice, isSettingMicrophoneDevice, isStarting, localStream, microphoneDeviceError, microphoneDevices, speakerDevices, startError) => {
     const state = {
         cameraDeviceError,
         cameraDevices,
         currentCameraDeviceId,
         currentMicrophoneDeviceId,
+        currentSpeakerDeviceId,
         isSettingCameraDevice,
         isSettingMicrophoneDevice,
         isStarting,
@@ -227,47 +248,1460 @@ const selectLocalMediaState = createSelector(selectCameraDeviceError, selectCame
     return state;
 });
 
-const initialState = {
-    cameraDeviceError: null,
-    cameraDevices: [],
-    isSettingCameraDevice: false,
-    isSettingMicrophoneDevice: false,
-    isStarting: false,
-    microphoneDeviceError: null,
-    microphoneDevices: [],
-    speakerDevices: [],
-    startError: null,
-};
 function useLocalMedia(optionsOrStream = { audio: true, video: true }) {
-    const [store] = useState(() => {
-        const services = createServices();
-        return createStore({ injectServices: services });
-    });
-    const [localMediaState, setLocalMediaState] = useState(initialState);
-    useEffect(() => {
-        const unsubscribe = observeStore(store, selectLocalMediaState, setLocalMediaState);
-        store.dispatch(doStartLocalMedia(optionsOrStream));
+    const dispatch = useAppDispatch();
+    const localMediaState = useAppSelector(selectLocalMediaState);
+    React.useEffect(() => {
+        dispatch(doStartLocalMedia(optionsOrStream));
         return () => {
-            unsubscribe();
-            store.dispatch(doStopLocalMedia());
+            dispatch(doStopLocalMedia());
         };
     }, []);
-    const setCameraDevice = useCallback((deviceId) => store.dispatch(setCurrentCameraDeviceId({ deviceId })), [store]);
-    const setMicrophoneDevice = useCallback((deviceId) => store.dispatch(setCurrentMicrophoneDeviceId({ deviceId })), [store]);
-    const toggleCamera = useCallback((enabled) => store.dispatch(toggleCameraEnabled({ enabled })), [store]);
-    const toggleMicrophone = useCallback((enabled) => store.dispatch(toggleMicrophoneEnabled({ enabled })), [store]);
-    const toggleLowDataMode = useCallback((enabled) => store.dispatch(toggleLowDataModeEnabled({ enabled })), [store]);
+    const setCameraDevice = React.useCallback((deviceId) => dispatch(setCurrentCameraDeviceId({ deviceId })), [dispatch]);
+    const setMicrophoneDevice = React.useCallback((deviceId) => dispatch(setCurrentMicrophoneDeviceId({ deviceId })), [dispatch]);
+    const setSpeakerDevice = React.useCallback((deviceId) => dispatch(setCurrentSpeakerDeviceId({ deviceId })), [dispatch]);
+    const toggleCamera = React.useCallback((enabled) => dispatch(toggleCameraEnabled({ enabled })), [dispatch]);
+    const toggleMicrophone = React.useCallback((enabled) => dispatch(toggleMicrophoneEnabled({ enabled })), [dispatch]);
+    const toggleLowDataMode = React.useCallback((enabled) => dispatch(toggleLowDataModeEnabled({ enabled })), [dispatch]);
     return {
         state: localMediaState,
         actions: {
             setCameraDevice,
             setMicrophoneDevice,
+            setSpeakerDevice,
             toggleCameraEnabled: toggleCamera,
             toggleMicrophoneEnabled: toggleMicrophone,
             toggleLowDataModeEnabled: toggleLowDataMode,
         },
-        store,
     };
 }
 
-export { VideoView, useLocalMedia, useRoomConnection };
+const VIDEO_CONTROLS_MIN_WIDTH$1 = 7 * 60;
+var layoutConstants = {
+    MIN_WINDOW_HEIGHT: 320,
+    MIN_WINDOW_WIDTH: 320,
+    DESKTOP_BREAKPOINT: 1025,
+    TABLET_BREAKPOINT: 750,
+    PHONE_BREAKPOINT: 500,
+    TOP_TOOLBAR_HEIGHT: 40 + 8 * 2,
+    BOTTOM_TOOLBAR_HEIGHT: 70 + 4 * 3,
+    SIDEBAR_WIDTH: 375,
+    VIDEO_CONTROLS_MIN_WIDTH: VIDEO_CONTROLS_MIN_WIDTH$1,
+    ROOM_FOOTER_MIN_WIDTH: 60 * 3 + VIDEO_CONTROLS_MIN_WIDTH$1,
+    FLOATING_VIDEO_CONTROLS_BOTTOM_MARGIN: 20,
+    WATERMARK_BAR_HEIGHT: 32,
+    BREAKOUT_STAGE_BACKDROP_HEADER_HEIGHT: 20 + 8,
+    BREAKOUT_STAGE_BACKDROP_FOOTER_HEIGHT: 8 + 40 + 8,
+    SUBGRID_EMPTY_STAGE_MAX_WIDTH: 800,
+    GROUPS_CELL_MARGIN: 8,
+    GROUPS_CELL_PADDING: 12,
+    GROUPS_CELL_NAV_HEIGHT: 48 + 8,
+    GROUPS_CELL_AVATAR_WRAPPER_BOTTOM_MARGIN: 8,
+    GROUPS_CELL_AVATAR_GRID_GAP: 8,
+    GROUPS_CELL_MIN_WIDTH: 360,
+    GROUPS_CELL_MAX_WIDTH: 600,
+    GROUPS_ROW_HEIGHT: 72,
+    GROUPS_ROW_GAP: 1,
+    FOLDABLE_SCREEN_STAGE_PADDING: 8,
+};
+
+function makeOrigin({ top = 0, left = 0 } = {}) {
+    return {
+        top,
+        left,
+    };
+}
+function makeBounds({ width = 0, height = 0 } = {}) {
+    return {
+        width: Math.max(width, 0),
+        height: Math.max(height, 0),
+    };
+}
+function makeFrame({ top = 0, left = 0, width = 0, height = 0 } = {}) {
+    return {
+        bounds: makeBounds({ width, height }),
+        origin: makeOrigin({ top, left }),
+    };
+}
+function makeBox({ top = 0, left = 0, bottom = 0, right = 0 } = {}) {
+    return {
+        top,
+        left,
+        bottom,
+        right,
+    };
+}
+function hasBounds(bounds) {
+    if (!bounds) {
+        return false;
+    }
+    return !(bounds.width <= 0 || bounds.height <= 0);
+}
+function insetBounds({ bounds, fromBounds }) {
+    return {
+        width: Math.max(fromBounds.width - bounds.width, 0),
+        height: Math.max(fromBounds.height - bounds.height, 0),
+    };
+}
+
+function fitToBounds(aspectRatio, containerSize) {
+    const { width, height } = containerSize;
+    const contentHeight = height;
+    const contentWidth = contentHeight * aspectRatio;
+    const scale = Math.min(width / contentWidth, height / contentHeight);
+    const adjustedWidth = contentWidth * scale;
+    const adjustedHeight = contentHeight * scale;
+    return { width: adjustedWidth, height: adjustedHeight };
+}
+const cellContentArea = ({ width, height, rows, cols, aspectRatio, }) => {
+    const bounds = fitToBounds(aspectRatio, { width: width / cols, height: height / rows });
+    return Math.round(bounds.width * bounds.height);
+};
+const getWeightedSplitCount = ({ vertical, width, height, count, aspectRatio, }) => {
+    const choices = [1, 2, 3].map((rowCols) => cellContentArea({
+        width,
+        height,
+        rows: vertical ? Math.ceil(count / rowCols) : rowCols,
+        cols: vertical ? rowCols : Math.ceil(count / rowCols),
+        aspectRatio,
+    }));
+    const closest = Math.max(...choices);
+    const splits = choices.indexOf(closest) + 1;
+    return { splits, weight: closest };
+};
+const getGridSplits = ({ width, height, count, aspectRatio, }) => {
+    const verticalPick = getWeightedSplitCount({ vertical: true, width, height, count, aspectRatio });
+    const horizontalPick = getWeightedSplitCount({ vertical: false, width, height, count, aspectRatio });
+    if (verticalPick.weight > horizontalPick.weight) {
+        return { splits: verticalPick.splits, vertical: true };
+    }
+    return { splits: horizontalPick.splits, vertical: false };
+};
+function getGridSizeForCount({ count, width, height, aspectRatio, }) {
+    if (count <= 1) {
+        return {
+            rows: 1,
+            cols: 1,
+        };
+    }
+    const { splits, vertical } = getGridSplits({ width, height, count, aspectRatio });
+    if (vertical) {
+        return {
+            rows: Math.ceil(count / splits),
+            cols: splits,
+        };
+    }
+    return {
+        rows: splits,
+        cols: Math.ceil(count / splits),
+    };
+}
+
+function VideoCell(_a) {
+    var { aspectRatio, children, className, height, style, width, withRoundedCorners = false, withShadow = true } = _a, rest = __rest(_a, ["aspectRatio", "children", "className", "height", "style", "width", "withRoundedCorners", "withShadow"]);
+    let contentWidth = width;
+    let contentHeight = height;
+    let leftOffset = 0;
+    let topOffset = 0;
+    if (aspectRatio) {
+        ({ width: contentWidth, height: contentHeight } = fitToBounds(aspectRatio, {
+            width,
+            height,
+        }));
+        leftOffset = (width - contentWidth) / 2;
+        topOffset = (height - contentHeight) / 2;
+    }
+    const contentStyle = Object.assign({ width: `${Math.round(contentWidth)}px`, height: `${Math.round(contentHeight)}px` }, (leftOffset || topOffset
+        ? { transform: `translate3d(${Math.round(leftOffset)}px, ${Math.round(topOffset)}px, 0)` }
+        : {}));
+    return (React.createElement("div", { className: className, style: Object.assign({ position: "absolute", top: 0, left: 0 }, style) },
+        React.createElement("div", Object.assign({ style: contentStyle }, rest), React.cloneElement(children, { contentWidth, contentHeight, withRoundedCorners, withShadow }))));
+}
+
+function generateStylesFromFrame({ origin, bounds }) {
+    return {
+        top: Math.round(origin.top),
+        left: Math.round(origin.left),
+        height: Math.round(bounds.height),
+        width: Math.round(bounds.width),
+    };
+}
+function renderVideoCell({ cell, child, clientId, style = {}, withRoundedCorners = false, withShadow = false, }) {
+    const isHidden = !hasBounds(cell.bounds);
+    return (React.createElement(VideoCell, { width: cell.bounds.width, height: cell.bounds.height, aspectRatio: cell.aspectRatio, style: isHidden ? { width: 0, height: 0 } : style, withRoundedCorners: withRoundedCorners, withShadow: withShadow, key: clientId }, child));
+}
+function renderSubgridVideoCells({ content, stageLayout, withRoundedCorners, withShadow, }) {
+    const cells = stageLayout.subgrid.cells;
+    return content.map((child, index) => {
+        var _a, _b, _c, _d;
+        const cell = cells[index];
+        const style = { height: Math.round(cell.bounds.height), width: Math.round(cell.bounds.width), transform: "" };
+        const origin = {
+            top: stageLayout.subgrid.origin.top + cell.origin.top,
+            left: stageLayout.subgrid.origin.left + cell.origin.left,
+        };
+        style.transform = `translate3d(${Math.round(origin.left)}px, ${Math.round(origin.top)}px, 0)`;
+        const clientId = (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.participant) === null || _b === void 0 ? void 0 : _b.id;
+        const leftPaddings = ((_c = cell.paddings) === null || _c === void 0 ? void 0 : _c.left) || 0;
+        const rightPaddings = ((_d = cell.paddings) === null || _d === void 0 ? void 0 : _d.right) || 0;
+        const childWithProps = React.cloneElement(child, {
+            avatarSize: cell.bounds.width - leftPaddings - rightPaddings,
+            canZoom: false,
+            cellPaddings: cell.paddings,
+            isSmallCell: cell.isSmallCell,
+            isZoomedByDefault: false,
+            key: clientId || `subgrid-${index}`,
+            style,
+        });
+        return renderVideoCell({
+            cell,
+            child: childWithProps,
+            clientId: clientId || `subgrid-${index}`,
+            style,
+            withRoundedCorners,
+            withShadow,
+        });
+    });
+}
+function renderPresentationGridVideoCells({ content, isConstrained, stageLayout, withRoundedCorners, withShadow, }) {
+    var _a;
+    const cells = ((_a = stageLayout.presentationGrid) === null || _a === void 0 ? void 0 : _a.cells) || [];
+    return content.map((child, index) => {
+        var _a, _b;
+        if (!stageLayout.presentationGrid) {
+            return null;
+        }
+        const cell = cells[index];
+        const origin = {
+            top: stageLayout.presentationGrid.origin.top + stageLayout.presentationGrid.paddings.top + cell.origin.top,
+            left: stageLayout.presentationGrid.origin.left +
+                stageLayout.presentationGrid.paddings.left +
+                cell.origin.left,
+        };
+        const style = {
+            width: Math.round(cell.bounds.width),
+            height: Math.round(cell.bounds.height),
+            transform: `translate3d(${Math.round(origin.left)}px, ${Math.round(origin.top)}px, 0)`,
+        };
+        const clientId = (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.participant) === null || _b === void 0 ? void 0 : _b.id;
+        const childWithProps = React.cloneElement(child, {
+            isSmallCell: cell.isSmallCell,
+            isZoomedByDefault: !!isConstrained && !(child === null || child === void 0 ? void 0 : child.props.participant.isPresentation),
+            canZoom: !!isConstrained,
+            key: clientId || `presentation-${index}`,
+        });
+        return renderVideoCell({
+            cell,
+            child: childWithProps,
+            clientId: clientId || `presentation-${index}`,
+            style,
+            withRoundedCorners,
+            withShadow,
+        });
+    });
+}
+function renderGridVideoCells({ content, isConstrained, stageLayout, withRoundedCorners, withShadow, }) {
+    var _a;
+    const cells = ((_a = stageLayout.videoGrid) === null || _a === void 0 ? void 0 : _a.cells) || [];
+    const gridVideoCells = content.map((child, index) => {
+        var _a, _b;
+        if (!stageLayout.videoGrid) {
+            return null;
+        }
+        const cell = cells[index];
+        const origin = {
+            top: stageLayout.videoGrid.origin.top + stageLayout.videoGrid.paddings.top + cell.origin.top,
+            left: stageLayout.videoGrid.origin.left + stageLayout.videoGrid.paddings.left + cell.origin.left,
+        };
+        const style = {
+            width: Math.round(cell.bounds.width),
+            height: Math.round(cell.bounds.height),
+            transform: `translate3d(${Math.round(origin.left)}px, ${Math.round(origin.top)}px, 0)`,
+        };
+        const clientId = (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.participant) === null || _b === void 0 ? void 0 : _b.id;
+        const childWithProps = React.cloneElement(child, {
+            isSmallCell: cell.isSmallCell,
+            isZoomedByDefault: !!isConstrained && !(child === null || child === void 0 ? void 0 : child.props.participant.isPresentation),
+            canZoom: !!isConstrained,
+            key: clientId || `video-${index}`,
+        });
+        return renderVideoCell({
+            cell,
+            child: childWithProps,
+            clientId: clientId || `video-${index}`,
+            withRoundedCorners,
+            style,
+            withShadow,
+        });
+    });
+    return gridVideoCells;
+}
+function VideoStageLayout({ debug = false, featureRoundedCornersOff = false, gridContent = [], isConstrained = false, layoutOverflowBackdropFrame = makeFrame(), layoutVideoStage: stageLayout, presentationGridContent = [], subgridContent = [], }) {
+    const withRoundedCorners = !featureRoundedCornersOff && !isConstrained;
+    const cells = [];
+    if (gridContent.length) {
+        cells.push(...renderGridVideoCells({
+            content: gridContent,
+            isConstrained,
+            stageLayout,
+            withRoundedCorners,
+            withShadow: !isConstrained,
+        }));
+    }
+    if (presentationGridContent.length) {
+        cells.push(...renderPresentationGridVideoCells({
+            content: presentationGridContent,
+            isConstrained,
+            stageLayout,
+            withRoundedCorners,
+            withShadow: !isConstrained,
+        }));
+    }
+    if (subgridContent.length) {
+        cells.push(...renderSubgridVideoCells({
+            content: subgridContent,
+            stageLayout,
+            withRoundedCorners: !featureRoundedCornersOff,
+            withShadow: true,
+        }));
+    }
+    return (React.createElement("div", { key: "video-stage-layout", style: {
+            width: "100%",
+            height: "100%",
+            position: "relative",
+        } },
+        hasBounds(layoutOverflowBackdropFrame.bounds) && (React.createElement("div", { style: generateStylesFromFrame(layoutOverflowBackdropFrame) })),
+        cells,
+        debug && (React.createElement(React.Fragment, null))));
+}
+
+const WIDE_AR = 16 / 9;
+const NORMAL_AR = 4 / 3;
+const clamp = ({ value, min, max }) => Math.min(Math.max(value, min), max);
+function hasDuplicates(...array) {
+    return new Set(array).size !== array.length;
+}
+function findMostCommon(arr) {
+    return arr.sort((a, b) => arr.filter((v) => v === a).length - arr.filter((v) => v === b).length).pop();
+}
+function pickCellAspectRatio({ choices = [] }) {
+    const minAr = Math.min(...choices);
+    const maxAr = Math.max(...choices);
+    let chosenAr = null;
+    if (minAr === maxAr) {
+        chosenAr = minAr;
+    }
+    else {
+        const dominantAr = hasDuplicates(choices) ? findMostCommon(choices) : maxAr;
+        chosenAr = clamp({ value: dominantAr || maxAr, min: NORMAL_AR, max: WIDE_AR });
+    }
+    return {
+        minAr,
+        maxAr,
+        chosenAr,
+    };
+}
+function getCenterPadding$1({ rows, cols, cellWidth, index, cellCount, gridGap, }) {
+    const max = rows * cols;
+    const leftOver = max - cellCount;
+    if (!leftOver) {
+        return 0;
+    }
+    const lastIndex = max - leftOver - 1;
+    const firstIndex = lastIndex - (cols - leftOver) + 1;
+    const lastRowPadding = (leftOver * cellWidth) / 2 + gridGap;
+    return index >= firstIndex && index <= lastIndex ? lastRowPadding : 0;
+}
+function getCellBounds({ width, height, rows, cols, gridGap, aspectRatio, }) {
+    const cellWidth = (width - (cols - 1) * gridGap) / cols;
+    const cellHeight = (height - (rows - 1) * gridGap) / rows;
+    const ar = cellWidth / cellHeight;
+    let horizontalCorrection = 0;
+    let verticalCorrection = 0;
+    if (aspectRatio < ar) {
+        horizontalCorrection = cellWidth - cellHeight * aspectRatio;
+    }
+    else if (aspectRatio > ar) {
+        verticalCorrection = cellHeight - cellWidth / aspectRatio;
+    }
+    const totalHorizontalCorrection = horizontalCorrection * cols;
+    const totalVerticalCorrection = verticalCorrection * rows;
+    return {
+        cellWidth: cellWidth - horizontalCorrection,
+        cellHeight: cellHeight - verticalCorrection,
+        extraHorizontalPadding: totalHorizontalCorrection / 2,
+        extraVerticalPadding: totalVerticalCorrection / 2,
+    };
+}
+function calculateLayout$2({ width, height, cellCount, gridGap, cellAspectRatios = [NORMAL_AR], paddings = makeBox(), }) {
+    if (!cellCount) {
+        return {
+            cellCount,
+            cellHeight: 0,
+            cellWidth: 0,
+            cols: 0,
+            rows: 0,
+            extraHorizontalPadding: 0,
+            extraVerticalPadding: 0,
+            gridGap,
+            paddings,
+        };
+    }
+    const contentWidth = width - (paddings.left + paddings.right);
+    const contentHeight = height - (paddings.top + paddings.bottom);
+    const cellAspectRatioTuple = pickCellAspectRatio({
+        choices: cellAspectRatios,
+    });
+    let cellAspectRatio = cellAspectRatioTuple.chosenAr;
+    const { rows, cols } = getGridSizeForCount({
+        count: cellCount,
+        width: contentWidth,
+        height: contentHeight,
+        aspectRatio: cellAspectRatio,
+    });
+    if (rows === 1) {
+        cellAspectRatio = clamp({
+            value: contentWidth / cols / contentHeight,
+            min: Math.min(cellAspectRatioTuple.chosenAr, cellAspectRatioTuple.maxAr),
+            max: Math.max(cellAspectRatioTuple.chosenAr, cellAspectRatioTuple.maxAr),
+        });
+    }
+    else if (cols === 1) {
+        cellAspectRatio = clamp({
+            value: contentWidth / (contentHeight / rows),
+            min: Math.min(cellAspectRatioTuple.chosenAr, cellAspectRatioTuple.maxAr),
+            max: Math.max(cellAspectRatioTuple.chosenAr, cellAspectRatioTuple.maxAr),
+        });
+    }
+    const { cellWidth, cellHeight, extraHorizontalPadding, extraVerticalPadding } = getCellBounds({
+        width: contentWidth,
+        height: contentHeight,
+        rows,
+        cols,
+        gridGap,
+        aspectRatio: cellAspectRatio,
+    });
+    return {
+        cellCount,
+        cellHeight,
+        cellWidth,
+        cols,
+        rows,
+        extraHorizontalPadding,
+        extraVerticalPadding,
+        gridGap,
+        paddings,
+    };
+}
+function getCellPropsAtIndexForLayout$1({ index, layout, }) {
+    const { cellWidth, cellHeight, rows, cols, cellCount, gridGap } = layout;
+    const top = Math.floor(index / cols);
+    const left = Math.floor(index % cols);
+    const leftPadding = getCenterPadding$1({ rows, cols, cellWidth, index, cellCount, gridGap });
+    return {
+        top: top * cellHeight + top * gridGap,
+        left: left * cellWidth + left * gridGap + leftPadding,
+        width: cellWidth,
+        height: cellHeight,
+    };
+}
+
+function getCenterPadding({ index, isPortrait, rows, cols, cellBounds, cellCount }) {
+    const canFit = rows * cols;
+    const leftOver = canFit - cellCount;
+    if (!leftOver) {
+        return 0;
+    }
+    const lastIndex = canFit - leftOver - 1;
+    const dimension = isPortrait ? cols : rows;
+    const firstIndex = lastIndex - (dimension - leftOver) + 1;
+    if (index < firstIndex || index > lastIndex) {
+        return 0;
+    }
+    return (leftOver * (isPortrait ? cellBounds.width : cellBounds.height)) / 2;
+}
+function calculateLayout$1({ containerBounds, isPortrait, cellCount, cellBounds, paddings = makeBox(), }) {
+    let width = 0;
+    let height = 0;
+    let rows = 0;
+    let cols = 0;
+    let extraHorizontalPadding = 0;
+    let extraVerticalPadding = 0;
+    const contentWidth = containerBounds.width - paddings.left - paddings.right;
+    const contentHeight = containerBounds.height - paddings.top - paddings.bottom;
+    if (cellCount) {
+        if (isPortrait) {
+            cols = Math.floor(contentWidth / cellBounds.width);
+            rows = Math.ceil(cellCount / cols);
+            width = contentWidth;
+            height = rows * cellBounds.height;
+            extraHorizontalPadding = (contentWidth - cols * cellBounds.width) / 2;
+        }
+        else {
+            rows = Math.floor(contentHeight / cellBounds.height);
+            cols = Math.ceil(cellCount / rows);
+            width = cols * cellBounds.width;
+            height = contentHeight;
+            extraVerticalPadding = (contentHeight - rows * cellBounds.height) / 2;
+        }
+    }
+    return {
+        isPortrait,
+        width: width + paddings.left + paddings.right,
+        height: height + paddings.top + paddings.bottom,
+        cellBounds,
+        cellCount,
+        rows,
+        cols,
+        extraHorizontalPadding,
+        extraVerticalPadding,
+        paddings,
+    };
+}
+function getCellPropsAtIndexForLayout({ index, layout }) {
+    const { isPortrait, rows, cols, cellCount, cellBounds, extraHorizontalPadding, extraVerticalPadding, paddings } = layout;
+    const top = isPortrait ? Math.floor(index / cols) : Math.floor(index % rows);
+    const left = isPortrait ? Math.floor(index % cols) : Math.floor(index / rows);
+    const centerPadding = getCenterPadding({ index, isPortrait, rows, cols, cellBounds, cellCount });
+    return {
+        top: paddings.top + extraVerticalPadding + top * cellBounds.height + (isPortrait ? 0 : centerPadding),
+        left: paddings.left + extraHorizontalPadding + left * cellBounds.width + (isPortrait ? centerPadding : 0),
+        width: cellBounds.width,
+        height: cellBounds.height,
+    };
+}
+
+const { BOTTOM_TOOLBAR_HEIGHT, VIDEO_CONTROLS_MIN_WIDTH, TABLET_BREAKPOINT, SUBGRID_EMPTY_STAGE_MAX_WIDTH } = layoutConstants;
+const MIN_GRID_HEIGHT = 200;
+const MIN_GRID_WIDTH = 300;
+const FLOATING_VIDEO_SIZE = 200;
+const OVERFLOW_ROOM_SUBGRID_TOP_PADDING = 20;
+const CONSTRAINED_OVERFLOW_TRIGGER = 12;
+const SUBGRID_CELL_PADDING_BOX = makeBox({ top: 4, bottom: 4 + 20 + 4, left: 8, right: 8 });
+function getSubgridSizeOptions({ hasOverflow, hasStage }) {
+    if (hasOverflow && hasStage) {
+        return [80];
+    }
+    return [80, 60];
+}
+function getMinGridBounds({ cellCount }) {
+    const isSmallGrid = cellCount <= 6;
+    const minGridHeight = isSmallGrid ? MIN_GRID_HEIGHT - 50 : MIN_GRID_HEIGHT;
+    const minGridWidth = isSmallGrid ? MIN_GRID_WIDTH - 50 : MIN_GRID_WIDTH;
+    return makeBounds({ width: minGridWidth, height: minGridHeight });
+}
+function fitSupersizedContent({ bounds, aspectRatio, minGridContainerBounds, hasPresentationGrid, }) {
+    const { width, height } = bounds;
+    const hasVideoGrid = minGridContainerBounds.width > 0;
+    if (!hasVideoGrid) {
+        return {
+            isPortrait: width <= height,
+            supersizedContentBounds: bounds,
+        };
+    }
+    const minHorizontalSupersizedContentWidth = Math.round(width / 2);
+    const minVerticalSupersizedContentHeight = Math.round(height / 2);
+    const maxHorizontalSupersizedContentWidth = Math.max(width - minGridContainerBounds.width, 0);
+    const maxVerticalSupersizedContentHeight = Math.max(height - minGridContainerBounds.height, 0);
+    let isPortrait = maxHorizontalSupersizedContentWidth <= maxVerticalSupersizedContentHeight;
+    let horizontalCorrection = 0;
+    let verticalCorrection = 0;
+    if (aspectRatio) {
+        const horizontalContentBounds = fitToBounds(aspectRatio, {
+            width: maxHorizontalSupersizedContentWidth,
+            height,
+        });
+        const verticalContentBounds = fitToBounds(aspectRatio, {
+            width,
+            height: maxVerticalSupersizedContentHeight,
+        });
+        const isPortraitContent = aspectRatio <= 1.0;
+        isPortrait = isPortraitContent
+            ? verticalContentBounds.height > horizontalContentBounds.height
+            : verticalContentBounds.width > horizontalContentBounds.width;
+        if (isPortrait) {
+            const wastedSpace = maxVerticalSupersizedContentHeight -
+                Math.max(verticalContentBounds.height, minVerticalSupersizedContentHeight);
+            verticalCorrection = Math.max(wastedSpace, 0);
+        }
+        else {
+            const wastedSpace = maxHorizontalSupersizedContentWidth -
+                Math.max(horizontalContentBounds.width, minHorizontalSupersizedContentWidth);
+            horizontalCorrection = Math.max(wastedSpace, 0);
+        }
+    }
+    else if (hasPresentationGrid) {
+        isPortrait = maxHorizontalSupersizedContentWidth / maxVerticalSupersizedContentHeight >= 5;
+    }
+    const supersizedContentBounds = {
+        width: isPortrait ? width : maxHorizontalSupersizedContentWidth - horizontalCorrection,
+        height: isPortrait ? maxVerticalSupersizedContentHeight - verticalCorrection : height,
+    };
+    return {
+        isPortrait,
+        supersizedContentBounds,
+    };
+}
+function findBestSubgridLayout({ containerBounds, isPortrait, cellCount, cellSizeOptions, cellPaddings, paddings, }) {
+    let layout;
+    for (let i = 0; i < cellSizeOptions.length; i++) {
+        const cellSize = cellSizeOptions[i];
+        layout = calculateLayout$1({
+            containerBounds,
+            isPortrait,
+            cellCount,
+            cellBounds: makeBounds({
+                width: cellSize + cellPaddings.left + cellPaddings.right,
+                height: cellSize + cellPaddings.top + cellPaddings.bottom,
+            }),
+            paddings,
+        });
+        if (layout.width <= containerBounds.width && layout.height <= containerBounds.height) {
+            return layout;
+        }
+    }
+    return layout;
+}
+function calculateSubgridLayout({ containerBounds, isPortrait, cellCount, cellSizeOptions, cellPaddings, paddings, }) {
+    const layout = findBestSubgridLayout({
+        containerBounds,
+        isPortrait,
+        cellCount,
+        cellSizeOptions,
+        cellPaddings,
+        paddings,
+    });
+    const isSmallCell = layout.cellBounds.width - cellPaddings.left - cellPaddings.right ===
+        cellSizeOptions[cellSizeOptions.length - 1];
+    const bounds = makeBounds({
+        width: Math.min(layout.width, containerBounds.width),
+        height: Math.min(layout.height, containerBounds.height),
+    });
+    const contentBounds = makeBounds({ width: layout.width, height: layout.height });
+    if (cellCount === 0) {
+        return {
+            bounds,
+            contentBounds,
+            videoCells: [],
+        };
+    }
+    return {
+        bounds,
+        contentBounds,
+        videoCells: [...Array(cellCount)].map((_, index) => {
+            const { top, left, width, height } = getCellPropsAtIndexForLayout({ index, layout });
+            return {
+                origin: makeOrigin({ top, left }),
+                bounds: makeBounds({ width, height }),
+                paddings: cellPaddings,
+                isSmallCell,
+            };
+        }),
+    };
+}
+function calculateStageLayout({ cellPaddings, cellSizeOptions, containerBounds, containerOrigin, gridGap, hasConstrainedOverflow, hasPresentationContent, hasVideoContent, isConstrained, isMaximizeMode, isPortrait, isSmallScreen, maxGridWidth, shouldOverflowSubgrid, subgridVideos, }) {
+    const { width, height } = containerBounds;
+    const hasVideos = hasPresentationContent || hasVideoContent;
+    const hasSubgrid = subgridVideos.length > 0;
+    if (!hasSubgrid && !hasVideos) {
+        return {
+            isPortrait,
+            videosContainer: makeFrame(),
+            subgrid: Object.assign(Object.assign({}, makeFrame()), { contentBounds: makeBounds(), cells: [] }),
+            hasOverflow: false,
+        };
+    }
+    if (!hasSubgrid) {
+        return {
+            isPortrait,
+            videosContainer: makeFrame(Object.assign(Object.assign({}, containerBounds), containerOrigin)),
+            subgrid: Object.assign(Object.assign({}, makeFrame()), { contentBounds: makeBounds(), cells: [] }),
+            hasOverflow: hasConstrainedOverflow,
+        };
+    }
+    const topSubgridPadding = shouldOverflowSubgrid ? OVERFLOW_ROOM_SUBGRID_TOP_PADDING : 0;
+    let _containerBounds = null;
+    if (!hasVideos) {
+        _containerBounds = makeBounds({
+            width: Math.min(SUBGRID_EMPTY_STAGE_MAX_WIDTH, containerBounds.width),
+            height: containerBounds.height,
+        });
+    }
+    else if (shouldOverflowSubgrid) {
+        const cellSize = cellSizeOptions[0];
+        let visibleSubgridHeight = isMaximizeMode
+            ? BOTTOM_TOOLBAR_HEIGHT
+            : BOTTOM_TOOLBAR_HEIGHT +
+                cellPaddings.top +
+                (isConstrained || isSmallScreen ? cellSize / 2 : cellSize) +
+                cellPaddings.bottom;
+        if (containerBounds.height - visibleSubgridHeight < MIN_GRID_HEIGHT) {
+            visibleSubgridHeight = 0;
+        }
+        _containerBounds = makeBounds({
+            width: containerBounds.width,
+            height: visibleSubgridHeight,
+        });
+    }
+    else {
+        if (isMaximizeMode) {
+            _containerBounds = makeBounds({
+                width: containerBounds.width,
+                height: cellSizeOptions[0] + cellPaddings.top + cellPaddings.bottom,
+            });
+        }
+        else {
+            _containerBounds = isPortrait
+                ? makeBounds({ width: containerBounds.width, height: containerBounds.height / 2 })
+                : makeBounds({ width: containerBounds.width / 2, height: containerBounds.height });
+        }
+    }
+    let leftSubgridPadding = 0;
+    if (_containerBounds.width > maxGridWidth) {
+        leftSubgridPadding = (_containerBounds.width - maxGridWidth) / 2;
+    }
+    const subgridLayout = calculateSubgridLayout({
+        containerBounds: _containerBounds,
+        isPortrait,
+        cellCount: subgridVideos.length,
+        cellSizeOptions,
+        cellPaddings,
+        paddings: makeBox({ top: topSubgridPadding, left: leftSubgridPadding, right: leftSubgridPadding }),
+    });
+    const overflowNeedBounds = makeBounds({
+        width: subgridLayout.contentBounds.width - _containerBounds.width,
+        height: subgridLayout.contentBounds.height - _containerBounds.height,
+    });
+    const hasOverflow = overflowNeedBounds.width > 0 || overflowNeedBounds.height > 0;
+    let subgridBounds = null;
+    if (!hasVideos || shouldOverflowSubgrid || hasOverflow) {
+        subgridBounds = subgridLayout.contentBounds;
+    }
+    else {
+        subgridBounds = subgridLayout.bounds;
+    }
+    let videosContainerBounds;
+    let _subgridContainerShareBounds = subgridBounds;
+    if (hasVideos) {
+        if (shouldOverflowSubgrid) {
+            _subgridContainerShareBounds = makeBounds({
+                width: 0,
+                height: _containerBounds.height + topSubgridPadding + gridGap,
+            });
+        }
+        else {
+            _subgridContainerShareBounds = isPortrait
+                ? makeBounds({ width: 0, height: subgridLayout.bounds.height + gridGap })
+                : makeBounds({ width: subgridLayout.bounds.width + gridGap, height: 0 });
+        }
+        videosContainerBounds = insetBounds({
+            bounds: _subgridContainerShareBounds,
+            fromBounds: containerBounds,
+        });
+    }
+    else {
+        videosContainerBounds = makeBounds();
+    }
+    const videosContainerOrigin = Object.assign({}, containerOrigin);
+    let subgridOrigin;
+    if (hasVideos) {
+        subgridOrigin = makeOrigin({
+            top: isPortrait
+                ? Math.max(containerOrigin.top + height - _subgridContainerShareBounds.height + gridGap, 0)
+                : containerOrigin.top,
+            left: isPortrait ? containerOrigin.left : Math.max(containerOrigin.left + width - subgridBounds.width, 0),
+        });
+    }
+    else {
+        subgridOrigin = makeOrigin({
+            top: containerOrigin.top + Math.max(0, (height - subgridBounds.height) / 2),
+            left: containerOrigin.left + Math.max(0, (width - subgridBounds.width) / 2),
+        });
+    }
+    return {
+        isPortrait,
+        videosContainer: makeFrame(Object.assign(Object.assign({}, videosContainerBounds), videosContainerOrigin)),
+        subgrid: Object.assign(Object.assign({}, makeFrame(Object.assign(Object.assign({}, subgridBounds), subgridOrigin))), { cells: subgridLayout.videoCells.map((cell, index) => {
+                var _a, _b;
+                return (Object.assign({ aspectRatio: ((_a = subgridVideos[index]) === null || _a === void 0 ? void 0 : _a.aspectRatio) || 1, type: "video", clientId: (_b = subgridVideos[index]) === null || _b === void 0 ? void 0 : _b.clientId }, cell));
+            }), contentBounds: subgridLayout.contentBounds }),
+        hasOverflow: hasOverflow || shouldOverflowSubgrid || hasConstrainedOverflow,
+        overflowNeedBounds: shouldOverflowSubgrid ? makeBounds() : overflowNeedBounds,
+    };
+}
+function calculateVideosContainerLayout({ containerBounds, containerOrigin, gridGap, supersizedContentAspectRatio, hasPresentationContent, hasPresentationGrid, hasVideoContent, minGridBounds, }) {
+    const { width, height } = containerBounds;
+    let isPortrait = width <= height;
+    let presentationGridBounds = makeBounds();
+    let presentationGridOrigin = makeOrigin();
+    let videoGridBounds = hasVideoContent ? Object.assign({}, containerBounds) : makeBounds();
+    let videoGridOrigin = hasVideoContent ? Object.assign({}, containerOrigin) : makeOrigin();
+    if (hasPresentationContent) {
+        const minGridContainerBounds = makeBounds({
+            width: hasVideoContent ? minGridBounds.width + gridGap : 0,
+            height: hasVideoContent ? minGridBounds.height + gridGap : 0,
+        });
+        const supersizedContentLayout = fitSupersizedContent({
+            bounds: containerBounds,
+            aspectRatio: supersizedContentAspectRatio || 1,
+            minGridContainerBounds,
+            hasPresentationGrid,
+        });
+        isPortrait = supersizedContentLayout.isPortrait;
+        presentationGridBounds = supersizedContentLayout.supersizedContentBounds;
+        presentationGridOrigin = Object.assign({}, containerOrigin);
+        if (hasVideoContent) {
+            videoGridBounds = makeBounds({
+                width: isPortrait
+                    ? containerBounds.width
+                    : containerBounds.width - presentationGridBounds.width - gridGap,
+                height: isPortrait
+                    ? containerBounds.height - presentationGridBounds.height - gridGap
+                    : containerBounds.height,
+            });
+            videoGridOrigin = makeOrigin({
+                top: isPortrait ? containerOrigin.top + presentationGridBounds.height + gridGap : containerOrigin.top,
+                left: isPortrait ? containerOrigin.left : containerOrigin.left + presentationGridBounds.width + gridGap,
+            });
+        }
+    }
+    return {
+        isPortrait,
+        presentationGrid: Object.assign({}, makeFrame(Object.assign(Object.assign({}, presentationGridBounds), presentationGridOrigin))),
+        videoGrid: makeFrame(Object.assign(Object.assign({}, videoGridBounds), videoGridOrigin)),
+    };
+}
+function calculateGridLayout({ containerBounds, paddings = makeBox(), videos, isConstrained, maxGridWidth, gridGap, }) {
+    const { width, height } = containerBounds;
+    const cappedWidth = maxGridWidth ? Math.min(width, maxGridWidth) : width;
+    const cellCount = videos.length;
+    let videoCells = null;
+    const cellAspectRatios = videos.map((video) => video.aspectRatio || 1);
+    const minGridBounds = getMinGridBounds({ cellCount });
+    const gridLayout = calculateLayout$2({
+        width: cappedWidth,
+        height,
+        cellCount,
+        gridGap,
+        cellAspectRatios,
+        paddings,
+    });
+    videoCells = videos.map((video, index) => {
+        const cellProps = getCellPropsAtIndexForLayout$1({ index, layout: gridLayout });
+        const isSmallCell = gridLayout.cellWidth < minGridBounds.width;
+        const shouldZoom = isConstrained || isSmallCell;
+        const aspectRatio = shouldZoom ? gridLayout.cellWidth / gridLayout.cellHeight : video.aspectRatio || 1;
+        return {
+            clientId: video.clientId,
+            isDraggable: video.isDraggable,
+            origin: makeOrigin({
+                top: cellProps.top,
+                left: cellProps.left,
+            }),
+            bounds: makeBounds({
+                width: cellProps.width,
+                height: cellProps.height,
+            }),
+            aspectRatio,
+            isSmallCell,
+            type: "video",
+        };
+    });
+    return {
+        videoCells,
+        extraHorizontalPadding: width !== cappedWidth
+            ? gridLayout.extraHorizontalPadding + (width - cappedWidth) / 2
+            : gridLayout.extraHorizontalPadding,
+        extraVerticalPadding: gridLayout.extraVerticalPadding,
+        paddings: gridLayout.paddings,
+        gridGap,
+    };
+}
+function calculateFloatingLayout({ roomBounds, containerFrame, floatingVideo, videoControlsHeight, margin = 8, }) {
+    if (!floatingVideo) {
+        return null;
+    }
+    const bounds = fitToBounds(floatingVideo.aspectRatio || 0, {
+        width: FLOATING_VIDEO_SIZE,
+        height: FLOATING_VIDEO_SIZE,
+    });
+    const isFloating = !(roomBounds.height - containerFrame.bounds.height - containerFrame.origin.top);
+    const isConstrained = containerFrame.bounds.width - (bounds.width + margin) * 2 < VIDEO_CONTROLS_MIN_WIDTH;
+    let verticalOffset = 0;
+    if (isFloating && isConstrained) {
+        verticalOffset = videoControlsHeight * -1;
+    }
+    else if (!isFloating && !isConstrained) {
+        verticalOffset = videoControlsHeight;
+    }
+    const origin = makeOrigin({
+        top: containerFrame.origin.top + (containerFrame.bounds.height - bounds.height - margin) + verticalOffset,
+        left: containerFrame.origin.left + (containerFrame.bounds.width - bounds.width - margin),
+    });
+    const videoCell = {
+        clientId: floatingVideo.clientId,
+        isDraggable: floatingVideo.isDraggable,
+        origin,
+        bounds,
+        aspectRatio: floatingVideo.aspectRatio,
+        isSmallCell: true,
+    };
+    return videoCell;
+}
+function rebalanceLayoutPaddedAreas({ a, b, gridGap, isPortrait, }) {
+    const aPad = isPortrait ? a.vertical : a.horizontal;
+    const bPad = isPortrait ? b.vertical : b.horizontal;
+    if (aPad === bPad) {
+        return { a: 0, b: 0 };
+    }
+    const sArea = aPad < bPad ? a : b;
+    const sAreaPad = isPortrait ? sArea.vertical : sArea.horizontal;
+    const spaceBetween = gridGap + (aPad + bPad);
+    const offset = (spaceBetween + sAreaPad) / 2 - sAreaPad;
+    return {
+        a: sArea === a ? offset : 0,
+        b: sArea === b ? offset : 0,
+    };
+}
+function rebalanceLayoutInPlace({ videosContainerLayout, gridLayout, presentationGridLayout, stageLayout, gridGap, shouldOverflowSubgrid, }) {
+    const hasPresentationGrid = videosContainerLayout.presentationGrid.bounds.width > 0;
+    const hasVideoGrid = videosContainerLayout.videoGrid.bounds.width > 0;
+    const hasSubgrid = stageLayout.subgrid.bounds.width > 0;
+    const videoGridRebalanceOffset = { vertical: 0, horizontal: 0 };
+    if (hasPresentationGrid && hasVideoGrid) {
+        const correction = rebalanceLayoutPaddedAreas({
+            a: {
+                horizontal: presentationGridLayout.extraHorizontalPadding,
+                vertical: presentationGridLayout.extraVerticalPadding,
+            },
+            b: {
+                horizontal: gridLayout.extraHorizontalPadding,
+                vertical: gridLayout.extraVerticalPadding,
+            },
+            gridGap,
+            isPortrait: videosContainerLayout.isPortrait,
+        });
+        if (videosContainerLayout.isPortrait) {
+            videosContainerLayout.presentationGrid.origin.top += correction.a;
+            videosContainerLayout.videoGrid.origin.top -= correction.b;
+            videoGridRebalanceOffset.vertical = correction.b;
+        }
+        else {
+            videosContainerLayout.presentationGrid.origin.left += correction.a;
+            videosContainerLayout.videoGrid.origin.left -= correction.b;
+            videoGridRebalanceOffset.horizontal = correction.b;
+        }
+    }
+    if (hasSubgrid && (hasPresentationGrid || hasVideoGrid) && !shouldOverflowSubgrid) {
+        const presentationGridArea = {
+            horizontal: presentationGridLayout.extraHorizontalPadding,
+            vertical: presentationGridLayout.extraVerticalPadding,
+        };
+        const gridArea = {
+            horizontal: gridLayout.extraHorizontalPadding + videoGridRebalanceOffset.horizontal,
+            vertical: gridLayout.extraVerticalPadding + videoGridRebalanceOffset.vertical,
+        };
+        let area;
+        const hasBothGrids = hasPresentationGrid && hasVideoGrid;
+        if (hasBothGrids && videosContainerLayout.isPortrait && !stageLayout.isPortrait) {
+            area = presentationGridArea.horizontal < gridArea.horizontal ? presentationGridArea : gridArea;
+        }
+        else if (hasBothGrids && !videosContainerLayout.isPortrait && stageLayout.isPortrait) {
+            area = presentationGridArea.vertical < gridArea.vertical ? presentationGridArea : gridArea;
+        }
+        else if (hasVideoGrid) {
+            area = gridArea;
+        }
+        else {
+            area = presentationGridArea;
+        }
+        const correction = rebalanceLayoutPaddedAreas({
+            a: area,
+            b: {
+                horizontal: 0,
+                vertical: 0,
+            },
+            gridGap,
+            isPortrait: stageLayout.isPortrait,
+        });
+        if (stageLayout.isPortrait) {
+            stageLayout.subgrid.origin.top -= correction.b;
+        }
+        else {
+            stageLayout.subgrid.origin.left -= correction.b;
+        }
+    }
+}
+function redistributeEmptySpaceToSubgridInPlace({ vPaddings, hPaddings, stageLayout, videosContainerLayout, }) {
+    if (stageLayout.isPortrait && (vPaddings.presentationGrid || vPaddings.grid)) {
+        const totalVPadding = videosContainerLayout.isPortrait
+            ? vPaddings.presentationGrid * 2 + vPaddings.grid * 2
+            : vPaddings.presentationGrid + vPaddings.grid;
+        stageLayout.videosContainer.bounds.height -= totalVPadding;
+        stageLayout.subgrid.origin.top -= totalVPadding;
+        stageLayout.subgrid.bounds.height += totalVPadding;
+        videosContainerLayout.presentationGrid.bounds.height -= vPaddings.presentationGrid * 2;
+        videosContainerLayout.videoGrid.bounds.height -= vPaddings.grid * 2;
+        if (videosContainerLayout.isPortrait) {
+            videosContainerLayout.videoGrid.origin.top -= vPaddings.presentationGrid;
+        }
+    }
+    if (!stageLayout.isPortrait && (hPaddings.presentationGrid || hPaddings.grid)) {
+        const totalHPadding = videosContainerLayout.isPortrait
+            ? hPaddings.presentationGrid + hPaddings.grid
+            : hPaddings.presentationGrid * 2 + hPaddings.grid * 2;
+        stageLayout.videosContainer.bounds.width -= totalHPadding;
+        stageLayout.subgrid.origin.left -= totalHPadding;
+        stageLayout.subgrid.bounds.width += totalHPadding;
+        videosContainerLayout.presentationGrid.bounds.width -= hPaddings.presentationGrid * 2;
+        videosContainerLayout.videoGrid.bounds.width -= hPaddings.grid * 2;
+        if (!videosContainerLayout.isPortrait) {
+            videosContainerLayout.videoGrid.origin.left -= hPaddings.grid;
+        }
+    }
+}
+function findGridsEmptySpaceToRedistribute({ need, stageLayout, gridLayout, presentationGridLayout, videosContainerLayout, }) {
+    let vPaddings = { presentationGrid: 0, grid: 0 };
+    let hPaddings = { presentationGrid: 0, grid: 0 };
+    if (stageLayout.isPortrait) {
+        const minDim = Math.min(gridLayout.extraVerticalPadding, presentationGridLayout.extraVerticalPadding);
+        vPaddings = {
+            presentationGrid: Math.min(videosContainerLayout.isPortrait ? presentationGridLayout.extraVerticalPadding : minDim, need.height),
+            grid: Math.min(videosContainerLayout.isPortrait ? gridLayout.extraVerticalPadding : minDim, need.height),
+        };
+    }
+    else {
+        const minDim = Math.min(gridLayout.extraHorizontalPadding, presentationGridLayout.extraHorizontalPadding);
+        hPaddings = {
+            presentationGrid: Math.min(videosContainerLayout.isPortrait ? minDim : presentationGridLayout.extraHorizontalPadding, need.width),
+            grid: Math.min(videosContainerLayout.isPortrait ? minDim : gridLayout.extraHorizontalPadding, need.width),
+        };
+    }
+    return { vPaddings, hPaddings };
+}
+function calculateGridLayouts({ gridGap, isConstrained, presentationVideos, videos, videosContainerLayout, gridLayoutPaddings = makeBox(), presentationGridLayoutPaddings = makeBox(), maxGridWidth, }) {
+    const gridLayout = calculateGridLayout({
+        containerBounds: videosContainerLayout.videoGrid.bounds,
+        gridGap,
+        isConstrained,
+        maxGridWidth,
+        paddings: gridLayoutPaddings,
+        videos,
+    });
+    const presentationGridLayout = calculateGridLayout({
+        containerBounds: videosContainerLayout.presentationGrid.bounds,
+        gridGap,
+        isConstrained,
+        maxGridWidth,
+        paddings: presentationGridLayoutPaddings,
+        videos: presentationVideos,
+    });
+    return { gridLayout, presentationGridLayout };
+}
+function calculateLayout({ floatingVideo, frame, gridGap, isConstrained, isMaximizeMode = false, isXLMeetingSize = false, paddings = makeBox(), presentationVideos = [], rebalanceLayout = false, roomBounds, roomLayoutHasOverlow = false, subgridCellPaddings = SUBGRID_CELL_PADDING_BOX, subgridVideos = [], videoControlsHeight = 0, videos = [], videoGridGap, }) {
+    let shouldOverflowSubgrid = isXLMeetingSize && (screen ? screen.width <= 2048 : true);
+    const hasPresentationContent = !!presentationVideos.length;
+    const hasPresentationGrid = presentationVideos.length > 1;
+    const supersizedContentAspectRatio = hasPresentationContent && !hasPresentationGrid ? presentationVideos[0].aspectRatio : null;
+    const hasVideoContent = !!videos.length;
+    const width = frame.bounds.width - paddings.left - paddings.right;
+    let height = frame.bounds.height - paddings.top - paddings.bottom;
+    const maxGridWidth = Math.max(25 * 88, (80 / 100) * width);
+    const hasConstrainedOverflow = isConstrained && videos.length > CONSTRAINED_OVERFLOW_TRIGGER;
+    const lineHeight = height / 4;
+    const extraLines = Math.ceil((videos.length - CONSTRAINED_OVERFLOW_TRIGGER) / 3);
+    height = hasConstrainedOverflow ? height + lineHeight * extraLines : height;
+    const stageBounds = makeBounds({ width, height });
+    const stageOrigin = makeOrigin({ top: paddings.top, left: paddings.left });
+    const _minBounds = getMinGridBounds({ cellCount: videos.length });
+    const minGridBounds = _minBounds;
+    const isSmallScreen = roomBounds.width < TABLET_BREAKPOINT || roomBounds.height < TABLET_BREAKPOINT;
+    const forceStageLayoutPortrait = isMaximizeMode;
+    const stageLayoutIsPortrait = forceStageLayoutPortrait ||
+        shouldOverflowSubgrid ||
+        !(hasPresentationContent || hasVideoContent) ||
+        stageBounds.width <= stageBounds.height;
+    const stableStageLayoutProps = {
+        cellPaddings: subgridCellPaddings,
+        containerBounds: stageBounds,
+        containerOrigin: stageOrigin,
+        gridGap,
+        hasPresentationContent,
+        hasVideoContent,
+        isConstrained,
+        isMaximizeMode,
+        isSmallScreen,
+        subgridVideos,
+        maxGridWidth,
+    };
+    let stageLayout = calculateStageLayout(Object.assign(Object.assign({}, stableStageLayoutProps), { cellSizeOptions: getSubgridSizeOptions({
+            hasOverflow: shouldOverflowSubgrid,
+            hasStage: hasPresentationContent || hasVideoContent,
+        }), isPortrait: stageLayoutIsPortrait, shouldOverflowSubgrid,
+        hasConstrainedOverflow }));
+    let forceRerunAsOverflow = false;
+    if (!shouldOverflowSubgrid && roomLayoutHasOverlow && !stageLayout.hasOverflow) {
+        const _stageLayout = calculateStageLayout(Object.assign(Object.assign({}, stableStageLayoutProps), { containerBounds: makeBounds({
+                width: stageBounds.width,
+                height: stageBounds.height - BOTTOM_TOOLBAR_HEIGHT,
+            }), cellSizeOptions: getSubgridSizeOptions({
+                hasOverflow: shouldOverflowSubgrid,
+                hasStage: hasPresentationContent || hasVideoContent,
+            }), isPortrait: stageLayoutIsPortrait, shouldOverflowSubgrid,
+            hasConstrainedOverflow }));
+        if (_stageLayout.hasOverflow) {
+            forceRerunAsOverflow = true;
+        }
+    }
+    if (forceRerunAsOverflow || (stageLayout.hasOverflow && !shouldOverflowSubgrid)) {
+        shouldOverflowSubgrid = true;
+        stageLayout = calculateStageLayout(Object.assign(Object.assign({}, stableStageLayoutProps), { cellSizeOptions: getSubgridSizeOptions({
+                hasOverflow: true,
+                hasStage: hasPresentationContent || hasVideoContent,
+            }), isPortrait: true, shouldOverflowSubgrid,
+            hasConstrainedOverflow }));
+    }
+    const videosContainerLayout = calculateVideosContainerLayout({
+        containerBounds: stageLayout.videosContainer.bounds,
+        containerOrigin: stageLayout.videosContainer.origin,
+        gridGap,
+        supersizedContentAspectRatio: supersizedContentAspectRatio || 1,
+        hasPresentationContent,
+        hasPresentationGrid,
+        hasVideoContent,
+        minGridBounds,
+    });
+    let { gridLayout, presentationGridLayout } = calculateGridLayouts({
+        gridGap: videoGridGap || gridGap,
+        isConstrained,
+        presentationVideos,
+        videos,
+        videosContainerLayout,
+        maxGridWidth,
+    });
+    if (stageLayout.hasOverflow && !shouldOverflowSubgrid) {
+        const { vPaddings, hPaddings } = findGridsEmptySpaceToRedistribute({
+            need: stageLayout.overflowNeedBounds || makeBounds(),
+            stageLayout,
+            gridLayout,
+            presentationGridLayout,
+            videosContainerLayout,
+        });
+        if (vPaddings.presentationGrid || vPaddings.grid || hPaddings.presentationGrid || hPaddings.grid) {
+            redistributeEmptySpaceToSubgridInPlace({ vPaddings, hPaddings, stageLayout, videosContainerLayout });
+            ({ gridLayout, presentationGridLayout } = calculateGridLayouts({
+                gridGap: videoGridGap || gridGap,
+                isConstrained,
+                presentationVideos,
+                videos,
+                videosContainerLayout,
+                maxGridWidth,
+            }));
+        }
+    }
+    const floatingLayout = calculateFloatingLayout({
+        roomBounds,
+        containerFrame: frame,
+        floatingVideo: floatingVideo || null,
+        videoControlsHeight,
+    });
+    if (rebalanceLayout) {
+        rebalanceLayoutInPlace({
+            videosContainerLayout,
+            gridLayout,
+            presentationGridLayout,
+            stageLayout,
+            gridGap,
+            shouldOverflowSubgrid,
+        });
+    }
+    let overflowBoundsHeight = paddings.top + stageLayout.videosContainer.bounds.height + stageLayout.subgrid.bounds.height + paddings.bottom;
+    if (hasPresentationContent || hasVideoContent) {
+        overflowBoundsHeight += gridGap;
+    }
+    return {
+        isPortrait: stageLayout.isPortrait,
+        hasOverflow: stageLayout.hasOverflow,
+        videosContainer: Object.assign(Object.assign({}, videosContainerLayout), { bounds: makeBounds({
+                width: stageLayout.videosContainer.bounds.width,
+                height: stageLayout.videosContainer.bounds.height,
+            }), origin: makeOrigin({
+                top: stageLayout.videosContainer.origin.top,
+                left: stageLayout.videosContainer.origin.left,
+            }) }),
+        bounds: makeBounds({
+            height: shouldOverflowSubgrid ? overflowBoundsHeight : frame.bounds.height,
+            width: frame.bounds.width,
+        }),
+        gridGap,
+        presentationGrid: Object.assign(Object.assign({}, videosContainerLayout.presentationGrid), { cells: presentationGridLayout.videoCells, paddings: makeBox({
+                top: presentationGridLayout.paddings.top + presentationGridLayout.extraVerticalPadding,
+                bottom: presentationGridLayout.paddings.bottom + presentationGridLayout.extraVerticalPadding,
+                left: presentationGridLayout.paddings.left + presentationGridLayout.extraHorizontalPadding,
+                right: presentationGridLayout.paddings.right + presentationGridLayout.extraHorizontalPadding,
+            }) }),
+        videoGrid: Object.assign(Object.assign({}, videosContainerLayout.videoGrid), { cells: gridLayout.videoCells, paddings: makeBox({
+                top: gridLayout.paddings.top + gridLayout.extraVerticalPadding,
+                bottom: gridLayout.paddings.bottom + gridLayout.extraVerticalPadding,
+                left: gridLayout.paddings.left + gridLayout.extraHorizontalPadding,
+                right: gridLayout.paddings.right + gridLayout.extraHorizontalPadding,
+            }) }),
+        subgrid: stageLayout.subgrid,
+        floatingContent: Object.assign(Object.assign({}, floatingLayout), floatingVideo),
+    };
+}
+
+function makeVideoCellView({ aspectRatio, avatarSize, cellPaddings, client = undefined, isDraggable = true, isPlaceholder = false, isSubgrid = false, }) {
+    return {
+        aspectRatio: aspectRatio || 16 / 9,
+        avatarSize,
+        cellPaddings,
+        client,
+        clientId: (client === null || client === void 0 ? void 0 : client.id) || "",
+        isDraggable,
+        isPlaceholder,
+        isSubgrid,
+        type: "video",
+    };
+}
+
+const STAGE_PARTICIPANT_LIMIT = 12;
+const ACTIVE_VIDEO_SUBGRID_TRIGGER = 12;
+
+function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, shouldShowSubgrid, spotlightedParticipants, }) {
+    if (!shouldShowSubgrid) {
+        return [];
+    }
+    const hasSpotlights = spotlightedParticipants.length > 0;
+    const hasPresentationStage = hasSpotlights;
+    const notSpotlighted = clientViews.filter((client) => !client.isPresentation && !spotlightedParticipants.includes(client));
+    const noVideoViews = notSpotlighted.filter((client) => !client.isVideoEnabled);
+    const videoLimitReached = notSpotlighted.filter((client) => client.isVideoEnabled).length > activeVideosSubgridTrigger;
+    const unmutedVideos = notSpotlighted.filter((client) => !noVideoViews.includes(client) && client.isAudioEnabled);
+    const mutedVideos = notSpotlighted.filter((client) => !noVideoViews.includes(client) && !client.isAudioEnabled);
+    if (noVideoViews.length && hasPresentationStage) {
+        return [...mutedVideos, ...noVideoViews];
+    }
+    if (videoLimitReached && mutedVideos.length) {
+        const sorted = [...unmutedVideos, ...mutedVideos];
+        const inGrid = sorted.slice(0, activeVideosSubgridTrigger);
+        if (inGrid.length <= activeVideosSubgridTrigger) {
+            return [...mutedVideos.filter((client) => !inGrid.includes(client)), ...noVideoViews];
+        }
+        else {
+            return [...mutedVideos, ...noVideoViews];
+        }
+    }
+    return noVideoViews;
+}
+function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID_TRIGGER, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, forceSubgrid = true, } = {}) {
+    const allClientViews = useAppSelector(selectAllClientViews);
+    const spotlightedParticipants = useAppSelector(selectSpotlightedClientViews);
+    const numParticipants = useAppSelector(selectNumParticipants);
+    const shouldShowSubgrid = React.useMemo(() => {
+        return forceSubgrid ? true : numParticipants > stageParticipantLimit;
+    }, [forceSubgrid, numParticipants, stageParticipantLimit]);
+    const clientViewsInSubgrid = React.useMemo(() => {
+        return calculateSubgridViews({
+            clientViews: allClientViews,
+            activeVideosSubgridTrigger,
+            shouldShowSubgrid,
+            spotlightedParticipants,
+        });
+    }, [allClientViews, shouldShowSubgrid, activeVideosSubgridTrigger, spotlightedParticipants]);
+    const clientViewsOnStage = React.useMemo(() => {
+        return allClientViews.filter((client) => !clientViewsInSubgrid.includes(client));
+    }, [allClientViews, clientViewsInSubgrid]);
+    const clientViewsInPresentationGrid = React.useMemo(() => {
+        return allClientViews.filter((client) => client.isPresentation).concat(spotlightedParticipants);
+    }, [allClientViews, spotlightedParticipants]);
+    const clientViewsInGrid = React.useMemo(() => {
+        return clientViewsOnStage.filter((client) => !clientViewsInPresentationGrid.includes(client));
+    }, [clientViewsOnStage, clientViewsInPresentationGrid]);
+    return {
+        clientViewsInGrid,
+        clientViewsInPresentationGrid,
+        clientViewsInSubgrid,
+    };
+}
+
+function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, } = {}) {
+    const [containerBounds, setContainerBounds] = React.useState({ width: 0, height: 0 });
+    const [clientAspectRatios, setClientAspectRatios] = React.useState({});
+    const { clientViewsInGrid, clientViewsInPresentationGrid, clientViewsInSubgrid } = useGridParticipants({
+        activeVideosSubgridTrigger,
+        forceSubgrid,
+        stageParticipantLimit,
+    });
+    const cellViewsVideoGrid = React.useMemo(() => {
+        return clientViewsInGrid.map((client) => {
+            return makeVideoCellView({
+                client,
+                aspectRatio: clientAspectRatios[client.id],
+                avatarSize: 0,
+                cellPaddings: { top: 0, right: 0 },
+            });
+        });
+    }, [clientViewsInGrid, clientAspectRatios]);
+    const cellViewsInPresentationGrid = React.useMemo(() => {
+        return clientViewsInPresentationGrid.map((client) => {
+            return makeVideoCellView({
+                client,
+                aspectRatio: clientAspectRatios[client.id],
+                avatarSize: 0,
+                cellPaddings: { top: 0, right: 0 },
+            });
+        });
+    }, [clientViewsInPresentationGrid, clientAspectRatios]);
+    const cellViewsInSubgrid = React.useMemo(() => {
+        return clientViewsInSubgrid.map((client) => {
+            return makeVideoCellView({
+                client,
+                aspectRatio: clientAspectRatios[client.id],
+                avatarSize: 0,
+                cellPaddings: { top: 0, right: 0 },
+                isSubgrid: true,
+            });
+        });
+    }, [clientViewsInSubgrid, clientAspectRatios]);
+    const containerFrame = React.useMemo(() => {
+        return makeFrame(containerBounds);
+    }, [containerBounds]);
+    const videoStage = React.useMemo(() => {
+        return calculateLayout({
+            frame: containerFrame,
+            gridGap: 8,
+            isConstrained: false,
+            roomBounds: containerFrame.bounds,
+            videos: cellViewsVideoGrid,
+            videoGridGap: 0,
+            presentationVideos: cellViewsInPresentationGrid,
+            subgridVideos: cellViewsInSubgrid,
+        });
+    }, [containerFrame, cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid]);
+    return {
+        cellViewsVideoGrid,
+        cellViewsInPresentationGrid,
+        cellViewsInSubgrid,
+        videoStage,
+        setContainerBounds,
+        setClientAspectRatios,
+    };
+}
+
+const getInitialsFromName = (name = "") => {
+    name = name.trim();
+    if (name) {
+        const initials = name.split(/-| /).map((n) => runes(n)[0]);
+        return initials.slice(0, 3);
+    }
+    return [];
+};
+const Initials = ({ name }) => {
+    const initials = getInitialsFromName(name);
+    const fontSize = [0, 56, 48, 40][initials.length] || 32;
+    const initialsStr = initials.join("").toUpperCase();
+    return (React.createElement("svg", { viewBox: "-60 -60 120 120", "aria-hidden": "true", style: {
+            height: "100%",
+            pointerEvents: "none",
+            width: "100%",
+        } },
+        React.createElement("text", { x: 0, y: 0, textAnchor: "middle", dominantBaseline: "central", fontSize: fontSize }, initialsStr)));
+};
+function Avatar(_a) {
+    var { avatarUrl, className, size = 40, name, variant = "round" } = _a, rest = __rest(_a, ["avatarUrl", "className", "size", "name", "variant"]);
+    return (React.createElement("div", Object.assign({ style: {
+            height: `${size}px`,
+            width: `${size}px`,
+            userSelect: "none",
+            overflow: "hidden",
+            borderRadius: variant === "round" ? "50%" : "4px",
+            backgroundColor: "#f8e3c8",
+        }, className: className, title: name }, rest), !avatarUrl && name ? (React.createElement(Initials, { name: name })) : (React.createElement("img", { src: avatarUrl || "", alt: "", style: {
+            height: "100%",
+            width: "100%",
+            objectFit: "cover",
+            maxWidth: "initial",
+        } }))));
+}
+
+function VideoMutedIndicator({ avatarUrl, displayName, isSmallCell, withRoundedCorners }) {
+    return (React.createElement("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            height: "100%",
+            width: "100%",
+            borderRadius: withRoundedCorners ? "8px" : "0",
+        } },
+        React.createElement("div", { style: {
+                height: isSmallCell ? 60 : 80,
+                width: isSmallCell ? 60 : 80,
+                pointerEvents: "none",
+                position: "relative",
+            } },
+            React.createElement(Avatar, { variant: "square", avatarUrl: avatarUrl, name: displayName, size: isSmallCell ? 60 : 80 }))));
+}
+
+function renderCellView({ cellView, onSetClientAspectRatio }) {
+    switch (cellView.type) {
+        case "video":
+            return (React.createElement(GridVideoCellView, { aspectRatio: cellView.aspectRatio, participant: cellView.client, isPlaceholder: cellView.isPlaceholder, isSubgrid: cellView.isSubgrid, key: cellView.clientId, onSetClientAspectRatio: onSetClientAspectRatio }));
+    }
+}
+function GridVideoCellView({ aspectRatio, participant, render, onSetClientAspectRatio }) {
+    const videoEl = React.useRef(null);
+    const handleResize = React.useCallback(() => {
+        const ar = videoEl.current && videoEl.current.captureAspectRatio();
+        if (ar && ar !== aspectRatio && (participant === null || participant === void 0 ? void 0 : participant.id)) {
+            onSetClientAspectRatio({ aspectRatio: ar, clientId: participant.id });
+        }
+    }, []);
+    return (React.createElement("div", null, render ? (render()) : (participant === null || participant === void 0 ? void 0 : participant.stream) && participant.isVideoEnabled ? (React.createElement(VideoView, { ref: videoEl, stream: participant.stream, onVideoResize: handleResize, style: {
+            borderRadius: "8px",
+        } })) : (React.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true }))));
+}
+function Grid({ renderParticipant, stageParticipantLimit }) {
+    const gridRef = React.useRef(null);
+    const { cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid, videoStage, setContainerBounds, setClientAspectRatios, } = useGrid({ activeVideosSubgridTrigger: 12, stageParticipantLimit });
+    const presentationGridContent = React.useMemo(() => cellViewsInPresentationGrid.map((cellView) => renderCellView({
+        cellView,
+        onSetClientAspectRatio: ({ aspectRatio, clientId }) => setClientAspectRatios((prev) => (Object.assign(Object.assign({}, prev), { [clientId]: aspectRatio }))),
+    })), [cellViewsInPresentationGrid]);
+    const gridContent = React.useMemo(() => cellViewsVideoGrid.map((cellView) => renderCellView({
+        cellView,
+        onSetClientAspectRatio: ({ aspectRatio, clientId }) => setClientAspectRatios((prev) => (Object.assign(Object.assign({}, prev), { [clientId]: aspectRatio }))),
+    })), [cellViewsVideoGrid]);
+    const subgridContent = React.useMemo(() => cellViewsInSubgrid.map((cellView) => renderCellView({
+        cellView,
+        onSetClientAspectRatio: ({ aspectRatio, clientId }) => setClientAspectRatios((prev) => (Object.assign(Object.assign({}, prev), { [clientId]: aspectRatio }))),
+    })), [cellViewsInSubgrid]);
+    React.useEffect(() => {
+        if (!gridRef.current) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(debounce(() => {
+            var _a, _b, _c, _d;
+            setContainerBounds({
+                width: (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 640,
+                height: (_d = (_c = gridRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 480,
+            });
+        }, { delay: 60, edges: false }));
+        resizeObserver.observe(gridRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return (React.createElement("div", { ref: gridRef, style: {
+            width: "100%",
+            height: "100%",
+            position: "relative",
+        } },
+        React.createElement(VideoStageLayout, { layoutVideoStage: videoStage, presentationGridContent: presentationGridContent, gridContent: gridContent, subgridContent: subgridContent })));
+}
+
+export { Grid as VideoGrid, VideoView, Provider as WherebyProvider, useLocalMedia, useRoomConnection };