From 94b3f6410d807d298ff3855921272b24faac0852 Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.kim@8x8.com>
Date: Sun, 23 Jun 2019 08:44:13 -0700
Subject: [PATCH] ref(api): move local participant name change

---
 conference.js                             |  8 --------
 react/features/display-name/functions.js  |  4 +++-
 react/features/external-api/subscriber.js | 23 +++++++++++++++++++++++
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/conference.js b/conference.js
index b15e2242c..d0d31ca7a 100644
--- a/conference.js
+++ b/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);
         }
diff --git a/react/features/display-name/functions.js b/react/features/display-name/functions.js
index d3b661da2..7ffb2d775 100644
--- a/react/features/display-name/functions.js
+++ b/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})` : ''}`;
 }
diff --git a/react/features/external-api/subscriber.js b/react/features/external-api/subscriber.js
index c07ef888c..755d0d8b1 100644
--- a/react/features/external-api/subscriber.js
+++ b/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)
+            });
+        }
+    });