clone/kvm
1
0
Fork 0
mirror of https://github.com/luckfox-eng29/kvm.git synced 2026-05-26 08:05:08 +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

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