@azure/communication-react 1.5.1-alpha-202303220012 → 1.5.1-alpha-202303230013

package/dist/communication-react.d.ts

@@ -2888,6 +2888,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;
 }
 
 /**
@@ -4628,6 +4632,7 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     SplitButtonPrimaryActionMicMuted: JSX.Element;
     VerticalGalleryLeftButton: JSX.Element;
     VerticalGalleryRightButton: JSX.Element;
+    OptionsVideoBackgroundEffect: JSX.Element;
 };
 
 /**
@@ -4735,6 +4740,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     SplitButtonPrimaryActionMicMuted: JSX.Element;
     VerticalGalleryLeftButton: JSX.Element;
     VerticalGalleryRightButton: JSX.Element;
+    OptionsVideoBackgroundEffect: JSX.Element;
 };
 
 /**

package/dist/dist-cjs/communication-react/index.js

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202303220012';
+var telemetryVersion = '1.5.1-alpha-202303230013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -5332,7 +5332,9 @@ const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(vertical-gallery) */
     VerticalGalleryLeftButton: React__default['default'].createElement(reactIcons.ChevronLeft20Regular, null),
     /* @conditional-compile-remove(vertical-gallery) */
-    VerticalGalleryRightButton: React__default['default'].createElement(reactIcons.ChevronRight20Regular, null)
+    VerticalGalleryRightButton: React__default['default'].createElement(reactIcons.ChevronRight20Regular, null),
+    /* @conditional-compile-remove(video-background-effects) */
+    OptionsVideoBackgroundEffect: React__default['default'].createElement(reactIcons.VideoBackgroundEffect20Regular, null)
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -11727,6 +11729,18 @@ const CameraButton = (props) => {
                         iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',
                         styles: { root: { lineHeight: 0 } }
                     }
+                },
+                /* @conditional-compile-remove(video-background-effects) */
+                {
+                    key: 'effects',
+                    text: 'Effects',
+                    title: 'Video Effects',
+                    iconProps: { iconName: 'OptionsVideoBackgroundEffect', styles: { root: { lineHeight: 0 } } },
+                    onClick: () => {
+                        if (props.onShowVideoEffectsPicker) {
+                            props.onShowVideoEffectsPicker(true);
+                        }
+                    }
                 }
             ]
         }
@@ -17880,7 +17894,9 @@ const concatButtonBaseStyles = (...styles) => {
 const Camera = (props) => {
     const cameraButtonProps = usePropsFor$1(CameraButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
-    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled || props.disabled })));
+    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled || props.disabled, 
+        /* @conditional-compile-remove(video-background-effects) */
+        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18358,7 +18374,7 @@ const CallControls = (props) => {
                     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
                     !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })),
+                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) })),
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React__default['default'].createElement(MoreButton, { strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
@@ -22810,7 +22826,9 @@ const CallWithChatControlBar = (props) => {
                                 disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.microphoneButton) })),
                             isEnabled$1(options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.cameraButton) })),
+                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.cameraButton), 
+                                /* @conditional-compile-remove(video-background-effects) */
+                                onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })),
                             props.mobileView && isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
                             isEnabled$1(options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
                                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -22835,7 +22853,7 @@ const CallWithChatControlBar = (props) => {
             _b.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
                 return (React__default['default'].createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
             }),
-            isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
+            isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
             isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton))));
 };
 const desktopButtonContainerStyle = {
@@ -23435,10 +23453,30 @@ const CallWithChatPane = (props) => {
             React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * Pane that is used to show video effects button
+ * @private
+ */
+/** @beta */
+const VideoEffectsPane = (props) => {
+    return VideoEffectsPaneTrampoline(props.showVideoEffectsOptions, props.setshowVideoEffectsOptions);
+};
+const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffectsOptions) => {
+    /* @conditional-compile-remove(video-background-effects) */
+    return (React__default['default'].createElement(react.Panel, { headerText: "Effects", isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true }));
+};
+
 // Copyright (c) Microsoft Corporation.
 const CallWithChatScreen = (props) => {
     const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;
     const mobileView = formFactor === 'mobile';
+    /* @conditional-compile-remove(video-background-effects) */
+    const [showVideoEffectsPane, setVideoEffectsPane] = React.useState(false);
+    /* @conditional-compile-remove(video-background-effects) */
+    const setShowVideoEffectsPane = React.useCallback((showVideoEffectsOptions) => {
+        setVideoEffectsPane(showVideoEffectsOptions);
+    }, [setVideoEffectsPane]);
     if (!callWithChatAdapter) {
         throw new Error('CallWithChatAdapter is undefined');
     }
@@ -23583,6 +23621,8 @@ const CallWithChatScreen = (props) => {
                     // Perf: Instead of removing the video gallery from DOM, we hide it to prevent re-renders.
                     style: callCompositeContainerCSS },
                     React__default['default'].createElement(CallComposite, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme }))),
+                /* @conditional-compile-remove(video-background-effects) */
+                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane }),
                 chatProps.adapter && callAdapter && hasJoinedCall && (React__default['default'].createElement(CallWithChatPane, { chatCompositeProps: chatProps, inviteLink: props.joinInvitationURL, onClose: closePane, chatAdapter: chatProps.adapter, callAdapter: callAdapter, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, onChatButtonClicked: showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined, modalLayerHostId: modalLayerHostId, mobileView: mobileView, activePane: activePane, 
                     /* @conditional-compile-remove(file-sharing) */
                     fileSharing: props.fileSharing, rtl: props.rtl, callControls: typeof props.callControls !== 'boolean' ? props.callControls : undefined }))),
@@ -23592,7 +23632,9 @@ const CallWithChatScreen = (props) => {
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
                         /* @conditional-compile-remove(PSTN-calls) */
-                        onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined })))),
+                        onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
+                        /* @conditional-compile-remove(video-background-effects) */
+                        onShowVideoEffectsPicker: setShowVideoEffectsPane })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
                     React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles() },