Capabilities change notification bar

change-beta/@azure-communication-react-ac899c1d-16d7-4253-8b92-044a7e74edc1.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "feature",
+  "workstream": "Capabilities",
+  "comment": "Show notification bar when camera, mic and screen share capabilities changes",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-ac899c1d-16d7-4253-8b92-044a7e74edc1.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "feature",
+  "workstream": "Capabilities",
+  "comment": "Show notification bar when camera, mic and screen share capabilities changes",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/calling-component-bindings/src/baseSelectors.ts

@@ -50,7 +50,7 @@ export const getRole = (state: CallClientState, props: CallingBaseSelectorProps)
 export const getCapabilites = (
   state: CallClientState,
   props: CallingBaseSelectorProps
-): ParticipantCapabilities | undefined => state.calls[props.callId]?.capabilities?.capabilities;
+): ParticipantCapabilities | undefined => state.calls[props.callId]?.capabilitiesFeature?.capabilities;
 
 /**
  * @private

packages/calling-stateful-client/review/beta/calling-stateful-client.api.md

@@ -16,6 +16,7 @@ import { CallEndReason } from '@azure/communication-calling';
 import { CallerInfo } from '@azure/communication-calling';
 import { CallKind } from '@azure/communication-calling';
 import { CallState as CallState_2 } from '@azure/communication-calling';
+import { CapabilitiesChangeInfo } from '@azure/communication-calling';
 import { CaptionsResultType } from '@azure/communication-calling';
 import { CommunicationIdentifier } from '@azure/communication-common';
 import { CommunicationIdentifierKind } from '@azure/communication-common';
@@ -107,7 +108,7 @@ export type CallErrorTarget = 'Call.addParticipant' | 'Call.dispose' | 'Call.fea
 export interface CallState {
     callEndReason?: CallEndReason;
     callerInfo: CallerInfo;
-    capabilities?: CapabilitiesCallFeature;
+    capabilitiesFeature?: CapabilitiesFeatureState;
     captionsFeature: CaptionsCallFeatureState;
     diagnostics: DiagnosticsCallFeatureState;
     direction: CallDirection;
@@ -137,8 +138,9 @@ export interface CallState {
 }
 
 // @beta
-export interface CapabilitiesCallFeature {
+export interface CapabilitiesFeatureState {
     capabilities: ParticipantCapabilities;
+    latestCapabilitiesChangeInfo: CapabilitiesChangeInfo;
 }
 
 // @beta (undocumented)

packages/calling-stateful-client/src/CallClientState.ts

@@ -17,7 +17,7 @@ import {
   VideoDeviceInfo
 } from '@azure/communication-calling';
 /* @conditional-compile-remove(capabilities) */
-import { ParticipantCapabilities } from '@azure/communication-calling';
+import { CapabilitiesChangeInfo, ParticipantCapabilities } from '@azure/communication-calling';
 /* @conditional-compile-remove(close-captions) */
 import { CaptionsResultType } from '@azure/communication-calling';
 /* @conditional-compile-remove(video-background-effects) */
@@ -148,6 +148,10 @@ export interface CapabilitiesFeatureState {
    * Proxy of {@link @azure/communication-calling#CapabilitiesFeature.capabilities}.
    */
   capabilities: ParticipantCapabilities;
+  /**
+   * Proxy of the latest {@link @azure/communication-calling#CapabilitiesChangeInfo}
+   */
+  latestCapabilitiesChangeInfo: CapabilitiesChangeInfo;
 }
 
 /**
@@ -485,7 +489,7 @@ export interface CallState {
   /**
    * Proxy of {@link @azure/communication-calling#CapabilitiesFeature}.
    */
-  capabilities?: CapabilitiesFeatureState;
+  capabilitiesFeature?: CapabilitiesFeatureState;
 }
 
 /* @conditional-compile-remove(call-transfer) */

packages/calling-stateful-client/src/CallContext.ts

