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
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback, useRef, RefObject } from "react";
|
|
|
|
export function useIdle(
|
|
timeoutMs: number,
|
|
videoRef: RefObject<HTMLVideoElement | null>,
|
|
onIdle?: () => void,
|
|
) {
|
|
const [showOverlays, setShowOverlays] = useState(true);
|
|
const [needsInteraction, setNeedsInteraction] = useState(false);
|
|
const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
// Keep onIdle in a ref so resetIdle doesn't need it as a dep
|
|
const onIdleRef = useRef(onIdle);
|
|
useEffect(() => {
|
|
onIdleRef.current = onIdle;
|
|
});
|
|
|
|
const resetIdle = useCallback(() => {
|
|
setShowOverlays(true);
|
|
setNeedsInteraction(false);
|
|
if (idleTimer.current) clearTimeout(idleTimer.current);
|
|
idleTimer.current = setTimeout(() => {
|
|
setShowOverlays(false);
|
|
onIdleRef.current?.();
|
|
}, timeoutMs);
|
|
videoRef.current?.play().catch(() => {});
|
|
}, [timeoutMs, videoRef]);
|
|
|
|
useEffect(() => {
|
|
resetIdle();
|
|
return () => {
|
|
if (idleTimer.current) clearTimeout(idleTimer.current);
|
|
};
|
|
}, [resetIdle]);
|
|
|
|
return { showOverlays, needsInteraction, setNeedsInteraction, resetIdle };
|
|
}
|