fix(connection-stats) fix rendering codec information

Ref: jitsi/lib-jitsi-meet#2143
chipechop · Nov 1, 2022 · f5fc524 · f5fc524
1 parent 6e3b387
commit f5fc524
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 186 deletions.
diff --git a/react/features/base/tracks/functions.ts b/react/features/base/tracks/functions.ts
@@ -9,7 +9,6 @@ import JitsiMeetJS, { JitsiTrackErrors, browser } from '../lib-jitsi-meet';
 import { setAudioMuted } from '../media/actions';
 import { MEDIA_TYPE, MediaType, VIDEO_TYPE } from '../media/constants';
 import {
-    getParticipantByIdOrUndefined,
     getVirtualScreenshareParticipantOwnerId,
     isScreenShareParticipant
 } from '../participants/functions';
@@ -445,20 +444,6 @@ export function getVideoTrackByParticipant(
     return getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, participant.id);
 }
 
-/**
- * Returns source name for specified participant id.
- *
- * @param {IReduxState} state - The Redux state.
- * @param {string} participantId - Participant ID.
- * @returns {string | undefined}
- */
-export function getSourceNameByParticipantId(state: IReduxState, participantId: string) {
-    const participant = getParticipantByIdOrUndefined(state, participantId);
-    const track = getVideoTrackByParticipant(state, participant);
-
-    return track?.jitsiTrack?.getSourceName();
-}
-
 /**
  * Returns track of specified media type for specified participant id.
  *

diff --git a/react/features/connection-indicator/components/AbstractConnectionIndicator.js b/react/features/connection-indicator/components/AbstractConnectionIndicator.js
@@ -35,17 +35,7 @@ export type Props = {
     /**
      * Custom icon style.
      */
-    iconStyle?: Object,
-
-    /**
-     * The source name of the track.
-     */
-    _sourceName: string,
-
-    /**
-     * The flag whether source name signaling is enabled.
-     */
-    _sourceNameSignalingEnabled: string
+    iconStyle?: Object
 };
 
 /**
@@ -100,13 +90,7 @@ class AbstractConnectionIndicator<P: Props, S: State> extends Component<P, S> {
      * returns {void}
      */
     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);
     }
 
     /**
@@ -122,15 +106,6 @@ class AbstractConnectionIndicator<P: Props, S: State> extends Component<P, S> {
             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);
-            }
-        }
     }
 
     /**
@@ -141,13 +116,7 @@ class AbstractConnectionIndicator<P: Props, S: State> extends Component<P, S> {
      * @returns {void}
      */
     componentWillUnmount() {
-        statsEmitter.unsubscribeToClientStats(
-            this.props.participantId, this._onStatsUpdated);
-
-        if (this.props._sourceNameSignalingEnabled) {
-            statsEmitter.unsubscribeToClientStats(
-                this.props._sourceName, this._onStatsUpdated);
-        }
+        statsEmitter.unsubscribeToClientStats(this.props.participantId, this._onStatsUpdated);
 
         clearTimeout(this.autoHideTimeout);
     }

diff --git a/react/features/connection-indicator/components/web/ConnectionIndicator.tsx b/react/features/connection-indicator/components/web/ConnectionIndicator.tsx
@@ -18,7 +18,6 @@ import {
 } from '../../../base/participants/functions';
 import Popover from '../../../base/popover/components/Popover.web';
 import {
-    getSourceNameByParticipantId,
     getTrackByMediaTypeAndParticipant,
     getVirtualScreenshareParticipantTrack
 } from '../../../base/tracks/functions';
