Fixes problem with local speaker removing the active speaker selection. Fixes problem with tooltip appearing behind video.

css/videolayout_default.css

@@ -32,6 +32,7 @@
     background-size: contain;
     border-radius:8px;
     border: 2px solid #212425;
+    margin-right: 3px;
 }
 
 #remoteVideos .videocontainer:hover,
@@ -50,7 +51,6 @@
     -webkit-animation-iteration-count: 1;
     -webkit-box-shadow: 0 0 18px #388396;
     border: 2px solid #388396;
-    z-index: 3;
 }
 
 #localVideoWrapper {

videolayout.js

@@ -816,6 +816,9 @@ var VideoLayout = (function (my) {
         popupmenuElement.appendChild(ejectMenuItem);
     }
 
+    /**
+     * On audio muted event.
+     */
     $(document).bind('audiomuted.muc', function (event, jid, isMuted) {
         var videoSpanId = null;
         if (jid === connection.emuc.myroomjid) {
@@ -834,6 +837,9 @@ var VideoLayout = (function (my) {
             VideoLayout.showAudioIndicator(videoSpanId, isMuted);
     });
 
+    /**
+     * On video muted event.
+     */
     $(document).bind('videomuted.muc', function (event, jid, isMuted) {
         var videoSpanId = null;
         if (jid === connection.emuc.myroomjid) {
@@ -851,6 +857,10 @@ var VideoLayout = (function (my) {
      * On active speaker changed event.
      */
     $(document).bind('activespeakerchanged', function (event, resourceJid) {
+        // We ignore local user events.
+        if (resourceJid
+                === Strophe.getResourceFromJid(connection.emuc.myroomjid))
+            return;
 
         // Disable style for previous active speaker.
         if (currentActiveSpeaker
@@ -888,4 +898,4 @@ var VideoLayout = (function (my) {
     });
 
     return my;
-}(VideoLayout || {}));
+}(VideoLayout || {}));