feat(ConnectionIndicator): show disconnected GSM bars on local thumbnail

conference.js

@@ -1205,10 +1205,12 @@ export default {
         room.on(ConferenceEvents.CONNECTION_INTERRUPTED, () => {
             connectionIsInterrupted = true;
             ConnectionQuality.updateLocalConnectionQuality(0);
+            APP.UI.showLocalConnectionInterrupted(true);
         });
 
         room.on(ConferenceEvents.CONNECTION_RESTORED, () => {
             connectionIsInterrupted = false;
+            APP.UI.showLocalConnectionInterrupted(false);
         });
 
         room.on(ConferenceEvents.DISPLAY_NAME_CHANGED, (id, displayName) => {

css/_videolayout_default.scss

@@ -221,6 +221,12 @@
     overflow: hidden;
 }
 
+.connection.connection_lost
+{
+    color: #8B8B8B;
+    overflow: visible;
+}
+
 .connection.connection_full
 {
     color: #FFFFFF;/*#15A1ED*/

modules/UI/UI.js

@@ -261,6 +261,17 @@ 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.
  */

modules/UI/videolayout/ConnectionIndicator.js

@@ -285,6 +285,9 @@ ConnectionIndicator.prototype.create = function () {
         createIcon(["connection", "connection_empty"], "icon-connection"));
     this.fullIcon = this.connectionIndicatorContainer.appendChild(
         createIcon(["connection", "connection_full"], "icon-connection"));
+    this.interruptedIndicator = this.connectionIndicatorContainer.appendChild(
+        createIcon(["connection", "connection_lost"],"icon-connection-lost"));
+    $(this.interruptedIndicator).hide();
 };
 
 /**
@@ -298,6 +301,27 @@ ConnectionIndicator.prototype.remove = function() {
     this.popover.forceHide();
 };
 
+/**
+ * Updates the UI which displays warning about user's connectivity problems.
+ *
+ * @param {boolean} isActive true if the connection is working fine or false if
+ * the user is having connectivity issues.
+ */
+ConnectionIndicator.prototype.updateConnectionStatusIndicator
+= function (isActive) {
+    this.isConnectionActive = isActive;
+    if (this.isConnectionActive) {
+        $(this.interruptedIndicator).hide();
+        $(this.emptyIcon).show();
+        $(this.fullIcon).show();
+    } else {
+        $(this.interruptedIndicator).show();
+        $(this.emptyIcon).hide();
+        $(this.fullIcon).hide();
+        this.updateConnectionQuality(0 /* zero bars */);
+    }
+};
+
 /**
  * Updates the data of the indicator
  * @param percent the percent of connection quality

modules/UI/videolayout/VideoLayout.js

@@ -497,6 +497,18 @@ var 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) {
+        localVideoThumbnail.connectionIndicator
+            .updateConnectionStatusIndicator(!isInterrupted);
+    },
+
     /**
      * Resizes thumbnails.
      */