feat(RemoteVideo): show disconnected GSM bars for remotes

This commit is contained in:
paweldomas 2016-09-16 15:51:19 -05:00
parent 5daceaead7
commit 9d1364b6fb
4 changed files with 75 additions and 0 deletions

View File

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

View File

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

View File

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

View File

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