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>

Plugin/unraid/include/media.php

@@ -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;

Plugin/unraid/pages/monitor.php

@@ -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}`;
 }