ui: show resolution and codec counts in streams header

Adds height/codec fields to both Emby/Jellyfin and Plex session data,
then surfaces them as chip groups (· 2 4K  3 1080p · 4 H.264  2 HEVC)
in the streams card header alongside the existing device type bar.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gmer4Lfe
2026-05-31 21:52:31 -04:00
co-authored by Claude Sonnet 4.6
parent bea7b6b045
commit 89df1a98db
2 changed files with 53 additions and 1 deletions
+16
View File
@@ -109,6 +109,12 @@ function vv_fetch_jf_sessions(array $srv): array {
$method = $pm === 'DirectStream' ? 'Direct Stream' : 'Direct Play';
}
// Source video stream — resolution and codec of the file being played
$videoStream = null;
foreach ($item['MediaStreams'] ?? [] as $ms) {
if (($ms['Type'] ?? '') === 'Video') { $videoStream = $ms; break; }
}
$result[] = [
'server' => $srv['name'],
'server_type' => $srv['type'],
@@ -122,6 +128,8 @@ function vv_fetch_jf_sessions(array $srv): array {
'pos_sec' => (int)($pos / 10000000),
'dur_sec' => (int)($dur / 10000000),
'is_tc' => $tc !== null,
'height' => (int)($videoStream['Height'] ?? 0),
'codec' => strtolower($videoStream['Codec'] ?? ''),
];
}
return $result;
@@ -160,6 +168,12 @@ function vv_fetch_plex_sessions(array $srv): array {
}
$player = $m['Player'] ?? [];
$media0 = $m['Media'][0] ?? [];
$plexH = (int)($media0['height'] ?? 0);
if (!$plexH && !empty($media0['videoResolution'])) {
$vr = strtolower($media0['videoResolution']);
$plexH = $vr === '4k' ? 2160 : (int)$vr;
}
$result[] = [
'server' => $srv['name'],
'server_type' => $srv['type'],
@@ -173,6 +187,8 @@ function vv_fetch_plex_sessions(array $srv): array {
'pos_sec' => (int)($offset / 1000),
'dur_sec' => (int)($dur / 1000),
'is_tc' => $isTc,
'height' => $plexH,
'codec' => strtolower($media0['videoCodec'] ?? ''),
];
}
return $result;
+37 -1
View File
@@ -1461,6 +1461,42 @@ function vvRenderStreams() {
? `<span class="vv-device-sep">·</span>${deviceBar}`
: '';
// Resolution summary — e.g. "2 4K 3 1080p 1 720p"
function vvResLabel(h) {
if (h >= 2160) return '4K';
if (h >= 1080) return '1080p';
if (h >= 720) return '720p';
if (h >= 480) return '480p';
return null;
}
const resCounts = {};
sessions.forEach(s => {
const r = vvResLabel(s.height || 0);
if (r) resCounts[r] = (resCounts[r] || 0) + 1;
});
const resOrder = ['4K', '1080p', '720p', '480p'];
const resBar = resOrder.filter(r => resCounts[r])
.map(r => `<span class="vv-device-chip">${resCounts[r]} ${r}</span>`)
.join('');
const resSection = resBar ? `<span class="vv-device-sep">·</span>${resBar}` : '';
// Codec summary — e.g. "4 H.264 2 HEVC"
function vvCodecLabel(c) {
if (!c) return null;
const m = { h264: 'H.264', hevc: 'HEVC', av1: 'AV1', vp9: 'VP9', mpeg4: 'MPEG-4', mpeg2video: 'MPEG-2' };
return m[c] || c.toUpperCase();
}
const codecCounts = {};
sessions.forEach(s => {
const c = vvCodecLabel(s.codec || '');
if (c) codecCounts[c] = (codecCounts[c] || 0) + 1;
});
const codecBar = Object.entries(codecCounts)
.sort((a, b) => b[1] - a[1])
.map(([c, n]) => `<span class="vv-device-chip">${n} ${c}</span>`)
.join('');
const codecSection = codecBar ? `<span class="vv-device-sep">·</span>${codecBar}` : '';
if (sessions.length === 0) {
el.innerHTML = `<div class="vv-stream-servers">${badges}</div>`
+ '<p class="vv-stream-empty">Nothing playing</p>';
@@ -1520,7 +1556,7 @@ function vvRenderStreams() {
? `<div style="font-size:10px;color:#555;margin-top:4px;">+${sessions.length - 12} more not shown</div>`
: '';
el.innerHTML = `<div class="vv-stream-servers">${badges}${deviceSection}</div>
el.innerHTML = `<div class="vv-stream-servers">${badges}${deviceSection}${resSection}${codecSection}</div>
<div style="display:flex;gap:10px;">${sCols.map(vvStreamCol).join('')}</div>${overflow}`;
}