From dfd8f52a53b66f938756a1f1239ac34a65b76faa Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Fri, 13 Mar 2026 02:02:51 +0100
Subject: [PATCH] feat(tv): relocate fullscreen event tracking for iOS Safari
 to ensure proper video element handling

---
 k-tv-frontend/app/(main)/tv/page.tsx | 30 ++++++++++++++--------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/k-tv-frontend/app/(main)/tv/page.tsx b/k-tv-frontend/app/(main)/tv/page.tsx
index 37a76da..082162a 100644
--- a/k-tv-frontend/app/(main)/tv/page.tsx
+++ b/k-tv-frontend/app/(main)/tv/page.tsx
@@ -98,21 +98,6 @@ function TvPageContent() {
     return () => document.removeEventListener("fullscreenchange", handler);
   }, []);
 
-  // iOS Safari: track fullscreen state via webkit video element events.
-  // Re-run when streamUrl changes so we catch the video element after it mounts.
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-    const onBegin = () => setIsFullscreen(true);
-    const onEnd = () => setIsFullscreen(false);
-    video.addEventListener("webkitbeginfullscreen", onBegin);
-    video.addEventListener("webkitendfullscreen", onEnd);
-    return () => {
-      video.removeEventListener("webkitbeginfullscreen", onBegin);
-      video.removeEventListener("webkitendfullscreen", onEnd);
-    };
-  }, [streamUrl]);
-
   // Hide the shared nav bar in fullscreen; reveal it when overlays are shown
   // (mouse move / key press). Classes are cleaned up on unmount.
   useEffect(() => {
@@ -180,6 +165,21 @@ function TvPageContent() {
   const { data: epgSlots } = useEpg(channel?.id ?? "");
   const { data: streamUrl } = useStreamUrl(channel?.id, token, broadcast?.slot.id);
 
+  // iOS Safari: track fullscreen state via webkit video element events.
+  // Re-run when streamUrl changes so we catch the video element after it mounts.
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const onBegin = () => setIsFullscreen(true);
+    const onEnd = () => setIsFullscreen(false);
+    video.addEventListener("webkitbeginfullscreen", onBegin);
+    video.addEventListener("webkitendfullscreen", onEnd);
+    return () => {
+      video.removeEventListener("webkitbeginfullscreen", onBegin);
+      video.removeEventListener("webkitendfullscreen", onEnd);
+    };
+  }, [streamUrl]);
+
   // Clear transient states when a new slot is detected
   useEffect(() => {
     setStreamError(false);