From 49dd007167f31a5e2070818dac4699abc5501eb7 Mon Sep 17 00:00:00 2001
From: Mihaela Dumitru <mihdmt@gmail.com>
Date: Tue, 25 Jan 2022 13:17:27 +0200
Subject: [PATCH] fix(config): use hide display name flag for dominant speaker
 (#10839)

---
 react/features/base/config/functions.any.js              | 9 +++++++++
 .../display-name/components/web/DominantSpeakerName.js   | 4 +++-
 .../components/web/ThumbnailBottomIndicators.js          | 4 ++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/react/features/base/config/functions.any.js b/react/features/base/config/functions.any.js
index 615926cfc..9dc32a03b 100644
--- a/react/features/base/config/functions.any.js
+++ b/react/features/base/config/functions.any.js
@@ -186,6 +186,15 @@ export function isNameReadOnly(state: Object): boolean {
         || state['features/base/config'].readOnlyName;
 }
 
+/**
+ * Selector for determining if the display name is visible.
+ *
+ * @param {Object} state - The state of the app.
+ * @returns {boolean}
+ */
+export function isDisplayNameVisible(state: Object): boolean {
+    return !state['features/base/config'].hideDisplayName;
+}
 
 /**
  * Restores a Jitsi Meet config.js from {@code localStorage} if it was
diff --git a/react/features/display-name/components/web/DominantSpeakerName.js b/react/features/display-name/components/web/DominantSpeakerName.js
index d3efbf377..fc82e59de 100644
--- a/react/features/display-name/components/web/DominantSpeakerName.js
+++ b/react/features/display-name/components/web/DominantSpeakerName.js
@@ -4,6 +4,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
+import { isDisplayNameVisible } from '../../../base/config/functions.any';
 import { getLocalParticipant } from '../../../base/participants';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { getLargeVideoParticipant } from '../../../large-video/functions';
@@ -44,8 +45,9 @@ const DominantSpeakerName = () => {
 
     const isTileView = useSelector(isLayoutTileView);
     const toolboxVisible = useSelector(isToolboxVisible);
+    const showDisplayName = useSelector(isDisplayNameVisible);
 
-    if (nameToDisplay && selectedId !== localId && !isTileView) {
+    if (showDisplayName && nameToDisplay && selectedId !== localId && !isTileView) {
         return (
             <div
                 className = { `${classes.badgeContainer}${toolboxVisible ? '' : ` ${classes.containerElevated}`}` }>
diff --git a/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js b/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js
index ff9a82237..8a97c07c3 100644
--- a/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js
+++ b/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js
@@ -4,7 +4,7 @@ import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { isNameReadOnly } from '../../../base/config/functions.any';
+import { isDisplayNameVisible, isNameReadOnly } from '../../../base/config/functions.any';
 import DisplayName from '../../../display-name/components/web/DisplayName';
 import { LAYOUTS } from '../../../video-layout';
 
@@ -63,7 +63,7 @@ const ThumbnailBottomIndicators = ({
     const styles = useStyles();
     const _allowEditing = !useSelector(isNameReadOnly);
     const _defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
-    const _showDisplayName = useSelector(state => !state['features/base/config'].hideDisplayName);
+    const _showDisplayName = useSelector(isDisplayNameVisible);
 
     return (<div className = { className }>
         <StatusIndicators