Fork to yt-mp3-ui
Signed-off-by: Julien Riou <julien@riou.xyz>
This commit is contained in:
parent
84a8e0faa7
commit
9c6360e9c4
GPG key ID:
9A099EDA51316854
10 changed files with 243 additions and 288 deletions
|
|
@ -2,6 +2,7 @@ import sys
|
|||
import json
|
||||
import uuid
|
||||
import asyncio
|
||||
import logging
|
||||
import httpx
|
||||
import urllib.parse
|
||||
import mimetypes
|
||||
|
|
@ -17,6 +18,11 @@ sys.path.insert(0, str(Path(__file__).resolve().parents[2]))
|
|||
import yt_dlp
|
||||
|
||||
|
||||
logger = logging.getLogger("yt_dlp_web")
|
||||
|
||||
GENERIC_ERROR = "Une erreur est survenue. Veuillez réessayer."
|
||||
|
||||
|
||||
app = FastAPI()
|
||||
|
||||
app.add_middleware(
|
||||
|
|
@ -29,7 +35,8 @@ app.add_middleware(
|
|||
|
||||
@app.exception_handler(Exception)
|
||||
async def global_exception_handler(request: Request, exc: Exception):
|
||||
return JSONResponse(status_code=500, content={"detail": str(exc)})
|
||||
logger.exception("Unhandled error on %s %s", request.method, request.url.path)
|
||||
return JSONResponse(status_code=500, content={"detail": GENERIC_ERROR})
|
||||
|
||||
|
||||
DOWNLOAD_DIR = Path(__file__).parent / "downloads"
|
||||
|
|
@ -38,14 +45,6 @@ DOWNLOAD_DIR.mkdir(exist_ok=True)
|
|||
FRONTEND_DIR = Path(__file__).parent.parent / "frontend"
|
||||
|
||||
|
||||
FORMAT_PRESETS = {
|
||||
"best": "bestvideo+bestaudio/bestvideo/best",
|
||||
"1080p": "bestvideo[height<=1080]+bestaudio/bestvideo[height<=1080]/best",
|
||||
"720p": "bestvideo[height<=720]+bestaudio/bestvideo[height<=720]/best",
|
||||
"480p": "bestvideo[height<=480]+bestaudio/bestvideo[height<=480]/best",
|
||||
"audio": "bestaudio/best",
|
||||
}
|
||||
|
||||
# file_id -> progress/meta
|
||||
_progress: dict[str, dict] = {}
|
||||
|
||||
|
|
@ -59,8 +58,6 @@ class InfoRequest(BaseModel):
|
|||
|
||||
class DownloadRequest(BaseModel):
|
||||
url: str
|
||||
preset: str = "best"
|
||||
format_id: str | None = None
|
||||
file_id: str | None = None
|
||||
|
||||
|
||||
|
|
@ -80,11 +77,12 @@ async def get_info(req: InfoRequest):
|
|||
try:
|
||||
with yt_dlp.YoutubeDL(ydl_opts) as ydl:
|
||||
info = await asyncio.to_thread(ydl.extract_info, req.url, download=False)
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=400, detail=str(e))
|
||||
except Exception:
|
||||
logger.exception("Info extraction failed for url=%s", req.url)
|
||||
raise HTTPException(status_code=400, detail="Impossible d'extraire les infos de la vidéo.")
|
||||
|
||||
if not info:
|
||||
raise HTTPException(status_code=400, detail="Could not extract video info.")
|
||||
raise HTTPException(status_code=400, detail="Impossible d'extraire les infos de la vidéo.")
|
||||
|
||||
thumbnails = info.get("thumbnails") or []
|
||||
thumbnail_url = None
|
||||
|
|
@ -99,28 +97,6 @@ async def get_info(req: InfoRequest):
|
|||
|
||||
thumbnail_url = thumbnail_url or info.get("thumbnail")
|
||||
|
||||
formats = [
|
||||
{
|
||||
"format_id": f.get("format_id"),
|
||||
"ext": f.get("ext"),
|
||||
"resolution": f.get("resolution") or f.get("format_note") or "unknown",
|
||||
"filesize": f.get("filesize") or f.get("filesize_approx"),
|
||||
"vcodec": f.get("vcodec"),
|
||||
"acodec": f.get("acodec"),
|
||||
"fps": f.get("fps"),
|
||||
"height": f.get("height") or 0,
|
||||
"tbr": f.get("tbr") or 0,
|
||||
}
|
||||
for f in (info.get("formats") or [])
|
||||
if f.get("ext") != "mhtml"
|
||||
and f.get("protocol") != "mhtml"
|
||||
and (f.get("vcodec", "none") != "none" or f.get("acodec", "none") != "none")
|
||||
]
|
||||
formats.sort(key=lambda f: (f["height"], f["tbr"]), reverse=True)
|
||||
|
||||
if not formats:
|
||||
raise HTTPException(status_code=400, detail="No downloadable formats found.")
|
||||
|
||||
return {
|
||||
"title": info.get("title"),
|
||||
"thumbnail": f"/thumbnail?url={thumbnail_url}" if thumbnail_url else None,
|
||||
|
|
@ -129,7 +105,6 @@ async def get_info(req: InfoRequest):
|
|||
"view_count": info.get("view_count"),
|
||||
"like_count": info.get("like_count"),
|
||||
"upload_date": info.get("upload_date"),
|
||||
"formats": formats,
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -143,10 +118,11 @@ async def proxy_thumbnail(url: str):
|
|||
media_type=r.headers.get("content-type", "image/jpeg"),
|
||||
)
|
||||
except Exception:
|
||||
raise HTTPException(status_code=502, detail="Could not fetch thumbnail")
|
||||
logger.exception("Thumbnail fetch failed for url=%s", url)
|
||||
raise HTTPException(status_code=502, detail="Impossible de récupérer la miniature")
|
||||
|
||||
|
||||
async def _run_download(file_id: str, url: str, fmt: str, output_template: str):
|
||||
async def _run_download(file_id: str, url: str, output_template: str):
|
||||
cancelled = asyncio.Event()
|
||||
|
||||
def progress_hook(d):
|
||||
|
|
@ -185,14 +161,18 @@ async def _run_download(file_id: str, url: str, fmt: str, output_template: str):
|
|||
ydl_opts = {
|
||||
"quiet": True,
|
||||
"no_warnings": True,
|
||||
"format": fmt,
|
||||
"format": "bestaudio/best",
|
||||
"outtmpl": output_template,
|
||||
"merge_output_format": "mp4",
|
||||
"restrictfilenames": True,
|
||||
"writethumbnail": True,
|
||||
"postprocessors": [
|
||||
{
|
||||
"key": "FFmpegVideoConvertor",
|
||||
"preferedformat": "mp4",
|
||||
}
|
||||
"key": "FFmpegExtractAudio",
|
||||
"preferredcodec": "mp3",
|
||||
"preferredquality": "320",
|
||||
},
|
||||
{"key": "FFmpegMetadata"},
|
||||
{"key": "EmbedThumbnail"},
|
||||
],
|
||||
"progress_hooks": [progress_hook],
|
||||
}
|
||||
|
|
@ -208,10 +188,11 @@ async def _run_download(file_id: str, url: str, fmt: str, output_template: str):
|
|||
_progress[file_id]["status"] = "cancelled"
|
||||
raise
|
||||
|
||||
except Exception as e:
|
||||
except Exception:
|
||||
logger.exception("Download failed for file_id=%s url=%s", file_id, url)
|
||||
if file_id in _progress:
|
||||
_progress[file_id]["status"] = "error"
|
||||
_progress[file_id]["error"] = str(e)
|
||||
_progress[file_id]["error"] = GENERIC_ERROR
|
||||
raise
|
||||
|
||||
|
||||
|
|
@ -219,10 +200,10 @@ def _finalize_download(file_id: str, info: dict):
|
|||
matches = list(DOWNLOAD_DIR.glob(f"{file_id}.*"))
|
||||
if not matches:
|
||||
_progress[file_id]["status"] = "error"
|
||||
_progress[file_id]["error"] = "Download failed: file not found"
|
||||
_progress[file_id]["error"] = "Échec du téléchargement : fichier introuvable"
|
||||
return
|
||||
|
||||
filepath = matches[0]
|
||||
filepath = next((m for m in matches if m.suffix == ".mp3"), matches[0])
|
||||
title = info.get("title") or file_id
|
||||
|
||||
filename_ascii = "".join(
|
||||
|
|
@ -249,7 +230,6 @@ def _finalize_download(file_id: str, info: dict):
|
|||
async def download_video(req: DownloadRequest):
|
||||
file_id = req.file_id or str(uuid.uuid4())
|
||||
output_template = str(DOWNLOAD_DIR / f"{file_id}.%(ext)s")
|
||||
fmt = req.format_id if req.format_id else FORMAT_PRESETS.get(req.preset, FORMAT_PRESETS["best"])
|
||||
|
||||
_progress[file_id] = {
|
||||
"status": "starting",
|
||||
|
|
@ -257,11 +237,10 @@ async def download_video(req: DownloadRequest):
|
|||
"eta": None,
|
||||
"speed": None,
|
||||
"url": req.url,
|
||||
"fmt": fmt,
|
||||
"output_template": output_template,
|
||||
}
|
||||
|
||||
task = asyncio.create_task(_run_download(file_id, req.url, fmt, output_template))
|
||||
task = asyncio.create_task(_run_download(file_id, req.url, output_template))
|
||||
_tasks[file_id] = task
|
||||
|
||||
def _done_callback(t: asyncio.Task):
|
||||
|
|
@ -271,10 +250,10 @@ async def download_video(req: DownloadRequest):
|
|||
except asyncio.CancelledError:
|
||||
if file_id in _progress:
|
||||
_progress[file_id]["status"] = "cancelled"
|
||||
except Exception as e:
|
||||
except Exception:
|
||||
if file_id in _progress:
|
||||
_progress[file_id]["status"] = "error"
|
||||
_progress[file_id]["error"] = str(e)
|
||||
_progress[file_id]["error"] = GENERIC_ERROR
|
||||
finally:
|
||||
_tasks.pop(file_id, None)
|
||||
|
||||
|
|
@ -303,11 +282,11 @@ async def cancel_download(file_id: str):
|
|||
async def serve_file(file_id: str):
|
||||
meta = _progress.get(file_id)
|
||||
if not meta or meta.get("status") != "ready":
|
||||
raise HTTPException(status_code=404, detail="File not ready")
|
||||
raise HTTPException(status_code=404, detail="Fichier pas encore prêt")
|
||||
|
||||
filepath = Path(meta["filepath"])
|
||||
if not filepath.exists():
|
||||
raise HTTPException(status_code=404, detail="File not found")
|
||||
raise HTTPException(status_code=404, detail="Fichier introuvable")
|
||||
|
||||
filename_ascii = meta["filename_ascii"]
|
||||
filename_encoded = meta["filename_encoded"]
|
||||
|
|
|
|||
|
|
@ -9,13 +9,19 @@ const thumbnail = document.getElementById('thumbnail');
|
|||
const videoTitle = document.getElementById('video-title');
|
||||
const uploaderEl = document.getElementById('uploader');
|
||||
const durationEl = document.getElementById('duration');
|
||||
const formatSection = document.getElementById('format-section');
|
||||
const formatSelect = document.getElementById('format-select');
|
||||
const downloadBtn = document.getElementById('download-btn');
|
||||
const progressWrap = document.getElementById('progress-wrap');
|
||||
const progressFill = document.getElementById('progress-fill');
|
||||
const progressLabel = document.getElementById('progress-label');
|
||||
const cancelBtn = document.getElementById('cancel-btn');
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
const next =
|
||||
document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
localStorage.setItem('theme', next);
|
||||
});
|
||||
|
||||
let currentFileId = null;
|
||||
let currentAbort = null;
|
||||
|
|
@ -50,7 +56,6 @@ function resetUI() {
|
|||
clearBtn.style.display = 'none';
|
||||
errorMsg.style.display = 'none';
|
||||
preview.style.display = 'none';
|
||||
formatSection.style.display = 'none';
|
||||
downloadBtn.style.display = 'none';
|
||||
progressWrap.style.display = 'none';
|
||||
thumbnail.src = '';
|
||||
|
|
@ -80,7 +85,7 @@ function setLoading(btn, loading, text) {
|
|||
btn.textContent = text;
|
||||
} else if (!loading && btn.dataset.label) {
|
||||
if (btn.id === 'download-btn') {
|
||||
btn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Download`;
|
||||
btn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Télécharger`;
|
||||
} else {
|
||||
btn.textContent = btn.dataset.label;
|
||||
}
|
||||
|
|
@ -106,32 +111,6 @@ function formatCount(n) {
|
|||
return n.toString();
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (!bytes) return null;
|
||||
if (bytes >= 1e9) return (bytes / 1e9).toFixed(1) + ' GB';
|
||||
if (bytes >= 1e6) return (bytes / 1e6).toFixed(1) + ' MB';
|
||||
return (bytes / 1e3).toFixed(0) + ' KB';
|
||||
}
|
||||
|
||||
function formatLabel(f) {
|
||||
const parts = [];
|
||||
const res = f.resolution || '';
|
||||
|
||||
if (res && res !== 'unknown') parts.push(res);
|
||||
if (f.ext) parts.push(f.ext.toUpperCase());
|
||||
|
||||
const hasVideo = f.vcodec && f.vcodec !== 'none';
|
||||
const hasAudio = f.acodec && f.acodec !== 'none';
|
||||
|
||||
if (!hasVideo && hasAudio) parts.push('audio only');
|
||||
if (f.fps && hasVideo) parts.push(`${f.fps}fps`);
|
||||
|
||||
const size = formatBytes(f.filesize);
|
||||
if (size) parts.push(`~${size}`);
|
||||
|
||||
return parts.join(' · ') || f.format_id;
|
||||
}
|
||||
|
||||
function setProgress(pct, label) {
|
||||
progressFill.style.width = pct + '%';
|
||||
progressLabel.innerHTML = label;
|
||||
|
|
@ -139,11 +118,11 @@ function setProgress(pct, label) {
|
|||
|
||||
function formatEta(secs) {
|
||||
if (secs == null || secs < 0) return '';
|
||||
if (secs < 60) return `ETA ${secs}s`;
|
||||
if (secs < 60) return `Reste ${secs}s`;
|
||||
|
||||
const m = Math.floor(secs / 60);
|
||||
const s = secs % 60;
|
||||
return `ETA ${m}m ${s}s`;
|
||||
return `Reste ${m}m ${s}s`;
|
||||
}
|
||||
|
||||
urlInput.addEventListener('input', () => {
|
||||
|
|
@ -163,16 +142,15 @@ fetchBtn.addEventListener('click', async () => {
|
|||
const url = urlInput.value.trim();
|
||||
|
||||
if (!url) {
|
||||
showError('Please paste a video URL first.');
|
||||
showError('Veuillez d\'abord coller une URL de vidéo.');
|
||||
return;
|
||||
}
|
||||
|
||||
hideError();
|
||||
preview.style.display = 'none';
|
||||
formatSection.style.display = 'none';
|
||||
downloadBtn.style.display = 'none';
|
||||
progressWrap.style.display = 'none';
|
||||
setLoading(fetchBtn, true, 'Fetching…');
|
||||
setLoading(fetchBtn, true, 'Recherche…');
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API}/info`, {
|
||||
|
|
@ -184,16 +162,14 @@ fetchBtn.addEventListener('click', async () => {
|
|||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(data.detail || 'Failed to fetch video info.');
|
||||
throw new Error(data.detail || 'Échec de la récupération des infos de la vidéo.');
|
||||
}
|
||||
|
||||
renderPreview(data);
|
||||
renderFormats(data.formats || []);
|
||||
preview.style.display = 'flex';
|
||||
formatSection.style.display = 'flex';
|
||||
downloadBtn.style.display = 'flex';
|
||||
} catch (err) {
|
||||
showError(err.message || 'Failed to fetch video info.');
|
||||
showError(err.message || 'Échec de la récupération des infos de la vidéo.');
|
||||
} finally {
|
||||
setLoading(fetchBtn, false);
|
||||
}
|
||||
|
|
@ -201,10 +177,10 @@ fetchBtn.addEventListener('click', async () => {
|
|||
|
||||
function renderPreview(info) {
|
||||
thumbnail.src = info.thumbnail || '';
|
||||
thumbnail.alt = info.title || 'Video thumbnail';
|
||||
thumbnail.alt = info.title || 'Miniature de la vidéo';
|
||||
thumbnail.style.display = info.thumbnail ? 'block' : 'none';
|
||||
|
||||
videoTitle.textContent = info.title || 'Unknown title';
|
||||
videoTitle.textContent = info.title || 'Titre inconnu';
|
||||
|
||||
uploaderEl.textContent = info.uploader || '';
|
||||
uploaderEl.style.display = info.uploader ? '' : 'none';
|
||||
|
|
@ -227,7 +203,7 @@ function renderPreview(info) {
|
|||
const d = info.upload_date;
|
||||
const formatted = new Date(
|
||||
`${d.slice(0, 4)}-${d.slice(4, 6)}-${d.slice(6, 8)}`
|
||||
).toLocaleDateString(undefined, {
|
||||
).toLocaleDateString('fr-FR', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
|
|
@ -240,71 +216,14 @@ function renderPreview(info) {
|
|||
}
|
||||
}
|
||||
|
||||
function renderFormats(formats) {
|
||||
formatSelect.innerHTML = '';
|
||||
|
||||
const sorted = [...formats].sort(
|
||||
(a, b) => (b.height || 0) - (a.height || 0) || (b.tbr || 0) - (a.tbr || 0)
|
||||
);
|
||||
|
||||
const combined = sorted.filter((f) => f.vcodec !== 'none' && f.acodec !== 'none');
|
||||
const videoOnly = sorted.filter((f) => f.vcodec !== 'none' && f.acodec === 'none');
|
||||
const audioOnly = sorted.filter((f) => f.vcodec === 'none' && f.acodec !== 'none');
|
||||
|
||||
const addGroup = (label, items, transformValue = null) => {
|
||||
if (!items.length) return;
|
||||
|
||||
const group = document.createElement('optgroup');
|
||||
group.label = label;
|
||||
|
||||
items.forEach((f) => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = transformValue ? transformValue(f) : f.format_id;
|
||||
opt.textContent = formatLabel(f);
|
||||
group.appendChild(opt);
|
||||
});
|
||||
|
||||
formatSelect.appendChild(group);
|
||||
};
|
||||
|
||||
addGroup(
|
||||
'Video only',
|
||||
videoOnly,
|
||||
(f) => `${f.format_id}+bestaudio[ext=m4a]/bestaudio`
|
||||
);
|
||||
|
||||
addGroup('Video + Audio', combined);
|
||||
addGroup('Audio only', audioOnly);
|
||||
|
||||
// Prefer highest MP4 video-only first, because backend can merge audio into MP4
|
||||
const bestMp4VideoOnly = videoOnly.find((f) => f.ext === 'mp4');
|
||||
|
||||
// Fallback to highest combined MP4
|
||||
const bestMp4Combined = combined.find((f) => f.ext === 'mp4');
|
||||
|
||||
// Fallback to any top combined format
|
||||
const bestCombined = combined[0];
|
||||
|
||||
// Final fallback
|
||||
const bestDefault =
|
||||
(bestMp4VideoOnly && `${bestMp4VideoOnly.format_id}+bestaudio[ext=m4a]/bestaudio`) ||
|
||||
(bestMp4Combined && bestMp4Combined.format_id) ||
|
||||
(bestCombined && bestCombined.format_id) ||
|
||||
(sorted[0] && sorted[0].format_id);
|
||||
|
||||
if (bestDefault) {
|
||||
formatSelect.value = bestDefault;
|
||||
}
|
||||
}
|
||||
|
||||
downloadBtn.addEventListener('click', async () => {
|
||||
const url = urlInput.value.trim();
|
||||
if (!url) return;
|
||||
|
||||
hideError();
|
||||
setLoading(downloadBtn, true, 'Downloading…');
|
||||
setLoading(downloadBtn, true, 'Téléchargement…');
|
||||
progressWrap.style.display = 'block';
|
||||
setProgress(0, '<span class="meta">Starting…</span>');
|
||||
setProgress(0, '<span class="meta">Démarrage…</span>');
|
||||
|
||||
const fileId = crypto.randomUUID();
|
||||
currentFileId = fileId;
|
||||
|
|
@ -316,7 +235,7 @@ downloadBtn.addEventListener('click', async () => {
|
|||
const d = JSON.parse(e.data);
|
||||
|
||||
if (d.status === 'starting') {
|
||||
setProgress(0, '<span class="meta">Starting…</span>');
|
||||
setProgress(0, '<span class="meta">Démarrage…</span>');
|
||||
} else if (d.status === 'downloading') {
|
||||
const pct = d.percent || 0;
|
||||
const eta = d.eta != null ? formatEta(d.eta) : '';
|
||||
|
|
@ -330,7 +249,7 @@ downloadBtn.addEventListener('click', async () => {
|
|||
} else if (d.status === 'finished') {
|
||||
setProgress(
|
||||
100,
|
||||
'<span class="pct">100%</span> <span class="meta">Processing…</span>'
|
||||
'<span class="pct">100%</span> <span class="meta">Traitement…</span>'
|
||||
);
|
||||
} else if (d.status === 'ready') {
|
||||
sse.close();
|
||||
|
|
@ -340,7 +259,7 @@ downloadBtn.addEventListener('click', async () => {
|
|||
if (currentFileId === fileId) {
|
||||
setProgress(
|
||||
100,
|
||||
'<span class="pct">✓</span> <span class="meta">Done — saving to your downloads</span>'
|
||||
'<span class="pct">✓</span> <span class="meta">Terminé — enregistrement dans vos téléchargements</span>'
|
||||
);
|
||||
|
||||
window.location.href = `${API}/file/${fileId}`;
|
||||
|
|
@ -363,7 +282,7 @@ downloadBtn.addEventListener('click', async () => {
|
|||
sse.close();
|
||||
currentSse = null;
|
||||
currentAbort = null;
|
||||
showError(d.error || 'Download failed.');
|
||||
showError(d.error || 'Échec du téléchargement.');
|
||||
progressWrap.style.display = 'none';
|
||||
currentFileId = null;
|
||||
setLoading(downloadBtn, false);
|
||||
|
|
@ -384,7 +303,6 @@ downloadBtn.addEventListener('click', async () => {
|
|||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
url,
|
||||
format_id: formatSelect.value,
|
||||
file_id: fileId,
|
||||
}),
|
||||
signal: abort.signal,
|
||||
|
|
@ -393,11 +311,11 @@ downloadBtn.addEventListener('click', async () => {
|
|||
const data = await res.json().catch(() => ({}));
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(data.detail || 'Download failed.');
|
||||
throw new Error(data.detail || 'Échec du téléchargement.');
|
||||
}
|
||||
|
||||
if (data.status !== 'started') {
|
||||
throw new Error('Unexpected server response.');
|
||||
throw new Error('Réponse inattendue du serveur.');
|
||||
}
|
||||
} catch (err) {
|
||||
if (currentSse) {
|
||||
|
|
@ -408,7 +326,7 @@ downloadBtn.addEventListener('click', async () => {
|
|||
currentAbort = null;
|
||||
|
||||
if (err.name !== 'AbortError') {
|
||||
showError(err.message || 'Download failed.');
|
||||
showError(err.message || 'Échec du téléchargement.');
|
||||
progressWrap.style.display = 'none';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>yt-dlp Web</title>
|
||||
<title>YouTube MP3</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'><rect width='36' height='36' rx='10' fill='%236366f1'/><path d='M11 12l14 6-14 6V12z' fill='white'/></svg>" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
<script>
|
||||
(function () {
|
||||
const saved = localStorage.getItem('theme');
|
||||
const theme = saved
|
||||
|| (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-orbs">
|
||||
|
|
@ -19,24 +27,20 @@
|
|||
|
||||
<main class="container">
|
||||
<header>
|
||||
<div class="logo">
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true">
|
||||
<rect width="36" height="36" rx="10" fill="url(#grad)"/>
|
||||
<path d="M11 12l14 6-14 6V12z" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0" y1="0" x2="36" y2="36" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6366f1"/>
|
||||
<stop offset="1" stop-color="#8b5cf6"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<button id="theme-toggle" class="theme-toggle" type="button" aria-label="Changer de thème" title="Changer de thème">
|
||||
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="4"/>
|
||||
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
|
||||
</svg>
|
||||
<span>yt-dlp web</span>
|
||||
</div>
|
||||
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Download any video,<br /><span class="gradient-text">instantly.</span></h1>
|
||||
<p class="subtitle">Paste a YouTube (or any supported) link below and grab your video.</p>
|
||||
<h1>Téléchargez n'importe quel morceau en<br /><span class="gradient-text">MP3.</span></h1>
|
||||
<p class="subtitle">Collez un lien YouTube ci-dessous et récupérez l'audio en MP3.</p>
|
||||
</section>
|
||||
|
||||
<div class="card" id="main-card">
|
||||
|
|
@ -52,16 +56,16 @@
|
|||
placeholder="https://www.youtube.com/watch?v=..."
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
aria-label="Video URL"
|
||||
aria-label="URL de la vidéo"
|
||||
/>
|
||||
<button class="clear-btn" id="clear-btn" aria-label="Clear input">
|
||||
<button class="clear-btn" id="clear-btn" aria-label="Effacer">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn-primary" id="fetch-btn" aria-label="Fetch video info">
|
||||
Fetch
|
||||
<button class="btn-primary" id="fetch-btn" aria-label="Récupérer les infos de la vidéo">
|
||||
Rechercher
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -69,7 +73,7 @@
|
|||
|
||||
<!-- Video preview -->
|
||||
<div id="preview" class="preview" hidden>
|
||||
<img id="thumbnail" class="thumbnail" alt="Video thumbnail" />
|
||||
<img id="thumbnail" class="thumbnail" alt="Miniature de la vidéo" />
|
||||
<div class="meta">
|
||||
<h2 id="video-title" class="video-title"></h2>
|
||||
<div class="meta-row">
|
||||
|
|
@ -82,25 +86,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Format selector -->
|
||||
<div id="format-section" class="format-section" hidden>
|
||||
<label for="format-select" class="format-label">Format</label>
|
||||
<div class="select-wrap">
|
||||
<select id="format-select" aria-label="Select download format"></select>
|
||||
<svg class="select-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download button -->
|
||||
<button class="btn-download" id="download-btn" hidden aria-label="Download video">
|
||||
<button class="btn-download" id="download-btn" hidden aria-label="Télécharger le MP3">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
|
||||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
|
||||
<polyline points="7 10 12 15 17 10"/>
|
||||
<line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</svg>
|
||||
Download
|
||||
Télécharger
|
||||
</button>
|
||||
|
||||
<!-- Progress -->
|
||||
|
|
@ -110,17 +103,18 @@
|
|||
</div>
|
||||
<div class="progress-row">
|
||||
<div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
|
||||
<button id="cancel-btn" type="button" class="progress-btn cancel" aria-label="Cancel download">
|
||||
<button id="cancel-btn" type="button" class="progress-btn cancel" aria-label="Annuler le téléchargement">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
Cancel
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Powered by <a href="https://github.com/yt-dlp/yt-dlp" target="_blank" rel="noopener">yt-dlp</a></p>
|
||||
<p>Propulsé par <a href="https://github.com/yt-dlp/yt-dlp" target="_blank" rel="noopener">yt-dlp</a></p>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
|
|
@ -130,6 +124,6 @@
|
|||
if (input) input.value = '';
|
||||
});
|
||||
</script>
|
||||
<script src="/static/app.js?v=4"></script>
|
||||
<script src="/static/app.js?v=7"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,11 @@
|
|||
--border-focus: rgba(99,102,241,0.6);
|
||||
--text: #f1f1f5;
|
||||
--text-muted: #8b8b9e;
|
||||
--input-bg: rgba(255,255,255,0.05);
|
||||
--tag-bg: rgba(255,255,255,0.07);
|
||||
--track: rgba(255,255,255,0.07);
|
||||
--card-shadow: none;
|
||||
--orb-opacity: 0.18;
|
||||
--primary: #6366f1;
|
||||
--primary-hover: #4f52e0;
|
||||
--success: #22c55e;
|
||||
|
|
@ -16,6 +21,20 @@
|
|||
--radius-sm: 8px;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--bg: #f4f5fb;
|
||||
--surface: #ffffff;
|
||||
--surface-hover: rgba(0,0,0,0.04);
|
||||
--border: rgba(0,0,0,0.09);
|
||||
--text: #16161f;
|
||||
--text-muted: #5c5c72;
|
||||
--input-bg: #ffffff;
|
||||
--tag-bg: rgba(0,0,0,0.05);
|
||||
--track: rgba(0,0,0,0.09);
|
||||
--card-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
||||
--orb-opacity: 0.12;
|
||||
}
|
||||
|
||||
html { font-size: 16px; }
|
||||
|
||||
body {
|
||||
|
|
@ -27,6 +46,7 @@ body {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-x: hidden;
|
||||
transition: background 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Ambient background orbs */
|
||||
|
|
@ -35,7 +55,7 @@ body {
|
|||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: 0.18;
|
||||
opacity: var(--orb-opacity);
|
||||
}
|
||||
.orb-1 { width: 500px; height: 500px; background: #6366f1; top: -150px; left: -100px; }
|
||||
.orb-2 { width: 400px; height: 400px; background: #8b5cf6; bottom: -100px; right: -80px; }
|
||||
|
|
@ -53,7 +73,7 @@ body {
|
|||
}
|
||||
|
||||
/* Header */
|
||||
header { display: flex; justify-content: center; }
|
||||
header { display: flex; justify-content: center; position: relative; }
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -63,6 +83,28 @@ header { display: flex; justify-content: center; }
|
|||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.theme-toggle:hover { color: var(--text); border-color: var(--border-focus); }
|
||||
.theme-toggle svg { display: block; }
|
||||
.theme-toggle .icon-moon { display: none; }
|
||||
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
|
||||
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
|
||||
|
||||
/* Hero */
|
||||
.hero { text-align: center; }
|
||||
.hero h1 {
|
||||
|
|
@ -95,6 +137,7 @@ header { display: flex; justify-content: center; }
|
|||
gap: 20px;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
/* Input row */
|
||||
|
|
@ -114,7 +157,7 @@ header { display: flex; justify-content: center; }
|
|||
}
|
||||
#url-input {
|
||||
width: 100%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
|
|
@ -237,7 +280,7 @@ header { display: flex; justify-content: center; }
|
|||
}
|
||||
.meta-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
|
||||
.tag {
|
||||
background: rgba(255,255,255,0.07);
|
||||
background: var(--tag-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 3px 10px;
|
||||
|
|
@ -245,39 +288,6 @@ header { display: flex; justify-content: center; }
|
|||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Format selector */
|
||||
.format-section { display: flex; flex-direction: column; gap: 10px; }
|
||||
.format-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
.select-wrap { position: relative; }
|
||||
.select-wrap select {
|
||||
width: 100%;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
padding: 11px 40px 11px 14px;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.select-wrap select:focus {
|
||||
border-color: var(--border-focus);
|
||||
box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
|
||||
}
|
||||
.select-wrap select option { background: #1a1a2e; color: var(--text); }
|
||||
.select-arrow {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
.progress-wrap {
|
||||
display: flex;
|
||||
|
|
@ -303,7 +313,7 @@ header { display: flex; justify-content: center; }
|
|||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: rgba(255,255,255,0.07);
|
||||
background: var(--track);
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -330,7 +340,7 @@ header { display: flex; justify-content: center; }
|
|||
}
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: rgba(255,255,255,0.07);
|
||||
background: var(--track);
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue