@whereby.com/browser-sdk 3.33.4 → 3.34.1

package/dist/react/index.cjs

@@ -172,7 +172,7 @@ const VideoView = React__namespace.forwardRef((_a, ref) => {
 });
 VideoView.displayName = "VideoView";
 
-const browserSdkVersion = "3.33.4";
+const browserSdkVersion = "3.34.1";
 
 const initialState$1 = {
     chatMessages: [],
@@ -552,18 +552,20 @@ function getGridSizeForCount({ count, width, height, aspectRatio, }) {
 }
 
 function VideoCell(_a) {
-    var { aspectRatio, children, className, height, style, width, withRoundedCorners = false, withShadow = true } = _a, rest = __rest(_a, ["aspectRatio", "children", "className", "height", "style", "width", "withRoundedCorners", "withShadow"]);
-    let contentWidth = width;
-    let contentHeight = height;
-    let leftOffset = 0;
-    let topOffset = 0;
-    if (aspectRatio) {
+    var { aspectRatio, children, className, height, paddings, style, width, withRoundedCorners = false, withShadow = true } = _a, rest = __rest(_a, ["aspectRatio", "children", "className", "height", "paddings", "style", "width", "withRoundedCorners", "withShadow"]);
+    const innerWidth = Math.max(0, width - ((paddings === null || paddings === void 0 ? void 0 : paddings.left) || 0) - ((paddings === null || paddings === void 0 ? void 0 : paddings.right) || 0));
+    const innerHeight = Math.max(0, height - ((paddings === null || paddings === void 0 ? void 0 : paddings.top) || 0) - ((paddings === null || paddings === void 0 ? void 0 : paddings.bottom) || 0));
+    let contentWidth = innerWidth;
+    let contentHeight = innerHeight;
+    let leftOffset = (paddings === null || paddings === void 0 ? void 0 : paddings.left) || 0;
+    let topOffset = (paddings === null || paddings === void 0 ? void 0 : paddings.top) || 0;
+    if (aspectRatio && innerWidth && innerHeight) {
         ({ width: contentWidth, height: contentHeight } = fitToBounds(aspectRatio, {
-            width,
-            height,
+            width: innerWidth,
+            height: innerHeight,
         }));
-        leftOffset = (width - contentWidth) / 2;
-        topOffset = (height - contentHeight) / 2;
+        leftOffset += (innerWidth - contentWidth) / 2;
+        topOffset += (innerHeight - contentHeight) / 2;
     }
     const contentStyle = Object.assign({ width: `${Math.round(contentWidth)}px`, height: `${Math.round(contentHeight)}px` }, (leftOffset || topOffset
         ? { transform: `translate3d(${Math.round(leftOffset)}px, ${Math.round(topOffset)}px, 0)` }
@@ -585,7 +587,7 @@ function generateStylesFromFrame({ origin, bounds }) {
 }
 function renderVideoCell({ cell, child, clientId, style = {}, withRoundedCorners = false, withShadow = false, }) {
     const isHidden = !hasBounds(cell.bounds);
-    return (React__namespace.createElement(VideoCell, { width: cell.bounds.width, height: cell.bounds.height, aspectRatio: cell.aspectRatio, style: isHidden ? { width: 0, height: 0 } : style, withRoundedCorners: withRoundedCorners, withShadow: withShadow, key: clientId }, child));
+    return (React__namespace.createElement(VideoCell, { width: cell.bounds.width, height: cell.bounds.height, aspectRatio: cell.aspectRatio, paddings: cell.paddings, style: isHidden ? { width: 0, height: 0 } : style, withRoundedCorners: withRoundedCorners, withShadow: withShadow, key: clientId }, child));
 }
 function renderSubgridVideoCells({ content, stageLayout, withRoundedCorners, withShadow, }) {
     const cells = stageLayout.subgrid.cells;
@@ -1592,8 +1594,8 @@ function calculateStageLayout({ cellPaddings, cellSizeOptions, containerBounds,
         isPortrait,
         videosContainer: makeFrame(Object.assign(Object.assign({}, videosContainerBounds), videosContainerOrigin)),
         subgrid: Object.assign(Object.assign({}, makeFrame(Object.assign(Object.assign({}, subgridBounds), subgridOrigin))), { cells: subgridLayout.videoCells.map((cell, index) => {
-                var _a, _b;
-                return (Object.assign({ aspectRatio: ((_a = subgridVideos[index]) === null || _a === void 0 ? void 0 : _a.aspectRatio) || 1, type: "video", clientId: (_b = subgridVideos[index]) === null || _b === void 0 ? void 0 : _b.clientId }, cell));
+                var _a;
+                return (Object.assign({ aspectRatio: 1, type: "video", clientId: (_a = subgridVideos[index]) === null || _a === void 0 ? void 0 : _a.clientId }, cell));
             }), contentBounds: subgridLayout.contentBounds }),
         hasOverflow: hasOverflow || shouldOverflowSubgrid || hasConstrainedOverflow,
         overflowNeedBounds: shouldOverflowSubgrid ? makeBounds() : overflowNeedBounds,
@@ -2100,11 +2102,16 @@ function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, should
         return [];
     }
     const hasSpotlights = spotlightedParticipants.length > 0;
-    const hasPresentationStage = hasSpotlights || hasStagedIntegration;
+    const hasMaximized = !!maximizedCellId && clientViews.some((client) => client.id === maximizedCellId);
+    const hasPresentationStage = hasSpotlights || hasStagedIntegration || hasMaximized;
     const notMaximized = maximizedCellId ? clientViews.filter((client) => client.id !== maximizedCellId) : clientViews;
     const notSpotlighted = notMaximized.filter((client) => !client.isPresentation && !spotlightedParticipants.includes(client));
     const noVideoViews = notSpotlighted.filter((client) => !client.isVideoEnabled);
     const videoLimitReached = notSpotlighted.filter((client) => client.isVideoEnabled).length > activeVideosSubgridTrigger;
+    if (isPhoneResolution && hasPresentationStage) {
+        const offStage = hasSpotlights && !hasStagedIntegration && !hasMaximized ? notSpotlighted : notMaximized;
+        return [...offStage.filter((client) => !noVideoViews.includes(client)), ...noVideoViews];
+    }
     const unmutedVideos = notSpotlighted.filter((client) => !noVideoViews.includes(client) && client.isAudioEnabled);
     const mutedVideos = notSpotlighted.filter((client) => !noVideoViews.includes(client) && !client.isAudioEnabled);
     if (noVideoViews.length && hasPresentationStage) {
@@ -2262,6 +2269,16 @@ function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLim
         isConstrained: !!enableConstrainedGrid && !!isConstrained,
         includeIntegrations,
     });
+    React__namespace.useEffect(() => {
+        if (maximizedCellId && !maximizedClientView) {
+            setMaximizedCellId(null);
+        }
+    }, [maximizedCellId, maximizedClientView]);
+    React__namespace.useEffect(() => {
+        if (floatingCellId && !floatingClientView) {
+            setFloatingCellId(null);
+        }
+    }, [floatingCellId, floatingClientView]);
     const cellViewsFloating = React__namespace.useMemo(() => {
         return floatingClientView
             ? [
@@ -2401,8 +2418,9 @@ function Avatar(_a) {
         } }))));
 }
 
-function VideoMutedIndicator({ avatarUrl, displayName, isSmallCell, withRoundedCorners, stream, muted }) {
+function VideoMutedIndicator({ avatarSize, avatarUrl, displayName, isSmallCell, withRoundedCorners, stream, muted, }) {
     const audioElRef = useAudioElement({ stream, muted });
+    const size = avatarSize !== null && avatarSize !== void 0 ? avatarSize : (isSmallCell ? 60 : 80);
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement("div", { style: {
                 display: "flex",
@@ -2417,12 +2435,12 @@ function VideoMutedIndicator({ avatarUrl, displayName, isSmallCell, withRoundedC
                 borderRadius: withRoundedCorners ? "8px" : "0",
             } },
             React__namespace.createElement("div", { style: {
-                    height: isSmallCell ? 60 : 80,
-                    width: isSmallCell ? 60 : 80,
+                    height: size,
+                    width: size,
                     pointerEvents: "none",
                     position: "relative",
                 } },
-                React__namespace.createElement(Avatar, { variant: "square", avatarUrl: avatarUrl, name: displayName, size: isSmallCell ? 60 : 80 }))),
+                React__namespace.createElement(Avatar, { variant: "square", avatarUrl: avatarUrl, name: displayName, size: size }))),
         React__namespace.createElement("audio", { ref: audioElRef, autoPlay: true, playsInline: true })));
 }
 
@@ -2436,7 +2454,7 @@ const PopoverContent = React__namespace.forwardRef((_a, ref) => {
 PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
 
 const GridContext = React__namespace.createContext({});
-const GridCellContext = React__namespace.createContext({});
+const GridCellContext = React__namespace.createContext(null);
 const useGridCell = () => {
     const gridContext = React__namespace.useContext(GridContext);
     const gridCellContext = React__namespace.useContext(GridCellContext);
@@ -2583,7 +2601,7 @@ function DefaultParticipantMenu({ participant }) {
                 isSpotlighted ? "Remove spotlight" : "Spotlight"))));
 }
 
-const GridCell = React__namespace.forwardRef(({ className, participant, children }, ref) => {
+const GridCell = React__namespace.forwardRef(({ className, participant, cellId, avatarSize, children }, ref) => {
     const [isHovered, setIsHovered] = React__namespace.useState(false);
     const handleMouseEnter = React__namespace.useCallback(() => {
         setIsHovered(true);
@@ -2591,14 +2609,14 @@ const GridCell = React__namespace.forwardRef(({ className, participant, children
     const handleMouseLeave = React__namespace.useCallback(() => {
         setIsHovered(false);
     }, []);
-    return (React__namespace.createElement(GridCellContext.Provider, { value: { participant, isHovered } },
-        React__namespace.createElement("div", { ref: ref, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { height: "100%", width: "100%" } }, children)));
+    return (React__namespace.createElement(GridCellContext.Provider, { value: { participant, isHovered, avatarSize } },
+        React__namespace.createElement("div", { ref: ref, "data-cell-id": cellId, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { height: "100%", width: "100%" } }, children)));
 });
 GridCell.displayName = "GridCell";
 const GridVideoView = React__namespace.forwardRef((_a, ref) => {
     var { stream, style } = _a, rest = __rest(_a, ["stream", "style"]);
     const videoEl = React__namespace.useRef(null);
-    const { onSetClientAspectRatio, clientAspectRatios, participant, isConstrained } = useGridCell();
+    const { onSetClientAspectRatio, clientAspectRatios, participant, isConstrained, avatarSize } = useGridCell();
     if (!participant)
         return null;
     const aspectRatio = clientAspectRatios[participant.id];
@@ -2613,9 +2631,9 @@ const GridVideoView = React__namespace.forwardRef((_a, ref) => {
     }, [clientAspectRatios, participant.id, onSetClientAspectRatio]);
     const s = stream || participant.stream;
     if (!s || !participant.isVideoEnabled) {
-        return (React__namespace.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true, muted: participant.isLocalClient, stream: participant.stream }));
+        return (React__namespace.createElement(VideoMutedIndicator, { isSmallCell: false, avatarSize: avatarSize, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true, muted: participant.isLocalClient, stream: participant.stream }));
     }
-    return (React__namespace.createElement(VideoView, Object.assign({ ref: videoEl, style: Object.assign(Object.assign({ borderRadius: isConstrained ? 0 : "8px" }, (isConstrained ? { objectFit: "cover" } : {})), style), muted: participant.isLocalClient }, rest, { stream: s, onVideoResize: handleResize })));
+    return (React__namespace.createElement(VideoView, Object.assign({ ref: videoEl, style: Object.assign(Object.assign({ borderRadius: isConstrained ? 0 : "8px" }, (isConstrained || avatarSize ? { objectFit: "cover" } : {})), style), muted: participant.isLocalClient }, rest, { stream: s, onVideoResize: handleResize })));
 });
 GridVideoView.displayName = "GridVideoView";
 function renderCellView({ cellView, enableParticipantMenu, render, renderIntegration }) {
@@ -2847,6 +2865,7 @@ exports.VideoView = VideoView;
 exports.WherebyProvider = Provider;
 exports.subscribeToRoomIntegrationPicker = subscribeToRoomIntegrationPicker;
 exports.useGrid = useGrid;
+exports.useGridCell = useGridCell;
 exports.useLocalMedia = useLocalMedia;
 exports.useRoomConnection = useRoomConnection;
 exports.useRoomIntegrationPicker = useRoomIntegrationPicker;

package/dist/react/index.d.ts

@@ -229,9 +229,33 @@ type StageLayout = {
     overflowNeedBounds?: Bounds;
 };
 
+declare const useGridCell: () => {
+    participant: ClientView;
+    isHovered: boolean;
+    avatarSize?: number;
+    onSetClientAspectRatio: ({ aspectRatio, clientId }: {
+        aspectRatio: number;
+        clientId: string;
+    }) => void;
+    cellViewsVideoGrid: CellView[];
+    cellViewsInPresentationGrid: CellView[];
+    cellViewsInSubgrid: CellView[];
+    clientAspectRatios: {
+        [key: string]: number;
+    };
+    maximizedCellId: string | null;
+    setMaximizedCellId: React.Dispatch<React.SetStateAction<string | null>>;
+    maximizedParticipant: ClientView | null;
+    floatingCellId: string | null;
+    setFloatingCellId: React.Dispatch<React.SetStateAction<string | null>>;
+    floatingParticipant: ClientView | null;
+    isConstrained?: boolean;
+};
+
 type GridCellSelfProps = {
     participant: ClientView;
     cellId?: string;
+    avatarSize?: number;
 };
 type GridCellProps = GridCellSelfProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 declare const GridCell: React.ForwardRefExoticComponent<Omit<GridCellProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -354,5 +378,5 @@ declare function subscribeToRoomIntegrationPicker({ pickerOrigin, getSource, onO
     onOutcome: (outcome: RoomIntegrationPickerOutcome) => void;
 }): () => void;
 
-export { GridCell, GridVideoView, ParticipantMenu, ParticipantMenuContent, ParticipantMenuItem, ParticipantMenuTrigger, Grid as VideoGrid, VideoView, Provider as WherebyProvider, subscribeToRoomIntegrationPicker, useGrid, useLocalMedia, useRoomConnection, useRoomIntegrationPicker, useRoomIntegrationView };
+export { GridCell, GridVideoView, ParticipantMenu, ParticipantMenuContent, ParticipantMenuItem, ParticipantMenuTrigger, Grid as VideoGrid, VideoView, Provider as WherebyProvider, subscribeToRoomIntegrationPicker, useGrid, useGridCell, useLocalMedia, useRoomConnection, useRoomIntegrationPicker, useRoomIntegrationView };
 export type { CellView, IntegrationCellView, RoomConnectionActions, RoomConnectionOptions, RoomIntegrationIframeProps, RoomIntegrationPickerOutcome, UseLocalMediaResult, UseRoomIntegrationPickerOptions, UseRoomIntegrationPickerResult, UseRoomIntegrationViewOptions, UseRoomIntegrationViewResult, VideoCellView };

package/dist/react/index.esm.js

@@ -151,7 +151,7 @@ const VideoView = React.forwardRef((_a, ref) => {
 });
 VideoView.displayName = "VideoView";
 
-const browserSdkVersion = "3.33.4";
+const browserSdkVersion = "3.34.1";
 
 const initialState$1 = {
     chatMessages: [],
@@ -531,18 +531,20 @@ function getGridSizeForCount({ count, width, height, aspectRatio, }) {
 }
 
 function VideoCell(_a) {
-    var { aspectRatio, children, className, height, style, width, withRoundedCorners = false, withShadow = true } = _a, rest = __rest(_a, ["aspectRatio", "children", "className", "height", "style", "width", "withRoundedCorners", "withShadow"]);
-    let contentWidth = width;
-    let contentHeight = height;
-    let leftOffset = 0;
-    let topOffset = 0;
-    if (aspectRatio) {
+    var { aspectRatio, children, className, height, paddings, style, width, withRoundedCorners = false, withShadow = true } = _a, rest = __rest(_a, ["aspectRatio", "children", "className", "height", "paddings", "style", "width", "withRoundedCorners", "withShadow"]);
+    const innerWidth = Math.max(0, width - ((paddings === null || paddings === void 0 ? void 0 : paddings.left) || 0) - ((paddings === null || paddings === void 0 ? void 0 : paddings.right) || 0));
+    const innerHeight = Math.max(0, height - ((paddings === null || paddings === void 0 ? void 0 : paddings.top) || 0) - ((paddings === null || paddings === void 0 ? void 0 : paddings.bottom) || 0));
+    let contentWidth = innerWidth;
+    let contentHeight = innerHeight;
+    let leftOffset = (paddings === null || paddings === void 0 ? void 0 : paddings.left) || 0;
+    let topOffset = (paddings === null || paddings === void 0 ? void 0 : paddings.top) || 0;
+    if (aspectRatio && innerWidth && innerHeight) {
         ({ width: contentWidth, height: contentHeight } = fitToBounds(aspectRatio, {
-            width,
-            height,
+            width: innerWidth,
+            height: innerHeight,
         }));
-        leftOffset = (width - contentWidth) / 2;
-        topOffset = (height - contentHeight) / 2;
+        leftOffset += (innerWidth - contentWidth) / 2;
+        topOffset += (innerHeight - contentHeight) / 2;
     }
     const contentStyle = Object.assign({ width: `${Math.round(contentWidth)}px`, height: `${Math.round(contentHeight)}px` }, (leftOffset || topOffset
         ? { transform: `translate3d(${Math.round(leftOffset)}px, ${Math.round(topOffset)}px, 0)` }
@@ -564,7 +566,7 @@ function generateStylesFromFrame({ origin, bounds }) {
 }
 function renderVideoCell({ cell, child, clientId, style = {}, withRoundedCorners = false, withShadow = false, }) {
     const isHidden = !hasBounds(cell.bounds);
-    return (React.createElement(VideoCell, { width: cell.bounds.width, height: cell.bounds.height, aspectRatio: cell.aspectRatio, style: isHidden ? { width: 0, height: 0 } : style, withRoundedCorners: withRoundedCorners, withShadow: withShadow, key: clientId }, child));
+    return (React.createElement(VideoCell, { width: cell.bounds.width, height: cell.bounds.height, aspectRatio: cell.aspectRatio, paddings: cell.paddings, style: isHidden ? { width: 0, height: 0 } : style, withRoundedCorners: withRoundedCorners, withShadow: withShadow, key: clientId }, child));
 }
 function renderSubgridVideoCells({ content, stageLayout, withRoundedCorners, withShadow, }) {
     const cells = stageLayout.subgrid.cells;
@@ -1571,8 +1573,8 @@ function calculateStageLayout({ cellPaddings, cellSizeOptions, containerBounds,
         isPortrait,
         videosContainer: makeFrame(Object.assign(Object.assign({}, videosContainerBounds), videosContainerOrigin)),
         subgrid: Object.assign(Object.assign({}, makeFrame(Object.assign(Object.assign({}, subgridBounds), subgridOrigin))), { cells: subgridLayout.videoCells.map((cell, index) => {
-                var _a, _b;
-                return (Object.assign({ aspectRatio: ((_a = subgridVideos[index]) === null || _a === void 0 ? void 0 : _a.aspectRatio) || 1, type: "video", clientId: (_b = subgridVideos[index]) === null || _b === void 0 ? void 0 : _b.clientId }, cell));
+                var _a;
+                return (Object.assign({ aspectRatio: 1, type: "video", clientId: (_a = subgridVideos[index]) === null || _a === void 0 ? void 0 : _a.clientId }, cell));
             }), contentBounds: subgridLayout.contentBounds }),
         hasOverflow: hasOverflow || shouldOverflowSubgrid || hasConstrainedOverflow,
         overflowNeedBounds: shouldOverflowSubgrid ? makeBounds() : overflowNeedBounds,
@@ -2079,11 +2081,16 @@ function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, should
         return [];
     }
     const hasSpotlights = spotlightedParticipants.length > 0;
-    const hasPresentationStage = hasSpotlights || hasStagedIntegration;
+    const hasMaximized = !!maximizedCellId && clientViews.some((client) => client.id === maximizedCellId);
+    const hasPresentationStage = hasSpotlights || hasStagedIntegration || hasMaximized;
     const notMaximized = maximizedCellId ? clientViews.filter((client) => client.id !== maximizedCellId) : clientViews;
     const notSpotlighted = notMaximized.filter((client) => !client.isPresentation && !spotlightedParticipants.includes(client));
     const noVideoViews = notSpotlighted.filter((client) => !client.isVideoEnabled);
     const videoLimitReached = notSpotlighted.filter((client) => client.isVideoEnabled).length > activeVideosSubgridTrigger;
+    if (isPhoneResolution && hasPresentationStage) {
+        const offStage = hasSpotlights && !hasStagedIntegration && !hasMaximized ? notSpotlighted : notMaximized;
+        return [...offStage.filter((client) => !noVideoViews.includes(client)), ...noVideoViews];
+    }
     const unmutedVideos = notSpotlighted.filter((client) => !noVideoViews.includes(client) && client.isAudioEnabled);
     const mutedVideos = notSpotlighted.filter((client) => !noVideoViews.includes(client) && !client.isAudioEnabled);
     if (noVideoViews.length && hasPresentationStage) {
@@ -2241,6 +2248,16 @@ function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLim
         isConstrained: !!enableConstrainedGrid && !!isConstrained,
         includeIntegrations,
     });
+    React.useEffect(() => {
+        if (maximizedCellId && !maximizedClientView) {
+            setMaximizedCellId(null);
+        }
+    }, [maximizedCellId, maximizedClientView]);
+    React.useEffect(() => {
+        if (floatingCellId && !floatingClientView) {
+            setFloatingCellId(null);
+        }
+    }, [floatingCellId, floatingClientView]);
     const cellViewsFloating = React.useMemo(() => {
         return floatingClientView
             ? [
@@ -2380,8 +2397,9 @@ function Avatar(_a) {
         } }))));
 }
 
-function VideoMutedIndicator({ avatarUrl, displayName, isSmallCell, withRoundedCorners, stream, muted }) {
+function VideoMutedIndicator({ avatarSize, avatarUrl, displayName, isSmallCell, withRoundedCorners, stream, muted, }) {
     const audioElRef = useAudioElement({ stream, muted });
+    const size = avatarSize !== null && avatarSize !== void 0 ? avatarSize : (isSmallCell ? 60 : 80);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { style: {
                 display: "flex",
@@ -2396,12 +2414,12 @@ function VideoMutedIndicator({ avatarUrl, displayName, isSmallCell, withRoundedC
                 borderRadius: withRoundedCorners ? "8px" : "0",
             } },
             React.createElement("div", { style: {
-                    height: isSmallCell ? 60 : 80,
-                    width: isSmallCell ? 60 : 80,
+                    height: size,
+                    width: size,
                     pointerEvents: "none",
                     position: "relative",
                 } },
-                React.createElement(Avatar, { variant: "square", avatarUrl: avatarUrl, name: displayName, size: isSmallCell ? 60 : 80 }))),
+                React.createElement(Avatar, { variant: "square", avatarUrl: avatarUrl, name: displayName, size: size }))),
         React.createElement("audio", { ref: audioElRef, autoPlay: true, playsInline: true })));
 }
 
@@ -2415,7 +2433,7 @@ const PopoverContent = React.forwardRef((_a, ref) => {
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 const GridContext = React.createContext({});
-const GridCellContext = React.createContext({});
+const GridCellContext = React.createContext(null);
 const useGridCell = () => {
     const gridContext = React.useContext(GridContext);
     const gridCellContext = React.useContext(GridCellContext);
@@ -2562,7 +2580,7 @@ function DefaultParticipantMenu({ participant }) {
                 isSpotlighted ? "Remove spotlight" : "Spotlight"))));
 }
 
-const GridCell = React.forwardRef(({ className, participant, children }, ref) => {
+const GridCell = React.forwardRef(({ className, participant, cellId, avatarSize, children }, ref) => {
     const [isHovered, setIsHovered] = React.useState(false);
     const handleMouseEnter = React.useCallback(() => {
         setIsHovered(true);
@@ -2570,14 +2588,14 @@ const GridCell = React.forwardRef(({ className, participant, children }, ref) =>
     const handleMouseLeave = React.useCallback(() => {
         setIsHovered(false);
     }, []);
-    return (React.createElement(GridCellContext.Provider, { value: { participant, isHovered } },
-        React.createElement("div", { ref: ref, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { height: "100%", width: "100%" } }, children)));
+    return (React.createElement(GridCellContext.Provider, { value: { participant, isHovered, avatarSize } },
+        React.createElement("div", { ref: ref, "data-cell-id": cellId, 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, isConstrained } = useGridCell();
+    const { onSetClientAspectRatio, clientAspectRatios, participant, isConstrained, avatarSize } = useGridCell();
     if (!participant)
         return null;
     const aspectRatio = clientAspectRatios[participant.id];
@@ -2592,9 +2610,9 @@ const GridVideoView = React.forwardRef((_a, ref) => {
     }, [clientAspectRatios, participant.id, onSetClientAspectRatio]);
     const s = stream || participant.stream;
     if (!s || !participant.isVideoEnabled) {
-        return (React.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true, muted: participant.isLocalClient, stream: participant.stream }));
+        return (React.createElement(VideoMutedIndicator, { isSmallCell: false, avatarSize: avatarSize, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true, muted: participant.isLocalClient, stream: participant.stream }));
     }
-    return (React.createElement(VideoView, Object.assign({ ref: videoEl, style: Object.assign(Object.assign({ borderRadius: isConstrained ? 0 : "8px" }, (isConstrained ? { objectFit: "cover" } : {})), style), muted: participant.isLocalClient }, rest, { stream: s, onVideoResize: handleResize })));
+    return (React.createElement(VideoView, Object.assign({ ref: videoEl, style: Object.assign(Object.assign({ borderRadius: isConstrained ? 0 : "8px" }, (isConstrained || avatarSize ? { objectFit: "cover" } : {})), style), muted: participant.isLocalClient }, rest, { stream: s, onVideoResize: handleResize })));
 });
 GridVideoView.displayName = "GridVideoView";
 function renderCellView({ cellView, enableParticipantMenu, render, renderIntegration }) {
@@ -2779,4 +2797,4 @@ function useRoomIntegrationPicker({ integration, onPicked, onCancel, onError, fe
     };
 }
 
-export { GridCell, GridVideoView, ParticipantMenu, ParticipantMenuContent, ParticipantMenuItem, ParticipantMenuTrigger, Grid as VideoGrid, VideoView, Provider as WherebyProvider, subscribeToRoomIntegrationPicker, useGrid, useLocalMedia, useRoomConnection, useRoomIntegrationPicker, useRoomIntegrationView };
+export { GridCell, GridVideoView, ParticipantMenu, ParticipantMenuContent, ParticipantMenuItem, ParticipantMenuTrigger, Grid as VideoGrid, VideoView, Provider as WherebyProvider, subscribeToRoomIntegrationPicker, useGrid, useGridCell, useLocalMedia, useRoomConnection, useRoomIntegrationPicker, useRoomIntegrationView };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whereby.com/browser-sdk",
-  "version": "3.33.4",
+  "version": "3.34.1",
   "description": "Modules for integration Whereby video in web apps",
   "author": "Whereby AS",
   "license": "MIT",
@@ -68,8 +68,8 @@
     "@whereby.com/eslint-config": "0.1.0",
     "@whereby.com/jest-config": "0.1.0",
     "@whereby.com/prettier-config": "0.1.0",
-    "@whereby.com/rollup-config": "0.1.1",
-    "@whereby.com/tsconfig": "0.1.0"
+    "@whereby.com/tsconfig": "0.1.0",
+    "@whereby.com/rollup-config": "0.1.1"
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.7",