fix(speaker-stats): remove reduce expressions flag

react/features/base/config/reducer.js

@@ -27,7 +27,6 @@ declare var interfaceConfig: Object;
  * @type {Object}
  */
 const INITIAL_NON_RN_STATE = {
-    enableFacialRecognition: true
 };
 
 /**

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';
 
@@ -23,9 +22,9 @@ const abstractSpeakerStatsList = (speakerStatsItem: Function): Function[] => {
     const conference = useSelector(state => state['features/base/conference'].conference);
     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(
         state => state['features/base/config']) || {};
+    const { enableFacialRecognition } = useSelector(state => state['features/base/config']) || {};
     const { facialExpressions: localFacialExpressions } = useSelector(
         state => state['features/facial-recognition']) || {};
 
@@ -48,7 +47,7 @@ const abstractSpeakerStatsList = (speakerStatsItem: Function): Function[] => {
                             ? `${localParticipant.name} (${meString})`
                             : meString
                     );
-                    if (showFacialExpressions) {
+                    if (enableFacialRecognition) {
                         stats[userId].setFacialExpressions(localFacialExpressions);
                     }
                 }
@@ -92,7 +91,6 @@ const abstractSpeakerStatsList = (speakerStatsItem: Function): Function[] => {
         }
         props.hidden = statsModel.hidden;
         props.showFacialExpressions = showFacialExpressions;
-        props.reduceExpressions = clientWidth < REDUCE_EXPRESSIONS_THRESHOLD;
         props.displayName = statsModel.getDisplayName() || defaultRemoteDisplayName;
         props.t = t;
 

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

@@ -7,7 +7,6 @@ import { useSelector, useDispatch } from 'react-redux';
 import { Dialog } from '../../../base/dialog';
 import { escapeRegexp } from '../../../base/util';
 import { resetSearchCriteria, toggleFacialExpressions, initSearch } from '../../actions';
-import { REDUCE_EXPRESSIONS_THRESHOLD } from '../../constants';
 
 import FacialExpressionsSwitch from './FacialExpressionsSwitch';
 import SpeakerStatsLabels from './SpeakerStatsLabels';
@@ -43,8 +42,6 @@ const useStyles = makeStyles(theme => {
 const SpeakerStats = () => {
     const { enableFacialRecognition } = useSelector(state => state['features/base/config']);
     const { showFacialExpressions } = useSelector(state => state['features/speaker-stats']);
-    const { clientWidth } = useSelector(state => state['features/base/responsive-ui']);
-    const reduceExpressions = clientWidth < REDUCE_EXPRESSIONS_THRESHOLD;
     const dispatch = useDispatch();
     const classes = useStyles();
 
@@ -82,7 +79,6 @@ const SpeakerStats = () => {
                 </div>
 
                 <SpeakerStatsLabels
-                    reduceExpressions = { reduceExpressions }
                     showFacialExpressions = { showFacialExpressions ?? false } />
                 <div className = { classes.separator } />
                 <SpeakerStatsList />

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

@@ -49,11 +49,6 @@ type Props = {
      */
     facialExpressions: Object,
 
-    /**
-     * True if the client width is les than 750.
-     */
-    reduceExpressions: boolean,
-
     /**
      * True if the facial recognition is not disabled.
      */
@@ -108,11 +103,7 @@ const SpeakerStatsItem = (props: Props) => {
     const timeClass = `${classes.time} ${props.isDominantSpeaker ? classes.dominant : ''}`;
 
 
-    const FacialExpressions = () => (
+    const FacialExpressions = () => FACIAL_EXPRESSIONS.map(
-        props.reduceExpressions
-            ? FACIAL_EXPRESSIONS
-                .filter(expression => ![ 'angry', 'fearful', 'disgusted' ].includes(expression))
-            : FACIAL_EXPRESSIONS).map(
             expression => (
                 <div
                     aria-label = { props.t(`speakerStats.${expression}`) }

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

@@ -24,11 +24,6 @@ const useStyles = makeStyles(() => {
  */
 type Props = {
 
-    /**
-     * True if the client width is les than 750.
-     */
-    reduceExpressions: boolean,
-
     /**
      * True if the facial recognition is not disabled.
      */
@@ -39,11 +34,7 @@ const SpeakerStatsLabels = (props: Props) => {
     const { t } = useTranslation();
     const classes = useStyles();
 
-    const FacialExpressionsLabels = () => (
+    const FacialExpressionsLabels = () => Object.keys(FACIAL_EXPRESSION_EMOJIS).map(
-        props.reduceExpressions
-            ? Object.keys(FACIAL_EXPRESSION_EMOJIS)
-                .filter(expression => ![ 'angry', 'fearful', 'disgusted' ].includes(expression))
-            : Object.keys(FACIAL_EXPRESSION_EMOJIS)).map(
             expression => (
                 <div
                     className = 'expression text-large'

react/features/speaker-stats/constants.js

@@ -1,6 +1 @@
-/**
+export const SPEAKER_STATS_RELOAD_INTERVAL = 1000;
- * 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 = 100000000000;