Update Captions based on new sdk changes and add changeCaptionLanguage (#3385)

* api changes

* captions ga

* captions api change

* api change

* check if teams call

* proxy changes

* Enable set caption language for users  (#3429)

* set caption

* show caption setting only when caption is on

* fix bug

* remove internal

* adapter events

* lint

* lint

* lint

* string name change

* string name change

* string name change

* Change files

* Duplicate change files for beta release

* Update packages/react-composites CallWithChatComposite browser test snapshots

* build files

* build files

* build files

* Update packages/react-composites CallComposite browser test snapshots

---------

Signed-off-by: carocao-msft <96077406+carocao-msft@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: carocao-msft

change-beta/@azure-communication-react-8ae7f9cc-3e26-4629-8865-eadbeb2d9c9d.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Update captions based on new sdk changes, allow changing caption language",
+  "comment": "Update captions based on new sdk changes, allow changing caption language",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-8ae7f9cc-3e26-4629-8865-eadbeb2d9c9d.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Update captions based on new sdk changes, allow changing caption language",
+  "comment": "Update captions based on new sdk changes, allow changing caption language",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/calling-component-bindings/review/beta/calling-component-bindings.api.md

@@ -124,20 +124,22 @@ export type _CaptionsBannerSelector = (state: CallClientState, props: CallingBas
 // @internal
 export const _captionsBannerSelector: _CaptionsBannerSelector;
 
-// @beta
-export type CaptionsOptions = {
-    spokenLanguage: string;
-};
-
 // @internal
-export type _ChangeSpokenLanguageSelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
+export type _CaptionSettingsSelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
+    supportedCaptionLanguages: string[];
+    currentCaptionLanguage: string;
     supportedSpokenLanguages: string[];
     currentSpokenLanguage: string;
     isCaptionsFeatureActive: boolean;
 };
 
 // @internal
-export const _changeSpokenLanguageSelector: _ChangeSpokenLanguageSelector;
+export const _captionSettingsSelector: _CaptionSettingsSelector;
+
+// @beta
+export type CaptionsOptions = {
+    spokenLanguage: string;
+};
 
 // @public
 export interface CommonCallingHandlers {

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

@@ -3,7 +3,7 @@
 /* @conditional-compile-remove(close-captions) */
 import { CallClientState, CaptionsInfo } from '@internal/calling-stateful-client';
 /* @conditional-compile-remove(close-captions) */
-import { CallingBaseSelectorProps, getStartCaptionsInProgress } from './baseSelectors';
+import { CallingBaseSelectorProps, getStartCaptionsInProgress, getSupportedCaptionLanguages } from './baseSelectors';
 /* @conditional-compile-remove(close-captions) */
 import {
   getCaptions,
@@ -44,35 +44,52 @@ export const _startCaptionsButtonSelector: _StartCaptionsButtonSelector = resele
   (isCaptionsFeatureActive, currentCaptionLanguage, currentSpokenLanguage) => {
     return {
       checked: isCaptionsFeatureActive ?? false,
-      currentCaptionLanguage: currentCaptionLanguage ?? 'en-us',
+      currentCaptionLanguage: currentCaptionLanguage ?? '',
       currentSpokenLanguage: currentSpokenLanguage ?? 'en-us'
     };
   }
 );
+
 /* @conditional-compile-remove(close-captions) */
 /**
- * Selector type for components for Changing spoken language
+ * Selector type for components for Changing caption language and spoken language
  * @internal
  */
-export type _ChangeSpokenLanguageSelector = (
+export type _CaptionSettingsSelector = (
   state: CallClientState,
   props: CallingBaseSelectorProps
 ) => {
+  supportedCaptionLanguages: string[];
+  currentCaptionLanguage: string;
   supportedSpokenLanguages: string[];
   currentSpokenLanguage: string;
   isCaptionsFeatureActive: boolean;
 };
 
 /* @conditional-compile-remove(close-captions) */
 /**
- * Selector for {@link ChangeSpokenLanguageButton} component.
+ * Selector for Changing caption language and spoken language
  *
  * @internal
  */
-export const _changeSpokenLanguageSelector: _ChangeSpokenLanguageSelector = reselect.createSelector(
-  [getSupportedSpokenLanguages, getCurrentSpokenLanguage, getCaptionsStatus],
-  (supportedSpokenLanguages, currentSpokenLanguage, isCaptionsFeatureActive) => {
+export const _captionSettingsSelector: _CaptionSettingsSelector = reselect.createSelector(
+  [
+    getSupportedCaptionLanguages,
+    getCurrentCaptionLanguage,
+    getSupportedSpokenLanguages,
+    getCurrentSpokenLanguage,
+    getCaptionsStatus
+  ],
+  (
+    supportedCaptionLanguages,
+    currentCaptionLanguage,
+    supportedSpokenLanguages,
+    currentSpokenLanguage,
+    isCaptionsFeatureActive
+  ) => {
     return {
+      supportedCaptionLanguages: supportedCaptionLanguages ?? [],
+      currentCaptionLanguage: currentCaptionLanguage ?? '',
       supportedSpokenLanguages: supportedSpokenLanguages ?? ['en-us'],
       currentSpokenLanguage: currentSpokenLanguage ?? 'en-us',
       isCaptionsFeatureActive: isCaptionsFeatureActive ?? false

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

@@ -16,16 +16,12 @@ export type { HoldButtonSelector } from './callControlSelectors';
 /* @conditional-compile-remove(close-captions) */
 export type {
   _StartCaptionsButtonSelector,
-  _ChangeSpokenLanguageSelector,
+  _CaptionSettingsSelector,
   _CaptionsBannerSelector
 } from './captionsSelector';
 
 /* @conditional-compile-remove(close-captions) */
-export {
-  _captionsBannerSelector,
-  _startCaptionsButtonSelector,
-  _changeSpokenLanguageSelector
-} from './captionsSelector';
+export { _captionsBannerSelector, _startCaptionsButtonSelector, _captionSettingsSelector } from './captionsSelector';
 
 export type { CallingHandlers, CreateDefaultCallingHandlers } from './handlers/createHandlers';
 /* @conditional-compile-remove(teams-identity-support) */

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

@@ -226,9 +226,6 @@ export const _isTeamsCall: (call: CallCommon) => call is TeamsCall_2;
 // @internal (undocumented)
 export const _isTeamsCallAgent: (callAgent: CallAgentCommon) => callAgent is TeamsCallAgent_2;
 
-// @internal
-export const _isTeamsMeetingCall: (call: CallCommon) => boolean;
-
 // @public
 export interface LocalVideoStreamState {
     mediaStreamType: MediaStreamType;

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

@@ -794,7 +794,14 @@ export class CallContext {
     this.modifyState((draft: CallClientState) => {
       const call = draft.calls[this._callIdHistory.latestCallId(callId)];
       if (call) {
-        this.processNewCaption(call.captionsFeature.captions, convertFromSDKToCaptionInfoState(caption));
+        const currentCaptionLanguage = call.captionsFeature.currentCaptionLanguage;
+        if (
+          caption.captionLanguage.toUpperCase() === currentCaptionLanguage.toUpperCase() ||
+          currentCaptionLanguage === '' ||
+          currentCaptionLanguage === undefined
+        ) {
+          this.processNewCaption(call.captionsFeature.captions, convertFromSDKToCaptionInfoState(caption));
+        }
       }
     });
   }

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

@@ -41,11 +41,15 @@ export class CaptionsSubscriber {
   private subscribe = (): void => {
     this._captions.on('CaptionsActiveChanged', this.isCaptionsActiveChanged);
     this._captions.on('CaptionsReceived', this.onCaptionsReceived);
+    this._captions.on('CaptionLanguageChanged', this.isCaptionLanguageChanged);
+    this._captions.on('SpokenLanguageChanged', this.isSpokenLanguageChanged);
   };
 
   public unsubscribe = (): void => {
     this._captions.off('CaptionsActiveChanged', this.isCaptionsActiveChanged);
     this._captions.off('CaptionsReceived', this.onCaptionsReceived);
+    this._captions.off('CaptionLanguageChanged', this.isCaptionLanguageChanged);
+    this._captions.off('SpokenLanguageChanged', this.isSpokenLanguageChanged);
   };
 
   private onCaptionsReceived: TeamsCaptionsHandler = (caption: TeamsCaptionsInfo): void => {
@@ -55,6 +59,12 @@ export class CaptionsSubscriber {
   private isCaptionsActiveChanged: PropertyChangedEvent = (): void => {
     this._context.setIsCaptionActive(this._callIdRef.callId, this._captions.isCaptionsFeatureActive);
   };
+  private isCaptionLanguageChanged: PropertyChangedEvent = (): void => {
+    this._context.setSelectedCaptionLanguage(this._callIdRef.callId, this._captions.activeCaptionLanguage);
+  };
+  private isSpokenLanguageChanged: PropertyChangedEvent = (): void => {
+    this._context.setSelectedSpokenLanguage(this._callIdRef.callId, this._captions.activeSpokenLanguage);
+  };
 }
 
 // This is a placeholder to bypass CC of "close-captions", remove when move the feature to stable

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

@@ -39,14 +39,3 @@ export const _isTeamsCallAgent = (callAgent: CallAgentCommon): callAgent is Team
   return callAgent.kind === 'TeamsCallAgent';
   return false;
 };
-
-/* @conditional-compile-remove(close-captions) */
-/**
- * @internal
- * Determine whether a call is:
- * A TeamsCall
- * or a ACS Call joining the teams meeting
- */
-export const _isTeamsMeetingCall = (call: CallCommon): boolean => {
-  return _isTeamsCall(call) || (_isACSCall(call) && !call.info.groupId && !call.info.roomId); // there should be a better way to determine if a call is joining a teams meeting ideally should be a meetingID in the info object
-};

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

@@ -5,7 +5,4 @@ export * from './index-public';
 
 export { _isACSCall, _isACSCallAgent, _isTeamsCall, _isTeamsCallAgent } from './TypeGuards';
 
-/* @conditional-compile-remove(close-captions) */
-export { _isTeamsMeetingCall } from './TypeGuards';
-
 export type { CallAgentCommon, CallCommon, TeamsCall, TeamsCallAgent, IncomingCallCommon } from './BetaToStableTypes';