fix(stats) split stats for camera and screenshare in multi-stream mode (#11475)

* no ssrc when sourceNameSignalingEnabled
* conditionally use source name for stats
* update doc
* always subscribe to participant id

react/features/base/tracks/functions.js

 import { isMobileBrowser } from '../environment/utils';
 import JitsiMeetJS, { JitsiTrackErrors, browser } from '../lib-jitsi-meet';
 import { MEDIA_TYPE, VIDEO_TYPE, setAudioMuted } from '../media';
-import { getVirtualScreenshareParticipantOwnerId } from '../participants';
+import { getParticipantByIdOrUndefined, getVirtualScreenshareParticipantOwnerId } from '../participants';
 import { toState } from '../redux';
 import {
     getUserSelectedCameraDeviceId,
     return getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, participant.id);
 }
 
+/**
+ * Returns source name for specified participant id.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {string} participantId - Participant ID.
+ * @returns {string | undefined}
+ */
+export function getSourceNameByParticipantId(state, participantId) {
+    const participant = getParticipantByIdOrUndefined(state, participantId);
+    const tracks = state['features/base/tracks'];
+    const track = getVideoTrackByParticipant(tracks, participant);
+
+    return track?.jitsiTrack?.getSourceName();
+}
+
 /**
  * Returns track of specified media type for specified participant id.
  *

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

      * The ID of the participant associated with the displayed connection indication and
      * stats.
      */
-    participantId: string
+    participantId: string,
+
+    /**
+     * The source name of the track.
+     */
+    _sourceName: string,
+
+    /**
+     * The flag whether source name signaling is enabled.
+     */
+    _sourceNameSignalingEnabled: string
 };
 
 /**
     componentDidMount() {
         statsEmitter.subscribeToClientStats(
             this.props.participantId, this._onStatsUpdated);
+
+        if (this.props._sourceNameSignalingEnabled) {
+            statsEmitter.subscribeToClientStats(
+                this.props._sourceName, this._onStatsUpdated);
+        }
     }
 
     /**
             statsEmitter.subscribeToClientStats(
                 this.props.participantId, this._onStatsUpdated);
         }
+
+        if (this.props._sourceNameSignalingEnabled) {
+            if (prevProps._sourceName !== this.props._sourceName) {
+                statsEmitter.unsubscribeToClientStats(
+                    prevProps._sourceName, this._onStatsUpdated);
+                statsEmitter.subscribeToClientStats(
+                    this.props._sourceName, this._onStatsUpdated);
+            }
+        }
     }
 
     /**
         statsEmitter.unsubscribeToClientStats(
             this.props.participantId, this._onStatsUpdated);
 
+        if (this.props._sourceNameSignalingEnabled) {
+            statsEmitter.unsubscribeToClientStats(
+                this.props._sourceName, this._onStatsUpdated);
+        }
+
         clearTimeout(this.autoHideTimeout);
     }
 

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

 import { connect } from '../../../base/redux';
 import {
     getVirtualScreenshareParticipantTrack,
+    getSourceNameByParticipantId,
     getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
 import {
     isParticipantConnectionStatusInactive,
      * Invoked to obtain translated strings.
      */
     t: Function,
