Fixed start captions console error and add loading screen (#3021)

* start captions error fix

* Change files

* Duplicate change files for beta release

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* start captions error fix

* tests

* Update packages/react-composites CallWithChatComposite browser test snapshots

* fixlint

* fixlint

* Update packages/react-composites CallComposite browser test snapshots

* name change

* test

* Update packages/react-composites CallComposite browser test snapshots

* captions

* build fix

* uprdate

---------

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>
Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>

Author: 3 people

change-beta/@azure-communication-react-2395774f-7831-4cd9-9a64-e2991afab431.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fixed start captions console error and add loading screen ",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-2395774f-7831-4cd9-9a64-e2991afab431.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fixed start captions console error and add loading screen ",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -154,6 +154,15 @@ export const getCaptionsStatus = (state: CallClientState, props: CallingBaseSele
   return state.calls[props.callId]?.captionsFeature.isCaptionsFeatureActive;
 };
 
+/* @conditional-compile-remove(close-captions) */
+/** @private */
+export const getStartCaptionsInProgress = (
+  state: CallClientState,
+  props: CallingBaseSelectorProps
+): boolean | undefined => {
+  return state.calls[props.callId]?.captionsFeature.startCaptionsInProgress;
+};
+
 /* @conditional-compile-remove(close-captions) */
 /** @private */
 export const getCurrentCaptionLanguage = (

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 } from './baseSelectors';
+import { CallingBaseSelectorProps, getStartCaptionsInProgress } from './baseSelectors';
 /* @conditional-compile-remove(close-captions) */
 import {
   getCaptions,
@@ -99,8 +99,8 @@ export type _CaptionsBannerSelector = (
  * @internal
  */
 export const _captionsBannerSelector: _CaptionsBannerSelector = reselect.createSelector(
-  [getCaptions, getCaptionsStatus],
-  (captions, isCaptionsFeatureActive) => {
+  [getCaptions, getCaptionsStatus, getStartCaptionsInProgress],
+  (captions, isCaptionsFeatureActive, startCaptionsInProgress) => {
     // Following Teams app logic, no matter how many 'Partial' captions come,
     // we only pick first one according to start time, and all the other partial captions will be filtered out
     // This will give customers a stable captions experience when others talking over the dominant speaker
@@ -122,7 +122,8 @@ export const _captionsBannerSelector: _CaptionsBannerSelector = reselect.createS
     });
     return {
       captions: captionsInfo ?? [],
-      isCaptionsOn: isCaptionsFeatureActive ?? false
+      isCaptionsOn: isCaptionsFeatureActive ?? false,
+      startCaptionsInProgress: startCaptionsInProgress ?? false
     };
   }
 );

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

@@ -130,6 +130,7 @@ export interface CaptionsCallFeatureState {
     currentCaptionLanguage: string;
     currentSpokenLanguage: string;
     isCaptionsFeatureActive: boolean;
+    startCaptionsInProgress: boolean;
     supportedCaptionLanguages: string[];
     supportedSpokenLanguages: string[];
 }

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

@@ -101,6 +101,10 @@ export interface CaptionsCallFeatureState {
    * whether captions is on/off
    */
   isCaptionsFeatureActive: boolean;
+  /**
+   * whether start captions button is clicked or now
+   */
+  startCaptionsInProgress: boolean;
   /**
    * supported caption languages
    */

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

@@ -739,6 +739,16 @@ export class CallContext {
       }
     });
   }
+
+  /* @conditional-compile-remove(close-captions) */
+  setStartCaptionsInProgress(callId: string, startCaptionsInProgress: boolean): void {
+    this.modifyState((draft: CallClientState) => {
+      const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+      if (call) {
+        call.captionsFeature.startCaptionsInProgress = startCaptionsInProgress;
+      }
+    });
+  }
   /* @conditional-compile-remove(close-captions) */
   setSelectedSpokenLanguage(callId: string, spokenLanguage: string): void {
     this.modifyState((draft: CallClientState) => {

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

@@ -109,9 +109,10 @@ class ProxyTeamsCaptionsFeature implements ProxyHandler<TeamsCaptionsCallFeature
       case 'startCaptions':
         return this._context.withAsyncErrorTeedToState(
           async (...args: Parameters<TeamsCaptionsCallFeature['startCaptions']>) => {
+            this._context.setStartCaptionsInProgress(this._call.id, true);
             const ret = await target.startCaptions(...args);
-            this._context.setIsCaptionActive(this._call.id, true);
             this._context.setSelectedSpokenLanguage(this._call.id, args[0]?.spokenLanguage ?? 'en-us');
+
             return ret;
           },
           'Call.feature'
@@ -122,6 +123,7 @@ class ProxyTeamsCaptionsFeature implements ProxyHandler<TeamsCaptionsCallFeature
           async (...args: Parameters<TeamsCaptionsCallFeature['stopCaptions']>) => {
             const ret = await target.stopCaptions(...args);
             this._context.setIsCaptionActive(this._call.id, false);
+            this._context.setStartCaptionsInProgress(this._call.id, false);
             return ret;
           },
           'Call.feature'

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

@@ -135,7 +135,8 @@ export function convertSdkCallToDeclarativeCall(call: CallCommon): CallState {
       supportedCaptionLanguages: [],
       currentCaptionLanguage: '',
       currentSpokenLanguage: '',
-      isCaptionsFeatureActive: false
+      isCaptionsFeatureActive: false,
+      startCaptionsInProgress: false
     }
   };
 }

packages/calling-stateful-client/src/StreamUtils.test.ts

@@ -98,7 +98,8 @@ function createMockCall(mockCallId: string): CallState {
       supportedCaptionLanguages: [],
       currentCaptionLanguage: '',
       currentSpokenLanguage: '',
-      isCaptionsFeatureActive: false
+      isCaptionsFeatureActive: false,
+      startCaptionsInProgress: false
     }
   };
   return call;