@azure/communication-react 1.5.1-beta.1 → 1.5.1-beta.2

package/dist/communication-react.d.ts

@@ -19,6 +19,8 @@
 
 import { AddPhoneNumberOptions } from '@azure/communication-calling';
 import { AudioDeviceInfo } from '@azure/communication-calling';
+import { BackgroundBlurConfig } from '@azure/communication-calling-effects';
+import { BackgroundReplacementConfig } from '@azure/communication-calling-effects';
 import { Call } from '@azure/communication-calling';
 import { CallAgent } from '@azure/communication-calling';
 import { CallClient } from '@azure/communication-calling';
@@ -64,6 +66,7 @@ import { IStyleFunctionOrObject } from '@fluentui/react';
 import { ITextFieldStyles } from '@fluentui/react';
 import { LatestMediaDiagnostics } from '@azure/communication-calling';
 import { LatestNetworkDiagnostics } from '@azure/communication-calling';
+import { LocalVideoStream } from '@azure/communication-calling';
 import type { MediaDiagnosticChangedEventArgs } from '@azure/communication-calling';
 import { MediaStreamType } from '@azure/communication-calling';
 import { MicrosoftTeamsUserIdentifier } from '@azure/communication-common';
@@ -93,6 +96,7 @@ import { TypingIndicatorReceivedEvent } from '@azure/communication-chat';
 import { UnknownIdentifier } from '@azure/communication-common';
 import { UnknownIdentifierKind } from '@azure/communication-common';
 import { VideoDeviceInfo } from '@azure/communication-calling';
+import { VideoEffectName } from '@azure/communication-calling';
 import { VideoStreamRenderer } from '@azure/communication-calling';
 import { VideoStreamRendererView } from '@azure/communication-calling';
 
@@ -709,6 +713,24 @@ export declare interface CallAdapterCallOperations {
      * Continues into a call when the browser version is not supported.
      */
     allowUnsupportedBrowserVersion(): void;
+    /**
+     * Start the blur video background effect.
+     *
+     * @beta
+     */
+    blurVideoBackground(backgroundBlurConfig?: BackgroundBlurConfig): Promise<void>;
+    /**
+     * Start the video background replacement effect.
+     *
+     * @beta
+     */
+    replaceVideoBackground(backgroundReplacementConfig: BackgroundReplacementConfig): Promise<void>;
+    /**
+     * Stop the video background effect.
+     *
+     * @beta
+     */
+    stopVideoBackgroundEffect(): Promise<void>;
 }
 
 /**
@@ -746,6 +768,10 @@ export declare type CallAdapterClientState = {
      * control bar with the CallComposite.
      */
     cameraStatus?: 'On' | 'Off';
+    /**
+     * Default set of background images for background replacement effect.
+     */
+    videoBackgroundImages?: VideoBackgroundImage[];
 };
 
 /**
@@ -1776,7 +1802,7 @@ export declare type CallErrors = {
  *
  * @public
  */
