fix(prejoin): Make display name mandatory only for lobby

A user should not be forced to enter a display name if the lobby is not enabled
for the room.

connection.js

@@ -13,6 +13,7 @@ import {
     JitsiConnectionErrors,
     JitsiConnectionEvents
 } from './react/features/base/lib-jitsi-meet';
+import { setPrejoinDisplayNameRequired } from './react/features/prejoin/actions';
 
 const logger = Logger.getLogger(__filename);
 
@@ -113,6 +114,10 @@ function connect(id, password, roomName) {
         connection.addEventListener(
             JitsiConnectionEvents.CONNECTION_FAILED,
             connectionFailedHandler);
+        connection.addEventListener(
+            JitsiConnectionEvents.DISPLAY_NAME_REQUIRED,
+            displayNameRequiredHandler
+        );
 
         /* eslint-disable max-params */
         /**
@@ -166,6 +171,14 @@ function connect(id, password, roomName) {
             reject(err);
         }
 
+        /**
+         * Marks the display name for the prejoin screen as required.
+         * This can happen if a user tries to join a room with lobby enabled.
+         */
+        function displayNameRequiredHandler() {
+            APP.store.dispatch(setPrejoinDisplayNameRequired());
+        }
+
         checkForAttachParametersAndConnect(id, password, connection);
     });
 }

react/features/prejoin/actionTypes.js

@@ -14,6 +14,11 @@ export const SET_DEVICE_STATUS = 'SET_DEVICE_STATUS';
  */
 export const SET_SKIP_PREJOIN = 'SET_SKIP_PREJOIN';
 
+/**
+ * Action type used to set the mandatory stance of the prejoin display name.
+ */
+export const SET_PREJOIN_DISPLAY_NAME_REQUIRED = 'SET_PREJOIN_DISPLAY_NAME_REQUIRED';
+
 /**
  * Action type to set the country to dial out to.
  */

react/features/prejoin/actions.js

@@ -21,6 +21,7 @@ import {
     SET_DIALOUT_COUNTRY,
     SET_DIALOUT_NUMBER,
     SET_DIALOUT_STATUS,
+    SET_PREJOIN_DISPLAY_NAME_REQUIRED,
     SET_SKIP_PREJOIN,
     SET_JOIN_BY_PHONE_DIALOG_VISIBLITY,
     SET_PREJOIN_DEVICE_ERRORS,
@@ -342,6 +343,17 @@ export function setDialOutCountry(value: Object) {
     };
 }
 
+/**
+ * Action used to set the stance of the display name.
+ *
+ * @returns {Object}
+ */
+export function setPrejoinDisplayNameRequired() {
+    return {
+        type: SET_PREJOIN_DISPLAY_NAME_REQUIRED
+    };
+}
+
 /**
  * Action used to set the dial out number.
  *

react/features/prejoin/components/Prejoin.js

@@ -18,8 +18,9 @@ import {
     setJoinByPhoneDialogVisiblity as setJoinByPhoneDialogVisiblityAction
 } from '../actions';
 import {
-    isJoinByPhoneButtonVisible,
     isDeviceStatusVisible,
+    isDisplayNameRequired,
+    isJoinByPhoneButtonVisible,
     isJoinByPhoneDialogVisible
 } from '../functions';
 
@@ -38,6 +39,11 @@ type Props = {
      */
     hasJoinByPhoneButton: boolean,
 
+    /**
+     * If join button is disabled or not.
+     */
+    joinButtonDisabled: boolean,
+
     /**
      * Joins the current meeting.
      */
@@ -212,6 +218,7 @@ class Prejoin extends Component<Props, State> {
      */
     render() {
         const {
+            joinButtonDisabled,
             hasJoinByPhoneButton,
             joinConference,
             joinConferenceWithoutAudio,
@@ -265,7 +272,7 @@ class Prejoin extends Component<Props, State> {
                                 isOpen = { showJoinByPhoneButtons }
                                 onClose = { _onDropdownClose }>
                                 <ActionButton
-                                    disabled = { !name }
+                                    disabled = { joinButtonDisabled }
                                     hasOptions = { true }
                                     onClick = { joinConference }
                                     onOptionsClick = { _onOptionsClick }
@@ -310,9 +317,13 @@ class Prejoin extends Component<Props, State> {
  * @returns {Object}
  */
 function mapStateToProps(state): Object {
+    const name = getDisplayName(state);
+    const joinButtonDisabled = isDisplayNameRequired(state) && !name;
+
     return {
+        joinButtonDisabled,
+        name,
         deviceStatusVisible: isDeviceStatusVisible(state),
-        name: getDisplayName(state),
         roomName: getRoomName(state),
         showDialog: isJoinByPhoneDialogVisible(state),
         hasJoinByPhoneButton: isJoinByPhoneButtonVisible(state),

react/features/prejoin/functions.js

@@ -25,6 +25,17 @@ export function isDeviceStatusVisible(state: Object): boolean {
     && !state['features/base/config'].startSilent;
 }
 
+/**
+ * Selector for determining if the display name is mandatory.
+ *
+ * @param {Object} state - The state of the app.
+ * @returns {boolean}
+ */
+export function isDisplayNameRequired(state: Object): boolean {
+    return state['features/prejoin'].isDisplayNameRequired
+        || state['features/base/config'].requireDisplayName;
+}
+
 /**
  * Returns the text for the prejoin status bar.
  *

react/features/prejoin/reducer.js

@@ -2,13 +2,14 @@ import { ReducerRegistry } from '../base/redux';
 
 import {
     SET_DEVICE_STATUS,
-    SET_DIALOUT_NUMBER,
     SET_DIALOUT_COUNTRY,
+    SET_DIALOUT_NUMBER,
     SET_DIALOUT_STATUS,
     SET_JOIN_BY_PHONE_DIALOG_VISIBLITY,
-    SET_SKIP_PREJOIN,
     SET_PREJOIN_DEVICE_ERRORS,
-    SET_PREJOIN_PAGE_VISIBILITY
+    SET_PREJOIN_DISPLAY_NAME_REQUIRED,
+    SET_PREJOIN_PAGE_VISIBILITY,
+    SET_SKIP_PREJOIN
 } from './actionTypes';
 
 const DEFAULT_STATE = {
@@ -22,6 +23,7 @@ const DEFAULT_STATE = {
     },
     dialOutNumber: '',
     dialOutStatus: 'prejoin.dialing',
+    isDisplayNameRequired: false,
     name: '',
     rawError: '',
     showPrejoin: true,
@@ -94,6 +96,13 @@ ReducerRegistry.register(
             };
         }
 
+        case SET_PREJOIN_DISPLAY_NAME_REQUIRED: {
+            return {
+                ...state,
+                isDisplayNameRequired: true
+            };
+        }
+
         default:
             return state;
         }