Video Effects Button and Pane (#2825)

* Video effects button and Pane

* Change files

* Duplicate change files for beta release

* minor change

* minor changes

* minor changes

* minor change

* minor change

* minor changes

Author: prabhjot-msft

change-beta/@azure-communication-react-696ca73a-856e-4a9a-97e4-b6b66b3099b4.json

@@ -0,0 +1,7 @@
+{
+  "type": "pre-release",
+  "comment": "Video Effects Button and Pane",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-696ca73a-856e-4a9a-97e4-b6b66b3099b4.json

@@ -0,0 +1,7 @@
+{
+  "type": "pre-release",
+  "comment": "Video Effects Button and Pane",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -1076,6 +1076,7 @@ export interface CameraButtonProps extends ControlBarButtonProps {
     enableDeviceSelectionMenu?: boolean;
     localVideoViewOptions?: VideoStreamOptions;
     onSelectCamera?: (device: OptionsDevice) => Promise<void>;
+    onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
     onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;
     selectedCamera?: OptionsDevice;
     strings?: Partial<CameraButtonStrings>;
@@ -1846,6 +1847,7 @@ export const DEFAULT_COMPONENT_ICONS: {
     SplitButtonPrimaryActionMicMuted: JSX.Element;
     VerticalGalleryLeftButton: JSX.Element;
     VerticalGalleryRightButton: JSX.Element;
+    OptionsVideoBackgroundEffect: JSX.Element;
 };
 
 // @public
@@ -1949,6 +1951,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     SplitButtonPrimaryActionMicMuted: JSX.Element;
     VerticalGalleryLeftButton: JSX.Element;
     VerticalGalleryRightButton: JSX.Element;
+    OptionsVideoBackgroundEffect: JSX.Element;
 };
 
 // @beta

packages/react-components/review/beta/react-components.api.md

@@ -166,6 +166,7 @@ export interface CameraButtonProps extends ControlBarButtonProps {
     enableDeviceSelectionMenu?: boolean;
     localVideoViewOptions?: VideoStreamOptions;
     onSelectCamera?: (device: OptionsDevice) => Promise<void>;
+    onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
     onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;
     selectedCamera?: OptionsDevice;
     strings?: Partial<CameraButtonStrings>;
@@ -564,6 +565,7 @@ export const DEFAULT_COMPONENT_ICONS: {
     SplitButtonPrimaryActionMicMuted: JSX.Element;
     VerticalGalleryLeftButton: JSX.Element;
     VerticalGalleryRightButton: JSX.Element;
+    OptionsVideoBackgroundEffect: JSX.Element;
 };
 
 // @internal

packages/react-components/src/components/CameraButton.tsx

@@ -147,6 +147,11 @@ export interface CameraButtonProps extends ControlBarButtonProps {
    * Styles for {@link CameraButton} and the device selection flyout.
    */
   styles?: Partial<CameraButtonStyles>;
+  /* @conditional-compile-remove(video-background-effects) */
+  /**
+   * Callback when a effects is clicked
+   */
+  onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
 }
 
 /**
@@ -218,6 +223,18 @@ export const CameraButton = (props: CameraButtonProps): JSX.Element => {
             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);
+            }
+          }
         }
       ]
     }

packages/react-components/src/theming/icons.tsx

@@ -44,7 +44,8 @@ import {
 } from '@fluentui/react-icons';
 /* @conditional-compile-remove(call-readiness) */
 import { Important20Filled } from '@fluentui/react-icons';
-
+/* @conditional-compile-remove(video-background-effects) */
+import { VideoBackgroundEffect20Regular } from '@fluentui/react-icons';
 /* @conditional-compile-remove(pinned-participants) */
 import {
   Pin16Filled,
@@ -290,5 +291,7 @@ export const DEFAULT_COMPONENT_ICONS = {
   /* @conditional-compile-remove(vertical-gallery) */
   VerticalGalleryLeftButton: <ChevronLeft20Regular />,
   /* @conditional-compile-remove(vertical-gallery) */
-  VerticalGalleryRightButton: <ChevronRight20Regular />
+  VerticalGalleryRightButton: <ChevronRight20Regular />,
+  /* @conditional-compile-remove(video-background-effects) */
+  OptionsVideoBackgroundEffect: <VideoBackgroundEffect20Regular />
 };

packages/react-composites/review/beta/react-composites.api.md

@@ -1144,6 +1144,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
     SplitButtonPrimaryActionMicMuted: JSX.Element;
     VerticalGalleryLeftButton: JSX.Element;
     VerticalGalleryRightButton: JSX.Element;
+    OptionsVideoBackgroundEffect: JSX.Element;
 };
 
 // @beta

packages/react-composites/src/composites/CallComposite/components/buttons/Camera.tsx

@@ -15,6 +15,8 @@ export const Camera = (props: {
   styles?: ControlBarButtonStyles;
   splitButtonsForDeviceSelection?: boolean;
   disabled?: boolean;
+  /* @conditional-compile-remove(video-background-effects) */
+  onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
 }): JSX.Element => {
   const cameraButtonProps = usePropsFor(CameraButton);
   const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);
@@ -26,6 +28,8 @@ export const Camera = (props: {
       styles={styles}
       enableDeviceSelectionMenu={props.splitButtonsForDeviceSelection}
       disabled={cameraButtonProps.disabled || props.disabled}
+      /* @conditional-compile-remove(video-background-effects) */
+      onShowVideoEffectsPicker={props.onShowVideoEffectsPicker}
     />
   );
 };

packages/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx

@@ -40,6 +40,8 @@ import { CallCompositeOptions } from '../CallComposite/CallComposite';
 /* @conditional-compile-remove(call-readiness) */
 import { DeviceCheckOptions } from '../CallComposite/CallComposite';
 import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
+/* @conditional-compile-remove(video-background-effects) */
+import { VideoEffectsPane } from '../common/VideoEffectsPane';
 
 /**
  * Props required for the {@link CallWithChatComposite}
@@ -236,7 +238,16 @@ type CallWithChatScreenProps = {
 const CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {
   const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;
   const mobileView = formFactor === 'mobile';
-
+  /* @conditional-compile-remove(video-background-effects) */
+  const [showVideoEffectsPane, setVideoEffectsPane] = useState(false);
+
+  /* @conditional-compile-remove(video-background-effects) */
+  const setShowVideoEffectsPane = useCallback(
+    (showVideoEffectsOptions: boolean): void => {
+      setVideoEffectsPane(showVideoEffectsOptions);
+    },
+    [setVideoEffectsPane]
+  );
   if (!callWithChatAdapter) {
     throw new Error('CallWithChatAdapter is undefined');
   }
@@ -421,7 +432,13 @@ const CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {
               fluentTheme={fluentTheme}
             />
           </Stack.Item>
-
+          {
+            /* @conditional-compile-remove(video-background-effects) */
+            <VideoEffectsPane
+              showVideoEffectsOptions={showVideoEffectsPane}
+              setshowVideoEffectsOptions={setShowVideoEffectsPane}
+            />
+          }
           {chatProps.adapter && callAdapter && hasJoinedCall && (
             <CallWithChatPane
               chatCompositeProps={chatProps}
@@ -463,6 +480,8 @@ const CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {
                 containerWidth={containerWidth}
                 /* @conditional-compile-remove(PSTN-calls) */
                 onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}
+                /* @conditional-compile-remove(video-background-effects) */
+                onShowVideoEffectsPicker={setShowVideoEffectsPane}
               />
             </Stack.Item>
           </ChatAdapterProvider>

packages/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.tsx

@@ -48,6 +48,8 @@ export interface CallWithChatControlBarProps {
   disableButtonsForHoldScreen?: boolean;
   /* @conditional-compile-remove(PSTN-calls) */
   onClickShowDialpad?: () => void;
+  /* @conditional-compile-remove(video-background-effects) */
+  onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
 }
 
 const inferCallWithChatControlOptions = (
@@ -188,6 +190,8 @@ export const CallWithChatControlBar = (props: CallWithChatControlBarProps & Cont
                     splitButtonsForDeviceSelection={!props.mobileView}
                     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                     disabled={props.disableButtonsForHoldScreen || isDisabled(options.cameraButton)}
+                    /* @conditional-compile-remove(video-background-effects) */
+                    onShowVideoEffectsPicker={props.onShowVideoEffectsPicker}
                   />
                 )}
                 {props.mobileView && isEnabled(options?.chatButton) && chatButton}