Put keyboard shortcuts behind settings flag

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

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

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) => {
               }
             />
           </FieldRow>
+          <FieldRow>
+            <InputField
+              id="keyboardShortcuts"
+              label={t("Enable keyboard shortcuts")}
+              type="checkbox"
+              checked={keyboardShortcuts}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setKeyboardShortcuts(event.target.checked)
+              }
+            />
+          </FieldRow>
         </TabItem>
         <TabItem
           title={

src/settings/useSetting.ts

@@ -61,3 +61,5 @@ export const getSetting = <T>(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);