inputnoise/youclonedl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make subtitle availability check lazy (user-triggered, not on page load)

Browse Source 
Auto-fetching on every watch page load spawned a yt-dlp process per visit
which could hang and pile up. CC button now triggers the check on demand.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mattias Thall
2026-05-26 21:04:41 +02:00
parent 399c5fcada
commit 97ebcd6c1d
1 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/pages/Watch.jsx
View File

@@ -660,11 +660,13 @@ export default function Watch() {
staleTime: sidebarMode === "random" ? 0 : 5 * 60_000, staleTime: sidebarMode === "random" ? 0 : 5 * 60_000,
}); });
const [subsRequested, setSubsRequested] = useState(false);
useEffect(() => { setSubsRequested(false); setSelectedSubLang(""); }, [youtubeVideoId]);
const { data: availableSubs, isLoading: subsLoading } = useQuery({ const { data: availableSubs, isLoading: subsLoading } = useQuery({
queryKey: ["available-subs", youtubeVideoId], queryKey: ["available-subs", youtubeVideoId],
queryFn: () => getAvailableSubs(youtubeVideoId).then(r => r.data), queryFn: () => getAvailableSubs(youtubeVideoId).then(r => r.data),
enabled: !!youtubeVideoId, enabled: subsRequested && !!youtubeVideoId,
staleTime: 10 * 60_000, staleTime: 30 * 60_000,
}); });
const { data: dlStatus } = useQuery({ const { data: dlStatus } = useQuery({
@@ -967,16 +969,26 @@ export default function Watch() {
)} )}
{!dlComplete && (() => { {!dlComplete && (() => {
const manual = new Set(availableSubs?.manual ?? []); if (!subsRequested) return (
const auto = (availableSubs?.auto ?? []).filter(l => !manual.has(l)); <button
const allLangs = [...manual, ...auto]; onClick={() => setSubsRequested(true)}
className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium bg-zinc-800 text-zinc-400 hover:bg-zinc-700 transition-colors"
title="Check available subtitles"
>
CC
</button>
);
if (subsLoading) return ( if (subsLoading) return (
<span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-zinc-800 text-zinc-500 text-xs"> <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-zinc-800 text-zinc-500 text-xs">
<span className="w-3 h-3 border border-zinc-600 border-t-transparent rounded-full animate-spin inline-block" /> <span className="w-3 h-3 border border-zinc-600 border-t-transparent rounded-full animate-spin inline-block" />
CC CC
</span> </span>
); );
if (!allLangs.length) return null; const manual = new Set(availableSubs?.manual ?? []);
const auto = (availableSubs?.auto ?? []).filter(l => !manual.has(l));
if (!manual.size && !auto.length) return (
<span className="px-3 py-1.5 rounded-full bg-zinc-800 text-zinc-600 text-xs">No CC</span>
);
return ( return (
<select <select
value={selectedSubLang} value={selectedSubLang}