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

react/features/speaker-stats/components/native/SpeakerStatsItem.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Text, View, ViewStyle } from 'react-native';
+
+import Avatar from '../../../base/avatar/components/Avatar';
+import StatelessAvatar from '../../../base/avatar/components/native/StatelessAvatar';
+import { getInitials } from '../../../base/avatar/functions';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+import TimeElapsed from './TimeElapsed';
+import style from './styles';
+
+interface IProps {
+
+    /**
+     * The name of the participant.
+     */
+    displayName: string;
+
+    /**
+     * The total milliseconds the participant has been dominant speaker.
+     */
+    dominantSpeakerTime: number;
+
+    /**
+     * True if the participant is no longer in the meeting.
+     */
+    hasLeft: boolean;
+
+    /**
+     * True if the participant is currently the dominant speaker.
+     */
+    isDominantSpeaker: boolean;
+
+    /**
+     * The id of the user.
+     */
+    participantId: string;
+}
+
+const SpeakerStatsItem = (props: IProps) =>
+    (
+        <View
+            key = { props.participantId }
+            style = { style.speakerStatsItemContainer as ViewStyle }>
+            <View style = { style.speakerStatsAvatar }>
+                {
+                    props.hasLeft ? (
+                        <StatelessAvatar
+                            color = { BaseTheme.palette.ui05 }
+                            initials = { getInitials(props.displayName) }
+                            size = { BaseTheme.spacing[5] } />
+                    ) : (
+                        <Avatar
+                            className = 'userAvatar'
+                            participantId = { props.participantId }
+                            size = { BaseTheme.spacing[5] } />
+                    )
+                }
+            </View>
+            <View style = { style.speakerStatsNameTime as ViewStyle } >
+                <Text style = { [ style.speakerStatsText, props.hasLeft && style.speakerStatsLeft ] }>
+                    {props.displayName}
+                </Text>
+                <TimeElapsed
+                    style = { [
+                        style.speakerStatsText,
+                        style.speakerStatsTime,
+                        props.isDominantSpeaker && style.speakerStatsDominant,
+                        props.hasLeft && style.speakerStatsLeft
+                    ] }
+                    time = { props.dominantSpeakerTime } />
+            </View>
+        </View>
+    );
+
+export default SpeakerStatsItem;