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>
This commit is contained in:
luzadevandClaude Opus 4.7 committed 2026-05-30 13:12:31 +02:00
1 parent c3f6088b58
commit 8d9c05b151
5 files changed
+455 -3

No files matched your search

+72
View File
@@ -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">