{m.info_keys()}
diff --git a/ui/src/components/VideoOverlay.tsx b/ui/src/components/VideoOverlay.tsx
index 1690aaebe..df2062e5f 100644
--- a/ui/src/components/VideoOverlay.tsx
+++ b/ui/src/components/VideoOverlay.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/16/solid";
import { motion, AnimatePresence } from "framer-motion";
-import { LuPlay } from "react-icons/lu";
+import { LuKeyboard, LuPlay } from "react-icons/lu";
import { BsMouseFill } from "react-icons/bs";
import { m } from "@localizations/messages.js";
@@ -395,6 +395,52 @@ export function PointerLockBar({ show }: PointerLockBarProps) {
);
}
+interface KeyboardCaptureBarProps {
+ readonly show: boolean;
+}
+
+export function KeyboardCaptureBar({ show }: KeyboardCaptureBarProps) {
+ // When show goes false, unmount inner component entirely.
+ // When show goes true, inner mounts fresh with visible=true and starts auto-dismiss timer.
+ return show ?
: null;
+}
+
+function KeyboardCaptureBarInner() {
+ const [visible, setVisible] = useState(true);
+
+ useEffect(() => {
+ const timer = setTimeout(() => setVisible(false), 8000);
+ return () => clearTimeout(timer);
+ }, []);
+
+ return (
+
+ {visible ? (
+
+
+
+
+
+
+
+ {m.keyboard_capture_fullscreen_hint()}
+
+
+
+
+ );
+}
+
interface RebootingOverlayProps {
readonly show: boolean;
readonly postRebootAction: PostRebootAction;
diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx
index 1e44e545c..a2d964c53 100644
--- a/ui/src/components/WebRTCVideo.tsx
+++ b/ui/src/components/WebRTCVideo.tsx
@@ -5,13 +5,14 @@ import { cx } from "@/cva.config";
import { isWindows } from "@/utils";
import useKeyboard from "@hooks/useKeyboard";
import useMouse from "@hooks/useMouse";
-import { useRTCStore, useSettingsStore, useVideoStore } from "@hooks/stores";
+import { useRTCStore, useSettingsStore, useUiStore, useVideoStore } from "@hooks/stores";
import VirtualKeyboard from "@components/VirtualKeyboard";
import Actionbar from "@components/ActionBar";
import MacroBar from "@components/MacroBar";
import InfoBar from "@components/InfoBar";
import {
HDMIErrorOverlay,
+ KeyboardCaptureBar,
LoadingVideoOverlay,
NoAutoplayPermissionsOverlay,
PointerLockBar,
@@ -27,11 +28,14 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
const { mediaStream, peerConnectionState } = useRTCStore();
const [isPlaying, setIsPlaying] = useState(false);
const [isPointerLockActive, setIsPointerLockActive] = useState(false);
- const [isKeyboardLockActive, setIsKeyboardLockActive] = useState(false);
+ const { setIsKeyboardLockActive } = useUiStore();
const isPointerLockPossible =
window.location.protocol === "https:" || window.location.hostname === "localhost";
+ // macOS detection for Meta key fix
+ const isMacClient = useMemo(() => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent), []);
+
// Store hooks
const settings = useSettingsStore();
const { handleKeyPress, resetKeyboardState } = useKeyboard();
@@ -147,37 +151,29 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
}, [checkNavigatorPermissions, isPointerLockPossible, settings.mouseMode]);
const requestKeyboardLock = useCallback(async () => {
- if (videoElm.current === null) return;
-
- const isKeyboardLockGranted = await checkNavigatorPermissions("keyboard-lock");
+ if (!navigator || !("keyboard" in navigator)) return;
- if (isKeyboardLockGranted && navigator && "keyboard" in navigator) {
- try {
- // @ts-expect-error - keyboard lock is not supported in all browsers
- await navigator.keyboard.lock();
- setIsKeyboardLockActive(true);
- } catch {
- // ignore errors
- }
+ try {
+ // @ts-expect-error - keyboard lock is not supported in all browsers
+ await navigator.keyboard.lock();
+ console.debug("Keyboard lock acquired");
+ setIsKeyboardLockActive(true);
+ } catch (e) {
+ console.debug("Keyboard lock not available:", e);
}
- }, [checkNavigatorPermissions, setIsKeyboardLockActive]);
+ }, [setIsKeyboardLockActive]);
const releaseKeyboardLock = useCallback(async () => {
- if (
- fullscreenContainerRef.current === null ||
- document.fullscreenElement !== fullscreenContainerRef.current
- )
- return;
+ if (!navigator || !("keyboard" in navigator)) return;
- if (navigator && "keyboard" in navigator) {
- try {
- // @ts-expect-error - keyboard unlock is not supported in all browsers
- await navigator.keyboard.unlock();
- } catch {
- // ignore errors
- }
- setIsKeyboardLockActive(false);
+ try {
+ // @ts-expect-error - keyboard unlock is not supported in all browsers
+ navigator.keyboard.unlock();
+ console.debug("Keyboard lock released");
+ } catch {
+ // ignore errors
}
+ setIsKeyboardLockActive(false);
}, [setIsKeyboardLockActive]);
useEffect(() => {
@@ -206,30 +202,55 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
const requestFullscreen = useCallback(async () => {
if (!isFullscreenEnabled || !fullscreenContainerRef.current) return;
- // per https://wicg.github.io/keyboard-lock/#system-key-press-handler
- // If keyboard lock is activated after fullscreen is already in effect, then the user my
- // see multiple messages about how to exit fullscreen. For this reason, we recommend that
- // developers call lock() before they enter fullscreen:
- await requestKeyboardLock();
await requestPointerLock();
await fullscreenContainerRef.current.requestFullscreen({
navigationUI: "show",
});
- }, [isFullscreenEnabled, requestKeyboardLock, requestPointerLock]);
+ // keyboard.lock() is called in the fullscreenchange handler below,
+ // after fullscreen is confirmed active (required by the API)
+ }, [isFullscreenEnabled, requestPointerLock]);
- // setup to release the keyboard lock anytime the fullscreen ends
+ // Handle fullscreen enter/exit: acquire or release keyboard lock accordingly
useEffect(() => {
if (!videoElm.current) return;
const handleFullscreenChange = () => {
- if (!document.fullscreenElement) {
- releaseKeyboardLock();
+ if (document.fullscreenElement) {
+ // Entering fullscreen: always acquire keyboard lock
+ requestKeyboardLock();
+ } else {
+ // Exiting fullscreen: re-acquire lock if capture mode is on, otherwise release
+ if (settings.keyboardCaptureMode) {
+ requestKeyboardLock();
+ } else {
+ releaseKeyboardLock();
+ }
}
};
- document.addEventListener("fullscreenchange", handleFullscreenChange);
- }, [releaseKeyboardLock]);
+ const abortController = new AbortController();
+ document.addEventListener("fullscreenchange", handleFullscreenChange, {
+ signal: abortController.signal,
+ });
+
+ return () => {
+ abortController.abort();
+ };
+ }, [releaseKeyboardLock, requestKeyboardLock, settings.keyboardCaptureMode]);
+
+ // Sync keyboard lock state with capture mode setting
+ useEffect(
+ function syncKeyboardCaptureMode() {
+ if (settings.keyboardCaptureMode) {
+ requestKeyboardLock();
+ } else if (!document.fullscreenElement) {
+ // Only release if not in fullscreen (fullscreen manages its own lock)
+ releaseKeyboardLock();
+ }
+ },
+ [settings.keyboardCaptureMode, requestKeyboardLock, releaseKeyboardLock],
+ );
const absMouseMoveHandler = useMemo(
() =>
@@ -319,30 +340,10 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
}
}
- // When pressing the meta key + another key, the key will never trigger a keyup
- // 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 (e.metaKey && hidKey < 0xe0) {
- setTimeout(() => {
- console.debug(`Forcing the meta key release of associated key: ${hidKey}`);
- handleKeyPress(hidKey, false);
- }, 10);
- }
console.debug(`Key down: ${hidKey}`);
handleKeyPress(hidKey, true);
-
- if (!isKeyboardLockActive && hidKey === keys.MetaLeft) {
- // If the left meta key was just pressed and we're not keyboard locked
- // we'll never see the keyup event because the browser is going to lose
- // focus so set a deferred keyup after a short delay
- setTimeout(() => {
- console.debug(`Forcing the left meta key release`);
- handleKeyPress(hidKey, false);
- }, 100);
- }
},
- [handleKeyPress, isKeyboardLockActive, isWindowsClient],
+ [handleKeyPress, isWindowsClient],
);
const keyUpHandler = useCallback(
@@ -383,8 +384,15 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
console.debug(`Key up: ${hidKey}`);
handleKeyPress(hidKey, false);
+
+ // PiKVM-style fix: When Meta is released on macOS, release all keys to clean up
+ // stuck companion keys (Chrome doesn't fire their keyup events)
+ // https://bugs.chromium.org/p/chromium/issues/detail?id=28089
+ if (isMacClient && (code === "MetaLeft" || code === "MetaRight")) {
+ resetKeyboardState();
+ }
},
- [handleKeyPress, isWindowsClient],
+ [handleKeyPress, isMacClient, isWindowsClient, resetKeyboardState],
);
const videoKeyUpHandler = useCallback((e: KeyboardEvent) => {
@@ -547,6 +555,14 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
return true;
}, [hdmiError, isPlaying, peerConnection?.connectionState, videoHeight, videoWidth]);
+ const showKeyboardCaptureBar = useMemo(() => {
+ if (!settings.keyboardCaptureMode) return false;
+ if (isVideoLoading) return false;
+ if (!isPlaying) return false;
+ if (videoHeight === 0 || videoWidth === 0) return false;
+ return true;
+ }, [settings.keyboardCaptureMode, isPlaying, isVideoLoading, videoHeight, videoWidth]);
+
const showPointerLockBar = useMemo(() => {
if (settings.mouseMode !== "relative") return false;
if (!isPointerLockPossible) return false;
@@ -602,6 +618,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
{/* In relative mouse mode and under https, we enable the pointer lock, and to do so we need a bar to show the user to click on the video to enable mouse control */}
+
void;
+ isKeyboardLockActive: boolean;
+ setIsKeyboardLockActive: (active: boolean) => void;
+
rebootState: { isRebooting: boolean; postRebootAction: PostRebootAction } | null;
setRebootState: (
state: { isRebooting: boolean; postRebootAction: PostRebootAction } | null,
@@ -103,6 +106,9 @@ export const useUiStore = create(set => ({
setAttachedVirtualKeyboardVisibility: (enabled: boolean) =>
set({ isAttachedVirtualKeyboardVisible: enabled }),
+ isKeyboardLockActive: false,
+ setIsKeyboardLockActive: (active: boolean) => set({ isKeyboardLockActive: active }),
+
rebootState: null,
setRebootState: state => set({ rebootState: state }),
}));
@@ -360,6 +366,9 @@ export interface SettingsState {
showPressedKeys: boolean;
setShowPressedKeys: (show: boolean) => void;
+ keyboardCaptureMode: boolean;
+ setKeyboardCaptureMode: (enabled: boolean) => void;
+
// Video enhancement settings
videoSaturation: number;
setVideoSaturation: (value: number) => void;
@@ -406,6 +415,9 @@ export const useSettingsStore = create(
showPressedKeys: true,
setShowPressedKeys: (show: boolean) => set({ showPressedKeys: show }),
+ keyboardCaptureMode: false,
+ setKeyboardCaptureMode: (enabled: boolean) => set({ keyboardCaptureMode: enabled }),
+
// Video enhancement settings with default values (1.0 = normal)
videoSaturation: 1.0,
setVideoSaturation: (value: number) => set({ videoSaturation: value }),
diff --git a/ui/src/routes/devices.$id.settings.keyboard.tsx b/ui/src/routes/devices.$id.settings.keyboard.tsx
index f6db269b2..3e3256ef6 100644
--- a/ui/src/routes/devices.$id.settings.keyboard.tsx
+++ b/ui/src/routes/devices.$id.settings.keyboard.tsx
@@ -13,6 +13,7 @@ import { m } from "@localizations/messages.js";
export default function SettingsKeyboardRoute() {
const { setKeyboardLayout } = useSettingsStore();
const { showPressedKeys, setShowPressedKeys } = useSettingsStore();
+ const { keyboardCaptureMode, setKeyboardCaptureMode } = useSettingsStore();
const { selectedKeyboard, keyboardOptions } = useKeyboardLayout();
const { send } = useJsonRpc();
@@ -78,6 +79,18 @@ export default function SettingsKeyboardRoute() {
/>
+
+
+
+ setKeyboardCaptureMode(e.target.checked)}
+ />
+
+
);
}