diff --git a/avatar.js b/avatar.js index bf680e025..190367ccc 100644 --- a/avatar.js +++ b/avatar.js @@ -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); diff --git a/css/videolayout_default.css b/css/videolayout_default.css index 4b2e2276b..24b451de6 100644 --- a/css/videolayout_default.css +++ b/css/videolayout_default.css @@ -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 { diff --git a/etherpad.js b/etherpad.js index 67fe1ec0a..7ff68e6f1 100644 --- a/etherpad.js +++ b/etherpad.js @@ -48,12 +48,12 @@ 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}); - }); + $('#etherpad>iframe').fadeIn(300, function () { + document.body.style.background = '#eeeeee'; + $('#etherpad>iframe').css({visibility: 'visible'}); + $('#etherpad').css({zIndex: 2}); }); } else if ($('#etherpad>iframe')) { @@ -61,16 +61,22 @@ var Etherpad = (function (my) { $('#etherpad>iframe').css({visibility: 'hidden'}); $('#etherpad').css({zIndex: 0}); document.body.style.background = 'black'; - if (!isPresentation) { - $('#largeVideo').fadeIn(300, function () { - VideoLayout.setLargeVideoVisible(true); - }); - } }); + + 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. */ diff --git a/prezi.js b/prezi.js index 0515fb101..22bde5879 100644 --- a/prezi.js +++ b/prezi.js @@ -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 () { + $('#largeVideo').fadeOut(300); + prezi.fadeIn(300, function() { + prezi.css({opacity:'1'}); + ToolbarToggler.dockToolbar(true); VideoLayout.setLargeVideoVisible(false); - $('#presentation>iframe').fadeIn(300, function() { - $('#presentation>iframe').css({opacity:'1'}); - ToolbarToggler.dockToolbar(true); - }); }); + $('#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 () { diff --git a/videolayout.js b/videolayout.js index e71098027..98b137e22 100644 --- a/videolayout.js +++ b/videolayout.js @@ -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) { - oldContainer.removeClass("videoContainerFocused"); - } - focusedVideoInfo = null; - if(focusJid) { - Avatar.showUserAvatar(focusJid); + if (oldContainer && oldContainer.length > 0) { + oldContainer.removeClass("videoContainerFocused"); + } + focusedVideoInfo = null; + 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,