Brunobrno/vontor-cz
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add subtitle metadata and improve downloader UI

Browse Source 
Expose subtitle information in the API and update the frontend to use it: backend adds subtitle_languages and has_subtitles to the downloader serializer/response (computed from subtitles and automatic_captions). Generated TypeScript models (public & private) now include these fields. Downloader UI: gather available subtitle languages, show a select when languages exist, provide contextual input/placeholder when only auto-captions exist, and disable/annotate embed controls when subtitles or thumbnails are unavailable. These changes enable subtitle selection/embedding and surface thumbnail availability to users.
This commit is contained in:
David Bruno Vontor
2026-05-11 00:53:24 +02:00
parent f8150eeda7
commit e1df55df0e
4 changed files with 105 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/api/generated/private/models/videoInfo.ts
View File

@@ -23,4 +23,8 @@ export interface VideoInfo {
video_resolutions: string[];
/** List of available audio format options */
audio_resolutions: string[];
/** List of manually available subtitle language codes (e.g., 'en', 'cs') */
subtitle_languages: string[];
/** True if any subtitles or auto-captions are available */
has_subtitles: boolean;
}

4
frontend/src/api/generated/public/models/videoInfo.ts
View File

@@ -23,4 +23,8 @@ export interface VideoInfo {
video_resolutions: string[];
/** List of available audio format options */
audio_resolutions: string[];
/** List of manually available subtitle language codes (e.g., 'en', 'cs') */
subtitle_languages: string[];
/** True if any subtitles or auto-captions are available */
has_subtitles: boolean;
}

104
frontend/src/components/downloader/Downloader.tsx
View File

@@ -97,6 +97,18 @@ export default function Downloader() {
});
};
const getSubtitleLanguages = () => {
if (!videoInfo?.videos) return [];
const allLangs = new Set<string>();
videoInfo.videos.forEach(video => {
video.subtitle_languages.forEach(lang => allLangs.add(lang));
});
return Array.from(allLangs).sort();
};
const videoHasSubtitles = videoInfo?.videos.some(v => v.has_subtitles) ?? false;
const videoHasThumbnail = videoInfo?.videos.some(v => v.thumbnail !== null) ?? false;
async function retrieveVideoInfo() {
setIsLoading(true);
setError(null);
@@ -479,40 +491,88 @@ export default function Downloader() {
<div>
<label className="block text-sm font-medium mb-2 flex items-center gap-2">
<FaFont className="text-gray-500" />
Subtitles (optional)
Subtitles
{!videoHasSubtitles && <span className="text-gray-400 font-normal text-xs">(not available)</span>}
</label>
<input
type="text"
value={subtitles}
onChange={(e) => setSubtitles(e.target.value)}
placeholder="e.g., 'en', 'en,cs', or 'all'"
className="w-full p-2 border rounded"
/>
<p className="text-xs text-gray-500 mt-1">
Language codes (e.g., 'en', 'cs') or 'all' for all available
</p>
{(() => {
const subtitleLanguages = getSubtitleLanguages();
if (subtitleLanguages.length > 0) {
return (
<>
<select
value={subtitles}
onChange={(e) => setSubtitles(e.target.value)}
className="w-full p-2 border rounded"
>
<option value="">None</option>
<option value="all">All available</option>
{subtitleLanguages.map(lang => (
<option key={lang} value={lang}>{lang}</option>
))}
</select>
<p className="text-xs text-gray-500 mt-1">
{subtitleLanguages.length} language{subtitleLanguages.length !== 1 ? 's' : ''} available
</p>
</>
);
}
return (
<>
<input
type="text"
value={subtitles}
onChange={(e) => setSubtitles(e.target.value)}
placeholder={videoHasSubtitles ? "e.g., 'en', 'en,cs', or 'all'" : 'No subtitles available'}
disabled={!videoHasSubtitles}
className={`w-full p-2 border rounded ${!videoHasSubtitles ? 'opacity-50 cursor-not-allowed bg-gray-100' : ''}`}
/>
{videoHasSubtitles && (
<p className="text-xs text-gray-500 mt-1">
Auto-captions available — enter language codes (e.g., 'en', 'cs') or 'all'
</p>
)}
</>
);
})()}
</div>
{/* Checkboxes Row */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<label className="flex items-center gap-2">
<input
type="checkbox"
checked={embedSubtitles}
onChange={(e) => setEmbedSubtitles(e.target.checked)}
className="w-4 h-4"
/>
<span className="text-sm">Embed Subtitles (mkv/mp4 only)</span>
</label>
{(() => {
const embedSubsDisabled = !subtitles || !['mkv', 'mp4'].includes(selectedExtension);
return (
<label className={`flex items-center gap-2 ${embedSubsDisabled ? 'opacity-50' : ''}`}>
<input
type="checkbox"
checked={embedSubtitles}
onChange={(e) => setEmbedSubtitles(e.target.checked)}
disabled={embedSubsDisabled}
className="w-4 h-4"
/>
<span className="text-sm">
Embed Subtitles
{!['mkv', 'mp4'].includes(selectedExtension)
? <span className="text-xs text-gray-400"> (mkv/mp4 only)</span>
: !subtitles
? <span className="text-xs text-gray-400"> (select subtitles first)</span>
: null}
</span>
</label>
);
})()}
<label className="flex items-center gap-2">
<label className={`flex items-center gap-2 ${!videoHasThumbnail ? 'opacity-50' : ''}`}>
<input
type="checkbox"
checked={embedThumbnail}
onChange={(e) => setEmbedThumbnail(e.target.checked)}
disabled={!videoHasThumbnail}
className="w-4 h-4"
/>
<span className="text-sm">Embed Thumbnail</span>
<span className="text-sm">
Embed Thumbnail
{!videoHasThumbnail && <span className="text-xs text-gray-400"> (no thumbnail available)</span>}
</span>
</label>
</div>