From b30ef953b4fa7ea322cfa124648e8c952ff3bedb Mon Sep 17 00:00:00 2001
From: Erik Johnston <erik@matrix.org>
Date: Mon, 14 Nov 2022 10:21:24 +0000
Subject: [PATCH] Put keyboard shortcuts behind settings flag

---
 public/locales/en-GB/app.json  |  1 +
 src/room/useGroupCall.ts       | 13 +++++++++++++
 src/settings/SettingsModal.tsx | 13 +++++++++++++
 src/settings/useSetting.ts     |  2 ++
 4 files changed, 29 insertions(+)

diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json
index 7d4ae7b3..e51f9367 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 dd29e62c..0ad2ce5f 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 f895538a..143d6a64 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) => {
               }
             />
           </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={
diff --git a/src/settings/useSetting.ts b/src/settings/useSetting.ts
index b6de9a21..7e52fe8a 100644
--- a/src/settings/useSetting.ts
+++ b/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);