FEATURE: adds automatic format detected to the frontend

web/frontend/src/api/client.ts

@@ -63,3 +63,8 @@ export const getTaskInfo = async (task_id: string): Promise<{
   const response = await api.get(`/info/${task_id}`)
   return response.data
 }
+
+export const getRecommendedFormat = async (task_id: string): Promise<{ format: string }> => {
+  const response = await api.get(`/info/recommended-format/${task_id}`)
+  return response.data
+}

web/frontend/src/components/UploadZone.tsx

@@ -3,7 +3,8 @@ import { useDropzone } from 'react-dropzone'
 import { Box, Typography, Paper, LinearProgress, Alert } from '@mui/material'
 import { CloudUpload, InsertDriveFile } from '@mui/icons-material'
 import { useUploadStore } from '../stores/uploadStore'
-import { uploadFile, getTaskInfo } from '../api/client'
+import { useOptionsStore } from '../stores/optionsStore'  // NEW
+import { uploadFile, getTaskInfo, getRecommendedFormat } from '../api/client'  // NEW
 import { useTaskStore } from '../stores/taskStore'
 
 const ALLOWED_EXTENSIONS = ['.mp3', '.flac', '.wav', '.m4a', '.ogg', '.opus', '.aac', '.wma', '.aiff', '.alac', '.ac3']
@@ -30,6 +31,7 @@ export const UploadZone: React.FC = () => {
   } = useUploadStore()
 
   const { setTaskId: setTaskIdStore } = useTaskStore()
+  const { setOptions } = useOptionsStore()   // NEW
 
   const onDrop = useCallback(
     async (acceptedFiles: File[]) => {
@@ -65,9 +67,18 @@ export const UploadZone: React.FC = () => {
           setHasAudio(info.has_audio)
           setHasSubtitle(info.has_subtitle)
           setAudioCodec(info.audio_codec)
+
+          // Fetch recommended format and update options
+          try {
+            const rec = await getRecommendedFormat(taskId)
+            // Update only the format; keep other options (e.g., transcode_to) as defaults
+            setOptions({ format: rec.format })
+          } catch (err) {
+            console.warn('Failed to fetch recommended format, using default', err)
+          }
         } catch (err) {
           console.error('Failed to fetch stream info:', err)
-          // Don't block the upload flow if this fails; we'll just assume no video
+          // Don't block upload flow; user can manually change options
         }
       } catch (err: any) {
         setError(err.response?.data?.detail || err.message || 'Upload failed')
@@ -78,7 +89,7 @@ export const UploadZone: React.FC = () => {
         setFileSize(0)
       }
     },
-    [setFile, setFileName, setFileSize, setIsUploading, setUploadProgress, setError, setTaskId, setTaskIdStore]
+    [setFile, setFileName, setFileSize, setIsUploading, setUploadProgress, setError, setTaskId, setTaskIdStore, setHasVideo, setHasAudio, setHasSubtitle, setAudioCodec, setOptions]
   )
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({