@whereby.com/browser-sdk 2.1.0-beta1 → 2.1.0-beta2

package/dist/react/index.esm.js

@@ -8690,7 +8690,7 @@ const selectRoomConnectionState = createSelector(selectChatMessages, selectCloud
     return state;
 });
 
-const sdkVersion = "2.1.0-beta1";
+const sdkVersion = "2.1.0-beta2";
 
 const initialState$1 = {
     chatMessages: [],
@@ -8842,4 +8842,784 @@ function useLocalMedia(optionsOrStream = { audio: true, video: true }) {
     };
 }
 
-export { VideoView, sdkVersion, useLocalMedia, useRoomConnection };
+// Source of truth layout related constants
+const VIDEO_CONTROLS_MIN_WIDTH$1 = 7 * 60;
+var layoutConstants = {
+    // Minimum window size before we start floating the toolbars
+    MIN_WINDOW_HEIGHT: 320,
+    MIN_WINDOW_WIDTH: 320,
+    // Breakpoints
+    DESKTOP_BREAKPOINT: 1025,
+    TABLET_BREAKPOINT: 750,
+    PHONE_BREAKPOINT: 500,
+    // Room layout
+    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 (no active group)
+    BREAKOUT_STAGE_BACKDROP_HEADER_HEIGHT: 20 + 8,
+    BREAKOUT_STAGE_BACKDROP_FOOTER_HEIGHT: 8 + 40 + 8,
+    // Subgrid
+    SUBGRID_EMPTY_STAGE_MAX_WIDTH: 800,
+    // Groups grid
+    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 table
+    GROUPS_ROW_HEIGHT: 72,
+    GROUPS_ROW_GAP: 1,
+    // Foldable screen
+    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 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, }) => {
+    // Calculate cell content areas for 1, 2 and 3 (columns|rows) layouts
+    // and pick the largest one:
+    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, }) => {
+    // Try both vertical and horizontal layout and pick the one that yields the
+    // biggest video cells:
+    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),
+    };
+}
+
+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();
+}
+// Grid cells are all the same aspect ratio (not to be confused with the video cells)
+// Pick the best ratio given a list of the video cell ratios:
+function pickCellAspectRatio({ choices = [] }) {
+    // If all cells are the same aspect ratio use that:
+    const minAr = Math.min(...choices);
+    const maxAr = Math.max(...choices);
+    let chosenAr = null;
+    if (minAr === maxAr) {
+        chosenAr = minAr;
+    }
+    else {
+        // Otherwise we're in a mixed grid.
+        // We ideally want to make the majority ratio look nice. Pick the most common
+        // ratio but limit it to wide cells. If we don't have a majority choice
+        // just go with the widest:
+        const dominantAr = hasDuplicates(choices) ? findMostCommon(choices) : maxAr;
+        chosenAr = clamp({ value: dominantAr || maxAr, min: NORMAL_AR, max: WIDE_AR });
+    }
+    return {
+        minAr,
+        maxAr,
+        chosenAr,
+    };
+}
+// Calculate how much we need to move the last row horizontally so it
+// becomes centered:
+function getCenterPadding({ 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, }) {
+    // Naively calculate the cell size based on grid and container size:
+    const cellWidth = (width - (cols - 1) * gridGap) / cols;
+    const cellHeight = (height - (rows - 1) * gridGap) / rows;
+    const ar = cellWidth / cellHeight;
+    // Knowing the target cell aspect ratio, pull any extra space
+    // into the grid padding:
+    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$1({ width, height, cellCount, gridGap, cellAspectRatios = [NORMAL_AR], paddings = makeBox(), }) {
+    // Handle empty grid:
+    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,
+    });
+    // Special case 1 col / row:
+    // Divvy up available all space (within reason)
+    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,
+        // pass through
+        gridGap,
+        paddings,
+    };
+}
+function getCellPropsAtIndexForLayout({ 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({ rows, cols, cellWidth, index, cellCount, gridGap });
+    return {
+        top: top * cellHeight + top * gridGap,
+        left: left * cellWidth + left * gridGap + leftPadding,
+        width: cellWidth,
+        height: cellHeight,
+    };
+}
+
+const { BOTTOM_TOOLBAR_HEIGHT, VIDEO_CONTROLS_MIN_WIDTH, TABLET_BREAKPOINT } = layoutConstants;
+const MIN_GRID_HEIGHT = 200;
+const MIN_GRID_WIDTH = 300;
+const FLOATING_VIDEO_SIZE = 200;
+const CONSTRAINED_OVERFLOW_TRIGGER = 12;
+function getMinGridBounds({ cellCount }) {
+    // Reduce min grid dimensions if we have 6 videos or less
+    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;
+    // If we don't have any grids take up whole stage
+    const hasVideoGrid = minGridContainerBounds.width > 0;
+    if (!hasVideoGrid) {
+        return {
+            isPortrait: width <= height,
+            supersizedContentBounds: bounds,
+        };
+    }
+    // Calculate minimum supersized content bounds - take up at least half the
+    // available area:
+    const minHorizontalSupersizedContentWidth = Math.round(width / 2);
+    const minVerticalSupersizedContentHeight = Math.round(height / 2);
+    // Calculate maximum supersized content bounds
+    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;
+    // Do we have an aspect ratio? If not give up all available space (ex some integrations)
+    if (aspectRatio) {
+        // Calculate fit bounds for both portrait and landscape layouts:
+        // 1. grid to the left of content
+        const horizontalContentBounds = fitToBounds(aspectRatio, {
+            width: maxHorizontalSupersizedContentWidth,
+            height,
+        });
+        // 2. grid below content
+        const verticalContentBounds = fitToBounds(aspectRatio, {
+            width,
+            height: maxVerticalSupersizedContentHeight,
+        });
+        // Pick direction that gives content most space:
+        const isPortraitContent = aspectRatio <= 1.0;
+        isPortrait = isPortraitContent
+            ? verticalContentBounds.height > horizontalContentBounds.height
+            : verticalContentBounds.width > horizontalContentBounds.width;
+        // Give wasted space back to the video grid:
+        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) {
+        // If we have more than one presentation grid cell we naively favor portrait orientation
+        // unless it gets too squished:
+        isPortrait = maxHorizontalSupersizedContentWidth / maxVerticalSupersizedContentHeight >= 5;
+    }
+    const supersizedContentBounds = {
+        width: isPortrait ? width : maxHorizontalSupersizedContentWidth - horizontalCorrection,
+        height: isPortrait ? maxVerticalSupersizedContentHeight - verticalCorrection : height,
+    };
+    return {
+        isPortrait,
+        supersizedContentBounds,
+    };
+}
+// The stage layout is the base room layout
+// It divides the stage area between a videos container (made up of video grid +
+// presentation grid)
+function calculateStageLayout({ containerBounds, containerOrigin, hasConstrainedOverflow, hasPresentationContent, hasVideoContent, isPortrait, }) {
+    const hasVideos = hasPresentationContent || hasVideoContent;
+    // Sanity checks
+    // Do we have anything to calculate?
+    if (!hasVideos) {
+        return {
+            isPortrait,
+            videosContainer: makeFrame(),
+            hasOverflow: false,
+        };
+    }
+    return {
+        isPortrait,
+        videosContainer: makeFrame(Object.assign(Object.assign({}, containerBounds), containerOrigin)),
+        hasOverflow: hasConstrainedOverflow,
+    };
+}
+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) {
+        // Fit supersized content
+        const minGridContainerBounds = makeBounds({
+            width: hasVideoContent ? minGridBounds.width + gridGap : 0,
+            height: hasVideoContent ? minGridBounds.height + gridGap : 0,
+        });
+        const supersizedContentLayout = fitSupersizedContent({
+            bounds: containerBounds,
+            aspectRatio: supersizedContentAspectRatio,
+            minGridContainerBounds,
+            hasPresentationGrid,
+        });
+        isPortrait = supersizedContentLayout.isPortrait;
+        presentationGridBounds = supersizedContentLayout.supersizedContentBounds;
+        presentationGridOrigin = Object.assign({}, containerOrigin);
+        if (hasVideoContent) {
+            videoGridBounds = makeBounds({
+                width: isPortrait
+                    ? containerBounds.width
+                    : containerBounds.width - presentationGridBounds.width - gridGap,
+                height: isPortrait
+                    ? containerBounds.height - presentationGridBounds.height - gridGap
+                    : containerBounds.height,
+            });
+            videoGridOrigin = makeOrigin({
+                top: isPortrait ? containerOrigin.top + presentationGridBounds.height + gridGap : containerOrigin.top,
+                left: isPortrait ? containerOrigin.left : containerOrigin.left + presentationGridBounds.width + gridGap,
+            });
+        }
+    }
+    return {
+        isPortrait,
+        presentationGrid: Object.assign({}, makeFrame(Object.assign(Object.assign({}, presentationGridBounds), presentationGridOrigin))),
+        videoGrid: makeFrame(Object.assign(Object.assign({}, videoGridBounds), videoGridOrigin)),
+    };
+}
+function calculateGridLayout({ containerBounds, paddings = makeBox(), videos, isConstrained, maxGridWidth, gridGap, }) {
+    const { width, height } = containerBounds;
+    const cappedWidth = maxGridWidth ? Math.min(width, maxGridWidth) : width;
+    const cellCount = videos.length;
+    let videoCells = null;
+    const cellAspectRatios = videos.map((video) => video.aspectRatio);
+    const minGridBounds = getMinGridBounds({ cellCount });
+    // Cap grid to a sane width (on very wide monitors)
+    const gridLayout = calculateLayout$1({
+        width: cappedWidth,
+        height,
+        cellCount,
+        gridGap,
+        cellAspectRatios,
+        paddings,
+    });
+    videoCells = videos.map((video, index) => {
+        const cellProps = getCellPropsAtIndexForLayout({ index, layout: gridLayout });
+        const isSmallCell = gridLayout.cellWidth < minGridBounds.width;
+        const shouldZoom = isConstrained || isSmallCell;
+        const aspectRatio = shouldZoom ? gridLayout.cellWidth / gridLayout.cellHeight : video.aspectRatio;
+        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,
+        };
+    });
+    return {
+        videoCells,
+        extraHorizontalPadding: 
+        // If we hit the max width, pass up as extra space
+        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, {
+        width: FLOATING_VIDEO_SIZE,
+        height: FLOATING_VIDEO_SIZE,
+    });
+    // Determine if we should position above the video controls or not
+    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) {
+        // Pull up above floating video controls
+        verticalOffset = videoControlsHeight * -1;
+    }
+    else if (!isFloating && !isConstrained) {
+        // Push down over the bottom toolbar
+        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, gridGap, }) {
+    const hasPresentationGrid = videosContainerLayout.presentationGrid.bounds.width > 0;
+    const hasVideoGrid = videosContainerLayout.videoGrid.bounds.width > 0;
+    // Rebalance video containers if we have both presentationGrid and videoGrid bounds,
+    // unless we have a breakout no group stage:
+    if (hasPresentationGrid && hasVideoGrid) {
+        const correction = rebalanceLayoutPaddedAreas({
+            a: {
+                horizontal: presentationGridLayout.extraHorizontalPadding,
+                vertical: presentationGridLayout.extraVerticalPadding,
+            },
+            b: {
+                horizontal: gridLayout.extraHorizontalPadding,
+                vertical: gridLayout.extraVerticalPadding,
+            },
+            gridGap,
+            isPortrait: videosContainerLayout.isPortrait,
+        });
+        // Update in place:
+        if (videosContainerLayout.isPortrait) {
+            videosContainerLayout.presentationGrid.origin.top += correction.a;
+            videosContainerLayout.videoGrid.origin.top -= correction.b;
+            // Save off how much we moved the grid over to be used in the next phase:
+            correction.b;
+        }
+        else {
+            videosContainerLayout.presentationGrid.origin.left += correction.a;
+            videosContainerLayout.videoGrid.origin.left -= correction.b;
+            // Save off how much we moved the grid over to be used in the next phase:
+            correction.b;
+        }
+    }
+}
+function calculateGridLayouts({ gridGap, isConstrained, presentationVideos, videos, videosContainerLayout, gridLayoutPaddings = makeBox(), presentationGridLayoutPaddings = makeBox(), maxGridWidth, }) {
+    // Lay out video cells in provided video containers:
+    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 = null, frame, gridGap = 0, isConstrained = false, isMaximizeMode = false, paddings = makeBox(), presentationVideos = [], rebalanceLayout = false, roomBounds, roomLayoutHasOverlow = false, videoControlsHeight = 0, videos = [], videoGridGap = 0, }) {
+    const hasPresentationContent = !!presentationVideos.length;
+    const hasPresentationGrid = presentationVideos.length > 1;
+    const supersizedContentAspectRatio = hasPresentationContent && !hasPresentationGrid ? presentationVideos[0].aspectRatio : 1;
+    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); // go up to 80vw after a sane max width
+    // On mobile, we set a hard limit on 12 videos, and overflows after that.
+    const hasConstrainedOverflow = (isConstrained && videos.length > CONSTRAINED_OVERFLOW_TRIGGER) || false;
+    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 ||
+        !(hasPresentationContent || hasVideoContent) ||
+        stageBounds.width <= stageBounds.height;
+    const stableStageLayoutProps = {
+        cellPaddings: { top: 4, left: 4, bottom: 4, right: 4 },
+        containerBounds: stageBounds,
+        containerOrigin: stageOrigin,
+        gridGap,
+        hasPresentationContent,
+        hasVideoContent,
+        isConstrained,
+        isMaximizeMode,
+        isSmallScreen,
+        maxGridWidth,
+    };
+    let stageLayout = calculateStageLayout(Object.assign(Object.assign({}, stableStageLayoutProps), { isPortrait: stageLayoutIsPortrait, hasConstrainedOverflow }));
+    // Prevent yo-yo-ing between overflow and non overflow states:
+    // - if we're not in a forced overflow state and main room layout has overflow already (prev we could not fit) and now we can fit,
+    // - double check by re-running the stage layout with the non overflow bounds:
+    let forceRerunAsOverflow = false;
+    if (roomLayoutHasOverlow && !stageLayout.hasOverflow) {
+        const _stageLayout = calculateStageLayout(Object.assign(Object.assign({}, stableStageLayoutProps), { containerBounds: makeBounds({
+                width: stageBounds.width,
+                height: stageBounds.height - BOTTOM_TOOLBAR_HEIGHT, // override "stable" prop
+            }), isPortrait: stageLayoutIsPortrait, hasConstrainedOverflow }));
+        // If it turns out we can't fit, force re-layout as overflow:
+        if (_stageLayout.hasOverflow) {
+            forceRerunAsOverflow = true;
+        }
+    }
+    // If subgrid cannot fit, re-run the stage layout in overflow:
+    if (forceRerunAsOverflow || stageLayout.hasOverflow) {
+        stageLayout = calculateStageLayout(Object.assign(Object.assign({}, stableStageLayoutProps), { isPortrait: true, hasConstrainedOverflow }));
+    }
+    const videosContainerLayout = calculateVideosContainerLayout({
+        containerBounds: stageLayout.videosContainer.bounds,
+        containerOrigin: stageLayout.videosContainer.origin,
+        gridGap,
+        supersizedContentAspectRatio,
+        hasPresentationContent,
+        hasPresentationGrid,
+        hasVideoContent,
+        minGridBounds,
+    });
+    const { gridLayout, presentationGridLayout } = calculateGridLayouts({
+        gridGap: videoGridGap,
+        isConstrained,
+        presentationVideos,
+        videos,
+        videosContainerLayout,
+        maxGridWidth,
+    });
+    const floatingLayout = calculateFloatingLayout({
+        roomBounds,
+        containerFrame: frame,
+        floatingVideo,
+        videoControlsHeight,
+    });
+    // Nudge containers closer to each other to get pleasing layouts with less extreme
+    // negative space. It's opt in because debugging is a lot easier with this behavior off:
+    if (rebalanceLayout) {
+        rebalanceLayoutInPlace({
+            videosContainerLayout,
+            gridLayout,
+            presentationGridLayout,
+            gridGap,
+        });
+    }
+    return {
+        isPortrait: stageLayout.isPortrait,
+        hasOverflow: stageLayout.hasOverflow,
+        bounds: makeBounds({
+            height: 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,
+            }) }),
+        floatingContent: Object.assign(Object.assign({}, floatingLayout), floatingVideo),
+    };
+}
+
+function makeVideoCellView({ aspectRatio, avatarSize, cellPaddings, client = undefined, isDraggable = true, isPlaceholder = false, isSubgrid = false, }) {
+    return {
+        aspectRatio: aspectRatio || 16 / 9,
+        avatarSize,
+        cellPaddings,
+        client,
+        clientId: (client === null || client === void 0 ? void 0 : client.id) || "",
+        isDraggable,
+        isPlaceholder,
+        isSubgrid,
+        type: "video",
+    };
+}
+
+function GridVideoCellView({ cell, participant, render, onSetAspectRatio, onResize, }) {
+    const handleAspectRatioChange = React.useCallback(({ ar }) => {
+        if (ar !== cell.aspectRatio) {
+            onSetAspectRatio({ aspectRatio: ar });
+        }
+    }, [cell.aspectRatio, onSetAspectRatio]);
+    return (React.createElement("div", { style: {
+            position: "absolute",
+            width: cell.bounds.width,
+            height: cell.bounds.height,
+            boxSizing: "border-box",
+            top: cell.origin.top,
+            left: cell.origin.left,
+        } }, render ? (render()) : participant.stream ? (React.createElement(VideoView, { stream: participant.stream, onSetAspectRatio: ({ aspectRatio }) => handleAspectRatioChange({ ar: aspectRatio }), onResize: onResize })) : null));
+}
+function Grid({ roomConnection, renderParticipant, videoGridGap = 0 }) {
+    const { remoteParticipants, localParticipant } = roomConnection.state;
+    const gridRef = React.useRef(null);
+    const [containerFrame, setContainerFrame] = React.useState(null);
+    const [aspectRatios, setAspectRatios] = React.useState([]);
+    // Calculate container frame on resize
+    React.useEffect(() => {
+        if (!gridRef.current) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(debounce(() => {
+            var _a, _b;
+            setContainerFrame(makeFrame({
+                width: (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth,
+                height: (_b = gridRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight,
+            }));
+        }, { delay: 60 }));
+        resizeObserver.observe(gridRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    // Merge local and remote participants
+    const participants = React.useMemo(() => {
+        return [...(localParticipant ? [localParticipant] : []), ...remoteParticipants];
+    }, [remoteParticipants, localParticipant]);
+    // Make video cells
+    const videoCells = React.useMemo(() => {
+        return participants.map((participant) => {
+            var _a;
+            const aspectRatio = (_a = aspectRatios.find((item) => item.clientId === (participant === null || participant === void 0 ? void 0 : participant.id))) === null || _a === void 0 ? void 0 : _a.aspectRatio;
+            return makeVideoCellView({
+                aspectRatio: aspectRatio !== null && aspectRatio !== void 0 ? aspectRatio : 16 / 9,
+                avatarSize: 0,
+                cellPaddings: 10,
+                client: participant,
+            });
+        });
+    }, [participants, aspectRatios]);
+    // Calculate stage layout
+    const stageLayout = React.useMemo(() => {
+        if (!containerFrame)
+            return null;
+        return calculateLayout({
+            frame: containerFrame,
+            gridGap: 0,
+            isConstrained: false,
+            roomBounds: containerFrame.bounds,
+            videos: videoCells,
+            videoGridGap,
+        });
+    }, [containerFrame, videoCells, videoGridGap]);
+    // Handle resize
+    const handleResize = React.useCallback(({ width, height, stream }) => {
+        if (!roomConnection._ref)
+            return;
+        roomConnection._ref.dispatch(doRtcReportStreamResolution({ streamId: stream.id, width, height }));
+    }, [localParticipant, roomConnection._ref]);
+    return (React.createElement("div", { ref: gridRef, style: {
+            width: "100%",
+            height: "100%",
+            position: "relative",
+        } }, participants.map((participant, i) => {
+        const cell = stageLayout === null || stageLayout === void 0 ? void 0 : stageLayout.videoGrid.cells[i];
+        if (!cell || !participant || !participant.stream || !cell.clientId)
+            return null;
+        return (React.createElement(GridVideoCellView, { key: cell.clientId, cell: cell, participant: participant, render: renderParticipant ? () => renderParticipant({ cell, participant }) : undefined, onResize: handleResize, onSetAspectRatio: ({ aspectRatio }) => {
+                setAspectRatios((prev) => {
+                    const index = prev.findIndex((item) => item.clientId === cell.clientId);
+                    if (index === -1) {
+                        return [...prev, { clientId: cell.clientId, aspectRatio }];
+                    }
+                    return [
+                        ...prev.slice(0, index),
+                        { clientId: cell.clientId, aspectRatio },
+                        ...prev.slice(index + 1),
+                    ];
+                });
+            } }));
+    })));
+}
+
+export { Grid as VideoGrid, VideoView, sdkVersion, useLocalMedia, useRoomConnection };