Fixed start captions console error and add loading screen

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;

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

@@ -570,6 +570,7 @@ export interface CallCompositeStrings {
     captionsAvailableLanguageStrings?: CaptionsAvailableLanguageStrings;
     captionsBannerMoreButtonCallingLabel?: string;
     captionsBannerMoreButtonTooltip?: string;
+    captionsBannerSpinnerText?: string;
     captionsSettingsCancelButtonLabel?: string;
     captionsSettingsCloseModalButtonAriaLabel?: string;
     captionsSettingsConfirmButtonLabel?: string;
@@ -1304,6 +1305,7 @@ export interface CaptionsCallFeatureState {
     currentCaptionLanguage: string;
     currentSpokenLanguage: string;
     isCaptionsFeatureActive: boolean;
+    startCaptionsInProgress: boolean;
     supportedCaptionLanguages: string[];
     supportedSpokenLanguages: string[];
 }

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

@@ -348,6 +348,16 @@ export interface _CaptionsBannerProps {
     // (undocumented)
     isCaptionsOn?: boolean;
     onRenderAvatar?: OnRenderAvatarCallback;
+    // (undocumented)
+    startCaptionsInProgress?: boolean;
+    // (undocumented)
+    strings?: _CaptionsBannerStrings;
+}
+
+// @internal
+export interface _CaptionsBannerStrings {
+    // (undocumented)
+    captionsBannerSpinnerText?: string;
 }
 
 // @internal

packages/react-components/src/components/CaptionsBanner.tsx

@@ -1,14 +1,15 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { Stack, FocusZone } from '@fluentui/react';
+import { Stack, FocusZone, Spinner } from '@fluentui/react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { _FileUploadCardsStrings } from './FileUploadCards';
 import { Ref } from '@internal/northstar-wrapper';
 import { _Caption } from './Caption';
 import {
   captionContainerClassName,
   captionsBannerClassName,
-  captionsContainerClassName
+  captionsContainerClassName,
+  loadingBannerClassName
 } from './styles/Captions.style';
 import { OnRenderAvatarCallback } from '../types';
 
@@ -23,27 +24,37 @@ export type _CaptionsInfo = {
   userId?: string;
 };
 
+/**
+ * @internal
+ * strings for captions banneer
+ */
+export interface _CaptionsBannerStrings {
+  captionsBannerSpinnerText?: string;
+}
+
 /**
  * @internal
  * _CaptionsBanner Component Props.
  */
 export interface _CaptionsBannerProps {
   captions: _CaptionsInfo[];
   isCaptionsOn?: boolean;
+  startCaptionsInProgress?: boolean;
   /**
    * Optional callback to override render of the avatar.
    *
    * @param userId - user Id
    */
   onRenderAvatar?: OnRenderAvatarCallback;
+  strings?: _CaptionsBannerStrings;
 }
 
 /**
  * @internal
  * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
  */
 export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
-  const { captions, isCaptionsOn, onRenderAvatar } = props;
+  const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings } = props;
   const captionsScrollDivRef = useRef<HTMLElement>(null);
   const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);
 
@@ -82,19 +93,26 @@ export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
 
   return (
     <>
-      {isCaptionsOn && (
+      {startCaptionsInProgress && (
         <FocusZone as="ul" className={captionsContainerClassName}>
-          <Ref innerRef={captionsScrollDivRef}>
-            <Stack verticalAlign="start" className={captionsBannerClassName}>
-              {captions.map((caption) => {
-                return (
-                  <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>
-                    <_Caption {...caption} onRenderAvatar={onRenderAvatar} />
-                  </div>
-                );
-              })}
+          {isCaptionsOn && (
+            <Ref innerRef={captionsScrollDivRef}>
+              <Stack verticalAlign="start" className={captionsBannerClassName}>
+                {captions.map((caption) => {
+                  return (
+                    <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>
+                      <_Caption {...caption} onRenderAvatar={onRenderAvatar} />
+                    </div>
+                  );
+                })}
+              </Stack>
+            </Ref>
+          )}
+          {!isCaptionsOn && (
+            <Stack verticalAlign="center" className={loadingBannerClassName} data-is-focusable={true}>
+              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive="assertive" labelPosition="right" />
             </Stack>
-          </Ref>
+          )}
         </FocusZone>
       )}
     </>

packages/react-components/src/components/CaptionsSettingsModal.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useMemo, useState } from 'react';
 import {
   IModalStyles,
@@ -84,21 +84,30 @@ export const _CaptionsSettingsModal = (props: _CaptionsSettingsModalProps): JSX.
     text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage
   });
 
+  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);
+
   const onDismiss = useCallback((): void => {
     if (onDismissCaptionsSettings) {
       onDismissCaptionsSettings();
     }
   }, [onDismissCaptionsSettings]);
 
