@whereby.com/browser-sdk 3.1.0 → 3.2.0

package/dist/react/index.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { LocalMediaOptions, RemoteParticipant, LocalParticipant, Screenshare, ConnectionStatus, NotificationsEventEmitter, ClientView, ChatMessage as ChatMessage$1 } from '@whereby.com/core';
 import { RoleName } from '@whereby.com/media';
+import * as _radix_ui_react_popover from '@radix-ui/react-popover';
+import { PopoverProps } from '@radix-ui/react-popover';
 
 interface ProviderProps {
     children: React.ReactNode;
@@ -142,41 +144,31 @@ declare function useRoomConnection(roomUrl: string, roomConnectionOptions?: UseR
 
 declare function useLocalMedia(optionsOrStream?: UseLocalMediaOptions | MediaStream): UseLocalMediaResult;
 
-type Origin = {
-    top: number;
-    left: number;
+type GridCellSelfProps = {
+    participant: ClientView;
 };
-type Bounds = {
-    width: number;
-    height: number;
-};
-type CellView = {
-    aspectRatio?: number;
-    avatarSize?: number;
-    cellPaddings?: {
-        top: number;
-        right: number;
-    };
-    client?: ClientView;
-    clientId: string;
-    isDraggable?: boolean;
-    isPlaceholder?: boolean;
-    isSubgrid?: boolean;
-    type: string;
-};
-
+type GridCellProps = GridCellSelfProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const GridCell: React.ForwardRefExoticComponent<Omit<GridCellProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const GridVideoView: React.ForwardRefExoticComponent<Omit<VideoViewProps, "ref" | "stream"> & {
+    stream?: MediaStream | undefined;
+} & React.RefAttributes<WherebyVideoElement>>;
 interface GridProps {
-    renderParticipant?: ({ cell, participant, }: {
-        cell: {
-            clientId: string;
-            bounds: Bounds;
-            origin: Origin;
-        };
-        participant: CellView["client"];
+    renderParticipant?: ({ participant }: {
+        participant: ClientView;
     }) => React.ReactNode;
+    gridGap?: number;
     videoGridGap?: number;
+    enableSubgrid?: boolean;
     stageParticipantLimit?: number;
+    enableParticipantMenu?: boolean;
 }
-declare function Grid({ renderParticipant, stageParticipantLimit, videoGridGap }: GridProps): React.JSX.Element;
+declare function Grid({ renderParticipant, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableParticipantMenu, }: GridProps): React.JSX.Element;
+
+declare const ParticipantMenu: (props: PopoverProps) => React.JSX.Element;
+declare const ParticipantMenuContent: React.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_popover.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ParticipantMenuTrigger: React.ForwardRefExoticComponent<Omit<_radix_ui_react_popover.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ParticipantMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    participantAction?: "maximize" | "spotlight" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
 
-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 };
+export { type ChatMessageState as ChatMessage, GridCell, GridVideoView, type LocalParticipantState as LocalParticipant, ParticipantMenu, ParticipantMenuContent, ParticipantMenuItem, ParticipantMenuTrigger, 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

@@ -3,6 +3,7 @@ import { Provider as Provider$1, useDispatch, useSelector } from 'react-redux';
 import { createServices, createStore, selectCurrentSpeakerDeviceId, debounce, doRtcReportStreamResolution, selectChatMessages, selectCloudRecordingRaw, selectLocalParticipantRaw, selectLocalMediaStream, selectRemoteParticipants, selectScreenshares, selectRoomConnectionStatus, selectStreamingRaw, selectWaitingParticipants, selectNotificationsEmitter, selectSpotlightedClientViews, doAppStop, doSendChatMessage, doKnockRoom, doSetDisplayName, toggleCameraEnabled, toggleMicrophoneEnabled, toggleLowDataModeEnabled, doSetLocalStickyReaction, doRequestAudioEnable, doAcceptWaitingParticipant, doRejectWaitingParticipant, doStartCloudRecording, doStartScreenshare, doStopCloudRecording, doStopScreenshare, doAppStart, doLockRoom, doSpotlightParticipant, doRemoveSpotlight, doKickParticipant, doEndMeeting, selectCameraDeviceError, selectCameraDevices, selectCurrentCameraDeviceId, selectCurrentMicrophoneDeviceId, selectIsSettingCameraDevice, selectIsSettingMicrophoneDevice, selectIsLocalMediaStarting, selectMicrophoneDeviceError, selectMicrophoneDevices, selectSpeakerDevices, selectLocalMediaStartError, doStartLocalMedia, doStopLocalMedia, setCurrentCameraDeviceId, setCurrentMicrophoneDeviceId, setCurrentSpeakerDeviceId, selectAllClientViews, selectNumParticipants } from '@whereby.com/core';
 import { createSelector } from '@reduxjs/toolkit';
 import runes from 'runes';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 function Provider({ children }) {
     const services = createServices();
@@ -59,8 +60,8 @@ const VideoView = React.forwardRef((_a, ref) => {
                 if (!videoEl.current) {
                     return null;
                 }
-                const h = videoEl.current.clientHeight;
-                const w = videoEl.current.clientWidth;
+                const h = videoEl.current.videoHeight;
+                const w = videoEl.current.videoWidth;
                 if (w && h && w + h > 20) {
                     return w / h;
                 }
@@ -145,7 +146,7 @@ const selectRoomConnectionState = createSelector(selectChatMessages, selectCloud
     return state;
 });
 
-const browserSdkVersion = "3.1.0";
+const browserSdkVersion = "3.2.0";
 
 const defaultRoomConnectionOptions = {
     localMediaOptions: {
@@ -1468,13 +1469,16 @@ function makeVideoCellView({ aspectRatio, avatarSize, cellPaddings, client = und
 const STAGE_PARTICIPANT_LIMIT = 12;
 const ACTIVE_VIDEO_SUBGRID_TRIGGER = 12;
 
-function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, shouldShowSubgrid, spotlightedParticipants, }) {
+function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, shouldShowSubgrid, spotlightedParticipants, maximizedParticipant, }) {
     if (!shouldShowSubgrid) {
         return [];
     }
     const hasSpotlights = spotlightedParticipants.length > 0;
     const hasPresentationStage = hasSpotlights;
-    const notSpotlighted = clientViews.filter((client) => !client.isPresentation && !spotlightedParticipants.includes(client));
+    const notMaximized = maximizedParticipant
+        ? clientViews.filter((client) => client.id !== maximizedParticipant.id)
+        : 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;
     const unmutedVideos = notSpotlighted.filter((client) => !noVideoViews.includes(client) && client.isAudioEnabled);
@@ -1494,27 +1498,34 @@ function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, should
     }
     return noVideoViews;
 }
-function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID_TRIGGER, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, forceSubgrid = true, } = {}) {
+function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID_TRIGGER, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, forceSubgrid = true, enableSubgrid = true, maximizedParticipant, } = {}) {
     const allClientViews = useAppSelector(selectAllClientViews);
     const spotlightedParticipants = useAppSelector(selectSpotlightedClientViews);
     const numParticipants = useAppSelector(selectNumParticipants);
     const shouldShowSubgrid = React.useMemo(() => {
+        if (!enableSubgrid) {
+            return false;
+        }
         return forceSubgrid ? true : numParticipants > stageParticipantLimit;
-    }, [forceSubgrid, numParticipants, stageParticipantLimit]);
+    }, [forceSubgrid, numParticipants, stageParticipantLimit, enableSubgrid]);
     const clientViewsInSubgrid = React.useMemo(() => {
         return calculateSubgridViews({
             clientViews: allClientViews,
             activeVideosSubgridTrigger,
             shouldShowSubgrid,
             spotlightedParticipants,
+            maximizedParticipant,
         });
     }, [allClientViews, shouldShowSubgrid, activeVideosSubgridTrigger, spotlightedParticipants]);
     const clientViewsOnStage = React.useMemo(() => {
         return allClientViews.filter((client) => !clientViewsInSubgrid.includes(client));
     }, [allClientViews, clientViewsInSubgrid]);
     const clientViewsInPresentationGrid = React.useMemo(() => {
+        if (maximizedParticipant) {
+            return [maximizedParticipant];
+        }
         return spotlightedParticipants;
-    }, [spotlightedParticipants]);
+    }, [spotlightedParticipants, maximizedParticipant]);
     const clientViewsInGrid = React.useMemo(() => {
         return clientViewsOnStage.filter((client) => !clientViewsInPresentationGrid.includes(client));
     }, [clientViewsOnStage, clientViewsInPresentationGrid]);
@@ -1525,13 +1536,16 @@ function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID
     };
 }
 
