feat(speaker-stats) new design for web and mobile

config.js

@@ -742,6 +742,9 @@ var config = {
     // Enables detecting faces of participants and get their expression and send it to other participants
     // enableFacialRecognition: true,
 
+    // Enables displaying facial expressions in speaker stats
+    // enableDisplayFacialExpressions: true,
+
     // Controls the percentage of automatic feedback shown to participants when callstats is enabled.
     // The default value is 100%. If set to 0, no automatic feedback will be requested
     // feedbackPercentage: 100,

css/modals/speaker_stats/_speaker_stats.scss

@@ -1,80 +1,30 @@
 .speaker-stats {
     list-style: none;
-    padding: 0;
+    .row{
-    width: 100%;
+        display: flex;
-    font-weight: 500;
+        align-items: center;
-
+        .avatar {
-    .speaker-stats-item__status-dot {
+            width: 32px;
-        position: relative;
+            margin-right: 16px;
-        display: block;
-        width: 9px;
-        height: 9px;
-        border-radius: 50%;
-        margin: 0 auto;
-
-        &.status-active {
-            background: green;
         }
-
+        .name-time {
-        &.status-inactive {
+            width: calc(100% - 48px);
-            background: gray;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            
         }
-    }
+        .name-time_expressions-on {
-
+            width: calc(47% - 48px);
-    .status-user-left {
-        color: $placeHolderColor;
-    }
-
-    .speaker-stats-item__status,
-    .speaker-stats-item__name,
-    .speaker-stats-item__time,
-    .speaker-stats-item__name_expressions_on,
-    .speaker-stats-item__time_expressions_on,
-    .speaker-stats-item__expression {
-        display: inline-block;
-        margin: 5px 0;
-        vertical-align: middle;
-    }
-    .speaker-stats-item__status {
-        width: 5%;
-    }
-    .speaker-stats-item__name {
-        width: 40%;
-    }
-    .speaker-stats-item__time {
-        width: 55%;
-    }
-    .speaker-stats-item__name_expressions_on {
-        width: 20%;
-    }
-    .speaker-stats-item__time_expressions_on {
-        width: 25%;
-    }
-
-    .speaker-stats-item__expression {
-        width: 7%;
-        text-align: center;
-    }
-
-    @media(max-width: 750px) {
-        .speaker-stats-item__name_expressions_on {
-            width: 25%;
         }
-        .speaker-stats-item__time_expressions_on {
+        .expressions {
-            width: 30%;
+            width: calc(53% - 29px);
+            display: flex;
+            justify-content: space-between;
+            .expression {
+                width: 30px;
+                text-align: center;
+            }
         }
-        .speaker-stats-item__expression {
-            width: 10%;
-        }
-    }
-
-    .speaker-stats-item__name,
-    .speaker-stats-item__time,
-    .speaker-stats-item__name_expressions_on,
-    .speaker-stats-item__time_expressions_on,
-    .speaker-stats-item__expression {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
     }
 }

lang/main.json

@@ -927,6 +927,7 @@
     "speakerStats": {
         "angry": "Angry",
         "disgusted": "Disgusted",
+        "displayEmotions": "Display emotions",
         "fearful": "Fearful",
         "happy": "Happy",
         "hours": "{{count}}h",

react/features/facial-recognition/constants.js

@@ -6,10 +6,13 @@ export const FACIAL_EXPRESSION_EMOJIS = {
     sad: '🙁',
     surprised: '😮',
     angry: '😠',
-    fearful: '😨',
+    fearful: '😨'
-    disgusted: '🤢'
+
+    // disgusted: '🤢'
 };
 
+export const FACIAL_EXPRESSIONS = [ 'happy', 'neutral', 'sad', 'surprised', 'angry', 'fearful' ];
+
 /**
  * Time used for detection interval when facial expressions worker uses webgl backend.
  */

react/features/speaker-stats/actionTypes.js

@@ -47,3 +47,11 @@ export const INIT_REORDER_STATS = 'INIT_REORDER_STATS';
  */
 export const RESET_SEARCH_CRITERIA = 'RESET_SEARCH_CRITERIA'
 
+/**
+ * Action type to toggle the facial expressions grid.
+ * {
+ *     type: TOGGLE_FACIAL_EXPRESSIONS  
+ * }
+ */
+export const TOGGLE_FACIAL_EXPRESSIONS = 'SHOW_FACIAL_EXPRESSIONS';
+

react/features/speaker-stats/actions.any.js

@@ -5,7 +5,8 @@ import {
     INIT_UPDATE_STATS,
     UPDATE_STATS,
     INIT_REORDER_STATS,
-    RESET_SEARCH_CRITERIA
+    RESET_SEARCH_CRITERIA,
+    TOGGLE_FACIAL_EXPRESSIONS
 } from './actionTypes';
 
 /**
@@ -68,3 +69,14 @@ export function resetSearchCriteria() {
         type: RESET_SEARCH_CRITERIA
     };
 }
+
+/**
+ * Toggles the facial expressions grid.
+ *
+ * @returns {Object}
+ */
+export function toggleFacialExpressions() {
+    return {
+        type: TOGGLE_FACIAL_EXPRESSIONS
+    };
+}

react/features/speaker-stats/components/AbstractSpeakerStatsList.js

@@ -7,7 +7,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { getLocalParticipant } from '../../base/participants';
 import { initUpdateStats } from '../actions';
 import {
-    REDUCE_EXPRESSIONS_THRESHOLD,
     SPEAKER_STATS_RELOAD_INTERVAL
 } from '../constants';
 
@@ -15,17 +14,18 @@ import {
  * Component that renders the list of speaker stats.
  *
  * @param {Function} speakerStatsItem - React element tu use when rendering.
+ * @param {Object} itemStyles - Styles for the speaker stats item.
  * @returns {Function}
  */
-const abstractSpeakerStatsList = (speakerStatsItem: Function): Function[] => {
+const abstractSpeakerStatsList = (speakerStatsItem: Function, itemStyles?: Object): Function[] => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
     const conference = useSelector(state => state['features/base/conference'].conference);
-    const speakerStats = useSelector(state => state['features/speaker-stats'].stats);
+    const { stats: speakerStats, showFacialExpressions } = useSelector(state => state['features/speaker-stats']);
     const localParticipant = useSelector(getLocalParticipant);
-    const { clientWidth } = useSelector(state => state['features/base/responsive-ui']);
+    const { defaultRemoteDisplayName } = useSelector(
-    const { defaultRemoteDisplayName, enableFacialRecognition } = useSelector(
         state => state['features/base/config']) || {};
+    const { enableDisplayFacialExpressions } = useSelector(state => state['features/base/config']) || {};
     const { facialExpressions: localFacialExpressions } = useSelector(
         state => state['features/facial-recognition']) || {};
 
@@ -48,7 +48,7 @@ const abstractSpeakerStatsList = (speakerStatsItem: Function): Function[] => {
                             ? `${localParticipant.name} (${meString})`
                             : meString
                     );
-                    if (enableFacialRecognition) {
+                    if (enableDisplayFacialExpressions) {
                         stats[userId].setFacialExpressions(localFacialExpressions);
                     }
                 }
@@ -77,26 +77,25 @@ const abstractSpeakerStatsList = (speakerStatsItem: Function): Function[] => {
     }, []);
 
     const localSpeakerStats = Object.keys(speakerStats).length === 0 ? getLocalSpeakerStats() : speakerStats;
-    const userIds = Object.keys(localSpeakerStats);
+    const userIds = Object.keys(localSpeakerStats).filter(id => localSpeakerStats[id] && !localSpeakerStats[id].hidden);
 
     return userIds.map(userId => {
         const statsModel = localSpeakerStats[userId];
-
-        if (!statsModel || statsModel.hidden) {
-            return null;
-        }
         const props = {};
 
         props.isDominantSpeaker = statsModel.isDominantSpeaker();
         props.dominantSpeakerTime = statsModel.getTotalDominantSpeakerTime();
         props.participantId = userId;
         props.hasLeft = statsModel.hasLeft();
-        if (enableFacialRecognition) {
+        if (showFacialExpressions) {
             props.facialExpressions = statsModel.getFacialExpressions();
         }
-        props.showFacialExpressions = enableFacialRecognition;
+        props.hidden = statsModel.hidden;
-        props.reduceExpressions = clientWidth < REDUCE_EXPRESSIONS_THRESHOLD;
+        props.showFacialExpressions = showFacialExpressions;
         props.displayName = statsModel.getDisplayName() || defaultRemoteDisplayName;
+        if (itemStyles) {
+            props.styles = itemStyles;
+        }
         props.t = t;
 
         return speakerStatsItem(props);

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

@@ -1,11 +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 SpeakerStatsLabels from './SpeakerStatsLabels';
 import SpeakerStatsList from './SpeakerStatsList';
+import SpeakerStatsSearch from './SpeakerStatsSearch';
 import style from './styles';
 
 /**
@@ -13,12 +17,22 @@ import style from './styles';
  *
  * @returns {React$Element<any>}
  */
-const SpeakerStats = () => (
+const SpeakerStats = () => {
-    <JitsiScreen
+    const dispatch = useDispatch();
-        style = { style.speakerStatsContainer }>
+    const onSearch = useCallback((criteria = '') => {
-        <SpeakerStatsLabels />
+        dispatch(initSearch(escapeRegexp(criteria)));
-        <SpeakerStatsList />
+    }
-    </JitsiScreen>
+    , [ 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

@@ -3,6 +3,8 @@
 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';
@@ -36,32 +38,42 @@ 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.speakerStatsItemStatus }>
+            <View style = { style.speakerStatsAvatar }>
-                <View style = { [ style.speakerStatsItemStatusDot, { backgroundColor: dotColor } ] } />
+                {
+                    props.hasLeft ? (
+                        <StatelessAvatar
+                            className = 'userAvatar'
+                            color = { BaseTheme.palette.ui05 }
+                            id = 'avatar'
+                            initials = { getInitials(props.displayName) }
+                            size = { BaseTheme.spacing[5] } />
+                    ) : (
+                        <Avatar
+                            className = 'userAvatar'
+                            participantId = { props.participantId }
+                            size = { BaseTheme.spacing[5] } />
+                    )
+                }
             </View>
-            <View style = { [ style.speakerStatsItemStatus, style.speakerStatsItemName ] }>
+            <View style = { style.speakerStatsNameTime } >
-                <Text>
+                <Text style = { [ style.speakerStatsText, props.hasLeft && style.speakerStatsLeft ] }>
-                    { props.displayName }
+                    {props.displayName}
                 </Text>
-            </View>
-            <View style = { [ style.speakerStatsItemStatus, style.speakerStatsItemTime ] }>
                 <TimeElapsed
+                    style = { [
+                        style.speakerStatsText,
+                        style.speakerStatsTime,
+                        props.isDominantSpeaker && style.speakerStatsDominant,
+                        props.hasLeft && style.speakerStatsLeft
+                    ] }
                     time = { props.dominantSpeakerTime } />
             </View>
         </View>
     );
-};
 
 export default SpeakerStatsItem;

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

@@ -1,35 +0,0 @@
-/* @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/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/TimeElapsed.js

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

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

@@ -4,51 +4,58 @@ export default {
     speakerStatsContainer: {
         flexDirection: 'column',
         flex: 1,
-        height: 'auto'
+        height: 'auto',
+        paddingHorizontal: BaseTheme.spacing[3],
+        backgroundColor: BaseTheme.palette.ui02
     },
     speakerStatsItemContainer: {
         flexDirection: 'row',
         alignSelf: 'stretch',
-        height: 24
+        height: BaseTheme.spacing[9],
+        alignItems: 'center'
     },
-    speakerStatsItemStatus: {
+    speakerStatsAvatar: {
+        width: BaseTheme.spacing[5],
+        height: BaseTheme.spacing[5],
+        marginRight: BaseTheme.spacing[3]
+    },
+    speakerStatsNameTime: {
+        flexDirection: 'row',
         flex: 1,
-        alignSelf: 'stretch'
+        justifyContent: 'space-between',
+        alignItems: 'center'
     },
-    speakerStatsItemStatusDot: {
+    speakerStatsText: {
-        width: 5,
+        ...BaseTheme.typography.bodyShortRegularLarge,
-        height: 5,
+        color: BaseTheme.palette.text01
-        marginLeft: 7,
-        marginTop: 8,
-        padding: 3,
-        borderRadius: 10,
-        borderWidth: 0
     },
-    speakerStatsItemName: {
+    speakerStatsTime: {
-        flex: 8,
+        paddingHorizontal: 4,
-        alignSelf: 'stretch'
+        paddingVertical: 2,
+        borderRadius: 4
     },
-    speakerStatsItemTime: {
+    speakerStatsDominant: {
-        flex: 12,
+        backgroundColor: BaseTheme.palette.success02
-        alignSelf: 'stretch'
     },
-    speakerStatsLabelContainer: {
+    speakerStatsLeft: {
-        marginTop: BaseTheme.spacing[2],
+        color: BaseTheme.palette.text03
-        marginBottom: BaseTheme.spacing[1],
-        flexDirection: 'row'
     },
-    dummyElement: {
+    speakerStatsSearch: {
-        flex: 1,
+        wrapper: {
-        alignSelf: 'stretch'
+            marginLeft: 0,
-    },
+            marginRight: 0,
-    speakerName: {
+            marginTop: BaseTheme.spacing[3],
-        flex: 8,
+            marginBottom: BaseTheme.spacing[3],
-        alignSelf: 'stretch'
+            flexDirection: 'row',
-    },
+            alignItems: 'center'
-    speakerTime: {
+        },
-        flex: 12,
+        input: {
-        alignSelf: 'stretch'
+            textAlign: 'left'
+        },
+        searchIcon: {
+            width: 10,
+            height: 20,
+            marginLeft: BaseTheme.spacing[3]
+        }
     }
-
-
 };

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

@@ -0,0 +1,97 @@
+// @flow
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Switch } from '../../../base/react';
+
+
+const useStyles = makeStyles(theme => {
+    return {
+        switchContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            '& svg': {
+                display: 'none'
+
+            },
+            '& div': {
+                width: 38,
+                '& > label': {
+                    width: 32,
+                    height: 20,
+                    backgroundColor: theme.palette.ui05,
+                    '&:not([data-checked]):hover': {
+                        backgroundColor: theme.palette.ui05
+                    },
+                    '&[data-checked]': {
+                        backgroundColor: theme.palette.action01,
+                        '&:hover': {
+                            backgroundColor: theme.palette.action01
+                        },
+                        '&::before': {
+                            margin: '0 0 1.5px -3px',
+                            backgroundColor: theme.palette.text01
+                        }
+                    },
+                    '&:focus-within': {
+                        borderColor: 'transparent'
+                    },
+                    '&::before': {
+                        width: 14,
+                        height: 14,
+                        margin: '0 0 1.5px 1.5px',
+                        backgroundColor: theme.palette.text01
+                    }
+                }
+            }
+        },
+        switchLabel: {
+            marginRight: 10,
+            ...theme.typography.bodyShortRegular,
+            lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
+        }
+    };
+});
+
+/**
+ * The type of the React {@code Component} props of {@link ToggleFacialExpressionsButton}.
+ */
+type Props = {
+
+    /**
+     * The function to initiate the change in the speaker stats table.
+     */
+    onChange: Function,
+
+    /**
+     * The state of the button.
+     */
+    showFacialExpressions: boolean,
+
+};
+
+/**
+ * React component for toggling facial expressions grid.
+ *
+ * @returns {React$Element<any>}
+ */
+export default function FacialExpressionsSwitch({ onChange, showFacialExpressions }: Props) {
+    const classes = useStyles();
+    const { t } = useTranslation();
+
+    return (
+        <div className = { classes.switchContainer } >
+            <label
+                className = { classes.switchLabel }
+                htmlFor = 'facial-expressions-switch'>
+                { t('speakerStats.displayEmotions')}
+            </label>
+            <Switch
+                id = 'facial-expressions-switch'
+                onValueChange = { onChange }
+                trackColor = {{ false: 'blue' }}
+                value = { showFacialExpressions } />
+        </div>
+    );
+}

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

@@ -1,142 +1,116 @@
 // @flow
 
-import React, { Component } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
-import type { Dispatch } from 'redux';
+import React, { useCallback, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 
 import { Dialog } from '../../../base/dialog';
-import { translate } from '../../../base/i18n';
-import { connect } from '../../../base/redux';
 import { escapeRegexp } from '../../../base/util';
-import { initSearch, resetSearchCriteria } from '../../actions';
+import { resetSearchCriteria, toggleFacialExpressions, initSearch } from '../../actions';
+import {
+    DISPLAY_SWITCH_BREAKPOINT,
+    MOBILE_BREAKPOINT,
+    RESIZE_SEARCH_SWITCH_CONTAINER_BREAKPOINT
+} from '../../constants';
 
+import FacialExpressionsSwitch from './FacialExpressionsSwitch';
 import SpeakerStatsLabels from './SpeakerStatsLabels';
 import SpeakerStatsList from './SpeakerStatsList';
 import SpeakerStatsSearch from './SpeakerStatsSearch';
 
-/**
+const useStyles = makeStyles(theme => {
- * The type of the React {@code Component} props of {@link SpeakerStats}.
+    return {
- */
+        separator: {
-type Props = {
+            position: 'absolute',
+            width: '100%',
+            height: 1,
+            left: 0,
+            backgroundColor: theme.palette.border02
+        },
+        searchSwitchContainer: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            width: '100%'
+        },
+        searchSwitchContainerExpressionsOn: {
+            width: '58.5%',
+            [theme.breakpoints.down(RESIZE_SEARCH_SWITCH_CONTAINER_BREAKPOINT)]: {
+                width: '100%'
+            }
+        },
+        searchContainer: {
+            width: '50%'
+        },
+        searchContainerFullWidth: {
+            width: '100%'
+        }
+    };
+});
 
-    /**
+const SpeakerStats = () => {
-     * The flag which shows if the facial recognition is enabled, obtained from the redux store.
+    const { enableDisplayFacialExpressions } = useSelector(state => state['features/base/config']);
-     * If enabled facial expressions are shown.
+    const { showFacialExpressions } = useSelector(state => state['features/speaker-stats']);
-     */
+    const { clientWidth } = useSelector(state => state['features/base/responsive-ui']);
-    _showFacialExpressions: boolean,
+    const displaySwitch = enableDisplayFacialExpressions && clientWidth > DISPLAY_SWITCH_BREAKPOINT;
+    const displayLabels = clientWidth > MOBILE_BREAKPOINT;
+    const dispatch = useDispatch();
+    const classes = useStyles();
 
-    /**
+    const onToggleFacialExpressions = useCallback(() =>
-     * True if the client width is les than 750.
+        dispatch(toggleFacialExpressions())
-     */
+    , [ dispatch ]);
-    _reduceExpressions: boolean,
 
-    /**
+    const onSearch = useCallback((criteria = '') => {
-     * The search criteria.
+        dispatch(initSearch(escapeRegexp(criteria)));
-     */
+    }
-    _criteria: string | null,
+    , [ dispatch ]);
 
-    /**
+    useEffect(() => {
-     * Redux store dispatch method.
+        showFacialExpressions && !displaySwitch && dispatch(toggleFacialExpressions());
-     */
+    }, [ clientWidth ]);
-    dispatch: Dispatch<any>,
+    useEffect(() => () => dispatch(resetSearchCriteria()), []);
 
-    /**
+    return (
-     * The function to translate human-readable text.
+        <Dialog
-     */
+            cancelKey = 'dialog.close'
-    t: Function
+            hideCancelButton = { true }
+            submitDisabled = { true }
+            titleKey = 'speakerStats.speakerStats'
+            width = { showFacialExpressions ? '664px' : 'small' }>
+            <div className = 'speaker-stats'>
+                <div
+                    className = {
+                        `${classes.searchSwitchContainer}
+                        ${showFacialExpressions ? classes.searchSwitchContainerExpressionsOn : ''}`
+                    }>
+                    <div
+                        className = {
+                            displaySwitch
+                                ? classes.searchContainer
+                                : classes.searchContainerFullWidth }>
+                        <SpeakerStatsSearch
+                            onSearch = { onSearch } />
+                    </div>
+
+                    { displaySwitch
+                    && <FacialExpressionsSwitch
+                        onChange = { onToggleFacialExpressions }
+                        showFacialExpressions = { showFacialExpressions } />
+                    }
+                </div>
+                { displayLabels && (
+                    <>
+                        <SpeakerStatsLabels
+                            showFacialExpressions = { showFacialExpressions ?? false } />
+                        <div className = { classes.separator } />
+                    </>
+                )}
+                <SpeakerStatsList />
+            </div>
+        </Dialog>
+
+    );
 };
 
-/**
+export default SpeakerStats;
- * React component for displaying a list of speaker stats.
- *
- * @augments Component
- */
-class SpeakerStats extends Component<Props> {
-
-    /**
-     * Initializes a new SpeakerStats instance.
-     *
-     * @param {Object} props - The read-only React Component props with which
-     * the new instance is to be initialized.
-     */
-    constructor(props) {
-        super(props);
-
-        // Bind event handlers so they are only bound once per instance.
-        this._onSearch = this._onSearch.bind(this);
-    }
-
-    /**
-     * Resets the search criteria when component will unmount.
-     *
-     * @private
-     * @returns {void}
-     */
-    componentWillUnmount() {
-        this.props.dispatch(resetSearchCriteria());
-    }
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        return (
-            <Dialog
-                cancelKey = 'dialog.close'
-                submitDisabled = { true }
-                titleKey = 'speakerStats.speakerStats'
-                width = { this.props._showFacialExpressions ? 'large' : 'medium' }>
-                <div className = 'speaker-stats'>
-                    <SpeakerStatsSearch onSearch = { this._onSearch } />
-                    <SpeakerStatsLabels
-                        reduceExpressions = { this.props._reduceExpressions }
-                        showFacialExpressions = { this.props._showFacialExpressions ?? false } />
-                    <SpeakerStatsList />
-                </div>
-            </Dialog>
-        );
-    }
-
-    _onSearch: () => void;
-
-    /**
-     * Search the existing participants by name.
-     *
-     * @returns {void}
-     * @param {string} criteria - The search parameter.
-     * @protected
-     */
-    _onSearch(criteria = '') {
-        this.props.dispatch(initSearch(escapeRegexp(criteria)));
-    }
-}
-
-/**
- * Maps (parts of) the redux state to the associated SpeakerStats's props.
- *
- * @param {Object} state - The redux state.
- * @private
- * @returns {{
- *     _showFacialExpressions: ?boolean,
- *     _reduceExpressions: boolean,
- * }}
- */
-function _mapStateToProps(state) {
-    const { enableFacialRecognition } = state['features/base/config'];
-    const { clientWidth } = state['features/base/responsive-ui'];
-
-    return {
-        /**
-         * The local display name.
-         *
-         * @private
-         * @type {string|undefined}
-         */
-        _showFacialExpressions: enableFacialRecognition,
-        _reduceExpressions: clientWidth < 750
-    };
-}
-
-export default translate(connect(_mapStateToProps)(SpeakerStats));

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

@@ -2,6 +2,11 @@
 
 import React from 'react';
 
+import { Avatar, StatelessAvatar } from '../../../base/avatar';
+import { getInitials } from '../../../base/avatar/functions';
+import BaseTheme from '../../../base/ui/components/BaseTheme';
+import { FACIAL_EXPRESSIONS } from '../../../facial-recognition/constants.js';
+
 import TimeElapsed from './TimeElapsed';
 
 /**
@@ -20,11 +25,6 @@ type Props = {
      */
     facialExpressions: Object,
 
-    /**
-     * True if the client width is les than 750.
-     */
-    reduceExpressions: boolean,
-
     /**
      * True if the facial recognition is not disabled.
      */
@@ -45,16 +45,26 @@ type Props = {
      */
     hasLeft: boolean,
 
+    /**
+     * True if the participant is not shown in speaker stats.
+     */
+    hidden: boolean,
+
     /**
      * True if the participant is currently the dominant speaker.
      */
     isDominantSpeaker: boolean,
 
+    /**
+     * Styles for the item.
+     */
+    styles: Object,
+
     /**
      * Invoked to obtain translated strings.
      */
     t: Function
-};
+}
 
 const SpeakerStatsItem = (props: Props) => {
     /**
@@ -63,80 +73,68 @@ const SpeakerStatsItem = (props: Props) => {
      * @inheritdoc
      * @returns {ReactElement}
      */
-    const hasLeftClass = props.hasLeft ? 'status-user-left' : '';
+    const hasLeftClass = props.hasLeft ? props.styles.hasLeft : '';
-    const rowDisplayClass = `speaker-stats-item ${hasLeftClass}`;
+    const rowDisplayClass = `row ${hasLeftClass} ${props.styles.item}`;
+    const expressionClass = 'expression';
+    const nameTimeClass = `name-time${
+        props.showFacialExpressions ? ' name-time_expressions-on' : ''
+    }`;
+    const timeClass = `${props.styles.time} ${props.isDominantSpeaker ? props.styles.dominant : ''}`;
 
-    const dotClass = props.isDominantSpeaker
+
-        ? 'status-active' : 'status-inactive';
+    const FacialExpressions = () => FACIAL_EXPRESSIONS.map(
-    const speakerStatusClass = `speaker-stats-item__status-dot ${dotClass}`;
+            expression => (
+                <div
+                    aria-label = { props.t(`speakerStats.${expression}`) }
+                    className = {
+                        `${expressionClass} ${
+                            props.facialExpressions[expression] === 0 ? props.styles.hasLeft : ''
+                        }`
+                    }
+                    key = { expression }>
+                    { props.facialExpressions[expression] }
+                </div>
+            )
+    );
 
     return (
         <div
             className = { rowDisplayClass }
             key = { props.participantId } >
-            <div className = 'speaker-stats-item__status'>
+            <div className = { `avatar ${props.styles.avatar}` }>
-                <span className = { speakerStatusClass } />
+                {
+                    props.hasLeft ? (
+                        <StatelessAvatar
+                            className = 'userAvatar'
+                            color = { BaseTheme.palette.ui04 }
+                            id = 'avatar'
+                            initials = { getInitials(props.displayName) } />
+                    ) : (
+                        <Avatar
+                            className = 'userAvatar'
+                            participantId = { props.participantId } />
+                    )
+                }
             </div>
-            <div
+            <div className = { nameTimeClass }>
-                aria-label = { props.t('speakerStats.speakerStats') }
+                <div
-                className = { `speaker-stats-item__name${
+                    aria-label = { props.t('speakerStats.speakerStats') }
-                    props.showFacialExpressions ? '_expressions_on' : ''
+                    className = { props.styles.displayName }>
-                }` }>
+                    { props.displayName }
-                { props.displayName }
+                </div>
-            </div>
+                <div
-            <div
+                    aria-label = { props.t('speakerStats.speakerTime') }
-                aria-label = { props.t('speakerStats.speakerTime') }
+                    className = { timeClass }>
-                className = { `speaker-stats-item__time${
+                    <TimeElapsed
-                    props.showFacialExpressions ? '_expressions_on' : ''
+                        time = { props.dominantSpeakerTime } />
-                }` }>
+                </div>
-                <TimeElapsed
-                    time = { props.dominantSpeakerTime } />
             </div>
             { props.showFacialExpressions
             && (
-                <>
+                <div className = { `expressions ${props.styles.expressions}` }>
-                    <div
+                    <FacialExpressions />
-                        aria-label = { 'Happy' }
+                </div>
-                        className = 'speaker-stats-item__expression'>
+            )}
-                        { props.facialExpressions.happy }
-                    </div>
-                    <div
-                        aria-label = { 'Neutral' }
-                        className = 'speaker-stats-item__expression'>
-                        { props.facialExpressions.neutral }
-                    </div>
-                    <div
-                        aria-label = { 'Sad' }
-                        className = 'speaker-stats-item__expression'>
-                        { props.facialExpressions.sad }
-                    </div>
-                    <div
-                        aria-label = { 'Surprised' }
-                        className = 'speaker-stats-item__expression'>
-                        { props.facialExpressions.surprised }
-                    </div>
-                    { !props.reduceExpressions && (
-                        <>
-                            <div
-                                aria-label = { 'Angry' }
-                                className = 'speaker-stats-item__expression'>
-                                { props.facialExpressions.angry }
-                            </div>
-                            <div
-                                aria-label = { 'Fearful' }
-                                className = 'speaker-stats-item__expression'>
-                                { props.facialExpressions.fearful }
-                            </div>
-                            <div
-                                aria-label = { 'Disgusted' }
-                                className = 'speaker-stats-item__expression'>
-                                { props.facialExpressions.disgusted }
-                            </div>
-                        </>
-                    )}
-                </>
-            )
-            }
         </div>
     );
 };

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

