Update app.py

app.py

@@ -3,12 +3,13 @@ import re
 import uuid
 import json
 import time
+import queue
 import threading
 import subprocess
 import sqlite3
 from pathlib import Path
 from urllib.parse import urlparse, unquote
-from flask import Flask, request, jsonify, send_from_directory, render_template_string
+from flask import Flask, request, jsonify, send_from_directory, render_template_string, Response, stream_with_context
 
 app = Flask(__name__)
 
@@ -20,6 +21,24 @@ DB_FILE = Path("swiftload.db")
 _live_cache = {}
 _cache_lock = threading.Lock()
 
+# SSE subscriber queues — each connected client gets one queue
+_sse_subscribers: list[queue.Queue] = []
+_sse_lock = threading.Lock()
+
+
+def sse_broadcast(event_type: str, data: dict):
+    """Push an SSE event to all connected clients. Dead queues are pruned."""
+    msg = f"event: {event_type}\ndata: {json.dumps(data)}\n\n"
+    with _sse_lock:
+        alive = []
+        for q in _sse_subscribers:
+            try:
+                q.put_nowait(msg)
+                alive.append(q)
+            except queue.Full:
+                pass  # client too slow — drop it
+        _sse_subscribers[:] = alive
+
 
 # ─── Database ────────────────────────────────────────────────────────────────
 
