From 83e2685c6acc6352523f93a7ca830ba8a6172a03 Mon Sep 17 00:00:00 2001
From: Mattias Tall <mattias.tall@ucr.uu.se>
Date: Tue, 26 May 2026 17:41:06 +0200
Subject: [PATCH] Quality selector auto-triggers re-download on change when
 video is saved
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/pages/Watch.jsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/Watch.jsx b/frontend/src/pages/Watch.jsx
index 300ba07..66e91e9 100644
--- a/frontend/src/pages/Watch.jsx
+++ b/frontend/src/pages/Watch.jsx
@@ -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
 
   const downloadMut = useMutation({
-    mutationFn: () => createDownload(youtubeVideoId, selectedQuality),
+    mutationFn: (quality) => createDownload(youtubeVideoId, quality ?? selectedQuality),
     onSuccess: (res) => {
       setDownloadId(res.data.id);
       refetchVideo();
@@ -722,7 +722,7 @@ export default function Watch() {
     setPlayRequested(true);
     downloadMut.mutate();
   }, [downloadMut]);
-  const handleRedownload = useCallback(async () => {
+  const handleRedownload = useCallback(async (quality) => {
     const dlId = downloadId ?? allDownloads.find(
       d => d.youtube_video_id === youtubeVideoId && d.status === "complete"
     )?.id;
@@ -736,7 +736,7 @@ export default function Watch() {
     setIsRedownloading(false);
     qc.invalidateQueries({ queryKey: ["downloads"] });
     refetchVideo();
-    downloadMut.mutate();
+    downloadMut.mutate(quality);
   }, [downloadId, allDownloads, youtubeVideoId, downloadMut, refetchVideo, qc]);
 
   const saveProgress = useCallback((secs) => {
@@ -933,7 +933,11 @@ export default function Watch() {
               {!isDownloading && !downloadMut.isPending && !isRedownloading && (
                 <select
                   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"
                 >
                   {[
@@ -987,15 +991,6 @@ export default function Watch() {
                 </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 && (
                 <>