fix(prejoin): Device indicator.

- don't show the indicator if disableInitialGUM=true
 - Change the text.
 - Change the pending state color.

lang/main.json

@@ -964,7 +964,7 @@
         "joinWithoutAudio": "Join without audio",
         "keyboardShortcuts": "Enable Keyboard shortcuts",
         "linkCopied": "Link copied to clipboard",
-        "lookGood": "Everything is working properly",
+        "lookGood": "Your devices are working properly",
         "or": "or",
         "premeeting": "Pre meeting",
         "proceedAnyway": "Proceed anyway",

react/features/prejoin/components/web/preview/DeviceStatus.tsx

@@ -1,31 +1,16 @@
 import React from 'react';
-import { WithTranslation } from 'react-i18next';
-import { connect } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { IReduxState } from '../../../../app/types';
-import { translate } from '../../../../base/i18n/functions';
+import { ColorPalette } from '../../../../base/styles/components/styles/ColorPalette';
 import { withPixelLineHeight } from '../../../../base/styles/functions.web';
 import {
     getDeviceStatusText,
     getDeviceStatusType
 } from '../../../functions';
 
-export interface IProps extends WithTranslation {
-
-    /**
-     * The text to be displayed in relation to the status of the audio/video devices.
-     */
-    deviceStatusText?: string;
-
-    /**
-     * The type of status for current devices, controlling the background color of the text.
-     * Can be `ok` or `warning`.
-     */
-    deviceStatusType?: string;
-}
-
-const useStyles = makeStyles()(theme => {
+const useStyles = makeStyles<{ deviceStatusType?: string; }>()((theme, { deviceStatusType = 'pending' }) => {
     return {
         deviceStatus: {
             display: 'flex',
@@ -57,7 +42,7 @@ const useStyles = makeStyles()(theme => {
             width: '16px',
             height: '16px',
             borderRadius: '100%',
-            backgroundColor: theme.palette.success01
+            backgroundColor: deviceStatusType === 'ok' ? theme.palette.success01 : ColorPalette.darkGrey
         }
     };
 });
@@ -68,8 +53,11 @@ const useStyles = makeStyles()(theme => {
  *
  * @returns {ReactElement}
  */
-function DeviceStatus({ deviceStatusType, deviceStatusText, t }: IProps) {
-    const { classes, cx } = useStyles();
+function DeviceStatus() {
+    const { t } = useTranslation();
+    const deviceStatusType = useSelector(getDeviceStatusType);
+    const deviceStatusText = useSelector(getDeviceStatusText);
+    const { classes, cx } = useStyles({ deviceStatusType });
     const hasError = deviceStatusType === 'warning';
     const containerClassName = cx(classes.deviceStatus, { 'device-status-error': hasError });
 
@@ -86,17 +74,4 @@ function DeviceStatus({ deviceStatusType, deviceStatusText, t }: IProps) {
     );
 }
 
-/**
- * Maps (parts of) the redux state to the React {@code Component} props.
- *
- * @param {Object} state - The redux state.
- * @returns {{ deviceStatusText: string, deviceStatusText: string }}
- */
-function mapStateToProps(state: IReduxState) {
-    return {
-        deviceStatusText: getDeviceStatusText(state),
-        deviceStatusType: getDeviceStatusType(state)
-    };
-}
-
-export default translate(connect(mapStateToProps)(DeviceStatus));
+export default DeviceStatus;

react/features/prejoin/functions.any.ts

@@ -28,7 +28,12 @@ export function isJoinByPhoneButtonVisible(state: IReduxState): boolean {
  */
 export function isDeviceStatusVisible(state: IReduxState): boolean {
     return !(isAudioMuted(state) && isVideoMutedByUser(state))
-    && !state['features/base/config'].startSilent;
+        && !state['features/base/config'].startSilent
+
+        // This handles the case where disableInitialGUM=true and we haven't yet tried to create any tracks. In this
+        // case we shouldn't display the the device status indicator. But once we create some tracks we can show it
+        // because we would know if we created the tracks successfully or not.
+        && (!state['features/base/config'].disableInitialGUM || state['features/base/tracks']?.length > 0);
 }
 
 /**

react/features/prejoin/reducer.ts

@@ -16,7 +16,7 @@ import {
 const DEFAULT_STATE = {
     country: '',
     deviceStatusText: 'prejoin.configuringDevices',
-    deviceStatusType: 'ok',
+    deviceStatusType: 'pending',
     dialOutCountry: {
         name: 'United States',
         dialCode: '1',