ref(video-layout): video layout controls own updating after user leave

conference.js

             APP.store.dispatch(participantLeft(id, room));
             logger.log('USER %s LEFT', id, user);
             APP.API.notifyUserLeft(id);
-            APP.UI.removeUser(id, user.getDisplayName());
+            APP.UI.messageHandler.participantNotification(
+                user.getDisplayName(),
+                'notify.somebody',
+                'disconnected',
+                'notify.disconnected');
             APP.UI.onSharedVideoStop(id);
         });
 

modules/UI/UI.js

     }
 };
 
-/**
- * Remove user from UI.
- * @param {string} id   user id
- * @param {string} displayName user nickname
- */
-UI.removeUser = function(id, displayName) {
-    messageHandler.participantNotification(
-        displayName, 'notify.somebody', 'disconnected', 'notify.disconnected');
-
-    VideoLayout.removeParticipantContainer(id);
-};
-
 /**
  * Update videotype for specified user.
  * @param {string} id user id

modules/UI/shared_video/SharedVideo.js

             this.localAudioMutedListener);
         this.localAudioMutedListener = null;
 
-        VideoLayout.removeParticipantContainer(this.url);
+        APP.store.dispatch(participantLeft(this.url, APP.conference._room));
 
         VideoLayout.showLargeVideoContainer(SHARED_VIDEO_CONTAINER_TYPE, false)
             .then(() => {
                     UIEvents.UPDATE_SHARED_VIDEO, null, 'removed');
             });
 
-        APP.store.dispatch(participantLeft(this.url, APP.conference._room));
-
         this.url = null;
         this.isSharedVideoShown = false;
         this.initialAttributes = null;

modules/UI/shared_video/SharedVideoThumb.js

 SharedVideoThumb.prototype.remove = function() {
     logger.log('Remove shared video thumb', this.id);
 
-    // Make sure that the large video is updated if are removing its
-    // corresponding small video.
-    this.VideoLayout.updateAfterThumbRemoved(this.id);
-
     // Remove whole container
     if (this.container.parentNode) {
         this.container.parentNode.removeChild(this.container);

modules/UI/videolayout/RemoteVideo.js

 
     this.removeRemoteVideoMenu();
 
-    // Make sure that the large video is updated if are removing its
-    // corresponding small video.
-    this.VideoLayout.updateAfterThumbRemoved(this.id);
-
     // Remove whole container
     if (this.container.parentNode) {
         this.container.parentNode.removeChild(this.container);

modules/UI/videolayout/VideoLayout.js

      * Uses focusedID if any or dominantSpeakerID if any,
      * otherwise elects new video, in this order.
      */
-    updateAfterThumbRemoved(id) {
+    _updateAfterThumbRemoved(id) {
         // Always trigger an update if large video is empty.
         if (!largeVideo
             || (this.getLargeVideoID() && !this.isCurrentlyOnLarge(id))) {
         }
 
         VideoLayout.resizeThumbnails();
+        VideoLayout._updateAfterThumbRemoved(id);
     },
 
     onVideoTypeChanged(id, newVideoType) {

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

 
 import {
     DOMINANT_SPEAKER_CHANGED,
+    PARTICIPANT_LEFT,
     PARTICIPANT_UPDATED,
     PIN_PARTICIPANT
 } from '../base/participants';
     const result = next(action);
 
     switch (action.type) {
+    case PARTICIPANT_LEFT:
+        VideoLayout.removeParticipantContainer(action.participant.id);
+        break;
 
     case PARTICIPANT_UPDATED: {
         // Look for actions that triggered a change to connectionStatus. This is