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

Add per-video subtitle language picker on Watch page

Browse Source 
- 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>
This commit is contained in:
Mattias Thall
2026-05-26 20:57:57 +02:00
parent ea99b74ba8
commit 399c5fcada
5 changed files with 87 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
backend/routers/downloads.py
View File

@@ -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,6 +128,9 @@ 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
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 = """

9
backend/routers/videos.py
View File

@@ -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,

30
backend/services/ytdlp.py
View File

@@ -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

5
frontend/src/api/index.js
View File

@@ -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");

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

@@ -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}` : ""}</>