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