From 10e5b2f572f95044beb5b6a14e53e592a0397b0a Mon Sep 17 00:00:00 2001 From: Horatiu Muresan <39557534+horymury@users.noreply.github.com> Date: Wed, 8 Dec 2021 09:53:19 +0200 Subject: [PATCH] feat(prejoin) Add possibility to hide extra join options buttons (#10434) --- config.js | 10 ++- react/features/base/config/configWhitelist.js | 1 + react/features/base/config/reducer.js | 7 ++ .../prejoin/components/DropdownButton.js | 2 +- react/features/prejoin/components/Prejoin.js | 78 +++++++++++++++---- .../features/prejoin/components/PrejoinApp.js | 4 +- react/features/prejoin/functions.js | 2 +- react/features/settings/functions.js | 2 +- 8 files changed, 83 insertions(+), 23 deletions(-) diff --git a/config.js b/config.js index d33151c8a..2923079e8 100644 --- a/config.js +++ b/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.) diff --git a/react/features/base/config/configWhitelist.js b/react/features/base/config/configWhitelist.js index 3bb7e8d51..f6b530964 100644 --- a/react/features/base/config/configWhitelist.js +++ b/react/features/base/config/configWhitelist.js @@ -183,6 +183,7 @@ export default [ 'pcStatsInterval', 'preferH264', 'preferredCodec', + 'prejoinConfig', 'prejoinPageEnabled', 'requireDisplayName', 'remoteVideoMenu', diff --git a/react/features/base/config/reducer.js b/react/features/base/config/reducer.js index ead2adc6c..22bec92ec 100644 --- a/react/features/base/config/reducer.js +++ b/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) { diff --git a/react/features/prejoin/components/DropdownButton.js b/react/features/prejoin/components/DropdownButton.js index a09c39603..cc0d62248 100644 --- a/react/features/prejoin/components/DropdownButton.js +++ b/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, diff --git a/react/features/prejoin/components/Prejoin.js b/react/features/prejoin/components/Prejoin.js index a395c4aa0..fde78aa6b 100644 --- a/react/features/prejoin/components/Prejoin.js +++ b/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 { 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 { } } + _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 { joinConference, joinConferenceWithoutAudio, name, + prejoinConfig, readOnlyName, showCameraPreview, showDialog, t, videoTrack } = this.props; + const { _closeDialog, _onDropdownClose, _onJoinButtonClick, _onJoinKeyPress, + _onOptionsClick, _setName } = this; - const { _closeDialog, _onDropdownClose, _onJoinButtonClick, _onJoinKeyPress, _showDialogKeyPress, - _onJoinConferenceWithoutAudioKeyPress, _onOptionsClick, _setName, _showDialog } = this; + const extraJoinButtons = this._getExtraJoinButtons(); + let extraButtonsToRender = Object.values(extraJoinButtons).filter((val: Object) => + !(prejoinConfig?.hideExtraJoinButtons || []).includes(val.key) + ); + + 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 {
- - {hasJoinByPhoneButton && } + content = { hasExtraJoinButtons &&
+ {extraButtonsToRender.map(({ key, ...rest }: Object) => ( + + ))}
} isOpen = { showJoinByPhoneButtons } onClose = { _onDropdownClose }> @@ -348,7 +391,7 @@ class Prejoin extends Component { 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 }; } diff --git a/react/features/prejoin/components/PrejoinApp.js b/react/features/prejoin/components/PrejoinApp.js index 487aea5fa..f6b676bd0 100644 --- a/react/features/prejoin/components/PrejoinApp.js +++ b/react/features/prejoin/components/PrejoinApp.js @@ -54,7 +54,9 @@ export default class PrejoinApp extends BaseApp { const { startWithAudioMuted, startWithVideoMuted } = store.getState()['features/base/settings']; dispatch(setConfig({ - prejoinPageEnabled: true, + prejoinConfig: { + enabled: true + }, startWithAudioMuted, startWithVideoMuted })); diff --git a/react/features/prejoin/functions.js b/react/features/prejoin/functions.js index 6b25fceca..94dc74abf 100644 --- a/react/features/prejoin/functions.js +++ b/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); } diff --git a/react/features/settings/functions.js b/react/features/settings/functions.js index f05c8e1cc..8355c9ed1 100644 --- a/react/features/settings/functions.js +++ b/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 }; }