@whereby.com/browser-sdk 2.7.0-beta.0 → 2.7.0

package/dist/react/index.esm.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useState, useEffect, useCallback } from 'react';
-import { debounce } from '@whereby.com/core/utils';
-import { selectChatMessages, selectCloudRecordingRaw, selectLocalParticipantRaw, selectLocalMediaStream, selectRemoteParticipants, selectScreenshares, selectRoomConnectionStatus, selectStreamingRaw, selectWaitingParticipants, createServices, createStore, observeStore, doAppJoin, sdkVersion, appLeft, doRtcReportStreamResolution, doSendChatMessage, doKnockRoom, doSetDisplayName, toggleCameraEnabled, toggleMicrophoneEnabled, doAcceptWaitingParticipant, doRejectWaitingParticipant, doStartCloudRecording, doStartScreenshare, doStopCloudRecording, doStopScreenshare, selectCameraDeviceError, selectCameraDevices, selectCurrentCameraDeviceId, selectCurrentMicrophoneDeviceId, selectIsSettingCameraDevice, selectIsSettingMicrophoneDevice, selectIsLocalMediaStarting, selectMicrophoneDeviceError, selectMicrophoneDevices, selectSpeakerDevices, selectLocalMediaStartError, doStartLocalMedia, doStopLocalMedia, setCurrentCameraDeviceId, setCurrentMicrophoneDeviceId } from '@whereby.com/core';
+import { debounce, selectChatMessages, selectCloudRecordingRaw, selectLocalParticipantRaw, selectLocalMediaStream, selectRemoteParticipants, selectScreenshares, selectRoomConnectionStatus, selectStreamingRaw, selectWaitingParticipants, createServices, createStore, observeStore, doAppJoin, appLeft, doRtcReportStreamResolution, doSendChatMessage, doKnockRoom, doSetDisplayName, toggleCameraEnabled, toggleMicrophoneEnabled, doAcceptWaitingParticipant, doRejectWaitingParticipant, doStartCloudRecording, doStartScreenshare, doStopCloudRecording, doStopScreenshare, doLockRoom, selectCameraDeviceError, selectCameraDevices, selectCurrentCameraDeviceId, selectCurrentMicrophoneDeviceId, selectIsSettingCameraDevice, selectIsSettingMicrophoneDevice, selectIsLocalMediaStarting, selectMicrophoneDeviceError, selectMicrophoneDevices, selectSpeakerDevices, selectLocalMediaStartError, doStartLocalMedia, doStopLocalMedia, setCurrentCameraDeviceId, setCurrentMicrophoneDeviceId } from '@whereby.com/core';
 import { createSelector } from '@reduxjs/toolkit';
 
 /******************************************************************************
@@ -100,6 +99,8 @@ const selectRoomConnectionState = createSelector(selectChatMessages, selectCloud
     return state;
 });
 
+const browserSdkVersion = "2.7.0";
+
 const initialState$1 = {
     chatMessages: [],
     remoteParticipants: [],
@@ -127,7 +128,7 @@ function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectio
         const unsubscribe = observeStore(store, selectRoomConnectionState, setRoomConnectionState);
         const url = new URL(roomUrl);
         const searchParams = new URLSearchParams(url.search);
-        const roomKey = searchParams.get("roomKey");
+        const roomKey = roomConnectionOptions.roomKey || searchParams.get("roomKey");
         store.dispatch(doAppJoin({
             displayName: roomConnectionOptions.displayName || "Guest",
             localMediaOptions: roomConnectionOptions.localMedia
@@ -135,7 +136,7 @@ function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectio
                 : roomConnectionOptions.localMediaOptions,
             roomKey,
             roomUrl,
-            sdkVersion: sdkVersion,
+            userAgent: `browser-sdk:${browserSdkVersion}`,
             externalId: roomConnectionOptions.externalId || null,
         }));
         return () => {
@@ -169,11 +170,13 @@ function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectio
     const startScreenshare = React.useCallback(() => store.dispatch(doStartScreenshare()), [store]);
     const stopCloudRecording = React.useCallback(() => store.dispatch(doStopCloudRecording()), [store]);
     const stopScreenshare = React.useCallback(() => store.dispatch(doStopScreenshare()), [store]);
+    const lockRoom = React.useCallback((locked) => store.dispatch(doLockRoom({ locked })), [store]);
     return {
         state: roomConnectionState,
         actions: {
             sendChatMessage,
             knock,
+            lockRoom,
             setDisplayName,
             toggleCamera,
             toggleMicrophone,
@@ -250,711 +253,4 @@ function useLocalMedia(optionsOrStream = { audio: true, video: true }) {
     };
 }
 
-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 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),
-    };
-}
-
-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({ 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$1({ 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({ 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 }) {
-    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 calculateStageLayout({ containerBounds, containerOrigin, hasConstrainedOverflow, hasPresentationContent, hasVideoContent, isPortrait, }) {
-    const hasVideos = hasPresentationContent || hasVideoContent;
-    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) {
-        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 });
-    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: 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,
-    });
-    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, gridGap, }) {
-    const hasPresentationGrid = videosContainerLayout.presentationGrid.bounds.width > 0;
-    const hasVideoGrid = videosContainerLayout.videoGrid.bounds.width > 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;
-            correction.b;
-        }
-        else {
-            videosContainerLayout.presentationGrid.origin.left += correction.a;
-            videosContainerLayout.videoGrid.origin.left -= correction.b;
-            correction.b;
-        }
-    }
-}
-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 = 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);
-    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 }));
-    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,
-            }), isPortrait: stageLayoutIsPortrait, hasConstrainedOverflow }));
-        if (_stageLayout.hasOverflow) {
-            forceRerunAsOverflow = true;
-        }
-    }
-    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,
-    });
-    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([]);
-    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();
-        };
-    }, []);
-    const participants = React.useMemo(() => {
-        return [...(localParticipant ? [localParticipant] : []), ...remoteParticipants];
-    }, [remoteParticipants, localParticipant]);
-    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]);
-    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]);
-    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, useLocalMedia, useRoomConnection };
+export { VideoView, useLocalMedia, useRoomConnection };