Aggiunta tab Video: YouTube, TikTok, Instagram, Facebook

- core/downloader.py: download_video() con format selector qualita
  (best / 1080p / 720p / 480p), merge MP4, tracking .downloaded_videos
- api/bridge.py: start_video_download / stop_video_download / _video_worker.
  Guard _any_job_running() per evitare concorrenza tra audio e video
  (condividono lo stesso _stop_event)
- webui: nuova nav item, view con hero rosa (gradient pink->black),
  selettore qualita, hint cookies per Instagram/Facebook privati
- CSS: palette pink, .hero-pink, .btn-pink, .progress-fill.pink,
  componente .hint riusabile
- JS: handlers tab Video, canale bridge video:progress/video:done

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

webui/css/style.css

@@ -26,6 +26,10 @@
   --purple-hover: #C084FC;
   --purple-dim: #2D1B4D;
 
+  --pink: #EC4899;
+  --pink-hover: #F472B6;
+  --pink-dim: #831843;
+
   --red: #E22134;
   --red-hover: #FF4055;
 
@@ -225,6 +229,10 @@ button, input, select, textarea { font-family: inherit; font-size: inherit; }
   background: linear-gradient(135deg, #5D2C9C 0%, #2D1B4D 60%, #1A0F2E 100%);
 }
 