-function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, videoGridGap = 8, } = {}) {
+function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, gridGap = 8, videoGridGap = 8, enableSubgrid = true, } = {}) {
     const [containerBounds, setContainerBounds] = React.useState({ width: 0, height: 0 });
     const [clientAspectRatios, setClientAspectRatios] = React.useState({});
+    const [maximizedParticipant, setMaximizedParticipant] = React.useState(null);
     const { clientViewsInGrid, clientViewsInPresentationGrid, clientViewsInSubgrid } = useGridParticipants({
         activeVideosSubgridTrigger,
         forceSubgrid,
         stageParticipantLimit,
+        enableSubgrid,
+        maximizedParticipant,
     });
     const cellViewsVideoGrid = React.useMemo(() => {
         return clientViewsInGrid.map((client) => {
@@ -1570,7 +1584,7 @@ function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLim
     const videoStage = React.useMemo(() => {
         return calculateLayout({
             frame: containerFrame,
-            gridGap: 8,
+            gridGap,
             isConstrained: false,
             roomBounds: containerFrame.bounds,
             videos: cellViewsVideoGrid,
@@ -1578,14 +1592,17 @@ function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLim
             presentationVideos: cellViewsInPresentationGrid,
             subgridVideos: cellViewsInSubgrid,
         });
-    }, [containerFrame, cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid]);
+    }, [containerFrame, cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid, gridGap, videoGridGap]);
     return {
         cellViewsVideoGrid,
         cellViewsInPresentationGrid,
         cellViewsInSubgrid,
+        clientAspectRatios,
         videoStage,
         setContainerBounds,
         setClientAspectRatios,
+        maximizedParticipant,
+        setMaximizedParticipant,
     };
 }
 
@@ -1647,36 +1664,200 @@ function VideoMutedIndicator({ avatarUrl, displayName, isSmallCell, withRoundedC
             React.createElement(Avatar, { variant: "square", avatarUrl: avatarUrl, name: displayName, size: isSmallCell ? 60 : 80 }))));
 }
 
