Revert "feat(speaker-stats): make facial expressions expandable"

This reverts commit 2b0f58c4eb.

css/modals/speaker_stats/_speaker_stats.scss

@@ -48,7 +48,7 @@
         width: 20%;
     }
     .speaker-stats-item__time_expressions_on {
-        width: 18%;
+        width: 25%;
     }
 
     .speaker-stats-item__expression {

react/features/speaker-stats/actionTypes.js

@@ -47,11 +47,3 @@ 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,8 +5,7 @@ import {
     INIT_UPDATE_STATS,
     UPDATE_STATS,
     INIT_REORDER_STATS,
-    RESET_SEARCH_CRITERIA,
+    RESET_SEARCH_CRITERIA
-    TOGGLE_FACIAL_EXPRESSIONS
 } from './actionTypes';
 
 /**
@@ -69,14 +68,3 @@ 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

@@ -21,10 +21,10 @@ const abstractSpeakerStatsList = (speakerStatsItem: Function): Function[] => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
     const conference = useSelector(state => state['features/base/conference'].conference);
-    const { stats: speakerStats, showFacialExpressions } = useSelector(state => state['features/speaker-stats']);
+    const speakerStats = useSelector(state => state['features/speaker-stats'].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 { facialExpressions: localFacialExpressions } = useSelector(
         state => state['features/facial-recognition']) || {};
@@ -48,7 +48,7 @@ const abstractSpeakerStatsList = (speakerStatsItem: Function): Function[] => {
                             ? `${localParticipant.name} (${meString})`
                             : meString
                     );
-                    if (showFacialExpressions) {
+                    if (enableFacialRecognition) {
                         stats[userId].setFacialExpressions(localFacialExpressions);
                     }
                 }
@@ -91,10 +91,10 @@ const abstractSpeakerStatsList = (speakerStatsItem: Function): Function[] => {
         props.dominantSpeakerTime = statsModel.getTotalDominantSpeakerTime();
         props.participantId = userId;
         props.hasLeft = statsModel.hasLeft();
-        if (showFacialExpressions) {
+        if (enableFacialRecognition) {
             props.facialExpressions = statsModel.getFacialExpressions();
         }
-        props.showFacialExpressions = showFacialExpressions;
+        props.showFacialExpressions = enableFacialRecognition;
         props.reduceExpressions = clientWidth < REDUCE_EXPRESSIONS_THRESHOLD;
         props.displayName = statsModel.getDisplayName() || defaultRemoteDisplayName;
         props.t = t;

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

@@ -7,12 +7,11 @@ import { Dialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux';
 import { escapeRegexp } from '../../../base/util';
-import { initSearch, resetSearchCriteria, toggleFacialExpressions } from '../../actions';
+import { initSearch, resetSearchCriteria } from '../../actions';
 
 import SpeakerStatsLabels from './SpeakerStatsLabels';
 import SpeakerStatsList from './SpeakerStatsList';
 import SpeakerStatsSearch from './SpeakerStatsSearch';
-import ToggleFacialExpressionsButton from './ToggleFacialExpressionsButton';
 
 /**
  * The type of the React {@code Component} props of {@link SpeakerStats}.
@@ -21,17 +20,12 @@ type Props = {
 
     /**
      * The flag which shows if the facial recognition is enabled, obtained from the redux store.
-     * If enabled facial expressions can be expanded.
+     * If enabled facial expressions are shown.
-     */
-    _enableFacialRecognition: boolean,
-
-    /**
-     * The flag which shows if the facial expressions are displayed or not.
      */
     _showFacialExpressions: boolean,
 
     /**
-     * True if the client width is less than 750.
+     * True if the client width is les than 750.
      */
     _reduceExpressions: boolean,
 
@@ -69,7 +63,6 @@ class SpeakerStats extends Component<Props> {
 
         // Bind event handlers so they are only bound once per instance.
         this._onSearch = this._onSearch.bind(this);
-        this._onToggleFacialExpressions = this._onToggleFacialExpressions.bind(this);
     }
 
     /**
@@ -97,11 +90,6 @@ class SpeakerStats extends Component<Props> {
                 width = { this.props._showFacialExpressions ? 'large' : 'medium' }>
                 <div className = 'speaker-stats'>
                     <SpeakerStatsSearch onSearch = { this._onSearch } />
-                    { this.props._enableFacialRecognition
-                    && <ToggleFacialExpressionsButton
-                        onClick = { this._onToggleFacialExpressions }
-                        showFacialExpressions = { this.props._showFacialExpressions } />
-                    }
                     <SpeakerStatsLabels
                         reduceExpressions = { this.props._reduceExpressions }
                         showFacialExpressions = { this.props._showFacialExpressions ?? false } />
@@ -123,14 +111,6 @@ class SpeakerStats extends Component<Props> {
     _onSearch(criteria = '') {
         this.props.dispatch(initSearch(escapeRegexp(criteria)));
     }
-
-    _onToggleFacialExpressions: () => void;
-
-    /**
-     */
-    _onToggleFacialExpressions() {
-        this.props.dispatch(toggleFacialExpressions());
-    }
 }
 
 /**
@@ -145,7 +125,6 @@ class SpeakerStats extends Component<Props> {
  */
 function _mapStateToProps(state) {
     const { enableFacialRecognition } = state['features/base/config'];
-    const { showFacialExpressions } = state['features/speaker-stats'];
     const { clientWidth } = state['features/base/responsive-ui'];
 
     return {
@@ -155,8 +134,7 @@ function _mapStateToProps(state) {
          * @private
          * @type {string|undefined}
          */
-        _enableFacialRecognition: enableFacialRecognition,
+        _showFacialExpressions: enableFacialRecognition,
-        _showFacialExpressions: showFacialExpressions,
         _reduceExpressions: clientWidth < 750
     };
 }

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

@@ -1,76 +0,0 @@
-// @flow
-import { makeStyles } from '@material-ui/core/styles';
-import React from 'react';
-
-import {
-    Icon,
-    IconArrowDownSmall
-} from '../../../base/icons';
-import { Tooltip } from '../../../base/tooltip';
-
-
-const useStyles = makeStyles(theme => {
-    return {
-        expandButton: {
-            position: 'absolute',
-            right: '24px',
-            top: '93px',
-            '&:hover': {
-                backgroundColor: theme.palette.ui03
-            },
-            padding: '12px',
-            borderRadius: '6px',
-            cursor: 'pointer'
-        },
-        arrowRight: {
-            transform: 'rotate(-90deg)'
-        },
-        arrowLeft: {
-            transform: 'rotate(90deg)'
-        }
-    };
-});
-
-/**
- * The type of the React {@code Component} props of {@link SpeakerStatsSearch}.
- */
-type Props = {
-
-    /**
-     * The function to initiate the change in the speaker stats table.
-     */
-    onClick: Function,
-
-    /**
-     * The state of the button.
-     */
-    showFacialExpressions: boolean,
-
-};
-
-/**
- */
-export default function ToggleFacialExpressionsButton({ onClick, showFacialExpressions }: Props) {
-    const classes = useStyles();
-
-    const onClickCallback = React.useCallback(() => {
-        onClick();
-    }, []);
-
-    return (
-        <Tooltip
-            content = { `${showFacialExpressions ? 'Hide' : 'Show'} facial expressions` }
-            position = { 'top' } >
-            <div
-                className = { classes.expandButton }
-                onClick = { onClickCallback }
-                role = 'button'
-                tabIndex = { 0 }>
-                <Icon
-                    className = { showFacialExpressions ? classes.arrowLeft : classes.arrowRight }
-                    size = { 24 }
-                    src = { IconArrowDownSmall } />
-            </div>
-        </Tooltip>
-    );
-}

react/features/speaker-stats/reducer.js

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