diff --git a/frontend/src/components/VideoWithCaptions.tsx b/frontend/src/components/VideoWithCaptions.tsx index ad687f5..ee46061 100644 --- a/frontend/src/components/VideoWithCaptions.tsx +++ b/frontend/src/components/VideoWithCaptions.tsx @@ -1,5 +1,6 @@ import { useRef, useEffect, useState, useMemo } from 'react'; import { VTTParser, type VTTCue } from '../lib/vtt'; +import { getLanguageLabel } from '../utils/language'; interface LanguageTrack { language: string; @@ -16,6 +17,7 @@ interface VideoWithCaptionsProps { captionsVtt?: string; audioDescriptionVtt?: string; audioDescriptionUrl?: string; + sourceLanguage?: string; // Language code for legacy props (e.g., 'en', 'de', 'es') className?: string; } @@ -26,6 +28,7 @@ export function VideoWithCaptions({ captionsVtt, audioDescriptionVtt, audioDescriptionUrl, + sourceLanguage = 'en', className = '' }: VideoWithCaptionsProps) { const videoRef = useRef(null); @@ -41,15 +44,15 @@ export function VideoWithCaptions({ const combined = [...tracks]; if (captionsVtt || audioDescriptionVtt) { combined.unshift({ - language: 'en', - label: 'English', + language: sourceLanguage, + label: getLanguageLabel(sourceLanguage), captionsVtt, audioDescriptionVtt, audioDescriptionUrl }); } return combined; - }, [tracks, captionsVtt, audioDescriptionVtt, audioDescriptionUrl]); + }, [tracks, captionsVtt, audioDescriptionVtt, audioDescriptionUrl, sourceLanguage]); // Set initial language selection useEffect(() => { diff --git a/frontend/src/routes/Downloads.tsx b/frontend/src/routes/Downloads.tsx index 9c0bca7..9b2b275 100644 --- a/frontend/src/routes/Downloads.tsx +++ b/frontend/src/routes/Downloads.tsx @@ -1,6 +1,7 @@ import { useParams } from 'react-router-dom'; import { formatDistanceToNow } from 'date-fns'; import { useJob, useJobDownloads } from '../hooks/useJob'; +import { getLanguageLabel } from '../utils/language'; // Shared download function const handleDownload = async (url: string, filename: string) => { @@ -42,7 +43,7 @@ const DownloadCard = ({ files: Record; jobTitle: string; }) => { - const languageName = language === 'en' ? 'English' : language.toUpperCase(); + const languageName = getLanguageLabel(language); const formatFilename = (type: string) => { const sanitizedTitle = jobTitle.replace(/[^a-zA-Z0-9\-_]/g, '_'); diff --git a/frontend/src/routes/admin/QCDetail.tsx b/frontend/src/routes/admin/QCDetail.tsx index 3a13c88..3b6a6d2 100644 --- a/frontend/src/routes/admin/QCDetail.tsx +++ b/frontend/src/routes/admin/QCDetail.tsx @@ -300,6 +300,7 @@ export function QCDetail() { videoUrl={videoUrl} captionsVtt={captionsVtt} audioDescriptionVtt={adVtt} + sourceLanguage={sourceLanguage} /> ) : (
diff --git a/frontend/src/routes/jobs/JobDetail.tsx b/frontend/src/routes/jobs/JobDetail.tsx index 5464a82..45b13ba 100644 --- a/frontend/src/routes/jobs/JobDetail.tsx +++ b/frontend/src/routes/jobs/JobDetail.tsx @@ -190,6 +190,7 @@ export function JobDetail() { videoUrl={videoUrl} captionsVtt={sourceVtt?.captions_vtt || ''} audioDescriptionVtt={sourceVtt?.audio_description_vtt || ''} + sourceLanguage={sourceLanguage} /> ) : (
diff --git a/frontend/src/utils/jobStatusMessages.ts b/frontend/src/utils/jobStatusMessages.ts index 64a67a6..43a72f8 100644 --- a/frontend/src/utils/jobStatusMessages.ts +++ b/frontend/src/utils/jobStatusMessages.ts @@ -49,12 +49,13 @@ export function getStatusMessageConfig( }; case 'approved_english': + case 'approved_source': return { - message: `${title} English content has been approved - starting translation`, + message: `${title} source content has been approved - starting translation`, type: 'success', showToast: true }; - + case 'rejected': return { message: `${title} has been rejected and requires revision`, diff --git a/frontend/src/utils/language.ts b/frontend/src/utils/language.ts new file mode 100644 index 0000000..5ba750f --- /dev/null +++ b/frontend/src/utils/language.ts @@ -0,0 +1,54 @@ +/** + * Utility functions for language code handling + */ + +/** + * Map of ISO 639-1 language codes to human-readable names + */ +const LANGUAGE_NAMES: Record = { + en: 'English', + de: 'German', + es: 'Spanish', + fr: 'French', + it: 'Italian', + pt: 'Portuguese', + nl: 'Dutch', + pl: 'Polish', + ru: 'Russian', + ja: 'Japanese', + ko: 'Korean', + zh: 'Chinese', + ar: 'Arabic', + hi: 'Hindi', + sv: 'Swedish', + da: 'Danish', + no: 'Norwegian', + fi: 'Finnish', + tr: 'Turkish', + cs: 'Czech', + el: 'Greek', + he: 'Hebrew', + hu: 'Hungarian', + id: 'Indonesian', + ms: 'Malay', + th: 'Thai', + vi: 'Vietnamese', + uk: 'Ukrainian', + ro: 'Romanian', + bg: 'Bulgarian', + hr: 'Croatian', + sk: 'Slovak', + sl: 'Slovenian', + et: 'Estonian', + lv: 'Latvian', + lt: 'Lithuanian', +}; + +/** + * Convert a language code to a human-readable label + * @param code - ISO 639-1 language code (e.g., 'en', 'de', 'es') + * @returns Human-readable language name, or uppercase code if unknown + */ +export function getLanguageLabel(code: string): string { + return LANGUAGE_NAMES[code.toLowerCase()] || code.toUpperCase(); +}