Adds local addresses and ports to connection quality tooltip. Aligns the values in the tooltip. Fixes issues with the statistics.

connectionquality.js

@@ -62,8 +62,8 @@ var ConnectionQuality = (function () {
      */
     function convertToMUCStats(stats) {
         return {
-            "bitrate_donwload": stats.bitrate.download,
-            "bitrate_uplpoad": stats.bitrate.upload,
+            "bitrate_download": stats.bitrate.download,
+            "bitrate_upload": stats.bitrate.upload,
             "packetLoss_total": stats.packetLoss.total,
             "packetLoss_download": stats.packetLoss.download,
             "packetLoss_upload": stats.packetLoss.upload
@@ -78,8 +78,8 @@ var ConnectionQuality = (function () {
     function parseMUCStats(stats) {
         return {
             bitrate: {
-                download: stats.bitrate_donwload,
-                upload: stats.bitrate_uplpoad
+                download: stats.bitrate_download,
+                upload: stats.bitrate_upload
             },
             packetLoss: {
                 total: stats.packetLoss_total,
@@ -101,7 +101,6 @@ var ConnectionQuality = (function () {
             return;
         }
         remoteStats[jid] = parseMUCStats(data);
-        console.log(remoteStats[jid]);
 
         VideoLayout.updateConnectionStats(jid, 100 - data.packetLoss_total,remoteStats[jid]);
 

css/videolayout_default.css

@@ -227,18 +227,27 @@
     left: 0px;
     top: 0px;
     font-size: 8pt;
-    text-shadow: 1px 1px 1px rgba(0,0,0,1), -1px -1px -1px rgba(0,0,0,1);
     border: 0px;
     width: 18px;
     height: 13px;
 }
 
 .connection_info
+{
+    float: left;
+    padding-bottom: 5px;
+}
+
+.connection_info > table
+{
+    white-space: nowrap;
+}
+
+.connection_info, .connection_info > table
 {
     text-align: left;
     font-size: 11px;
-    white-space:nowrap;
-    /*width: 260px;*/
+    color: #ffffff;
 }
 
 #localVideoContainer>span.status:hover,

jitsipopover.js

@@ -90,7 +90,7 @@ var JitsiPopover = (function () {
             of: this.element,
             using: function (position, elements) {
                 var calcLeft = elements.target.left - elements.element.left + elements.target.width/2;
-                $(".jitsipopover").css({top: position.top, left: position.left, display: "block"});
+                $(".jitsipopover").css({top: position.top, left: position.left, display: "table"});
                 $(".jitsipopover > .arrow").css({left: calcLeft});
                 $(".jitsipopover > .jitsiPopupmenuPadding").css({left: calcLeft - 50});
             }

rtp_sts.js

@@ -197,8 +197,8 @@ StatsCollector.prototype.processStatsReport = function () {
         var now = this.currentStatsReport[idx];
         if (now.stat('googAvailableReceiveBandwidth') || now.stat('googAvailableSendBandwidth')) {
             PeerStats.bandwidth = {
-                "download": Math.round((now.stat('googAvailableReceiveBandwidth') * 8) / 1000),
-                "upload": Math.round((now.stat('googAvailableSendBandwidth') * 8) / 1000)
+                "download": Math.round((now.stat('googAvailableReceiveBandwidth')) / 1000),
+                "upload": Math.round((now.stat('googAvailableSendBandwidth')) / 1000)
             };
         }
 
@@ -206,19 +206,22 @@ StatsCollector.prototype.processStatsReport = function () {
         {
             var ip = now.stat('googRemoteAddress');
             var type = now.stat("googTransportType");
-            if(!ip || !type)
+            var localIP = now.stat("googLocalAddress");
+            var active = now.stat("googActiveConnection");
+            if(!ip || !type || !localIP || !active)
                 continue;
             var addressSaved = false;
             for(var i = 0; i < PeerStats.transport.length; i++)
             {
-                if(PeerStats.transport[i].ip == ip && PeerStats.transport[i].type == type)
+                if(PeerStats.transport[i].ip == ip && PeerStats.transport[i].type == type &&
+                    PeerStats.transport[i].localip == localIP)
                 {
                     addressSaved = true;
                 }
             }
             if(addressSaved)
                 continue;
-            PeerStats.transport.push({ip: ip, type: type});
+            PeerStats.transport.push({localip: localIP, ip: ip, type: type});
             continue;
         }
 
@@ -261,13 +264,23 @@ StatsCollector.prototype.processStatsReport = function () {
             }
         }
         var packetsNow = now.stat(key);
+        if(!packetsNow || packetsNow < 0)
+            packetsNow = 0;
+
         var packetsBefore = before.stat(key);
+        if(!packetsBefore || packetsBefore < 0)
+            packetsBefore = 0;
         var packetRate = packetsNow - packetsBefore;
 
         var currentLoss = now.stat('packetsLost');
+        if(!currentLoss || currentLoss < 0)
+            currentLoss = 0;
         var previousLoss = before.stat('packetsLost');
+        if(!previousLoss || previousLoss < 0)
+            previousLoss = 0;
         var lossRate = currentLoss - previousLoss;
-
+        if(lossRate < 0)
+            lossRate = 0;
         var packetsTotal = (packetRate + lossRate);
 
         jidStats.setSsrcLoss(ssrc, {"packetsTotal": packetsTotal, "packetsLost": lossRate,
@@ -308,7 +321,6 @@ StatsCollector.prototype.processStatsReport = function () {
         if(!jidStats.resolution)
             jidStats.resolution = null;
 
-        console.log(jid + " - resolution: " + resolution.height + "x" + resolution.width);
         if(resolution.height && resolution.width)
         {
             if(!jidStats.resolution)

videolayout.js

@@ -1152,6 +1152,7 @@ var VideoLayout = (function (my) {
 //        <li><a href="#">Mute</a></li>
 //        <li><a href="#">Eject</a></li>
 //        </ul>
+
         var popupmenuElement = document.createElement('ul');
         popupmenuElement.className = 'popupmenu';
         popupmenuElement.id
@@ -1570,11 +1571,11 @@ var VideoLayout = (function (my) {
             resolution = resolutionValue.width + "x" + resolutionValue.height;
         }
 
-        var result = "<span class='jitsipopover_blue'>Bitrate:</span> <span class='jitsipopover_green'>&darr;</span>" +
+        var result = "<table style='width:100%'><tr><td><span class='jitsipopover_blue'>Bitrate:</span></td><td><span class='jitsipopover_green'>&darr;</span>" +
             downloadBitrate + " <span class='jitsipopover_orange'>&uarr;</span>" +
-            uploadBitrate + "<br />" +
-            "<span class='jitsipopover_blue'>Packet loss: </span>" + packetLoss  + "<br />" +
-            "<span class='jitsipopover_blue'>Resolution:</span> " + resolution + "<br />";
+            uploadBitrate + "</td></tr><tr><td>" +
+            "<tr><td><span class='jitsipopover_blue'>Packet loss: </span></td><td>" + packetLoss  + "</td></tr><tr><td>" +
+            "<span class='jitsipopover_blue'>Resolution:</span></td><td>" + resolution + "</td></tr></table>";
 
         if(this.videoContainer.id == "localVideoContainer")
             result += "<div class=\"jitsipopover_showmore\" onclick = \"VideoLayout.connectionIndicators['" +
@@ -1596,34 +1597,45 @@ var VideoLayout = (function (my) {
 
             if(!this.transport || this.transport.length === 0)
             {
-                transport = "<span class='jitsipopover_blue'>Address:</span> N/A";
+                transport = "<tr><td><span class='jitsipopover_blue'>Address:</span></td><td> N/A</td></tr>";
             }
             else
             {
-                transport = "<span class='jitsipopover_blue'>Address:</span> " + this.transport[0].ip.substring(0,this.transport[0].ip.indexOf(":")) + "<br />";
+                var localTransport = "<tr><td><span class='jitsipopover_blue'>Local address: </span></td><td> " +
+                    this.transport[0].localip.substring(0,this.transport[0].localip.indexOf(":")) + "</td></tr>"
+                transport = "<tr><td><span class='jitsipopover_blue'>Remote address:</span></td><td> " +
+                    this.transport[0].ip.substring(0,this.transport[0].ip.indexOf(":")) + "</td></tr>";
                 if(this.transport.length > 1)
                 {
-                    transport += "<span class='jitsipopover_blue'>Ports:</span> ";
+                    transport += "<tr><td><span class='jitsipopover_blue'>Remote ports:</span></td><td>";
+                    localTransport += "<tr><td><span class='jitsipopover_blue'>Local ports:</span></td><td>";
                 }
                 else
                 {
-                    transport += "<span class='jitsipopover_blue'>Port:</span> ";
+                    transport += "<tr><td><span class='jitsipopover_blue'>Remote port:</span></td><td>";
+                    localTransport += "<tr><td><span class='jitsipopover_blue'>Local port:</span></td><td>";
                 }
                 for(var i = 0; i < this.transport.length; i++)
                 {
                     transport += ((i !== 0)? ", " : "") +
                         this.transport[i].ip.substring(this.transport[i].ip.indexOf(":")+1,
                                 this.transport[i].ip.length);
+                    localTransport += ((i !== 0)? ", " : "") +
+                        this.transport[i].localip.substring(this.transport[i].localip.indexOf(":")+1,
+                            this.transport[i].localip.length);
                 }
-                transport += "<br /><span class='jitsipopover_blue'>Transport:</span> " + this.transport[0].type + "<br />";
+                transport += "</td></tr>";
+                transport += localTransport + "</td></tr>";
+                transport +="<tr><td><span class='jitsipopover_blue'>Transport:</span></td><td>" + this.transport[0].type + "</td></tr>";
+
             }
 
-            result += "<span class='jitsipopover_blue'>Estimated bandwidth:</span> " +
+            result += "<table  style='width:100%'><tr><td><span class='jitsipopover_blue'>Estimated bandwidth:</span> </td><td>" +
                 "<span class='jitsipopover_green'>&darr;</span>" + downloadBandwidth +
                 " <span class='jitsipopover_orange'>&uarr;</span>" +
-                uploadBandwidth + "<br />";
+                uploadBandwidth + "</td></tr>";
 
-            result += transport;
+            result += transport + "</table>";
 
         }