-export declare type CallErrorTarget = 'Call.addParticipant' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.dispose' | 'Call.feature' | 'Call.hangUp' | 'Call.hold' | 'Call.mute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteIncomingAudio' | 'Call.off' | 'Call.on' | 'Call.removeParticipant' | 'Call.resume' | 'Call.sendDtmf' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.startAudio' | 'Call.startScreenSharing' | 'Call.startVideo' | 'Call.stopScreenSharing' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.stopAudio' | 'Call.stopVideo' | 'Call.unmute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.unmuteIncomingAudio' | 'CallAgent.dispose' | 'CallAgent.feature' | 'CallAgent.join' | 'CallAgent.off' | 'CallAgent.on' | 'CallAgent.startCall' | 'CallClient.createCallAgent' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'CallClient.createTeamsCallAgent' | 'CallClient.feature' | 'CallClient.getDeviceManager' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo' | 'DeviceManager.askDevicePermission' | 'DeviceManager.getCameras' | 'DeviceManager.getMicrophones' | 'DeviceManager.getSpeakers' | 'DeviceManager.off' | 'DeviceManager.on' | 'DeviceManager.selectMicrophone' | 'DeviceManager.selectSpeaker' | 'IncomingCall.accept' | 'IncomingCall.reject' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant';
+export declare type CallErrorTarget = 'Call.addParticipant' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.dispose' | 'Call.feature' | 'Call.hangUp' | 'Call.hold' | 'Call.mute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteIncomingAudio' | 'Call.off' | 'Call.on' | 'Call.removeParticipant' | 'Call.resume' | 'Call.sendDtmf' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.startAudio' | 'Call.startScreenSharing' | 'Call.startVideo' | 'Call.stopScreenSharing' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.stopAudio' | 'Call.stopVideo' | 'Call.unmute' | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.unmuteIncomingAudio' | 'CallAgent.dispose' | 'CallAgent.feature' | 'CallAgent.join' | 'CallAgent.off' | 'CallAgent.on' | 'CallAgent.startCall' | 'CallClient.createCallAgent' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'CallClient.createTeamsCallAgent' | 'CallClient.feature' | 'CallClient.getDeviceManager' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo' | 'DeviceManager.askDevicePermission' | 'DeviceManager.getCameras' | 'DeviceManager.getMicrophones' | 'DeviceManager.getSpeakers' | 'DeviceManager.off' | 'DeviceManager.on' | 'DeviceManager.selectMicrophone' | 'DeviceManager.selectSpeaker' | 'IncomingCall.accept' | 'IncomingCall.reject' | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant' | /* @conditional-compile-remove(video-background-effects) */ 'VideoEffectsFeature.startEffects' | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallAgent.handlePushNotification';
 
 /**
  * Callback for {@link CallAdapterSubscribers} 'callIdChanged' event.
@@ -2272,6 +2298,24 @@ export declare interface CallWithChatAdapterManagement {
      * Continues into a call when the browser version is not supported.
      */
     allowUnsupportedBrowserVersion(): void;
+    /**
+     * Start the blur video background effect.
+     *
+     * @beta
+     */
+    blurVideoBackground(backgroundBlurConfig?: BackgroundBlurConfig): Promise<void>;
+    /**
+     * Start the video background replacement effect.
+     *
+     * @beta
+     */
+    replaceVideoBackground(backgroundReplacementConfig: BackgroundReplacementConfig): Promise<void>;
+    /**
+     * Stop the video background effect.
+     *
+     * @beta
+     */
+    stopVideoBackgroundEffect(): Promise<void>;
 }
 
 /**
@@ -2884,6 +2928,10 @@ export declare interface CameraButtonProps extends ControlBarButtonProps {
      * Styles for {@link CameraButton} and the device selection flyout.
      */
     styles?: Partial<CameraButtonStyles>;
+    /**
+     * Callback when a effects is clicked
+     */
+    onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
 }
 
 /**
@@ -2944,6 +2992,18 @@ export declare interface CameraButtonStrings {
      * Camera action turned off string for announcer
      */
     cameraActionTurnedOffAnnouncement?: string;
+    /**
+     * Primary action for when the camera is turned off
+     */
+    offSplitButtonPrimaryActionCamera?: string;
+    /**
+     * Primary action for when the camera is on
+     */
+    onSplitButtonPrimaryActionCamera?: string;
+    /**
+     * Title for primary action section of split button
+     */
+    cameraPrimaryActionSplitButtonTitle?: string;
 }
 
 /**
@@ -3602,6 +3662,9 @@ export declare interface CommonCallingHandlers {
     onRemoveParticipant(participant: CommunicationIdentifier): Promise<void>;
     askDevicePermission: (constrain: PermissionConstraints) => Promise<void>;
     onStartCall: (participants: (CommunicationUserIdentifier | PhoneNumberIdentifier | UnknownIdentifier)[], options?: StartCallOptions) => void;
+    onRemoveVideoBackgroundEffects: () => Promise<void>;
+    onBlurVideoBackground: (backgroundBlurConfig?: BackgroundBlurConfig) => Promise<void>;
+    onReplaceVideoBackground: (backgroundReplacementConfig: BackgroundReplacementConfig) => Promise<void>;
 }
 
 /**
@@ -3859,6 +3922,10 @@ export declare interface ComponentStrings {
     BrowserPermissionDenied: BrowserPermissionDeniedStrings;
     /** Strings for BrowserPemissionDeniedIOS */
     BrowserPermissionDeniedIOS: BrowserPermissionDeniedIOSStrings;
