ref(api): move local participant name change

conference.js

@@ -2753,14 +2753,6 @@ export default {
             displayName: formattedNickname
         }));
 
-        APP.API.notifyDisplayNameChanged(id, {
-            displayName: formattedNickname,
-            formattedDisplayName:
-                appendSuffix(
-                    formattedNickname,
-                    interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME)
-        });
-
         if (room) {
             APP.UI.changeDisplayName(id, formattedNickname);
         }

react/features/display-name/functions.js

@@ -1,3 +1,5 @@
+// @flow
+
 /**
  * Appends a suffix to the display name.
  *
@@ -5,7 +7,7 @@
  * @param {string} suffix - Suffix that will be appended.
  * @returns {string} The formatted display name.
  */
-export function appendSuffix(displayName, suffix) {
+export function appendSuffix(displayName: string, suffix: string) {
     return `${displayName || suffix || ''}${
         displayName && suffix && displayName !== suffix ? ` (${suffix})` : ''}`;
 }

react/features/external-api/subscriber.js

@@ -1,9 +1,12 @@
 // @flow
 
+import { getLocalParticipant } from '../base/participants';
 import { StateListenerRegistry } from '../base/redux';
+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
@@ -14,3 +17,23 @@ StateListenerRegistry.register(
     /* listener */ displayTileView => {
         APP.API.notifyTileViewChanged(displayTileView);
     });
+
+StateListenerRegistry.register(
+    /* selector */ state => state['features/base/settings'].displayName,
+    /* listener */ (displayName, store) => {
+        const localParticipant = getLocalParticipant(store.getState());
+
+        // Initial setting of the display name occurs happens on app
+        // initialization, before the local participant is ready. The initial
+        // settings is not desired to be fired anyways, only changes.
+        if (localParticipant) {
+            const { id } = localParticipant;
+
+            APP.API.notifyDisplayNameChanged(id, {
+                displayName,
+                formattedDisplayName: appendSuffix(
+                    displayName,
+                    interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME)
+            });
+        }
+    });