@whereby.com/browser-sdk 3.31.1 → 3.32.0

package/dist/react/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { LocalMediaState, LocalMediaOptions, InitialMuteStates, RoomJoinedSuccess, SendFilesOptions, ChatFileShare, StartBreakoutSessionOptions, UpdateBreakoutSessionOptions, RoomConnectionState, NotificationsEventEmitter, ClientView } from '@whereby.com/core';
-export { ACCEPTED_FILE_TYPES, BreakoutState as Breakout, ChatFileShare, ChatMessageState as ChatMessage, CloudRecordingState as CloudRecording, FileShareError, FileUpload, KnockResponse, LiveStreamState as LiveStreaming, LocalParticipantState as LocalParticipant, MAX_FILES_PER_UPLOAD, MAX_FILE_SIZE, RemoteParticipantState as RemoteParticipant, RoomConnectionState as RoomConnection, ScreenshareState as Screenshare, SendFilesOptions, WaitingParticipantState as WaitingParticipant, getUsableCameraEffectPresets, isAudioDenoiserSupported } from '@whereby.com/core';
+import * as _whereby_com_core from '@whereby.com/core';
+import { LocalMediaState, LocalMediaOptions, InitialMuteStates, RoomJoinedSuccess, SendFilesOptions, ChatFileShare, RoomIntegrationProps, StartBreakoutSessionOptions, UpdateBreakoutSessionOptions, RoomConnectionState, NotificationsEventEmitter, ClientView, RoomIntegrationSessionView, RoomIntegration, RoomIntegrationPickerResult } from '@whereby.com/core';
+export { ACCEPTED_FILE_TYPES, BreakoutState as Breakout, ChatFileShare, ChatMessageState as ChatMessage, CloudRecordingState as CloudRecording, FileShareError, FileUpload, KnockResponse, LiveStreamState as LiveStreaming, LocalParticipantState as LocalParticipant, MAX_FILES_PER_UPLOAD, MAX_FILE_SIZE, ROOM_INTEGRATION_PICKER_MESSAGES, RemoteParticipantState as RemoteParticipant, RoomConnectionState as RoomConnection, RoomIntegration, RoomIntegrationContent, RoomIntegrationError, RoomIntegrationErrorDetail, RoomIntegrationPickerResult, RoomIntegrationProps, RoomIntegrationSession, RoomIntegrationSessionView, RoomIntegrationsState as RoomIntegrations, ScreenshareState as Screenshare, SendFilesOptions, WaitingParticipantState as WaitingParticipant, YouTubeContentMetadata, getUsableCameraEffectPresets, isAudioDenoiserSupported, roomIntegrationContent, roomIntegrationContentTagName, roomIntegrationPickerUrl } from '@whereby.com/core';
 import * as _radix_ui_react_popover from '@radix-ui/react-popover';
 import { PopoverProps } from '@radix-ui/react-popover';
 
