ui: transcode active sessions — static 2×2 balanced grid, no scroll

Splits up to 4 sessions into two balanced columns (ceil/floor split),
separated by a subtle divider. A '+N more' line appears beyond 4.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gmer4Lfe
2026-05-31 22:16:46 -04:00
co-authored by Claude Sonnet 4.6
parent 55e817d234
commit 67e274fd4e
+14 -5
View File
@@ -1326,19 +1326,28 @@ function vvPollMonitor() {
let sessHtml = '';
if (activeSessions.length) {
let rowsHtml = '';
activeSessions.forEach(s => {
function vvTcRow(s) {
const meth = s.method.replace('Transcode', 'TC').replace('Direct ', '');
rowsHtml += `<div style="display:flex;align-items:center;gap:5px;margin-bottom:4px;min-width:0;overflow:hidden;">
return `<div style="display:flex;align-items:center;gap:5px;margin-bottom:4px;min-width:0;overflow:hidden;">
${vvSrvIcon(s.server_type, s.server)}
<span style="font-size:10px;color:#888;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${s.title}</span>
<span style="font-size:9px;color:#555;flex-shrink:0;">${typeLabel(s.type)}</span>
<span style="font-size:9px;color:#ff9800;flex-shrink:0;">${meth}</span>
</div>`;
});
}
const shown = activeSessions.slice(0, 4);
const mid = Math.ceil(shown.length / 2);
const colA = shown.slice(0, mid).map(vvTcRow).join('');
const colB = shown.slice(mid).map(vvTcRow).join('');
const colBDiv = colB ? `<div style="flex:1;min-width:0;border-left:1px solid #222;padding-left:8px;">${colB}</div>` : '';
const overflow = activeSessions.length > 4
? `<div style="font-size:9px;color:#555;margin-top:2px;">+${activeSessions.length - 4} more</div>`
: '';
sessHtml = `<div style="margin-top:8px;border-top:1px solid #2a2a2a;padding-top:6px;">
<div style="font-size:10px;color:#555;margin-bottom:4px;">Active transcodes <span style="color:#ff9800;font-weight:600;">${activeSessions.length}</span></div>
<div style="max-height:44px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;">${rowsHtml}</div>
<div style="display:flex;gap:0;">
<div style="flex:1;min-width:0;">${colA}</div>${colBDiv}
</div>${overflow}
</div>`;
}