Changes active speaker indication by only adding greyscale filter. Makes sure the display name is visible on rollover event before the video is available.

app.js

@@ -244,7 +244,9 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
                 'participant_' + Strophe.getResourceFromJid(data.peerjid));
     } else {
         if (data.stream.id !== 'mixedmslabel') {
-            console.error('can not associate stream', data.stream.id, 'with a participant');
+            console.error(  'can not associate stream',
+                            data.stream.id,
+                            'with a participant');
             // We don't want to add it here since it will cause troubles
             return;
         }
@@ -304,14 +306,22 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
         VideoLayout.handleVideoThumbClicked(vid.src);
     });
     // Add hover handler
-    sel.hover(
-            function() {
-                VideoLayout.showDisplayName(container.id, true);
-            },
-            function() {
-                if (focusedVideoSrc !== vid.src)
-                    VideoLayout.showDisplayName(container.id, false);
+    $(container).hover(
+        function() {
+            VideoLayout.showDisplayName(container.id, true);
+        },
+        function() {
+            var videoSrc = null;
+            if ($('#' + container.id + '>video')
+                    && $('#' + container.id + '>video').length > 0) {
+                videoSrc = $('#' + container.id + '>video').get(0).src;
             }
+
+            // If the video has been "pinned" by the user we want to keep the
+            // display name on place.
+            if (focusedVideoSrc !== videoSrc)
+                VideoLayout.showDisplayName(container.id, false);
+        }
     );
 
     // an attempt to work around https://github.com/jitsi/jitmeet/issues/32

css/videolayout_default.css

@@ -60,8 +60,7 @@
     border: 0px !important;
 }
 
-#remoteVideos .videocontainer>video,
-#remoteVideos .videocontainer>canvas {
+#remoteVideos .videocontainer>video {
     border-radius:4px;
 }
 
@@ -86,8 +85,7 @@
 #etherpad,
 #localVideoWrapper>video,
 #localVideoWrapper,
-.videocontainer>video,
-.videocontainer>canvas {
+.videocontainer>video {
     position: absolute;
     left: 0;
     top: 0;
@@ -96,6 +94,11 @@
     height: 100%;
 }
 
+.activespeaker {
+    -webkit-filter: grayscale(1) brightness(2);
+    filter: grayscale(1) brightness(2);
+}
+
 #etherpad,
 #presentation {
     text-align: center;

videolayout.js

@@ -552,54 +552,21 @@ var VideoLayout = (function (my) {
         else if (resourceJid === currentActiveSpeaker)
             currentActiveSpeaker = null;
 
-        var activeSpeakerCanvas = $('#' + videoSpanId + '>canvas');
-        var videoElement = $('#' + videoSpanId + '>video');
-        var canvasSize = calculateThumbnailSize();
+        var video = $('#' + videoSpanId + '>video');
 
-        if (isEnable && (!activeSpeakerCanvas
-                    || activeSpeakerCanvas.length === 0)) {
-
-              activeSpeakerCanvas = document.createElement('canvas');
-              activeSpeakerCanvas.width = canvasSize[0];
-              activeSpeakerCanvas.height = canvasSize[1];
-
-              // We flip the canvas image if this is the local video.
-              if (videoSpanId === 'localVideoWrapper')
-                  activeSpeakerCanvas.className += " flipVideoX";
-
-              videoSpan.appendChild(activeSpeakerCanvas);
-              activeSpeakerCanvas.addEventListener(
-                      'click',
-                      function() {
-                          VideoLayout.handleVideoThumbClicked(
-                                  videoElement.get(0).src);
-                      }, false);
-        }
-        else {
-            activeSpeakerCanvas = activeSpeakerCanvas.get(0);
-        }
-
-        if (videoElement && videoElement.length > 0) {
-            var video = document.getElementById(videoElement.get(0).id);
+        if (video && video.length > 0) {
+            var videoElement = video.get(0);
             if (isEnable) {
-                var context = activeSpeakerCanvas.getContext('2d');
+                if (!videoElement.classList.contains("activespeaker"))
+                    videoElement.classList.add("activespeaker");
 
-                context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
-                context.drawImage(video, 0, 0, canvasSize[0], canvasSize[1]);
-                Util.imageToGrayScale(activeSpeakerCanvas);
-
-                VideoLayout
-                    .showDisplayName(videoSpanId, true);
-                activeSpeakerCanvas
-                    .setAttribute('style', 'display:block !important;');
-                video.setAttribute('style', 'display:none !important;');
+                VideoLayout.showDisplayName(videoSpanId, true);
             }
             else {
-                VideoLayout
-                    .showDisplayName(videoSpanId, false);
-                video.setAttribute('style', 'display:block !important;');
-                activeSpeakerCanvas
-                    .setAttribute('style', 'display:none !important;');
+                VideoLayout.showDisplayName(videoSpanId, false);
+
+                if (videoElement.classList.contains("activespeaker"))
+                    videoElement.classList.remove("activespeaker");
             }
         }
     };