diff --git a/locales/en/app.json b/locales/en/app.json index 1ff066ea..54cc9a74 100644 --- a/locales/en/app.json +++ b/locales/en/app.json @@ -224,6 +224,8 @@ "preferences_tab": { "developer_mode_label": "Developer mode", "developer_mode_label_description": "Enable developer mode and show developer settings tab.", + "enable_keyboard_shortcuts_description": "Use keyboard shortcuts to control Element Call.", + "enable_keyboard_shortcuts_label": "Enable keyboard shortcuts", "introduction": "Here you can configure extra options for an improved experience.", "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.", "reactions_play_sound_label": "Play reaction sounds", diff --git a/src/settings/PreferencesSettingsTab.tsx b/src/settings/PreferencesSettingsTab.tsx index 82306e7b..6dda0505 100644 --- a/src/settings/PreferencesSettingsTab.tsx +++ b/src/settings/PreferencesSettingsTab.tsx @@ -1,4 +1,5 @@ /* +Copyright (C) 2025 Element Creations Ltd Copyright 2024 New Vector Ltd. SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial @@ -15,6 +16,7 @@ import { showReactions as showReactionsSetting, playReactionsSound as playReactionsSoundSetting, developerMode as developerModeSetting, + enableKeyboardShortcuts as enableKeyboardShortcutsSetting, useSetting, } from "./settings"; @@ -39,6 +41,10 @@ export const PreferencesSettingsTab: FC = () => { const [developerMode, setDeveloperMode] = useSetting(developerModeSetting); + const [enableKeyboardShortcuts, setEnableKeyboardShortcuts] = useSetting( + enableKeyboardShortcutsSetting, + ); + return (
{t("settings.preferences_tab.introduction")} @@ -64,6 +70,18 @@ export const PreferencesSettingsTab: FC = () => { onChange={(e) => onChangeSetting(e, setShowReactions)} /> + + onChangeSetting(e, setEnableKeyboardShortcuts)} + /> + ( export const showReactions = new Setting("reactions-show", true); +export const enableKeyboardShortcuts = new Setting( + "keyboard-shortcuts", + true, +); + export const playReactionsSound = new Setting( "reactions-play-sound", true, diff --git a/src/useCallViewKeyboardShortcuts.ts b/src/useCallViewKeyboardShortcuts.ts index 728a2614..dd35e669 100644 --- a/src/useCallViewKeyboardShortcuts.ts +++ b/src/useCallViewKeyboardShortcuts.ts @@ -1,4 +1,5 @@ /* +Copyright (C) 2025 Element Creations Ltd Copyright 2022-2024 New Vector Ltd. SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial @@ -13,6 +14,7 @@ import { ReactionSet, ReactionsRowSize, } from "./reactions"; +import { enableKeyboardShortcuts, useSetting } from "./settings/settings"; /** * Determines whether focus is in the same part of the tree as the given @@ -35,6 +37,7 @@ export function useCallViewKeyboardShortcuts( sendReaction: (reaction: ReactionOption) => void, toggleHandRaised: () => void, ): void { + const [shortcutsEnabled] = useSetting(enableKeyboardShortcuts); const spacebarHeld = useRef(false); // These event handlers are set on the window because we want users to be able @@ -45,6 +48,7 @@ export function useCallViewKeyboardShortcuts( "keydown", useCallback( (event: KeyboardEvent) => { + if (!shortcutsEnabled) return; if (focusElement.current === null) return; if (!mayReceiveKeyEvents(focusElement.current)) return; if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) @@ -77,6 +81,7 @@ export function useCallViewKeyboardShortcuts( setAudioEnabled, sendReaction, toggleHandRaised, + shortcutsEnabled, ], ), // Because this is set on the window, to prevent shortcuts from activating @@ -90,6 +95,7 @@ export function useCallViewKeyboardShortcuts( "keyup", useCallback( (event: KeyboardEvent) => { + if (!shortcutsEnabled) return; if (focusElement.current === null) return; if (!mayReceiveKeyEvents(focusElement.current)) return; @@ -98,7 +104,7 @@ export function useCallViewKeyboardShortcuts( setAudioEnabled?.(false); } }, - [focusElement, setAudioEnabled], + [shortcutsEnabled, focusElement, setAudioEnabled], ), ); @@ -106,10 +112,11 @@ export function useCallViewKeyboardShortcuts( window, "blur", useCallback(() => { + if (!shortcutsEnabled) return; if (spacebarHeld.current) { spacebarHeld.current = false; setAudioEnabled?.(true); } - }, [setAudioEnabled, spacebarHeld]), + }, [setAudioEnabled, spacebarHeld, shortcutsEnabled]), ); }