Refactor media upload handling in MediaPanel: implement support for multiple file uploads with progress tracking, update UI to display current upload status, and enhance translations for uploaded file count.

frontend/src/features/admin/media/MediaPanel.tsx

@@ -32,7 +32,9 @@ export function MediaPanel() {
   const { t } = useTranslation()
   const queryClient = useQueryClient()
   const fileInput = useRef<HTMLInputElement>(null)
-  const [progress, setProgress] = useState<number | null>(null)
+  const [upload, setUpload] = useState<{ current: number; total: number; percent: number } | null>(
+    null,
+  )
 
   const { data, isLoading } = useQuery({
     queryKey: ['admin', 'media'],
@@ -50,18 +52,26 @@ export function MediaPanel() {
 
   const deleteMutation = useMutation({ mutationFn: deleteMedia, onSuccess: invalidate, onError })
 
-  const handleFile = async (file: File) => {
-    setProgress(0)
-    try {
-      await uploadMedia(file, setProgress)
-      toast.success(t('admin.media.uploaded'))
-      invalidate()
-    } catch (error) {
-      onError(error)
-    } finally {
-      setProgress(null)
-      if (fileInput.current) fileInput.current.value = ''
+  // Массовая загрузка: файлы отправляются по одному (обработка всё равно в очереди по одному),
+  // прогресс — «текущий/всего · %». Список обновляется после каждого файла.
+  const handleFiles = async (files: FileList) => {
+    const list = Array.from(files)
+    let uploaded = 0
+    for (let i = 0; i < list.length; i++) {
+      setUpload({ current: i + 1, total: list.length, percent: 0 })
+      try {
+        await uploadMedia(list[i], (percent) =>
+          setUpload({ current: i + 1, total: list.length, percent }),
+        )
+        uploaded++
+        invalidate()
+      } catch (error) {
+        onError(error)
+      }
     }
+    setUpload(null)
+    if (fileInput.current) fileInput.current.value = ''
+    if (uploaded > 0) toast.success(t('admin.media.uploadedCount', { count: uploaded }))
   }
 
   return (
@@ -69,24 +79,23 @@ export function MediaPanel() {
       <div className="flex flex-wrap items-center justify-between gap-2">
         <h2 className="crt-glow text-xl font-semibold">{t('admin.media.title')}</h2>
         <div className="flex items-center gap-3">
-          {progress != null && (
-            <span className="text-sm text-muted-foreground">{progress}%</span>
+          {upload != null && (
+            <span className="text-sm text-muted-foreground">
+              {upload.current}/{upload.total} · {upload.percent}%
+            </span>
           )}
           <input
             ref={fileInput}
             type="file"
             accept="video/*,.mkv,.avi,.ts"
+            multiple
             className="hidden"
             onChange={(e) => {
-              const file = e.target.files?.[0]
-              if (file) void handleFile(file)
+              const files = e.target.files
+              if (files && files.length > 0) void handleFiles(files)
             }}
           />
-          <Button
-            size="sm"
-            disabled={progress != null}
-            onClick={() => fileInput.current?.click()}
-          >
+          <Button size="sm" disabled={upload != null} onClick={() => fileInput.current?.click()}>
             <Upload className="h-4 w-4" />
             {t('admin.media.upload')}
           </Button>