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