@@ -69,6 +78,23 @@ export default function SettingsKeyboardRoute() {
Pasting text sends individual key strokes to the target device. The keyboard layout determines which key codes are being sent. Ensure that the keyboard layout in JetKVM matches the settings in the operating system.
+
+
+ { /* this menu item could be renamed to plain "Keyboard layout" in the future, when also the virtual keyboard layout mappings are being implemented */ }
+
+ setKeyboardLedSync(e.target.value as KeyboardLedSync)}
+ options={ledSyncOptions}
+ />
+
+
);
}
diff --git a/ui/src/routes/devices.$id.tsx b/ui/src/routes/devices.$id.tsx
index a6be368..c9aac36 100644
--- a/ui/src/routes/devices.$id.tsx
+++ b/ui/src/routes/devices.$id.tsx
@@ -590,6 +590,8 @@ export default function KvmIdRoute() {
const keyboardLedState = useHidStore(state => state.keyboardLedState);
const setKeyboardLedState = useHidStore(state => state.setKeyboardLedState);
+ const setKeyboardLedStateSyncAvailable = useHidStore(state => state.setKeyboardLedStateSyncAvailable);
+
const [hasUpdated, setHasUpdated] = useState(false);
const { navigateTo } = useDeviceUiNavigation();
@@ -615,6 +617,7 @@ export default function KvmIdRoute() {
const ledState = resp.params as KeyboardLedState;
console.log("Setting keyboard led state", ledState);
setKeyboardLedState(ledState);
+ setKeyboardLedStateSyncAvailable(true);
}
if (resp.method === "otaState") {
@@ -658,12 +661,23 @@ export default function KvmIdRoute() {
if (rpcDataChannel?.readyState !== "open") return;
if (keyboardLedState !== undefined) return;
console.log("Requesting keyboard led state");
+
send("getKeyboardLedState", {}, resp => {
- if ("error" in resp) return;
+ if ("error" in resp) {
+ // -32601 means the method is not supported
+ if (resp.error.code === -32601) {
+ setKeyboardLedStateSyncAvailable(false);
+ console.error("Failed to get keyboard led state, disabling sync", resp.error);
+ } else {
+ console.error("Failed to get keyboard led state", resp.error);
+ }
+ return;
+ }
console.log("Keyboard led state", resp.result);
setKeyboardLedState(resp.result as KeyboardLedState);
+ setKeyboardLedStateSyncAvailable(true);
});
- }, [rpcDataChannel?.readyState, send, setKeyboardLedState, keyboardLedState]);
+ }, [rpcDataChannel?.readyState, send, setKeyboardLedState, setKeyboardLedStateSyncAvailable, keyboardLedState]);
// When the update is successful, we need to refresh the client javascript and show a success modal
useEffect(() => {
From 1b5062c504bd8db351dc91fe62ad3bbee40cfaa2 Mon Sep 17 00:00:00 2001
From: Marc Brooks
Date: Fri, 23 May 2025 06:21:53 -0500
Subject: [PATCH 04/11] fix(ui): Default the keyboardLayout to en-US if not set
(#512)
The recent fix to PasteModal will silently fail a paste if the keyboardLayout hasn't been selected in the settings yet, then when you look in Settings it looks like it's set to Belgian, but it's really just blank. Set it to default to en-US in both these places so it works like it did previously.
Fixes #492
---
ui/src/components/popovers/PasteModal.tsx | 42 +++++++++++--------
.../routes/devices.$id.settings.keyboard.tsx | 11 ++++-
2 files changed, 33 insertions(+), 20 deletions(-)
diff --git a/ui/src/components/popovers/PasteModal.tsx b/ui/src/components/popovers/PasteModal.tsx
index 26e4b82..70b3067 100644
--- a/ui/src/components/popovers/PasteModal.tsx
+++ b/ui/src/components/popovers/PasteModal.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { LuCornerDownLeft } from "react-icons/lu";
import { ExclamationCircleIcon } from "@heroicons/react/16/solid";
import { useClose } from "@headlessui/react";
@@ -39,6 +39,13 @@ export default function PasteModal() {
state => state.setKeyboardLayout,
);
+ // this ensures we always get the original en-US if it hasn't been set yet
+ const safeKeyboardLayout = useMemo(() => {
+ if (keyboardLayout && keyboardLayout.length > 0)
+ return keyboardLayout;
+ return "en-US";
+ }, [keyboardLayout]);
+
useEffect(() => {
send("getKeyboardLayout", {}, resp => {
if ("error" in resp) return;
@@ -56,29 +63,28 @@ export default function PasteModal() {
setPasteMode(false);
setDisableVideoFocusTrap(false);
if (rpcDataChannel?.readyState !== "open" || !TextAreaRef.current) return;
- if (!keyboardLayout) return;
- if (!chars[keyboardLayout]) return;
-
+ if (!safeKeyboardLayout) return;
+ if (!chars[safeKeyboardLayout]) return;
const text = TextAreaRef.current.value;
try {
for (const char of text) {
- const { key, shift, altRight, deadKey, accentKey } = chars[keyboardLayout][char]
+ const { key, shift, altRight, deadKey, accentKey } = chars[safeKeyboardLayout][char]
if (!key) continue;
- const keyz = [ keys[key] ];
- const modz = [ modifierCode(shift, altRight) ];
+ const keyz = [ keys[key] ];
+ const modz = [ modifierCode(shift, altRight) ];
- if (deadKey) {
+ if (deadKey) {
keyz.push(keys["Space"]);
modz.push(noModifier);
- }
- if (accentKey) {
+ }
+ if (accentKey) {
keyz.unshift(keys[accentKey.key])
modz.unshift(modifierCode(accentKey.shift, accentKey.altRight))
- }
+ }
- for (const [index, kei] of keyz.entries()) {
+ for (const [index, kei] of keyz.entries()) {
await new Promise((resolve, reject) => {
send(
"keyboardReport",
@@ -92,13 +98,13 @@ export default function PasteModal() {
},
);
});
- }
+ }
}
} catch (error) {
console.error(error);
notifications.error("Failed to paste text");
}
- }, [rpcDataChannel?.readyState, send, setDisableVideoFocusTrap, setPasteMode, keyboardLayout]);
+ }, [rpcDataChannel?.readyState, send, setDisableVideoFocusTrap, setPasteMode, safeKeyboardLayout]);
useEffect(() => {
if (TextAreaRef.current) {
@@ -148,7 +154,7 @@ export default function PasteModal() {
// @ts-expect-error TS doesn't recognize Intl.Segmenter in some environments
[...new Intl.Segmenter().segment(value)]
.map(x => x.segment)
- .filter(char => !chars[keyboardLayout][char]),
+ .filter(char => !chars[safeKeyboardLayout][char]),
),
];
@@ -167,11 +173,11 @@ export default function PasteModal() {
)}
-
+
- Sending text using keyboard layout: {layouts[keyboardLayout]}
+ Sending text using keyboard layout: {layouts[safeKeyboardLayout]}