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 = '';
|
let sessHtml = '';
|
||||||
if (activeSessions.length) {
|
if (activeSessions.length) {
|
||||||
let rowsHtml = '';
|
function vvTcRow(s) {
|
||||||
activeSessions.forEach(s => {
|
|
||||||
const meth = s.method.replace('Transcode', 'TC').replace('Direct ', '');
|
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)}
|
${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: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:#555;flex-shrink:0;">${typeLabel(s.type)}</span>
|
||||||
<span style="font-size:9px;color:#ff9800;flex-shrink:0;">${meth}</span>
|
<span style="font-size:9px;color:#ff9800;flex-shrink:0;">${meth}</span>
|
||||||
</div>`;
|
</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;">
|
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="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>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user