@whereby.com/browser-sdk 3.4.3 → 3.5.0

package/dist/react/index.esm.js

@@ -146,7 +146,7 @@ const selectRoomConnectionState = createSelector(selectChatMessages, selectCloud
     return state;
 });
 
-const browserSdkVersion = "3.4.3";
+const browserSdkVersion = "3.5.0";
 
 const defaultRoomConnectionOptions = {
     localMediaOptions: {
@@ -543,7 +543,40 @@ function renderGridVideoCells({ content, isConstrained, stageLayout, withRounded
     });
     return gridVideoCells;
 }
-function VideoStageLayout({ debug = false, featureRoundedCornersOff = false, gridContent = [], isConstrained = false, layoutOverflowBackdropFrame = makeFrame(), layoutVideoStage: stageLayout, presentationGridContent = [], subgridContent = [], }) {
+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.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) {
@@ -564,6 +597,14 @@ function VideoStageLayout({ debug = false, featureRoundedCornersOff = false, gri
             withShadow: !isConstrained,
         }));
     }
+    if (floatingContent) {
+        cells.push(renderFloatingVideoCell({
+            content: floatingContent,
+            containerFrame,
+            stageLayout,
+            withRoundedCorners: !featureRoundedCornersOff,
+        }));
+    }
     if (subgridContent.length) {
         cells.push(...renderSubgridVideoCells({
             content: subgridContent,
@@ -640,7 +681,7 @@ function getCellBounds({ width, height, rows, cols, gridGap, aspectRatio, }) {
         extraVerticalPadding: totalVerticalCorrection / 2,
     };
 }
-function calculateLayout$2({ width, height, cellCount, gridGap, cellAspectRatios = [NORMAL_AR], paddings = makeBox(), }) {
+function calculateLayout$3({ width, height, cellCount, gridGap, cellAspectRatios = [NORMAL_AR], paddings = makeBox(), }) {
     if (!cellCount) {
         return {
             cellCount,
@@ -700,7 +741,7 @@ function calculateLayout$2({ width, height, cellCount, gridGap, cellAspectRatios
         paddings,
     };
 }
-function getCellPropsAtIndexForLayout$1({ index, layout, }) {
+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);
@@ -713,6 +754,147 @@ function getCellPropsAtIndexForLayout$1({ index, layout, }) {
     };
 }
 
+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;
@@ -1082,38 +1264,73 @@ function calculateGridLayout({ containerBounds, paddings = makeBox(), videos, is
     const { width, height } = containerBounds;
     const cappedWidth = maxGridWidth ? Math.min(width, maxGridWidth) : width;
     const cellCount = videos.length;
+    let gridLayout = null;
     let videoCells = null;
-    const cellAspectRatios = videos.map((video) => video.aspectRatio || 1);
-    const minGridBounds = getMinGridBounds({ cellCount });
-    const gridLayout = calculateLayout$2({
-        width: cappedWidth,
-        height,
-        cellCount,
-        gridGap,
-        cellAspectRatios,
-        paddings,
-    });
-    videoCells = videos.map((video, index) => {
-        const cellProps = getCellPropsAtIndexForLayout$1({ index, layout: gridLayout });
-        const isSmallCell = gridLayout.cellWidth < minGridBounds.width;
-        const shouldZoom = isConstrained || isSmallCell;
-        const aspectRatio = shouldZoom ? gridLayout.cellWidth / gridLayout.cellHeight : video.aspectRatio || 1;
-        return {
-            clientId: video.clientId,
-            isDraggable: video.isDraggable,
-            origin: makeOrigin({
-                top: cellProps.top,
-                left: cellProps.left,
-            }),
-            bounds: makeBounds({
-                width: cellProps.width,
-                height: cellProps.height,
-            }),
-            aspectRatio,
-            isSmallCell,
-            type: "video",
-        };
-    });
+    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
@@ -1454,7 +1671,7 @@ function calculateLayout({ floatingVideo, frame, gridGap, isConstrained, isMaxim
                 right: gridLayout.paddings.right + gridLayout.extraHorizontalPadding,
             }) }),
         subgrid: stageLayout.subgrid,
-        floatingContent: Object.assign(Object.assign({}, floatingLayout), floatingVideo),
+        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 }),
     };
 }
 
@@ -1474,8 +1691,9 @@ function makeVideoCellView({ aspectRatio, avatarSize, cellPaddings, client = und
 
 const STAGE_PARTICIPANT_LIMIT = 12;
 const ACTIVE_VIDEO_SUBGRID_TRIGGER = 12;
+const ACTIVE_VIDEOS_PHONE_LIMIT = 24;
 
-function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, shouldShowSubgrid, spotlightedParticipants, maximizedParticipant, }) {
+function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, shouldShowSubgrid, spotlightedParticipants, maximizedParticipant, isPhoneResolution, }) {
     if (!shouldShowSubgrid) {
         return [];
     }
@@ -1492,6 +1710,16 @@ function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, should
     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);
@@ -1504,10 +1732,19 @@ function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, should
     }
     return noVideoViews;
 }
