fix(config): use hide display name flag for dominant speaker (#10839)

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

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}`}` }>

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