ref(api): move conference join notification to middleware

conference.js

 import { showNotification } from './react/features/notifications';
 import {
     dominantSpeakerChanged,
-    getAvatarURLByParticipantId,
     getLocalParticipant,
     getNormalizedDisplayName,
     getParticipantById,
             = APP.store.getState()['features/base/settings'].displayName;
 
         APP.UI.changeDisplayName('localVideoContainer', displayName);
-        APP.API.notifyConferenceJoined(
-            this.roomName,
-            this._room.myUserId(),
-            {
-                displayName,
-                formattedDisplayName: appendSuffix(
-                    displayName,
-                    interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME),
-                avatarURL: getAvatarURLByParticipantId(
-                    APP.store.getState(), this._room.myUserId())
-            }
-        );
     },
 
     /**

react/features/external-api/middleware.js

 // @flow
 
-import { CONFERENCE_FAILED } from '../base/conference';
+import { CONFERENCE_FAILED, CONFERENCE_JOINED } from '../base/conference';
 import { NOTIFY_CAMERA_ERROR, NOTIFY_MIC_ERROR } from '../base/devices';
 import { JitsiConferenceErrors } from '../base/lib-jitsi-meet';
+import {
+    getAvatarURLByParticipantId,
+    getLocalParticipant
+} from '../base/participants';
 import { MiddlewareRegistry } from '../base/redux';
+import { appendSuffix } from '../display-name';
 import { SUBMIT_FEEDBACK } from '../feedback';
 import { SET_FILMSTRIP_VISIBLE } from '../filmstrip';
 
 declare var APP: Object;
+declare var interfaceConfig: Object;
 
 /**
  * The middleware of the feature {@code external-api}.
  *
  * @returns {Function}
  */
-MiddlewareRegistry.register((/* store */) => next => action => {
+MiddlewareRegistry.register(store => next => action => {
+    const result = next(action);
+
     switch (action.type) {
     case CONFERENCE_FAILED: {
         if (action.conference
         break;
     }
 
+    case CONFERENCE_JOINED: {
+        const state = store.getState();
+        const { room } = state['features/base/conference'];
+        const { name, id } = getLocalParticipant(state);
+
+        APP.API.notifyConferenceJoined(
+            room,
+            id,
+            {
+                displayName: name,
+                formattedDisplayName: appendSuffix(
+                    name,
+                    interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME
+                ),
+                avatarURL: getAvatarURLByParticipantId(state, id)
+            }
+        );
+
+        break;
+    }
+
     case NOTIFY_CAMERA_ERROR:
         if (action.error) {
             APP.API.notifyOnCameraError(
         break;
     }
 
-    return next(action);
+    return result;
 });