Fixes positioning issues with connection popover. Fixes some issues with removal of the connection popover.

css/videolayout_default.css

@@ -286,7 +286,6 @@
     position: absolute;
     color: #FFFFFF;
     top: 0;
-    right: 23px;
     padding: 8px 5px;
     width: 25px;
     font-size: 8pt;

index.html

@@ -47,7 +47,7 @@
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <script src="rtp_sts.js?v=2"></script><!-- RTP stats processing -->
     <script src="local_sts.js?v=2"></script><!-- Local stats processing -->
-    <script src="videolayout.js?v=16"></script><!-- video ui -->
+    <script src="videolayout.js?v=17"></script><!-- video ui -->
     <script src="connectionquality.js?v=1"></script>
     <script src="toolbar.js?v=6"></script><!-- toolbar ui -->
     <script src="toolbar_toggler.js?v=2"></script>
@@ -58,12 +58,12 @@
     <script src="roomname_generator.js?v=1"></script><!-- generator for random room names -->
     <script src="keyboard_shortcut.js?v=2"></script>
     <script src="tracking.js?v=1"></script><!-- tracking -->
-    <script src="jitsipopover.js?v=2"></script>
+    <script src="jitsipopover.js?v=3"></script>
     <script src="message_handler.js?v=1"></script>
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/font.css?v=4"/>
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=26"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=12" id="videolayout_default"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=13" id="videolayout_default"/>
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
     <link rel="stylesheet" href="css/modaldialog.css?v=3">
     <link rel="stylesheet" href="css/popup_menu.css?v=4">

jitsipopover.js

@@ -56,12 +56,18 @@ var JitsiPopover = (function () {
     JitsiPopover.prototype.hide = function () {
         if(!this.elementIsHovered && !this.popoverIsHovered && this.popoverShown)
         {
-            $(".jitsipopover").remove();
-            this.popoverShown = false;
-
+            this.forceHide();
         }
     };
 
+    /**
+     * Hides the popover
+     */
+    JitsiPopover.prototype.forceHide = function () {
+        $(".jitsipopover").remove();
+        this.popoverShown = false;
+    };
+
     /**
      * Creates the popover html
      */

videolayout.js

@@ -797,12 +797,27 @@ var VideoLayout = (function (my) {
                     "top");
                 videoMutedSpan.appendChild(mutedIndicator);
             }
-            var audioMutedSpan = $('#' + videoSpanId + '>span.audioMuted');
-            videoMutedSpan = $('#' + videoSpanId + '>span.videoMuted');
-            videoMutedSpan.css({right: ((audioMutedSpan.length > 0)?'50px':'30px')});
+
+            VideoLayout.updateMutePosition(videoSpanId);
+
         }
     };
 
+    my.updateMutePosition = function (videoSpanId) {
+        var audioMutedSpan = $('#' + videoSpanId + '>span.audioMuted');
+        var connectionIndicator = $('#' + videoSpanId + '>div.connectionindicator');
+        var videoMutedSpan = $('#' + videoSpanId + '>span.videoMuted');
+        if(connectionIndicator.length > 0
+            && connectionIndicator[0].style.display != "none") {
+            audioMutedSpan.css({right: "23px"});
+            videoMutedSpan.css({right: ((audioMutedSpan.length > 0? 23 : 0) + 30) + "px"});
+        }
+        else
+        {
+            audioMutedSpan.css({right: "0px"});
+            videoMutedSpan.css({right: (audioMutedSpan.length > 0? 30 : 0) + "px"});
+        }
+    }
     /**
      * Shows audio muted indicator over small videos.
      * @param {string} isMuted
@@ -817,19 +832,20 @@ var VideoLayout = (function (my) {
             }
         }
         else {
-            if(audioMutedSpan.length > 0 )
-                return;
-            audioMutedSpan = document.createElement('span');
-            audioMutedSpan.className = 'audioMuted';
-            Util.setTooltip(audioMutedSpan,
-                "Participant is muted",
-                "top");
+            if(audioMutedSpan.length == 0 ) {
+                audioMutedSpan = document.createElement('span');
+                audioMutedSpan.className = 'audioMuted';
+                Util.setTooltip(audioMutedSpan,
+                    "Participant is muted",
+                    "top");
 
-            $('#' + videoSpanId)[0].appendChild(audioMutedSpan);
+                $('#' + videoSpanId)[0].appendChild(audioMutedSpan);
+                var mutedIndicator = document.createElement('i');
+                mutedIndicator.className = 'icon-mic-disabled';
+                audioMutedSpan.appendChild(mutedIndicator);
 
-            var mutedIndicator = document.createElement('i');
-            mutedIndicator.className = 'icon-mic-disabled';
-            audioMutedSpan.appendChild(mutedIndicator);
+            }
+            VideoLayout.updateMutePosition(videoSpanId);
         }
     };
 
@@ -1683,8 +1699,8 @@ var VideoLayout = (function (my) {
      */
     ConnectionIndicator.prototype.remove = function()
     {
-        this.popover.hide();
         this.connectionIndicatorContainer.remove();
+        this.popover.forceHide();
 
     };
 
@@ -1698,11 +1714,15 @@ var VideoLayout = (function (my) {
         if(percent === null)
         {
             this.connectionIndicatorContainer.style.display = "none";
+            this.popover.forceHide();
             return;
         }
         else
         {
-            this.connectionIndicatorContainer.style.display = "block";
+            if(this.connectionIndicatorContainer.style.display == "none") {
+                this.connectionIndicatorContainer.style.display = "block";
+                VideoLayout.updateMutePosition(this.videoContainer.id);
+            }
         }
         this.bandwidth = object.bandwidth;
         this.bitrate = object.bitrate;
@@ -1742,7 +1762,7 @@ var VideoLayout = (function (my) {
      * Hides the popover
      */
     ConnectionIndicator.prototype.hide = function () {
-        this.popover.hide();
+        this.popover.forceHide();
     };
 
     /**
@@ -1750,6 +1770,8 @@ var VideoLayout = (function (my) {
      */
     ConnectionIndicator.prototype.hideIndicator = function () {
         this.connectionIndicatorContainer.style.display = "none";
+        if(this.popover)
+            this.popover.forceHide();
     };
 
     /**