+  useEffect(() => {
+    // set spoken language when start captions with a spoken language specified.
+    // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
+    if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {
+      onSetSpokenLanguage(selectedItem.key.toString());
+      // we only need to call set spoken language once when first starting captions
+      setHasSetSpokenLanguage(true);
+    }
+  }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedItem.key, hasSetSpokenLanguage]);
+
   const onConfirm = useCallback(async (): Promise<void> => {
     const languageCode = selectedItem.key.toString();
     if (isCaptionsFeatureActive) {
       onSetSpokenLanguage(languageCode);
     } else {
       await onStartCaptions({ spokenLanguage: languageCode });
-      // set spoken language when start captions with a spoken language specified.
-      // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
-      onSetSpokenLanguage(languageCode);
     }
     onDismiss();
   }, [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);

packages/react-components/src/components/StartCaptionsButton.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 import { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 import { defaultSpokenLanguage } from './utils';
 
@@ -93,16 +93,25 @@ export const _StartCaptionsButton = (props: _StartCaptionsButtonProps): JSX.Elem
     return { spokenLanguage: currentSpokenLanguage === '' ? defaultSpokenLanguage : currentSpokenLanguage };
   }, [currentSpokenLanguage]);
 
+  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);
+
   const onToggleStartCaptions = useCallback(async (): Promise<void> => {
     if (props.checked) {
       onStopCaptions();
     } else {
       await onStartCaptions(options);
+    }
+  }, [props.checked, onStartCaptions, onStopCaptions, options]);
+
+  useEffect(() => {
+    if (props.checked && !hasSetSpokenLanguage) {
       // set spoken language when start captions with a spoken language specified.
       // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
       onSetSpokenLanguage(options.spokenLanguage);
+      // we only need to call set spoken language once when first starting captions
+      setHasSetSpokenLanguage(true);
     }
-  }, [props.checked, onStartCaptions, onStopCaptions, onSetSpokenLanguage, options]);
+  }, [props.checked, onSetSpokenLanguage, options.spokenLanguage, hasSetSpokenLanguage]);
 
   return (
     <ControlBarButton

packages/react-components/src/components/styles/Captions.style.ts

@@ -58,6 +58,13 @@ export const captionsBannerClassName = mergeStyles({
   ...scrollbarStyles
 });
 
+/**
+ * @private
+ */
+export const loadingBannerClassName = mergeStyles({
+  height: _pxToRem(100)
+});
+
 /**
  * @private
  */

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

@@ -391,6 +391,7 @@ export interface CallCompositeStrings {
     captionsAvailableLanguageStrings?: CaptionsAvailableLanguageStrings;
     captionsBannerMoreButtonCallingLabel?: string;
     captionsBannerMoreButtonTooltip?: string;
+    captionsBannerSpinnerText?: string;
     captionsSettingsCancelButtonLabel?: string;
     captionsSettingsCloseModalButtonAriaLabel?: string;
     captionsSettingsConfirmButtonLabel?: string;

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

@@ -210,7 +210,8 @@ const defaultCallAdapterState: CallAdapterState = {
       supportedCaptionLanguages: [],
       currentCaptionLanguage: '',
       currentSpokenLanguage: '',
-      isCaptionsFeatureActive: false
+      isCaptionsFeatureActive: false,
+      startCaptionsInProgress: false
     }
   },
   userId: { kind: 'communicationUser', communicationUserId: '1' },

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

@@ -511,4 +511,9 @@ export interface CallCompositeStrings {
    * list of key value pairs that pairs language code to language names
    */
   captionsAvailableLanguageStrings?: CaptionsAvailableLanguageStrings;
+  /* @conditional-compile-remove(close-captions) */
+  /**
+   * captions banner loading spinner label
+   */
+  captionsBannerSpinnerText?: string;
 }

packages/react-composites/src/composites/CallWithChatComposite/adapter/TestUtils.ts

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