From 11e2f957e62984c439a3f334cf46a5b85ba79d32 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Wed, 13 May 2026 14:40:34 +0200
Subject: [PATCH] =?UTF-8?q?release:=205.0.2=20=E2=80=94=20VOD=20hover=20fo?=
 =?UTF-8?q?llow-ups?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix 1: scaleX und scaleY werden jetzt unabhaengig berechnet. Twitch
Storyboard-Cells haben nicht zwingend 16:9; eine einheitliche scale-Variable
fuehrte zu Subpixel-Leakage am oberen oder unteren Rand mit Inhalt aus der
Nachbarzelle. Mit getrennter Achsen-Skalierung fuellt eine Cell die Overlay-
Box exakt.

Fix 2: Bulk-Select-Checkbox und Downloaded-Badge werden waehrend des Hover-
Previews ausgeblendet (vorher nur die Duration-Badge). Mein vorheriger Move
des Overlays in .vod-thumb-wrap hatte die Z-Order so geaendert, dass diese
Elemente jetzt sichtbar drueber lagen.

219 unit tests + e2e gruen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 package-lock.json         |  4 ++--
 package.json              |  2 +-
 src/renderer-vod-hover.ts | 14 ++++++++++----
 src/styles.css            |  4 +++-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1411729..cb94d04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "5.0.1",
+      "version": "5.0.2",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",
diff --git a/package.json b/package.json
index 244ac0b..7481202 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",
diff --git a/src/renderer-vod-hover.ts b/src/renderer-vod-hover.ts
index fae21db..3543da0 100644
--- a/src/renderer-vod-hover.ts
+++ b/src/renderer-vod-hover.ts
@@ -136,15 +136,21 @@ async function activateHoverPreview(card: HTMLElement, vodId: string): Promise<v
     const width = thumbRect.width;
     const height = thumbRect.height;
 
-    const scale = width / storyboard.cellWidth;
+    // Skaliere X und Y unabhaengig, damit eine Cell EXAKT die Overlay-Box
+    // fuellt — egal ob Twitch-Cell-Aspect (z.B. 320x180) gleich Thumbnail-
+    // Aspect (CSS 16/9) ist oder leicht abweicht. Ohne separate Y-Skalierung
+    // gab es bei minimalem Aspect-Diff einen Pixel-Streifen mit Inhalt aus
+    // row+1 (oder row-1, je nach Vorzeichen) am Rand des Overlays.
+    const scaleX = width / storyboard.cellWidth;
+    const scaleY = height / storyboard.cellHeight;
     overlay.style.backgroundImage = `url("${storyboard.spriteDataUrl.replace(/"/g, '%22')}")`;
-    overlay.style.backgroundSize = `${storyboard.cols * storyboard.cellWidth * scale}px ${storyboard.rows * storyboard.cellHeight * scale}px`;
+    overlay.style.backgroundSize = `${storyboard.cols * storyboard.cellWidth * scaleX}px ${storyboard.rows * storyboard.cellHeight * scaleY}px`;
     overlay.style.backgroundRepeat = 'no-repeat';
     overlay.style.width = `${width}px`;
     overlay.style.height = `${height}px`;
     // Initial position = first chosen cell.
     const first = cellsToShow[0];
-    overlay.style.backgroundPosition = `-${first.col * storyboard.cellWidth * scale}px -${first.row * storyboard.cellHeight * scale}px`;
+    overlay.style.backgroundPosition = `-${first.col * storyboard.cellWidth * scaleX}px -${first.row * storyboard.cellHeight * scaleY}px`;
 
     host.appendChild(overlay);
     // Trigger CSS transition to opacity:1 on the next frame.
@@ -153,7 +159,7 @@ async function activateHoverPreview(card: HTMLElement, vodId: string): Promise<v
     let frameIdx = 1;
     const intervalId = window.setInterval(() => {
         const cell = cellsToShow[frameIdx % cellsToShow.length];
-        overlay.style.backgroundPosition = `-${cell.col * storyboard.cellWidth * scale}px -${cell.row * storyboard.cellHeight * scale}px`;
+        overlay.style.backgroundPosition = `-${cell.col * storyboard.cellWidth * scaleX}px -${cell.row * storyboard.cellHeight * scaleY}px`;
         frameIdx++;
     }, FRAME_INTERVAL_MS);
 
diff --git a/src/styles.css b/src/styles.css
index a94bafd..92991e9 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3860,7 +3860,9 @@ input[type="number"]::-webkit-outer-spin-button {
     background: rgba(0, 0, 0, 0.88);
 }
 
-.vod-card.preview-active .vod-duration-badge {
+.vod-card.preview-active .vod-duration-badge,
+.vod-card.preview-active .vod-select-checkbox,
+.vod-card.preview-active .vod-downloaded-badge {
     opacity: 0;
     transition: opacity 0.2s;
 }