feat(config/flag): enable/disable participants pane

config.js

@@ -1388,6 +1388,8 @@ var config = {
 
     // Options related to the participants pane.
     // participantsPane: {
+    //     // Enables feature
+    //     enabled: true,
     //     // Hides the moderator settings tab.
     //     hideModeratorSettingsTab: false,
     //     // Hides the more actions button.

react/features/base/config/configType.ts

@@ -503,6 +503,7 @@ export interface IConfig {
         preventExecution: boolean;
     }>;
     participantsPane?: {
+        enabled?: boolean;
         hideModeratorSettingsTab?: boolean;
         hideMoreActionsButton?: boolean;
         hideMuteAllButton?: boolean;

react/features/base/flags/constants.ts

@@ -164,6 +164,12 @@ export const NOTIFICATIONS_ENABLED = 'notifications.enabled';
  */
 export const OVERFLOW_MENU_ENABLED = 'overflow-menu.enabled';
 
+/**
+ * Flag indicating if participants should be enabled.
+ * Default: enabled (true).
+ */
+export const PARTICIPANTS_ENABLED = 'participants.enabled';
+
 /**
  * Flag indicating if Picture-in-Picture should be enabled.
  * Default: auto-detected.

react/features/conference/components/native/TitleBar.tsx

@@ -9,6 +9,7 @@ import { getFeatureFlag } from '../../../base/flags/functions';
 import AudioDeviceToggleButton from '../../../mobile/audio-mode/components/AudioDeviceToggleButton';
 import PictureInPictureButton from '../../../mobile/picture-in-picture/components/PictureInPictureButton';
 import ParticipantsPaneButton from '../../../participants-pane/components/native/ParticipantsPaneButton';
+import { isParticipantsPaneEnabled } from '../../../participants-pane/functions';
 import { isRoomNameEnabled } from '../../../prejoin/functions';
 import ToggleCameraButton from '../../../toolbox/components/native/ToggleCameraButton';
 import { isToolboxVisible } from '../../../toolbox/functions.native';
@@ -31,6 +32,11 @@ interface IProps {
      */
     _createOnPress: Function;
 
+    /**
+     * Whether participants feature is enabled or not.
+     */
+    _isParticipantsPaneEnabled: boolean;
+
     /**
      * Name of the meeting we're currently in.
      */
@@ -55,7 +61,7 @@ interface IProps {
  * @returns {JSX.Element}
  */
 const TitleBar = (props: IProps) => {
-    const { _visible } = props;
+    const { _isParticipantsPaneEnabled, _visible } = props;
 
     if (!_visible) {
         return null;
@@ -95,9 +101,13 @@ const TitleBar = (props: IProps) => {
             <View style = { styles.titleBarButtonContainer }>
                 <AudioDeviceToggleButton styles = { styles.titleBarButton } />
             </View>
-            <View style = { styles.titleBarButtonContainer }>
-                <ParticipantsPaneButton styles = { styles.titleBarButton } />
-            </View>
+            {
+                _isParticipantsPaneEnabled
+                && <View style = { styles.titleBarButtonContainer }>
+                    <ParticipantsPaneButton
+                        styles = { styles.titleBarButton } />
+                </View>
+            }
         </View>
     );
 };
@@ -115,6 +125,7 @@ function _mapStateToProps(state: IReduxState) {
     return {
         _conferenceTimerEnabled:
             Boolean(getFeatureFlag(state, CONFERENCE_TIMER_ENABLED, true) && !hideConferenceTimer && startTimestamp),
+        _isParticipantsPaneEnabled: isParticipantsPaneEnabled(state),
         _meetingName: getConferenceName(state),
         _roomNameEnabled: isRoomNameEnabled(state),
         _visible: isToolboxVisible(state)

react/features/participants-pane/components/web/ParticipantsPaneButton.tsx

@@ -9,9 +9,11 @@ import {
     close as closeParticipantsPane,
     open as openParticipantsPane
 } from '../../../participants-pane/actions.web';
+import { isParticipantsPaneEnabled } from '../../functions';
 
 import ParticipantsCounter from './ParticipantsCounter';
 
+
 /**
  * The type of the React {@code Component} props of {@link ParticipantsPaneButton}.
  */
@@ -21,6 +23,11 @@ interface IProps extends AbstractButtonProps {
      * Whether or not the participants pane is open.
      */
     _isOpen: boolean;
+
+    /**
+     * Whether participants feature is enabled or not.
+     */
+    _isParticipantsPaneEnabled: boolean;
 }
 
 /**
@@ -69,10 +76,16 @@ class ParticipantsPaneButton extends AbstractButton<IProps> {
      * @returns {React$Node}
      */
     render() {
+        const { _isParticipantsPaneEnabled } = this.props;
+
+        if (!_isParticipantsPaneEnabled) {
+            return null;
+        }
+
         return (
             <div
                 className = 'toolbar-button-with-badge'>
-                {super.render()}
+                { super.render() }
                 <ParticipantsCounter />
             </div>
         );
@@ -89,7 +102,8 @@ function mapStateToProps(state: IReduxState) {
     const { isOpen } = state['features/participants-pane'];
 
     return {
-        _isOpen: isOpen
+        _isOpen: isOpen,
+        _isParticipantsPaneEnabled: isParticipantsPaneEnabled(state)
     };
 }
 

react/features/participants-pane/functions.ts

@@ -7,7 +7,7 @@ import {
 } from '../av-moderation/functions';
 import { IStateful } from '../base/app/types';
 import { getCurrentConference } from '../base/conference/functions';
-import { INVITE_ENABLED } from '../base/flags/constants';
+import { INVITE_ENABLED, PARTICIPANTS_ENABLED } from '../base/flags/constants';
 import { getFeatureFlag } from '../base/flags/functions';
 import { MEDIA_TYPE, type MediaType } from '../base/media/constants';
 import {
@@ -309,3 +309,17 @@ export function isBreakoutRoomRenameAllowed(state: IReduxState) {
 
     return isLocalModerator && isRenameBreakoutRoomsSupported;
 }
+
+/**
+ * Returns true if participants is enabled and false otherwise.
+ *
+ * @param {IStateful} stateful - The redux store, the redux
+ * {@code getState} function, or the redux state itself.
+ * @returns {boolean}
+ */
+export const isParticipantsPaneEnabled = (stateful: IStateful) => {
+    const state = toState(stateful);
+    const { enabled = true } = getParticipantsPaneConfig(state);
+
+    return Boolean(getFeatureFlag(state, PARTICIPANTS_ENABLED, true) && enabled);
+};

react/features/toolbox/hooks.web.ts

@@ -17,7 +17,10 @@ import {
     close as closeParticipantsPane,
     open as openParticipantsPane
 } from '../participants-pane/actions.web';
-import { getParticipantsPaneOpen } from '../participants-pane/functions';
+import {
+    getParticipantsPaneOpen,
+    isParticipantsPaneEnabled
+} from '../participants-pane/functions';
 import { addReactionToBuffer } from '../reactions/actions.any';
 import { toggleReactionsMenuVisibility } from '../reactions/actions.web';
 import { REACTIONS } from '../reactions/constants';
@@ -36,6 +39,7 @@ import { isDesktopShareButtonDisabled } from './functions.web';
 export const useKeyboardShortcuts = (toolbarButtons: Array<string>) => {
     const dispatch = useDispatch();
     const _isSpeakerStatsDisabled = useSelector(isSpeakerStatsDisabled);
+    const _isParticipantsPaneEnabled = useSelector(isParticipantsPaneEnabled);
     const _shouldDisplayReactionsButtons = useSelector(shouldDisplayReactionsButtons);
     const _toolbarButtons = useSelector((state: IReduxState) => toolbarButtons || getToolbarButtons(state));
     const chatOpen = useSelector((state: IReduxState) => state['features/chat'].isOpen);
@@ -216,7 +220,7 @@ export const useKeyboardShortcuts = (toolbarButtons: Array<string>) => {
                 exec: onToggleScreenshare,
                 helpDescription: 'keyboardShortcuts.toggleScreensharing'
             },
-            isToolbarButtonEnabled('participants-pane', _toolbarButtons) && {
+            _isParticipantsPaneEnabled && isToolbarButtonEnabled('participants-pane', _toolbarButtons) && {
                 character: 'P',
                 exec: onToggleParticipantsPane,
                 helpDescription: 'keyboardShortcuts.toggleParticipantsPane'