refactor(frontend): extract logic to hooks, split inline components
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
This commit is contained in:
40
k-tv-frontend/app/(main)/tv/components/quality-picker.tsx
Normal file
40
k-tv-frontend/app/(main)/tv/components/quality-picker.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
interface QualityPickerProps {
|
||||
quality: string;
|
||||
options: { value: string; label: string }[];
|
||||
showPicker: boolean;
|
||||
onToggle: () => void;
|
||||
onChangeQuality: (q: string) => void;
|
||||
}
|
||||
|
||||
export function QualityPicker({
|
||||
quality,
|
||||
options,
|
||||
showPicker,
|
||||
onToggle,
|
||||
onChangeQuality,
|
||||
}: QualityPickerProps) {
|
||||
return (
|
||||
<div className="pointer-events-auto relative">
|
||||
<button
|
||||
className="rounded-md bg-black/50 px-3 py-1.5 text-xs text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
|
||||
onClick={onToggle}
|
||||
title="Stream quality"
|
||||
>
|
||||
{options.find((o) => o.value === quality)?.label ?? quality}
|
||||
</button>
|
||||
{showPicker && (
|
||||
<div className="absolute right-0 top-9 z-30 min-w-[8rem] overflow-hidden rounded-md border border-zinc-700 bg-zinc-900/95 py-1 shadow-xl backdrop-blur">
|
||||
{options.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${quality === opt.value ? "text-white" : "text-zinc-400"}`}
|
||||
onClick={() => onChangeQuality(opt.value)}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user