Video: upload progress bar with percentage (XMLHttpRequest)

public/video.html

@@ -771,29 +771,45 @@
             return;
         }
 
-        // Show uploading state
+        // Show uploading state with progress
         dropContent.innerHTML = `
             <div class="uploading-overlay">
-                <div class="spinner"></div>
                 <div class="drop-label">Загрузка файла...</div>
-                <div class="drop-hint">${file.name}</div>
+                <div style="font-size:24px;font-weight:800;color:var(--accent);font-family:'JetBrains Mono',monospace;" id="uploadPercent">0%</div>
+                <div class="progress-bar-track" style="width:100%;max-width:300px;">
+                    <div class="progress-bar-fill" id="uploadFill" style="width:0%"></div>
+                </div>
+                <div class="drop-hint" style="margin-top:8px;">${file.name} (${formatSize(file.size)})</div>
             </div>`;
 
         const formData = new FormData();
         formData.append('video', file);
 
         try {
-            const res = await fetch('/video/upload', {
-                method: 'POST',
-                body: formData,
-            });
-
-            if (!res.ok) {
-                const err = await res.json().catch(() => ({ error: 'Ошибка загрузки' }));
-                throw new Error(err.error || 'Ошибка загрузки файла');
+            const data = await new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', '/video/upload');
+                xhr.upload.onprogress = (e) => {
+                    if (e.lengthComputable) {
+                        const pct = Math.round((e.loaded / e.total) * 100);
+                        const el = document.getElementById('uploadPercent');
+                        const fill = document.getElementById('uploadFill');
+                        if (el) el.textContent = pct + '%';
+                        if (fill) fill.style.width = pct + '%';
                     }
-
-            const data = await res.json();
+                };
+                xhr.onload = () => {
+                    if (xhr.status >= 200 && xhr.status < 300) {
+                        try { resolve(JSON.parse(xhr.responseText)); }
+                        catch { reject(new Error('Ошибка разбора ответа')); }
+                    } else {
+                        try { reject(new Error(JSON.parse(xhr.responseText).error)); }
+                        catch { reject(new Error('Ошибка загрузки')); }
+                    }
+                };
+                xhr.onerror = () => reject(new Error('Сеть недоступна'));
+                xhr.send(formData);
+            });
             onUploadSuccess(data);
         } catch (err) {
             // Restore drop zone