@@ -1,90 +1,79 @@
 /* @flow */
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
 
-import React, { Component } from 'react';
-
-import { translate } from '../../../base/i18n';
 import { Tooltip } from '../../../base/tooltip';
 import { FACIAL_EXPRESSION_EMOJIS } from '../../../facial-recognition/constants.js';
 
+const useStyles = makeStyles(theme => {
+    return {
+        labels: {
+            padding: '22px 0 7px 0',
+            height: 20
+        },
+        emojis: {
+            paddingLeft: 27,
+            ...theme.typography.bodyShortRegularLarge,
+            lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+        }
+    };
+});
+
 /**
  * The type of the React {@code Component} props of {@link SpeakerStatsLabels}.
  */
 type Props = {
 
-    /**
-     * True if the client width is les than 750.
-     */
-    reduceExpressions: boolean,
-
     /**
      * True if the facial recognition is not disabled.
      */
     showFacialExpressions: boolean,
-
-    /**
-     * The function to translate human-readable text.
-     */
-    t: Function
 };
 
-/**
+const SpeakerStatsLabels = (props: Props) => {
- * React component for labeling speaker stats column items.
+    const { t } = useTranslation();
- *
+    const classes = useStyles();
- * @augments Component
+    const FacialExpressionsLabels = () => Object.keys(FACIAL_EXPRESSION_EMOJIS).map(
- */
+            expression => (
-class SpeakerStatsLabels extends Component<Props> {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { t } = this.props;
-
-        return (
-            <div className = 'speaker-stats-item__labels'>
-                <div className = 'speaker-stats-item__status' />
                 <div
-                    className = { `speaker-stats-item__name${
+                    className = 'expression'
-                        this.props.showFacialExpressions ? '_expressions_on' : ''
+                    key = { expression }>
-                    }` }>
+                    <Tooltip
-                    { t('speakerStats.name') }
+                        content = { t(`speakerStats.${expression}`) }
-                </div>
+                        position = { 'top' } >
-                <div
+                        <div>
-                    className = { `speaker-stats-item__time${
+                            { FACIAL_EXPRESSION_EMOJIS[expression] }
-                        this.props.showFacialExpressions ? '_expressions_on' : ''
-                    }` }>
-                    { t('speakerStats.speakerTime') }
-                </div>
-                { this.props.showFacialExpressions
-                    && (this.props.reduceExpressions
-                        ? Object.keys(FACIAL_EXPRESSION_EMOJIS)
-                            .filter(expression => ![ 'angry', 'fearful', 'disgusted' ].includes(expression))
-                        : Object.keys(FACIAL_EXPRESSION_EMOJIS)
-                    ).map(
-                    expression => (
-                        <div
-                            className = 'speaker-stats-item__expression'
-                            key = { expression }>
-                            <Tooltip
-                                content = { t(`speakerStats.${expression}`) }
-                                position = { 'top' } >
-                                <div
-                                    // eslint-disable-next-line react-native/no-inline-styles
-                                    style = {{ fontSize: 17 }}>
-
-                                    { FACIAL_EXPRESSION_EMOJIS[expression] }
-                                </div>
-
-                            </Tooltip>
                         </div>
 
-                    ))
+                    </Tooltip>
-                }
+                </div>
-            </div>
+            )
-        );
+    );
-    }
+    const nameTimeClass = `name-time${
-}
+        props.showFacialExpressions ? ' name-time_expressions-on' : ''
+    }`;
 
