559 lines
22 KiB
HTML
559 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>xStream Downloader</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: -apple-system, sans-serif; background: #1a1a2e; color: #eee; }
|
|
header { background: #16213e; padding: 12px 20px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #0f3460; }
|
|
header h1 { color: #e94560; font-size: 1.1rem; }
|
|
header input { flex: 1; max-width: 400px; padding: 8px 12px; border-radius: 6px; border: 1px solid #333; background: #0f3460; color: #fff; }
|
|
header button { padding: 8px 16px; background: #e94560; border: none; border-radius: 6px; color: white; cursor: pointer; }
|
|
#app { display: flex; height: calc(100vh - 52px); }
|
|
#sidebar { width: 200px; background: #16213e; overflow-y: auto; padding: 8px; border-right: 1px solid #0f3460; }
|
|
#sidebar h3 { font-size: 0.75rem; text-transform: uppercase; color: #888; padding: 8px 4px 4px; }
|
|
.site-btn { display: block; width: 100%; padding: 8px 10px; margin: 2px 0; background: transparent; border: 1px solid transparent; border-radius: 6px; color: #ccc; text-align: left; cursor: pointer; font-size: 0.9rem; }
|
|
.site-btn:hover { background: #0f3460; }
|
|
.site-btn.active { background: #e94560; color: white; border-color: #e94560; }
|
|
#main { flex: 1; overflow-y: auto; padding: 16px; }
|
|
#breadcrumb { color: #888; margin-bottom: 16px; font-size: 0.85rem; }
|
|
#breadcrumb span { cursor: pointer; color: #e94560; }
|
|
#breadcrumb span:hover { text-decoration: underline; }
|
|
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
|
|
.card { background: #16213e; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.1s; }
|
|
.card:hover { transform: translateY(-2px); }
|
|
.card img { width: 100%; height: 240px; object-fit: cover; background: #0f3460; }
|
|
.card-body { padding: 10px; }
|
|
.card-title { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.card-meta { font-size: 0.75rem; color: #888; margin-top: 4px; }
|
|
/* Suchergebnisse Liste */
|
|
.search-results { max-width: 700px; margin: 0 auto; }
|
|
.entry-list { display: flex; flex-direction: column; gap: 6px; }
|
|
.entry-actions { display: flex; gap: 4px; margin-left: auto; }
|
|
.btn-stream-sm, .btn-download-sm { width: 28px; height: 28px; border-radius: 4px; border: none; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
|
|
.btn-stream-sm { background: #0f3460; color: #0f0; }
|
|
.btn-download-sm { background: #0f3460; color: #ff0; }
|
|
.btn-stream-sm:hover { background: #0f0; color: #000; }
|
|
.btn-download-sm:hover { background: #ff0; color: #000; }
|
|
.entry-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #16213e; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
|
|
.entry-item:hover { background: #1a2744; }
|
|
.entry-item .entry-thumb { width: 50px; height: 70px; object-fit: cover; border-radius: 4px; background: #0f3460; flex-shrink: 0; }
|
|
.entry-item .entry-thumb.placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
|
|
.entry-item .entry-info { flex: 1; min-width: 0; }
|
|
.entry-item .entry-title { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.entry-item .entry-meta { font-size: 0.75rem; color: #888; margin-top: 4px; display: flex; gap: 10px; }
|
|
.entry-item .entry-year { }
|
|
.entry-item .entry-site { color: #e94560; }
|
|
.entry-item .entry-arrow { color: #888; font-size: 0.8rem; }
|
|
.hoster-list { max-width: 500px; margin: 20px auto; }
|
|
.hoster { display: flex; align-items: center; gap: 12px; padding: 12px; background: #16213e; border-radius: 8px; margin: 6px 0; flex-wrap: wrap; }
|
|
.hoster-name { flex: 1; font-weight: 600; }
|
|
.hoster-quality { color: #e94560; font-size: 0.8rem; }
|
|
.hoster-actions { display: flex; gap: 8px; }
|
|
.btn-stream, .btn-download { padding: 6px 14px; background: #0f3460; border: 1px solid #e94560; border-radius: 6px; color: #e94560; cursor: pointer; font-size: 0.85rem; }
|
|
.btn-stream:hover, .btn-download:hover { background: #e94560; color: white; }
|
|
.download-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #16213e; border-radius: 8px; margin: 4px 0; }
|
|
.download-item.complete { border-left: 3px solid #0f0; }
|
|
.download-item.error, .download-item.cancelled { border-left: 3px solid #f00; }
|
|
.download-item.downloading { border-left: 3px solid #e94560; }
|
|
.download-item.resolving { border-left: 3px solid #ffa500; }
|
|
.download-info { flex: 1; }
|
|
.download-info .name { font-size: 0.9rem; display: block; }
|
|
.download-info .status { font-size: 0.75rem; color: #888; }
|
|
.download-actions { display: flex; gap: 6px; }
|
|
.btn-save { padding: 4px 10px; background: #0f3460; border: 1px solid #0f0; border-radius: 4px; color: #0f0; cursor: pointer; font-size: 0.8rem; }
|
|
.btn-save:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
.btn-cancel { padding: 4px 10px; background: #0f3460; border: 1px solid #f00; border-radius: 4px; color: #f00; cursor: pointer; font-size: 0.8rem; }
|
|
.btn-delete { padding: 4px 10px; background: #0f3460; border: 1px solid #888; border-radius: 4px; color: #888; cursor: pointer; font-size: 0.8rem; }
|
|
.btn-save:hover { background: #0f0; color: #000; }
|
|
.btn-cancel:hover { background: #f00; color: #fff; }
|
|
.btn-delete:hover { background: #888; color: #fff; }
|
|
.download-path { font-size: 0.75rem; color: #666; margin-bottom: 10px; }
|
|
#downloads { max-width: 600px; margin: 20px auto; }
|
|
.download-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #16213e; border-radius: 8px; margin: 4px 0; }
|
|
.download-item .name { flex: 1; font-size: 0.9rem; }
|
|
.download-item .progress-bar { flex: 2; height: 6px; background: #333; border-radius: 3px; overflow: hidden; }
|
|
.download-item .progress-bar .fill { height: 100%; background: #0f0; transition: width 0.3s; }
|
|
.download-item .progress-bar .fill.error { background: #f00; }
|
|
.download-item .progress-bar .fill.resolving { background: #ff0; }
|
|
.download-item .status { font-size: 0.75rem; color: #888; width: 80px; text-align: right; }
|
|
.section-title { color: #e94560; font-size: 1rem; margin-bottom: 12px; cursor: pointer; }
|
|
.loading { text-align: center; padding: 40px; color: #888; }
|
|
.error { background: #3d0000; border: 1px solid #e94560; padding: 12px; border-radius: 8px; margin: 10px 0; }
|
|
.hidden { display: none; }
|
|
.tab-bar { display: flex; gap: 4px; margin-bottom: 16px; }
|
|
.tab { padding: 6px 14px; background: transparent; border: 1px solid #333; border-radius: 6px; color: #888; cursor: pointer; font-size: 0.85rem; }
|
|
.tab.active { background: #e94560; color: white; border-color: #e94560; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>🎬 xStream Downloader</h1>
|
|
<input type="text" id="searchInput" placeholder="Film oder Serie suchen..." onkeydown="if(event.key==='Enter')doSearch()">
|
|
<button onclick="doSearch()">🔍</button>
|
|
<button onclick="showDownloads()" style="background:#0f3460;">📥 Downloads</button>
|
|
</header>
|
|
<div id="app">
|
|
<div id="sidebar">
|
|
<h3>📺 Sites</h3>
|
|
<div id="siteList"></div>
|
|
</div>
|
|
<div id="main">
|
|
<div id="breadcrumb"></div>
|
|
<div id="content"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API = '/api';
|
|
let state = { view: 'home', sites: [], site: null, entries: [], hosters: [], currentEntry: null, downloadId: null };
|
|
let downloads = {};
|
|
// Navigation stack: [{site, entries, breadcrumb}]
|
|
let navStack = [];
|
|
|
|
async function api(url) {
|
|
const r = await fetch(API + url);
|
|
if (!r.ok) { const e = await r.json(); throw new Error(e.error || 'API error'); }
|
|
return r.json();
|
|
}
|
|
|
|
async function loadSites() {
|
|
try {
|
|
state.sites = await api('/sites');
|
|
// backends response has id already so we just use it directly
|
|
state.sites = state.sites;
|
|
renderSidebar();
|
|
} catch(e) { console.error(e); }
|
|
}
|
|
|
|
function renderSidebar() {
|
|
const el = document.getElementById('siteList');
|
|
el.innerHTML = state.sites.map(s =>
|
|
`<button class="site-btn${state.site && state.site.id === s.id ? ' active' : ''}" onclick="loadSite('${s.id}')">${s.name}</button>`
|
|
).join('');
|
|
}
|
|
|
|
async function loadSite(id) {
|
|
state.site = state.sites.find(s => s.id === id);
|
|
if (!state.site) return;
|
|
clearDownloadsRefresh();
|
|
state.view = 'site';
|
|
state.entries = [];
|
|
state.hosters = [];
|
|
setBC(['Sites', state.site.name]);
|
|
document.getElementById('content').innerHTML = '<div class="loading">Lade...</div>';
|
|
try {
|
|
const data = await api(`/sites/${id}/entries`);
|
|
state.entries = data.entries || [];
|
|
renderEntries();
|
|
} catch(e) {
|
|
document.getElementById('content').innerHTML = `<div class="error">${e.message}</div>`;
|
|
}
|
|
renderSidebar();
|
|
}
|
|
|
|
function renderEntries() {
|
|
const el = document.getElementById('content');
|
|
if (!state.entries.length) {
|
|
el.innerHTML = '<div class="loading">Keine Einträge gefunden</div>';
|
|
return;
|
|
}
|
|
|
|
// Suchergebnisse als Liste anzeigen
|
|
if (state.view === 'search') {
|
|
el.innerHTML = `<div class="search-results">
|
|
<h2 class="section-title">Suchergebnisse (${state.entries.length})</h2>
|
|
<div class="entry-list">
|
|
${state.entries.map((e, i) => `
|
|
<div class="entry-item">
|
|
${e.thumb ? `<img src="${e.thumb}" class="entry-thumb" onerror="this.style.display='none'">` : '<div class="entry-thumb placeholder">🎬</div>'}
|
|
<div class="entry-info" onclick="openSearchResult(${i})">
|
|
<div class="entry-title">${e.title || 'Unnamed'}</div>
|
|
<div class="entry-meta">
|
|
${e.year ? `<span class="entry-year">${e.year}</span>` : ''}
|
|
${e._site ? `<span class="entry-site">${e._site.name}</span>` : ''}
|
|
</div>
|
|
</div>
|
|
<div class="entry-actions">
|
|
<button class="btn-stream-sm" onclick="openSearchStream(${i})" title="Stream">▶</button>
|
|
<button class="btn-download-sm" onclick="addSearchDownload(${i})" title="Download">⬇</button>
|
|
</div>
|
|
</div>`).join('')}
|
|
</div>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
// Normale Kartenansicht
|
|
el.innerHTML = `<div class="entries">${state.entries.map(e => `
|
|
<div class="card" onclick="selectEntry(${state.entries.indexOf(e)})">
|
|
${e.thumb ? `<img src="${e.thumb}" onerror="this.style.display='none'">` : ''}
|
|
<div class="card-body">
|
|
<div class="card-title">${e.title || 'Unnamed'}</div>
|
|
${e.year ? `<div class="card-meta">${e.year}</div>` : ''}
|
|
</div>
|
|
</div>`).join('')}</div>`;
|
|
}
|
|
|
|
async function selectEntry(idx) {
|
|
const entry = state.entries[idx];
|
|
state.currentEntry = entry;
|
|
state.hosters = [];
|
|
|
|
if (entry.isFolder) {
|
|
// Folder: aktuellen Stand merken und tiefer navigieren
|
|
navStack.push({ site: state.site, entries: [...state.entries] });
|
|
const el = document.getElementById('content');
|
|
el.innerHTML = `<div class="loading">Lade "${entry.title}"...</div>`;
|
|
try {
|
|
const encoded = encodeURIComponent(entry.url);
|
|
const data = await api(`/sites/${state.site.id}/entries/${encoded}`);
|
|
state.entries = data.entries || [];
|
|
setBC([state.site.name, entry.title]);
|
|
if (state.entries.length === 0) {
|
|
el.innerHTML = `<div class="error">Keine Eintraege gefunden</div><button class="tab" onclick="goBack()">← Zurueck</button>`;
|
|
} else {
|
|
renderEntries();
|
|
}
|
|
} catch(e) {
|
|
el.innerHTML = `<div class="error">${e.message}</div><button class="tab" onclick="goBack()">← Zurueck</button>`;
|
|
}
|
|
} else {
|
|
// Nicht-Folder: Hosters laden
|
|
setBC([state.site.name, entry.title]);
|
|
const el = document.getElementById('content');
|
|
el.innerHTML = `<div class="loading">Lade Hosters für "${entry.title}"...</div>`;
|
|
try {
|
|
const params = new URLSearchParams({ url: entry.url || '', episode: entry.episode || '' });
|
|
const data = await api(`/sites/${state.site.id}/hosters?${params}`);
|
|
state.hosters = (data.hosters || []).filter(h => typeof h === 'object');
|
|
renderHosters(entry);
|
|
} catch(e) {
|
|
el.innerHTML = `<div class="error">${e.message}</div><button class="tab" onclick="goBack()">← Zurueck</button>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
function renderHosters(entry) {
|
|
const el = document.getElementById('content');
|
|
if (!state.hosters.length) {
|
|
el.innerHTML = `<div class="error">Keine Hosters gefunden</div><button class="tab" onclick="loadSite('${state.site.id}')">← Zurück</button>`;
|
|
return;
|
|
}
|
|
el.innerHTML = `
|
|
<div class="hoster-list">
|
|
<h2 class="section-title">⬇️ "${entry.title}"</h2>
|
|
${state.hosters.map((h, i) => `
|
|
<div class="hoster">
|
|
<span class="hoster-name">${h.displayedName || h.name}</span>
|
|
${h.quality ? `<span class="hoster-quality">${h.quality}</span>` : ''}
|
|
<div class="hoster-actions">
|
|
<button class="btn-stream" onclick="openInTab(${i}, '${jsEscape(h.link || h.url)}')">▶ Stream</button>
|
|
<button class="btn-download" onclick="addToDownload(${i}, '${jsEscape(h.link || h.url)}', '${jsEscape(entry.title)}')">⬇ Download</button>
|
|
</div>
|
|
</div>`).join('')}
|
|
</div>
|
|
<button class="tab" onclick="loadSite('${state.site.id}')">← Zurück</button>
|
|
`;
|
|
}
|
|
|
|
function jsEscape(s) {
|
|
return (s || '').replace(/'/g, "\\'").replace(/"/g, '\\"');
|
|
}
|
|
|
|
|
|
|
|
function openInTab(idx, url) {
|
|
// Öffnet den Stream in einem neuen Tab
|
|
const link = url || '';
|
|
if (link) {
|
|
window.open(link, '_blank');
|
|
} else {
|
|
alert('Kein Link verfügbar');
|
|
}
|
|
}
|
|
|
|
async function addToDownload(idx, url, title) {
|
|
// Fügt den Stream zur Download-Queue hinzu
|
|
const link = url || '';
|
|
if (!link) {
|
|
alert('Kein Link verfügbar');
|
|
return;
|
|
}
|
|
try {
|
|
const data = await api(`/download?url=${encodeURIComponent(link)}&title=${encodeURIComponent(title)}`);
|
|
if (data.id) {
|
|
alert(`⬇ Download gestartet!\n\nTitel: ${title}\nID: ${data.id}\n\nKlicke oben auf "📥 Downloads" um den Fortschritt zu sehen.`);
|
|
} else if (data.error) {
|
|
alert('Fehler: ' + data.error);
|
|
}
|
|
} catch(e) {
|
|
alert('Fehler beim Starten des Downloads: ' + e.message);
|
|
}
|
|
}
|
|
|
|
async function openSearchResult(idx) {
|
|
const entry = state.entries[idx];
|
|
if (!entry) return;
|
|
|
|
const site = entry._site;
|
|
if (!site) {
|
|
alert('Site nicht gefunden');
|
|
return;
|
|
}
|
|
|
|
// Öffne Link direkt im neuen Tab - lade erst Hosters im Hintergrund
|
|
const params = new URLSearchParams({ url: entry.url || '' });
|
|
|
|
try {
|
|
const data = await api(`/sites/${site.id}/hosters?${params}`);
|
|
const hosters = (data.hosters || []).filter(h => typeof h === 'object');
|
|
|
|
if (hosters.length > 0) {
|
|
const link = hosters[0].link || hosters[0].url;
|
|
window.open(link, '_blank');
|
|
} else {
|
|
alert('Keine Streams gefunden für "' + entry.title + '"');
|
|
}
|
|
} catch(e) {
|
|
alert('Fehler beim Laden der Streams: ' + e.message);
|
|
}
|
|
}
|
|
|
|
async function openSearchStream(idx) {
|
|
// Stream in neuem Tab - bleibt auf der Suchseite
|
|
await openSearchResult(idx);
|
|
}
|
|
|
|
async function addSearchDownload(idx) {
|
|
// Download starten
|
|
const entry = state.entries[idx];
|
|
if (!entry) return;
|
|
|
|
const site = entry._site;
|
|
if (!site) {
|
|
alert('Site nicht gefunden');
|
|
return;
|
|
}
|
|
|
|
const params = new URLSearchParams({ url: entry.url || '' });
|
|
|
|
try {
|
|
const data = await api(`/sites/${site.id}/hosters?${params}`);
|
|
const hosters = (data.hosters || []).filter(h => typeof h === 'object');
|
|
|
|
if (hosters.length > 0) {
|
|
const link = hosters[0].link || hosters[0].url;
|
|
const did = await api(`/download?url=${encodeURIComponent(link)}&title=${encodeURIComponent(entry.title)}`);
|
|
alert('Download gestartet: ' + entry.title);
|
|
showDownloads();
|
|
} else {
|
|
alert('Keine Streams gefunden für "' + entry.title + '"');
|
|
}
|
|
} catch(e) {
|
|
alert('Fehler beim Starten des Downloads: ' + e.message);
|
|
}
|
|
}
|
|
|
|
async function pollDownload(did, idx, title) {
|
|
const btn = document.getElementById(`dlbtn${idx}`);
|
|
const maxWait = 120;
|
|
const start = Date.now();
|
|
async function poll() {
|
|
try {
|
|
const d = await api(`/downloads/${did}`);
|
|
if (d.status === 'complete') {
|
|
btn.textContent = '✅ Fertig';
|
|
downloads[did] = d;
|
|
} else if (d.status === 'error') {
|
|
btn.textContent = '❌ ' + (d.error || 'Fehler');
|
|
btn.title = d.error;
|
|
} else {
|
|
btn.textContent = `📥 ${d.progress}%`;
|
|
if (Date.now() - start < maxWait * 1000) {
|
|
setTimeout(poll, 1000);
|
|
}
|
|
}
|
|
} catch(e) {
|
|
btn.textContent = '❌ API Fehler';
|
|
}
|
|
}
|
|
poll();
|
|
}
|
|
|
|
async function doSearch() {
|
|
const q = document.getElementById('searchInput').value.trim();
|
|
if (!q) return;
|
|
clearDownloadsRefresh();
|
|
state.view = 'search';
|
|
state.entries = [];
|
|
setBC([`Suche: "${q}"`]);
|
|
document.getElementById('content').innerHTML = '<div class="loading">Suche läuft...</div>';
|
|
|
|
// Global search across all sites
|
|
const results = [];
|
|
const errors = [];
|
|
for (const site of state.sites) {
|
|
try {
|
|
const data = await api(`/sites/${site.id}/search?q=${encodeURIComponent(q)}`);
|
|
if (data.entries && data.entries.length) {
|
|
data.entries.forEach(e => {
|
|
e._site = site;
|
|
// Kein Prefix mehr - Titel kommen sauber zurück
|
|
});
|
|
results.push(...data.entries);
|
|
} else if (data.error) {
|
|
errors.push(`${site.name}: ${data.error}`);
|
|
}
|
|
} catch(e) {
|
|
errors.push(`${site.name}: ${e.message}`);
|
|
}
|
|
}
|
|
|
|
// Duplikate zusammenfassen (gleiche Titel nur einmal zeigen)
|
|
const seen = new Set();
|
|
const uniqueResults = [];
|
|
for (const r of results) {
|
|
const key = r.title.toLowerCase().trim();
|
|
if (!seen.has(key)) {
|
|
seen.add(key);
|
|
uniqueResults.push(r);
|
|
}
|
|
}
|
|
|
|
if (results.length === 0) {
|
|
document.getElementById('content').innerHTML = `
|
|
<div class="error">
|
|
<h3>Keine Ergebnisse gefunden</h3>
|
|
<p>Versuche einen anderen Suchbegriff</p>
|
|
${errors.length ? `<details><summary>Fehler</summary><pre>${errors.join('\n')}</pre></details>` : ''}
|
|
</div>`;
|
|
} else {
|
|
state.entries = uniqueResults;
|
|
renderEntries();
|
|
}
|
|
}
|
|
|
|
let _downloadsRefreshId = null;
|
|
|
|
function clearDownloadsRefresh() {
|
|
if (_downloadsRefreshId) {
|
|
clearTimeout(_downloadsRefreshId);
|
|
_downloadsRefreshId = null;
|
|
}
|
|
}
|
|
|
|
async function showDownloads() {
|
|
clearDownloadsRefresh();
|
|
state.view = 'downloads';
|
|
setBC(['Downloads']);
|
|
const el = document.getElementById('content');
|
|
el.innerHTML = '<div id="downloads"><div class="loading">Lade...</div></div>';
|
|
try {
|
|
const [list, dirInfo] = await Promise.all([
|
|
api('/downloads'),
|
|
api('/downloads/dir')
|
|
]);
|
|
state.downloadDir = dirInfo.dir;
|
|
el.innerHTML = `<div id="downloads">
|
|
<h2 class="section-title">📥 Downloads</h2>
|
|
<div class="download-path">Ordner: ${state.downloadDir}</div>
|
|
${list.length ? list.map(d => `
|
|
<div class="download-item ${d.status}">
|
|
<div class="download-info">
|
|
<span class="name">${d.title}</span>
|
|
${d.status === 'downloading' || d.status === 'resolving' ? `<div class="progress-bar"><div class="fill ${d.status}" style="width:${d.progress}%"></div></div>` : ''}
|
|
<span class="status">${d.status === 'complete' ? '✅ Fertig' : d.status === 'error' ? '❌ ' + (d.error || 'Fehler') : d.status === 'cancelled' ? '❌ Abgebrochen' : d.status === 'downloading' ? '⏳ Lädt...' : d.status === 'resolving' ? '🔗 Auflösen...' : d.progress + '%'}</span>
|
|
</div>
|
|
<div class="download-actions">
|
|
${d.status === 'complete' ? `<button class="btn-save" onclick="saveDownload('${d.id}', this)">💾 Speichern</button>` : ''}
|
|
${d.status === 'downloading' || d.status === 'resolving' ? `<button class="btn-cancel" onclick="cancelDownload('${d.id}')">✖ Abbrechen</button>` : ''}
|
|
<button class="btn-delete" onclick="deleteDownload('${d.id}')">🗑 Löschen</button>
|
|
</div>
|
|
</div>`).join('') : '<div class="loading">Keine Downloads</div>'}
|
|
</div>`;
|
|
} catch(e) {
|
|
el.innerHTML = `<div class="error">${e.message}</div>`;
|
|
}
|
|
// Auto-refresh mit cancel-Tracking
|
|
if (state.view === 'downloads') {
|
|
_downloadsRefreshId = setTimeout(() => {
|
|
_downloadsRefreshId = null;
|
|
showDownloads();
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
async function cancelDownload(id) {
|
|
if (!confirm('Download abbrechen?')) return;
|
|
try {
|
|
await api(`/downloads/${id}/cancel`, {method: 'POST'});
|
|
showDownloads();
|
|
} catch(e) {
|
|
alert('Fehler: ' + e.message);
|
|
}
|
|
}
|
|
|
|
async function deleteDownload(id) {
|
|
if (!confirm('Download löschen?')) return;
|
|
try {
|
|
await api(`/downloads/${id}`, {method: 'DELETE'});
|
|
showDownloads();
|
|
} catch(e) {
|
|
alert('Fehler: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function saveDownload(id, btn) {
|
|
// Download starten - Backend löscht danach aus Liste
|
|
btn.disabled = true;
|
|
btn.style.opacity = '0.5';
|
|
location.href = `/api/downloads/${id}/save`;
|
|
}
|
|
|
|
function setBC(parts) {
|
|
const el = document.getElementById('breadcrumb');
|
|
let html = '<span onclick="goHome()">Home</span>';
|
|
let path = '';
|
|
parts.forEach((p, i) => {
|
|
path += '/' + (state.sites.find(s => s.name === p) ? state.sites.find(s => s.name === p).id : '');
|
|
html += ` > <span>${p}</span>`;
|
|
});
|
|
el.innerHTML = html;
|
|
}
|
|
|
|
function goBack() {
|
|
if (navStack.length === 0) {
|
|
goHome();
|
|
return;
|
|
}
|
|
const prev = navStack.pop();
|
|
state.site = prev.site;
|
|
state.entries = prev.entries;
|
|
state.hosters = [];
|
|
state.currentEntry = null;
|
|
setBC([state.site.name]);
|
|
renderEntries();
|
|
}
|
|
|
|
function goHome() {
|
|
clearDownloadsRefresh();
|
|
state.view = 'home';
|
|
state.site = null;
|
|
state.entries = [];
|
|
state.hosters = [];
|
|
state.currentEntry = null;
|
|
navStack = [];
|
|
setBC([]);
|
|
document.getElementById('content').innerHTML = '<div class="loading">Wähle eine Site aus dem Menü oder suche nach einem Film.</div>';
|
|
}
|
|
|
|
// Init
|
|
loadSites();
|
|
goHome();
|
|
</script>
|
|
</body>
|
|
</html>
|