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

@@ -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",

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));
     },
 
     /**

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';

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'

react/features/keyboard-shortcuts/actionTypes.ts

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

react/features/keyboard-shortcuts/actions.ts

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

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<Props, *> {
         const { dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent('shortcuts'));
-        dispatch(openKeyboardShortcutsDialog());
+        dispatch(openSettingsDialog(SETTINGS_TABS.SHORTCUTS));
     }
 }
 

react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx

@@ -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<string, string>;
-}
-
-/**
- * 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 (
-            <li
-                className = 'shortcuts-list__item'
-                key = { keyboardKey }>
-                <span
-                    aria-label = { t(translationKey) }
-                    className = 'shortcuts-list__description'>
-                    {t(translationKey)}
-                </span>
-                <span className = 'item-action'>
-                    {keyboardKey.startsWith(':')
-                        ? `${modifierKey} + ${keyboardKey.slice(1)}`
-                        : keyboardKey}
-                </span>
-            </li>
-        );
-    };
-
-    return (
-        <Dialog
-            cancel = {{ hidden: true }}
-            ok = {{ hidden: true }}
-            titleKey = 'keyboardShortcuts.keyboardShortcuts'>
-            <div
-                id = 'keyboard-shortcuts'>
-                <ul
-                    className = { cx('shortcuts-list', classes.list) }
-                    id = 'keyboard-shortcuts-list'>
-                    {Array.from(shortcutDescriptions)
-                        .map(description => _renderShortcutsListItem(...description))}
-                </ul>
-            </div>
-        </Dialog>
-    );
-};
-
-export default KeyboardShortcutsDialog;

react/features/keyboard-shortcuts/components/web/index.js

@@ -1,2 +1 @@
 export { default as KeyboardShortcutsButton } from './KeyboardShortcutsButton';
-export { default as KeyboardShortcutsDialog } from './KeyboardShortcutsDialog';

react/features/keyboard-shortcuts/index.js

@@ -1,2 +1 @@
-export * from './actions';
 export * from './components';

react/features/keyboard-shortcuts/middleware.ts

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

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

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<Props, any> {
         // 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<Props, any> {
         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<HTMLInputElement>) {
-        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<Props, any> {
         );
     }
 
-    /**
-     * Returns the React Element for keyboardShortcut settings.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderKeyboardShortcutCheckbox() {
-        const { t } = this.props;
-
-        return (
-            <div
-                className = 'settings-sub-pane-element'
-                key = 'keyboard-shortcut'>
-                <span className = 'checkbox-label'>
-                    { t('keyboardShortcuts.keyboardShortcuts') }
-                </span>
-                <Checkbox
-                    checked = { keyboardShortcut.getEnabled() }
-                    label = { t('prejoin.keyboardShortcuts') }
-                    name = 'enable-keyboard-shortcuts'
-                    onChange = { this._onKeyboardShortcutEnableChanged } />
-            </div>
-        );
-    }
-
     /**
      * Returns the React Element for modifying prejoin screen settings.
      *
@@ -304,7 +263,6 @@ class MoreTab extends AbstractDialogTab<Props, any> {
                 className = 'settings-sub-pane left'
                 key = 'settings-sub-pane-left'>
                 { showPrejoinSettings && this._renderPrejoinScreenSettings() }
-                { this._renderKeyboardShortcutCheckbox() }
             </div>
         );
     }

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,

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<IProps, any> {
+    /**
+     * 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<HTMLInputElement>) {
+        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 (
+            <li
+                className = { classes.listItem }
+                key = { keyboardKey }>
+                <span
+                    aria-label = { t(translationKey) }>
+                    {t(translationKey)}
+                </span>
+                <span className = { classes.listItemKey }>
+                    {keyboardKey.startsWith(':')
+                        ? `${modifierKey} + ${keyboardKey.slice(1)}`
+                        : keyboardKey}
+                </span>
+            </li>
+        );
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const {
+            classes,
+            displayShortcuts,
+            keyboardShortcutsEnabled,
+            t
+        } = this.props;
+        const shortcutDescriptions: Map<string, string> = displayShortcuts
+            ? keyboardShortcut.getShortcutsDescriptions()
+            : new Map();
+
+        return (
+            <div className = { classes.container }>
+                <Checkbox
+                    checked = { keyboardShortcutsEnabled }
+                    className = { classes.checkbox }
+                    label = { t('prejoin.keyboardShortcuts') }
+                    name = 'enable-keyboard-shortcuts'
+                    onChange = { this._onKeyboardShortcutEnableChanged } />
+                {displayShortcuts && (
+                    <ul className = { classes.listContainer }>
+                        {Array.from(shortcutDescriptions)
+                            .map(description => this._renderShortcutsListItem(...description))}
+                    </ul>
+                )}
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles)(translate(ShortcutsTab));

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'
 };
 
 /**

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()
+    };
+}