@@ -420,9 +419,7 @@ export function _mapStateToProps(state: IReduxState, ownProps: Props) {
         _popoverDisabled: state['features/base/config'].connectionIndicators?.disableDetails,
         _videoTrack: firstVideoTrack,
         _isConnectionStatusInactive,
-        _isConnectionStatusInterrupted,
-        _sourceName: getSourceNameByParticipantId(state, participantId),
-        _sourceNameSignalingEnabled: sourceNameSignalingEnabled
+        _isConnectionStatusInterrupted
     };
 }
 export default translate(connect(_mapStateToProps)(

diff --git a/react/features/connection-indicator/components/web/ConnectionIndicatorContent.js b/react/features/connection-indicator/components/web/ConnectionIndicatorContent.js
@@ -8,7 +8,7 @@ import { translate } from '../../../base/i18n';
 import { MEDIA_TYPE } from '../../../base/media';
 import { getLocalParticipant, getParticipantById, isScreenShareParticipant } from '../../../base/participants';
 import { connect } from '../../../base/redux';
-import { getSourceNameByParticipantId, getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
+import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
 import { ConnectionStatsTable } from '../../../connection-stats';
 import { saveLogs } from '../../actions';
 import {
@@ -131,17 +131,7 @@ type Props = AbstractProps & {
     /**
      * Invoked to obtain translated strings.
      */
-    t: Function,
-
-    /**
-     * The source name of the track.
-     */
-    _sourceName: string,
-
-    /**
-     * Whether source name signaling is enabled.
-     */
-    _sourceNameSignalingEnabled: boolean
+    t: Function
 };
 
 /**
@@ -224,7 +214,6 @@ class ConnectionIndicatorContent extends AbstractConnectionIndicator<Props, Stat
                 resolution = { resolution }
                 serverRegion = { serverRegion }
                 shouldShowMore = { this.state.showMoreStats }
-                sourceNameSignalingEnabled = { this.props._sourceNameSignalingEnabled }
                 transport = { transport }
                 videoSsrc = { this.props._videoSsrc } />
         );
@@ -354,9 +343,7 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
         _isConnectionStatusInterrupted,
         _isVirtualScreenshareParticipant: sourceNameSignalingEnabled && isScreenShareParticipant(participant),
         _isLocalVideo: participant?.local,
-        _region: participant?.region,
-        _sourceName: getSourceNameByParticipantId(state, participantId),
-        _sourceNameSignalingEnabled: sourceNameSignalingEnabled
+        _region: participant?.region
     };
 
     if (conference) {

diff --git a/react/features/connection-stats/components/ConnectionStatsTable.tsx b/react/features/connection-stats/components/ConnectionStatsTable.tsx
@@ -58,8 +58,8 @@ interface IProps extends WithTranslation {
      */
     codec: {
         [key: string]: {
-            audio: string;
-            video: string;
+            audio: string | undefined;
+            video: string | undefined;
         };
     };
 
@@ -158,11 +158,6 @@ interface IProps extends WithTranslation {
      */
     shouldShowMore: boolean;
 
-    /**
-     * Whether source name signaling is enabled.
-     */
-    sourceNameSignalingEnabled: boolean;
-
     /**
      * Statistics related to transports.
      */
@@ -465,28 +460,22 @@ class ConnectionStatsTable extends Component<IProps> {
      * @returns {ReactElement}
      */
     _renderCodecs() {
-        const { codec, t, sourceNameSignalingEnabled } = this.props;
-
-        if (!codec) {
-            return;
-        }
+        const { codec, t } = this.props;
 
-        let codecString;
+        let codecString = 'N/A';
 
-        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];
+        if (codec) {
+            const audioCodecs = Object.values(codec)
+                .map(c => c.audio)
+                .filter(Boolean);
+            const videoCodecs = Object.values(codec)
+                .map(c => c.video)
+                .filter(Boolean);
 
-                    codecString = `${audio}, ${video}`;
-                });
-        }
-
-        if (!codecString) {
-            codecString = 'N/A';
+            if (audioCodecs.length || videoCodecs.length) {
+                // Use a Set to eliminate duplicates.
+                codecString = Array.from(new Set([ ...audioCodecs, ...videoCodecs ])).join(', ');
+            }
         }
 
         return (
@@ -583,17 +572,11 @@ class ConnectionStatsTable extends Component<IProps> {
      * @returns {ReactElement}
      */
     _renderFrameRate() {
-        const { framerate, t, sourceNameSignalingEnabled } = this.props;
+        const { framerate, t } = this.props;
 
-        let frameRateString;
-
-        if (sourceNameSignalingEnabled) {
-            frameRateString = framerate || 'N/A';
-        } else {
-            frameRateString = Object.keys(framerate || {})
-                .map(ssrc => framerate[ssrc as keyof typeof framerate])
-                .join(', ') || 'N/A';
-        }
+        const frameRateString = Object.keys(framerate || {})
+            .map(ssrc => framerate[ssrc as keyof typeof framerate])
+            .join(', ') || 'N/A';
 
         return (
             <tr>
@@ -655,20 +638,15 @@ class ConnectionStatsTable extends Component<IProps> {
      * @returns {ReactElement}
      */
     _renderResolution() {
-        const { resolution, maxEnabledResolution, t, sourceNameSignalingEnabled } = this.props;
-        let resolutionString;
+        const { resolution, maxEnabledResolution, t } = this.props;
 
-        if (sourceNameSignalingEnabled) {
-            resolutionString = resolution ? `${resolution.width}x${resolution.height}` : 'N/A';
-        } else {
-            resolutionString = Object.keys(resolution || {})
-                .map(ssrc => {
-                    const { width, height } = resolution[ssrc];
+        let resolutionString = Object.keys(resolution || {})
+            .map(ssrc => {
+                const { width, height } = resolution[ssrc];
 
-                    return `${width}x${height}`;
-                })
-                .join(', ') || 'N/A';
-        }
+                return `${width}x${height}`;
+            })
+            .join(', ') || 'N/A';
 
         if (maxEnabledResolution && maxEnabledResolution < 720) {
             const maxEnabledResolutionTitle = t('connectionindicator.maxEnabledResolution');