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

This commit is contained in:
paweldomas 2016-09-16 15:33:22 -05:00
parent 3ef5dd20ef
commit 8a43699a89
5 changed files with 55 additions and 0 deletions

View File

@ -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) => {

View File

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

View File

@ -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.
*/

View File

@ -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

View File

@ -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.
*/