Update the reconnecting RemoteUFD according to figma (#5216)

* Update the reconnecting RemoteUFD according to figma

---------

Signed-off-by: Porter Nan <[email protected]>

Author: PorterNan

change-beta/@azure-communication-react-19050629-62ab-4bee-b9e9-0049c5804676.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "",
+  "comment": "Update the reconnecting RemoteUFD according to figma",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -5351,6 +5351,7 @@ export interface VideoTileStrings {
     moreOptionsParticipantIsSpeakingAriaLabel: string;
     moreOptionsParticipantMutedStateMutedAriaLabel: string;
     moreOptionsParticipantMutedStateUnmutedAriaLabel: string;
+    participantReconnecting?: string;
     participantStateHold: string;
     participantStateRinging: string;
 }

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

@@ -1,17 +1,21 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { mergeStyles, Spinner, Text } from '@fluentui/react';
+import { mergeStyles, Spinner } from '@fluentui/react';
+/* @conditional-compile-remove(remote-ufd) */
+import { Stack } from '@fluentui/react';
 import React, { useEffect, useRef, useState } from 'react';
 import {
   invertedVideoInPipStyle,
   mediaContainer,
   container,
   loadingSpinnerContainer,
-  loadSpinnerStyles,
-  reconnectingContainer,
-  reconnectingText
+  loadSpinnerStyles
 } from './styles/StreamMedia.styles';
+/* @conditional-compile-remove(remote-ufd) */
+import { reconnectingContainer, reconnectSpinnerStyles } from './styles/StreamMedia.styles';
+/* @conditional-compile-remove(remote-ufd) */
+import { useLocale } from '../localization';
 import { useTheme } from '../theming';
 import { BaseCustomStyles } from '../types';
 
@@ -53,6 +57,8 @@ export interface StreamMediaProps {
 export const StreamMedia = (props: StreamMediaProps): JSX.Element => {
   const containerEl = useRef<HTMLDivElement>(null);
   const theme = useTheme();
+  /* @conditional-compile-remove(remote-ufd) */
+  const reconnectingText = useLocale().strings.videoTile.participantReconnecting || 'Reconnecting...';
 
   const { isMirrored, videoStreamElement, styles, loadingState = 'none' } = props;
   const [pipEnabled, setPipEnabled] = useState(false);
@@ -99,13 +105,18 @@ export const StreamMedia = (props: StreamMediaProps): JSX.Element => {
           <Spinner data-ui-id="stream-media-loading-spinner" styles={loadSpinnerStyles} />
         </div>
       )}
-      {loadingState === 'reconnecting' && (
-        <div className={reconnectingContainer()}>
-          <Text data-ui-id="stream-media-reconnecting" className={reconnectingText(theme)}>
-            Reconnecting...
-          </Text>
-        </div>
-      )}
+      {
+        /* @conditional-compile-remove(remote-ufd) */
+        loadingState === 'reconnecting' && (
+          <Stack className={reconnectingContainer()}>
+            <Spinner
+              data-ui-id="stream-media-loading-spinner"
+              styles={reconnectSpinnerStyles()}
+              label={reconnectingText}
+            />
+          </Stack>
+        )
+      }
     </div>
   );
 };

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

@@ -50,6 +50,9 @@ export interface VideoTileStrings {
   participantStateRinging: string;
   /** String for displaying the Hold state of the remote participant */
   participantStateHold: string;
+  /* @conditional-compile-remove(remote-ufd) */
+  /** String for displaying the reconnecting state of the remote participant */
+  participantReconnecting?: string;
   /** String for the announcement of the muted state of the participant when muted */
   moreOptionsParticipantMutedStateMutedAriaLabel: string;
   /** String for the announcement of the unmuted state of the participant when unmuted */

packages/react-components/src/components/styles/StreamMedia.styles.ts

@@ -2,7 +2,6 @@
 // Licensed under the MIT License.
 
 import { ISpinnerStyles, mergeStyles, Theme } from '@fluentui/react';
-import { isDarkThemed } from '../../theming/themeUtils';
 
 /**
  * @private
@@ -44,22 +43,6 @@ export const reconnectingContainer = (): string =>
     alignItems: 'center'
   });
 
-/**
- * @private
- */
-export const reconnectingText = (theme: Theme): string =>
-  mergeStyles({
-    // Position centrally on top of content. Parent must have position: relative.
-    height: '3rem',
-    lineHeight: '3rem',
-    justifyContent: 'center',
-    alignItems: 'center',
-    // DarkTheme check is done cause the text color should be light in both dark and light themes
-    // due to background overlay being dark in both themes.
-    color: isDarkThemed(theme) ? theme.palette.themeDarker : theme.palette.neutralLighter,
-    fontSize: theme.fonts.large.fontSize
-  });
-
 /**
  * @private
  */
@@ -76,6 +59,21 @@ export const loadSpinnerStyles: ISpinnerStyles = {
   }
 };
 
+/**
+ * @private
+ */
+export const reconnectSpinnerStyles = (): ISpinnerStyles => ({
+  ...loadSpinnerStyles,
+  label: {
+    color: 'white'
+  },
+  circle: {
+    ...(loadSpinnerStyles.circle as object),
+    maxHeight: '2rem',
+    borderWidth: 'unset'
+  }
+});
+
 /**
  * @private
  */

packages/react-components/src/localization/locales/en-US/strings.json

@@ -536,6 +536,7 @@
   },
   "videoTile": {
     "participantStateRinging": "Calling...",
+    "participantReconnecting": "Reconnecting...",
     "participantStateHold": "On hold",
     "moreOptionsButtonAriaLabel": "More Options {displayName} {isMuted} {isHandRaised} {state} {isSpeaking}",
     "moreOptionsParticipantMutedStateMutedAriaLabel": "muted",