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 true if local connection is
+ * currently in the interrupted state or false 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 true if local connection is
+ * currently in the interrupted state or false if the connection
+ * is fine.
+ */
+ showLocalConnectionInterrupted (isInterrupted) {
+ localVideoThumbnail.connectionIndicator
+ .updateConnectionStatusIndicator(!isInterrupted);
+ },
+
/**
* Resizes thumbnails.
*/