From f8340bfd417e71713f9d88e9ef77e8c2af693fa7 Mon Sep 17 00:00:00 2001
From: Gabriel Borlea <gabi.borlea.1@gmail.com>
Date: Mon, 20 Dec 2021 10:45:54 +0200
Subject: [PATCH] fix(speaker-stats): responsiveness of facial expressions
 (#10664)

---
 .../speaker-stats/components/AbstractSpeakerStatsList.js     | 3 +++
 react/features/speaker-stats/constants.js                    | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/react/features/speaker-stats/components/AbstractSpeakerStatsList.js b/react/features/speaker-stats/components/AbstractSpeakerStatsList.js
index d33756496..6a5b8006a 100644
--- a/react/features/speaker-stats/components/AbstractSpeakerStatsList.js
+++ b/react/features/speaker-stats/components/AbstractSpeakerStatsList.js
@@ -7,6 +7,7 @@ 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';
 
@@ -22,6 +23,7 @@ const abstractSpeakerStatsList = (speakerStatsItem: Function): Function[] => {
     const conference = useSelector(state => state['features/base/conference'].conference);
     const speakerStats = useSelector(state => state['features/speaker-stats'].stats);
     const localParticipant = useSelector(getLocalParticipant);
+    const { clientWidth } = useSelector(state => state['features/base/responsive-ui']);
     const { defaultRemoteDisplayName, enableFacialRecognition } = useSelector(
         state => state['features/base/config']) || {};
     const { facialExpressions: localFacialExpressions } = useSelector(
@@ -93,6 +95,7 @@ const abstractSpeakerStatsList = (speakerStatsItem: Function): Function[] => {
             props.facialExpressions = statsModel.getFacialExpressions();
         }
         props.showFacialExpressions = enableFacialRecognition;
+        props.reduceExpressions = clientWidth < REDUCE_EXPRESSIONS_THRESHOLD;
         props.displayName = statsModel.getDisplayName() || defaultRemoteDisplayName;
         props.t = t;
 
diff --git a/react/features/speaker-stats/constants.js b/react/features/speaker-stats/constants.js
index 94a9143cb..229d80b91 100644
--- a/react/features/speaker-stats/constants.js
+++ b/react/features/speaker-stats/constants.js
@@ -1 +1,6 @@
+/**
+ * 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;