ref(video-layout): consolidate connection status update handling (#3185)

- Instead of having 4 listeners for local connection status
  updates and 1 for remote, remove two of the redundant listeners.
- Instead of calling into 4 separate VideoLayout methods to update a
  participant's connection status, expose one handler.

conference.js

@@ -1785,13 +1785,6 @@ export default {
             id => APP.store.dispatch(dominantSpeakerChanged(id, room)));
 
         if (!interfaceConfig.filmStripOnly) {
-            room.on(JitsiConferenceEvents.CONNECTION_INTERRUPTED, () => {
-                APP.UI.markVideoInterrupted(true);
-            });
-            room.on(JitsiConferenceEvents.CONNECTION_RESTORED, () => {
-                APP.UI.markVideoInterrupted(false);
-            });
-
             if (isButtonEnabled('chat')) {
                 room.on(
                     JitsiConferenceEvents.MESSAGE_RECEIVED,
@@ -1841,15 +1834,11 @@ export default {
         room.on(JitsiConferenceEvents.CONNECTION_INTERRUPTED, () => {
             APP.store.dispatch(localParticipantConnectionStatusChanged(
                 JitsiParticipantConnectionStatus.INTERRUPTED));
-
-            APP.UI.showLocalConnectionInterrupted(true);
         });
 
         room.on(JitsiConferenceEvents.CONNECTION_RESTORED, () => {
             APP.store.dispatch(localParticipantConnectionStatusChanged(
                 JitsiParticipantConnectionStatus.ACTIVE));
-
-            APP.UI.showLocalConnectionInterrupted(false);
         });
 
         room.on(
@@ -2317,7 +2306,6 @@ export default {
                     APP.store.getState(), this._room.myUserId())
             }
         );
-        APP.UI.markVideoInterrupted(false);
     },
 
     /**

modules/UI/UI.js

@@ -199,17 +199,6 @@ UI.changeDisplayName = function(id, displayName) {
     }
 };
 
-/**
- * Shows/hides the indication about local connection being interrupted.
- *
- * @param {boolean} isInterrupted <tt>true</tt> if local connection is
- * currently in the interrupted state or <tt>false</tt> if the connection
- * is fine.
- */
-UI.showLocalConnectionInterrupted = function(isInterrupted) {
-    VideoLayout.showLocalConnectionInterrupted(isInterrupted);
-};
-
 /**
  * Sets the "raised hand" status for a participant.
  *
@@ -774,18 +763,6 @@ UI.hideStats = function() {
     VideoLayout.hideStats();
 };
 
-/**
- * Mark video as interrupted or not.
- * @param {boolean} interrupted if video is interrupted
- */
-UI.markVideoInterrupted = function(interrupted) {
-    if (interrupted) {
-        VideoLayout.onVideoInterrupted();
-    } else {
-        VideoLayout.onVideoRestored();
-    }
-};
-
 /**
  * Add chat message.
  * @param {string} from user id

modules/UI/videolayout/VideoLayout.js

@@ -583,25 +583,6 @@ const VideoLayout = {
         localVideoThumbnail.showAudioIndicator(isMuted);
     },
 
-    /**
-     * Shows/hides the indication about local connection being interrupted.
-     *
-     * @param {boolean} isInterrupted <tt>true</tt> if local connection is
-     * currently in the interrupted state or <tt>false</tt> if the connection
-     * is fine.
-     */
-    showLocalConnectionInterrupted(isInterrupted) {
-        // Currently local video thumbnail displays only "active" or
-        // "interrupted" despite the fact that ConnectionIndicator supports more
-        // states.
-        const status
-            = isInterrupted
-                ? JitsiParticipantConnectionStatus.INTERRUPTED
-                : JitsiParticipantConnectionStatus.ACTIVE;
-
-        localVideoThumbnail.updateConnectionStatus(status);
-    },
-
     /**
      * Resizes thumbnails.
      */
@@ -715,22 +696,31 @@ const VideoLayout = {
     },
 
     /**
-     * Shows/hides warning about remote user's connectivity issues.
+     * Shows/hides warning about a user's connectivity issues.
      *
-     * @param {string} id the ID of the remote participant(MUC nickname)
+     * @param {string} id - The ID of the remote participant(MUC nickname).
+     * @param {status} status - The new connection status.
+     * @returns {void}
      */
-    // eslint-disable-next-line no-unused-vars
+    onParticipantConnectionStatusChanged(id, status) {
-    onParticipantConnectionStatusChanged(id) {
+        if (APP.conference.isLocalId(id)) {
-        // Show/hide warning on the large video
+            // Maintain old logic of passing in either interrupted or active
-        if (this.isCurrentlyOnLarge(id)) {
+            // to updateConnectionStatus.
-            if (largeVideo) {
+            localVideoThumbnail.updateConnectionStatus(status);
-                // We have to trigger full large video update to transition from
+
-                // avatar to video on connectivity restored.
+            if (status === JitsiParticipantConnectionStatus.INTERRUPTED) {
-                this.updateLargeVideo(id, true /* force update */);
+                largeVideo && largeVideo.onVideoInterrupted();
+            } else {
+                largeVideo && largeVideo.onVideoRestored();
             }
+
+            return;
         }
 
-        // Show/hide warning on the thumbnail
+        // We have to trigger full large video update to transition from
+        // avatar to video on connectivity restored.
+        this._updateLargeVideoIfDisplayed(id, true);
+
         const remoteVideo = remoteVideos[id];
 
         if (remoteVideo) {
@@ -905,24 +895,6 @@ const VideoLayout = {
         }
     },
 
-    /**
-     * Indicates that the video has been interrupted.
-     */
-    onVideoInterrupted() {
-        if (largeVideo) {
-            largeVideo.onVideoInterrupted();
-        }
-    },
-
-    /**
-     * Indicates that the video has been restored.
-     */
-    onVideoRestored() {
-        if (largeVideo) {
-            largeVideo.onVideoRestored();
-        }
-    },
-
     isLargeVideoVisible() {
         return this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE);
     },
@@ -1176,11 +1148,13 @@ const VideoLayout = {
      *
      * @param {string} participantId - The participant ID that should trigger an
      * update of large video if displayed.
+     * @param {boolean} force - Whether or not the large video update should
+     * happen no matter what.
      * @returns {void}
      */
-    _updateLargeVideoIfDisplayed(participantId) {
+    _updateLargeVideoIfDisplayed(participantId, force = false) {
         if (this.isCurrentlyOnLarge(participantId)) {
-            this.updateLargeVideo(participantId);
+            this.updateLargeVideo(participantId, force);
         }
     }
 };

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

@@ -53,7 +53,8 @@ MiddlewareRegistry.register(store => next => action => {
         // explicit in order to minimize changes to other code.
         if (typeof action.participant.connectionStatus !== 'undefined') {
             VideoLayout.onParticipantConnectionStatusChanged(
-                action.participant.id);
+                action.participant.id,
+                action.participant.connectionStatus);
         }
         break;
     }