Move a couple calls to update VideoLayout into the redux update flow (#3173)

* ref(video-layout): move middleware for TRACK_ADDED

* ref(video-layout): call mucJoined when redux knowns of conference join

conference.js

 
         APP.store.dispatch(conferenceJoined(room));
 
-        APP.UI.mucJoined();
         const displayName
             = APP.store.getState()['features/base/settings'].displayName;
 
+        APP.UI.changeDisplayName('localVideoContainer', displayName);
         APP.API.notifyConferenceJoined(
             this.roomName,
             this._room.myUserId(),

modules/UI/UI.js

     followMeHandler = new FollowMe(APP.conference, UI);
 };
 
-UI.mucJoined = function() {
-    VideoLayout.mucJoined();
-
-    // Update local video now that a conference is joined a user ID should be
-    // set.
-    UI.changeDisplayName(
-        'localVideoContainer',
-        APP.conference.getLocalDisplayName());
-};
-
 /** *
  * Handler for toggling filmstrip
  */
     }
 };
 
-
-/**
- * Show remote stream on UI.
- * @param {JitsiTrack} track stream to show
- */
-UI.addRemoteStream = track => VideoLayout.onRemoteStreamAdded(track);
-
 /**
  * Removed remote stream from UI.
  * @param {JitsiTrack} track stream to remove

react/features/base/tracks/middleware.js

 import { createLocalTracksA } from './actions';
 import {
     TOGGLE_SCREENSHARING,
-    TRACK_ADDED,
     TRACK_REMOVED,
     TRACK_UPDATED
 } from './actionTypes';
         }
         break;
 
-    case TRACK_ADDED:
-        // TODO Remove this middleware case once all UI interested in new tracks
-        // being added are converted to react and listening for store changes.
-        if (typeof APP !== 'undefined' && !action.track.local) {
-            APP.UI.addRemoteStream(action.track.jitsiTrack);
-        }
-        break;
-
     case TRACK_REMOVED:
         // TODO Remove this middleware case once all UI interested in tracks
         // being removed are converted to react and listening for store changes.

react/features/video-layout/middleware.web.js

 import VideoLayout from '../../../modules/UI/videolayout/VideoLayout.js';
 import UIEvents from '../../../service/UI/UIEvents';
 
+import { CONFERENCE_JOINED } from '../base/conference';
 import {
     DOMINANT_SPEAKER_CHANGED,
     PARTICIPANT_JOINED,
     getParticipantById
 } from '../base/participants';
 import { MiddlewareRegistry } from '../base/redux';
+import { TRACK_ADDED } from '../base/tracks';
 
 declare var APP: Object;
 
     const result = next(action);
 
     switch (action.type) {
+    case CONFERENCE_JOINED:
+        VideoLayout.mucJoined();
+        break;
+
     case PARTICIPANT_JOINED:
         if (!action.participant.local) {
             VideoLayout.addRemoteParticipantContainer(
             action.participant.id,
             Boolean(action.participant.id));
         break;
+
+    case TRACK_ADDED:
+        if (!action.track.local) {
+            VideoLayout.onRemoteStreamAdded(action.track.jitsiTrack);
+        }
+
+        break;
     }
 
     return result;