-export default translate(SpeakerStatsLabels);
+    return (
+        <div className = { `row ${classes.labels}` }>
+            <div className = 'avatar' />
+
+            <div className = { nameTimeClass }>
+                <div>
+                    { t('speakerStats.name') }
+                </div>
+                <div>
+                    { t('speakerStats.speakerTime') }
+                </div>
+            </div>
+            {
+                props.showFacialExpressions
+                && <div className = { `expressions ${classes.emojis}` }>
+                    <FacialExpressionsLabels />
+                </div>
+            }
+        </div>
+    );
+};
+
+export default SpeakerStatsLabels;

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

@@ -1,25 +1,71 @@
 // @flow
 
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
+import { MOBILE_BREAKPOINT } from '../../constants';
 import abstractSpeakerStatsList from '../AbstractSpeakerStatsList';
 
 import SpeakerStatsItem from './SpeakerStatsItem';
 
+const useStyles = makeStyles(theme => {
+    return {
+        list: {
+            marginTop: `${theme.spacing(3)}px`
+        },
+        item: {
+            height: `${theme.spacing(7)}px`,
+            [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+                height: `${theme.spacing(8)}px`
+            }
+        },
+        avatar: {
+            height: `${theme.spacing(5)}px`
+        },
+        expressions: {
+            paddingLeft: 29
+        },
+        hasLeft: {
+            color: theme.palette.text03
+        },
+        displayName: {
+            ...theme.typography.bodyShortRegular,
+            lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`,
+            [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+                ...theme.typography.bodyShortRegularLarge,
+                lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+            }
+        },
+        time: {
+            padding: '2px 4px',
+            borderRadius: '4px',
+            ...theme.typography.labelBold,
+            lineHeight: `${theme.typography.labelBold.lineHeight}px`,
+            [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+                ...theme.typography.bodyShortRegularLarge,
+                lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+            }
+        },
+        dominant: {
+            backgroundColor: theme.palette.success02
+        }
+    };
+});
+
 /**
  * Component that renders the list of speaker stats.
  *
  * @returns {React$Element<any>}
  */
 const SpeakerStatsList = () => {
-    const items = abstractSpeakerStatsList(SpeakerStatsItem);
+    const classes = useStyles();
+    const items = abstractSpeakerStatsList(SpeakerStatsItem, classes);
 
     return (
-        <div>
+        <div className = { classes.list }>
             {items}
         </div>
     );
 };
 
-
 export default SpeakerStatsList;

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

@@ -1,25 +1,54 @@
 /* @flow */
 
-import { FieldTextStateless as TextField } from '@atlaskit/field-text';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import { IconSearch, Icon } from '../../../base/icons';
 import { getFieldValue } from '../../../base/react';
+import BaseTheme from '../../../base/ui/components/BaseTheme';
+import { MOBILE_BREAKPOINT } from '../../constants';
 import { isSpeakerStatsSearchDisabled } from '../../functions';
 
 const useStyles = makeStyles(theme => {
     return {
+        speakerStatsSearchContainer: {
+            position: 'relative'
+        },
+        searchIcon: {
+            display: 'none',
+            [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+                display: 'block',
+                position: 'absolute',
+                color: theme.palette.text03,
+                left: 16,
+                top: 13,
+                width: 20,
+                height: 20
+            }
+        },
         speakerStatsSearch: {
-            position: 'absolute',
+            backgroundColor: theme.palette.field01,
-            right: '80px',
+            border: '1px solid',
-            top: '8px',
+            borderRadius: 6,
-
+            borderColor: theme.palette.border02,
-            [theme.breakpoints.down('400')]: {
+            color: theme.palette.text01,
-                left: 20,
+            padding: '10px 16px',
-                right: 0,
+            width: '100%',
-                top: 42
+            height: 40,
+            '&::placeholder': {
+                color: theme.palette.text03,
+                ...theme.typography.bodyShortRegular,
+                lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`
+            },
+            [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+                height: 48,
+                padding: '13px 16px 13px 44px',
+                '&::placeholder': {
+                    ...theme.typography.bodyShortRegularLarge,
+                    lineHeight: `${theme.typography.bodyShortRegular.lineHeightLarge}px`
+                }
             }
         }
     };
@@ -45,15 +74,21 @@ 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);
 
         setSearchValue(value);
