xStream Downloader updates

- Streaming-Site Auflösung für vidara.to (m3u8 via API)
- HTML-Erkennung für Streaming-Seiten
- Dateiname beim Speichern ohne Prefix
- Speichern-Button deaktiviert nach Klick
- Farbiger Fortschrittsbalken (grün/gelb/rot)
- Status-Text statt ungenauer Prozentanzeige
- Auto-Refresh Timeout bei View-Wechsel abgebrochen
- HLS Download mit korrekten Headern (Referer, User-Agent)
- Diverse Bugfixes und Verbesserungen

web/index.html

@@ -42,17 +42,36 @@ header button { padding: 8px 16px; background: #e94560; border: none; border-rad
 .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; }
+.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 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; }
+.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: #e94560; transition: width 0.3s; }
+.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; }
@@ -113,6 +132,7 @@ function renderSidebar() {
 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 = [];
@@ -215,12 +235,15 @@ function renderHosters(entry) {
   }
   el.innerHTML = `
     <div class="hoster-list">
-      <h2 class="section-title">⬇️ "${entry.title}" herunterladen</h2>
+      <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>` : ''}
-        <button id="dlbtn${i}" onclick="resolveAndDownload(${i}, '${jsEscape(h.link || h.url)}', '${jsEscape(entry.title)}')">⬇ Download</button>
+        <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>
@@ -233,8 +256,8 @@ function jsEscape(s) {
 
 
 
-function resolveAndDownload(idx, url, title) {
-  // Öffnet den Link direkt in einem neuen Tab
+function openInTab(idx, url) {
+  // Öffnet den Stream in einem neuen Tab
   const link = url || '';
   if (link) {
     window.open(link, '_blank');
@@ -243,6 +266,25 @@ function resolveAndDownload(idx, url, title) {
   }
 }
 
+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;
@@ -300,6 +342,7 @@ async function pollDownload(did, idx, title) {
 async function doSearch() {
   const q = document.getElementById('searchInput').value.trim();
   if (!q) return;
+  clearDownloadsRefresh();
   state.view = 'search';
   state.entries = [];
   setBC([`Suche: "${q}"`]);
@@ -349,28 +392,81 @@ async function doSearch() {
   }
 }
 
+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 = await api('/downloads');
+    const [list, dirInfo] = await Promise.all([
+      api('/downloads'),
+      api('/downloads/dir')
+    ]);
+    state.downloadDir = dirInfo.dir;
     el.innerHTML = `<div id="downloads">
-      <h2 class="section-title">📥 Aktive Downloads</h2>
+      <h2 class="section-title">📥 Downloads</h2>
+      <div class="download-path">Ordner: ${state.downloadDir}</div>
       ${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 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
-  if (state.view === 'downloads') setTimeout(showDownloads, 3000);
+  // 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 und Button deaktivieren
+  btn.disabled = true;
+  btn.style.opacity = '0.5';
+  location.href = `/api/downloads/${id}/file`;
 }
 
 function setBC(parts) {
@@ -399,6 +495,7 @@ function goBack() {
 }
 
 function goHome() {
+  clearDownloadsRefresh();
   state.view = 'home';
   state.site = null;
   state.entries = [];