Compare commits

...

2 Commits

Author SHA1 Message Date
xRangerDE
561a1568f0 release: 4.6.137 update banner uses .show + updateProgress uses .is-hidden
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 10:33:16 +02:00
xRangerDE
b33b274751 cleanup: update banner + progress use class-based visibility (.show / .is-hidden)
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>
2026-05-11 10:32:57 +02:00
4 changed files with 10 additions and 10 deletions

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "twitch-vod-manager", "name": "twitch-vod-manager",
"version": "4.6.136", "version": "4.6.137",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "twitch-vod-manager", "name": "twitch-vod-manager",
"version": "4.6.136", "version": "4.6.137",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"axios": "^1.6.0", "axios": "^1.6.0",

View File

@ -1,6 +1,6 @@
{ {
"name": "twitch-vod-manager", "name": "twitch-vod-manager",
"version": "4.6.136", "version": "4.6.137",
"description": "Twitch VOD Manager - Download Twitch VODs easily", "description": "Twitch VOD Manager - Download Twitch VODs easily",
"main": "dist/main.js", "main": "dist/main.js",
"author": "xRangerDE", "author": "xRangerDE",

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>

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');
} }