feat(prejoin) allow disabling prejoin display name editing (#11575)

config.js

@@ -485,6 +485,11 @@ var config = {
     // Hides add breakout room button
     // hideAddRoomButton: false,
 
+    // Hides the participant name editing field in the prejoin screen.
+    // If requireDisplayName is also set as true, a name should still be provided through
+    // either the jwt or the userInfo from the iframe api init object in order for this to have an effect.
+    // hidePrejoinDisplayName: false,
+
     // Require users to always specify a display name.
     // requireDisplayName: true,
 

css/premeeting/_prejoin.scss

@@ -3,6 +3,19 @@
         width: 100%;
     }
 
+    &-avatar {
+        margin: 8px auto 16px;
+
+        &-name {
+            color: white;
+            font-size: 16px;
+            font-weight: 600;
+            line-height: 26px;
+            margin-bottom: 32px;
+            text-align: center;
+        }
+    }
+
     &-error {
         background-color: #E04757;
         border-radius: 6px;

react/features/base/config/configWhitelist.js

@@ -167,6 +167,7 @@ export default [
     'hideConferenceSubject',
     'hideDisplayName',
     'hideDominantSpeakerBadge',
+    'hidePrejoinDisplayName',
     'hideRecordingLabel',
     'hideParticipantsStats',
     'hideConferenceTimer',

react/features/prejoin/components/Prejoin.js

@@ -3,11 +3,13 @@
 import InlineDialog from '@atlaskit/inline-dialog';
 import React, { Component } from 'react';
 
+import { Avatar } from '../../base/avatar';
 import { getRoomName } from '../../base/conference';
 import { isNameReadOnly } from '../../base/config';
 import { translate } from '../../base/i18n';
 import { IconArrowDown, IconArrowUp, IconPhone, IconVolumeOff } from '../../base/icons';
 import { isVideoMutedByUser } from '../../base/media';
+import { getLocalParticipant } from '../../base/participants';
 import { ActionButton, InputField, PreMeetingScreen } from '../../base/premeeting';
 import { connect } from '../../base/redux';
 import { getDisplayName, updateSettings } from '../../base/settings';
@@ -21,7 +23,8 @@ import {
     isDeviceStatusVisible,
     isDisplayNameRequired,
     isJoinByPhoneButtonVisible,
-    isJoinByPhoneDialogVisible
+    isJoinByPhoneDialogVisible,
+    isPrejoinDisplayNameVisible
 } from '../functions';
 
 import DropdownButton from './DropdownButton';
@@ -29,6 +32,11 @@ import JoinByPhoneDialog from './dialogs/JoinByPhoneDialog';
 
 type Props = {
 
+    /**
+     * Indicates whether the display  name is editable.
+     */
+    canEditDisplayName: boolean,
+
     /**
      * Flag signaling if the device status is visible or not.
      */
@@ -59,6 +67,11 @@ type Props = {
      */
     updateSettings: Function,
 
+    /**
+     * Local participant id.
+     */
+    participantId: string,
+
     /**
      * The prejoin config.
      */
@@ -145,6 +158,8 @@ class Prejoin extends Component<Props, State> {
         this._showDialogKeyPress = this._showDialogKeyPress.bind(this);
         this._onJoinKeyPress = this._onJoinKeyPress.bind(this);
         this._getExtraJoinButtons = this._getExtraJoinButtons.bind(this);
+
+        this.showDisplayNameField = props.canEditDisplayName || props.showErrorOnJoin;
     }
     _onJoinButtonClick: () => void;
 
@@ -330,6 +345,7 @@ class Prejoin extends Component<Props, State> {
             joinConference,
             joinConferenceWithoutAudio,
             name,
+            participantId,
             prejoinConfig,
             readOnlyName,
             showCameraPreview,
@@ -360,7 +376,7 @@ class Prejoin extends Component<Props, State> {
                 <div
                     className = 'prejoin-input-area'
                     data-testid = 'prejoin.screen'>
-                    <InputField
+                    {this.showDisplayNameField ? (<InputField
                         autoComplete = { 'name' }
                         autoFocus = { true }
                         className = { showError ? 'error' : '' }
@@ -370,6 +386,16 @@ class Prejoin extends Component<Props, State> {
                         placeHolder = { t('dialog.enterDisplayName') }
                         readOnly = { readOnlyName }
                         value = { name } />
+                    ) : (
+                        <>
+                            <Avatar
+                                className = 'prejoin-avatar'
+                                displayName = { name }
+                                participantId = { participantId }
+                                size = { 72 } />
+                            <div className = 'prejoin-avatar-name'>{name}</div>
+                        </>
+                    )}
 
                     {showError && <div
                         className = 'prejoin-error'
@@ -423,18 +449,21 @@ class Prejoin extends Component<Props, State> {
 function mapStateToProps(state): Object {
     const name = getDisplayName(state);
     const showErrorOnJoin = isDisplayNameRequired(state) && !name;
+    const { id: participantId } = getLocalParticipant(state);
 
     return {
-        name,
+        canEditDisplayName: isPrejoinDisplayNameVisible(state),
         deviceStatusVisible: isDeviceStatusVisible(state),
+        hasJoinByPhoneButton: isJoinByPhoneButtonVisible(state),
+        name,
+        participantId,
+        prejoinConfig: state['features/base/config'].prejoinConfig,
+        readOnlyName: isNameReadOnly(state),
         roomName: getRoomName(state),
+        showCameraPreview: !isVideoMutedByUser(state),
         showDialog: isJoinByPhoneDialogVisible(state),
         showErrorOnJoin,
-        hasJoinByPhoneButton: isJoinByPhoneButtonVisible(state),
-        readOnlyName: isNameReadOnly(state),
-        showCameraPreview: !isVideoMutedByUser(state),
-        videoTrack: getLocalJitsiVideoTrack(state),
-        prejoinConfig: state['features/base/config'].prejoinConfig
+        videoTrack: getLocalJitsiVideoTrack(state)
     };
 }
 

react/features/prejoin/functions.js

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