Update public/app.js

public/app.js

@@ -1,6 +1,19 @@
 // ==========================================
-// PIXELDRIVE v4.1 - APP.JS (i18n + avatars + settings)
+// PIXELDRIVE v4.2 - APP.JS (progression upload réelle + stats)
 // ==========================================
+
+// ✅ Nouvelles clés de traduction (injectées dans le dictionnaire existant)
+if (window.I18N) {
+    Object.assign(window.I18N.fr, {
+        up_elapsed: 'Temps', up_speed: 'Vitesse', up_eta: 'Restant',
+        up_done_in: 'Terminé en', up_phase_upload: 'Envoi au serveur', up_phase_process: 'Traitement'
+    });
+    Object.assign(window.I18N.en, {
+        up_elapsed: 'Time', up_speed: 'Speed', up_eta: 'Left',
+        up_done_in: 'Done in', up_phase_upload: 'Uploading to server', up_phase_process: 'Processing'
+    });
+}
+
 const app = {
     user: null, currentFolder: null, currentSection: 'files', sortMode: 'name-asc',
     files: [], folders: [], uploadController: null, _uploadCancelled: false,
@@ -8,7 +21,6 @@ const app = {
     _dialogResolver: null, _dialogOpts: null,
 
     async init() {
-        // ✅ Préférences locales (thème, tri) + i18n
         document.body.classList.toggle('light', (localStorage.getItem('pd_theme') || 'dark') === 'light');
         this.sortMode = localStorage.getItem('pd_sort') || 'name-asc';
         const ss = document.getElementById('sort-select'); if (ss) ss.value = this.sortMode;
@@ -39,6 +51,11 @@ const app = {
     formatSize(b) { if (b === null || b === undefined) return '—'; if (b < 1024) return b + ' B'; if (b < 1048576) return (b/1024).toFixed(0) + ' KB'; if (b < 1073741824) return (b/1048576).toFixed(1) + ' MB'; return (b/1073741824).toFixed(2) + ' GB'; },
     statusLabel(s) { return ({pending:t('st_pending'), uploading:t('st_uploading'), processing:t('st_processing'), ready:t('st_ready'), error:t('st_error')})[s] || s; },
     formatDate(ts) { return ts ? new Date(ts).toLocaleString('fr-FR', {day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'}) : ''; },
+    fmtDur(s) {
+        s = Math.max(0, Math.round(s));
+        const m = Math.floor(s / 60), r = s % 60;
+        return m > 0 ? m + 'min ' + String(r).padStart(2, '0') + 's' : r + 's';
+    },
     toast(msg, type) {
         const el = document.createElement('div');
         el.className = 'toast ' + (type || 'info');
@@ -47,7 +64,6 @@ const app = {
         setTimeout(() => { el.style.opacity = '0'; el.style.transition = 'opacity 0.3s'; setTimeout(() => el.remove(), 300); }, 3500);
     },
 
-    // ✅ Lignes composites (texte + lien) traduites
     _switchHTML(key, onclick) {
         const s = t(key);
         const i = s.indexOf('?');
@@ -61,7 +77,7 @@ const app = {
         if (sw2) sw2.innerHTML = this._switchHTML('have_account', "app.toggleAuth('login')");
     },
 
-    // ✅ DIALOGUES CUSTOM
+    // ---------- DIALOGUES ----------
     dialog(opts) {
         return new Promise(resolve => {
             this._dialogResolver = resolve;
@@ -141,7 +157,7 @@ const app = {
     hideTos() { document.getElementById('tos-modal').style.display = 'none'; },
     async acceptTos() { await fetch('/api/tos/accept', {method:'POST'}); this.user.tosAccepted = true; this.hideTos(); this.toast('CGU ✓', 'success'); },
 
-    // ✅ AVATARS
+    // ---------- AVATARS ----------
     loadAvatar() {
         if (!this.user) return;
         const url = '/api/users/' + this.user.id + '/avatar?' + Date.now();
@@ -173,7 +189,7 @@ const app = {
         this.loadAvatar();
     },
 
-    // ✅ SETTINGS
+    // ---------- SETTINGS ----------
     openSettings() {
         document.getElementById('settings-modal').style.display = 'flex';
         document.getElementById('set-lang').value = getLang();
@@ -299,7 +315,7 @@ const app = {
         el.addEventListener('touchmove', () => clearTimeout(t2));
     },
 
-    // ✅ ONGLET PARTAGÉS (3 sections)
+    // ---------- PARTAGÉS ----------
     async loadSharedPage() {
         const area = document.getElementById('file-area');
         area.innerHTML = '<div style="padding:2rem;text-align:center;color:var(--text-muted);">' + t('loading') + '</div>';
@@ -345,7 +361,6 @@ const app = {
                 const list = document.createElement('div'); list.className = 'share-list';
                 myShares.forEach(sh => {
                     const name = sh.file_name || sh.folder_name || '—';
-                    const kind = sh.file_id ? t('folder').replace(t('folder'), sh.file_id ? 'Fichier' : 'Dossier') : 'Dossier';
                     const item = document.createElement('div'); item.className = 'share-item';
                     item.innerHTML =
                         '<div class="share-item-header"><div class="share-item-info"><svg class="icon icon-sm"><use href="#' + (sh.file_id ? 'icon-file' : 'icon-folder') + '"></use></svg><div style="min-width:0;"><div class="share-item-name">' + this.esc(name) + '</div><div class="share-item-sub">' + (sh.file_id ? 'Fichier' : 'Dossier') + ' · ' + t('shared_with') + ' <strong style="color:var(--primary);">' + this.esc(sh.shared_with_name) + '</strong></div></div></div><button class="btn-icon myshare-revoke" data-id="' + sh.id + '"><svg class="icon icon-sm"><use href="#icon-trash"></use></svg></button></div>' +
@@ -406,7 +421,9 @@ const app = {
         } catch (e) { area.innerHTML = '<div style="padding:2rem;color:var(--danger);text-align:center;">Erreur</div>'; }
     },
 
-    // ✅ MULTI-UPLOAD + vitesse
+    // ==========================================
+    // ✅ MULTI-UPLOAD AVEC PROGRESSION RÉELLE (XHR)
+    // ==========================================
     async handleUpload(input) {
         const files = Array.from(input.files);
         input.value = '';
@@ -424,44 +441,109 @@ const app = {
     },
 
     uploadOne(file, idx, total) {
-        return new Promise(async (resolve) => {
+        return new Promise((resolve) => {
             const t0 = performance.now();
-            document.getElementById('upload-count').textContent = '(' + idx + '/' + total + ')';
-            document.getElementById('upload-filename').textContent = file.name;
-            document.getElementById('upload-progress').style.width = '0%';
-            document.getElementById('upload-percent').textContent = '0%';
-            document.getElementById('upload-speed').textContent = '';
+            let uploadedBytes = 0;          // octets envoyés navigateur → serveur
+            let phase = 'upload';           // 'upload' puis 'process'
+            let overallPct = 0;             // % global (0-50 envoi, 50-100 traitement)
+
+            const countEl = document.getElementById('upload-count');
+            const nameEl = document.getElementById('upload-filename');
+            const barEl = document.getElementById('upload-progress');
+            const pctEl = document.getElementById('upload-percent');
+            const speedEl = document.getElementById('upload-speed');
+
+            countEl.textContent = '(' + idx + '/' + total + ')';
+            nameEl.textContent = file.name;
+            barEl.style.width = '0%';
+            pctEl.textContent = '0%';
+            speedEl.textContent = '';
+
+            // ✅ Ligne de stats injectée (temps / vitesse / restant)
+            let statsEl = document.getElementById('upload-stats');
+            if (!statsEl) {
+                statsEl = document.createElement('div');
+                statsEl.id = 'upload-stats';
+                statsEl.className = 'upload-status';
+                statsEl.style.fontSize = '0.75rem';
+                statsEl.style.marginTop = '0.4rem';
+                document.getElementById('upload-overlay').appendChild(statsEl);
+            }
+            statsEl.textContent = '';
+
+            // ✅ Chronomètre + stats live (2x par seconde)
+            const ticker = setInterval(() => {
+                const elapsed = (performance.now() - t0) / 1000;
+                let speed = 0, eta = '—';
+                if (phase === 'upload') {
+                    if (elapsed > 0.3 && uploadedBytes > 0) {
+                        speed = (uploadedBytes / 1048576) / elapsed;
+                        if (speed > 0.01) eta = '~' + this.fmtDur((file.size - uploadedBytes) / (uploadedBytes / elapsed));
+                    }
+                } else {
+                    speed = (file.size / 1048576) / Math.max(elapsed, 0.1);
+                    if (overallPct > 52) eta = '~' + this.fmtDur(elapsed * (100 - overallPct) / overallPct);
+                }
+                const speedTxt = speed > 0 ? speed.toFixed(2) + ' MB/s' : '…';
+                speedEl.textContent = speedTxt;
+                statsEl.textContent = t('up_elapsed') + ': ' + this.fmtDur(elapsed) +
+                    ' · ' + t('up_speed') + ': ' + speedTxt +
+                    ' · ' + t('up_eta') + ': ' + eta +
+                    ' · ' + (phase === 'upload' ? t('up_phase_upload') : t('up_phase_process'));
+            }, 500);
+
+            const finish = (ok) => {
+                clearInterval(ticker);
+                const elapsed = (performance.now() - t0) / 1000;
+                const speed = (file.size / 1048576) / Math.max(elapsed, 0.1);
+                statsEl.textContent = t('up_done_in') + ' ' + this.fmtDur(elapsed) + ' · ' + speed.toFixed(2) + ' MB/s';
+                speedEl.textContent = speed.toFixed(2) + ' MB/s';
+                setTimeout(() => resolve(ok), 900);
+            };
+
+            // ✅ XHR = vraie progression d'upload (fetch ne la donne pas !)
+            const xhr = new XMLHttpRequest();
             const fd = new FormData();
             fd.append('file', file);
             if (this.currentFolder) fd.append('folder_id', this.currentFolder.id);
-            this.uploadController = new AbortController();
-            const finish = (ok) => {
-                const secs = (performance.now() - t0) / 1000;
-                const mbps = (file.size / 1048576) / secs;
-                if (ok && isFinite(mbps)) document.getElementById('upload-speed').textContent = mbps.toFixed(2) + ' MB/s';
-                setTimeout(() => resolve(ok), 600);
+
+            xhr.open('POST', '/api/files/upload');
+            xhr.upload.onprogress = (e) => {
+                if (e.lengthComputable) {
+                    uploadedBytes = e.loaded;
+                    overallPct = (e.loaded / e.total) * 50;   // phase 1 = 0→50%
+                    barEl.style.width = overallPct + '%';
+                    pctEl.textContent = Math.round(overallPct) + '%';
+                }
             };
-            try {
-                const res = await fetch('/api/files/upload', {method:'POST', body: fd, signal: this.uploadController.signal});
-                if (!res.ok) throw new Error('fail');
-                const d = await res.json();
-                const es = new EventSource('/api/files/' + d.fileId + '/progress');
-                es.onmessage = (e) => {
-                    const data = JSON.parse(e.data);
-                    if (data.type === 'progress') {
-                        document.getElementById('upload-progress').style.width = Math.round(data.progress) + '%';
-                        document.getElementById('upload-percent').textContent = Math.round(data.progress) + '%';
-                        const secs = (performance.now() - t0) / 1000;
-                        if (secs > 0.5) document.getElementById('upload-speed').textContent = ((file.size / 1048576) / secs).toFixed(2) + ' MB/s';
-                    }
-                    if (data.type === 'done') { es.close(); finish(true); }
-                    if (data.type === 'error') { es.close(); this.toast('Erreur: ' + file.name, 'error'); finish(false); }
-                };
-                es.onerror = () => { es.close(); finish(false); };
-            } catch (e) {
-                if (e.name === 'AbortError') { this._uploadCancelled = true; resolve(false); }
-                else { this.toast('Erreur upload: ' + file.name, 'error'); finish(false); }
-            }
+            xhr.onload = () => {
+                if (xhr.status === 200) {
+                    let d;
+                    try { d = JSON.parse(xhr.responseText); } catch (e) { return finish(false); }
+                    phase = 'process';
+                    // Phase 2 = 50→100% (SSE serveur)
+                    const es = new EventSource('/api/files/' + d.fileId + '/progress');
+                    es.onmessage = (ev) => {
+                        const data = JSON.parse(ev.data);
+                        if (data.type === 'progress') {
+                            overallPct = 50 + (data.progress / 2);
+                            barEl.style.width = overallPct + '%';
+                            pctEl.textContent = Math.round(overallPct) + '%';
+                        }
+                        if (data.type === 'done') { es.close(); barEl.style.width = '100%'; pctEl.textContent = '100%'; finish(true); }
+                        if (data.type === 'error') { es.close(); this.toast('Erreur: ' + file.name, 'error'); finish(false); }
+                    };
+                    es.onerror = () => { es.close(); finish(false); };
+                } else {
+                    this.toast('Erreur upload: ' + file.name, 'error');
+                    finish(false);
+                }
+            };
+            xhr.onerror = () => { this.toast('Erreur réseau: ' + file.name, 'error'); finish(false); };
+            xhr.onabort = () => { this._uploadCancelled = true; finish(false); };
+
+            this.uploadController = { abort: () => xhr.abort() };
+            xhr.send(fd);
         });
     },