feat(speaker-stats): add search in native

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

@@ -1,10 +1,15 @@
 // @flow
 
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
+import { escapeRegexp } from '../../../base/util';
+import { resetSearchCriteria, initSearch } from '../../actions';
+
 
 import SpeakerStatsList from './SpeakerStatsList';
+import SpeakerStatsSearch from './SpeakerStatsSearch';
 import style from './styles';
 
 /**
@@ -12,11 +17,22 @@ import style from './styles';
  *
  * @returns {React$Element<any>}
  */
-const SpeakerStats = () => (
-    <JitsiScreen
-        style = { style.speakerStatsContainer }>
-        <SpeakerStatsList />
-    </JitsiScreen>
-);
+const SpeakerStats = () => {
+    const dispatch = useDispatch();
+    const onSearch = useCallback((criteria = '') => {
+        dispatch(initSearch(escapeRegexp(criteria)));
+    }
+    , [ dispatch ]);
+
+    useEffect(() => () => dispatch(resetSearchCriteria()), []);
+
+    return (
+        <JitsiScreen
+            style = { style.speakerStatsContainer }>
+            <SpeakerStatsSearch onSearch = { onSearch } />
+            <SpeakerStatsList />
+        </JitsiScreen>
+    );
+};
 
 export default SpeakerStats;

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

@@ -60,14 +60,15 @@ const SpeakerStatsItem = (props: Props) =>
                 }
             </View>
             <View style = { style.speakerStatsNameTime } >
-                <Text style = { style.speakerStatsText }>
+                <Text style = { [ style.speakerStatsText, props.hasLeft && style.speakerStatsLeft ] }>
                     {props.displayName}
                 </Text>
                 <TimeElapsed
                     style = { [
                         style.speakerStatsText,
                         style.speakerStatsTime,
-                        props.isDominantSpeaker && style.speakerStatsDominant
+                        props.isDominantSpeaker && style.speakerStatsDominant,
+                        props.hasLeft && style.speakerStatsLeft
                     ] }
                     time = { props.dominantSpeakerTime } />
             </View>

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

@@ -0,0 +1,60 @@
+// @flow
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { withTheme } from 'react-native-paper';
+import { useSelector } from 'react-redux';
+
+import { IconSearch, Icon } from '../../../base/icons';
+import ClearableInput from '../../../participants-pane/components/native/ClearableInput';
+import { isSpeakerStatsSearchDisabled } from '../../functions';
+
+import styles from './styles';
+
+/**
+ * The type of the React {@code Component} props of {@link SpeakerStatsSearch}.
+ */
+type Props = {
+
+    /**
+     * The function to initiate the change in the speaker stats table.
+     */
+    onSearch: Function,
+
+    /**
+     * Theme used for styles.
+     */
+     theme: Object
+};
+
+/**
+ * React component for display an individual user's speaker stats.
+ *
+ * @returns {React$Element<any>}
+ */
+function SpeakerStatsSearch({ onSearch, theme }: Props) {
+    const { t } = useTranslation();
+
+    const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled);
+
+    if (disableSpeakerStatsSearch) {
+        return null;
+    }
+
+    return (
+        <ClearableInput
+            customStyles = { styles.speakerStatsSearch }
+            onChange = { onSearch }
+            placeholder = { t('speakerStats.search') }
+            placeholderColor = { theme.palette.text03 }
+            prefixComponent = {
+                <Icon
+                    color = { theme.palette.text03 }
+                    size = { 20 }
+                    src = { IconSearch }
+                    style = { styles.speakerStatsSearch.searchIcon } />
+            }
+            selectionColor = { theme.palette.text01 } />
+    );
+}
+
+export default withTheme(SpeakerStatsSearch);

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

@@ -5,7 +5,7 @@ export default {
         flexDirection: 'column',
         flex: 1,
         height: 'auto',
-        paddingHorizontal: 16,
+        paddingHorizontal: BaseTheme.spacing[3],
         backgroundColor: BaseTheme.palette.ui02
     },
     speakerStatsItemContainer: {
@@ -17,7 +17,7 @@ export default {
     speakerStatsAvatar: {
         width: 32,
         height: 32,
-        marginRight: 16
+        marginRight: BaseTheme.spacing[3]
     },
     speakerStatsNameTime: {
         flexDirection: 'row',
@@ -37,7 +37,25 @@ export default {
     },
     speakerStatsDominant: {
         backgroundColor: BaseTheme.palette.success02
+    },
+    speakerStatsLeft: {
+        color: BaseTheme.palette.text03
+    },
+    speakerStatsSearch: {
+        wrapper: {
+            marginLeft: 0,
+            marginRight: 0,
+            marginVertical: BaseTheme.spacing[3],
+            flexDirection: 'row',
+            alignItems: 'center'
+        },
+        input: {
+            textAlign: 'left'
+        },
+        searchIcon: {
+            width: 10,
+            height: 20,
+            marginLeft: BaseTheme.spacing[3]
+        }
     }
-
-
 };

react/features/speaker-stats/components/web/SpeakerStatsSearch.js

@@ -73,9 +73,15 @@ type Props = {
 function SpeakerStatsSearch({ onSearch }: Props) {
     const classes = useStyles();
     const { t } = useTranslation();
-
     const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled);
     const [ searchValue, setSearchValue ] = useState<string>('');
+
+    /**
+     * Callback for the onChange event of the field.
+     *
+     * @param {Object} evt - The static event.
+     * @returns {void}
+     */
     const onChange = useCallback((evt: Event) => {
         const value = getFieldValue(evt);