@@ -62,6 +81,10 @@ def db_upsert_task(task_id, url, filename, save_path, status="queued", progress=
                 updated_at=excluded.updated_at
         """, (task_id, url, filename, str(save_path), status, progress, size, error, now, now))
         conn.commit()
+    # Notify all open clients about the new task immediately
+    task = db_get_task(task_id)
+    if task:
+        sse_broadcast("task_update", {**task, "speed": "–", "eta": "–"})
 
 
 def db_update_task(task_id, **kwargs):
@@ -73,6 +96,15 @@ def db_update_task(task_id, **kwargs):
     with get_db() as conn:
         conn.execute(f"UPDATE tasks SET {set_clause} WHERE task_id=?", values)
         conn.commit()
+    # Push live update to all SSE clients — no client polling needed
+    task = db_get_task(task_id)
+    if task:
+        with _cache_lock:
+            live = _live_cache.get(task_id, {})
+        sse_broadcast("task_update", {**task,
+            "speed": live.get("speed", "–") if task["status"] == "downloading" else "–",
+            "eta":   live.get("eta",   "–") if task["status"] == "downloading" else "–",
+        })
 
 
 def db_get_task(task_id):
@@ -174,6 +206,16 @@ def download_with_wget(task_id, url, save_path):
                     _live_cache[task_id]["speed"] = speed_match.group(1)
                 if eta_match:
                     _live_cache[task_id]["eta"] = eta_match.group(1)
+                live_snap = dict(_live_cache.get(task_id, {}))
+
+            # Push speed/eta live (no DB write needed for these)
+            if speed_match or eta_match:
+                task = db_get_task(task_id)
+                if task:
+                    sse_broadcast("task_update", {**task,
+                        "speed": live_snap.get("speed", "–"),
+                        "eta":   live_snap.get("eta",   "–"),
+                    })
 
         process.wait()
 
@@ -255,21 +297,46 @@ def all_tasks():
     for t in tasks:
         with _cache_lock:
             live = _live_cache.get(t["task_id"], {})
-        result.append({
-            "task_id": t["task_id"],
-            "url": t["url"],
-            "filename": t["filename"],
-            "status": t["status"],
-            "progress": t["progress"],
-            "size": t["size"],
-            "error": t["error"],
-            "created_at": t["created_at"],
+        result.append({**t,
             "speed": live.get("speed", "–") if t["status"] == "downloading" else "–",
-            "eta": live.get("eta", "–") if t["status"] == "downloading" else "–",
+            "eta":   live.get("eta",   "–") if t["status"] == "downloading" else "–",
         })
     return jsonify(result)
 
 
+@app.route("/stream")
+def sse_stream():
+    """Server-Sent Events endpoint. Clients connect once; server pushes all updates."""
+    q: queue.Queue = queue.Queue(maxsize=64)
+    with _sse_lock:
+        _sse_subscribers.append(q)
+
+    def generate():
+        # Immediately send full current state so the client is in sync
+        tasks = db_all_tasks()
+        for t in tasks:
+            with _cache_lock:
+                live = _live_cache.get(t["task_id"], {})
+            payload = {**t,
+                "speed": live.get("speed", "–") if t["status"] == "downloading" else "–",
+                "eta":   live.get("eta",   "–") if t["status"] == "downloading" else "–",
+            }
+            yield f"event: task_update\ndata: {json.dumps(payload)}\n\n"
+
+        # Then stream subsequent events as they arrive
+        while True:
+            try:
+                msg = q.get(timeout=25)   # 25s timeout → send keepalive
+                yield msg
+            except queue.Empty:
+                yield ": keepalive\n\n"   # prevents proxy/browser timeout
+
+    resp = Response(stream_with_context(generate()), mimetype="text/event-stream")
+    resp.headers["Cache-Control"] = "no-cache"
+    resp.headers["X-Accel-Buffering"] = "no"
+    return resp
+
+
 @app.route("/dl/<task_id>")
 def download_file(task_id):
     task = db_get_task(task_id)
@@ -688,125 +755,138 @@ input[type="text"]::placeholder{color:var(--muted);}
 </div>
 
 <script>
-// ── State ────────────────────────────────────────────────────────────────────
-const POLL_INTERVAL = 900;  // ms between full refresh
-let allTasks = [];           // latest snapshot from server
-let pollTimer = null;
-let activePolling = new Set(); // task_ids currently downloading
-
-// ── Boot ─────────────────────────────────────────────────────────────────────
-(async function init() {
-  await refreshAll();
-  startPolling();
-})();
-
-function startPolling() {
-  if (pollTimer) return;
-  pollTimer = setInterval(async () => {
-    if (activePolling.size > 0) {
-      await refreshAll();
-    }
-  }, POLL_INTERVAL);
-}
-
-// ── Full refresh ──────────────────────────────────────────────────────────────
-async function refreshAll() {
-  try {
-    const res = await fetch('/tasks/all');
-    allTasks = await res.json();
+// ── State ─────────────────────────────────────────────────────────────────────
+// taskMap: task_id → task object (latest snapshot from server)
+const taskMap = {};
+let evtSource = null;
 
-    activePolling.clear();
-    allTasks.forEach(t => {
-      if (t.status === 'downloading' || t.status === 'queued') {
-        activePolling.add(t.task_id);
-      }
-    });
+// ── SSE Connection ─────────────────────────────────────────────────────────────
+function connectSSE() {
+  if (evtSource) evtSource.close();
+  evtSource = new EventSource('/stream');
 
-    renderActive();
-    renderHistory();
-  } catch(e) {}
+  evtSource.addEventListener('task_update', e => {
+    const task = JSON.parse(e.data);
+    taskMap[task.task_id] = task;
+    renderAll();
+  });
+
+  evtSource.onerror = () => {
+    // Connection dropped — reconnect after 3s
+    evtSource.close();
+    setTimeout(connectSSE, 3000);
+  };
 }
 
-// ── Render helpers ────────────────────────────────────────────────────────────
-function renderActive() {
-  const active = allTasks.filter(t => t.status === 'downloading' || t.status === 'queued');
+// ── Boot ──────────────────────────────────────────────────────────────────────
+connectSSE();
+
+// Reconnect when tab regains visibility (SSE may have been killed by browser)
+document.addEventListener('visibilitychange', () => {
+  if (!document.hidden && (!evtSource || evtSource.readyState === 2)) {
+    connectSSE();
+  }
+});
+
+// ── Render ────────────────────────────────────────────────────────────────────
+function renderAll() {
+  const all = Object.values(taskMap).sort((a,b) => b.created_at.localeCompare(a.created_at));
+  const active = all.filter(t => t.status === 'downloading' || t.status === 'queued');
+  const hist   = all.filter(t => t.status !== 'downloading' && t.status !== 'queued');
+
   document.getElementById('active-count').textContent = active.length;
-  const container = document.getElementById('active-list');
+  document.getElementById('hist-count').textContent   = hist.length;
+
+  const activeEl = document.getElementById('active-list');
+  const histEl   = document.getElementById('history-list');
+
   if (!active.length) {
-    container.innerHTML = '<div class="empty"><div class="empty-icon">📡</div>No active downloads</div>';
-    return;
+    activeEl.innerHTML = '<div class="empty"><div class="empty-icon">📡</div>No active downloads</div>';
+  } else {
+    // Update cards in-place when possible to avoid flicker
+    active.forEach(t => {
+      const existing = document.getElementById(`card-${t.task_id}`);
+      if (existing) {
+        updateCardInPlace(existing, t);
+      } else {
+        activeEl.innerHTML = active.map(buildCard).join('');
+      }
+    });
+    // Remove stale cards
+    activeEl.querySelectorAll('[id^="card-"]').forEach(el => {
+      const id = el.id.replace('card-', '');
+      if (!active.find(t => t.task_id === id)) el.remove();
+    });
   }
-  container.innerHTML = active.map(t => buildCard(t, true)).join('');
+
+  histEl.innerHTML = hist.length
+    ? hist.map(buildCard).join('')
+    : '<div class="empty"><div class="empty-icon">📂</div>No download history</div>';
 }
 
-function renderHistory() {
-  const hist = allTasks.filter(t => t.status !== 'downloading' && t.status !== 'queued');
-  document.getElementById('hist-count').textContent = hist.length;
-  const container = document.getElementById('history-list');
-  if (!hist.length) {
-    container.innerHTML = '<div class="empty"><div class="empty-icon">📂</div>No download history</div>';
-    return;
+function updateCardInPlace(el, t) {
+  // Only update fields that change during download — avoids full re-render flicker
+  const pct = t.status === 'done' ? 100 : (t.progress || 0);
+  const fill = el.querySelector('.progress-fill');
+  const badge = el.querySelector('.badge');
+
+  if (fill) {
+    fill.style.width = pct + '%';
+    fill.className = 'progress-fill ' + (t.status === 'downloading' ? 'downloading' : t.status === 'done' ? 'done' : t.status === 'error' ? 'error' : 'interrupted');
+  }
+  if (badge) {
+    const labels = {downloading:'DOWNLOADING',done:'DONE',error:'ERROR',interrupted:'INTERRUPTED',queued:'QUEUED'};
+    const classes = {downloading:'badge-downloading',done:'badge-done',error:'badge-error',interrupted:'badge-interrupted',queued:'badge-queued'};
+    badge.textContent = labels[t.status] || t.status.toUpperCase();
+    badge.className = 'badge ' + (classes[t.status] || 'badge-queued');
+  }
+
+  const speedEl = el.querySelector('.speed-val');
+  const etaEl   = el.querySelector('.eta-val');
+  const pctEl   = el.querySelector('.pct-val');
+  const sizeEl  = el.querySelector('.size-val');
+  if (speedEl) speedEl.textContent = t.speed || '–';
+  if (etaEl)   etaEl.textContent   = t.eta   || '–';
+  if (pctEl)   pctEl.textContent   = pct + '%';
+  if (sizeEl && t.size) sizeEl.textContent = t.size;
+
+  // If status changed to done/error, refresh whole card to show actions
+  const oldStatus = el.dataset.status;
+  if (oldStatus !== t.status) {
+    el.outerHTML = buildCard(t);
+  } else {
+    el.dataset.status = t.status;
   }
-  container.innerHTML = hist.map(t => buildCard(t, false)).join('');
-}
-
-function buildCard(t, isActive) {
-  const badgeClass = {
-    downloading: 'badge-downloading',
-    done: 'badge-done',
-    error: 'badge-error',
-    interrupted: 'badge-interrupted',
-    queued: 'badge-queued',
-  }[t.status] || 'badge-queued';
-
-  const badgeLabel = {
-    downloading: 'DOWNLOADING',
-    done: 'DONE',
-    error: 'ERROR',
-    interrupted: 'INTERRUPTED',
-    queued: 'QUEUED',
-  }[t.status] || t.status.toUpperCase();
-
-  const fillClass = {
-    downloading: 'downloading',
-    done: 'done',
-    error: 'error',
-    interrupted: 'interrupted',
-  }[t.status] || '';
-
-  const pct = t.progress || 0;
-  const displayPct = t.status === 'done' ? 100 : pct;
-
-  const shortUrl = t.url.length > 60 ? t.url.slice(0, 57) + '…' : t.url;
+}
+
+function buildCard(t) {
+  const badgeClass = {downloading:'badge-downloading',done:'badge-done',error:'badge-error',interrupted:'badge-interrupted',queued:'badge-queued'}[t.status] || 'badge-queued';
+  const badgeLabel = {downloading:'DOWNLOADING',done:'DONE',error:'ERROR',interrupted:'INTERRUPTED',queued:'QUEUED'}[t.status] || t.status.toUpperCase();
+  const fillClass  = {downloading:'downloading',done:'done',error:'error',interrupted:'interrupted'}[t.status] || '';
+  const pct = t.status === 'done' ? 100 : (t.progress || 0);
+  const shortUrl = t.url.length > 60 ? t.url.slice(0,57) + '…' : t.url;
 
   let metaHtml = `
-    <span>📦 <span class="val">${t.size || '–'}</span></span>
-    <span class="pct">${displayPct}%</span>
+    <span>📦 <span class="val size-val">${t.size || '–'}</span></span>
+    <span class="pct-val pct">${pct}%</span>
   `;
   if (t.status === 'downloading') {
     metaHtml += `
-      <span>⚡ <span class="val">${t.speed || '–'}</span></span>
-      <span>⏱ ETA: <span class="val">${t.eta || '–'}</span></span>
+      <span>⚡ <span class="val speed-val">${t.speed || 'connecting…'}</span></span>
+      <span>⏱ <span class="val eta-val">${t.eta || '–'}</span></span>
     `;
   }
-  if (t.created_at) {
-    metaHtml += `<span>${t.created_at}</span>`;
-  }
+  if (t.created_at) metaHtml += `<span class="ts">${t.created_at}</span>`;
 
   let actionsHtml = '';
   if (t.status === 'done') {
     actionsHtml = `<a class="btn-sm primary" href="/dl/${t.task_id}" download>⬇ Save File</a>`;
   } else if (t.status === 'error' || t.status === 'interrupted') {
-    actionsHtml = `<button class="btn-sm retry" onclick="retryDownload('${esc(t.task_id)}','${esc(t.url)}')">↺ Retry</button>`;
-  }
-
-  let errorHtml = '';
-  if (t.error) {
-    errorHtml = `<div class="error-msg">⚠ ${esc(t.error)}</div>`;
+    actionsHtml = `<button class="btn-sm retry" onclick="retryDownload('${esc(t.url)}')">↺ Retry</button>`;
   }
 
   return `
-    <div class="dl-card status-${t.status}" id="card-${t.task_id}">
+    <div class="dl-card status-${t.status}" id="card-${t.task_id}" data-status="${t.status}">
       <div class="dl-header">
         <div>
           <div class="dl-filename">${fileIcon(t.filename)} ${esc(t.filename)}</div>
@@ -815,38 +895,34 @@ function buildCard(t, isActive) {
         <span class="badge ${badgeClass}">${badgeLabel}</span>
       </div>
       <div class="progress-track">
-        <div class="progress-fill ${fillClass}" style="width:${displayPct}%"></div>
+        <div class="progress-fill ${fillClass}" style="width:${pct}%"></div>
       </div>
       <div class="dl-meta">${metaHtml}</div>
-      ${errorHtml}
+      ${t.error ? `<div class="error-msg">⚠ ${esc(t.error)}</div>` : ''}
       ${actionsHtml ? `<div class="dl-actions">${actionsHtml}</div>` : ''}
-    </div>
-  `;
+    </div>`;
 }
 
-// ── Download ─────────────────────────────────────────────────────────────────
+// ── Download action ────────────────────────────────────────────────────────────
 async function startDownload() {
   const input = document.getElementById('url-input');
-  const btn = document.getElementById('dl-btn');
-  const url = input.value.trim();
+  const btn   = document.getElementById('dl-btn');
+  const url   = input.value.trim();
   if (!url) return;
 
   btn.disabled = true;
   btn.textContent = 'Starting…';
-
   try {
-    const res = await fetch('/download', {
+    const res  = await fetch('/download', {
       method: 'POST',
-      headers: {'Content-Type': 'application/json'},
+      headers: {'Content-Type':'application/json'},
       body: JSON.stringify({url}),
     });
     const data = await res.json();
     if (data.error) { showToast('Error: ' + data.error, true); return; }
-
     input.value = '';
     showToast('Download started!');
-    activePolling.add(data.task_id);
-    await refreshAll();
+    // SSE will push the new task automatically — no manual refresh needed
   } catch(e) {
     showToast('Request failed', true);
   } finally {
@@ -855,23 +931,19 @@ async function startDownload() {
   }
 }
 
-async function retryDownload(taskId, url) {
-  showToast('Retrying…');
-  // Reuse startDownload logic via POST
-  const input = document.getElementById('url-input');
-  input.value = url;
+async function retryDownload(url) {
+  document.getElementById('url-input').value = url;
   await startDownload();
 }
 
-// ── Utils ─────────────────────────────────────────────────────────────────────
 document.getElementById('url-input').addEventListener('keydown', e => {
   if (e.key === 'Enter') startDownload();
 });
 
+// ── Utilities ─────────────────────────────────────────────────────────────────
 function esc(str) {
   return String(str||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
 }
-
 function fileIcon(name) {
   const ext = (name||'').split('.').pop().toLowerCase();
   if (['mp4','mkv','avi','mov','webm'].includes(ext)) return '🎬';
@@ -883,19 +955,13 @@ function fileIcon(name) {
   if (['py','js','ts','html','css','json','sh'].includes(ext)) return '💻';
   return '📁';
 }
-
-function showToast(msg, isErr = false) {
+function showToast(msg, isErr=false) {
   const t = document.createElement('div');
   t.className = 'toast' + (isErr ? ' err' : '');
   t.textContent = msg;
   document.body.appendChild(t);
   setTimeout(() => t.remove(), 3500);
 }
-
-// Immediately poll if tab becomes visible again
-document.addEventListener('visibilitychange', () => {
-  if (!document.hidden) refreshAll();
-});
 </script>
 </body>
 </html>"""