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:
co-authored by
Claude Sonnet 4.6
parent
55e817d234
commit
67e274fd4e
@@ -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>`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user