ref(video-layout): updates connection status when redux updates

conference.js

 
         room.on(
             JitsiConferenceEvents.PARTICIPANT_CONN_STATUS_CHANGED,
-            (id, connectionStatus) => {
-                APP.store.dispatch(participantConnectionStatusChanged(
-                    id, connectionStatus));
+            (id, connectionStatus) => APP.store.dispatch(
+                participantConnectionStatusChanged(id, connectionStatus)));
 
-                APP.UI.participantConnectionStatusChanged(id);
-            });
         room.on(
             JitsiConferenceEvents.DOMINANT_SPEAKER_CHANGED,
             id => APP.store.dispatch(dominantSpeakerChanged(id, room)));

modules/UI/UI.js

     VideoLayout.onLastNEndpointsChanged(leavingIds, enteringIds);
 };
 
-/**
- * Will handle notification about participant's connectivity status change.
- *
- * @param {string} id the id of remote participant(MUC jid)
- */
-UI.participantConnectionStatusChanged = function(id) {
-    VideoLayout.onParticipantConnectionStatusChanged(id);
-};
-
 /**
  * Prompt user for nickname.
  */

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

 
 import {
     DOMINANT_SPEAKER_CHANGED,
+    PARTICIPANT_UPDATED,
     PIN_PARTICIPANT
 } from '../base/participants';
 import { MiddlewareRegistry } from '../base/redux';
     const result = next(action);
 
     switch (action.type) {
+
+    case PARTICIPANT_UPDATED: {
+        // Look for actions that triggered a change to connectionStatus. This is
+        // done instead of changing the connection status change action to be
+        // explicit in order to minimize changes to other code.
+        if (typeof action.participant.connectionStatus !== 'undefined') {
+            VideoLayout.onParticipantConnectionStatusChanged(
+                action.participant.id);
+        }
+        break;
+    }
+
     case DOMINANT_SPEAKER_CHANGED:
         VideoLayout.onDominantSpeakerChanged(action.participant.id);
         break;