feat: Exposes the max enabled resolution in the connection stats popover. (#7278)

* feat: Exposes the max enabled resolution in the connection stats popover.
* deps: lib-jitsi-meet@latest

lang/main.json

@@ -110,6 +110,7 @@
         "localaddress_plural": "Local addresses:",
         "localport": "Local port:",
         "localport_plural": "Local ports:",
+        "maxEnabledResolution": "send max",
         "more": "Show more",
         "packetloss": "Packet loss:",
         "quality": {

package.json

@@ -56,7 +56,7 @@
     "jquery-i18next": "1.2.1",
     "js-md5": "0.6.1",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#cd008d726f1f57562eb5d8e6a3cd91c7e69826a0",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#304b0a2b4e18216d792f499c74fc24bc3849303e",
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
     "lodash": "4.17.13",
     "moment": "2.19.4",

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

@@ -342,6 +342,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
             bridgeCount,
             e2eRtt,
             framerate,
+            maxEnabledResolution,
             packetLoss,
             region,
             resolution,
@@ -358,6 +359,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
                 e2eRtt = { e2eRtt }
                 framerate = { framerate }
                 isLocalVideo = { this.props.isLocalVideo }
+                maxEnabledResolution = { maxEnabledResolution }
                 onShowMore = { this._onToggleShowMore }
                 packetLoss = { packetLoss }
                 region = { region }

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

@@ -57,6 +57,12 @@ type Props = {
      */
     isLocalVideo: boolean,
 
+    /**
+     * The send-side max enabled resolution (aka the highest layer that is not
+     * suspended on the send-side).
+     */
+    maxEnabledResolution: number,
+
     /**
      * Callback to invoke when the show additional stats link is clicked.
      */
@@ -380,8 +386,8 @@ class ConnectionStatsTable extends Component<Props> {
      * @returns {ReactElement}
      */
     _renderResolution() {
-        const { resolution, t } = this.props;
+        const { resolution, maxEnabledResolution, t } = this.props;
-        const resolutionString = Object.keys(resolution || {})
+        let resolutionString = Object.keys(resolution || {})
             .map(ssrc => {
                 const { width, height } = resolution[ssrc];
 
@@ -389,6 +395,12 @@ class ConnectionStatsTable extends Component<Props> {
             })
             .join(', ') || 'N/A';
 
+        if (maxEnabledResolution && maxEnabledResolution < 720) {
+            const maxEnabledResolutionTitle = t('connectionindicator.maxEnabledResolution');
+
+            resolutionString += ` (${maxEnabledResolutionTitle} ${maxEnabledResolution}p)`;
+        }
+
         return (
             <tr>
                 <td>