From 875475825459e1fc10df6b5a51be05b9fc75ccf6 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Thu, 12 Mar 2026 03:32:31 +0100
Subject: [PATCH] feat(tv): implement fullscreen navigation behavior for TV
 page

---
 k-tv-frontend/app/(main)/tv/page.tsx |  8 ++++++++
 k-tv-frontend/app/globals.css        | 13 +++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/k-tv-frontend/app/(main)/tv/page.tsx b/k-tv-frontend/app/(main)/tv/page.tsx
index d17894b..8243ed8 100644
--- a/k-tv-frontend/app/(main)/tv/page.tsx
+++ b/k-tv-frontend/app/(main)/tv/page.tsx
@@ -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(() => {});
diff --git a/k-tv-frontend/app/globals.css b/k-tv-frontend/app/globals.css
index a8da733..0f67ea9 100644
--- a/k-tv-frontend/app/globals.css
+++ b/k-tv-frontend/app/globals.css
@@ -126,4 +126,17 @@
   html {
     @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;
 }
\ No newline at end of file