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

feat(connection-indicator): Add config option to disable indicator popover

This commit is contained in:
Vlad Piersec 2021-11-08 09:55:02 +02:00 committed by vp8x8
parent a97b700712
commit 3c5017a66a
2 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
config.js
View File

@ -648,6 +648,9 @@ var config = {
// Enables sending participants' emails (if available) to callstats and other analytics
// enableEmailInStats: false,
// When true, disables the connection indicator popover.
// disableConnectionIndicatorDetails: false,
// Controls the percentage of automatic feedback shown to participants when callstats is enabled.
// The default value is 100%. If set to 0, no automatic feedback will be requested
// feedbackPercentage: 100,

58
react/features/connection-indicator/components/web/ConnectionIndicator.js
View File

@ -69,6 +69,11 @@ type Props = AbstractProps & {
*/
_connectionIndicatorInactiveDisabled: boolean,
/**
* Wether the indicator popover is disabled.
*/
_popoverDisabled: boolean,
/**
* Whether or not the component should ignore setting a visibility class for
* hiding the component when the connection quality is not strong.
@ -149,13 +154,13 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
* @returns {ReactElement}
*/
render() {
const { iconSize, enableStatsDisplay, participantId, statsPopoverPosition } = this.props;
const { enableStatsDisplay, participantId, statsPopoverPosition } = this.props;
const visibilityClass = this._getVisibilityClass();
const rootClassNames = `indicator-container ${visibilityClass}`;
const colorClass = this._getConnectionColorClass();
const indicatorContainerClassNames
= `connection-indicator indicator ${colorClass}`;
if (this.props._popoverDisabled) {
return this._renderIndicator();
}
return (
<Popover
@ -171,15 +176,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
paddedContent = { true }
position = { statsPopoverPosition }
visible = { this.state.popoverVisible }>
<div className = 'popover-trigger'>
<div
className = { indicatorContainerClassNames }
style = {{ fontSize: iconSize }}>
<div className = 'connection indicatoricon'>
{ this._renderIcon() }
</div>
</div>
</div>
{ this._renderIndicator() }
</Popover>
);
}
@ -316,17 +313,41 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
];
}
_onShowPopover: () => void;
_onShowPopover: () => void;
/**
/**
* Shows popover.
*
* @private
* @returns {void}
*/
_onShowPopover() {
this.setState({ popoverVisible: true });
}
_onShowPopover() {
this.setState({ popoverVisible: true });
}
/**
* Creates a ReactElement for displaying the indicator (GSM bar).
*
* @returns {ReactElement}
*/
_renderIndicator() {
const colorClass = this._getConnectionColorClass();
const indicatorContainerClassNames
= `connection-indicator indicator ${colorClass}`;
return (
<div className = 'popover-trigger'>
<div
className = { indicatorContainerClassNames }
style = {{ fontSize: this.props.iconSize }}>
<div className = 'connection indicatoricon'>
{ this._renderIcon() }
</div>
</div>
</div>
);
}
}
/**
@ -344,6 +365,7 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
return {
_connectionIndicatorInactiveDisabled:
Boolean(state['features/base/config'].connectionIndicators?.inactiveDisabled),
_popoverDisabled: state['features/base/config'].disableConnectionIndicatorDetails,
_connectionStatus: participant?.connectionStatus
};
}