feat(tv): relocate fullscreen event tracking for iOS Safari to ensure proper video element handling

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);