[Notifications] hide notification

change-beta/@azure-communication-react-bad3f807-0932-4766-8415-842ed93cb4f7.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "Notifications",
+  "comment": "Add API to disable the notifications in the CallComposite",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-bad3f807-0932-4766-8415-842ed93cb4f7.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "Notifications",
+  "comment": "Add API to disable the notifications in the CallComposite",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -775,6 +775,7 @@ export type CallCompositeOptions = {
     remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
     localVideoTile?: boolean | LocalVideoTileOptions;
     videoTilesOptions?: VideoTilesOptions;
+    notificationOptions?: NotificationOptions_2;
     disableAutoShowDtmfDialer?: boolean | DtmfDialPadOptions;
     galleryOptions?: {
         layout?: VideoGalleryLayout;
@@ -2982,6 +2983,8 @@ export const DEFAULT_COMPONENT_ICONS: {
     NotificationBarBreakoutRoomJoined: React_2.JSX.Element;
     NotificationBarBreakoutRoomClosingSoon: React_2.JSX.Element;
     NotificationBarBreakoutRoomClosed: React_2.JSX.Element;
+    NotificationBarTranscriptionError: React_2.JSX.Element;
+    NotificationBartranscriptionStartedByYou: React_2.JSX.Element;
     HorizontalGalleryLeftButton: React_2.JSX.Element;
     HorizontalGalleryRightButton: React_2.JSX.Element;
     MessageDelivered: React_2.JSX.Element;
@@ -3189,6 +3192,8 @@ export const DEFAULT_COMPOSITE_ICONS: {
     NotificationBarBreakoutRoomJoined: React_2.JSX.Element;
     NotificationBarBreakoutRoomClosingSoon: React_2.JSX.Element;
     NotificationBarBreakoutRoomClosed: React_2.JSX.Element;
+    NotificationBarTranscriptionError: React_2.JSX.Element;
+    NotificationBartranscriptionStartedByYou: React_2.JSX.Element;
     MessageResend: React_2.JSX.Element;
     ParticipantItemSpotlighted: React_2.JSX.Element;
     HoldCallContextualMenuItem: React_2.JSX.Element;
@@ -4165,6 +4170,12 @@ export interface NetworkDiagnosticsState {
 const Notification_2: (props: NotificationProps) => JSX.Element;
 export { Notification_2 as Notification }
 
+// @public
+interface NotificationOptions_2 {
+    hideAllNotifications?: boolean;
+}
+export { NotificationOptions_2 as NotificationOptions }
+
 // @public
 export interface NotificationProps {
     ariaLive?: 'assertive' | 'off' | 'polite';
@@ -4246,7 +4257,9 @@ export interface NotificationStackStrings {
     teamsMeetingCallNetworkQualityLow?: NotificationStrings;
     togetherModeEnded?: NotificationStrings;
     togetherModeStarted?: NotificationStrings;
+    transcriptionError?: NotificationStrings;
     transcriptionStarted?: NotificationStrings;
+    transcriptionStartedByYou?: NotificationStrings;
     transcriptionStopped?: NotificationStrings;
     transcriptionStoppedStillRecording?: NotificationStrings;
     unableToStartVideoEffect?: NotificationStrings;

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

@@ -608,6 +608,7 @@ export type CallCompositeOptions = {
     remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
     localVideoTile?: boolean | LocalVideoTileOptions;
     videoTilesOptions?: VideoTilesOptions;
+    notificationOptions?: NotificationOptions_2;
     disableAutoShowDtmfDialer?: boolean | DtmfDialPadOptions;
     galleryOptions?: {
         layout?: VideoGalleryLayout;
@@ -2632,6 +2633,8 @@ export const DEFAULT_COMPONENT_ICONS: {
     NotificationBarBreakoutRoomJoined: React_2.JSX.Element;
     NotificationBarBreakoutRoomClosingSoon: React_2.JSX.Element;
     NotificationBarBreakoutRoomClosed: React_2.JSX.Element;
+    NotificationBarTranscriptionError: React_2.JSX.Element;
+    NotificationBartranscriptionStartedByYou: React_2.JSX.Element;
     HorizontalGalleryLeftButton: React_2.JSX.Element;
     HorizontalGalleryRightButton: React_2.JSX.Element;
     MessageDelivered: React_2.JSX.Element;
@@ -2809,6 +2812,8 @@ export const DEFAULT_COMPOSITE_ICONS: {
     NotificationBarBreakoutRoomJoined: React_2.JSX.Element;
     NotificationBarBreakoutRoomClosingSoon: React_2.JSX.Element;
     NotificationBarBreakoutRoomClosed: React_2.JSX.Element;
+    NotificationBarTranscriptionError: React_2.JSX.Element;
+    NotificationBartranscriptionStartedByYou: React_2.JSX.Element;
     MessageResend: React_2.JSX.Element;
     ParticipantItemSpotlighted: React_2.JSX.Element;
     HoldCallContextualMenuItem: React_2.JSX.Element;
@@ -3675,6 +3680,12 @@ export interface NetworkDiagnosticsState {
 const Notification_2: (props: NotificationProps) => JSX.Element;
 export { Notification_2 as Notification }
 
+// @public
+interface NotificationOptions_2 {
+    hideAllNotifications?: boolean;
+}
+export { NotificationOptions_2 as NotificationOptions }
+
 // @public
 export interface NotificationProps {
     ariaLive?: 'assertive' | 'off' | 'polite';
@@ -3754,7 +3765,9 @@ export interface NotificationStackStrings {
     stopScreenShareGeneric?: NotificationStrings;
     stopVideoGeneric?: NotificationStrings;
     teamsMeetingCallNetworkQualityLow?: NotificationStrings;
+    transcriptionError?: NotificationStrings;
     transcriptionStarted?: NotificationStrings;
+    transcriptionStartedByYou?: NotificationStrings;
     transcriptionStopped?: NotificationStrings;
     transcriptionStoppedStillRecording?: NotificationStrings;
     unableToStartVideoEffect?: NotificationStrings;

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

@@ -301,6 +301,14 @@ export interface NotificationStackStrings {
    * Message shown in notification when together mode ends
    */
   togetherModeEnded?: NotificationStrings;
+  /**
+   * Message shown in notification when there was an error with transcription.
+   */
+  transcriptionError?: NotificationStrings;
+  /**
+   * Message shown when the local user starts transcription
+   */
+  transcriptionStartedByYou?: NotificationStrings;
 }
 
 /**

packages/react-components/src/components/utils.ts

@@ -369,7 +369,9 @@ export const customNotificationIconName: Partial<{ [key in NotificationType]: st
   /* @conditional-compile-remove(together-mode) */
   togetherModeStarted: 'NotificationBarTogetherModeIcon',
   /* @conditional-compile-remove(together-mode) */
-  togetherModeEnded: 'NotificationBarTogetherModeIcon'
+  togetherModeEnded: 'NotificationBarTogetherModeIcon',
+  transcriptionError: 'NotificationBarTranscriptionError',
+  transcriptionStartedByYou: 'NotificationBartranscriptionStartedByYou'
 };
 
 /**

packages/react-components/src/localization/locales/en-US/strings.json

@@ -647,6 +647,16 @@
     "togetherModeEnded": {
       "title": "Togethermode has ended",
       "dismissButtonAriaLabel": "Close"
+    },
+    "transcriptionError": {
+      "title": "Something went wrong with transcription.",
+      "message": "Transcription has stopped. please try again later",
+      "dismissButtonAriaLabel": "Close"
+    },
+    "transcriptionStartedByYou": {
+      "title": "Transcription has started.",
+      "message": "Started by you. Let everyone know they are being transcribed.",
+      "dismissButtonAriaLabel": "Close"
     }
   },
   "videoGallery": {

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

@@ -56,6 +56,7 @@ import {
   Settings20Regular,
   ShareScreenStart20Filled,
   ShareScreenStop20Filled,
+  SlideTextEdit16Regular,
   Speaker220Regular,
   SpeakerMute16Filled,
   Star28Filled,
@@ -70,6 +71,7 @@ import {
   VideoPersonStar20Filled,
   VideoPersonStarOff20Filled,
   VideoProhibited16Filled,
+  Warning16Regular,
   WifiWarning20Filled
 } from '@fluentui/react-icons';
 /* @conditional-compile-remove(together-mode) */
@@ -312,6 +314,8 @@ export const DEFAULT_COMPONENT_ICONS = {
   NotificationBarBreakoutRoomClosingSoon: <DoorArrowLeft16Regular />,
   /* @conditional-compile-remove(breakout-rooms) */
   NotificationBarBreakoutRoomClosed: <DoorArrowLeft16Regular />,
+  NotificationBarTranscriptionError: <Warning16Regular />,
+  NotificationBartranscriptionStartedByYou: <SlideTextEdit16Regular />,
   HorizontalGalleryLeftButton: <GalleryLeftButton />,
   HorizontalGalleryRightButton: <GalleryRightButton />,
   MessageDelivered: <CheckmarkCircle16Regular />,

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

@@ -150,6 +150,18 @@ export interface LocalVideoTileOptions {
   position?: 'grid' | 'floating';
 }
 
+/**
+ * Options for controlling the notifications in the composite.
+ * @public
+ */
+export interface NotificationOptions {
+  /**
+   * Whether to show the notifications in the composite. useful
+   * for hiding the notifications in the composite to replace with your own custom notifications.
+   */
+  hideAllNotifications?: boolean;
+}
+
 /**
  * Options to determine the rendering behavior of the dtmfDialer in the CallComposite
  * @public
@@ -247,6 +259,10 @@ export type CallCompositeOptions = {
    * Options for controlling video tile.
    */
   videoTilesOptions?: VideoTilesOptions;
+  /**
+   * Options for controlling the notifications in the composite.
+   */
+  notificationOptions?: NotificationOptions;
   /**
    * Whether to auto show the DTMF Dialer when the call starts in supported scenarios.
    * - Teams Voice Application like Call queue or Auto Attendant
@@ -742,6 +758,7 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
           setPinnedParticipants={setPinnedParticipants}
           compositeAudioContext={compositeAudioContext}
           disableAutoShowDtmfDialer={props.options?.disableAutoShowDtmfDialer}
+          notificationOptions={props.options?.notificationOptions}
         />
       );
       break;
@@ -793,6 +810,7 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
         setPinnedParticipants={setPinnedParticipants}
         compositeAudioContext={compositeAudioContext}
         disableAutoShowDtmfDialer={props.options?.disableAutoShowDtmfDialer}
+        notificationOptions={props.options?.notificationOptions}
       />
     );
   }

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

@@ -93,7 +93,7 @@ import { MoreDrawer } from '../../common/Drawer/MoreDrawer';
 import { useCompositeStringsForNotificationStackStrings } from '../hooks/useCompositeStringsForNotificationStack';
 /* @conditional-compile-remove(breakout-rooms) */
 import { BreakoutRoomsBanner } from './BreakoutRoomsBanner';
-import { DtmfDialPadOptions } from '../CallComposite';
+import { DtmfDialPadOptions, NotificationOptions } from '../CallComposite';
 
 /**
  * @private
@@ -133,6 +133,7 @@ export interface CallArrangementProps {
   captionsOptions?: {
     height: 'full' | 'default';
   };
+  notificationOptions?: NotificationOptions;
 }
 
 /**
@@ -543,39 +544,41 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
             <Stack.Item style={callCompositeContainerCSS}>
               <Stack.Item styles={callGalleryStyles} grow>
                 <Stack verticalFill styles={galleryContainerStyles}>
-                  <Stack.Item styles={notificationsContainerStyles}>
-                    {
-                      /* @conditional-compile-remove(breakout-rooms) */
-                      props.mobileView && <BreakoutRoomsBanner locale={locale} adapter={adapter} />
-                    }
-                    {props.showErrorNotifications && (
-                      <Stack styles={notificationStackStyles} horizontalAlign="center" verticalAlign="center">
-                        <NotificationStack
-                          onDismissNotification={props.onDismissError}
-                          activeNotifications={filteredLatestErrorNotifications}
-                        />
-                      </Stack>
-                    )}
-                    {latestNotifications && (
-                      <Stack styles={notificationStackStyles} horizontalAlign="center" verticalAlign="center">
-                        <NotificationStack
-                          activeNotifications={latestNotifications}
-                          onDismissNotification={props.onDismissNotification}
-                          /* @conditional-compile-remove(breakout-rooms) */
-                          strings={notificationStackStrings}
-                        />
-                      </Stack>
-                    )}
-                    {props.capabilitiesChangedNotificationBarProps &&
-                      props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && (
-                        <Stack styles={bannerNotificationStyles}>
-                          <CapabilitiesChangedNotificationBar
-                            {...props.capabilitiesChangedNotificationBarProps}
-                            capabilitiesChangedNotifications={filteredCapabilitesChangedNotifications ?? []}
+                  {!props.notificationOptions?.hideAllNotifications && (
+                    <Stack.Item styles={notificationsContainerStyles}>
+                      {
+                        /* @conditional-compile-remove(breakout-rooms) */
+                        props.mobileView && <BreakoutRoomsBanner locale={locale} adapter={adapter} />
+                      }
+                      {props.showErrorNotifications && (
+                        <Stack styles={notificationStackStyles} horizontalAlign="center" verticalAlign="center">
+                          <NotificationStack
+                            onDismissNotification={props.onDismissError}
+                            activeNotifications={filteredLatestErrorNotifications}
                           />
                         </Stack>
                       )}
-                  </Stack.Item>
+                      {latestNotifications && (
+                        <Stack styles={notificationStackStyles} horizontalAlign="center" verticalAlign="center">
+                          <NotificationStack
+                            activeNotifications={latestNotifications}
+                            onDismissNotification={props.onDismissNotification}
+                            /* @conditional-compile-remove(breakout-rooms) */
+                            strings={notificationStackStrings}
+                          />
+                        </Stack>
+                      )}
+                      {props.capabilitiesChangedNotificationBarProps &&
+                        props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && (
+                          <Stack styles={bannerNotificationStyles}>
+                            <CapabilitiesChangedNotificationBar
+                              {...props.capabilitiesChangedNotificationBarProps}
+                              capabilitiesChangedNotifications={filteredCapabilitesChangedNotifications ?? []}
+                            />
+                          </Stack>
+                        )}
+                    </Stack.Item>
+                  )}
                   {renderGallery && props.onRenderGalleryContent && props.onRenderGalleryContent()}
                   {!isInLocalHold && (
                     <CallingCaptionsBanner

packages/react-composites/src/composites/CallComposite/index.ts

@@ -8,6 +8,7 @@ export type { DeviceCheckOptions } from './CallComposite';
 export type { LocalVideoTileOptions } from './CallComposite';
 export type { CallControlOptions } from './types/CallControlOptions';
 export type { DtmfDialPadOptions } from './CallComposite';
+export type { NotificationOptions } from './CallComposite';
 
 export * from './Strings';
 

packages/react-composites/src/composites/CallComposite/pages/CallPage.tsx

@@ -18,7 +18,7 @@ import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
 /* @conditional-compile-remove(breakout-rooms) */
 import { AvatarPersona } from '../../common/AvatarPersona';
 import { useLocale } from '../../localization';
-import { CallCompositeOptions, DtmfDialPadOptions } from '../CallComposite';
+import { CallCompositeOptions, DtmfDialPadOptions, NotificationOptions } from '../CallComposite';
 import { CallArrangement } from '../components/CallArrangement';
 import { MediaGallery } from '../components/MediaGallery';
 import { NetworkReconnectTile } from '../components/NetworkReconnectTile';
@@ -70,6 +70,7 @@ export interface CallPageProps {
   setPinnedParticipants?: (pinnedParticipants: string[]) => void;
   compositeAudioContext?: AudioContext;
   disableAutoShowDtmfDialer?: boolean | DtmfDialPadOptions;
+  notificationOptions?: NotificationOptions;
 }
 
 /**
@@ -257,6 +258,7 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
         doNotShowCameraAccessNotifications={props.options?.deviceChecks?.camera === 'doNotPrompt'}
         captionsOptions={options?.captionsBanner}
         dtmfDialerOptions={disableAutoShowDtmfDialer}
+        notificationOptions={props.notificationOptions}
       />
       {<Prompt isOpen={isPromptOpen} onDismiss={() => setIsPromptOpen(false)} {...promptProps} />}
     </>

packages/storybook8/stories/controlsUtils.ts

@@ -212,7 +212,9 @@ const notificationOptions: NotificationType[] = [
   'capabilityUnmuteMicAbsent',
   'capabilityUnmuteMicPresent',
   'togetherModeStarted',
-  'togetherModeEnded'
+  'togetherModeEnded',
+  'transcriptionError',
+  'transcriptionStartedByYou'
 ];
 
 export const defaultActiveNotifications = ['callNoSpeakerFound'];