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

fix: show HDMI overlays in fullscreen mode 

Fixes #919 where HDMI error overlays ("No HDMI signal detected")
were not visible when video was in fullscreen mode.

Changes:
- Add fullscreenContainerRef to target the container div
- Update requestFullscreen() to make container fullscreen instead of video
- Update releaseKeyboardLock() to check container instead of video
- Attach ref to container div that includes both video and overlays

This ensures overlays are descendants of the fullscreen element and
thus visible according to the Fullscreen API specification.

Previously: video element went fullscreen, overlays (siblings) invisible
Now: container with video + overlays goes fullscreen, all visible
This commit is contained in:
Nitish Agarwal 2025-11-16 12:12:50 +05:30
parent b074462ee7
commit e928662bc9
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,7 @@ import { m } from "@localizations/messages.js";
export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssues: boolean }) {
// Video and stream related refs and states
const videoElm = useRef<HTMLVideoElement>(null);
const fullscreenContainerRef = useRef<HTMLDivElement>(null);
const { mediaStream, peerConnectionState } = useRTCStore();
const [isPlaying, setIsPlaying] = useState(false);
const [isPointerLockActive, setIsPointerLockActive] = useState(false);
@ -150,7 +151,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
}, [checkNavigatorPermissions, setIsKeyboardLockActive]);
const releaseKeyboardLock = useCallback(async () => {
if (videoElm.current === null || document.fullscreenElement !== videoElm.current) return;
if (fullscreenContainerRef.current === null || document.fullscreenElement !== fullscreenContainerRef.current) return;
if (navigator && "keyboard" in navigator) {
try {
@ -187,7 +188,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
}, [isPointerLockPossible]);
const requestFullscreen = useCallback(async () => {
if (!isFullscreenEnabled || !videoElm.current) return;
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
@ -196,7 +197,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
await requestKeyboardLock();
await requestPointerLock();
await videoElm.current.requestFullscreen({
await fullscreenContainerRef.current.requestFullscreen({
navigationUI: "show",
});
}, [isFullscreenEnabled, requestKeyboardLock, requestPointerLock]);
@ -512,7 +513,10 @@ 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 */}
<PointerLockBar show={showPointerLockBar} />
<div className="relative mx-4 my-2 flex items-center justify-center overflow-hidden">
<div className="relative flex h-full w-full items-center justify-center">
<div
ref={fullscreenContainerRef}
className="relative flex h-full w-full items-center justify-center"
>
<video
ref={videoElm}
autoPlay