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

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

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-03-13 02:02:51 +01:00
parent c152894291
commit dfd8f52a53
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -98,21 +98,6 @@ function TvPageContent() {
return () => document.removeEventListener("fullscreenchange", handler); 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 // Hide the shared nav bar in fullscreen; reveal it when overlays are shown
// (mouse move / key press). Classes are cleaned up on unmount. // (mouse move / key press). Classes are cleaned up on unmount.
useEffect(() => { useEffect(() => {
@@ -180,6 +165,21 @@ function TvPageContent() {
const { data: epgSlots } = useEpg(channel?.id ?? ""); const { data: epgSlots } = useEpg(channel?.id ?? "");
const { data: streamUrl } = useStreamUrl(channel?.id, token, broadcast?.slot.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 // Clear transient states when a new slot is detected
useEffect(() => { useEffect(() => {
setStreamError(false); setStreamError(false);