Added modifier tracking for all the other keys

Ensures the InfoBar tracks for physical and virtual keyboard

Author: IDisposable

ui/src/components/WebRTCVideo.tsx

@@ -67,6 +67,15 @@ export default function WebRTCVideo() {
   const hdmiError = ["no_lock", "no_signal", "out_of_range"].includes(hdmiState);
   const isVideoLoading = !isPlaying;
 
+  // Keyboard related states
+  const { 
+    setIsShiftActive,
+    setIsCtrlActive,
+    setIsAltActive,
+    setIsMetaActive,
+    setIsAltGrActive
+  } = useHidStore();
+
   // Misc states and hooks
   const disableVideoFocusTrap = useUiStore(state => state.disableVideoFocusTrap);
   const [send] = useJsonRpc();
@@ -361,13 +370,21 @@ export default function WebRTCVideo() {
       //   return;
       // }
 
-      // console.log(document.activeElement);
 
       if (!isKeyboardLedManagedByHost) {
         setIsNumLockActive(e.getModifierState("NumLock"));
         setIsCapsLockActive(e.getModifierState("CapsLock"));
         setIsScrollLockActive(e.getModifierState("ScrollLock"));
       }
+      
+      //setIsNumLockActive(e.getModifierState("NumLock"));
+      //setIsCapsLockActive(e.getModifierState("CapsLock"));
+      //setIsScrollLockActive(e.getModifierState("ScrollLock"));
+      setIsShiftActive(e.getModifierState("Shift"))
+      setIsCtrlActive(e.getModifierState("Control"))
+      setIsAltActive(e.getModifierState("Alt"))
+      setIsMetaActive(e.getModifierState("Meta"))
+      setIsAltGrActive(e.getModifierState("AltGraph"))
 
       if (code == "IntlBackslash" && ["`", "~"].includes(key)) {
         code = "Backquote";
@@ -398,12 +415,17 @@ export default function WebRTCVideo() {
       sendKeyboardEvent([...new Set(newKeys)], [...new Set(newModifiers)]);
     },
     [
-      handleModifierKeys,
-      sendKeyboardEvent,
       isKeyboardLedManagedByHost,
       setIsNumLockActive,
       setIsCapsLockActive,
       setIsScrollLockActive,
+      setIsShiftActive,
+      setIsCtrlActive,
+      setIsAltActive,
+      setIsMetaActive,
+      setIsAltGrActive,
+      handleModifierKeys,
+      sendKeyboardEvent
     ],
   );
 
@@ -418,6 +440,12 @@ export default function WebRTCVideo() {
         setIsScrollLockActive(e.getModifierState("ScrollLock"));
       }
 
+      setIsShiftActive(e.getModifierState("Shift"))
+      setIsCtrlActive(e.getModifierState("Control"))
+      setIsAltActive(e.getModifierState("Alt"))
+      setIsMetaActive(e.getModifierState("Meta"))
+      setIsAltGrActive(e.getModifierState("AltGraph"))
+
       // Filtering out the key that was just released (keys[e.code])
       const newKeys = prev.activeKeys.filter(k => k !== keys[e.code]).filter(Boolean);
 
@@ -430,12 +458,17 @@ export default function WebRTCVideo() {
       sendKeyboardEvent([...new Set(newKeys)], [...new Set(newModifiers)]);
     },
     [
-      handleModifierKeys,
-      sendKeyboardEvent,
       isKeyboardLedManagedByHost,
       setIsNumLockActive,
       setIsCapsLockActive,
       setIsScrollLockActive,
+      setIsShiftActive,
+      setIsCtrlActive,
+      setIsAltActive,
+      setIsMetaActive,
+      setIsAltGrActive,
+      handleModifierKeys,
+      sendKeyboardEvent
     ],
   );