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

Quality selector auto-triggers re-download on change when video is saved

Browse Source 
Changing the quality dropdown while a video is already downloaded now
immediately deletes the old file and starts a fresh download at the new
quality — no separate Re-download button needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mattias Tall
2026-05-26 17:41:06 +02:00
parent c24964a1ee
commit 83e2685c6a
1 changed files with 8 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -710,7 +710,7 @@ export default function Watch() {
}, [playRequested, fileReady, dlStatus?.status, dlStatus?.file_url, video?.is_downloaded, youtubeVideoId, pollForFile]); // eslint-disable-line react-hooks/exhaustive-deps }, [playRequested, fileReady, dlStatus?.status, dlStatus?.file_url, video?.is_downloaded, youtubeVideoId, pollForFile]); // eslint-disable-line react-hooks/exhaustive-deps
const downloadMut = useMutation({ const downloadMut = useMutation({
mutationFn: () => createDownload(youtubeVideoId, selectedQuality), mutationFn: (quality) => createDownload(youtubeVideoId, quality ?? selectedQuality),
onSuccess: (res) => { onSuccess: (res) => {
setDownloadId(res.data.id); setDownloadId(res.data.id);
refetchVideo(); refetchVideo();
@@ -722,7 +722,7 @@ export default function Watch() {
setPlayRequested(true); setPlayRequested(true);
downloadMut.mutate(); downloadMut.mutate();
}, [downloadMut]); }, [downloadMut]);
const handleRedownload = useCallback(async () => { const handleRedownload = useCallback(async (quality) => {
const dlId = downloadId ?? allDownloads.find( const dlId = downloadId ?? allDownloads.find(
d => d.youtube_video_id === youtubeVideoId && d.status === "complete" d => d.youtube_video_id === youtubeVideoId && d.status === "complete"
)?.id; )?.id;
@@ -736,7 +736,7 @@ export default function Watch() {
setIsRedownloading(false); setIsRedownloading(false);
qc.invalidateQueries({ queryKey: ["downloads"] }); qc.invalidateQueries({ queryKey: ["downloads"] });
refetchVideo(); refetchVideo();
downloadMut.mutate(); downloadMut.mutate(quality);
}, [downloadId, allDownloads, youtubeVideoId, downloadMut, refetchVideo, qc]); }, [downloadId, allDownloads, youtubeVideoId, downloadMut, refetchVideo, qc]);
const saveProgress = useCallback((secs) => { const saveProgress = useCallback((secs) => {
@@ -933,7 +933,11 @@ export default function Watch() {
{!isDownloading && !downloadMut.isPending && !isRedownloading && ( {!isDownloading && !downloadMut.isPending && !isRedownloading && (
<select <select
value={selectedQuality ?? "best"} value={selectedQuality ?? "best"}
onChange={(e) => setSelectedQuality(e.target.value)} onChange={(e) => {
const q = e.target.value;
setSelectedQuality(q);
if (dlComplete) handleRedownload(q);
}}
className="bg-zinc-800 text-zinc-300 text-xs rounded-full px-3 py-2 border border-zinc-700 focus:outline-none focus:border-accent" className="bg-zinc-800 text-zinc-300 text-xs rounded-full px-3 py-2 border border-zinc-700 focus:outline-none focus:border-accent"
> >
{[ {[
@@ -987,15 +991,6 @@ export default function Watch() {
</Chip> </Chip>
)} )}
{dlComplete && (
<Chip onClick={handleRedownload} disabled={isRedownloading || downloadMut.isPending}>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
Re-download
</Chip>
)}
{video?.id && ( {video?.id && (
<> <>