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
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import type { SubtitleTrack } from "./video-player";
|
|
|
|
interface SubtitlePickerProps {
|
|
tracks: SubtitleTrack[];
|
|
activeTrack: number;
|
|
show: boolean;
|
|
onToggle: () => void;
|
|
onChangeTrack: (id: number) => void;
|
|
}
|
|
|
|
export function SubtitlePicker({
|
|
tracks,
|
|
activeTrack,
|
|
show,
|
|
onToggle,
|
|
onChangeTrack,
|
|
}: SubtitlePickerProps) {
|
|
if (tracks.length === 0) return null;
|
|
return (
|
|
<div className="pointer-events-auto relative">
|
|
<button
|
|
className="rounded-md bg-black/50 px-3 py-1.5 text-xs backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
|
|
style={{
|
|
color: activeTrack !== -1 ? "white" : undefined,
|
|
borderBottom:
|
|
activeTrack !== -1 ? "2px solid white" : "2px solid transparent",
|
|
}}
|
|
onClick={onToggle}
|
|
>
|
|
CC
|
|
</button>
|
|
{show && (
|
|
<div className="absolute right-0 top-9 z-30 min-w-[10rem] overflow-hidden rounded-md border border-zinc-700 bg-zinc-900/95 py-1 shadow-xl backdrop-blur">
|
|
<button
|
|
className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${activeTrack === -1 ? "text-white" : "text-zinc-400"}`}
|
|
onClick={() => onChangeTrack(-1)}
|
|
>
|
|
Off
|
|
</button>
|
|
{tracks.map((track) => (
|
|
<button
|
|
key={track.id}
|
|
className={`w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-zinc-700 ${activeTrack === track.id ? "text-white" : "text-zinc-400"}`}
|
|
onClick={() => onChangeTrack(track.id)}
|
|
>
|
|
{track.name || track.lang || `Track ${track.id + 1}`}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|