{ this._renderIcon() }
@@ -187,6 +236,83 @@ class ConnectionIndicator extends Component {
);
}
+ /**
+ * Returns a CSS class that interprets the current connection status as a
+ * color.
+ *
+ * @private
+ * @returns {string}
+ */
+ _getConnectionColorClass() {
+ const { connectionStatus } = this.props;
+ const { percent } = this.state.stats;
+ const { INACTIVE, INTERRUPTED } = JitsiParticipantConnectionStatus;
+
+ if (connectionStatus === INACTIVE) {
+ return 'status-other';
+ } else if (connectionStatus === INTERRUPTED) {
+ return 'status-lost';
+ } else if (typeof percent === 'undefined') {
+ return 'status-high';
+ }
+
+ return QUALITY_TO_WIDTH.find(x => percent >= x.percent).colorClass;
+ }
+
+ /**
+ * Returns a string that describes the current connection status.
+ *
+ * @private
+ * @returns {string}
+ */
+ _getConnectionStatusTip() {
+ let tipKey;
+
+ switch (this.props.connectionStatus) {
+ case JitsiParticipantConnectionStatus.INTERRUPTED:
+ tipKey = 'connectionindicator.quality.lost';
+ break;
+
+ case JitsiParticipantConnectionStatus.INACTIVE:
+ 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 = QUALITY_TO_WIDTH.find(x => percent >= x.percent);
+
+ tipKey = config.tip;
+ }
+ }
+ }
+
+ return this.props.t(tipKey);
+ }
+
+ /**
+ * Returns additional class names to add to the root of the component. The
+ * class names are intended to be used for hiding or showing the indicator.
+ *
+ * @private
+ * @returns {string}
+ */
+ _getVisibilityClass() {
+ const { connectionStatus } = this.props;
+
+ return this.state.showIndicator
+ || this.props.alwaysVisible
+ || connectionStatus === JitsiParticipantConnectionStatus.INTERRUPTED
+ || connectionStatus === JitsiParticipantConnectionStatus.INACTIVE
+ ? 'show-connection-indicator' : 'hide-connection-indicator';
+ }
+
/**
* Callback invoked when new connection stats associated with the passed in
* user ID are available. Will update the component's display of current
@@ -209,6 +335,9 @@ class ConnectionIndicator extends Component {
this.setState({
stats: newStats
});
+
+ // Rely on React to batch setState actions.
+ this._updateIndicatorAutoHide(newStats.percent);
}
/**
@@ -229,40 +358,46 @@ class ConnectionIndicator extends Component {
* @returns {ReactElement}
*/
_renderIcon() {
- switch (this.props.connectionStatus) {
- case JitsiParticipantConnectionStatus.INTERRUPTED:
- return (
-
-
-
- );
- case JitsiParticipantConnectionStatus.INACTIVE:
+ if (this.props.connectionStatus
+ === JitsiParticipantConnectionStatus.INACTIVE) {
return (
);
- default: {
- const { percent } = this.state.stats;
- const width = QUALITY_TO_WIDTH.find(x => percent >= x.percent);
- const iconWidth = width && width.width
- ? { width: width && width.width } : {};
+ }
- return [
-
-
- ,
-
-
-
- ];
- }
+ let iconWidth;
+ let emptyIconWrapperClassName = 'connection_empty';
+
+ if (this.props.connectionStatus
+ === JitsiParticipantConnectionStatus.INTERRUPTED) {
+
+ // emptyIconWrapperClassName is used by the torture tests to
+ // identify lost connection status handling.
+ emptyIconWrapperClassName = 'connection_lost';
+ iconWidth = '0%';
+ } else if (typeof this.state.stats.percent === 'undefined') {
+ iconWidth = '100%';
+ } else {
+ const { percent } = this.state.stats;
+
+ iconWidth = QUALITY_TO_WIDTH.find(x => percent >= x.percent).width;
}
+
+ return [
+
+
+ ,
+
+
+
+ ];
}
/**
@@ -284,6 +419,7 @@ class ConnectionIndicator extends Component {
);
}
+
+ /**
+ * Updates the internal state for automatically hiding the indicator.
+ *
+ * @param {number} percent - The current connection quality percentage
+ * between the values 0 and 100.
+ * @private
+ * @returns {void}
+ */
+ _updateIndicatorAutoHide(percent) {
+ if (percent < INDICATOR_DISPLAY_THRESHOLD) {
+ clearTimeout(this.state.autoHideTimeout);
+ this.setState({
+ autoHideTimeout: null,
+ showIndicator: true
+ });
+ } else if (this.state.autoHideTimeout) {
+ // This clause is intentionally left blank because no further action
+ // is needed if the percent is below the threshold and there is an
+ // autoHideTimeout set.
+ } else {
+ this.setState({
+ autoHideTimeout: setTimeout(() => {
+ this.setState({
+ showIndicator: false
+ });
+ }, interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_TIMEOUT)
+ });
+ }
+ }
}
-export default ConnectionIndicator;
+export default translate(ConnectionIndicator);
diff --git a/react/features/connection-stats/components/ConnectionStatsTable.js b/react/features/connection-stats/components/ConnectionStatsTable.js
index f017f63c6f..28de4ce37d 100644
--- a/react/features/connection-stats/components/ConnectionStatsTable.js
+++ b/react/features/connection-stats/components/ConnectionStatsTable.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { translate } from '../../base/i18n';
@@ -21,7 +22,7 @@ class ConnectionStatsTable extends Component {
* upload: Number
* }}
*/
- bandwidth: React.PropTypes.object,
+ bandwidth: PropTypes.object,
/**
* Statistics related to bitrate.
@@ -30,7 +31,12 @@ class ConnectionStatsTable extends Component {
* upload: Number
* }}
*/
- bitrate: React.PropTypes.object,
+ bitrate: PropTypes.object,
+
+ /**
+ * A message describing the connection quality.
+ */
+ connectionSummary: PropTypes.string,
/**
* Statistics related to framerates for each ssrc.
@@ -38,17 +44,17 @@ class ConnectionStatsTable extends Component {
* [ ssrc ]: Number
* }}
*/
- framerate: React.PropTypes.object,
+ framerate: PropTypes.object,
/**
* Whether or not the statitics are for local video.
*/
- isLocalVideo: React.PropTypes.bool,
+ isLocalVideo: PropTypes.bool,
/**
* Callback to invoke when the show additional stats link is clicked.
*/
- onShowMore: React.PropTypes.func,
+ onShowMore: PropTypes.func,
/**
* Statistics related to packet loss.
@@ -57,7 +63,7 @@ class ConnectionStatsTable extends Component {
* upload: Number
* }}
*/
- packetLoss: React.PropTypes.object,
+ packetLoss: PropTypes.object,
/**
* Statistics related to display resolutions for each ssrc.
@@ -68,23 +74,23 @@ class ConnectionStatsTable extends Component {
* }
* }}
*/
- resolution: React.PropTypes.object,
+ resolution: PropTypes.object,
/**
* Whether or not additional stats about bandwidth and transport should
* be displayed. Will not display even if true for remote participants.
*/
- shouldShowMore: React.PropTypes.bool,
+ shouldShowMore: PropTypes.bool,
/**
* Invoked to obtain translated strings.
*/
- t: React.PropTypes.func,
+ t: PropTypes.func,
/**
* Statistics related to transports.
*/
- transport: React.PropTypes.array
+ transport: PropTypes.array
};
/**
@@ -184,6 +190,24 @@ class ConnectionStatsTable extends Component {
);
}
+ /**
+ * Creates a table row as a ReactElement for displaying a summary message
+ * about the current connection status.
+ *
+ * @private
+ * @returns {ReactElement}
+ */
+ _renderConnectionSummary() {
+ return (
+
+ |
+ { this.props.t('connectionindicator.status') }
+ |
+ { this.props.connectionSummary } |
+
+ );
+ }
+
/**
* Creates a table row as a ReactElement for displaying frame rate related
* statistics.
@@ -309,6 +333,7 @@ class ConnectionStatsTable extends Component {
return (
+ { this._renderConnectionSummary() }
{ this._renderBitrate() }
{ this._renderPacketLoss() }
{ this._renderResolution() }