@azure/communication-react 1.5.1-alpha-202303300013 → 1.5.1-alpha-202304010014

package/dist/communication-react.d.ts

@@ -295,6 +295,10 @@ export declare type AzureCommunicationCallAdapterOptions = {
      * {@link CallComposite}. The true role of the user will be synced with ACS services when a Rooms call starts.
      */
     roleHint?: Role;
+    /**
+     * Default set of background images for background image picker.
+     */
+    videoBackgroundImages?: VideoBackgroundImage[];
 };
 
 /**
@@ -738,19 +742,27 @@ export declare interface CallAdapterCallOperations {
      *
      * @beta
      */
-    blurVideoBackground(bgBlurConfig?: BackgroundBlurConfig): Promise<void>;
+    blurVideoBackground(backgroundBlurConfig?: BackgroundBlurConfig): Promise<void>;
     /**
      * Start the video background replacement effect.
      *
      * @beta
      */
-    replaceVideoBackground(bgReplacementConfig: BackgroundReplacementConfig): Promise<void>;
+    replaceVideoBackground(backgroundReplacementConfig: BackgroundReplacementConfig): Promise<void>;
     /**
      * Stop the video background effect.
      *
      * @beta
      */
     stopVideoBackgroundEffect(): Promise<void>;
+    /**
+     * Override the background picker images for background replacement effect.
+     *
+     * @param backgroundImages - Array of custom background images.
+     *
+     * @beta
+     */
+    updateBackgroundPickerImages(backgroundImages: VideoBackgroundImage[]): void;
 }
 
 /**
@@ -1171,6 +1183,7 @@ export declare const CallComposite: (props: CallCompositeProps) => JSX.Element;
  * @public
  */
 export declare type CallCompositeIcons = {
+    ControlBarPeopleButton?: JSX.Element;
     ControlButtonCameraOff?: JSX.Element;
     ControlButtonCameraOn?: JSX.Element;
     ControlButtonEndCall?: JSX.Element;
@@ -1219,6 +1232,8 @@ export declare type CallCompositeIcons = {
     PeoplePaneOpenDialpad?: JSX.Element;
     DialpadStartCall?: JSX.Element;
     NoticePageInvalidRoom?: JSX.Element;
+    BlurVideoBackground?: JSX.Element;
+    RemoveVideoBackgroundEffect?: JSX.Element;
 };
 
 /**
@@ -1618,6 +1633,26 @@ export declare interface CallCompositeStrings {
      * More details text of the page shown to the user when the user attempts to join a room that cannot be found.
      */
     roomNotFoundDetails?: string;
+    /**
+     * Label for the button to open effects and title of the effects
+     */
+    effects?: string;
+    /**
+     * Label for the blur video background effect item
+     */
+    blurBackgroundEffectButtonLabel?: string;
+    /**
+     * Tooltip text for the blur video background effect item
+     */
+    blurBackgroundTooltip?: string;
+    /**
+     * Label for the remove video background effect item
+     */
+    removeBackgroundEffectButtonLabel?: string;
+    /**
+     * Tooltip text for the blur video background effect item
+     */
+    removeBackgroundTooltip?: string;
     /**
      * Title text of the page shown to the user when the user attempts to join a room to which they are not invited.
      */
@@ -1696,71 +1731,15 @@ export declare type CallControlDisplayType = 'default' | 'compact';
  *
  * @public
  */
-export declare type CallControlOptions = {
-    /**
-     * {@link CallControlDisplayType} to change how the call controls are displayed.
-     * `'compact'` display type will decreases the size of buttons and hide the labels.
-     *
-     * @remarks
-     * If the composite `formFactor` is set to `'mobile'`, the control bar will always use compact view.
-     *
-     * @defaultValue 'default'
-     */
-    displayType?: CallControlDisplayType;
-    /**
-     * Show or Hide Camera Button during a call
-     * @defaultValue true
-     */
-    cameraButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
-        disabled: boolean;
-    };
-    /**
-     * Show or Hide EndCall button during a call.
-     * @defaultValue true
-     */
-    endCallButton?: boolean;
-    /**
-     * Show or Hide Microphone button during a call.
-     * @defaultValue true
-     */
-    microphoneButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
-        disabled: boolean;
-    };
+export declare type CallControlOptions = CommonCallControlOptions & {
     /**
-     * Show or Hide Devices button during a call.
-     * @defaultValue true
-     */
-    devicesButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
-        disabled: boolean;
-    };
-    /**
-     * Show, Hide or Disable participants button during a call.
+     * Show, Hide or Disable participants button during a call. This is the option only work for legacyControl bar.
      * @defaultValue true
      */
     participantsButton?: boolean | {
         disabled: boolean;
     };
