Displays the region participants are connected to (#3451)

* feat: Displays the server region in the stats panels.

* feat: Displays the server count in the local stats panel.

* ref: Renames a variable.

* fix: Makes bridgeCount a number, clarifies docs.

* chore: Updates lib-jitsi-meet to 1ac6df97e3.

lang/main.json

@@ -207,7 +207,9 @@
     "connectionindicator":
     {
         "header": "Connection data",
+        "connectedTo": "Connected to:",
         "bitrate": "Bitrate:",
+        "bridgeCount": "Server count: ",
         "packetloss": "Packet loss:",
         "resolution": "Resolution:",
         "framerate": "Frame rate:",

package-lock.json

@@ -9318,8 +9318,8 @@
       }
     },
     "lib-jitsi-meet": {
-      "version": "github:jitsi/lib-jitsi-meet#3f46c64f4f373d3b573fcc55b59568dbe9b9d51f",
-      "from": "github:jitsi/lib-jitsi-meet#3f46c64f4f373d3b573fcc55b59568dbe9b9d51f",
+      "version": "github:jitsi/lib-jitsi-meet#1ac6df97e3aa5ff880129a95754d491d89ea8c25",
+      "from": "github:jitsi/lib-jitsi-meet#1ac6df97e3aa5ff880129a95754d491d89ea8c25",
       "requires": {
         "@jitsi/sdp-interop": "0.1.13",
         "@jitsi/sdp-simulcast": "0.2.1",
@@ -9327,6 +9327,7 @@
         "current-executing-script": "0.1.3",
         "jitsi-meet-logger": "github:jitsi/jitsi-meet-logger#6fff754a77a56ab52499f3559105a15886942a1e",
         "js-utils": "github:jitsi/js-utils#d4b78721b754a15c2588b7b0c621a9fff6fa1363",
+        "lodash.isequal": "4.5.0",
         "react-native-callstats": "3.53.4",
         "sdp-transform": "2.3.0",
         "strophe.js": "1.2.15",
@@ -9410,6 +9411,11 @@
       "integrity": "sha1-9HGh2khr5g9quVXRcRVSPdHSVdU=",
       "dev": true
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -12879,9 +12885,9 @@
       "integrity": "sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw=="
     },
     "rtcpeerconnection-shim": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.13.tgz",
-      "integrity": "sha512-Xz4zQLZNs9lFBvqbaHGIjLWtyZ1V82ec5r+WNEo7NlIx3zF5M3ytn9mkkfYeZmpE032cNg3Vvf0rP8kNXUNd9w==",
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.14.tgz",
+      "integrity": "sha512-/sl1vgarkFPU2rbXy+EMmytMQIzCKNbIm3fChjPnsdytKAROgoivB0KLE7PQRjKx/d/nr/Yx+6qu0/eCpoxn/A==",
       "requires": {
         "sdp": "^2.6.0"
       }
@@ -13940,9 +13946,9 @@
       }
     },
     "sdp": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.8.0.tgz",
