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
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback, useRef } from "react";
|
|
|
|
export function useChannelInput(
|
|
channelCount: number,
|
|
switchChannel: (idx: number) => void,
|
|
resetIdle: () => void,
|
|
) {
|
|
const [channelInput, setChannelInput] = useState("");
|
|
const channelInputTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
const handleDigit = useCallback(
|
|
(digit: string) => {
|
|
setChannelInput((prev) => {
|
|
const next = prev + digit;
|
|
if (channelInputTimer.current) clearTimeout(channelInputTimer.current);
|
|
channelInputTimer.current = setTimeout(() => {
|
|
const num = parseInt(next, 10);
|
|
if (num >= 1 && num <= Math.max(channelCount, 1)) {
|
|
switchChannel(num - 1);
|
|
resetIdle();
|
|
}
|
|
setChannelInput("");
|
|
}, 1500);
|
|
return next;
|
|
});
|
|
},
|
|
[channelCount, switchChannel, resetIdle],
|
|
);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (channelInputTimer.current) clearTimeout(channelInputTimer.current);
|
|
};
|
|
}, []);
|
|
|
|
return { channelInput, handleDigit };
|
|
}
|