Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove all the old school code

This commit is contained in:
Marc Brooks 2025-08-13 01:32:20 -05:00
parent 93c5887153
commit 0c766343e4
No known key found for this signature in database
GPG Key ID: 583A6AF2D6AE1DC6
1 changed files with 11 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
ui/src/components/WebRTCVideo.tsx
View File

@ -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<HTMLVideoElement>(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);
}
},
[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);
}
},
[handleModifierKeys, oldSchool, sendKeyboardEvent, sendKeypressEvent],
[sendKeypressEvent],
);
const videoKeyUpHandler = useCallback((e: KeyboardEvent) => {