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

376 lines
11 KiB
JavaScript
Raw Normal View History

// @flow
import React from 'react';
import type { Dispatch } from 'redux';
import { getSourceNameSignalingFeatureFlag } from '../../../base/config';
import { translate } from '../../../base/i18n';
import { MEDIA_TYPE } from '../../../base/media';
import { getLocalParticipant, getParticipantById } from '../../../base/participants';
import { connect } from '../../../base/redux';
import { getSourceNameByParticipantId, getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
import { ConnectionStatsTable } from '../../../connection-stats';
import { saveLogs } from '../../actions';
import {
isParticipantConnectionStatusInactive,
isParticipantConnectionStatusInterrupted,
isTrackStreamingStatusInactive,
isTrackStreamingStatusInterrupted
} from '../../functions';
import AbstractConnectionIndicator, {
type Props as AbstractProps,
type State as AbstractState,
INDICATOR_DISPLAY_THRESHOLD
} from '../AbstractConnectionIndicator';
/**
* An array of display configurations for the connection indicator and its bars.
* The ordering is done specifically for faster iteration to find a matching
* configuration to the current connection strength percentage.
*
* @type {Object[]}
*/
const QUALITY_TO_WIDTH: Array<Object> = [
// Full (3 bars)
{
colorClass: 'status-high',
percent: INDICATOR_DISPLAY_THRESHOLD,
tip: 'connectionindicator.quality.good',
width: '100%'
},
// 2 bars
{
colorClass: 'status-med',
percent: 10,
tip: 'connectionindicator.quality.nonoptimal',
width: '66%'
},
// 1 bar
{
colorClass: 'status-low',
percent: 0,
tip: 'connectionindicator.quality.poor',
width: '33%'
}
// Note: we never show 0 bars as long as there is a connection.
];
/**
* The type of the React {@code Component} props of {@link ConnectionIndicator}.
*/
type Props = AbstractProps & {
/**
* The audio SSRC of this client.
*/
_audioSsrc: number,
/**
* The current condition of the user's connection, matching one of the
* enumerated values in the library.
*/
_connectionStatus: string,
/**
* Whether or not should display the "Show More" link in the local video
* stats table.
*/
_disableShowMoreStats: boolean,
/**
* Whether or not should display the "Save Logs" link in the local video
* stats table.
*/
_enableSaveLogs: boolean,
/**
* Whether or not the displays stats are for screen share. This prop is behind the sourceNameSignaling feature
* flag.
*/
_isVirtualScreenshareParticipant: Boolean,
/**
* Whether or not the displays stats are for local video.
*/
_isLocalVideo: boolean,
/**
* Invoked to save the conference logs.
*/
_onSaveLogs: Function,
2021-12-22 17:51:26 +00:00
/**
* The region reported by the participant.
*/
_region: String,
/**
* The video SSRC of this client.
*/
_videoSsrc: number,
/**
2021-11-04 21:10:43 +00:00
* Css class to apply on container.
*/
className: string,
/**
* The Redux dispatch function.
*/
dispatch: Dispatch<any>,
/**
2021-11-04 21:10:43 +00:00
* Optional param for passing existing connection stats on component instantiation.
*/
inheritedStats: Object,
/**
* Invoked to obtain translated strings.
*/
t: Function,
/**
* The source name of the track.
*/
_sourceName: string,
/**
* Whether source name signaling is enabled.
*/
_sourceNameSignalingEnabled: boolean
};
/**
* The type of the React {@code Component} state of {@link ConnectionIndicator}.
*/
type State = AbstractState & {
/**
* Whether or not the popover content should display additional statistics.
*/
showMoreStats: boolean
};
/**
* Implements a React {@link Component} which displays the current connection
* quality percentage and has a popover to show more detailed connection stats.
*
2021-11-04 21:10:43 +00:00
* @augments {Component}
*/
class ConnectionIndicatorContent extends AbstractConnectionIndicator<Props, State> {
/**
* Initializes a new {@code ConnectionIndicator} instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props: Props) {
super(props);
this.state = {
autoHideTimeout: undefined,
showIndicator: false,
showMoreStats: false,
stats: props.inheritedStats || {}
};
// Bind event handlers so they are only bound once for every instance.
this._onToggleShowMore = this._onToggleShowMore.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const {
bandwidth,
bitrate,
bridgeCount,
codec,
framerate,
maxEnabledResolution,
packetLoss,
resolution,
serverRegion,
transport
} = this.state.stats;
return (
<ConnectionStatsTable
audioSsrc = { this.props._audioSsrc }
bandwidth = { bandwidth }
bitrate = { bitrate }
bridgeCount = { bridgeCount }
codec = { codec }
connectionSummary = { this._getConnectionStatusTip() }
disableShowMoreStats = { this.props._disableShowMoreStats }
enableSaveLogs = { this.props._enableSaveLogs }
framerate = { framerate }
isLocalVideo = { this.props._isLocalVideo }
isVirtualScreenshareParticipant = { this.props._isVirtualScreenshareParticipant }
maxEnabledResolution = { maxEnabledResolution }
onSaveLogs = { this.props._onSaveLogs }
onShowMore = { this._onToggleShowMore }
packetLoss = { packetLoss }
participantId = { this.props.participantId }
2021-12-22 17:51:26 +00:00
region = { this.props._region }
resolution = { resolution }
serverRegion = { serverRegion }
shouldShowMore = { this.state.showMoreStats }
sourceNameSignalingEnabled = { this.props._sourceNameSignalingEnabled }
transport = { transport }
videoSsrc = { this.props._videoSsrc } />
);
}
/**
* Returns a string that describes the current connection status.
*
* @private
* @returns {string}
*/
_getConnectionStatusTip() {
let tipKey;
const { _isConnectionStatusInactive, _isConnectionStatusInterrupted } = this.props;
switch (true) {
case _isConnectionStatusInterrupted:
tipKey = 'connectionindicator.quality.lost';
break;
case _isConnectionStatusInactive:
tipKey = 'connectionindicator.quality.inactive';
break;
default: {
const { percent } = this.state.stats;
if (typeof percent === 'undefined') {
// If percentage is undefined then there are no stats available
// yet, likely because only a local connection has been
// established so far. Assume a strong connection to start.
tipKey = 'connectionindicator.quality.good';
} else {
const config = this._getDisplayConfiguration(percent);
tipKey = config.tip;
}
}
}
return this.props.t(tipKey);
}
/**
* Get the icon configuration from QUALITY_TO_WIDTH which has a percentage
* that matches or exceeds the passed in percentage. The implementation
* assumes QUALITY_TO_WIDTH is already sorted by highest to lowest
* percentage.
*
* @param {number} percent - The connection percentage, out of 100, to find
* the closest matching configuration for.
* @private
* @returns {Object}
*/
_getDisplayConfiguration(percent: number): Object {
return QUALITY_TO_WIDTH.find(x => percent >= x.percent) || {};
}
_onToggleShowMore: () => void;
/**
* Callback to invoke when the show more link in the popover content is
* clicked. Sets the state which will determine if the popover should show
* additional statistics about the connection.
*
* @returns {void}
*/
_onToggleShowMore() {
this.setState({ showMoreStats: !this.state.showMoreStats });
}
}
/**
* Maps redux actions to the props of the component.
*
* @param {Function} dispatch - The redux action {@code dispatch} function.
* @returns {{
* _onSaveLogs: Function,
* }}
* @private
*/
export function _mapDispatchToProps(dispatch: Dispatch<any>) {
return {
/**
* Saves the conference logs.
*
* @returns {Function}
*/
_onSaveLogs() {
dispatch(saveLogs());
}
};
}
/**
* Maps part of the Redux state to the props of this component.
*
* @param {Object} state - The Redux state.
* @param {Props} ownProps - The own props of the component.
* @returns {Props}
*/
export function _mapStateToProps(state: Object, ownProps: Props) {
const { participantId } = ownProps;
const conference = state['features/base/conference'].conference;
const participant
= participantId ? getParticipantById(state, participantId) : getLocalParticipant(state);
const firstVideoTrack = getTrackByMediaTypeAndParticipant(
state['features/base/tracks'], MEDIA_TYPE.VIDEO, participantId);
const sourceNameSignalingEnabled = getSourceNameSignalingFeatureFlag(state);
const _isConnectionStatusInactive = sourceNameSignalingEnabled
? isTrackStreamingStatusInactive(firstVideoTrack)
: isParticipantConnectionStatusInactive(participant);
const _isConnectionStatusInterrupted = sourceNameSignalingEnabled
? isTrackStreamingStatusInterrupted(firstVideoTrack)
: isParticipantConnectionStatusInterrupted(participant);
const props = {
_connectionStatus: participant?.connectionStatus,
_enableSaveLogs: state['features/base/config'].enableSaveLogs,
_disableShowMoreStats: state['features/base/config'].disableShowMoreStats,
_isConnectionStatusInactive,
_isConnectionStatusInterrupted,
_isVirtualScreenshareParticipant: sourceNameSignalingEnabled && participant?.isVirtualScreenshareParticipant,
_isLocalVideo: participant?.local,
_region: participant?.region,
_sourceName: getSourceNameByParticipantId(state, participantId),
_sourceNameSignalingEnabled: sourceNameSignalingEnabled
};
if (conference) {
const firstAudioTrack = getTrackByMediaTypeAndParticipant(
state['features/base/tracks'], MEDIA_TYPE.AUDIO, participantId);
return {
...props,
_audioSsrc: firstAudioTrack ? conference.getSsrcByTrack(firstAudioTrack.jitsiTrack) : undefined,
_videoSsrc: firstVideoTrack ? conference.getSsrcByTrack(firstVideoTrack.jitsiTrack) : undefined
};
}
return props;
}
export default translate(connect(_mapStateToProps, _mapDispatchToProps)(ConnectionIndicatorContent));