Add per-video subtitle language picker on Watch page

- fetch_available_subs() queries yt-dlp for manual + auto-generated
  subtitle langs available on YouTube for any given video
- GET /api/videos/by-yt/{ytId}/subs exposes this to the frontend
- DownloadRequest now accepts subtitle_langs to override the global
  setting on a per-download basis
- Watch page fetches available subtitle langs on load (in parallel),
  shows a CC dropdown with manual langs + auto-generated langs labeled
  "(auto)"; selected lang is passed through to the download

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/api/index.js

@@ -87,9 +87,10 @@ export const importChapters = (videoId) => api.post(`/videos/${videoId}/bookmark
 export const clearChapters = (videoId) => api.delete(`/videos/${videoId}/bookmarks/clear-chapters`);
 
 // Downloads
-export const createDownload = (youtube_video_id, quality) =>
-  api.post("/downloads", { youtube_video_id, ...(quality ? { quality } : {}) });
+export const createDownload = (youtube_video_id, quality, subtitle_langs) =>
+  api.post("/downloads", { youtube_video_id, ...(quality ? { quality } : {}), ...(subtitle_langs ? { subtitle_langs } : {}) });
 export const getDownloads = () => api.get("/downloads");
+export const getAvailableSubs = (ytId) => api.get(`/videos/by-yt/${ytId}/subs`);
 export const getDownload = (id) => api.get(`/downloads/${id}`);
 export const deleteDownload = (id) => api.delete(`/downloads/${id}`);
 export const deleteAllDownloads = () => api.delete("/downloads/all");

frontend/src/pages/Watch.jsx

@@ -7,7 +7,7 @@ import {
   getSettings, updateSettings, getRelatedVideos, getDownloads, rateVideo,
   getBookmarks, createBookmark, updateBookmark, deleteBookmark, importChapters, clearChapters,
   getCollections, addToCollection, getQueue,
-  getVideoComments, refreshVideoComments,
+  getVideoComments, refreshVideoComments, getAvailableSubs,
 } from "../api";
 import VideoCard from "../components/VideoCard";
 
@@ -564,6 +564,7 @@ export default function Watch() {
   const [disliked, setDisliked] = useState(null);
   const [isRedownloading, setIsRedownloading] = useState(false);
   const [selectedQuality, setSelectedQuality] = useState(null);
+  const [selectedSubLang, setSelectedSubLang] = useState("");
   const [speed, setSpeed] = useState(1);
   const [autoplay, setAutoplay] = useState(false);
   const [theater, setTheater] = useState(false);
@@ -659,6 +660,13 @@ export default function Watch() {
     staleTime: sidebarMode === "random" ? 0 : 5 * 60_000,
   });
 
+  const { data: availableSubs, isLoading: subsLoading } = useQuery({
+    queryKey: ["available-subs", youtubeVideoId],
+    queryFn: () => getAvailableSubs(youtubeVideoId).then(r => r.data),
+    enabled: !!youtubeVideoId,
+    staleTime: 10 * 60_000,
+  });
+
   const { data: dlStatus } = useQuery({
     queryKey: ["download-status", downloadId],
     queryFn: () => getDownload(downloadId).then(r => r.data),
@@ -710,7 +718,8 @@ 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: (quality) => createDownload(youtubeVideoId, quality ?? selectedQuality),
+    mutationFn: ({ quality, subLang } = {}) =>
+      createDownload(youtubeVideoId, quality ?? selectedQuality, subLang ?? selectedSubLang),
     onSuccess: (res) => {
       setDownloadId(res.data.id);
       refetchVideo();
@@ -720,7 +729,7 @@ export default function Watch() {
   const handlePlay = useCallback(() => setPlayRequested(true), []);
   const handleDownloadAndPlay = useCallback(() => {
     setPlayRequested(true);
-    downloadMut.mutate();
+    downloadMut.mutate({});
   }, [downloadMut]);
   const handleRedownload = useCallback(async (quality) => {
     const dlId = downloadId ?? allDownloads.find(
@@ -736,7 +745,7 @@ export default function Watch() {
     setIsRedownloading(false);
     qc.invalidateQueries({ queryKey: ["downloads"] });
     refetchVideo();
-    downloadMut.mutate(quality);
+    downloadMut.mutate({ quality });
   }, [downloadId, allDownloads, youtubeVideoId, downloadMut, refetchVideo, qc]);
 
   const saveProgress = useCallback((secs) => {
@@ -938,6 +947,7 @@ export default function Watch() {
                     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"
                 >
                   {[
@@ -956,6 +966,31 @@ export default function Watch() {
                 </select>
               )}
 
+              {!dlComplete && (() => {
+                const manual = new Set(availableSubs?.manual ?? []);
+                const auto   = (availableSubs?.auto ?? []).filter(l => !manual.has(l));
+                const allLangs = [...manual, ...auto];
+                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="w-3 h-3 border border-zinc-600 border-t-transparent rounded-full animate-spin inline-block" />
+                    CC
+                  </span>
+                );
+                if (!allLangs.length) return null;
+                return (
+                  <select
+                    value={selectedSubLang}
+                    onChange={(e) => setSelectedSubLang(e.target.value)}
+                    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"
+                    title="Subtitle language"
+                  >
+                    <option value="">No subtitles</option>
+                    {[...manual].map(l => <option key={l} value={l}>{l}</option>)}
+                    {auto.map(l => <option key={l} value={l}>{l} (auto)</option>)}
+                  </select>
+                );
+              })()}
+
               {fileReady && (
                 <select
                   value={speed}
@@ -971,7 +1006,7 @@ export default function Watch() {
               <Chip
                 active={dlComplete}
                 disabled={dlComplete || isDownloading || downloadMut.isPending}
-                onClick={() => !dlComplete && !isDownloading && downloadMut.mutate()}
+                onClick={() => !dlComplete && !isDownloading && downloadMut.mutate({})}
               >
                 {dlComplete ? (
                   <><svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>Saved{downloadedResolution ? ` · ${downloadedResolution}` : ""}</>