-    /**
-     * Show, Hide or Disable the screen share button during a call.
-     * @defaultValue true
-     */
-    screenShareButton?: boolean | {
-        disabled: boolean;
-    };
-    /**
-     * Show, Hide or disable the more button during a call.
-     * @defaultValue true
-     */
-    moreButton?: boolean;
-    /**
-     * Inject custom buttons in the call controls.
-     *
-     * @beta
-     */
-    onFetchCustomButtonProps?: CustomCallControlButtonCallback[];
-    holdButton?: boolean | {
-        disabled: boolean;
-    };
+    legacyControlBarExperience?: boolean;
 };
 
 /**
@@ -2324,19 +2303,27 @@ export declare interface CallWithChatAdapterManagement {
      *
      * @beta
      */
-    blurVideoBackground(bgBlurConfig?: BackgroundBlurConfig): Promise<void>;
+    blurVideoBackground(backgroundBlurConfig?: BackgroundBlurConfig): Promise<void>;
     /**
      * Start the video background replacement effect.
      *
      * @beta
      */
-    replaceVideoBackground(bgReplacementConfig: BackgroundReplacementConfig): Promise<void>;
+    replaceVideoBackground(backgroundReplacementConfig: BackgroundReplacementConfig): Promise<void>;
     /**
      * Stop the video background effect.
      *
      * @beta
      */
     stopVideoBackgroundEffect(): Promise<void>;
+    /**
+     * Override the background picker images for background replacement effect.
+     *
+     * @param backgroundImages - Array of custom background images.
+     *
+     * @beta
+     */
+    updateBackgroundPickerImages(backgroundImages: VideoBackgroundImage[]): void;
 }
 
 /**
@@ -2451,6 +2438,8 @@ export declare interface CallWithChatClientState {
     alternateCallerId?: string | undefined;
     /** Environment information for system adapter is made on */
     environmentInfo?: EnvironmentInfo;
+    /** Default set of background images for background replacement effect */
+    videoBackgroundImages?: VideoBackgroundImage[];
 }
 
 /**
@@ -2778,47 +2767,11 @@ export declare interface CallWithChatCompositeStrings {
 }
 
 /**
- * {@link CallWithChatComposite} Call controls to show or hide buttons on the calling control bar.
+ * Customization options for the control bar in calling with chat experience.
  *
  * @public
  */
