haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This reverts commit 2b0f58c4eb.
This commit is contained in:
Calinteodor 2022-02-01 16:52:42 +02:00 committed by GitHub
parent 7d228d6366
commit d057e921fd
7 changed files with 13 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/modals/speaker_stats/_speaker_stats.scss
View File

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

8
react/features/speaker-stats/actionTypes.js
View File

@ -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';

14
react/features/speaker-stats/actions.any.js
View File

@ -5,8 +5,7 @@ import {
INIT_UPDATE_STATS,
UPDATE_STATS,
INIT_REORDER_STATS,
RESET_SEARCH_CRITERIA,
TOGGLE_FACIAL_EXPRESSIONS
RESET_SEARCH_CRITERIA
} 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
};
}

10
react/features/speaker-stats/components/AbstractSpeakerStatsList.js
View File

@ -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;

30
react/features/speaker-stats/components/web/SpeakerStats.js
View File

@ -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.
*/
_enableFacialRecognition: boolean,
/**
* The flag which shows if the facial expressions are displayed or not.
* If enabled facial expressions are shown.
*/
_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: showFacialExpressions,
_showFacialExpressions: enableFacialRecognition,
_reduceExpressions: clientWidth < 750
};
}

76
react/features/speaker-stats/components/web/ToggleFacialExpressionsButton.js
View File

@ -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>
);
}

12
react/features/speaker-stats/reducer.js
View File

@ -8,8 +8,7 @@ import {
INIT_SEARCH,
UPDATE_STATS,
INIT_REORDER_STATS,
RESET_SEARCH_CRITERIA,
TOGGLE_FACIAL_EXPRESSIONS
RESET_SEARCH_CRITERIA
} from './actionTypes';
/**
@ -21,8 +20,7 @@ const INITIAL_STATE = {
stats: {},
isOpen: false,
pendingReorder: true,
criteria: null,
showFacialExpressions: false
criteria: null
};
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;