haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(connection-stats) fix rendering codec information 

Ref: https://github.com/jitsi/lib-jitsi-meet/pull/2143
This commit is contained in:
Saúl Ibarra Corretgé 2022-10-28 22:24:44 +02:00 committed by Saúl Ibarra Corretgé
parent 6e3b3879cc
commit f5fc524030
6 changed files with 57 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
react/features/base/tracks/functions.ts
View File

@ -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.
*

37
react/features/connection-indicator/components/AbstractConnectionIndicator.js
View File

@ -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);
}

5
react/features/connection-indicator/components/web/ConnectionIndicator.tsx
View File

@ -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)(

19
react/features/connection-indicator/components/web/ConnectionIndicatorContent.js
View File

@ -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) {

74
react/features/connection-stats/components/ConnectionStatsTable.tsx
View File

@ -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;
const { codec, t } = this.props;
if (!codec) {
return;
}
let codecString = 'N/A';
let codecString;
if (codec) {
const audioCodecs = Object.values(codec)
.map(c => c.audio)
.filter(Boolean);
const videoCodecs = Object.values(codec)
.map(c => c.video)
.filter(Boolean);
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}`;
});
}
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');

90
react/features/video-menu/components/native/ConnectionStatusComponent.js
View File

@ -3,7 +3,6 @@ import { Text, View } from 'react-native';
import { withTheme } from 'react-native-paper';
import { Avatar } from '../../../base/avatar';
import { getSourceNameSignalingFeatureFlag } from '../../../base/config';
import { BottomSheet, hideSheet } from '../../../base/dialog';
import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
import { translate } from '../../../base/i18n';
@ -11,7 +10,6 @@ import { IconArrowDownLarge, IconArrowUpLarge } from '../../../base/icons';
import { getParticipantDisplayName } from '../../../base/participants';
import { BaseIndicator } from '../../../base/react';
import { connect } from '../../../base/redux';
import { getSourceNameByParticipantId } from '../../../base/tracks';
import statsEmitter from '../../../connection-indicator/statsEmitter';
import styles from './styles';
@ -57,17 +55,7 @@ export type Props = {
/**
* Theme used for styles.
*/
theme: Object,
/**
* The source name of the track.
*/
_sourceName: string,
/**
* Whether source name signaling is enabled.
*/
_sourceNameSignalingEnabled: boolean
theme: Object
}
/**
@ -209,13 +197,7 @@ class ConnectionStatusComponent extends Component<Props, State> {
* 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);
}
/**
@ -231,15 +213,6 @@ class ConnectionStatusComponent extends Component<Props, State> {
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;
@ -294,24 +267,18 @@ class ConnectionStatusComponent extends Component<Props, State> {
*/
_extractResolutionString(stats) {
const { framerate, resolution } = stats;
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];
const resolutionString = Object.keys(resolution || {})
.map(ssrc => {
const { width, height } = resolution[ssrc];
return `${width}x${height}`;
})
.join(', ') || null;
return `${width}x${height}`;
})
.join(', ') || null;
frameRateString = Object.keys(framerate || {})
.map(ssrc => framerate[ssrc])
.join(', ') || null;
}
const frameRateString = Object.keys(framerate || {})
.map(ssrc => framerate[ssrc])
.join(', ') || null;
return resolutionString && frameRateString ? `${resolutionString}@${frameRateString}fps` : undefined;
}
@ -361,21 +328,20 @@ class ConnectionStatusComponent extends Component<Props, State> {
let codecString;
if (this.props._sourceNameSignalingEnabled) {
if (codec) {
codecString = `${codec.audio}, ${codec.video}`;
if (codec) {
const audioCodecs = Object.values(codec)
.map(c => c.audio)
.filter(Boolean);
const videoCodecs = Object.values(codec)
.map(c => c.video)
.filter(Boolean);
if (audioCodecs.length || videoCodecs.length) {
// Use a Set to eliminate duplicates.
codecString = Array.from(new Set([ ...audioCodecs, ...videoCodecs ])).join(', ');
}
} 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}`;
});
}
return codecString;
}
@ -403,13 +369,7 @@ class ConnectionStatusComponent extends Component<Props, State> {
* @returns {boolean}
*/
_onCancel() {
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);
this.props.dispatch(hideSheet());
}
@ -450,9 +410,7 @@ function _mapStateToProps(state, ownProps) {
const { participantID } = ownProps;
return {
_participantDisplayName: getParticipantDisplayName(state, participantID),
_sourceNameSignalingEnabled: getSourceNameSignalingFeatureFlag(state),
_sourceName: getSourceNameByParticipantId(state, ownProps.participantId)
_participantDisplayName: getParticipantDisplayName(state, participantID)
};
}