From 8c7aabdb8c97d66f8778b4a36087a31e3d61904e Mon Sep 17 00:00:00 2001 From: Hannah Lindrob Date: Wed, 14 Jan 2026 18:48:48 +0100 Subject: [PATCH 01/27] Started work on implementing keybind recorders in frontend --- gui/src/App.tsx | 2 + gui/src/components/commons/Keybind.tsx | 63 +++++++++++ .../components/settings/SettingsSidebar.tsx | 5 + .../settings/pages/KeybindSettings.tsx | 104 ++++++++++++++++++ 4 files changed, 174 insertions(+) create mode 100644 gui/src/components/commons/Keybind.tsx create mode 100644 gui/src/components/settings/pages/KeybindSettings.tsx diff --git a/gui/src/App.tsx b/gui/src/App.tsx index f7a79770e3..bbf97baa00 100644 --- a/gui/src/App.tsx +++ b/gui/src/App.tsx @@ -58,6 +58,7 @@ import { StayAlignedSetup } from './components/onboarding/pages/stay-aligned/Sta import { TrackingChecklistProvider } from './components/tracking-checklist/TrackingChecklistProvider'; import { HomeScreenSettings } from './components/settings/pages/HomeScreenSettings'; import { ChecklistPage } from './components/tracking-checklist/TrackingChecklist'; +import { KeybindSettings } from './components/settings/pages/KeybindSettings'; export const GH_REPO = 'SlimeVR/SlimeVR-Server'; export const VersionContext = createContext(''); @@ -142,6 +143,7 @@ function Layout() { } /> } /> } /> + } /> ([]); + const keyCountRef = useRef(0); + const ref = useRef(null); + + const handleKeyDown = (event: any) => { + console.log("HEY") + if (keyCountRef.current < 3) { + setKey(event.key); + setRecordedKeybind((curr) => [...curr, event.key]); + keyCountRef.current++; + } + }; + + const setFocus = () => { + if (ref.current) { + ref.current.focus(); + } + }; + + const emptyKeybind = () => { + setRecordedKeybind((curr) => []) + keyCountRef.current = 0; + }; + + return ( + + ); +} diff --git a/gui/src/components/settings/SettingsSidebar.tsx b/gui/src/components/settings/SettingsSidebar.tsx index 1095073394..d959c54af9 100644 --- a/gui/src/components/settings/SettingsSidebar.tsx +++ b/gui/src/components/settings/SettingsSidebar.tsx @@ -73,6 +73,11 @@ export function SettingsSidebar() { scrollTo="gestureControl" id="settings-sidebar-gesture_control" /> +
diff --git a/gui/src/components/settings/pages/KeybindSettings.tsx b/gui/src/components/settings/pages/KeybindSettings.tsx new file mode 100644 index 0000000000..198218a59d --- /dev/null +++ b/gui/src/components/settings/pages/KeybindSettings.tsx @@ -0,0 +1,104 @@ +import { WrenchIcon } from "@/components/commons/icon/WrenchIcons"; +import { SettingsPageLayout, SettingsPagePaneLayout } from "../SettingsPageLayout"; +import { Typography } from "@/components/commons/Typography"; +import { Localized, useLocalization } from "@fluent/react"; +import { Input } from "@/components/commons/Input"; +import { useForm } from "react-hook-form"; +import { useEffect, useRef, useState } from "react"; +import { RecordBVHRequest } from "solarxr-protocol"; +import { Keybind } from "@/components/commons/Keybind"; + + +export type KeybindsForm = { + fullResetBinding: string; + yawResetBinding: string; + mountingResetBinding: string; + pauseTrackingBinding: string; +} + +const defaultValues: KeybindsForm = { + fullResetBinding: "CTRL+ALT+SHIFT+Y", + yawResetBinding: "CTRL+ALT+SHIFT+U", + mountingResetBinding: "CTRL+ALT+SHIFT+I", + pauseTrackingBinding: "CTRL+ALT+SHIFT+O" +} + +export function useKeybindsForm() { + const { register, reset, handleSubmit, formState, control } = + useForm({ + defaultValues, + reValidateMode: 'onSubmit', + }); + + return { + control, + register, + reset, + handleSubmit, + formState + }; +} + + +export function KeybindSettings() { + const { l10n } = useLocalization(); + const { control } = useKeybindsForm(); + + const [key, setKey] = useState(""); + const [recordedKeybind, setRecordedKeybind] = useState(""); + const keyCountRef = useRef(0); + const ref = useRef(); + + + const handleKeyDown = (event: any) => { + if (keyCountRef.current < 3) { + setKey(event.key); + setRecordedKeybind(recordedKeybind + "+" + key); + keyCountRef.current++; + } + } + + + return ( + +
+ } id="keybinds"> + <> + + {l10n.getString('settings-general-keybinds')} + +
+ {l10n. + getString( + 'settings-keybinds-description' + ) + .split('\n') + .map((line, i) => ( + {line} + ))} +
+ +
+ +
+ +
+ + + + + + ) +} \ No newline at end of file From 5e92f874226e1c6720bddb4e93a2b27d0afccfa0 Mon Sep 17 00:00:00 2001 From: Hannah Lindrob Date: Wed, 14 Jan 2026 19:06:00 +0100 Subject: [PATCH 02/27] Remove unecessary code --- gui/src/components/commons/Keybind.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/gui/src/components/commons/Keybind.tsx b/gui/src/components/commons/Keybind.tsx index 0eb46d23a7..e30b0fe94b 100644 --- a/gui/src/components/commons/Keybind.tsx +++ b/gui/src/components/commons/Keybind.tsx @@ -14,7 +14,6 @@ export function Keybind({ label, name }: KeybindProps) { - const [key, setKey] = useState(''); const [recordedKeybind, setRecordedKeybind] = useState([]); const keyCountRef = useRef(0); const ref = useRef(null); @@ -22,7 +21,6 @@ export function Keybind({ const handleKeyDown = (event: any) => { console.log("HEY") if (keyCountRef.current < 3) { - setKey(event.key); setRecordedKeybind((curr) => [...curr, event.key]); keyCountRef.current++; } @@ -42,7 +40,7 @@ export function Keybind({ return (