feat(tv): implement fullscreen navigation behavior for TV page

This commit is contained in:
2026-03-12 03:32:31 +01:00
parent 9559858075
commit 8754758254
2 changed files with 21 additions and 0 deletions

View File

@@ -79,6 +79,14 @@ export default function TvPage() {
document.addEventListener("fullscreenchange", handler);
return () => document.removeEventListener("fullscreenchange", handler);
}, []);
// Hide the shared nav bar in fullscreen; reveal it when overlays are shown
// (mouse move / key press). Classes are cleaned up on unmount.
useEffect(() => {
document.body.classList.toggle("tv-fullscreen", isFullscreen);
document.body.classList.toggle("tv-overlays", isFullscreen && showOverlays);
return () => document.body.classList.remove("tv-fullscreen", "tv-overlays");
}, [isFullscreen, showOverlays]);
const toggleFullscreen = useCallback(() => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(() => {});

View File

@@ -127,3 +127,16 @@
@apply font-sans;
}
}
/* Hide the nav bar when the TV page is in fullscreen, reveal on interaction */
body.tv-fullscreen header {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
transition: transform 0.25s ease, opacity 0.25s ease;
}
body.tv-fullscreen.tv-overlays header {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}