From ec0439cbb183f9676ec4886bfdf354e5da0f4738 Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Mon, 21 May 2018 14:06:02 -0700
Subject: [PATCH] ref(video-layout): updates connection status when redux
 updates

---
 conference.js                                 |  7 ++-----
 modules/UI/UI.js                              |  9 ---------
 react/features/video-layout/middleware.web.js | 13 +++++++++++++
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/conference.js b/conference.js
index 7b7f308ce..25620a1b0 100644
--- a/conference.js
+++ b/conference.js
@@ -1798,12 +1798,9 @@ export default {
 
         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)));
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index dcb4afdb4..401b4c0be 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -826,15 +826,6 @@ UI.handleLastNEndpoints = function(leavingIds, enteringIds) {
     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.
  */
diff --git a/react/features/video-layout/middleware.web.js b/react/features/video-layout/middleware.web.js
index 758009e3d..00ec129fc 100644
--- a/react/features/video-layout/middleware.web.js
+++ b/react/features/video-layout/middleware.web.js
@@ -5,6 +5,7 @@ import UIEvents from '../../../service/UI/UIEvents';
 
 import {
     DOMINANT_SPEAKER_CHANGED,
+    PARTICIPANT_UPDATED,
     PIN_PARTICIPANT
 } from '../base/participants';
 import { MiddlewareRegistry } from '../base/redux';
@@ -26,6 +27,18 @@ MiddlewareRegistry.register(store => next => action => {
     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;