@whereby.com/browser-sdk 3.9.1 → 3.9.3

package/dist/react/index.cjs

@@ -0,0 +1,2251 @@
+'use strict';
+
+var React = require('react');
+var reactRedux = require('react-redux');
+var core = require('@whereby.com/core');
+var toolkit = require('@reduxjs/toolkit');
+var runes = require('runes');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
+
+function Provider({ children }) {
+    const services = core.createServices();
+    const store = core.createStore({ injectServices: services });
+    return React__namespace.createElement(reactRedux.Provider, { store: store }, children);
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const useAppDispatch = reactRedux.useDispatch.withTypes();
+const useAppSelector = reactRedux.useSelector.withTypes();
+
+const VideoView = React__namespace.forwardRef((_a, ref) => {
+    var { muted, mirror = false, stream, onVideoResize } = _a, rest = __rest(_a, ["muted", "mirror", "stream", "onVideoResize"]);
+    const dispatch = useAppDispatch();
+    const currentSpeakerId = useAppSelector(core.selectCurrentSpeakerDeviceId);
+    const videoEl = React__namespace.useRef(null);
+    const audioEl = React__namespace.useRef(null);
+    React__namespace.useImperativeHandle(ref, () => {
+        return Object.assign(videoEl.current, {
+            captureAspectRatio: () => {
+                if (!videoEl.current) {
+                    return null;
+                }
+                const h = videoEl.current.videoHeight;
+                const w = videoEl.current.videoWidth;
+                if (w && h && w + h > 20) {
+                    return w / h;
+                }
+                return null;
+            },
+        });
+    });
+    React__namespace.useEffect(() => {
+        if (!videoEl.current) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(core.debounce(() => {
+            if (videoEl.current && (stream === null || stream === void 0 ? void 0 : stream.id)) {
+                const width = videoEl.current.clientWidth;
+                const height = videoEl.current.clientHeight;
+                dispatch(core.doRtcReportStreamResolution({
+                    streamId: stream.id,
+                    width,
+                    height,
+                }));
+                if (onVideoResize) {
+                    onVideoResize({
+                        width,
+                        height,
+                        stream,
+                    });
+                }
+            }
+        }, { delay: 1000, edges: true }));
+        resizeObserver.observe(videoEl.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [stream]);
+    React__namespace.useEffect(() => {
+        if (!videoEl.current) {
+            return;
+        }
+        if (videoEl.current.srcObject !== stream) {
+            videoEl.current.srcObject = stream;
+        }
+        if (videoEl.current.muted !== muted) {
+            videoEl.current.muted = Boolean(muted);
+        }
+    }, [muted, stream, videoEl]);
+    React__namespace.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__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.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__namespace.createElement("audio", { ref: audioEl, autoPlay: true, playsInline: true })));
+});
+VideoView.displayName = "VideoView";
+
+const selectRoomConnectionState = toolkit.createSelector(core.selectChatMessages, core.selectCloudRecordingRaw, core.selectLocalParticipantRaw, core.selectLocalMediaStream, core.selectRemoteParticipants, core.selectScreenshares, core.selectRoomConnectionStatus, core.selectStreamingRaw, core.selectWaitingParticipants, core.selectNotificationsEmitter, core.selectSpotlightedClientViews, (chatMessages, cloudRecording, localParticipant, localMediaStream, remoteParticipants, screenshares, connectionStatus, streaming, waitingParticipants, notificationsEmitter, spotlightedClientViews) => {
+    const state = {
+        chatMessages,
+        cloudRecording: cloudRecording.isRecording ? { status: "recording" } : undefined,
+        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 = "3.9.3";
+
+const defaultRoomConnectionOptions = {
+    localMediaOptions: {
+        audio: true,
+        video: true,
+    },
+};
+function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectionOptions) {
+    const dispatch = useAppDispatch();
+    const roomConnectionState = useAppSelector(selectRoomConnectionState);
+    const roomConfig = React__namespace.useMemo(() => {
+        const url = new URL(roomUrl);
+        const searchParams = new URLSearchParams(url.search);
+        const roomKey = roomConnectionOptions.roomKey || searchParams.get("roomKey");
+        return {
+            displayName: roomConnectionOptions.displayName || "Guest",
+            localMediaOptions: roomConnectionOptions.localMedia ? undefined : roomConnectionOptions.localMediaOptions,
+            roomKey,
+            roomUrl,
+            userAgent: `browser-sdk:${browserSdkVersion}`,
+            externalId: roomConnectionOptions.externalId || null,
+        };
+    }, [roomUrl, roomConnectionOptions]);
+    React__namespace.useEffect(() => {
+        return () => {
+            dispatch(core.doAppStop());
+        };
+    }, []);
+    const sendChatMessage = React__namespace.useCallback((text) => dispatch(core.doSendChatMessage({ text })), [dispatch]);
+    const knock = React__namespace.useCallback(() => dispatch(core.doKnockRoom()), [dispatch]);
+    const setDisplayName = React__namespace.useCallback((displayName) => dispatch(core.doSetDisplayName({ displayName })), [dispatch]);
+    const toggleCamera = React__namespace.useCallback((enabled) => dispatch(core.toggleCameraEnabled({ enabled })), [dispatch]);
+    const toggleMicrophone = React__namespace.useCallback((enabled) => dispatch(core.toggleMicrophoneEnabled({ enabled })), [dispatch]);
+    const toggleLowDataMode = React__namespace.useCallback((enabled) => dispatch(core.toggleLowDataModeEnabled({ enabled })), [dispatch]);
+    const toggleRaiseHand = React__namespace.useCallback((enabled) => dispatch(core.doSetLocalStickyReaction({ enabled })), [dispatch]);
+    const askToSpeak = React__namespace.useCallback((participantId) => dispatch(core.doRequestAudioEnable({ clientIds: [participantId], enable: true })), [dispatch]);
+    const askToTurnOnCamera = React__namespace.useCallback((participantId) => dispatch(core.doRequestVideoEnable({ clientIds: [participantId], enable: true })), [dispatch]);
+    const acceptWaitingParticipant = React__namespace.useCallback((participantId) => dispatch(core.doAcceptWaitingParticipant({ participantId })), [dispatch]);
+    const rejectWaitingParticipant = React__namespace.useCallback((participantId) => dispatch(core.doRejectWaitingParticipant({ participantId })), [dispatch]);
+    const startCloudRecording = React__namespace.useCallback(() => dispatch(core.doStartCloudRecording()), [dispatch]);
+    const startScreenshare = React__namespace.useCallback(() => dispatch(core.doStartScreenshare()), [dispatch]);
+    const stopCloudRecording = React__namespace.useCallback(() => dispatch(core.doStopCloudRecording()), [dispatch]);
+    const stopScreenshare = React__namespace.useCallback(() => dispatch(core.doStopScreenshare()), [dispatch]);
+    const joinRoom = React__namespace.useCallback(() => dispatch(core.doAppStart(roomConfig)), [dispatch]);
+    const leaveRoom = React__namespace.useCallback(() => dispatch(core.doAppStop()), [dispatch]);
+    const lockRoom = React__namespace.useCallback((locked) => dispatch(core.doLockRoom({ locked })), [dispatch]);
+    const muteParticipants = React__namespace.useCallback((participantIds) => dispatch(core.doRequestAudioEnable({ clientIds: participantIds, enable: false })), [dispatch]);
+    const turnOffParticipantCameras = React__namespace.useCallback((participantIds) => dispatch(core.doRequestVideoEnable({ clientIds: participantIds, enable: false })), [dispatch]);
+    const spotlightParticipant = React__namespace.useCallback((participantId) => dispatch(core.doSpotlightParticipant({ id: participantId })), [dispatch]);
+    const removeSpotlight = React__namespace.useCallback((participantId) => dispatch(core.doRemoveSpotlight({ id: participantId })), [dispatch]);
+    const kickParticipant = React__namespace.useCallback((participantId) => dispatch(core.doKickParticipant({ clientId: participantId })), [dispatch]);
+    const endMeeting = React__namespace.useCallback((stayBehind) => dispatch(core.doEndMeeting({ stayBehind })), [dispatch]);
+    const { events } = roomConnectionState, state = __rest(roomConnectionState, ["events"]);
+    return {
+        state,
+        events,
+        actions: {
+            toggleLowDataMode,
+            toggleRaiseHand,
+            askToSpeak,
+            askToTurnOnCamera,
+            acceptWaitingParticipant,
+            knock,
+            joinRoom,
+            leaveRoom,
+            lockRoom,
+            muteParticipants,
+            turnOffParticipantCameras,
+            kickParticipant,
+            endMeeting,
+            rejectWaitingParticipant,
+            sendChatMessage,
+            setDisplayName,
+            startCloudRecording,
+            startScreenshare,
+            stopCloudRecording,
+            stopScreenshare,
+            toggleCamera,
+            toggleMicrophone,
+            spotlightParticipant,
+            removeSpotlight,
+        },
+    };
+}
+
+const selectLocalMediaState = toolkit.createSelector(core.selectCameraDeviceError, core.selectCameraDevices, core.selectCurrentCameraDeviceId, core.selectCurrentMicrophoneDeviceId, core.selectCurrentSpeakerDeviceId, core.selectIsSettingCameraDevice, core.selectIsSettingMicrophoneDevice, core.selectIsLocalMediaStarting, core.selectLocalMediaStream, core.selectMicrophoneDeviceError, core.selectMicrophoneDevices, core.selectSpeakerDevices, core.selectLocalMediaStartError, (cameraDeviceError, cameraDevices, currentCameraDeviceId, currentMicrophoneDeviceId, currentSpeakerDeviceId, isSettingCameraDevice, isSettingMicrophoneDevice, isStarting, localStream, microphoneDeviceError, microphoneDevices, speakerDevices, startError) => {
+    const state = {
+        cameraDeviceError,
+        cameraDevices,
+        currentCameraDeviceId,
+        currentMicrophoneDeviceId,
+        currentSpeakerDeviceId,
+        isSettingCameraDevice,
+        isSettingMicrophoneDevice,
+        isStarting,
+        localStream,
+        microphoneDeviceError,
+        microphoneDevices,
+        speakerDevices,
+        startError,
+    };
+    return state;
+});
+
+function useLocalMedia(optionsOrStream = { audio: true, video: true }) {
+    const dispatch = useAppDispatch();
+    const localMediaState = useAppSelector(selectLocalMediaState);
+    React__namespace.useEffect(() => {
+        dispatch(core.doStartLocalMedia(optionsOrStream));
+        return () => {
+            dispatch(core.doStopLocalMedia());
+        };
+    }, []);
+    const setCameraDevice = React__namespace.useCallback((deviceId) => dispatch(core.setCurrentCameraDeviceId({ deviceId })), [dispatch]);
+    const setMicrophoneDevice = React__namespace.useCallback((deviceId) => dispatch(core.setCurrentMicrophoneDeviceId({ deviceId })), [dispatch]);
+    const setSpeakerDevice = React__namespace.useCallback((deviceId) => dispatch(core.setCurrentSpeakerDeviceId({ deviceId })), [dispatch]);
+    const toggleCamera = React__namespace.useCallback((enabled) => dispatch(core.toggleCameraEnabled({ enabled })), [dispatch]);
+    const toggleMicrophone = React__namespace.useCallback((enabled) => dispatch(core.toggleMicrophoneEnabled({ enabled })), [dispatch]);
+    const toggleLowDataMode = React__namespace.useCallback((enabled) => dispatch(core.toggleLowDataModeEnabled({ enabled })), [dispatch]);
+    return {
+        state: localMediaState,
+        actions: {
+            setCameraDevice,
+            setMicrophoneDevice,
+            setSpeakerDevice,
+            toggleCameraEnabled: toggleCamera,
+            toggleMicrophoneEnabled: toggleMicrophone,
+            toggleLowDataModeEnabled: toggleLowDataMode,
+        },
+    };
+}
+
+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__namespace.createElement("div", { className: className, style: Object.assign({ position: "absolute", top: 0, left: 0 }, style) },
+        React__namespace.createElement("div", Object.assign({ style: contentStyle }, rest), React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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 renderFloatingVideoCell({ content, containerFrame, stageLayout, withRoundedCorners, }) {
+    var _a;
+    if (!stageLayout.floatingContent) {
+        return null;
+    }
+    const cell = stageLayout.floatingContent;
+    const origin = { top: cell.origin.top, left: cell.origin.left };
+    const style = {
+        width: Math.round(cell.bounds.width),
+        height: Math.round(cell.bounds.height),
+        transform: `translate3d(${Math.round(containerFrame.origin.left + origin.left)}px, ${Math.round(containerFrame.origin.top + origin.top)}px, 0)`,
+        position: "fixed",
+        top: cell.bounds.height / 2,
+        left: 0,
+        zIndex: 40,
+    };
+    const clientId = ((_a = content.props.client) === null || _a === void 0 ? void 0 : _a.id) || "floating";
+    const childWithProps = React__namespace.cloneElement(content, {
+        isSmallCell: cell.isSmallCell,
+        isZoomedByDefault: false,
+        canZoom: false,
+        key: clientId,
+        isDraggable: false,
+    });
+    return renderVideoCell({
+        cell,
+        child: childWithProps,
+        clientId,
+        style,
+        withRoundedCorners,
+        withShadow: false,
+    });
+}
+function VideoStageLayout({ containerFrame, debug = false, featureRoundedCornersOff = false, floatingContent, 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 (floatingContent) {
+        cells.push(renderFloatingVideoCell({
+            content: floatingContent,
+            containerFrame,
+            stageLayout,
+            withRoundedCorners: !featureRoundedCornersOff,
+        }));
+    }
+    if (subgridContent.length) {
+        cells.push(...renderSubgridVideoCells({
+            content: subgridContent,
+            stageLayout,
+            withRoundedCorners: !featureRoundedCornersOff,
+            withShadow: true,
+        }));
+    }
+    return (React__namespace.createElement("div", { key: "video-stage-layout", style: {
+            width: "100%",
+            height: "100%",
+            position: "relative",
+        } },
+        hasBounds(layoutOverflowBackdropFrame.bounds) && (React__namespace.createElement("div", { style: generateStylesFromFrame(layoutOverflowBackdropFrame) })),
+        cells,
+        debug && (React__namespace.createElement(React__namespace.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$3({ 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$2({ 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,
+    };
+}
+
+const ROWS = "rows";
+const COLUMNS = "columns";
+function getPortraitLayoutGridForCount(count) {
+    return ({
+        1: { type: ROWS, lines: [1] },
+        2: { type: ROWS, lines: [1, 1] },
+        3: { type: ROWS, lines: [2, 1] },
+        4: { type: ROWS, lines: [2, 2] },
+        5: { type: ROWS, lines: [2, 2, 1] },
+        6: { type: ROWS, lines: [2, 2, 2] },
+        7: { type: ROWS, lines: [3, 2, 2] },
+        8: { type: ROWS, lines: [2, 2, 2, 2] },
+        9: { type: ROWS, lines: [3, 2, 2, 2] },
+        10: { type: ROWS, lines: [3, 3, 2, 2] },
+        11: { type: ROWS, lines: [3, 3, 3, 2] },
+        12: { type: ROWS, lines: [3, 3, 3, 3] },
+        13: { type: ROWS, lines: [2, 2, 3, 3, 3] },
+        14: { type: ROWS, lines: [2, 3, 3, 3, 3] },
+        15: { type: ROWS, lines: [3, 3, 3, 3, 3] },
+        16: { type: ROWS, lines: [2, 2, 3, 3, 3, 3] },
+        17: { type: ROWS, lines: [2, 3, 3, 3, 3, 3] },
+        18: { type: ROWS, lines: [3, 3, 3, 3, 3, 3] },
+        19: { type: ROWS, lines: [2, 2, 3, 3, 3, 3, 3] },
+        20: { type: ROWS, lines: [2, 3, 3, 3, 3, 3, 3] },
+        21: { type: ROWS, lines: [3, 3, 3, 3, 3, 3, 3] },
+        22: { type: ROWS, lines: [2, 2, 3, 3, 3, 3, 3, 3] },
+        23: { type: ROWS, lines: [2, 3, 3, 3, 3, 3, 3, 3] },
+        24: { type: ROWS, lines: [3, 3, 3, 3, 3, 3, 3, 3] },
+    }[count] || { type: ROWS, lines: [3, 3, 3, 3, 3, 3, 3, 3] });
+}
+function getLandscapeLayoutGridForCount(count) {
+    return ({
+        1: { type: COLUMNS, lines: [1] },
+        2: { type: COLUMNS, lines: [1, 1] },
+        3: { type: COLUMNS, lines: [2, 1] },
+        4: { type: COLUMNS, lines: [2, 2] },
+        5: { type: ROWS, lines: [3, 2], fractions: [0.45, 0.55] },
+        6: { type: COLUMNS, lines: [2, 2, 2] },
+        7: { type: ROWS, lines: [4, 3], fractions: [0.45, 0.55] },
+        8: { type: COLUMNS, lines: [2, 2, 2, 2] },
+        9: { type: COLUMNS, lines: [3, 2, 2, 2] },
+        10: { type: COLUMNS, lines: [3, 3, 2, 2] },
+        11: { type: COLUMNS, lines: [3, 3, 3, 2] },
+        12: { type: COLUMNS, lines: [3, 3, 3, 3] },
+        13: { type: COLUMNS, lines: [4, 3, 3, 3] },
+        14: { type: COLUMNS, lines: [4, 4, 3, 3] },
+        15: { type: COLUMNS, lines: [3, 3, 3, 3, 3] },
+        16: { type: COLUMNS, lines: [4, 3, 3, 3, 3] },
+        17: { type: COLUMNS, lines: [4, 4, 3, 3, 3] },
+        18: { type: COLUMNS, lines: [4, 4, 4, 3, 3] },
+        19: { type: COLUMNS, lines: [4, 4, 4, 4, 3] },
+        20: { type: COLUMNS, lines: [4, 4, 4, 4, 4] },
+        21: { type: COLUMNS, lines: [5, 4, 4, 4, 4] },
+        22: { type: COLUMNS, lines: [5, 5, 4, 4, 4] },
+        23: { type: COLUMNS, lines: [5, 5, 5, 4, 4] },
+        24: { type: COLUMNS, lines: [5, 5, 5, 5, 4] },
+    }[count] || { type: COLUMNS, lines: [5, 5, 5, 5, 5] });
+}
+function calcCellDimensions({ layoutGrid, dim, secDim, index, count, gridGap, }) {
+    const adjustedDim = dim - gridGap * (count - 1);
+    const cellDim = adjustedDim * (layoutGrid.fractions ? layoutGrid.fractions[index] : 1 / count);
+    const secCount = layoutGrid.lines[index];
+    const adjustedSecDim = secDim - gridGap * (secCount - 1);
+    const secCellDim = adjustedSecDim / secCount;
+    return [cellDim, secCellDim];
+}
+function partitionRectBy({ isHorizontal, layoutGrid, width, height, gridGap, }) {
+    const cellRects = [];
+    const origin = { x: 0, y: 0 };
+    const cellOrigin = { x: 0, y: 0 };
+    const count = layoutGrid.lines.length;
+    const dim = isHorizontal ? height : width;
+    const secDim = isHorizontal ? width : height;
+    for (let index = 0; index < count; index++) {
+        const cellDims = calcCellDimensions({ layoutGrid, dim, secDim, index, count, gridGap });
+        const width = isHorizontal ? cellDims[1] : cellDims[0];
+        const height = isHorizontal ? cellDims[0] : cellDims[1];
+        const cellBounds = { width, height };
+        const linesCount = layoutGrid.lines[index];
+        for (let lineIndex = 0; lineIndex < linesCount; lineIndex++) {
+            cellRects.push({ origin: Object.assign({}, cellOrigin), bounds: cellBounds });
+            if (isHorizontal) {
+                cellOrigin.x += cellBounds.width + gridGap;
+            }
+            else {
+                cellOrigin.y += cellBounds.height + gridGap;
+            }
+        }
+        if (isHorizontal) {
+            cellOrigin.y += cellBounds.height + gridGap;
+            cellOrigin.x = origin.x;
+        }
+        else {
+            cellOrigin.x += cellBounds.width + gridGap;
+            cellOrigin.y = origin.y;
+        }
+    }
+    return cellRects;
+}
+function partitionRectByRows({ layoutGrid, width, height, gridGap, }) {
+    return partitionRectBy({ isHorizontal: true, layoutGrid, width, height, gridGap });
+}
+function partitionRectByColumns({ layoutGrid, width, height, gridGap, }) {
+    return partitionRectBy({ isHorizontal: false, layoutGrid, width, height, gridGap });
+}
+function partitionRect({ layoutGrid, width, height, gridGap, }) {
+    switch (layoutGrid.type) {
+        case ROWS:
+            return partitionRectByRows({ layoutGrid, width, height, gridGap });
+        case COLUMNS:
+            return partitionRectByColumns({ layoutGrid, width, height, gridGap });
+    }
+}
+function calculateLayout$2({ width, height, cellCount, gridGap = 0, paddings = makeBox(), }) {
+    const contentWidth = width - (paddings.left + paddings.right);
+    const contentHeight = height - (paddings.top + paddings.bottom);
+    const isPortrait = Math.round((contentWidth / contentHeight) * 10) / 10 <= 1.0;
+    const layoutGrid = isPortrait
+        ? getPortraitLayoutGridForCount(cellCount)
+        : getLandscapeLayoutGridForCount(cellCount);
+    const cellRects = partitionRect({ layoutGrid, width: contentWidth, height: contentHeight, gridGap }) || [];
+    return {
+        cellRects,
+        cellCount,
+        gridGap,
+        extraHorizontalPadding: 0,
+        extraVerticalPadding: 0,
+        paddings,
+    };
+}
+function getCellPropsAtIndexForLayout$1({ index, layout }) {
+    const { cellRects } = layout;
+    const frame = cellRects[index] || makeFrame();
+    return {
+        top: frame.origin.y,
+        left: frame.origin.x,
+        width: frame.bounds.width,
+        height: frame.bounds.height,
+    };
+}
+
+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 gridLayout = null;
+    let videoCells = null;
+    if (isConstrained) {
+        const constrainedGridLayout = calculateLayout$2({
+            width,
+            height,
+            cellCount,
+            gridGap,
+            paddings,
+        });
+        const isSmallCell = cellCount > 4;
+        videoCells = videos.map((video, index) => {
+            const cellProps = getCellPropsAtIndexForLayout$1({ index, layout: constrainedGridLayout });
+            return {
+                clientId: video.clientId,
+                isDraggable: video.isDraggable,
+                origin: makeOrigin({
+                    top: cellProps.top,
+                    left: cellProps.left,
+                }),
+                bounds: makeBounds({
+                    width: cellProps.width,
+                    height: cellProps.height,
+                }),
+                aspectRatio: cellProps.width / cellProps.height,
+                isSmallCell,
+                type: "video",
+            };
+        });
+        gridLayout = constrainedGridLayout;
+    }
+    else {
+        const cellAspectRatios = videos.map((video) => video.aspectRatio || 1);
+        const minGridBounds = getMinGridBounds({ cellCount });
+        const centerGridLayout = calculateLayout$3({
+            width: cappedWidth,
+            height,
+            cellCount,
+            gridGap,
+            cellAspectRatios,
+            paddings,
+        });
+        videoCells = videos.map((video, index) => {
+            const cellProps = getCellPropsAtIndexForLayout$2({ index, layout: centerGridLayout });
+            const isSmallCell = centerGridLayout.cellWidth < minGridBounds.width;
+            const shouldZoom = isConstrained || isSmallCell;
+            const aspectRatio = shouldZoom
+                ? centerGridLayout.cellWidth / centerGridLayout.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",
+            };
+        });
+        gridLayout = centerGridLayout;
+    }
+    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(Object.assign({}, floatingLayout), floatingVideo), { origin: (floatingLayout === null || floatingLayout === void 0 ? void 0 : floatingLayout.origin) || makeOrigin(), bounds: (floatingLayout === null || floatingLayout === void 0 ? void 0 : floatingLayout.bounds) || makeBounds(), aspectRatio: (floatingVideo === null || floatingVideo === void 0 ? void 0 : floatingVideo.aspectRatio) || 1 }),
+    };
+}
+
+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;
+const ACTIVE_VIDEOS_PHONE_LIMIT = 24;
+
+function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, shouldShowSubgrid, spotlightedParticipants, maximizedParticipant, isPhoneResolution, }) {
+    if (!shouldShowSubgrid) {
+        return [];
+    }
+    const hasSpotlights = spotlightedParticipants.length > 0;
+    const hasPresentationStage = hasSpotlights;
+    const notMaximized = maximizedParticipant
+        ? clientViews.filter((client) => client.id !== maximizedParticipant.id)
+        : clientViews;
+    const notSpotlighted = notMaximized.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 (isPhoneResolution && notSpotlighted.length > ACTIVE_VIDEOS_PHONE_LIMIT) {
+        const sorted = [...unmutedVideos, ...mutedVideos];
+        const inGrid = sorted.slice(0, ACTIVE_VIDEOS_PHONE_LIMIT);
+        if (inGrid.length <= ACTIVE_VIDEOS_PHONE_LIMIT) {
+            return [...sorted.filter((client) => !inGrid.includes(client)), ...noVideoViews];
+        }
+        else {
+            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, enableSubgrid = true, maximizedParticipant, floatingParticipant, isConstrained = false, } = {}) {
+    const allClientViews = useAppSelector(core.selectAllClientViews);
+    const spotlightedParticipants = useAppSelector(core.selectSpotlightedClientViews);
+    const numParticipants = useAppSelector(core.selectNumParticipants);
+    const floatingClientView = React__namespace.useMemo(() => {
+        return floatingParticipant;
+    }, [floatingParticipant]);
+    const clientViewsNotFloating = React__namespace.useMemo(() => {
+        if (floatingClientView) {
+            return allClientViews.filter((c) => c.id !== floatingClientView.id);
+        }
+        return allClientViews;
+    }, [allClientViews, floatingClientView]);
+    const shouldShowSubgrid = React__namespace.useMemo(() => {
+        if (!enableSubgrid) {
+            return false;
+        }
+        return forceSubgrid ? true : numParticipants > stageParticipantLimit;
+    }, [forceSubgrid, numParticipants, stageParticipantLimit, enableSubgrid]);
+    const clientViewsInSubgrid = React__namespace.useMemo(() => {
+        return calculateSubgridViews({
+            clientViews: clientViewsNotFloating,
+            activeVideosSubgridTrigger,
+            shouldShowSubgrid,
+            spotlightedParticipants,
+            maximizedParticipant,
+            isPhoneResolution: isConstrained,
+        });
+    }, [clientViewsNotFloating, shouldShowSubgrid, activeVideosSubgridTrigger, spotlightedParticipants, isConstrained]);
+    const clientViewsOnStage = React__namespace.useMemo(() => {
+        return clientViewsNotFloating.filter((client) => !clientViewsInSubgrid.includes(client));
+    }, [clientViewsNotFloating, clientViewsInSubgrid]);
+    const clientViewsInPresentationGrid = React__namespace.useMemo(() => {
+        if (maximizedParticipant) {
+            return [maximizedParticipant];
+        }
+        return spotlightedParticipants;
+    }, [spotlightedParticipants, maximizedParticipant]);
+    const clientViewsInGrid = React__namespace.useMemo(() => {
+        return clientViewsOnStage.filter((client) => !clientViewsInPresentationGrid.includes(client));
+    }, [clientViewsOnStage, clientViewsInPresentationGrid]);
+    return {
+        floatingClientView,
+        clientViewsInGrid,
+        clientViewsInPresentationGrid,
+        clientViewsInSubgrid,
+    };
+}
+
+function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, gridGap = 8, videoGridGap = 8, enableSubgrid = true, enableConstrainedGrid = true, } = {}) {
+    const [containerBounds, setContainerBounds] = React__namespace.useState({ width: 0, height: 0 });
+    const [isConstrained, setIsConstrained] = React__namespace.useState(false);
+    const [clientAspectRatios, setClientAspectRatios] = React__namespace.useState({});
+    const [maximizedParticipant, setMaximizedParticipant] = React__namespace.useState(null);
+    const [floatingParticipant, setFloatingParticipant] = React__namespace.useState(null);
+    const { clientViewsInGrid, clientViewsInPresentationGrid, clientViewsInSubgrid, floatingClientView } = useGridParticipants({
+        activeVideosSubgridTrigger,
+        forceSubgrid,
+        stageParticipantLimit,
+        enableSubgrid,
+        maximizedParticipant,
+        floatingParticipant,
+        isConstrained: !!enableConstrainedGrid && !!isConstrained,
+    });
+    const cellViewsFloating = React__namespace.useMemo(() => {
+        return floatingClientView
+            ? [
+                makeVideoCellView({
+                    client: floatingClientView,
+                    aspectRatio: clientAspectRatios[floatingClientView.id],
+                    avatarSize: 0,
+                    cellPaddings: { top: 0, right: 0 },
+                }),
+            ]
+            : [];
+    }, [floatingClientView, clientAspectRatios]);
+    const cellViewsVideoGrid = React__namespace.useMemo(() => {
+        return clientViewsInGrid.map((client) => {
+            return makeVideoCellView({
+                client,
+                aspectRatio: clientAspectRatios[client.id],
+                avatarSize: 0,
+                cellPaddings: { top: 0, right: 0 },
+            });
+        });
+    }, [clientViewsInGrid, clientAspectRatios]);
+    const cellViewsInPresentationGrid = React__namespace.useMemo(() => {
+        return clientViewsInPresentationGrid.map((client) => {
+            return makeVideoCellView({
+                client,
+                aspectRatio: clientAspectRatios[client.id],
+                avatarSize: 0,
+                cellPaddings: { top: 0, right: 0 },
+            });
+        });
+    }, [clientViewsInPresentationGrid, clientAspectRatios]);
+    const cellViewsInSubgrid = React__namespace.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__namespace.useMemo(() => {
+        return makeFrame(containerBounds);
+    }, [containerBounds]);
+    React__namespace.useEffect(() => {
+        if (!enableConstrainedGrid) {
+            return;
+        }
+        setIsConstrained(containerBounds.width < 500 || containerBounds.height < 500);
+    }, [containerBounds, enableConstrainedGrid]);
+    const videoStage = React__namespace.useMemo(() => {
+        return calculateLayout({
+            floatingVideo: cellViewsFloating[0],
+            frame: containerFrame,
+            gridGap,
+            isConstrained,
+            roomBounds: containerFrame.bounds,
+            videos: cellViewsVideoGrid,
+            videoGridGap,
+            presentationVideos: cellViewsInPresentationGrid,
+            subgridVideos: cellViewsInSubgrid,
+        });
+    }, [
+        containerFrame,
+        cellViewsFloating,
+        cellViewsVideoGrid,
+        cellViewsInPresentationGrid,
+        cellViewsInSubgrid,
+        gridGap,
+        videoGridGap,
+    ]);
+    return {
+        containerFrame,
+        cellViewsFloating,
+        cellViewsVideoGrid,
+        cellViewsInPresentationGrid,
+        cellViewsInSubgrid,
+        clientAspectRatios,
+        videoStage,
+        setContainerBounds,
+        setClientAspectRatios,
+        maximizedParticipant,
+        setMaximizedParticipant,
+        floatingParticipant,
+        setFloatingParticipant,
+        isConstrained,
+    };
+}
+
+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__namespace.createElement("svg", { viewBox: "-60 -60 120 120", "aria-hidden": "true", style: {
+            height: "100%",
+            pointerEvents: "none",
+            width: "100%",
+        } },
+        React__namespace.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__namespace.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__namespace.createElement(Initials, { name: name })) : (React__namespace.createElement("img", { src: avatarUrl || "", alt: "", style: {
+            height: "100%",
+            width: "100%",
+            objectFit: "cover",
+            maxWidth: "initial",
+        } }))));
+}
+
+function VideoMutedIndicator({ avatarUrl, displayName, isSmallCell, withRoundedCorners }) {
+    return (React__namespace.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__namespace.createElement("div", { style: {
+                height: isSmallCell ? 60 : 80,
+                width: isSmallCell ? 60 : 80,
+                pointerEvents: "none",
+                position: "relative",
+            } },
+            React__namespace.createElement(Avatar, { variant: "square", avatarUrl: avatarUrl, name: displayName, size: isSmallCell ? 60 : 80 }))));
+}
+
+const Popover = PopoverPrimitive__namespace.Root;
+const PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+const PopoverContent = React__namespace.forwardRef((_a, ref) => {
+    var { style, align = "center", sideOffset = 4 } = _a, props = __rest(_a, ["style", "align", "sideOffset"]);
+    return (React__namespace.createElement(PopoverPrimitive__namespace.Portal, null,
+        React__namespace.createElement(PopoverPrimitive__namespace.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, style: Object.assign({ width: "200px", backgroundColor: "#fff", border: "1px solid #e5e5e5", borderRadius: "0.375rem", boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)", color: "#333", fontSize: "14px", lineHeight: "1.5", padding: "16px", zIndex: 50, outline: "none" }, style) }, props))));
+});
+PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
+
+const GridContext = React__namespace.createContext({});
+const GridCellContext = React__namespace.createContext({});
+const useGridCell = () => {
+    const gridContext = React__namespace.useContext(GridContext);
+    const gridCellContext = React__namespace.useContext(GridCellContext);
+    if (!gridCellContext) {
+        throw new Error("useGridCell must be used within a GridCell");
+    }
+    return Object.assign(Object.assign({}, gridContext), gridCellContext);
+};
+
+const ParticipantMenuContext = React__namespace.createContext({});
+const useParticipantMenu = () => {
+    const context = React__namespace.useContext(ParticipantMenuContext);
+    const gridCellContext = useGridCell();
+    if (!context) {
+        throw new Error("useParticipantMenu must be used within a ParticipantMenu");
+    }
+    return Object.assign(Object.assign({}, context), gridCellContext);
+};
+const ParticipantMenu = (props) => {
+    const { children } = props, rest = __rest(props, ["children"]);
+    const [open, setOpen] = React__namespace.useState(false);
+    return (React__namespace.createElement(ParticipantMenuContext.Provider, { value: { open, setOpen } },
+        React__namespace.createElement(Popover, Object.assign({}, rest, { open: open, onOpenChange: setOpen }), children)));
+};
+const ParticipantMenuContent = React__namespace.forwardRef((_a, ref) => {
+    var { children, style } = _a, props = __rest(_a, ["children", "style"]);
+    return (React__namespace.createElement(PopoverContent, Object.assign({ ref: ref, style: Object.assign({ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", minWidth: "180px", maxWidth: "300px", maxHeight: "100vh", overflowY: "auto", padding: 0 }, style) }, props), children));
+});
+ParticipantMenuContent.displayName = "ParticipantMenuContent";
+const ParticipantMenuTrigger = React__namespace.forwardRef((_a, ref) => {
+    var { children, style } = _a, props = __rest(_a, ["children", "style"]);
+    return (React__namespace.createElement(PopoverTrigger, Object.assign({ ref: ref, style: Object.assign({ position: "absolute", top: "10px", right: "20px", textDecoration: "none", whiteSpace: "nowrap", border: "none", cursor: "pointer" }, style) }, props), children));
+});
+ParticipantMenuTrigger.displayName = PopoverTrigger.displayName;
+const ParticipantMenuItem = React__namespace.forwardRef((_a, ref) => {
+    var { children, style, participantAction } = _a, props = __rest(_a, ["children", "style", "participantAction"]);
+    const { participant, setOpen, maximizedParticipant, setMaximizedParticipant, setFloatingParticipant, floatingParticipant, } = useParticipantMenu();
+    const dispatch = useAppDispatch();
+    const spotlightedParticipants = useAppSelector(core.selectSpotlightedClientViews);
+    const isSpotlighted = spotlightedParticipants.find((p) => p.id === participant.id);
+    const isMaximized = (maximizedParticipant === null || maximizedParticipant === void 0 ? void 0 : maximizedParticipant.id) === participant.id;
+    const isFloating = (floatingParticipant === null || floatingParticipant === void 0 ? void 0 : floatingParticipant.id) === participant.id;
+    let onClick;
+    switch (participantAction) {
+        case "maximize":
+            onClick = () => {
+                if (isMaximized) {
+                    setMaximizedParticipant(null);
+                }
+                else {
+                    setMaximizedParticipant(participant);
+                }
+                setOpen(false);
+            };
+            break;
+        case "spotlight":
+            onClick = () => {
+                if (isSpotlighted) {
+                    dispatch(core.doRemoveSpotlight({ id: participant.id }));
+                }
+                else {
+                    dispatch(core.doSpotlightParticipant({ id: participant.id }));
+                }
+                setOpen(false);
+            };
+            break;
+        case "float":
+            onClick = () => {
+                if (isFloating) {
+                    setFloatingParticipant(null);
+                }
+                else {
+                    setFloatingParticipant(participant);
+                }
+                setOpen(false);
+            };
+            break;
+    }
+    return (React__namespace.createElement("button", Object.assign({ ref: ref, role: "menuitem", tabIndex: -1, onClick: onClick !== null && onClick !== void 0 ? onClick : props.onClick, style: Object.assign({ alignItems: "stretch", backgroundColor: "transparent", border: "none", cursor: "pointer", display: "flex", height: "40px", lineHeight: "40px", minWidth: "140px", padding: "0 12px", textAlign: "left", textDecoration: "none", whiteSpace: "nowrap", width: "100%" }, style) }, props), children));
+});
+ParticipantMenuItem.displayName = "ParticipantMenuItem";
+
+function EllipsisIcon(props) {
+    return (React__namespace.createElement("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__namespace.createElement("g", null,
+            React__namespace.createElement("circle", { cx: "6", cy: "12", r: "2" }),
+            React__namespace.createElement("circle", { cx: "12", cy: "12", r: "2" }),
+            React__namespace.createElement("circle", { cx: "18", cy: "12", r: "2" }))));
+}
+
+function MaximizeOnIcon(props) {
+    return (React__namespace.createElement("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m13.875 3c0 .62132.5037 1.125 1.125 1.125h3.284l-4.0795 4.0795c-.4393.43934-.4393 1.15166 0 1.591.4393.4393 1.1517.4393 1.591 0l4.0795-4.07951v3.28401c0 .62132.5037 1.125 1.125 1.125s1.125-.50368 1.125-1.125v-6c0-.15254-.0304-.29799-.0854-.43063-.0536-.12968-.1326-.25135-.2368-.35749l-.0147-.01469c-.203-.19928-.4812-.32219-.7881-.32219h-6c-.6213 0-1.125.50368-1.125 1.125zm-9.75 12c0-.6213-.50368-1.125-1.125-1.125s-1.125.5037-1.125 1.125v6c0 .3069.12291.5851.32219.7881.00486.005.00975.0099.01469.0147.10614.1042.22781.1832.35749.2368.13264.055.27809.0854.43063.0854h6c.62132 0 1.125-.5037 1.125-1.125s-.50368-1.125-1.125-1.125h-3.28401l4.07951-4.0795c.4393-.4393.4393-1.1517 0-1.591-.43934-.4393-1.15166-.4393-1.591 0l-4.0795 4.0795z" })));
+}
+
+function SpotlightIcon(props) {
+    return (React__namespace.createElement("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m15.241.146691c-.1011-.1955882-.3809-.1955879-.482 0l-1.1063 2.139639c-.0258.04991-.0665.09058-.1164.11639l-2.1396 1.10629c-.1956.10113-.1956.38085 0 .48198l2.1396 1.10629c.0499.02581.0906.06648.1164.11639l1.1063 2.13964c.1011.19559.3809.19559.482 0l1.1063-2.13964c.0258-.04991.0665-.09058.1164-.11639l2.1396-1.10629c.1956-.10113.1956-.38085 0-.48198l-2.1396-1.10629c-.0499-.02581-.0906-.06648-.1164-.11639zm-13.741 2.900259v14.67495c0 .0511.00116.1018.00345.1523-.00229.0418-.00345.0837-.00345.1258 0 .5674.21005 1.1103.59339 1.6103.24265.3472.55042.6455.90566.8773 1.61225 1.213 4.36988 2.0124 7.50095 2.0124 4.3315 0 7.9484-1.53 8.8068-3.5681.0651-.1472.1148-.3024.1455-.4658.0315-.1532.0477-.3087.0477-.4661 0-.6032-.2374-1.1788-.668-1.7045-.1377-.1975-.2995-.4017-.4877-.6127l-14.22219-13.74809c-.28845-.27884-.67396-.43471-1.07516-.43471-.85436 0-1.54695.69259-1.54695 1.54695zm19.2646 4.59631c.0988-.19101.372-.19101.4708 0l.8546 1.65303c.0253.04874.065.08846.1137.11366l1.653.85465c.1911.0988.1911.372 0 .4708l-1.653.8546c-.0487.0253-.0884.065-.1137.1137l-.8546 1.653c-.0988.1911-.372.1911-.4708 0l-.8546-1.653c-.0253-.0487-.065-.0884-.1137-.1137l-1.653-.8546c-.1911-.0988-.1911-.372 0-.4708l1.653-.85465c.0487-.0252.0884-.06492.1137-.11366zm-3.2651 10.35684c0 .0769-.1144.6851-1.5305 1.3931-1.2964.6482-3.2274 1.1069-5.4695 1.1069s-4.17308-.4587-5.46952-1.1069c-1.41607-.708-1.53047-1.3162-1.53047-1.3931 0-.077.1144-.6851 1.53047-1.3932 1.29644-.6482 3.22742-1.1068 5.46952-1.1068s4.1731.4586 5.4695 1.1068c1.4161.7081 1.5305 1.3162 1.5305 1.3932z" })));
+}
+
+function PopOutIcon(props) {
+    return (React__namespace.createElement("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__namespace.createElement("path", { clipRule: "evenodd", fillRule: "evenodd", d: "m2.25 3v4.5c0 .41421.33579.75.75.75h4.5c.41421 0 .75-.33579.75-.75v-4.5c0-.41421-.33579-.75-.75-.75h-4.5c-.41421 0-.75.33579-.75.75zm-2.25 4.5v-4.5c0-1.65685 1.34315-3 3-3h4.5c1.65685 0 3 1.34315 3 3v4.5c0 1.65685-1.34315 3-3 3h-4.5c-1.65685 0-3-1.34315-3-3zm2.25 9v4.5c0 .4142.33579.75.75.75h4.5c.41421 0 .75-.3358.75-.75v-4.5c0-.4142-.33579-.75-.75-.75h-4.5c-.41421 0-.75.3358-.75.75zm-2.25 4.5v-4.5c0-1.6569 1.34315-3 3-3h4.5c1.65685 0 3 1.3431 3 3v4.5c0 1.6569-1.34315 3-3 3h-4.5c-1.65685 0-3-1.3431-3-3zm15.75-13.5v-4.5c0-.41421.3358-.75.75-.75h4.5c.4142 0 .75.33579.75.75v4.5c0 .41421-.3358.75-.75.75h-4.5c-.4142 0-.75-.33579-.75-.75zm-2.25-4.5v4.5c0 1.65685 1.3431 3 3 3h4.5c1.6569 0 3-1.34315 3-3v-4.5c0-1.65685-1.3431-3-3-3h-4.5c-1.6569 0-3 1.34315-3 3zm1.875 19.5c0-.6213.5037-1.125 1.125-1.125h3.284l-5.5795-5.5795c-.4393-.4393-.4393-1.1517 0-1.591s1.1517-.4393 1.591 0l5.5795 5.5795v-3.284c0-.6213.5037-1.125 1.125-1.125s1.125.5037 1.125 1.125v6c0 .308-.1238.5872-.3244.7903-.0033.0034-.0067.0068-.0101.0102-.1067.1054-.2292.1851-.3599.2391-.1326.055-.2781.0854-.4306.0854h-6c-.6213 0-1.125-.5037-1.125-1.125z" })));
+}
+
+function PopInIcon(props) {
+    return (React__namespace.createElement("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__namespace.createElement("path", { clipRule: "evenodd", fillRule: "evenodd", d: "m2.25 3v4.5c0 .41421.33579.75.75.75h4.5c.41421 0 .75-.33579.75-.75v-4.5c0-.41421-.33579-.75-.75-.75h-4.5c-.41421 0-.75.33579-.75.75zm-2.25 4.5v-4.5c0-1.65685 1.34315-3 3-3h4.5c1.65685 0 3 1.34315 3 3v4.5c0 1.65685-1.34315 3-3 3h-4.5c-1.65685 0-3-1.34315-3-3zm2.25 9v4.5c0 .4142.33579.75.75.75h4.5c.41421 0 .75-.3358.75-.75v-4.5c0-.4142-.33579-.75-.75-.75h-4.5c-.41421 0-.75.3358-.75.75zm-2.25 4.5v-4.5c0-1.6569 1.34315-3 3-3h4.5c1.65685 0 3 1.3431 3 3v4.5c0 1.6569-1.34315 3-3 3h-4.5c-1.65685 0-3-1.3431-3-3zm15.75-13.5v-4.5c0-.41421.3358-.75.75-.75h4.5c.4142 0 .75.33579.75.75v4.5c0 .41421-.3358.75-.75.75h-4.5c-.4142 0-.75-.33579-.75-.75zm-2.25-4.5v4.5c0 1.65685 1.3431 3 3 3h4.5c1.6569 0 3-1.34315 3-3v-4.5c0-1.65685-1.3431-3-3-3h-4.5c-1.6569 0-3 1.34315-3 3zm8.625 12c0 .6213-.5037 1.125-1.125 1.125h-3.284l5.5795 5.5795c.4393.4393.4393 1.1517 0 1.591s-1.1517.4393-1.591 0l-5.5795-5.5795v3.284c0 .6213-.5037 1.125-1.125 1.125s-1.125-.5037-1.125-1.125v-6c0-.3081.1238-.5872.3244-.7904.0034-.0034.0068-.0068.0102-.0102.1067-.1053.2292-.185.3598-.239.1326-.055.2781-.0854.4306-.0854h6c.6213 0 1.125.5037 1.125 1.125z" })));
+}
+
+function DefaultParticipantMenu({ participant }) {
+    const spotlightedParticipants = useAppSelector(core.selectSpotlightedClientViews);
+    const isSpotlighted = spotlightedParticipants.find((p) => p.id === participant.id);
+    const { isHovered, maximizedParticipant, floatingParticipant } = useGridCell();
+    const isMaximized = (maximizedParticipant === null || maximizedParticipant === void 0 ? void 0 : maximizedParticipant.id) === participant.id;
+    const isFloating = (floatingParticipant === null || floatingParticipant === void 0 ? void 0 : floatingParticipant.id) === participant.id;
+    if (!isHovered) {
+        return null;
+    }
+    return (React__namespace.createElement(ParticipantMenu, null,
+        React__namespace.createElement(ParticipantMenuTrigger, { style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                backgroundColor: "#fff",
+                borderRadius: "6px",
+                padding: "4px",
+            } },
+            React__namespace.createElement(EllipsisIcon, { height: 20, width: 20, transform: "rotate(90)" })),
+        React__namespace.createElement(ParticipantMenuContent, null,
+            participant.isLocalClient ? (React__namespace.createElement(ParticipantMenuItem, { participantAction: "float", style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "10px",
+                } }, isFloating ? (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(PopInIcon, { height: 16, width: 16 }),
+                "Move to grid")) : (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(PopOutIcon, { height: 16, width: 16 }),
+                "Pop out")))) : null,
+            React__namespace.createElement(ParticipantMenuItem, { participantAction: "maximize", style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "10px",
+                } },
+                React__namespace.createElement(MaximizeOnIcon, { height: 16, width: 16 }),
+                isMaximized ? "Minimize" : "Maximize"),
+            React__namespace.createElement(ParticipantMenuItem, { participantAction: "spotlight", style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "10px",
+                } },
+                React__namespace.createElement(SpotlightIcon, { height: 16, width: 16 }),
+                isSpotlighted ? "Remove spotlight" : "Spotlight"))));
+}
+
+const GridCell = React__namespace.forwardRef(({ className, participant, children }, ref) => {
+    const [isHovered, setIsHovered] = React__namespace.useState(false);
+    const handleMouseEnter = React__namespace.useCallback(() => {
+        setIsHovered(true);
+    }, []);
+    const handleMouseLeave = React__namespace.useCallback(() => {
+        setIsHovered(false);
+    }, []);
+    return (React__namespace.createElement(GridCellContext.Provider, { value: { participant, isHovered } },
+        React__namespace.createElement("div", { ref: ref, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { height: "100%", width: "100%" } }, children)));
+});
+GridCell.displayName = "GridCell";
+const GridVideoView = React__namespace.forwardRef((_a, ref) => {
+    var { stream, style } = _a, rest = __rest(_a, ["stream", "style"]);
+    const videoEl = React__namespace.useRef(null);
+    const { onSetClientAspectRatio, clientAspectRatios, participant, isConstrained } = useGridCell();
+    if (!participant)
+        return null;
+    const aspectRatio = clientAspectRatios[participant.id];
+    React__namespace.useImperativeHandle(ref, () => {
+        return videoEl.current;
+    });
+    const handleResize = React__namespace.useCallback(() => {
+        const ar = videoEl.current && videoEl.current.captureAspectRatio();
+        if (ar && ar !== aspectRatio && participant.id) {
+            onSetClientAspectRatio({ aspectRatio: ar, clientId: participant.id });
+        }
+    }, [clientAspectRatios, participant.id, onSetClientAspectRatio]);
+    const s = stream || participant.stream;
+    if (!s) {
+        return null;
+    }
+    return (React__namespace.createElement(VideoView, Object.assign({ ref: videoEl, style: Object.assign(Object.assign({ borderRadius: isConstrained ? 0 : "8px" }, (isConstrained ? { objectFit: "cover" } : {})), style) }, rest, { stream: s, onVideoResize: handleResize })));
+});
+GridVideoView.displayName = "GridVideoView";
+function renderCellView({ cellView, enableParticipantMenu, render }) {
+    const participant = cellView === null || cellView === void 0 ? void 0 : cellView.client;
+    if (!participant) {
+        return undefined;
+    }
+    switch (cellView.type) {
+        case "video":
+            return (React__namespace.createElement(GridCell, { participant: participant }, participant.isVideoEnabled ? (React__namespace.createElement(React__namespace.Fragment, null, render ? (render({ participant })) : (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(GridVideoView, null),
+                enableParticipantMenu ? (React__namespace.createElement(DefaultParticipantMenu, { participant: participant })) : null)))) : (React__namespace.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true }))));
+    }
+}
+function Grid({ renderParticipant, renderFloatingParticipant, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableParticipantMenu, enableConstrainedGrid, }) {
+    const gridRef = React__namespace.useRef(null);
+    const { containerFrame, cellViewsFloating, cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid, clientAspectRatios, videoStage, setContainerBounds, setClientAspectRatios, maximizedParticipant, setMaximizedParticipant, isConstrained, floatingParticipant, setFloatingParticipant, } = useGrid({
+        activeVideosSubgridTrigger: 12,
+        stageParticipantLimit,
+        gridGap,
+        videoGridGap,
+        enableSubgrid,
+        enableConstrainedGrid,
+    });
+    const handleSetClientAspectRatio = React__namespace.useCallback(({ aspectRatio, clientId }) => {
+        setClientAspectRatios((prev) => (Object.assign(Object.assign({}, prev), { [clientId]: aspectRatio })));
+    }, [setClientAspectRatios]);
+    const floatingContent = React__namespace.useMemo(() => {
+        return renderCellView(Object.assign({ cellView: cellViewsFloating[0], enableParticipantMenu }, (renderFloatingParticipant
+            ? { render: ({ participant }) => renderFloatingParticipant({ participant }) }
+            : {})));
+    }, [cellViewsFloating]);
+    const presentationGridContent = React__namespace.useMemo(() => cellViewsInPresentationGrid.map((cellView) => renderCellView(Object.assign({ cellView,
+        enableParticipantMenu }, (renderParticipant ? { render: ({ participant }) => renderParticipant({ participant }) } : {})))), [cellViewsInPresentationGrid]);
+    const gridContent = React__namespace.useMemo(() => cellViewsVideoGrid.map((cellView) => renderCellView(Object.assign({ cellView,
+        enableParticipantMenu }, (renderParticipant ? { render: ({ participant }) => renderParticipant({ participant }) } : {})))), [cellViewsVideoGrid]);
+    const subgridContent = React__namespace.useMemo(() => cellViewsInSubgrid.map((cellView) => renderCellView({
+        cellView,
+        enableParticipantMenu,
+    })), [cellViewsInSubgrid]);
+    React__namespace.useEffect(() => {
+        if (!gridRef.current) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(core.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__namespace.createElement(GridContext.Provider, { value: {
+            onSetClientAspectRatio: handleSetClientAspectRatio,
+            cellViewsVideoGrid,
+            cellViewsInPresentationGrid,
+            cellViewsInSubgrid,
+            clientAspectRatios,
+            maximizedParticipant,
+            setMaximizedParticipant,
+            floatingParticipant,
+            setFloatingParticipant,
+            isConstrained,
+        } },
+        React__namespace.createElement("div", { ref: gridRef, style: {
+                width: "100%",
+                height: "100%",
+                position: "relative",
+            } },
+            React__namespace.createElement(VideoStageLayout, { containerFrame: containerFrame, floatingContent: floatingContent, layoutVideoStage: videoStage, presentationGridContent: presentationGridContent, gridContent: gridContent, subgridContent: subgridContent }))));
+}
+
+exports.GridCell = GridCell;
+exports.GridVideoView = GridVideoView;
+exports.ParticipantMenu = ParticipantMenu;
+exports.ParticipantMenuContent = ParticipantMenuContent;
+exports.ParticipantMenuItem = ParticipantMenuItem;
+exports.ParticipantMenuTrigger = ParticipantMenuTrigger;
+exports.VideoGrid = Grid;
+exports.VideoView = VideoView;
+exports.WherebyProvider = Provider;
+exports.useLocalMedia = useLocalMedia;
+exports.useRoomConnection = useRoomConnection;