-      "integrity": "sha512-wRSES07rAwKWAR7aev9UuClT7kdf9ZTdeUK5gTgHue9vlhs19Fbm3ccNEGJO4y2IitH4/JzS4sdzyPl6H2KQLw=="
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.9.0.tgz",
+      "integrity": "sha512-XAVZQO4qsfzVTHorF49zCpkdxiGmPNjA8ps8RcJGtGP3QJ/A8I9/SVg/QnkAFDMXIyGbHZBBFwYBw6WdnhT96w=="
     },
     "sdp-transform": {
       "version": "2.3.0",

package.json

@@ -49,7 +49,7 @@
     "jsc-android": "224109.1.0",
     "jsrsasign": "8.0.12",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#3f46c64f4f373d3b573fcc55b59568dbe9b9d51f",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#1ac6df97e3aa5ff880129a95754d491d89ea8c25",
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
     "lodash": "4.17.4",
     "moment": "2.19.4",

react/features/connection-indicator/components/ConnectionIndicator.js

@@ -410,11 +410,13 @@ class ConnectionIndicator extends Component {
         const {
             bandwidth,
             bitrate,
+            bridgeCount,
             e2eRtt,
             framerate,
             packetLoss,
             region,
             resolution,
+            serverRegion,
             transport
         } = this.state.stats;
 
@@ -422,6 +424,7 @@ class ConnectionIndicator extends Component {
             <ConnectionStatsTable
                 bandwidth = { bandwidth }
                 bitrate = { bitrate }
+                bridgeCount = { bridgeCount }
                 connectionSummary = { this._getConnectionStatusTip() }
                 e2eRtt = { e2eRtt }
                 framerate = { framerate }
@@ -430,6 +433,7 @@ class ConnectionIndicator extends Component {
                 packetLoss = { packetLoss }
                 region = { region }
                 resolution = { resolution }
+                serverRegion = { serverRegion }
                 shouldShowMore = { this.state.showMoreStats }
                 transport = { transport } />
         );

react/features/connection-indicator/statsEmitter.js

@@ -116,25 +116,25 @@ const statsEmitter = {
      * also update listeners of remote user stats of changes related to their
      * stats.
      *
-     * @param {string} currentUserId - The user id for the local user.
+     * @param {string} localUserId - The user id for the local user.
      * @param {Object} stats - Connection stats for the local user as provided
      * by the library.
      * @returns {void}
      */
-    _onStatsUpdated(currentUserId: string, stats: Object) {
+    _onStatsUpdated(localUserId: string, stats: Object) {
         const allUserFramerates = stats.framerate || {};
         const allUserResolutions = stats.resolution || {};
 
-        // FIXME resolution and framerate are hashes keyed off of user ids with
+        // FIXME resolution and framerate are maps keyed off of user ids with
         // stat values. Receivers of stats expect resolution and framerate to
-        // be primatives, not hashes, so overwrites the 'lib-jitsi-meet' stats
-        // objects.
+        // be primitives, not maps, so here we override the 'lib-jitsi-meet'
+        // stats objects.
         const modifiedLocalStats = Object.assign({}, stats, {
-            framerate: allUserFramerates[currentUserId],
-            resolution: allUserResolutions[currentUserId]
+            framerate: allUserFramerates[localUserId],
+            resolution: allUserResolutions[localUserId]
         });
 
-        this._emitStatsUpdate(currentUserId, modifiedLocalStats);
+        this._emitStatsUpdate(localUserId, modifiedLocalStats);
 
         // Get all the unique user ids from the framerate and resolution stats
         // and update remote user stats as needed.
@@ -142,7 +142,7 @@ const statsEmitter = {
         const resolutionUserIds = Object.keys(allUserResolutions);
 
         _.union(framerateUserIds, resolutionUserIds)
-            .filter(id => id !== currentUserId)
+            .filter(id => id !== localUserId)
             .forEach(id => {
                 const remoteUserStats = {};
 

react/features/connection-stats/components/ConnectionStatsTable.js

@@ -33,6 +33,12 @@ class ConnectionStatsTable extends Component {
          */
         bitrate: PropTypes.object,
 
+        /**
+         * The number of bridges (aka media servers) currently used in the
+         * conference.
+         */
+        bridgeCount: PropTypes.number,
+
         /**
          * A message describing the connection quality.
          */
@@ -71,7 +77,7 @@ class ConnectionStatsTable extends Component {
         packetLoss: PropTypes.object,
 
         /**
-         * The region.
+         * The region that we think the client is in.
          */
         region: PropTypes.string,
 
@@ -86,6 +92,11 @@ class ConnectionStatsTable extends Component {
          */
         resolution: PropTypes.object,
 
+        /**
+         * The region of the media server that we are connected to.
+         */
+        serverRegion: PropTypes.string,
+
         /**
          * Whether or not additional stats about bandwidth and transport should
          * be displayed. Will not display even if true for remote participants.
@@ -124,7 +135,7 @@ class ConnectionStatsTable extends Component {
 
     /**
      * Creates a table as ReactElement that will display additional statistics
-     * related to bandwidth and transport.
+     * related to bandwidth and transport for the local user.
      *
      * @private
      * @returns {ReactElement}
@@ -135,6 +146,7 @@ class ConnectionStatsTable extends Component {
                 <tbody>
                     { this._renderBandwidth() }
                     { this._renderTransport() }
+                    { this._renderRegion() }
                 </tbody>
             </table>
         );
@@ -226,23 +238,74 @@ class ConnectionStatsTable extends Component {
      * @private
      */
     _renderE2eRtt() {
-        const { e2eRtt, region, t } = this.props;
-        let str = e2eRtt ? `${e2eRtt.toFixed(0)}ms` : 'N/A';
+        const { e2eRtt, t } = this.props;
+        const str = e2eRtt ? `${e2eRtt.toFixed(0)}ms` : 'N/A';
 
-        if (region) {
-            str += ` (${region})`;
+        return (
+            <tr>
+                <td>
+                    <span>{ t('connectionindicator.e2e_rtt') }</span>
+                </td>
+                <td>{ str }</td>
+            </tr>
+        );
+    }
+
+    /**
+     * Creates a table row as a ReactElement for displaying the "connected to"
+     * information.
+     *
+     * @returns {ReactElement}
+     * @private
+     */
+    _renderRegion() {
+        const { region, serverRegion, t } = this.props;
+        let str = serverRegion;
+
+        if (!serverRegion) {
+            return;
+        }
+
+
+        if (region && serverRegion && region !== serverRegion) {
+            str += ` from ${region}`;
         }
 
         return (
             <tr>
                 <td>
-                    <span>{ t('connectionindicator.e2e_rtt') }</span>
+                    <span>{ t('connectionindicator.connectedTo') }</span>
                 </td>
                 <td>{ str }</td>
             </tr>
         );
     }
 
+    /**
+     * Creates a table row as a ReactElement for displaying the "bridge count"
+     * information.
+     *
+     * @returns {*}
+     * @private
+     */
+    _renderBridgeCount() {
+        const { bridgeCount, t } = this.props;
+
+        // 0 is valid, but undefined/null/NaN aren't.
+        if (!bridgeCount && bridgeCount !== 0) {
+            return;
+        }
+
+        return (
+            <tr>
+                <td>
+                    <span>{ t('connectionindicator.bridgeCount') }</span>
+                </td>
+                <td>{ bridgeCount }</td>
+            </tr>
+        );
+    }
+
     /**
      * Creates a table row as a ReactElement for displaying frame rate related
      * statistics.
@@ -373,8 +436,10 @@ class ConnectionStatsTable extends Component {
                     { this._renderBitrate() }
                     { this._renderPacketLoss() }
                     { isRemoteVideo ? this._renderE2eRtt() : null }
+                    { isRemoteVideo ? this._renderRegion() : null }
                     { this._renderResolution() }
                     { this._renderFrameRate() }
+                    { isRemoteVideo ? null : this._renderBridgeCount() }
                 </tbody>
             </table>
         );