290 lines
12 KiB
HTML
290 lines
12 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; }
|
|
.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; }
|
|
.hoster-name { flex: 1; font-weight: 600; }
|
|
.hoster-quality { color: #e94560; font-size: 0.8rem; }
|
|
.hoster button { padding: 6px 16px; background: #0f3460; border: 1px solid #e94560; border-radius: 6px; color: #e94560; cursor: pointer; font-size: 0.85rem; }
|
|
.hoster button:hover { background: #e94560; color: white; }
|
|
.hoster button.downloading { background: #e94560; color: white; cursor: not-allowed; }
|
|
#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: #e94560; transition: width 0.3s; }
|
|
.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 = {};
|
|
|
|
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');
|
|
state.sites = state.sites.map(s => ({ ...s, id: s.identifier }));
|
|
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;
|
|
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;
|
|
}
|
|
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>` : ''}
|
|
${e.quality ? `<div class="card-meta">${e.quality}</div>` : ''}
|
|
</div>
|
|
</div>`).join('')}</div>`;
|
|
}
|
|
|
|
async function selectEntry(idx) {
|
|
const entry = state.entries[idx];
|
|
state.currentEntry = entry;
|
|
state.hosters = [];
|
|
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({ entryUrl: 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>`;
|
|
}
|
|
}
|
|
|
|
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}" herunterladen</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>` : ''}
|
|
<button id="dlbtn${i}" onclick="resolveAndDownload(${i}, '${jsEscape(h.link || h.url)}', '${jsEscape(entry.title)}')">⬇ Download</button>
|
|
</div>`).join('')}
|
|
</div>
|
|
<button class="tab" onclick="loadSite('${state.site.id}')">← Zurück</button>
|
|
`;
|
|
}
|
|
|
|
function jsEscape(s) {
|
|
return (s || '').replace(/'/g, "\\'").replace(/"/g, '\\"');
|
|
}
|
|
|
|
async function resolveAndDownload(idx, url, title) {
|
|
const btn = document.getElementById(`dlbtn${idx}`);
|
|
btn.textContent = '⏳ Warte auf URL...';
|
|
btn.classList.add('downloading');
|
|
try {
|
|
const data = await api(`/resolve?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}&download=true`);
|
|
if (data.download_id) {
|
|
downloads[data.download_id] = { title, progress: 0, status: 'queued' };
|
|
btn.textContent = '📥 queued';
|
|
pollDownload(data.download_id, idx, title);
|
|
} else if (data.resolved) {
|
|
window.open(data.resolved, '_blank');
|
|
btn.textContent = '✅ Stream';
|
|
}
|
|
} catch(e) {
|
|
btn.textContent = '❌ Fehler';
|
|
btn.title = 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;
|
|
state.view = 'search';
|
|
state.entries = [];
|
|
setBC([`Suche: "${q}"`]);
|
|
document.getElementById('content').innerHTML = '<div class="loading">Suche läuft...</div>';
|
|
// Try global search across all sites by searching each
|
|
const results = [];
|
|
for (const site of state.sites) {
|
|
try {
|
|
const data = await api(`/sites/${site.id}/entries?search=${encodeURIComponent(q)}`);
|
|
if (data.entries && data.entries.length) {
|
|
data.entries.forEach(e => e._site = site);
|
|
results.push(...data.entries);
|
|
}
|
|
} catch(e) {}
|
|
}
|
|
state.entries = results;
|
|
renderEntries();
|
|
}
|
|
|
|
async function showDownloads() {
|
|
state.view = 'downloads';
|
|
setBC(['Downloads']);
|
|
const el = document.getElementById('content');
|
|
el.innerHTML = '<div id="downloads"><div class="loading">Lade...</div></div>';
|
|
try {
|
|
const list = await api('/downloads');
|
|
el.innerHTML = `<div id="downloads">
|
|
<h2 class="section-title">📥 Aktive Downloads</h2>
|
|
${list.length ? list.map(d => `
|
|
<div class="download-item">
|
|
<span class="name">${d.title}</span>
|
|
<div class="progress-bar"><div class="fill" style="width:${d.progress}%"></div></div>
|
|
<span class="status">${d.status === 'complete' ? '✅' : d.status === 'error' ? '❌' : d.progress + '%'}</span>
|
|
${d.status === 'complete' ? `<button class="tab" onclick="location.href='/api/downloads/${d.id}/file'">💾 Speichern</button>` : ''}
|
|
</div>`).join('') : '<div class="loading">Keine Downloads</div>'}
|
|
</div>`;
|
|
} catch(e) {
|
|
el.innerHTML = `<div class="error">${e.message}</div>`;
|
|
}
|
|
// Auto-refresh
|
|
if (state.view === 'downloads') setTimeout(showDownloads, 3000);
|
|
}
|
|
|
|
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 goHome() {
|
|
state.view = 'home';
|
|
state.site = null;
|
|
state.entries = [];
|
|
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>
|