Adds frame rate to statistics bubble.

lang/main.json

@@ -177,6 +177,7 @@
         "bitrate": "Bitrate:",
         "packetloss": "Packet loss:",
         "resolution": "Resolution:",
+        "framerate": "Frame rate:",
         "less": "Show less",
         "more": "Show more",
         "address": "Address:",

modules/UI/videolayout/ConnectionIndicator.js

@@ -36,6 +36,7 @@ function ConnectionIndicator(videoContainer, videoId) {
     this.resolution = null;
     this.isResolutionHD = null;
     this.transport = [];
+    this.framerate = null;
     this.popover = null;
     this.id = videoId;
     this.create();
@@ -88,12 +89,17 @@ ConnectionIndicator.prototype.generateText = function () {
     }
 
     // GENERATE RESOLUTIONS STRING
-    let resolutions = this.resolution || {};
-    let resolutionStr = Object.keys(resolutions).map(function (ssrc) {
+    const resolutions = this.resolution || {};
+    const resolutionStr = Object.keys(resolutions).map(ssrc => {
         let {width, height} = resolutions[ssrc];
         return `${width}x${height}`;
     }).join(', ') || 'N/A';
 
+    const framerates = this.framerate || {};
+    const frameRateStr = Object.keys(framerates).map(ssrc =>
+        framerates[ssrc]
+    ).join(', ') || 'N/A';
+
     let result = (
         `<table class="connection-info__container" style='width:100%'>
             <tr>
@@ -119,6 +125,14 @@ ConnectionIndicator.prototype.generateText = function () {
                     ${resolutionStr}
                 </td>
             </tr>
+            <tr>
+                <td>
+                    <span data-i18n='connectionindicator.framerate'></span>
+                </td>
+                <td>
+                    ${frameRateStr}
+                </td>
+            </tr>
         </table>`);
 
     if(this.videoContainer.videoSpanId == "localVideoContainer") {
@@ -371,6 +385,8 @@ ConnectionIndicator.prototype.updateConnectionQuality =
         if (object.resolution) {
             this.resolution = object.resolution;
         }
+        if (object.framerate)
+            this.framerate = object.framerate;
     }
 
     let width = qualityToWidth.find(x => percent >= x.percent);

modules/UI/videolayout/VideoLayout.js

@@ -857,9 +857,10 @@ var VideoLayout = {
      * @param object
      */
     updateLocalConnectionStats (percent, object) {
-        let resolutions = object.resolution;
+        const { framerates, resolutions } = object;
 
         object.resolution = resolutions[APP.conference.getMyUserId()];
+        object.framerate = framerates[APP.conference.getMyUserId()];
         localVideoThumbnail.updateStatsIndicator(percent, object);
 
         Object.keys(resolutions).forEach(function (id) {