-
         onSearch && onSearch(value);
     }, []);
-    const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled);
     const preventDismiss = useCallback((evt: KeyboardEvent) => {
         if (evt.key === 'Enter') {
             evt.preventDefault();
@@ -65,17 +100,21 @@ function SpeakerStatsSearch({ onSearch }: Props) {
     }
 
     return (
-        <div className = { classes.speakerStatsSearch }>
+        <div className = { classes.speakerStatsSearchContainer }>
-            <TextField
+            <Icon
+                className = { classes.searchIcon }
+                color = { BaseTheme.palette.surface07 }
+                src = { IconSearch } />
+            <input
                 autoComplete = 'off'
                 autoFocus = { false }
-                compact = { true }
+                className = { classes.speakerStatsSearch }
+                id = 'speaker-stats-search'
                 name = 'speakerStatsSearch'
                 onChange = { onChange }
                 onKeyPress = { preventDismiss }
                 placeholder = { t('speakerStats.search') }
-                shouldFitContainer = { false }
+                tabIndex = { 0 }
-                type = 'text'
                 value = { searchValue } />
         </div>
     );

react/features/speaker-stats/constants.js

@@ -1,6 +1,7 @@
-/**
- * The with of the client at witch the facial expressions will be reduced to only 4.
- */
-export const REDUCE_EXPRESSIONS_THRESHOLD = 750;
-
 export const SPEAKER_STATS_RELOAD_INTERVAL = 1000;
+
+export const DISPLAY_SWITCH_BREAKPOINT = 600;
+
+export const RESIZE_SEARCH_SWITCH_CONTAINER_BREAKPOINT = 750;
+
+export const MOBILE_BREAKPOINT = 480;

react/features/speaker-stats/functions.js

@@ -170,3 +170,24 @@ export function filterBySearchCriteria(state: Object, stats: ?Object) {
 
     return filteredStats;
 }
+
+/**
+ * Reset the hidden speaker stats.
+ *
+ * @param {Object} state - The redux state.
+ * @param {Object | undefined} stats - The unfiltered stats.
+ *
+ * @returns {Object} - Speaker stats.
+ * @public
+ */
+export function resetHiddenStats(state: Object, stats: ?Object) {
+    const resetStats = _.cloneDeep(stats ?? getSpeakerStats(state));
+
+    for (const id in resetStats) {
+        if (resetStats[id].hidden) {
+            resetStats[id].hidden = false;
+        }
+    }
+
+    return resetStats;
+}

react/features/speaker-stats/middleware.js

@@ -10,16 +10,16 @@ import { MiddlewareRegistry } from '../base/redux';
 
 import {
     INIT_SEARCH,
-    INIT_UPDATE_STATS
+    INIT_UPDATE_STATS,
+    RESET_SEARCH_CRITERIA
 } from './actionTypes';
 import { initReorderStats, updateStats } from './actions';
-import { filterBySearchCriteria, getSortedSpeakerStats, getPendingReorder } from './functions';
+import { filterBySearchCriteria, getSortedSpeakerStats, getPendingReorder, resetHiddenStats } from './functions';
 
 MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
     const result = next(action);
 
     switch (action.type) {
-
     case INIT_SEARCH: {
         const state = getState();
         const stats = filterBySearchCriteria(state);
@@ -38,6 +38,14 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
             dispatch(updateStats(pendingReorder ? getSortedSpeakerStats(state, stats) : stats));
         }
         break;
+
+    case RESET_SEARCH_CRITERIA: {
+        const state = getState();
+        const stats = resetHiddenStats(state);
+
+        dispatch(updateStats(stats));
+        break;
+    }
     case PARTICIPANT_JOINED:
     case PARTICIPANT_LEFT:
     case PARTICIPANT_KICKED:

react/features/speaker-stats/reducer.js

@@ -8,7 +8,8 @@ import {
     INIT_SEARCH,
     UPDATE_STATS,
     INIT_REORDER_STATS,
-    RESET_SEARCH_CRITERIA
+    RESET_SEARCH_CRITERIA,
+    TOGGLE_FACIAL_EXPRESSIONS
 } from './actionTypes';
 
 /**
@@ -20,7 +21,8 @@ const INITIAL_STATE = {
     stats: {},
     isOpen: false,
     pendingReorder: true,
-    criteria: null
+    criteria: null,
+    showFacialExpressions: false
 };
 
 ReducerRegistry.register('features/speaker-stats', (state = _getInitialState(), action) => {
@@ -33,6 +35,12 @@ ReducerRegistry.register('features/speaker-stats', (state = _getInitialState(),
         return _initReorderStats(state);
     case RESET_SEARCH_CRITERIA:
         return _updateCriteria(state, { criteria: null });
+    case TOGGLE_FACIAL_EXPRESSIONS: {
+        return {
+            ...state,
+            showFacialExpressions: !state.showFacialExpressions
+        };
+    }
     }
 
     return state;