feat(RemoteVideo): show disconnected GSM bars for remotes

conference.js

@@ -1197,6 +1197,10 @@ export default {
             ConferenceEvents.LAST_N_ENDPOINTS_CHANGED, (ids, enteringIds) => {
             APP.UI.handleLastNEndpoints(ids, enteringIds);
         });
+        room.on(
+            ConferenceEvents.PARTICIPANT_CONN_STATUS_CHANGED, (id, isActive) => {
+            APP.UI.participantConnectionStatusChanged(id, isActive);
+        });
         room.on(ConferenceEvents.DOMINANT_SPEAKER_CHANGED, (id) => {
             if (this.isLocalId(id)) {
                 this.isDominantSpeaker = true;

modules/UI/UI.js

@@ -995,6 +995,17 @@ UI.handleLastNEndpoints = function (ids, enteringIds) {
     VideoLayout.onLastNEndpointsChanged(ids, enteringIds);
 };
 
+/**
+ * Will handle notification about participant's connectivity status change.
+ *
+ * @param {string} id the id of remote participant(MUC jid)
+ * @param {boolean} isActive true if the connection is ok or false if the user
+ * is having connectivity issues.
+ */
+UI.participantConnectionStatusChanged = function (id, isActive) {
+    VideoLayout.onParticipantConnectionStatusChanged(id, isActive);
+};
+
 /**
  * Update audio level visualization for specified user.
  * @param {string} id user id

modules/UI/videolayout/RemoteVideo.js

@@ -227,6 +227,49 @@ RemoteVideo.prototype.removeRemoteStreamElement = function (stream) {
         this.VideoLayout.updateLargeVideo(this.id);
 };
 
+/**
+ * Checks whether the remote user associated with this <tt>RemoteVideo</tt>
+ * has connectivity issues.
+ *
+ * @return {boolean} <tt>true</tt> if the user's connection is fine or
+ * <tt>false</tt> otherwise.
+ */
+RemoteVideo.prototype.isConnectionActive = function() {
+    return this.user.isConnectionActive();
+};
+
+/**
+ * @inheritDoc
+ */
+RemoteVideo.prototype.updateView = function () {
+    SmallVideo.prototype.updateView.call(this);
+    this.updateConnectionStatusIndicator(
+        null /* will obtain the status from 'conference' */);
+};
+
+/**
+ * Updates the UI to reflect user's connectivity status.
+ * @param isActive {boolean|null} 'true' if user's connection is active or
+ * 'false' when the use is having some connectivity issues and a warning
+ * should be displayed. When 'null' is passed then the current value will be
+ * obtained from the conference instance.
+ */
+RemoteVideo.prototype.updateConnectionStatusIndicator = function (isActive) {
+    // Check for initial value if 'isActive' is not defined
+    if (typeof isActive !== "boolean") {
+        isActive = this.isConnectionActive();
+        if (isActive === null) {
+            // Cancel processing at this point - no update
+            return;
+        }
+    }
+
+    console.debug(this.id + " thumbnail is connection active ? " + isActive);
+
+    if(this.connectionIndicator)
+        this.connectionIndicator.updateConnectionStatusIndicator(isActive);
+};
+
 /**
  * Removes RemoteVideo from the page.
  */

modules/UI/videolayout/VideoLayout.js

@@ -423,6 +423,8 @@ var VideoLayout = {
         } else {
             VideoLayout.resizeThumbnails(false, true);
         }
+        // Initialize the view
+        remoteVideo.updateView();
     },
 
     videoactive (videoelem, resourceJid) {
@@ -640,6 +642,21 @@ var VideoLayout = {
         }
     },
 
+    /**
+     * Shows/hides warning about remote user's connectivity issues.
+     *
+     * @param {string} id the ID of the remote participant(MUC nickname)
+     * @param {boolean} isActive true if the connection is ok or false when
+     * the user is having connectivity issues.
+     */
+    onParticipantConnectionStatusChanged (id, isActive) {
+        // Show/hide warning on the thumbnail
+        let remoteVideo = remoteVideos[id];
+        if (remoteVideo) {
+            remoteVideo.updateConnectionStatusIndicator(isActive);
+        }
+    },
+
     /**
      * On last N change event.
      *