@@ -12,7 +12,7 @@ import {
 /* @conditional-compile-remove(raise-hand) */
 import { RaisedHand } from '@azure/communication-calling';
 /* @conditional-compile-remove(capabilities) */
-import { ParticipantCapabilities } from '@azure/communication-calling';
+import { CapabilitiesChangeInfo, ParticipantCapabilities } from '@azure/communication-calling';
 /* @conditional-compile-remove(close-captions) */
 import { TeamsCaptionsInfo } from '@azure/communication-calling';
 /* @conditional-compile-remove(unsupported-browser) */
@@ -392,11 +392,15 @@ export class CallContext {
   }
 
   /* @conditional-compile-remove(capabilities) */
-  public setCapabilities(callId: string, capabilities: ParticipantCapabilities): void {
+  public setCapabilities(
+    callId: string,
+    capabilities: ParticipantCapabilities,
+    capabilitiesChangeInfo: CapabilitiesChangeInfo
+  ): void {
     this.modifyState((draft: CallClientState) => {
       const call = draft.calls[this._callIdHistory.latestCallId(callId)];
       if (call) {
-        call.capabilities = { capabilities: capabilities };
+        call.capabilitiesFeature = { capabilities, latestCapabilitiesChangeInfo: capabilitiesChangeInfo };
       }
     });
   }

packages/calling-stateful-client/src/CapabilitiesSubscriber.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 /* @conditional-compile-remove(capabilities) */
-import { CapabilitiesFeature } from '@azure/communication-calling';
+import { CapabilitiesChangeInfo, CapabilitiesFeature } from '@azure/communication-calling';
 /* @conditional-compile-remove(capabilities) */
 import { CallContext } from './CallContext';
 /* @conditional-compile-remove(capabilities) */
@@ -33,7 +33,7 @@ export class CapabilitiesSubscriber {
     this._capabilitiesFeature.off('capabilitiesChanged', this.capabilitiesChanged);
   };
 
-  private capabilitiesChanged = (): void => {
-    this._context.setCapabilities(this._callIdRef.callId, this._capabilitiesFeature.capabilities);
+  private capabilitiesChanged = (data: CapabilitiesChangeInfo): void => {
+    this._context.setCapabilities(this._callIdRef.callId, this._capabilitiesFeature.capabilities, data);
   };
 }

packages/calling-stateful-client/src/index-public.ts

@@ -35,7 +35,7 @@ export type { DeclarativeIncomingCall } from './IncomingCallDeclarative';
 /* @conditional-compile-remove(video-background-effects) */
 export type { LocalVideoStreamVideoEffectsState } from './CallClientState';
 /* @conditional-compile-remove(capabilities) */
-export type { CapabilitiesFeatureState as CapabilitiesCallFeature } from './CallClientState';
+export type { CapabilitiesFeatureState } from './CallClientState';
 /* @conditional-compile-remove(close-captions) */
 export type { CaptionsCallFeatureState, CaptionsInfo } from './CallClientState';
 /* @conditional-compile-remove(call-transfer) */

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

@@ -19,7 +19,7 @@ import { CallEndReason } from '@azure/communication-calling';
 import { CallerInfo } from '@azure/communication-calling';
 import { CallKind } from '@azure/communication-calling';
 import { CallState as CallState_2 } from '@azure/communication-calling';
-import type { CapabilitiesChangeInfo } from '@azure/communication-calling';
+import { CapabilitiesChangeInfo } from '@azure/communication-calling';
 import { CaptionsResultType } from '@azure/communication-calling';
 import { ChatClient } from '@azure/communication-chat';
 import { ChatClientOptions } from '@azure/communication-chat';
@@ -617,6 +617,7 @@ export interface CallCompositeStrings {
     cameraOffBackgroundEffectWarningText?: string;
     cameraPermissionDenied: string;
     cameraTurnedOff: string;
+    capabilityChangedNotification?: CapabilityChangedNotificationStrings;
     captionLanguageStrings?: CaptionLanguageStrings;
     captionsBannerMoreButtonCallingLabel?: string;
     captionsBannerMoreButtonTooltip?: string;
@@ -849,7 +850,7 @@ export interface CallProviderProps {
 export interface CallState {
     callEndReason?: CallEndReason;
     callerInfo: CallerInfo;
-    capabilities?: CapabilitiesCallFeature;
+    capabilitiesFeature?: CapabilitiesFeatureState;
     captionsFeature: CaptionsCallFeatureState;
     diagnostics: DiagnosticsCallFeatureState;
     direction: CallDirection;
@@ -1318,12 +1319,29 @@ export type CameraSitePermissionsStrings = SitePermissionsStrings;
 export type CancelEditCallback = (messageId: string) => void;
 
 // @beta
-export interface CapabilitiesCallFeature {
+export type CapabilitiesChangedListener = (data: CapabilitiesChangeInfo) => void;
+
+// @beta
+export interface CapabilitiesFeatureState {
     capabilities: ParticipantCapabilities;
+    latestCapabilitiesChangeInfo: CapabilitiesChangeInfo;
 }
 
 // @beta
-export type CapabilitiesChangedListener = (data: CapabilitiesChangeInfo) => void;
+export interface CapabilityChangedNotificationStrings {
+    shareScreen?: {
+        lostDueToRoleChangeToAttendee?: string;
+        grantedDueToRoleChangeToPresenter?: string;
+    };
+    turnVideoOn?: {
+        lostDueToMeetingOption?: string;
+        grantedDueToMeetingOption?: string;
+    };
+    unmuteMic?: {
+        lostDueToMeetingOption?: string;
+        grantedDueToMeetingOption?: string;
+    };
+}
 
 // @beta
 export interface CaptionLanguageStrings {

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

@@ -420,6 +420,7 @@ export interface CallCompositeStrings {
     cameraOffBackgroundEffectWarningText?: string;
     cameraPermissionDenied: string;
     cameraTurnedOff: string;
+    capabilityChangedNotification?: CapabilityChangedNotificationStrings;
     captionLanguageStrings?: CaptionLanguageStrings;
     captionsBannerMoreButtonCallingLabel?: string;
     captionsBannerMoreButtonTooltip?: string;
@@ -934,6 +935,22 @@ export type CallWithChatEvent = 'callError' | 'chatError' | 'callEnded' | 'isMut
 // @beta
 export type CapabilitiesChangedListener = (data: CapabilitiesChangeInfo) => void;
 
+// @beta
+export interface CapabilityChangedNotificationStrings {
+    shareScreen?: {
+        lostDueToRoleChangeToAttendee?: string;
+        grantedDueToRoleChangeToPresenter?: string;
+    };
+    turnVideoOn?: {
+        lostDueToMeetingOption?: string;
+        grantedDueToMeetingOption?: string;
+    };
+    unmuteMic?: {
+        lostDueToMeetingOption?: string;
+        grantedDueToMeetingOption?: string;
+    };
+}
+
 // @beta
 export type CaptionsReceivedListener = (event: {
     captionsInfo: CaptionsInfo;

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

@@ -50,6 +50,10 @@ import { usePropsFor } from './hooks/usePropsFor';
 import { deviceCountSelector } from './selectors/deviceCountSelector';
 /* @conditional-compile-remove(gallery-layouts) */
 import { VideoGalleryLayout } from '@internal/react-components';
+/* @conditional-compile-remove(capabilities) */
+import { capabilitiesChangedInfoAndRoleSelector } from './selectors/capabilitiesChangedInfoAndRoleSelector';
+/* @conditional-compile-remove(capabilities) */
+import { useTrackedCapabilityChangedNotifications } from './utils/TrackCapabilityChangedNotifications';
 
 /**
  * Props for {@link CallComposite}.
@@ -297,6 +301,13 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
     onSidePaneIdChange?.(sidePaneRenderer?.id);
   }, [sidePaneRenderer?.id, onSidePaneIdChange]);
 
+  /* @conditional-compile-remove(capabilities) */
+  const capabilitiesChangedInfoAndRole = useSelector(capabilitiesChangedInfoAndRoleSelector);
+
+  /* @conditional-compile-remove(capabilities) */
+  const capabilitiesChangedNotificationBarProps =
+    useTrackedCapabilityChangedNotifications(capabilitiesChangedInfoAndRole);
+
   // Track the last dismissed errors of any error kind to prevent errors from re-appearing on subsequent page navigation
   // This works by tracking the most recent timestamp of any active error type.
   // And then tracking when that error type was last dismissed.
@@ -356,6 +367,8 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
           onPermissionsTroubleshootingClick={props.options?.onPermissionsTroubleshootingClick}
           /* @conditional-compile-remove(call-readiness) */
           onNetworkingTroubleShootingClick={props.options?.onNetworkingTroubleShootingClick}
+          /* @conditional-compile-remove(capabilities) */
+          capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}
         />
       );
       break;
@@ -422,6 +435,8 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
           mobileChatTabHeader={props.mobileChatTabHeader}
           latestErrors={latestErrors}
           onDismissError={onDismissError}
+          /* @conditional-compile-remove(capabilities) */
+          capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}
         />
       );
       break;
@@ -438,6 +453,8 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
           onFetchAvatarPersonaData={onFetchAvatarPersonaData}
           latestErrors={latestErrors}
           onDismissError={onDismissError}
+          /* @conditional-compile-remove(capabilities) */
+          capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}
         />
       );
       break;
@@ -459,6 +476,8 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
           galleryLayout={
             props.options?.galleryOptions?.layout ? props.options.galleryOptions.layout : 'floatingLocalVideo'
           }
+          /* @conditional-compile-remove(capabilities) */
+          capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}
         />
       );
       break;
@@ -475,6 +494,8 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
               mobileChatTabHeader={props.mobileChatTabHeader}
               latestErrors={latestErrors}
               onDismissError={onDismissError}
+              /* @conditional-compile-remove(capabilities) */
+              capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}
             />
           }
         </>

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

