jiti-meet/react/features/prejoin/components/preview/DeviceStatus.tsx

120 lines
3.5 KiB
TypeScript
Raw Normal View History

2022-09-13 07:36:00 +00:00
import { Theme } from '@mui/material';
2020-04-16 10:47:10 +00:00
import React from 'react';
import { WithTranslation } from 'react-i18next';
2022-09-13 07:36:00 +00:00
import { makeStyles } from 'tss-react/mui';
2020-05-20 10:57:03 +00:00
import { IState } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
import Icon from '../../../base/icons/components/Icon';
import { IconCheckSolid, IconExclamationTriangle } from '../../../base/icons/svg';
import { connect } from '../../../base/redux/functions';
2020-04-16 10:47:10 +00:00
import {
getDeviceStatusText,
getDeviceStatusType
2020-04-16 10:47:10 +00:00
} from '../../functions';
export interface Props extends WithTranslation {
2020-04-16 10:47:10 +00:00
/**
* The text to be displayed in relation to the status of the audio/video devices.
*/
deviceStatusText: string;
2020-04-16 10:47:10 +00:00
/**
* The type of status for current devices, controlling the background color of the text.
* Can be `ok` or `warning`.
*/
deviceStatusType: string;
}
2020-04-16 10:47:10 +00:00
2022-09-13 07:36:00 +00:00
const useStyles = makeStyles()((theme: Theme) => {
return {
deviceStatus: {
alignItems: 'center',
color: '#fff',
display: 'flex',
fontSize: '14px',
lineHeight: '20px',
padding: '6px',
textAlign: 'center',
'& span': {
marginLeft: theme.spacing(3)
},
'&.device-status-error': {
alignItems: 'flex-start',
backgroundColor: theme.palette.warning01,
borderRadius: '6px',
color: theme.palette.uiBackground,
padding: '12px 16px',
textAlign: 'left'
},
'& .device-icon': {
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
display: 'inline-block',
height: '16px',
width: '16px'
},
'& .device-icon--ok svg path': {
fill: '#189B55'
}
}
};
});
2020-04-16 10:47:10 +00:00
const iconMap = {
warning: {
src: IconExclamationTriangle,
className: 'device-icon--warning'
2020-04-16 10:47:10 +00:00
},
ok: {
src: IconCheckSolid,
className: 'device-icon--ok'
2020-04-16 10:47:10 +00:00
}
};
/**
* Strip showing the current status of the devices.
* User is informed if there are missing or malfunctioning devices.
*
* @returns {ReactElement}
*/
function DeviceStatus({ deviceStatusType, deviceStatusText, t }: Props) {
2022-09-13 07:36:00 +00:00
const { classes, cx } = useStyles();
const { src, className } = iconMap[deviceStatusType as keyof typeof iconMap];
const hasError = deviceStatusType === 'warning';
2022-09-13 07:36:00 +00:00
const containerClassName = cx(classes.deviceStatus, { 'device-status-error': hasError });
2020-04-16 10:47:10 +00:00
return (
<div
className = { containerClassName }
role = 'alert'
tabIndex = { -1 }>
2020-04-16 10:47:10 +00:00
<Icon
className = { `device-icon ${className}` }
2020-04-16 10:47:10 +00:00
size = { 16 }
src = { src } />
<span role = 'heading'>
{hasError ? t('prejoin.errorNoPermissions') : t(deviceStatusText)}
</span>
2020-04-16 10:47:10 +00:00
</div>
);
}
/**
* 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: IState) {
2020-04-16 10:47:10 +00:00
return {
deviceStatusText: getDeviceStatusText(state),
deviceStatusType: getDeviceStatusType(state)
2020-04-16 10:47:10 +00:00
};
}
export default translate(connect(mapStateToProps)(DeviceStatus));