feat(node,hub): add Videos group app (poster grid, flat list, TMDB metadata)

Implements docs/mediacenter.md: a "Videos" group application built on the
existing files index rather than a separate catalogue. On the node side,
new indexer enrichment (technical probe, filename/season parsing, thumbnail
generation) runs per-file once an operator has chosen a video_root for the
group, plus a TMDB client for on-demand poster/metadata lookups (never
client-side, thumbnails delivered over the existing chunk path). On the hub
side, a new video-app.js renders a lazily-mounted poster grid or a
thumbnail-only flat list, with TMDB entirely optional per group.

Along the way: the global apps registry now drives Settings' default-tab
picker instead of a hardcoded list, and the video_root is configured from
group Settings (like uploads) rather than from Files, with the node
refusing to run any TMDB/thumbnail work until one is set.

Fixes several bugs found via live testing against a real library, notably
a race between two effects writing the same "image ready" state that could
leave a poster grid spinning forever on a same-tab revisit — see
mediacenter.md §5.4 for the full account of each one.

1 files changed, 31 insertions, 6 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
index 29f3602..55f8e36 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
@@ -80,6 +80,12 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
   // to the operator in Settings, not enforced from here (indexer.py owns
   // that). Null until the handshake ack arrives.
   const [scanSettings, setScanSettings] = useState(null);
+  // TMDB on/off + whether a custom token is set, node-wide (not per-group) —
+  // docs/mediacenter.md §5.5. Null until the handshake ack arrives.
+  const [tmdbConfig, setTmdbConfig] = useState(null);
+  // Which folder is the Videos app's entry point for this group — ''
+  // (the default) means the whole group index. Set from Files, per-group.
+  const [videoRoot, setVideoRoot] = useState('');
   // Paired ≠ operator account. `is_node_admin` says the hub account owning this
   // node is the one connecting; this says the node pinned *this browser's* key
   // as an operator key. Only the second one lets you sign an invite, and only
@@ -127,20 +133,24 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
     cacheGroupIndex(groupId, group ? group.name : groupId, fresh);
   }, [groupId, group]);
 
-  // additions/deletions only (daemon.py _broadcast_index_change, once there
-  // is a previous snapshot to diff against) — applied on top of whatever
-  // applyIndex last put in `entries`, instead of replacing the whole table
-  // for one changed file.
+  // additions/deletions/updates (daemon.py _broadcast_index_change, once
+  // there is a previous snapshot to diff against) — applied on top of
+  // whatever applyIndex last put in `entries`, instead of replacing the
+  // whole table for one changed file. `updates` is the Videos app's async
+  // enrichment (duration/thumb_hash/display_title/...) arriving for a file
+  // already in the table — same id, new fields (see group_index.py diff()).
   const applyIndexDelta = useCallback((deltaMsg) => {
     setEntries((prev) => {
       const deletions = new Set(deltaMsg.deletions || []);
       const kept = prev.filter((e) => !deletions.has(e.id));
+      const updates = new Map((deltaMsg.updates || []).map((e) => [e.id, e]));
+      const updated = kept.map((e) => updates.get(e.id) || e);
       // The index is keyed by content hash: an addition whose id is already
       // present is the same duplicate-content case indexer.py's own
       // reconcile sweep leaves alone, not a second row for one file.
-      const keptIds = new Set(kept.map((e) => e.id));
+      const keptIds = new Set(updated.map((e) => e.id));
       const additions = (deltaMsg.additions || []).filter((e) => !keptIds.has(e.id));
-      const fresh = kept.concat(additions);
+      const fresh = updated.concat(additions);
       cacheGroupIndex(groupId, group ? group.name : groupId, fresh);
       return fresh;
     });
@@ -196,11 +206,19 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
         setMemberUpload(ack.member_upload !== false);
         setEnabledApps(ack.enabled_apps || null);
         setScanSettings(ack.scan_settings || null);
+        setTmdbConfig({
+          enabled: ack.tmdb_enabled !== false,
+          tokenCustomized: !!ack.tmdb_token_customized,
+          language: ack.tmdb_language || '',
+        });
+        setVideoRoot(ack.video_root || '');
         // Changed while we are connected, by an operator who may be someone
         // else entirely. Without this the button stays until a reconnection,
         // and a button that is still there is a button people press.
         transport.onUploadPolicy = (allowed) => setMemberUpload(allowed);
         transport.onAppsEnabled = (apps) => setEnabledApps(apps);
+        transport.onTmdbConfig = (cfg) => setTmdbConfig(cfg);
+        transport.onVideoRoot = (path) => setVideoRoot(path);
         // The node's own scan (a root added while we were already connected,
         // or reconcile catching one back up) — never the entries, just
         // enough to animate the sidebar dot. Guaranteed a final push at the
@@ -390,6 +408,8 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
     entries, nodeDirs, nodeRoots, setEntries, setNodeDirs, setNodeRoots, applyIndex,
     isNodeAdmin, operatorPaired, mayUpload, userId, setError, onPreview,
     onRefreshIndex: refreshIndex, onActivity: touchActivity,
+    videoRoot, onVideoRoot: (path) => setVideoRoot(path),
+    tmdbConfig,
   };
 
   return html`
@@ -503,6 +523,11 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
             onEnabledApps=${(keys) => setEnabledApps(keys)}
             scanSettings=${scanSettings}
             onScanSettings=${(s) => setScanSettings(s)}
+            tmdbConfig=${tmdbConfig}
+            onTmdbConfig=${(cfg) => setTmdbConfig(cfg)}
+            entries=${entries} nodeDirs=${nodeDirs}
+            videoRoot=${videoRoot}
+            onVideoRoot=${(path) => setVideoRoot(path)}
             onLeft=${onLeft}
             onPaired=${() => setOperatorPaired(true)} />
         `}