@@ -3,6 +3,8 @@
 
 /* @conditional-compile-remove(close-captions) */
 import { SpokenLanguageStrings, CaptionLanguageStrings } from '@internal/react-components';
+/* @conditional-compile-remove(capabilities) */
+import { CapabilityChangedNotificationStrings } from './components/CapabilitiesChangedNotificationBar';
 
 /**
  * Strings used by the {@link CallComposite} directly.
@@ -627,4 +629,9 @@ export interface CallCompositeStrings {
    * Label for the selection of the focusedContentLayout (Focused content) layout
    */
   moreButtonGalleryFocusedContentLayoutLabel?: string;
+  /* @conditional-compile-remove(capabilities) */
+  /**
+   * All strings for capability changed notification
+   */
+  capabilityChangedNotification?: CapabilityChangedNotificationStrings;
 }

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

@@ -75,6 +75,11 @@ import { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';
 import { CommonCallControlOptions } from '../../common/types/CommonCallControlOptions';
 /* @conditional-compile-remove(video-background-effects) */
 import { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';
+/* @conditional-compile-remove(capabilities) */
+import {
+  CapabilitiesChangedNotificationBar,
+  CapabilitiesChangeNotificationBarProps
+} from './CapabilitiesChangedNotificationBar';
 
 /**
  * @private
@@ -101,6 +106,8 @@ export interface CallArrangementProps {
   onUserSetGalleryLayoutChange?: (layout: VideoGalleryLayout) => void;
   /* @conditional-compile-remove(gallery-layouts) */
   userSetGalleryLayout?: VideoGalleryLayout;
+  /* @conditional-compile-remove(capabilities) */
+  capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;
 }
 
 /**
@@ -277,6 +284,14 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
   const verticalControlBar =
     props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
 
+  /* @conditional-compile-remove(capabilities) */
+  // Filter out shareScreen capability notifications if on mobile
+  const filteredCapabilitesChangedNotifications = props.mobileView
+    ? props.capabilitiesChangedNotificationBarProps?.capabilitiesChangedNotifications.filter(
+        (notification) => notification.capabilityName !== 'shareScreen'
+      )
+    : props.capabilitiesChangedNotificationBarProps?.capabilitiesChangedNotifications;
+
   return (
     <div ref={containerRef} className={mergeStyles(containerDivStyles)} id={props.id}>
       <Stack verticalFill horizontalAlign="stretch" className={containerClassName} data-ui-id={props.dataUiId}>
@@ -385,6 +400,18 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                         />
                       </Stack>
                     )}
+                    {
+                      /* @conditional-compile-remove(capabilities) */
+                      props.capabilitiesChangedNotificationBarProps &&
+                        props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && (
+                          <Stack styles={bannerNotificationStyles}>
+                            <CapabilitiesChangedNotificationBar
+                              {...props.capabilitiesChangedNotificationBarProps}
+                              capabilitiesChangedNotifications={filteredCapabilitesChangedNotifications ?? []}
+                            />
+                          </Stack>
+                        )
+                    }
                     {canUnmute && !!props.mutedNotificationProps && (
                       <MutedNotification {...props.mutedNotificationProps} />
                     )}