feat(prejoin) Add possibility to hide extra join options buttons (#10434)

config.js

@@ -496,8 +496,14 @@ var config = {
     // and microsoftApiApplicationClientID
     // enableCalendarIntegration: false,
 
-    // When 'true', it shows an intermediate page before joining, where the user can configure their devices.
-    // prejoinPageEnabled: false,
+    // Configs for prejoin page.
+    // prejoinConfig: {
+    //     // When 'true', it shows an intermediate page before joining, where the user can configure their devices.
+    //     // This replaces `prejoinPageEnabled`.
+    //     enabled: true,
+    //     // List of buttons to hide from the extra join options dropdown.
+    //     hideExtraJoinButtons: ['no-audio', 'by-phone']
+    // },
 
     // When 'true', the user cannot edit the display name.
     // (Mainly useful when used in conjuction with the JWT so the JWT name becomes read only.)

react/features/base/config/configWhitelist.js

@@ -183,6 +183,7 @@ export default [
     'pcStatsInterval',
     'preferH264',
     'preferredCodec',
+    'prejoinConfig',
     'prejoinPageEnabled',
     'requireDisplayName',
     'remoteVideoMenu',

react/features/base/config/reducer.js

@@ -282,6 +282,13 @@ function _translateLegacyConfig(oldValue: Object) {
         };
     }
 
+    newValue.prejoinConfig = oldValue.prejoinConfig || {};
+    if (oldValue.hasOwnProperty('prejoinPageEnabled')
+        && !newValue.prejoinConfig.hasOwnProperty('enabled')
+    ) {
+        newValue.prejoinConfig.enabled = oldValue.prejoinPageEnabled;
+    }
+
     newValue.disabledSounds = newValue.disabledSounds || [];
 
     if (oldValue.disableJoinLeaveSounds) {

react/features/prejoin/components/DropdownButton.js

@@ -59,7 +59,7 @@ const styles = theme => {
             display: 'flex',
             height: 40,
             fontSize: 15,
-            lineHeight: 24,
+            lineHeight: '24px',
             padding: '0 16px',
             backgroundColor: theme.palette.field02,
 

react/features/prejoin/components/Prejoin.js

@@ -59,6 +59,11 @@ type Props = {
      */
     updateSettings: Function,
 
+    /**
+     * The prejoin config.
+     */
+    prejoinConfig?: Object,
+
     /**
      * Whether the name input should be read only or not.
      */
@@ -139,6 +144,7 @@ class Prejoin extends Component<Props, State> {
         this._onJoinConferenceWithoutAudioKeyPress = this._onJoinConferenceWithoutAudioKeyPress.bind(this);
         this._showDialogKeyPress = this._showDialogKeyPress.bind(this);
         this._onJoinKeyPress = this._onJoinKeyPress.bind(this);
+        this._getExtraJoinButtons = this._getExtraJoinButtons.bind(this);
     }
     _onJoinButtonClick: () => void;
 
@@ -277,6 +283,40 @@ class Prejoin extends Component<Props, State> {
         }
     }
 
+    _getExtraJoinButtons: () => Object;
+
+    /**
+     * Gets the list of extra join buttons.
+     *
+     * @returns {Object} - The list of extra buttons.
+     */
+    _getExtraJoinButtons() {
+        const { joinConferenceWithoutAudio, t } = this.props;
+
+        const noAudio = {
+            key: 'no-audio',
+            dataTestId: 'prejoin.joinWithoutAudio',
+            icon: IconVolumeOff,
+            label: t('prejoin.joinWithoutAudio'),
+            onButtonClick: joinConferenceWithoutAudio,
+            onKeyPressed: this._onJoinConferenceWithoutAudioKeyPress
+        };
+
+        const byPhone = {
+            key: 'by-phone',
+            dataTestId: 'prejoin.joinByPhone',
+            icon: IconPhone,
+            label: t('prejoin.joinAudioByPhone'),
+            onButtonClick: this._showDialog,
+            onKeyPressed: this._showDialogKeyPress
+        };
+
+        return {
+            noAudio,
+            byPhone
+        };
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -290,15 +330,25 @@ class Prejoin extends Component<Props, State> {
             joinConference,
             joinConferenceWithoutAudio,
             name,
+            prejoinConfig,
             readOnlyName,
             showCameraPreview,
             showDialog,
             t,
             videoTrack
         } = this.props;
+        const { _closeDialog, _onDropdownClose, _onJoinButtonClick, _onJoinKeyPress,
+            _onOptionsClick, _setName } = this;
+
+        const extraJoinButtons = this._getExtraJoinButtons();
+        let extraButtonsToRender = Object.values(extraJoinButtons).filter((val: Object) =>
+            !(prejoinConfig?.hideExtraJoinButtons || []).includes(val.key)
+        );
 
-        const { _closeDialog, _onDropdownClose, _onJoinButtonClick, _onJoinKeyPress, _showDialogKeyPress,
-            _onJoinConferenceWithoutAudioKeyPress, _onOptionsClick, _setName, _showDialog } = this;
+        if (!hasJoinByPhoneButton) {
+            extraButtonsToRender = extraButtonsToRender.filter((btn: Object) => btn.key !== 'by-phone');
+        }
+        const hasExtraJoinButtons = Boolean(extraButtonsToRender.length);
         const { showJoinByPhoneButtons, showError } = this.state;
 
         return (
@@ -327,19 +377,12 @@ class Prejoin extends Component<Props, State> {
 
                     <div className = 'prejoin-preview-dropdown-container'>
                         <InlineDialog
-                            content = { <div className = 'prejoin-preview-dropdown-btns'>
-                                <DropdownButton
-                                    dataTestId = 'prejoin.joinWithoutAudio'
-                                    icon = { IconVolumeOff }
-                                    label = { t('prejoin.joinWithoutAudio') }
-                                    onButtonClick = { joinConferenceWithoutAudio }
-                                    onKeyPressed = { _onJoinConferenceWithoutAudioKeyPress } />
-                                {hasJoinByPhoneButton && <DropdownButton
-                                    dataTestId = 'prejoin.joinByPhone'
-                                    icon = { IconPhone }
-                                    label = { t('prejoin.joinAudioByPhone') }
-                                    onButtonClick = { _showDialog }
-                                    onKeyPressed = { _showDialogKeyPress } />}
+                            content = { hasExtraJoinButtons && <div className = 'prejoin-preview-dropdown-btns'>
+                                {extraButtonsToRender.map(({ key, ...rest }: Object) => (
+                                    <DropdownButton
+                                        key = { key }
+                                        { ...rest } />
+                                ))}
                             </div> }
                             isOpen = { showJoinByPhoneButtons }
                             onClose = { _onDropdownClose }>
@@ -348,7 +391,7 @@ class Prejoin extends Component<Props, State> {
                                 ariaDropDownLabel = { t('prejoin.joinWithoutAudio') }
                                 ariaLabel = { t('prejoin.joinMeeting') }
                                 ariaPressed = { showJoinByPhoneButtons }
-                                hasOptions = { true }
+                                hasOptions = { hasExtraJoinButtons }
                                 onClick = { _onJoinButtonClick }
                                 onKeyPress = { _onJoinKeyPress }
                                 onOptionsClick = { _onOptionsClick }
@@ -390,7 +433,8 @@ function mapStateToProps(state): Object {
         hasJoinByPhoneButton: isJoinByPhoneButtonVisible(state),
         readOnlyName: isNameReadOnly(state),
         showCameraPreview: !isVideoMutedByUser(state),
-        videoTrack: getLocalJitsiVideoTrack(state)
+        videoTrack: getLocalJitsiVideoTrack(state),
+        prejoinConfig: state['features/base/config'].prejoinConfig
     };
 }
 

react/features/prejoin/components/PrejoinApp.js

@@ -54,7 +54,9 @@ export default class PrejoinApp extends BaseApp<Props> {
             const { startWithAudioMuted, startWithVideoMuted } = store.getState()['features/base/settings'];
 
             dispatch(setConfig({
-                prejoinPageEnabled: true,
+                prejoinConfig: {
+                    enabled: true
+                },
                 startWithAudioMuted,
                 startWithVideoMuted
             }));

react/features/prejoin/functions.js

@@ -148,7 +148,7 @@ export function isJoinByPhoneDialogVisible(state: Object): boolean {
  */
 export function isPrejoinPageEnabled(state: Object): boolean {
     return navigator.product !== 'ReactNative'
-        && state['features/base/config'].prejoinPageEnabled
+        && state['features/base/config'].prejoinConfig?.enabled
         && !state['features/base/settings'].userSelectedSkipPrejoin
         && !(state['features/base/config'].enableForcedReload && state['features/prejoin'].skipPrejoinOnReload);
 }

react/features/settings/functions.js

@@ -99,7 +99,7 @@ export function getMoreTabProps(stateful: Object | Function) {
         languages: LANGUAGES,
         showLanguageSettings: configuredTabs.includes('language'),
         showPrejoinPage: !state['features/base/settings'].userSelectedSkipPrejoin,
-        showPrejoinSettings: state['features/base/config'].prejoinPageEnabled
+        showPrejoinSettings: state['features/base/config'].prejoinConfig?.enabled
     };
 }