-function renderCellView({ cellView, onSetClientAspectRatio }) {
-    switch (cellView.type) {
-        case "video":
-            return (React.createElement(GridVideoCellView, { aspectRatio: cellView.aspectRatio, participant: cellView.client, isPlaceholder: cellView.isPlaceholder, isSubgrid: cellView.isSubgrid, key: cellView.clientId, onSetClientAspectRatio: onSetClientAspectRatio }));
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverContent = React.forwardRef((_a, ref) => {
+    var { style, align = "center", sideOffset = 4 } = _a, props = __rest(_a, ["style", "align", "sideOffset"]);
+    return (React.createElement(PopoverPrimitive.Portal, null,
+        React.createElement(PopoverPrimitive.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, style: Object.assign({ width: "200px", backgroundColor: "#fff", border: "1px solid #e5e5e5", borderRadius: "0.375rem", boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)", color: "#333", fontSize: "14px", lineHeight: "1.5", padding: "16px", zIndex: 50, outline: "none" }, style) }, props))));
+});
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+const GridContext = React.createContext({});
+const GridCellContext = React.createContext({});
+const useGridCell = () => {
+    const gridContext = React.useContext(GridContext);
+    const gridCellContext = React.useContext(GridCellContext);
+    if (!gridCellContext) {
+        throw new Error("useGridCell must be used within a GridCell");
+    }
+    return Object.assign(Object.assign({}, gridContext), gridCellContext);
+};
+
+const ParticipantMenuContext = React.createContext({});
+const useParticipantMenu = () => {
+    const context = React.useContext(ParticipantMenuContext);
+    const gridCellContext = useGridCell();
+    if (!context) {
+        throw new Error("useParticipantMenu must be used within a ParticipantMenu");
+    }
+    return Object.assign(Object.assign({}, context), gridCellContext);
+};
+const ParticipantMenu = (props) => {
+    const { children } = props, rest = __rest(props, ["children"]);
+    const [open, setOpen] = React.useState(false);
+    return (React.createElement(ParticipantMenuContext.Provider, { value: { open, setOpen } },
+        React.createElement(Popover, Object.assign({}, rest, { open: open, onOpenChange: setOpen }), children)));
+};
+const ParticipantMenuContent = React.forwardRef((_a, ref) => {
+    var { children, style } = _a, props = __rest(_a, ["children", "style"]);
+    return (React.createElement(PopoverContent, Object.assign({ ref: ref, style: Object.assign({ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", minWidth: "180px", maxWidth: "300px", maxHeight: "100vh", overflowY: "auto", padding: 0 }, style) }, props), children));
+});
+ParticipantMenuContent.displayName = "ParticipantMenuContent";
+const ParticipantMenuTrigger = React.forwardRef((_a, ref) => {
+    var { children, style } = _a, props = __rest(_a, ["children", "style"]);
+    return (React.createElement(PopoverTrigger, Object.assign({ ref: ref, style: Object.assign({ position: "absolute", top: "10px", right: "20px", textDecoration: "none", whiteSpace: "nowrap", border: "none", cursor: "pointer" }, style) }, props), children));
+});
+ParticipantMenuTrigger.displayName = PopoverTrigger.displayName;
+const ParticipantMenuItem = React.forwardRef((_a, ref) => {
+    var { children, style, participantAction } = _a, props = __rest(_a, ["children", "style", "participantAction"]);
+    const { participant, setOpen, maximizedParticipant, setMaximizedParticipant } = useParticipantMenu();
+    const dispatch = useAppDispatch();
+    const spotlightedParticipants = useAppSelector(selectSpotlightedClientViews);
+    const isSpotlighted = spotlightedParticipants.find((p) => p.id === participant.id);
+    const isMaximized = (maximizedParticipant === null || maximizedParticipant === void 0 ? void 0 : maximizedParticipant.id) === participant.id;
+    let onClick;
+    switch (participantAction) {
+        case "maximize":
+            onClick = () => {
+                if (isMaximized) {
+                    setMaximizedParticipant(null);
+                }
+                else {
+                    setMaximizedParticipant(participant);
+                }
+                setOpen(false);
+            };
+            break;
+        case "spotlight":
+            onClick = () => {
+                if (isSpotlighted) {
+                    dispatch(doRemoveSpotlight({ id: participant.id }));
+                }
+                else {
+                    dispatch(doSpotlightParticipant({ id: participant.id }));
+                }
+                setOpen(false);
+            };
+            break;
+    }
+    return (React.createElement("button", Object.assign({ ref: ref, role: "menuitem", tabIndex: -1, onClick: onClick !== null && onClick !== void 0 ? onClick : props.onClick, style: Object.assign({ alignItems: "stretch", backgroundColor: "transparent", border: "none", cursor: "pointer", display: "flex", height: "40px", lineHeight: "40px", minWidth: "140px", padding: "0 12px", textAlign: "left", textDecoration: "none", whiteSpace: "nowrap", width: "100%" }, style) }, props), children));
+});
+ParticipantMenuItem.displayName = "ParticipantMenuItem";
+
+function EllipsisIcon(props) {
+    return (React.createElement("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("g", null,
+            React.createElement("circle", { cx: "6", cy: "12", r: "2" }),
+            React.createElement("circle", { cx: "12", cy: "12", r: "2" }),
+            React.createElement("circle", { cx: "18", cy: "12", r: "2" }))));
+}
+
+function MaximizeOnIcon(props) {
+    return (React.createElement("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m13.875 3c0 .62132.5037 1.125 1.125 1.125h3.284l-4.0795 4.0795c-.4393.43934-.4393 1.15166 0 1.591.4393.4393 1.1517.4393 1.591 0l4.0795-4.07951v3.28401c0 .62132.5037 1.125 1.125 1.125s1.125-.50368 1.125-1.125v-6c0-.15254-.0304-.29799-.0854-.43063-.0536-.12968-.1326-.25135-.2368-.35749l-.0147-.01469c-.203-.19928-.4812-.32219-.7881-.32219h-6c-.6213 0-1.125.50368-1.125 1.125zm-9.75 12c0-.6213-.50368-1.125-1.125-1.125s-1.125.5037-1.125 1.125v6c0 .3069.12291.5851.32219.7881.00486.005.00975.0099.01469.0147.10614.1042.22781.1832.35749.2368.13264.055.27809.0854.43063.0854h6c.62132 0 1.125-.5037 1.125-1.125s-.50368-1.125-1.125-1.125h-3.28401l4.07951-4.0795c.4393-.4393.4393-1.1517 0-1.591-.43934-.4393-1.15166-.4393-1.591 0l-4.0795 4.0795z" })));
+}
+
+function SpotlightIcon(props) {
+    return (React.createElement("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m15.241.146691c-.1011-.1955882-.3809-.1955879-.482 0l-1.1063 2.139639c-.0258.04991-.0665.09058-.1164.11639l-2.1396 1.10629c-.1956.10113-.1956.38085 0 .48198l2.1396 1.10629c.0499.02581.0906.06648.1164.11639l1.1063 2.13964c.1011.19559.3809.19559.482 0l1.1063-2.13964c.0258-.04991.0665-.09058.1164-.11639l2.1396-1.10629c.1956-.10113.1956-.38085 0-.48198l-2.1396-1.10629c-.0499-.02581-.0906-.06648-.1164-.11639zm-13.741 2.900259v14.67495c0 .0511.00116.1018.00345.1523-.00229.0418-.00345.0837-.00345.1258 0 .5674.21005 1.1103.59339 1.6103.24265.3472.55042.6455.90566.8773 1.61225 1.213 4.36988 2.0124 7.50095 2.0124 4.3315 0 7.9484-1.53 8.8068-3.5681.0651-.1472.1148-.3024.1455-.4658.0315-.1532.0477-.3087.0477-.4661 0-.6032-.2374-1.1788-.668-1.7045-.1377-.1975-.2995-.4017-.4877-.6127l-14.22219-13.74809c-.28845-.27884-.67396-.43471-1.07516-.43471-.85436 0-1.54695.69259-1.54695 1.54695zm19.2646 4.59631c.0988-.19101.372-.19101.4708 0l.8546 1.65303c.0253.04874.065.08846.1137.11366l1.653.85465c.1911.0988.1911.372 0 .4708l-1.653.8546c-.0487.0253-.0884.065-.1137.1137l-.8546 1.653c-.0988.1911-.372.1911-.4708 0l-.8546-1.653c-.0253-.0487-.065-.0884-.1137-.1137l-1.653-.8546c-.1911-.0988-.1911-.372 0-.4708l1.653-.85465c.0487-.0252.0884-.06492.1137-.11366zm-3.2651 10.35684c0 .0769-.1144.6851-1.5305 1.3931-1.2964.6482-3.2274 1.1069-5.4695 1.1069s-4.17308-.4587-5.46952-1.1069c-1.41607-.708-1.53047-1.3162-1.53047-1.3931 0-.077.1144-.6851 1.53047-1.3932 1.29644-.6482 3.22742-1.1068 5.46952-1.1068s4.1731.4586 5.4695 1.1068c1.4161.7081 1.5305 1.3162 1.5305 1.3932z" })));
+}
+
+function DefaultParticipantMenu({ participant }) {
+    const spotlightedParticipants = useAppSelector(selectSpotlightedClientViews);
+    const isSpotlighted = spotlightedParticipants.find((p) => p.id === participant.id);
+    const { isHovered, maximizedParticipant } = useGridCell();
+    const isMaximized = (maximizedParticipant === null || maximizedParticipant === void 0 ? void 0 : maximizedParticipant.id) === participant.id;
+    if (!isHovered) {
+        return null;
     }
+    return (React.createElement(ParticipantMenu, null,
+        React.createElement(ParticipantMenuTrigger, { style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                backgroundColor: "#fff",
+                borderRadius: "6px",
+                padding: "4px",
+            } },
+            React.createElement(EllipsisIcon, { height: 20, width: 20, transform: "rotate(90)" })),
+        React.createElement(ParticipantMenuContent, null,
+            React.createElement(ParticipantMenuItem, { participantAction: "maximize", style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "10px",
+                } },
+                React.createElement(MaximizeOnIcon, { height: 16, width: 16 }),
+                isMaximized ? "Minimize" : "Maximize"),
+            React.createElement(ParticipantMenuItem, { participantAction: "spotlight", style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "10px",
+                } },
+                React.createElement(SpotlightIcon, { height: 16, width: 16 }),
+                isSpotlighted ? "Remove spotlight" : "Spotlight"))));
 }
-function GridVideoCellView({ aspectRatio, participant, render }) {
+
+const GridCell = React.forwardRef(({ className, participant, children }, ref) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const handleMouseEnter = React.useCallback(() => {
+        setIsHovered(true);
+    }, []);
+    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 }, children)));
+});
+GridCell.displayName = "GridCell";
+const GridVideoView = React.forwardRef((_a, ref) => {
+    var { stream, style } = _a, rest = __rest(_a, ["stream", "style"]);
     const videoEl = React.useRef(null);
+    const { onSetClientAspectRatio, clientAspectRatios, participant } = useGridCell();
+    if (!participant)
+        return null;
+    const aspectRatio = clientAspectRatios[participant.id];
+    React.useImperativeHandle(ref, () => {
+        return videoEl.current;
+    });
     const handleResize = React.useCallback(() => {
         const ar = videoEl.current && videoEl.current.captureAspectRatio();
-        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 }))));
+        if (ar && ar !== aspectRatio && participant.id) {
+            onSetClientAspectRatio({ aspectRatio: ar, clientId: participant.id });
+        }
+    }, [clientAspectRatios, participant.id, onSetClientAspectRatio]);
+    const s = stream || participant.stream;
+    if (!s) {
+        return null;
+    }
+    return (React.createElement(VideoView, Object.assign({ ref: videoEl, style: Object.assign({ borderRadius: "8px" }, style) }, rest, { stream: s, onVideoResize: handleResize })));
+});
+GridVideoView.displayName = "GridVideoView";
+function renderCellView({ cellView, enableParticipantMenu, render }) {
+    const participant = cellView.client;
+    if (!participant) {
+        return undefined;
+    }
+    switch (cellView.type) {
+        case "video":
+            return (React.createElement(GridCell, { participant: participant }, participant.isVideoEnabled ? (React.createElement(React.Fragment, null, render ? (render({ participant })) : (React.createElement(React.Fragment, null,
+                React.createElement(GridVideoView, null),
+                enableParticipantMenu ? (React.createElement(DefaultParticipantMenu, { participant: participant })) : null)))) : (React.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true }))));
+    }
 }
