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

release: 5.0.3 — VOD hover overlay fuellt jetzt das gesamte Thumbnail-Wrap

Browse Source 
Wechsel von explicit width/height auf inset:0 (top/right/bottom/left:0,
width/height:auto, aspect-ratio:auto override des CSS-Legacy 16/9). Damit
fuellt das Overlay garantiert das gesamte .vod-thumb-wrap — kein leerer
Streifen mehr am oberen oder unteren Rand der Hover-Vorschau, egal ob
Twitch Storyboard-Cell-Aspect oder Subpixel-Rendering minimal abweicht.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-13 14:44:39 +02:00
parent 11e2f957e6
commit a5a1d8c067
3 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

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

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "twitch-vod-manager", "name": "twitch-vod-manager",
"version": "5.0.2", "version": "5.0.3",
"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",

36
src/renderer-vod-hover.ts
View File

@ -125,29 +125,35 @@ async function activateHoverPreview(card: HTMLElement, vodId: string): Promise<v
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.className = 'vod-storyboard-preview'; overlay.className = 'vod-storyboard-preview';
// Anchor an .vod-thumb-wrap statt .vod-card: das wrap-Element hat // Anchor an .vod-thumb-wrap statt .vod-card. Das wrap-Element hat
// exakt Thumbnail-Bounds (kein card-border, kein info/actions-Bereich // exakt Thumbnail-Bounds (kein card-border, kein info/actions-Bereich
// darunter). Faellt zurueck auf das card selbst, falls das Markup // darunter). Faellt zurueck auf das card selbst falls Markup anders.
// mal anders ist.
const anchor = card.querySelector('.vod-thumb-wrap') as HTMLElement | null; const anchor = card.querySelector('.vod-thumb-wrap') as HTMLElement | null;
const host = anchor ?? card; const host = anchor ?? card;
const thumb = card.querySelector('.vod-thumbnail') as HTMLElement | null; const hostRect = host.getBoundingClientRect();
const thumbRect = (thumb ?? host).getBoundingClientRect();
const width = thumbRect.width;
const height = thumbRect.height;
// Skaliere X und Y unabhaengig, damit eine Cell EXAKT die Overlay-Box // inset: 0 statt explicit width/height — Overlay fuellt garantiert das
// gesamte Host-Element. Vermeidet Subpixel-Spalten am oberen oder
// unteren Rand wenn JS-measured Dimensions minimal von der CSS-aspect-
// ratio-Reserve abweichen.
overlay.style.top = '0';
overlay.style.right = '0';
overlay.style.bottom = '0';
overlay.style.left = '0';
overlay.style.width = 'auto';
overlay.style.height = 'auto';
// CSS hat noch aspect-ratio: 16/9 als Legacy-Fallback — wir setzen
// hier explizit auto, sodass inset:0 die Box-Groesse bestimmt.
overlay.style.aspectRatio = 'auto';
// Skaliere X und Y unabhaengig, damit eine Cell die Overlay-Box exakt
// fuellt — egal ob Twitch-Cell-Aspect (z.B. 320x180) gleich Thumbnail- // fuellt — egal ob Twitch-Cell-Aspect (z.B. 320x180) gleich Thumbnail-
// Aspect (CSS 16/9) ist oder leicht abweicht. Ohne separate Y-Skalierung // Aspect (CSS 16/9) ist oder leicht abweicht.
// gab es bei minimalem Aspect-Diff einen Pixel-Streifen mit Inhalt aus const scaleX = hostRect.width / storyboard.cellWidth;
// row+1 (oder row-1, je nach Vorzeichen) am Rand des Overlays. const scaleY = hostRect.height / storyboard.cellHeight;
const scaleX = width / storyboard.cellWidth;
const scaleY = height / storyboard.cellHeight;
overlay.style.backgroundImage = `url("${storyboard.spriteDataUrl.replace(/"/g, '%22')}")`; overlay.style.backgroundImage = `url("${storyboard.spriteDataUrl.replace(/"/g, '%22')}")`;
overlay.style.backgroundSize = `${storyboard.cols * storyboard.cellWidth * scaleX}px ${storyboard.rows * storyboard.cellHeight * scaleY}px`; overlay.style.backgroundSize = `${storyboard.cols * storyboard.cellWidth * scaleX}px ${storyboard.rows * storyboard.cellHeight * scaleY}px`;
overlay.style.backgroundRepeat = 'no-repeat'; overlay.style.backgroundRepeat = 'no-repeat';
overlay.style.width = `${width}px`;
overlay.style.height = `${height}px`;
// Initial position = first chosen cell. // Initial position = first chosen cell.
const first = cellsToShow[0]; const first = cellsToShow[0];
overlay.style.backgroundPosition = `-${first.col * storyboard.cellWidth * scaleX}px -${first.row * storyboard.cellHeight * scaleY}px`; overlay.style.backgroundPosition = `-${first.col * storyboard.cellWidth * scaleX}px -${first.row * storyboard.cellHeight * scaleY}px`;