+    /**
+     * Strings for the VerticalGallery.
+     */
+    VerticalGallery: VerticalGalleryStrings;
 }
 
 /**
@@ -4599,6 +4666,13 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     VideoTileScaleFill: JSX.Element;
     PinParticipant: JSX.Element;
     UnpinParticipant: JSX.Element;
+    SplitButtonPrimaryActionCameraOn: JSX.Element;
+    SplitButtonPrimaryActionCameraOff: JSX.Element;
+    SplitButtonPrimaryActionMicUnmuted: JSX.Element;
+    SplitButtonPrimaryActionMicMuted: JSX.Element;
+    VerticalGalleryLeftButton: JSX.Element;
+    VerticalGalleryRightButton: JSX.Element;
+    OptionsVideoBackgroundEffect: JSX.Element;
 };
 
 /**
@@ -4700,6 +4774,13 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     VideoTileScaleFill: JSX.Element;
     PinParticipant: JSX.Element;
     UnpinParticipant: JSX.Element;
+    SplitButtonPrimaryActionCameraOn: JSX.Element;
+    SplitButtonPrimaryActionCameraOff: JSX.Element;
+    SplitButtonPrimaryActionMicUnmuted: JSX.Element;
+    SplitButtonPrimaryActionMicMuted: JSX.Element;
+    VerticalGalleryLeftButton: JSX.Element;
+    VerticalGalleryRightButton: JSX.Element;
+    OptionsVideoBackgroundEffect: JSX.Element;
 };
 
 /**
@@ -5259,6 +5340,10 @@ export declare interface ErrorBarStrings {
      * Generic message for when screen sharing fails
      */
     startScreenSharingGeneric?: string;
+    /**
+     * Error bar string letting you know remote participants see a frozen stream for you.
+     */
+    cameraFrozenForRemoteParticipants?: string;
 }
 
 /**
@@ -5694,10 +5779,16 @@ export declare interface _Identifiers {
     videoGallery: string;
     /** `data-ui-id` value for `VideoTile` Component */
     videoTile: string;
-    /** `data-ui-id` value for `HorizontalGallery` Component's left navigation button */
-    horizontalGalleryLeftNavButton: string;
-    /** `data-ui-id` value for `HorizontalGallery` Component's right navigation button */
-    horizontalGalleryRightNavButton: string;
+    /** `data-ui-id` value for overflow gallery component's left navigation button */
+    overflowGalleryLeftNavButton: string;
+    /** `data-ui-id` value for overflow gallery component's right navigation button */
+    overflowGalleryRightNavButton: string;
+    /** `data-ui-id` value for the video tiles in the horizontal gallery */
+    horizontalGalleryVideoTile: string;
+    /** `data-ui-id` value for `VerticalGallery` Component's children video tiles */
+    verticalGalleryVideoTile: string;
+    /** `data-ui-id` value for `VerticalGallery` Component's page counter */
+    verticalGalleryPageCounter: string;
 }
 
 /**
@@ -5857,6 +5948,27 @@ export declare interface LocalVideoStreamState {
      * API. This can be undefined if the stream has not yet been rendered and defined after createView creates the view.
      */
     view?: VideoStreamRendererViewState;
+    /**
+     * Stores the state of the video effects.
+     * @beta
+     */
+    videoEffects?: LocalVideoStreamVideoEffectsState;
+}
+
+/**
+ * State only version of a LocalVideoStream's {@link @azure/communication-calling#VideoEffectsFeature}.
+ *
+ * @beta
+ */
+export declare interface LocalVideoStreamVideoEffectsState {
+    /**
+     * State of the video background effect.
+     */
+    isActive: boolean;
+    /**
+     * Name of the effect if one is active.
+     */
+    effectName?: VideoEffectName;
 }
 
 /**
@@ -6203,10 +6315,10 @@ export declare type MessageThreadProps = {
     /**
      * Optional callback to send a message.
      *
-     * @param messageId - message id from chatClient
+     * @param content - message body to send
      *
      */
-    onSendMessage?: (messageId: string) => Promise<void>;
+    onSendMessage?: (content: string) => Promise<void>;
     /**
      /**
      * Disable editing messages.
@@ -6473,6 +6585,18 @@ export declare interface MicrophoneButtonStrings {
      * Microphone action turned off string for announcer
      */
     microphoneActionTurnedOffAnnouncement?: string;
