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

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

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 {

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

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 () {

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,