Enhance HUD functionality: optimize member-only video tracking and improve HUD update logic

content.js

@@ -9,6 +9,8 @@ const DATA_PREFIX = "chipperfluff-nobs"; // nobs = "no-bs" (member-only videos)
 const HUD_DOT_ID = `${DATA_PREFIX}-hud-dot`;
 const HUD_PANEL_ID = `${DATA_PREFIX}-hud-panel`;
 let generatedIdCounter = 0;
+let hudDirty = false;
+let lastHudSignature = "";
 
 /* ---------------- CSS injection ---------------- */
 
@@ -247,15 +249,19 @@ function process(root = document) {
     if (id) video.setAttribute(`data-${DATA_PREFIX}-id`, id);
 
     if (id) {
-      memberOnlyIndex.set(id, {
+      const existing = memberOnlyIndex.get(id);
-        channelKey,
+      if (!existing) {
-        channelLabel: channel,
+        memberOnlyIndex.set(id, {
-        channelUrl,
+          channelKey,
-        hidden: false,
+          channelLabel: channel,
-        title,
+          channelUrl,
-        url,
+          hidden: false,
-        thumb
+          title,
-      });
+          url,
+          thumb
+        });
+        hudDirty = true;
+      }
     }
 
     const whitelisted = whitelist.includes(channelKey);
@@ -271,12 +277,16 @@ function process(root = document) {
     if (!whitelisted) {
       video.setAttribute(`data-${DATA_PREFIX}-hidden`, "true");
       if (id && memberOnlyIndex.has(id)) {
-        memberOnlyIndex.get(id).hidden = true;
+        const meta = memberOnlyIndex.get(id);
+        if (!meta.hidden) hudDirty = true;
+        meta.hidden = true;
       }
     } else {
       video.removeAttribute(`data-${DATA_PREFIX}-hidden`);
       if (id && memberOnlyIndex.has(id)) {
-        memberOnlyIndex.get(id).hidden = false;
+        const meta = memberOnlyIndex.get(id);
+        if (meta.hidden) hudDirty = true;
+        meta.hidden = false;
       }
     }
   });
@@ -298,9 +308,11 @@ function updateKnownVisibility() {
     }
     if (whitelist.includes(meta.channelKey)) {
       video.removeAttribute(`data-${DATA_PREFIX}-hidden`);
+      if (meta.hidden) hudDirty = true;
       meta.hidden = false;
     } else {
       video.setAttribute(`data-${DATA_PREFIX}-hidden`, "true");
+      if (!meta.hidden) hudDirty = true;
       meta.hidden = true;
     }
   }
@@ -406,7 +418,8 @@ function ensureHudDot() {
   }
   if (!dot.dataset.bound) {
     dot.dataset.bound = "true";
-    dot.addEventListener("click", () => {
+    dot.addEventListener("click", event => {
+      event.stopPropagation();
       const isHidden =
         panel.getAttribute(`data-${DATA_PREFIX}-hidden`) === "true";
       panel.setAttribute(
@@ -415,23 +428,40 @@ function ensureHudDot() {
       );
       if (isHidden) renderHudPanel(panel);
     });
+    panel.addEventListener("click", event => event.stopPropagation());
+    document.addEventListener("click", event => {
+      if (panel.getAttribute(`data-${DATA_PREFIX}-hidden`) !== "false") return;
+      if (panel.contains(event.target) || dot.contains(event.target)) return;
+      panel.setAttribute(`data-${DATA_PREFIX}-hidden`, "true");
+    });
   }
   return dot;
 }
 
 function updateHudDot() {
   const dot = ensureHudDot();
+  const panel = document.getElementById(HUD_PANEL_ID);
   let total = 0;
   let hidden = 0;
   for (const meta of memberOnlyIndex.values()) {
     total += 1;
     if (meta.hidden) hidden += 1;
   }
+  const signature = `${total}:${hidden}`;
   dot.title = `Member-only videos: ${total} (${hidden} hidden)`;
   dot.setAttribute(
     `data-${DATA_PREFIX}-active`,
     total > 0 ? "true" : "false"
   );
+  if (
+    panel &&
+    panel.getAttribute(`data-${DATA_PREFIX}-hidden`) === "false" &&
+    (hudDirty || signature !== lastHudSignature)
+  ) {
+    renderHudPanel(panel);
+    hudDirty = false;
+    lastHudSignature = signature;
+  }
 }
 
 function renderHudPanel(panel) {