diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json
index 7d4ae7b..e51f936 100644
--- a/public/locales/en-GB/app.json
+++ b/public/locales/en-GB/app.json
@@ -42,6 +42,7 @@
"Display name": "Display name",
"Download debug logs": "Download debug logs",
"Element Call Home": "Element Call Home",
+ "Enable keyboard shortcuts": "Enable keyboard shortcuts",
"Entering room…": "Entering room…",
"Exit full screen": "Exit full screen",
"Fetching group call timed out.": "Fetching group call timed out.",
diff --git a/src/room/useGroupCall.ts b/src/room/useGroupCall.ts
index dd29e62..0ad2ce5 100644
--- a/src/room/useGroupCall.ts
+++ b/src/room/useGroupCall.ts
@@ -33,6 +33,7 @@ import { usePageUnload } from "./usePageUnload";
import { PosthogAnalytics } from "../PosthogAnalytics";
import { TranslatedError, translatedError } from "../TranslatedError";
import { ElementWidgetActions, ScreenshareStartData, widget } from "../widget";
+import { getSetting } from "../settings/useSetting";
export interface UseGroupCallReturnType {
state: GroupCallState;
@@ -404,6 +405,12 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
useEffect(() => {
const keyDownListener = (event) => {
+ // Check if keyboard shortcuts are enabled
+ const keyboardShortcuts = getSetting("keyboard-shortcuts", true);
+ if (!keyboardShortcuts) {
+ return;
+ }
+
if (event.key === "m") {
toggleMicrophoneMuted();
}
@@ -413,6 +420,12 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
};
const keyUpListener = (event) => {
+ // Check if keyboard shortcuts are enabled
+ const keyboardShortcuts = getSetting("keyboard-shortcuts", true);
+ if (!keyboardShortcuts) {
+ return;
+ }
+
if (event.key === " ") {
setMicrophoneMuted(true);
}
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index f895538..143d6a6 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -28,6 +28,7 @@ import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg";
import { SelectInput } from "../input/SelectInput";
import { useMediaHandler } from "./useMediaHandler";
import {
+ useKeyboardShortcuts,
useSpatialAudio,
useShowInspector,
useOptInAnalytics,
@@ -59,6 +60,7 @@ export const SettingsModal = (props: Props) => {
const [spatialAudio, setSpatialAudio] = useSpatialAudio();
const [showInspector, setShowInspector] = useShowInspector();
const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
+ const [keyboardShortcuts, setKeyboardShortcuts] = useKeyboardShortcuts();
const downloadDebugLog = useDownloadDebugLog();
@@ -166,6 +168,17 @@ export const SettingsModal = (props: Props) => {
}
/>
+
+ ) =>
+ setKeyboardShortcuts(event.target.checked)
+ }
+ />
+
(name: string, defaultValue: T): T => {
export const useSpatialAudio = () => useSetting("spatial-audio", false);
export const useShowInspector = () => useSetting("show-inspector", false);
export const useOptInAnalytics = () => useSetting("opt-in-analytics", false);
+export const useKeyboardShortcuts = () =>
+ useSetting("keyboard-shortcuts", true);