clone/kvm
1
0
Fork 0
mirror of https://github.com/luckfox-eng29/kvm.git synced 2026-05-28 17:11:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix relative mouse mode on browsers without the 'pointer-lock' permission query

Browse Source
This commit is contained in:
Augtons
2026-05-06 23:41:03 +08:00
parent d5bfaffd86
commit 461516665c
1 changed files with 10 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
ui/src/layout/core/desktop/hooks/usePointerLock.ts
View File

@@ -7,31 +7,17 @@ export const usePointerLock = (videoElm: React.RefObject<HTMLVideoElement>) => {
const settings = useSettingsStore(); const settings = useSettingsStore();
const isPointerLockPossible = window.location.protocol === "https:" || window.location.hostname === "localhost"; const isPointerLockPossible = window.location.protocol === "https:" || window.location.hostname === "localhost";
const checkNavigatorPermissions = useCallback(async (permissionName: string) => {
if (!navigator.permissions?.query) return false;
try {
const { state } = await navigator.permissions.query({
name: permissionName as PermissionName
});
return state === "granted";
} catch {
return false;
}
}, []);
const requestPointerLock = useCallback(async () => { const requestPointerLock = useCallback(async () => {
if (!isPointerLockPossible || !videoElm.current || document.pointerLockElement) return; if (!isPointerLockPossible || !videoElm.current || document.pointerLockElement || settings.mouseMode !== "relative") {
return;
}
const isPointerLockGranted = await checkNavigatorPermissions("pointer-lock");
if (isPointerLockGranted && settings.mouseMode === "relative") {
try { try {
await videoElm.current.requestPointerLock(); await videoElm.current.requestPointerLock();
} catch { } catch (err) {
// ignore errors console.warn("[pointer-lock] requestPointerLock failed:", err);
} }
} }, [isPointerLockPossible, settings.mouseMode, videoElm]);
}, [checkNavigatorPermissions, isPointerLockPossible, settings.mouseMode, videoElm]);
useEffect(() => { useEffect(() => {
if (!isPointerLockPossible || !videoElm.current) return; if (!isPointerLockPossible || !videoElm.current) return;
@@ -40,6 +26,7 @@ export const usePointerLock = (videoElm: React.RefObject<HTMLVideoElement>) => {
setIsPointerLockActive(!!document.pointerLockElement); setIsPointerLockActive(!!document.pointerLockElement);
}; };
handlePointerLockChange();
document.addEventListener("pointerlockchange", handlePointerLockChange); document.addEventListener("pointerlockchange", handlePointerLockChange);
return () => document.removeEventListener("pointerlockchange", handlePointerLockChange); return () => document.removeEventListener("pointerlockchange", handlePointerLockChange);
}, [isPointerLockPossible, videoElm]); }, [isPointerLockPossible, videoElm]);