From 5cc3fade8ffee4585cc8f5b16f19b62b26047f1f Mon Sep 17 00:00:00 2001
From: Mihaela Dumitru <mihdmt@gmail.com>
Date: Mon, 20 Dec 2021 10:46:47 +0200
Subject: [PATCH] feat(config): add flag to hide the participant display name
 (#10650)

---
 config.js                                     |  3 +++
 react/features/base/config/configWhitelist.js |  1 +
 .../filmstrip/components/web/Thumbnail.js     |  2 +-
 .../web/ThumbnailBottomIndicators.js          | 21 ++++++++++++-------
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/config.js b/config.js
index 506840161..15a727ec9 100644
--- a/config.js
+++ b/config.js
@@ -490,6 +490,9 @@ var config = {
     // Default remote name to be displayed
     // defaultRemoteDisplayName: 'Fellow Jitster',
 
+    // Hides the display name from the participant thumbnail
+    // hideDisplayName: false
+
     // Default language for the user interface.
     // defaultLanguage: 'en',
 
diff --git a/react/features/base/config/configWhitelist.js b/react/features/base/config/configWhitelist.js
index 05219f68c..f90f79bfa 100644
--- a/react/features/base/config/configWhitelist.js
+++ b/react/features/base/config/configWhitelist.js
@@ -162,6 +162,7 @@ export default [
     'googleApiApplicationClientID',
     'hiddenPremeetingButtons',
     'hideConferenceSubject',
+    'hideDisplayName',
     'hideRecordingLabel',
     'hideParticipantsStats',
     'hideConferenceTimer',
diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js
index 742413294..241db06df 100644
--- a/react/features/filmstrip/components/web/Thumbnail.js
+++ b/react/features/filmstrip/components/web/Thumbnail.js
@@ -236,7 +236,7 @@ const defaultStyles = theme => {
                 marginRight: '4px'
             },
 
-            '&:not(.top-indicators) > *:last-child': {
+            '&:not(.top-indicators) > span:last-child': {
                 marginRight: '6px'
             }
         },
diff --git a/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js b/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js
index 4b4c97f14..ff9a82237 100644
--- a/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js
+++ b/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js
@@ -63,6 +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);
 
     return (<div className = { className }>
         <StatusIndicators
@@ -70,14 +71,18 @@ const ThumbnailBottomIndicators = ({
             moderator = { true }
             participantID = { participantId }
             screenshare = { currentLayout === LAYOUTS.TILE_VIEW } />
-        <span className = { styles.nameContainer }>
-            <DisplayName
-                allowEditing = { local ? _allowEditing : false }
-                currentLayout = { currentLayout }
-                displayNameSuffix = { local ? _defaultLocalDisplayName : '' }
-                elementID = { local ? 'localDisplayName' : `participant_${participantId}_name` }
-                participantID = { participantId } />
-        </span>
+        {
+            _showDisplayName && (
+                <span className = { styles.nameContainer }>
+                    <DisplayName
+                        allowEditing = { local ? _allowEditing : false }
+                        currentLayout = { currentLayout }
+                        displayNameSuffix = { local ? _defaultLocalDisplayName : '' }
+                        elementID = { local ? 'localDisplayName' : `participant_${participantId}_name` }
+                        participantID = { participantId } />
+                </span>
+            )
+        }
     </div>);
 };