[Captions] captions adhoc

change-beta/@azure-communication-react-b17887d7-fe19-4658-b57d-36fb6663620e.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "fix",
+  "workstream": "Captions",
+  "comment": "Allow captions to be used when in a adhoc teams call",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-b17887d7-fe19-4658-b57d-36fb6663620e.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "fix",
+  "workstream": "Captions",
+  "comment": "Allow captions to be used when in a adhoc teams call",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -5,6 +5,8 @@ import { CallContext } from './CallContext';
 import { CallCommon } from './BetaToStableTypes';
 import { Features } from '@azure/communication-calling';
 /* @conditional-compile-remove(acs-close-captions) */
+import { PropertyChangedEvent, CaptionsCallFeature } from '@azure/communication-calling';
+/* @conditional-compile-remove(acs-close-captions) */
 import { Captions } from '@azure/communication-calling';
 import { TeamsCaptions } from '@azure/communication-calling';
 import { TransferCallFeature, TransferAcceptedEvent, TransferEventArgs } from '@azure/communication-calling';
@@ -80,15 +82,35 @@ export abstract class ProxyCallCommon implements ProxyHandler<CallCommon> {
         // these are mini version of Proxy object - if it grows too big, a real Proxy object should be used.
         return this._context.withErrorTeedToState((...args: Parameters<CallCommon['feature']>) => {
           if (args[0] === Features.Captions) {
-            const captionsFeature = target.feature(Features.Captions).captions;
+            const captionsFeature = target.feature(Features.Captions);
             let proxyFeature;
             /* @conditional-compile-remove(acs-close-captions) */
-            if (captionsFeature.kind === 'Captions') {
+            if (captionsFeature.captions.kind === 'Captions') {
               proxyFeature = new ProxyCaptions(this._context, target);
-              return { captions: new Proxy(captionsFeature, proxyFeature) };
+              return {
+                captions: new Proxy(captionsFeature.captions, proxyFeature),
+                on: (...args: Parameters<CaptionsCallFeature['on']>): void => {
+                  const isCaptionsKindChanged = args[0] === 'CaptionsKindChanged';
+                  if (isCaptionsKindChanged) {
+                    const listener = args[1] as PropertyChangedEvent;
+                    const newListener = (): void => {
+                      listener();
+                    };
+                    return captionsFeature.on('CaptionsKindChanged', newListener);
+                  }
+                },
+                off: (...args: Parameters<CaptionsCallFeature['off']>): void => {
+                  const isCaptionsKindChanged = args[0] === 'CaptionsKindChanged';
+                  if (isCaptionsKindChanged) {
+                    return captionsFeature.off('CaptionsKindChanged', args[1]);
+                  }
+                }
+              };
             }
             proxyFeature = new ProxyTeamsCaptions(this._context, target);
-            return { captions: new Proxy(captionsFeature, proxyFeature) };
+            return {
+              captions: new Proxy(captionsFeature.captions, proxyFeature)
+            };
           }
           if (args[0] === Features.Transfer) {
             const transferFeature = target.feature(Features.Transfer);

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

@@ -458,6 +458,7 @@ export type CallAdapterClientState = {
     devices: DeviceManagerState;
     endedCall?: CallState;
     isTeamsCall: boolean;
+    isTeamsMeeting: boolean;
     isRoomsCall: boolean;
     latestErrors: AdapterErrors;
     alternateCallerId?: string;
@@ -511,6 +512,7 @@ export interface CallAdapterSubscribers {
     off(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
     off(event: 'roleChanged', listener: PropertyChangedEvent): void;
     off(event: 'spotlightChanged', listener: SpotlightChangedListener): void;
+    off(event: 'CaptionsKindChanged', listener: PropertyChangedEvent): void;
     on(event: 'participantsJoined', listener: ParticipantsJoinedListener): void;
     on(event: 'participantsLeft', listener: ParticipantsLeftListener): void;
     on(event: 'isMutedChanged', listener: IsMutedChangedListener): void;
@@ -531,6 +533,7 @@ export interface CallAdapterSubscribers {
     on(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
     on(event: 'roleChanged', listener: PropertyChangedEvent): void;
     on(event: 'spotlightChanged', listener: SpotlightChangedListener): void;
+    on(event: 'CaptionsKindChanged', listener: PropertyChangedEvent): void;
 }
 
 // @public
@@ -1295,6 +1298,7 @@ export interface CallWithChatClientState {
     environmentInfo?: EnvironmentInfo;
     hideAttendeeNames?: boolean;
     isTeamsCall: boolean;
+    isTeamsMeeting: boolean;
     latestCallErrors: AdapterErrors;
     latestChatErrors: AdapterErrors;
     onResolveVideoEffectDependency?: () => Promise<VideoBackgroundEffectsDependency>;

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

@@ -274,6 +274,7 @@ export type CallAdapterClientState = {
     devices: DeviceManagerState;
     endedCall?: CallState;
     isTeamsCall: boolean;
+    isTeamsMeeting: boolean;
     isRoomsCall: boolean;
     latestErrors: AdapterErrors;
     cameraStatus?: 'On' | 'Off';
@@ -1028,6 +1029,7 @@ export interface CallWithChatClientState {
     displayName: string | undefined;
     hideAttendeeNames?: boolean;
     isTeamsCall: boolean;
+    isTeamsMeeting: boolean;
     latestCallErrors: AdapterErrors;
     latestChatErrors: AdapterErrors;
     onResolveVideoEffectDependency?: () => Promise<VideoBackgroundEffectsDependency>;

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

@@ -278,6 +278,7 @@ const createDefaultCallAdapterState = (role?: ParticipantRole): CallAdapterState
       deviceAccess: { video: true, audio: true }
     },
     isTeamsCall: false,
+    isTeamsMeeting: false,
     isRoomsCall: false,
     latestErrors: {}
   };

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

@@ -106,7 +106,8 @@ import {
   MicrosoftTeamsUserIdentifier,
   isMicrosoftTeamsUserIdentifier,
   MicrosoftTeamsAppIdentifier,
-  UnknownIdentifier
+  UnknownIdentifier,
+  isMicrosoftTeamsAppIdentifier
 } from '@azure/communication-common';
 /* @conditional-compile-remove(teams-identity-support) */ /* @conditional-compile-remove(PSTN-calls) */
 import { isCommunicationUserIdentifier } from '@azure/communication-common';
@@ -140,6 +141,7 @@ class CallContext {
   constructor(
     clientState: CallClientState,
     isTeamsCall: boolean,
+    isTeamsMeeting: boolean,
     isRoomsCall: boolean,
     options?: {
       maxListeners?: number;
@@ -164,6 +166,7 @@ class CallContext {
       page: 'configuration',
       latestErrors: clientState.latestErrors,
       isTeamsCall,
+      isTeamsMeeting,
       isRoomsCall,
       /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId: clientState.alternateCallerId,
       /* @conditional-compile-remove(unsupported-browser) */ environmentInfo: clientState.environmentInfo,
@@ -398,12 +401,25 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | BetaTea
     const isTeamsMeeting = this.locator
       ? 'meetingLink' in this.locator || /* @conditional-compile-remove(meeting-id) */ 'meetingId' in this.locator
       : false;
+    let isTeamsCall: boolean | undefined;
+    this.targetCallees?.forEach((callee) => {
+      if (isMicrosoftTeamsUserIdentifier(callee) || isMicrosoftTeamsAppIdentifier(callee)) {
+        isTeamsCall = true;
+      }
+    });
 
     const isRoomsCall = this.locator ? 'roomId' in this.locator : false;
 
     this.onResolveVideoBackgroundEffectsDependency = options?.videoBackgroundOptions?.onResolveDependency;
 
-    this.context = new CallContext(callClient.getState(), isTeamsMeeting, isRoomsCall, options, this.targetCallees);
+    this.context = new CallContext(
+      callClient.getState(),
+      !!isTeamsCall,
+      isTeamsMeeting,
+      isRoomsCall,
+      options,
+      this.targetCallees
+    );
 
     this.context.onCallEnded((endCallData) => this.emitter.emit('callEnded', endCallData));
 
@@ -1070,6 +1086,8 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | BetaTea
   on(event: 'roleChanged', listener: PropertyChangedEvent): void;
   /* @conditional-compile-remove(spotlight) */
   on(event: 'spotlightChanged', listener: SpotlightChangedListener): void;
+  /* @conditional-compile-remove(acs-close-captions) */
+  on(event: 'CaptionsKindChanged', listener: PropertyChangedEvent): void;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public on(event: string, listener: (e: any) => void): void {
@@ -1078,42 +1096,50 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | BetaTea
 
   private subscribeToCaptionEvents(): void {
     if (this.call && this.call.state === 'Connected') {
-      if (this.context.getState().isTeamsCall) {
-        const captionsFeature = this.call?.feature(Features.Captions).captions as TeamsCaptions;
-        captionsFeature.on('CaptionsReceived', this.teamsCaptionsReceived.bind(this));
-        captionsFeature.on('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
-        captionsFeature.on('CaptionLanguageChanged', this.isCaptionLanguageChanged.bind(this));
-        captionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
+      const captionsFeature = this.call?.feature(Features.Captions);
+      if (
+        captionsFeature.captions.kind === 'TeamsCaptions' &&
+        (this.context.getState().isTeamsCall || this.context.getState().isTeamsMeeting)
+      ) {
+        const teamsCaptionsFeature = captionsFeature.captions as TeamsCaptions;
+        teamsCaptionsFeature.on('CaptionsReceived', this.teamsCaptionsReceived.bind(this));
+        teamsCaptionsFeature.on('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+        teamsCaptionsFeature.on('CaptionLanguageChanged', this.isCaptionLanguageChanged.bind(this));
+        teamsCaptionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
       } else {
         /* @conditional-compile-remove(acs-close-captions) */
-        const captionsFeature = this.call?.feature(Features.Captions).captions as Captions;
+        const acsCaptionsFeature = captionsFeature.captions as Captions;
         /* @conditional-compile-remove(acs-close-captions) */
-        captionsFeature.on('CaptionsReceived', this.captionsReceived.bind(this));
+        acsCaptionsFeature.on('CaptionsReceived', this.captionsReceived.bind(this));
         /* @conditional-compile-remove(acs-close-captions) */
-        captionsFeature.on('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+        acsCaptionsFeature.on('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
         /* @conditional-compile-remove(acs-close-captions) */
-        captionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
+        acsCaptionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
       }
     }
   }
 
   private unsubscribeFromCaptionEvents(): void {
     if (this.call && this.call.state === 'Connected') {
-      if (this.context.getState().isTeamsCall) {
-        const captionsFeature = this.call?.feature(Features.Captions).captions as TeamsCaptions;
-        captionsFeature.off('CaptionsReceived', this.teamsCaptionsReceived.bind(this));
-        captionsFeature.off('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
-        captionsFeature.off('CaptionLanguageChanged', this.isCaptionLanguageChanged.bind(this));
-        captionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
+      const captionsFeature = this.call?.feature(Features.Captions);
+      if (
+        captionsFeature.captions.kind === 'TeamsCaptions' &&
+        (this.context.getState().isTeamsCall || this.context.getState().isTeamsMeeting)
+      ) {
+        const teamsCaptionsFeature = captionsFeature.captions as TeamsCaptions;
+        teamsCaptionsFeature.off('CaptionsReceived', this.teamsCaptionsReceived.bind(this));
+        teamsCaptionsFeature.off('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+        teamsCaptionsFeature.off('CaptionLanguageChanged', this.isCaptionLanguageChanged.bind(this));
+        teamsCaptionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
       } else {
         /* @conditional-compile-remove(acs-close-captions) */
-        const captionsFeature = this.call?.feature(Features.Captions).captions as Captions;
+        const acsCaptionsFeature = captionsFeature.captions as Captions;
         /* @conditional-compile-remove(acs-close-captions) */
-        captionsFeature.off('CaptionsReceived', this.captionsReceived.bind(this));
+        acsCaptionsFeature.off('CaptionsReceived', this.captionsReceived.bind(this));
         /* @conditional-compile-remove(acs-close-captions) */
-        captionsFeature.off('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+        acsCaptionsFeature.off('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
         /* @conditional-compile-remove(acs-close-captions) */
-        captionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
+        acsCaptionsFeature.off('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
       }
       this.call?.off('stateChanged', this.subscribeToCaptionEvents.bind(this));
     }
@@ -1138,6 +1164,8 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | BetaTea
     this.call?.feature(Features.Capabilities).on('capabilitiesChanged', this.capabilitiesChanged.bind(this));
     /* @conditional-compile-remove(spotlight) */
     this.call?.feature(Features.Spotlight).on('spotlightChanged', this.spotlightChanged.bind(this));
+    /* @conditional-compile-remove(acs-close-captions) */
+    this.call?.feature(Features.Captions).on('CaptionsKindChanged', this.captionsKindChanged.bind(this));
   }
 
   private unsubscribeCallEvents(): void {
@@ -1150,6 +1178,10 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | BetaTea
     this.call?.off('isScreenSharingOnChanged', this.isScreenSharingOnChanged.bind(this));
     this.call?.off('idChanged', this.callIdChanged.bind(this));
     this.call?.off('roleChanged', this.roleChanged.bind(this));
+    /* @conditional-compile-remove(acs-close-captions) */
+    if (this.call?.feature(Features.Captions).captions.kind === 'Captions') {
+      this.call?.feature(Features.Captions).off('CaptionsKindChanged', this.unsubscribeFromCaptionEvents.bind(this));
+    }
 
     this.unsubscribeFromCaptionEvents();
     if (this.callingSoundSubscriber) {
@@ -1164,6 +1196,17 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | BetaTea
     });
   };
 
+  /* @conditional-compile-remove(acs-close-captions) */
+  private captionsKindChanged(): void {
+    this.emitter.emit('CaptionsKindChanged', {});
+    const captionsFeature = this.call?.feature(Features.Captions);
+    const teamsCaptionsFeature = captionsFeature?.captions as TeamsCaptions;
+    teamsCaptionsFeature.on('CaptionsReceived', this.teamsCaptionsReceived.bind(this));
+    teamsCaptionsFeature.on('CaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+    teamsCaptionsFeature.on('CaptionLanguageChanged', this.isCaptionLanguageChanged.bind(this));
+    teamsCaptionsFeature.on('SpokenLanguageChanged', this.isSpokenLanguageChanged.bind(this));
+  }
+
   private onRemoteParticipantsUpdated({
     added,
     removed
@@ -1298,6 +1341,8 @@ export class AzureCommunicationCallAdapter<AgentType extends CallAgent | BetaTea
   off(event: 'roleChanged', listener: PropertyChangedEvent): void;
   /* @conditional-compile-remove(spotlight) */
   off(event: 'spotlightChanged', listener: SpotlightChangedListener): void;
+  /* @conditional-compile-remove(acs-close-captions) */
+  off(event: 'CaptionsKindChanged', listener: PropertyChangedEvent): 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

@@ -118,7 +118,14 @@ export type CallAdapterClientState = {
   targetCallees?: CommunicationIdentifier[];
   devices: DeviceManagerState;
   endedCall?: CallState;
+  /**
+   * State to track whether the call is a teams call.
+   */
   isTeamsCall: boolean;
+  /**
+   * State to track whether the call is a teams meeting.
+   */
+  isTeamsMeeting: boolean;
   /**
    * State to track whether the call is a rooms call.
    */
@@ -887,6 +894,11 @@ export interface CallAdapterSubscribers {
    * Subscribe function for 'spotlightChanged' event.
    */
   on(event: 'spotlightChanged', listener: SpotlightChangedListener): void;
+  /* @conditional-compile-remove(acs-close-captions) */
+  /**
+   * Subscribe function for 'CaptionsKindChanged' event.
+   */
+  on(event: 'CaptionsKindChanged', listener: PropertyChangedEvent): void;
 
   /**
    * Unsubscribe function for 'participantsJoined' event.
@@ -970,6 +982,11 @@ export interface CallAdapterSubscribers {
    * Subscribe function for 'spotlightChanged' event.
    */
   off(event: 'spotlightChanged', listener: SpotlightChangedListener): void;
+  /* @conditional-compile-remove(acs-close-captions) */
+  /**
+   * Unsubscribe function for 'CaptionsKindChanged' event.
+   */
+  off(event: 'CaptionsKindChanged', listener: PropertyChangedEvent): void;
 }
 
 // This type remains for non-breaking change reason

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

@@ -45,10 +45,10 @@ import { useSelector } from '../hooks/useSelector';
 import { callStatusSelector } from '../selectors/callStatusSelector';
 import { CallControlOptions } from '../types/CallControlOptions';
 import { PreparedMoreDrawer } from '../../common/Drawer/PreparedMoreDrawer';
-import { getRemoteParticipants } from '../selectors/baseSelectors';
+import { getIsTeamsMeeting, getRemoteParticipants } from '../selectors/baseSelectors';
 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
 import { getPage } from '../selectors/baseSelectors';
-import { getCallStatus, getIsTeamsCall, getCaptionsStatus } from '../selectors/baseSelectors';
+import { getCallStatus, getCaptionsStatus } from '../selectors/baseSelectors';
 import { drawerContainerStyles } from '../styles/CallComposite.styles';
 import { SidePane } from './SidePane/SidePane';
 import { usePeoplePane } from './SidePane/usePeoplePane';
@@ -86,7 +86,7 @@ import {
   useStopAllSpotlightCallbackWithPrompt
 } from '../utils/spotlightUtils';
 /* @conditional-compile-remove(acs-close-captions) */
-import { getCaptionsKind } from '../selectors/baseSelectors';
+import { getCaptionsKind, getIsTeamsCall } from '../selectors/baseSelectors';
 
 /**
  * @private
@@ -349,8 +349,13 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
 
   /* @conditional-compile-remove(acs-close-captions) */
   const isTeamsCaptions = useSelector(getCaptionsKind) === 'TeamsCaptions';
+  const isTeamsMeeting = useSelector(getIsTeamsMeeting);
+  /* @conditional-compile-remove(acs-close-captions) */
+  const isTeamsCall = useSelector(getIsTeamsCall);
   const useTeamsCaptions =
-    useSelector(getIsTeamsCall) || /* @conditional-compile-remove(acs-close-captions) */ isTeamsCaptions;
+    isTeamsMeeting ||
+    /* @conditional-compile-remove(acs-close-captions) */ isTeamsCall ||
+    /* @conditional-compile-remove(acs-close-captions) */ isTeamsCaptions;
   const hasJoinedCall = useSelector(getCallStatus) === 'Connected';
   const isCaptionsOn = useSelector(getCaptionsStatus);
   const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);

packages/react-composites/src/composites/CallComposite/selectors/baseSelectors.ts

@@ -200,6 +200,11 @@ export const getSupportedSpokenLanguages = (state: CallAdapterState): string[] |
  */
 export const getIsTeamsCall = (state: CallAdapterState): boolean => state.isTeamsCall;
 
+/**
+ * @private
+ */
+export const getIsTeamsMeeting = (state: CallAdapterState): boolean => state.isTeamsMeeting;
+
 /**
  * @private
  */