Defer health checks until video cards are visible

js/subscriptions.js

@@ -4,6 +4,7 @@ import {
   convertEventToVideo as sharedConvertEventToVideo,
 } from "./nostr.js";
 import { attachHealthBadges } from "./gridHealth.js";
+import { attachUrlHealthBadges } from "./urlHealthObserver.js";
 
 function getAbsoluteShareUrl(nevent) {
   if (!nevent) {
@@ -479,9 +480,17 @@ class SubscriptionsManager {
           if (cardEl.dataset.urlHealthReason) {
             delete cardEl.dataset.urlHealthReason;
           }
+          cardEl.dataset.urlHealthEventId = video.id || "";
+          cardEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
         } else {
           cardEl.dataset.urlHealthState = "offline";
           cardEl.dataset.urlHealthReason = "missing-source";
+          if (cardEl.dataset.urlHealthEventId) {
+            delete cardEl.dataset.urlHealthEventId;
+          }
+          if (cardEl.dataset.urlHealthUrl) {
+            delete cardEl.dataset.urlHealthUrl;
+          }
         }
         if (magnetProvided && magnetSupported) {
           cardEl.dataset.streamHealthState = "checking";
@@ -519,14 +528,18 @@ class SubscriptionsManager {
           delete cardEl.dataset.magnet;
         }
 
-        if (trimmedUrl && window.app?.handleUrlHealthBadge) {
-          const badgeEl = cardEl.querySelector("[data-url-health-state]");
-          if (badgeEl) {
-            window.app.handleUrlHealthBadge({
-              video,
-              url: trimmedUrl,
-              badgeEl,
-            });
+        const badgeEl = cardEl.querySelector("[data-url-health-state]");
+        if (badgeEl) {
+          if (trimmedUrl) {
+            badgeEl.dataset.urlHealthEventId = video.id || "";
+            badgeEl.dataset.urlHealthUrl = encodeURIComponent(trimmedUrl);
+          } else {
+            if (badgeEl.dataset.urlHealthEventId) {
+              delete badgeEl.dataset.urlHealthEventId;
+            }
+            if (badgeEl.dataset.urlHealthUrl) {
+              delete badgeEl.dataset.urlHealthUrl;
+            }
           }
         }
       }
@@ -535,6 +548,14 @@ class SubscriptionsManager {
 
     container.appendChild(fragment);
     attachHealthBadges(container);
+    attachUrlHealthBadges(container, ({ badgeEl, url, eventId }) => {
+      if (!window.app?.handleUrlHealthBadge) {
+        return;
+      }
+      const video =
+        window.app.videosMap?.get?.(eventId) || { id: eventId };
+      window.app.handleUrlHealthBadge({ video, url, badgeEl });
+    });
 
     if (window.app) {
       window.app.videoList = container;