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