Fixes bugs with thumbnails getting black when prezi is playing or etherpad is viewed.

This commit is contained in:
fo 2014-11-28 16:02:48 +02:00
parent 36065b935c
commit f0a4c08f26
5 changed files with 66 additions and 47 deletions

View File

@ -73,8 +73,9 @@ var Avatar = (function(my) {
}
//if the user is the currently focused, the dominant speaker or if
//there is no focused and no dominant speaker
if (activeSpeakerJid === jid) {
//there is no focused and no dominant speaker and the large video is
//currently shown
if (activeSpeakerJid === jid && VideoLayout.isLargeVideoOnTop()) {
setVisibility($("#largeVideo"), !show);
setVisibility($('#activeSpeakerAvatar'), show);
setVisibility(avatar, false);

View File

@ -36,8 +36,6 @@
#remoteVideos .videocontainer {
display: inline-block;
background-color: black;
background-repeat: no-repeat;
background-position: 45;
background-size: contain;
border-radius:8px;
border: 2px solid #212425;
@ -376,6 +374,7 @@
position: absolute;
z-index: 0;
border-radius:10px;
pointer-events: none;
}
#mixedstream {

View File

@ -48,29 +48,35 @@ var Etherpad = (function (my) {
} else {
VideoLayout.setLargeVideoVisible(false);
}
});
$('#etherpad>iframe').fadeIn(300, function () {
document.body.style.background = '#eeeeee';
$('#etherpad>iframe').css({visibility: 'visible'});
$('#etherpad').css({zIndex: 2});
});
});
}
else if ($('#etherpad>iframe')) {
$('#etherpad>iframe').fadeOut(300, function () {
$('#etherpad>iframe').css({visibility: 'hidden'});
$('#etherpad').css({zIndex: 0});
document.body.style.background = 'black';
});
if (!isPresentation) {
$('#largeVideo').fadeIn(300, function () {
VideoLayout.setLargeVideoVisible(true);
});
}
});
}
resize();
};
my.isVisible = function() {
var etherpadIframe = $('#etherpad>iframe');
return etherpadIframe && etherpadIframe.is(':visible');
};
/**
* Resizes the etherpad.
*/

View File