-export declare interface CallWithChatControlOptions {
-    /**
-     * {@link CallControlDisplayType} to change how the call controls are displayed.
-     * `'compact'` display type will decreases the size of buttons and hide the labels.
-     *
-     * @remarks
-     * If the composite `formFactor` is set to `'mobile'`, the control bar will always use compact view.
-     *
-     * @defaultValue 'default'
-     */
-    displayType?: CallControlDisplayType;
-    /**
-     * Show or Hide Microphone button during a call.
-     * @defaultValue true
-     */
-    microphoneButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
-        disabled: boolean;
-    };
-    /**
-     * Show or Hide Camera Button during a call
-     * @defaultValue true
-     */
-    cameraButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
-        disabled: boolean;
-    };
-    /**
-     * Show, Hide or Disable the screen share button during a call.
-     * @defaultValue true
-     */
-    screenShareButton?: boolean | {
-        disabled: boolean;
-    };
-    /**
-     * Show or Hide EndCall button during a call.
-     * @defaultValue true
-     */
-    endCallButton?: boolean;
+export declare interface CallWithChatControlOptions extends CommonCallControlOptions {
     /**
      * Show or hide the chat button in the call-with-chat composite control bar.
      * @defaultValue true
@@ -2826,29 +2779,6 @@ export declare interface CallWithChatControlOptions {
     chatButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
         disabled: boolean;
     };
-    /**
-     * Show or hide the people button in the call-with-chat composite control bar.
-     * @defaultValue true
-     */
-    peopleButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
-        disabled: boolean;
-    };
-    /**
-     * Inject custom buttons in the call controls.
-     *
-     * @beta
-     */
-    onFetchCustomButtonProps?: CustomCallWithChatControlButtonCallback[];
-    /**
-     * Show or hide the more button in the call-with-chat control bar.
-     */
-    moreButton?: boolean;
-    /**
-     * Show or hide the hold button in the bottom sheet drawer
-     */
-    holdButton?: boolean | {
-        disabled: boolean;
-    };
 }
 
 /**
@@ -3653,6 +3583,85 @@ export declare interface CommonCallAdapter extends AdapterState<CallAdapterState
     startCall(participants: CommunicationIdentifier[], options?: StartCallOptions): void;
 }
 
+/**
+ * Customization options for the control bar in calling experience.
+ *
+ * @public
+ */
+export declare type CommonCallControlOptions = {
+    /**
+     * {@link CallControlDisplayType} to change how the call controls are displayed.
+     * `'compact'` display type will decreases the size of buttons and hide the labels.
+     *
+     * @remarks
+     * If the composite `formFactor` is set to `'mobile'`, the control bar will always use compact view.
+     *
+     * @defaultValue 'default'
+     */
+    displayType?: CallControlDisplayType;
+    /**
+     * Show or Hide Camera Button during a call
+     * @defaultValue true
+     */
+    cameraButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
+    /**
+     * Show or Hide EndCall button during a call.
+     * @defaultValue true
+     */
+    endCallButton?: boolean;
+    /**
+     * Show or Hide Microphone button during a call.
+     * @defaultValue true
+     */
+    microphoneButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
+    /**
+     * Show or Hide Devices button during a call.
+     * @defaultValue true
+     */
+    devicesButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
+    /**
+     * Show, Hide or Disable participants button during a call.
+     * @defaultValue true
+     */
+    participantsButton?: boolean | {
+        disabled: boolean;
+    };
+    /**
+     * Show, Hide or Disable the screen share button during a call.
+     * @defaultValue true
+     */
+    screenShareButton?: boolean | {
+        disabled: boolean;
+    };
+    /**
+     * Show, Hide or disable the more button during a call.
+     * @defaultValue true
+     */
+    moreButton?: boolean;
+    /**
+     * Inject custom buttons in the call controls.
+     *
+     * @beta
+     */
+    onFetchCustomButtonProps?: CustomCallControlButtonCallback[];
+    holdButton?: boolean | {
+        disabled: boolean;
+    };
+    /**
+     * Show or hide the people button in the composite control bar.
+     * @defaultValue true
+     */
+    peopleButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
+};
+
 /**
  * Object containing all the handlers required for calling components.
  *
@@ -3685,8 +3694,8 @@ export declare interface CommonCallingHandlers {
     askDevicePermission: (constrain: PermissionConstraints) => Promise<void>;
     onStartCall: (participants: (CommunicationUserIdentifier | PhoneNumberIdentifier | UnknownIdentifier)[], options?: StartCallOptions) => void;
     onRemoveVideoBackgroundEffects: () => Promise<void>;
-    onBlurVideoBackground: (bgBlurConfig?: BackgroundBlurConfig) => Promise<void>;
-    onReplaceVideoBackground: (bgReplacementConfig: BackgroundReplacementConfig) => Promise<void>;
+    onBlurVideoBackground: (backgroundBlurConfig?: BackgroundBlurConfig) => Promise<void>;
+    onReplaceVideoBackground: (backgroundReplacementConfig: BackgroundReplacementConfig) => Promise<void>;
 }
 
 /**
@@ -4255,7 +4264,7 @@ export declare interface ControlBarProps {
  *
  * @public
  */
-export declare const createAzureCommunicationCallAdapter: ({ userId, displayName, credential, locator, alternateCallerId }: AzureCommunicationCallAdapterArgs) => Promise<CallAdapter>;
+export declare const createAzureCommunicationCallAdapter: ({ userId, displayName, credential, locator, alternateCallerId, options }: AzureCommunicationCallAdapterArgs) => Promise<CallAdapter>;
 
 /**
  * Create a {@link CallAdapter} using the provided {@link StatefulCallClient}.
@@ -4436,15 +4445,16 @@ export declare type CustomAvatarOptions = {
 };
 
 /**
- * A callback that returns the props to render a custom {@link ControlBarButton}.
+ * A callback that returns the props to render a custom {@link ControlBarButton} and {@link DrawerMenuItem}.
  *
  * The response indicates where the custom button should be placed.
  *
  * Performance tip: This callback is only called when either the callback or its arguments change.
- *
  * @beta
  */
-export declare type CustomCallControlButtonCallback = (args: CustomCallControlButtonCallbackArgs) => CustomCallControlButtonProps;
+declare type CustomCallControlButtonCallback = (args: CustomCallControlButtonCallbackArgs) => CustomCallWithChatControlButtonProps;
+export { CustomCallControlButtonCallback }
+export { CustomCallControlButtonCallback as CustomCallWithChatControlButtonCallback }
 
 /**
  * Arguments for {@link CustomCallControlButtonCallback}.
@@ -4461,17 +4471,23 @@ export declare interface CustomCallControlButtonCallbackArgs {
 }
 
 /**
- * Placement for a custom button injected in the {@link CallControls}.
+ * Placement for a custom button injected in the {@link CommonCallControlBar}.
  *
  * 'primary': Place the button(s) on the right end of the center control bar but before the EndCallButton (left end in rtl mode).
+ * 'overflow': Place the buttons(s) on the end of the overflow Menu.
+ * 'secondary': Place the button(s) on the left end of the side control bar (right in rtl mode).
  *
  * Multiple buttons assigned the same placement are appended in order.
- * E.g., if two buttons are placed in 'primary', they'll both appear on the right end (left end in rtl mode)
- * before the EndCallButton in the order provided.
+ * E.g., if two buttons are placed in 'secondary', they'll both appear on the left end (right end in rtl mode)
+ * in the order provided.
+ *
+ * Only 'primary' placement works when legacy call control is enabled in call composite
  *
  * @beta
  */
