feat(config): add flag to hide the participant display name (#10650)

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',
 

react/features/base/config/configWhitelist.js

@@ -162,6 +162,7 @@ export default [
     'googleApiApplicationClientID',
     'hiddenPremeetingButtons',
     'hideConferenceSubject',
+    'hideDisplayName',
     'hideRecordingLabel',
     'hideParticipantsStats',
     'hideConferenceTimer',

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'
             }
         },

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