feat(conference): hide toggle camera and audio device selection btns

react/features/base/flags/constants.ts

@@ -4,6 +4,12 @@
  */
 export const ADD_PEOPLE_ENABLED = 'add-people.enabled';
 
+/**
+ * Flag indicating if the audio device button should be displayed.
+ * Default: enabled (true).
+ */
+export const AUDIO_DEVICE_BUTTON_ENABLED = 'audio-device-button.enabled';
+
 /**
  * Flag indicating if the SDK should not require the audio focus.
  * Used by apps that do not use Jitsi audio.
@@ -239,10 +245,16 @@ export const SETTINGS_ENABLED = 'settings.enabled';
 
 /**
  * Flag indicating if tile view feature should be enabled.
- * Default: enabled.
+ * Default: enabled(true).
  */
 export const TILE_VIEW_ENABLED = 'tile-view.enabled';
 
+/**
+ * Flag indicating if the toggle camera button should be enabled
+ * Default: enabled(true).
+ */
+export const TOGGLE_CAMERA_BUTTON_ENABLED = 'toggle-camera-button.enabled';
+
 /**
  * Flag indicating if the toolbox should be always be visible
  * Default: disabled (false).

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

@@ -4,13 +4,17 @@ import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
 import { getConferenceName, getConferenceTimestamp } from '../../../base/conference/functions';
-import { CONFERENCE_TIMER_ENABLED } from '../../../base/flags/constants';
+import {
+    AUDIO_DEVICE_BUTTON_ENABLED,
+    CONFERENCE_TIMER_ENABLED,
+    TOGGLE_CAMERA_BUTTON_ENABLED
+} from '../../../base/flags/constants';
 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 { isRoomNameEnabled } from '../../../prejoin/functions.native';
 import ToggleCameraButton from '../../../toolbox/components/native/ToggleCameraButton';
 import { isToolboxVisible } from '../../../toolbox/functions.native';
 import ConferenceTimer from '../ConferenceTimer';
@@ -21,6 +25,11 @@ import styles from './styles';
 
 interface IProps {
 
+    /**
+     * Whether the audio device button should be displayed.
+     */
+    _audioDeviceButtonEnabled: boolean;
+
     /**
      * Whether displaying the current conference timer is enabled or not.
      */
@@ -47,6 +56,11 @@ interface IProps {
      */
     _roomNameEnabled: boolean;
 
+    /**
+     * Whether the toggle camera button should be displayed.
+     */
+    _toggleCameraButtonEnabled: boolean;
+
     /**
      * True if the navigation bar should be visible.
      */
@@ -95,12 +109,18 @@ const TitleBar = (props: IProps) => {
                 {/* eslint-disable-next-line react/jsx-no-bind */}
                 <Labels createOnPress = { props._createOnPress } />
             </View>
-            <View style = { styles.titleBarButtonContainer }>
-                <ToggleCameraButton styles = { styles.titleBarButton } />
-            </View>
-            <View style = { styles.titleBarButtonContainer }>
-                <AudioDeviceToggleButton styles = { styles.titleBarButton } />
-            </View>
+            {
+                props._toggleCameraButtonEnabled
+                && <View style = { styles.titleBarButtonContainer }>
+                    <ToggleCameraButton styles = { styles.titleBarButton } />
+                </View>
+            }
+            {
+                props._audioDeviceButtonEnabled
+                && <View style = { styles.titleBarButtonContainer }>
+                    <AudioDeviceToggleButton styles = { styles.titleBarButton } />
+                </View>
+            }
             {
                 _isParticipantsPaneEnabled
                 && <View style = { styles.titleBarButtonContainer }>
@@ -123,11 +143,13 @@ function _mapStateToProps(state: IReduxState) {
     const startTimestamp = getConferenceTimestamp(state);
 
     return {
+        _audioDeviceButtonEnabled: getFeatureFlag(state, AUDIO_DEVICE_BUTTON_ENABLED, true),
         _conferenceTimerEnabled:
             Boolean(getFeatureFlag(state, CONFERENCE_TIMER_ENABLED, true) && !hideConferenceTimer && startTimestamp),
         _isParticipantsPaneEnabled: isParticipantsPaneEnabled(state),
         _meetingName: getConferenceName(state),
         _roomNameEnabled: isRoomNameEnabled(state),
+        _toggleCameraButtonEnabled: getFeatureFlag(state, TOGGLE_CAMERA_BUTTON_ENABLED, true),
         _visible: isToolboxVisible(state)
     };
 }