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, useCallback } from "react";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
|
|
export const QUALITY_OPTIONS = [
|
|
{ value: "direct", label: "Auto" },
|
|
{ value: "40000000", label: "40 Mbps" },
|
|
{ value: "8000000", label: "8 Mbps" },
|
|
{ value: "2000000", label: "2 Mbps" },
|
|
];
|
|
|
|
export function useQuality(channelId?: string, slotId?: string) {
|
|
const queryClient = useQueryClient();
|
|
const [quality, setQuality] = useState<string>(() => {
|
|
try {
|
|
return localStorage.getItem("quality") ?? "direct";
|
|
} catch {
|
|
return "direct";
|
|
}
|
|
});
|
|
const [showQualityPicker, setShowQualityPicker] = useState(false);
|
|
|
|
const changeQuality = useCallback(
|
|
(q: string) => {
|
|
setQuality(q);
|
|
try {
|
|
localStorage.setItem("quality", q);
|
|
} catch {}
|
|
setShowQualityPicker(false);
|
|
queryClient.invalidateQueries({
|
|
queryKey: ["stream-url", channelId, slotId],
|
|
});
|
|
},
|
|
[queryClient, channelId, slotId],
|
|
);
|
|
|
|
return { quality, showQualityPicker, setShowQualityPicker, changeQuality, QUALITY_OPTIONS };
|
|
}
|