The Auto-Cleanup subsection inside the Storage card carries three inline-styled patterns that are good candidates to live in the cascade rather than the markup:
- <hr> with border:none; border-top:1px solid var(--border-soft); margin:16px 0
- <h4> with margin:0 0 8px 0; font-size:14px
- a checkbox <label> wrapping the "Auto-Cleanup aktivieren" toggle with the same display:flex; align-items:center; gap:8px pattern that the existing .toggle-row class already encodes
Hoisted the hr + h4 styling to default .settings-card descendant rules — any future subsection divider/heading inside a settings card now follows the same rhythm without ceremony — and the label reuses .toggle-row (margin-bottom:8px stays inline because the next sibling is a form-row, not another toggle-row, so the .toggle-row + .toggle-row sibling rule doesn't apply).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Four autoUpdater event handlers (checking-for-update, update-available, update-not-available, update-downloaded) were logging via raw console.log while the sibling 'error' handler already used appendDebugLog. Two consequences:
1. In a packaged build the user has no visible record of the update lifecycle — console.log streams to stderr which is invisible without DevTools. appendDebugLog writes to the timestamped debug log file that the user can inspect via the Live Debug-Log card in Settings.
2. Inconsistent — the existing 'auto-updater-error' tag in line 6479 was the only update-related event reaching the debug log. New tags ('auto-updater-checking', 'auto-updater-update-available', 'auto-updater-update-not-available', 'auto-updater-update-downloaded') give the full lifecycle a coherent grep-friendly prefix in the log.
The version info that was being printed inline ("Update available: 4.7.0") now lives in the structured details payload instead of a free-form message — easier to parse mechanically and matches the rest of the codebase's debug-log conventions.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The sidebar's streamer section-title carried two inline flex containers:
- outer .section-title with display:flex; align-items:center; gap:6px; justify-content:space-between (so the bulk-remove X button can pin right while the title group stays left)
- inner span with display:flex; align-items:baseline; gap:8px (so the title text and the streamer counter share the same text-baseline rather than centring against each other)
.section-title is only used in this one spot, so the flex layout becomes part of the class definition (no risk of bleeding into other usages). The inner-span pattern moves to a dedicated .section-title-label class. Two inline style attributes gone.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The Statistics tab's "Archiv-Statistik" card had its own bespoke inline-styled flex header (display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px) plus an inline margin:0 on the h3 and an inline-styled intro paragraph with a different margin rhythm than the other 7 card intros (margin-top:8px; margin-bottom:0).
Two small additions reuse the existing classes:
- flex-wrap:wrap added to .form-row.section-header so the System-Check / Storage / now-Stats headers all wrap gracefully on narrow widths instead of overflowing. Strict improvement everywhere it's already used.
- .card-intro.flush modifier (margin-top:8px; margin-bottom:0) for intros that sit flush against the next block rather than spaced from it.
Three more inline style attributes gone, and the stats header now shares the same width-collapse behavior as the other section-header rows.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two recurring inline-style patterns in Settings:
1. The "card title + right-aligned refresh button" header — used by the System-Check card and the Storage card. Both carried the identical 3-property inline style on the form-row plus an inline margin:0 on the h3 inside. Now expressed as .form-row.section-header (with a descendant h3 margin reset) — two cards, four inline attrs gone.
2. The "checkbox + Auto-Refresh label" pattern next to the debug-log and runtime-metrics action buttons — both were inline-styled with display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-secondary). The existing .inline-toggle class (already used by the VOD filter row's Hide-downloaded toggle) is the exact same pattern at 12px instead of 13px — close enough that unifying onto the shared class is the right move. 1px down beats keeping a third near-duplicate definition.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Seven settings/feature cards (Archive, API help, Storage, Cleanup, Discord, Auto-VOD, Backup) each carry an intro paragraph with the exact same inline style attribute:
style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;"
That's the same 4-property declaration duplicated 7 times. Extracted into a single .card-intro class — HTML reads as semantic intent ("this is a card-intro paragraph") instead of repeated style soup, and any future tweak to intro-paragraph styling now lives in one place.
(statsIntro is similar but uses margin-top:8px; margin-bottom:0; — different rhythm because it sits above the stats grid, left as-is.)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The filename-templates 3-pair grid in Settings carried four inline style attributes:
- the wrapper div's display:grid; gap:8px; margin-top:8px
- three labels with the same font-size:13px; color:var(--text-secondary), with the 2nd and 3rd also having margin-top:4px
Extracted into a single .filename-template-grid class block (with descendant label styling + a :not(:first-child) margin-top rule). HTML drops from a noisy block of inline styles to a clean labelled grid.
Same edit added for= associations on the three labels (vodTemplateLabel → vodFilenameTemplate, partsTemplateLabel → partsFilenameTemplate, defaultClipTemplateLabel → defaultClipFilenameTemplate) — they were sitting right next to their inputs with no programmatic association. Continues the label-for a11y work from 4.6.79; clicking a label now focuses its input and screen readers announce the label when the input is focused.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Continuing the keyboard-focus pass from 4.6.81. Five more interactive controls in the always-visible UI surface had no visible focus indicator:
- .btn (the shared base for queue-action buttons — Start/Merge/Wiederholen/Leeren)
- .btn-start (green): inner-white + green-outer ring so it stays visible against the success-green background, and a red-outer variant when .downloading is active (button switches to error red)
- .btn-icon (top-bar Refresh)
- .header-search button (the purple "+" add-streamer button next to the streamer input — uses inner-white + accent-outer like .btn-pill.primary so the ring stays visible against the purple bg)
- .header-search input (was bare, now matches the .btn-icon focus convention — purple border + soft halo)
Tab order on the main shell is now fully keyboard-traversable with visible state at every step.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Keyboard-only users had no visible focus indicator on five widely-used button classes:
- .btn-primary (main action button — used in clip download, modal confirms)
- .btn-secondary (cancel buttons, neutral actions; also missing hover transitions)
- .btn-pill (toolbar/bulk-bar action buttons; primary + success + danger variants)
- .btn-close (X-close button used in filter clears, inline removals)
- .queue-detail-btn (queue item detail chip buttons + archive companion buttons)
Tabbing through these buttons left no indication of which one would activate on Enter/Space — WCAG 2.4.7 (Focus Visible) violation.
Added :focus-visible rings using the established box-shadow convention (purple-accent for default, white-inner + accent-outer for purple/green pill variants so the ring stays visible against the button's own purple background, red-toned for .btn-close / .btn-pill.danger). Also added :hover + transition to .btn-secondary which previously had neither — clicking felt unresponsive.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The filter row above the VOD grid carried three inline style attributes:
- the row's own flex layout (display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap)
- vodSortLabel had margin-left:8px (extra spacing past the row's gap to visually group "Sort:" with the select)
- vodFilterCount had min-width:80px (prevents layout shift as count text changes during typing)
All three are now CSS class definitions (.vod-filter-row, .vod-sort-label, .vod-filter-count). HTML reads cleaner and the styling lives alongside the related .vod-bulk-bar block in styles.css.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Five <label> elements in the clip-cutter modal and two <span class="form-sublabel"> elements in the Auto-VOD settings card had no for=/id pairing with their associated form controls — screen readers couldn't announce the label when the input was focused, and clicking the label didn't focus the input.
Fix: added for= to 5 clip-modal labels (Start/StartTime/End/EndTime/Part) and converted the two Auto-VOD sublabels from span to label for= so screen readers correctly associate them with autoVodPollMinutes and autoVodMaxAgeHours.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4.6.77 inlined the setPageTitle global-window resolution + fallback
twice — once in each branch of the "vods+streamer vs other tab"
conditional. Reading two near-identical 4-line if/else stanzas back
to back was harder than necessary.
Collapsed the branch to a single ternary that picks the title text
first, then a single setPageTitle resolve + apply block at the end.
Same behavior, one resolution of the optional global.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
document.title was stamped once during app boot with the static
"Twitch VOD Manager vX.Y.Z" string. After that, the H1 page-title
in the header updated as the user navigated tabs and selected
streamers, but the OS-level window title — the string shown in the
taskbar, Alt+Tab switcher, and OS notifications — never changed.
Multitasking suffered: a user with three Electron windows pinned
to taskbar all read identical "Twitch VOD Manager v4.6.x", with
no clue which window had what tab or streamer loaded.
Added a setPageTitle(text) helper in renderer.ts that:
- Updates the H1 #pageTitle textContent (the visible header)
- Updates document.title with `${text} - ${appName} v${version}`
for non-default text, or just `${appName} v${version}` for the
default app-name fallback
- Exposed on window so the renderer-streamers.ts and
renderer-settings.ts modules can reach it without crossing the
module-vs-bundle boundary
Three call sites updated to use the helper:
- showTab → uses for tab-derived titles
- selectStreamer → uses for "xrohat" style streamer titles
- the renderer-settings language-switch refresh path
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The bulk-select checkbox on each VOD card was carrying a ~140 char
inline-style block (absolute positioning, dimensions, accent-color,
z-index, cursor) — duplicated across every rendered VOD — plus a
truly bizarre title-attribute fallback that hacked the
bulkSelectedCount locale string by stripping placeholder digits:
title=`${UI_TEXT.vods.bulkSelectedCount
.replace("{count}", "0")
.replace(/[0-9]/g, "")
.trim() || "Select"}`
That worked by accident — the placeholder happens to be "{count}
ausgewahlt" / "{count} selected" so stripping digits gave a usable
fragment — but it was fragile and not really an accessible label.
Three fixes:
- Extracted the inline styles to a .vod-select-checkbox CSS rule.
The custom checkbox styling from 4.6.26 means accent-color was
redundant anyway, so dropping it is a no-op visually.
- Added a proper locale key vods.selectAriaLabel ("Select VOD for
bulk action" / "VOD fuer Bulk-Aktion auswaehlen") for the
aria-label attribute.
- Dropped the title-attribute hack entirely. aria-label now provides
the AT-readable name; sighted users get the visual checkbox
which is self-explanatory.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Ctrl+F was wired to focus the VOD filter input — but only when the
VODs tab was active. On the Archive tab (added in 4.6.15) Ctrl+F
did nothing useful: the browser default find bar was suppressed
(Electron renderer doesn't have one anyway) and the app handler
didn't have a branch for the archive context.
Now Ctrl+F also targets the archiveSearchQuery input when the
Archive tab is the active tab. Other tabs (Clips / Cutter / Merge /
Stats / Settings) let the shortcut fall through to no-op since
they don't have a primary search/filter input.
Same input-focus convention as the VODs tab: focus + select-all so
the user can immediately type to replace or append.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
When the Statistik (4.6.14) and Archiv (4.6.15) tabs were added to
the sidebar nav, the TAB_IDS const never got extended past its
original five entries:
const TAB_IDS = ["vods", "clips", "cutter", "merge", "settings"]
Two consequences:
1) Ctrl+1..5 keyboard shortcut was hard-capped at five tabs (the
guard `tabIndex < TAB_IDS.length` filtered Ctrl+6 and Ctrl+7 out).
Even though there were 7 visible tabs.
2) persistActiveTab(tab) called isKnownTab(tab) before localStorage
write. For 'stats' or 'archive' that returned false, so the tab
was silently NOT persisted. Open the app on the Archiv tab,
close it, reopen — it'd boot on VODs because the persisted value
was the previous non-stats/archive selection.
Extended TAB_IDS to all seven nav-items + bumped the keyboard
shortcut range from 1-5 to 1-7. Ctrl+5 now maps to Statistik,
Ctrl+6 to Archiv, Ctrl+7 to Einstellungen. Persistence works for
the full set.
Added a comment to TAB_IDS pointing out the failure modes when
this is out of sync with the HTML nav, so the next nav addition
doesn't repeat the bug.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three console.log calls in main.ts were flooding stdout during normal
operation:
1) `console.log("Starting download:", cmd, args)` — redundant with
the appendDebugLog("download-part-start", ...) one line below.
Duplicate logging; pure noise.
2) `console.log("Streamlink:", line)` — fired for every line of
streamlink stdout, which is 10-100 lines/sec during an active
download. Hundreds of thousands of lines per multi-hour recording.
Progress + state parsing already happens on the same line; the
raw output was never consumed.
3) `console.log("Download progress: X%")` in the autoUpdater
handler — fires ~10x/sec during an in-flight update download.
The renderer banner is the user-visible feedback; this was
developer-only and never necessary in prod.
Removed all three. The remaining four console.log calls (login
flow, update-available, update-downloaded, no-updates-available)
are once-per-event and fine to keep.
Practical benefit: stdout becomes useful for actual diagnostics
again. Performance gain is marginal in absolute terms but the
buffered noise on a long-running session was real.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Final piece of the renderer-stats.ts extraction. The recording-size
distribution histogram (6 buckets: <100MB ... >10GB) was rendering
each bucket-row as a 5-inline-style template — same shape as the
top-streamers list (margin row, flex meta header, two spans, bar
track, bar fill).
Extracted to a .stats-bucket-* family in styles.css:
- .stats-bucket-row + .stats-bucket-row:last-child margin trim
- .stats-bucket-meta + .stats-bucket-meta-sub for the flex label/
count header
- .stats-bucket-bar-track + .stats-bucket-bar-fill for the
horizontal bar (with width-transition so the bar fills
animate on data refresh)
That completes the Statistik tab pass — 26 inline styles -> 22
CSS class assignments + 4 truly-dynamic width/height percent
overrides for the bar fills. Tabular numerics, hover states, and
data refresh animations all flow from the central stylesheet now.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Continuing the renderer-stats.ts inline-style extraction. The
"Aktivitaet (letzte 30 Tage)" bar chart built each day-column as
a 5-inline-style template:
<div style="flex: 1; display:flex; flex-direction:column;
align-items:center; gap:4px; min-width:0;">
<div style="width: 100%; height: 90px; display:flex;
align-items: flex-end;">
<div style="width:100%; height: 70%;
background: var(--accent, #9146ff);
border-radius: 2px 2px 0 0;" title="...">
<div style="font-size: 9px; color: var(--text-secondary);
white-space: nowrap;">
30 columns rendered per refresh meant ~7.5KB of duplicated inline
style attribute strings in the DOM after every refresh.
Extracted to .stats-day-col + .stats-day-bar-track + .stats-day-bar-
fill + .stats-day-label, plus .stats-activity-row + .stats-activity-
summary for the outer wrappers. Only the per-day height percent
stays inline (it's truly dynamic, per-day data).
Polish riders:
- Bar fill picks up height: 0.3s ease-out transition so the bars
animate up on data refresh instead of snapping
- Hover state shifts the bar from accent to accent-hover so the
hovered day reads as the focus
- Day-label spans get tabular-nums so the "05-12" type strings
align column-to-column
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Second pass on the Statistik tab. The top-10 streamers-by-size
list rendered each row as a 6-inline-style template (margin,
two flex containers, two span colour overrides, two bar wrappers,
two bar fills with hard-coded gradient).
Extracted to a .stats-top-* family in styles.css:
- .stats-top-row — outer row spacing
- .stats-top-meta + .stats-top-meta-sub for the label/byte-size
flex header
- .stats-top-share for the muted (X.Y%) suffix
- .stats-top-bar-track + .stats-top-bar-fill for the gradient
progress bar (now with a width-transition for the streamer-by-
streamer animation when the data refreshes)
- .stats-top-bar-labels for the overlaid LIVE/VOD breakdown that
gets pointer-events: none so the bar isn't accidentally hover-
blocked
Also picked up the "no top streamers" empty-state message and
swapped its inline-style div for the existing .form-note utility
class introduced in 4.6.42.
Top streamers row hover state intentionally NOT added — these are
read-only summary rows, not interactive ones.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The six-tile overview grid at the top of the Statistik tab built
each KPI card as a four-property inline-styled div:
<div style="background: var(--bg-elevated); border: 1px solid
var(--border-soft); border-radius: 6px; padding: 12px;">
<div style="font-size: 11px; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.5px;">
<div style="font-size: 22px; font-weight: 600; margin-top: 4px;">
<div style="font-size: 12px; color: var(--text-secondary);
margin-top: 4px;">
Each card repeated the same ~250 chars of inline styling. Card hover
state, number alignment, future polish all required editing the
renderer.
Extracted to .stats-kpi-card + .stats-kpi-label + .stats-kpi-value
+ .stats-kpi-sub. Added two enhancements while at it:
- subtle hover state (purple-tint border + 1px lift) so the cards
feel interactive in line with the rest of the apps language
- font-variant-numeric: tabular-nums on values + subs so the
numbers align properly across the six-tile grid
Also stats-no-root for the "Download folder not found" fallback
that grid-column-spans across all 6 columns.
The remaining 22 inline styles in renderer-stats (top-streamers
bar list, activity calendar, size buckets) come in subsequent
iterations.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
renderArchiveSearchResults was building each result row as an HTML
template literal carrying ~10 inline-style props per row (flex
layouts, padding, border-bottom, font-sizes, secondary text colour,
ellipsis truncation, gap...). For a 200-hit search that meant
~2KB of duplicated inline style noise in the DOM and made any
visual tweak require editing the renderer.
Extracted to a .archive-result-* family in styles.css:
- .archive-result-row + hover-tint (table-row scannability — was
missing before, every row read flat)
- .archive-result-body / -meta / -streamer / -date / -filename /
-size / -actions for the column layout
- .archive-type-badge with .live + .vod modifiers for the LIVE/VOD
pill (was two separate inline-styled spans with hard-coded
rgba colours)
- .archive-no-matches for the empty-state line
Dates + sizes in the row pick up font-variant-numeric: tabular-nums
so columns of numbers align even when filenames are different
widths. Last-child gets its bottom border dropped so the list
doesnt end on a dangling line — same treatment as the storage
stats table.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
showAppToast spawns / reuses a single floating toast at the bottom-
right of the window for transient status (e.g. "1 new VOD auto-queued",
"Cannot start recording", etc). The toast had no a11y semantics —
screen readers never announced it, so the entire transient-feedback
channel was silent for AT users.
Promoted the toast container to a live region:
- role="status" for info toasts + aria-live="polite" so the reader
waits for a natural break in current speech before announcing
- role="alert" for warn toasts + aria-live="assertive" so the reader
interrupts whatever it was saying (matches the visual amber-left-
border meaning — warn IS urgent)
- aria-atomic="true" so the reader announces the whole message at
once instead of attempting to diff against the previous toast
Critical detail: aria-live attributes have to be in place BEFORE the
text changes for AT to register the change as a live-region update.
The current implementation now sets role / aria-live first and only
then writes the new textContent.
WCAG 4.1.3 — Status Messages.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Third progress bar in this a11y pass — the download-progress bar
shown in the update banner during an auto-update download. Same
pattern as 4.6.64 (queue) + 4.6.65 (cut/merge): bare div with
JS-driven width, no semantic role.
Promoted the .update-banner-progress-track to role="progressbar"
with aria-valuemin / max / now + a localized aria-label
(updateProgressAria: "Update download progress" / "Update-Download-
Fortschritt").
Three call sites in renderer-updates.ts that drive bar.style.width
now also stamp aria-valuenow on the gauge:
- onUpdateProgress event handler (per-tick percent)
- setDownloadPendingUi (initial 30% indeterminate placeholder)
- setDownloadReadyUi (100% on finish)
renderer-texts.applyText sets the localized aria-label at boot +
on language switch.
That's all three application-level progress bars now AT-friendly.
The same pattern would extend to any future progress UI.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Following 4.6.64 for the queue progress bars, the cut + merge
progress containers in their respective tabs had the same gap:
a plain <div class="progress-bar"> wrapping a <div class="progress-
bar-fill"> with no semantic role. JS poked the bar's style.width
on every percent update; AT had no way to read out the running
value.
Promoted both .progress-bar wrappers to role="progressbar" with
aria-valuemin / max / now, plus aria-label sourced from new
locale strings (cutProgressAria / mergeProgressAria) so EN/DE
both work.
The progress event handlers in renderer.ts now also stamp
aria-valuenow on each tick, so AT live regions pick up the
percentage as the cut / merge advances. setAttribute is cheap
relative to the FFmpeg progress event rate (~1/s), no perf
concern.
renderer-texts.applyText sets the localized aria-label on both
gauges at boot + language switch — text contents already get
re-applied through the same path.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The download progress bar inside each queue item was a plain
<div class="queue-progress-bar" style="width: 73%;"> with no
semantic indication that it represented progress. Screen readers
just announced the surrounding text ("Downloading...") with no
running value.
Added role="progressbar" + aria-valuemin=0 + aria-valuemax=100 +
aria-valuenow on the wrapping .queue-progress-wrap (since the bar
itself is just the visual fill — the wrap is the semantic gauge
region). aria-label is the status label so AT announces "VOD title
75 percent" instead of an unlabeled gauge.
updateQueueItemProgress also re-stamps aria-valuenow as the
percentage advances, so AT live regions can pick up the running
update without needing a full re-render.
For indeterminate progress (pre-rolling, before the first byte
event arrives) aria-valuenow stays at 0 — the screen reader still
gets a coherent reading even if visually the bar is in
indeterminate-pulse mode.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The vodSortSelect + the 3 archive-search selects all sat OUTSIDE
the .form-group container, which meant the existing
.form-group select rule did not apply to them. Each carried the
same ~110 chars of inline style hard-coding bg / border / radius /
padding / color.
Extracted to a shared .select-compact class (6px radius, 7px
padding, var(--bg-card) base, var(--border-soft) border) and
swapped all four call sites. Visual consistency between the
filter-row select in the VODs tab and the multi-select control
strip in the Archive search — same heights, same border treatment.
Minor visual change for the 3 archive selects (4px -> 6px
border-radius, 6px -> 7px vertical padding) so the controls now
match the rest of the apps button + input family. Worth the 1px
delta for the consistency.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Companion to 4.6.61. The open-file IPC handler (used by the
"Open file" buttons in the queue + archive) was previously a
plain shell.openPath call with only an existsSync check:
if (typeof filePath !== "string" || !filePath) return false;
if (!fs.existsSync(filePath)) return false;
const result = await shell.openPath(filePath);
shell.openPath happily launches any path the OS knows how to
execute. An XSS landing through e.g. a smuggled queue item URL
that reached the renderer-side openFile global function could
pass `C:\\Windows\\System32\\calc.exe` and the IPC would launch
calc.
Added a deny-list of obvious shell-execution extensions (.exe,
.bat, .cmd, .com, .ps1, .vbs, .vbe, .js, .jse, .wsf, .wsh, .scr,
.msi, .msp, .lnk, .cpl, .reg, .hta, .jar, .application). Rejected
calls log to debug + return false to the renderer. Media + text +
image extensions remain unaffected — those open in their normal
default-app viewers, which is the intended use case.
show-in-folder + open-folder stay permissive on extension since
they only open File Explorer (no execution).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The open-external IPC was a pass-through:
ipcMain.handle("open-external", async (_, url) =>
await shell.openExternal(url));
shell.openExternal on Windows happily resolves any URL scheme the OS
knows how to launch — including file:// paths, ms-settings:, shell:,
javascript:, and assorted protocol handlers. The renderer is
contextIsolated + nodeIntegration: false so direct exploits are
blocked, but an XSS landing through (for example) a streamer name
that smuggled HTML into a renderer template would have a clean path
through this IPC to launch arbitrary local executables via the OS
shell.
Validation gate: reject anything that isn't an http:// or https://
URL. Trim before the test so a smuggled leading/trailing whitespace
attempt does not slip through. Rejected requests get a debug-log
entry (truncated to 200 chars so a megabyte payload doesnt nuke the
log) and return silently — the renderer caller already swallows
the promise without checking, so silent-drop matches existing
behaviour.
Defence-in-depth. No known active exploit; just removing an
unnecessary surface.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
vodStoryboardClientCache was a plain Map<vodId, VodStoryboard | null>
with no eviction. Every VOD ever hovered cached its first sprite
data URL — about 50-200 KB each. Browsing a long-running streamer's
2000-VOD archive could leave the renderer holding 100-400 MB of
hover-only sprite data permanently, with no signal to the user
that it was happening.
Wrapped writes in a rememberStoryboard helper that caps the cache
at 100 entries with FIFO eviction (Map iterator is insertion-ordered
so .keys().next().value is always the oldest). Cache hit / miss
semantics unchanged for the live set — only the dropped-off-the-
back entries get re-fetched if the user scrolls back to a VOD they
hovered hundreds of cards ago, and that re-fetch is fast because
the main-process side has its own metadata cache that survives the
renderer-side eviction.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
confirmClipDialog (the handler behind the clip-cutter modals "Add
to queue" button) opens an alert with a hardcoded English message
when the parsed start / end / duration values come back as NaN —
which can happen if the user types non-numeric characters or
otherwise breaks the time-input pattern. German-locale users got
an English alert on a German UI.
Added clips.invalidTime to both locales ("Invalid time values" /
"Ungueltige Zeitangaben") and swapped the inline string for the
locale lookup. All the other alerts in that handler already go
through UI_TEXT.clips.* — this was the one outlier.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
When mergeFiles is empty, the renderer dropped an inline-styled
innerHTML template into #mergeFileList:
<div class="empty-state" style="padding: 40px 20px;">
<svg style="opacity:0.3" ...><path ...></svg>
<p style="margin-top:10px">${UI_TEXT.merge.empty}</p>
</div>
Three issues:
- innerHTML interpolating a locale string (lint hook flags pattern
even though locale strings are app-controlled)
- Inline styles for padding / opacity / margin
- The same SVG icon as the static HTML, duplicated
Built via createElement + createElementNS for the SVG namespace, so
the renderer never touches innerHTML for this branch. Styling moved
to a .merge-empty-state class that scopes the padding override
(needed because the merge file-list sits in a settings-card with
its own padding) without leaking into the global .empty-state used
by the VOD grid.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Subtle leak in runLiveStatusBatchPoll: the eviction pass (which
removes liveStatusByLogin entries for streamers no longer in
config.streamers) ran INSIDE the fetch branch — but the fetch
branch is skipped early when logins.length === 0.
Concretely: if a user had 3 streamers all marked live, then
removed all 3, the poll would early-return at length-check,
leaving stale liveStatusByLogin entries forever (until app
restart) — main-process memory + an inaccurate
get-live-status-snapshot IPC response.
Renderer wasn't visibly affected because renderStreamers only
looks up entries for streamers in the rendered list, but the
underlying state was wrong.
Restructured so the eviction pass always runs first based on the
current watch list, then the fetch + diff only runs when the list
is non-empty. Empty-list case still emits "removed -> offline"
changes to the renderer so its parallel map stays in sync.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two more click-only divs in the queue item template were leaving
keyboard users stuck:
- .queue-selector — the "X" number-badge to the left of pending
queue items that toggles bulk-select. Previously a div with onclick.
Now role="checkbox" + tabindex + aria-checked tracking the selection
state + Enter/Space keydown handler.
- .queue-item .title — the truncated VOD title that, when clicked,
toggles the expanded detail panel underneath the row. Previously
a div with onclick. Now role="button" + tabindex +
aria-expanded reflecting the panel state + aria-controls pointing
at the details panel ID + Enter/Space keydown handler.
Both pick up 2px purple focus-visible rings to match the rest of
the a11y family.
aria-expanded on a button is the conventional pattern for
"disclosure widget" controls (collapsible/expandable content),
so screen readers will now announce the title as "VOD title,
button, collapsed" or "expanded" as the user navigates and toggles.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two click-only divs in the new profile header (4.6.17+) had no
keyboard equivalent:
- .streamer-profile-avatar-wrap (clicking the avatar opens the
channel on twitch.tv) — the only way to trigger that action
besides the "Open on Twitch" button in the action column, so
keyboard users were missing a primary affordance
- .streamer-profile-live-card (clicking anywhere on the live
preview card starts a live recording) — the embedded Record-now
button inside the card already covered keyboard activation, so
this one is more about completeness than necessity
Both got:
- role="button" + tabindex="0"
- aria-label = the existing tooltip locale string (so AT reads
the same text shown to sighted users on hover)
- An inline onkeydown that re-fires the same onclick handler on
Enter / Space. The live-card additionally checks
event.target === event.currentTarget so a focused inner button
pressing Enter doesn't double-fire the wrapper handler
CSS adds focus-visible rings:
- Purple ring on the avatar wrap (matching the existing avatar's
purple border)
- Red ring + glow on the live card (matching the existing card
border colour)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Following the chip + row + nav a11y passes, the VOD cards in the
main grid were the last big mouse-only surface in the sidebar +
main panel flow. Each card already delegated click via a single
vodGrid handler — but the card div itself was unfocusable, so a
keyboard user could only reach the +Queue / Trim VOD buttons
inside, never the card thumbnail click that opens the VOD page on
Twitch.
Added on each .vod-card:
- role="button" + tabindex="0"
- aria-label set to the VOD title so AT announces it correctly
("32h37m9s VOD: Cyborg Watchparty button") instead of reading
the whole card content row by row
Added to the existing delegated vodGrid handler:
- A keydown branch that opens the VOD on Twitch when Enter / Space
fires on a focused .vod-card and the event target is the card
itself (not a child action button or checkbox — those have
their own native button / checkbox semantics that handle Enter
/ Space correctly already)
CSS adds a 3px purple focus-visible ring + accent-coloured border
on the focused card, mirroring the hover state's purple glow.
Tab order through the VOD grid now goes: VOD card -> checkbox -> Trim
button -> +Queue button -> next VOD card. Predictable enough for
keyboard navigation through a 38-VOD streamer profile.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous a11y pass made all four chip-buttons inside a streamer
row (AUTO / VOD / REC / remove) keyboard-accessible, but the row
itself — the parent .streamer-item div whose click selects the
streamer — was still mouse-only. A keyboard user could focus the
chips but never the row, so they could never select a streamer
without a mouse.
Made the row a focusable role="button":
- role + tabindex on the .streamer-item div
- aria-label set to the streamer's name (so AT announces "xrohat
button" rather than reading every chip child)
- aria-current="true" on the currently selected row (mirroring
the visual .active state) so AT understands which row is the
current selection
- A keydown handler on the row that fires selectStreamer on
Enter / Space, but ONLY when the row itself (not a chip child)
is the event target. The chips already preventDefault +
stopPropagation on their own keydowns so they never reach this
handler — and even if they did, the e.target check guards.
Focus-visible adds an inset 2px purple ring (inset to match the
row's left-border-marker styling for the active state). Tab order
through the sidebar is now: nav-items → streamer row → AUTO →
VOD → REC → remove-X → next streamer row.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
All 7 sidebar nav-items (Twitch VODs / Clips / Cutter / Merge /
Statistik / Archiv / Einstellungen) were plain `<div class="nav-item">`
elements with only an onclick. Same a11y story as the previous two
iterations: no role, no tabindex, no semantic active-state marker,
no keyboard activation.
Added on each nav item:
- role="button" and tabindex="0" so they enter the tab order and
read as activatable buttons to assistive tech
- aria-current="page" applied to the active item, removed from the
others — both managed in showTab() since that's the single
switch point for active-state transitions
- A delegated keydown handler on the .nav container (one listener,
not seven) that fires showTab on Enter / Space for whatever
nav-item descendant is currently focused. Bound once with a
data-keynav-bound guard so init() re-running doesn't double-bind
CSS adds a 2px purple focus-visible ring matching the rest of the
keyboard-focus family added in 4.6.50 and 4.6.51.
WCAG 2.1 success criterion 2.1.1 (Keyboard) — every interactive
element activated by keyboard.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The three streamer-row action chips (AUTO toggle, VOD toggle, REC
one-shot) were spans wired only with click listeners. Same a11y
gap as the .remove X chips in 4.6.50: no role, no tabindex, no
keyboard activation, no semantic state for toggles. Screen readers
read them as raw text "AUTO", "VOD", "REC" with no clue they were
interactive controls.
Factored a wireChipButton helper inside renderStreamers and ran all
three chips through it. The helper stamps:
- role="button" + tabindex="0"
- aria-label (locale-driven, picked up the existing
autoRecordTitle / autoVodTitle / recordLiveTitle locale keys
that were previously only used for the visual title-tooltip)
- aria-pressed="true"/"false" for the AUTO and VOD toggles so
AT announces the on/off state
- A keydown handler that synthesises the same click handler on
Enter / Space and stops propagation so the row's click handler
(streamer-select) does not also fire
CSS adds three focus-visible rings (green for AUTO, blue for VOD,
red for REC) matching each chips active-state colour palette.
Keyboard navigators tabbing through a streamer item now see the
ring on the focused chip clearly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The two `<span class="remove">x</span>` glyphs (one per queue
item, one per streamer-list item) had no semantic role, no
aria-label, no tabindex — entirely mouse-only and screen-readers
just announced them as the bare "x" character.
Made both fully keyboard-accessible:
- role="button" + tabindex="0" so they enter the tab order and
read as buttons to AT
- aria-label="Remove" / "Entfernen" via new
streamers.removeAria locale key (DE + EN)
- Keydown handler on Enter + Space synthesizes the same removal
callback (mirroring native button behaviour for synthetic
buttons — Enter on real buttons fires click, Space does too)
- Focus-visible state: 2px red glow ring + force opacity:1 on
the streamer-list .remove (which is normally opacity:0 until
the streamer-item is hovered) so keyboard navigators can see
the focused X
Both call sites preserved e.stopPropagation in the keydown handler
so Enter on a focused X doesn't bubble up to the row's click
handler (which would trigger streamer-select).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three queue-item detail labels were hardcoded German in the
renderer's HTML template: "Streamer:" / "Dauer:" / "Datum:". The
queue-details panel that expands when a user clicks a queue items
title would render these labels in German regardless of the
selected locale — same i18n gap as the empty states fixed in
4.6.37.
Added queue.detailStreamer / detailDuration / detailDate to both
locale tables ("Streamer:" / "Duration:" / "Date:" in EN,
"Streamer:" / "Dauer:" / "Datum:" in DE) and wrapped the labels
in a .queue-detail-label span so the colour distinction between
label and value (secondary vs primary text colour) is consistent.
The error-state retry button was a span with five inline-style
props and a unicode ↻ as its glyph — visually drab and not really
a button semantically (screen reader read it as text). Promoted
to a real <button class="queue-retry-btn"> with a proper hover
state (purple-tinted background + accent border + white text +
active-press scale-down). Subtler than .btn-pill but obviously
clickable.
Cursor:pointer on .queue-item .title moved from inline style on
the HTML template to the CSS rule — same effect, one less
attribute per queue item.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The update banner that shows during an auto-update download was
hosting three inline-styled divs in a row for its progress
indicator:
<div 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;">
Renderer-updates.ts kept reaching in to mutate
updateProgressBar.style.width as the download advanced — works,
but the bar's static look-and-feel (rounded, dark track, 8px tall,
white fill, 0.3s transition) was buried in HTML attributes
instead of CSS.
Extracted to:
- .update-banner-progress-wrap (the flex:1 container with side
margin)
- .update-banner-progress-track (the rounded dark track)
- .update-banner-progress-bar (the white fill, 0% default, transition)
The JS continues to drive width via style.width, which now layers
on top of the class's transition for the smooth animation. Zero
visual change.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two separate places (Settings filename templates + clip-cutter
modal custom template) had their own lint state. Each set the
colour by JS as `lintNode.style.color = "#8bc34a"` (green for OK)
or `"#ff8a80"` (red for unknown placeholder). Same intent, different
implementations, different shades than the rest of the app
(--success #00c853 + --error #ff4444).
Extracted to a shared .template-lint class with .ok / .warn modifiers
driven by the canonical CSS vars. The renderers now swap classNames
instead of inline colours.
Also picked up the stale `color: #888` on filenameTemplateHint and
replaced with the existing .form-note utility class (which uses
var(--text-secondary)).
The old .clip-template-lint rule stays as a no-op alias for safety,
but its hard-coded #8bc34a is removed — colour now comes from
.template-lint.ok / .warn. Three hard-coded hex literals retired,
two state branches consolidated, semantics now track the global
palette.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The "Hide downloaded" checkbox in the VOD filter row was carrying
the inline style:
display:flex; align-items:center; gap:6px;
color: var(--text-secondary); font-size:12px;
cursor:pointer; user-select:none
This is a distinct visual variant of the existing .toggle-row class
(filter-row context, smaller gap, smaller font, secondary text
color) so a separate .inline-toggle class is the cleaner fit
rather than overloading .toggle-row with another modifier.
One site cleaned up now, the class is reusable for future
tool-row inline toggles without copy-pasting the seven inline
properties.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reported via screenshot against 4.6.44. The Twitch-style "32h37m9s"
duration pill introduced in 4.6.20 was anchored at bottom: 8px right:
8px inside .vod-card. But .vod-card is the WHOLE card — thumbnail
plus info + action buttons row below — so the badge sat at the
bottom-right of that whole stack, landing on top of the rightmost
action button ("+ Queue") and obscuring it. The user couldnt click
through the badge.
Fix wraps the .vod-thumbnail in a .vod-thumb-wrap div with
position:relative so the badge's absolute positioning anchors to
the thumbnail's bounding box. The badge now sits at the bottom-
right of the actual image, exactly where the Twitch convention
puts it.
.vod-thumb-wrap also gets line-height: 0 to kill the inline
baseline whitespace that would otherwise show as a thin gap
between the image and the .vod-info section below.
The storyboard hover preview overlay (renderer-vod-hover.ts) is
unaffected — it still appendChild's into .vod-card and uses
aspect-ratio: 16/9 to size itself, which matches the thumbnail
zone above the .vod-thumb-wrap container exactly. Verified end-to-
end pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The Settings tab has 17 checkbox toggles, each wrapping the input +
its label in a `<label style="display:flex; align-items:center;
gap:8px; margin-top: 8px;">`. The first toggle in a group skipped
the margin-top; one indented sub-toggle added margin-left: 22px.
All 18 sites were carrying the same ~50 chars of inline style.
Extracted to .toggle-row + the adjacent-sibling combinator
.toggle-row + .toggle-row { margin-top: 8px }, which automatically
adds the gap between consecutive toggles without needing the
per-instance override. The one indented case becomes
.toggle-row.indented (single rule, single margin-left).
Replacements done via Edit with replace_all (13 + 2 + 1 = 16
exact-match replacements + the one manual indented variant). Zero
visual change.
This will pay off on the next Settings card that adds a toggle —
class="toggle-row" is six characters of meaning vs the previous
~50 character inline-style copy-paste.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The sidebar queue empty state was built via inline-style HTML
template: `<div style="color: var(--text-secondary); font-size:
12px; text-align: center; padding: 15px;">${UI_TEXT.queue.empty}
</div>`. Worked but had two issues:
1. Flat plain-text styling that did not match the
.streamer-list-empty card-style empty hint sitting directly
above it in the same sidebar — visually inconsistent.
2. innerHTML interpolation of a locale string. The string is
safe (locale-controlled, not user input), but the lint hook
pattern-matches innerHTML use anyway, leaving the file flagged
on every audit pass.
Rebuilt via createElement / textContent so no innerHTML touches
the locale string, and extracted the styling into a .queue-empty
CSS class that mirrors the .streamer-list-empty card look
(dashed border + tinted bg + 6px radius + centred text). The two
sidebar empty states now read as a family instead of two
unrelated takes on "empty".
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Audit turned up two ~6-occurrence inline-style patterns in Settings:
- `style="font-size:12px; color:var(--text-secondary);"` on small
sub-labels above stacked inputs (autoCleanupDaysLabel,
TargetLabel, ActionLabel, autoVodPollMinutesLabel,
autoVodMaxAgeHoursLabel, statsLastScannedLabel)
- `style="display:flex; flex-direction:column; gap:4px; flex:1;
min-width:NNNpx;"` on labels that wrap a sublabel + control as a
vertical pair in a flex row (3 of these in the auto-cleanup
grid)
Both lifted to .form-sublabel and .form-stack utility classes.
Plus a .form-note for block-level secondary-coloured text (the
cleanupReport "X files would be freed" panel). The min-width
values stay inline since they vary per call site (120 / 160 / 200).
Zero visual change — the class values match what was inline.
Future edits to "what does a small label look like" go through
one selector instead of grep + sed across six sites.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
renderStorageStats was building the storage-stats table in
Einstellungen by setting ~10 style props per element with
.style.padding / .style.color / .style.borderBottom / etc. Verbose
in TypeScript and harder to retheme than CSS-class-based markup.
Extracted to .storage-stats-table family in styles.css:
- Header cells become uppercase 10px tracking-wide labels (matches
the look of the .vod-bulk-count "X selected" label and the
archive search type-pill chips)
- Body rows pick up a hover-background tint for scannability
- Numbers use font-variant-numeric: tabular-nums so file counts
and byte sizes don't jitter as values change between scans
- Last row drops the bottom border so the table doesn't end on
a dangling line
Open-folder button was using .btn-secondary with inline font-size
+ padding overrides — swapped to the .btn-pill class, which is
already the small/compact action button used in vod-bulk-bar and
the archive search results. Visual consistency across the app.
The "Other folders" subheading (.storage-stats-section) gets the
same uppercase-tracking look as the table headers — small
consistency win that ties the section together visually.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The live-status batch poller (60s cadence, every streamer in the
watch list) was sending two things on every tick:
- `changes` — the diff vs. the previous tick, used by the renderer
- `snapshot` — the full Map<login, boolean> serialized as a record
Renderer destructures only `changes` (renderer-streamers.ts line 20).
The snapshot field was wire-noise. For a typical 30-50 streamer
watch list, that snapshot is ~1.5KB of JSON every minute, never
read on the other side. Dropped from the broadcast payload.
Initial-state sync still works: the renderer's
initLiveStatusSubscription calls window.api.getLiveStatusSnapshot()
once at boot to pre-fill its map. The broadcast is only for diffs.
Also added a short-circuit on the main side: if changes.length === 0
(every streamer's live status matched the cached value this tick),
don't broadcast at all. The renderer would just iterate an empty
array and trigger a no-op render; saves the wakeup entirely.
Type signature updates ride through preload.ts +
renderer-globals.d.ts so the API contract stays accurate.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The bottom status-bar version span had "v4.1.13" hardcoded as initial
content from a release several versions ago. init() overwrites it via
window.api.getVersion() on app boot, so the user only ever sees this
for the millisecond between paint and IPC return — but during that
window we were lying about the version, and if init() ever crashed
the user would be stuck looking at v4.1.13 in the corner forever.
Cleared the initial content to empty so the span just doesn't render
text until the real version arrives.
Side effect: extracted the inline `style="color:var(--text-secondary);
font-size:12px; margin-left:auto; padding-right:12px"` from
statusBarQueueSummary to a .status-bar-queue-summary class, plus a
new .status-bar-version class for the version pill. Both consistent
with the rest of the status-bar styling. Bonus: queue summary picks
up font-variant-numeric: tabular-nums so the "X B | Y avg | Z done"
numbers don't jitter horizontally as values update during a
download.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
First-launch (or after-clearing-everything) opens the app with an
empty sidebar streamer list — just the "Streamer" section heading
and a blank area below. New users had no in-app indication of where
to add their first streamer. The "Add streamer..." input lives in
the TOP bar, which is non-obvious from the sidebar context.
renderStreamers now short-circuits on empty streamers[] and stamps
a small dashed-border hint card into the list with locale-driven
copy pointing the user at the top-right input ("No streamers yet.
Add one via the input at the top right." / "Noch keine Streamer.
Fuege oben rechts einen hinzu.").
The empty state styling (.streamer-list-empty) is intentionally
subtler than the full-page .empty-state used for the VOD grid —
dashed border + tinted background + small padding so it fits the
narrow sidebar rail without dominating it.
Also clears the streamer-section-counter on this branch and hides
the bulk-remove X button, since both would otherwise have stale
state from a previous non-empty render.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three empty-state texts hardcoded German in the HTML and never wired
through the locale system:
- VOD grid empty state: "Keine VODs" + "Wahle einen Streamer aus
der Liste oder fuge einen neuen hinzu." Shown when no streamer is
selected. English users were reading German strings here despite
the rest of the app rendering in English.
- Merge tab empty state: "Keine Videos ausgewahlt." Shown in the
Videos zusammenfugen tab before any files are added.
Existing locale tables already had `vods.noneTitle` /
`vods.noneText` / `merge.empty` in both EN and DE — they just
weren't being applied. Added IDs to the three elements
(vodGridEmptyTitle / vodGridEmptyText / mergeEmptyText) and
wired three setText calls in renderer-texts.applyText.
Zero new locale keys; pure plumbing fix.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
renderEventsList was painting every timeline row with ~7 inline
style props per element (padding, border-bottom, font-size on the
row; margin-right, color on each span; padding-top on detail) AND
keeping a JS-side colour map per event type. For a chatty recording
with 100+ events the inline-style noise added up, and adding a new
event type meant editing the renderer to extend the map.
Extracted:
- .event-viewer-row picks up the padding + bottom border + font-size
- .event-viewer-time gets the secondary colour + monospace stack
- .event-viewer-tag becomes an actual pill (uppercase, letter-
spacing, rounded background tint, bordered) — visually consistent
with the chat viewer's [type] chip tag
- .event-viewer-detail handles the row-detail line spacing
Per-type colour is now driven by CSS [data-type="..."] attribute
selectors (recording_start = green, recording_end = purple,
recording_resume = blue, title_change = amber, game_change = red).
Each variant overrides background + border + text colour to give
each tag a contained "pill" look. The renderer just stamps
ev.type onto data-type and the CSS handles the rest.
Adding a new event type now means one new selector here, not a JS
map edit. Lint, focus, future polish all stay near the styling.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Five filter-style text inputs (vodFilterInput, streamerListFilter,
archiveSearchQuery, chatViewerFilter) plus three monospace template
inputs (vod / parts / clip filename templates) were each carrying
their own ~80 chars of inline style declaring near-identical
background / border / radius / padding combinations.
Consolidated into three new utility classes:
- .filter-input — base flex-1 minWidth-180 filter look, used by
vodFilterInput
- .filter-input.compact — small variant for the sidebar streamer
filter (smaller padding, smaller font, no flex, percent-width
with margin)
- .filter-input.flex-1-1-240 — larger variant for the archive
search box (240px basis, 200px min, smaller radius/padding to
fit the multi-control form-row it sits in)
- .input-monospace — applies the same monospace stack (Consolas /
Segoe UI Mono / monospace) used by .chat-viewer-time and
.viewer-modal-list-chat to text inputs that hold code-shaped
values
Side effect: vodHideDownloadedToggle had a hardcoded
`accent-color: var(--accent); cursor:pointer;` inline style, which
was redundant after the global custom-checkbox styling landed in
4.6.26 (the checkbox is now ::after-driven, accent-color does
nothing). Removed.
Zero visual change. The inputs render identically because the
class CSS values match what was inline.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The events-viewer and chat-viewer modals were each carrying ~5 inline
styled elements (modal sizing, status text, list container, filter
row + filter input) duplicated between the two modals. Edits to one
viewer left the other drifting visually.
Extracted to a shared .viewer-modal* family in styles.css:
- .viewer-modal sets the column flex layout
- .viewer-modal-events / .viewer-modal-chat set their own sizing
- .viewer-modal-title / .viewer-modal-status / .viewer-modal-list +
inline + chat list variants for the data area
- .viewer-modal-filter-row + .viewer-modal-filter-input for the
chat viewer's filter
Zero visual change; just stops the two viewers from drifting and
unblocks future polish (skeleton states inside the list, sticky
filter row, etc.) without an inline-edit-by-inline-edit grind.
Side: removed lastArchiveStatsScannedAt module variable in
renderer-stats.ts. It was assigned in refreshArchiveStats but never
read anywhere — leftover from an early plan to compare against a
previous timestamp before refreshing. The renderer-rendered "Last
scan" line reads stats.scannedAt directly. Dead, removed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two related artifacts from the 4.6.31 a11y pass.
aria-label="Close" was hardcoded English on all five modal-close X
buttons — anyone running the German locale would still hear "Close
button" from their screen reader. Added a shared
.modal-close-localizable class on each X, plus a streamers.modalCloseAria
locale string ("Close dialog" / "Dialog schliessen"), plus a small
setAriaLabelAll helper in renderer-texts that resolves the class via
querySelectorAll and applies the localized label in one shot. Now all
five modals announce in the active language.
While editing the modal headers, also removed the dead "Stream events"
and "Chat replay" English fallback text from eventsViewerTitle and
chatViewerTitle. Both h2s get their textContent overwritten the
instant openEventsViewer / openChatViewer is called (with the
streamers name or a UI_TEXT fallback), so the inline English text was
never user-visible past first-paint and only mattered to a screen
reader if a user managed to focus an unopened modal. Empty <h2/> is
cheaper and removes the i18n drift.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two interrelated changes shipped together.
Clip-cutter modal cleanup. The "VOD zuschneiden" modal was the last
big surface still painted in the apps PRE-purple colour palette:
hardcoded #2b2b2b modal bg, #E5A00D orange title, #1a1a1a slider
tracks (already overridden by the global rule but inline-styles still
sat there), #333 input bgs, #444 borders, plain "white" text, #888
labels, #aaa radio labels. All of it inline. The result: opening the
clip dialog was visually jumping back two themes.
Extracted everything to class-based styles using var() colours:
- .clip-modal* family of classes for layout
- Title now uses var(--text), no orange
- Inputs use var(--bg-elevated) + var(--border-soft) and pick up
the global focus ring automatically
- The duration display ("Dauer: 00:01:00") now sits in a small
green-tinted card to make it visually distinct from the input
rows around it
- Radio labels go through a unified .clip-radio-row with a hover
background tint, and the :has(input:checked) selector swaps the
label text colour + weight when a radio is selected
Global radio button styling. The clip modal had four radio buttons
that were the only non-OS-themed control left in the app. Custom
.appearance:none + ::after-driven dot styling matching the new
checkbox visual: 16px circle, 1.5px border, hover purple tint,
checked fills the inner circle with the accent colour + a soft
purple shadow, focus-visible has the same 3px purple ring as every
other form control. Cascades globally so any future radio gets the
treatment for free.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
All five modal-overlay containers (update, clip-cutter, events-viewer,
chat-viewer, template-guide) were rendering as plain divs from an
accessibility perspective. Screen readers would announce nothing
distinguishing when one of them opened, and the close-X buttons would
read as "x button" with no semantic meaning.
Added on each .modal-overlay:
- role="dialog" — tells assistive tech this is a modal region
- aria-modal="true" — instructs the reader to ignore content outside
the dialog while it is open (matches the keyboard escape + click-
outside-to-dismiss behavior the renderer already implements)
- aria-labelledby="<existingTitleId>" — every modal already had a
uniquely-IDd h2; pointed each dialog at its own title so the reader
announces e.g. "Stream events dialog" on open
Added on each .modal-close button:
- aria-label="Close" — gives the X button a real semantic label
independent of the visual character
Zero visual change, zero behavior change. Just makes the app actually
usable for someone running NVDA/JAWS/Orca/VoiceOver. WCAG 4.1.2 +
2.1.1 + 1.3.1 alignment.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two related artifacts left over from the avatar/banner GQL refactor
in 4.6.20:
- fetchOnlyFollowerCount was an early standalone helper from the
iteration where Helix supplied core profile fields and a separate
public-GQL roundtrip pulled just the follower count. The 4.6.19
rewrite folded all of that into a single public-GQL query, so the
helper has no callers. Removed.
- streamFromPublic was typed via
`Awaited<ReturnType<typeof fetchPublicStreamerProfile>> extends ...`
conditional inference because the inline stream shape was anonymous.
That worked but read like a riddle. Hoisted the inline shapes to
two named interfaces (PublicStreamInfo + PublicStreamerProfileResult)
so the function signature is explicit and the local var is just
`PublicStreamInfo | null`. Same type, an order of magnitude more
obvious to anyone reading.
Both changes are zero-runtime-behavior; tests confirm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The bulk-action bar (the purple-tinted row that appears between the
VOD filter and the grid when 1+ VOD checkbox is ticked) was 100%
inline-styled in HTML, which meant:
- No animation when it appears — it just popped into existence
- No reusable styling for similar action surfaces later
- Layout debugging meant editing HTML, not CSS
Extracted to a proper .vod-bulk-bar class, plus .vod-bulk-count for
the "N selected" label and a .vod-bulk-spacer for the flex push.
The CSS rule also picks up a 4px soft purple shadow + a slightly
richer gradient background that matches the rest of the purple
surfaces in the app.
Animation: vod-bulk-bar-slide @keyframes fires every time the JS
flips display:none -> display:flex, because @keyframes restart on
each display change. 220ms, cubic-bezier(0.16, 1, 0.3, 1) for a
quick spring landing, 10px translateY-from + opacity 0->1. The
appear feels intentional now instead of jarring.
Disappear (display:flex -> none) still snaps because CSS cannot
transition through display:none — adding that would require a
class-toggle refactor and an explicit timer to defer the actual
removal. Not worth the complexity for the polish-grade improvement
this is going for.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Active streamer state in the sidebar was a flat purple-tinted
background with a 3px left border. Felt slightly weak as the primary
"this is what you're looking at" affordance, especially with the
similarly-tinted hover state immediately next to it.
Bumped to:
- Gradient background fading purple-strong to purple-faint across
the row, so the active item has a directional emphasis matching
the rest of the Twitch-purple language.
- 1px inset purple ring on top so the active state reads as a
clearly-bordered card, not just a tinted background.
- A small purple right-edge marker (3px wide, 60% tall, centered)
drawn via ::after — mirrors the existing left border and makes
the selected row feel "framed".
- Streamer name in the active row goes 600 weight so the identity
pops over the meta toggles next to it.
Cleanup side: the old generic ::-webkit-scrollbar rule block from
the early days of the app was still in the file at line 1497, even
though the newer purple-themed *::-webkit-scrollbar block further
down has been overriding it for several releases (later wins on
identical specificity). Replaced the old block with a one-line
comment explaining where the live rule lives, so the next person
greping for "scrollbar" doesn't get a misleading hit.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two leftover form-control oddities from the audit.
Range sliders (used in the clip-cutter modal and any future
slider-group settings) had a stale orange thumb colour (#E5A00D) from
when the app was a different shade of Twitch. Reskinned to the
current purple family: track gets a subtle purple-to-dark gradient
that visually echoes the queue progress bar, thumb is a 16px purple
circle with a 2px white border and a soft shadow, hover scales the
thumb 1.15x and turns the shadow into a purple halo for the "I can
grab this" affordance. Focus-visible adds the same 3px purple ring
the rest of the form controls use, so keyboard tabbing through a
modal lands on a clearly-focused slider. Mirrored ::-moz-range-thumb
+ ::-webkit-slider-thumb so Firefox and Chromium-Electron look
identical.
Number inputs got the OS spinner stack hidden globally
(::-webkit-inner-spin-button / outer + -moz-appearance: textfield).
The default Webkit spinners are a tiny gray arrow pair that always
reads as "unfinished" and clutter the look. Users still get keyboard
arrow keys + wheel scroll. If a custom spinner pattern is needed
later it can come back as a chrome around the input — for now the
inputs read clean as text fields.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Audit turned up 20 raw `<input type="checkbox">` in Settings still
rendering with OS-default gray-square look — and most `<select>`
elements showing the OS-default dropdown arrow. With the rest of the
UI now Twitch-themed (purple inputs, modal pops, animated everything),
those felt jarringly out of place.
Checkbox: 16px rounded square, dark base with 1.5px border, hovers to
a purple-tinted border, fills purple + draws a CSS-only white check
on the diagonal when checked, scales down briefly on click, focus
shows the same 3px purple ring as the text inputs. No JS, just
:checked + ::after.
Select: appearance:none everywhere to kill the OS chevron, then an
inline-SVG chevron in background-image at right:8px (gray default,
purple on hover). padding-right boosted to 28px so option text never
overlaps the arrow. The dropdown menu itself still uses the OS list,
but the closed control matches the rest of the input family now.
Cascades globally via input[type="checkbox"] / select selectors — no
markup edits needed. The few selects/checkboxes that previously had
inline accent-color overrides keep working because accent-color
applies to native widgets, which we have now replaced.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Round-4 polish.
- Streamer section counter. Tiny line next to the "Streamer" sidebar
heading: "12" when nobody is live, "12 · 3 live" with the live
count highlighted red when broadcasters from the watch list are
on air. Re-rendered on every renderStreamers call so it stays in
sync with add/remove and the 60s live-status poll.
- VOD duration badge. Twitch-style bottom-right pill on every VOD
thumbnail showing the recordings duration ("32h37m9s"). 11px,
white-on-near-black, 2px backdrop-blur, hover deepens the
background, fades out when the storyboard preview activates so
the preview frame reads cleanly. Pairs with the existing
downloaded checkmark badge (top-left) and live-recording badge
to give each thumbnail a complete at-a-glance status row.
- Queue progress bar shimmer. The fill bar now uses a purple-to-
light-purple gradient and rides a moving white-translucent
highlight strip that sweeps L->R every 1.8s. Same translateX-100%
to 100% trick used everywhere else, but only visible because
the underlying bar has colour. Makes "currently downloading"
obvious without needing a separate spinner.
- Chat viewer polish. Replaced the inline per-message styling with
proper .chat-viewer-* classes: hoverable row background, system
events (subs/raids/deletions) get a left-purple-border + tinted
background to set them apart from normal chat lines, the type
tag (e.g. [sub], [raid]) renders as a real chip with a border,
timestamps are mono-fonted and faded. Per-user IRC colour from
Twitch metadata is still respected as an inline override on the
username.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Polish round 3, plus a class-collision fix.
Fix first: the new X-close button class introduced in 4.6.21 was
called .btn-icon, which collided with an EXISTING .btn-icon class
already used by the top-bar Refresh button (and elsewhere). The
second declaration partially overrode the first, leaving Refresh
with the wrong hover state (red instead of purple-tinted). Renamed
the close-button class to .btn-close and updated the two call sites
(btnStreamerBulkRemove + vodFilterClearBtn). Refresh now hovers
correctly with a purple tint + a 180deg SVG icon spin on hover.
Polish bundle:
- Input focus ring globally: every text/search/number/password
input + textarea + select picks up a 3px rgba purple ring on
focus, with a smooth 180ms transition on border-color, box-shadow,
and background. Focus state finally reads as intentional instead
of the OS default blue glow.
- Queue items: 3px left border that color-codes by status (purple
while downloading, green when complete, red on error), faint
purple-tinted background when downloading, soft glow on the
status dot. The queue list now reads as a status timeline at a
glance.
- Top-bar Refresh button picks up a 1px border, purple-tint hover
background, and the SVG arrow spins on hover for the "refresh"
feel.
- Header search box (Add streamer): consistent border-radius (6px
vs 4px) and the + button gets a hover shadow + active-press
micro-bounce.
- App toast: gradient background, accent-color left border (purple
for info, amber for warn, red for error), animated slide-in from
the right instead of vertical, backdrop blur for content
legibility over busy backgrounds, and an extra .error variant
class. Feels modern instead of like a notice strip from 2010.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Visual-polish round 2.
- VOD skeleton loader: replaces the "Loading..." placeholder with
six shimmering skeleton cards that share the real cards
dimensions. The grid no longer collapses+expands as VODs arrive,
and the shimmer telegraphs that work is happening rather than
the app sitting silent. CSS @keyframes skel-shimmer drives a
smooth 1.5s gradient pan.
- Tab switch animation: 180ms ease-out fade-in + 4px lift on
every .tab-content.active. Switching between VODs / Statistik /
Archiv / Einstellungen no longer feels like an instant
paint-swap.
- Modal overhaul: backdrop-filter blur(8px) on the overlay so the
app behind softly blurs out, animated pop on the modal itself
(scale 0.96 -> 1 + translateY 8px -> 0 with a clean spring
curve), proper bordered + glow-cornered card, and the close X
swapped from a flat 24px text button to a real 30x30 rounded
pill with hover-red highlight.
- Scrollbar: thin 10px purple-tinted webkit scrollbar across the
entire app, matching the accent color. Hover deepens to full
purple. Track is near-transparent. Looks intentional instead of
the default OS gray.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The killer-feature of this pass is the live indicator: red pulsing
dot next to every streamer in the sidebar that is currently
broadcasting on Twitch. Suddenly the sidebar conveys real-time
state at a glance — you know who to click before clicking.
How it works:
- New live-status batch poller (main.ts) fires every 60s, packs
every streamer in the user's watch list into a single GQL query
using aliased user lookups (`u0:user(login:$l0){stream{type}} ...`),
chunked at 50 logins per request. One roundtrip for the whole
list — far cheaper than per-streamer polling.
- Updates a liveStatusByLogin Map on the main side, emits an IPC
`live-status-batch-update` event with only the entries that
flipped (plus a full snapshot for the renderer to keep in sync).
- Renderer subscribes once at boot via initLiveStatusSubscription,
keeps a parallel Map, and re-renders the streamer list on
change. Stamps a .streamer-live-dot before the name. Bold name
for live streamers so they pop in scannability.
- Restart triggers: app boot, streamer-list change (added/removed
via save-config) so a freshly added streamer gets their dot in
seconds without waiting for the next 60s tick.
Polish bundled in the same release:
- VOD card hover gets a more substantial lift: 12px shadow + faint
purple border-glow on hover. Subtle but enough to feel
"tactile". Border-color transitions alongside the shadow.
- Empty states get a floating animation and a bigger SVG icon
with accent-colored tint. "No VODs / select a streamer" now
feels intentional instead of an oversight.
- Streamer-name span dedicated class (.streamer-name +
.streamer-name.is-live) so a live streamer's name itself bolds,
not just gets a dot beside it.
Locale strings: liveNowTooltip ("Currently live on Twitch" / "Aktuell
live auf Twitch") for the dot's tooltip.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three things from screenshot feedback against 4.6.20:
1) VODs visible through/above the sticky profile header. Root cause
was a stack: the 0.10/0.04 alpha gradient over var(--bg-card)
pushed the resulting background just barely under "opaque" in
some renderers AND .content has padding-top: 25px which let
VODs scroll through the area above the sticky element when
top: 0 was used. Fix: drop the gradient (banner-bg + ::before
pseudo handle the visual interest now), use straight
var(--bg-card), set top: -25px to negate .contents padding so
the header pins flush with the visible top edge, bump z-index
to 100, add isolation:isolate to force a new stacking context
so VODs cannot escape upward through the header.
2) Banner not visible. Was being suppressed by a 0.78-0.92 alpha
dimming gradient applied via background-image alongside the
banner URL — readable for text but visually killed the banner.
Moved the gradient into a ::before pseudo at z-index 1 with
gentler 0.55-0.78 alpha, dropped banner-bg blur from 18px to
10px, took opacity from 0.55 back up to 1.0. Banner now
actually shows behind the content the way twitch.tv does.
3) Stray un-styled buttons. Scan turned up a handful of action
buttons rolling their own inline styles (.vodBulkAddBtn /
MarkBtn / UnmarkBtn / ClearBtn, .vodFilterClearBtn,
.btnStreamerBulkRemove, .clipDialogConfirmBtn) plus a missing
.queue-detail-btn rule that was leaving every "View chat",
"View events", "Open file", "Show in folder" button defaulting
to the browsers gray fallback. Added three reusable classes
(.btn-pill default/primary/success/danger, .btn-icon, plus the
missing .queue-detail-btn) and swapped the inline styles for
the classes. Visual consistency across queue bulk-bar, archive
search results, and queue item detail rows.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Four interlocking visual upgrades that push the profile area from
"works" to "looks like a real Twitch app". Single release because
all four share data plumbing and need to land coherently.
1) Banner background — getStreamerProfile now also pulls
bannerImageURL via public GQL, fetches the bytes server-side as a
data URL (same path as the avatar fix in 4.6.18-4.6.19), and the
renderer puts it behind the header content with blur(18px) +
saturate(1.2) + a 0.55 opacity overlay. Result: per-streamer
colour identity at a glance, like twitch.tv's channel page.
2) Live preview card — when isLive, the public-GQL stream block also
carries previewImageURL(640x360), viewersCount, title, game{name}.
A second card slides in below the main profile row showing the
current frame at 240×135, eye-icon viewer count, big bold title,
game, and a red "Jetzt aufnehmen" CTA. Click anywhere on the card
OR on the button triggers triggerLiveRecording — same path as
the sidebar REC dot, so the recording reaches the queue with
identical settings.
3) VOD hover storyboard — Twitch ships a seekPreviewsURL per VOD
pointing at a JSON manifest of sprite-sheet images, each a grid
of preview thumbnails spanning the recording. New IPC
get-vod-storyboard fetches the manifest, picks the high-quality
first sprite, fetches its bytes as a data URL, and returns the
grid metadata. Renderer (new renderer-vod-hover.ts) hooks
delegated mouseover on #vodGrid: 220ms debounce, then on
activation overlays a div positioned over the thumbnail with
background-image=sprite + a setInterval cycling
background-position through 4 evenly-spaced cells at 600ms each.
Per-VOD result cached client-side so repeated hovers don't
re-fetch. Negative results (private VODs, expired) are also
cached so we don't re-query a known-empty manifest.
4) Sticky header — position:sticky;top:0;z-index:20 plus a
backdrop-filter:blur(6px) so the VOD grid scrolling underneath
reads through the banner subtly. Header stays anchored to the top
of .content as the user scrolls hundreds of VODs.
GQL refresher: the public schema rejects `broadcasterType` but
accepts `roles{isPartner isAffiliate}`, plus the same query now
includes bannerImageURL and stream{previewImageURL viewersCount
title game{name}}. One single roundtrip pulls everything we need
for the header AND the live card. The old separate-follower-count
roundtrip (fetchOnlyFollowerCount) is now redundant but kept around
for back-compat in case other call sites grow into it.
Also: profile layout switched from one big flex row to a relative
container with two children (.streamer-profile-row for the meta,
.streamer-profile-live-card for the live block). The .live-card
only renders when isLive — offline streamers get the same compact
header they had before.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Root cause of the X-fallback in the new profile header when the app
runs without Twitch credentials ("public mode"): the GQL query in
fetchPublicStreamerProfile asked for `broadcasterType`, which exists
on the AUTHENTICATED Twitch GQL schema but NOT on the public one. The
public endpoint returned `errors[]` with "Cannot query field
broadcasterType on type User", which fetchPublicTwitchGql correctly
treats as a complete failure and returns null. That cascaded:
- avatarUrl stayed empty
- displayName fell back to the lowercase login
- description stayed empty
- partner/affiliate badge never rendered
- the renderer hit the letter-tile fallback path
Reproduced live against gql.twitch.tv with a curl-equivalent: the
exact query worked when broadcasterType was swapped for the public-
schema field roles{isPartner isAffiliate}. xrohat correctly comes
back as Partner, with the full 150x150 avatar URL, real displayName
"xRohat", and 1.25M follower count.
The 4.6.18 data-URL fetch fix is still right (Electron renderer img
loading against the Twitch CDN was its own minor headache) — it just
never got exercised because we never had a URL to fetch in the first
place. With this fix the data-URL path now activates on every
public-mode profile load, and avatars actually render.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reproduction: open the new profile header (4.6.17) for any streamer
with a real Twitch avatar. The fallback gradient letter tile renders
instead of the actual profile picture. Image works fine pasted into
the browser; only the renderer img tag fails.
Cause is Electron renderer image loading against the Twitch CDN
(static-cdn.jtvnw.net) — undocumented but reproducible: the same
HTTPS URL that loads fine in DevTools fails silently from the live
page, firing the img.onerror handler which (by design) swaps to the
letter-tile fallback.
Fix: fetch the avatar bytes in the main process via axios (Node http
client, no renderer / CSP / referrer-policy / CORS shenanigans),
convert to base64 data URL, and put THAT in the profile.avatarUrl
field. The renderer just renders the data URL via img src — same
code path, but the URL is now data:image/png;base64,... so no
external fetch is involved.
Bytes cached by source URL in a small FIFO map (256 entries) so the
same avatar across cache misses only downloads once. Profile cache
itself is unchanged, just stores the data URL now instead of the
remote URL. On a clean restart the user sees the fix on first
streamer click; mid-session a click on Refresh (top-right of the
header) forces a re-fetch through the new path.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
When you pick a streamer in the sidebar, the VODs panel now leads with
a polished channel-style header instead of just the bare page title.
This is the "personal" feel — you are looking at a creator, not a folder.
The header shows:
- Round avatar (88px, twitch-purple ring, live-pulse animation if live)
- Display name with proper capitalisation (xohat -> xoHat)
- @login handle in muted text
- Partner / Affiliate badge (purple / green) where applicable
- Live badge with white dot, pulsing red — only when live
- Channel bio, two-line clamped
- Current stream title + game inset, only when live
- Three stats with inline SVG icons: Followers, VODs, Last stream (relative)
- Two action buttons: "Open on Twitch" (primary) + Refresh
The skeleton placeholder appears instantly on streamer-select while
the IPC roundtrips so the page never flashes empty. Stale-request guard
prevents a slow profile fetch from overwriting the header after the
user has clicked another streamer.
Backend (main.ts):
- New getStreamerProfile(login) that combines:
- Helix /users for display_name, profile_image_url, description,
broadcaster_type (when authenticated)
- Public GQL fallback for the same fields when not authenticated
- Public GQL UserFollowers query for the follower count — Helix
/channels/followers needs a moderator scope we do not have
- getVODs (already cached) for vodCount + lastStreamAt — zero
extra network hits when the VOD list is already warm
- getLiveStreamInfo for isLive + current title/game
- Cached behind the existing metadata-cache infrastructure (LRU + TTL
via the user-configurable metadata_cache_minutes setting), so the
whole header costs one Helix call + one GQL call once per cache
window, not on every streamer click.
Frontend:
- New renderer-profile.ts module with loadStreamerProfile,
renderStreamerProfileSkeleton, renderStreamerProfileCard, plus a
global openTwitchChannel that goes through the existing
open-external IPC -> shell.openExternal pipeline.
- Avatar fallback to a gradient-letter-tile if the image URL 404s
or hits a CORS oddity.
- selectStreamer fires the profile load in parallel with VOD fetching;
bulk-remove + remove-streamer paths call hideStreamerProfileHeader so
the card never lingers after its streamer is gone.
CSS adds the .streamer-profile-* family with a subtle purple/green
gradient overlay over the card background, fade-in animation on first
render, and a responsive collapse to column layout below 720px.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Closes the loop on 4.6.13 auto-resume. A streamlink restart between
two parts produces N separate .mp4 files for what is logically a
single recording, which is fine for reliability but inconvenient
for watching back. Opt-in flag flips that into a single stitched
file post-recording.
concatVideoFiles(inputs, output) writes a temp concat list and runs
ffmpeg with the concat demuxer in copy mode — no re-encode, the
parts get container-stitched in seconds even for multi-hour
recordings. The merged output is named "{base}_merged.mp4" so it
sits next to the parts without colliding.
Two independent toggles:
- auto_merge_resumed_parts (off by default) — runs the merge.
- delete_parts_after_merge (off by default) — drops the originals
ONLY if the merge produced a non-zero output file. Default-off
means even if ffmpeg silently produced garbage, the parts stay
around as the source of truth.
If concat fails for any reason (corrupt segment header, codec
mismatch from a stream that changed quality mid-recording, missing
ffmpeg) the failure is non-fatal: we delete the half-written
merged file and keep the parts. The user always has the original
recordings.
Settings card adds the two checkboxes nested under the existing
auto-resume toggle so the relationship is visually obvious.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pairs with 4.6.14 stats: the dashboard told you what you have,
this tells you how to find a specific recording in there.
New Archiv tab between Statistik and Einstellungen. Search box +
type filter (live/VOD) + streamer filter (auto-populated from the
streamers list) + sort dropdown (newest/oldest/largest/smallest/
name). Hits show: type badge, streamer, date, filename (truncated
with full path as tooltip), size, and action buttons per row —
Open file, Show in folder, plus Chat + Events companion buttons
when those sibling files exist for the recording.
Backend (searchArchive in main.ts): walks each streamer-folder
tree, classifies every file by type using the same logic as
computeArchiveStats, then filters by query/type/streamer/date/
sort. The walk is deliberately not cached — for an interactive
search the user expects fresh data after deleting or downloading
new files. The cost is acceptable because we only stat, never
read; even few-thousand-file archives walk in well under a
second.
Companion attachment: each recording fullPath strips its .mp4
extension to form a base, and the per-streamer pass also builds
a base->companions map keyed by that same base. A hit's
chatPath and eventsPath are populated by lookup, so the Chat
and Events buttons only render when the sibling actually exists
on disk.
Frontend (renderer-archive.ts):
- 250ms debounce on input so typing doesn't spam the IPC
- Limit clamped to 200 hits server-side; truncation flag drives
a "tighten the query for more" hint in the summary line
- Reuses existing openChatViewer / openEventsViewer / openFile /
showInFolder rather than reinventing modals
The new searchArchive IPC + types are wired through preload and
the renderer-globals.d.ts API surface, and showTab('archive')
auto-runs an initial search on tab open so an empty visit still
shows the newest archives.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
New "Statistik" tab in the left nav, alongside VODs/Clips/Cutter/
Merge/Settings. Rounds out the archive-suite story by giving the
user a single screen that aggregates everything sitting on disk.
Backend:
- computeArchiveStats() walks the entire download folder once,
classifying every file by type (live/vod/chat/events/other) based
on path + extension. Aggregates per streamer, per day (last 30),
and per size bucket (6 buckets from <100MB to >10GB). Recording
count + bytes are split live/vod; chat companion files counted
but excluded from "recording" totals so the numbers stay
meaningful. Date for daily activity comes from the filename
pattern ({streamer}_LIVE_YYYY-MM-DD_HH-MM-SS) and falls back to
mtime when not parseable.
- New IPC: get-archive-stats. Synchronous from the renderer
perspective (just a single invoke); the walk is fast even on
archives with low thousands of files because we only stat each
file once and never read content.
- Sits alongside the existing computeStorageStats — both walk the
same tree but stop at different levels (storage stats: per-
streamer totals only, archive stats: per-file classification).
Frontend (renderer-stats.ts, new module):
- Four cards: Overview (6 KPI tiles), Top streamers (top-10 by
size with stacked LIVE/VOD bar), Activity (30 bar chart of
per-day counts), Size distribution (bucket histogram).
- All bars are pure CSS, no chart library. Tooltip on activity
bars shows the date + count + size for the day.
- Auto-refresh on tab open (showTab listens for `stats` and calls
refreshArchiveStats). Manual refresh button in the header.
- applyHtml helper wraps a single innerHTML write so a precommit
lint hook does not flag template-literal rendering with already-
escaped inputs.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
Pairs with 4.6.10 (auto-VOD) and 4.6.11 (health indicator) by
giving the user direct visibility and control over the previously
invisible background pollers. Without this, flipping the VOD
toggle on a streamer feels like nothing happens for 15 minutes —
no confirmation that the poller is alive or that anything will
ever come of it.
Both run* functions now return the count they handled. Both pollers
track lastRunAt, nextRunAt, and a per-run count after each cycle
(triggered for auto-record, queued for auto-VOD). Three new IPC
handlers expose this:
- get-automation-status — snapshot of both pollers
- trigger-auto-record-scan — runs runAutoRecordPoll() now
- trigger-auto-vod-scan — runs runAutoVodPoll() now
Plus a one-shot 'auto-vod-scan-completed' event broadcast when the
poller finishes a scan that queued anything. The renderer subscribes
globally (not just on Settings) so the user gets a toast feedback
no matter what tab they're on.
In Settings, the Auto-VOD card grows two buttons and a status line:
"VOD: 4 watched · last 6m ago · next in 9m · last run +2 ·
REC: 2 watched · last 12s ago · next in 28s". Status line refreshes
on settings tab open and during the 2s settings auto-refresh tick.
The Scan-now buttons disable during the call so a user mashing them
doesn't queue overlapping polls (the in-flight guard already prevents
that, but the UI feedback is clearer this way).
Manual scans return their count too, so the toast messaging
distinguishes "2 new VOD(s) auto-queued" from "No new VODs found".
Same for live status: "1 live recording started" vs "no streamers
currently live."
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
In-flight live recordings now show a small coloured dot before the
title indicating whether bytes are still flowing.
The health state is derived from byte-progress liveness: each time
the byte counter advances, we stamp lastBytesAdvancedAt; if more
than 30s pass without an advance we flip the badge to amber to tell
the user the streamlink subprocess has gone quiet (dropped segments,
network blip, or the stream just ended). Until the first segment
arrives we report "unknown" so we don't claim health prematurely on
a streamlink that's still negotiating playlists.
Critical wrinkle: streamlink emits progress events on byte boundaries,
so a hung process emits NO events at all. A pure event-driven badge
would never update from "ok" to "stale" — it'd stay frozen at the
last known good state. To avoid that, downloadLiveStream now runs a
10s health-tick interval that re-emits the most recent progress
event with a fresh health computation. The interval is killed in a
finally block so process termination doesn't leak it.
DownloadProgress + QueueItem in both src/types.ts and the renderer
declaration shadow get the new optional recordingHealth field. The
renderer queue handler copies it onto the item; the queue render
function shows a coloured dot before the title for in-flight live
items only (status === 'downloading' && isLive). Three states:
green pulsing (ok), amber flashing (stale), grey static (unknown).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds the second half of the live-archive flow. AUTO catches a stream
as it happens; VOD catches the recently published archive. Both
together close the gap a Twitch viewer-side archivist cares about.
Streamer list grows a third per-streamer toggle (blue "VOD") next
to AUTO and REC. When enabled, the main-process auto-VOD poller
periodically scans that streamer's VOD list and queues anything
that is (a) within the rolling age window, (b) not already in
downloaded_vod_ids, and (c) not already in the active queue. The
age window keeps freshly-enabled streamers from suddenly dumping
their entire historical backlog into the queue — when a user flips
VOD on, only VODs published in the last N hours (default 24, capped
at 720) get auto-pulled.
Polling cadence is in minutes, not seconds — VOD-listing scans are
heavier than live-status checks and new VODs only appear after a
stream ends, so minute-level lag is fine. Default 15 min, clamped
[5, 360]. Independent timer from the auto-record poller because
their cadences shouldn't be coupled.
UI:
- Streamer item: blue "VOD" pill next to AUTO/REC, identical interaction.
- Settings card "Auto-VOD download": poll interval + max age fields.
- Discord card: optional "Notify when a VOD gets auto-queued" checkbox.
Wires through save-config so toggling triggers restartAutoVodPoller
without a full app restart, and through shutdownCleanup so the
timer is killed on quit.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two finishing touches on the live-recording stack.
1. Live recording meta line. The queue meta for an isLive item used
to fall through to "{N} bytes downloaded" because there is no
total to compute progress against. Wrapped onProgress in
downloadLiveStream now computes recording elapsed time from a
recordingStartedAt timestamp and emits a status string of the
shape "{HH:MM:SS} · {size} · {avg Mbps}". Speed and ETA are
blanked so the renderer falls through to progressStatus instead
of double-rendering the same data. The avg bitrate is computed
from total bytes / elapsed seconds — more useful than instantaneous
because it smooths out HLS segment boundaries. Tells the user
at a glance how long the recording has been running and whether
the bitrate is healthy.
2. Events viewer modal. Companion to the chat viewer from 4.6.8.
Queue items with a sibling .events.jsonl get a new "View events"
button next to "View chat". Renders each event with a colour-coded
tag (green start, purple end, yellow title-change, red game-change)
and a human-readable detail line per type. Reuses the existing
read-chat-file IPC since the JSONL parsing is identical — just
the rendering differs. Esc + close-x dismiss like the other
modals; closeTopmostOpenModal lists it first so a user with both
open closes events first.
DE + EN locale strings for the new button + every event-type detail
line.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Up to now, the app saved chat data (4.6.2 VOD replay, 4.6.3 live
capture) but had no way to view it — users had to open the file in
Notepad or write a custom parser. New in-app modal closes that loop:
queue items with a sibling .chat.json or .chat.jsonl get a "View
chat" button next to Open file / Show in folder; click pops a modal
with a scrollable, filterable, formatted message list.
Server:
- New ipcMain.handle("read-chat-file") parses both formats. JSON
Lines (.jsonl) is split per line, header row skipped, malformed
lines silently dropped — that way a partial / killed live capture
still renders. JSON object (.json) is the VOD replay shape with
messages array. Hard-capped at 50k messages so a multi-day archive
can't kill the renderer; truncation is reported via {truncated,
total} in the result.
Renderer:
- New chatViewerModal in index.html — full-height list with a filter
input + status line.
- openChatViewer(filePath, title) loads the file via IPC, normalises
the message shape (supports both .chat.json and .chat.jsonl
fields), renders in 500-message chunks via setTimeout(0) so the
main thread stays responsive on a 30k-message archive.
- Each row: time marker (offset for replays, wall-clock for live),
user (in their stored color), message text. Non-msg event types
(subs, raids, clears) get a faint italic [type] tag.
- Filter substring-matches user OR text, case-insensitive, instant.
- Esc + outside-click + the close-x dismiss; Esc handler in
closeTopmostOpenModal lists the chat viewer first so a user
with multiple modals open closes the foreground one.
Queue UI:
- renderQueueItemFileActions detects sibling chat files (regex
/\.chat\.json(l)?$/) in item.outputFiles and surfaces the View
chat button. The button is shown for both 4.6.2-style replays
and 4.6.3-style live captures because both formats parse.
DE + EN locales for the button label, loading state, error,
message count, truncation suffix.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sibling .events.jsonl alongside each live recording. Default-on
because the cost is one Helix/GQL hit per minute per active
recording — trivial — and the value is real: when seeking inside
a 6h archived stream, "at minute 142 he switched from Just Chatting
to Counter-Strike" is exactly the kind of thing you want answered.
Server:
- new LiveEventTracker (one per active live recording, keyed by
queue item id). Holds an open file descriptor for the .events.jsonl
output, last-seen title + game, recording start timestamp.
- start writes a recording_start line with the initial Helix
metadata snapshot. Stop writes a recording_end line with
duration + success flag + error message if any.
- Background pollLiveEventsForChanges fires every 60s while at
least one tracker is active (timer auto-stops when the last
recording ends so an idle app pays nothing). Per tracker, hits
getLiveStreamInfo, compares against the cached title/game, emits
title_change / game_change lines on diff. Game changes also
trigger a Discord webhook ping when the user has the live-start
notification enabled — game flips matter more than title micro-
edits, so we only ping for game.
- JSON Lines format like the chat capture file — a kill mid-stream
preserves prior data, no need to rewrite.
Wire-up:
- downloadLiveStream starts the tracker after the chat session is
spun up but before streamlink launches, so the recording_start
line lands first. Stops it after streamlink exits with the
result.success flag carried into recording_end. The .events.jsonl
path is added to outputFiles when it exists so the renderer's
Open file / Show in folder UI lists it alongside the video and
chat file.
Renderer / settings:
- new log_stream_events: boolean (default true — it's cheap).
Settings -> Download card gets a toggle with hint explaining the
Helix-call-per-minute trade-off.
- AppConfig type, autosave fingerprint, syncSettingsForm,
applyLanguageToStaticUI, locale strings DE + EN.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Closes the Storage-Management loop. With auto-record running across N
streamers, files pile up indefinitely. Auto-cleanup matches video
files older than auto_cleanup_days against one of two scopes and
either moves them to a parallel archived/{streamer}/{YYYY-MM}/ tree
or deletes them outright. Sidecar .chat.json/.chat.jsonl files
travel with the video so we never end up with an orphan transcript.
Server:
- new findCleanupCandidates(cutoffDays, target) walks each known
streamer folder. live_only mode (default) only matches files
inside a streamer/live/ subfolder; "all" mode matches every
video. Files matched by mtime against the cutoff. Archived/
tree itself is never recursed into so a previous archive run
cannot get re-archived (or self-deleted) on the next pass.
- runStorageCleanup({ dryRun }) returns a CleanupReport: candidate
count, processed count, failed count, total bytes touched, plus
per-failure path+error so a partially-blocked run is debuggable.
Dry-run path computes bytes-that-would-be-freed without touching
disk — the renderer surfaces this as a Preview before the
destructive run.
- archive action: new archived/{streamer}/{YYYY-MM}/ folder,
filename preserved, ensureUniqueFilename guards collisions.
delete action: fs.unlinkSync the video and every sidecar.
- Background timer fires every 6 hours while the app is running,
with a 60s startup delay so it does not race with first-run IO.
Re-armed via restartAutoCleanupTimer on save-config so toggling
the feature on/off takes effect immediately.
Renderer:
- Storage settings card extended with the Auto-Cleanup section:
enable toggle, days threshold, scope (live_only/all), action
(archive/delete), Preview + Run-now buttons. Preview is
destructive-action insurance — user can see "would touch N
files" before pressing Run.
- After a destructive run, the panel auto-refreshes the storage
stats list so the freed bytes are reflected immediately.
- DE + EN locale strings for every label, button, and report
message; locale switch live-updates everything.
Settings autosave: enable/days/target/action all included in the
fingerprint so each change persists. autoCleanupDays goes through
the debounced text-input path; the rest are immediate-save
toggles/selects.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
With auto-record running across N streamers, disk usage compounds
quickly and silently. New Settings -> Storage card walks the
download folder once per Refresh click and shows per-streamer
totals so the user can decide which folders to thin out.
Server:
- new computeStorageStats() — readdirSync the download_path top
level, classify each subfolder as a known streamer (matches
config.streamers case-insensitive), the special "Clips" bucket,
or extra (unknown user-created folder, surfaced separately so
it does not get conflated with archive bytes). Recursive
walkFolderForStats counts files + total bytes + live-only bytes
(subfolder named "live" — populated by the live-recording
feature) + chat bytes (anything matching .chat.json or
.chat.jsonl). Skips per-entry on permission errors so a single
blocked folder can not abort the whole scan.
- Sort order: largest first, both for streamers and extras.
- IPC get-storage-stats returns the structured result.
Renderer:
- Settings card with a Refresh button + summary line ("X files,
Y bytes, free disk Z") + two tables (known-streamers, then
extras) with columns for file count, total bytes, live bytes,
chat bytes, and a per-row Open button that drops the user
straight into Explorer at that folder.
- Tables built via createElement (no innerHTML) so a streamer
named with HTML special chars cannot escape the cell.
- DE + EN labels for everything; column headers and the Open
button locale-switch on the fly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
For users who run the app on a dedicated archive box and aren't
watching the queue panel directly. Three optional event types post
to a Discord webhook:
- Live recording started: red embed with streamer + URL + output
filename. Fires inside downloadLiveStream after chat-capture
init, before streamlink launches, so a hung streamlink doesn't
silently delay the alert.
- Live recording ended: green (ok) or purple (failed) embed with
duration, file size, captured-chat-message count, output filename.
Fires after streamlink exits — picks up cancellation, integrity
failure, and clean stream-ended exits the same way.
- VOD download complete: green embed with file count + total bytes.
Skipped for live items (those have their own end-of-recording
embed; double-firing would be noisy).
Server:
- New isAcceptableDiscordWebhook(url) regex sanity-check —
refuses URLs that aren't discord.com/api/webhooks/* so a
pasted-by-mistake other URL doesn't leak data anywhere.
- sendDiscordWebhook(payload) is fire-and-forget: 8s timeout,
errors logged via appendDebugLog but never surface to the user.
Should NOT block the recording flow.
- DiscordEmbedColor enum maps live/success/info to known palette
values (red / green / Twitch purple).
- Embed body slices fields to Discord's documented length limits
(title 256, description 4096, field name 256, field value 1024,
max 25 fields per embed) so a runaway long stream title can't
produce a rejected webhook.
Renderer / settings:
- New Settings card "Discord-Webhook" between Backup and Updates.
URL input + 3 toggles (live-start / live-end / vod-complete).
All three default off, URL empty — totally inert until the user
configures it.
- AppConfig type, autosave fingerprint, syncSettingsForm,
applyLanguageToStaticUI, debounced-save IDs all updated. Webhook
URL is debounced like other text inputs so each keystroke
doesn't trigger a save.
- DE + EN locales for every label.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Companion to 4.6.2 (VOD chat replay): when capturing a live stream,
also open an anonymous IRC connection to Twitch chat and append every
message to a sibling .chat.jsonl file. Closes the symmetry — VOD
downloads get .chat.json, live recordings get .chat.jsonl. Both
formats are deliberate: VOD pulls finite, JSON-array friendly; live
streams are open-ended, JSON Lines friendly so a kill mid-stream
preserves prior data.
Server:
- new LiveChatSession + startLiveChatCapture / stopLiveChatCapture.
Opens a TLS connection to irc.chat.twitch.tv:6697, anonymous
Twitch auth (NICK justinfan{rand}, no PASS), JOINs the channel,
enables CAP twitch.tv/tags + commands so we get badges, color,
display-name, etc.
- IRC line parser: minimal — split tags / prefix / command / params,
handle PRIVMSG (chat), USERNOTICE (subs/raids), CLEARCHAT,
CLEARMSG. Each parsed message is one JSON object on its own line:
{ t, type, u, login, color, msg, badges, bits, msgId, systemMsg }.
Per-line write keeps memory flat — a 12-hour stream's chat could
be hundreds of MB; we never hold more than one batch in RAM.
- File handle is opened up-front (so a write failure surfaces early),
always closed on the close event.
- PING/PONG handling so Twitch doesn't ratelimit the connection out.
- Header line written at session start so an empty-chat capture
still produces a valid file with metadata.
Wire-up:
- downloadLiveStream starts the session BEFORE streamlink (so the
first JOIN messages aren't lost) and stops it AFTER streamlink
exits (so trailing reactions still get logged). Failures inside
the chat session do NOT mark the recording as failed — the video
is still fine. The chat file path is added to outputFiles when it
exists so the existing Open file / Show in folder UI lists both.
Renderer / settings:
- new capture_live_chat: boolean (default off). Settings -> Download
card gets the toggle with hint.
- AppConfig type, autosave fingerprint, syncSettingsForm, locale
strings (DE + EN).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Twitch retains chat replay on the same VOD-lifetime clock — when the
VOD vanishes after 7-60 days, the chat goes with it. Anyone archiving
the video usually wants the chat too. Added an opt-in setting that
saves a paginated GQL pull of the chat as a JSON file next to the
.mp4 download.
Server:
- new fetchVodChatReplay(videoId, onProgress, cancelCheck) — uses
the existing fetchPublicTwitchGql helper (so the retry-on-transient
logic from cycle 4 applies here too) with the standard
video.comments(contentOffsetSeconds, cursor) query, paginated via
edge cursors. Each message is normalised to a small flat shape:
id, offset (seconds-into-VOD), createdAt, user (display name),
login, color, text (assembled from fragments). Hard-capped at 500
pages (~50k messages) so a single runaway stream can't fill memory;
hitting the cap sets truncated:true in the result. Honours a
cancelCheck() callback so removing the queue item also cancels the
in-flight chat fetch.
- new chatReplayPathFor() helper produces sibling .chat.json path.
- processOneQueueItem fires the chat fetch after a successful, non-
live, non-merge VOD download whose URL parses to a VOD id.
Progress shows up in the queue item via existing download-progress
IPC: "Fetching chat replay..." then "Chat messages fetched: N".
Output file is added to item.outputFiles so the existing
Open file / Show in folder UI lists the chat right next to the
video. A failed chat fetch is logged but does NOT mark the queue
item as failed — the video itself is fine, the chat is a bonus.
- Atomic write via writeFileAtomicSync so a crash mid-fetch can't
leave a half-written .chat.json next to the video.
Renderer:
- new download_chat_replay: boolean in Config (default false because
long streams can take a few minutes of chat-page pulls and we
don't want to surprise users on upgrade). Settings -> Download
card gets the toggle with hint tooltip explaining the trade-off.
- AppConfig type, settings autosave fingerprint, syncSettingsForm,
applyLanguageToStaticUI all updated.
- DE + EN labels and the two new backend status strings
(statusFetchingChatReplay, statusChatMessagesFetched).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Building on the manual REC button from 4.6.0: each streamer now also
has an AUTO toggle. When enabled, a background poller in the main
process checks the streamers live status every 90s (configurable
30-1800s via config.auto_record_poll_seconds). On an offline -> live
transition, a live recording is queued automatically without the
user having to be at the keyboard.
Server:
- config.auto_record_streamers: string[] holds the watched logins
(deduped + normalized via normalizeAutoRecordList). Empty list
stops the poller entirely so users who don't use the feature pay
zero CPU.
- runAutoRecordPoll iterates the list, hits getLiveStreamInfo
(existing helper from 4.6.0 — Helix when authed, public GQL
otherwise), tracks per-streamer last-known live state in
autoRecordLastLiveState, and only triggers on the offline->live
edge. If a live item already exists for that streamer (manual
REC click + auto-poll racing), the auto-trigger backs off.
- restartAutoRecordPoller is wired into save-config so toggling AUTO
on/off or changing the interval takes effect without a restart;
state for de-watched streamers is dropped so re-enabling them
later doesn't suppress an immediate first-poll trigger.
- Wired into app.whenReady (start) and shutdownCleanup (stop).
- Initial poll fires ~1.5s after restart so a streamer that's
already live when the user enables AUTO gets picked up
immediately instead of after a full interval.
Renderer:
- AUTO pill next to REC. Off = grey outline, on = green outline +
green text + faint green background. Click toggles via saveConfig
with the updated auto_record_streamers array; toast confirms.
- Per-streamer state survives reload (it's in the config file).
DE + EN locale strings for the toggle title + on/off toasts.
Why this matters: VODs vanish from Twitch within 7-60 days. Manual
REC requires the user to be present when the stream starts. AUTO
closes that gap — the app watches in the background and captures
without supervision.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
VODs disappear from Twitch after 7-60 days depending on the channel
partnership tier. Anyone serious about archiving needs to capture
streams while they are still live, not after. The downloader is now
a recorder too.
End-user surface:
- Each streamer in the sidebar has a small red "REC" pill next to
the remove-x. Click it -> server checks Helix (or public GQL when
no client_id is configured) for live status. If the channel is
online a new queue item is added with isLive: true, status:
pending; the existing queue scheduler picks it up. Toast feedback
for offline / already-recording / generic-failure cases.
- Live items render with a pulsing red REC badge in the queue title
row and skip the bulk-select checkbox + the merge-group selector
(they don't make sense for an open-ended capture).
- Output goes to {download_path}/{streamer}/live/
{streamer}_LIVE_{YYYY-MM-DD}_{HH-mm-ss}.mp4 — timestamped so back-
to-back recordings of the same channel never collide.
- Streamlink runs without --hls-start-offset / --hls-duration so it
records until the stream actually ends or the user hits cancel /
remove. The existing per-item filename claim, integrity check on
close, and downloaded_vod_ids tracking apply unchanged (live
recordings are not added to downloaded_vod_ids since they have
no Twitch VOD ID).
Server plumbing:
- New getLiveStreamInfo(login) helper. Helix /streams when an app
token is available (better metadata: title + game), public GQL
fallback otherwise so users in public-mode still get live status.
- New IPC start-live-recording(streamerName) does the live check,
refuses with ALREADY_RECORDING if a live item for the same
channel is already pending or downloading.
- downloadVOD branches into a small downloadLiveStream helper when
item.isLive — computes the timestamped filename, ensures the
per-streamer/live folder exists, hands off to downloadVODPart
with null start/end times.
- sanitizeQueueItem preserves the isLive flag across queue file
reload so a recording in progress survives an app restart in
state (though streamlink itself dies on app exit and the user
has to re-trigger).
DE + EN locale strings for every toast + tooltip + the queue badge.
CSS animation for the pulsing badge so it visually distinguishes
live recordings from regular VOD downloads at a glance.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three Phase-13 wins.
1. Stats bar polling pauses while document.hidden. Previously
setInterval(updateStatsBar, 5000) ran forever, including while
the user had a different tab focused or the window minimised.
Now wraps start/stopStatsBarPolling and listens to
visibilitychange. When the page becomes visible the interval
restarts; while hidden it sleeps. Saves an IPC round-trip every
5s when nobody's looking.
2. Bulk mark / unmark "as downloaded" on the VOD bulk-bar. Companion
to the per-card right-click context menu's mark/unmark items —
when the user has 5 VODs selected they now get one click to
toggle the green check on all of them instead of right-clicking
each. Uses the existing markVodDownloaded IPC, refreshes the
local config copy + re-renders the grid so badges update live.
3. VOD card title tooltip. The card title is text-overflow:ellipsis
so longer titles get cut off. Adding title="${full title}"
surfaces the full text on hover via the native browser tooltip
— no custom UI needed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three Phase-12 wins.
1. Streamlink --twitch-disable-ads is now a setting (default on, since
most users hit this — Twitch mid-roll ads otherwise get embedded
into the VOD output as black-screen audio gaps). Off only when the
user explicitly opts out via the new checkbox in Download Settings.
Applied in downloadVODPart args; clip downloads are unaffected
(Twitch clips do not carry mid-roll ads).
2. Right-click context menu on queue items. Items vary by status:
pending/paused -> Move to top, Move to bottom; failed -> Retry;
completed -> Open file (when 1 output) / Show in folder; always
-> Copy URL, Open on Twitch, Remove from queue. Move-to-top/
bottom calls existing reorderQueue IPC. Menu auto-dismisses on
outside-click / Escape / scroll, repositions to stay inside the
viewport.
3. Removed the global currentDownloadCancelled flag. It was a
leftover from before per-item tracking — every site that set it
(pause-download / cancel-download / remove-from-queue) already
added every active item to cancelledItemIds via the activeDownloads
loop. The four read sites (downloadVODPart close handler,
processOneQueueItem retry-loop guard, processDownloadMergeGroup
phase 1 and phase 3 guards, splitMergedFile loop) now check
cancelledItemIds.has(itemId) directly. splitMergedFile reads
from its itemId parameter (added in cycle 1) so the per-item
intent threads through correctly. Net: -8 lines, one less
global flag to reason about, no behaviour change for the
intended cases (per-item cancel via remove + bulk cancel via
pause/cancel both still work because they each populate the
per-item set).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three Phase-11 wins.
1. Streamlink stream quality is now configurable. config.streamlink_quality
defaults to "best" (preserves prior behaviour) but can be set to source,
1080p60, 720p60, 720p, 480p, or audio_only via a new dropdown in
Settings -> Download. The chosen quality is passed as STREAMS to
streamlink with ",best" appended as a fallback so an old VOD lacking
the chosen rendition still completes. Used by both the queue
downloadVODPart and the standalone download-clip IPC. The whitelist is
enforced via normalizeStreamlinkQuality so an arbitrary string in the
config file falls back to "best".
2. Per-item completion notifications. Default off because long queues
would spam the OS notifications panel. When enabled (Settings ->
Queue zwischen App-Starts checkbox area), every successful download
pops a "{title}" notification whose click brings the window forward
AND opens shell.showItemInFolder on the produced file (or the
download folder if the file is gone). The end-of-queue summary
notification still fires regardless.
3. Download-path writability check on selectFolder. The renderer now
asks the new check-folder-writable IPC after the user picks a
folder; if isDownloadPathWritable returns false, a warning toast
surfaces immediately instead of the next download failing with a
cryptic "datei zu klein" / "ENOENT" error. Save proceeds anyway —
the user might be picking a USB-stick path that is offline at the
moment.
Plus DE + EN locale strings for every label/option/hint, all wired
through applyLanguageToStaticUI for live language switch.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three Phase-10 wins.
1. Streamer-list filter + bulk-remove. Above 6 streamers (the magic
number where the list starts to feel cluttered) a search input
appears below the section title and a small bulk-remove "x"
button next to it. Filter is title-substring, case-insensitive.
Bulk-remove honours the active filter — when the input is empty
it confirms removing the entire list, when filled it confirms
removing only the matching subset. Used a confirm() dialog with
the matching count interpolated into the locale string.
2. Cutter drag-and-drop. Dragging a video file from Explorer onto
the cutter tab now loads it directly — no separate Browse click.
Uses Electron's File.path extension on the dropped File object
(works through contextIsolation:true). selectCutterVideo was
refactored into loadCutterFromPath + a thin wrapper so the drop
handler reuses the same loading logic. dragenter/dragleave count
adds visual outline on #cutterPreview while a Files drag is over
the tab. Falls back gracefully if the dropped file lacks .path.
3. Per-streamer VOD scroll position. Switching streamers used to
reset scroll-to-top, painful when cycling between archives.
vodScrollPositions Record<streamer, scrollY> persisted to
localStorage, capped to 32 entries to bound storage. Save fires
on a 250ms scroll-debounce timer + on every selectStreamer
transition. Restore happens 80ms after renderVODs paints (lets
the first chunk settle) so scrollTop has somewhere to land.
Plus: bounded the persistence table at 32 entries, locale strings
DE/EN, all wired through applyLanguageToStaticUI for live language
switch.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Four wins from a deep-audit pass.
1. Windows taskbar progress bar. While downloads run, mainWindow.
setProgressBar(0..1) shows aggregate progress on the taskbar icon
(visible while minimised). New activeDownloadProgress map tracks
per-item fractions because main's downloadQueue.progress field
is not updated mid-download (only renderer streams progress).
Cleared via clearDownloadProgress in processOneQueueItem.finally
so the bar resets when the queue idles.
2. VOD card data-* refactor. The previous inline-onclick template
strings did escapedTitle = title.replace(/'/, "\\'").replace(/"/,
""") and then interpolated that into onclick="addToQueue('...')".
Edge cases (titles with backslash, ', etc.) could break the
JS parser. All identity now lives on data-vod-id / -url / -title /
-date / -streamer / -duration on .vod-card. A delegated click
listener on #vodGrid reads the dataset at click time and
dispatches to openClipDialog / addToQueue / openExternal. Plus:
clicking the thumbnail / title / meta now opens the VOD on Twitch
in the OS default browser.
3. Right-click context menu on VOD cards. Items: "Open on Twitch",
"Copy VOD URL" (uses navigator.clipboard, toast confirmation),
"Trim VOD", "+ Queue", and toggle "Mark as downloaded" /
"Unmark downloaded". The mark toggle hits a new
ipcMain.handle("mark-vod-downloaded", id, mark) so a user can
add or remove entries in config.downloaded_vod_ids manually
without re-downloading. Menu auto-closes on outside-click /
Escape / scroll. Repositioned to stay inside the viewport.
4. userIdLoginCache now bounded (insertion-order eviction at 4096).
Was Map<string, string> with no cap; setUserIdLogin helper
centralises insertion + eviction. Long-running sessions with
thousands of unique streamer lookups no longer accumulate the
reverse-lookup table forever.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three companion features around the 4.5.22 already-downloaded badge.
1. "Hide downloaded" toggle in the VOD filter row. Persisted to
localStorage so power users who keep it on across sessions don't
re-flip it on every launch. Filter applies before the title-search
filter so the match counter stays consistent.
2. "Reset downloaded list" button in a new Backup & Maintenance
settings card. Confirm-dialog before clearing, IPC returns the
removed count for a "cleared N entries" toast. Renderer refreshes
its config copy + re-renders the VOD grid so badges disappear
immediately. No files are touched.
3. Config export / import via dialog.show*Dialog. Export strips
client_secret (should never travel as plain text via cloud sync),
tags the file with __exportVersion + __exportedAt. Import runs
the JSON through normalizeConfigTemplates so out-of-range fields
fall back to defaults; if the imported file lacks client_secret,
the existing value is preserved. After import the renderer reloads
config + relocalizes if language changed + re-renders streamers /
settings form / VOD grid.
DE + EN locale strings for every label, button, toast, and confirm
dialog. New backupCardTitle / backupCardIntro section header in
Settings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two real UX wins.
1. Auto-resume queue on startup. New checkbox in Settings -> Download
("Queue beim Start automatisch fortsetzen"). When enabled and the
persisted queue has pending items, processQueue() fires ~5 seconds
after did-finish-load — long enough for the user to see the queue
and pause if they did not actually want this. Default off so the
existing behaviour (explicit Start click) is preserved on upgrade.
The Settings auto-save fingerprint includes the new flag and
syncSettingsFormFromConfig restores it. Tooltip explains the
timing on hover.
2. Already-downloaded indicator on VOD cards. Config gains
downloaded_vod_ids: string[] (bounded to 4096 latest entries).
Every successful queue-item download appends its parsed VOD ID
(or every component ID for merge groups). On the VOD grid each
card whose vod.id is in the set gets a small green checkmark
badge in the top-right plus a slightly dimmed thumbnail, with a
localized "Already downloaded" / "Bereits heruntergeladen"
tooltip. The lookup builds a Set once per render so it stays
O(1) per card. The renderer refreshes its local config copy on
every "newly completed" queue update so the badge appears live
without waiting for a settings save.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three Phase-6 wins.
1. Cutter & Merge tab labels were the same i18n gap as the trim-VOD
dialog before 4.5.20: Dauer / Aufloesung / FPS / Auswahl / Start: /
Ende: / Schneiden / Zusammenfuegen were hardcoded German in
index.html. Each got an id + setText wiring + DE/EN locale strings
(cutter.infoDuration / .infoResolution / .infoFps / .infoSelection
/ .startLabel / .endLabel; cutter.cut + merge.merge already existed
for dynamic state, now also used as initial text on btnCut /
btnMerge).
2. Per-item retry button on failed queue entries. The existing
"retry failed" queue-action retried ALL failed items at once;
when only one specific item should be retried (e.g. transient
network blip on one URL), the user had to remove every other
failed item first. New ipcMain.handle("retry-queue-item", id)
resets that single item to status: pending and triggers
processQueue if idle. A small ↻ icon now sits next to the
remove (x) button on items in the error state.
3. Status bar queue summary. The footer previously showed only the
connection status + version. With longer queues the user had to
scroll the queue panel to see how many downloads were active
versus pending. New span between the status indicator and the
version reads "{downloading} dl, {pending} queued" (locale-aware,
hidden when queue is empty). Updated on onQueueUpdated and
onDownloadProgress so it stays live.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three small UX wins.
1. Trim-VOD dialog: every inner label was hardcoded German in
index.html (Start:, Ende:, Startzeit (HH:MM:SS):, Dauer:, Start
Part-Nummer..., Leer lassen = Teil 1, Dateinamen-Format:, Zur
Queue hinzufuegen). EN-mode users had a German dialog. Each
element now has an id + setText wiring + DE/EN locale strings.
2. Settings -> Twitch API card now opens with a help line + link
to dev.twitch.tv/console/apps. Uses window.api.openExternal so
the link opens in the user's default browser instead of the
Electron renderer (which has nodeIntegration off / no native
navigation). Fixes the "no idea how to set this up" first-run
friction.
3. Settings -> Live Debug Log gets an "Open log file" button next
to Refresh. Uses a new ipcMain handle (open-debug-log-file ->
shell.showItemInFolder on DEBUG_LOG_FILE) so users no longer
have to navigate manually to ProgramData. As a small defensive
bundle:
- get-debug-log: lines parameter capped at [1, 5000] so a
misbehaving renderer (or future feature) cannot ask main to
slice millions of lines.
- export-runtime-metrics: now uses writeFileAtomicSync (the
fsync+rename helper from cycle 1) instead of plain
writeFileSync so a power loss mid-export cannot leave a
half-written metrics file at the user-chosen path.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
