Use the KeysDownState for the infobar

Strong typed in the typescript realm.

Author: IDisposable

internal/usbgadget/hid_keyboard.go

@@ -100,7 +100,7 @@ func getKeyboardState(b byte) KeyboardState {
 	}
 }
 
-func (u *UsbGadget) updateKeyboardState(state byte) {
+func (u *UsbGadget) updateKeyboardState(state uint8) {
 	u.keyboardStateLock.Lock()
 	defer u.keyboardStateLock.Unlock()
 
@@ -185,7 +185,7 @@ func (u *UsbGadget) listenKeyboardEvents() {
 	l.Trace().Msg("starting")
 
 	go func() {
-		buf := make([]byte, hidReadBufferSize)
+		buf := make([]uint8, hidReadBufferSize)
 		for {
 			select {
 			case <-u.keyboardStateCtx.Done():
@@ -209,7 +209,7 @@ func (u *UsbGadget) listenKeyboardEvents() {
 				}
 				u.resetLogSuppressionCounter("keyboardHidFileRead")
 
-				l.Trace().Int("n", n).Bytes("buf", buf).Msg("got data from keyboard")
+				l.Trace().Int("n", n).Uints8("buf", buf).Msg("got data from keyboard")
 				if n != 1 {
 					l.Trace().Int("n", n).Msg("expected 1 byte, got")
 					continue
@@ -245,12 +245,12 @@ func (u *UsbGadget) OpenKeyboardHidFile() error {
 	return u.openKeyboardHidFile()
 }
 
-func (u *UsbGadget) keyboardWriteHidFile(modifier byte, keys []byte) error {
+func (u *UsbGadget) keyboardWriteHidFile(modifier uint8, keys []uint8) error {
 	if err := u.openKeyboardHidFile(); err != nil {
 		return err
 	}
 
-	_, err := u.keyboardHidFile.Write(append([]byte{modifier, 0x00}, keys[:]...))
+	_, err := u.keyboardHidFile.Write(append([]uint8{modifier, 0x00}, keys[:hidKeyBufferSize]...))
 	if err != nil {
 		u.logWithSuppression("keyboardWriteHidFile", 100, u.log, err, "failed to write to hidg0")
 		u.keyboardHidFile.Close()
@@ -261,7 +261,7 @@ func (u *UsbGadget) keyboardWriteHidFile(modifier byte, keys []byte) error {
 	return nil
 }
 
-func (u *UsbGadget) KeyboardReport(modifier byte, keys []byte) error {
+func (u *UsbGadget) KeyboardReport(modifier uint8, keys []uint8) error {
 	u.keyboardLock.Lock()
 	defer u.keyboardLock.Unlock()
 	defer u.resetUserInputTime()
@@ -270,7 +270,7 @@ func (u *UsbGadget) KeyboardReport(modifier byte, keys []byte) error {
 		keys = keys[:hidKeyBufferSize]
 	}
 	if len(keys) < hidKeyBufferSize {
-		keys = append(keys, make([]byte, hidKeyBufferSize-len(keys))...)
+		keys = append(keys, make([]uint8, hidKeyBufferSize-len(keys))...)
 	}
 
 	return u.keyboardWriteHidFile(modifier, keys)
@@ -289,12 +289,6 @@ const (
 	RightSuper   = 0xE7 // Right GUI (e.g. Windows key, Apple Command key)
 )
 
-// KeyCodeMask maps a key code to its corresponding bit mask
-type KeyCodeMask struct {
-	KeyCode byte
-	Mask    byte
-}
-
 // KeyCodeToMaskMap is a slice of KeyCodeMask for quick lookup
 var KeyCodeToMaskMap = map[uint8]uint8{
 	LeftControl:  ModifierMaskLeftControl,
@@ -307,7 +301,7 @@ var KeyCodeToMaskMap = map[uint8]uint8{
 	RightSuper:   ModifierMaskRightSuper,
 }
 
-func (u *UsbGadget) KeypressReport(key byte, press bool) (KeysDownState, error) {
+func (u *UsbGadget) KeypressReport(key uint8, press bool) (KeysDownState, error) {
 	u.keyboardLock.Lock()
 	defer u.keyboardLock.Unlock()
 	defer u.resetUserInputTime()
@@ -364,7 +358,7 @@ func (u *UsbGadget) KeypressReport(key byte, press bool) (KeysDownState, error)
 	}
 
 	if err := u.keyboardWriteHidFile(modifier, keys); err != nil {
-		u.log.Warn().Uint8("modifier", modifier).Bytes("keys", keys).Msg("Could not write keypress report to hidg0")
+		u.log.Warn().Uint8("modifier", modifier).Uints8("keys", keys).Msg("Could not write keypress report to hidg0")
 	}
 
 	state.Modifier = modifier

internal/usbgadget/usbgadget.go

@@ -42,8 +42,8 @@ var defaultUsbGadgetDevices = Devices{
 }
 
 type KeysDownState struct {
-	Modifier byte   `json:"modifier"`
-	Keys     []byte `json:"keys"`
+	Modifier uint8   `json:"modifier"`
+	Keys     []uint8 `json:"keys"`
 }
 
 // UsbGadget is a struct that represents a USB gadget.
@@ -65,7 +65,7 @@ type UsbGadget struct {
 	relMouseHidFile *os.File
 	relMouseLock    sync.Mutex
 
-	keyboardState byte          // keyboard latched state (NumLock, CapsLock, ScrollLock, Compose, Kana)
+	keyboardState uint8         // keyboard latched state (NumLock, CapsLock, ScrollLock, Compose, Kana)
 	keysDownState KeysDownState // keyboard dynamic state (modifier keys and pressed keys)
 
 	keyboardStateLock   sync.Mutex
@@ -131,7 +131,7 @@ func newUsbGadget(name string, configMap map[string]gadgetConfigItem, enabledDev
 		keyboardStateCtx:    keyboardCtx,
 		keyboardStateCancel: keyboardCancel,
 		keyboardState:       0,
-		keysDownState:       KeysDownState{Modifier: 0, Keys: []byte{0, 0, 0, 0, 0, 0}}, // must be initialized to hidKeyBufferSize (6) zero bytes
+		keysDownState:       KeysDownState{Modifier: 0, Keys: []uint8{0, 0, 0, 0, 0, 0}}, // must be initialized to hidKeyBufferSize (6) zero bytes
 		enabledDevices:      *enabledDevices,
 		lastUserInput:       time.Now(),
 		log:                 logger,

ui/src/components/InfoBar.tsx

@@ -1,47 +1,65 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
 import { cx } from "@/cva.config";
 import {
+  HidState,
+  KeysDownState,
+  MouseState,
+  RTCState,
+  SettingsState,
   useHidStore,
   useMouseStore,
   useRTCStore,
   useSettingsStore,
   useVideoStore,
+  VideoState,
 } from "@/hooks/stores";
 import { keys, modifiers } from "@/keyboardMappings";
 
 export default function InfoBar() {
-  const activeKeys = useHidStore(state => state.activeKeys);
-  const activeModifiers = useHidStore(state => state.activeModifiers);
-  const mouseX = useMouseStore(state => state.mouseX);
-  const mouseY = useMouseStore(state => state.mouseY);
-  const mouseMove = useMouseStore(state => state.mouseMove);
+  const keysDownState = useHidStore((state: HidState) => state.keysDownState);
+  const mouseX = useMouseStore((state: MouseState) => state.mouseX);
+  const mouseY = useMouseStore((state: MouseState) => state.mouseY);
+  const mouseMove = useMouseStore((state: MouseState) => state.mouseMove);
 
   const videoClientSize = useVideoStore(
-    state => `${Math.round(state.clientWidth)}x${Math.round(state.clientHeight)}`,
+    (state: VideoState) => `${Math.round(state.clientWidth)}x${Math.round(state.clientHeight)}`,
   );
 
   const videoSize = useVideoStore(
-    state => `${Math.round(state.width)}x${Math.round(state.height)}`,
+    (state: VideoState) => `${Math.round(state.width)}x${Math.round(state.height)}`,
   );
 
-  const rpcDataChannel = useRTCStore(state => state.rpcDataChannel);
+  const rpcDataChannel = useRTCStore((state: RTCState) => state.rpcDataChannel);
 
   const settings = useSettingsStore();
-  const showPressedKeys = useSettingsStore(state => state.showPressedKeys);
+  const showPressedKeys = useSettingsStore((state: SettingsState) => state.showPressedKeys);
 
   useEffect(() => {
     if (!rpcDataChannel) return;
     rpcDataChannel.onclose = () => console.log("rpcDataChannel has closed");
-    rpcDataChannel.onerror = e =>
+    rpcDataChannel.onerror = (e: Event) =>
       console.log(`Error on DataChannel '${rpcDataChannel.label}': ${e}`);
   }, [rpcDataChannel]);
 
-  const keyboardLedState = useHidStore(state => state.keyboardLedState);
-  const isTurnServerInUse = useRTCStore(state => state.isTurnServerInUse);
+  const keyboardLedState = useHidStore((state: HidState) => state.keyboardLedState);
+  const isTurnServerInUse = useRTCStore((state: RTCState) => state.isTurnServerInUse);
 
-  const usbState = useHidStore(state => state.usbState);
-  const hdmiState = useVideoStore(state => state.hdmiState);
+  const usbState = useHidStore((state: HidState) => state.usbState);
+  const hdmiState = useVideoStore((state: VideoState)  => state.hdmiState);
+
+  const displayKeys = useMemo(() => {
+    if (!showPressedKeys || !keysDownState) 
+      return "";
+
+    const state = keysDownState as KeysDownState;
+    const activeModifierMask = state.modifier || 0;
+    const keysDown = state.keys || [];
+    const modifierNames = Object.entries(modifiers).filter(([_, mask]) => (activeModifierMask & mask) !== 0).map(([name, _]) => name);
+    const keyNames = Object.entries(keys).filter(([_, value]) => keysDown.includes(value)).map(([name, _]) => name);
+
+    return [...modifierNames,...keyNames].join(", ");
+  }, [keysDownState, showPressedKeys]);
 
   return (
     <div className="bg-white border-t border-t-slate-800/30 text-slate-800 dark:border-t-slate-300/20 dark:bg-slate-900 dark:text-slate-300">
@@ -99,14 +117,7 @@ export default function InfoBar() {
               <div className="flex items-center gap-x-1">
                 <span className="text-xs font-semibold">Keys:</span>
                 <h2 className="text-xs">
-                  {[
-                    ...activeKeys.map(
-                      x => Object.entries(keys).filter(y => y[1] === x)[0][0],
-                    ),
-                    activeModifiers.map(
-                      x => Object.entries(modifiers).filter(y => y[1] === x)[0][0],
-                    ),
-                  ].join(", ")}
+                  {displayKeys}
                 </h2>
               </div>
             )}