-function Grid({ renderParticipant, stageParticipantLimit, videoGridGap }) {
+function Grid({ renderParticipant, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableParticipantMenu, }) {
     const gridRef = React.useRef(null);
-    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 }))),
-    })), [cellViewsInPresentationGrid]);
-    const gridContent = React.useMemo(() => cellViewsVideoGrid.map((cellView) => renderCellView({
-        cellView,
-        onSetClientAspectRatio: ({ aspectRatio, clientId }) => setClientAspectRatios((prev) => (Object.assign(Object.assign({}, prev), { [clientId]: aspectRatio }))),
-    })), [cellViewsVideoGrid]);
+    const { cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid, clientAspectRatios, videoStage, setContainerBounds, setClientAspectRatios, maximizedParticipant, setMaximizedParticipant, } = useGrid({ activeVideosSubgridTrigger: 12, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid });
+    const handleSetClientAspectRatio = React.useCallback(({ aspectRatio, clientId }) => {
+        setClientAspectRatios((prev) => (Object.assign(Object.assign({}, prev), { [clientId]: aspectRatio })));
+    }, [setClientAspectRatios]);
+    const presentationGridContent = React.useMemo(() => cellViewsInPresentationGrid.map((cellView) => renderCellView(Object.assign({ cellView,
+        enableParticipantMenu }, (renderParticipant ? { render: ({ participant }) => renderParticipant({ participant }) } : {})))), [cellViewsInPresentationGrid]);
+    const gridContent = React.useMemo(() => cellViewsVideoGrid.map((cellView) => renderCellView(Object.assign({ cellView,
+        enableParticipantMenu }, (renderParticipant ? { render: ({ participant }) => renderParticipant({ participant }) } : {})))), [cellViewsVideoGrid]);
     const subgridContent = React.useMemo(() => cellViewsInSubgrid.map((cellView) => renderCellView({
         cellView,
-        onSetClientAspectRatio: ({ aspectRatio, clientId }) => setClientAspectRatios((prev) => (Object.assign(Object.assign({}, prev), { [clientId]: aspectRatio }))),
+        enableParticipantMenu,
     })), [cellViewsInSubgrid]);
     React.useEffect(() => {
         if (!gridRef.current) {
@@ -1694,12 +1875,21 @@ function Grid({ renderParticipant, stageParticipantLimit, videoGridGap }) {
             resizeObserver.disconnect();
         };
     }, []);
-    return (React.createElement("div", { ref: gridRef, style: {
-            width: "100%",
-            height: "100%",
-            position: "relative",
+    return (React.createElement(GridContext.Provider, { value: {
+            onSetClientAspectRatio: handleSetClientAspectRatio,
+            cellViewsVideoGrid,
+            cellViewsInPresentationGrid,
+            cellViewsInSubgrid,
+            clientAspectRatios,
+            maximizedParticipant,
+            setMaximizedParticipant,
         } },
-        React.createElement(VideoStageLayout, { layoutVideoStage: videoStage, presentationGridContent: presentationGridContent, gridContent: gridContent, subgridContent: subgridContent })));
+        React.createElement("div", { ref: gridRef, style: {
+                width: "100%",
+                height: "100%",
+                position: "relative",
+            } },
+            React.createElement(VideoStageLayout, { layoutVideoStage: videoStage, presentationGridContent: presentationGridContent, gridContent: gridContent, subgridContent: subgridContent }))));
 }
 
-export { Grid as VideoGrid, VideoView, Provider as WherebyProvider, useLocalMedia, useRoomConnection };
+export { GridCell, GridVideoView, ParticipantMenu, ParticipantMenuContent, ParticipantMenuItem, ParticipantMenuTrigger, Grid as VideoGrid, VideoView, Provider as WherebyProvider, useLocalMedia, useRoomConnection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whereby.com/browser-sdk",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Modules for integration Whereby video in web apps",
   "author": "Whereby AS",
   "license": "MIT",
@@ -72,8 +72,10 @@
     "yalc": "^1.0.0-pre.53"
   },
   "dependencies": {
+    "@radix-ui/react-popover": "^1.0.7",
     "@reduxjs/toolkit": "^2.2.3",
-    "@whereby.com/core": "0.16.3",
+    "@whereby.com/core": "0.17.0",
+    "clsx": "^2.1.1",
     "heresy": "^1.0.4",
     "react-redux": "^9.1.1",
     "runes": "^0.4.3"