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 1ac6df97e3aa5ff880129a95754d491d89ea8c25.

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,12 +238,8 @@ class ConnectionStatsTable extends Component {
      * @private
      */
     _renderE2eRtt() {
-        const { e2eRtt, region, t } = this.props;
-        let str = e2eRtt ? `${e2eRtt.toFixed(0)}ms` : 'N/A';
-
-        if (region) {
-            str += ` (${region})`;
-        }
+        const { e2eRtt, t } = this.props;
+        const str = e2eRtt ? `${e2eRtt.toFixed(0)}ms` : 'N/A';
 
         return (
             <tr>
@@ -243,6 +251,61 @@ class ConnectionStatsTable extends Component {
         );
     }
 
+    /**
+     * 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.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>
         );