Displays the region participants are connected to

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.json

@@ -50,7 +50,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,18 +410,21 @@ class ConnectionIndicator extends Component {
         const {
             bandwidth,
             bitrate,
+            bridgeCount,
             e2eRtt,
             framerate,
             packetLoss,
             region,
             resolution,
+            serverRegion,
             transport
         } = this.state.stats;
 
         return (
             <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,33 +116,33 @@ 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.
         const framerateUserIds = Object.keys(allUserFramerates);
         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>
         );