Gabriel Kaszewski
8ed8da2d90
Area 1 (tv/page.tsx 964→423 lines): - hooks: use-fullscreen, use-idle, use-volume, use-quality, use-subtitles, use-channel-input, use-channel-passwords, use-tv-keyboard - components: SubtitlePicker, VolumeControl, QualityPicker, TopControlBar, LogoWatermark, AutoplayPrompt, ChannelNumberOverlay, TvBaseLayer Area 2 (edit-channel-sheet.tsx 1244→678 lines): - hooks: use-channel-form (all form state + reset logic) - lib/schemas.ts: extracted Zod schemas + extractErrors - components: AlgorithmicFilterEditor, RecyclePolicyEditor, WebhookEditor, AccessSettingsEditor, LogoEditor Area 3 (dashboard/page.tsx 406→261 lines): - hooks: use-channel-order, use-import-channel, use-regenerate-all - lib/channel-export.ts: pure export utility - components: DashboardHeader
65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback, RefObject } from "react";
|
|
|
|
export function useFullscreen(
|
|
videoRef: RefObject<HTMLVideoElement | null>,
|
|
showOverlays: boolean,
|
|
streamUrl?: string | null,
|
|
) {
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
|
|
// Standard fullscreenchange
|
|
useEffect(() => {
|
|
const handler = () => setIsFullscreen(!!document.fullscreenElement);
|
|
document.addEventListener("fullscreenchange", handler);
|
|
return () => document.removeEventListener("fullscreenchange", handler);
|
|
}, []);
|
|
|
|
// Body classes for nav hiding
|
|
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]);
|
|
|
|
// iOS Safari webkit events — re-attach when stream URL changes (new video element)
|
|
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);
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [streamUrl]);
|
|
|
|
const toggleFullscreen = useCallback(() => {
|
|
if (document.fullscreenEnabled) {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen().catch(() => {});
|
|
} else {
|
|
document.exitFullscreen().catch(() => {});
|
|
}
|
|
return;
|
|
}
|
|
const video = videoRef.current as HTMLVideoElement & {
|
|
webkitEnterFullscreen?: () => void;
|
|
webkitExitFullscreen?: () => void;
|
|
webkitDisplayingFullscreen?: boolean;
|
|
};
|
|
if (!video?.webkitEnterFullscreen) return;
|
|
if (video.webkitDisplayingFullscreen) {
|
|
video.webkitExitFullscreen?.();
|
|
} else {
|
|
video.webkitEnterFullscreen();
|
|
}
|
|
}, [videoRef]);
|
|
|
|
return { isFullscreen, toggleFullscreen };
|
|
}
|