Bridge iroh control announcements into web stream discovery

apps/web/app.js

@@ -9,6 +9,7 @@ const MOQ_WATCH_MODULE_URLS = [
   "https://cdn.jsdelivr.net/npm/@moq/watch@0.1.1/element/+esm",
   "https://unpkg.com/@moq/watch@0.1.1/element.js?module",
 ];
+const PUBLIC_STREAMS_PATH = "/api/public-streams";
 let moqWatchModulePromise = null;
 let disposePlayerSignals = null;
 
@@ -52,6 +53,12 @@ function setShareLink(text) {
   el.textContent = text || "";
 }
 
+function setListHint(text, kind) {
+  const el = $("listHint");
+  el.textContent = text || "";
+  el.dataset.kind = kind || "";
+}
+
 function clearPlayerSignals() {
   if (typeof disposePlayerSignals === "function") {
     disposePlayerSignals();
@@ -214,11 +221,59 @@ function hasWebTransport() {
   return typeof window.WebTransport !== "undefined";
 }
 
+function renderLiveList(entries, onWatch) {
+  const mount = $("liveList");
+  mount.textContent = "";
+  if (!entries.length) {
+    setListHint("No public streams announced yet.", "");
+    return;
+  }
+  setListHint(`${entries.length} live`, "ok");
+
+  for (const entry of entries) {
+    const row = document.createElement("div");
+    row.className = "liveItem";
+
+    const info = document.createElement("div");
+    const title = document.createElement("div");
+    title.className = "liveTitle";
+    title.textContent = entry.title || entry.stream_id || entry.broadcast_name || "Live stream";
+    info.appendChild(title);
+
+    const meta = document.createElement("div");
+    meta.className = "liveMeta";
+    meta.textContent = `${entry.broadcast_name || ""} @ ${entry.relay_url || DEFAULT_RELAY_URL}`;
+    info.appendChild(meta);
+
+    const btn = document.createElement("button");
+    btn.className = "btn secondary";
+    btn.textContent = "Watch";
+    btn.addEventListener("click", () => {
+      onWatch(entry);
+    });
+
+    row.appendChild(info);
+    row.appendChild(btn);
+    mount.appendChild(row);
+  }
+}
+
+async function fetchLiveList() {
+  const res = await fetch(PUBLIC_STREAMS_PATH, { cache: "no-store" });
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status}`);
+  }
+  const body = await res.json();
+  const entries = Array.isArray(body?.entries) ? body.entries : [];
+  return entries;
+}
+
 function main() {
   const relayInput = $("relayUrl");
   const nameInput = $("broadcastName");
   const watchBtn = $("watchBtn");
   const copyBtn = $("copyLinkBtn");
+  const refreshListBtn = $("refreshListBtn");
 
   const initial = readParams();
   relayInput.value = initial.relayUrl;
@@ -257,7 +312,7 @@ function main() {
       await ensureMoqWatchElement();
     } catch (e) {
       setHint(
-        `Failed to load MoQ web player dependency: ${String(e)}. Disable script blockers for esm.sh and retry.`,
+        `Failed to load MoQ web player dependency: ${String(e)}. Disable script blockers for esm.sh/jsdelivr/unpkg and retry.`,
         "warn",
       );
       return;
@@ -296,7 +351,30 @@ function main() {
     }
   });
 
+  async function refreshLiveList() {
+    setListHint("Loading live streams...", "");
+    try {
+      const entries = await fetchLiveList();
+      renderLiveList(entries, (entry) => {
+        relayInput.value = normalizeRelayUrl(entry.relay_url || DEFAULT_RELAY_URL);
+        nameInput.value = normalizeName(entry.broadcast_name || "");
+        updateSharePreview();
+        void start();
+      });
+    } catch (e) {
+      $("liveList").textContent = "";
+      setListHint(`Live list error: ${String(e)}`, "warn");
+    }
+  }
+  refreshListBtn.addEventListener("click", () => {
+    void refreshLiveList();
+  });
+
   updateSharePreview();
+  void refreshLiveList();
+  window.setInterval(() => {
+    void refreshLiveList();
+  }, 15000);
 
   // Auto-start if a name was provided.
   if (initial.name) void start();