haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(VideoLayout): "connection interrupted" shown only on video 

The message about having connectivity issues should be displayed only
on top of the video like the "video problems filter" is.
This commit is contained in:
paweldomas 2016-09-22 12:37:14 -05:00
parent 11953cbb60
commit 419950ca49
2 changed files with 53 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
modules/UI/videolayout/LargeVideoManager.js
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;
@ -231,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
@ -284,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();
@ -294,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 */);
}
});
}

20
modules/UI/videolayout/VideoLayout.js
View File

@ -950,28 +950,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 () {