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>

backend/routers/downloads.py

@@ -19,6 +19,7 @@ router = APIRouter()
 class DownloadRequest(BaseModel):
     youtube_video_id: str
     quality: Optional[str] = None
+    subtitle_langs: Optional[str] = None  # overrides user setting when provided
 
 
 TRASH_TTL_DAYS = 7
@@ -127,7 +128,10 @@ def create_download(
     user_settings = db.query(UserSettings).filter_by(user_id=current_user.id).first()
     default_quality = user_settings.preferred_quality if user_settings else "best"
     quality = body.quality if body.quality in ytdlp.QUALITY_FORMATS else default_quality
-    subtitle_langs = (user_settings.subtitle_langs or "") if user_settings else ""
+    if body.subtitle_langs is not None:
+        subtitle_langs = body.subtitle_langs.strip()
+    else:
+        subtitle_langs = (user_settings.subtitle_langs or "") if user_settings else ""
 
     _DL_SELECT = """
         SELECT d.id, d.status, d.progress_percent, d.resolution,

backend/routers/videos.py

@@ -657,6 +657,15 @@ def delete_bookmark(
         db.commit()
 
 
+@router.get("/by-yt/{youtube_video_id}/subs")
+def get_available_subs(
+    youtube_video_id: str,
+    current_user: User = Depends(get_current_user),
+):
+    """Return subtitle languages available on YouTube for a video."""
+    return ytdlp.fetch_available_subs(youtube_video_id)
+
+
 @router.get("/by-yt/{youtube_video_id}/comments")
 def get_comments(
     youtube_video_id: str,

backend/services/ytdlp.py

@@ -384,6 +384,36 @@ def fetch_channel_links(channel_id: str) -> list[str]:
     return list(channel_ids)
 
 
+def fetch_available_subs(video_id: str) -> dict:
+    """Return subtitle languages available on YouTube for a video.
+
+    Returns {"manual": [...], "auto": [...]} where both are sorted lists of
+    BCP-47 lang codes. Manual = human-made; auto = auto-generated captions.
+    """
+    url = f"https://www.youtube.com/watch?v={video_id}"
+    base_cmd = ["yt-dlp", url, "--dump-json", "--no-download", "--no-playlist"]
+    cookie_args = _cookie_args()
+    stdout, _, code = _run([*base_cmd, *cookie_args], timeout=30)
+    if code != 0 and cookie_args:
+        stdout, _, code = _run(base_cmd, timeout=30)
+
+    for line in stdout.splitlines():
+        line = line.strip()
+        if not line:
+            continue
+        try:
+            info = json.loads(line)
+            manual = sorted(info.get("subtitles") or {})
+            auto = sorted(set(
+                lang for lang in (info.get("automatic_captions") or {})
+                if not lang.endswith("-orig")
+            ))
+            return {"manual": manual, "auto": auto}
+        except json.JSONDecodeError:
+            continue
+    return {"manual": [], "auto": []}
+
+
 def fetch_video_comments(youtube_video_id: str, max_comments: int = 20) -> list[dict]:
     """Fetch top comments via yt-dlp CLI writing to a temp file. Returns empty list on failure."""
     import os

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) =>
+export const createDownload = (youtube_video_id, quality, subtitle_langs) =>
-  api.post("/downloads", { youtube_video_id, ...(quality ? { quality } : {}) });
+  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}` : ""}</>