Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

cleanup: update banner + progress use class-based visibility (.show / .is-hidden)

Browse Source 
The .update-banner CSS has had a .show modifier (display:flex) defined since the original auto-updater code, but the JS was bypassing it and setting .style.display='flex'/'none' directly. Three places had this inconsistency:
- showUpdateBanner() — set inline display:flex
- hideUpdateBanner() — set inline display:none
- The check at line 461 — read inline display === 'flex' to gate a "no update found" toast

Switched all three to the canonical .show class — adding/removing it and checking with classList.contains. The CSS rule does the actual display flip.

The updateProgress wrap (download progress bar inside the banner) was using the same .style.display = 'block' / 'none' inline-toggle pattern in three places (setUpdateBannerAvailableUi, setDownloadPendingUi, setDownloadReadyUi). Migrated all three to the shared .is-hidden class from 4.6.134, plus removed the inline style="display: none;" from the HTML.

Net: 5 inline display assignments + 1 state read + 1 inline HTML display:none gone, update-banner state machine is now fully class-driven.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 10:32:57 +02:00
parent ad8f32f8b8
commit b33b274751
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.html
View File

@ -10,7 +10,7 @@
<body class="theme-twitch"> <body class="theme-twitch">
<div class="update-banner" id="updateBanner"> <div class="update-banner" id="updateBanner">
<span id="updateText">Neue Version verfügbar!</span> <span id="updateText">Neue Version verfügbar!</span>
<div id="updateProgress" class="update-banner-progress-wrap" style="display: none;"> <div id="updateProgress" class="update-banner-progress-wrap is-hidden">
<div class="update-banner-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Update download" id="updateProgressGauge"> <div class="update-banner-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Update download" id="updateProgressGauge">
<div id="updateProgressBar" class="update-banner-progress-bar"></div> <div id="updateProgressBar" class="update-banner-progress-bar"></div>
</div> </div>

12
src/renderer-updates.ts
View File

@ -88,11 +88,11 @@ function setCheckButtonCheckingState(enabled: boolean): void {
} }
function showUpdateBanner(): void { function showUpdateBanner(): void {
byId('updateBanner').style.display = 'flex'; byId('updateBanner').classList.add('show');
} }
function hideUpdateBanner(): void { function hideUpdateBanner(): void {
byId('updateBanner').style.display = 'none'; byId('updateBanner').classList.remove('show');
} }
function setUpdateBannerAvailableUi(info: UpdateInfo): void { function setUpdateBannerAvailableUi(info: UpdateInfo): void {
@ -103,7 +103,7 @@ function setUpdateBannerAvailableUi(info: UpdateInfo): void {
updateBannerState = 'available'; updateBannerState = 'available';
showUpdateBanner(); showUpdateBanner();
byId('updateProgress').style.display = 'none'; byId('updateProgress').classList.add('is-hidden');
const bar = byId('updateProgressBar'); const bar = byId('updateProgressBar');
bar.classList.remove('downloading'); bar.classList.remove('downloading');
@ -123,7 +123,7 @@ function setDownloadPendingUi(): void {
const button = byId<HTMLButtonElement>('updateButton'); const button = byId<HTMLButtonElement>('updateButton');
button.textContent = UI_TEXT.updates.downloading; button.textContent = UI_TEXT.updates.downloading;
button.disabled = true; button.disabled = true;
byId('updateProgress').style.display = 'block'; byId('updateProgress').classList.remove('is-hidden');
const bar = byId('updateProgressBar'); const bar = byId('updateProgressBar');
bar.classList.add('downloading'); bar.classList.add('downloading');
@ -149,7 +149,7 @@ function setDownloadReadyUi(info?: UpdateInfo): void {
bar.style.width = '100%'; bar.style.width = '100%';
byId('updateProgressGauge').setAttribute('aria-valuenow', '100'); byId('updateProgressGauge').setAttribute('aria-valuenow', '100');
byId('updateProgress').style.display = 'block'; byId('updateProgress').classList.remove('is-hidden');
byId('updateText').textContent = `Version ${activeInfo.version} ${UI_TEXT.updates.ready}`; byId('updateText').textContent = `Version ${activeInfo.version} ${UI_TEXT.updates.ready}`;
const button = byId<HTMLButtonElement>('updateButton'); const button = byId<HTMLButtonElement>('updateButton');
button.textContent = UI_TEXT.updates.installNow; button.textContent = UI_TEXT.updates.installNow;
@ -458,7 +458,7 @@ async function checkUpdate(): Promise<void> {
setCheckButtonCheckingState(false); setCheckButtonCheckingState(false);
window.setTimeout(() => { window.setTimeout(() => {
if (!manualUpdateOutcomeHandled && !updateReady && byId('updateBanner').style.display !== 'flex') { if (!manualUpdateOutcomeHandled && !updateReady && !byId('updateBanner').classList.contains('show')) {
shouldOpenUpdateModalOnAvailable = false; shouldOpenUpdateModalOnAvailable = false;
notifyUpdate(UI_TEXT.updates.latest, 'info'); notifyUpdate(UI_TEXT.updates.latest, 'info');
} }