diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx index 3878284..ec86149 100644 --- a/ui/src/components/WebRTCVideo.tsx +++ b/ui/src/components/WebRTCVideo.tsx @@ -9,9 +9,8 @@ import notifications from "@/notifications"; import useKeyboard from "@/hooks/useKeyboard"; import { useJsonRpc } from "@/hooks/useJsonRpc"; import { cx } from "@/cva.config"; -import { keys, modifiers } from "@/keyboardMappings"; +import { keys } from "@/keyboardMappings"; import { - useHidStore, useMouseStore, useRTCStore, useSettingsStore, @@ -27,7 +26,6 @@ import { export default function WebRTCVideo() { // Video and stream related refs and states - const oldSchool = false;// useSettingsStore(state => state.oldSchoolKeyboard); const videoElm = useRef(null); const mediaStream = useRTCStore(state => state.mediaStream); const [isPlaying, setIsPlaying] = useState(false); @@ -35,7 +33,7 @@ export default function WebRTCVideo() { const [isPointerLockActive, setIsPointerLockActive] = useState(false); // Store hooks const settings = useSettingsStore(); - const { sendKeyboardEvent, sendKeypressEvent, resetKeyboardState } = useKeyboard(); + const { sendKeypressEvent, resetKeyboardState } = useKeyboard(); const setMousePosition = useMouseStore(state => state.setMousePosition); const setMouseMove = useMouseStore(state => state.setMouseMove); const { @@ -333,76 +331,9 @@ export default function WebRTCVideo() { sendAbsMouseMovement(0, 0, 0); }, [sendAbsMouseMovement]); - // Keyboard-related - const handleModifierKeys = useCallback( - (e: KeyboardEvent, activeModifiers: number[]) => { - const { shiftKey, ctrlKey, altKey, metaKey } = e; - - const filteredModifiers = activeModifiers.filter(Boolean); - - // Example: activeModifiers = [0x01, 0x02, 0x04, 0x08] - // Assuming 0x01 = ControlLeft, 0x02 = ShiftLeft, 0x04 = AltLeft, 0x08 = MetaLeft - return ( - filteredModifiers - // Shift: Keep if Shift is pressed or if the key isn't a Shift key - // Example: If shiftKey is true, keep all modifiers - // If shiftKey is false, filter out 0x02 (ShiftLeft) and 0x20 (ShiftRight) - .filter( - modifier => - shiftKey || - (modifier !== modifiers["ShiftLeft"] && - modifier !== modifiers["ShiftRight"]), - ) - // Ctrl: Keep if Ctrl is pressed or if the key isn't a Ctrl key - // Example: If ctrlKey is true, keep all modifiers - // If ctrlKey is false, filter out 0x01 (ControlLeft) and 0x10 (ControlRight) - .filter( - modifier => - ctrlKey || - (modifier !== modifiers["ControlLeft"] && - modifier !== modifiers["ControlRight"]), - ) - // 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) - // - // But intentionally do not filter out 0x40 (AltRight) to accomodate - // Alt Gr (Alt Graph) as a modifier. Oddly, Alt Gr does not declare - // itself to be an altKey. For example, the KeyboardEvent for - // Alt Gr + 2 has the following structure: - // - altKey: false - // - code: "Digit2" - // - type: [ "keydown" | "keyup" ] - // - // For context, filteredModifiers aims to keep track which modifiers - // are being pressed on the physical keyboard at any point in time. - // There is logic in the keyUpHandler and keyDownHandler to add and - // remove 0x40 (AltRight) from the list of new modifiers. - // - // But relying on the two handlers alone to track the state of the - // modifier bears the risk that the key up event for Alt Gr could - // get lost while the browser window is temporarily out of focus, - // which means the Alt Gr key state would then be "stuck". At this - // point, we would need to rely on the user to press Alt Gr again - // to properly release the state of that modifier. - .filter(modifier => altKey || 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 - // If metaKey is false, filter out 0x08 (MetaLeft) and 0x80 (MetaRight) - .filter( - modifier => - metaKey || - (modifier !== modifiers["MetaLeft"] && modifier !== modifiers["MetaRight"]), - ) - ); - }, - [], - ); - const keyDownHandler = useCallback( async (e: KeyboardEvent) => { e.preventDefault(); - const prev = useHidStore.getState(); const code = getAdjustedKeyCode(e); const hidKey = keys[code]; @@ -410,59 +341,25 @@ export default function WebRTCVideo() { // event, so we need to clear the keys after a short delay // https://bugs.chromium.org/p/chromium/issues/detail?id=28089 // https://bugzilla.mozilla.org/show_bug.cgi?id=1299553 - - if (oldSchool) { - // Add the modifier to the active modifiers - const newModifiers = handleModifierKeys(e, [ - ...prev.activeModifiers, - modifiers[code], - ]); - - // Add the key to the active keys - const newKeys = [...prev.activeKeys, hidKey].filter(Boolean); - - if (e.metaKey) { - setTimeout((activeModifiers: number[]) => { - // TODO this should probably be passing prev.activeKeys not an empty array - sendKeyboardEvent([], newModifiers || activeModifiers); - }, 10, prev.activeModifiers); - } - sendKeyboardEvent([...new Set(newKeys)], [...new Set(newModifiers)]); - } - else { - if (e.metaKey) { - setTimeout(() => { - sendKeypressEvent(hidKey, false); - }, 10); - } - sendKeypressEvent(hidKey, true); + if (e.metaKey) { + setTimeout(() => { + sendKeypressEvent(hidKey, false); + }, 10); } + sendKeypressEvent(hidKey, true); + }, - [handleModifierKeys, oldSchool, sendKeyboardEvent, sendKeypressEvent], + [sendKeypressEvent], ); const keyUpHandler = useCallback( async (e: KeyboardEvent) => { e.preventDefault(); - const prev = useHidStore.getState(); const code = getAdjustedKeyCode(e); const hidKey = keys[code]; - - if (oldSchool) { - // Filter out the modifier that was just released - const newModifiers = handleModifierKeys( - e, - prev.activeModifiers.filter(k => k !== modifiers[code]), - ); - - // Filtering out the key that was just released (keys[e.code]) - const newKeys = prev.activeKeys.filter(k => k !== hidKey).filter(Boolean); - sendKeyboardEvent([...new Set(newKeys)], [...new Set(newModifiers)]); - } else { - sendKeypressEvent(hidKey, false); - } + sendKeypressEvent(hidKey, false); }, - [handleModifierKeys, oldSchool, sendKeyboardEvent, sendKeypressEvent], + [sendKeypressEvent], ); const videoKeyUpHandler = useCallback((e: KeyboardEvent) => {