7d82f70ca3
When a live recording gets cut short by a network blip or a
streamlink subprocess that dies mid-stream, the recording would
end with whatever it had captured up to that point. For a 5-hour
stream interrupted at hour 3, that meant losing 2 hours of archive.
downloadLiveStream now wraps the streamlink call in a resume loop.
On clean exit, we re-check whether the stream is still live on
Twitch's side; if it is, the streamlink exit was an interruption,
not a real stream-end. The recording continues into a new file
("..._part2.mp4", "..._part3.mp4", ...) and both parts get attached
to item.outputFiles so the user sees them as one logical recording.
Guard rails to keep the loop from misbehaving:
- Stream-still-live check before each resume. If the streamer
actually ended their broadcast, we finalize. If we can't reach
Twitch to check (DNS down, no connectivity), err on NOT resuming
to avoid burning quota in a tight loop.
- Skip resume on suspiciously short parts (<30s). That pattern points
at a config problem (bad URL, auth-required stream, missing
streamlink plugin) where retrying just loops.
- Cap at 5 resume attempts per recording. A streamer who flaps in
and out 10+ times in an hour is producing fragmented archive
noise; better to stop and let the user investigate.
- Skip resume on zero-byte parts. Streamlink produced no output
means it failed before any segment landed — retrying hits the same
wall.
- Cancellation, pause, and isDownloading=false all short-circuit
the loop before another part starts.
Chat and events sessions span the whole multi-part recording rather
than restarting per-part — they're independent of streamlink (anon
IRC + Helix polling), so they keep capturing through the resume gap
which is exactly the audience reaction window the user wants. A new
"recording_resume" event type lands in .events.jsonl so the events
viewer shows where each gap happened.
The progress meta line was rewritten to accumulate bytes across
parts. Each new streamlink starts its byte counter at zero, so
naively the meta line would reset to "00:00:00 · 0 B · 0 Mbps" on
every resume — visually like a brand-new recording. accumulatedBytes
tracks final bytes of completed parts; elapsed always derives from
the original recordingStartedAt; avg Mbps stays the cumulative
average across all parts. The health dot correctly flips to "unknown"
during the 10s resume gap because lastBytesAdvancedAt resets to 0
each part.
Settings toggle (default on). When off, behavior is identical to
4.6.12 — single part, no resume.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
763 lines
57 KiB
HTML
763 lines
57 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:;">
|
|
<title>Twitch VOD Manager</title>
|
|
<link rel="stylesheet" href="./styles.css">
|
|
</head>
|
|
<body class="theme-twitch">
|
|
<div class="update-banner" id="updateBanner">
|
|
<span id="updateText">Neue Version verfügbar!</span>
|
|
<div id="updateProgress" style="display: none; flex: 1; margin: 0 15px;">
|
|
<div style="background: rgba(0,0,0,0.3); border-radius: 4px; height: 8px; overflow: hidden;">
|
|
<div id="updateProgressBar" style="background: white; height: 100%; width: 0%; transition: width 0.3s;"></div>
|
|
</div>
|
|
</div>
|
|
<button id="updateButton" onclick="downloadUpdate()">Jetzt herunterladen</button>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="updateModal" onclick="handleUpdateModalOverlayClick(event)">
|
|
<div class="modal update-modal">
|
|
<button class="modal-close" onclick="dismissUpdateModal()">x</button>
|
|
<div class="update-modal-eyebrow" id="updateModalEyebrow">Updates</div>
|
|
<h2 id="updateModalTitle">Update verfugbar</h2>
|
|
<p class="update-modal-message" id="updateModalMessage">Version 0.0.0 ist verfugbar. Jetzt herunterladen?</p>
|
|
<div class="update-modal-meta" id="updateModalMeta" style="display:none;"></div>
|
|
|
|
<div class="update-changelog-card" id="updateChangelogCard" style="display:none;">
|
|
<div class="update-changelog-header">
|
|
<span class="update-changelog-label" id="updateChangelogLabel">Changelog</span>
|
|
<button type="button" class="update-changelog-toggle" id="updateChangelogToggle" onclick="toggleUpdateChangelog()">Changelog anzeigen</button>
|
|
</div>
|
|
<div class="update-changelog-panel" id="updateChangelogPanel" hidden>
|
|
<div class="update-changelog-content" id="updateChangelogContent"></div>
|
|
<p class="update-changelog-empty" id="updateChangelogEmpty" hidden>Kein Changelog verfugbar.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions update-modal-actions">
|
|
<button class="btn-secondary" id="updateModalDismissBtn" type="button" onclick="dismissUpdateModal()">Nein</button>
|
|
<button class="btn-secondary" id="updateModalSkipBtn" type="button" onclick="skipUpdateVersion()">Diese Version ueberspringen</button>
|
|
<button class="btn-primary" id="updateModalConfirmBtn" type="button" onclick="confirmUpdateModal()">Ja, herunterladen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clip Dialog Modal -->
|
|
<div class="modal-overlay" id="clipModal">
|
|
<div class="modal" style="background: #2b2b2b; max-width: 500px;">
|
|
<button class="modal-close" onclick="closeClipDialog()">x</button>
|
|
<h2 style="color: #E5A00D; text-align: center; margin-bottom: 20px;" id="clipDialogTitle">VOD zuschneiden</h2>
|
|
|
|
<!-- Start Zeit mit Slider -->
|
|
<div style="margin-bottom: 15px;">
|
|
<label id="clipDialogStartLabel" style="display: block; margin-bottom: 5px;">Start:</label>
|
|
<input type="range" id="clipStartSlider" min="0" max="100" value="0"
|
|
style="width: 100%; height: 6px; -webkit-appearance: none; background: #1a1a1a; border-radius: 3px; cursor: pointer;"
|
|
oninput="updateFromSlider('start')">
|
|
<div style="display: flex; align-items: center; gap: 10px; margin-top: 8px;">
|
|
<label id="clipDialogStartTimeLabel" style="color: #888;">Startzeit (HH:MM:SS):</label>
|
|
<input type="text" id="clipStartTime" value="00:00:00"
|
|
style="width: 100px; background: #333; border: 1px solid #444; border-radius: 4px; padding: 6px 10px; color: white; font-family: monospace; text-align: center;"
|
|
onchange="updateFromInput('start')">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- End Zeit mit Slider -->
|
|
<div style="margin-bottom: 15px;">
|
|
<label id="clipDialogEndLabel" style="display: block; margin-bottom: 5px;">Ende:</label>
|
|
<input type="range" id="clipEndSlider" min="0" max="100" value="60"
|
|
style="width: 100%; height: 6px; -webkit-appearance: none; background: #1a1a1a; border-radius: 3px; cursor: pointer;"
|
|
oninput="updateFromSlider('end')">
|
|
<div style="display: flex; align-items: center; gap: 10px; margin-top: 8px;">
|
|
<label id="clipDialogEndTimeLabel" style="color: #888;">Endzeit (HH:MM:SS):</label>
|
|
<input type="text" id="clipEndTime" value="00:01:00"
|
|
style="width: 100px; background: #333; border: 1px solid #444; border-radius: 4px; padding: 6px 10px; color: white; font-family: monospace; text-align: center;"
|
|
onchange="updateFromInput('end')">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dauer Anzeige -->
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|
<span id="clipDialogDurationLabel" style="color: #888;">Dauer: </span>
|
|
<span id="clipDurationDisplay" style="color: #00c853;">00:01:00</span>
|
|
</div>
|
|
|
|
<!-- Teil Nummer -->
|
|
<div style="margin-bottom: 15px;">
|
|
<label id="clipDialogPartLabel" style="display: block; margin-bottom: 8px;">Start Part-Nummer (optional, fur Fortsetzung):</label>
|
|
<input type="text" id="clipStartPart" placeholder="z.B. 42"
|
|
style="width: 100px; background: #333; border: 1px solid #444; border-radius: 4px; padding: 8px 12px; color: white;"
|
|
oninput="updateFilenameExamples()">
|
|
<div id="clipDialogPartHint" style="color: #888; font-size: 12px; margin-top: 5px;">Leer lassen = Teil 1</div>
|
|
</div>
|
|
|
|
<!-- Dateinamen Format -->
|
|
<div style="margin-bottom: 20px;">
|
|
<label id="clipDialogFormatLabel" style="display: block; margin-bottom: 10px;">Dateinamen-Format:</label>
|
|
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 8px;">
|
|
<input type="radio" name="filenameFormat" value="simple" checked onchange="updateFilenameExamples()"
|
|
style="width: 18px; height: 18px; accent-color: #9146FF;">
|
|
<span id="formatSimple" style="color: #aaa;">01.02.2026_1.mp4 (Standard)</span>
|
|
</label>
|
|
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 8px;">
|
|
<input type="radio" name="filenameFormat" value="timestamp" onchange="updateFilenameExamples()"
|
|
style="width: 18px; height: 18px; accent-color: #9146FF;">
|
|
<span id="formatTimestamp" style="color: #aaa;">01.02.2026_CLIP_00-00-00_1.mp4 (mit Zeitstempel)</span>
|
|
</label>
|
|
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 8px;">
|
|
<input type="radio" name="filenameFormat" value="parts" onchange="updateFilenameExamples()"
|
|
style="width: 18px; height: 18px; accent-color: #9146FF;">
|
|
<span id="formatParts" style="color: #aaa;">01.02.2026_Part01.mp4 (Parts-Format)</span>
|
|
</label>
|
|
<label style="display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 10px;">
|
|
<input type="radio" name="filenameFormat" value="template" onchange="updateFilenameExamples()"
|
|
style="width: 18px; height: 18px; accent-color: #9146FF;">
|
|
<span id="formatTemplate" style="color: #aaa;">{date}_{part}.mp4 (benutzerdefiniert)</span>
|
|
</label>
|
|
|
|
<div id="clipFilenameTemplateWrap" style="display:none; margin-top: 10px;">
|
|
<input type="text" id="clipFilenameTemplate" value="{date}_{part}.mp4"
|
|
placeholder="{date}_{part}.mp4"
|
|
style="width: 100%; background: #333; border: 1px solid #444; border-radius: 4px; padding: 8px 12px; color: white; font-family: monospace;"
|
|
oninput="updateFilenameExamples()">
|
|
<div id="clipTemplateHelp" style="color: #888; font-size: 12px; margin-top: 6px;">Platzhalter: {title} {id} {channel} {date} {part} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div>
|
|
<div id="clipTemplateLint" style="color: #8bc34a; font-size: 12px; margin-top: 4px;">Template-Check: OK</div>
|
|
<button class="btn-secondary" id="clipTemplateGuideBtn" style="margin-top: 8px;" onclick="openTemplateGuide('clip')">Template Guide</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Button -->
|
|
<div style="text-align: center;">
|
|
<button class="btn-primary" id="clipDialogConfirmBtn" style="background: #00c853; padding: 12px 30px; border: none; border-radius: 4px; color: white; font-weight: 600; cursor: pointer;" onclick="confirmClipDialog()">Zur Queue hinzufugen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Events Viewer Modal -->
|
|
<div class="modal-overlay" id="eventsViewerModal">
|
|
<div class="modal" style="max-width: 700px; max-height: 80vh; display:flex; flex-direction:column;">
|
|
<button class="modal-close" onclick="closeEventsViewer()">x</button>
|
|
<h2 id="eventsViewerTitle" style="margin-top:0;">Stream events</h2>
|
|
<div id="eventsViewerStatus" style="color:var(--text-secondary); font-size:12px; margin-bottom:8px;"></div>
|
|
<div id="eventsViewerList" style="flex:1; overflow-y:auto; background: var(--bg-main); border:1px solid var(--border-soft); border-radius:6px; padding:8px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Replay Viewer Modal -->
|
|
<div class="modal-overlay" id="chatViewerModal">
|
|
<div class="modal" style="max-width: 800px; height: 80vh; display:flex; flex-direction:column;">
|
|
<button class="modal-close" onclick="closeChatViewer()">x</button>
|
|
<h2 id="chatViewerTitle" style="margin-top:0;">Chat replay</h2>
|
|
<div class="form-row" style="margin-bottom:8px; gap:8px; flex-wrap:wrap; align-items:center;">
|
|
<input type="text" id="chatViewerFilter" placeholder="Filter..." oninput="onChatViewerFilterChange()" style="flex:1; min-width:160px; background: var(--bg-card); border:1px solid var(--border-soft); border-radius:6px; padding:6px 10px; color:var(--text); font-size:13px;">
|
|
<span id="chatViewerStatus" style="color:var(--text-secondary); font-size:12px;"></span>
|
|
</div>
|
|
<div id="chatViewerList" style="flex:1; overflow-y:auto; background: var(--bg-main); border:1px solid var(--border-soft); border-radius:6px; padding:8px; font-family: 'Consolas', monospace; font-size: 12px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Template Guide Modal -->
|
|
<div class="modal-overlay" id="templateGuideModal">
|
|
<div class="modal template-guide-modal">
|
|
<button class="modal-close" onclick="closeTemplateGuide()">x</button>
|
|
<h2 id="templateGuideTitle">Template Guide</h2>
|
|
<p id="templateGuideIntro" class="template-guide-intro">Nutze Variablen fur Dateinamen und prufe das Ergebnis als Live-Vorschau.</p>
|
|
|
|
<div class="template-guide-actions">
|
|
<button class="btn-secondary" id="templateGuideUseVod" onclick="setTemplateGuidePreset('vod')">VOD Template</button>
|
|
<button class="btn-secondary" id="templateGuideUseParts" onclick="setTemplateGuidePreset('parts')">VOD Part Template</button>
|
|
<button class="btn-secondary" id="templateGuideUseClip" onclick="setTemplateGuidePreset('clip')">Clip Template</button>
|
|
</div>
|
|
|
|
<label id="templateGuideTemplateLabel" class="template-guide-label">Template</label>
|
|
<input type="text" id="templateGuideInput" class="template-guide-input" oninput="updateTemplateGuidePreview()" placeholder="{title}.mp4">
|
|
|
|
<div class="template-guide-preview-box">
|
|
<div class="template-guide-preview-label" id="templateGuideOutputLabel">Live Vorschau</div>
|
|
<div id="templateGuideOutput" class="template-guide-output">-</div>
|
|
<div id="templateGuideContext" class="template-guide-context"></div>
|
|
</div>
|
|
|
|
<h3 id="templateGuideVarsTitle" class="template-guide-vars-title">Verfugbare Variablen</h3>
|
|
<div class="template-guide-table-wrap">
|
|
<table class="template-guide-table">
|
|
<thead>
|
|
<tr>
|
|
<th id="templateGuideVarCol">Variable</th>
|
|
<th id="templateGuideDescCol">Beschreibung</th>
|
|
<th id="templateGuideExampleCol">Beispiel</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="templateGuideBody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="template-guide-footer">
|
|
<button class="btn-secondary" id="templateGuideCloseBtn" onclick="closeTemplateGuide()">Schliessen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="app">
|
|
<aside class="sidebar">
|
|
<div class="logo">
|
|
<svg viewBox="0 0 24 24"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>
|
|
<span id="logoText">Twitch VOD Manager</span>
|
|
</div>
|
|
|
|
<nav class="nav">
|
|
<div class="nav-item active" data-tab="vods" onclick="showTab('vods')">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM9 8l7 4-7 4V8z"/></svg>
|
|
<span id="navVodsText">Twitch VODs</span>
|
|
</div>
|
|
<div class="nav-item" data-tab="clips" onclick="showTab('clips')">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>
|
|
<span id="navClipsText">Twitch Clips</span>
|
|
</div>
|
|
<div class="nav-item" data-tab="cutter" onclick="showTab('cutter')">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3h-3z"/></svg>
|
|
<span id="navCutterText">Video schneiden</span>
|
|
</div>
|
|
<div class="nav-item" data-tab="merge" onclick="showTab('merge')">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 20.41L18.41 19 15 15.59 13.59 17 17 20.41zM7.5 8H11v5.59L5.59 19 7 20.41l6-6V8h3.5L12 3.5 7.5 8z"/></svg>
|
|
<span id="navMergeText">Videos zusammenfugen</span>
|
|
</div>
|
|
<div class="nav-item" data-tab="settings" onclick="showTab('settings')">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
|
|
<span id="navSettingsText">Einstellungen</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="section-title" id="streamerSectionTitle" style="display:flex; align-items:center; gap:6px; justify-content:space-between;">
|
|
<span id="streamerSectionTitleText">Streamer</span>
|
|
<button id="btnStreamerBulkRemove" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove" style="display:none; background:transparent; border:1px solid var(--border-soft); border-radius:4px; padding:2px 8px; color:var(--text-secondary); font-size:11px; cursor:pointer;">x</button>
|
|
</div>
|
|
<input type="text" id="streamerListFilter" placeholder="Filter..." oninput="onStreamerListFilterChange()" style="display:none; width:calc(100% - 16px); margin:0 8px 8px; background:var(--bg-card); border:1px solid var(--border-soft); border-radius:4px; padding:4px 8px; color:var(--text); font-size:12px;">
|
|
<div class="streamers" id="streamerList"></div>
|
|
|
|
<div class="queue-section">
|
|
<div class="queue-header">
|
|
<span class="queue-title" id="queueTitleText">Warteschlange</span>
|
|
<span class="queue-count" id="queueCount">0</span>
|
|
</div>
|
|
<div class="queue-list" id="queueList"></div>
|
|
<div class="queue-actions">
|
|
<button class="btn btn-start" id="btnStart" onclick="toggleDownload()">Start</button>
|
|
<button class="btn btn-merge-group" id="btnMergeGroup" onclick="createMergeGroupFromSelection()" style="display:none">Merge & Split</button>
|
|
<button class="btn btn-retry" id="btnRetryFailed" onclick="retryFailedDownloads()" title="Nur fehlgeschlagene Downloads erneut starten">Wiederholen</button>
|
|
<button class="btn btn-clear" id="btnClear" onclick="clearCompleted()">Leeren</button>
|
|
</div>
|
|
</div>
|
|
<div class="stats-bar" id="statsBar"></div>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<header class="header">
|
|
<h1 id="pageTitle">VODs</h1>
|
|
<div class="header-actions">
|
|
<div class="header-search">
|
|
<input type="text" id="newStreamer" placeholder="Streamer hinzufugen..." onkeypress="if(event.key==='Enter')addStreamer()">
|
|
<button onclick="addStreamer()">+</button>
|
|
</div>
|
|
<button class="btn-icon" onclick="refreshVODs()">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
|
|
<span id="refreshText">Aktualisieren</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content">
|
|
<!-- VODs Tab -->
|
|
<div class="tab-content active" id="vodsTab">
|
|
<div class="vod-filter-row" style="display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap;">
|
|
<input type="text" id="vodFilterInput" placeholder="Filter VODs..." oninput="onVodFilterInput()" style="flex:1; min-width:180px; background: var(--bg-card); border:1px solid var(--border-soft); border-radius:6px; padding:8px 12px; color: var(--text); font-size:13px;">
|
|
<button id="vodFilterClearBtn" onclick="clearVodFilter()" title="Clear filter" style="display:none; background:transparent; border:1px solid var(--border-soft); border-radius:6px; padding:8px 12px; color: var(--text-secondary); cursor:pointer;">x</button>
|
|
<label id="vodSortLabel" for="vodSortSelect" style="color: var(--text-secondary); font-size:12px; margin-left:8px;">Sort:</label>
|
|
<select id="vodSortSelect" onchange="onVodSortChange()" style="background: var(--bg-card); border:1px solid var(--border-soft); border-radius:6px; padding:7px 10px; color: var(--text); font-size:13px;">
|
|
<option value="date_desc">Newest first</option>
|
|
<option value="date_asc">Oldest first</option>
|
|
<option value="views_desc">Most viewed</option>
|
|
<option value="duration_desc">Longest first</option>
|
|
<option value="duration_asc">Shortest first</option>
|
|
</select>
|
|
<span id="vodFilterCount" style="color: var(--text-secondary); font-size:12px; min-width:80px;"></span>
|
|
<label id="vodHideDownloadedLabel" style="display:flex; align-items:center; gap:6px; color: var(--text-secondary); font-size:12px; cursor:pointer; user-select:none;" title="">
|
|
<input type="checkbox" id="vodHideDownloadedToggle" onchange="onVodHideDownloadedChange()" style="accent-color: var(--accent); cursor:pointer;">
|
|
<span id="vodHideDownloadedText">Hide downloaded</span>
|
|
</label>
|
|
</div>
|
|
<div id="vodBulkBar" class="vod-bulk-bar" style="display:none; align-items:center; gap:10px; padding:8px 12px; background: rgba(145, 70, 255, 0.12); border:1px solid rgba(145, 70, 255, 0.4); border-radius:6px; margin-bottom:12px; flex-wrap:wrap;">
|
|
<span id="vodBulkCount" style="color: var(--text); font-size:13px; font-weight:600;">0 selected</span>
|
|
<span style="flex:1;"></span>
|
|
<button id="vodBulkAddBtn" type="button" onclick="bulkAddSelectedVodsToQueue()" style="background:var(--accent); border:none; border-radius:6px; padding:6px 14px; color:#fff; font-size:13px; font-weight:600; cursor:pointer;">+ Queue</button>
|
|
<button id="vodBulkMarkBtn" type="button" onclick="bulkMarkSelectedDownloaded(true)" style="background:transparent; border:1px solid var(--border-soft); border-radius:6px; padding:6px 12px; color:var(--text-secondary); font-size:13px; cursor:pointer;">Mark as downloaded</button>
|
|
<button id="vodBulkUnmarkBtn" type="button" onclick="bulkMarkSelectedDownloaded(false)" style="background:transparent; border:1px solid var(--border-soft); border-radius:6px; padding:6px 12px; color:var(--text-secondary); font-size:13px; cursor:pointer;">Unmark</button>
|
|
<button id="vodBulkClearBtn" type="button" onclick="clearVodSelection()" style="background:transparent; border:1px solid var(--border-soft); border-radius:6px; padding:6px 12px; color:var(--text-secondary); font-size:13px; cursor:pointer;">Clear</button>
|
|
</div>
|
|
<div class="vod-grid" id="vodGrid">
|
|
<div class="empty-state">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14l-5-4 5-4v8zm2-8l5 4-5 4V9z"/></svg>
|
|
<h3>Keine VODs</h3>
|
|
<p>Wahle einen Streamer aus der Liste oder fuge einen neuen hinzu.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clips Tab -->
|
|
<div class="tab-content" id="clipsTab">
|
|
<div class="clip-input">
|
|
<h2 id="clipsHeading">Twitch Clip-Download</h2>
|
|
<input type="text" id="clipUrl" placeholder="https://clips.twitch.tv/... oder https://www.twitch.tv/.../clip/...">
|
|
<button class="btn-primary" onclick="downloadClip()" id="btnClip">Clip herunterladen</button>
|
|
<div class="clip-status" id="clipStatus"></div>
|
|
</div>
|
|
|
|
<div class="settings-card" style="max-width: 600px; margin: 20px auto;">
|
|
<h3 id="clipsInfoTitle">Info</h3>
|
|
<p style="color: var(--text-secondary); line-height: 1.6; white-space: pre-line;" id="clipsInfoText">
|
|
Unterstutzte Formate:
|
|
- https://clips.twitch.tv/ClipName
|
|
- https://www.twitch.tv/streamer/clip/ClipName
|
|
|
|
Clips werden im Download-Ordner unter "Clips/StreamerName/" gespeichert.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video Cutter Tab -->
|
|
<div class="tab-content" id="cutterTab">
|
|
<div class="cutter-container">
|
|
<div class="settings-card">
|
|
<h3 id="cutterSelectTitle">Video auswahlen</h3>
|
|
<div class="form-row">
|
|
<input type="text" id="cutterFilePath" readonly placeholder="Keine Datei ausgewahlt...">
|
|
<button class="btn-secondary" id="cutterBrowseBtn" onclick="selectCutterVideo()">Durchsuchen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="video-preview" id="cutterPreview">
|
|
<div class="placeholder">
|
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="currentColor" style="opacity:0.3"><path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM9 8l7 4-7 4V8z"/></svg>
|
|
<p style="margin-top:10px">Video auswahlen um Vorschau zu sehen</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cutter-info" id="cutterInfo" style="display:none">
|
|
<div class="cutter-info-item">
|
|
<span class="cutter-info-label" id="cutterInfoDurationLabel">Dauer</span>
|
|
<span class="cutter-info-value" id="infoDuration">--:--:--</span>
|
|
</div>
|
|
<div class="cutter-info-item">
|
|
<span class="cutter-info-label" id="cutterInfoResolutionLabel">Aufloesung</span>
|
|
<span class="cutter-info-value" id="infoResolution">----x----</span>
|
|
</div>
|
|
<div class="cutter-info-item">
|
|
<span class="cutter-info-label" id="cutterInfoFpsLabel">FPS</span>
|
|
<span class="cutter-info-value" id="infoFps">--</span>
|
|
</div>
|
|
<div class="cutter-info-item">
|
|
<span class="cutter-info-label" id="cutterInfoSelectionLabel">Auswahl</span>
|
|
<span class="cutter-info-value" id="infoSelection">--:--:--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-container" id="timelineContainer" style="display:none">
|
|
<div class="timeline" id="timeline" onclick="seekTimeline(event)">
|
|
<div class="timeline-selection" id="timelineSelection"></div>
|
|
<div class="timeline-current" id="timelineCurrent"></div>
|
|
</div>
|
|
|
|
<div class="time-inputs">
|
|
<div class="time-input-group">
|
|
<label id="cutterStartLabel">Start:</label>
|
|
<input type="text" id="startTime" value="00:00:00" onchange="updateTimeFromInput()">
|
|
</div>
|
|
<div class="time-input-group">
|
|
<label id="cutterEndLabel">Ende:</label>
|
|
<input type="text" id="endTime" value="00:00:00" onchange="updateTimeFromInput()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress-container" id="cutProgress">
|
|
<div class="progress-bar">
|
|
<div class="progress-bar-fill" id="cutProgressBar"></div>
|
|
</div>
|
|
<div class="progress-text" id="cutProgressText">0%</div>
|
|
</div>
|
|
|
|
<div class="cutter-actions">
|
|
<button class="btn-primary" id="btnCut" onclick="startCutting()" disabled>Schneiden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Merge Tab -->
|
|
<div class="tab-content" id="mergeTab">
|
|
<div class="merge-container">
|
|
<div class="settings-card">
|
|
<h3 id="mergeTitle">Videos zusammenfugen</h3>
|
|
<p style="color: var(--text-secondary); margin-bottom: 15px;" id="mergeDesc">
|
|
Wahle mehrere Videos aus um sie zu einem Video zusammenzufugen.
|
|
Die Reihenfolge kann per Drag & Drop geandert werden.
|
|
</p>
|
|
<button class="btn-secondary" id="mergeAddBtn" onclick="addMergeFiles()">+ Videos hinzufugen</button>
|
|
</div>
|
|
|
|
<div class="file-list" id="mergeFileList">
|
|
<div class="empty-state" style="padding: 40px 20px;">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" style="opacity:0.3"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
|
<p style="margin-top:10px">Keine Videos ausgewahlt</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress-container" id="mergeProgress">
|
|
<div class="progress-bar">
|
|
<div class="progress-bar-fill" id="mergeProgressBar"></div>
|
|
</div>
|
|
<div class="progress-text" id="mergeProgressText">0%</div>
|
|
</div>
|
|
|
|
<div class="merge-actions">
|
|
<button class="btn-primary" id="btnMerge" onclick="startMerging()" disabled>Zusammenfugen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div class="tab-content" id="settingsTab">
|
|
<div class="settings-card">
|
|
<h3 id="designTitle">Design</h3>
|
|
<div class="form-group">
|
|
<label id="themeLabel">Theme</label>
|
|
<select id="themeSelect" onchange="changeTheme(this.value)">
|
|
<option value="twitch">Twitch</option>
|
|
<option value="discord">Discord</option>
|
|
<option value="youtube">YouTube</option>
|
|
<option value="apple">Apple</option>
|
|
<option value="light" id="themeLightOption">Light</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label id="languageLabel">Sprache</label>
|
|
<div class="language-picker" id="languagePicker">
|
|
<button type="button" class="lang-option" id="langOptionDe" onclick="selectLanguageOption('de')" aria-pressed="false">
|
|
<span class="flag-icon flag-de" aria-hidden="true"></span>
|
|
<span id="languageDeText">Deutsch</span>
|
|
</button>
|
|
<button type="button" class="lang-option" id="langOptionEn" onclick="selectLanguageOption('en')" aria-pressed="false">
|
|
<span class="flag-icon flag-en" aria-hidden="true"></span>
|
|
<span id="languageEnText">English</span>
|
|
</button>
|
|
</div>
|
|
<select id="languageSelect" onchange="changeLanguage(this.value)" style="display:none">
|
|
<option value="de">de</option>
|
|
<option value="en">en</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<h3 id="apiTitle">Twitch API</h3>
|
|
<p id="apiHelpText" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">
|
|
<span id="apiHelpIntro">Du brauchst eine Client-ID und ein Client-Secret von Twitch.</span>
|
|
<a href="#" id="apiHelpLink" onclick="event.preventDefault(); openTwitchDevConsole()" style="color: var(--accent); text-decoration: underline; cursor: pointer;">dev.twitch.tv/console/apps</a>
|
|
</p>
|
|
<div class="form-group">
|
|
<label id="clientIdLabel">Client ID</label>
|
|
<input type="text" id="clientId" placeholder="Twitch Client ID">
|
|
</div>
|
|
<div class="form-group">
|
|
<label id="clientSecretLabel">Client Secret</label>
|
|
<input type="password" id="clientSecret" placeholder="Twitch Client Secret">
|
|
</div>
|
|
<button class="btn-primary" id="saveSettingsBtn" onclick="saveSettings()">Speichern & Verbinden</button>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<h3 id="downloadSettingsTitle">Download-Einstellungen</h3>
|
|
<div class="form-group">
|
|
<label id="storageLabel">Speicherort</label>
|
|
<div class="form-row">
|
|
<input type="text" id="downloadPath" readonly>
|
|
<button class="btn-secondary" onclick="selectFolder()">Ordner</button>
|
|
<button class="btn-secondary" id="openFolderBtn" onclick="openFolder()">Offnen</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label id="modeLabel">Download-Modus</label>
|
|
<select id="downloadMode">
|
|
<option value="full" id="modeFullText">Ganzes VOD</option>
|
|
<option value="parts" id="modePartsText">In Teile splitten</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label id="partMinutesLabel">Teil-Lange (Minuten)</label>
|
|
<input type="number" id="partMinutes" value="120" min="10" max="480">
|
|
</div>
|
|
<div class="form-group">
|
|
<label id="parallelDownloadsLabel">Parallele Downloads</label>
|
|
<select id="parallelDownloads">
|
|
<option value="1" id="parallelDownloads1">1 (Standard)</option>
|
|
<option value="2" id="parallelDownloads2">2 (Parallel)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label id="streamlinkQualityLabel">Stream-Qualitaet</label>
|
|
<select id="streamlinkQuality">
|
|
<option value="best" id="streamlinkQualityBest">Best (Standard)</option>
|
|
<option value="source" id="streamlinkQualitySource">Source (Original)</option>
|
|
<option value="1080p60" id="streamlinkQuality1080p60">1080p60</option>
|
|
<option value="720p60" id="streamlinkQuality720p60">720p60</option>
|
|
<option value="720p" id="streamlinkQuality720p">720p</option>
|
|
<option value="480p" id="streamlinkQuality480p">480p</option>
|
|
<option value="audio_only" id="streamlinkQualityAudio">Audio only</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label id="performanceModeLabel">Performance-Profil</label>
|
|
<select id="performanceMode">
|
|
<option value="stability" id="performanceModeStability">Max Stabilitat</option>
|
|
<option value="balanced" id="performanceModeBalanced">Ausgewogen</option>
|
|
<option value="speed" id="performanceModeSpeed">Max Geschwindigkeit</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label style="display:flex; align-items:center; gap:8px;">
|
|
<input type="checkbox" id="smartSchedulerToggle" checked>
|
|
<span id="smartSchedulerLabel">Smart Queue Scheduler aktivieren</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="duplicatePreventionToggle" checked>
|
|
<span id="duplicatePreventionLabel">Duplikate in Queue verhindern</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="persistQueueToggle" checked>
|
|
<span id="persistQueueLabel">Queue zwischen App-Starts speichern</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="autoResumeQueueToggle">
|
|
<span id="autoResumeQueueLabel">Queue beim Start automatisch fortsetzen</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="notifyEachCompletionToggle">
|
|
<span id="notifyEachCompletionLabel">Benachrichtigung bei jedem fertigen Download</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="streamlinkDisableAdsToggle" checked>
|
|
<span id="streamlinkDisableAdsLabel">Twitch-Ads beim Download ueberspringen</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="downloadChatReplayToggle">
|
|
<span id="downloadChatReplayLabel">Chat-Replay parallel zum VOD speichern (.chat.json)</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="captureLiveChatToggle">
|
|
<span id="captureLiveChatLabel">Live-Chat waehrend der Aufnahme mitschneiden (.chat.jsonl)</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="logStreamEventsToggle" checked>
|
|
<span id="logStreamEventsLabel">Stream-Events bei Live-Aufnahmen mitloggen (.events.jsonl)</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="autoResumeLiveRecordingToggle" checked>
|
|
<span id="autoResumeLiveRecordingLabel">Live-Aufnahme automatisch fortsetzen wenn Streamlink abbricht (max. 5 Versuche)</span>
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label id="metadataCacheMinutesLabel">Metadata-Cache (Minuten)</label>
|
|
<input type="number" id="metadataCacheMinutes" value="10" min="1" max="120">
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="form-row" style="align-items:center; margin-bottom: 4px;">
|
|
<label id="filenameTemplatesTitle" style="margin: 0;">Dateinamen-Templates</label>
|
|
<button class="btn-secondary" id="settingsTemplateGuideBtn" type="button" onclick="openTemplateGuide('vod')">Template Guide</button>
|
|
</div>
|
|
<div class="form-row" style="gap: 8px; margin: 8px 0 6px;">
|
|
<button class="btn-secondary" id="templatePresetDefault" type="button" onclick="applyTemplatePreset('default')">Preset: Default</button>
|
|
<button class="btn-secondary" id="templatePresetArchive" type="button" onclick="applyTemplatePreset('archive')">Preset: Archive</button>
|
|
<button class="btn-secondary" id="templatePresetClipper" type="button" onclick="applyTemplatePreset('clipper')">Preset: Clipper</button>
|
|
</div>
|
|
<div style="display: grid; gap: 8px; margin-top: 8px;">
|
|
<label id="vodTemplateLabel" style="font-size: 13px; color: var(--text-secondary);">VOD Template</label>
|
|
<input type="text" id="vodFilenameTemplate" placeholder="{title}.mp4" style="font-family: monospace;" oninput="validateFilenameTemplates()">
|
|
|
|
<label id="partsTemplateLabel" style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">VOD Part Template</label>
|
|
<input type="text" id="partsFilenameTemplate" placeholder="{date}_Part{part_padded}.mp4" style="font-family: monospace;" oninput="validateFilenameTemplates()">
|
|
|
|
<label id="defaultClipTemplateLabel" style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">Clip Template</label>
|
|
<input type="text" id="defaultClipFilenameTemplate" placeholder="{date}_{part}.mp4" style="font-family: monospace;" oninput="validateFilenameTemplates()">
|
|
</div>
|
|
<div id="filenameTemplateHint" style="color: #888; font-size: 12px; margin-top: 8px;">Platzhalter: {title} {id} {channel} {date} {part} {part_padded} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div>
|
|
<div id="filenameTemplateLint" style="font-size: 12px; margin-top: 6px; color: #8bc34a;">Template-Check: OK</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<h3 id="updateTitle">Updates</h3>
|
|
<p id="versionInfo" style="margin-bottom: 10px; color: var(--text-secondary);">Version: v4.1.13</p>
|
|
<button class="btn-secondary" id="checkUpdateBtn" onclick="checkUpdate()">Nach Updates suchen</button>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="form-row" style="align-items:center; justify-content:space-between; margin-bottom: 10px;">
|
|
<h3 id="preflightTitle" style="margin: 0;">System-Check</h3>
|
|
<span class="health-badge unknown" id="healthBadge">System: Unbekannt</span>
|
|
</div>
|
|
<div class="form-row" style="margin-bottom: 10px;">
|
|
<button class="btn-secondary" id="btnPreflightRun" onclick="runPreflight(false)">Check ausfuhren</button>
|
|
<button class="btn-secondary" id="btnPreflightFix" onclick="runPreflight(true)">Auto-Fix Tools</button>
|
|
</div>
|
|
<pre id="preflightResult" class="log-panel">Noch kein Check ausgefuhrt.</pre>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<h3 id="debugLogTitle">Live Debug-Log</h3>
|
|
<div class="form-row" style="margin-bottom: 10px; align-items: center;">
|
|
<button class="btn-secondary" id="btnRefreshLog" onclick="refreshDebugLog()">Aktualisieren</button>
|
|
<button class="btn-secondary" id="btnOpenDebugLogFile" onclick="openDebugLogFile()">Log-Datei oeffnen</button>
|
|
<label style="display:flex; align-items:center; gap:6px; font-size:13px; color: var(--text-secondary);">
|
|
<input type="checkbox" id="debugAutoRefresh" onchange="toggleDebugAutoRefresh(this.checked)">
|
|
<span id="autoRefreshText">Auto-Refresh</span>
|
|
</label>
|
|
</div>
|
|
<pre id="debugLogOutput" class="log-panel">Lade...</pre>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="form-row" style="align-items:center; justify-content:space-between; margin-bottom: 10px;">
|
|
<h3 id="storageCardTitle" style="margin:0;">Storage</h3>
|
|
<button class="btn-secondary" id="btnRefreshStorage" onclick="refreshStorageStats()">Aktualisieren</button>
|
|
</div>
|
|
<p id="storageCardIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Disk-Verbrauch pro Streamer im aktuellen Download-Ordner. Live-Aufnahmen werden separat ausgewiesen.</p>
|
|
<div id="storageSummary" style="color: var(--text-secondary); font-size:12px; margin-bottom:8px;"></div>
|
|
<div id="storageList"></div>
|
|
|
|
<hr style="border:none; border-top:1px solid var(--border-soft); margin:16px 0;">
|
|
<h4 id="cleanupTitle" style="margin:0 0 8px 0; font-size:14px;">Auto-Cleanup</h4>
|
|
<p id="cleanupIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Aufnahmen aelter als X Tage automatisch archivieren oder loeschen. Schiebt Sidecar-Chat-Dateien (.chat.json/.chat.jsonl) mit der Aufnahme.</p>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-bottom: 8px;">
|
|
<input type="checkbox" id="autoCleanupEnabledToggle">
|
|
<span id="autoCleanupEnabledLabel">Auto-Cleanup aktivieren</span>
|
|
</label>
|
|
<div class="form-row" style="gap:12px; flex-wrap:wrap; margin-bottom: 8px;">
|
|
<label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:120px;">
|
|
<span id="autoCleanupDaysLabel" style="font-size:12px; color:var(--text-secondary);">Tage-Schwelle</span>
|
|
<input type="number" id="autoCleanupDays" min="1" max="3650" value="30">
|
|
</label>
|
|
<label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:160px;">
|
|
<span id="autoCleanupTargetLabel" style="font-size:12px; color:var(--text-secondary);">Bereich</span>
|
|
<select id="autoCleanupTarget">
|
|
<option value="live_only" id="autoCleanupTargetLive">Nur Live-Aufnahmen</option>
|
|
<option value="all" id="autoCleanupTargetAll">Alle Aufnahmen</option>
|
|
</select>
|
|
</label>
|
|
<label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:160px;">
|
|
<span id="autoCleanupActionLabel" style="font-size:12px; color:var(--text-secondary);">Aktion</span>
|
|
<select id="autoCleanupAction">
|
|
<option value="archive" id="autoCleanupActionArchive">In Archiv verschieben</option>
|
|
<option value="delete" id="autoCleanupActionDelete">Loeschen</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="form-row" style="margin-bottom: 8px; gap: 8px;">
|
|
<button class="btn-secondary" id="btnCleanupDryRun" onclick="runCleanupDryRun()">Vorschau</button>
|
|
<button class="btn-secondary" id="btnCleanupRunNow" onclick="runCleanupNow()">Jetzt ausfuehren</button>
|
|
</div>
|
|
<div id="cleanupReport" style="color: var(--text-secondary); font-size:12px;"></div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<h3 id="discordCardTitle">Discord-Webhook</h3>
|
|
<p id="discordCardIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Sende Benachrichtigungen an einen Discord-Channel via Webhook — nuetzlich fuer Multi-Device-Setups oder eine dedizierte Archiv-Maschine.</p>
|
|
<div class="form-group">
|
|
<label id="discordWebhookUrlLabel">Webhook-URL</label>
|
|
<input type="text" id="discordWebhookUrl" placeholder="https://discord.com/api/webhooks/...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label style="display:flex; align-items:center; gap:8px;">
|
|
<input type="checkbox" id="discordNotifyLiveStartToggle">
|
|
<span id="discordNotifyLiveStartLabel">Bei Live-Aufnahme-Start benachrichtigen</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="discordNotifyLiveEndToggle">
|
|
<span id="discordNotifyLiveEndLabel">Bei Live-Aufnahme-Ende benachrichtigen</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="discordNotifyVodCompleteToggle">
|
|
<span id="discordNotifyVodCompleteLabel">Bei abgeschlossenem VOD-Download benachrichtigen</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-top: 8px;">
|
|
<input type="checkbox" id="discordNotifyVodAutoQueuedToggle">
|
|
<span id="discordNotifyVodAutoQueuedLabel">Bei automatisch eingereihten VODs benachrichtigen</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<h3 id="autoVodCardTitle">Auto-VOD-Download</h3>
|
|
<p id="autoVodCardIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Streamer mit aktiviertem VOD-Toggle werden in dem hier festgelegten Intervall auf neue Twitch-VODs geprueft. Neue VODs innerhalb des Alters-Fensters werden automatisch zur Download-Queue hinzugefuegt.</p>
|
|
<div class="form-row" style="margin-bottom: 10px; align-items: center;">
|
|
<span id="autoVodPollMinutesLabel" style="font-size:12px; color:var(--text-secondary);">Poll-Intervall (Minuten)</span>
|
|
<input type="number" id="autoVodPollMinutes" min="5" max="360" value="15" style="width:90px;">
|
|
<span id="autoVodMaxAgeHoursLabel" style="font-size:12px; color:var(--text-secondary); margin-left:12px;">Max. Alter (Stunden)</span>
|
|
<input type="number" id="autoVodMaxAgeHours" min="1" max="720" value="24" style="width:90px;">
|
|
</div>
|
|
<div class="form-row" style="align-items: center; gap: 12px; flex-wrap: wrap;">
|
|
<button class="btn-secondary" id="btnAutoVodScanNow" onclick="triggerManualAutoVodScan()">Jetzt scannen</button>
|
|
<button class="btn-secondary" id="btnAutoRecordScanNow" onclick="triggerManualAutoRecordScan()">Live-Status pruefen</button>
|
|
<span id="autoVodStatusLine" style="font-size:12px; color: var(--text-secondary);"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<h3 id="backupCardTitle">Sicherung & Wartung</h3>
|
|
<p id="backupCardIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Konfiguration sichern, auf einem anderen Geraet wiederherstellen, oder die Liste der bereits heruntergeladenen VODs zuruecksetzen.</p>
|
|
<div class="form-row" style="margin-bottom: 10px; flex-wrap: wrap;">
|
|
<button class="btn-secondary" id="btnExportConfig" onclick="exportConfigToFile()">Konfiguration exportieren</button>
|
|
<button class="btn-secondary" id="btnImportConfig" onclick="importConfigFromFile()">Konfiguration importieren</button>
|
|
<button class="btn-secondary" id="btnResetDownloadedIds" onclick="resetDownloadedIds()">Downloaded-VODs zuruecksetzen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<h3 id="runtimeMetricsTitle">Runtime Metrics</h3>
|
|
<div class="form-row" style="margin-bottom: 10px; align-items: center;">
|
|
<button class="btn-secondary" id="btnRefreshMetrics" onclick="refreshRuntimeMetrics()">Aktualisieren</button>
|
|
<button class="btn-secondary" id="btnExportMetrics" onclick="exportRuntimeMetrics()">Export JSON</button>
|
|
<label style="display:flex; align-items:center; gap:6px; font-size:13px; color: var(--text-secondary);">
|
|
<input type="checkbox" id="runtimeMetricsAutoRefresh" onchange="toggleRuntimeMetricsAutoRefresh(this.checked)">
|
|
<span id="runtimeMetricsAutoRefreshText">Auto-Refresh</span>
|
|
</label>
|
|
</div>
|
|
<pre id="runtimeMetricsOutput" class="log-panel">Lade...</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-bar">
|
|
<div class="status-indicator">
|
|
<div class="status-dot" id="statusDot"></div>
|
|
<span id="statusText">Nicht verbunden</span>
|
|
</div>
|
|
<span id="statusBarQueueSummary" style="color: var(--text-secondary); font-size:12px; margin-left:auto; padding-right:12px;"></span>
|
|
<span id="versionText">v4.1.13</span>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="../dist/renderer-locale-de.js"></script>
|
|
<script src="../dist/renderer-locale-en.js"></script>
|
|
<script src="../dist/renderer-texts.js"></script>
|
|
<script src="../dist/renderer-shared.js"></script>
|
|
<script src="../dist/renderer-settings.js"></script>
|
|
<script src="../dist/renderer-streamers.js"></script>
|
|
<script src="../dist/renderer-queue.js"></script>
|
|
<script src="../dist/renderer-updates.js"></script>
|
|
<script src="../dist/renderer.js"></script>
|
|
</body>
|
|
</html>
|