-export declare type CustomCallControlButtonPlacement = 'primary';
+declare type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'secondary';
+export { CustomCallControlButtonPlacement }
+export { CustomCallControlButtonPlacement as CustomCallWithChatControlButtonPlacement }
 
 /**
  * Response from {@link CustomCallControlButtonCallback}.
@@ -4494,32 +4510,7 @@ export declare interface CustomCallControlButtonProps extends CustomControlButto
 }
 
 /**
- * A callback that returns the props to render a custom {@link ControlBarButton} and {@link DrawerMenuItem}.
- *
- * The response indicates where the custom button should be placed.
- *
- * Performance tip: This callback is only called when either the callback or its arguments change.
- * @beta
- */
-export declare type CustomCallWithChatControlButtonCallback = (args: CustomCallControlButtonCallbackArgs) => CustomCallWithChatControlButtonProps;
-
-/**
- * Placement for a custom button injected in the {@link CallWithChatControlBar}.
- *
- * 'primary': Place the button(s) on the right end of the center control bar but before the EndCallButton (left end in rtl mode).
- * 'overflow': Place the buttons(s) on the end of the overflow Menu.
- * 'secondary': Place the button(s) on the left end of the side control bar (right in rtl mode).
- *
- * Multiple buttons assigned the same placement are appended in order.
- * E.g., if two buttons are placed in 'secondary', they'll both appear on the left end (right end in rtl mode)
- * in the order provided.
- *
- * @beta
- */
-export declare type CustomCallWithChatControlButtonPlacement = 'primary' | 'overflow' | 'secondary';
-
-/**
- * Response from {@link CustomCallWithChatControlButtonCallback}.
+ * Response from {@link CustomCallControlButtonCallback}.
  *
  * Includes the icon and placement prop necessary to indicate where to place the
  * {@link ControlBarButton} and a {@link DrawerMenuItem}
@@ -4530,7 +4521,7 @@ export declare interface CustomCallWithChatControlButtonProps extends CustomCont
     /**
      * Where to place the custom button relative to other buttons.
      */
-    placement: CustomCallWithChatControlButtonPlacement;
+    placement: CustomCallControlButtonPlacement;
     /**
      * Icon to render. Icon is a non-default icon name that needs to be registered as a
      * custom icon using registerIcons through fluentui. Examples include icons from the fluentui library
@@ -4717,6 +4708,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     SendBoxSend: JSX.Element;
     SendBoxSendHovered: JSX.Element;
     SendBoxAttachFile?: JSX.Element | undefined;
+    ControlBarPeopleButton?: JSX.Element | undefined;
     ControlButtonCameraOff: JSX.Element;
     ControlButtonCameraOn: JSX.Element;
     ControlButtonEndCall: JSX.Element;
@@ -4763,10 +4755,11 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     PeoplePaneOpenDialpad?: JSX.Element | undefined;
     DialpadStartCall?: JSX.Element | undefined;
     NoticePageInvalidRoom?: JSX.Element | undefined;
+    BlurVideoBackground?: JSX.Element | undefined;
+    RemoveVideoBackgroundEffect?: JSX.Element | undefined;
     ChevronLeft?: JSX.Element | undefined;
     ControlBarChatButtonActive?: JSX.Element | undefined;
     ControlBarChatButtonInactive?: JSX.Element | undefined;
-    ControlBarPeopleButton?: JSX.Element | undefined;
     Link?: JSX.Element | undefined;
     MoreDrawerMicrophones?: JSX.Element | undefined;
     MoreDrawerPeople?: JSX.Element | undefined;
@@ -4793,13 +4786,6 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     UnsupportedEnvironmentWarning: JSX.Element;
     BrowserPermissionDeniedError: JSX.Element;
     VideoTilePinned: JSX.Element;
-    /**
-     * Icons that can be overridden in one of the composites exported by this library.
-     *
-     * See {@link ChatCompositeIcons}, {@link CallCompositeIcons} and {@link CallWithChatCompositeIcons} for more targeted types.
-     *
-     * @public
-     */
     VideoTileMoreOptions: JSX.Element;
     VideoTileScaleFit: JSX.Element;
     VideoTileScaleFill: JSX.Element;