Fixes active speaker relevant issues. Moves all UI related code in the videolayout.js

app.js

 
             // If the video has been "pinned" by the user we want to keep the
             // display name on place.
-            if (focusedVideoSrc !== videoSrc)
+            if (focusedVideoSrc && focusedVideoSrc !== videoSrc
+                || (!focusedVideoSrc
+                    && container.id
+                        !== VideoLayout.getActiveSpeakerContainerId()))
                 VideoLayout.showDisplayName(container.id, false);
         }
     );
         {
             console.info(jid +  " audio level: " +
                 peerStats.ssrc2AudioLevel[ssrc] + " of ssrc: " + ssrc);
+//            VideoLayout.updateAudioLevel(   Strophe.getResourceFromJid(jid),
+//                                            peerStats.ssrc2AudioLevel[ssrc]);
         });
     });
 }

data_channels.js

         console.info("Got Data Channel Message:", msgData, dataChannel);
 
         // Active speaker event
-        if (msgData.indexOf('activeSpeaker') === 0 && !focusedVideoSrc)
+        if (msgData.indexOf('activeSpeaker') === 0)
         {
             // Endpoint ID from the bridge
-            var endpointId = msgData.split(":")[1];
-            console.info("New active speaker: " + endpointId);
+            var resourceJid = msgData.split(":")[1];
 
-            var container  = document.getElementById(
-                'participant_' + endpointId);
-
-            // Local video will not have container found, but that's ok
-            // since we don't want to switch to local video
-
-            if (container)
-            {
-                var video = container.getElementsByTagName("video");
-                if (video.length)
-                {
-                    VideoLayout.updateLargeVideo(video[0].src);
-                    VideoLayout.enableActiveSpeaker(endpointId, true);
-                }
-            }
+            console.info(
+                "Data channel new active speaker event: " + resourceJid);
+            $(document).trigger('activespeakerchanged', [resourceJid]);
         }
     };
 

videolayout.js

     my.handleVideoThumbClicked = function(videoSrc) {
         // Restore style for previously focused video
         var focusJid = getJidFromVideoSrc(focusedVideoSrc);
-        var oldContainer =
-            getParticipantContainer(focusJid);
+        var oldContainer = getParticipantContainer(focusJid);
 
         if (oldContainer) {
             oldContainer.removeClass("videoContainerFocused");
                     Strophe.getResourceFromJid(focusJid), false);
         }
 
-        // Unlock
+        // Unlock current focused.
         if (focusedVideoSrc === videoSrc)
         {
             focusedVideoSrc = null;
+            // Enable the currently set active speaker.
+            if (currentActiveSpeaker) {
+                VideoLayout.enableActiveSpeaker(currentActiveSpeaker, true);
+            }
+
             return;
         }
+        // Remove style for current active speaker if we're going to lock
+        // another video.
+        else if (currentActiveSpeaker) {
+            VideoLayout.enableActiveSpeaker(currentActiveSpeaker, false);
+        }
 
         // Lock new video
         focusedVideoSrc = videoSrc;
      * disabled
      */
     my.enableActiveSpeaker = function(resourceJid, isEnable) {
-        console.log("Enable active speaker", resourceJid, isEnable);
+        var displayName = resourceJid;
+        var nameSpan = $('#participant_' + resourceJid + '>span.displayname');
+        if (nameSpan.length > 0)
+            displayName = nameSpan.text();
+
+        console.log("Enable active speaker", displayName, isEnable);
 
         var videoSpanId = null;
         if (resourceJid
             return;
         }
 
-        // If there's an active speaker (automatically) selected we have to
-        // disable this state and update the current active speaker.
-        if (isEnable) {
-            if (currentActiveSpeaker) {
-                var oldSpeaker = currentActiveSpeaker;
-                setTimeout(function () {
-                    VideoLayout.enableActiveSpeaker(oldSpeaker, false);
-                    }, 200);
-            }
-
-            currentActiveSpeaker = resourceJid;
-        }
-        else if (resourceJid === currentActiveSpeaker)
-            currentActiveSpeaker = null;
-
         var video = $('#' + videoSpanId + '>video');
 
         if (video && video.length > 0) {
         }
     };
 
+    /**
+     * Returns the current active speaker.
+     */
+    my.getActiveSpeakerContainerId = function () {
+        return 'participant_' + currentActiveSpeaker;
+    };
+
     /**
      * Adds the remote video menu element for the given <tt>jid</tt> in the
      * given <tt>parentElement</tt>.
             VideoLayout.showVideoIndicator(videoSpanId, isMuted);
     });
 
+    /**
+     * On active speaker changed event.
+     */
+    $(document).bind('activespeakerchanged', function (event, resourceJid) {
+
+        // Disable style for previous active speaker.
+        if (currentActiveSpeaker
+                && currentActiveSpeaker !== resourceJid
+                && !focusedVideoSrc) {
+            var oldContainer  = document.getElementById(
+                    'participant_' + currentActiveSpeaker);
+
+            if (oldContainer) {
+                VideoLayout.enableActiveSpeaker(currentActiveSpeaker, false);
+            }
+        }
+
+        // Obtain container for new active speaker.
+        var container  = document.getElementById(
+                'participant_' + resourceJid);
+
+        // Update the current active speaker.
+        if (resourceJid !== currentActiveSpeaker)
+            currentActiveSpeaker = resourceJid;
+        else
+            return;
+
+        // Local video will not have container found, but that's ok
+        // since we don't want to switch to local video.
+        if (container && !focusedVideoSrc)
+        {
+            var video = container.getElementsByTagName("video");
+            if (video.length)
+            {
+                VideoLayout.updateLargeVideo(video[0].src);
+                VideoLayout.enableActiveSpeaker(resourceJid, true);
+            }
+        }
+    });
+
     return my;
 }(VideoLayout || {}));