Fix subtitle playback: vtt format, track elements, fast disk scan

- Convert subs to .vtt (was .srt which browsers don't support in <track>)
- Add GET /subtitle-files endpoint: instant disk scan for .vtt sidecar files,
  no yt-dlp call needed
- Inject <track> elements into the video player for each .vtt on disk;
  browser CC button appears automatically
- Before download: CC chip triggers YouTube availability check (slow, on demand)
- After download with subs: shows "CC ✓" — subtitles live in the player controls

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

frontend/src/api/index.js

@@ -91,6 +91,7 @@ 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 getSubtitleFiles = (ytId) => api.get(`/videos/by-yt/${ytId}/subtitle-files`);
 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, getAvailableSubs,
+  getVideoComments, refreshVideoComments, getAvailableSubs, getSubtitleFiles,
 } from "../api";
 import VideoCard from "../components/VideoCard";
 
@@ -668,6 +668,12 @@ export default function Watch() {
     enabled: subsRequested && !!youtubeVideoId,
     staleTime: 30 * 60_000,
   });
+  const { data: subtitleFiles = [] } = useQuery({
+    queryKey: ["subtitle-files", youtubeVideoId],
+    queryFn: () => getSubtitleFiles(youtubeVideoId).then(r => r.data),
+    enabled: fileReady,
+    staleTime: Infinity,
+  });
 
   const { data: dlStatus } = useQuery({
     queryKey: ["download-status", downloadId],
@@ -890,7 +896,18 @@ export default function Watch() {
                   if (video?.watch_progress_seconds > 10) v.currentTime = video.watch_progress_seconds;
                   v.play().catch(() => {});
                 }}
-              />
+              >
+                {subtitleFiles.map((s, i) => (
+                  <track
+                    key={s.lang}
+                    kind="subtitles"
+                    src={s.url}
+                    srcLang={s.lang}
+                    label={s.lang}
+                    default={i === 0}
+                  />
+                ))}
+              </video>
             ) : (
               <Placeholder
                 video={video}
@@ -968,12 +985,20 @@ export default function Watch() {
                 </select>
               )}
 
-              {!dlComplete && (() => {
+              {(() => {
+                // After download: subtitle files on disk are served via <track> in the player
+                if (fileReady && subtitleFiles.length > 0) return (
+                  <span className="flex items-center gap-1 px-3 py-1.5 rounded-full bg-zinc-800 text-zinc-400 text-xs" title="Subtitles loaded — use the CC button in the player">
+                    CC ✓
+                  </span>
+                );
+                // Before download: let user pick a lang to download with
+                if (dlComplete) return null;
                 if (!subsRequested) return (
                   <button
                     onClick={() => setSubsRequested(true)}
                     className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium bg-zinc-800 text-zinc-400 hover:bg-zinc-700 transition-colors"
-                    title="Check available subtitles"
+                    title="Check available subtitles on YouTube"
                   >
                     CC
                   </button>
@@ -994,7 +1019,7 @@ export default function Watch() {
                     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"
+                    title="Subtitle language to download"
                   >
                     <option value="">No subtitles</option>
                     {[...manual].map(l => <option key={l} value={l}>{l}</option>)}