From 8a43699a89b5be53c5b972d4048c2d39b8771603 Mon Sep 17 00:00:00 2001
From: paweldomas <pawel.domas@jitsi.org>
Date: Fri, 16 Sep 2016 15:33:22 -0500
Subject: [PATCH] feat(ConnectionIndicator): show disconnected GSM bars on
 local thumbnail

---
 conference.js                                 |  2 ++
 css/_videolayout_default.scss                 |  6 +++++
 modules/UI/UI.js                              | 11 +++++++++
 modules/UI/videolayout/ConnectionIndicator.js | 24 +++++++++++++++++++
 modules/UI/videolayout/VideoLayout.js         | 12 ++++++++++
 5 files changed, 55 insertions(+)

diff --git a/conference.js b/conference.js
index a715ca552..66865a188 100644
--- a/conference.js
+++ b/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) => {
diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index e53a4b55f..8af855ed1 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -221,6 +221,12 @@
     overflow: hidden;
 }
 
+.connection.connection_lost
+{
+    color: #8B8B8B;
+    overflow: visible;
+}
+
 .connection.connection_full
 {
     color: #FFFFFF;/*#15A1ED*/
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 558e4b2f6..9b0e24da3 100644
--- a/modules/UI/UI.js
+++ b/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.
  */
diff --git a/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js
index e2da230f8..ddcd65d4f 100644
--- a/modules/UI/videolayout/ConnectionIndicator.js
+++ b/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
diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
index e20a122b2..582b25372 100644
--- a/modules/UI/videolayout/VideoLayout.js
+++ b/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.
      */