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

cleanup: VOD context menu reuses .context-menu — renamed queue-context-menu to shared

Browse Source 
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>
This commit is contained in:
xRangerDE 2026-05-11 09:02:59 +02:00
parent 0132c96a7f
commit a1ea920003
3 changed files with 14 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer-queue.ts
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;
};

18
src/renderer-streamers.ts
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(); }
});

17
src/styles.css
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);