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

Merge pull request #2 from Augtons/bugfix/pointer-lock

Browse Source 
fix(ui): fix relative mouse mode on browsers without the "pointer-lock" permission query
This commit is contained in:
luckfox-eng29
2026-05-09 16:57:36 +08:00
committed by GitHub
parent 141c16b9f7 461516665c
commit 97faba9dac
1 changed files with 10 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
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) => { const requestPointerLock = useCallback(async () => {
if (!navigator.permissions?.query) return false; if (!isPointerLockPossible || !videoElm.current || document.pointerLockElement || settings.mouseMode !== "relative") {
return;
}
try { try {
const { state } = await navigator.permissions.query({ await videoElm.current.requestPointerLock();
name: permissionName as PermissionName } catch (err) {
}); console.warn("[pointer-lock] requestPointerLock failed:", err);
return state === "granted";
} catch {
return false;
} }
}, []); }, [isPointerLockPossible, settings.mouseMode, videoElm]);
const requestPointerLock = useCallback(async () => {
if (!isPointerLockPossible || !videoElm.current || document.pointerLockElement) return;
const isPointerLockGranted = await checkNavigatorPermissions("pointer-lock");
if (isPointerLockGranted && settings.mouseMode === "relative") {
try {
await videoElm.current.requestPointerLock();
} catch {
// ignore errors
}
}
}, [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]);
@@ -49,4 +36,4 @@ export const usePointerLock = (videoElm: React.RefObject<HTMLVideoElement>) => {
isPointerLockPossible, isPointerLockPossible,
requestPointerLock, requestPointerLock,
}; };
}; };