Add toggle for DNS on by default and hide DNS button in adapter options (#5095)

* Add toggle for DNS on by default and hide DNS button in adapter options

* Change files

* minor

change-beta/@azure-communication-react-38289f14-dae3-4a94-a1ef-ed56ebb6ca3d.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "DNS",
+  "comment": "Add toggle for DNS on by default and hide DNS button in adapter options",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-38289f14-dae3-4a94-a1ef-ed56ebb6ca3d.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "DNS",
+  "comment": "Add toggle for DNS on by default and hide DNS button in adapter options",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -506,6 +506,8 @@ export type CallAdapterClientState = {
     videoBackgroundImages?: VideoBackgroundImage[];
     onResolveVideoEffectDependency?: () => Promise<VideoBackgroundEffectsDependency>;
     onResolveDeepNoiseSuppressionDependency?: () => Promise<DeepNoiseSuppressionEffectDependency>;
+    deepNoiseSuppressionOnByDefault?: boolean;
+    hideNoiseSuppressionButton?: boolean;
     selectedVideoBackgroundEffect?: VideoBackgroundEffect;
     acceptedTransferCallState?: CallState;
     hideAttendeeNames?: boolean;
@@ -1391,10 +1393,12 @@ export interface CallWithChatClientState {
     alternateCallerId?: string | undefined;
     call?: CallState;
     chat?: ChatThreadClientState;
+    deepNoiseSuppressionOnByDefault?: boolean;
     devices: DeviceManagerState;
     displayName: string | undefined;
     environmentInfo?: EnvironmentInfo;
     hideAttendeeNames?: boolean;
+    hideNoiseSuppressionButton?: boolean;
     isTeamsCall: boolean;
     isTeamsMeeting: boolean;
     latestCallErrors: AdapterErrors;
@@ -3786,6 +3790,7 @@ export interface MicrophoneButtonProps extends ControlBarButtonProps {
     onToggleMicrophone?: () => Promise<void>;
     selectedMicrophone?: OptionsDevice;
     selectedSpeaker?: OptionsDevice;
+    showNoiseSuppressionButton?: boolean;
     speakers?: OptionsDevice[];
     strings?: Partial<MicrophoneButtonStrings>;
     styles?: Partial<MicrophoneButtonStyles>;

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

@@ -191,6 +191,11 @@ export interface MicrophoneButtonProps extends ControlBarButtonProps {
    * Callback when noise suppression is clicked
    */
   onClickNoiseSuppression?: () => void;
+  /* @conditional-compile-remove(DNS) */
+  /**
+   * Show/Hide the deep noise suppression button
+   */
+  showNoiseSuppressionButton?: boolean;
 }
 
 /**
@@ -260,6 +265,51 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
     label: { fontWeight: 400 }
   };
 
+  const splitButtonMenuItems: IContextualMenuItem[] = [];
+
+  splitButtonMenuItems.push({
+    key: 'microphonePrimaryAction',
+    text: props.checked ? strings.onSplitButtonMicrophonePrimaryAction : strings.offSplitButtonMicrophonePrimaryAction,
+    onClick: () => {
+      onToggleClick();
+    },
+    iconProps: {
+      iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
+      styles: { root: { lineHeight: 0 } }
+    }
+  });
+
+  /* @conditional-compile-remove(DNS) */
+  if (props.showNoiseSuppressionButton) {
+    splitButtonMenuItems.push({
+      key: 'microphoneDNSToggle',
+      onRender: () => {
+        return (
+          <Stack
+            onClick={async () => {
+              await props.onClickNoiseSuppression?.();
+              setAnnouncerString(
+                props.isDeepNoiseSuppressionOn
+                  ? strings.deepNoiseSuppresionOnAnnouncement
+                  : strings.deepNoiseSuppresionOffAnnouncement
+              );
+            }}
+          >
+            <Toggle
+              label={
+                props.isDeepNoiseSuppressionOn
+                  ? strings.deepNoiseSuppresionOnTitle
+                  : strings.deepNoiseSuppresionOffTitle
+              }
+              checked={props.isDeepNoiseSuppressionOn}
+              inlineLabel
+              styles={deepNoiseSuppressionToggleStyles}
+            />
+          </Stack>
+        );
+      }
+    });
+  }
   /**
    * We need to also include the primary action of the button to the
    * split button for mobile devices.
@@ -270,50 +320,7 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
     itemType: ContextualMenuItemType.Section,
     sectionProps: {
       topDivider: true,
-      items: [
+      items: splitButtonMenuItems
-        {
-          key: 'microphonePrimaryAction',
-          text: props.checked
-            ? strings.onSplitButtonMicrophonePrimaryAction
-            : strings.offSplitButtonMicrophonePrimaryAction,
-          onClick: () => {
-            onToggleClick();
-          },
-          iconProps: {
-            iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
-            styles: { root: { lineHeight: 0 } }
-          }
-        },
-        /* @conditional-compile-remove(DNS) */
-        {
-          key: 'microphoneDNSToggle',
-          onRender: () => {
-            return (
-              <Stack
-                onClick={async () => {
-                  await props.onClickNoiseSuppression?.();
-                  setAnnouncerString(
-                    props.isDeepNoiseSuppressionOn
-                      ? strings.deepNoiseSuppresionOnAnnouncement
-                      : strings.deepNoiseSuppresionOffAnnouncement
-                  );
-                }}
-              >
-                <Toggle
-                  label={
-                    props.isDeepNoiseSuppressionOn
-                      ? strings.deepNoiseSuppresionOnTitle
-                      : strings.deepNoiseSuppresionOffTitle
-                  }
-                  checked={props.isDeepNoiseSuppressionOn}
-                  inlineLabel
-                  styles={deepNoiseSuppressionToggleStyles}
-                />
-              </Stack>
-            );
-          }
-        }
-      ]
     }
   };
 

packages/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.ts

@@ -164,6 +164,8 @@ class CallContext {
       /* @conditional-compile-remove(DNS) */
       deepNoiseSuppressionOptions?: {
         onResolveDependency?: () => Promise<DeepNoiseSuppressionEffectDependency>;
+        deepNoiseSuppressionOnByDefault?: boolean;
+        hideNoiseSuppressionButton?: boolean;
       };
       callingSounds?: CallingSounds;
       reactionResources?: ReactionResources;
@@ -193,6 +195,10 @@ class CallContext {
       onResolveVideoEffectDependency: options?.videoBackgroundOptions?.onResolveDependency,
       /* @conditional-compile-remove(DNS) */
       onResolveDeepNoiseSuppressionDependency: options?.deepNoiseSuppressionOptions?.onResolveDependency,
+      /* @conditional-compile-remove(DNS) */
+      deepNoiseSuppressionOnByDefault: options?.deepNoiseSuppressionOptions?.deepNoiseSuppressionOnByDefault ?? false,
+      /* @conditional-compile-remove(DNS) */
+      hideNoiseSuppressionButton: options?.deepNoiseSuppressionOptions?.hideNoiseSuppressionButton ?? false,
       selectedVideoBackgroundEffect: undefined,
       cameraStatus: undefined,
       sounds: options?.callingSounds,

packages/react-composites/src/composites/CallComposite/adapter/CallAdapter.ts

@@ -176,7 +176,20 @@ export type CallAdapterClientState = {
    * @beta
    */
   onResolveDeepNoiseSuppressionDependency?: () => Promise<DeepNoiseSuppressionEffectDependency>;
-
+  /* @conditional-compile-remove(DNS) */
+  /**
+   * State to track whether the noise suppression should be on by default.
+   * @beta
+   * @default false
+   */
+  deepNoiseSuppressionOnByDefault?: boolean;
+  /* @conditional-compile-remove(DNS) */
+  /**
+   * State to track whether to hide the noise suppression button.
+   * @beta
+   * @default false
+   */
+  hideNoiseSuppressionButton?: boolean;
   /**
    * State to track the selected video background effect.
    */

packages/react-composites/src/composites/CallComposite/components/CallControls.tsx

@@ -9,7 +9,7 @@ import { ControlBar, DevicesButton, ParticipantMenuItemsCallback } from '@intern
 import { HoldButton } from '@internal/react-components';
 import React, { useMemo } from 'react';
 /* @conditional-compile-remove(DNS) */
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { CallControlOptions } from '../types/CallControlOptions';
 import { Camera } from './buttons/Camera';
 import { Devices } from './buttons/Devices';
@@ -96,6 +96,27 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
   /* @conditional-compile-remove(DNS) */
   const [isDeepNoiseSuppressionOn, setDeepNoiseSuppressionOn] = useState<boolean>(false);
 
+  /* @conditional-compile-remove(DNS) */
+  const startDeepNoiseSuppression = useCallback(async () => {
+    await adapter.startNoiseSuppressionEffect();
+  }, [adapter]);
+
+  /* @conditional-compile-remove(DNS) */
+  useEffect(() => {
+    if (
+      adapter.getState().onResolveDeepNoiseSuppressionDependency &&
+      adapter.getState().deepNoiseSuppressionOnByDefault
+    ) {
+      startDeepNoiseSuppression();
+      setDeepNoiseSuppressionOn(true);
+    }
+  }, [adapter, startDeepNoiseSuppression]);
+  /* @conditional-compile-remove(DNS) */
+  const showNoiseSuppressionButton =
+    adapter.getState().onResolveDeepNoiseSuppressionDependency && !adapter.getState().hideNoiseSuppressionButton
+      ? true
+      : false;
+
   /* @conditional-compile-remove(DNS) */
   const onClickNoiseSuppression = useCallback(async () => {
     if (isDeepNoiseSuppressionOn) {
@@ -363,6 +384,8 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
               onClickNoiseSuppression={onClickNoiseSuppression}
               /* @conditional-compile-remove(DNS) */
               isDeepNoiseSuppressionOn={isDeepNoiseSuppressionOn}
+              /* @conditional-compile-remove(DNS) */
+              showNoiseSuppressionButton={showNoiseSuppressionButton}
             />
           )}
           {cameraButtonIsEnabled && (

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

@@ -26,6 +26,8 @@ export const Microphone = (props: {
   isDeepNoiseSuppressionOn?: boolean;
   /* @conditional-compile-remove(DNS) */
   onClickNoiseSuppression?: () => void;
+  /* @conditional-compile-remove(DNS) */
+  showNoiseSuppressionButton?: boolean;
 }): JSX.Element => {
   const microphoneButtonProps = usePropsFor(MicrophoneButton);
   const callStatus = useSelector(getCallStatus);
@@ -54,6 +56,8 @@ export const Microphone = (props: {
       isDeepNoiseSuppressionOn={props.isDeepNoiseSuppressionOn}
       /* @conditional-compile-remove(DNS) */
       onClickNoiseSuppression={props.onClickNoiseSuppression}
+      /* @conditional-compile-remove(DNS) */
+      showNoiseSuppressionButton={props.showNoiseSuppressionButton}
       showLabel={props.displayType !== 'compact'}
       disableTooltip={props.disableTooltip}
       styles={styles}

packages/react-composites/src/composites/CallWithChatComposite/state/CallWithChatAdapterState.ts

@@ -90,6 +90,12 @@ export interface CallWithChatClientState {
   /* @conditional-compile-remove(DNS) */
   /** Dependency to be injected for deep noise suppression effect. */
   onResolveDeepNoiseSuppressionDependency?: () => Promise<DeepNoiseSuppressionEffectDependency>;
+  /* @conditional-compile-remove(DNS) */
+  /** State to track whether the noise suppression should be on by default. */
+  deepNoiseSuppressionOnByDefault?: boolean;
+  /* @conditional-compile-remove(DNS) */
+  /** State to track whether to hide the noise suppression button. */
+  hideNoiseSuppressionButton?: boolean;
 
   /** State to track the selected video background effect */
   selectedVideoBackgroundEffect?: VideoBackgroundEffect;

packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx

@@ -228,6 +228,27 @@ export const CommonCallControlBar = (props: CommonCallControlBarProps & Containe
   /* @conditional-compile-remove(DNS) */
   const [isDeepNoiseSuppressionOn, setDeepNoiseSuppressionOn] = useState<boolean>(false);
 
+  /* @conditional-compile-remove(DNS) */
+  const startDeepNoiseSuppression = useCallback(async () => {
+    await props.callAdapter.startNoiseSuppressionEffect();
+  }, [props.callAdapter]);
+
+  /* @conditional-compile-remove(DNS) */
+  useEffect(() => {
+    if (
+      props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&
+      props.callAdapter.getState().deepNoiseSuppressionOnByDefault
+    ) {
+      startDeepNoiseSuppression();
+      setDeepNoiseSuppressionOn(true);
+    }
+  }, [props.callAdapter, startDeepNoiseSuppression]);
+  /* @conditional-compile-remove(DNS) */
+  const showNoiseSuppressionButton =
+    props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&
+    !props.callAdapter.getState().hideNoiseSuppressionButton
+      ? true
+      : false;
   /* @conditional-compile-remove(DNS) */
   const onClickNoiseSuppression = useCallback(async () => {
     if (isDeepNoiseSuppressionOn) {
@@ -417,6 +438,8 @@ export const CommonCallControlBar = (props: CommonCallControlBarProps & Containe
                         onClickNoiseSuppression={onClickNoiseSuppression}
                         /* @conditional-compile-remove(DNS) */
                         isDeepNoiseSuppressionOn={isDeepNoiseSuppressionOn}
+                        /* @conditional-compile-remove(DNS) */
+                        showNoiseSuppressionButton={showNoiseSuppressionButton}
                       />
                     )}
                     {cameraButtonIsEnabled && (

samples/Calling/src/app/views/CallScreen.tsx

@@ -161,7 +161,8 @@ const AzureCommunicationCallScreen = (props: AzureCommunicationCallScreenProps):
       },
       // /* @conditional-compile-remove(DNS) */
       deepNoiseSuppressionOptions: {
-        onResolveDependency: onResolveDeepNoiseSuppressionDependencyLazy
+        onResolveDependency: onResolveDeepNoiseSuppressionDependencyLazy,
+        deepNoiseSuppressionOnByDefault: true
       },
       callingSounds: {
         callEnded: { url: '/assets/sounds/callEnded.mp3' },