ref(api): move participant join and left to middleware (#4365)

conference.js

                 return;
             }
 
-            const displayName = user.getDisplayName();
-
             logger.log(`USER ${id} connnected:`, user);
-            APP.API.notifyUserJoined(id, {
-                displayName,
-                formattedDisplayName: appendSuffix(
-                    displayName || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME)
-            });
             APP.UI.addUser(user);
 
             // check the roles for the new user and reflect them
             }
 
             logger.log(`USER ${id} LEFT:`, user);
-            APP.API.notifyUserLeft(id);
+
             APP.UI.onSharedVideoStop(id);
         });
 

react/features/display-name/functions.js

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

react/features/external-api/middleware.js

 import { JitsiConferenceErrors } from '../base/lib-jitsi-meet';
 import {
     PARTICIPANT_KICKED,
+    PARTICIPANT_LEFT,
+    PARTICIPANT_JOINED,
     SET_LOADABLE_AVATAR_URL,
     getLocalParticipant,
     getParticipantById
             { id: action.kicker });
         break;
 
+    case PARTICIPANT_LEFT:
+        APP.API.notifyUserLeft(action.participant.id);
+        break;
+
+    case PARTICIPANT_JOINED: {
+        const { participant } = action;
+        const { id, local, name } = participant;
+
+        // The version of external api outside of middleware did not emit
+        // the local participant being created.
+        if (!local) {
+            APP.API.notifyUserJoined(id, {
+                displayName: name,
+                formattedDisplayName: appendSuffix(
+                    name || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME)
+            });
+        }
+
+        break;
+    }
+
     case SET_FILMSTRIP_VISIBLE:
         APP.API.notifyFilmstripDisplayChanged(action.visible);
         break;