haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(prejoin) Add possibility to hide extra join options buttons (#10434)

This commit is contained in:
Horatiu Muresan 2021-12-08 09:53:19 +02:00 committed by GitHub
parent 81e9d01921
commit 10e5b2f572
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 83 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
config.js
View File

@ -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.)

1
react/features/base/config/configWhitelist.js
View File

@ -183,6 +183,7 @@ export default [
'pcStatsInterval',
'preferH264',
'preferredCodec',
'prejoinConfig',
'prejoinPageEnabled',
'requireDisplayName',
'remoteVideoMenu',

7
react/features/base/config/reducer.js
View File

@ -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) {

2
react/features/prejoin/components/DropdownButton.js
View File

@ -59,7 +59,7 @@ const styles = theme => {
display: 'flex',
height: 40,
fontSize: 15,
lineHeight: 24,
lineHeight: '24px',
padding: '0 16px',
backgroundColor: theme.palette.field02,

76
react/features/prejoin/components/Prejoin.js
View File

@ -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<Props, State> {
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<Props, State> {
}
}
_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<Props, State> {
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<Props, State> {
<div className = 'prejoin-preview-dropdown-container'>
<InlineDialog
content = { <div className = 'prejoin-preview-dropdown-btns'>
content = { hasExtraJoinButtons && <div className = 'prejoin-preview-dropdown-btns'>
{extraButtonsToRender.map(({ key, ...rest }: Object) => (
<DropdownButton
dataTestId = 'prejoin.joinWithoutAudio'
icon = { IconVolumeOff }
label = { t('prejoin.joinWithoutAudio') }
onButtonClick = { joinConferenceWithoutAudio }
onKeyPressed = { _onJoinConferenceWithoutAudioKeyPress } />
{hasJoinByPhoneButton && <DropdownButton
dataTestId = 'prejoin.joinByPhone'
icon = { IconPhone }
label = { t('prejoin.joinAudioByPhone') }
onButtonClick = { _showDialog }
onKeyPressed = { _showDialogKeyPress } />}
key = { key }
{ ...rest } />
))}
</div> }
isOpen = { showJoinByPhoneButtons }
onClose = { _onDropdownClose }>
@ -348,7 +391,7 @@ class Prejoin extends Component<Props, State> {
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
};
}

4
react/features/prejoin/components/PrejoinApp.js
View File

@ -54,7 +54,9 @@ export default class PrejoinApp extends BaseApp<Props> {
const { startWithAudioMuted, startWithVideoMuted } = store.getState()['features/base/settings'];
dispatch(setConfig({
prejoinPageEnabled: true,
prejoinConfig: {
enabled: true
},
startWithAudioMuted,
startWithVideoMuted
}));

2
react/features/prejoin/functions.js
View File

@ -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);
}

2
react/features/settings/functions.js
View File

@ -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
};
}