ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2025-12-30 11:22:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(prejoin): Device indicator.

Browse Source 
- don't show the indicator if disableInitialGUM=true
 - Change the text.
 - Change the pending state color.
This commit is contained in:
Hristo Terezov
2024-11-06 15:47:19 -06:00
parent 2d77bf1da9
commit 1e43bbbd95
4 changed files with 19 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
react/features/prejoin/components/web/preview/DeviceStatus.tsx
View File

@@ -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;