feat(prejoin): Add settings options for prejoin page

css/modals/settings/_settings.scss

@@ -30,10 +30,12 @@
         width: 100%;
     }
 
-    .profile-edit-field,
-    .settings-sub-pane {
+    .profile-edit-field {
         flex: 1;
     }
+    .settings-sub-pane {
+        flex-grow: 1;
+    }
 
     .profile-edit-field {
         margin-right: 20px;

lang/main.json

@@ -501,6 +501,7 @@
         "audioAndVideoError": "Audio and video error:",
         "audioOnlyError": "Audio error:",
         "audioTrackError": "Could not create audio track.",
+        "calling": "Calling",
         "callMe": "Call me",
         "callMeAtNumber": "Call me at this number:",
         "configuringDevices": "Configuring devices...",
@@ -524,7 +525,8 @@
         "linkCopied": "Link copied to clipboard",
         "lookGood": "It sounds like your microphone is working properly",
         "or": "or",
-        "calling": "Calling",
+        "premeeting": "Pre meeting",
+        "showScreen": "Enable pre meeting screen",
         "startWithPhone": "Start with phone audio",
         "screenSharingError": "Screen sharing error:",
         "videoOnlyError": "Video error:",
@@ -869,7 +871,7 @@
         "header": "Help center"
     },
     "lobby": {
-        "knockingParticipantList" : "Knocking participant list",
+        "knockingParticipantList": "Knocking participant list",
         "allow": "Allow",
         "backToKnockModeButton": "No password, ask to join instead",
         "dialogTitle": "Lobby mode",

react/features/settings/actions.js

@@ -3,6 +3,8 @@
 import { setFollowMe, setStartMutedPolicy } from '../base/conference';
 import { openDialog } from '../base/dialog';
 import { i18next } from '../base/i18n';
+import { updateSettings } from '../base/settings';
+import { setPrejoinPageVisibility } from '../prejoin';
 
 import {
     SET_AUDIO_SETTINGS_VISIBILITY,
@@ -64,6 +66,19 @@ export function submitMoreTab(newState: Object): Function {
             dispatch(setFollowMe(newState.followMeEnabled));
         }
 
+        const showPrejoinPage = newState.showPrejoinPage;
+
+        if (showPrejoinPage !== currentState.showPrejoinPage) {
+            // The 'showPrejoin' flag starts as 'true' on every new session.
+            // This prevents displaying the prejoin page when the user re-enables it.
+            if (showPrejoinPage && getState()['features/prejoin']?.showPrejoin) {
+                dispatch(setPrejoinPageVisibility(false));
+            }
+            dispatch(updateSettings({
+                userSelectedSkipPrejoin: !showPrejoinPage
+            }));
+        }
+
         if (newState.startAudioMuted !== currentState.startAudioMuted
             || newState.startVideoMuted !== currentState.startVideoMuted) {
             dispatch(setStartMutedPolicy(

react/features/settings/components/web/MoreTab.js

@@ -48,6 +48,16 @@ export type Props = {
      */
     showModeratorSettings: boolean,
 
+    /**
+     * Whether or not to display the prejoin settings section.
+     */
+    showPrejoinSettings: boolean,
+
+    /**
+     * Whether or not to show prejoin screen.
+     */
+    showPrejoinPage: boolean,
+
     /**
      * Whether or not the user has selected the Start Audio Muted feature to be
      * enabled.
@@ -108,9 +118,13 @@ class MoreTab extends AbstractDialogTab<Props, State> {
      * @returns {ReactElement}
      */
     render() {
-        const { showModeratorSettings, showLanguageSettings } = this.props;
+        const { showModeratorSettings, showLanguageSettings, showPrejoinSettings } = this.props;
         const content = [];
 
+        if (showPrejoinSettings) {
+            content.push(this._renderPrejoinScreenSettings());
+        }
+
         if (showModeratorSettings) {
             content.push(this._renderModeratorSettings());
         }
@@ -239,6 +253,35 @@ class MoreTab extends AbstractDialogTab<Props, State> {
             </div>
         );
     }
+
+    /**
+     * Returns the React Element for modifying prejoin screen settings.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderPrejoinScreenSettings() {
+        const { t, showPrejoinPage } = this.props;
+
+        return (
+            <div
+                className = 'settings-sub-pane'
+                key = 'prejoin-screen'>
+                <div className = 'mock-atlaskit-label'>
+                    { t('prejoin.premeeting') }
+                </div>
+                <Checkbox
+                    isChecked = { showPrejoinPage }
+                    label = { t('prejoin.showScreen') }
+                    name = 'show-prejoin-page'
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onChange = {
+                        ({ target: { checked } }) =>
+                            super._onChange({ showPrejoinPage: checked })
+                    } />
+            </div>
+        );
+    }
 }
 
 export default translate(MoreTab);

react/features/settings/components/web/SettingsDialog.js

@@ -131,7 +131,7 @@ function _mapStateToProps(state) {
     // The settings sections to display.
     const showDeviceSettings = configuredTabs.includes('devices');
     const moreTabProps = getMoreTabProps(state);
-    const { showModeratorSettings, showLanguageSettings } = moreTabProps;
+    const { showModeratorSettings, showLanguageSettings, showPrejoinSettings } = moreTabProps;
     const showProfileSettings
         = configuredTabs.includes('profile') && jwt.isGuest;
     const showCalendarSettings
@@ -184,7 +184,7 @@ function _mapStateToProps(state) {
         });
     }
 
-    if (showModeratorSettings || showLanguageSettings) {
+    if (showModeratorSettings || showLanguageSettings || showPrejoinSettings) {
         tabs.push({
             name: SETTINGS_TABS.MORE,
             component: MoreTab,
@@ -197,6 +197,7 @@ function _mapStateToProps(state) {
                     ...newProps,
                     currentLanguage: tabState.currentLanguage,
                     followMeEnabled: tabState.followMeEnabled,
+                    showPrejoinPage: tabState.showPrejoinPage,
                     startAudioMuted: tabState.startAudioMuted,
                     startVideoMuted: tabState.startVideoMuted
                 };

react/features/settings/functions.js

@@ -118,6 +118,8 @@ export function getMoreTabProps(stateful: Object | Function) {
         languages: LANGUAGES,
         showLanguageSettings: configuredTabs.includes('language'),
         showModeratorSettings,
+        showPrejoinSettings: state['features/base/config'].prejoinPageEnabled,
+        showPrejoinPage: !state['features/base/settings'].userSelectedSkipPrejoin,
         startAudioMuted: Boolean(conference && startAudioMutedPolicy),
         startVideoMuted: Boolean(conference && startVideoMutedPolicy)
     };