From 7b8b911feecdbc9e284fdc20226c095129d6922f Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Fri, 3 Mar 2023 13:48:17 +0200 Subject: [PATCH] feat(shortcuts) Update dialog (#12993) Create Shortcuts tab in Settings Dialog Move keyboard shortcut option from More to this tab Move shortcuts info from KeyboardShortcuts dialog to this tab Remove KeyboardShortcuts dialog --- lang/main.json | 1 + modules/keyboardshortcut/keyboardshortcut.js | 15 +- react/features/app/middlewares.web.ts | 1 - .../base/ui/components/web/DialogWithTabs.tsx | 1 + .../keyboard-shortcuts/actionTypes.ts | 10 - react/features/keyboard-shortcuts/actions.ts | 14 -- .../components/web/KeyboardShortcutsButton.js | 5 +- .../web/KeyboardShortcutsDialog.tsx | 102 ---------- .../components/web/index.js | 1 - react/features/keyboard-shortcuts/index.js | 1 - .../features/keyboard-shortcuts/middleware.ts | 21 --- react/features/settings/actions.ts | 21 ++- .../settings/components/web/MoreTab.tsx | 42 ----- .../components/web/SettingsDialog.tsx | 35 +++- .../settings/components/web/ShortcutsTab.tsx | 174 ++++++++++++++++++ react/features/settings/constants.ts | 3 +- react/features/settings/functions.any.ts | 23 +++ 17 files changed, 264 insertions(+), 206 deletions(-) delete mode 100644 react/features/keyboard-shortcuts/actionTypes.ts delete mode 100644 react/features/keyboard-shortcuts/actions.ts delete mode 100644 react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx delete mode 100644 react/features/keyboard-shortcuts/middleware.ts create mode 100644 react/features/settings/components/web/ShortcutsTab.tsx diff --git a/lang/main.json b/lang/main.json index 8e0113709..7c60c96b6 100644 --- a/lang/main.json +++ b/lang/main.json @@ -1006,6 +1006,7 @@ "selectCamera": "Camera", "selectMic": "Microphone", "selfView": "Self view", + "shortcuts": "Shortcuts", "speakers": "Speakers", "startAudioMuted": "Everyone starts muted", "startReactionsMuted": "Mute reaction sounds for everyone", diff --git a/modules/keyboardshortcut/keyboardshortcut.js b/modules/keyboardshortcut/keyboardshortcut.js index a5ae76a30..24e8ce061 100644 --- a/modules/keyboardshortcut/keyboardshortcut.js +++ b/modules/keyboardshortcut/keyboardshortcut.js @@ -8,10 +8,9 @@ import { createShortcutEvent, sendAnalytics } from '../../react/features/analytics'; -import { toggleDialog } from '../../react/features/base/dialog'; import { clickOnVideo } from '../../react/features/filmstrip/actions'; -import { KeyboardShortcutsDialog } - from '../../react/features/keyboard-shortcuts'; +import { openSettingsDialog } from '../../react/features/settings/actions'; +import { SETTINGS_TABS } from '../../react/features/settings/constants'; const logger = Logger.getLogger(__filename); @@ -120,15 +119,17 @@ const KeyboardShortcut = { return jitsiLocalStorage.getItem(_enableShortcutsKey) === 'false' ? false : true; }, + getShortcutsDescriptions() { + return _shortcutsHelp; + }, + /** - * Opens the {@KeyboardShortcutsDialog} dialog. + * Opens the {@SettingsDialog} dialog on the Shortcuts page. * * @returns {void} */ openDialog() { - APP.store.dispatch(toggleDialog(KeyboardShortcutsDialog, { - shortcutDescriptions: _shortcutsHelp - })); + APP.store.dispatch(openSettingsDialog(SETTINGS_TABS.SHORTCUTS, false)); }, /** diff --git a/react/features/app/middlewares.web.ts b/react/features/app/middlewares.web.ts index 78d9de84b..4dd3def56 100644 --- a/react/features/app/middlewares.web.ts +++ b/react/features/app/middlewares.web.ts @@ -5,7 +5,6 @@ import '../base/media/middleware'; import '../dynamic-branding/middleware'; import '../e2ee/middleware'; import '../external-api/middleware'; -import '../keyboard-shortcuts/middleware'; import '../no-audio-signal/middleware'; import '../notifications/middleware'; import '../noise-detection/middleware'; diff --git a/react/features/base/ui/components/web/DialogWithTabs.tsx b/react/features/base/ui/components/web/DialogWithTabs.tsx index 953ca47fd..c798169d8 100644 --- a/react/features/base/ui/components/web/DialogWithTabs.tsx +++ b/react/features/base/ui/components/web/DialogWithTabs.tsx @@ -131,6 +131,7 @@ const useStyles = makeStyles()(theme => { footer: { justifyContent: 'flex-end', + paddingTop: theme.spacing(4), '& button:last-child': { marginLeft: '16px' diff --git a/react/features/keyboard-shortcuts/actionTypes.ts b/react/features/keyboard-shortcuts/actionTypes.ts deleted file mode 100644 index 9cdd3f003..000000000 --- a/react/features/keyboard-shortcuts/actionTypes.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * The type of the action which signals the keyboard shortcuts dialog should - * be displayed. - * - * { - * type: OPEN_KEYBOARD_SHORTCUTS_DIALOG - * } - */ -export const OPEN_KEYBOARD_SHORTCUTS_DIALOG - = 'OPEN_KEYBOARD_SHORTCUTS_DIALOG'; diff --git a/react/features/keyboard-shortcuts/actions.ts b/react/features/keyboard-shortcuts/actions.ts deleted file mode 100644 index 8611e27de..000000000 --- a/react/features/keyboard-shortcuts/actions.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { OPEN_KEYBOARD_SHORTCUTS_DIALOG } from './actionTypes'; - -/** - * Opens the dialog showing available keyboard shortcuts. - * - * @returns {{ - * type: OPEN_KEYBOARD_SHORTCUTS_DIALOG - * }} - */ -export function openKeyboardShortcutsDialog() { - return { - type: OPEN_KEYBOARD_SHORTCUTS_DIALOG - }; -} diff --git a/react/features/keyboard-shortcuts/components/web/KeyboardShortcutsButton.js b/react/features/keyboard-shortcuts/components/web/KeyboardShortcutsButton.js index 2e57989c1..1252978c7 100644 --- a/react/features/keyboard-shortcuts/components/web/KeyboardShortcutsButton.js +++ b/react/features/keyboard-shortcuts/components/web/KeyboardShortcutsButton.js @@ -5,7 +5,8 @@ import { translate } from '../../../base/i18n'; import { IconShortcuts } from '../../../base/icons'; import { connect } from '../../../base/redux'; import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components'; -import { openKeyboardShortcutsDialog } from '../../actions'; +import { openSettingsDialog } from '../../../settings/actions'; +import { SETTINGS_TABS } from '../../../settings/constants'; /** * The type of the React {@code Component} props of {@link KeyboardShortcutsButton}. @@ -37,7 +38,7 @@ class KeyboardShortcutsButton extends AbstractButton { const { dispatch } = this.props; sendAnalytics(createToolbarEvent('shortcuts')); - dispatch(openKeyboardShortcutsDialog()); + dispatch(openSettingsDialog(SETTINGS_TABS.SHORTCUTS)); } } diff --git a/react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx b/react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx deleted file mode 100644 index d0a5b8411..000000000 --- a/react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { makeStyles } from 'tss-react/mui'; - -import { withPixelLineHeight } from '../../../base/styles/functions.web'; -import Dialog from '../../../base/ui/components/web/Dialog'; - -/** - * The type of the React {@code Component} props of - * {@link KeyboardShortcutsDialog}. - */ -interface IProps { - - /** - * A Map with keyboard keys as keys and translation keys as values. - */ - shortcutDescriptions: Map; -} - -/** - * Creates the styles for the component. - * - * @param {Object} theme - The current UI theme. - * - * @returns {Object} - */ -const useStyles = makeStyles()(theme => { - return { - list: { - listStyleType: 'none', - padding: 0, - - '& .shortcuts-list__item': { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - padding: `${theme.spacing(1)} 0`, - ...withPixelLineHeight(theme.typography.bodyShortRegular), - color: theme.palette.text01 - }, - - '& .item-action': { - backgroundColor: theme.palette.ui04, - ...withPixelLineHeight(theme.typography.labelBold), - padding: `${theme.spacing(1)} ${theme.spacing(2)}`, - borderRadius: `${Number(theme.shape.borderRadius) / 2}px` - } - } - }; -}); - -const KeyboardShortcutsDialog = ({ shortcutDescriptions }: IProps) => { - const { classes, cx } = useStyles(); - const { t } = useTranslation(); - - // eslint-disable-next-line react/no-multi-comp - const _renderShortcutsListItem = (keyboardKey: string, translationKey: string) => { - let modifierKey = 'Alt'; - - if (window.navigator?.platform) { - if (window.navigator.platform.indexOf('Mac') !== -1) { - modifierKey = '⌥'; - } - } - - return ( -
  • - - {t(translationKey)} - - - {keyboardKey.startsWith(':') - ? `${modifierKey} + ${keyboardKey.slice(1)}` - : keyboardKey} - -
    • - ); - }; - - return ( - -
    -
      - {Array.from(shortcutDescriptions) - .map(description => _renderShortcutsListItem(...description))} -
    -
    -     - ); -}; - -export default KeyboardShortcutsDialog; diff --git a/react/features/keyboard-shortcuts/components/web/index.js b/react/features/keyboard-shortcuts/components/web/index.js index 25f84920e..79228ddf1 100644 --- a/react/features/keyboard-shortcuts/components/web/index.js +++ b/react/features/keyboard-shortcuts/components/web/index.js @@ -1,2 +1 @@ export { default as KeyboardShortcutsButton } from './KeyboardShortcutsButton'; -export { default as KeyboardShortcutsDialog } from './KeyboardShortcutsDialog'; diff --git a/react/features/keyboard-shortcuts/index.js b/react/features/keyboard-shortcuts/index.js index 3c46ed49d..07635cbbc 100644 --- a/react/features/keyboard-shortcuts/index.js +++ b/react/features/keyboard-shortcuts/index.js @@ -1,2 +1 @@ -export * from './actions'; export * from './components'; diff --git a/react/features/keyboard-shortcuts/middleware.ts b/react/features/keyboard-shortcuts/middleware.ts deleted file mode 100644 index 95bb3ef51..000000000 --- a/react/features/keyboard-shortcuts/middleware.ts +++ /dev/null @@ -1,21 +0,0 @@ -import MiddlewareRegistry from '../base/redux/MiddlewareRegistry'; - -import { OPEN_KEYBOARD_SHORTCUTS_DIALOG } from './actionTypes'; - -/** - * Implements the middleware of the feature keyboard-shortcuts. - * - * @param {Store} store - The redux store. - * @returns {Function} - */ -MiddlewareRegistry.register(_store => next => action => { - switch (action.type) { - case OPEN_KEYBOARD_SHORTCUTS_DIALOG: - if (typeof APP === 'object') { - APP.keyboardshortcut.openDialog(); - } - break; - } - - return next(action); -}); diff --git a/react/features/settings/actions.ts b/react/features/settings/actions.ts index 0310c93b7..9eb90ed20 100644 --- a/react/features/settings/actions.ts +++ b/react/features/settings/actions.ts @@ -1,5 +1,7 @@ import { batch } from 'react-redux'; +// @ts-expect-error +import keyboardShortcut from '../../../modules/keyboardshortcut/keyboardshortcut'; import { IStore } from '../app/types'; import { setFollowMe, @@ -22,7 +24,8 @@ import { getModeratorTabProps, getMoreTabProps, getNotificationsTabProps, - getProfileTabProps + getProfileTabProps, + getShortcutsTabProps } from './functions'; /** @@ -237,3 +240,19 @@ export function toggleVideoSettings() { dispatch(setVideoSettingsVisibility(!value)); }; } + +/** + * Submits the settings from the "Shortcuts" tab of the settings dialog. + * + * @param {Object} newState - The new settings. + * @returns {Function} + */ +export function submitShortcutsTab(newState: any) { + return (dispatch: IStore['dispatch'], getState: IStore['getState']) => { + const currentState = getShortcutsTabProps(getState()); + + if (newState.keyboardShortcutsEnabled !== currentState.keyboardShortcutsEnabled) { + keyboardShortcut.enable(newState.keyboardShortcutsEnabled); + } + }; +} diff --git a/react/features/settings/components/web/MoreTab.tsx b/react/features/settings/components/web/MoreTab.tsx index 7ed78145f..8dbdc799a 100644 --- a/react/features/settings/components/web/MoreTab.tsx +++ b/react/features/settings/components/web/MoreTab.tsx @@ -1,8 +1,6 @@ import React from 'react'; import { WithTranslation } from 'react-i18next'; -// @ts-expect-error -import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardshortcut'; import AbstractDialogTab, { IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab'; @@ -81,7 +79,6 @@ class MoreTab extends AbstractDialogTab { // Bind event handler so it is only bound once for every instance. this._onFramerateItemSelect = this._onFramerateItemSelect.bind(this); this._onShowPrejoinPageChanged = this._onShowPrejoinPageChanged.bind(this); - this._onKeyboardShortcutEnableChanged = this._onKeyboardShortcutEnableChanged.bind(this); this._renderMaxStageParticipantsSelect = this._renderMaxStageParticipantsSelect.bind(this); this._onMaxStageParticipantsSelect = this._onMaxStageParticipantsSelect.bind(this); } @@ -132,19 +129,6 @@ class MoreTab extends AbstractDialogTab { super._onChange({ showPrejoinPage: checked }); } - /** - * Callback invoked to select if global keyboard shortcuts - * should be enabled. - * - * @param {Object} e - The key event to handle. - * - * @returns {void} - */ - _onKeyboardShortcutEnableChanged({ target: { checked } }: React.ChangeEvent) { - keyboardShortcut.enable(checked); - super._onChange({ keyboardShortcutEnable: checked }); - } - /** * Callback invoked to select a max number of stage participants from the select dropdown. * @@ -190,31 +174,6 @@ class MoreTab extends AbstractDialogTab { ); } - /** - * Returns the React Element for keyboardShortcut settings. - * - * @private - * @returns {ReactElement} - */ - _renderKeyboardShortcutCheckbox() { - const { t } = this.props; - - return ( -
    - - { t('keyboardShortcuts.keyboardShortcuts') } - - -
    - ); - } - /** * Returns the React Element for modifying prejoin screen settings. * @@ -304,7 +263,6 @@ class MoreTab extends AbstractDialogTab { className = 'settings-sub-pane left' key = 'settings-sub-pane-left'> { showPrejoinSettings && this._renderPrejoinScreenSettings() } - { this._renderKeyboardShortcutCheckbox() } ); } diff --git a/react/features/settings/components/web/SettingsDialog.tsx b/react/features/settings/components/web/SettingsDialog.tsx index d290ff2ea..e1e7c406a 100644 --- a/react/features/settings/components/web/SettingsDialog.tsx +++ b/react/features/settings/components/web/SettingsDialog.tsx @@ -4,7 +4,15 @@ import { withStyles } from '@mui/styles'; import React, { Component } from 'react'; import { IReduxState } from '../../../app/types'; -import { IconBell, IconCalendar, IconGear, IconHost, IconUser, IconVolumeUp } from '../../../base/icons/svg'; +import { + IconBell, + IconCalendar, + IconGear, + IconHost, + IconShortcuts, + IconUser, + IconVolumeUp +} from '../../../base/icons/svg'; import { connect } from '../../../base/redux/functions'; import { withPixelLineHeight } from '../../../base/styles/functions.web'; import DialogWithTabs, { IDialogTab } from '../../../base/ui/components/web/DialogWithTabs'; @@ -19,7 +27,8 @@ import { submitModeratorTab, submitMoreTab, submitNotificationsTab, - submitProfileTab + submitProfileTab, + submitShortcutsTab } from '../../actions'; import { SETTINGS_TABS } from '../../constants'; import { @@ -27,7 +36,8 @@ import { getMoreTabProps, getNotificationsMap, getNotificationsTabProps, - getProfileTabProps + getProfileTabProps, + getShortcutsTabProps } from '../../functions'; // @ts-ignore @@ -36,6 +46,7 @@ import ModeratorTab from './ModeratorTab'; import MoreTab from './MoreTab'; import NotificationsTab from './NotificationsTab'; import ProfileTab from './ProfileTab'; +import ShortcutsTab from './ShortcutsTab'; /* eslint-enable lines-around-comment */ /** @@ -342,6 +353,24 @@ function _mapStateToProps(state: IReduxState, ownProps: any) { }); } + tabs.push({ + name: SETTINGS_TABS.SHORTCUTS, + component: ShortcutsTab, + labelKey: 'settings.shortcuts', + props: getShortcutsTabProps(state, isDisplayedOnWelcomePage), + propsUpdateFunction: (tabState: any, newProps: any) => { + // Updates tab props, keeping users selection + + return { + ...newProps, + keyboardShortcutsEnabled: tabState?.keyboardShortcutsEnabled + }; + }, + className: `settings-pane ${classes.settingsDialog}`, + submit: submitShortcutsTab, + icon: IconShortcuts + }); + if (showMoreTab) { tabs.push({ name: SETTINGS_TABS.MORE, diff --git a/react/features/settings/components/web/ShortcutsTab.tsx b/react/features/settings/components/web/ShortcutsTab.tsx new file mode 100644 index 000000000..0eaab8708 --- /dev/null +++ b/react/features/settings/components/web/ShortcutsTab.tsx @@ -0,0 +1,174 @@ +import { Theme } from '@mui/material'; +import { withStyles } from '@mui/styles'; +import React from 'react'; +import { WithTranslation } from 'react-i18next'; + +// @ts-expect-error +import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardshortcut'; +import AbstractDialogTab, { + IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab'; +import { translate } from '../../../base/i18n/functions'; +import { withPixelLineHeight } from '../../../base/styles/functions.web'; +import Checkbox from '../../../base/ui/components/web/Checkbox'; + +/** + * The type of the React {@code Component} props of {@link ShortcutsTab}. + */ +export interface IProps extends AbstractDialogTabProps, WithTranslation { + + /** + * CSS classes object. + */ + classes: any; + + /** + * Whether to display the shortcuts or not. + */ + displayShortcuts: boolean; + + /** + * Wether the keyboard shortcuts are enabled or not. + */ + keyboardShortcutsEnabled: boolean; +} + +const styles = (theme: Theme) => { + return { + container: { + display: 'flex', + flexDirection: 'column' as const, + width: '100%', + paddingBottom: theme.spacing(3) + }, + + checkbox: { + marginBottom: theme.spacing(3) + }, + + listContainer: { + listStyleType: 'none', + padding: 0, + margin: 0 + }, + + listItem: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + padding: `${theme.spacing(1)} 0`, + ...withPixelLineHeight(theme.typography.bodyShortRegular), + color: theme.palette.text01 + }, + + listItemKey: { + backgroundColor: theme.palette.ui04, + ...withPixelLineHeight(theme.typography.labelBold), + padding: `${theme.spacing(1)} ${theme.spacing(2)}`, + borderRadius: `${Number(theme.shape.borderRadius) / 2}px` + } + }; +}; + +/** + * React {@code Component} for modifying the local user's profile. + * + * @augments Component + */ +class ShortcutsTab extends AbstractDialogTab { + /** + * Initializes a new {@code MoreTab} instance. + * + * @param {Object} props - The read-only properties with which the new + * instance is to be initialized. + */ + constructor(props: IProps) { + super(props); + + // Bind event handler so it is only bound once for every instance. + this._onKeyboardShortcutEnableChanged = this._onKeyboardShortcutEnableChanged.bind(this); + this._renderShortcutsListItem = this._renderShortcutsListItem.bind(this); + } + + /** + * Callback invoked to select if global keyboard shortcuts + * should be enabled. + * + * @param {Object} e - The key event to handle. + * + * @returns {void} + */ + _onKeyboardShortcutEnableChanged({ target: { checked } }: React.ChangeEvent) { + super._onChange({ keyboardShortcutsEnabled: checked }); + } + + /** + * Render a keyboard shortcut with key and description. + * + * @param {string} keyboardKey - The keyboard key for the shortcut. + * @param {string} translationKey - The translation key for the shortcut description. + * @returns {JSX} + */ + _renderShortcutsListItem(keyboardKey: string, translationKey: string) { + const { classes, t } = this.props; + let modifierKey = 'Alt'; + + if (window.navigator?.platform) { + if (window.navigator.platform.indexOf('Mac') !== -1) { + modifierKey = '⌥'; + } + } + + return ( +
  • + + {t(translationKey)} + + + {keyboardKey.startsWith(':') + ? `${modifierKey} + ${keyboardKey.slice(1)}` + : keyboardKey} + +
    • + ); + } + + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + const { + classes, + displayShortcuts, + keyboardShortcutsEnabled, + t + } = this.props; + const shortcutDescriptions: Map = displayShortcuts + ? keyboardShortcut.getShortcutsDescriptions() + : new Map(); + + return ( +
    + + {displayShortcuts && ( +
      + {Array.from(shortcutDescriptions) + .map(description => this._renderShortcutsListItem(...description))} +
    + )} +
    + ); + } +} + +export default withStyles(styles)(translate(ShortcutsTab)); diff --git a/react/features/settings/constants.ts b/react/features/settings/constants.ts index 5c4739432..6fd50300a 100644 --- a/react/features/settings/constants.ts +++ b/react/features/settings/constants.ts @@ -4,7 +4,8 @@ export const SETTINGS_TABS = { MORE: 'more_tab', MODERATOR: 'moderator-tab', NOTIFICATIONS: 'notifications_tab', - PROFILE: 'profile_tab' + PROFILE: 'profile_tab', + SHORTCUTS: 'shortcuts_tab' }; /** diff --git a/react/features/settings/functions.any.ts b/react/features/settings/functions.any.ts index ef4634646..d17295358 100644 --- a/react/features/settings/functions.any.ts +++ b/react/features/settings/functions.any.ts @@ -1,3 +1,5 @@ +// @ts-expect-error +import keyboardShortcut from '../../../modules/keyboardshortcut/keyboardshortcut'; import { IReduxState } from '../app/types'; import { IStateful } from '../base/app/types'; import { isNameReadOnly } from '../base/config/functions'; @@ -14,6 +16,7 @@ import { parseStandardURIString } from '../base/util/uri'; import { isStageFilmstripEnabled } from '../filmstrip/functions'; import { isFollowMeActive } from '../follow-me/functions'; import { getParticipantsPaneConfig } from '../participants-pane/functions'; +import { isPrejoinPageVisible } from '../prejoin/functions'; import { isReactionsEnabled } from '../reactions/functions.any'; import { SS_DEFAULT_FRAME_RATE, SS_SUPPORTED_FRAMERATES } from './constants'; @@ -275,3 +278,23 @@ export function getAudioSettingsVisibility(state: IReduxState) { export function getVideoSettingsVisibility(state: IReduxState) { return state['features/settings'].videoSettingsVisible; } + +/** + * Returns the properties for the "Shortcuts" tab from settings dialog from Redux + * state. + * + * @param {(Function|Object)} stateful -The (whole) redux state, or redux's + * {@code getState} function to be used to retrieve the state. + * @param {boolean} isDisplayedOnWelcomePage - Indicates whether the shortcuts dialog is displayed on the + * welcome page or not. + * @returns {Object} - The properties for the "Shortcuts" tab from settings + * dialog. + */ +export function getShortcutsTabProps(stateful: IStateful, isDisplayedOnWelcomePage?: boolean) { + const state = toState(stateful); + + return { + displayShortcuts: !isDisplayedOnWelcomePage && !isPrejoinPageVisible(state), + keyboardShortcutsEnabled: keyboardShortcut.getEnabled() + }; +}