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.
2018-09-17 13:21:03 -05:00 · 2018-09-17 13:21:03 -05:00 · d051d3450d
parent 7c88de20fe
commit d051d3450d
6 changed files with 103 additions and 26 deletions
--- a/lang/main.json
+++ b/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:",
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/react/features/connection-indicator/components/ConnectionIndicator.js
+++ b/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 } />
        );
--- a/react/features/connection-indicator/statsEmitter.js
+++ b/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 = {};

--- a/react/features/connection-stats/components/ConnectionStatsTable.js
+++ b/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>
        );