feat(config) add connection indicators flags

config.js

@@ -253,6 +253,14 @@ var config = {
     // Default value for the channel "last N" attribute. -1 for unlimited.
     channelLastN: -1,
 
+    // Connection indicators
+    // connectionIndicators: {
+    //     autoHide: true,
+    //     autoHideTimeout: 5000,
+    //     disabled: false,
+    //     inactiveDisabled: false
+    // },
+
     // Provides a way for the lastN value to be controlled through the UI.
     // When startLastN is present, conference starts with a last-n value of startLastN and channelLastN
     // value will be used when the quality level is selected using "Manage Video Quality" slider.

interface_config.js

@@ -25,31 +25,11 @@ var interfaceConfig = {
     BRAND_WATERMARK_LINK: '',
 
     CLOSE_PAGE_GUEST_HINT: false, // A html text to be shown to guests on the close page, false disables it
-    /**
-     * Whether the connection indicator icon should hide itself based on
-     * connection strength. If true, the connection indicator will remain
-     * displayed while the participant has a weak connection and will hide
-     * itself after the CONNECTION_INDICATOR_HIDE_TIMEOUT when the connection is
-     * strong.
-     *
-     * @type {boolean}
-     */
-    CONNECTION_INDICATOR_AUTO_HIDE_ENABLED: true,
 
-    /**
+    // Connection indicators (
-     * How long the connection indicator should remain displayed before hiding.
+    // CONNECTION_INDICATOR_AUTO_HIDE_ENABLED,
-     * Used in conjunction with CONNECTION_INDICATOR_AUTOHIDE_ENABLED.
+    // CONNECTION_INDICATOR_AUTO_HIDE_TIMEOUT,
-     *
+    // CONNECTION_INDICATOR_DISABLED) got moved to config.js.
-     * @type {number}
-     */
-    CONNECTION_INDICATOR_AUTO_HIDE_TIMEOUT: 5000,
-
-    /**
-     * If true, hides the connection indicators completely.
-     *
-     * @type {boolean}
-     */
-    CONNECTION_INDICATOR_DISABLED: false,
 
     DEFAULT_BACKGROUND: '#474747',
     DEFAULT_LOCAL_DISPLAY_NAME: 'me',

react/features/base/config/configWhitelist.js

@@ -70,6 +70,7 @@ export default [
     'callUUID',
 
     'channelLastN',
+    'connectionIndicators',
     'constraints',
     'brandingRoomAlias',
     'debug',

react/features/base/config/reducer.js

@@ -194,6 +194,18 @@ function _translateLegacyConfig(oldValue: Object) {
         newValue.toolbarButtons = interfaceConfig.TOOLBAR_BUTTONS;
     }
 
+    if (!oldValue.connectionIndicators
+            && typeof interfaceConfig === 'object'
+            && (interfaceConfig.hasOwnProperty('CONNECTION_INDICATOR_DISABLED')
+                || interfaceConfig.hasOwnProperty('CONNECTION_INDICATOR_AUTO_HIDE_ENABLED')
+                || interfaceConfig.hasOwnProperty('CONNECTION_INDICATOR_AUTO_HIDE_TIMEOUT'))) {
+        newValue.connectionIndicators = {
+            disabled: interfaceConfig.CONNECTION_INDICATOR_DISABLED,
+            autoHide: interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED,
+            autoHideTimeout: interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_TIMEOUT
+        };
+    }
+
     if (oldValue.stereo || oldValue.opusMaxAverageBitrate) {
         newValue.audioQuality = {
             opusMaxAverageBitrate: oldValue.audioQuality?.opusMaxAverageBitrate ?? oldValue.opusMaxAverageBitrate,

react/features/connection-indicator/components/AbstractConnectionIndicator.js

@@ -6,6 +6,8 @@ import statsEmitter from '../statsEmitter';
 
 declare var interfaceConfig: Object;
 
+const defaultAutoHideTimeout = 5000;
+
 /**
  * The connection quality percentage that must be reached to be considered of
  * good quality and can result in the connection indicator being hidden.
@@ -19,6 +21,11 @@ export const INDICATOR_DISPLAY_THRESHOLD = 30;
  */
 export type Props = {
 
+    /**
+     * How long the connection indicator should remain displayed before hiding.
+     */
+    _autoHideTimeout: number,
+
     /**
      * The ID of the participant associated with the displayed connection indication and
      * stats.
@@ -52,7 +59,7 @@ export type State = {
  *
  * @extends {Component}
  */
-export default class AbstractConnectionIndicator<P: Props, S: State> extends Component<P, S> {
+class AbstractConnectionIndicator<P: Props, S: State> extends Component<P, S> {
     /**
      * The timeout for automatically hiding the indicator.
      */
@@ -165,9 +172,23 @@ export default class AbstractConnectionIndicator<P: Props, S: State> extends Com
                 this.setState({
                     showIndicator: false
                 });
-            }, typeof interfaceConfig === 'undefined'
+            }, this.props._autoHideTimeout);
-                ? 5000
-                : interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_TIMEOUT);
         }
     }
 }
+
+/**
+ * Maps (parts of) the Redux state to the associated props for the
+ * {@code ConnectorIndicator} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {Props}
+ */
+export function mapStateToProps(state: Object) {
+    return {
+        _autoHideTimeout: state['features/base/config'].connectionIndicators.autoHideTimeout ?? defaultAutoHideTimeout
+    };
+}
+
+export default AbstractConnectionIndicator;

react/features/connection-indicator/components/web/ConnectionIndicator.js

@@ -64,6 +64,11 @@ type Props = AbstractProps & {
      */
     _connectionStatus: string,
 
+    /**
+     * Disable/enable inactive indicator.
+     */
+    _connectionIndicatorInactiveDisabled: boolean,
+
     /**
      * Whether or not the component should ignore setting a visibility class for
      * hiding the component when the connection quality is not strong.
@@ -224,8 +229,11 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, AbstractSta
      * @returns {ReactElement}
      */
     _renderIcon() {
-        if (this.props._connectionStatus
+        if (this.props._connectionStatus === JitsiParticipantConnectionStatus.INACTIVE) {
-            === JitsiParticipantConnectionStatus.INACTIVE) {
+            if (this.props._connectionIndicatorInactiveDisabled) {
+                return null;
+            }
+
             return (
                 <span className = 'connection_ninja'>
                     <Icon
@@ -289,6 +297,8 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
         = participantId ? getParticipantById(state, participantId) : getLocalParticipant(state);
 
     return {
+        _connectionIndicatorInactiveDisabled:
+        Boolean(state['features/base/config'].connectionIndicators?.inactiveDisabled),
         _connectionStatus: participant?.connectionStatus
     };
 }

react/features/filmstrip/components/web/Thumbnail.js

@@ -1093,8 +1093,10 @@ function _mapStateToProps(state, ownProps): Object {
 
     return {
         _audioTrack,
-        _connectionIndicatorAutoHideEnabled: interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED,
+        _connectionIndicatorAutoHideEnabled:
-        _connectionIndicatorDisabled: _isMobile || interfaceConfig.CONNECTION_INDICATOR_DISABLED,
+        Boolean(state['features/base/config'].connectionIndicators?.autoHide ?? true),
+        _connectionIndicatorDisabled: _isMobile
+            || Boolean(state['features/base/config'].connectionIndicators?.disabled),
         _currentLayout,
         _defaultLocalDisplayName: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
         _disableLocalVideoFlip: Boolean(disableLocalVideoFlip),