GKaszewski/k-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-03-12 03:32:31 +01:00
parent 9559858075
commit 8754758254
2 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
k-tv-frontend/app/(main)/tv/page.tsx
View File

@@ -79,6 +79,14 @@ export default function TvPage() {
document.addEventListener("fullscreenchange", handler); document.addEventListener("fullscreenchange", handler);
return () => document.removeEventListener("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(() => { const toggleFullscreen = useCallback(() => {
if (!document.fullscreenElement) { if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(() => {}); document.documentElement.requestFullscreen().catch(() => {});

13
k-tv-frontend/app/globals.css
View File

@@ -126,4 +126,17 @@
html { html {
@apply font-sans; @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;
} }