@whereby.com/browser-sdk 3.31.2 → 3.33.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, ToggleAudioOnlyModeOptions, 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, ToggleAudioOnlyModeOptions, 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';
 
@@ -91,11 +92,26 @@ interface RoomConnectionActions {
     toggleRaiseHand: (enabled?: boolean) => void;
     toggleHdMode: (enabled?: boolean) => void;
     toggleLowDataMode: (enabled?: boolean) => void;
+    toggleAudioOnlyMode: (enabled?: boolean, options?: ToggleAudioOnlyModeOptions) => void;
     toggleWidescreenMode: (enabled?: boolean) => void;
     spotlightParticipant: (clientId: string) => void;
     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 +143,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 +248,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 +339,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 };