Merge pull request #922 from jitsi/fix_filter_not_applied

Fix notification about network issues not displayed when expected
This commit is contained in:
Дамян Минков 2016-09-26 10:04:14 -05:00 committed by GitHub
commit b3d6e5876e
5 changed files with 75 additions and 21 deletions

View File

@ -681,6 +681,16 @@ export default {
return this._room
&& this._room.getConnectionState();
},
/**
* Checks whether or not our connection is currently in interrupted and
* reconnect attempts are in progress.
*
* @returns {boolean} true if the connection is in interrupted state or
* false otherwise.
*/
isConnectionInterrupted () {
return connectionIsInterrupted;
},
getMyUserId () {
return this._room
&& this._room.myUserId();

View File

@ -567,10 +567,6 @@ class SharedVideoContainer extends LargeContainer {
this.player = player;
}
get $video () {
return this.$iframe;
}
show () {
let self = this;
return new Promise(resolve => {

View File

@ -81,6 +81,27 @@ export default class LargeVideoManager {
container.onHoverOut(e);
}
/**
* Called when the media connection has been interrupted.
*/
onVideoInterrupted () {
this.enableVideoProblemFilter(true);
let reconnectingKey = "connection.RECONNECTING";
$('#videoConnectionMessage')
.attr("data-i18n", reconnectingKey)
.text(APP.translation.translateString(reconnectingKey));
// Show the message only if the video is currently being displayed
this.showVideoConnectionMessage(this.state === VIDEO_CONTAINER_TYPE);
}
/**
* Called when the media connection has been restored.
*/
onVideoRestored () {
this.enableVideoProblemFilter(false);
this.showVideoConnectionMessage(false);
}
get id () {
let container = this.getContainer(this.state);
return container.id;
@ -213,8 +234,7 @@ export default class LargeVideoManager {
* @param enable <tt>true</tt> to enable, <tt>false</tt> to disable
*/
enableVideoProblemFilter (enable) {
let container = this.getContainer(this.state);
container.$video.toggleClass("videoProblemFilter", enable);
this.videoContainer.enableVideoProblemFilter(enable);
}
/**
@ -232,6 +252,24 @@ export default class LargeVideoManager {
$('.watermark').css('visibility', show ? 'visible' : 'hidden');
}
/**
* Shows/hides the "video connection message".
* @param {boolean|null} show(optional) tells whether the message is to be
* displayed or not. If missing the condition will be based on the value
* obtained from {@link APP.conference.isConnectionInterrupted}.
*/
showVideoConnectionMessage (show) {
if (typeof show !== 'boolean') {
show = APP.conference.isConnectionInterrupted();
}
if (show) {
$('#videoConnectionMessage').css({display: "block"});
} else {
$('#videoConnectionMessage').css({display: "none"});
}
}
/**
* Add container of specified type.
* @param {string} type container type
@ -285,8 +323,12 @@ export default class LargeVideoManager {
}
let oldContainer = this.containers[this.state];
// FIXME when video is being replaced with other content we need to hide
// companion icons/messages. It would be best if the container would
// be taking care of it by itself, but that is a bigger refactoring
if (this.state === VIDEO_CONTAINER_TYPE) {
this.showWatermark(false);
this.showVideoConnectionMessage(false);
}
oldContainer.hide();
@ -295,7 +337,12 @@ export default class LargeVideoManager {
return container.show().then(() => {
if (type === VIDEO_CONTAINER_TYPE) {
// FIXME when video appears on top of other content we need to
// show companion icons/messages. It would be best if
// the container would be taking care of it by itself, but that
// is a bigger refactoring
this.showWatermark(true);
this.showVideoConnectionMessage(/* fetch the current state */);
}
});
}

View File

@ -184,6 +184,17 @@ export class VideoContainer extends LargeContainer {
this.$video[0].onplay = onPlay;
}
/**
* Enables a filter on the video which indicates that there are some
* problems with the media connection.
*
* @param {boolean} enable <tt>true</tt> if the filter is to be enabled or
* <tt>false</tt> otherwise.
*/
enableVideoProblemFilter (enable) {
this.$video.toggleClass("videoProblemFilter", enable);
}
/**
* Get size of video element.
* @returns {{width, height}}

View File

@ -951,28 +951,18 @@ var VideoLayout = {
* Indicates that the video has been interrupted.
*/
onVideoInterrupted () {
this.enableVideoProblemFilter(true);
let reconnectingKey = "connection.RECONNECTING";
$('#videoConnectionMessage')
.attr("data-i18n", reconnectingKey)
.text(APP.translation.translateString(reconnectingKey))
.css({display: "block"});
if (largeVideo) {
largeVideo.onVideoInterrupted();
}
},
/**
* Indicates that the video has been restored.
*/
onVideoRestored () {
this.enableVideoProblemFilter(false);
$('#videoConnectionMessage').css({display: "none"});
},
enableVideoProblemFilter (enable) {
if (!largeVideo) {
return;
if (largeVideo) {
largeVideo.onVideoRestored();
}
largeVideo.enableVideoProblemFilter(enable);
},
isLargeVideoVisible () {