@whereby.com/browser-sdk 3.31.2 → 3.33.0

package/dist/react/index.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { WherebyClient, CURRENT_SPEAKER_CHANGED, debounce } from '@whereby.com/core';
-export { ACCEPTED_FILE_TYPES, MAX_FILES_PER_UPLOAD, MAX_FILE_SIZE, getUsableCameraEffectPresets, isAudioDenoiserSupported } from '@whereby.com/core';
+import { WherebyClient, CURRENT_SPEAKER_CHANGED, debounce, ROOM_INTEGRATION_PICKER_MESSAGES, roomIntegrationPickerUrl } from '@whereby.com/core';
+export { ACCEPTED_FILE_TYPES, MAX_FILES_PER_UPLOAD, MAX_FILE_SIZE, ROOM_INTEGRATION_PICKER_MESSAGES, getUsableCameraEffectPresets, isAudioDenoiserSupported, roomIntegrationContent, roomIntegrationContentTagName, roomIntegrationPickerUrl } from '@whereby.com/core';
 import runes from 'runes';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
@@ -151,7 +151,7 @@ const VideoView = React.forwardRef((_a, ref) => {
 });
 VideoView.displayName = "VideoView";
 
-const browserSdkVersion = "3.31.2";
+const browserSdkVersion = "3.33.0";
 
 const initialState$1 = {
     chatMessages: [],
@@ -178,10 +178,19 @@ const initialState$1 = {
         participantsInCurrentGroup: [],
         broadcastingParticipants: [],
     },
+    isAudioOnlyModeEnabled: false,
     isCameraEnabled: false,
     isMicrophoneEnabled: false,
     localParticipant: undefined,
     remoteParticipants: [],
+    roomIntegrations: {
+        hasFetched: false,
+        isFetching: false,
+        error: null,
+        embeddable: [],
+        enabled: [],
+        running: [],
+    },
     screenshares: [],
     connectionStatus: "ready",
     connectionError: null,
@@ -243,6 +252,7 @@ function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectio
     const toggleMicrophone = React.useCallback((enabled) => client.toggleMicrophone(enabled), [client]);
     const toggleHdMode = React.useCallback((enabled) => client.toggleHdMode(enabled), [client]);
     const toggleLowDataMode = React.useCallback((enabled) => client.toggleLowDataMode(enabled), [client]);
+    const toggleAudioOnlyMode = React.useCallback((enabled, options) => client.toggleAudioOnlyMode(enabled, options), [client]);
     const toggleWidescreenMode = React.useCallback((enabled) => client.toggleWidescreenMode(enabled), [client]);
     const toggleRaiseHand = React.useCallback((enabled) => client.toggleRaiseHand(enabled), [client]);
     const askToSpeak = React.useCallback((participantId) => client.askToSpeak(participantId), [client]);
@@ -268,6 +278,9 @@ function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectio
     const endMeeting = React.useCallback((stayBehind) => client.endMeeting(stayBehind), [client]);
     const joinBreakoutGroup = React.useCallback((group) => client.joinBreakoutGroup(group), [client]);
     const joinBreakoutMainRoom = React.useCallback(() => client.joinBreakoutMainRoom(), [client]);
+    const startRoomIntegration = React.useCallback((options) => client.startRoomIntegration(options), [client]);
+    const stopRoomIntegration = React.useCallback((options) => client.stopRoomIntegration(options), [client]);
+    const updateRoomIntegrationProps = React.useCallback((options) => client.updateRoomIntegrationProps(options), [client]);
     const startBreakoutSession = React.useCallback((options) => client.startBreakoutSession(options), [client]);
     const updateBreakoutSession = React.useCallback((options) => client.updateBreakoutSession(options), [client]);
     const stopBreakoutSession = React.useCallback(() => client.stopBreakoutSession(), [client]);
@@ -333,11 +346,15 @@ function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectio
             toggleRaiseHand,
             toggleHdMode,
             toggleLowDataMode,
+            toggleAudioOnlyMode,
             toggleWidescreenMode,
             spotlightParticipant,
             removeSpotlight,
             joinBreakoutGroup,
             joinBreakoutMainRoom,
+            startRoomIntegration,
+            stopRoomIntegration,
+            updateRoomIntegrationProps,
             startBreakoutSession,
             updateBreakoutSession,
             stopBreakoutSession,
@@ -534,6 +551,9 @@ function VideoCell(_a) {
         React.createElement("div", Object.assign({ style: contentStyle }, rest), React.cloneElement(children, { contentWidth, contentHeight, withRoundedCorners, withShadow }))));
 }
 