+
+    /**
+     * The source name of the track.
+     */
+    _sourceName: string,
+
+    /**
+     * Whether source name signaling is enabled.
+     */
+    _sourceNameSignalingEnabled: boolean
 };
 
 type State = AbstractState & {
         _popoverDisabled: state['features/base/config'].connectionIndicators?.disableDetails,
         _videoTrack: firstVideoTrack,
         _isConnectionStatusInactive,
-        _isConnectionStatusInterrupted
+        _isConnectionStatusInterrupted,
+        _sourceName: getSourceNameByParticipantId(state, participantId),
+        _sourceNameSignalingEnabled: sourceNameSignalingEnabled
     };
 }
 export default translate(connect(_mapStateToProps)(

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

 import { MEDIA_TYPE } from '../../../base/media';
 import { getLocalParticipant, getParticipantById } from '../../../base/participants';
 import { connect } from '../../../base/redux';
-import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
+import { getSourceNameByParticipantId, getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
 import { ConnectionStatsTable } from '../../../connection-stats';
 import { saveLogs } from '../../actions';
 import {
     /**
      * Invoked to obtain translated strings.
      */
-    t: Function
+    t: Function,
+
+    /**
+     * The source name of the track.
+     */
+    _sourceName: string,
+
+    /**
+     * Whether source name signaling is enabled.
+     */
+    _sourceNameSignalingEnabled: boolean
 };
 
 /**
                 resolution = { resolution }
                 serverRegion = { serverRegion }
                 shouldShowMore = { this.state.showMoreStats }
+                sourceNameSignalingEnabled = { this.props._sourceNameSignalingEnabled }
                 transport = { transport }
                 videoSsrc = { this.props._videoSsrc } />
         );
         _isConnectionStatusInterrupted,
         _isVirtualScreenshareParticipant: sourceNameSignalingEnabled && participant?.isVirtualScreenshareParticipant,
         _isLocalVideo: participant?.local,
-        _region: participant?.region
+        _region: participant?.region,
+        _sourceName: getSourceNameByParticipantId(state, participantId),
+        _sourceNameSignalingEnabled: sourceNameSignalingEnabled
     };
 
     if (conference) {

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

     /**
      * Statistics related to transports.
      */
-    transport: Array<Object>
+    transport: Array<Object>,
+
+    /**
+     * Whether source name signaling is enabled.
+     */
+    sourceNameSignalingEnabled: boolean
 };
 
 /**
      * @returns {ReactElement}
      */
     _renderCodecs() {
-        const { codec, t } = this.props;
+        const { codec, t, sourceNameSignalingEnabled } = this.props;
 
         if (!codec) {
             return;
 
         let codecString;
 
-        // Only report one codec, in case there are multiple for a user.
-        Object.keys(codec || {})
-            .forEach(ssrc => {
-                const { audio, video } = codec[ssrc];
+        if (sourceNameSignalingEnabled) {
+            codecString = `${codec.audio}, ${codec.video}`;
+        } else {
+            // Only report one codec, in case there are multiple for a user.
+            Object.keys(codec || {})
+                .forEach(ssrc => {
+                    const { audio, video } = codec[ssrc];
 
-                codecString = `${audio}, ${video}`;
-            });
+                    codecString = `${audio}, ${video}`;
+                });
+        }
 
         if (!codecString) {
             codecString = 'N/A';
      * @returns {ReactElement}
      */
     _renderFrameRate() {
-        const { framerate, t } = this.props;
-        const frameRateString = Object.keys(framerate || {})
-            .map(ssrc => framerate[ssrc])
-            .join(', ') || 'N/A';
+        const { framerate, t, sourceNameSignalingEnabled } = this.props;
+
+        let frameRateString;
+
+        if (sourceNameSignalingEnabled) {
+            frameRateString = framerate || 'N/A';
+        } else {
+            frameRateString = Object.keys(framerate || {})
+                .map(ssrc => framerate[ssrc])
+                .join(', ') || 'N/A';
+        }
 
         return (
             <tr>
      * @returns {ReactElement}
      */
     _renderResolution() {
-        const { resolution, maxEnabledResolution, t } = this.props;
-        let resolutionString = Object.keys(resolution || {})
-            .map(ssrc => {
-                const { width, height } = resolution[ssrc];
-
-                return `${width}x${height}`;
-            })
-            .join(', ') || 'N/A';
+        const { resolution, maxEnabledResolution, t, sourceNameSignalingEnabled } = this.props;
+        let resolutionString;
+
+        if (sourceNameSignalingEnabled) {
+            resolutionString = resolution ? `${resolution.width}x${resolution.height}` : 'N/A';
+        } else {
+            resolutionString = Object.keys(resolution || {})
+                .map(ssrc => {
+                    const { width, height } = resolution[ssrc];
+
+                    return `${width}x${height}`;
+                })
+                .join(', ') || 'N/A';
+        }
 
         if (maxEnabledResolution && maxEnabledResolution < 720) {
             const maxEnabledResolutionTitle = t('connectionindicator.maxEnabledResolution');

react/features/video-menu/components/native/ConnectionStatusComponent.js

 
 import { Avatar } from '../../../base/avatar';
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
+import { getSourceNameSignalingFeatureFlag } from '../../../base/config';
 import { BottomSheet, isDialogOpen, hideDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n';
 import { IconArrowDownLarge, IconArrowUpLarge } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { StyleType } from '../../../base/styles';
 import statsEmitter from '../../../connection-indicator/statsEmitter';
+import { getSourceNameByParticipantId } from '../../base/tracks';
 
 import styles from './styles';
 
     /**
      * Theme used for styles.
      */
-    theme: Object
+    theme: Object,
+
+    /**
+     * The source name of the track.
+     */
+     _sourceName: string,
+
+    /**
+     * Whether source name signaling is enabled.
+     */
+    _sourceNameSignalingEnabled: boolean
 }
 
 /**
     componentDidMount() {
         statsEmitter.subscribeToClientStats(
             this.props.participantID, this._onStatsUpdated);
+
+        if (this.props._sourceNameSignalingEnabled) {
+            statsEmitter.subscribeToClientStats(
+                this.props._sourceName, this._onStatsUpdated);
+        }
     }
 
     /**
             statsEmitter.subscribeToClientStats(
                 this.props.participantID, this._onStatsUpdated);
         }
+
+        if (this.props._sourceNameSignalingEnabled) {
+            if (prevProps._sourceName !== this.props._sourceName) {
+                statsEmitter.unsubscribeToClientStats(
+                    prevProps._sourceName, this._onStatsUpdated);
+                statsEmitter.subscribeToClientStats(
+                    this.props._sourceName, this._onStatsUpdated);
+            }
+        }
     }
 
     _onStatsUpdated: Object => void;
      */
     _extractResolutionString(stats) {
         const { framerate, resolution } = stats;
-
-        const resolutionString = Object.keys(resolution || {})
-        .map(ssrc => {
-            const { width, height } = resolution[ssrc];
-
-            return `${width}x${height}`;
-        })
-        .join(', ') || null;
-
-        const frameRateString = Object.keys(framerate || {})
-            .map(ssrc => framerate[ssrc])
-            .join(', ') || null;
+        let frameRateString, resolutionString;
+
+        if (this.props._sourceNameSignalingEnabled) {
+            resolutionString = resolution ? `${resolution.width}x${resolution.height}` : null;
+            frameRateString = framerate || null;
+        } else {
+            resolutionString = Object.keys(resolution || {})
+                .map(ssrc => {
+                    const { width, height } = resolution[ssrc];
+
+                    return `${width}x${height}`;
+                })
+                .join(', ') || null;
+
+            frameRateString = Object.keys(framerate || {})
+                .map(ssrc => framerate[ssrc])
+                .join(', ') || null;
+        }
 
         return resolutionString && frameRateString ? `${resolutionString}@${frameRateString}fps` : undefined;
     }
 
         let codecString;
 
-        // Only report one codec, in case there are multiple for a user.
-        Object.keys(codec || {})
-            .forEach(ssrc => {
-                const { audio, video } = codec[ssrc];
+        if (this.props._sourceNameSignalingEnabled) {
+            if (codec) {
+                codecString = `${codec.audio}, ${codec.video}`;
+            }
+        } else {
+            // Only report one codec, in case there are multiple for a user.
+            Object.keys(codec || {})
+                .forEach(ssrc => {
+                    const { audio, video } = codec[ssrc];
+
+                    codecString = `${audio}, ${video}`;
+                });
+        }
 
-                codecString = `${audio}, ${video}`;
-            });
 
         return codecString;
     }
         statsEmitter.unsubscribeToClientStats(
             this.props.participantID, this._onStatsUpdated);
 
+        if (this.props._sourceNameSignalingEnabled) {
+            statsEmitter.unsubscribeToClientStats(
+                this.props._sourceName, this._onStatsUpdated);
+        }
+
         if (this.props._isOpen) {
             this.props.dispatch(hideDialog(ConnectionStatusComponent_));
 
     return {
         _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
         _isOpen: isDialogOpen(state, ConnectionStatusComponent_),
-        _participantDisplayName: getParticipantDisplayName(state, participantID)
+        _participantDisplayName: getParticipantDisplayName(state, participantID),
+        _sourceNameSignalingEnabled: getSourceNameSignalingFeatureFlag(state),
+        _sourceName: getSourceNameByParticipantId(state, ownProps.participantId)
     };
 }