@whereby.com/browser-sdk 3.0.0 → 3.0.1

package/dist/react/index.d.ts

@@ -177,6 +177,6 @@ interface GridProps {
     videoGridGap?: number;
     stageParticipantLimit?: number;
 }
-declare function Grid({ renderParticipant, stageParticipantLimit }: GridProps): React.JSX.Element;
+declare function Grid({ renderParticipant, stageParticipantLimit, videoGridGap }: GridProps): React.JSX.Element;
 
 export { type ChatMessageState as ChatMessage, type LocalParticipantState as LocalParticipant, type RemoteParticipantState as RemoteParticipant, type RoomConnectionState as RoomConnection, type ScreenshareState as Screenshare, type UseLocalMediaResult, Grid as VideoGrid, VideoView, type WaitingParticipantState as WaitingParticipant, Provider as WherebyProvider, useLocalMedia, useRoomConnection };

package/dist/react/index.esm.js

@@ -145,7 +145,7 @@ const selectRoomConnectionState = createSelector(selectChatMessages, selectCloud
     return state;
 });
 
-const browserSdkVersion = "3.0.0";
+const browserSdkVersion = "3.0.1";
 
 const defaultRoomConnectionOptions = {
     localMediaOptions: {
@@ -1513,8 +1513,8 @@ function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID
         return allClientViews.filter((client) => !clientViewsInSubgrid.includes(client));
     }, [allClientViews, clientViewsInSubgrid]);
     const clientViewsInPresentationGrid = React.useMemo(() => {
-        return allClientViews.filter((client) => client.isPresentation).concat(spotlightedParticipants);
-    }, [allClientViews, spotlightedParticipants]);
+        return spotlightedParticipants;
+    }, [spotlightedParticipants]);
     const clientViewsInGrid = React.useMemo(() => {
         return clientViewsOnStage.filter((client) => !clientViewsInPresentationGrid.includes(client));
     }, [clientViewsOnStage, clientViewsInPresentationGrid]);
@@ -1525,7 +1525,7 @@ function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID
     };
 }
 
-function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, } = {}) {
+function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, videoGridGap = 8, } = {}) {
     const [containerBounds, setContainerBounds] = React.useState({ width: 0, height: 0 });
     const [clientAspectRatios, setClientAspectRatios] = React.useState({});
     const { clientViewsInGrid, clientViewsInPresentationGrid, clientViewsInSubgrid } = useGridParticipants({
@@ -1574,7 +1574,7 @@ function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLim
             isConstrained: false,
             roomBounds: containerFrame.bounds,
             videos: cellViewsVideoGrid,
-            videoGridGap: 0,
+            videoGridGap,
             presentationVideos: cellViewsInPresentationGrid,
             subgridVideos: cellViewsInSubgrid,
         });
@@ -1653,21 +1653,19 @@ function renderCellView({ cellView, onSetClientAspectRatio }) {
             return (React.createElement(GridVideoCellView, { aspectRatio: cellView.aspectRatio, participant: cellView.client, isPlaceholder: cellView.isPlaceholder, isSubgrid: cellView.isSubgrid, key: cellView.clientId, onSetClientAspectRatio: onSetClientAspectRatio }));
     }
 }
-function GridVideoCellView({ aspectRatio, participant, render, onSetClientAspectRatio }) {
+function GridVideoCellView({ aspectRatio, participant, render }) {
     const videoEl = React.useRef(null);
     const handleResize = React.useCallback(() => {
         const ar = videoEl.current && videoEl.current.captureAspectRatio();
-        if (ar && ar !== aspectRatio && (participant === null || participant === void 0 ? void 0 : participant.id)) {
-            onSetClientAspectRatio({ aspectRatio: ar, clientId: participant.id });
-        }
+        if (ar && ar !== aspectRatio && (participant === null || participant === void 0 ? void 0 : participant.id)) ;
     }, []);
     return (React.createElement("div", null, render ? (render()) : (participant === null || participant === void 0 ? void 0 : participant.stream) && participant.isVideoEnabled ? (React.createElement(VideoView, { ref: videoEl, stream: participant.stream, onVideoResize: handleResize, style: {
             borderRadius: "8px",
         } })) : (React.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true }))));
 }
-function Grid({ renderParticipant, stageParticipantLimit }) {
+function Grid({ renderParticipant, stageParticipantLimit, videoGridGap }) {
     const gridRef = React.useRef(null);
-    const { cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid, videoStage, setContainerBounds, setClientAspectRatios, } = useGrid({ activeVideosSubgridTrigger: 12, stageParticipantLimit });
+    const { cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid, videoStage, setContainerBounds, setClientAspectRatios, } = useGrid({ activeVideosSubgridTrigger: 12, stageParticipantLimit, videoGridGap });
     const presentationGridContent = React.useMemo(() => cellViewsInPresentationGrid.map((cellView) => renderCellView({
         cellView,
         onSetClientAspectRatio: ({ aspectRatio, clientId }) => setClientAspectRatios((prev) => (Object.assign(Object.assign({}, prev), { [clientId]: aspectRatio }))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whereby.com/browser-sdk",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Modules for integration Whereby video in web apps",
   "author": "Whereby AS",
   "license": "MIT",