init
This commit is contained in:
imagede
509
app/static/index.html
Normal file
509
app/static/index.html
Normal file
@@ -0,0 +1,509 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>yt-dlp Downloader</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0f0f12;
|
||||
--surface: #18181f;
|
||||
--surface-2: #22222c;
|
||||
--border: #2e2e3a;
|
||||
--accent: #e53935;
|
||||
--accent-hover: #ef5350;
|
||||
--text: #f0f0f5;
|
||||
--text-muted: #8888a0;
|
||||
--success: #43a047;
|
||||
--error: #e53935;
|
||||
--radius: 10px;
|
||||
--font: 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px 16px 80px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.logo svg { width: 36px; height: 36px; }
|
||||
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 28px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.url-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 11px 14px;
|
||||
color: var(--text);
|
||||
font-size: 0.95rem;
|
||||
font-family: var(--font);
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
input[type="text"]:focus { border-color: var(--accent); }
|
||||
input[type="text"]::placeholder { color: var(--text-muted); }
|
||||
|
||||
.btn {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 11px 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, opacity 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn:hover:not(:disabled) { background: var(--accent-hover); }
|
||||
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
.btn.secondary {
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.btn.secondary:hover:not(:disabled) { background: var(--border); }
|
||||
|
||||
.options-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.option-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
label.opt-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
select {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 9px 12px;
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--font);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
width: 100%;
|
||||
}
|
||||
select:focus { border-color: var(--accent); }
|
||||
|
||||
/* Preview */
|
||||
#preview {
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#preview.visible { display: flex; }
|
||||
|
||||
#preview-thumb {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-info { flex: 1; min-width: 0; }
|
||||
.preview-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.preview-meta {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Jobs */
|
||||
#jobs {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.job {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.job-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.job-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.job-badge {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 3px 9px;
|
||||
border-radius: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.badge-pending, .badge-running, .badge-processing {
|
||||
background: #1a2a3a;
|
||||
color: #60aaff;
|
||||
}
|
||||
.badge-done { background: #1a2e1a; color: #66bb6a; }
|
||||
.badge-error { background: #2e1a1a; color: #ef5350; }
|
||||
|
||||
.job-progress-bar {
|
||||
height: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.job-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.badge-done ~ .job-progress-bar .job-progress-fill { background: var(--success); }
|
||||
|
||||
.job-meta {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.job-error {
|
||||
font-size: 0.82rem;
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.job-actions { display: flex; gap: 8px; }
|
||||
|
||||
/* Divider */
|
||||
.divider {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 14px; height: 14px;
|
||||
border: 2px solid var(--border);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.url-row { flex-direction: column; }
|
||||
.options-row { flex-direction: column; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="logo">
|
||||
<svg aria-label="yt-dlp downloader" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="36" height="36" rx="8" fill="#e53935"/>
|
||||
<path d="M10 13l8 5-8 5V13z" fill="white"/>
|
||||
<path d="M20 13h6M20 18h6M20 23h6" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<h1>yt-dlp Downloader</h1>
|
||||
</div>
|
||||
<p class="subtitle">Download videos & audio from YouTube and 1000+ sites</p>
|
||||
</header>
|
||||
|
||||
<div class="card">
|
||||
<div class="url-row">
|
||||
<input type="text" id="url-input" placeholder="Paste a YouTube (or other) URL…" autocomplete="off" />
|
||||
<button class="btn secondary" id="fetch-btn" onclick="fetchInfo()">Preview</button>
|
||||
</div>
|
||||
|
||||
<div id="preview">
|
||||
<img id="preview-thumb" src="" alt="" />
|
||||
<div class="preview-info">
|
||||
<div class="preview-title" id="preview-title"></div>
|
||||
<div class="preview-meta" id="preview-meta"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options-row">
|
||||
<div class="option-group">
|
||||
<label class="opt-label" for="format-select">Format</label>
|
||||
<select id="format-select" onchange="onFormatChange()">
|
||||
<option value="video">Video (MP4)</option>
|
||||
<option value="audio">Audio (MP3)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="option-group" id="quality-group">
|
||||
<label class="opt-label" for="quality-select">Quality</label>
|
||||
<select id="quality-select">
|
||||
<option value="best">Best available</option>
|
||||
<option value="1080">1080p</option>
|
||||
<option value="720">720p</option>
|
||||
<option value="480">480p</option>
|
||||
<option value="360">360p</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:16px;">
|
||||
<button class="btn" id="dl-btn" onclick="startDownload()" style="width:100%">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="jobs"></div>
|
||||
|
||||
<script>
|
||||
const activePolls = {};
|
||||
|
||||
function fmtDuration(sec) {
|
||||
if (!sec) return '';
|
||||
const m = Math.floor(sec / 60);
|
||||
const s = sec % 60;
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function fmtViews(n) {
|
||||
if (!n) return '';
|
||||
if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M views';
|
||||
if (n >= 1e3) return (n / 1e3).toFixed(0) + 'K views';
|
||||
return n + ' views';
|
||||
}
|
||||
|
||||
function onFormatChange() {
|
||||
const fmt = document.getElementById('format-select').value;
|
||||
document.getElementById('quality-group').style.opacity = fmt === 'audio' ? '0.4' : '1';
|
||||
document.getElementById('quality-select').disabled = fmt === 'audio';
|
||||
}
|
||||
|
||||
async function fetchInfo() {
|
||||
const url = document.getElementById('url-input').value.trim();
|
||||
if (!url) return;
|
||||
const btn = document.getElementById('fetch-btn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="spinner"></span>Loading';
|
||||
const preview = document.getElementById('preview');
|
||||
preview.classList.remove('visible');
|
||||
try {
|
||||
const res = await fetch('/api/info?url=' + encodeURIComponent(url));
|
||||
if (!res.ok) throw new Error((await res.json()).detail || 'Error');
|
||||
const info = await res.json();
|
||||
document.getElementById('preview-thumb').src = info.thumbnail || '';
|
||||
document.getElementById('preview-title').textContent = info.title || 'Unknown';
|
||||
document.getElementById('preview-meta').textContent =
|
||||
[info.uploader, fmtDuration(info.duration), fmtViews(info.view_count)].filter(Boolean).join(' · ');
|
||||
preview.classList.add('visible');
|
||||
} catch (e) {
|
||||
alert('Could not fetch info: ' + e.message);
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Preview';
|
||||
}
|
||||
}
|
||||
|
||||
async function startDownload() {
|
||||
const url = document.getElementById('url-input').value.trim();
|
||||
if (!url) { alert('Please enter a URL first.'); return; }
|
||||
const format = document.getElementById('format-select').value;
|
||||
const quality = document.getElementById('quality-select').value;
|
||||
|
||||
const btn = document.getElementById('dl-btn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="spinner"></span>Starting…';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/download', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url, format, quality }),
|
||||
});
|
||||
if (!res.ok) throw new Error((await res.json()).detail || 'Error');
|
||||
const job = await res.json();
|
||||
addJobCard(job.id, url, format);
|
||||
pollJob(job.id);
|
||||
} catch (e) {
|
||||
alert('Failed to start download: ' + e.message);
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Download';
|
||||
}
|
||||
}
|
||||
|
||||
function addJobCard(id, url, format) {
|
||||
const container = document.getElementById('jobs');
|
||||
const card = document.createElement('div');
|
||||
card.className = 'job';
|
||||
card.id = 'job-' + id;
|
||||
const label = new URL(url).hostname.replace('www.', '');
|
||||
card.innerHTML = `
|
||||
<div class="job-header">
|
||||
<div class="job-title" id="title-${id}">${label} · ${format === 'audio' ? 'MP3' : 'MP4'}</div>
|
||||
<span class="job-badge badge-pending" id="badge-${id}">Pending</span>
|
||||
</div>
|
||||
<div class="job-progress-bar">
|
||||
<div class="job-progress-fill" id="fill-${id}" style="width:0%"></div>
|
||||
</div>
|
||||
<div class="job-meta" id="meta-${id}">Queued…</div>
|
||||
<div class="job-error" id="err-${id}" style="display:none"></div>
|
||||
<div class="job-actions" id="actions-${id}"></div>
|
||||
`;
|
||||
container.prepend(card);
|
||||
}
|
||||
|
||||
function pollJob(id) {
|
||||
if (activePolls[id]) return;
|
||||
activePolls[id] = setInterval(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/status/' + id);
|
||||
const job = await res.json();
|
||||
updateJobCard(job);
|
||||
if (job.status === 'done' || job.status === 'error') {
|
||||
clearInterval(activePolls[id]);
|
||||
delete activePolls[id];
|
||||
}
|
||||
} catch (e) {
|
||||
// silently retry
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
|
||||
function updateJobCard(job) {
|
||||
const title = document.getElementById('title-' + job.id);
|
||||
const badge = document.getElementById('badge-' + job.id);
|
||||
const fill = document.getElementById('fill-' + job.id);
|
||||
const meta = document.getElementById('meta-' + job.id);
|
||||
const err = document.getElementById('err-' + job.id);
|
||||
const actions = document.getElementById('actions-' + job.id);
|
||||
if (!badge) return;
|
||||
|
||||
if (job.title) title.textContent = job.title;
|
||||
|
||||
const statusLabels = { pending: 'Pending', running: 'Downloading', processing: 'Processing', done: 'Done', error: 'Error' };
|
||||
badge.textContent = statusLabels[job.status] || job.status;
|
||||
badge.className = 'job-badge badge-' + job.status;
|
||||
|
||||
fill.style.width = job.progress + '%';
|
||||
|
||||
if (job.status === 'running') {
|
||||
const parts = [];
|
||||
if (job.progress > 0) parts.push(job.progress.toFixed(1) + '%');
|
||||
if (job.speed) parts.push(job.speed);
|
||||
if (job.eta) parts.push('ETA ' + job.eta);
|
||||
meta.textContent = parts.join(' · ') || 'Downloading…';
|
||||
} else if (job.status === 'processing') {
|
||||
meta.textContent = 'Post-processing (merging / converting)…';
|
||||
} else if (job.status === 'done') {
|
||||
meta.textContent = 'Complete · ' + job.filename.split('_').slice(1).join('_');
|
||||
if (!actions.querySelector('a')) {
|
||||
const a = document.createElement('a');
|
||||
a.href = '/api/file/' + job.id;
|
||||
a.className = 'btn';
|
||||
a.style.fontSize = '0.82rem';
|
||||
a.style.padding = '7px 14px';
|
||||
a.textContent = '⬇ Download File';
|
||||
a.download = '';
|
||||
actions.appendChild(a);
|
||||
}
|
||||
} else if (job.status === 'error') {
|
||||
meta.textContent = '';
|
||||
err.style.display = 'block';
|
||||
err.textContent = '✕ ' + (job.error || 'Unknown error');
|
||||
}
|
||||
}
|
||||
|
||||
// Allow pressing Enter in the URL field
|
||||
document.getElementById('url-input').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') startDownload();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user