+    /**
+     * Primary action for the microphone when microphone is live.
+     */
+    onSplitButtonMicrophonePrimaryAction?: string;
+    /**
+     * Primary action for the microphone when the microphone is muted.
+     */
+    offSplitButtonMicrophonePrimaryAction?: string;
+    /**
+     * Title for primary action section of split button
+     */
+    micPrimaryActionSplitButtonTitle?: string;
 }
 
 /**
@@ -6569,6 +6693,13 @@ export declare interface OptionsDevice {
     name: string;
 }
 
+/**
+ * Different modes and positions of the overflow gallery in the VideoGallery
+ *
+ * @beta
+ */
+export declare type OverflowGalleryPosition = 'HorizontalBottom' | 'VerticalRight';
+
 /**
  * A system message notifying that a participant was added to the chat thread.
  *
@@ -7587,6 +7718,14 @@ export declare interface StatefulDeviceManager extends DeviceManager {
      * {@link StatefulDeviceManager}. See also {@link DeviceManagerState.selectedCamera}.
      */
     selectCamera: (VideoDeviceInfo: any) => void;
+    /**
+     * Gets the list of unparented video streams. This is a list of video streams that have not been added to a
+     * {@link @azure/communication-calling#Call}. This is useful for developers who want to interact with rendered
+     * video streams before they have started a call. See also {@link @azure/communication-react#CallClient.createView}.
+     *
+     * @beta
+     */
+    getUnparentedVideoStreams: () => LocalVideoStream[];
 }
 
 /**
@@ -8192,6 +8331,70 @@ export declare const useTeamsCallAgent: () => undefined | /* @conditional-compil
  */
 export declare const useTheme: () => Theme;
 
+/**
+ * Styles for the control bar inside the VerticalGallery component
+ *
+ * @beta
+ */
+export declare interface VerticalGalleryControlBarStyles extends BaseCustomStyles {
+    /**
+     * styles for the next button in the VerticalGalleryControlBar
+     */
+    nextButton?: IStyle;
+    /**
+     * Styles for the previous button in the VerticalGalleryControlBar
+     */
+    previousButton?: IStyle;
+    /**
+     * Styles for the counter in the VerticalGalleryControlBar
+     */
+    counter?: IStyle;
+}
+
+/**
+ * Strings for localization of the vertical gallery.
+ *
+ * @beta
+ */
+export declare interface VerticalGalleryStrings {
+    /** Aria label for the left page navigation button */
+    leftNavButtonAriaLabel?: string;
+    /** Aria label for the right page navigation button */
+    rightNavButtonAriaLabel?: string;
+}
+
+/**
+ * Styles for the VerticalGallery component
+ *
+ * @beta
+ */
+export declare interface VerticalGalleryStyles extends BaseCustomStyles {
+    /** Styles for each video tile in the vertical gallery */
+    children?: IStyle;
+    /** Styles for the verticalGallery control bar */
+    controlBar?: VerticalGalleryControlBarStyles;
+}
+
+/**
+ * Contains the attibutes of a background image like url, name etc.
+ *
+ * @beta
+ */
+export declare interface VideoBackgroundImage {
+    /**
+     * key for unique identification of the custom background
+     */
+    key: string;
+    /**
+     * URL of the uploaded background image.
+     */
+    url: string;
+    /**
+     * Image name to be displayed.
+     */
+    tooltipText?: string;
+}
+
 /**
  * VideoGallery represents a layout of video tiles for a specific call.
  * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.
@@ -8309,6 +8512,11 @@ export declare interface VideoGalleryProps {
      * @defaultValue \{ kind: 'contextual' \}
      */
     remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
+    /**
+     * Determines the layout of the overflowGallery inside the VideoGallery.
+     * @defaultValue 'HorizontalBottom'
+     */
+    overflowGalleryPosition?: OverflowGalleryPosition;
 }
 
 /**
@@ -8409,6 +8617,8 @@ export declare interface VideoGalleryStyles extends BaseCustomStyles {
     horizontalGallery?: HorizontalGalleryStyles;
     /** Styles for the local video  */
     localVideo?: IStyle;
+    /** Styles for the vertical gallery */
+    verticalGallery?: VerticalGalleryStyles;
 }
 
 /**