From fd067971249ef1349eaf6c4c59e4a0f6d0963cc0 Mon Sep 17 00:00:00 2001 From: Daniel Lorch Date: Thu, 1 May 2025 01:29:09 +0200 Subject: [PATCH 1/8] Fix: Alt-Gr not recognized --- ui/src/components/WebRTCVideo.tsx | 4 ++-- ui/src/keyboardMappings.ts | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx index b73135b..ed6dde7 100644 --- a/ui/src/components/WebRTCVideo.tsx +++ b/ui/src/components/WebRTCVideo.tsx @@ -330,11 +330,11 @@ export default function WebRTCVideo() { ) // Alt: Keep if Alt is pressed or if the key isn't an Alt key // Example: If altKey is true, keep all modifiers - // If altKey is false, filter out 0x04 (AltLeft) and 0x40 (AltRight) + // If altKey is false, filter out 0x04 (AltLeft) and 0x40 (AltGraph) .filter( modifier => altKey || - (modifier !== modifiers["AltLeft"] && modifier !== modifiers["AltRight"]), + (modifier !== modifiers["AltLeft"] && modifier !== modifiers["AltGraph"]), ) // Meta: Keep if Meta is pressed or if the key isn't a Meta key // Example: If metaKey is true, keep all modifiers diff --git a/ui/src/keyboardMappings.ts b/ui/src/keyboardMappings.ts index 347939a..c1e5177 100644 --- a/ui/src/keyboardMappings.ts +++ b/ui/src/keyboardMappings.ts @@ -1,6 +1,4 @@ export const keys = { - AltLeft: 0xe2, - AltRight: 0xe6, ArrowDown: 0x51, ArrowLeft: 0x50, ArrowRight: 0x4f, From 3b293ff37f412a85c442e4094e3340cbf86b90f0 Mon Sep 17 00:00:00 2001 From: Daniel Lorch Date: Thu, 1 May 2025 10:48:11 +0200 Subject: [PATCH 2/8] Proper fix for Alt-Gr not being recognized --- ui/src/components/WebRTCVideo.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx index ed6dde7..8734d06 100644 --- a/ui/src/components/WebRTCVideo.tsx +++ b/ui/src/components/WebRTCVideo.tsx @@ -330,11 +330,18 @@ export default function WebRTCVideo() { ) // Alt: Keep if Alt is pressed or if the key isn't an Alt key // Example: If altKey is true, keep all modifiers - // If altKey is false, filter out 0x04 (AltLeft) and 0x40 (AltGraph) + // If altKey is false, filter out 0x04 (AltLeft) + // + // Special case: Despite the Alt-Gr key being pressed, `altKey' on + // the event `e' is set to `false'. This means we cannot detect if Alt-Gr + // is being pressed while the user e.g. presses the `2' key. Instead, we + // we need to rely on keyUpHandler/keyDownHandler to toggle the state + // for 0x40 (AltRight) and avoid filtering for this code here, so that we + // can remember the state of the Alt-Gr modifier on subsequent key presses. .filter( modifier => altKey || - (modifier !== modifiers["AltLeft"] && modifier !== modifiers["AltGraph"]), + (modifier !== modifiers["AltLeft"]), ) // Meta: Keep if Meta is pressed or if the key isn't a Meta key // Example: If metaKey is true, keep all modifiers From 294198a126ebb7c0de6957e5a6e546f52d2e576a Mon Sep 17 00:00:00 2001 From: Daniel Lorch Date: Thu, 1 May 2025 11:02:19 +0200 Subject: [PATCH 3/8] Add comment on codes and modifiers --- ui/src/keyboardMappings.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/src/keyboardMappings.ts b/ui/src/keyboardMappings.ts index c1e5177..79ed11a 100644 --- a/ui/src/keyboardMappings.ts +++ b/ui/src/keyboardMappings.ts @@ -1,3 +1,5 @@ +// Key codes and modifiers correspond to definitions in the +// [Linux USB HID gadget driver](https://www.kernel.org/doc/Documentation/usb/gadget_hid.txt) export const keys = { ArrowDown: 0x51, ArrowLeft: 0x50, From 2a9622b45741429aea242c8d2b4cc1c942c98e5e Mon Sep 17 00:00:00 2001 From: Daniel Lorch Date: Thu, 1 May 2025 11:08:49 +0200 Subject: [PATCH 4/8] Add comment on paste box --- ui/src/keyboardMappings.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/keyboardMappings.ts b/ui/src/keyboardMappings.ts index 79ed11a..92214cf 100644 --- a/ui/src/keyboardMappings.ts +++ b/ui/src/keyboardMappings.ts @@ -99,6 +99,7 @@ export const keys = { Tab: 0x2b, } as Record; +// Mapping from characters entered into "Paste text" box to key codes and modifiers export const chars = { A: { key: "KeyA", shift: true }, B: { key: "KeyB", shift: true }, From 0c7d5aae4c42aad0c9ca91ac350b4836f36c41f2 Mon Sep 17 00:00:00 2001 From: Daniel Lorch Date: Fri, 2 May 2025 00:53:47 +0200 Subject: [PATCH 5/8] Remove comment --- ui/src/keyboardMappings.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/src/keyboardMappings.ts b/ui/src/keyboardMappings.ts index 92214cf..79ed11a 100644 --- a/ui/src/keyboardMappings.ts +++ b/ui/src/keyboardMappings.ts @@ -99,7 +99,6 @@ export const keys = { Tab: 0x2b, } as Record; -// Mapping from characters entered into "Paste text" box to key codes and modifiers export const chars = { A: { key: "KeyA", shift: true }, B: { key: "KeyB", shift: true }, From f808d2692bbe195007b22252d4ebcffff0433e96 Mon Sep 17 00:00:00 2001 From: Daniel Lorch Date: Sat, 3 May 2025 23:29:01 +0200 Subject: [PATCH 6/8] Improve description --- ui/src/components/WebRTCVideo.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx index 8734d06..33a65f9 100644 --- a/ui/src/components/WebRTCVideo.tsx +++ b/ui/src/components/WebRTCVideo.tsx @@ -332,12 +332,18 @@ export default function WebRTCVideo() { // Example: If altKey is true, keep all modifiers // If altKey is false, filter out 0x04 (AltLeft) // - // Special case: Despite the Alt-Gr key being pressed, `altKey' on - // the event `e' is set to `false'. This means we cannot detect if Alt-Gr - // is being pressed while the user e.g. presses the `2' key. Instead, we - // we need to rely on keyUpHandler/keyDownHandler to toggle the state - // for 0x40 (AltRight) and avoid filtering for this code here, so that we - // can remember the state of the Alt-Gr modifier on subsequent key presses. + // But intentionally do not filter out 0x40 (AltRight) to enable Alt Gr (Alt Graph) + // as a modifier. The altKey attribute is not set on key combinations involving the + // Alt Gr key, which means the modifier would otherwise unintentionally disappear + // from the filteredModifiers list. + // + // For example, the KeyboardEvent for Alt Gr + 2 has the following structure: + // - altKey: false + // - code: "Digit2" + // - type: ["keydown" | "keyup"] + // + // Adding and removing 0x40 (AltRight) from and to the list of active modifiers is + // taken care of by the respective logic in the keyUpHandler an keyDownHandler. .filter( modifier => altKey || From 87688a1a93481aad959e47c229f9506d782b8ed5 Mon Sep 17 00:00:00 2001 From: Daniel Lorch Date: Sun, 4 May 2025 03:39:40 +0200 Subject: [PATCH 7/8] Wording... --- ui/src/components/WebRTCVideo.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx index 33a65f9..a67d9b5 100644 --- a/ui/src/components/WebRTCVideo.tsx +++ b/ui/src/components/WebRTCVideo.tsx @@ -332,18 +332,19 @@ export default function WebRTCVideo() { // Example: If altKey is true, keep all modifiers // If altKey is false, filter out 0x04 (AltLeft) // - // But intentionally do not filter out 0x40 (AltRight) to enable Alt Gr (Alt Graph) - // as a modifier. The altKey attribute is not set on key combinations involving the - // Alt Gr key, which means the modifier would otherwise unintentionally disappear - // from the filteredModifiers list. + // But intentionally do not filter out 0x40 (AltRight) to enable Alt Gr + // (Alt Graph) as a modifier. The `altKey` attribute is set to `false` on + // key combinations involving the Alt Gr key, which means the modifier + // would otherwise be unintentionally removed from the filteredModifiers + // list. // // For example, the KeyboardEvent for Alt Gr + 2 has the following structure: // - altKey: false // - code: "Digit2" // - type: ["keydown" | "keyup"] // - // Adding and removing 0x40 (AltRight) from and to the list of active modifiers is - // taken care of by the respective logic in the keyUpHandler an keyDownHandler. + // Adding and removing 0x40 (AltRight) from and to the list of active + // modifiers is handled by keyUpHandler an keyDownHandler. .filter( modifier => altKey || From 20f966c0ac273f57e4455dfed6c8a3bd4a9c7684 Mon Sep 17 00:00:00 2001 From: Daniel Lorch Date: Sun, 4 May 2025 03:42:45 +0200 Subject: [PATCH 8/8] Formatting... --- ui/src/components/WebRTCVideo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx index a67d9b5..c8e8fdc 100644 --- a/ui/src/components/WebRTCVideo.tsx +++ b/ui/src/components/WebRTCVideo.tsx @@ -333,7 +333,7 @@ export default function WebRTCVideo() { // If altKey is false, filter out 0x04 (AltLeft) // // But intentionally do not filter out 0x40 (AltRight) to enable Alt Gr - // (Alt Graph) as a modifier. The `altKey` attribute is set to `false` on + // (Alt Graph) as a modifier. The altKey attribute is set to false on // key combinations involving the Alt Gr key, which means the modifier // would otherwise be unintentionally removed from the filteredModifiers // list. @@ -341,7 +341,7 @@ export default function WebRTCVideo() { // For example, the KeyboardEvent for Alt Gr + 2 has the following structure: // - altKey: false // - code: "Digit2" - // - type: ["keydown" | "keyup"] + // - type: ["keydown"|"keyup"] // // Adding and removing 0x40 (AltRight) from and to the list of active // modifiers is handled by keyUpHandler an keyDownHandler.