Compare commits

..

2 Commits

Author SHA1 Message Date
xRangerDE
7de560f44c release: 4.6.120 .context-menu shared by queue + VOD context menus
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 09:03:12 +02:00
xRangerDE
a1ea920003 cleanup: VOD context menu reuses .context-menu — renamed queue-context-menu to shared
renderer-streamers.ts had its own copy of the same right-click menu boilerplate that 4.6.119 just consolidated for renderer-queue.ts — the VOD card context menu (Open on Twitch / Copy URL / Trim / Add to Queue / Mark as downloaded) was building ~14 inline-styled properties on its container and ~6 per item, with the same mouseenter/mouseleave hover fake.

Renamed the freshly-extracted classes from .queue-context-menu* to .context-menu* (more accurate since they're generic right-click-menu styles, not queue-specific) and pointed both renderer-queue.ts and renderer-streamers.ts at the new shared class set. The VOD menu drops its entire inline-style block + two hover handlers per item.

Net: ~17 more inline style assignments + 5 hover handlers gone, two context menus now share a single visual definition.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 09:02:59 +02:00
5 changed files with 17 additions and 30 deletions

4
package-lock.json generated
View File

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

View File

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

View File

@ -185,12 +185,12 @@ function showQueueContextMenu(x: number, y: number, item: QueueItem): void {
closeQueueContextMenu();
const menu = document.createElement('div');
menu.className = 'queue-context-menu';
menu.className = 'context-menu';
const makeItem = (label: string, onClick: () => void, disabled = false): HTMLElement => {
const el = document.createElement('div');
el.textContent = label;
el.className = 'queue-context-menu-item' + (disabled ? ' disabled' : '');
el.className = 'context-menu-item' + (disabled ? ' disabled' : '');
if (!disabled) {
el.addEventListener('click', () => {
try { onClick(); } finally { closeQueueContextMenu(); }
@ -201,7 +201,7 @@ function showQueueContextMenu(x: number, y: number, item: QueueItem): void {
const makeSeparator = (): HTMLElement => {
const sep = document.createElement('div');
sep.className = 'queue-context-menu-separator';
sep.className = 'context-menu-separator';
return sep;
};

View File

@ -924,15 +924,7 @@ function showVodContextMenu(x: number, y: number, ctx: VodCardContext): void {
closeVodContextMenu();
const menu = document.createElement('div');
menu.className = 'vod-context-menu';
menu.style.position = 'fixed';
menu.style.zIndex = '9999';
menu.style.background = 'var(--bg-card)';
menu.style.border = '1px solid var(--border-soft)';
menu.style.borderRadius = '6px';
menu.style.boxShadow = '0 4px 12px rgba(0,0,0,0.4)';
menu.style.padding = '4px';
menu.style.minWidth = '200px';
menu.className = 'context-menu';
const downloadedIds = new Set(
Array.isArray(config.downloaded_vod_ids)
@ -944,13 +936,7 @@ function showVodContextMenu(x: number, y: number, ctx: VodCardContext): void {
const makeItem = (label: string, onClick: () => void): HTMLElement => {
const el = document.createElement('div');
el.textContent = label;
el.style.padding = '8px 12px';
el.style.cursor = 'pointer';
el.style.fontSize = '13px';
el.style.color = 'var(--text)';
el.style.borderRadius = '4px';
el.addEventListener('mouseenter', () => { el.style.background = 'rgba(145,70,255,0.15)'; });
el.addEventListener('mouseleave', () => { el.style.background = 'transparent'; });
el.className = 'context-menu-item';
el.addEventListener('click', () => {
try { onClick(); } finally { closeVodContextMenu(); }
});

View File

@ -4411,11 +4411,12 @@ input[type="number"]::-webkit-outer-spin-button {
}
/* ============================================
QUEUE CONTEXT MENU right-click on a queue row
CONTEXT MENU generic right-click menu base
============================================
Previously every property was inline-styled in renderer-queue.ts.
left/top stay inline (set per-click); everything else lives here. */
.queue-context-menu {
Used by both the queue row context menu (renderer-queue.ts) and the
VOD card context menu (renderer-streamers.ts). left/top stay inline
on the container (set per-click); everything else lives here. */
.context-menu {
position: fixed;
z-index: 9999;
background: var(--bg-card);
@ -4426,7 +4427,7 @@ input[type="number"]::-webkit-outer-spin-button {
min-width: 200px;
}
.queue-context-menu-item {
.context-menu-item {
padding: 8px 12px;
cursor: pointer;
font-size: 13px;
@ -4435,17 +4436,17 @@ input[type="number"]::-webkit-outer-spin-button {
transition: background 0.12s;
}
.queue-context-menu-item:hover:not(.disabled) {
.context-menu-item:hover:not(.disabled) {
background: rgba(145, 70, 255, 0.15);
}
.queue-context-menu-item.disabled {
.context-menu-item.disabled {
color: var(--text-secondary);
opacity: 0.55;
cursor: not-allowed;
}
.queue-context-menu-separator {
.context-menu-separator {
height: 1px;
margin: 4px 6px;
background: var(--border-soft);