feat(config) defaultLocalDisplayName and defaultRemoteDisplayName

conference.js

@@ -86,7 +86,6 @@ import {
     dominantSpeakerChanged,
     getLocalParticipant,
     getNormalizedDisplayName,
-    getParticipantById,
     localParticipantConnectionStatusChanged,
     localParticipantRoleChanged,
     participantConnectionStatusChanged,
@@ -235,17 +234,6 @@ function sendData(command, value) {
     room.sendCommand(command, { value });
 }
 
-/**
- * Get user nickname by user id.
- * @param {string} id user id
- * @returns {string?} user nickname or undefined if user is unknown.
- */
-function getDisplayName(id) {
-    const participant = getParticipantById(APP.store.getState(), id);
-
-    return participant && participant.name;
-}
-
 /**
  * Mute or unmute local audio stream if it exists.
  * @param {boolean} muted - if audio stream should be muted or unmuted.
@@ -1218,14 +1206,6 @@ export default {
         return room.isConnectionInterrupted();
     },
 
-    /**
-     * Obtains the local display name.
-     * @returns {string|undefined}
-     */
-    getLocalDisplayName() {
-        return getDisplayName(this.getMyUserId());
-    },
-
     /**
      * Finds JitsiParticipant for given id.
      *
@@ -1238,29 +1218,6 @@ export default {
         return room ? room.getParticipantById(id) : null;
     },
 
-    /**
-     * Gets the display name foe the <tt>JitsiParticipant</tt> identified by
-     * the given <tt>id</tt>.
-     *
-     * @param id {string} the participant's id(MUC nickname/JVB endpoint id)
-     *
-     * @return {string} the participant's display name or the default string if
-     * absent.
-     */
-    getParticipantDisplayName(id) {
-        const displayName = getDisplayName(id);
-
-        if (displayName) {
-            return displayName;
-        }
-        if (APP.conference.isLocalId(id)) {
-            return APP.translation.generateTranslationHTML(
-                    interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
-        }
-
-        return interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME;
-    },
-
     getMyUserId() {
         return room && room.myUserId();
     },
@@ -2222,6 +2179,10 @@ export default {
             (id, displayName) => {
                 const formattedDisplayName
                     = getNormalizedDisplayName(displayName);
+                const state = APP.store.getState();
+                const {
+                    defaultRemoteDisplayName
+                } = state['features/base/config'];
 
                 APP.store.dispatch(participantUpdated({
                     conference: room,
@@ -2233,7 +2194,7 @@ export default {
                     formattedDisplayName:
                         appendSuffix(
                             formattedDisplayName
-                                || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME)
+                                || defaultRemoteDisplayName)
                 });
             }
         );

config.js

@@ -466,6 +466,12 @@ var config = {
     // when the toolbar is shown on mouse movements
     // disable1On1Mode: null | false | true,
 
+    // Default local name to be displayed
+    // defaultLocalDisplayName: 'me',
+
+    // Default remote name to be displayed
+    // defaultRemoteDisplayName: 'Fellow Jitster',
+
     // Default language for the user interface.
     // defaultLanguage: 'en',
 

interface_config.js

@@ -27,9 +27,7 @@ var interfaceConfig = {
     CLOSE_PAGE_GUEST_HINT: false, // A html text to be shown to guests on the close page, false disables it
 
     DEFAULT_BACKGROUND: '#474747',
-    DEFAULT_LOCAL_DISPLAY_NAME: 'me',
     DEFAULT_LOGO_URL: 'images/watermark.svg',
-    DEFAULT_REMOTE_DISPLAY_NAME: 'Fellow Jitster',
     DEFAULT_WELCOME_PAGE_LOGO_URL: 'images/watermark.svg',
 
     DISABLE_DOMINANT_SPEAKER_INDICATOR: false,
@@ -241,6 +239,12 @@ var interfaceConfig = {
     // Please use disableModeratorIndicator from config.js
     // DISABLE_FOCUS_INDICATOR: false,
 
+    // Please use defaultLocalDisplayName from config.js
+    // DEFAULT_LOCAL_DISPLAY_NAME: 'me',
+
+    // Please use defaultRemoteDisplayName from config.js
+    // DEFAULT_REMOTE_DISPLAY_NAME: 'Fellow Jitster',
+
     // Moved to config.js as `toolbarConfig.initialTimeout`.
     // INITIAL_TOOLBAR_TIMEOUT: 20000,
 

modules/UI/videolayout/LargeVideoManager.js

@@ -14,7 +14,10 @@ import {
     JitsiParticipantConnectionStatus
 } from '../../../react/features/base/lib-jitsi-meet';
 import { MEDIA_TYPE, VIDEO_TYPE } from '../../../react/features/base/media';
-import { getParticipantById } from '../../../react/features/base/participants';
+import {
+    getParticipantById,
+    getParticipantDisplayName
+} from '../../../react/features/base/participants';
 import { getTrackByMediaTypeAndParticipant } from '../../../react/features/base/tracks';
 import { CHAT_SIZE } from '../../../react/features/chat';
 import {
@@ -314,10 +317,12 @@ export default class LargeVideoManager {
      * @private
      */
     updateParticipantConnStatusIndication(id, messageKey) {
+        const state = APP.store.getState();
+
         if (messageKey) {
             // Get user's display name
             const displayName
-                = APP.conference.getParticipantDisplayName(id);
+                = getParticipantDisplayName(state, id);
 
             this._setRemoteConnectionMessage(
                 messageKey,

react/features/base/config/configWhitelist.js

@@ -81,6 +81,8 @@ export default [
     'debug',
     'debugAudioLevels',
     'defaultLanguage',
+    'defaultLocalDisplayName',
+    'defaultRemoteDisplayName',
     'desktopSharingFrameRate',
     'desktopSharingSources',
     'disable1On1Mode',

react/features/base/config/reducer.js

@@ -320,6 +320,24 @@ function _translateLegacyConfig(oldValue: Object) {
         newValue.e2ee.e2eeLabels = oldValue.e2eeLabels;
     }
 
+    if (oldValue.defaultLocalDisplayName === undefined
+        && typeof interfaceConfig === 'object'
+        && interfaceConfig.hasOwnProperty('DEFAULT_LOCAL_DISPLAY_NAME')) {
+        newValue.defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
+    }
+
+    newValue.defaultLocalDisplayName
+        = newValue.defaultLocalDisplayName || 'me';
+
+    if (oldValue.defaultRemoteDisplayName === undefined
+        && typeof interfaceConfig === 'object'
+        && interfaceConfig.hasOwnProperty('DEFAULT_REMOTE_DISPLAY_NAME')) {
+        newValue.defaultRemoteDisplayName = interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME;
+    }
+
+    newValue.defaultRemoteDisplayName
+        = newValue.defaultRemoteDisplayName || 'Fellow Jitster';
+
     return newValue;
 }
 

react/features/base/participants/functions.js

@@ -16,7 +16,6 @@ import {
 } from './constants';
 import { preloadImage } from './preloadImage';
 
-declare var interfaceConfig: Object;
 
 /**
  * Temp structures for avatar urls to be checked/preloaded.
@@ -198,9 +197,6 @@ export function getParticipantCountWithFake(stateful: Object | Function) {
 /**
  * Returns participant's display name.
  *
- * FIXME: Remove the hardcoded strings once interfaceConfig is stored in redux
- * and merge with a similarly named method in {@code conference.js}.
- *
  * @param {(Function|Object)} stateful - The (whole) redux state, or redux's
  * {@code getState} function to be used to retrieve the state.
  * @param {string} id - The ID of the participant's display name to retrieve.
@@ -210,6 +206,10 @@ export function getParticipantDisplayName(
         stateful: Object | Function,
         id: string) {
     const participant = getParticipantById(stateful, id);
+    const {
+        defaultLocalDisplayName,
+        defaultRemoteDisplayName
+    } = toState(stateful)['features/base/config'];
 
     if (participant) {
         if (participant.name) {
@@ -217,15 +217,11 @@ export function getParticipantDisplayName(
         }
 
         if (participant.local) {
-            return typeof interfaceConfig === 'object'
+            return defaultLocalDisplayName;
-                ? interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME
-                : 'me';
         }
     }
 
-    return typeof interfaceConfig === 'object'
+    return defaultRemoteDisplayName;
-        ? interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME
-        : 'Fellow Jitster';
 }
 
 /**

react/features/base/participants/reducer.js

@@ -16,8 +16,6 @@ import {
 import { LOCAL_PARTICIPANT_DEFAULT_ID, PARTICIPANT_ROLE } from './constants';
 import { isParticipantModerator } from './functions';
 
-declare var interfaceConfig: Object;
-
 /**
  * Participant object.
  *
@@ -109,7 +107,10 @@ ReducerRegistry.register('features/base/participants', (state = DEFAULT_STATE, a
             if (speaker !== local?.id) {
                 const remoteParticipant = state.remote.get(speaker);
 
-                remoteParticipant && sortedSpeakersList.push([ speaker, _getDisplayName(remoteParticipant.name) ]);
+                remoteParticipant
+                && sortedSpeakersList.push(
+                    [ speaker, _getDisplayName(state, remoteParticipant.name) ]
+                );
             }
         }
 
@@ -240,7 +241,7 @@ ReducerRegistry.register('features/base/participants', (state = DEFAULT_STATE, a
         state.remote.set(id, participant);
 
         // Insert the new participant.
-        const displayName = _getDisplayName(name);
+        const displayName = _getDisplayName(state, name);
         const sortedRemoteParticipants = Array.from(state.sortedRemoteParticipants);
 
         sortedRemoteParticipants.push([ id, displayName ]);
@@ -336,7 +337,8 @@ ReducerRegistry.register('features/base/participants', (state = DEFAULT_STATE, a
             const remoteParticipant = state.remote.get(participant);
 
             if (remoteParticipant) {
-                const displayName = _getDisplayName(remoteParticipant.name);
+                const displayName
+                    = _getDisplayName(state, remoteParticipant.name);
 
                 sortedSharesList.push([ participant, displayName ]);
             }
@@ -356,12 +358,14 @@ ReducerRegistry.register('features/base/participants', (state = DEFAULT_STATE, a
 /**
  * Returns the participant's display name, default string if display name is not set on the participant.
  *
+ * @param {Object} state - The local participant redux state.
  * @param {string} name - The display name of the participant.
  * @returns {string}
  */
-function _getDisplayName(name) {
+function _getDisplayName(state: Object, name: string): string {
-    return name
+    const config = state['features/base/config'];
-        ?? (typeof interfaceConfig === 'object' ? interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME : 'Fellow Jitser');
+
+    return name ?? (config?.defaultRemoteDisplayName || 'Fellow Jitster');
 }
 
 /**

react/features/external-api/middleware.js

@@ -27,7 +27,6 @@ import { SET_FILMSTRIP_VISIBLE } from '../filmstrip';
 import './subscriber';
 
 declare var APP: Object;
-declare var interfaceConfig: Object;
 
 /**
  * The middleware of the feature {@code external-api}.
@@ -86,6 +85,7 @@ MiddlewareRegistry.register(store => next => action => {
 
     case CONFERENCE_JOINED: {
         const state = store.getState();
+        const { defaultLocalDisplayName } = state['features/base/config'];
         const { room } = state['features/base/conference'];
         const { loadableAvatarUrl, name, id } = getLocalParticipant(state);
 
@@ -96,7 +96,7 @@ MiddlewareRegistry.register(store => next => action => {
                 displayName: name,
                 formattedDisplayName: appendSuffix(
                     name,
-                    interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME
+                    defaultLocalDisplayName
                 ),
                 avatarURL: loadableAvatarUrl
             }
@@ -149,6 +149,8 @@ MiddlewareRegistry.register(store => next => action => {
         break;
 
     case PARTICIPANT_JOINED: {
+        const state = store.getState();
+        const { defaultRemoteDisplayName } = state['features/base/config'];
         const { participant } = action;
         const { id, local, name } = participant;
 
@@ -158,7 +160,7 @@ MiddlewareRegistry.register(store => next => action => {
             APP.API.notifyUserJoined(id, {
                 displayName: name,
                 formattedDisplayName: appendSuffix(
-                    name || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME)
+                    name || defaultRemoteDisplayName)
             });
         }
 

react/features/external-api/subscriber.js

@@ -6,7 +6,6 @@ import { appendSuffix } from '../display-name';
 import { shouldDisplayTileView } from '../video-layout';
 
 declare var APP: Object;
-declare var interfaceConfig: Object;
 
 /**
  * StateListenerRegistry provides a reliable way of detecting changes to
@@ -22,6 +21,7 @@ StateListenerRegistry.register(
     /* selector */ state => state['features/base/settings'].displayName,
     /* listener */ (displayName, store) => {
         const localParticipant = getLocalParticipant(store.getState());
+        const { defaultLocalDisplayName } = store.getState()['features/base/config'];
 
         // Initial setting of the display name occurs happens on app
         // initialization, before the local participant is ready. The initial
@@ -33,7 +33,8 @@ StateListenerRegistry.register(
                 displayName,
                 formattedDisplayName: appendSuffix(
                     displayName,
-                    interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME)
+                    defaultLocalDisplayName
+                )
             });
         }
     });

react/features/filmstrip/components/web/Thumbnail.js

@@ -1122,6 +1122,7 @@ function _mapStateToProps(state, ownProps): Object {
     let _isMobilePortrait = false;
     const {
         startSilent,
+        defaultLocalDisplayName,
         disableLocalVideoFlip,
         iAmRecorder,
         iAmSipGateway
@@ -1178,7 +1179,7 @@ function _mapStateToProps(state, ownProps): Object {
         _connectionIndicatorDisabled: _isMobile
             || Boolean(state['features/base/config'].connectionIndicators?.disabled),
         _currentLayout,
-        _defaultLocalDisplayName: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
+        _defaultLocalDisplayName: defaultLocalDisplayName,
         _disableLocalVideoFlip: Boolean(disableLocalVideoFlip),
         _isHidden: isLocal && iAmRecorder && !iAmSipGateway,
         _isAudioOnly: Boolean(state['features/base/audio-only'].enabled),

react/features/toolbox/components/web/ProfileButton.js

@@ -14,6 +14,11 @@ import ProfileButtonAvatar from './ProfileButtonAvatar';
  */
 type Props = AbstractButtonProps & {
 
+    /**
+     * Default displayed name for local participant.
+     */
+    _defaultLocalDisplayName: string,
+
     /**
      * The redux representation of the local participant.
      */
@@ -43,13 +48,16 @@ class ProfileButton extends AbstractButton<Props, *> {
      * Retrieves the label.
      */
     get label() {
-        const { _localParticipant } = this.props;
+        const {
+            _defaultLocalDisplayName,
+            _localParticipant
+        } = this.props;
         let displayName;
 
-        if (_localParticipant && _localParticipant.name) {
+        if (_localParticipant?.name) {
             displayName = _localParticipant.name;
         } else {
-            displayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
+            displayName = _defaultLocalDisplayName;
         }
 
         return displayName;
@@ -119,7 +127,10 @@ class ProfileButton extends AbstractButton<Props, *> {
  * @returns {Object}
  */
 const mapStateToProps = state => {
+    const { defaultLocalDisplayName } = state['features/base/config'];
+
     return {
+        _defaultLocalDisplayName: defaultLocalDisplayName,
         _localParticipant: getLocalParticipant(state),
         _unclickable: !interfaceConfig.SETTINGS_SECTIONS.includes('profile'),
         customClass: 'profile-button-avatar'