+.hero-pink {
+  background: linear-gradient(135deg, #EC4899 0%, #831843 60%, #3F0A23 100%);
+}
+
 .hero-content { position: relative; z-index: 2; max-width: 70%; }
 
 .hero-eyebrow {
@@ -237,6 +245,7 @@ button, input, select, textarea { font-family: inherit; font-size: inherit; }
 
 .hero-eyebrow.blue { color: var(--blue); }
 .hero-eyebrow.purple { color: var(--purple); }
+.hero-eyebrow.pink { color: var(--pink-hover); }
 
 .hero-title {
   font-size: 36px;
@@ -449,6 +458,11 @@ input[type="number"]::-webkit-inner-spin-button {
   color: #fff;
 }
 
+.btn-pink {
+  background: var(--pink);
+  color: #fff;
+}
+
 .btn-success {
   background: #00CEC9;
   color: #000;
@@ -512,6 +526,7 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .percent.green { color: var(--green); }
 .percent.blue { color: var(--blue); }
+.percent.pink { color: var(--pink-hover); }
 
 .progress {
   width: 100%;
@@ -536,6 +551,10 @@ input[type="number"]::-webkit-inner-spin-button {
   background: linear-gradient(90deg, var(--blue), var(--blue-hover));
 }
 
+.progress-fill.pink {
+  background: linear-gradient(90deg, var(--pink), var(--pink-hover));
+}
+
 /* ===============================
    LOG BOX
    =============================== */
@@ -559,6 +578,30 @@ input[type="number"]::-webkit-inner-spin-button {
 .log .l-warn { color: #FDCB6E; }
 .log .l-muted { color: var(--text-3); }
 
+/* ===============================
+   HINT BOX
+   =============================== */
+.hint {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 4px;
+  padding: 10px 14px;
+  background: rgba(236, 72, 153, 0.08);
+  border: 1px solid rgba(236, 72, 153, 0.2);
+  border-radius: var(--r-sm);
+  color: var(--text-2);
+  font-size: 12.5px;
+}
+
+.hint-ico {
+  color: var(--pink-hover);
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.hint strong { color: var(--text); font-weight: 700; }
+
 /* ===============================
    CHECKBOX
    =============================== */

webui/index.html

@@ -25,6 +25,10 @@
           <span class="nav-icon">⬇</span>
           <span>Scarica</span>
         </button>
+        <button class="nav-item" data-view="video">
+          <span class="nav-icon">🎬</span>
+          <span>Video</span>
+        </button>
         <button class="nav-item" data-view="upgrade">
           <span class="nav-icon">⚡</span>
           <span>Upgrade</span>
@@ -105,6 +109,74 @@
         </div>
       </section>
 
+      <!-- ===== VIEW: VIDEO ===== -->
+      <section class="view" id="view-video">
+        <header class="hero hero-pink">
+          <div class="hero-content">
+            <div class="hero-eyebrow pink">VIDEO</div>
+            <h1 class="hero-title">Scarica video</h1>
+            <p class="hero-subtitle">YouTube · TikTok · Instagram · Facebook · qualsiasi link supportato</p>
+          </div>
+          <div class="hero-deco">🎬</div>
+        </header>
+
+        <h2 class="section-label">Sorgente</h2>
+        <div class="card">
+          <div class="field">
+            <label class="field-label">URL</label>
+            <input type="text" id="videoUrlInput" class="input pill" placeholder="https://youtube.com/watch?v=…  ·  https://tiktok.com/…  ·  https://instagram.com/reel/…" />
+          </div>
+
+          <div class="field">
+            <label class="field-label">Cartella output</label>
+            <div class="row">
+              <div class="path-display" id="videoPathDisplay">Nessuna cartella selezionata</div>
+              <button class="btn btn-ghost pill btn-sm" id="videoBrowseBtn">Sfoglia</button>
+            </div>
+          </div>
+
+          <div class="field inline">
+            <label class="field-label">Qualità</label>
+            <select id="videoQuality" class="input pill input-sm">
+              <option value="best">Migliore disponibile</option>
+              <option value="1080p" selected>1080p</option>
+              <option value="720p">720p</option>
+              <option value="480p">480p</option>
+            </select>
+          </div>
+
+          <div class="hint">
+            <span class="hint-ico">ⓘ</span>
+            Per Instagram/Facebook privati serve un file <strong>cookies.txt</strong> valido (Impostazioni → Percorsi).
+          </div>
+        </div>
+
+        <div class="card actions">
+          <button class="btn btn-pink pill btn-lg" id="videoDownloadBtn">
+            <span class="ico">▶</span> Avvia Download
+          </button>
+          <button class="btn btn-danger pill btn-lg" id="stopVideoBtn" disabled>
+            <span class="ico">◼</span> Stop
+          </button>
+          <div class="counter" id="videoCounter"></div>
+        </div>
+
+        <div class="card">
+          <div class="progress-head">
+            <span class="micro-label">Progresso</span>
+            <span class="percent pink" id="videoPercent">0%</span>
+          </div>
+          <div class="progress">
+            <div class="progress-fill pink" id="videoProgressFill"></div>
+          </div>
+        </div>
+
+        <h2 class="section-label">Log</h2>
+        <div class="card log-card">
+          <div class="log" id="videoLog"></div>
+        </div>
+      </section>
+
       <!-- ===== VIEW: UPGRADE ===== -->
       <section class="view" id="view-upgrade">
         <header class="hero hero-blue">

webui/js/app.js

@@ -10,9 +10,11 @@ const state = {
   urlList: [],
   dlOutputDir: "",
   upDir: "",
+  videoOutputDir: "",
   showSecret: false,
   downloading: false,
   upgrading: false,
+  videoDownloading: false,
 };
 
 // Wait for pywebview ready
@@ -80,12 +82,37 @@ const bridgeHandlers = {
     $("#upgradeBtn").disabled = false;
     $("#stopUpgradeBtn").disabled = true;
   },
+
+  "video:progress": (p) => {
+    if (typeof p.overall === "number") {
+      const pct = Math.round(p.overall * 100);
+      $("#videoProgressFill").style.width = pct + "%";
+      $("#videoPercent").textContent = pct + "%";
+    }
+    if (p.status === "downloading" && typeof p.idx === "number") {
+      const prefix = p.url_total > 1 ? `[${(p.url_idx ?? 0) + 1}/${p.url_total}] ` : "";
+      $("#videoCounter").textContent = `${prefix}Video ${p.idx + 1} di ${p.total}`;
+    }
+    if (p.status === "completed" && p.url_total > 1) {
+      $("#videoCounter").textContent = `Completato: ${p.url_total} URL`;
+    }
+  },
+
+  "video:done": () => {
+    state.videoDownloading = false;
+    $("#videoDownloadBtn").disabled = false;
+    $("#stopVideoBtn").disabled = true;
+  },
 };
 
 // ============================================================
 // Logging
 // ============================================================
-const logEls = { download: () => $("#dlLog"), upgrade: () => $("#upLog") };
+const logEls = {
+  download: () => $("#dlLog"),
+  upgrade: () => $("#upLog"),
+  video: () => $("#videoLog"),
+};
 
 function classifyLog(msg) {
   if (msg.startsWith("[ERRORE]")) return "l-err";
@@ -159,6 +186,13 @@ async function init() {
     $("#dlPathDisplay").classList.remove("empty");
   }
 
+  // Video tab — usa output_dir come default
+  state.videoOutputDir = state.config.output_dir || "";
+  if (state.videoOutputDir) {
+    $("#videoPathDisplay").textContent = state.videoOutputDir;
+    $("#videoPathDisplay").classList.remove("empty");
+  }
+
   // Upgrade tab — default threshold
   $("#upThreshold").value = state.config.hq_threshold || 310;
 }
@@ -235,6 +269,51 @@ $("#stopDownloadBtn").addEventListener("click", async () => {
   $("#stopDownloadBtn").disabled = true;
 });
 
+// ============================================================
+// VIDEO tab
+// ============================================================
+$("#videoBrowseBtn").addEventListener("click", async () => {
+  const path = await window.pywebview.api.browse_directory();
+  if (path) {
+    state.videoOutputDir = path;
+    $("#videoPathDisplay").textContent = path;
+    $("#videoPathDisplay").classList.remove("empty");
+  }
+});
+
+$("#videoDownloadBtn").addEventListener("click", async () => {
+  const url = $("#videoUrlInput").value.trim();
+  if (!url) {
+    toast("Inserisci un URL", "error");
+    return;
+  }
+  if (!state.videoOutputDir) {
+    toast("Seleziona una cartella di destinazione", "error");
+    return;
+  }
+
+  state.videoDownloading = true;
+  $("#videoDownloadBtn").disabled = true;
+  $("#stopVideoBtn").disabled = false;
+  $("#videoProgressFill").style.width = "0%";
+  $("#videoPercent").textContent = "0%";
+
+  const res = await window.pywebview.api.start_video_download({
+    urls: [url],
+    output_dir: state.videoOutputDir,
+    quality: $("#videoQuality").value,
+  });
+  if (!res.ok) {
+    toast(res.error || "Errore", "error");
+    bridgeHandlers["video:done"]();
+  }
+});
+
+$("#stopVideoBtn").addEventListener("click", async () => {
+  await window.pywebview.api.stop_video_download();
+  $("#stopVideoBtn").disabled = true;
+});
+
 // ============================================================
 // UPGRADE tab
 // ============================================================