snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import { MOBILE_BREAKPOINT } from '../../constants';
+import abstractSpeakerStatsList from '../AbstractSpeakerStatsList';
+
+import SpeakerStatsItem from './SpeakerStatsItem';
+
+const useStyles = makeStyles()(theme => {
+    return {
+        list: {
+            paddingTop: 90,
+            '& .item': {
+                height: theme.spacing(7),
+                [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+                    height: theme.spacing(8)
+                },
+                '& .has-left': {
+                    color: theme.palette.speakerStatsLabelText
+                },
+                '& .avatar': {
+                    marginRight: theme.spacing(3)
+                },
+                '& .time': {
+                    padding: '2px 4px',
+                    borderRadius: '4px',
+                    ...theme.typography.labelBold,
+                    [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+                        ...theme.typography.bodyShortRegularLarge
+                    },
+                    backgroundColor: theme.palette.speakerStatsRowBackground
+                },
+                '& .display-name': {
+                    userSelect: 'text',
+                    ...theme.typography.bodyShortRegular,
+                    [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+                        ...theme.typography.bodyShortRegularLarge
+                    }
+                },
+                '& .dominant': {
+                    backgroundColor: theme.palette.speakerStatsSuccessBar
+                }
+            }
+
+        }
+    };
+});
+
+/**
+ * Component that renders the list of speaker stats.
+ *
+ * @returns {React$Element<any>}
+ */
+const SpeakerStatsList = () => {
+    const { classes } = useStyles();
+    const items = abstractSpeakerStatsList(SpeakerStatsItem);
+
+    return (
+        <div className = { classes.list }>
+            <div className = 'separator' />
+            {items}
+        </div>
+    );
+};
+
+export default SpeakerStatsList;