Revert "feat(speaker-stats): new design for native view"

This reverts commit 9ca1418da8.

react/features/speaker-stats/components/native/SpeakerStats.js

@@ -4,6 +4,7 @@ import React from 'react';
 
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 
+import SpeakerStatsLabels from './SpeakerStatsLabels';
 import SpeakerStatsList from './SpeakerStatsList';
 import style from './styles';
 
@@ -15,6 +16,7 @@ import style from './styles';
 const SpeakerStats = () => (
     <JitsiScreen
         style = { style.speakerStatsContainer }>
+        <SpeakerStatsLabels />
         <SpeakerStatsList />
     </JitsiScreen>
 );

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

@@ -3,8 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 
-import { Avatar, StatelessAvatar } from '../../../base/avatar';
-import { getInitials } from '../../../base/avatar/functions';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 import TimeElapsed from './TimeElapsed';
 import style from './styles';
@@ -37,42 +36,32 @@ type Props = {
     isDominantSpeaker: boolean
 };
 
-const SpeakerStatsItem = (props: Props) =>
-    (
+const SpeakerStatsItem = (props: Props) => {
+    /**
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    const dotColor = props.isDominantSpeaker
+        ? BaseTheme.palette.icon05 : BaseTheme.palette.icon03;
+
+    return (
         <View
             key = { props.participantId }
             style = { style.speakerStatsItemContainer }>
-            <View style = { style.speakerStatsAvatar }>
-                {
-                    props.hasLeft ? (
-                        <StatelessAvatar
-                            className = 'userAvatar'
-                            color = { '#525252' }
-                            id = 'avatar'
-                            initials = { getInitials(props.displayName) }
-                            size = { 32 } />
-                    ) : (
-                        <Avatar
-                            className = 'userAvatar'
-                            participantId = { props.participantId }
-                            size = { 32 } />
-                    )
-                }
+            <View style = { style.speakerStatsItemStatus }>
+                <View style = { [ style.speakerStatsItemStatusDot, { backgroundColor: dotColor } ] } />
             </View>
-            <View style = { style.speakerStatsNameTime } >
-                <Text style = { style.speakerStatsText }>
-                    {props.displayName}
+            <View style = { [ style.speakerStatsItemStatus, style.speakerStatsItemName ] }>
+                <Text>
+                    { props.displayName }
                 </Text>
+            </View>
+            <View style = { [ style.speakerStatsItemStatus, style.speakerStatsItemTime ] }>
                 <TimeElapsed
-                    style = { [
-                        style.speakerStatsText,
-                        style.speakerStatsTime,
-                        props.isDominantSpeaker && style.speakerStatsDominant
-                    ] }
                     time = { props.dominantSpeakerTime } />
             </View>
         </View>
-    )
-;
+    );
+};
 
 export default SpeakerStatsItem;

react/features/speaker-stats/components/native/SpeakerStatsLabels.js

@@ -0,0 +1,35 @@
+/* @flow */
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text, View } from 'react-native';
+
+import style from './styles';
+
+/**
+ * React component for labeling speaker stats column items.
+ *
+ * @returns {void}
+ */
+const SpeakerStatsLabels = () => {
+
+    const { t } = useTranslation();
+
+    return (
+        <View style = { style.speakerStatsLabelContainer } >
+            <View style = { style.dummyElement } />
+            <View style = { style.speakerName }>
+                <Text>
+                    { t('speakerStats.name') }
+                </Text>
+            </View>
+            <View style = { style.speakerTime }>
+                <Text>
+                    { t('speakerStats.speakerTime') }
+                </Text>
+            </View>
+        </View>
+    );
+};
+
+export default SpeakerStatsLabels;

react/features/speaker-stats/components/native/TimeElapsed.js

@@ -11,11 +11,6 @@ import { createLocalizedTime } from '../timeFunctions';
  */
 type Props = {
 
-    /**
-     * Style for text.
-     */
-    style: Object,
-
     /**
      * The function to translate human-readable text.
      */
@@ -42,11 +37,11 @@ class TimeElapsed extends PureComponent<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { style, time, t } = this.props;
+        const { time, t } = this.props;
         const timeElapsed = createLocalizedTime(time, t);
 
         return (
-            <Text style = { style }>
+            <Text>
                 { timeElapsed }
             </Text>
         );

react/features/speaker-stats/components/native/styles.js

@@ -4,39 +4,50 @@ export default {
     speakerStatsContainer: {
         flexDirection: 'column',
         flex: 1,
-        height: 'auto',
-        paddingHorizontal: 16,
-        backgroundColor: BaseTheme.palette.ui02
+        height: 'auto'
     },
     speakerStatsItemContainer: {
         flexDirection: 'row',
         alignSelf: 'stretch',
-        height: 64,
-        alignItems: 'center'
+        height: 24
     },
-    speakerStatsAvatar: {
-        width: 32,
-        height: 32,
-        marginRight: 16
-    },
-    speakerStatsNameTime: {
-        flexDirection: 'row',
+    speakerStatsItemStatus: {
         flex: 1,
-        justifyContent: 'space-between',
-        alignItems: 'center'
+        alignSelf: 'stretch'
     },
-    speakerStatsText: {
-        fontSize: 16,
-        fontWeight: '400',
-        color: BaseTheme.palette.text01
+    speakerStatsItemStatusDot: {
+        width: 5,
+        height: 5,
+        marginLeft: 7,
+        marginTop: 8,
+        padding: 3,
+        borderRadius: 10,
+        borderWidth: 0
     },
-    speakerStatsTime: {
-        paddingHorizontal: 4,
-        paddingVertical: 2,
-        borderRadius: 4
+    speakerStatsItemName: {
+        flex: 8,
+        alignSelf: 'stretch'
     },
-    speakerStatsDominant: {
-        backgroundColor: BaseTheme.palette.success02
+    speakerStatsItemTime: {
+        flex: 12,
+        alignSelf: 'stretch'
+    },
+    speakerStatsLabelContainer: {
+        marginTop: BaseTheme.spacing[2],
+        marginBottom: BaseTheme.spacing[1],
+        flexDirection: 'row'
+    },
+    dummyElement: {
+        flex: 1,
+        alignSelf: 'stretch'
+    },
+    speakerName: {
+        flex: 8,
+        alignSelf: 'stretch'
+    },
+    speakerTime: {
+        flex: 12,
+        alignSelf: 'stretch'
     }