fix hardcoded English labels to use detected source language

- Add sourceLanguage prop to VideoWithCaptions component
- Create shared getLanguageLabel utility for language code mapping
- Update QCDetail and JobDetail to pass source language
- Fix status messages to say "source content" instead of "English content"
- Update Downloads page to display proper language names

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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<HTMLVideoElement>(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(() => {

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<string, string>;
   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, '_');

frontend/src/routes/admin/QCDetail.tsx

@@ -300,6 +300,7 @@ export function QCDetail() {
                 videoUrl={videoUrl}
                 captionsVtt={captionsVtt}
                 audioDescriptionVtt={adVtt}
+                sourceLanguage={sourceLanguage}
               />
             ) : (
               <div className="text-center py-8 text-gray-500">

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}
               />
             ) : (
               <div className="text-center py-8 text-gray-500">

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

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<string, string> = {
+  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();
+}