Capabilities change handler (#3485)

* Added CapabilitiesChangedListener to CallAdapter

* Change files

* Duplicate change files for beta release

* conditional compile fix

* Fix condition to turn of camera in capabilitiesChanged handler

* fix conditional compilation 2

* mute and stop screenshare when capabilities are lost

Author: mgamis-msft

change-beta/@azure-communication-react-17691a0d-3c01-4038-8953-5f5de5a0c9d6.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Capabilities",
+  "comment": "Added CapabilitiesChangedListener to CallAdapter",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-17691a0d-3c01-4038-8953-5f5de5a0c9d6.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Capabilities",
+  "comment": "Added CapabilitiesChangedListener to CallAdapter",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -19,6 +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 { CaptionsResultType } from '@azure/communication-calling';
 import { ChatClient } from '@azure/communication-chat';
 import { ChatClientOptions } from '@azure/communication-chat';
@@ -426,6 +427,7 @@ export interface CallAdapterSubscribers {
     off(event: 'captionsReceived', listener: CaptionsReceivedListener): void;
     off(event: 'isCaptionsActiveChanged', listener: IsCaptionsActiveChangedListener): void;
     off(event: 'transferRequested', listener: TransferRequestedListener): void;
+    off(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
     on(event: 'participantsJoined', listener: ParticipantsJoinedListener): void;
     on(event: 'participantsLeft', listener: ParticipantsLeftListener): void;
     on(event: 'isMutedChanged', listener: IsMutedChangedListener): void;
@@ -441,6 +443,7 @@ export interface CallAdapterSubscribers {
     on(event: 'captionsReceived', listener: CaptionsReceivedListener): void;
     on(event: 'isCaptionsActiveChanged', listener: IsCaptionsActiveChangedListener): void;
     on(event: 'transferRequested', listener: TransferRequestedListener): void;
+    on(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
 }
 
 // @public
@@ -1303,6 +1306,9 @@ export interface CapabilitiesCallFeature {
     capabilities: ParticipantCapabilities;
 }
 
+// @beta
+export type CapabilitiesChangedListener = (data: CapabilitiesChangeInfo) => void;
+
 // @beta
 export interface CaptionsAvailableLanguageStrings {
     // (undocumented)

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

@@ -13,6 +13,7 @@ import { BaseCustomStyles } from '@internal/react-components';
 import { Call } from '@azure/communication-calling';
 import { CallAgent } from '@azure/communication-calling';
 import { CallState } from '@internal/calling-stateful-client';
+import type { CapabilitiesChangeInfo } from '@azure/communication-calling';
 import { CaptionsAvailableLanguageStrings } from '@internal/react-components';
 import { CaptionsInfo } from '@internal/calling-stateful-client';
 import type { ChatMessage } from '@azure/communication-chat';
@@ -277,6 +278,7 @@ export interface CallAdapterSubscribers {
     off(event: 'captionsReceived', listener: CaptionsReceivedListener): void;
     off(event: 'isCaptionsActiveChanged', listener: IsCaptionsActiveChangedListener): void;
     off(event: 'transferRequested', listener: TransferRequestedListener): void;
+    off(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
     on(event: 'participantsJoined', listener: ParticipantsJoinedListener): void;
     on(event: 'participantsLeft', listener: ParticipantsLeftListener): void;
     on(event: 'isMutedChanged', listener: IsMutedChangedListener): void;
@@ -292,6 +294,7 @@ export interface CallAdapterSubscribers {
     on(event: 'captionsReceived', listener: CaptionsReceivedListener): void;
     on(event: 'isCaptionsActiveChanged', listener: IsCaptionsActiveChangedListener): void;
     on(event: 'transferRequested', listener: TransferRequestedListener): void;
+    on(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
 }
 
 // @public
@@ -911,6 +914,9 @@ export interface CallWithChatControlOptions extends CommonCallControlOptions {
 // @public
 export type CallWithChatEvent = 'callError' | 'chatError' | 'callEnded' | 'isMutedChanged' | 'callIdChanged' | 'isLocalScreenSharingActiveChanged' | 'displayNameChanged' | 'isSpeakingChanged' | 'callParticipantsJoined' | 'callParticipantsLeft' | 'selectedMicrophoneChanged' | 'selectedSpeakerChanged' | /* @conditional-compile-remove(close-captions) */ 'isCaptionsActiveChanged' | /* @conditional-compile-remove(close-captions) */ 'captionsReceived' | 'messageReceived' | 'messageSent' | 'messageRead' | 'chatParticipantsAdded' | 'chatParticipantsRemoved';
 
+// @beta
+export type CapabilitiesChangedListener = (data: CapabilitiesChangeInfo) => void;
+
 // @beta
 export type CaptionsReceivedListener = (event: {
     captionsInfo: CaptionsInfo;

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

@@ -43,6 +43,8 @@ import { AcceptTransferOptions, LocalVideoStream, TransferRequestedEventArgs } f
 import { StartCaptionsOptions, TeamsCaptionsInfo } from '@azure/communication-calling';
 /* @conditional-compile-remove(video-background-effects) */
 import type { BackgroundBlurConfig, BackgroundReplacementConfig } from '@azure/communication-calling';
+/* @conditional-compile-remove(capabilities) */
+import type { CapabilitiesChangeHandler, CapabilitiesChangeInfo } from '@azure/communication-calling';
 /* @conditional-compile-remove(teams-identity-support)) */
 import { TeamsCallAgent } from '@azure/communication-calling';
 /* @conditional-compile-remove(rooms) */
@@ -70,6 +72,8 @@ import {
 } from './CallAdapter';
 /* @conditional-compile-remove(call-transfer) */
 import { TransferRequestedListener } from './CallAdapter';
+/* @conditional-compile-remove(capabilities) */
+import { CapabilitiesChangedListener } from './CallAdapter';
 /* @conditional-compile-remove(close-captions) */
 import { CaptionsReceivedListener, IsCaptionsActiveChangedListener } from './CallAdapter';
 /* @conditional-compile-remove(video-background-effects) */
@@ -1007,6 +1011,8 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | BetaTea
   on(event: 'isCaptionsActiveChanged', listener: IsCaptionsActiveChangedListener): void;
   /* @conditional-compile-remove(call-transfer) */
   on(event: 'transferRequested', listener: TransferRequestedListener): void;
+  /* @conditional-compile-remove(capabilities) */
+  on(event: 'capabilitiesChanged', listener: CapabilitiesChangeHandler): void;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public on(event: string, listener: (e: any) => void): void {
@@ -1041,6 +1047,8 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | BetaTea
     this.call?.on('stateChanged', this.subscribeToCaptionEvents.bind(this));
     /* @conditional-compile-remove(call-transfer) */
     this.call?.feature(Features.Transfer).on('transferRequested', this.transferRequested.bind(this));
+    /* @conditional-compile-remove(capabilities) */
+    this.call?.feature(Features.Capabilities).on('capabilitiesChanged', this.capabilitiesChanged.bind(this));
   }
 
   private unsubscribeCallEvents(): void {
@@ -1129,6 +1137,20 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | BetaTea
     this.emitter.emit('transferRequested', newArgs);
   }
 
+  /* @conditional-compile-remove(capabilities) */
+  private capabilitiesChanged(data: CapabilitiesChangeInfo): void {
+    if (data.newValue.turnVideoOn?.isPresent === false) {
+      this.stopCamera();
+    }
+    if (data.newValue.unmuteMic?.isPresent === false) {
+      this.mute();
+    }
+    if (data.newValue.shareScreen?.isPresent === false) {
+      this.stopScreenShare();
+    }
+    this.emitter.emit('capabilitiesChanged', data);
+  }
+
   private callIdChanged(): void {
     this.call?.id && this.emitter.emit('callIdChanged', { callId: this.call.id });
   }
@@ -1160,6 +1182,8 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | BetaTea
   off(event: 'isCaptionsActiveChanged', listener: IsCaptionsActiveChangedListener): void;
   /* @conditional-compile-remove(call-transfer) */
   off(event: 'transferRequested', listener: TransferRequestedListener): void;
+  /* @conditional-compile-remove(capabilities) */
+  off(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public off(event: string, listener: (e: any) => void): void {

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

@@ -6,6 +6,8 @@ import { CallState, DeviceManagerState } from '@internal/calling-stateful-client
 import { CaptionsInfo } from '@internal/calling-stateful-client';
 /* @conditional-compile-remove(video-background-effects) */
 import type { BackgroundBlurConfig, BackgroundReplacementConfig } from '@azure/communication-calling';
+/* @conditional-compile-remove(capabilities) */
+import type { CapabilitiesChangeInfo } from '@azure/communication-calling';
 /* @conditional-compile-remove(teams-identity-support) */
 import { TeamsCall } from '@azure/communication-calling';
 /* @conditional-compile-remove(call-transfer) */
@@ -317,6 +319,14 @@ export type IsCaptionsActiveChangedListener = (event: { isActive: boolean }) =>
  */
 export type TransferRequestedListener = (event: TransferRequestedEventArgs) => void;
 
+/* @conditional-compile-remove(capabilities) */
+/**
+ * Callback for {@link CallAdapterSubscribers} 'capabilitiesChanged' event.
+ *
+ * @beta
+ */
+export type CapabilitiesChangedListener = (data: CapabilitiesChangeInfo) => void;
+
 /* @conditional-compile-remove(video-background-effects) */
 /**
  * Contains the attibutes of a selected video background effect
@@ -754,6 +764,11 @@ export interface CallAdapterSubscribers {
    * Subscribe function for 'transferRequested' event.
    */
   on(event: 'transferRequested', listener: TransferRequestedListener): void;
+  /* @conditional-compile-remove(capabilities) */
+  /**
+   * Unsubscribe function for 'capabilitiesChanged' event.
+   */
+  on(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
 
   /**
    * Unsubscribe function for 'participantsJoined' event.
@@ -818,6 +833,11 @@ export interface CallAdapterSubscribers {
    * Unsubscribe function for 'transferRequested' event.
    */
   off(event: 'transferRequested', listener: TransferRequestedListener): void;
+  /* @conditional-compile-remove(capabilities) */
+  /**
+   * Unsubscribe function for 'capabilitiesChanged' event.
+   */
+  off(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
 }
 
 // This type remains for non-breaking change reason

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

@@ -58,5 +58,8 @@ export type { CaptionsReceivedListener, IsCaptionsActiveChangedListener } from '
 /* @conditional-compile-remove(call-transfer) */
 export type { TransferRequestedListener } from './CallAdapter';
 
+/* @conditional-compile-remove(capabilities) */
+export type { CapabilitiesChangedListener } from './CallAdapter';
+
 /* @conditional-compile-remove(teams-identity-support) */
 export type { TeamsCallAdapter } from './CallAdapter';

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

@@ -91,3 +91,6 @@ export type { CaptionsReceivedListener, IsCaptionsActiveChangedListener } from '
 
 /* @conditional-compile-remove(call-transfer) */
 export type { TransferRequestedListener } from './adapter';
+
+/* @conditional-compile-remove(capabilities) */
+export type { CapabilitiesChangedListener } from './adapter';