@ -13,23 +13,24 @@ var Prezi = (function (my) {
* Shows/hides a presentation.
*/
my.setPresentationVisible = function (visible) {
var prezi = $('#presentation>iframe');
if (visible) {
// Trigger the video.selected event to indicate a change in the
// large video.
$(document).trigger("video.selected", [true]);
$('#largeVideo').fadeOut(300, function () {
VideoLayout.setLargeVideoVisible(false);
$('#presentation>iframe').fadeIn(300, function() {
$('#presentation>iframe').css({opacity:'1'});
$('#largeVideo').fadeOut(300);
prezi.fadeIn(300, function() {
prezi.css({opacity:'1'});
ToolbarToggler.dockToolbar(true);
VideoLayout.setLargeVideoVisible(false);
});
});
$('#activeSpeakerAvatar').css('visibility', 'hidden');
}
else {
if ($('#presentation>iframe').css('opacity') == '1') {
$('#presentation>iframe').fadeOut(300, function () {
$('#presentation>iframe').css({opacity:'0'});
if (prezi.css('opacity') == '1') {
prezi.fadeOut(300, function () {
prezi.css({opacity:'0'});
$('#reloadPresentation').css({display:'none'});
$('#largeVideo').fadeIn(300, function() {
VideoLayout.setLargeVideoVisible(true);
@ -332,8 +333,9 @@ var Prezi = (function (my) {
* On video selected event.
*/
$(document).bind('video.selected', function (event, isPresentation) {
if (!isPresentation && $('#presentation>iframe'))
if (!isPresentation && $('#presentation>iframe')) {
Prezi.setPresentationVisible(false);
}
});
$(window).resize(function () {

View File

@ -310,6 +310,7 @@ var VideoLayout = (function (my) {
connection.emuc.findJidFromResource(
largeVideoState.userResourceJid));
}
};
my.handleVideoThumbClicked = function(videoSrc,
@ -318,7 +319,7 @@ var VideoLayout = (function (my) {
// Restore style for previously focused video
var oldContainer = null;
if(focusedVideoInfo) {
var focusResourceJid = focusedVideoInfo.resouceJid;
var focusResourceJid = focusedVideoInfo.resourceJid;
oldContainer = getParticipantContainer(focusResourceJid);
}
@ -354,7 +355,7 @@ var VideoLayout = (function (my) {
// Lock new video
focusedVideoInfo = {
src: videoSrc,
resouceJid: resourceJid
resourceJid: resourceJid
};
// Update focused/pinned interface.
@ -368,7 +369,8 @@ var VideoLayout = (function (my) {
}
}
if ($('#largeVideo').attr('src') === videoSrc) {
if ($('#largeVideo').attr('src') === videoSrc &&
VideoLayout.isLargeVideoOnTop()) {
return;
}
@ -433,15 +435,18 @@ var VideoLayout = (function (my) {
$('#largeVideo').css({visibility: 'hidden'});
$('.watermark').css({visibility: 'hidden'});
VideoLayout.enableDominantSpeaker(resourceJid, false);
var focusJid = VideoLayout.getLargeVideoState().userJid;
var oldContainer = getParticipantContainer(focusJid);
if(focusedVideoInfo) {
var focusResourceJid = focusedVideoInfo.resourceJid;
var oldContainer = getParticipantContainer(focusResourceJid);
if (oldContainer) {
if (oldContainer && oldContainer.length > 0) {
oldContainer.removeClass("videoContainerFocused");
}
focusedVideoInfo = null;
if(focusJid) {
Avatar.showUserAvatar(focusJid);
if(focusResourceJid) {
Avatar.showUserAvatar(
connection.emuc.findJidFromResource(focusResourceJid));
}
}
}
};
@ -455,6 +460,10 @@ var VideoLayout = (function (my) {
return $('#largeVideo').is(':visible');
};
my.isLargeVideoOnTop = function () {
return !Prezi.isPresentationVisible() && !Etherpad.isVisible();
};
/**
* Checks if container for participant identified by given peerJid exists
* in the document and creates it eventually.
@ -596,13 +605,14 @@ var VideoLayout = (function (my) {
* no actual video).
*/
var videoThumb = $('#' + container.id + '>video').get(0);
if (videoThumb)
if (videoThumb) {
VideoLayout.handleVideoThumbClicked(
RTC.getVideoSrc(videoThumb),
false,
Strophe.getResourceFromJid(peerJid));
}
event.stopPropagation();
event.preventDefault();
return false;
};
@ -1098,21 +1108,21 @@ var VideoLayout = (function (my) {
if (video && video.length > 0) {
if (isEnable) {
VideoLayout.showDisplayName(videoContainerId, true);
var isLargeVideoVisible = VideoLayout.isLargeVideoOnTop();
VideoLayout.showDisplayName(videoContainerId, isLargeVideoVisible);
if (!videoSpan.classList.contains("dominantspeaker"))
videoSpan.classList.add("dominantspeaker");
video.css({visibility: 'hidden'});
}
else {
VideoLayout.showDisplayName(videoContainerId, false);
if (videoSpan.classList.contains("dominantspeaker"))
videoSpan.classList.remove("dominantspeaker");
video.css({visibility: 'visible'});
}
Avatar.showUserAvatar(
connection.emuc.findJidFromResource(resourceJid));
}
};
@ -1715,12 +1725,13 @@ var VideoLayout = (function (my) {
= VideoLayout.getPeerContainerResourceJid(videoParent[0]);
// Update the large video to the last added video only if there's no
// current dominant or focused speaker or update it to the current
// dominant speaker.
if ((!focusedVideoInfo && !VideoLayout.getDominantSpeakerResourceJid())
|| (parentResourceJid
&& VideoLayout.getDominantSpeakerResourceJid()
=== parentResourceJid)) {
// current dominant, focused speaker or prezi playing or update it to
// the current dominant speaker.
if ((!focusedVideoInfo &&
!VideoLayout.getDominantSpeakerResourceJid() &&
!Prezi.isPresentationVisible()) ||
(parentResourceJid &&
VideoLayout.getDominantSpeakerResourceJid() === parentResourceJid)) {
VideoLayout.updateLargeVideo(
RTC.getVideoSrc(videoelem[0]),
1,