feat(prejoin) allow disabling prejoin display name editing (#11575)
This commit is contained in:
parent
40dd3e5193
commit
813b6fb794
|
@ -485,6 +485,11 @@ var config = {
|
||||||
// Hides add breakout room button
|
// Hides add breakout room button
|
||||||
// hideAddRoomButton: false,
|
// 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.
|
// Require users to always specify a display name.
|
||||||
// requireDisplayName: true,
|
// requireDisplayName: true,
|
||||||
|
|
||||||
|
|
|
@ -3,6 +3,19 @@
|
||||||
width: 100%;
|
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 {
|
&-error {
|
||||||
background-color: #E04757;
|
background-color: #E04757;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|
|
@ -167,6 +167,7 @@ export default [
|
||||||
'hideConferenceSubject',
|
'hideConferenceSubject',
|
||||||
'hideDisplayName',
|
'hideDisplayName',
|
||||||
'hideDominantSpeakerBadge',
|
'hideDominantSpeakerBadge',
|
||||||
|
'hidePrejoinDisplayName',
|
||||||
'hideRecordingLabel',
|
'hideRecordingLabel',
|
||||||
'hideParticipantsStats',
|
'hideParticipantsStats',
|
||||||
'hideConferenceTimer',
|
'hideConferenceTimer',
|
||||||
|
|
|
@ -3,11 +3,13 @@
|
||||||
import InlineDialog from '@atlaskit/inline-dialog';
|
import InlineDialog from '@atlaskit/inline-dialog';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
import { Avatar } from '../../base/avatar';
|
||||||
import { getRoomName } from '../../base/conference';
|
import { getRoomName } from '../../base/conference';
|
||||||
import { isNameReadOnly } from '../../base/config';
|
import { isNameReadOnly } from '../../base/config';
|
||||||
import { translate } from '../../base/i18n';
|
import { translate } from '../../base/i18n';
|
||||||
import { IconArrowDown, IconArrowUp, IconPhone, IconVolumeOff } from '../../base/icons';
|
import { IconArrowDown, IconArrowUp, IconPhone, IconVolumeOff } from '../../base/icons';
|
||||||
import { isVideoMutedByUser } from '../../base/media';
|
import { isVideoMutedByUser } from '../../base/media';
|
||||||
|
import { getLocalParticipant } from '../../base/participants';
|
||||||
import { ActionButton, InputField, PreMeetingScreen } from '../../base/premeeting';
|
import { ActionButton, InputField, PreMeetingScreen } from '../../base/premeeting';
|
||||||
import { connect } from '../../base/redux';
|
import { connect } from '../../base/redux';
|
||||||
import { getDisplayName, updateSettings } from '../../base/settings';
|
import { getDisplayName, updateSettings } from '../../base/settings';
|
||||||
|
@ -21,7 +23,8 @@ import {
|
||||||
isDeviceStatusVisible,
|
isDeviceStatusVisible,
|
||||||
isDisplayNameRequired,
|
isDisplayNameRequired,
|
||||||
isJoinByPhoneButtonVisible,
|
isJoinByPhoneButtonVisible,
|
||||||
isJoinByPhoneDialogVisible
|
isJoinByPhoneDialogVisible,
|
||||||
|
isPrejoinDisplayNameVisible
|
||||||
} from '../functions';
|
} from '../functions';
|
||||||
|
|
||||||
import DropdownButton from './DropdownButton';
|
import DropdownButton from './DropdownButton';
|
||||||
|
@ -29,6 +32,11 @@ import JoinByPhoneDialog from './dialogs/JoinByPhoneDialog';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Indicates whether the display name is editable.
|
||||||
|
*/
|
||||||
|
canEditDisplayName: boolean,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Flag signaling if the device status is visible or not.
|
* Flag signaling if the device status is visible or not.
|
||||||
*/
|
*/
|
||||||
|
@ -59,6 +67,11 @@ type Props = {
|
||||||
*/
|
*/
|
||||||
updateSettings: Function,
|
updateSettings: Function,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Local participant id.
|
||||||
|
*/
|
||||||
|
participantId: string,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The prejoin config.
|
* The prejoin config.
|
||||||
*/
|
*/
|
||||||
|
@ -145,6 +158,8 @@ class Prejoin extends Component<Props, State> {
|
||||||
this._showDialogKeyPress = this._showDialogKeyPress.bind(this);
|
this._showDialogKeyPress = this._showDialogKeyPress.bind(this);
|
||||||
this._onJoinKeyPress = this._onJoinKeyPress.bind(this);
|
this._onJoinKeyPress = this._onJoinKeyPress.bind(this);
|
||||||
this._getExtraJoinButtons = this._getExtraJoinButtons.bind(this);
|
this._getExtraJoinButtons = this._getExtraJoinButtons.bind(this);
|
||||||
|
|
||||||
|
this.showDisplayNameField = props.canEditDisplayName || props.showErrorOnJoin;
|
||||||
}
|
}
|
||||||
_onJoinButtonClick: () => void;
|
_onJoinButtonClick: () => void;
|
||||||
|
|
||||||
|
@ -330,6 +345,7 @@ class Prejoin extends Component<Props, State> {
|
||||||
joinConference,
|
joinConference,
|
||||||
joinConferenceWithoutAudio,
|
joinConferenceWithoutAudio,
|
||||||
name,
|
name,
|
||||||
|
participantId,
|
||||||
prejoinConfig,
|
prejoinConfig,
|
||||||
readOnlyName,
|
readOnlyName,
|
||||||
showCameraPreview,
|
showCameraPreview,
|
||||||
|
@ -360,7 +376,7 @@ class Prejoin extends Component<Props, State> {
|
||||||
<div
|
<div
|
||||||
className = 'prejoin-input-area'
|
className = 'prejoin-input-area'
|
||||||
data-testid = 'prejoin.screen'>
|
data-testid = 'prejoin.screen'>
|
||||||
<InputField
|
{this.showDisplayNameField ? (<InputField
|
||||||
autoComplete = { 'name' }
|
autoComplete = { 'name' }
|
||||||
autoFocus = { true }
|
autoFocus = { true }
|
||||||
className = { showError ? 'error' : '' }
|
className = { showError ? 'error' : '' }
|
||||||
|
@ -370,6 +386,16 @@ class Prejoin extends Component<Props, State> {
|
||||||
placeHolder = { t('dialog.enterDisplayName') }
|
placeHolder = { t('dialog.enterDisplayName') }
|
||||||
readOnly = { readOnlyName }
|
readOnly = { readOnlyName }
|
||||||
value = { name } />
|
value = { name } />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Avatar
|
||||||
|
className = 'prejoin-avatar'
|
||||||
|
displayName = { name }
|
||||||
|
participantId = { participantId }
|
||||||
|
size = { 72 } />
|
||||||
|
<div className = 'prejoin-avatar-name'>{name}</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
{showError && <div
|
{showError && <div
|
||||||
className = 'prejoin-error'
|
className = 'prejoin-error'
|
||||||
|
@ -423,18 +449,21 @@ class Prejoin extends Component<Props, State> {
|
||||||
function mapStateToProps(state): Object {
|
function mapStateToProps(state): Object {
|
||||||
const name = getDisplayName(state);
|
const name = getDisplayName(state);
|
||||||
const showErrorOnJoin = isDisplayNameRequired(state) && !name;
|
const showErrorOnJoin = isDisplayNameRequired(state) && !name;
|
||||||
|
const { id: participantId } = getLocalParticipant(state);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name,
|
canEditDisplayName: isPrejoinDisplayNameVisible(state),
|
||||||
deviceStatusVisible: isDeviceStatusVisible(state),
|
deviceStatusVisible: isDeviceStatusVisible(state),
|
||||||
|
hasJoinByPhoneButton: isJoinByPhoneButtonVisible(state),
|
||||||
|
name,
|
||||||
|
participantId,
|
||||||
|
prejoinConfig: state['features/base/config'].prejoinConfig,
|
||||||
|
readOnlyName: isNameReadOnly(state),
|
||||||
roomName: getRoomName(state),
|
roomName: getRoomName(state),
|
||||||
|
showCameraPreview: !isVideoMutedByUser(state),
|
||||||
showDialog: isJoinByPhoneDialogVisible(state),
|
showDialog: isJoinByPhoneDialogVisible(state),
|
||||||
showErrorOnJoin,
|
showErrorOnJoin,
|
||||||
hasJoinByPhoneButton: isJoinByPhoneButtonVisible(state),
|
videoTrack: getLocalJitsiVideoTrack(state)
|
||||||
readOnlyName: isNameReadOnly(state),
|
|
||||||
showCameraPreview: !isVideoMutedByUser(state),
|
|
||||||
videoTrack: getLocalJitsiVideoTrack(state),
|
|
||||||
prejoinConfig: state['features/base/config'].prejoinConfig
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -36,6 +36,16 @@ export function isDisplayNameRequired(state: Object): boolean {
|
||||||
|| state['features/base/config'].requireDisplayName;
|
|| 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.
|
* Returns the text for the prejoin status bar.
|
||||||
*
|
*
|
||||||
|
|
Loading…
Reference in New Issue