jiti-meet/react/features/speaker-stats/components/web/SpeakerStatsList.tsx

72 lines
2.0 KiB
TypeScript

/* eslint-disable lines-around-comment */
import { Theme } from '@mui/material';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { MOBILE_BREAKPOINT } from '../../constants';
// @ts-ignore
import abstractSpeakerStatsList from '../AbstractSpeakerStatsList';
// @ts-ignore
import SpeakerStatsItem from './SpeakerStatsItem';
const useStyles = makeStyles()((theme: Theme) => {
return {
list: {
marginTop: theme.spacing(3),
marginBottom: theme.spacing(3)
},
item: {
height: theme.spacing(7),
[theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
height: theme.spacing(8)
}
},
avatar: {
height: theme.spacing(5)
},
expressions: {
paddingLeft: 29
},
hasLeft: {
color: theme.palette.text03
},
displayName: {
...withPixelLineHeight(theme.typography.bodyShortRegular),
[theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
}
},
time: {
padding: '2px 4px',
borderRadius: '4px',
...withPixelLineHeight(theme.typography.labelBold),
[theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
}
},
dominant: {
backgroundColor: theme.palette.success02
}
};
});
/**
* Component that renders the list of speaker stats.
*
* @returns {React$Element<any>}
*/
const SpeakerStatsList = () => {
const { classes } = useStyles();
const items = abstractSpeakerStatsList(SpeakerStatsItem, classes);
return (
<div className = { classes.list }>
{items}
</div>
);
};
export default SpeakerStatsList;