-function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID_TRIGGER, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, forceSubgrid = true, enableSubgrid = true, maximizedParticipant, } = {}) {
+function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID_TRIGGER, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, forceSubgrid = true, enableSubgrid = true, maximizedParticipant, floatingParticipant, isConstrained = false, } = {}) {
     const allClientViews = useAppSelector(selectAllClientViews);
     const spotlightedParticipants = useAppSelector(selectSpotlightedClientViews);
     const numParticipants = useAppSelector(selectNumParticipants);
+    const floatingClientView = React.useMemo(() => {
+        return floatingParticipant;
+    }, [floatingParticipant]);
+    const clientViewsNotFloating = React.useMemo(() => {
+        if (floatingClientView) {
+            return allClientViews.filter((c) => c.id !== floatingClientView.id);
+        }
+        return allClientViews;
+    }, [allClientViews, floatingClientView]);
     const shouldShowSubgrid = React.useMemo(() => {
         if (!enableSubgrid) {
             return false;
@@ -1516,16 +1753,17 @@ function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID
     }, [forceSubgrid, numParticipants, stageParticipantLimit, enableSubgrid]);
     const clientViewsInSubgrid = React.useMemo(() => {
         return calculateSubgridViews({
-            clientViews: allClientViews,
+            clientViews: clientViewsNotFloating,
             activeVideosSubgridTrigger,
             shouldShowSubgrid,
             spotlightedParticipants,
             maximizedParticipant,
+            isPhoneResolution: isConstrained,
         });
-    }, [allClientViews, shouldShowSubgrid, activeVideosSubgridTrigger, spotlightedParticipants]);
+    }, [clientViewsNotFloating, shouldShowSubgrid, activeVideosSubgridTrigger, spotlightedParticipants, isConstrained]);
     const clientViewsOnStage = React.useMemo(() => {
-        return allClientViews.filter((client) => !clientViewsInSubgrid.includes(client));
-    }, [allClientViews, clientViewsInSubgrid]);
+        return clientViewsNotFloating.filter((client) => !clientViewsInSubgrid.includes(client));
+    }, [clientViewsNotFloating, clientViewsInSubgrid]);
     const clientViewsInPresentationGrid = React.useMemo(() => {
         if (maximizedParticipant) {
             return [maximizedParticipant];
@@ -1536,23 +1774,40 @@ function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID
         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, } = {}) {
+function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, gridGap = 8, videoGridGap = 8, enableSubgrid = true, enableConstrainedGrid = true, } = {}) {
     const [containerBounds, setContainerBounds] = React.useState({ width: 0, height: 0 });
+    const [isConstrained, setIsConstrained] = React.useState(false);
     const [clientAspectRatios, setClientAspectRatios] = React.useState({});
     const [maximizedParticipant, setMaximizedParticipant] = React.useState(null);
-    const { clientViewsInGrid, clientViewsInPresentationGrid, clientViewsInSubgrid } = useGridParticipants({
+    const [floatingParticipant, setFloatingParticipant] = React.useState(null);
+    const { clientViewsInGrid, clientViewsInPresentationGrid, clientViewsInSubgrid, floatingClientView } = useGridParticipants({
         activeVideosSubgridTrigger,
         forceSubgrid,
         stageParticipantLimit,
         enableSubgrid,
         maximizedParticipant,
+        floatingParticipant,
+        isConstrained: !!enableConstrainedGrid && !!isConstrained,
     });
+    const cellViewsFloating = React.useMemo(() => {
+        return floatingClientView
+            ? [
+                makeVideoCellView({
+                    client: floatingClientView,
+                    aspectRatio: clientAspectRatios[floatingClientView.id],
+                    avatarSize: 0,
+                    cellPaddings: { top: 0, right: 0 },
+                }),
+            ]
+            : [];
+    }, [floatingClientView, clientAspectRatios]);
     const cellViewsVideoGrid = React.useMemo(() => {
         return clientViewsInGrid.map((client) => {
             return makeVideoCellView({
@@ -1587,19 +1842,36 @@ function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLim
     const containerFrame = React.useMemo(() => {
         return makeFrame(containerBounds);
     }, [containerBounds]);
+    React.useEffect(() => {
+        if (!enableConstrainedGrid) {
+            return;
+        }
+        setIsConstrained(containerBounds.width < 500 || containerBounds.height < 500);
+    }, [containerBounds, enableConstrainedGrid]);
     const videoStage = React.useMemo(() => {
         return calculateLayout({
+            floatingVideo: cellViewsFloating[0],
             frame: containerFrame,
             gridGap,
-            isConstrained: false,
+            isConstrained,
             roomBounds: containerFrame.bounds,
             videos: cellViewsVideoGrid,
             videoGridGap,
             presentationVideos: cellViewsInPresentationGrid,
             subgridVideos: cellViewsInSubgrid,
         });
-    }, [containerFrame, cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid, gridGap, videoGridGap]);
+    }, [
+        containerFrame,
+        cellViewsFloating,
+        cellViewsVideoGrid,
+        cellViewsInPresentationGrid,
+        cellViewsInSubgrid,
+        gridGap,
+        videoGridGap,
+    ]);
     return {
+        containerFrame,
+        cellViewsFloating,
         cellViewsVideoGrid,
         cellViewsInPresentationGrid,
         cellViewsInSubgrid,
@@ -1609,6 +1881,9 @@ function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLim
         setClientAspectRatios,
         maximizedParticipant,
         setMaximizedParticipant,
+        floatingParticipant,
+        setFloatingParticipant,
+        isConstrained,
     };
 }
 
@@ -1717,11 +1992,12 @@ const ParticipantMenuTrigger = React.forwardRef((_a, ref) => {
 ParticipantMenuTrigger.displayName = PopoverTrigger.displayName;
 const ParticipantMenuItem = React.forwardRef((_a, ref) => {
     var { children, style, participantAction } = _a, props = __rest(_a, ["children", "style", "participantAction"]);
-    const { participant, setOpen, maximizedParticipant, setMaximizedParticipant } = useParticipantMenu();
+    const { participant, setOpen, maximizedParticipant, setMaximizedParticipant, setFloatingParticipant, floatingParticipant, } = useParticipantMenu();
     const dispatch = useAppDispatch();
     const spotlightedParticipants = useAppSelector(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":
@@ -1746,6 +2022,17 @@ const ParticipantMenuItem = React.forwardRef((_a, ref) => {
                 setOpen(false);
             };
             break;
+        case "float":
+            onClick = () => {
+                if (isFloating) {
+                    setFloatingParticipant(null);
+                }
+                else {
+                    setFloatingParticipant(participant);
+                }
+                setOpen(false);
+            };
+            break;
     }
     return (React.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));
 });
@@ -1769,11 +2056,22 @@ function SpotlightIcon(props) {
         React.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.createElement("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.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.createElement("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.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(selectSpotlightedClientViews);
     const isSpotlighted = spotlightedParticipants.find((p) => p.id === participant.id);
-    const { isHovered, maximizedParticipant } = useGridCell();
+    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;
     }
@@ -1788,6 +2086,15 @@ function DefaultParticipantMenu({ participant }) {
             } },
             React.createElement(EllipsisIcon, { height: 20, width: 20, transform: "rotate(90)" })),
         React.createElement(ParticipantMenuContent, null,
+            participant.isLocalClient ? (React.createElement(ParticipantMenuItem, { participantAction: "float", style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "10px",
+                } }, isFloating ? (React.createElement(React.Fragment, null,
+                React.createElement(PopInIcon, { height: 16, width: 16 }),
+                "Move to grid")) : (React.createElement(React.Fragment, null,
+                React.createElement(PopOutIcon, { height: 16, width: 16 }),
+                "Pop out")))) : null,
             React.createElement(ParticipantMenuItem, { participantAction: "maximize", style: {
                     display: "flex",
                     alignItems: "center",
@@ -1813,13 +2120,13 @@ const GridCell = React.forwardRef(({ className, participant, children }, ref) =>
         setIsHovered(false);
     }, []);
     return (React.createElement(GridCellContext.Provider, { value: { participant, isHovered } },
-        React.createElement("div", { ref: ref, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, children)));
+        React.createElement("div", { ref: ref, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { height: "100%", width: "100%" } }, children)));
 });
 GridCell.displayName = "GridCell";
 const GridVideoView = React.forwardRef((_a, ref) => {
     var { stream, style } = _a, rest = __rest(_a, ["stream", "style"]);
     const videoEl = React.useRef(null);
-    const { onSetClientAspectRatio, clientAspectRatios, participant } = useGridCell();
+    const { onSetClientAspectRatio, clientAspectRatios, participant, isConstrained } = useGridCell();
     if (!participant)
         return null;
     const aspectRatio = clientAspectRatios[participant.id];
@@ -1836,11 +2143,11 @@ const GridVideoView = React.forwardRef((_a, ref) => {
     if (!s) {
         return null;
     }
-    return (React.createElement(VideoView, Object.assign({ ref: videoEl, style: Object.assign({ borderRadius: "8px" }, style) }, rest, { stream: s, onVideoResize: handleResize })));
+    return (React.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.client;
+    const participant = cellView === null || cellView === void 0 ? void 0 : cellView.client;
     if (!participant) {
         return undefined;
     }
@@ -1851,12 +2158,24 @@ function renderCellView({ cellView, enableParticipantMenu, render }) {
                 enableParticipantMenu ? (React.createElement(DefaultParticipantMenu, { participant: participant })) : null)))) : (React.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true }))));
     }
 }
-function Grid({ renderParticipant, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableParticipantMenu, }) {
+function Grid({ renderParticipant, renderFloatingParticipant, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableParticipantMenu, enableConstrainedGrid, }) {
     const gridRef = React.useRef(null);
-    const { cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid, clientAspectRatios, videoStage, setContainerBounds, setClientAspectRatios, maximizedParticipant, setMaximizedParticipant, } = useGrid({ activeVideosSubgridTrigger: 12, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid });
+    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.useCallback(({ aspectRatio, clientId }) => {
         setClientAspectRatios((prev) => (Object.assign(Object.assign({}, prev), { [clientId]: aspectRatio })));
     }, [setClientAspectRatios]);
+    const floatingContent = React.useMemo(() => {
+        return renderCellView(Object.assign({ cellView: cellViewsFloating[0], enableParticipantMenu }, (renderFloatingParticipant
+            ? { render: ({ participant }) => renderFloatingParticipant({ participant }) }
+            : {})));
+    }, [cellViewsFloating]);
     const presentationGridContent = React.useMemo(() => cellViewsInPresentationGrid.map((cellView) => renderCellView(Object.assign({ cellView,
         enableParticipantMenu }, (renderParticipant ? { render: ({ participant }) => renderParticipant({ participant }) } : {})))), [cellViewsInPresentationGrid]);
     const gridContent = React.useMemo(() => cellViewsVideoGrid.map((cellView) => renderCellView(Object.assign({ cellView,
@@ -1889,13 +2208,16 @@ function Grid({ renderParticipant, stageParticipantLimit, gridGap, videoGridGap,
             clientAspectRatios,
             maximizedParticipant,
             setMaximizedParticipant,
+            floatingParticipant,
+            setFloatingParticipant,
+            isConstrained,
         } },
         React.createElement("div", { ref: gridRef, style: {
                 width: "100%",
                 height: "100%",
                 position: "relative",
             } },
-            React.createElement(VideoStageLayout, { layoutVideoStage: videoStage, presentationGridContent: presentationGridContent, gridContent: gridContent, subgridContent: subgridContent }))));
+            React.createElement(VideoStageLayout, { containerFrame: containerFrame, floatingContent: floatingContent, layoutVideoStage: videoStage, presentationGridContent: presentationGridContent, gridContent: gridContent, subgridContent: subgridContent }))));
 }
 
 export { GridCell, GridVideoView, ParticipantMenu, ParticipantMenuContent, ParticipantMenuItem, ParticipantMenuTrigger, Grid as VideoGrid, VideoView, Provider as WherebyProvider, useLocalMedia, useRoomConnection };