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

react/features/base/tracks/middleware.js

@@ -15,7 +15,6 @@ import UIEvents from '../../../../service/UI/UIEvents';
 import { createLocalTracksA } from './actions';
 import {
     TOGGLE_SCREENSHARING,
-    TRACK_ADDED,
     TRACK_REMOVED,
     TRACK_UPDATED
 } from './actionTypes';
@@ -93,14 +92,6 @@ MiddlewareRegistry.register(store => next => action => {
         }
         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

@@ -3,6 +3,7 @@
 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,
@@ -12,6 +13,7 @@ import {
     getParticipantById
 } from '../base/participants';
 import { MiddlewareRegistry } from '../base/redux';
+import { TRACK_ADDED } from '../base/tracks';
 
 declare var APP: Object;
 
@@ -30,6 +32,10 @@ MiddlewareRegistry.register(store => next => action => {
     const result = next(action);
 
     switch (action.type) {
+    case CONFERENCE_JOINED:
+        VideoLayout.mucJoined();
+        break;
+
     case PARTICIPANT_JOINED:
         if (!action.participant.local) {
             VideoLayout.addRemoteParticipantContainer(
@@ -63,6 +69,13 @@ MiddlewareRegistry.register(store => next => action => {
             action.participant.id,
             Boolean(action.participant.id));
         break;
+
+    case TRACK_ADDED:
+        if (!action.track.local) {
+            VideoLayout.onRemoteStreamAdded(action.track.jitsiTrack);
+        }
+
+        break;
     }
 
     return result;