+const IntegrationCell = ({ cellId, children, isHiddenCell = false }) => (React.createElement("div", { "data-cell-id": cellId, "aria-hidden": isHiddenCell || undefined, style: { height: "100%", width: "100%" } }, children));
+IntegrationCell.displayName = "IntegrationCell";
+
 function generateStylesFromFrame({ origin, bounds }) {
     return {
         top: Math.round(origin.top),
@@ -549,7 +569,10 @@ function renderVideoCell({ cell, child, clientId, style = {}, withRoundedCorners
 function renderSubgridVideoCells({ content, stageLayout, withRoundedCorners, withShadow, }) {
     const cells = stageLayout.subgrid.cells;
     return content.map((child, index) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
+        if (!child) {
+            return null;
+        }
         const cell = cells[index];
         const style = { height: Math.round(cell.bounds.height), width: Math.round(cell.bounds.width), transform: "" };
         const origin = {
@@ -557,9 +580,9 @@ function renderSubgridVideoCells({ content, stageLayout, withRoundedCorners, wit
             left: stageLayout.subgrid.origin.left + cell.origin.left,
         };
         style.transform = `translate3d(${Math.round(origin.left)}px, ${Math.round(origin.top)}px, 0)`;
-        const clientId = (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.participant) === null || _b === void 0 ? void 0 : _b.id;
-        const leftPaddings = ((_c = cell.paddings) === null || _c === void 0 ? void 0 : _c.left) || 0;
-        const rightPaddings = ((_d = cell.paddings) === null || _d === void 0 ? void 0 : _d.right) || 0;
+        const clientId = ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.cellId) || ((_c = (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.participant) === null || _c === void 0 ? void 0 : _c.id);
+        const leftPaddings = ((_d = cell.paddings) === null || _d === void 0 ? void 0 : _d.left) || 0;
+        const rightPaddings = ((_e = cell.paddings) === null || _e === void 0 ? void 0 : _e.right) || 0;
         const childWithProps = React.cloneElement(child, {
             avatarSize: cell.bounds.width - leftPaddings - rightPaddings,
             canZoom: false,
@@ -583,8 +606,8 @@ function renderPresentationGridVideoCells({ content, isConstrained, stageLayout,
     var _a;
     const cells = ((_a = stageLayout.presentationGrid) === null || _a === void 0 ? void 0 : _a.cells) || [];
     return content.map((child, index) => {
-        var _a, _b;
-        if (!stageLayout.presentationGrid) {
+        var _a, _b, _c, _d;
+        if (!child || !stageLayout.presentationGrid) {
             return null;
         }
         const cell = cells[index];
@@ -599,10 +622,10 @@ function renderPresentationGridVideoCells({ content, isConstrained, stageLayout,
             height: Math.round(cell.bounds.height),
             transform: `translate3d(${Math.round(origin.left)}px, ${Math.round(origin.top)}px, 0)`,
         };
-        const clientId = (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.participant) === null || _b === void 0 ? void 0 : _b.id;
+        const clientId = ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.cellId) || ((_c = (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.participant) === null || _c === void 0 ? void 0 : _c.id);
         const childWithProps = React.cloneElement(child, {
             isSmallCell: cell.isSmallCell,
-            isZoomedByDefault: !!isConstrained && !(child === null || child === void 0 ? void 0 : child.props.participant.isPresentation),
+            isZoomedByDefault: !!isConstrained && !!((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.participant) && !child.props.participant.isPresentation,
             canZoom: !!isConstrained,
             key: clientId || `presentation-${index}`,
         });
@@ -620,8 +643,8 @@ function renderGridVideoCells({ content, isConstrained, stageLayout, withRounded
     var _a;
     const cells = ((_a = stageLayout.videoGrid) === null || _a === void 0 ? void 0 : _a.cells) || [];
     const gridVideoCells = content.map((child, index) => {
-        var _a, _b;
-        if (!stageLayout.videoGrid) {
+        var _a, _b, _c, _d;
+        if (!child || !stageLayout.videoGrid) {
             return null;
         }
         const cell = cells[index];
@@ -634,10 +657,10 @@ function renderGridVideoCells({ content, isConstrained, stageLayout, withRounded
             height: Math.round(cell.bounds.height),
             transform: `translate3d(${Math.round(origin.left)}px, ${Math.round(origin.top)}px, 0)`,
         };
-        const clientId = (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.participant) === null || _b === void 0 ? void 0 : _b.id;
+        const clientId = ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.cellId) || ((_c = (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.participant) === null || _c === void 0 ? void 0 : _c.id);
         const childWithProps = React.cloneElement(child, {
             isSmallCell: cell.isSmallCell,
-            isZoomedByDefault: !!isConstrained && !(child === null || child === void 0 ? void 0 : child.props.participant.isPresentation),
+            isZoomedByDefault: !!isConstrained && !!((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.participant) && !child.props.participant.isPresentation,
             canZoom: !!isConstrained,
             key: clientId || `video-${index}`,
         });
@@ -685,7 +708,33 @@ function renderFloatingVideoCell({ content, containerFrame, stageLayout, withRou
         withShadow: false,
     });
 }
-function VideoStageLayout({ containerFrame, debug = false, featureRoundedCornersOff = false, floatingContent, gridContent = [], isConstrained = false, layoutOverflowBackdropFrame = makeFrame(), layoutVideoStage: stageLayout, presentationGridContent = [], subgridContent = [], }) {
+const HIDDEN_CELL_STYLE = {
+    width: 1,
+    height: 1,
+    opacity: 0,
+    overflow: "hidden",
+    pointerEvents: "none",
+};
+function renderHiddenCells({ content }) {
+    const cell = { bounds: { width: 1, height: 1 }, aspectRatio: 1 };
+    return content.map((child, index) => {
+        var _a;
+        if (!child) {
+            return null;
+        }
+        const clientId = ((_a = child.props) === null || _a === void 0 ? void 0 : _a.cellId) || `hidden-${index}`;
+        const childWithProps = React.cloneElement(child, { isHiddenCell: true, key: clientId });
+        return renderVideoCell({ cell, child: childWithProps, clientId, style: HIDDEN_CELL_STYLE });
+    });
+}
+function withIntegrationCellsFirst(cells) {
+    const isIntegrationCell = (cell) => { var _a, _b; return ((_b = (_a = cell === null || cell === void 0 ? void 0 : cell.props) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.type) === IntegrationCell; };
+    const integrationCells = cells
+        .filter(isIntegrationCell)
+        .sort((a, b) => String(a === null || a === void 0 ? void 0 : a.key).localeCompare(String(b === null || b === void 0 ? void 0 : b.key)));
+    return [...integrationCells, ...cells.filter((cell) => !isIntegrationCell(cell))];
+}
+function VideoStageLayout({ containerFrame, debug = false, featureRoundedCornersOff = false, floatingContent, gridContent = [], isConstrained = false, layoutOverflowBackdropFrame = makeFrame(), layoutVideoStage: stageLayout, presentationGridContent = [], subgridContent = [], hiddenContent = [], }) {
     const withRoundedCorners = !featureRoundedCornersOff && !isConstrained;
     const cells = [];
     if (gridContent.length) {
@@ -722,16 +771,221 @@ function VideoStageLayout({ containerFrame, debug = false, featureRoundedCorners
             withShadow: true,
         }));
     }
+    if (hiddenContent.length) {
+        cells.push(...renderHiddenCells({ content: hiddenContent }));
+    }
     return (React.createElement("div", { key: "video-stage-layout", style: {
             width: "100%",
             height: "100%",
             position: "relative",
         } },
         hasBounds(layoutOverflowBackdropFrame.bounds) && (React.createElement("div", { style: generateStylesFromFrame(layoutOverflowBackdropFrame) })),
-        cells,
+        withIntegrationCellsFirst(cells),
         debug && (React.createElement(React.Fragment, null))));
 }
 
+function useIframeContract(ref, hookName, enabled) {
+    React.useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const timer = setTimeout(() => {
+            const frame = ref.current;
+            if (!frame) {
+                console.warn(`${hookName}: iframeProps.ref was never attached. Spread iframeProps onto the ` +
+                    `<iframe> you render — without the ref the hook cannot tell which window is ` +
+                    `answering, so nothing will ever arrive.`);
+                return;
+            }
+            if (frame.hasAttribute("sandbox")) {
+                console.warn(`${hookName}: the iframe has a sandbox attribute. Some integrations open their ` +
+                    `own window to sign in, which a sandbox without allow-popups blocks silently.`);
+            }
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [ref, hookName, enabled]);
+}
+
+const HOST_TO_FRAME = {
+    PROPS: "whereby:props",
+    SET_VOLUME: "whereby:setVolume",
+    GET_VOLUME: "whereby:getVolume",
+};
+const FRAME_TO_HOST = {
+    FRAME_READY: "whereby:frameReady",
+    UPDATE_PROPS: "whereby:updateProps",
+    CONTENT_READY: "whereby:contentReady",
+    CLOSE: "whereby:close",
+    AUDIO_OVERRIDE: "whereby:audioOverride",
+    VOLUME: "whereby:volume",
+};
+const DEFAULT_ALLOW$1 = "autoplay; fullscreen; encrypted-media; picture-in-picture";
+const VOLUME_REQUEST_TIMEOUT = 2000;
+function outboundProps(session) {
+    return Object.assign(Object.assign({}, session.props), { ispresenter: session.isPresenter, presenterdisplayname: session.presenterDisplayName, roomintegrationsessionid: session.roomIntegrationSessionId, breakoutgroupid: session.breakoutGroupId });
+}
+function diffProps(next, previous) {
+    if (!previous) {
+        return next;
+    }
+    return Object.keys(next).reduce((patch, key) => {
+        if (previous[key] !== next[key]) {
+            patch[key] = next[key];
+        }
+        return patch;
+    }, {});
+}
+function useRoomIntegrationView({ session, onAudioOverride, onContentReady, allow = DEFAULT_ALLOW$1, title, }) {
+    var _a;
+    const client = (_a = React.useContext(WherebyContext)) === null || _a === void 0 ? void 0 : _a.getRoomConnection();
+    const iframeRef = React.useRef(null);
+    const lastSentRef = React.useRef(null);
+    const isFrameReadyRef = React.useRef(false);
+    const volumeRequestsRef = React.useRef(new Map());
+    const nextRequestIdRef = React.useRef(0);
+    const sessionRef = React.useRef(session);
+    const onAudioOverrideRef = React.useRef(onAudioOverride);
+    const onContentReadyRef = React.useRef(onContentReady);
+    sessionRef.current = session;
+    onAudioOverrideRef.current = onAudioOverride;
+    onContentReadyRef.current = onContentReady;
+    const { webview } = session.integration;
+    const { roomIntegrationSessionId } = session;
+    const frameOrigin = React.useMemo(() => {
+        try {
+            return new URL(webview).origin;
+        }
+        catch (_a) {
+            console.warn(`useRoomIntegrationView: unusable webview url ${webview}`);
+            return null;
+        }
+    }, [webview]);
+    const src = React.useMemo(() => {
+        if (!frameOrigin) {
+            return null;
+        }
+        const url = new URL(webview);
+        url.searchParams.set("parentOrigin", window.location.origin);
+        url.searchParams.set("roomintegrationsessionid", roomIntegrationSessionId);
+        return url.href;
+    }, [webview, frameOrigin, roomIntegrationSessionId]);
+    const post = React.useCallback((type, payload) => {
+        var _a;
+        const frameWindow = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow;
+        if (!frameWindow || !frameOrigin) {
+            return;
+        }
+        frameWindow.postMessage({ type, payload }, frameOrigin);
+    }, [frameOrigin]);
+    React.useEffect(() => {
+        isFrameReadyRef.current = false;
+        lastSentRef.current = null;
+    }, [src]);
+    React.useEffect(() => {
+        if (!frameOrigin) {
+            return;
+        }
+        const handleMessage = (event) => {
+            var _a, _b, _c, _d;
+            if (event.origin !== frameOrigin || event.source !== ((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
+                return;
+            }
+            const { type, payload } = event.data || {};
+            const currentSession = sessionRef.current;
+            switch (type) {
+                case FRAME_TO_HOST.FRAME_READY: {
+                    const props = outboundProps(currentSession);
+                    isFrameReadyRef.current = true;
+                    lastSentRef.current = props;
+                    post(HOST_TO_FRAME.PROPS, props);
+                    break;
+                }
+                case FRAME_TO_HOST.UPDATE_PROPS: {
+                    if (payload === null || payload === void 0 ? void 0 : payload.props) {
+                        client === null || client === void 0 ? void 0 : client.updateRoomIntegrationProps({
+                            roomIntegrationSessionId: currentSession.roomIntegrationSessionId,
+                            props: payload.props,
+                        });
+                    }
+                    break;
+                }
+                case FRAME_TO_HOST.CLOSE: {
+                    if (currentSession.canStop) {
+                        client === null || client === void 0 ? void 0 : client.stopRoomIntegration({
+                            roomIntegrationSessionId: currentSession.roomIntegrationSessionId,
+                            intent: "end",
+                        });
+                    }
+                    break;
+                }
+                case FRAME_TO_HOST.AUDIO_OVERRIDE: {
+                    (_b = onAudioOverrideRef.current) === null || _b === void 0 ? void 0 : _b.call(onAudioOverrideRef, (_c = payload === null || payload === void 0 ? void 0 : payload.enabled) !== null && _c !== void 0 ? _c : null);
+                    break;
+                }
+                case FRAME_TO_HOST.CONTENT_READY: {
+                    (_d = onContentReadyRef.current) === null || _d === void 0 ? void 0 : _d.call(onContentReadyRef);
+                    break;
+                }
+                case FRAME_TO_HOST.VOLUME: {
+                    const resolve = volumeRequestsRef.current.get(payload === null || payload === void 0 ? void 0 : payload.requestId);
+                    if (resolve) {
+                        volumeRequestsRef.current.delete(payload.requestId);
+                        resolve(payload.volume);
+                    }
+                    break;
+                }
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, [frameOrigin, client, post]);
+    const serializedProps = JSON.stringify(outboundProps(session));
+    React.useEffect(() => {
+        if (!isFrameReadyRef.current) {
+            return;
+        }
+        const props = outboundProps(sessionRef.current);
+        const patch = diffProps(props, lastSentRef.current);
+        lastSentRef.current = props;
+        if (Object.keys(patch).length) {
+            post(HOST_TO_FRAME.PROPS, patch);
+        }
+    }, [serializedProps, post]);
+    const setVolume = React.useCallback((volume) => post(HOST_TO_FRAME.SET_VOLUME, { volume }), [post]);
+    const getVolume = React.useCallback(() => new Promise((resolve, reject) => {
+        const requestId = ++nextRequestIdRef.current;
+        const requests = volumeRequestsRef.current;
+        const timer = setTimeout(() => {
+            requests.delete(requestId);
+            reject(new Error("Timed out reading volume from the room integration"));
+        }, VOLUME_REQUEST_TIMEOUT);
+        requests.set(requestId, (volume) => {
+            clearTimeout(timer);
+            resolve(volume);
+        });
+        post(HOST_TO_FRAME.GET_VOLUME, { requestId });
+    }), [post]);
+    useIframeContract(iframeRef, "useRoomIntegrationView", !!src);
+    return {
+        iframeProps: src
+            ? {
+                ref: iframeRef,
+                src,
+                title: title || session.integration.title,
+                allow,
+            }
+            : null,
+        getVolume,
+        setVolume,
+    };
+}
+
+const IFRAME_STYLE = { border: "none", width: "100%", height: "100%" };
+function DefaultIntegrationView({ session }) {
+    const { iframeProps } = useRoomIntegrationView({ session });
+    return iframeProps ? React.createElement("iframe", Object.assign({}, iframeProps, { allowFullScreen: true, style: IFRAME_STYLE })) : null;
+}
+
 const WIDE_AR = 16 / 9;
 const NORMAL_AR = 4 / 3;
 const clamp = ({ value, min, max }) => Math.min(Math.max(value, min), max);
@@ -1787,6 +2041,7 @@ function makeVideoCellView({ aspectRatio, avatarSize, cellPaddings, client = und
         avatarSize,
         cellPaddings,
         client,
+        cellId: (client === null || client === void 0 ? void 0 : client.id) || "",
         clientId: (client === null || client === void 0 ? void 0 : client.id) || "",
         isDraggable,
         isPlaceholder,
@@ -1794,20 +2049,38 @@ function makeVideoCellView({ aspectRatio, avatarSize, cellPaddings, client = und
         type: "video",
     };
 }
+function integrationAspectRatio(session) {
+    var _a;
+    const reported = Number((_a = session.props) === null || _a === void 0 ? void 0 : _a.aspectratio);
+    return isFinite(reported) && reported > 0 ? reported : undefined;
+}
+function roomIntegrationCellId(session) {
+    return `room-integration:${session.roomIntegrationSessionId}`;
+}
+function makeIntegrationCellView({ session, isDraggable = false, isSubgrid = false, }) {
+    const cellId = roomIntegrationCellId(session);
+    return {
+        aspectRatio: integrationAspectRatio(session) || 16 / 9,
+        cellId,
+        clientId: cellId,
+        isDraggable,
+        isSubgrid,
+        session,
+        type: "integration",
+    };
+}
 
 const STAGE_PARTICIPANT_LIMIT = 12;
 const ACTIVE_VIDEO_SUBGRID_TRIGGER = 12;
 const ACTIVE_VIDEOS_PHONE_LIMIT = 24;
 
-function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, shouldShowSubgrid, spotlightedParticipants, maximizedParticipant, isPhoneResolution, }) {
+function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, shouldShowSubgrid, spotlightedParticipants, maximizedCellId, hasStagedIntegration = false, isPhoneResolution, }) {
     if (!shouldShowSubgrid) {
         return [];
     }
     const hasSpotlights = spotlightedParticipants.length > 0;
-    const hasPresentationStage = hasSpotlights;
-    const notMaximized = maximizedParticipant
-        ? clientViews.filter((client) => client.id !== maximizedParticipant.id)
-        : clientViews;
+    const hasPresentationStage = hasSpotlights || hasStagedIntegration;
+    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;
@@ -1838,7 +2111,8 @@ function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, should
     }
     return noVideoViews;
 }
-function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID_TRIGGER, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, forceSubgrid = true, enableSubgrid = true, maximizedParticipant, floatingParticipant, isConstrained = false, } = {}) {
+const NO_INTEGRATIONS = [];
+function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID_TRIGGER, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, forceSubgrid = true, enableSubgrid = true, maximizedCellId, floatingCellId, isConstrained = false, includeIntegrations = false, } = {}) {
     var _a;
     const client = (_a = React.useContext(WherebyContext)) === null || _a === void 0 ? void 0 : _a.getGrid();
     if (!client) {
@@ -1851,6 +2125,9 @@ function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID
     const handleSpotlightedParticipantsChanged = React.useCallback((spotlighted) => {
         setState((prevState) => (Object.assign(Object.assign({}, prevState), { spotlightedParticipants: spotlighted })));
     }, [setState]);
+    const handleRunningRoomIntegrationsChanged = React.useCallback((runningRoomIntegrations) => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { runningRoomIntegrations })));
+    }, [setState]);
     const handleNumParticipantsChanged = React.useCallback((num) => {
         setState((prevState) => (Object.assign(Object.assign({}, prevState), { numParticipants: num })));
     }, [setState]);
@@ -1858,19 +2135,21 @@ function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID
         const unsubscribeClientViews = client.subscribeClientViews(handleClientViewChanged);
         const unsubscribeSpotlighted = client.subscribeSpotlightedParticipants(handleSpotlightedParticipantsChanged);
         const unsubscribeNumParticipants = client.subscribeNumberOfClientViews(handleNumParticipantsChanged);
+        const unsubscribeRunningRoomIntegrations = client.subscribeRunningRoomIntegrations(handleRunningRoomIntegrationsChanged);
         setState(client.getState());
         return () => {
             unsubscribeClientViews();
             unsubscribeSpotlighted();
             unsubscribeNumParticipants();
+            unsubscribeRunningRoomIntegrations();
         };
     }, [client]);
     const allClientViews = React.useMemo(() => state.allClientViews, [state.allClientViews]);
     const spotlightedParticipants = React.useMemo(() => state.spotlightedParticipants, [state.spotlightedParticipants]);
     const numParticipants = React.useMemo(() => state.numParticipants, [state.numParticipants]);
-    const floatingClientView = React.useMemo(() => {
-        return floatingParticipant;
-    }, [floatingParticipant]);
+    const runningRoomIntegrations = React.useMemo(() => (includeIntegrations ? state.runningRoomIntegrations : NO_INTEGRATIONS), [includeIntegrations, state.runningRoomIntegrations]);
+    const maximizedClientView = React.useMemo(() => (maximizedCellId ? allClientViews.find((client) => client.id === maximizedCellId) || null : null), [allClientViews, maximizedCellId]);
+    const floatingClientView = React.useMemo(() => (floatingCellId ? allClientViews.find((client) => client.id === floatingCellId) || null : null), [allClientViews, floatingCellId]);
     const clientViewsNotFloating = React.useMemo(() => {
         if (floatingClientView) {
             return allClientViews.filter((c) => c.id !== floatingClientView.id);
@@ -1883,51 +2162,84 @@ function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID
         }
         return forceSubgrid ? true : numParticipants > stageParticipantLimit;
     }, [forceSubgrid, numParticipants, stageParticipantLimit, enableSubgrid]);
+    const integrationsInPresentationGrid = React.useMemo(() => {
+        if (!runningRoomIntegrations.length || maximizedClientView) {
+            return [];
+        }
+        return [runningRoomIntegrations[0]];
+    }, [runningRoomIntegrations, maximizedClientView]);
+    const integrationsInSubgrid = React.useMemo(() => {
+        if (!shouldShowSubgrid) {
+            return [];
+        }
+        return runningRoomIntegrations.filter((session) => !integrationsInPresentationGrid.some((staged) => staged.roomIntegrationSessionId === session.roomIntegrationSessionId));
+    }, [runningRoomIntegrations, integrationsInPresentationGrid, shouldShowSubgrid]);
+    const integrationsHidden = React.useMemo(() => {
+        const visible = [...integrationsInPresentationGrid, ...integrationsInSubgrid];
+        return runningRoomIntegrations.filter((session) => !visible.some((shown) => shown.roomIntegrationSessionId === session.roomIntegrationSessionId));
+    }, [runningRoomIntegrations, integrationsInPresentationGrid, integrationsInSubgrid]);
     const clientViewsInSubgrid = React.useMemo(() => {
         return calculateSubgridViews({
             clientViews: clientViewsNotFloating,
             activeVideosSubgridTrigger,
             shouldShowSubgrid,
             spotlightedParticipants,
-            maximizedParticipant,
+            maximizedCellId,
+            hasStagedIntegration: integrationsInPresentationGrid.length > 0,
             isPhoneResolution: isConstrained,
         });
-    }, [clientViewsNotFloating, shouldShowSubgrid, activeVideosSubgridTrigger, spotlightedParticipants, isConstrained]);
+    }, [
+        clientViewsNotFloating,
+        shouldShowSubgrid,
+        activeVideosSubgridTrigger,
+        spotlightedParticipants,
+        maximizedCellId,
+        integrationsInPresentationGrid,
+        isConstrained,
+    ]);
     const clientViewsOnStage = React.useMemo(() => {
         return clientViewsNotFloating.filter((client) => !clientViewsInSubgrid.includes(client));
     }, [clientViewsNotFloating, clientViewsInSubgrid]);
     const clientViewsInPresentationGrid = React.useMemo(() => {
-        if (maximizedParticipant) {
-            return [maximizedParticipant];
+        if (maximizedClientView) {
+            return [maximizedClientView];
+        }
+        if (integrationsInPresentationGrid.length) {
+            return [];
         }
-        return spotlightedParticipants;
-    }, [spotlightedParticipants, maximizedParticipant]);
+        return spotlightedParticipants.filter((client) => clientViewsOnStage.includes(client));
+    }, [spotlightedParticipants, maximizedClientView, integrationsInPresentationGrid, clientViewsOnStage]);
     const clientViewsInGrid = React.useMemo(() => {
         return clientViewsOnStage.filter((client) => !clientViewsInPresentationGrid.includes(client));
     }, [clientViewsOnStage, clientViewsInPresentationGrid]);
     return {
         floatingClientView,
+        maximizedClientView,
         clientViewsInGrid,
         clientViewsInPresentationGrid,
         clientViewsInSubgrid,
+        integrationsInPresentationGrid,
+        integrationsInSubgrid,
+        integrationsHidden,
         spotlightedParticipants,
     };
 }
 
-function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, gridGap = 8, videoGridGap = 8, enableSubgrid = true, enableConstrainedGrid = true, } = {}) {
+function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, gridGap = 8, videoGridGap = 8, enableSubgrid = true, enableConstrainedGrid = true, includeIntegrations = false, } = {}) {
     const [containerBounds, setContainerBounds] = React.useState({ width: 0, height: 0 });
     const [isConstrained, setIsConstrained] = React.useState(false);
     const [clientAspectRatios, setClientAspectRatios] = React.useState({});
-    const [maximizedParticipant, setMaximizedParticipant] = React.useState(null);
-    const [floatingParticipant, setFloatingParticipant] = React.useState(null);
-    const { clientViewsInGrid, clientViewsInPresentationGrid, clientViewsInSubgrid, floatingClientView } = useGridParticipants({
+    const [maximizedCellId, setMaximizedCellId] = React.useState(null);
+    const [floatingCellId, setFloatingCellId] = React.useState(null);
+    const { clientViewsInGrid, clientViewsInPresentationGrid, clientViewsInSubgrid, floatingClientView, maximizedClientView, integrationsInPresentationGrid, integrationsInSubgrid, integrationsHidden, } = useGridParticipants({
         activeVideosSubgridTrigger,
         forceSubgrid,
         stageParticipantLimit,
         enableSubgrid,
-        maximizedParticipant,
-        floatingParticipant,
+        maximizedCellId,
+        floatingCellId,
         isConstrained: !!enableConstrainedGrid && !!isConstrained,
+        includeIntegrations,
     });
     const cellViewsFloating = React.useMemo(() => {
         return floatingClientView
@@ -1952,26 +2264,35 @@ function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLim
         });
     }, [clientViewsInGrid, clientAspectRatios]);
     const cellViewsInPresentationGrid = React.useMemo(() => {
-        return clientViewsInPresentationGrid.map((client) => {
-            return makeVideoCellView({
-                client,
-                aspectRatio: clientAspectRatios[client.id],
-                avatarSize: 0,
-                cellPaddings: { top: 0, right: 0 },
-            });
-        });
-    }, [clientViewsInPresentationGrid, clientAspectRatios]);
+        return [
+            ...integrationsInPresentationGrid.map((session) => makeIntegrationCellView({ session })),
+            ...clientViewsInPresentationGrid.map((client) => {
+                return makeVideoCellView({
+                    client,
+                    aspectRatio: clientAspectRatios[client.id],
+                    avatarSize: 0,
+                    cellPaddings: { top: 0, right: 0 },
+                });
+            }),
+        ];
+    }, [clientViewsInPresentationGrid, integrationsInPresentationGrid, clientAspectRatios]);
     const cellViewsInSubgrid = React.useMemo(() => {
-        return clientViewsInSubgrid.map((client) => {
-            return makeVideoCellView({
-                client,
-                aspectRatio: clientAspectRatios[client.id],
-                avatarSize: 0,
-                cellPaddings: { top: 0, right: 0 },
-                isSubgrid: true,
-            });
-        });
-    }, [clientViewsInSubgrid, clientAspectRatios]);
+        return [
+            ...clientViewsInSubgrid.map((client) => {
+                return makeVideoCellView({
+                    client,
+                    aspectRatio: clientAspectRatios[client.id],
+                    avatarSize: 0,
+                    cellPaddings: { top: 0, right: 0 },
+                    isSubgrid: true,
+                });
+            }),
+            ...integrationsInSubgrid.map((session) => makeIntegrationCellView({ session, isSubgrid: true })),
+        ];
+    }, [clientViewsInSubgrid, integrationsInSubgrid, clientAspectRatios]);
+    const cellViewsHidden = React.useMemo(() => {
+        return integrationsHidden.map((session) => makeIntegrationCellView({ session }));
+    }, [integrationsHidden]);
     const containerFrame = React.useMemo(() => {
         return makeFrame(containerBounds);
     }, [containerBounds]);
@@ -2008,14 +2329,17 @@ function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLim
         cellViewsVideoGrid,
         cellViewsInPresentationGrid,
         cellViewsInSubgrid,
+        cellViewsHidden,
         clientAspectRatios,
         videoStage,
         setContainerBounds,
         setClientAspectRatios,
-        maximizedParticipant,
-        setMaximizedParticipant,
-        floatingParticipant,
-        setFloatingParticipant,
+        maximizedCellId,
+        setMaximizedCellId,
+        maximizedParticipant: maximizedClientView,
+        floatingCellId,
+        setFloatingCellId,
+        floatingParticipant: floatingClientView,
         isConstrained,
     };
 }
@@ -2129,22 +2453,17 @@ ParticipantMenuTrigger.displayName = PopoverTrigger.displayName;
 const ParticipantMenuItem = React.forwardRef((_a, ref) => {
     var _b;
     var { children, style, participantAction } = _a, props = __rest(_a, ["children", "style", "participantAction"]);
-    const { participant, setOpen, maximizedParticipant, setMaximizedParticipant, setFloatingParticipant, floatingParticipant, } = useParticipantMenu();
+    const { participant, setOpen, maximizedCellId, setMaximizedCellId, floatingCellId, setFloatingCellId } = useParticipantMenu();
     const client = (_b = React.useContext(WherebyContext)) === null || _b === void 0 ? void 0 : _b.getGrid();
     const { spotlightedParticipants } = useGridParticipants();
     const isSpotlighted = spotlightedParticipants.find((p) => p.id === participant.id);
-    const isMaximized = (maximizedParticipant === null || maximizedParticipant === void 0 ? void 0 : maximizedParticipant.id) === participant.id;
-    const isFloating = (floatingParticipant === null || floatingParticipant === void 0 ? void 0 : floatingParticipant.id) === participant.id;
+    const isMaximized = maximizedCellId === participant.id;
+    const isFloating = floatingCellId === participant.id;
     let onClick;
     switch (participantAction) {
         case "maximize":
             onClick = () => {
-                if (isMaximized) {
-                    setMaximizedParticipant(null);
-                }
-                else {
-                    setMaximizedParticipant(participant);
-                }
+                setMaximizedCellId(isMaximized ? null : participant.id);
                 setOpen(false);
             };
             break;
@@ -2161,12 +2480,7 @@ const ParticipantMenuItem = React.forwardRef((_a, ref) => {
             break;
         case "float":
             onClick = () => {
-                if (isFloating) {
-                    setFloatingParticipant(null);
-                }
-                else {
-                    setFloatingParticipant(participant);
-                }
+                setFloatingCellId(isFloating ? null : participant.id);
                 setOpen(false);
             };
             break;
@@ -2283,28 +2597,35 @@ const GridVideoView = React.forwardRef((_a, ref) => {
     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 })));
 });
 GridVideoView.displayName = "GridVideoView";
-function renderCellView({ cellView, enableParticipantMenu, render }) {
-    const participant = cellView === null || cellView === void 0 ? void 0 : cellView.client;
-    if (!participant) {
+function renderCellView({ cellView, enableParticipantMenu, render, renderIntegration }) {
+    if (!cellView) {
         return undefined;
     }
     switch (cellView.type) {
-        case "video":
-            return (React.createElement(GridCell, { participant: participant },
+        case "video": {
+            const participant = cellView.client;
+            if (!participant) {
+                return undefined;
+            }
+            return (React.createElement(GridCell, { participant: participant, cellId: cellView.cellId },
                 React.createElement(React.Fragment, null, render ? (render({ participant })) : (React.createElement(React.Fragment, null,
                     React.createElement(GridVideoView, null),
                     enableParticipantMenu ? React.createElement(DefaultParticipantMenu, { participant: participant }) : null)))));
+        }
+        case "integration":
+            return (React.createElement(IntegrationCell, { cellId: cellView.cellId }, renderIntegration ? (renderIntegration({ session: cellView.session })) : (React.createElement(DefaultIntegrationView, { session: cellView.session }))));
     }
 }
-function Grid({ renderParticipant, renderSubgridParticipant, renderFloatingParticipant, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableParticipantMenu, enableConstrainedGrid, }) {
+function Grid({ renderParticipant, renderSubgridParticipant, renderFloatingParticipant, renderIntegration, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableParticipantMenu, enableConstrainedGrid, enableIntegrations = true, }) {
     const gridRef = React.useRef(null);
-    const { containerFrame, cellViewsFloating, cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid, clientAspectRatios, videoStage, setContainerBounds, setClientAspectRatios, maximizedParticipant, setMaximizedParticipant, isConstrained, floatingParticipant, setFloatingParticipant, } = useGrid({
+    const { containerFrame, cellViewsFloating, cellViewsVideoGrid, cellViewsInPresentationGrid, cellViewsInSubgrid, cellViewsHidden, clientAspectRatios, videoStage, setContainerBounds, setClientAspectRatios, maximizedCellId, setMaximizedCellId, maximizedParticipant, isConstrained, floatingCellId, setFloatingCellId, floatingParticipant, } = useGrid({
         activeVideosSubgridTrigger: 12,
         stageParticipantLimit,
         gridGap,
         videoGridGap,
         enableSubgrid,
         enableConstrainedGrid,
+        includeIntegrations: enableIntegrations,
     });
     const handleSetClientAspectRatio = React.useCallback(({ aspectRatio, clientId }) => {
         setClientAspectRatios((prev) => (Object.assign(Object.assign({}, prev), { [clientId]: aspectRatio })));
@@ -2315,13 +2636,16 @@ function Grid({ renderParticipant, renderSubgridParticipant, renderFloatingParti
             : {})));
     }, [cellViewsFloating]);
     const presentationGridContent = React.useMemo(() => cellViewsInPresentationGrid.map((cellView) => renderCellView(Object.assign({ cellView,
-        enableParticipantMenu }, (renderParticipant ? { render: ({ participant }) => renderParticipant({ participant }) } : {})))), [cellViewsInPresentationGrid]);
+        enableParticipantMenu,
+        renderIntegration }, (renderParticipant ? { render: ({ participant }) => renderParticipant({ participant }) } : {})))), [cellViewsInPresentationGrid, renderIntegration]);
     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(Object.assign({ cellView,
-        enableParticipantMenu }, (renderSubgridParticipant
+        enableParticipantMenu,
+        renderIntegration }, (renderSubgridParticipant
         ? { render: ({ participant }) => renderSubgridParticipant({ participant }) }
-        : {})))), [cellViewsInSubgrid]);
+        : {})))), [cellViewsInSubgrid, renderIntegration]);
+    const hiddenContent = React.useMemo(() => cellViewsHidden.map((cellView) => renderCellView({ cellView, renderIntegration })), [cellViewsHidden, renderIntegration]);
     React.useEffect(() => {
         if (!gridRef.current) {
             return;
@@ -2344,10 +2668,12 @@ function Grid({ renderParticipant, renderSubgridParticipant, renderFloatingParti
             cellViewsInPresentationGrid,
             cellViewsInSubgrid,
             clientAspectRatios,
+            maximizedCellId,
+            setMaximizedCellId,
             maximizedParticipant,
-            setMaximizedParticipant,
+            floatingCellId,
+            setFloatingCellId,
             floatingParticipant,
-            setFloatingParticipant,
             isConstrained,
         } },
         React.createElement("div", { ref: gridRef, style: {
@@ -2355,7 +2681,102 @@ function Grid({ renderParticipant, renderSubgridParticipant, renderFloatingParti
                 height: "100%",
                 position: "relative",
             } },
-            React.createElement(VideoStageLayout, { containerFrame: containerFrame, floatingContent: floatingContent, layoutVideoStage: videoStage, presentationGridContent: presentationGridContent, gridContent: gridContent, subgridContent: subgridContent }))));
+            React.createElement(VideoStageLayout, { containerFrame: containerFrame, floatingContent: floatingContent, layoutVideoStage: videoStage, presentationGridContent: presentationGridContent, gridContent: gridContent, subgridContent: subgridContent, hiddenContent: hiddenContent }))));
+}
+
+function subscribeToRoomIntegrationPicker({ pickerOrigin, getSource, onOutcome, }) {
+    let settled = false;
+    function handleMessage(event) {
+        if (settled || event.origin !== pickerOrigin || !event.source || event.source !== getSource()) {
+            return;
+        }
+        const { type, payload } = event.data || {};
+        if (type === ROOM_INTEGRATION_PICKER_MESSAGES.FORM_SUBMIT) {
+            settle({ type: "submitted", content: payload });
+        }
+        else if (type === ROOM_INTEGRATION_PICKER_MESSAGES.FORM_CLOSE) {
+            settle({ type: "cancelled" });
+        }
+        else if (type === ROOM_INTEGRATION_PICKER_MESSAGES.ERROR) {
+            settle({
+                type: "error",
+                error: new Error((payload === null || payload === void 0 ? void 0 : payload.message) || "The room integration picker failed"),
+            });
+        }
+    }
+    const unsubscribe = () => {
+        settled = true;
+        window.removeEventListener("message", handleMessage);
+    };
+    const settle = (outcome) => {
+        unsubscribe();
+        onOutcome(outcome);
+    };
+    window.addEventListener("message", handleMessage);
+    return unsubscribe;
+}
+
+const DEFAULT_ALLOW = "clipboard-read; clipboard-write; fullscreen";
+function useRoomIntegrationPicker({ integration, onPicked, onCancel, onError, featureSource, allow = DEFAULT_ALLOW, title, }) {
+    const iframeRef = React.useRef(null);
+    const onPickedRef = React.useRef(onPicked);
+    const onCancelRef = React.useRef(onCancel);
+    const onErrorRef = React.useRef(onError);
+    onPickedRef.current = onPicked;
+    onCancelRef.current = onCancel;
+    onErrorRef.current = onError;
+    const { webview } = integration;
+    const pickerOrigin = React.useMemo(() => {
+        try {
+            return new URL(webview).origin;
+        }
+        catch (_a) {
+            console.warn(`useRoomIntegrationPicker: unusable webview url ${webview}`);
+            return null;
+        }
+    }, [webview]);
+    const src = React.useMemo(() => {
+        if (!pickerOrigin) {
+            return null;
+        }
+        return roomIntegrationPickerUrl({
+            integration: { webview },
+            parentOrigin: window.location.origin,
+            featureSource,
+        });
+    }, [pickerOrigin, webview, featureSource]);
+    React.useEffect(() => {
+        if (!pickerOrigin) {
+            return;
+        }
+        return subscribeToRoomIntegrationPicker({
+            pickerOrigin,
+            getSource: () => { var _a; return (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow; },
+            onOutcome: (outcome) => {
+                var _a, _b;
+                if (outcome.type === "submitted") {
+                    onPickedRef.current(outcome.content || {});
+                    return;
+                }
+                if (outcome.type === "cancelled") {
+                    (_a = onCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(onCancelRef);
+                    return;
+                }
+                (_b = onErrorRef.current) === null || _b === void 0 ? void 0 : _b.call(onErrorRef, outcome.error);
+            },
+        });
+    }, [pickerOrigin, src]);
+    useIframeContract(iframeRef, "useRoomIntegrationPicker", !!src);
+    return {
+        iframeProps: src
+            ? {
+                ref: iframeRef,
+                src,
+                title: title || `${integration.title} picker`,
+                allow,
+            }
+            : null,
+    };
 }
 
-export { GridCell, GridVideoView, ParticipantMenu, ParticipantMenuContent, ParticipantMenuItem, ParticipantMenuTrigger, Grid as VideoGrid, VideoView, Provider as WherebyProvider, useLocalMedia, useRoomConnection };
+export { GridCell, GridVideoView, ParticipantMenu, ParticipantMenuContent, ParticipantMenuItem, ParticipantMenuTrigger, Grid as VideoGrid, VideoView, Provider as WherebyProvider, subscribeToRoomIntegrationPicker, useGrid, useLocalMedia, useRoomConnection, useRoomIntegrationPicker, useRoomIntegrationView };