@@ -96,6 +97,20 @@ interface RoomConnectionActions {
     removeSpotlight: (clientId: string) => void;
     joinBreakoutGroup: (group: string) => void;
     joinBreakoutMainRoom: () => void;
+    startRoomIntegration: (options: {
+        roomIntegrationId: string;
+        tagName: string;
+        shareUrl: string;
+        props?: RoomIntegrationProps;
+    }) => void;
+    stopRoomIntegration: (options: {
+        roomIntegrationSessionId: string;
+        intent?: "stop" | "end";
+    }) => void;
+    updateRoomIntegrationProps: (options: {
+        roomIntegrationSessionId: string;
+        props: RoomIntegrationProps;
+    }) => void;
     startBreakoutSession: (options: StartBreakoutSessionOptions) => void;
     updateBreakoutSession: (options: UpdateBreakoutSessionOptions) => void;
     stopBreakoutSession: () => void;
@@ -127,8 +142,95 @@ declare function useRoomConnection(roomUrl: string, roomConnectionOptions?: UseR
 
 declare function useLocalMedia(optionsOrStream?: UseLocalMediaOptions | MediaStream): UseLocalMediaResult;
 
+type Box = {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+};
+type Origin = {
+    top: number;
+    left: number;
+};
+type Bounds = {
+    width: number;
+    height: number;
+};
+type Frame = {
+    origin: Origin;
+    bounds: Bounds;
+};
+type CellViewBase = {
+    aspectRatio?: number;
+    avatarSize?: number;
+    cellPaddings?: {
+        top: number;
+        right: number;
+    };
+    cellId: string;
+    clientId: string;
+    isDraggable?: boolean;
+    isPlaceholder?: boolean;
+    isSubgrid?: boolean;
+};
+type VideoCellView = CellViewBase & {
+    type: "video";
+    client?: ClientView;
+};
+type IntegrationCellView = CellViewBase & {
+    type: "integration";
+    session: RoomIntegrationSessionView;
+};
+type CellView = VideoCellView | IntegrationCellView;
+type ResultCellView = {
+    aspectRatio: number;
+    bounds: Bounds;
+    client?: ClientView;
+    clientId: string;
+    origin: Origin;
+    isDraggable?: boolean;
+    isSmallCell: boolean;
+    type: string;
+    paddings?: Box;
+};
+type StageLayout = {
+    isPortrait: boolean;
+    videosContainer: Frame;
+    hasOverflow: boolean;
+    bounds?: Bounds;
+    gridGap?: number;
+    presentationGrid?: {
+        bounds: Bounds;
+        origin: Origin;
+        cells: ResultCellView[];
+        paddings: Box;
+    };
+    videoGrid?: {
+        bounds: Bounds;
+        origin: Origin;
+        cells: ResultCellView[];
+        paddings: Box;
+    };
+    floatingContent?: {
+        clientId?: string;
+        isDraggable?: boolean;
+        origin: Origin;
+        bounds: Bounds;
+        aspectRatio: number;
+        isSmallCell?: boolean;
+    };
+    subgrid: {
+        bounds: Bounds;
+        origin: Origin;
+        cells: ResultCellView[];
+        contentBounds: Bounds;
+    };
+    overflowNeedBounds?: Bounds;
+};
+
 type GridCellSelfProps = {
     participant: ClientView;
+    cellId?: string;
 };
 type GridCellProps = GridCellSelfProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 declare const GridCell: React.ForwardRefExoticComponent<Omit<GridCellProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -145,14 +247,89 @@ interface GridProps {
     renderFloatingParticipant?: ({ participant }: {
         participant: ClientView;
     }) => React.ReactNode;
+    renderIntegration?: ({ session }: {
+        session: RoomIntegrationSessionView;
+    }) => React.ReactNode;
     gridGap?: number;
     videoGridGap?: number;
     enableSubgrid?: boolean;
     stageParticipantLimit?: number;
     enableParticipantMenu?: boolean;
     enableConstrainedGrid?: boolean;
+    enableIntegrations?: boolean;
+}
+declare function Grid({ renderParticipant, renderSubgridParticipant, renderFloatingParticipant, renderIntegration, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableParticipantMenu, enableConstrainedGrid, enableIntegrations, }: GridProps): React.JSX.Element;
+
+interface Props {
+    activeVideosSubgridTrigger?: number;
+    forceSubgrid?: boolean;
+    stageParticipantLimit?: number;
+    gridGap?: number;
+    videoGridGap?: number;
+    enableSubgrid?: boolean;
+    enableConstrainedGrid?: boolean;
+    includeIntegrations?: boolean;
 }
-declare function Grid({ renderParticipant, renderSubgridParticipant, renderFloatingParticipant, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableParticipantMenu, enableConstrainedGrid, }: GridProps): React.JSX.Element;
+declare function useGrid({ activeVideosSubgridTrigger, forceSubgrid, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableConstrainedGrid, includeIntegrations, }?: Props): {
+    containerFrame: Frame;
+    cellViewsFloating: CellView[];
+    cellViewsVideoGrid: CellView[];
+    cellViewsInPresentationGrid: CellView[];
+    cellViewsInSubgrid: CellView[];
+    cellViewsHidden: IntegrationCellView[];
+    clientAspectRatios: {
+        [key: string]: number;
+    };
+    videoStage: StageLayout;
+    setContainerBounds: React.Dispatch<React.SetStateAction<{
+        width: number;
+        height: number;
+    }>>;
+    setClientAspectRatios: React.Dispatch<React.SetStateAction<{
+        [key: string]: number;
+    }>>;
+    maximizedCellId: string | null;
+    setMaximizedCellId: React.Dispatch<React.SetStateAction<string | null>>;
+    maximizedParticipant: _whereby_com_core.ClientView | null;
+    floatingCellId: string | null;
+    setFloatingCellId: React.Dispatch<React.SetStateAction<string | null>>;
+    floatingParticipant: _whereby_com_core.ClientView | null;
+    isConstrained: boolean;
+};
+
+interface RoomIntegrationIframeProps {
+    ref: React.RefObject<HTMLIFrameElement | null>;
+    src: string;
+    title: string;
+    allow: string;
+}
+interface UseRoomIntegrationPickerOptions {
+    integration: RoomIntegration;
+    onPicked: (content: RoomIntegrationPickerResult) => void;
+    onCancel?: () => void;
+    onError?: (error: Error) => void;
+    featureSource?: string;
+    allow?: string;
+    title?: string;
+}
+interface UseRoomIntegrationPickerResult {
+    iframeProps: RoomIntegrationIframeProps | null;
+}
+declare function useRoomIntegrationPicker({ integration, onPicked, onCancel, onError, featureSource, allow, title, }: UseRoomIntegrationPickerOptions): UseRoomIntegrationPickerResult;
+
+interface UseRoomIntegrationViewOptions {
+    session: RoomIntegrationSessionView;
+    onAudioOverride?: (enabled: boolean | null) => void;
+    onContentReady?: () => void;
+    allow?: string;
+    title?: string;
+}
+interface UseRoomIntegrationViewResult {
+    iframeProps: RoomIntegrationIframeProps | null;
+    getVolume: () => Promise<number>;
+    setVolume: (volume: number) => void;
+}
+declare function useRoomIntegrationView({ session, onAudioOverride, onContentReady, allow, title, }: UseRoomIntegrationViewOptions): UseRoomIntegrationViewResult;
 
 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>>;
@@ -161,5 +338,20 @@ declare const ParticipantMenuItem: React.ForwardRefExoticComponent<Omit<React.De
     participantAction?: "maximize" | "spotlight" | "float";
 } & React.RefAttributes<HTMLButtonElement>>;
 
-export { GridCell, GridVideoView, ParticipantMenu, ParticipantMenuContent, ParticipantMenuItem, ParticipantMenuTrigger, Grid as VideoGrid, VideoView, Provider as WherebyProvider, useLocalMedia, useRoomConnection };
-export type { RoomConnectionActions, RoomConnectionOptions, UseLocalMediaResult };
+type RoomIntegrationPickerOutcome = {
+    type: "submitted";
+    content: RoomIntegrationPickerResult;
+} | {
+    type: "cancelled";
+} | {
+    type: "error";
+    error: Error;
+};
+declare function subscribeToRoomIntegrationPicker({ pickerOrigin, getSource, onOutcome, }: {
+    pickerOrigin: string;
+    getSource: () => Window | null | undefined;
+    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 type { CellView, IntegrationCellView, RoomConnectionActions, RoomConnectionOptions, RoomIntegrationIframeProps, RoomIntegrationPickerOutcome, UseLocalMediaResult, UseRoomIntegrationPickerOptions, UseRoomIntegrationPickerResult, UseRoomIntegrationViewOptions, UseRoomIntegrationViewResult, VideoCellView };