From 0373859ad3793dceadf441bbf296e395c2c2a547 Mon Sep 17 00:00:00 2001
From: Keep Creating Online <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sun, 23 Feb 2025 11:40:07 -0500
Subject: [PATCH 001/101] added ~Bordut-Nodlex to whitelist

---
 js/lists.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/lists.js b/js/lists.js
index ee7274a1..2abc968e 100644
--- a/js/lists.js
+++ b/js/lists.js
@@ -13,6 +13,7 @@ const npubs = [
   "npub1m5s9w4t03znyetxswhgq0ud7fq8ef8y3l4kscn2e8wkvmv42hh3qujgjl3", // mister_monster
   "npub13qexjtmajssuhz8gdchgx65dwsnr705drse294zz5vt4e78ya2vqzyg8lv", // SatoshiSignal
   "npub1da7m2ksdj24995hm8afv88pjpvzt6t9vh70mg8t52yjwtxza3vjszyar58", // GoblinBox
+  "npub196rl3tls3c4y79pc3ptrrj2430z7p5uwetfhukhtkt69hph0fvwq08l43q", // ~Bordut-Nodlex
 ];
 
 console.log("DEBUG: lists.js loaded, npubs:", npubs);

From c4289161e11c3524fdba2200ac23902ac82d6a75 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 22 Sep 2025 09:41:07 -0400
Subject: [PATCH 002/101] Load disclaimer modal dynamically

---
 js/app.js        |  4 +---
 js/disclaimer.js | 24 ++++++++++++++++++------
 js/index.js      |  6 ++++++
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/js/app.js b/js/app.js
index 5d45bc03..51997718 100644
--- a/js/app.js
+++ b/js/app.js
@@ -4,7 +4,6 @@ import { loadView } from "./viewManager.js";
 import { nostrClient } from "./nostr.js";
 import { torrentClient } from "./webtorrent.js";
 import { isDevMode } from "./config.js";
-import disclaimerModal from "./disclaimer.js";
 import { isWhitelistEnabled } from "./config.js";
 import {
   initialWhitelist,
@@ -208,9 +207,8 @@ class bitvidApp {
         }
       }
 
-      // 5. Setup general event listeners, show disclaimers
+      // 5. Setup general event listeners
       this.setupEventListeners();
-      disclaimerModal.show();
 
       // 6) Load the default view ONLY if there's no #view= already
       if (!window.location.hash || !window.location.hash.startsWith("#view=")) {
diff --git a/js/disclaimer.js b/js/disclaimer.js
index e1a13980..bdfa4454 100644
--- a/js/disclaimer.js
+++ b/js/disclaimer.js
@@ -2,17 +2,29 @@
 
 class DisclaimerModal {
   constructor() {
-    // Initialize elements when the disclaimer HTML is in the DOM.
-    this.init();
+    this.modal = null;
+    this.acceptButton = null;
+    this.acceptHandler = null;
   }
 
   init() {
     this.modal = document.getElementById("disclaimerModal");
-    this.acceptButton = document.getElementById("acceptDisclaimer");
-    if (this.acceptButton) {
-      this.acceptButton.addEventListener("click", () => {
+    const nextAcceptButton = document.getElementById("acceptDisclaimer");
+
+    if (!this.acceptHandler) {
+      this.acceptHandler = () => {
         this.hide();
-      });
+      };
+    }
+
+    if (this.acceptButton && this.acceptHandler) {
+      this.acceptButton.removeEventListener("click", this.acceptHandler);
+    }
+
+    this.acceptButton = nextAcceptButton || null;
+
+    if (this.acceptButton && this.acceptHandler) {
+      this.acceptButton.addEventListener("click", this.acceptHandler);
     }
   }
 
diff --git a/js/index.js b/js/index.js
index ce3b6db5..64d41275 100644
--- a/js/index.js
+++ b/js/index.js
@@ -171,6 +171,12 @@ Promise.all([
 
     // Also run once on initial load
     handleHashChange();
+
+    return import("./disclaimer.js");
+  })
+  .then(({ default: disclaimerModal }) => {
+    disclaimerModal.init();
+    disclaimerModal.show();
   });
 
 /* -------------------------------------------

From fe0245e30cc5328335088a7c81971a3571697ec1 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 22 Sep 2025 09:54:19 -0400
Subject: [PATCH 003/101] Improve access control list initialization

---
 js/accessControl.js | 110 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 92 insertions(+), 18 deletions(-)

diff --git a/js/accessControl.js b/js/accessControl.js
index 15d68bff..4cc051ba 100644
--- a/js/accessControl.js
+++ b/js/accessControl.js
@@ -7,44 +7,118 @@ class AccessControl {
   constructor() {
     // Debug logging for initialization
     console.log("DEBUG: AccessControl constructor called");
-    console.log("DEBUG: initialWhitelist from import:", initialWhitelist);
-    console.log("DEBUG: typeof initialWhitelist:", typeof initialWhitelist);
-    console.log("DEBUG: initialWhitelist length:", initialWhitelist.length);
 
-    // Initialize empty sets
-    this.whitelist = new Set(initialWhitelist);
-    this.blacklist = new Set(initialBlacklist.filter((x) => x)); // Filter out empty strings
+    const { data: storedWhitelist, status: whitelistStatus } = this.loadWhitelist();
+    const { data: storedBlacklist, status: blacklistStatus } = this.loadBlacklist();
+
+    if (storedWhitelist !== null) {
+      this.whitelist = new Set(storedWhitelist);
+    } else {
+      this.whitelist = new Set(initialWhitelist);
+      this.saveWhitelist();
+      if (whitelistStatus && whitelistStatus !== "missing") {
+        console.warn(
+          `Whitelist storage ${whitelistStatus}. Falling back to initial whitelist.`
+        );
+      }
+    }
+
+    if (storedBlacklist !== null) {
+      this.blacklist = new Set(storedBlacklist);
+    } else {
+      this.blacklist = new Set(initialBlacklist.filter((x) => x)); // Filter out empty strings
+      this.saveBlacklist();
+      if (blacklistStatus && blacklistStatus !== "missing") {
+        console.warn(
+          `Blacklist storage ${blacklistStatus}. Falling back to initial blacklist.`
+        );
+      }
+    }
 
     // Debug the sets
-    console.log("DEBUG: Whitelist after Set creation:", [...this.whitelist]);
-    console.log("DEBUG: Blacklist after Set creation:", [...this.blacklist]);
-
-    // Save to localStorage
-    this.saveWhitelist();
-    this.saveBlacklist();
+    console.log("DEBUG: Whitelist after initialization:", [...this.whitelist]);
+    console.log("DEBUG: Blacklist after initialization:", [...this.blacklist]);
   }
 
   // Rest of the class remains the same...
   loadWhitelist() {
     try {
       const stored = localStorage.getItem("bitvid_whitelist");
-      return stored ? JSON.parse(stored) : [];
+      if (!stored) {
+        if (isDevMode) console.log("No stored whitelist found in localStorage.");
+        return { data: null, status: "missing" };
+      }
+
+      const parsed = JSON.parse(stored);
+      const sanitized = this.sanitizeList(parsed, "whitelist");
+      return {
+        data: sanitized,
+        status: sanitized === null ? "invalid" : "ok",
+      };
     } catch (error) {
-      console.error("Error loading whitelist:", error);
-      return [];
+      console.error("Error loading whitelist, using defaults:", error);
+      return { data: null, status: "error" };
     }
   }
 
   loadBlacklist() {
     try {
       const stored = localStorage.getItem("bitvid_blacklist");
-      return stored ? JSON.parse(stored) : [];
+      if (!stored) {
+        if (isDevMode) console.log("No stored blacklist found in localStorage.");
+        return { data: null, status: "missing" };
+      }
+
+      const parsed = JSON.parse(stored);
+      const sanitized = this.sanitizeList(parsed, "blacklist");
+      return {
+        data: sanitized,
+        status: sanitized === null ? "invalid" : "ok",
+      };
     } catch (error) {
-      console.error("Error loading blacklist:", error);
-      return [];
+      console.error("Error loading blacklist, using defaults:", error);
+      return { data: null, status: "error" };
     }
   }
 
+  sanitizeList(list, listName) {
+    if (!Array.isArray(list)) {
+      console.warn(
+        `Stored ${listName} is not an array. Received:`,
+        list
+      );
+      return null;
+    }
+
+    const sanitized = [];
+    let invalidEntries = 0;
+
+    list.forEach((value) => {
+      if (typeof value !== "string") {
+        invalidEntries += 1;
+        return;
+      }
+
+      const trimmed = value.trim();
+      if (trimmed) {
+        sanitized.push(trimmed);
+      } else {
+        invalidEntries += 1;
+      }
+    });
+
+    if (invalidEntries > 0) {
+      console.warn(
+        `Stored ${listName} contained ${invalidEntries} invalid entr${
+          invalidEntries === 1 ? "y" : "ies"
+        }. Sanitized list:`,
+        sanitized
+      );
+    }
+
+    return sanitized;
+  }
+
   saveWhitelist() {
     try {
       localStorage.setItem(

From b51b692f31a3fc21595f04c3899e9b511e45b1ef Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 22 Sep 2025 09:57:19 -0400
Subject: [PATCH 004/101] Added Agents.md

---
 AGENTS.md | 229 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 229 insertions(+)
 create mode 100644 AGENTS.md

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..b06fd708
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,229 @@
+# Bitvid — AI Agent Guide (AGENTS.md)
+
+This document tells AI agents how Bitvid works **now** and how to extend it going forward. It focuses on the newly adopted **URL‑first playback with WebTorrent fallback** strategy, minimal code touchpoints, and reliable interop with the Nostr ecosystem.
+
+---
+
+## 1) Mission & Product Direction
+
+**Goal:** Stream videos reliably and cheaply.
+
+* **Primary transport:** a **hosted video URL** (MP4/WebM/HLS/DASH) that plays directly in the browser.
+* **Secondary transport (fallback & cost control):** a **WebTorrent magnet** enhanced with **`ws=` (web seed)** and **`xs=` (.torrent URL)**.
+* **Behavior:** Try `url` first. If it’s missing or unreachable, **fallback to WebTorrent** using the same post’s magnet. If the magnet includes `ws`/`xs`, WebTorrent can bootstrap via HTTP and/or peers.
+* **Nostr interop:** Keep existing kind `30078` events for Bitvid’s app data; optionally **mirror a NIP‑94 kind `1063`** event so other clients can discover the same hosted video URL.
+* **Resilience:** Light link‑health probing to hide/flag dead URLs and avoid broken playback.
+
+---
+
+## 2) High‑Level Architecture
+
+* **Frontend app** (vanilla JS + HTML/CSS)
+
+  * **Upload modal** accepts: Title (required), **URL or Magnet** (at least one required), Thumbnail, Description. Optional fields for **`ws`** and **`xs`** help P2P bootstrap.
+  * **Feed / Cards** render video posts, each carrying both `data-play-url` and `data-play-magnet` attributes.
+  * **Player** uses `playVideoWithFallback({ url, magnet })`: probe `url`; if OK, play via `<video>`; else call `torrentClient.streamVideo(magnet, videoEl)`.
+* **Nostr client**
+
+  * Publishes Bitvid’s **kind `30078`** events with content `{ version, title, url?, magnet?, thumbnail?, description?, mode }`.
+  * Subscribes to Bitvid video events and (optionally) **NIP‑94 `kind 1063`** to interop with external clients.
+* **Optional Upload API** (future): If adding server‑side upload (NIP‑96/98), the client would POST to an uploader, receive an HTTPS URL, then publish events.
+
+---
+
+## 3) Data Contracts
+
+### 3.1 Bitvid app event (kind `30078`)
+
+**Content JSON** (superset; some fields optional):
+
+```json
+{
+  "version": 2,
+  "title": "<string>",
+  "url": "https://cdn.example.com/video.mp4",     // optional but recommended
+  "magnet": "magnet:?xt=urn:btih:...&tr=...",      // optional but recommended
+  "thumbnail": "https://.../thumb.jpg",            // optional
+  "description": "<string>",                       // optional
+  "mode": "live" | "dev"                          // optional
+}
+```
+
+**Validation:**
+
+* `title` **required**; **at least one** of `url` **or** `magnet` **required**.
+* If `magnet` present and uploader supplied `ws` and/or `xs`, append them to the magnet before publish.
+
+### 3.2 NIP‑94 mirror (kind `1063`, optional but encouraged)
+
+**Tags (typical):**
+
+* `["url", "https://cdn.example.com/video.mp4"]`
+* `["m", "video/mp4"]` (or `video/webm`, `application/x-mpegURL`, etc.)
+* `["thumb", "https://.../thumb.jpg"]` (optional)
+* `["alt", "<title or description>"]` (optional)
+* `["size", "<bytes>"]` (optional)
+* `["x", "<sha256-of-file>"]` (optional integrity)
+* `["magnet", "magnet:?xt=...&ws=...&xs=..."]` (optional for P2P aware clients)
+
+> Agents SHOULD keep Bitvid’s 30078 as the source of truth, and publish a **lossless mirror** into 1063 when possible.
+
+---
+
+## 4) UI & UX Flows
+
+### 4.1 Upload Flow (author)
+
+1. Author opens **Upload modal**.
+2. Inputs **Title**, plus **either** Hosted URL **or** Magnet (or both). Optionally adds **Web seed base (ws)** and **.torrent URL (xs)**.
+3. Client **augments magnet** with `ws`/`xs` and publishes a kind `30078` event (and optionally a NIP‑94 `1063`).
+
+### 4.2 Consumption Flow (viewer)
+
+1. Feed renders cards with `data-play-url` + `data-play-magnet`.
+2. On click: `playVideoWithFallback()`
+
+   * `probeUrl(url)` → If reachable, set `<video>.src = url` and play.
+   * Else: `torrentClient.streamVideo(magnet, videoEl)`.
+3. UI hides or badges items whose `probeUrl()` fails consistently (cached temporarily).
+
+---
+
+## 5) Key Client Functions (reference)
+
+### 5.1 `augmentMagnet(raw, ws?, xs?)`
+
+* Accepts a magnet URI and conditionally **appends** `ws` and `xs` query params.
+* Returns the same magnet if not a `magnet:` scheme.
+
+### 5.2 `probeUrl(url)`
+
+* `HEAD` request to check availability; expects `2xx` and (ideally) `Accept-Ranges: bytes`.
+* Fallback small `GET` with `Range: bytes=0-1023` can be used if certain hosts block `HEAD`.
+* Returns boolean `ok`.
+
+### 5.3 `playVideoWithFallback({ url, magnet })`
+
+* Try `playHttp(url)` if `probeUrl(url)` passes.
+* Else try `playViaWebTorrent(magnet)`.
+* Show UI error if neither source available.
+
+### 5.4 `playViaWebTorrent(magnet)`
+
+* Uses existing `torrentClient.streamVideo(magnet, videoEl)` under the hood.
+* Benefits if magnet contains `ws`/`xs` for bootstrap.
+
+---
+
+## 6) Markup Contracts
+
+* **Cards:** add both attributes where applicable:
+
+  * `data-play-url="<encoded URL or empty>"`
+  * `data-play-magnet="<magnet or empty>"`
+* **Click delegate:** look for a closest element bearing either attribute; decode `data-play-url` prior to use.
+
+---
+
+## 7) Server Requirements for Hosted URLs
+
+* **CORS:** allow the app origin (or `*`).
+* **Range requests:** ensure `Accept-Ranges: bytes`.
+* **Correct MIME:** `video/mp4`, `video/webm`, `application/x-mpegURL`, etc.
+* **Optional:** expose `Content-Length` for better UX/progress.
+
+---
+
+## 8) P2P Notes for Agents
+
+* **`ws=` (web seed):** HTTP(S) base path where the file is fetchable; enables WebTorrent to download pieces even with zero peers.
+* **`xs=`:** HTTP(S) URL of the `.torrent` metadata so the client can start promptly without DHT/peer discovery.
+* **Trackers:** Keep WSS trackers for peer discovery; they reduce CDN load when peers exist.
+
+---
+
+## 9) Interop & Extensions
+
+* **Live streams:** future option via HLS URLs (MIME `application/x-mpegURL`). For Nostr live presence, consider **NIP‑53** events alongside VOD 1063 entries.
+* **Adaptive Bitrate + P2P:** if ABR is needed with P2P, consider a segment‑sharing overlay (e.g., p2p segment loaders) rather than WebTorrent.
+* **Uploads (optional):** NIP‑96/NIP‑98 flow to obtain a hosted URL, then publish Bitvid/NIP‑94 events.
+
+---
+
+## 10) Testing Checklist (agents)
+
+* **Form validation:** title present; ensure `(url || magnet)` is true; `ws` and `xs` appended only for magnet.
+* **Probe:** healthy URL returns `ok=true`; dead URL hides/badges card; cache prevents re‑probing every render.
+* **Playback:** URL path plays successfully; disconnect network to force WebTorrent path; verify video plays via magnet.
+* **CORS & Range:** verify no console CORS errors; confirm seeking works.
+* **Events:** verify kind `30078` contains `url` and/or `magnet`; optional 1063 mirror created correctly.
+* **Cards:** both `data-play-url` and `data-play-magnet` present; click handler calls fallback player.
+
+---
+
+## 11) Guardrails & Do/Don’t
+
+**Do**
+
+* Fail soft: when URL fails, fall back to magnet without blocking UI.
+* Prefer standards: URL + NIP‑94 mirror when possible.
+* Degrade gracefully when `ws`/`xs` missing; torrent should still work with peers.
+
+**Don’t**
+
+* Don’t require magnet if URL is provided (and vice versa).
+* Don’t assume CORS/Range are configured—probe and message helpfully.
+* Don’t block the main thread with large HEAD/GETs; keep probes lightweight with timeouts.
+
+---
+
+## 12) Quick Reference (snippets)
+
+**Bitvid content object (30078)**
+
+```js
+const content = {
+  version: 2,
+  title,
+  url,            // optional but preferred
+  magnet,         // optional but preferred
+  thumbnail,      // optional
+  description,    // optional
+  mode            // "live" | "dev"
+};
+```
+
+**Magnet augmentation**
+
+```js
+function augmentMagnet(raw, ws, xs) {
+  if (!raw) return "";
+  const u = new URL(raw);
+  if (u.protocol !== "magnet:") return raw;
+  if (ws) u.searchParams.append("ws", ws);
+  if (xs) u.searchParams.append("xs", xs);
+  return u.toString();
+}
+```
+
+**Playback with fallback**
+
+```js
+async function playVideoWithFallback({ url, magnet }) {
+  if (url && await probeUrl(url)) return playHttp(url);
+  if (magnet) return playViaWebTorrent(magnet);
+  throw new Error("No playable source");
+}
+```
+
+---
+
+## 13) Roadmap Hooks (where to extend)
+
+* **Analytics:** Keep using your existing 30078 analytics/logging. Add fields for `play_source: "url"|"torrent"` to measure cost savings.
+* **Integrity:** Optionally compute SHA‑256 of the hosted file (off‑thread) and publish as NIP‑94 `["x", hash]` tag.
+* **Moderation:** Add a background task to periodically probe and mark dead links; publish a lightweight status event so other Bitvid clients learn from each other.
+
+---
+
+**End of AGENTS.md**

From 7812034f0dfe44f0559daf56a3001cd58bc994b5 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 22 Sep 2025 10:59:39 -0400
Subject: [PATCH 005/101] Update upload modal with URL and torrent helper
 fields

---
 components/upload-modal.html | 62 ++++++++++++++++++++++++++++++++++--
 1 file changed, 60 insertions(+), 2 deletions(-)

diff --git a/components/upload-modal.html b/components/upload-modal.html
index fa01051e..fdf351d4 100644
--- a/components/upload-modal.html
+++ b/components/upload-modal.html
@@ -52,6 +52,9 @@
       <!-- Form Content -->
       <div class="p-6 space-y-4">
         <form id="uploadForm" class="space-y-4">
+          <p class="text-sm text-gray-400">
+            Share a title plus either a hosted video URL or a magnet link. Providing both helps Bitvid fall back gracefully.
+          </p>
           <div>
             <label
               for="uploadTitle"
@@ -66,18 +69,73 @@
             />
           </div>
 
+          <div>
+            <label
+              for="uploadUrl"
+              class="block text-sm font-medium text-gray-200"
+              >Hosted Video URL (preferred)</label
+            >
+            <input
+              type="url"
+              id="uploadUrl"
+              placeholder="https://cdn.example.com/video.mp4"
+              class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+            />
+            <p class="mt-1 text-xs text-gray-400">
+              Direct link to your video or stream. Bitvid will play this first before falling back to WebTorrent.
+            </p>
+          </div>
+
           <div>
             <label
               for="uploadMagnet"
               class="block text-sm font-medium text-gray-200"
-              >Magnet Link</label
+              >Magnet Link (optional if URL provided)</label
             >
             <input
               type="text"
               id="uploadMagnet"
-              required
+              placeholder="magnet:?xt=urn:btih:..."
               class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
             />
+            <p class="mt-1 text-xs text-gray-400">
+              Include this when you have a torrent source. Bitvid will automatically augment it with any web seeds or metadata you provide.
+            </p>
+          </div>
+
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div>
+              <label
+                for="uploadWs"
+                class="block text-sm font-medium text-gray-200"
+                >Web Seed Base (ws, optional)</label
+              >
+              <input
+                type="url"
+                id="uploadWs"
+                placeholder="https://cdn.example.com/path/to/"
+                class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+              />
+              <p class="mt-1 text-xs text-gray-400">
+                HTTP(S) base path peers can fetch pieces from when falling back to the magnet.
+              </p>
+            </div>
+            <div>
+              <label
+                for="uploadXs"
+                class="block text-sm font-medium text-gray-200"
+                >Torrent Metadata URL (xs, optional)</label
+              >
+              <input
+                type="url"
+                id="uploadXs"
+                placeholder="https://cdn.example.com/video.torrent"
+                class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+              />
+              <p class="mt-1 text-xs text-gray-400">
+                Link to the <code>.torrent</code> file so WebTorrent clients can bootstrap instantly.
+              </p>
+            </div>
           </div>
 
           <div>

From ba9bba517a6b2170e12701ba5c36572ae6fd9c57 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 22 Sep 2025 11:23:09 -0400
Subject: [PATCH 006/101] Enhance upload form handling for URLs and magnets

---
 js/app.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 59 insertions(+), 6 deletions(-)

diff --git a/js/app.js b/js/app.js
index 51997718..7e73739d 100644
--- a/js/app.js
+++ b/js/app.js
@@ -18,6 +18,42 @@ function fakeDecrypt(str) {
   return str.split("").reverse().join("");
 }
 
+/**
+ * Append optional ws/xs parameters to a magnet URI when valid.
+ */
+function augmentMagnet(raw, ws, xs) {
+  const magnet = (raw || "").trim();
+  if (!magnet) {
+    return "";
+  }
+
+  let parsed;
+  try {
+    parsed = new URL(magnet);
+  } catch (err) {
+    return magnet;
+  }
+
+  if (parsed.protocol !== "magnet:") {
+    return magnet;
+  }
+
+  const appendIfMissing = (key, value) => {
+    if (!value) return;
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    const existing = parsed.searchParams.getAll(key);
+    if (!existing.includes(trimmed)) {
+      parsed.searchParams.append(key, trimmed);
+    }
+  };
+
+  appendIfMissing("ws", ws);
+  appendIfMissing("xs", xs);
+
+  return parsed.toString();
+}
+
 /**
  * Simple IntersectionObserver-based lazy loader for images (or videos).
  *
@@ -779,32 +815,49 @@ class bitvidApp {
     }
 
     const titleEl = document.getElementById("uploadTitle");
+    const urlEl = document.getElementById("uploadUrl");
     const magnetEl = document.getElementById("uploadMagnet");
+    const wsEl = document.getElementById("uploadWs");
+    const xsEl = document.getElementById("uploadXs");
     const thumbEl = document.getElementById("uploadThumbnail");
     const descEl = document.getElementById("uploadDescription");
     const privEl = document.getElementById("uploadIsPrivate");
 
+    const title = titleEl?.value.trim() || "";
+    const url = urlEl?.value.trim() || "";
+    const magnet = magnetEl?.value.trim() || "";
+    const ws = wsEl?.value.trim() || "";
+    const xs = xsEl?.value.trim() || "";
+    const thumbnail = thumbEl?.value.trim() || "";
+    const description = descEl?.value.trim() || "";
+
     const formData = {
       version: 2,
-      title: titleEl?.value.trim() || "",
-      magnet: magnetEl?.value.trim() || "",
-      thumbnail: thumbEl?.value.trim() || "",
-      description: descEl?.value.trim() || "",
+      title,
+      url,
+      magnet,
+      thumbnail,
+      description,
       mode: isDevMode ? "dev" : "live",
       // isPrivate: privEl?.checked || false,
     };
 
-    if (!formData.title || !formData.magnet) {
-      this.showError("Title and Magnet are required.");
+    if (!formData.title || (!formData.url && !formData.magnet)) {
+      this.showError("Please provide a title and at least one of URL or Magnet.");
       return;
     }
 
+    formData.magnet = augmentMagnet(formData.magnet, ws, xs);
+
     try {
       await nostrClient.publishVideo(formData, this.pubkey);
 
       // Clear fields
       if (titleEl) titleEl.value = "";
+      if (urlEl) urlEl.value = "";
       if (magnetEl) magnetEl.value = "";
+      if (wsEl) wsEl.value = "";
+      if (xsEl) xsEl.value = "";
       if (thumbEl) thumbEl.value = "";
       if (descEl) descEl.value = "";
       if (privEl) privEl.checked = false;

From 9014371263d97eaf66a9fe8155d3e2cd7153cacb Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 22 Sep 2025 12:05:15 -0400
Subject: [PATCH 007/101] Support URL-only videos and update playback fallback

---
 js/app.js            | 232 +++++++++++++++++++++++++++++++------------
 js/channelProfile.js |  14 ++-
 js/nostr.js          |  36 +++++--
 js/subscriptions.js  |  15 ++-
 4 files changed, 219 insertions(+), 78 deletions(-)

diff --git a/js/app.js b/js/app.js
index 7e73739d..331d16fe 100644
--- a/js/app.js
+++ b/js/app.js
@@ -644,13 +644,14 @@ class bitvidApp {
     // 9) Event delegation on the video list container for playing videos
     if (this.videoList) {
       this.videoList.addEventListener("click", (event) => {
-        const magnetTrigger = event.target.closest("[data-play-magnet]");
-        if (magnetTrigger) {
-          // For a normal left-click (button 0, no Ctrl/Cmd), prevent navigation:
+        const trigger = event.target.closest("[data-video-id]");
+        if (trigger) {
           if (event.button === 0 && !event.ctrlKey && !event.metaKey) {
-            event.preventDefault(); // Stop browser from following the href
-            const magnet = magnetTrigger.dataset.playMagnet;
-            this.playVideo(magnet);
+            event.preventDefault();
+            const eventId = trigger.getAttribute("data-video-id");
+            if (eventId) {
+              this.playVideoByEventId(eventId);
+            }
           }
         }
       });
@@ -1239,12 +1240,16 @@ class bitvidApp {
         `
         : "";
 
+      const encodedMagnet = encodeURIComponent(video.magnet || "");
+      const encodedUrl = encodeURIComponent(video.url || "");
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <!-- The clickable link to play video -->
           <a
             href="${shareUrl}"
-            data-play-magnet="${encodeURIComponent(video.magnet)}"
+            data-video-id="${video.id}"
+            data-play-url="${encodedUrl}"
+            data-play-magnet="${encodedMagnet}"
             class="block cursor-pointer relative group"
           >
             <div class="ratio-16-9">
@@ -1259,7 +1264,9 @@ class bitvidApp {
             <!-- Title triggers the video modal as well -->
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
-              data-play-magnet="${encodeURIComponent(video.magnet)}"
+              data-video-id="${video.id}"
+              data-play-url="${encodedUrl}"
+              data-play-magnet="${encodedMagnet}"
             >
               ${this.escapeHTML(video.title)}
             </h3>
@@ -1469,6 +1476,10 @@ class bitvidApp {
         "New Magnet? (blank=keep existing)",
         video.magnet
       );
+      const newUrl = prompt(
+        "New URL? (blank=keep existing)",
+        video.url || ""
+      );
       const newThumb = prompt(
         "New Thumbnail? (blank=keep existing)",
         video.thumbnail
@@ -1484,6 +1495,7 @@ class bitvidApp {
         !newTitle || !newTitle.trim() ? video.title : newTitle.trim();
       const magnet =
         !newMagnet || !newMagnet.trim() ? video.magnet : newMagnet.trim();
+      const url = !newUrl || !newUrl.trim() ? video.url : newUrl.trim();
       const thumbnail =
         !newThumb || !newThumb.trim() ? video.thumbnail : newThumb.trim();
       const description =
@@ -1495,6 +1507,7 @@ class bitvidApp {
         // isPrivate: wantPrivate,
         title,
         magnet,
+        url,
         thumbnail,
         description,
         mode: isDevMode ? "dev" : "live",
@@ -1693,10 +1706,35 @@ class bitvidApp {
         video.alreadyDecrypted = true;
       }
 
+      const trimmedMagnet =
+        typeof video.magnet === "string" ? video.magnet.trim() : "";
+      const trimmedUrl =
+        typeof video.url === "string" ? video.url.trim() : "";
+      const hasMagnet = !!trimmedMagnet;
+      const hasUrl = !!trimmedUrl;
+
+      if (!hasMagnet && !hasUrl) {
+        this.showError("This video has no playable source.");
+        return;
+      }
+
+      video.magnet = trimmedMagnet;
+      video.url = trimmedUrl;
+
       this.currentVideo = video;
-      this.currentMagnetUri = video.magnet;
+      this.currentMagnetUri = hasMagnet ? trimmedMagnet : null;
       this.showModalWithPoster();
 
+      if (this.copyMagnetBtn) {
+        this.copyMagnetBtn.disabled = !hasMagnet;
+        this.copyMagnetBtn.setAttribute(
+          "aria-disabled",
+          (!hasMagnet).toString()
+        );
+        this.copyMagnetBtn.classList.toggle("opacity-50", !hasMagnet);
+        this.copyMagnetBtn.classList.toggle("cursor-not-allowed", !hasMagnet);
+      }
+
       // Update ?v= param in the URL
       const nevent = window.NostrTools.nip19.neventEncode({ id: eventId });
       const newUrl = `${window.location.pathname}?v=${encodeURIComponent(
@@ -1750,12 +1788,24 @@ class bitvidApp {
         this.creatorAvatar.alt = creatorProfile.name;
       }
 
-      // Cleanup any previous WebTorrent streams, then start a fresh one
+      // Cleanup any previous WebTorrent streams, then start fresh playback
       await torrentClient.cleanup();
-      const cacheBustedMagnet = video.magnet + "&ts=" + Date.now();
-      this.log("Starting video stream with:", cacheBustedMagnet);
 
-      // Autoplay preferences
+      if (!hasMagnet) {
+        if (this.modalPeers) {
+          this.modalPeers.textContent = "";
+        }
+        if (this.modalSpeed) {
+          this.modalSpeed.textContent = "";
+        }
+        if (this.modalDownloaded) {
+          this.modalDownloaded.textContent = "";
+        }
+        if (this.modalProgress) {
+          this.modalProgress.style.width = "0%";
+        }
+      }
+
       const storedUnmuted = localStorage.getItem("unmutedAutoplay");
       const userWantsUnmuted = storedUnmuted === "true";
       this.modalVideo.muted = !userWantsUnmuted;
@@ -1767,61 +1817,115 @@ class bitvidApp {
         );
       });
 
-      const realTorrent = await torrentClient.streamVideo(
-        cacheBustedMagnet,
-        this.modalVideo
-      );
+      const attemptAutoplay = () => {
+        this.modalVideo.play().catch((err) => {
+          this.log("Autoplay failed:", err);
+          if (!this.modalVideo.muted) {
+            this.log("Falling back to muted autoplay.");
+            this.modalVideo.muted = true;
+            this.modalVideo.play().catch((err2) => {
+              this.log("Muted autoplay also failed:", err2);
+            });
+          }
+        });
+      };
 
-      // Try playing; if autoplay fails, fallback to muted
-      this.modalVideo.play().catch((err) => {
-        this.log("Autoplay failed:", err);
-        if (!this.modalVideo.muted) {
-          this.log("Falling back to muted autoplay.");
-          this.modalVideo.muted = true;
-          this.modalVideo.play().catch((err2) => {
-            this.log("Muted autoplay also failed:", err2);
+      const setupTorrentMonitors = (torrentInstance) => {
+        if (!torrentInstance) {
+          return;
+        }
+        const updateInterval = setInterval(() => {
+          if (!document.body.contains(this.modalVideo)) {
+            clearInterval(updateInterval);
+            return;
+          }
+          this.updateTorrentStatus(torrentInstance);
+        }, 3000);
+        this.activeIntervals.push(updateInterval);
+
+        const mirrorInterval = setInterval(() => {
+          if (!document.body.contains(this.modalVideo)) {
+            clearInterval(mirrorInterval);
+            return;
+          }
+          const status = document.getElementById("status");
+          const progress = document.getElementById("progress");
+          const peers = document.getElementById("peers");
+          const speed = document.getElementById("speed");
+          const downloaded = document.getElementById("downloaded");
+          if (status && this.modalStatus) {
+            this.modalStatus.textContent = status.textContent;
+          }
+          if (progress && this.modalProgress) {
+            this.modalProgress.style.width = progress.style.width;
+          }
+          if (peers && this.modalPeers) {
+            this.modalPeers.textContent = peers.textContent;
+          }
+          if (speed && this.modalSpeed) {
+            this.modalSpeed.textContent = speed.textContent;
+          }
+          if (downloaded && this.modalDownloaded) {
+            this.modalDownloaded.textContent = downloaded.textContent;
+          }
+        }, 3000);
+        this.activeIntervals.push(mirrorInterval);
+      };
+
+      const startTorrentPlayback = async () => {
+        if (!hasMagnet) {
+          return null;
+        }
+        const cacheBustedMagnet = `${trimmedMagnet}&ts=${Date.now()}`;
+        this.log("Starting video stream with:", cacheBustedMagnet);
+        if (this.modalStatus) {
+          this.modalStatus.textContent = "Streaming via WebTorrent";
+        }
+        const torrentInstance = await torrentClient.streamVideo(
+          cacheBustedMagnet,
+          this.modalVideo
+        );
+        setupTorrentMonitors(torrentInstance);
+        return torrentInstance;
+      };
+
+      if (hasUrl) {
+        if (this.modalStatus) {
+          this.modalStatus.textContent = "Loading video...";
+        }
+        const markUrlReady = () => {
+          if (this.modalStatus) {
+            this.modalStatus.textContent = "Streaming from URL";
+          }
+        };
+        this.modalVideo.addEventListener("loadeddata", markUrlReady, {
+          once: true,
+        });
+        this.modalVideo.src = trimmedUrl;
+        this.modalVideo.load();
+
+        if (hasMagnet) {
+          const fallbackToTorrent = async () => {
+            this.modalVideo.removeEventListener("error", fallbackToTorrent);
+            this.log("HTTP playback failed, falling back to WebTorrent.");
+            try {
+              await torrentClient.cleanup();
+              await startTorrentPlayback();
+              attemptAutoplay();
+            } catch (torrentErr) {
+              console.error("WebTorrent fallback failed:", torrentErr);
+              this.showError("Unable to play this video.");
+            }
+          };
+          this.modalVideo.addEventListener("error", fallbackToTorrent, {
+            once: true,
           });
         }
-      });
+      } else {
+        await startTorrentPlayback();
+      }
 
-      // Update torrent stats every 3s
-      const updateInterval = setInterval(() => {
-        if (!document.body.contains(this.modalVideo)) {
-          clearInterval(updateInterval);
-          return;
-        }
-        this.updateTorrentStatus(realTorrent);
-      }, 3000);
-      this.activeIntervals.push(updateInterval);
-
-      // Mirror stats into the modal if needed
-      const mirrorInterval = setInterval(() => {
-        if (!document.body.contains(this.modalVideo)) {
-          clearInterval(mirrorInterval);
-          return;
-        }
-        const status = document.getElementById("status");
-        const progress = document.getElementById("progress");
-        const peers = document.getElementById("peers");
-        const speed = document.getElementById("speed");
-        const downloaded = document.getElementById("downloaded");
-        if (status && this.modalStatus) {
-          this.modalStatus.textContent = status.textContent;
-        }
-        if (progress && this.modalProgress) {
-          this.modalProgress.style.width = progress.style.width;
-        }
-        if (peers && this.modalPeers) {
-          this.modalPeers.textContent = peers.textContent;
-        }
-        if (speed && this.modalSpeed) {
-          this.modalSpeed.textContent = speed.textContent;
-        }
-        if (downloaded && this.modalDownloaded) {
-          this.modalDownloaded.textContent = downloaded.textContent;
-        }
-      }, 3000);
-      this.activeIntervals.push(mirrorInterval);
+      attemptAutoplay();
     } catch (error) {
       this.log("Error in playVideoByEventId:", error);
       this.showError(`Playback error: ${error.message}`);
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 968b7dd3..1896bf42 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -331,6 +331,9 @@ async function loadUserVideos(pubkey) {
         "duration-300"
       );
 
+      const encodedUrl = encodeURIComponent(video.url || "");
+      const encodedMagnet = encodeURIComponent(video.magnet || "");
+
       cardEl.innerHTML = `
         <div class="cursor-pointer relative group">
           <div class="ratio-16-9">
@@ -345,7 +348,9 @@ async function loadUserVideos(pubkey) {
           <div>
             <h3
               class="text-lg font-bold text-white mb-2 line-clamp-2"
-              data-play-magnet="${encodeURIComponent(video.magnet)}"
+              data-video-id="${video.id}"
+              data-play-url="${encodedUrl}"
+              data-play-magnet="${encodedMagnet}"
             >
               ${safeTitle}
             </h3>
@@ -453,13 +458,15 @@ function localConvertEventToVideo(event) {
   try {
     const content = JSON.parse(event.content || "{}");
     const isSupportedVersion = content.version >= 2;
-    const hasRequiredFields = !!(content.title && content.magnet);
+    const hasRequiredFields = !!(
+      content.title && (content.url || content.magnet)
+    );
 
     if (!isSupportedVersion) {
       return { id: event.id, invalid: true, reason: "version <2" };
     }
     if (!hasRequiredFields) {
-      return { id: event.id, invalid: true, reason: "missing title/magnet" };
+      return { id: event.id, invalid: true, reason: "missing title/url+magnet" };
     }
 
     return {
@@ -468,6 +475,7 @@ function localConvertEventToVideo(event) {
       version: content.version,
       isPrivate: content.isPrivate ?? false,
       title: content.title ?? "",
+      url: content.url ?? "",
       magnet: content.magnet ?? "",
       thumbnail: content.thumbnail ?? "",
       description: content.description ?? "",
diff --git a/js/nostr.js b/js/nostr.js
index a1293f89..d753698f 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -53,7 +53,9 @@ function convertEventToVideo(event) {
 
     // Example checks:
     const isSupportedVersion = content.version >= 2;
-    const hasRequiredFields = !!(content.title && content.magnet);
+    const hasRequiredFields = !!(
+      content.title && (content.url || content.magnet)
+    );
 
     if (!isSupportedVersion) {
       return {
@@ -66,7 +68,7 @@ function convertEventToVideo(event) {
       return {
         id: event.id,
         invalid: true,
-        reason: "missing title/magnet",
+        reason: "missing title/url+magnet",
       };
     }
 
@@ -76,6 +78,7 @@ function convertEventToVideo(event) {
       version: content.version,
       isPrivate: content.isPrivate ?? false,
       title: content.title ?? "",
+      url: content.url ?? "",
       magnet: content.magnet ?? "",
       thumbnail: content.thumbnail ?? "",
       description: content.description ?? "",
@@ -222,10 +225,13 @@ class NostrClient {
       console.log("Publishing new video with data:", videoData);
     }
 
-    let finalMagnet = videoData.magnet;
-    if (videoData.isPrivate) {
+    const rawMagnet = typeof videoData.magnet === "string" ? videoData.magnet : "";
+    let finalMagnet = rawMagnet.trim();
+    if (videoData.isPrivate && finalMagnet) {
       finalMagnet = fakeEncrypt(finalMagnet);
     }
+    const finalUrl =
+      typeof videoData.url === "string" ? videoData.url.trim() : "";
 
     // brand-new root & d
     const videoRootId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
@@ -237,6 +243,7 @@ class NostrClient {
       deleted: false,
       isPrivate: videoData.isPrivate ?? false,
       title: videoData.title || "",
+      url: finalUrl,
       magnet: finalMagnet,
       thumbnail: videoData.thumbnail || "",
       description: videoData.description || "",
@@ -322,14 +329,23 @@ class NostrClient {
       oldPlainMagnet = fakeDecrypt(oldPlainMagnet);
     }
 
+    const oldUrl = baseEvent.url || "";
+
     // Determine if the updated note should be private
     const wantPrivate = updatedData.isPrivate ?? baseEvent.isPrivate ?? false;
 
     // Use the new magnet if provided; otherwise, fall back to the decrypted old magnet
-    let finalPlainMagnet = (updatedData.magnet || "").trim() || oldPlainMagnet;
-    let finalMagnet = wantPrivate
-      ? fakeEncrypt(finalPlainMagnet)
-      : finalPlainMagnet;
+    const newMagnetValue =
+      typeof updatedData.magnet === "string" ? updatedData.magnet.trim() : "";
+    let finalPlainMagnet = newMagnetValue || oldPlainMagnet;
+    let finalMagnet =
+      wantPrivate && finalPlainMagnet
+        ? fakeEncrypt(finalPlainMagnet)
+        : finalPlainMagnet;
+
+    const newUrlValue =
+      typeof updatedData.url === "string" ? updatedData.url.trim() : "";
+    const finalUrl = newUrlValue || oldUrl;
 
     // Use the existing videoRootId (or fall back to the base event's ID)
     const oldRootId = baseEvent.videoRootId || baseEvent.id;
@@ -344,6 +360,7 @@ class NostrClient {
       deleted: false,
       isPrivate: wantPrivate,
       title: updatedData.title ?? baseEvent.title,
+      url: finalUrl,
       magnet: finalMagnet,
       thumbnail: updatedData.thumbnail ?? baseEvent.thumbnail,
       description: updatedData.description ?? baseEvent.description,
@@ -420,6 +437,7 @@ class NostrClient {
           deleted: fetched.deleted,
           isPrivate: fetched.isPrivate,
           title: fetched.title,
+          url: fetched.url,
           magnet: fetched.magnet,
           thumbnail: fetched.thumbnail,
           description: fetched.description,
@@ -451,6 +469,7 @@ class NostrClient {
       deleted: true,
       isPrivate: oldContent.isPrivate ?? false,
       title: oldContent.title || "",
+      url: "",
       magnet: "",
       thumbnail: "",
       description: "This version was reverted by the creator.",
@@ -530,6 +549,7 @@ class NostrClient {
             deleted: vid.deleted,
             isPrivate: vid.isPrivate,
             title: vid.title,
+            url: vid.url,
             magnet: vid.magnet,
             thumbnail: vid.thumbnail,
             description: vid.description,
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 802c5b02..acc44c24 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -329,11 +329,15 @@ class SubscriptionsManager {
 
       const safeTitle = window.app?.escapeHTML(video.title) || "Untitled";
       const safeThumb = window.app?.escapeHTML(video.thumbnail) || "";
+      const encodedMagnet = encodeURIComponent(video.magnet || "");
+      const encodedUrl = encodeURIComponent(video.url || "");
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <a
             href="${shareUrl}"
-            data-play-magnet="${encodeURIComponent(video.magnet)}"
+            data-video-id="${video.id}"
+            data-play-url="${encodedUrl}"
+            data-play-magnet="${encodedMagnet}"
             class="block cursor-pointer relative group"
           >
             <div class="ratio-16-9">
@@ -347,7 +351,9 @@ class SubscriptionsManager {
           <div class="p-4">
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
-              data-play-magnet="${encodeURIComponent(video.magnet)}"
+              data-video-id="${video.id}"
+              data-play-url="${encodedUrl}"
+              data-play-magnet="${encodedMagnet}"
             >
               ${safeTitle}
             </h3>
@@ -482,7 +488,9 @@ class SubscriptionsManager {
   convertEventToVideo(evt) {
     try {
       const content = JSON.parse(evt.content || "{}");
-      const hasFields = !!(content.title && content.magnet);
+      const hasFields = !!(
+        content.title && (content.url || content.magnet)
+      );
       const versionOk = content.version >= 2;
       if (!versionOk || !hasFields) {
         return { id: evt.id, invalid: true };
@@ -496,6 +504,7 @@ class SubscriptionsManager {
         deleted: content.deleted === true,
         isPrivate: content.isPrivate === true,
         title: content.title || "",
+        url: content.url || "",
         magnet: content.magnet || "",
         thumbnail: content.thumbnail || "",
         description: content.description || "",

From 2ed1cc50db58dcf34bef73ed95cd8ab5ef28303c Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 22 Sep 2025 12:58:51 -0400
Subject: [PATCH 008/101] Add URL-aware playback delegation with fallback
 handling

---
 js/app.js            | 358 ++++++++++++++++++++++++++-----------------
 js/channelProfile.js |  24 ++-
 js/subscriptions.js  |   9 +-
 3 files changed, 244 insertions(+), 147 deletions(-)

diff --git a/js/app.js b/js/app.js
index 331d16fe..eaf17aee 100644
--- a/js/app.js
+++ b/js/app.js
@@ -643,15 +643,39 @@ class bitvidApp {
 
     // 9) Event delegation on the video list container for playing videos
     if (this.videoList) {
-      this.videoList.addEventListener("click", (event) => {
-        const trigger = event.target.closest("[data-video-id]");
-        if (trigger) {
-          if (event.button === 0 && !event.ctrlKey && !event.metaKey) {
-            event.preventDefault();
-            const eventId = trigger.getAttribute("data-video-id");
-            if (eventId) {
-              this.playVideoByEventId(eventId);
+      this.videoList.addEventListener("click", async (event) => {
+        const trigger = event.target.closest(
+          "[data-play-url], [data-play-magnet]"
+        );
+        if (!trigger) {
+          return;
+        }
+
+        if (event.button === 0 && !event.ctrlKey && !event.metaKey) {
+          event.preventDefault();
+
+          const decodeDataValue = (value) => {
+            if (!value) return "";
+            try {
+              return decodeURIComponent(value);
+            } catch (err) {
+              console.warn("Failed to decode data attribute:", err);
+              return "";
             }
+          };
+
+          const encodedUrl = trigger.getAttribute("data-play-url") || "";
+          const encodedMagnet =
+            trigger.getAttribute("data-play-magnet") || "";
+
+          const url = decodeDataValue(encodedUrl);
+          const magnet = decodeDataValue(encodedMagnet);
+          const eventId = trigger.getAttribute("data-video-id");
+
+          if (eventId) {
+            await this.playVideoWithFallback({ eventId, url, magnet });
+          } else {
+            await this.playVideoWithFallback({ url, magnet });
           }
         }
       });
@@ -1166,6 +1190,11 @@ class bitvidApp {
     const authorSet = new Set();
 
     // 3) Build each card
+    const encodeDataValue = (value) =>
+      typeof value === "string" && value.length > 0
+        ? encodeURIComponent(value)
+        : "";
+
     videos.forEach((video, index) => {
       if (!video.id || !video.title) {
         console.error("Video missing ID/title:", video);
@@ -1240,8 +1269,8 @@ class bitvidApp {
         `
         : "";
 
-      const encodedMagnet = encodeURIComponent(video.magnet || "");
-      const encodedUrl = encodeURIComponent(video.url || "");
+      const encodedMagnet = encodeDataValue(video.magnet);
+      const encodedUrl = encodeDataValue(video.url);
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <!-- The clickable link to play video -->
@@ -1663,135 +1692,176 @@ class bitvidApp {
   }
 
   /**
-   * Helper to open a video by event ID (like ?v=...).
+   * Unified playback helper that prefers HTTP URL sources
+   * and falls back to WebTorrent when needed.
    */
-  async playVideoByEventId(eventId) {
-    // 1) Event-level blacklist check
-    if (this.blacklistedEventIds.has(eventId)) {
-      this.showError("This content has been removed or is not allowed.");
-      return;
-    }
+  async playVideoWithFallback({
+    url: rawUrl = "",
+    magnet: rawMagnet = "",
+    eventId = null,
+  } = {}) {
+    const sanitize = (value) =>
+      typeof value === "string" ? value.trim() : "";
+
+    let trimmedUrl = sanitize(rawUrl);
+    let trimmedMagnet = sanitize(rawMagnet);
 
     try {
-      // Attempt to get the video from local cache or fetch
-      let video = this.videosMap.get(eventId);
-      if (!video) {
-        video = await this.getOldEventById(eventId);
-      }
-      if (!video) {
-        this.showError("Video not found.");
-        return;
-      }
+      let video = null;
 
-      // 2) Author-level blacklist check
-      const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
-      if (initialBlacklist.includes(authorNpub)) {
-        this.showError("This content has been removed or is not allowed.");
-        return;
-      }
-
-      // 3) Whitelist check if enabled
-      if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
-        this.showError("This content is not from a whitelisted author.");
-        return;
-      }
-
-      // Handle private videos (decrypt if owner is the current user)
-      if (
-        video.isPrivate &&
-        video.pubkey === this.pubkey &&
-        !video.alreadyDecrypted
-      ) {
-        video.magnet = fakeDecrypt(video.magnet);
-        video.alreadyDecrypted = true;
-      }
-
-      const trimmedMagnet =
-        typeof video.magnet === "string" ? video.magnet.trim() : "";
-      const trimmedUrl =
-        typeof video.url === "string" ? video.url.trim() : "";
-      const hasMagnet = !!trimmedMagnet;
-      const hasUrl = !!trimmedUrl;
-
-      if (!hasMagnet && !hasUrl) {
-        this.showError("This video has no playable source.");
-        return;
-      }
-
-      video.magnet = trimmedMagnet;
-      video.url = trimmedUrl;
-
-      this.currentVideo = video;
-      this.currentMagnetUri = hasMagnet ? trimmedMagnet : null;
-      this.showModalWithPoster();
-
-      if (this.copyMagnetBtn) {
-        this.copyMagnetBtn.disabled = !hasMagnet;
-        this.copyMagnetBtn.setAttribute(
-          "aria-disabled",
-          (!hasMagnet).toString()
-        );
-        this.copyMagnetBtn.classList.toggle("opacity-50", !hasMagnet);
-        this.copyMagnetBtn.classList.toggle("cursor-not-allowed", !hasMagnet);
-      }
-
-      // Update ?v= param in the URL
-      const nevent = window.NostrTools.nip19.neventEncode({ id: eventId });
-      const newUrl = `${window.location.pathname}?v=${encodeURIComponent(
-        nevent
-      )}`;
-      window.history.pushState({}, "", newUrl);
-
-      // Fetch author profile
-      let creatorProfile = {
-        name: "Unknown",
-        picture: `https://robohash.org/${video.pubkey}`,
-      };
-      try {
-        const userEvents = await nostrClient.pool.list(nostrClient.relays, [
-          { kinds: [0], authors: [video.pubkey], limit: 1 },
-        ]);
-        if (userEvents.length > 0 && userEvents[0]?.content) {
-          const data = JSON.parse(userEvents[0].content);
-          creatorProfile = {
-            name: data.name || data.display_name || "Unknown",
-            picture: data.picture || `https://robohash.org/${video.pubkey}`,
-          };
+      if (eventId) {
+        if (this.blacklistedEventIds.has(eventId)) {
+          this.showError("This content has been removed or is not allowed.");
+          return;
+        }
+
+        video = this.videosMap.get(eventId);
+        if (!video) {
+          video = await this.getOldEventById(eventId);
+        }
+        if (!video) {
+          this.showError("Video not found.");
+          return;
+        }
+
+        const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
+        if (initialBlacklist.includes(authorNpub)) {
+          this.showError("This content has been removed or is not allowed.");
+          return;
+        }
+
+        if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
+          this.showError("This content is not from a whitelisted author.");
+          return;
+        }
+
+        if (
+          video.isPrivate &&
+          video.pubkey === this.pubkey &&
+          !video.alreadyDecrypted
+        ) {
+          video.magnet = fakeDecrypt(video.magnet);
+          video.alreadyDecrypted = true;
+        }
+
+        if (!trimmedMagnet && typeof video.magnet === "string") {
+          trimmedMagnet = video.magnet.trim();
+        }
+        if (!trimmedUrl && typeof video.url === "string") {
+          trimmedUrl = video.url.trim();
+        }
+
+        const hasMagnet = !!trimmedMagnet;
+        const hasUrl = !!trimmedUrl;
+
+        if (!hasMagnet && !hasUrl) {
+          this.showError("This video has no playable source.");
+          return;
+        }
+
+        video.magnet = trimmedMagnet;
+        video.url = trimmedUrl;
+
+        this.currentVideo = video;
+        this.showModalWithPoster();
+
+        if (this.copyMagnetBtn) {
+          this.copyMagnetBtn.disabled = !hasMagnet;
+          this.copyMagnetBtn.setAttribute(
+            "aria-disabled",
+            (!hasMagnet).toString()
+          );
+          this.copyMagnetBtn.classList.toggle("opacity-50", !hasMagnet);
+          this.copyMagnetBtn.classList.toggle(
+            "cursor-not-allowed",
+            !hasMagnet
+          );
+        }
+
+        const nevent = window.NostrTools.nip19.neventEncode({ id: eventId });
+        const newUrl = `${window.location.pathname}?v=${encodeURIComponent(
+          nevent
+        )}`;
+        window.history.pushState({}, "", newUrl);
+
+        let creatorProfile = {
+          name: "Unknown",
+          picture: `https://robohash.org/${video.pubkey}`,
+        };
+        try {
+          const userEvents = await nostrClient.pool.list(nostrClient.relays, [
+            { kinds: [0], authors: [video.pubkey], limit: 1 },
+          ]);
+          if (userEvents.length > 0 && userEvents[0]?.content) {
+            const data = JSON.parse(userEvents[0].content);
+            creatorProfile = {
+              name: data.name || data.display_name || "Unknown",
+              picture: data.picture || `https://robohash.org/${video.pubkey}`,
+            };
+          }
+        } catch (error) {
+          this.log("Error fetching creator profile:", error);
+        }
+
+        const creatorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
+        if (this.videoTitle) {
+          this.videoTitle.textContent = video.title || "Untitled";
+        }
+        if (this.videoDescription) {
+          this.videoDescription.textContent =
+            video.description || "No description available.";
+        }
+        if (this.videoTimestamp) {
+          this.videoTimestamp.textContent = this.formatTimeAgo(
+            video.created_at
+          );
+        }
+        if (this.creatorName) {
+          this.creatorName.textContent = creatorProfile.name;
+        }
+        if (this.creatorNpub) {
+          this.creatorNpub.textContent = `${creatorNpub.slice(
+            0,
+            8
+          )}...${creatorNpub.slice(-4)}`;
+        }
+        if (this.creatorAvatar) {
+          this.creatorAvatar.src = creatorProfile.picture;
+          this.creatorAvatar.alt = creatorProfile.name;
+        }
+      } else {
+        const hasMagnet = !!trimmedMagnet;
+        const hasUrl = !!trimmedUrl;
+
+        if (!hasMagnet && !hasUrl) {
+          this.showError("This video has no playable source.");
+          return;
+        }
+
+        this.showModalWithPoster();
+
+        if (this.copyMagnetBtn) {
+          this.copyMagnetBtn.disabled = !hasMagnet;
+          this.copyMagnetBtn.setAttribute(
+            "aria-disabled",
+            (!hasMagnet).toString()
+          );
+          this.copyMagnetBtn.classList.toggle("opacity-50", !hasMagnet);
+          this.copyMagnetBtn.classList.toggle(
+            "cursor-not-allowed",
+            !hasMagnet
+          );
         }
-      } catch (error) {
-        this.log("Error fetching creator profile:", error);
       }
 
-      // Update UI fields
-      const creatorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
-      if (this.videoTitle) {
-        this.videoTitle.textContent = video.title || "Untitled";
-      }
-      if (this.videoDescription) {
-        this.videoDescription.textContent =
-          video.description || "No description available.";
-      }
-      if (this.videoTimestamp) {
-        this.videoTimestamp.textContent = this.formatTimeAgo(video.created_at);
-      }
-      if (this.creatorName) {
-        this.creatorName.textContent = creatorProfile.name;
-      }
-      if (this.creatorNpub) {
-        this.creatorNpub.textContent = `${creatorNpub.slice(
-          0,
-          8
-        )}...${creatorNpub.slice(-4)}`;
-      }
-      if (this.creatorAvatar) {
-        this.creatorAvatar.src = creatorProfile.picture;
-        this.creatorAvatar.alt = creatorProfile.name;
-      }
+      const hasMagnetFinal = !!trimmedMagnet;
+      const hasUrlFinal = !!trimmedUrl;
+
+      this.currentMagnetUri = hasMagnetFinal ? trimmedMagnet : null;
 
-      // Cleanup any previous WebTorrent streams, then start fresh playback
       await torrentClient.cleanup();
 
-      if (!hasMagnet) {
+      if (!hasMagnetFinal) {
         if (this.modalPeers) {
           this.modalPeers.textContent = "";
         }
@@ -1808,16 +1878,18 @@ class bitvidApp {
 
       const storedUnmuted = localStorage.getItem("unmutedAutoplay");
       const userWantsUnmuted = storedUnmuted === "true";
-      this.modalVideo.muted = !userWantsUnmuted;
-
-      this.modalVideo.addEventListener("volumechange", () => {
-        localStorage.setItem(
-          "unmutedAutoplay",
-          (!this.modalVideo.muted).toString()
-        );
-      });
+      if (this.modalVideo) {
+        this.modalVideo.muted = !userWantsUnmuted;
+        this.modalVideo.addEventListener("volumechange", () => {
+          localStorage.setItem(
+            "unmutedAutoplay",
+            (!this.modalVideo.muted).toString()
+          );
+        });
+      }
 
       const attemptAutoplay = () => {
+        if (!this.modalVideo) return;
         this.modalVideo.play().catch((err) => {
           this.log("Autoplay failed:", err);
           if (!this.modalVideo.muted) {
@@ -1873,7 +1945,7 @@ class bitvidApp {
       };
 
       const startTorrentPlayback = async () => {
-        if (!hasMagnet) {
+        if (!hasMagnetFinal || !this.modalVideo) {
           return null;
         }
         const cacheBustedMagnet = `${trimmedMagnet}&ts=${Date.now()}`;
@@ -1889,7 +1961,7 @@ class bitvidApp {
         return torrentInstance;
       };
 
-      if (hasUrl) {
+      if (hasUrlFinal && this.modalVideo) {
         if (this.modalStatus) {
           this.modalStatus.textContent = "Loading video...";
         }
@@ -1904,7 +1976,7 @@ class bitvidApp {
         this.modalVideo.src = trimmedUrl;
         this.modalVideo.load();
 
-        if (hasMagnet) {
+        if (hasMagnetFinal) {
           const fallbackToTorrent = async () => {
             this.modalVideo.removeEventListener("error", fallbackToTorrent);
             this.log("HTTP playback failed, falling back to WebTorrent.");
@@ -1927,11 +1999,15 @@ class bitvidApp {
 
       attemptAutoplay();
     } catch (error) {
-      this.log("Error in playVideoByEventId:", error);
+      this.log("Error in playVideoWithFallback:", error);
       this.showError(`Playback error: ${error.message}`);
     }
   }
 
+  async playVideoByEventId(eventId) {
+    return this.playVideoWithFallback({ eventId });
+  }
+
   /**
    * Simple helper to safely encode an npub.
    */
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 1896bf42..c4f0195d 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -240,6 +240,11 @@ async function loadUserVideos(pubkey) {
     const fragment = document.createDocumentFragment();
     const allKnownEventsArray = Array.from(nostrClient.allEvents.values());
 
+    const encodeDataValue = (value) =>
+      typeof value === "string" && value.length > 0
+        ? encodeURIComponent(value)
+        : "";
+
     videos.forEach((video, index) => {
       // Decrypt if user owns a private video
       if (
@@ -331,11 +336,18 @@ async function loadUserVideos(pubkey) {
         "duration-300"
       );
 
-      const encodedUrl = encodeURIComponent(video.url || "");
-      const encodedMagnet = encodeURIComponent(video.magnet || "");
+      const encodedUrl = encodeDataValue(video.url);
+      const encodedMagnet = encodeDataValue(video.magnet);
+      const rawUrl = typeof video.url === "string" ? video.url : "";
+      const rawMagnet = typeof video.magnet === "string" ? video.magnet : "";
 
       cardEl.innerHTML = `
-        <div class="cursor-pointer relative group">
+        <div
+          class="cursor-pointer relative group"
+          data-video-id="${video.id}"
+          data-play-url="${encodedUrl}"
+          data-play-magnet="${encodedMagnet}"
+        >
           <div class="ratio-16-9">
             <img
               src="${fallbackThumb}"
@@ -364,7 +376,11 @@ async function loadUserVideos(pubkey) {
 
       // Clicking the card => open the video modal
       cardEl.addEventListener("click", () => {
-        app.playVideoByEventId(video.id);
+        app.playVideoWithFallback({
+          eventId: video.id,
+          url: rawUrl,
+          magnet: rawMagnet,
+        });
       });
 
       fragment.appendChild(cardEl);
diff --git a/js/subscriptions.js b/js/subscriptions.js
index acc44c24..5bd2372a 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -250,6 +250,11 @@ class SubscriptionsManager {
     // Only declare localAuthorSet once
     const localAuthorSet = new Set();
 
+    const encodeDataValue = (value) =>
+      typeof value === "string" && value.length > 0
+        ? encodeURIComponent(value)
+        : "";
+
     videos.forEach((video, index) => {
       if (!video.id || !video.title) {
         console.error("Missing ID or title:", video);
@@ -329,8 +334,8 @@ class SubscriptionsManager {
 
       const safeTitle = window.app?.escapeHTML(video.title) || "Untitled";
       const safeThumb = window.app?.escapeHTML(video.thumbnail) || "";
-      const encodedMagnet = encodeURIComponent(video.magnet || "");
-      const encodedUrl = encodeURIComponent(video.url || "");
+      const encodedMagnet = encodeDataValue(video.magnet);
+      const encodedUrl = encodeDataValue(video.url);
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <a

From 886b02a5ffddbecd6f5516318041cc7bb9158b85 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 22 Sep 2025 14:11:25 -0400
Subject: [PATCH 009/101] Implement URL-first playback with torrent fallback

---
 js/app.js | 771 +++++++++++++++++++++++++++++++++---------------------
 1 file changed, 475 insertions(+), 296 deletions(-)

diff --git a/js/app.js b/js/app.js
index eaf17aee..9a3b09cf 100644
--- a/js/app.js
+++ b/js/app.js
@@ -365,8 +365,8 @@ class bitvidApp {
     }
     if (this.shareBtn) {
       this.shareBtn.addEventListener("click", () => {
-        if (!this.currentVideo) {
-          this.showError("No video is loaded to share.");
+        if (!this.currentVideo || !this.currentVideo.id) {
+          this.showError("No shareable video is loaded.");
           return;
         }
         try {
@@ -673,9 +673,9 @@ class bitvidApp {
           const eventId = trigger.getAttribute("data-video-id");
 
           if (eventId) {
-            await this.playVideoWithFallback({ eventId, url, magnet });
+            await this.playVideoByEventId(eventId);
           } else {
-            await this.playVideoWithFallback({ url, magnet });
+            await this.playVideoWithoutEvent({ url, magnet });
           }
         }
       });
@@ -1019,15 +1019,132 @@ class bitvidApp {
     }
   }
 
+  clearActiveIntervals() {
+    if (!Array.isArray(this.activeIntervals) || !this.activeIntervals.length) {
+      return;
+    }
+    this.activeIntervals.forEach((id) => clearInterval(id));
+    this.activeIntervals = [];
+  }
+
+  resetTorrentStats() {
+    if (this.modalPeers) {
+      this.modalPeers.textContent = "";
+    }
+    if (this.modalSpeed) {
+      this.modalSpeed.textContent = "";
+    }
+    if (this.modalDownloaded) {
+      this.modalDownloaded.textContent = "";
+    }
+    if (this.modalProgress) {
+      this.modalProgress.style.width = "0%";
+    }
+  }
+
+  setCopyMagnetState(enabled) {
+    if (!this.copyMagnetBtn) {
+      return;
+    }
+    this.copyMagnetBtn.disabled = !enabled;
+    this.copyMagnetBtn.setAttribute("aria-disabled", (!enabled).toString());
+    this.copyMagnetBtn.classList.toggle("opacity-50", !enabled);
+    this.copyMagnetBtn.classList.toggle("cursor-not-allowed", !enabled);
+  }
+
+  setShareButtonState(enabled) {
+    if (!this.shareBtn) {
+      return;
+    }
+    this.shareBtn.disabled = !enabled;
+    this.shareBtn.setAttribute("aria-disabled", (!enabled).toString());
+    this.shareBtn.classList.toggle("opacity-50", !enabled);
+    this.shareBtn.classList.toggle("cursor-not-allowed", !enabled);
+  }
+
+  prepareModalVideoForPlayback() {
+    if (!this.modalVideo) {
+      return;
+    }
+
+    const storedUnmuted = localStorage.getItem("unmutedAutoplay");
+    const userWantsUnmuted = storedUnmuted === "true";
+    this.modalVideo.muted = !userWantsUnmuted;
+
+    if (!this.modalVideo.dataset.autoplayBound) {
+      this.modalVideo.addEventListener("volumechange", () => {
+        localStorage.setItem(
+          "unmutedAutoplay",
+          (!this.modalVideo.muted).toString()
+        );
+      });
+      this.modalVideo.dataset.autoplayBound = "true";
+    }
+  }
+
+  autoplayModalVideo() {
+    if (!this.modalVideo) return;
+    this.modalVideo.play().catch((err) => {
+      this.log("Autoplay failed:", err);
+      if (!this.modalVideo.muted) {
+        this.log("Falling back to muted autoplay.");
+        this.modalVideo.muted = true;
+        this.modalVideo.play().catch((err2) => {
+          this.log("Muted autoplay also failed:", err2);
+        });
+      }
+    });
+  }
+
+  startTorrentStatusMirrors(torrentInstance) {
+    if (!torrentInstance) {
+      return;
+    }
+
+    const updateInterval = setInterval(() => {
+      if (!document.body.contains(this.modalVideo)) {
+        clearInterval(updateInterval);
+        return;
+      }
+      this.updateTorrentStatus(torrentInstance);
+    }, 3000);
+    this.activeIntervals.push(updateInterval);
+
+    const mirrorInterval = setInterval(() => {
+      if (!document.body.contains(this.modalVideo)) {
+        clearInterval(mirrorInterval);
+        return;
+      }
+      const status = document.getElementById("status");
+      const progress = document.getElementById("progress");
+      const peers = document.getElementById("peers");
+      const speed = document.getElementById("speed");
+      const downloaded = document.getElementById("downloaded");
+      if (status && this.modalStatus) {
+        this.modalStatus.textContent = status.textContent;
+      }
+      if (progress && this.modalProgress) {
+        this.modalProgress.style.width = progress.style.width;
+      }
+      if (peers && this.modalPeers) {
+        this.modalPeers.textContent = peers.textContent;
+      }
+      if (speed && this.modalSpeed) {
+        this.modalSpeed.textContent = speed.textContent;
+      }
+      if (downloaded && this.modalDownloaded) {
+        this.modalDownloaded.textContent = downloaded.textContent;
+      }
+    }, 3000);
+    this.activeIntervals.push(mirrorInterval);
+  }
+
   /**
    * Hide the video modal.
    */
   async hideModal() {
     // 1) Clear intervals, cleanup, etc. (unchanged)
-    if (this.activeIntervals && this.activeIntervals.length) {
-      this.activeIntervals.forEach((id) => clearInterval(id));
-      this.activeIntervals = [];
-    }
+    this.clearActiveIntervals();
 
     try {
       await fetch("/webtorrent/cancel/", { mode: "no-cors" });
@@ -1691,313 +1808,202 @@ class bitvidApp {
     }
   }
 
+  async probeUrl(url) {
+    const trimmed = typeof url === "string" ? url.trim() : "";
+    if (!trimmed) {
+      return false;
+    }
+
+    const rangeProbe = async () => {
+      try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 8000);
+        const response = await fetch(trimmed, {
+          method: "GET",
+          headers: { Range: "bytes=0-1023" },
+          signal: controller.signal,
+        });
+        clearTimeout(timeoutId);
+        if (!response.ok) {
+          return false;
+        }
+        const acceptRanges = response.headers.get("accept-ranges");
+        if (!acceptRanges || acceptRanges.toLowerCase() !== "bytes") {
+          console.warn(
+            `[probeUrl] Range probe missing Accept-Ranges header for ${trimmed}`
+          );
+        }
+        return true;
+      } catch (err) {
+        console.warn(`[probeUrl] Range probe failed for ${trimmed}:`, err);
+        return false;
+      }
+    };
+
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 8000);
+      const response = await fetch(trimmed, {
+        method: "HEAD",
+        signal: controller.signal,
+      });
+      clearTimeout(timeoutId);
+      if (!response.ok) {
+        if (response.status === 405 || response.status === 501) {
+          return rangeProbe();
+        }
+        return false;
+      }
+
+      const acceptRanges = response.headers.get("accept-ranges");
+      if (!acceptRanges || acceptRanges.toLowerCase() !== "bytes") {
+        console.warn(
+          `[probeUrl] HEAD missing Accept-Ranges header for ${trimmed}`
+        );
+      }
+      return true;
+    } catch (err) {
+      console.warn(`[probeUrl] HEAD probe failed for ${trimmed}:`, err);
+      return rangeProbe();
+    }
+  }
+
+  async playHttp(url, { fallbackMagnet = "" } = {}) {
+    if (!this.modalVideo) {
+      throw new Error("No modal video element available for playback.");
+    }
+
+    const trimmedMagnet =
+      typeof fallbackMagnet === "string" ? fallbackMagnet.trim() : "";
+
+    this.resetTorrentStats();
+
+    if (this.modalStatus) {
+      this.modalStatus.textContent = "Loading video...";
+    }
+
+    const markUrlReady = () => {
+      if (this.modalStatus) {
+        this.modalStatus.textContent = "Streaming from URL";
+      }
+    };
+
+    this.modalVideo.addEventListener("loadeddata", markUrlReady, {
+      once: true,
+    });
+
+    if (trimmedMagnet) {
+      this.modalVideo.addEventListener(
+        "error",
+        async () => {
+          this.log("HTTP playback failed, falling back to WebTorrent.");
+          if (this.modalStatus) {
+            this.modalStatus.textContent = "Switching to WebTorrent...";
+          }
+          try {
+            await this.playViaWebTorrent(trimmedMagnet);
+            this.autoplayModalVideo();
+          } catch (torrentErr) {
+            console.error("WebTorrent fallback failed:", torrentErr);
+            this.showError("Unable to play this video.");
+          }
+        },
+        { once: true }
+      );
+    }
+
+    this.modalVideo.src = url;
+    this.modalVideo.load();
+  }
+
+  async playViaWebTorrent(magnet) {
+    const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+    if (!trimmedMagnet) {
+      throw new Error("No magnet URI provided for torrent playback.");
+    }
+    if (!this.modalVideo) {
+      throw new Error("No modal video element available for torrent playback.");
+    }
+
+    let cacheBustedMagnet = trimmedMagnet;
+    try {
+      const parsed = new URL(trimmedMagnet);
+      parsed.searchParams.set("ts", Date.now().toString());
+      cacheBustedMagnet = parsed.toString();
+    } catch (err) {
+      const separator = trimmedMagnet.includes("?") ? "&" : "?";
+      cacheBustedMagnet = `${trimmedMagnet}${separator}ts=${Date.now()}`;
+    }
+
+    await torrentClient.cleanup();
+    this.resetTorrentStats();
+
+    if (this.modalStatus) {
+      this.modalStatus.textContent = "Streaming via WebTorrent";
+    }
+
+    const torrentInstance = await torrentClient.streamVideo(
+      cacheBustedMagnet,
+      this.modalVideo
+    );
+    this.startTorrentStatusMirrors(torrentInstance);
+    return torrentInstance;
+  }
+
   /**
    * Unified playback helper that prefers HTTP URL sources
    * and falls back to WebTorrent when needed.
    */
   async playVideoWithFallback({
-    url: rawUrl = "",
-    magnet: rawMagnet = "",
-    eventId = null,
+    url = "",
+    magnet = "",
+    title = "",
+    description = "",
   } = {}) {
-    const sanitize = (value) =>
-      typeof value === "string" ? value.trim() : "";
-
-    let trimmedUrl = sanitize(rawUrl);
-    let trimmedMagnet = sanitize(rawMagnet);
+    const sanitizedUrl = typeof url === "string" ? url.trim() : "";
+    const sanitizedMagnet = typeof magnet === "string" ? magnet.trim() : "";
 
     try {
-      let video = null;
-
-      if (eventId) {
-        if (this.blacklistedEventIds.has(eventId)) {
-          this.showError("This content has been removed or is not allowed.");
-          return;
-        }
-
-        video = this.videosMap.get(eventId);
-        if (!video) {
-          video = await this.getOldEventById(eventId);
-        }
-        if (!video) {
-          this.showError("Video not found.");
-          return;
-        }
-
-        const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
-        if (initialBlacklist.includes(authorNpub)) {
-          this.showError("This content has been removed or is not allowed.");
-          return;
-        }
-
-        if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
-          this.showError("This content is not from a whitelisted author.");
-          return;
-        }
-
-        if (
-          video.isPrivate &&
-          video.pubkey === this.pubkey &&
-          !video.alreadyDecrypted
-        ) {
-          video.magnet = fakeDecrypt(video.magnet);
-          video.alreadyDecrypted = true;
-        }
-
-        if (!trimmedMagnet && typeof video.magnet === "string") {
-          trimmedMagnet = video.magnet.trim();
-        }
-        if (!trimmedUrl && typeof video.url === "string") {
-          trimmedUrl = video.url.trim();
-        }
-
-        const hasMagnet = !!trimmedMagnet;
-        const hasUrl = !!trimmedUrl;
-
-        if (!hasMagnet && !hasUrl) {
-          this.showError("This video has no playable source.");
-          return;
-        }
-
-        video.magnet = trimmedMagnet;
-        video.url = trimmedUrl;
-
-        this.currentVideo = video;
-        this.showModalWithPoster();
-
-        if (this.copyMagnetBtn) {
-          this.copyMagnetBtn.disabled = !hasMagnet;
-          this.copyMagnetBtn.setAttribute(
-            "aria-disabled",
-            (!hasMagnet).toString()
-          );
-          this.copyMagnetBtn.classList.toggle("opacity-50", !hasMagnet);
-          this.copyMagnetBtn.classList.toggle(
-            "cursor-not-allowed",
-            !hasMagnet
-          );
-        }
-
-        const nevent = window.NostrTools.nip19.neventEncode({ id: eventId });
-        const newUrl = `${window.location.pathname}?v=${encodeURIComponent(
-          nevent
-        )}`;
-        window.history.pushState({}, "", newUrl);
-
-        let creatorProfile = {
-          name: "Unknown",
-          picture: `https://robohash.org/${video.pubkey}`,
-        };
-        try {
-          const userEvents = await nostrClient.pool.list(nostrClient.relays, [
-            { kinds: [0], authors: [video.pubkey], limit: 1 },
-          ]);
-          if (userEvents.length > 0 && userEvents[0]?.content) {
-            const data = JSON.parse(userEvents[0].content);
-            creatorProfile = {
-              name: data.name || data.display_name || "Unknown",
-              picture: data.picture || `https://robohash.org/${video.pubkey}`,
-            };
-          }
-        } catch (error) {
-          this.log("Error fetching creator profile:", error);
-        }
-
-        const creatorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
-        if (this.videoTitle) {
-          this.videoTitle.textContent = video.title || "Untitled";
-        }
-        if (this.videoDescription) {
-          this.videoDescription.textContent =
-            video.description || "No description available.";
-        }
-        if (this.videoTimestamp) {
-          this.videoTimestamp.textContent = this.formatTimeAgo(
-            video.created_at
-          );
-        }
-        if (this.creatorName) {
-          this.creatorName.textContent = creatorProfile.name;
-        }
-        if (this.creatorNpub) {
-          this.creatorNpub.textContent = `${creatorNpub.slice(
-            0,
-            8
-          )}...${creatorNpub.slice(-4)}`;
-        }
-        if (this.creatorAvatar) {
-          this.creatorAvatar.src = creatorProfile.picture;
-          this.creatorAvatar.alt = creatorProfile.name;
-        }
-      } else {
-        const hasMagnet = !!trimmedMagnet;
-        const hasUrl = !!trimmedUrl;
-
-        if (!hasMagnet && !hasUrl) {
-          this.showError("This video has no playable source.");
-          return;
-        }
-
-        this.showModalWithPoster();
-
-        if (this.copyMagnetBtn) {
-          this.copyMagnetBtn.disabled = !hasMagnet;
-          this.copyMagnetBtn.setAttribute(
-            "aria-disabled",
-            (!hasMagnet).toString()
-          );
-          this.copyMagnetBtn.classList.toggle("opacity-50", !hasMagnet);
-          this.copyMagnetBtn.classList.toggle(
-            "cursor-not-allowed",
-            !hasMagnet
-          );
-        }
+      if (!this.modalVideo) {
+        throw new Error("Video element is not ready for playback.");
       }
 
-      const hasMagnetFinal = !!trimmedMagnet;
-      const hasUrlFinal = !!trimmedUrl;
+      if (this.modalStatus) {
+        this.modalStatus.textContent = "Preparing video...";
+      }
 
-      this.currentMagnetUri = hasMagnetFinal ? trimmedMagnet : null;
+      this.clearActiveIntervals();
+      this.prepareModalVideoForPlayback();
 
       await torrentClient.cleanup();
 
-      if (!hasMagnetFinal) {
-        if (this.modalPeers) {
-          this.modalPeers.textContent = "";
-        }
-        if (this.modalSpeed) {
-          this.modalSpeed.textContent = "";
-        }
-        if (this.modalDownloaded) {
-          this.modalDownloaded.textContent = "";
-        }
-        if (this.modalProgress) {
-          this.modalProgress.style.width = "0%";
-        }
+      this.modalVideo.pause();
+      this.modalVideo.src = "";
+      this.modalVideo.removeAttribute("src");
+      this.modalVideo.load();
+
+      this.resetTorrentStats();
+
+      let urlPlayable = false;
+      if (sanitizedUrl) {
+        urlPlayable = await this.probeUrl(sanitizedUrl);
       }
 
-      const storedUnmuted = localStorage.getItem("unmutedAutoplay");
-      const userWantsUnmuted = storedUnmuted === "true";
-      if (this.modalVideo) {
-        this.modalVideo.muted = !userWantsUnmuted;
-        this.modalVideo.addEventListener("volumechange", () => {
-          localStorage.setItem(
-            "unmutedAutoplay",
-            (!this.modalVideo.muted).toString()
-          );
+      if (urlPlayable) {
+        await this.playHttp(sanitizedUrl, {
+          fallbackMagnet: sanitizedMagnet,
         });
-      }
-
-      const attemptAutoplay = () => {
-        if (!this.modalVideo) return;
-        this.modalVideo.play().catch((err) => {
-          this.log("Autoplay failed:", err);
-          if (!this.modalVideo.muted) {
-            this.log("Falling back to muted autoplay.");
-            this.modalVideo.muted = true;
-            this.modalVideo.play().catch((err2) => {
-              this.log("Muted autoplay also failed:", err2);
-            });
-          }
-        });
-      };
-
-      const setupTorrentMonitors = (torrentInstance) => {
-        if (!torrentInstance) {
-          return;
-        }
-        const updateInterval = setInterval(() => {
-          if (!document.body.contains(this.modalVideo)) {
-            clearInterval(updateInterval);
-            return;
-          }
-          this.updateTorrentStatus(torrentInstance);
-        }, 3000);
-        this.activeIntervals.push(updateInterval);
-
-        const mirrorInterval = setInterval(() => {
-          if (!document.body.contains(this.modalVideo)) {
-            clearInterval(mirrorInterval);
-            return;
-          }
-          const status = document.getElementById("status");
-          const progress = document.getElementById("progress");
-          const peers = document.getElementById("peers");
-          const speed = document.getElementById("speed");
-          const downloaded = document.getElementById("downloaded");
-          if (status && this.modalStatus) {
-            this.modalStatus.textContent = status.textContent;
-          }
-          if (progress && this.modalProgress) {
-            this.modalProgress.style.width = progress.style.width;
-          }
-          if (peers && this.modalPeers) {
-            this.modalPeers.textContent = peers.textContent;
-          }
-          if (speed && this.modalSpeed) {
-            this.modalSpeed.textContent = speed.textContent;
-          }
-          if (downloaded && this.modalDownloaded) {
-            this.modalDownloaded.textContent = downloaded.textContent;
-          }
-        }, 3000);
-        this.activeIntervals.push(mirrorInterval);
-      };
-
-      const startTorrentPlayback = async () => {
-        if (!hasMagnetFinal || !this.modalVideo) {
-          return null;
-        }
-        const cacheBustedMagnet = `${trimmedMagnet}&ts=${Date.now()}`;
-        this.log("Starting video stream with:", cacheBustedMagnet);
-        if (this.modalStatus) {
-          this.modalStatus.textContent = "Streaming via WebTorrent";
-        }
-        const torrentInstance = await torrentClient.streamVideo(
-          cacheBustedMagnet,
-          this.modalVideo
-        );
-        setupTorrentMonitors(torrentInstance);
-        return torrentInstance;
-      };
-
-      if (hasUrlFinal && this.modalVideo) {
-        if (this.modalStatus) {
-          this.modalStatus.textContent = "Loading video...";
-        }
-        const markUrlReady = () => {
-          if (this.modalStatus) {
-            this.modalStatus.textContent = "Streaming from URL";
-          }
-        };
-        this.modalVideo.addEventListener("loadeddata", markUrlReady, {
-          once: true,
-        });
-        this.modalVideo.src = trimmedUrl;
-        this.modalVideo.load();
-
-        if (hasMagnetFinal) {
-          const fallbackToTorrent = async () => {
-            this.modalVideo.removeEventListener("error", fallbackToTorrent);
-            this.log("HTTP playback failed, falling back to WebTorrent.");
-            try {
-              await torrentClient.cleanup();
-              await startTorrentPlayback();
-              attemptAutoplay();
-            } catch (torrentErr) {
-              console.error("WebTorrent fallback failed:", torrentErr);
-              this.showError("Unable to play this video.");
-            }
-          };
-          this.modalVideo.addEventListener("error", fallbackToTorrent, {
-            once: true,
-          });
-        }
+      } else if (sanitizedMagnet) {
+        await this.playViaWebTorrent(sanitizedMagnet);
       } else {
-        await startTorrentPlayback();
+        if (this.modalStatus) {
+          this.modalStatus.textContent = "No playable source available.";
+        }
+        this.showError("This video has no playable source.");
+        return;
       }
 
-      attemptAutoplay();
+      this.autoplayModalVideo();
     } catch (error) {
       this.log("Error in playVideoWithFallback:", error);
       this.showError(`Playback error: ${error.message}`);
@@ -2005,7 +2011,180 @@ class bitvidApp {
   }
 
   async playVideoByEventId(eventId) {
-    return this.playVideoWithFallback({ eventId });
+    if (!eventId) {
+      this.showError("No video identifier provided.");
+      return;
+    }
+
+    if (this.blacklistedEventIds.has(eventId)) {
+      this.showError("This content has been removed or is not allowed.");
+      return;
+    }
+
+    let video = this.videosMap.get(eventId);
+    if (!video) {
+      video = await this.getOldEventById(eventId);
+    }
+    if (!video) {
+      this.showError("Video not found or has been removed.");
+      return;
+    }
+
+    const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
+    if (initialBlacklist.includes(authorNpub)) {
+      this.showError("This content has been removed or is not allowed.");
+      return;
+    }
+
+    if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
+      this.showError("This content is not from a whitelisted author.");
+      return;
+    }
+
+    if (
+      video.isPrivate &&
+      video.pubkey === this.pubkey &&
+      !video.alreadyDecrypted
+    ) {
+      video.magnet = fakeDecrypt(video.magnet);
+      video.alreadyDecrypted = true;
+    }
+
+    const trimmedUrl = typeof video.url === "string" ? video.url.trim() : "";
+    const trimmedMagnet =
+      typeof video.magnet === "string" ? video.magnet.trim() : "";
+
+    this.currentVideo = {
+      ...video,
+      url: trimmedUrl,
+      magnet: trimmedMagnet,
+    };
+
+    this.currentMagnetUri = trimmedMagnet || null;
+
+    await this.showModalWithPoster();
+
+    this.setCopyMagnetState(!!trimmedMagnet);
+    this.setShareButtonState(true);
+
+    const nevent = window.NostrTools.nip19.neventEncode({ id: eventId });
+    const newUrl = `${window.location.pathname}?v=${encodeURIComponent(
+      nevent
+    )}`;
+    window.history.pushState({}, "", newUrl);
+
+    let creatorProfile = {
+      name: "Unknown",
+      picture: `https://robohash.org/${video.pubkey}`,
+    };
+    try {
+      const userEvents = await nostrClient.pool.list(nostrClient.relays, [
+        { kinds: [0], authors: [video.pubkey], limit: 1 },
+      ]);
+      if (userEvents.length > 0 && userEvents[0]?.content) {
+        const data = JSON.parse(userEvents[0].content);
+        creatorProfile = {
+          name: data.name || data.display_name || "Unknown",
+          picture: data.picture || `https://robohash.org/${video.pubkey}`,
+        };
+      }
+    } catch (error) {
+      this.log("Error fetching creator profile:", error);
+    }
+
+    const creatorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
+    if (this.videoTitle) {
+      this.videoTitle.textContent = video.title || "Untitled";
+    }
+    if (this.videoDescription) {
+      this.videoDescription.textContent =
+        video.description || "No description available.";
+    }
+    if (this.videoTimestamp) {
+      this.videoTimestamp.textContent = this.formatTimeAgo(video.created_at);
+    }
+    if (this.creatorName) {
+      this.creatorName.textContent = creatorProfile.name;
+    }
+    if (this.creatorNpub) {
+      this.creatorNpub.textContent = `${creatorNpub.slice(0, 8)}...${creatorNpub.slice(
+        -4
+      )}`;
+    }
+    if (this.creatorAvatar) {
+      this.creatorAvatar.src = creatorProfile.picture;
+      this.creatorAvatar.alt = creatorProfile.name;
+    }
+
+    await this.playVideoWithFallback({
+      url: trimmedUrl,
+      magnet: trimmedMagnet,
+      title: video.title,
+      description: video.description,
+    });
+  }
+
+  async playVideoWithoutEvent({
+    url = "",
+    magnet = "",
+    title = "Untitled",
+    description = "",
+  } = {}) {
+    const sanitizedUrl = typeof url === "string" ? url.trim() : "";
+    const sanitizedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+
+    if (!sanitizedUrl && !sanitizedMagnet) {
+      this.showError("This video has no playable source.");
+      return;
+    }
+
+    await this.showModalWithPoster();
+
+    this.currentVideo = {
+      id: null,
+      title,
+      description,
+      url: sanitizedUrl,
+      magnet: sanitizedMagnet,
+    };
+
+    this.currentMagnetUri = sanitizedMagnet || null;
+
+    this.setCopyMagnetState(!!sanitizedMagnet);
+    this.setShareButtonState(false);
+
+    if (this.videoTitle) {
+      this.videoTitle.textContent = title || "Untitled";
+    }
+    if (this.videoDescription) {
+      this.videoDescription.textContent =
+        description || "No description available.";
+    }
+    if (this.videoTimestamp) {
+      this.videoTimestamp.textContent = "";
+    }
+    if (this.creatorName) {
+      this.creatorName.textContent = "Unknown";
+    }
+    if (this.creatorNpub) {
+      this.creatorNpub.textContent = "";
+    }
+    if (this.creatorAvatar) {
+      this.creatorAvatar.src = "assets/svg/default-profile.svg";
+      this.creatorAvatar.alt = "Unknown";
+    }
+
+    const urlObj = new URL(window.location.href);
+    urlObj.searchParams.delete("v");
+    const cleaned = `${urlObj.pathname}${urlObj.search}${urlObj.hash}`;
+    window.history.replaceState({}, "", cleaned);
+
+    await this.playVideoWithFallback({
+      url: sanitizedUrl,
+      magnet: sanitizedMagnet,
+      title,
+      description,
+    });
   }
 
   /**

From 02ee89892307a6e9209238b8d309abe53880b66b Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 22 Sep 2025 15:07:46 -0400
Subject: [PATCH 010/101] Add NIP-94 mirror publishing with MIME inference

---
 js/nostr.js | 141 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 137 insertions(+), 4 deletions(-)

diff --git a/js/nostr.js b/js/nostr.js
index d753698f..2f11b765 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -43,6 +43,48 @@ function fakeDecrypt(encrypted) {
   return encrypted.split("").reverse().join("");
 }
 
+const EXTENSION_MIME_MAP = {
+  mp4: "video/mp4",
+  m4v: "video/x-m4v",
+  webm: "video/webm",
+  mkv: "video/x-matroska",
+  mov: "video/quicktime",
+  avi: "video/x-msvideo",
+  ogv: "video/ogg",
+  ogg: "video/ogg",
+  m3u8: "application/x-mpegURL",
+  mpd: "application/dash+xml",
+  ts: "video/mp2t",
+  mpg: "video/mpeg",
+  mpeg: "video/mpeg",
+  flv: "video/x-flv",
+  "3gp": "video/3gpp",
+};
+
+function inferMimeTypeFromUrl(url) {
+  if (!url || typeof url !== "string") {
+    return "";
+  }
+
+  let pathname = "";
+  try {
+    const parsed = new URL(url);
+    pathname = parsed.pathname || "";
+  } catch (err) {
+    const sanitized = url.split("?")[0].split("#")[0];
+    pathname = sanitized || "";
+  }
+
+  const lastSegment = pathname.split("/").pop() || "";
+  const match = lastSegment.match(/\.([a-z0-9]+)$/i);
+  if (!match) {
+    return "";
+  }
+
+  const extension = match[1].toLowerCase();
+  return EXTENSION_MIME_MAP[extension] || "";
+}
+
 /**
  * Convert a raw Nostr event => your "video" object.
  * CHANGED: skip if version <2
@@ -232,6 +274,20 @@ class NostrClient {
     }
     const finalUrl =
       typeof videoData.url === "string" ? videoData.url.trim() : "";
+    const finalThumbnail =
+      typeof videoData.thumbnail === "string" ? videoData.thumbnail.trim() : "";
+    const finalDescription =
+      typeof videoData.description === "string"
+        ? videoData.description.trim()
+        : "";
+    const finalTitle =
+      typeof videoData.title === "string" ? videoData.title.trim() : "";
+    const providedMimeType =
+      typeof videoData.mimeType === "string"
+        ? videoData.mimeType.trim()
+        : "";
+
+    const createdAt = Math.floor(Date.now() / 1000);
 
     // brand-new root & d
     const videoRootId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
@@ -242,18 +298,18 @@ class NostrClient {
       version: 2, // forcibly set version=2
       deleted: false,
       isPrivate: videoData.isPrivate ?? false,
-      title: videoData.title || "",
+      title: finalTitle,
       url: finalUrl,
       magnet: finalMagnet,
-      thumbnail: videoData.thumbnail || "",
-      description: videoData.description || "",
+      thumbnail: finalThumbnail,
+      description: finalDescription,
       mode: videoData.mode || "live",
     };
 
     const event = {
       kind: 30078,
       pubkey,
-      created_at: Math.floor(Date.now() / 1000),
+      created_at: createdAt,
       tags: [
         ["t", "video"],
         ["d", dTagValue],
@@ -280,6 +336,83 @@ class NostrClient {
           }
         })
       );
+
+      if (finalUrl) {
+        const inferredMimeType = inferMimeTypeFromUrl(finalUrl);
+        const mimeType =
+          providedMimeType || inferredMimeType || "application/octet-stream";
+
+        const mirrorTags = [
+          ["url", finalUrl],
+          ["m", mimeType],
+        ];
+
+        if (finalThumbnail) {
+          mirrorTags.push(["thumb", finalThumbnail]);
+        }
+
+        const altText = finalDescription || finalTitle || "";
+        if (altText) {
+          mirrorTags.push(["alt", altText]);
+        }
+
+        if (!contentObject.isPrivate && finalMagnet) {
+          mirrorTags.push(["magnet", finalMagnet]);
+        }
+
+        const mirrorEvent = {
+          kind: 1063,
+          pubkey,
+          created_at: createdAt,
+          tags: mirrorTags,
+          content: altText,
+        };
+
+        if (isDevMode) {
+          console.log("Prepared NIP-94 mirror event:", mirrorEvent);
+        }
+
+        try {
+          const signedMirrorEvent = await window.nostr.signEvent(mirrorEvent);
+          if (isDevMode) {
+            console.log("Signed NIP-94 mirror event:", signedMirrorEvent);
+          }
+
+          await Promise.all(
+            this.relays.map(async (url) => {
+              try {
+                await this.pool.publish([url], signedMirrorEvent);
+                if (isDevMode) {
+                  console.log(`NIP-94 mirror published to ${url}`);
+                }
+              } catch (mirrorErr) {
+                if (isDevMode) {
+                  console.error(
+                    `Failed to publish NIP-94 mirror to ${url}`,
+                    mirrorErr
+                  );
+                }
+              }
+            })
+          );
+
+          if (isDevMode) {
+            console.log(
+              "NIP-94 mirror dispatched for hosted URL:",
+              finalUrl
+            );
+          }
+        } catch (mirrorError) {
+          if (isDevMode) {
+            console.error(
+              "Failed to sign/publish NIP-94 mirror event:",
+              mirrorError
+            );
+          }
+        }
+      } else if (isDevMode) {
+        console.log("Skipping NIP-94 mirror: no hosted URL provided.");
+      }
       return signedEvent;
     } catch (err) {
       if (isDevMode) console.error("Failed to sign/publish:", err);

From 41077966391a27305e4714349c91355fbb16669a Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 22 Sep 2025 15:16:52 -0400
Subject: [PATCH 011/101] Refactor video list modal handler attachment

---
 js/app.js         | 101 +++++++++++++++++++++++++++-------------------
 js/viewManager.js |   3 ++
 2 files changed, 63 insertions(+), 41 deletions(-)

diff --git a/js/app.js b/js/app.js
index 9a3b09cf..d3ba4558 100644
--- a/js/app.js
+++ b/js/app.js
@@ -162,6 +162,9 @@ class bitvidApp {
     this.currentMagnetUri = null;
     this.currentVideo = null;
     this.videoSubscription = null;
+    this.videoList = null;
+    this._videoListElement = null;
+    this._videoListClickHandler = null;
 
     // Videos stored as a Map (key=event.id)
     this.videosMap = new Map();
@@ -262,6 +265,7 @@ class bitvidApp {
 
       // 7. Once loaded, get a reference to #videoList
       this.videoList = document.getElementById("videoList");
+      this.attachVideoListHandler();
 
       // 8. Subscribe or fetch videos
       await this.loadVideos();
@@ -641,47 +645,7 @@ class bitvidApp {
       await this.hideModal();
     });
 
-    // 9) Event delegation on the video list container for playing videos
-    if (this.videoList) {
-      this.videoList.addEventListener("click", async (event) => {
-        const trigger = event.target.closest(
-          "[data-play-url], [data-play-magnet]"
-        );
-        if (!trigger) {
-          return;
-        }
-
-        if (event.button === 0 && !event.ctrlKey && !event.metaKey) {
-          event.preventDefault();
-
-          const decodeDataValue = (value) => {
-            if (!value) return "";
-            try {
-              return decodeURIComponent(value);
-            } catch (err) {
-              console.warn("Failed to decode data attribute:", err);
-              return "";
-            }
-          };
-
-          const encodedUrl = trigger.getAttribute("data-play-url") || "";
-          const encodedMagnet =
-            trigger.getAttribute("data-play-magnet") || "";
-
-          const url = decodeDataValue(encodedUrl);
-          const magnet = decodeDataValue(encodedMagnet);
-          const eventId = trigger.getAttribute("data-video-id");
-
-          if (eventId) {
-            await this.playVideoByEventId(eventId);
-          } else {
-            await this.playVideoWithoutEvent({ url, magnet });
-          }
-        }
-      });
-    }
-
-    // 10) Event delegation for the “Application Form” button inside the login modal
+    // 9) Event delegation for the “Application Form” button inside the login modal
     document.addEventListener("click", (event) => {
       if (event.target && event.target.id === "openApplicationModal") {
         // Hide the login modal
@@ -698,6 +662,61 @@ class bitvidApp {
     });
   }
 
+  attachVideoListHandler() {
+    if (this._videoListElement && this._videoListClickHandler) {
+      this._videoListElement.removeEventListener(
+        "click",
+        this._videoListClickHandler
+      );
+      this._videoListElement = null;
+      this._videoListClickHandler = null;
+    }
+
+    if (!this.videoList) {
+      return;
+    }
+
+    const handler = async (event) => {
+      const trigger = event.target.closest(
+        "[data-play-url], [data-play-magnet]"
+      );
+      if (!trigger) {
+        return;
+      }
+
+      if (event.button === 0 && !event.ctrlKey && !event.metaKey) {
+        event.preventDefault();
+
+        const decodeDataValue = (value) => {
+          if (!value) return "";
+          try {
+            return decodeURIComponent(value);
+          } catch (err) {
+            console.warn("Failed to decode data attribute:", err);
+            return "";
+          }
+        };
+
+        const encodedUrl = trigger.getAttribute("data-play-url") || "";
+        const encodedMagnet = trigger.getAttribute("data-play-magnet") || "";
+
+        const url = decodeDataValue(encodedUrl);
+        const magnet = decodeDataValue(encodedMagnet);
+        const eventId = trigger.getAttribute("data-video-id");
+
+        if (eventId) {
+          await this.playVideoByEventId(eventId);
+        } else {
+          await this.playVideoWithoutEvent({ url, magnet });
+        }
+      }
+    };
+
+    this._videoListElement = this.videoList;
+    this._videoListClickHandler = handler;
+    this.videoList.addEventListener("click", handler);
+  }
+
   /**
    * Attempt to load the user's own profile from Nostr (kind:0).
    */
diff --git a/js/viewManager.js b/js/viewManager.js
index 2589e46d..3f21aa75 100644
--- a/js/viewManager.js
+++ b/js/viewManager.js
@@ -44,6 +44,9 @@ export const viewInitRegistry = {
   "most-recent-videos": () => {
     if (window.app && window.app.loadVideos) {
       window.app.videoList = document.getElementById("videoList");
+      if (window.app.attachVideoListHandler) {
+        window.app.attachVideoListHandler();
+      }
       window.app.loadVideos();
     }
     // Force profile updates after the new view is in place.

From 867e111a484db2a28202aa66ed8df1b13aac7aa3 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 22 Sep 2025 15:32:24 -0400
Subject: [PATCH 012/101] Guard torrent playback against invalid magnets

---
 js/app.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 51 insertions(+), 10 deletions(-)

diff --git a/js/app.js b/js/app.js
index d3ba4558..393d75cd 100644
--- a/js/app.js
+++ b/js/app.js
@@ -54,6 +54,37 @@ function augmentMagnet(raw, ws, xs) {
   return parsed.toString();
 }
 
+/**
+ * Basic validation for BitTorrent magnet URIs.
+ *
+ * Returns `true` only when the value looks like a magnet link that WebTorrent
+ * understands (`magnet:` scheme with at least one `xt=urn:btih|btmh` entry).
+ */
+function isValidMagnetUri(magnet) {
+  const trimmed = typeof magnet === "string" ? magnet.trim() : "";
+  if (!trimmed) {
+    return false;
+  }
+
+  try {
+    const parsed = new URL(trimmed);
+    if (parsed.protocol.toLowerCase() !== "magnet:") {
+      return false;
+    }
+
+    const xtValues = parsed.searchParams.getAll("xt");
+    if (!xtValues.length) {
+      return false;
+    }
+
+    return xtValues.some((value) =>
+      typeof value === "string" && /urn:(btih|btmh):/i.test(value)
+    );
+  } catch (err) {
+    return false;
+  }
+}
+
 /**
  * Simple IntersectionObserver-based lazy loader for images (or videos).
  *
@@ -1892,8 +1923,9 @@ class bitvidApp {
       throw new Error("No modal video element available for playback.");
     }
 
-    const trimmedMagnet =
-      typeof fallbackMagnet === "string" ? fallbackMagnet.trim() : "";
+    const trimmedMagnet = isValidMagnetUri(fallbackMagnet)
+      ? fallbackMagnet.trim()
+      : "";
 
     this.resetTorrentStats();
 
@@ -1936,10 +1968,14 @@ class bitvidApp {
   }
 
   async playViaWebTorrent(magnet) {
-    const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+    const trimmedMagnet =
+      typeof magnet === "string" ? magnet.trim() : "";
     if (!trimmedMagnet) {
       throw new Error("No magnet URI provided for torrent playback.");
     }
+    if (!isValidMagnetUri(trimmedMagnet)) {
+      throw new Error("Invalid magnet URI provided for torrent playback.");
+    }
     if (!this.modalVideo) {
       throw new Error("No modal video element available for torrent playback.");
     }
@@ -1980,7 +2016,9 @@ class bitvidApp {
     description = "",
   } = {}) {
     const sanitizedUrl = typeof url === "string" ? url.trim() : "";
-    const sanitizedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+    const sanitizedMagnet = isValidMagnetUri(magnet)
+      ? magnet.trim()
+      : "";
 
     try {
       if (!this.modalVideo) {
@@ -2070,20 +2108,21 @@ class bitvidApp {
     }
 
     const trimmedUrl = typeof video.url === "string" ? video.url.trim() : "";
-    const trimmedMagnet =
+    const rawMagnet =
       typeof video.magnet === "string" ? video.magnet.trim() : "";
+    const sanitizedMagnet = isValidMagnetUri(rawMagnet) ? rawMagnet : "";
 
     this.currentVideo = {
       ...video,
       url: trimmedUrl,
-      magnet: trimmedMagnet,
+      magnet: sanitizedMagnet,
     };
 
-    this.currentMagnetUri = trimmedMagnet || null;
+    this.currentMagnetUri = sanitizedMagnet || null;
 
     await this.showModalWithPoster();
 
-    this.setCopyMagnetState(!!trimmedMagnet);
+    this.setCopyMagnetState(!!sanitizedMagnet);
     this.setShareButtonState(true);
 
     const nevent = window.NostrTools.nip19.neventEncode({ id: eventId });
@@ -2137,7 +2176,7 @@ class bitvidApp {
 
     await this.playVideoWithFallback({
       url: trimmedUrl,
-      magnet: trimmedMagnet,
+      magnet: sanitizedMagnet,
       title: video.title,
       description: video.description,
     });
@@ -2150,7 +2189,9 @@ class bitvidApp {
     description = "",
   } = {}) {
     const sanitizedUrl = typeof url === "string" ? url.trim() : "";
-    const sanitizedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+    const sanitizedMagnet = isValidMagnetUri(magnet)
+      ? magnet.trim()
+      : "";
 
     if (!sanitizedUrl && !sanitizedMagnet) {
       this.showError("This video has no playable source.");

From 1e77d617ecf37eacc1a17fbe37370569ed77e85b Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 23 Sep 2025 09:19:49 -0400
Subject: [PATCH 013/101] Refine channel profile video click handling

---
 js/channelProfile.js | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/js/channelProfile.js b/js/channelProfile.js
index c4f0195d..2093fdc4 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -256,6 +256,10 @@ async function loadUserVideos(pubkey) {
         video.alreadyDecrypted = true;
       }
 
+      // Ensure the global videos map is kept up to date so delegated handlers
+      // have the freshest metadata for this event.
+      window.app?.videosMap?.set(video.id, video);
+
       // Check if user can edit
       const canEdit = video.pubkey === app.pubkey;
       let hasOlder = false;
@@ -338,8 +342,6 @@ async function loadUserVideos(pubkey) {
 
       const encodedUrl = encodeDataValue(video.url);
       const encodedMagnet = encodeDataValue(video.magnet);
-      const rawUrl = typeof video.url === "string" ? video.url : "";
-      const rawMagnet = typeof video.magnet === "string" ? video.magnet : "";
 
       cardEl.innerHTML = `
         <div
@@ -374,20 +376,14 @@ async function loadUserVideos(pubkey) {
         </div>
       `;
 
-      // Clicking the card => open the video modal
-      cardEl.addEventListener("click", () => {
-        app.playVideoWithFallback({
-          eventId: video.id,
-          url: rawUrl,
-          magnet: rawMagnet,
-        });
-      });
-
       fragment.appendChild(cardEl);
     });
 
     container.appendChild(fragment);
 
+    window.app.videoList = container;
+    window.app.attachVideoListHandler();
+
     // Lazy-load images
     const lazyEls = container.querySelectorAll("[data-lazy]");
     lazyEls.forEach((el) => app.mediaLoader.observe(el));

From 0e0249ff91b6771680922b685ab4e66ea5d8ce9c Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 23 Sep 2025 09:29:49 -0400
Subject: [PATCH 014/101] Seed subscription videos map and reuse playback
 handler

---
 js/subscriptions.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/js/subscriptions.js b/js/subscriptions.js
index 5bd2372a..fd00d36e 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -261,6 +261,10 @@ class SubscriptionsManager {
         return;
       }
 
+      // Keep the global videos map up to date so delegated playback handlers
+      // can reuse the already fetched metadata for this event.
+      window.app?.videosMap?.set(video.id, video);
+
       localAuthorSet.add(video.pubkey);
 
       const nevent = window.NostrTools.nip19.neventEncode({ id: video.id });
@@ -398,6 +402,11 @@ class SubscriptionsManager {
 
     container.appendChild(fragment);
 
+    if (window.app) {
+      window.app.videoList = container;
+      window.app.attachVideoListHandler?.();
+    }
+
     // Lazy-load
     const lazyEls = container.querySelectorAll("[data-lazy]");
     lazyEls.forEach((el) => window.app?.mediaLoader.observe(el));

From c6891ca57cea8586df52b6dab890b37fe8bef39e Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 23 Sep 2025 09:49:35 -0400
Subject: [PATCH 015/101] Handle unsupported btih magnets in WebTorrent
 fallback

---
 js/app.js | 110 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 91 insertions(+), 19 deletions(-)

diff --git a/js/app.js b/js/app.js
index 393d75cd..c79177c3 100644
--- a/js/app.js
+++ b/js/app.js
@@ -18,6 +18,9 @@ function fakeDecrypt(str) {
   return str.split("").reverse().join("");
 }
 
+const UNSUPPORTED_BTITH_MESSAGE =
+  "This magnet link is missing a compatible BitTorrent v1 info hash.";
+
 /**
  * Append optional ws/xs parameters to a magnet URI when valid.
  */
@@ -58,7 +61,10 @@ function augmentMagnet(raw, ws, xs) {
  * Basic validation for BitTorrent magnet URIs.
  *
  * Returns `true` only when the value looks like a magnet link that WebTorrent
- * understands (`magnet:` scheme with at least one `xt=urn:btih|btmh` entry).
+ * understands (`magnet:` scheme with at least one `xt=urn:btih:<info-hash>`
+ * entry, where `<info-hash>` is either a 40-character hex digest or a
+ * 32-character base32 digest). Magnets that only contain BitTorrent v2 hashes
+ * (e.g. `btmh`) are treated as unsupported.
  */
 function isValidMagnetUri(magnet) {
   const trimmed = typeof magnet === "string" ? magnet.trim() : "";
@@ -77,9 +83,22 @@ function isValidMagnetUri(magnet) {
       return false;
     }
 
-    return xtValues.some((value) =>
-      typeof value === "string" && /urn:(btih|btmh):/i.test(value)
-    );
+    const hexPattern = /^[0-9a-f]{40}$/i;
+    const base32Pattern = /^[A-Z2-7]{32}$/;
+
+    return xtValues.some((value) => {
+      if (typeof value !== "string") return false;
+      const match = value.trim().match(/^urn:btih:([a-z0-9]+)$/i);
+      if (!match) return false;
+
+      const infoHash = match[1];
+      if (hexPattern.test(infoHash)) {
+        return true;
+      }
+
+      const upperHash = infoHash.toUpperCase();
+      return infoHash.length === 32 && base32Pattern.test(upperHash);
+    });
   } catch (err) {
     return false;
   }
@@ -1436,8 +1455,27 @@ class bitvidApp {
         `
         : "";
 
-      const encodedMagnet = encodeDataValue(video.magnet);
-      const encodedUrl = encodeDataValue(video.url);
+      const trimmedUrl = typeof video.url === "string" ? video.url.trim() : "";
+      const trimmedMagnet =
+        typeof video.magnet === "string" ? video.magnet.trim() : "";
+      const magnetSupported = isValidMagnetUri(trimmedMagnet);
+      const magnetProvided = trimmedMagnet.length > 0;
+      const encodedMagnet = encodeDataValue(trimmedMagnet);
+      const encodedUrl = encodeDataValue(trimmedUrl);
+      const showUnsupportedTorrentBadge =
+        !trimmedUrl && magnetProvided && !magnetSupported;
+      const torrentBadge = showUnsupportedTorrentBadge
+        ? `
+          <p
+            class="mt-3 text-xs text-amber-300"
+            data-torrent-status="unsupported"
+            title="${UNSUPPORTED_BTITH_MESSAGE}"
+          >
+            WebTorrent fallback unavailable (magnet missing btih info hash)
+          </p>
+        `
+        : "";
+
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <!-- The clickable link to play video -->
@@ -1446,6 +1484,7 @@ class bitvidApp {
             data-video-id="${video.id}"
             data-play-url="${encodedUrl}"
             data-play-magnet="${encodedMagnet}"
+            data-torrent-supported="${magnetSupported ? "true" : "false"}"
             class="block cursor-pointer relative group"
           >
             <div class="ratio-16-9">
@@ -1463,6 +1502,7 @@ class bitvidApp {
               data-video-id="${video.id}"
               data-play-url="${encodedUrl}"
               data-play-magnet="${encodedMagnet}"
+              data-torrent-supported="${magnetSupported ? "true" : "false"}"
             >
               ${this.escapeHTML(video.title)}
             </h3>
@@ -1491,6 +1531,7 @@ class bitvidApp {
               </div>
               ${gearMenu}
             </div>
+            ${torrentBadge}
           </div>
         </div>
       `;
@@ -1498,6 +1539,13 @@ class bitvidApp {
       const template = document.createElement("template");
       template.innerHTML = cardHtml.trim();
       const cardEl = template.content.firstElementChild;
+      if (cardEl) {
+        if (showUnsupportedTorrentBadge) {
+          cardEl.dataset.torrentSupported = "false";
+        } else if (magnetProvided && magnetSupported) {
+          cardEl.dataset.torrentSupported = "true";
+        }
+      }
       fragment.appendChild(cardEl);
     });
 
@@ -1974,7 +2022,10 @@ class bitvidApp {
       throw new Error("No magnet URI provided for torrent playback.");
     }
     if (!isValidMagnetUri(trimmedMagnet)) {
-      throw new Error("Invalid magnet URI provided for torrent playback.");
+      if (this.modalStatus) {
+        this.modalStatus.textContent = UNSUPPORTED_BTITH_MESSAGE;
+      }
+      throw new Error(UNSUPPORTED_BTITH_MESSAGE);
     }
     if (!this.modalVideo) {
       throw new Error("No modal video element available for torrent playback.");
@@ -2016,9 +2067,10 @@ class bitvidApp {
     description = "",
   } = {}) {
     const sanitizedUrl = typeof url === "string" ? url.trim() : "";
-    const sanitizedMagnet = isValidMagnetUri(magnet)
-      ? magnet.trim()
-      : "";
+    const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+    const magnetSupported = isValidMagnetUri(trimmedMagnet);
+    const sanitizedMagnet = magnetSupported ? trimmedMagnet : "";
+    const magnetProvided = trimmedMagnet.length > 0;
 
     try {
       if (!this.modalVideo) {
@@ -2053,10 +2105,13 @@ class bitvidApp {
       } else if (sanitizedMagnet) {
         await this.playViaWebTorrent(sanitizedMagnet);
       } else {
+        const message = magnetProvided && !magnetSupported
+          ? UNSUPPORTED_BTITH_MESSAGE
+          : "No playable source available.";
         if (this.modalStatus) {
-          this.modalStatus.textContent = "No playable source available.";
+          this.modalStatus.textContent = message;
         }
-        this.showError("This video has no playable source.");
+        this.showError(message);
         return;
       }
 
@@ -2110,12 +2165,15 @@ class bitvidApp {
     const trimmedUrl = typeof video.url === "string" ? video.url.trim() : "";
     const rawMagnet =
       typeof video.magnet === "string" ? video.magnet.trim() : "";
-    const sanitizedMagnet = isValidMagnetUri(rawMagnet) ? rawMagnet : "";
+    const magnetSupported = isValidMagnetUri(rawMagnet);
+    const sanitizedMagnet = magnetSupported ? rawMagnet : "";
 
     this.currentVideo = {
       ...video,
       url: trimmedUrl,
       magnet: sanitizedMagnet,
+      originalMagnet: rawMagnet,
+      torrentSupported: magnetSupported,
     };
 
     this.currentMagnetUri = sanitizedMagnet || null;
@@ -2176,7 +2234,7 @@ class bitvidApp {
 
     await this.playVideoWithFallback({
       url: trimmedUrl,
-      magnet: sanitizedMagnet,
+      magnet: rawMagnet,
       title: video.title,
       description: video.description,
     });
@@ -2189,12 +2247,15 @@ class bitvidApp {
     description = "",
   } = {}) {
     const sanitizedUrl = typeof url === "string" ? url.trim() : "";
-    const sanitizedMagnet = isValidMagnetUri(magnet)
-      ? magnet.trim()
-      : "";
+    const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+    const magnetSupported = isValidMagnetUri(trimmedMagnet);
+    const sanitizedMagnet = magnetSupported ? trimmedMagnet : "";
 
     if (!sanitizedUrl && !sanitizedMagnet) {
-      this.showError("This video has no playable source.");
+      const message = trimmedMagnet && !magnetSupported
+        ? UNSUPPORTED_BTITH_MESSAGE
+        : "This video has no playable source.";
+      this.showError(message);
       return;
     }
 
@@ -2206,6 +2267,8 @@ class bitvidApp {
       description,
       url: sanitizedUrl,
       magnet: sanitizedMagnet,
+      originalMagnet: trimmedMagnet,
+      torrentSupported: magnetSupported,
     };
 
     this.currentMagnetUri = sanitizedMagnet || null;
@@ -2241,7 +2304,7 @@ class bitvidApp {
 
     await this.playVideoWithFallback({
       url: sanitizedUrl,
-      magnet: sanitizedMagnet,
+      magnet: trimmedMagnet,
       title,
       description,
     });
@@ -2373,6 +2436,15 @@ class bitvidApp {
    */
   handleCopyMagnet() {
     if (!this.currentVideo || !this.currentVideo.magnet) {
+      if (
+        this.currentVideo &&
+        this.currentVideo.originalMagnet &&
+        !this.currentVideo.torrentSupported
+      ) {
+        this.showError(UNSUPPORTED_BTITH_MESSAGE);
+        return;
+      }
+
       this.showError("No magnet link to copy.");
       return;
     }

From 0569755901d850d97bd867dd7e24b8ee2a1584e4 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 23 Sep 2025 10:30:21 -0400
Subject: [PATCH 016/101] Support legacy Nostr video payloads

---
 js/channelProfile.js  | 60 ++++++++++++--------------
 js/nostr.js           | 71 +++++++++++++------------------
 js/subscriptions.js   | 57 ++++++++++++++-----------
 js/videoEventUtils.js | 99 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 190 insertions(+), 97 deletions(-)
 create mode 100644 js/videoEventUtils.js

diff --git a/js/channelProfile.js b/js/channelProfile.js
index 2093fdc4..cb683f59 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -5,6 +5,7 @@ import { app } from "./app.js";
 import { subscriptions } from "./subscriptions.js"; // <-- NEW import
 import { initialBlacklist, initialWhitelist } from "./lists.js";
 import { isWhitelistEnabled } from "./config.js";
+import { parseVideoEventPayload } from "./videoEventUtils.js";
 
 /**
  * Initialize the channel profile view.
@@ -467,40 +468,35 @@ function dedupeToNewestByRoot(videos) {
  * Convert raw event => "video" object.
  */
 function localConvertEventToVideo(event) {
-  try {
-    const content = JSON.parse(event.content || "{}");
-    const isSupportedVersion = content.version >= 2;
-    const hasRequiredFields = !!(
-      content.title && (content.url || content.magnet)
-    );
+  const { parsedContent, parseError, title, url, magnet, version } =
+    parseVideoEventPayload(event);
 
-    if (!isSupportedVersion) {
-      return { id: event.id, invalid: true, reason: "version <2" };
-    }
-    if (!hasRequiredFields) {
-      return { id: event.id, invalid: true, reason: "missing title/url+magnet" };
-    }
-
-    return {
-      id: event.id,
-      videoRootId: content.videoRootId || event.id,
-      version: content.version,
-      isPrivate: content.isPrivate ?? false,
-      title: content.title ?? "",
-      url: content.url ?? "",
-      magnet: content.magnet ?? "",
-      thumbnail: content.thumbnail ?? "",
-      description: content.description ?? "",
-      mode: content.mode ?? "live",
-      deleted: content.deleted === true,
-      pubkey: event.pubkey,
-      created_at: event.created_at,
-      tags: event.tags,
-      invalid: false,
-    };
-  } catch (err) {
-    return { id: event.id, invalid: true, reason: "json parse error" };
+  if (!title) {
+    const reason = parseError ? "missing title (json parse error)" : "missing title";
+    return { id: event.id, invalid: true, reason };
   }
+
+  if (!url && !magnet) {
+    return { id: event.id, invalid: true, reason: "missing playable source" };
+  }
+
+  return {
+    id: event.id,
+    videoRootId: parsedContent.videoRootId || event.id,
+    version,
+    isPrivate: parsedContent.isPrivate ?? false,
+    title,
+    url,
+    magnet,
+    thumbnail: parsedContent.thumbnail ?? "",
+    description: parsedContent.description ?? "",
+    mode: parsedContent.mode ?? "live",
+    deleted: parsedContent.deleted === true,
+    pubkey: event.pubkey,
+    created_at: event.created_at,
+    tags: event.tags,
+    invalid: false,
+  };
 }
 
 /**
diff --git a/js/nostr.js b/js/nostr.js
index 2f11b765..eed46479 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -2,6 +2,7 @@
 
 import { isDevMode } from "./config.js";
 import { accessControl } from "./accessControl.js";
+import { parseVideoEventPayload } from "./videoEventUtils.js";
 
 /**
  * The usual relays
@@ -90,51 +91,39 @@ function inferMimeTypeFromUrl(url) {
  * CHANGED: skip if version <2
  */
 function convertEventToVideo(event) {
-  try {
-    const content = JSON.parse(event.content || "{}");
+  const { parsedContent, parseError, title, url, magnet, version } =
+    parseVideoEventPayload(event);
 
-    // Example checks:
-    const isSupportedVersion = content.version >= 2;
-    const hasRequiredFields = !!(
-      content.title && (content.url || content.magnet)
-    );
-
-    if (!isSupportedVersion) {
-      return {
-        id: event.id,
-        invalid: true,
-        reason: "version <2",
-      };
-    }
-    if (!hasRequiredFields) {
-      return {
-        id: event.id,
-        invalid: true,
-        reason: "missing title/url+magnet",
-      };
-    }
+  if (!title) {
+    const reason = parseError ? "missing title (json parse error)" : "missing title";
+    return { id: event.id, invalid: true, reason };
+  }
 
+  if (!url && !magnet) {
     return {
       id: event.id,
-      videoRootId: content.videoRootId || event.id,
-      version: content.version,
-      isPrivate: content.isPrivate ?? false,
-      title: content.title ?? "",
-      url: content.url ?? "",
-      magnet: content.magnet ?? "",
-      thumbnail: content.thumbnail ?? "",
-      description: content.description ?? "",
-      mode: content.mode ?? "live",
-      deleted: content.deleted === true,
-      pubkey: event.pubkey,
-      created_at: event.created_at,
-      tags: event.tags,
-      invalid: false,
+      invalid: true,
+      reason: "missing playable source",
     };
-  } catch (err) {
-    // JSON parse error
-    return { id: event.id, invalid: true, reason: "json parse error" };
   }
+
+  return {
+    id: event.id,
+    videoRootId: parsedContent.videoRootId || event.id,
+    version,
+    isPrivate: parsedContent.isPrivate ?? false,
+    title,
+    url,
+    magnet,
+    thumbnail: parsedContent.thumbnail ?? "",
+    description: parsedContent.description ?? "",
+    mode: parsedContent.mode ?? "live",
+    deleted: parsedContent.deleted === true,
+    pubkey: event.pubkey,
+    created_at: event.created_at,
+    tags: event.tags,
+    invalid: false,
+  };
 }
 
 /**
@@ -787,7 +776,7 @@ class NostrClient {
     sub.on("eose", () => {
       if (isDevMode && invalidDuringSub.length > 0) {
         console.warn(
-          `[subscribeVideos] found ${invalidDuringSub.length} invalid v2 notes:`,
+          `[subscribeVideos] found ${invalidDuringSub.length} invalid video notes (with reasons):`,
           invalidDuringSub
         );
       }
@@ -854,7 +843,7 @@ class NostrClient {
       // OPTIONAL: Log invalid stats
       if (invalidNotes.length > 0 && isDevMode) {
         console.warn(
-          `Skipped ${invalidNotes.length} invalid v2 notes:\n`,
+          `Skipped ${invalidNotes.length} invalid video notes:\n`,
           invalidNotes.map((n) => `${n.id.slice(0, 8)}.. => ${n.reason}`)
         );
       }
diff --git a/js/subscriptions.js b/js/subscriptions.js
index fd00d36e..29386149 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -1,5 +1,6 @@
 // js/subscriptions.js
 import { nostrClient } from "./nostr.js";
+import { parseVideoEventPayload } from "./videoEventUtils.js";
 
 /**
  * Manages the user's subscription list (kind=30002) *privately*,
@@ -500,34 +501,42 @@ class SubscriptionsManager {
   }
 
   convertEventToVideo(evt) {
-    try {
-      const content = JSON.parse(evt.content || "{}");
-      const hasFields = !!(
-        content.title && (content.url || content.magnet)
-      );
-      const versionOk = content.version >= 2;
-      if (!versionOk || !hasFields) {
-        return { id: evt.id, invalid: true };
-      }
+    const { parsedContent, parseError, title, url, magnet, version } =
+      parseVideoEventPayload(evt);
+
+    if (!title) {
       return {
         id: evt.id,
-        pubkey: evt.pubkey,
-        created_at: evt.created_at,
-        videoRootId: content.videoRootId || evt.id,
-        version: content.version,
-        deleted: content.deleted === true,
-        isPrivate: content.isPrivate === true,
-        title: content.title || "",
-        url: content.url || "",
-        magnet: content.magnet || "",
-        thumbnail: content.thumbnail || "",
-        description: content.description || "",
-        tags: evt.tags || [],
-        invalid: false,
+        invalid: true,
+        reason: parseError ? "missing title (json parse error)" : "missing title",
       };
-    } catch (err) {
-      return { id: evt.id, invalid: true };
     }
+
+    if (!url && !magnet) {
+      return {
+        id: evt.id,
+        invalid: true,
+        reason: "missing playable source",
+      };
+    }
+
+    return {
+      id: evt.id,
+      pubkey: evt.pubkey,
+      created_at: evt.created_at,
+      videoRootId: parsedContent.videoRootId || evt.id,
+      version,
+      deleted: parsedContent.deleted === true,
+      isPrivate: parsedContent.isPrivate ?? false,
+      title,
+      url,
+      magnet,
+      thumbnail: parsedContent.thumbnail ?? "",
+      description: parsedContent.description ?? "",
+      mode: parsedContent.mode ?? "live",
+      tags: evt.tags || [],
+      invalid: false,
+    };
   }
 
   dedupeToNewestByRoot(videos) {
diff --git a/js/videoEventUtils.js b/js/videoEventUtils.js
new file mode 100644
index 00000000..b445a085
--- /dev/null
+++ b/js/videoEventUtils.js
@@ -0,0 +1,99 @@
+// js/videoEventUtils.js
+
+/**
+ * Extracts normalized fields from a Bitvid video event while
+ * tolerating legacy payloads that may omit version >= 2 metadata.
+ */
+export function parseVideoEventPayload(event = {}) {
+  const rawContent = typeof event.content === "string" ? event.content : "";
+
+  let parsedContent = {};
+  let parseError = null;
+  if (rawContent) {
+    try {
+      const parsed = JSON.parse(rawContent);
+      if (parsed && typeof parsed === "object") {
+        parsedContent = parsed;
+      }
+    } catch (err) {
+      parseError = err;
+      parsedContent = {};
+    }
+  }
+
+  const title = typeof parsedContent.title === "string"
+    ? parsedContent.title.trim()
+    : "";
+  const thumbnail = typeof parsedContent.thumbnail === "string"
+    ? parsedContent.thumbnail.trim()
+    : "";
+
+  const magnetCandidates = [];
+  const urlCandidates = [];
+
+  const pushUnique = (arr, value) => {
+    if (!value || typeof value !== "string") return;
+    const trimmed = value.trim();
+    if (!trimmed || arr.includes(trimmed)) return;
+    arr.push(trimmed);
+  };
+
+  if (typeof parsedContent.magnet === "string") {
+    pushUnique(magnetCandidates, parsedContent.magnet);
+  }
+  if (typeof parsedContent.url === "string") {
+    const parsedUrl = parsedContent.url.trim();
+    if (parsedUrl && parsedUrl !== thumbnail) {
+      pushUnique(urlCandidates, parsedUrl);
+    }
+  }
+
+  const tags = Array.isArray(event.tags) ? event.tags : [];
+  const urlTagKeys = new Set(["r", "url", "u"]);
+  for (const tag of tags) {
+    if (!Array.isArray(tag) || tag.length < 2) continue;
+    const key = typeof tag[0] === "string" ? tag[0] : "";
+    const value = typeof tag[1] === "string" ? tag[1] : "";
+    if (!value) continue;
+
+    if (value.toLowerCase().startsWith("magnet:")) {
+      pushUnique(magnetCandidates, value);
+      continue;
+    }
+
+    if (urlTagKeys.has(key) && /^https?:\/\//i.test(value)) {
+      pushUnique(urlCandidates, value);
+    }
+  }
+
+  const magnetMatch = rawContent.match(/magnet:\?xt=urn:[^"'\s<>]+/i);
+  if (magnetMatch) {
+    pushUnique(magnetCandidates, magnetMatch[0]);
+  }
+
+  const magnet = magnetCandidates.find(Boolean) || "";
+  const url =
+    urlCandidates.find(
+      (candidate) => candidate && !candidate.toLowerCase().startsWith("magnet:")
+    ) || "";
+
+  const rawVersion = parsedContent.version;
+  let version = 0;
+  if (typeof rawVersion === "number" && Number.isFinite(rawVersion)) {
+    version = rawVersion;
+  } else if (typeof rawVersion === "string") {
+    const parsedVersion = Number(rawVersion);
+    if (!Number.isNaN(parsedVersion)) {
+      version = parsedVersion;
+    }
+  }
+
+  return {
+    parsedContent,
+    parseError,
+    title,
+    url,
+    magnet,
+    version,
+  };
+}

From 167691d256a53f9c05efe9730a97f2605d6b738e Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 23 Sep 2025 10:50:23 -0400
Subject: [PATCH 017/101] Ensure magnets include default trackers and hosted
 fallback

---
 js/app.js | 106 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 97 insertions(+), 9 deletions(-)

diff --git a/js/app.js b/js/app.js
index c79177c3..236a3ba5 100644
--- a/js/app.js
+++ b/js/app.js
@@ -21,10 +21,19 @@ function fakeDecrypt(str) {
 const UNSUPPORTED_BTITH_MESSAGE =
   "This magnet link is missing a compatible BitTorrent v1 info hash.";
 
+const DEFAULT_WSS_TRACKERS = [
+  "wss://tracker.openwebtorrent.com",
+  "wss://tracker.btorrent.xyz",
+  "wss://tracker.fastcast.nz",
+];
+
 /**
  * Append optional ws/xs parameters to a magnet URI when valid.
+ *
+ * Always appends the default WSS tracker list, injects any provided hosted
+ * video URL as an `xs=` hint, and de-duplicates repeated query parameters.
  */
-function augmentMagnet(raw, ws, xs) {
+function augmentMagnet(raw, ws, xs, hostedUrl) {
   const magnet = (raw || "").trim();
   if (!magnet) {
     return "";
@@ -41,18 +50,70 @@ function augmentMagnet(raw, ws, xs) {
     return magnet;
   }
 
-  const appendIfMissing = (key, value) => {
+  const appendIfMissing = (key, value, { normalize } = {}) => {
     if (!value) return;
-    const trimmed = value.trim();
+    const trimmed = typeof value === "string" ? value.trim() : "";
     if (!trimmed) return;
-    const existing = parsed.searchParams.getAll(key);
-    if (!existing.includes(trimmed)) {
+    const normalizer =
+      typeof normalize === "function"
+        ? normalize
+        : (val) => (typeof val === "string" ? val.trim() : "");
+    const candidate = normalizer(trimmed);
+    if (!candidate) return;
+    const existing = parsed.searchParams
+      .getAll(key)
+      .map((existingValue) => normalizer(existingValue));
+    if (!existing.includes(candidate)) {
       parsed.searchParams.append(key, trimmed);
     }
   };
 
+  const sanitizeHostedUrl = (value) => {
+    const trimmed = typeof value === "string" ? value.trim() : "";
+    if (!trimmed) {
+      return "";
+    }
+    try {
+      const parsedUrl = new URL(trimmed);
+      if (parsedUrl.protocol === "http:" || parsedUrl.protocol === "https:") {
+        return parsedUrl.toString();
+      }
+    } catch (err) {
+      return "";
+    }
+    return "";
+  };
+
+  const normalizedHostedSeed = sanitizeHostedUrl(hostedUrl);
+
   appendIfMissing("ws", ws);
   appendIfMissing("xs", xs);
+  appendIfMissing("xs", normalizedHostedSeed);
+
+  DEFAULT_WSS_TRACKERS.forEach((tracker) => {
+    appendIfMissing("tr", tracker, {
+      normalize: (value) => (typeof value === "string" ? value.trim().toLowerCase() : ""),
+    });
+  });
+
+  const dedupeParam = (key, normalizer = (value) => value.trim()) => {
+    const seen = new Set();
+    const values = parsed.searchParams.getAll(key);
+    parsed.searchParams.delete(key);
+    for (const value of values) {
+      const trimmed = typeof value === "string" ? value.trim() : "";
+      if (!trimmed) continue;
+      const normalized = normalizer(trimmed);
+      if (!normalized) continue;
+      if (seen.has(normalized)) continue;
+      seen.add(normalized);
+      parsed.searchParams.append(key, trimmed);
+    }
+  };
+
+  dedupeParam("tr", (value) => value.trim().toLowerCase());
+  dedupeParam("ws");
+  dedupeParam("xs");
 
   return parsed.toString();
 }
@@ -924,6 +985,7 @@ class bitvidApp {
     const xs = xsEl?.value.trim() || "";
     const thumbnail = thumbEl?.value.trim() || "";
     const description = descEl?.value.trim() || "";
+    const sanitizedHostedUrl = url;
 
     const formData = {
       version: 2,
@@ -941,7 +1003,12 @@ class bitvidApp {
       return;
     }
 
-    formData.magnet = augmentMagnet(formData.magnet, ws, xs);
+    formData.magnet = augmentMagnet(
+      formData.magnet,
+      ws,
+      xs,
+      sanitizedHostedUrl
+    );
 
     try {
       await nostrClient.publishVideo(formData, this.pubkey);
@@ -2070,8 +2137,21 @@ class bitvidApp {
     const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
     const magnetSupported = isValidMagnetUri(trimmedMagnet);
     const sanitizedMagnet = magnetSupported ? trimmedMagnet : "";
+    const augmentedMagnet = sanitizedMagnet
+      ? augmentMagnet(sanitizedMagnet, undefined, undefined, sanitizedUrl)
+      : "";
+    const magnetForPlayback = augmentedMagnet || sanitizedMagnet;
     const magnetProvided = trimmedMagnet.length > 0;
 
+    if (this.currentVideo) {
+      this.currentVideo.magnet = magnetForPlayback;
+      if (!magnetForPlayback) {
+        this.currentVideo.torrentSupported = false;
+      }
+    }
+    this.currentMagnetUri = magnetForPlayback || null;
+    this.setCopyMagnetState(!!magnetForPlayback);
+
     try {
       if (!this.modalVideo) {
         throw new Error("Video element is not ready for playback.");
@@ -2093,6 +2173,14 @@ class bitvidApp {
 
       this.resetTorrentStats();
 
+      if (magnetForPlayback) {
+        const magnetChanged = magnetForPlayback !== sanitizedMagnet;
+        const label = magnetChanged
+          ? "[playVideoWithFallback] Using augmented magnet URI:"
+          : "[playVideoWithFallback] Using magnet URI:";
+        this.log(`${label} ${magnetForPlayback}`);
+      }
+
       let urlPlayable = false;
       if (sanitizedUrl) {
         urlPlayable = await this.probeUrl(sanitizedUrl);
@@ -2100,10 +2188,10 @@ class bitvidApp {
 
       if (urlPlayable) {
         await this.playHttp(sanitizedUrl, {
-          fallbackMagnet: sanitizedMagnet,
+          fallbackMagnet: magnetForPlayback,
         });
-      } else if (sanitizedMagnet) {
-        await this.playViaWebTorrent(sanitizedMagnet);
+      } else if (magnetForPlayback) {
+        await this.playViaWebTorrent(magnetForPlayback);
       } else {
         const message = magnetProvided && !magnetSupported
           ? UNSUPPORTED_BTITH_MESSAGE

From 33f29380f584c16ed0bcab5d7a1624e52765e75c Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 23 Sep 2025 10:52:39 -0400
Subject: [PATCH 018/101] Update roadmap visibility filtering policy

---
 content/roadmap.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/roadmap.md b/content/roadmap.md
index 552f3509..a8a4fdd6 100644
--- a/content/roadmap.md
+++ b/content/roadmap.md
@@ -46,9 +46,9 @@
 - Add zaps to videos, profiles, and comments.
 - Create a VRR (View, Rating, and Retention) Penalty Scoring system. [Click for more details](https://github.com/PR0M3TH3AN/bitvid/blob/main/content/roadmap/07_bitvid_Enhanced_View_Rating_%26_Retention_Penalty_Scoring.md)
 - Implement visibility filtering for videos:
-  - Show only videos whose magnet links have at least **one active peer online**.
-  - Integrate the filtering mechanism into the video list rendering process.
-  - Update the video list dynamically based on real-time peer availability. (this may not be possible)
+  - Run lightweight URL-health probes so cards stay visible when the hosted playback link responds.
+  - When a URL is unreachable, fall back to WebTorrent and surface items only if their magnets can stream via peers or web seeds.
+  - Align the filtering logic with the player’s URL-first, WebTorrent-fallback behavior during list rendering.
 - Dynamic Home Page and Video Tracking Specification. [Click for more details](https://github.com/PR0M3TH3AN/bitvid/blob/main/content/roadmap/08_bitvid_Enhanced_Dynamic_Home_Page_%26_Video_Tracking_Specification.md)
 - Add multi-language support for content and filtration. (v4?)
 - Create a settings menu for local account preferences, including relay, adult content, theme, and language.

From bfee3b7a2ac8d366ee6dce2abac6fdea7139b648 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 23 Sep 2025 13:01:14 -0400
Subject: [PATCH 019/101] Add magnet normalization helper and tests

---
 js/app.js                   | 258 +++++++++++++++---------------------
 js/magnetUtils.js           | 213 +++++++++++++++++++++++++++++
 tests/magnet-utils.test.mjs |  95 +++++++++++++
 3 files changed, 417 insertions(+), 149 deletions(-)
 create mode 100644 js/magnetUtils.js
 create mode 100644 tests/magnet-utils.test.mjs

diff --git a/js/app.js b/js/app.js
index 236a3ba5..c62eb13b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,6 +5,7 @@ import { nostrClient } from "./nostr.js";
 import { torrentClient } from "./webtorrent.js";
 import { isDevMode } from "./config.js";
 import { isWhitelistEnabled } from "./config.js";
+import { normalizeAndAugmentMagnet } from "./magnetUtils.js";
 import {
   initialWhitelist,
   initialBlacklist,
@@ -21,103 +22,6 @@ function fakeDecrypt(str) {
 const UNSUPPORTED_BTITH_MESSAGE =
   "This magnet link is missing a compatible BitTorrent v1 info hash.";
 
-const DEFAULT_WSS_TRACKERS = [
-  "wss://tracker.openwebtorrent.com",
-  "wss://tracker.btorrent.xyz",
-  "wss://tracker.fastcast.nz",
-];
-
-/**
- * Append optional ws/xs parameters to a magnet URI when valid.
- *
- * Always appends the default WSS tracker list, injects any provided hosted
- * video URL as an `xs=` hint, and de-duplicates repeated query parameters.
- */
-function augmentMagnet(raw, ws, xs, hostedUrl) {
-  const magnet = (raw || "").trim();
-  if (!magnet) {
-    return "";
-  }
-
-  let parsed;
-  try {
-    parsed = new URL(magnet);
-  } catch (err) {
-    return magnet;
-  }
-
-  if (parsed.protocol !== "magnet:") {
-    return magnet;
-  }
-
-  const appendIfMissing = (key, value, { normalize } = {}) => {
-    if (!value) return;
-    const trimmed = typeof value === "string" ? value.trim() : "";
-    if (!trimmed) return;
-    const normalizer =
-      typeof normalize === "function"
-        ? normalize
-        : (val) => (typeof val === "string" ? val.trim() : "");
-    const candidate = normalizer(trimmed);
-    if (!candidate) return;
-    const existing = parsed.searchParams
-      .getAll(key)
-      .map((existingValue) => normalizer(existingValue));
-    if (!existing.includes(candidate)) {
-      parsed.searchParams.append(key, trimmed);
-    }
-  };
-
-  const sanitizeHostedUrl = (value) => {
-    const trimmed = typeof value === "string" ? value.trim() : "";
-    if (!trimmed) {
-      return "";
-    }
-    try {
-      const parsedUrl = new URL(trimmed);
-      if (parsedUrl.protocol === "http:" || parsedUrl.protocol === "https:") {
-        return parsedUrl.toString();
-      }
-    } catch (err) {
-      return "";
-    }
-    return "";
-  };
-
-  const normalizedHostedSeed = sanitizeHostedUrl(hostedUrl);
-
-  appendIfMissing("ws", ws);
-  appendIfMissing("xs", xs);
-  appendIfMissing("xs", normalizedHostedSeed);
-
-  DEFAULT_WSS_TRACKERS.forEach((tracker) => {
-    appendIfMissing("tr", tracker, {
-      normalize: (value) => (typeof value === "string" ? value.trim().toLowerCase() : ""),
-    });
-  });
-
-  const dedupeParam = (key, normalizer = (value) => value.trim()) => {
-    const seen = new Set();
-    const values = parsed.searchParams.getAll(key);
-    parsed.searchParams.delete(key);
-    for (const value of values) {
-      const trimmed = typeof value === "string" ? value.trim() : "";
-      if (!trimmed) continue;
-      const normalized = normalizer(trimmed);
-      if (!normalized) continue;
-      if (seen.has(normalized)) continue;
-      seen.add(normalized);
-      parsed.searchParams.append(key, trimmed);
-    }
-  };
-
-  dedupeParam("tr", (value) => value.trim().toLowerCase());
-  dedupeParam("ws");
-  dedupeParam("xs");
-
-  return parsed.toString();
-}
-
 /**
  * Basic validation for BitTorrent magnet URIs.
  *
@@ -1003,12 +907,21 @@ class bitvidApp {
       return;
     }
 
-    formData.magnet = augmentMagnet(
-      formData.magnet,
-      ws,
-      xs,
-      sanitizedHostedUrl
-    );
+    const webSeedCandidates = [];
+    if (ws) {
+      webSeedCandidates.push(ws);
+    }
+    if (sanitizedHostedUrl) {
+      webSeedCandidates.push(sanitizedHostedUrl);
+    }
+
+    const magnetAugmentation = normalizeAndAugmentMagnet(formData.magnet, {
+      webSeed: webSeedCandidates,
+      torrentUrl: xs,
+      logger: (message) => this.log(message),
+    });
+
+    formData.magnet = magnetAugmentation.magnet;
 
     try {
       await nostrClient.publishVideo(formData, this.pubkey);
@@ -2033,14 +1946,17 @@ class bitvidApp {
     }
   }
 
-  async playHttp(url, { fallbackMagnet = "" } = {}) {
+  async playHttp(url, { fallbackMagnet = "", fallbackRawMagnet = "" } = {}) {
     if (!this.modalVideo) {
       throw new Error("No modal video element available for playback.");
     }
 
-    const trimmedMagnet = isValidMagnetUri(fallbackMagnet)
+    const normalizedFallback = isValidMagnetUri(fallbackMagnet)
       ? fallbackMagnet.trim()
       : "";
+    const rawFallback = isValidMagnetUri(fallbackRawMagnet)
+      ? fallbackRawMagnet.trim()
+      : "";
 
     this.resetTorrentStats();
 
@@ -2058,7 +1974,7 @@ class bitvidApp {
       once: true,
     });
 
-    if (trimmedMagnet) {
+    if (normalizedFallback) {
       this.modalVideo.addEventListener(
         "error",
         async () => {
@@ -2067,7 +1983,9 @@ class bitvidApp {
             this.modalStatus.textContent = "Switching to WebTorrent...";
           }
           try {
-            await this.playViaWebTorrent(trimmedMagnet);
+            await this.playViaWebTorrent(normalizedFallback, {
+              fallbackMagnet: rawFallback,
+            });
             this.autoplayModalVideo();
           } catch (torrentErr) {
             console.error("WebTorrent fallback failed:", torrentErr);
@@ -2082,45 +2000,75 @@ class bitvidApp {
     this.modalVideo.load();
   }
 
-  async playViaWebTorrent(magnet) {
-    const trimmedMagnet =
-      typeof magnet === "string" ? magnet.trim() : "";
-    if (!trimmedMagnet) {
-      throw new Error("No magnet URI provided for torrent playback.");
-    }
-    if (!isValidMagnetUri(trimmedMagnet)) {
-      if (this.modalStatus) {
-        this.modalStatus.textContent = UNSUPPORTED_BTITH_MESSAGE;
+  async playViaWebTorrent(magnet, { fallbackMagnet = "" } = {}) {
+    const attemptStream = async (candidate) => {
+      const trimmedCandidate =
+        typeof candidate === "string" ? candidate.trim() : "";
+      if (!trimmedCandidate) {
+        throw new Error("No magnet URI provided for torrent playback.");
+      }
+      if (!isValidMagnetUri(trimmedCandidate)) {
+        if (this.modalStatus) {
+          this.modalStatus.textContent = UNSUPPORTED_BTITH_MESSAGE;
+        }
+        throw new Error(UNSUPPORTED_BTITH_MESSAGE);
+      }
+      if (!this.modalVideo) {
+        throw new Error(
+          "No modal video element available for torrent playback."
+        );
       }
-      throw new Error(UNSUPPORTED_BTITH_MESSAGE);
-    }
-    if (!this.modalVideo) {
-      throw new Error("No modal video element available for torrent playback.");
-    }
 
-    let cacheBustedMagnet = trimmedMagnet;
+      let cacheBustedMagnet = trimmedCandidate;
+      try {
+        const parsed = new URL(trimmedCandidate);
+        parsed.searchParams.set("ts", Date.now().toString());
+        cacheBustedMagnet = parsed.toString();
+      } catch (err) {
+        const separator = trimmedCandidate.includes("?") ? "&" : "?";
+        cacheBustedMagnet = `${trimmedCandidate}${separator}ts=${Date.now()}`;
+      }
+
+      await torrentClient.cleanup();
+      this.resetTorrentStats();
+
+      if (this.modalStatus) {
+        this.modalStatus.textContent = "Streaming via WebTorrent";
+      }
+
+      const torrentInstance = await torrentClient.streamVideo(
+        cacheBustedMagnet,
+        this.modalVideo
+      );
+      this.startTorrentStatusMirrors(torrentInstance);
+      return torrentInstance;
+    };
+
+    const primaryTrimmed =
+      typeof magnet === "string" ? magnet.trim() : "";
+    const fallbackTrimmed =
+      typeof fallbackMagnet === "string" ? fallbackMagnet.trim() : "";
+    const hasFallback =
+      !!fallbackTrimmed && fallbackTrimmed !== primaryTrimmed;
+
     try {
-      const parsed = new URL(trimmedMagnet);
-      parsed.searchParams.set("ts", Date.now().toString());
-      cacheBustedMagnet = parsed.toString();
-    } catch (err) {
-      const separator = trimmedMagnet.includes("?") ? "&" : "?";
-      cacheBustedMagnet = `${trimmedMagnet}${separator}ts=${Date.now()}`;
+      return await attemptStream(primaryTrimmed);
+    } catch (primaryError) {
+      if (!hasFallback) {
+        throw primaryError;
+      }
+      this.log(
+        `[playViaWebTorrent] Normalized magnet failed: ${primaryError.message}`
+      );
+      this.log(
+        "[playViaWebTorrent] Primary magnet failed, retrying original string."
+      );
+      try {
+        return await attemptStream(fallbackTrimmed);
+      } catch (fallbackError) {
+        throw fallbackError;
+      }
     }
-
-    await torrentClient.cleanup();
-    this.resetTorrentStats();
-
-    if (this.modalStatus) {
-      this.modalStatus.textContent = "Streaming via WebTorrent";
-    }
-
-    const torrentInstance = await torrentClient.streamVideo(
-      cacheBustedMagnet,
-      this.modalVideo
-    );
-    this.startTorrentStatusMirrors(torrentInstance);
-    return torrentInstance;
   }
 
   /**
@@ -2137,14 +2085,24 @@ class bitvidApp {
     const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
     const magnetSupported = isValidMagnetUri(trimmedMagnet);
     const sanitizedMagnet = magnetSupported ? trimmedMagnet : "";
-    const augmentedMagnet = sanitizedMagnet
-      ? augmentMagnet(sanitizedMagnet, undefined, undefined, sanitizedUrl)
+    const magnetNormalization = sanitizedMagnet
+      ? normalizeAndAugmentMagnet(sanitizedMagnet, {
+          webSeed: sanitizedUrl ? [sanitizedUrl] : [],
+          logger: (message) => this.log(message),
+        })
+      : { magnet: "", didChange: false };
+    const magnetForPlayback = sanitizedMagnet
+      ? magnetNormalization.magnet || sanitizedMagnet
+      : "";
+    const fallbackMagnet = magnetNormalization.didChange
+      ? sanitizedMagnet
       : "";
-    const magnetForPlayback = augmentedMagnet || sanitizedMagnet;
     const magnetProvided = trimmedMagnet.length > 0;
 
     if (this.currentVideo) {
       this.currentVideo.magnet = magnetForPlayback;
+      this.currentVideo.normalizedMagnet = magnetForPlayback;
+      this.currentVideo.normalizedMagnetFallback = fallbackMagnet;
       if (!magnetForPlayback) {
         this.currentVideo.torrentSupported = false;
       }
@@ -2174,9 +2132,8 @@ class bitvidApp {
       this.resetTorrentStats();
 
       if (magnetForPlayback) {
-        const magnetChanged = magnetForPlayback !== sanitizedMagnet;
-        const label = magnetChanged
-          ? "[playVideoWithFallback] Using augmented magnet URI:"
+        const label = magnetNormalization.didChange
+          ? "[playVideoWithFallback] Using normalized magnet URI:"
           : "[playVideoWithFallback] Using magnet URI:";
         this.log(`${label} ${magnetForPlayback}`);
       }
@@ -2189,9 +2146,12 @@ class bitvidApp {
       if (urlPlayable) {
         await this.playHttp(sanitizedUrl, {
           fallbackMagnet: magnetForPlayback,
+          fallbackRawMagnet: fallbackMagnet,
         });
       } else if (magnetForPlayback) {
-        await this.playViaWebTorrent(magnetForPlayback);
+        await this.playViaWebTorrent(magnetForPlayback, {
+          fallbackMagnet,
+        });
       } else {
         const message = magnetProvided && !magnetSupported
           ? UNSUPPORTED_BTITH_MESSAGE
diff --git a/js/magnetUtils.js b/js/magnetUtils.js
new file mode 100644
index 00000000..25908f49
--- /dev/null
+++ b/js/magnetUtils.js
@@ -0,0 +1,213 @@
+// js/magnetUtils.js
+
+export const DEFAULT_WSS_TRACKERS = [
+  "wss://tracker.openwebtorrent.com",
+  "wss://tracker.btorrent.xyz",
+  "wss://tracker.fastcast.nz",
+];
+
+const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
+const BTIH_PREFIX = "urn:btih:";
+const ENCODED_BTih_PATTERN = /xt=urn%3Abtih%3A([0-9a-z]+)/gi;
+
+function normalizeForComparison(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    const parsed = new URL(trimmed);
+    const pathname = parsed.pathname.replace(/\/?$/, "");
+    const normalizedPath = pathname ? pathname : "";
+    return (
+      `${parsed.protocol}//${parsed.host}${normalizedPath}${parsed.search}${parsed.hash}`
+        .trim()
+        .toLowerCase()
+    );
+  } catch (err) {
+    return trimmed.replace(/\/?$/, "").toLowerCase();
+  }
+}
+
+function sanitizeHttpUrl(candidate) {
+  if (typeof candidate !== "string") {
+    return "";
+  }
+  const trimmed = candidate.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    const parsed = new URL(trimmed);
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+      return parsed.toString();
+    }
+  } catch (err) {
+    return "";
+  }
+  return "";
+}
+
+export function normalizeAndAugmentMagnet(
+  rawValue,
+  {
+    webSeed,
+    torrentUrl,
+    xs,
+    extraTrackers = [],
+    logger,
+    appProtocol,
+  } = {}
+) {
+  const log = typeof logger === "function" ? logger : () => {};
+  const initial = typeof rawValue === "string" ? rawValue.trim() : "";
+  if (!initial) {
+    return { magnet: "", didChange: false };
+  }
+
+  let working = initial;
+  let didMutate = false;
+  const bareHashMatch = HEX_INFO_HASH.test(working);
+  if (bareHashMatch) {
+    working = `magnet:?xt=${BTIH_PREFIX}${working.toLowerCase()}`;
+    didMutate = true;
+  }
+
+  const decodedXt = working.replace(ENCODED_BTih_PATTERN, (_, hash) => {
+    didMutate = true;
+    return `xt=${BTIH_PREFIX}${hash}`;
+  });
+  working = decodedXt;
+
+  let parsed;
+  try {
+    parsed = new URL(working);
+  } catch (err) {
+    return {
+      magnet: working,
+      didChange: didMutate || working !== initial,
+    };
+  }
+
+  if (parsed.protocol !== "magnet:") {
+    return {
+      magnet: working,
+      didChange: didMutate || working !== initial,
+    };
+  }
+
+  const torrentHint = typeof torrentUrl === "string" && torrentUrl.trim()
+    ? torrentUrl
+    : typeof xs === "string"
+      ? xs.trim()
+      : "";
+
+  const safeTorrentHint = sanitizeHttpUrl(torrentHint);
+  const seedInputs = Array.isArray(webSeed)
+    ? webSeed
+    : typeof webSeed === "string"
+      ? [webSeed]
+      : [];
+
+  const resolvedProtocol = typeof appProtocol === "string" && appProtocol
+    ? appProtocol.toLowerCase()
+    : typeof window !== "undefined" && window.location && window.location.protocol
+      ? window.location.protocol.toLowerCase()
+      : "https:";
+
+  const existingTrackers = new Set(
+    parsed.searchParams
+      .getAll("tr")
+      .map((value) => normalizeForComparison(value))
+      .filter(Boolean)
+  );
+
+  const trackerCandidates = [
+    ...DEFAULT_WSS_TRACKERS,
+    ...extraTrackers,
+  ];
+
+  for (const tracker of trackerCandidates) {
+    if (typeof tracker !== "string") {
+      continue;
+    }
+    const trimmedTracker = tracker.trim();
+    if (!trimmedTracker) {
+      continue;
+    }
+    if (!/^wss:\/\//i.test(trimmedTracker)) {
+      continue;
+    }
+    const normalizedTracker = normalizeForComparison(trimmedTracker);
+    if (!normalizedTracker || existingTrackers.has(normalizedTracker)) {
+      continue;
+    }
+    parsed.searchParams.append("tr", trimmedTracker);
+    existingTrackers.add(normalizedTracker);
+    didMutate = true;
+  }
+
+  if (safeTorrentHint) {
+    const existingXs = new Set(
+      parsed.searchParams
+        .getAll("xs")
+        .map((value) => normalizeForComparison(value))
+        .filter(Boolean)
+    );
+    const normalizedXs = normalizeForComparison(safeTorrentHint);
+    if (normalizedXs && !existingXs.has(normalizedXs)) {
+      parsed.searchParams.append("xs", safeTorrentHint);
+      didMutate = true;
+    }
+  }
+
+  if (seedInputs.length) {
+    const existingWs = new Set(
+      parsed.searchParams
+        .getAll("ws")
+        .map((value) => normalizeForComparison(value))
+        .filter(Boolean)
+    );
+    for (const seedInput of seedInputs) {
+      if (typeof seedInput !== "string") {
+        continue;
+      }
+      const trimmedSeed = seedInput.trim();
+      if (!trimmedSeed) {
+        continue;
+      }
+      try {
+        const parsedSeed = new URL(trimmedSeed);
+        const seedProtocol = parsedSeed.protocol;
+        const allowHttpSeed = resolvedProtocol === "http:";
+        if (
+          seedProtocol === "https:" ||
+          (seedProtocol === "http:" && allowHttpSeed)
+        ) {
+          const seedValue = parsedSeed.toString();
+          const normalizedSeed = normalizeForComparison(seedValue);
+          if (normalizedSeed && !existingWs.has(normalizedSeed)) {
+            parsed.searchParams.append("ws", seedValue);
+            existingWs.add(normalizedSeed);
+            didMutate = true;
+          }
+        } else if (seedProtocol === "http:") {
+          log(
+            `[normalizeAndAugmentMagnet] Skipping insecure web seed: ${trimmedSeed}`
+          );
+        }
+      } catch (err) {
+        // Ignore invalid web seed values silently.
+      }
+    }
+  }
+
+  const finalMagnet = parsed.toString();
+  return {
+    magnet: finalMagnet,
+    didChange: didMutate || finalMagnet !== initial,
+  };
+}
diff --git a/tests/magnet-utils.test.mjs b/tests/magnet-utils.test.mjs
new file mode 100644
index 00000000..209d596f
--- /dev/null
+++ b/tests/magnet-utils.test.mjs
@@ -0,0 +1,95 @@
+import assert from "node:assert/strict";
+import {
+  DEFAULT_WSS_TRACKERS,
+  normalizeAndAugmentMagnet,
+} from "../js/magnetUtils.js";
+
+function getParamValues(magnet, key) {
+  const parsed = new URL(magnet);
+  return parsed.searchParams.getAll(key);
+}
+
+(function testBareInfoHashNormalization() {
+  const infoHash = "0123456789abcdef0123456789abcdef01234567";
+  const result = normalizeAndAugmentMagnet(infoHash);
+  assert.ok(result.didChange, "Bare info hash should mark didChange true");
+  const xtValues = getParamValues(result.magnet, "xt");
+  assert.deepEqual(xtValues, [`urn:btih:${infoHash}`]);
+  const trackerValues = getParamValues(result.magnet, "tr");
+  for (const tracker of DEFAULT_WSS_TRACKERS) {
+    assert.ok(
+      trackerValues.includes(tracker),
+      `Expected tracker ${tracker} to be appended`
+    );
+  }
+})();
+
+(function testEncodedXtDecoding() {
+  const infoHash = "abcdefabcdefabcdefabcdefabcdefabcdefabcd";
+  const encodedMagnet = `magnet:?xt=urn%3Abtih%3A${infoHash}&dn=Example`;
+  const result = normalizeAndAugmentMagnet(encodedMagnet);
+  const xtValues = getParamValues(result.magnet, "xt");
+  assert.deepEqual(xtValues, [`urn:btih:${infoHash}`]);
+})();
+
+(function testDuplicateTrackerFiltering() {
+  const infoHash = "fedcba9876543210fedcba9876543210fedcba98";
+  const baseMagnet =
+    `magnet:?xt=urn:btih:${infoHash}` +
+    "&tr=wss://tracker.openwebtorrent.com" +
+    "&tr=WsS://tracker.openwebtorrent.com/" +
+    "&tr=https://not-allowed.example";
+  const result = normalizeAndAugmentMagnet(baseMagnet, {
+    extraTrackers: [
+      "wss://tracker.fastcast.nz",
+      "http://tracker.invalid",
+      "wss://tracker.openwebtorrent.com",
+    ],
+  });
+  const trackers = getParamValues(result.magnet, "tr");
+  const openwebCount = trackers.filter(
+    (value) => value === "wss://tracker.openwebtorrent.com"
+  ).length;
+  assert.equal(openwebCount, 1, "Duplicate WSS tracker should be collapsed");
+  assert.ok(
+    trackers.includes("wss://tracker.fastcast.nz"),
+    "Expected extra WSS tracker to be preserved"
+  );
+  assert.ok(
+    !trackers.includes("http://tracker.invalid"),
+    "Non-WSS tracker candidates should be ignored"
+  );
+})();
+
+(function testWebSeedHandlingWithLogging() {
+  const infoHash = "0123456789abcdef0123456789abcdef01234567";
+  const messages = [];
+  const result = normalizeAndAugmentMagnet(`magnet:?xt=urn:btih:${infoHash}`, {
+    webSeed: [
+      "https://cdn.example.com/video.mp4",
+      "http://cdn.example.com/legacy.mp4",
+      "https://cdn.example.com/video.mp4",
+    ],
+    logger: (msg) => messages.push(msg),
+    appProtocol: "https:",
+  });
+  const seeds = getParamValues(result.magnet, "ws");
+  assert.deepEqual(seeds, ["https://cdn.example.com/video.mp4"]);
+  assert.equal(messages.length, 1, "HTTP seed should have been skipped with a log");
+  assert.ok(
+    messages[0].includes("Skipping insecure web seed"),
+    "Expected skip message for HTTP seed"
+  );
+})();
+
+(function testHttpWebSeedAllowedOnHttpOrigin() {
+  const infoHash = "abcdefabcdefabcdefabcdefabcdefabcdefabcd";
+  const result = normalizeAndAugmentMagnet(`magnet:?xt=urn:btih:${infoHash}`, {
+    webSeed: "http://cdn.example.com/video.mp4",
+    appProtocol: "http:",
+  });
+  const seeds = getParamValues(result.magnet, "ws");
+  assert.deepEqual(seeds, ["http://cdn.example.com/video.mp4"]);
+})();
+
+console.log("magnet-utils tests passed");

From 985acf645687aca8ea9f1e30f6589745b923bb52 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 23 Sep 2025 13:29:05 -0400
Subject: [PATCH 020/101] Support legacy infohash playback

---
 js/app.js                                 | 66 ++++++++++------
 js/channelProfile.js                      |  7 +-
 js/nostr.js                               | 23 +++++-
 js/playbackUtils.js                       | 72 ++++++++++++++++++
 js/videoEventUtils.js                     | 93 ++++++++++++++++++++++-
 tests/legacy-infohash.test.mjs            | 82 ++++++++++++++++++++
 tests/test-helpers/setup-localstorage.mjs | 17 +++++
 7 files changed, 327 insertions(+), 33 deletions(-)
 create mode 100644 js/playbackUtils.js
 create mode 100644 tests/legacy-infohash.test.mjs
 create mode 100644 tests/test-helpers/setup-localstorage.mjs

diff --git a/js/app.js b/js/app.js
index c62eb13b..43c0eeee 100644
--- a/js/app.js
+++ b/js/app.js
@@ -6,6 +6,7 @@ import { torrentClient } from "./webtorrent.js";
 import { isDevMode } from "./config.js";
 import { isWhitelistEnabled } from "./config.js";
 import { normalizeAndAugmentMagnet } from "./magnetUtils.js";
+import { deriveTorrentPlaybackConfig } from "./playbackUtils.js";
 import {
   initialWhitelist,
   initialBlacklist,
@@ -37,6 +38,10 @@ function isValidMagnetUri(magnet) {
     return false;
   }
 
+  if (/^[0-9a-f]{40}$/i.test(trimmed)) {
+    return true;
+  }
+
   try {
     const parsed = new URL(trimmed);
     if (parsed.protocol.toLowerCase() !== "magnet:") {
@@ -1438,9 +1443,12 @@ class bitvidApp {
       const trimmedUrl = typeof video.url === "string" ? video.url.trim() : "";
       const trimmedMagnet =
         typeof video.magnet === "string" ? video.magnet.trim() : "";
-      const magnetSupported = isValidMagnetUri(trimmedMagnet);
-      const magnetProvided = trimmedMagnet.length > 0;
-      const encodedMagnet = encodeDataValue(trimmedMagnet);
+      const legacyInfoHash =
+        typeof video.infoHash === "string" ? video.infoHash.trim() : "";
+      const magnetCandidate = trimmedMagnet || legacyInfoHash;
+      const magnetSupported = isValidMagnetUri(magnetCandidate);
+      const magnetProvided = magnetCandidate.length > 0;
+      const encodedMagnet = encodeDataValue(magnetCandidate);
       const encodedUrl = encodeDataValue(trimmedUrl);
       const showUnsupportedTorrentBadge =
         !trimmedUrl && magnetProvided && !magnetSupported;
@@ -2078,34 +2086,37 @@ class bitvidApp {
   async playVideoWithFallback({
     url = "",
     magnet = "",
+    infoHash = "",
     title = "",
     description = "",
   } = {}) {
     const sanitizedUrl = typeof url === "string" ? url.trim() : "";
     const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
-    const magnetSupported = isValidMagnetUri(trimmedMagnet);
-    const sanitizedMagnet = magnetSupported ? trimmedMagnet : "";
-    const magnetNormalization = sanitizedMagnet
-      ? normalizeAndAugmentMagnet(sanitizedMagnet, {
-          webSeed: sanitizedUrl ? [sanitizedUrl] : [],
-          logger: (message) => this.log(message),
-        })
-      : { magnet: "", didChange: false };
-    const magnetForPlayback = sanitizedMagnet
-      ? magnetNormalization.magnet || sanitizedMagnet
+    const trimmedInfoHash =
+      typeof infoHash === "string" ? infoHash.trim().toLowerCase() : "";
+
+    const playbackConfig = deriveTorrentPlaybackConfig({
+      magnet: trimmedMagnet,
+      infoHash: trimmedInfoHash,
+      url: sanitizedUrl,
+      logger: (message) => this.log(message),
+    });
+
+    const magnetIsUsable = isValidMagnetUri(playbackConfig.magnet);
+    const magnetForPlayback = magnetIsUsable ? playbackConfig.magnet : "";
+    const fallbackMagnet = magnetIsUsable
+      ? playbackConfig.fallbackMagnet
       : "";
-    const fallbackMagnet = magnetNormalization.didChange
-      ? sanitizedMagnet
-      : "";
-    const magnetProvided = trimmedMagnet.length > 0;
+    const magnetProvided = playbackConfig.provided;
 
     if (this.currentVideo) {
       this.currentVideo.magnet = magnetForPlayback;
       this.currentVideo.normalizedMagnet = magnetForPlayback;
       this.currentVideo.normalizedMagnetFallback = fallbackMagnet;
-      if (!magnetForPlayback) {
-        this.currentVideo.torrentSupported = false;
+      if (playbackConfig.infoHash && !this.currentVideo.legacyInfoHash) {
+        this.currentVideo.legacyInfoHash = playbackConfig.infoHash;
       }
+      this.currentVideo.torrentSupported = !!magnetForPlayback;
     }
     this.currentMagnetUri = magnetForPlayback || null;
     this.setCopyMagnetState(!!magnetForPlayback);
@@ -2132,7 +2143,7 @@ class bitvidApp {
       this.resetTorrentStats();
 
       if (magnetForPlayback) {
-        const label = magnetNormalization.didChange
+        const label = playbackConfig.didMutate
           ? "[playVideoWithFallback] Using normalized magnet URI:"
           : "[playVideoWithFallback] Using magnet URI:";
         this.log(`${label} ${magnetForPlayback}`);
@@ -2153,7 +2164,7 @@ class bitvidApp {
           fallbackMagnet,
         });
       } else {
-        const message = magnetProvided && !magnetSupported
+        const message = magnetProvided && !magnetForPlayback
           ? UNSUPPORTED_BTITH_MESSAGE
           : "No playable source available.";
         if (this.modalStatus) {
@@ -2213,15 +2224,19 @@ class bitvidApp {
     const trimmedUrl = typeof video.url === "string" ? video.url.trim() : "";
     const rawMagnet =
       typeof video.magnet === "string" ? video.magnet.trim() : "";
-    const magnetSupported = isValidMagnetUri(rawMagnet);
-    const sanitizedMagnet = magnetSupported ? rawMagnet : "";
+    const legacyInfoHash =
+      typeof video.infoHash === "string" ? video.infoHash.trim().toLowerCase() : "";
+    const magnetCandidate = rawMagnet || legacyInfoHash;
+    const magnetSupported = isValidMagnetUri(magnetCandidate);
+    const sanitizedMagnet = magnetSupported ? magnetCandidate : "";
 
     this.currentVideo = {
       ...video,
       url: trimmedUrl,
       magnet: sanitizedMagnet,
-      originalMagnet: rawMagnet,
+      originalMagnet: magnetCandidate,
       torrentSupported: magnetSupported,
+      legacyInfoHash: video.legacyInfoHash || legacyInfoHash,
     };
 
     this.currentMagnetUri = sanitizedMagnet || null;
@@ -2282,7 +2297,8 @@ class bitvidApp {
 
     await this.playVideoWithFallback({
       url: trimmedUrl,
-      magnet: rawMagnet,
+      magnet: magnetCandidate,
+      infoHash: legacyInfoHash,
       title: video.title,
       description: video.description,
     });
diff --git a/js/channelProfile.js b/js/channelProfile.js
index cb683f59..c17a65fa 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -341,8 +341,13 @@ async function loadUserVideos(pubkey) {
         "duration-300"
       );
 
+      const trimmedMagnet =
+        typeof video.magnet === "string" ? video.magnet.trim() : "";
+      const legacyInfoHash =
+        typeof video.infoHash === "string" ? video.infoHash.trim() : "";
+      const magnetCandidate = trimmedMagnet || legacyInfoHash;
       const encodedUrl = encodeDataValue(video.url);
-      const encodedMagnet = encodeDataValue(video.magnet);
+      const encodedMagnet = encodeDataValue(magnetCandidate);
 
       cardEl.innerHTML = `
         <div
diff --git a/js/nostr.js b/js/nostr.js
index eed46479..c40c6007 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -91,15 +91,26 @@ function inferMimeTypeFromUrl(url) {
  * CHANGED: skip if version <2
  */
 function convertEventToVideo(event) {
-  const { parsedContent, parseError, title, url, magnet, version } =
-    parseVideoEventPayload(event);
+  const {
+    parsedContent,
+    parseError,
+    title,
+    url,
+    magnet,
+    infoHash,
+    version,
+  } = parseVideoEventPayload(event);
 
   if (!title) {
     const reason = parseError ? "missing title (json parse error)" : "missing title";
     return { id: event.id, invalid: true, reason };
   }
 
-  if (!url && !magnet) {
+  const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+  const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
+  const playbackMagnet = trimmedMagnet || trimmedInfoHash;
+
+  if (!url && !playbackMagnet) {
     return {
       id: event.id,
       invalid: true,
@@ -114,7 +125,9 @@ function convertEventToVideo(event) {
     isPrivate: parsedContent.isPrivate ?? false,
     title,
     url,
-    magnet,
+    magnet: playbackMagnet,
+    rawMagnet: trimmedMagnet,
+    infoHash: trimmedInfoHash,
     thumbnail: parsedContent.thumbnail ?? "",
     description: parsedContent.description ?? "",
     mode: parsedContent.mode ?? "live",
@@ -141,6 +154,8 @@ function getActiveKey(video) {
   return `LEGACY:${video.id}`;
 }
 
+export { convertEventToVideo };
+
 class NostrClient {
   constructor() {
     this.pool = null;
diff --git a/js/playbackUtils.js b/js/playbackUtils.js
new file mode 100644
index 00000000..9311022b
--- /dev/null
+++ b/js/playbackUtils.js
@@ -0,0 +1,72 @@
+// js/playbackUtils.js
+
+import { normalizeAndAugmentMagnet } from "./magnetUtils.js";
+
+const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
+const MAGNET_URI = /^magnet:\?/i;
+
+export function deriveTorrentPlaybackConfig({
+  magnet = "",
+  infoHash = "",
+  url = "",
+  logger,
+  appProtocol,
+} = {}) {
+  const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+  const trimmedInfoHash =
+    typeof infoHash === "string" ? infoHash.trim().toLowerCase() : "";
+  const sanitizedUrl = typeof url === "string" ? url.trim() : "";
+
+  const magnetIsUri = MAGNET_URI.test(trimmedMagnet);
+  const magnetLooksLikeInfoHash = HEX_INFO_HASH.test(trimmedMagnet);
+  const resolvedInfoHash = trimmedInfoHash || (magnetLooksLikeInfoHash
+    ? trimmedMagnet.toLowerCase()
+    : "");
+
+  const normalizationInput = magnetIsUri ? trimmedMagnet : resolvedInfoHash;
+  const provided = Boolean(trimmedMagnet || trimmedInfoHash);
+
+  if (!normalizationInput) {
+    return {
+      magnet: "",
+      fallbackMagnet: "",
+      provided,
+      usedInfoHash: false,
+      originalInput: "",
+      didMutate: false,
+      infoHash: resolvedInfoHash,
+    };
+  }
+
+  const normalization = normalizeAndAugmentMagnet(normalizationInput, {
+    webSeed: sanitizedUrl ? [sanitizedUrl] : [],
+    logger,
+    appProtocol,
+  });
+
+  let normalizedMagnet = normalization.magnet;
+  if (!normalizedMagnet || !MAGNET_URI.test(normalizedMagnet)) {
+    if (magnetIsUri) {
+      normalizedMagnet = normalizationInput;
+    } else if (resolvedInfoHash) {
+      normalizedMagnet = `magnet:?xt=urn:btih:${resolvedInfoHash}`;
+    } else {
+      normalizedMagnet = "";
+    }
+  }
+
+  const usedInfoHash = !magnetIsUri && Boolean(resolvedInfoHash);
+  const fallbackMagnet = magnetIsUri && normalization.didChange
+    ? normalizationInput
+    : "";
+
+  return {
+    magnet: normalizedMagnet,
+    fallbackMagnet,
+    provided,
+    usedInfoHash,
+    originalInput: normalizationInput,
+    didMutate: normalization.didChange || usedInfoHash,
+    infoHash: resolvedInfoHash,
+  };
+}
diff --git a/js/videoEventUtils.js b/js/videoEventUtils.js
index b445a085..71fcd74f 100644
--- a/js/videoEventUtils.js
+++ b/js/videoEventUtils.js
@@ -4,6 +4,51 @@
  * Extracts normalized fields from a Bitvid video event while
  * tolerating legacy payloads that may omit version >= 2 metadata.
  */
+const MAGNET_URI_PATTERN = /^magnet:\?/i;
+const HEX_INFO_HASH_PATTERN = /\b[0-9a-f]{40}\b/gi;
+
+function extractInfoHashesFromString(value, pushInfoHash) {
+  if (typeof value !== "string") {
+    return;
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return;
+  }
+
+  const matches = trimmed.match(HEX_INFO_HASH_PATTERN);
+  if (!matches) {
+    return;
+  }
+
+  for (const match of matches) {
+    const normalized = match.toLowerCase();
+    pushInfoHash(normalized);
+  }
+}
+
+function traverseForInfoHashes(value, pushInfoHash) {
+  if (!value) {
+    return;
+  }
+  if (typeof value === "string") {
+    extractInfoHashesFromString(value, pushInfoHash);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      traverseForInfoHashes(item, pushInfoHash);
+    }
+    return;
+  }
+  if (typeof value === "object") {
+    for (const nested of Object.values(value)) {
+      traverseForInfoHashes(nested, pushInfoHash);
+    }
+  }
+}
+
 export function parseVideoEventPayload(event = {}) {
   const rawContent = typeof event.content === "string" ? event.content : "";
 
@@ -29,6 +74,7 @@ export function parseVideoEventPayload(event = {}) {
     : "";
 
   const magnetCandidates = [];
+  const infoHashCandidates = [];
   const urlCandidates = [];
 
   const pushUnique = (arr, value) => {
@@ -38,14 +84,48 @@ export function parseVideoEventPayload(event = {}) {
     arr.push(trimmed);
   };
 
+  const pushInfoHash = (candidate) => {
+    if (!candidate) return;
+    const normalized = candidate.toLowerCase();
+    if (!/^[0-9a-f]{40}$/.test(normalized)) {
+      return;
+    }
+    if (infoHashCandidates.includes(normalized)) {
+      return;
+    }
+    infoHashCandidates.push(normalized);
+  };
+
+  const collectMagnetOrInfoHash = (value) => {
+    if (typeof value !== "string") {
+      return;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return;
+    }
+
+    if (MAGNET_URI_PATTERN.test(trimmed)) {
+      pushUnique(magnetCandidates, trimmed);
+    }
+
+    extractInfoHashesFromString(trimmed, pushInfoHash);
+
+    const urnMatch = trimmed.match(/^urn:btih:([0-9a-z]+)$/i);
+    if (urnMatch) {
+      pushInfoHash(urnMatch[1]);
+    }
+  };
+
   if (typeof parsedContent.magnet === "string") {
-    pushUnique(magnetCandidates, parsedContent.magnet);
+    collectMagnetOrInfoHash(parsedContent.magnet);
   }
   if (typeof parsedContent.url === "string") {
     const parsedUrl = parsedContent.url.trim();
     if (parsedUrl && parsedUrl !== thumbnail) {
       pushUnique(urlCandidates, parsedUrl);
     }
+    collectMagnetOrInfoHash(parsedUrl);
   }
 
   const tags = Array.isArray(event.tags) ? event.tags : [];
@@ -57,21 +137,27 @@ export function parseVideoEventPayload(event = {}) {
     if (!value) continue;
 
     if (value.toLowerCase().startsWith("magnet:")) {
-      pushUnique(magnetCandidates, value);
+      collectMagnetOrInfoHash(value);
       continue;
     }
 
     if (urlTagKeys.has(key) && /^https?:\/\//i.test(value)) {
       pushUnique(urlCandidates, value);
     }
+
+    collectMagnetOrInfoHash(value);
   }
 
   const magnetMatch = rawContent.match(/magnet:\?xt=urn:[^"'\s<>]+/i);
   if (magnetMatch) {
-    pushUnique(magnetCandidates, magnetMatch[0]);
+    collectMagnetOrInfoHash(magnetMatch[0]);
   }
 
+  extractInfoHashesFromString(rawContent, pushInfoHash);
+  traverseForInfoHashes(parsedContent, pushInfoHash);
+
   const magnet = magnetCandidates.find(Boolean) || "";
+  const infoHash = infoHashCandidates.find(Boolean) || "";
   const url =
     urlCandidates.find(
       (candidate) => candidate && !candidate.toLowerCase().startsWith("magnet:")
@@ -94,6 +180,7 @@ export function parseVideoEventPayload(event = {}) {
     title,
     url,
     magnet,
+    infoHash,
     version,
   };
 }
diff --git a/tests/legacy-infohash.test.mjs b/tests/legacy-infohash.test.mjs
new file mode 100644
index 00000000..0aa76ac6
--- /dev/null
+++ b/tests/legacy-infohash.test.mjs
@@ -0,0 +1,82 @@
+import "./test-helpers/setup-localstorage.mjs";
+import assert from "node:assert/strict";
+import { parseVideoEventPayload } from "../js/videoEventUtils.js";
+import { convertEventToVideo } from "../js/nostr.js";
+import { deriveTorrentPlaybackConfig } from "../js/playbackUtils.js";
+
+const LEGACY_INFO_HASH = "0123456789abcdef0123456789abcdef01234567";
+
+(function testParseDetectsBareInfoHashInJson() {
+  const event = {
+    id: "evt-json",
+    content: JSON.stringify({
+      version: 1,
+      title: "Legacy note",
+      magnet: LEGACY_INFO_HASH,
+    }),
+    tags: [],
+  };
+
+  const parsed = parseVideoEventPayload(event);
+  assert.equal(parsed.magnet, "", "Bare info hash should not be treated as a magnet URI");
+  assert.equal(parsed.infoHash, LEGACY_INFO_HASH);
+})();
+
+(function testParseDetectsInfoHashInRawContentAndTags() {
+  const event = {
+    id: "evt-tag",
+    content: JSON.stringify({ title: "tag-sourced" }),
+    tags: [["magnet", LEGACY_INFO_HASH]],
+  };
+
+  const parsed = parseVideoEventPayload(event);
+  assert.equal(parsed.infoHash, LEGACY_INFO_HASH);
+})();
+
+(function testParseDetectsInfoHashInRawString() {
+  const event = {
+    id: "evt-raw",
+    content: `legacy magnet ${LEGACY_INFO_HASH} broken json`,
+    tags: [],
+  };
+
+  const parsed = parseVideoEventPayload(event);
+  assert.equal(parsed.infoHash, LEGACY_INFO_HASH);
+})();
+
+(function testConvertTreatsInfoHashAsPlayable() {
+  const event = {
+    id: "evt-convert",
+    pubkey: "pk",
+    created_at: 1,
+    tags: [],
+    content: JSON.stringify({
+      version: 1,
+      title: "Legacy conversion",
+      magnet: LEGACY_INFO_HASH,
+    }),
+  };
+
+  const video = convertEventToVideo(event);
+  assert.equal(video.invalid, false, "Legacy info hash events should not be dropped");
+  assert.equal(video.magnet, LEGACY_INFO_HASH);
+  assert.equal(video.infoHash, LEGACY_INFO_HASH);
+  assert.equal(video.rawMagnet, "");
+})();
+
+(function testPlaybackConfigNormalizesInfoHash() {
+  const result = deriveTorrentPlaybackConfig({
+    magnet: "",
+    infoHash: LEGACY_INFO_HASH,
+    url: "",
+  });
+
+  assert.ok(result.magnet.startsWith("magnet:?"));
+  const xtValues = new URL(result.magnet).searchParams.getAll("xt");
+  assert.deepEqual(xtValues, [`urn:btih:${LEGACY_INFO_HASH}`]);
+  assert.equal(result.usedInfoHash, true);
+  assert.equal(result.fallbackMagnet, "");
+  assert.equal(result.provided, true);
+})();
+
+console.log("legacy infohash tests passed");
diff --git a/tests/test-helpers/setup-localstorage.mjs b/tests/test-helpers/setup-localstorage.mjs
new file mode 100644
index 00000000..c990b187
--- /dev/null
+++ b/tests/test-helpers/setup-localstorage.mjs
@@ -0,0 +1,17 @@
+if (typeof globalThis.localStorage === "undefined") {
+  const store = new Map();
+  globalThis.localStorage = {
+    getItem(key) {
+      return store.has(key) ? store.get(key) : null;
+    },
+    setItem(key, value) {
+      store.set(String(key), String(value));
+    },
+    removeItem(key) {
+      store.delete(key);
+    },
+    clear() {
+      store.clear();
+    },
+  };
+}

From d271bd335cb05ff0475f1c536cc41fd3bdbcc346 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 23 Sep 2025 13:52:33 -0400
Subject: [PATCH 021/101] Clarify legacy handling comment

---
 js/channelProfile.js           | 58 +++++++++++++++++++++++------
 js/magnetUtils.js              | 11 +++++-
 js/nostr.js                    | 44 ++++++++++++++++------
 js/subscriptions.js            | 64 ++++++++++++++++++++++++--------
 js/videoEventUtils.js          | 67 ++++++++++++++++++++++++++++++++++
 tests/legacy-infohash.test.mjs | 17 +++++++++
 6 files changed, 222 insertions(+), 39 deletions(-)

diff --git a/js/channelProfile.js b/js/channelProfile.js
index c17a65fa..02d61019 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -5,7 +5,10 @@ import { app } from "./app.js";
 import { subscriptions } from "./subscriptions.js"; // <-- NEW import
 import { initialBlacklist, initialWhitelist } from "./lists.js";
 import { isWhitelistEnabled } from "./config.js";
-import { parseVideoEventPayload } from "./videoEventUtils.js";
+import {
+  deriveTitleFromEvent,
+  parseVideoEventPayload,
+} from "./videoEventUtils.js";
 
 /**
  * Initialize the channel profile view.
@@ -473,26 +476,57 @@ function dedupeToNewestByRoot(videos) {
  * Convert raw event => "video" object.
  */
 function localConvertEventToVideo(event) {
-  const { parsedContent, parseError, title, url, magnet, version } =
-    parseVideoEventPayload(event);
+  const {
+    parsedContent,
+    parseError,
+    title,
+    url,
+    magnet,
+    infoHash,
+    version,
+  } = parseVideoEventPayload(event);
 
-  if (!title) {
-    const reason = parseError ? "missing title (json parse error)" : "missing title";
-    return { id: event.id, invalid: true, reason };
+  const trimmedUrl = typeof url === "string" ? url.trim() : "";
+  const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+  const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
+  const playbackMagnet = trimmedMagnet || trimmedInfoHash;
+  const numericVersion = Number.isFinite(version) ? version : 0;
+
+  const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
+  if (!hasPlayableSource) {
+    return { id: event.id, invalid: true, reason: "missing playable source" };
   }
 
-  if (!url && !magnet) {
-    return { id: event.id, invalid: true, reason: "missing playable source" };
+  const derivedTitle = deriveTitleFromEvent({
+    parsedContent,
+    tags: event.tags,
+    primaryTitle: title,
+  });
+
+  let resolvedTitle = derivedTitle;
+  if (!resolvedTitle && numericVersion < 2 && playbackMagnet) {
+    resolvedTitle = trimmedInfoHash
+      ? `Legacy Video ${trimmedInfoHash.slice(0, 8)}`
+      : "Legacy BitTorrent Video";
+  }
+
+  if (!resolvedTitle) {
+    const reason = parseError
+      ? "missing title (json parse error)"
+      : "missing title";
+    return { id: event.id, invalid: true, reason };
   }
 
   return {
     id: event.id,
     videoRootId: parsedContent.videoRootId || event.id,
-    version,
+    version: numericVersion,
     isPrivate: parsedContent.isPrivate ?? false,
-    title,
-    url,
-    magnet,
+    title: resolvedTitle,
+    url: trimmedUrl,
+    magnet: playbackMagnet,
+    rawMagnet: trimmedMagnet,
+    infoHash: trimmedInfoHash,
     thumbnail: parsedContent.thumbnail ?? "",
     description: parsedContent.description ?? "",
     mode: parsedContent.mode ?? "live",
diff --git a/js/magnetUtils.js b/js/magnetUtils.js
index 25908f49..4cf206a3 100644
--- a/js/magnetUtils.js
+++ b/js/magnetUtils.js
@@ -205,7 +205,16 @@ export function normalizeAndAugmentMagnet(
     }
   }
 
-  const finalMagnet = parsed.toString();
+  let finalMagnet = parsed.toString();
+  const decodedFinalMagnet = finalMagnet.replace(
+    ENCODED_BTih_PATTERN,
+    (_, hash) => `xt=${BTIH_PREFIX}${hash}`
+  );
+  if (decodedFinalMagnet !== finalMagnet) {
+    finalMagnet = decodedFinalMagnet;
+    didMutate = true;
+  }
+
   return {
     magnet: finalMagnet,
     didChange: didMutate || finalMagnet !== initial,
diff --git a/js/nostr.js b/js/nostr.js
index c40c6007..06c65763 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -2,7 +2,10 @@
 
 import { isDevMode } from "./config.js";
 import { accessControl } from "./accessControl.js";
-import { parseVideoEventPayload } from "./videoEventUtils.js";
+import {
+  deriveTitleFromEvent,
+  parseVideoEventPayload,
+} from "./videoEventUtils.js";
 
 /**
  * The usual relays
@@ -88,7 +91,7 @@ function inferMimeTypeFromUrl(url) {
 
 /**
  * Convert a raw Nostr event => your "video" object.
- * CHANGED: skip if version <2
+ * Accepts legacy (<2) payloads when they expose a usable magnet/info hash.
  */
 function convertEventToVideo(event) {
   const {
@@ -101,16 +104,15 @@ function convertEventToVideo(event) {
     version,
   } = parseVideoEventPayload(event);
 
-  if (!title) {
-    const reason = parseError ? "missing title (json parse error)" : "missing title";
-    return { id: event.id, invalid: true, reason };
-  }
-
+  const trimmedUrl = typeof url === "string" ? url.trim() : "";
   const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
   const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
   const playbackMagnet = trimmedMagnet || trimmedInfoHash;
 
-  if (!url && !playbackMagnet) {
+  const numericVersion = Number.isFinite(version) ? version : 0;
+  const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
+
+  if (!hasPlayableSource) {
     return {
       id: event.id,
       invalid: true,
@@ -118,13 +120,33 @@ function convertEventToVideo(event) {
     };
   }
 
+  const derivedTitle = deriveTitleFromEvent({
+    parsedContent,
+    tags: event.tags,
+    primaryTitle: title,
+  });
+
+  let resolvedTitle = derivedTitle;
+  if (!resolvedTitle && numericVersion < 2 && playbackMagnet) {
+    resolvedTitle = trimmedInfoHash
+      ? `Legacy Video ${trimmedInfoHash.slice(0, 8)}`
+      : "Legacy BitTorrent Video";
+  }
+
+  if (!resolvedTitle) {
+    const reason = parseError
+      ? "missing title (json parse error)"
+      : "missing title";
+    return { id: event.id, invalid: true, reason };
+  }
+
   return {
     id: event.id,
     videoRootId: parsedContent.videoRootId || event.id,
-    version,
+    version: numericVersion,
     isPrivate: parsedContent.isPrivate ?? false,
-    title,
-    url,
+    title: resolvedTitle,
+    url: trimmedUrl,
     magnet: playbackMagnet,
     rawMagnet: trimmedMagnet,
     infoHash: trimmedInfoHash,
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 29386149..b49e7bf8 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -1,6 +1,9 @@
 // js/subscriptions.js
 import { nostrClient } from "./nostr.js";
-import { parseVideoEventPayload } from "./videoEventUtils.js";
+import {
+  deriveTitleFromEvent,
+  parseVideoEventPayload,
+} from "./videoEventUtils.js";
 
 /**
  * Manages the user's subscription list (kind=30002) *privately*,
@@ -501,18 +504,24 @@ class SubscriptionsManager {
   }
 
   convertEventToVideo(evt) {
-    const { parsedContent, parseError, title, url, magnet, version } =
-      parseVideoEventPayload(evt);
+    const {
+      parsedContent,
+      parseError,
+      title,
+      url,
+      magnet,
+      infoHash,
+      version,
+    } = parseVideoEventPayload(evt);
 
-    if (!title) {
-      return {
-        id: evt.id,
-        invalid: true,
-        reason: parseError ? "missing title (json parse error)" : "missing title",
-      };
-    }
+    const trimmedUrl = typeof url === "string" ? url.trim() : "";
+    const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+    const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
+    const playbackMagnet = trimmedMagnet || trimmedInfoHash;
+    const numericVersion = Number.isFinite(version) ? version : 0;
 
-    if (!url && !magnet) {
+    const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
+    if (!hasPlayableSource) {
       return {
         id: evt.id,
         invalid: true,
@@ -520,17 +529,42 @@ class SubscriptionsManager {
       };
     }
 
+    const derivedTitle = deriveTitleFromEvent({
+      parsedContent,
+      tags: evt.tags,
+      primaryTitle: title,
+    });
+
+    let resolvedTitle = derivedTitle;
+    if (!resolvedTitle && numericVersion < 2 && playbackMagnet) {
+      resolvedTitle = trimmedInfoHash
+        ? `Legacy Video ${trimmedInfoHash.slice(0, 8)}`
+        : "Legacy BitTorrent Video";
+    }
+
+    if (!resolvedTitle) {
+      return {
+        id: evt.id,
+        invalid: true,
+        reason: parseError
+          ? "missing title (json parse error)"
+          : "missing title",
+      };
+    }
+
     return {
       id: evt.id,
       pubkey: evt.pubkey,
       created_at: evt.created_at,
       videoRootId: parsedContent.videoRootId || evt.id,
-      version,
+      version: numericVersion,
       deleted: parsedContent.deleted === true,
       isPrivate: parsedContent.isPrivate ?? false,
-      title,
-      url,
-      magnet,
+      title: resolvedTitle,
+      url: trimmedUrl,
+      magnet: playbackMagnet,
+      rawMagnet: trimmedMagnet,
+      infoHash: trimmedInfoHash,
       thumbnail: parsedContent.thumbnail ?? "",
       description: parsedContent.description ?? "",
       mode: parsedContent.mode ?? "live",
diff --git a/js/videoEventUtils.js b/js/videoEventUtils.js
index 71fcd74f..4f835f7d 100644
--- a/js/videoEventUtils.js
+++ b/js/videoEventUtils.js
@@ -7,6 +7,73 @@
 const MAGNET_URI_PATTERN = /^magnet:\?/i;
 const HEX_INFO_HASH_PATTERN = /\b[0-9a-f]{40}\b/gi;
 
+function safeTrim(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function pickFirstString(values = []) {
+  if (!Array.isArray(values)) {
+    return "";
+  }
+
+  for (const value of values) {
+    const trimmed = safeTrim(value);
+    if (trimmed) {
+      return trimmed;
+    }
+  }
+
+  return "";
+}
+
+export function deriveTitleFromEvent({
+  parsedContent = {},
+  tags = [],
+  primaryTitle = "",
+} = {}) {
+  const initial = safeTrim(primaryTitle);
+  if (initial) {
+    return initial;
+  }
+
+  const directCandidates = pickFirstString([
+    parsedContent?.title,
+    parsedContent?.name,
+    parsedContent?.filename,
+    parsedContent?.fileName,
+    parsedContent?.subject,
+    parsedContent?.caption,
+  ]);
+  if (directCandidates) {
+    return directCandidates;
+  }
+
+  const metaTitle = safeTrim(parsedContent?.meta?.title);
+  if (metaTitle) {
+    return metaTitle;
+  }
+
+  if (Array.isArray(tags)) {
+    for (const tag of tags) {
+      if (!Array.isArray(tag) || tag.length < 2) {
+        continue;
+      }
+      const key = safeTrim(tag[0]).toLowerCase();
+      if (!key) {
+        continue;
+      }
+      if (["title", "subject", "caption", "name"].includes(key)) {
+        const candidate = safeTrim(tag[1]);
+        if (candidate) {
+          return candidate;
+        }
+      }
+    }
+  }
+
+  return "";
+}
+
 function extractInfoHashesFromString(value, pushInfoHash) {
   if (typeof value !== "string") {
     return;
diff --git a/tests/legacy-infohash.test.mjs b/tests/legacy-infohash.test.mjs
index 0aa76ac6..add5a474 100644
--- a/tests/legacy-infohash.test.mjs
+++ b/tests/legacy-infohash.test.mjs
@@ -64,6 +64,23 @@ const LEGACY_INFO_HASH = "0123456789abcdef0123456789abcdef01234567";
   assert.equal(video.rawMagnet, "");
 })();
 
+(function testLegacyEventWithoutTitleStillLoads() {
+  const event = {
+    id: "evt-no-title",
+    pubkey: "pk2",
+    created_at: 2,
+    tags: [],
+    content: JSON.stringify({
+      version: 1,
+      magnet: `magnet:?xt=urn:btih:${LEGACY_INFO_HASH}`,
+    }),
+  };
+
+  const video = convertEventToVideo(event);
+  assert.equal(video.invalid, false, "Legacy events without title should fallback");
+  assert.ok(video.title && video.title.length > 0, "Fallback title should be provided");
+})();
+
 (function testPlaybackConfigNormalizesInfoHash() {
   const result = deriveTorrentPlaybackConfig({
     magnet: "",

From db43e3634bfc961fb0812f7030ad3c7d2237da69 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 23 Sep 2025 14:21:07 -0400
Subject: [PATCH 022/101] Decode magnet URIs before torrent playback

---
 js/app.js                      | 25 ++++++++++++++++---------
 js/magnetUtils.js              | 32 ++++++++++++++++++++++++++++++++
 js/playbackUtils.js            | 18 ++++++++++++------
 tests/legacy-infohash.test.mjs | 21 +++++++++++++++++++++
 tests/magnet-utils.test.mjs    | 22 ++++++++++++++++++++++
 5 files changed, 103 insertions(+), 15 deletions(-)

diff --git a/js/app.js b/js/app.js
index 43c0eeee..9196a325 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,7 +5,7 @@ import { nostrClient } from "./nostr.js";
 import { torrentClient } from "./webtorrent.js";
 import { isDevMode } from "./config.js";
 import { isWhitelistEnabled } from "./config.js";
-import { normalizeAndAugmentMagnet } from "./magnetUtils.js";
+import { normalizeAndAugmentMagnet, safeDecodeMagnet } from "./magnetUtils.js";
 import { deriveTorrentPlaybackConfig } from "./playbackUtils.js";
 import {
   initialWhitelist,
@@ -38,12 +38,15 @@ function isValidMagnetUri(magnet) {
     return false;
   }
 
-  if (/^[0-9a-f]{40}$/i.test(trimmed)) {
+  const decoded = safeDecodeMagnet(trimmed);
+  const candidate = decoded || trimmed;
+
+  if (/^[0-9a-f]{40}$/i.test(candidate)) {
     return true;
   }
 
   try {
-    const parsed = new URL(trimmed);
+    const parsed = new URL(candidate);
     if (parsed.protocol.toLowerCase() !== "magnet:") {
       return false;
     }
@@ -2227,8 +2230,10 @@ class bitvidApp {
     const legacyInfoHash =
       typeof video.infoHash === "string" ? video.infoHash.trim().toLowerCase() : "";
     const magnetCandidate = rawMagnet || legacyInfoHash;
-    const magnetSupported = isValidMagnetUri(magnetCandidate);
-    const sanitizedMagnet = magnetSupported ? magnetCandidate : "";
+    const decodedMagnetCandidate = safeDecodeMagnet(magnetCandidate);
+    const usableMagnetCandidate = decodedMagnetCandidate || magnetCandidate;
+    const magnetSupported = isValidMagnetUri(usableMagnetCandidate);
+    const sanitizedMagnet = magnetSupported ? usableMagnetCandidate : "";
 
     this.currentVideo = {
       ...video,
@@ -2297,7 +2302,7 @@ class bitvidApp {
 
     await this.playVideoWithFallback({
       url: trimmedUrl,
-      magnet: magnetCandidate,
+      magnet: usableMagnetCandidate,
       infoHash: legacyInfoHash,
       title: video.title,
       description: video.description,
@@ -2312,8 +2317,10 @@ class bitvidApp {
   } = {}) {
     const sanitizedUrl = typeof url === "string" ? url.trim() : "";
     const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
-    const magnetSupported = isValidMagnetUri(trimmedMagnet);
-    const sanitizedMagnet = magnetSupported ? trimmedMagnet : "";
+    const decodedMagnet = safeDecodeMagnet(trimmedMagnet);
+    const usableMagnet = decodedMagnet || trimmedMagnet;
+    const magnetSupported = isValidMagnetUri(usableMagnet);
+    const sanitizedMagnet = magnetSupported ? usableMagnet : "";
 
     if (!sanitizedUrl && !sanitizedMagnet) {
       const message = trimmedMagnet && !magnetSupported
@@ -2368,7 +2375,7 @@ class bitvidApp {
 
     await this.playVideoWithFallback({
       url: sanitizedUrl,
-      magnet: trimmedMagnet,
+      magnet: usableMagnet,
       title,
       description,
     });
diff --git a/js/magnetUtils.js b/js/magnetUtils.js
index 4cf206a3..7de9ab87 100644
--- a/js/magnetUtils.js
+++ b/js/magnetUtils.js
@@ -51,6 +51,38 @@ function sanitizeHttpUrl(candidate) {
   return "";
 }
 
+export function safeDecodeMagnet(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  let decoded = value.trim();
+  if (!decoded) {
+    return "";
+  }
+
+  for (let i = 0; i < 2; i += 1) {
+    if (!decoded.includes("%")) {
+      break;
+    }
+
+    try {
+      const candidate = decodeURIComponent(decoded);
+      if (!candidate) {
+        break;
+      }
+      if (candidate === decoded) {
+        break;
+      }
+      decoded = candidate.trim();
+    } catch (err) {
+      break;
+    }
+  }
+
+  return decoded;
+}
+
 export function normalizeAndAugmentMagnet(
   rawValue,
   {
diff --git a/js/playbackUtils.js b/js/playbackUtils.js
index 9311022b..a670effe 100644
--- a/js/playbackUtils.js
+++ b/js/playbackUtils.js
@@ -1,6 +1,9 @@
 // js/playbackUtils.js
 
-import { normalizeAndAugmentMagnet } from "./magnetUtils.js";
+import {
+  normalizeAndAugmentMagnet,
+  safeDecodeMagnet,
+} from "./magnetUtils.js";
 
 const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
 const MAGNET_URI = /^magnet:\?/i;
@@ -13,18 +16,21 @@ export function deriveTorrentPlaybackConfig({
   appProtocol,
 } = {}) {
   const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+  const decodedMagnet = safeDecodeMagnet(trimmedMagnet);
+  const magnetCandidate = decodedMagnet || trimmedMagnet;
   const trimmedInfoHash =
     typeof infoHash === "string" ? infoHash.trim().toLowerCase() : "";
   const sanitizedUrl = typeof url === "string" ? url.trim() : "";
 
-  const magnetIsUri = MAGNET_URI.test(trimmedMagnet);
-  const magnetLooksLikeInfoHash = HEX_INFO_HASH.test(trimmedMagnet);
+  const magnetIsUri = MAGNET_URI.test(magnetCandidate);
+  const magnetLooksLikeInfoHash = HEX_INFO_HASH.test(magnetCandidate);
   const resolvedInfoHash = trimmedInfoHash || (magnetLooksLikeInfoHash
-    ? trimmedMagnet.toLowerCase()
+    ? magnetCandidate.toLowerCase()
     : "");
 
-  const normalizationInput = magnetIsUri ? trimmedMagnet : resolvedInfoHash;
+  const normalizationInput = magnetIsUri ? magnetCandidate : resolvedInfoHash;
   const provided = Boolean(trimmedMagnet || trimmedInfoHash);
+  const decodeChanged = magnetCandidate !== trimmedMagnet;
 
   if (!normalizationInput) {
     return {
@@ -66,7 +72,7 @@ export function deriveTorrentPlaybackConfig({
     provided,
     usedInfoHash,
     originalInput: normalizationInput,
-    didMutate: normalization.didChange || usedInfoHash,
+    didMutate: normalization.didChange || usedInfoHash || decodeChanged,
     infoHash: resolvedInfoHash,
   };
 }
diff --git a/tests/legacy-infohash.test.mjs b/tests/legacy-infohash.test.mjs
index add5a474..d2ac0ff8 100644
--- a/tests/legacy-infohash.test.mjs
+++ b/tests/legacy-infohash.test.mjs
@@ -96,4 +96,25 @@ const LEGACY_INFO_HASH = "0123456789abcdef0123456789abcdef01234567";
   assert.equal(result.provided, true);
 })();
 
+(function testPlaybackConfigDecodesEncodedMagnet() {
+  const rawMagnet =
+    `magnet:?xt=urn:btih:${LEGACY_INFO_HASH}&dn=Legacy+Example`;
+  const encodedMagnet = encodeURIComponent(rawMagnet);
+  const result = deriveTorrentPlaybackConfig({
+    magnet: encodedMagnet,
+    infoHash: "",
+    url: "",
+  });
+
+  assert.ok(result.magnet.startsWith("magnet:?"));
+  const parsed = new URL(result.magnet);
+  assert.equal(
+    parsed.searchParams.get("xt"),
+    `urn:btih:${LEGACY_INFO_HASH}`,
+    "Expected encoded magnet to be normalized"
+  );
+  assert.equal(result.provided, true);
+  assert.equal(result.usedInfoHash, false);
+})();
+
 console.log("legacy infohash tests passed");
diff --git a/tests/magnet-utils.test.mjs b/tests/magnet-utils.test.mjs
index 209d596f..601ac14e 100644
--- a/tests/magnet-utils.test.mjs
+++ b/tests/magnet-utils.test.mjs
@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import {
   DEFAULT_WSS_TRACKERS,
   normalizeAndAugmentMagnet,
+  safeDecodeMagnet,
 } from "../js/magnetUtils.js";
 
 function getParamValues(magnet, key) {
@@ -92,4 +93,25 @@ function getParamValues(magnet, key) {
   assert.deepEqual(seeds, ["http://cdn.example.com/video.mp4"]);
 })();
 
+(function testSafeDecodeMagnetHandlesEncodedValues() {
+  const rawMagnet =
+    "magnet:?xt=urn:btih:0123456789abcdef0123456789abcdef01234567&dn=Example";
+  const encodedMagnet = encodeURIComponent(rawMagnet);
+  assert.equal(
+    safeDecodeMagnet(encodedMagnet),
+    rawMagnet,
+    "Expected percent-encoded magnet to be decoded"
+  );
+})();
+
+(function testSafeDecodeMagnetLeavesPlainStringsUntouched() {
+  const rawMagnet =
+    "magnet:?xt=urn:btih:abcdefabcdefabcdefabcdefabcdefabcdefabcd";
+  assert.equal(
+    safeDecodeMagnet(rawMagnet),
+    rawMagnet,
+    "Plain magnet strings should pass through unchanged"
+  );
+})();
+
 console.log("magnet-utils tests passed");

From 0d622bdb8d475d6089c234c7ffdd217a875b1399 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 11:26:46 -0400
Subject: [PATCH 023/101] Fix magnet decoding and accept legacy notes

---
 js/app.js            |  5 +++--
 js/channelProfile.js | 10 +++++++++-
 js/subscriptions.js  | 10 +++++++++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/js/app.js b/js/app.js
index 9196a325..65a4f1ed 100644
--- a/js/app.js
+++ b/js/app.js
@@ -716,7 +716,7 @@ class bitvidApp {
             return decodeURIComponent(value);
           } catch (err) {
             console.warn("Failed to decode data attribute:", err);
-            return "";
+            return value;
           }
         };
 
@@ -724,7 +724,8 @@ class bitvidApp {
         const encodedMagnet = trigger.getAttribute("data-play-magnet") || "";
 
         const url = decodeDataValue(encodedUrl);
-        const magnet = decodeDataValue(encodedMagnet);
+        const rawMagnet = decodeDataValue(encodedMagnet);
+        const magnet = safeDecodeMagnet(rawMagnet) || rawMagnet;
         const eventId = trigger.getAttribute("data-video-id");
 
         if (eventId) {
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 02d61019..e8bc1ecd 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -490,7 +490,15 @@ function localConvertEventToVideo(event) {
   const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
   const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
   const playbackMagnet = trimmedMagnet || trimmedInfoHash;
-  const numericVersion = Number.isFinite(version) ? version : 0;
+  const parsedVersion =
+    typeof version === "number"
+      ? version
+      : typeof version === "string"
+        ? Number.parseInt(version, 10)
+        : Number.NaN;
+  const numericVersion = Number.isFinite(parsedVersion)
+    ? parsedVersion
+    : 0;
 
   const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
   if (!hasPlayableSource) {
diff --git a/js/subscriptions.js b/js/subscriptions.js
index b49e7bf8..20f85344 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -518,7 +518,15 @@ class SubscriptionsManager {
     const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
     const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
     const playbackMagnet = trimmedMagnet || trimmedInfoHash;
-    const numericVersion = Number.isFinite(version) ? version : 0;
+    const parsedVersion =
+      typeof version === "number"
+        ? version
+        : typeof version === "string"
+          ? Number.parseInt(version, 10)
+          : Number.NaN;
+    const numericVersion = Number.isFinite(parsedVersion)
+      ? parsedVersion
+      : 0;
 
     const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
     if (!hasPlayableSource) {

From 3593fdd0ef79ef06204788f99ce4c213d1e6ab6c Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 12:38:59 -0400
Subject: [PATCH 024/101] Fix magnet dataset handling and legacy fallback

---
 js/app.js             | 43 +++++++++++++++++++++++++++----------------
 js/channelProfile.js  | 34 +++++++++++++++++++++-------------
 js/nostr.js           |  9 +++++++--
 js/subscriptions.js   | 39 +++++++++++++++++++++++++--------------
 js/videoEventUtils.js | 37 +++++++++++++++++++++++++++++++++++++
 5 files changed, 117 insertions(+), 45 deletions(-)

diff --git a/js/app.js b/js/app.js
index 65a4f1ed..cea4d77f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -720,12 +720,19 @@ class bitvidApp {
           }
         };
 
-        const encodedUrl = trigger.getAttribute("data-play-url") || "";
-        const encodedMagnet = trigger.getAttribute("data-play-magnet") || "";
+        const rawUrlValue =
+          (trigger.dataset && typeof trigger.dataset.playUrl === "string"
+            ? trigger.dataset.playUrl
+            : null) ?? trigger.getAttribute("data-play-url") ?? "";
+        const rawMagnetValue =
+          (trigger.dataset && typeof trigger.dataset.playMagnet === "string"
+            ? trigger.dataset.playMagnet
+            : null) ?? trigger.getAttribute("data-play-magnet") ?? "";
 
-        const url = decodeDataValue(encodedUrl);
-        const rawMagnet = decodeDataValue(encodedMagnet);
-        const magnet = safeDecodeMagnet(rawMagnet) || rawMagnet;
+        const url = decodeDataValue(rawUrlValue);
+        const decodedMagnetValue = decodeDataValue(rawMagnetValue);
+        const magnet =
+          safeDecodeMagnet(decodedMagnetValue) || decodedMagnetValue;
         const eventId = trigger.getAttribute("data-video-id");
 
         if (eventId) {
@@ -1365,11 +1372,6 @@ class bitvidApp {
     const authorSet = new Set();
 
     // 3) Build each card
-    const encodeDataValue = (value) =>
-      typeof value === "string" && value.length > 0
-        ? encodeURIComponent(value)
-        : "";
-
     videos.forEach((video, index) => {
       if (!video.id || !video.title) {
         console.error("Video missing ID/title:", video);
@@ -1452,8 +1454,8 @@ class bitvidApp {
       const magnetCandidate = trimmedMagnet || legacyInfoHash;
       const magnetSupported = isValidMagnetUri(magnetCandidate);
       const magnetProvided = magnetCandidate.length > 0;
-      const encodedMagnet = encodeDataValue(magnetCandidate);
-      const encodedUrl = encodeDataValue(trimmedUrl);
+      const playbackUrl = trimmedUrl;
+      const playbackMagnet = magnetCandidate;
       const showUnsupportedTorrentBadge =
         !trimmedUrl && magnetProvided && !magnetSupported;
       const torrentBadge = showUnsupportedTorrentBadge
@@ -1474,8 +1476,8 @@ class bitvidApp {
           <a
             href="${shareUrl}"
             data-video-id="${video.id}"
-            data-play-url="${encodedUrl}"
-            data-play-magnet="${encodedMagnet}"
+            data-play-url=""
+            data-play-magnet=""
             data-torrent-supported="${magnetSupported ? "true" : "false"}"
             class="block cursor-pointer relative group"
           >
@@ -1492,8 +1494,8 @@ class bitvidApp {
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
               data-video-id="${video.id}"
-              data-play-url="${encodedUrl}"
-              data-play-magnet="${encodedMagnet}"
+              data-play-url=""
+              data-play-magnet=""
               data-torrent-supported="${magnetSupported ? "true" : "false"}"
             >
               ${this.escapeHTML(video.title)}
@@ -1537,6 +1539,15 @@ class bitvidApp {
         } else if (magnetProvided && magnetSupported) {
           cardEl.dataset.torrentSupported = "true";
         }
+        const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
+        interactiveEls.forEach((el) => {
+          if (!el.dataset) return;
+          el.dataset.playUrl = playbackUrl || "";
+          el.dataset.playMagnet = playbackMagnet || "";
+          if (magnetProvided) {
+            el.dataset.torrentSupported = magnetSupported ? "true" : "false";
+          }
+        });
       }
       fragment.appendChild(cardEl);
     });
diff --git a/js/channelProfile.js b/js/channelProfile.js
index e8bc1ecd..42909fd5 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -8,6 +8,7 @@ import { isWhitelistEnabled } from "./config.js";
 import {
   deriveTitleFromEvent,
   parseVideoEventPayload,
+  findLegacyMagnetInEvent,
 } from "./videoEventUtils.js";
 
 /**
@@ -244,11 +245,6 @@ async function loadUserVideos(pubkey) {
     const fragment = document.createDocumentFragment();
     const allKnownEventsArray = Array.from(nostrClient.allEvents.values());
 
-    const encodeDataValue = (value) =>
-      typeof value === "string" && value.length > 0
-        ? encodeURIComponent(value)
-        : "";
-
     videos.forEach((video, index) => {
       // Decrypt if user owns a private video
       if (
@@ -349,15 +345,16 @@ async function loadUserVideos(pubkey) {
       const legacyInfoHash =
         typeof video.infoHash === "string" ? video.infoHash.trim() : "";
       const magnetCandidate = trimmedMagnet || legacyInfoHash;
-      const encodedUrl = encodeDataValue(video.url);
-      const encodedMagnet = encodeDataValue(magnetCandidate);
+      const playbackUrl =
+        typeof video.url === "string" ? video.url : "";
+      const playbackMagnet = magnetCandidate || "";
 
       cardEl.innerHTML = `
         <div
           class="cursor-pointer relative group"
           data-video-id="${video.id}"
-          data-play-url="${encodedUrl}"
-          data-play-magnet="${encodedMagnet}"
+          data-play-url=""
+          data-play-magnet=""
         >
           <div class="ratio-16-9">
             <img
@@ -372,8 +369,8 @@ async function loadUserVideos(pubkey) {
             <h3
               class="text-lg font-bold text-white mb-2 line-clamp-2"
               data-video-id="${video.id}"
-              data-play-url="${encodedUrl}"
-              data-play-magnet="${encodedMagnet}"
+              data-play-url=""
+              data-play-magnet=""
             >
               ${safeTitle}
             </h3>
@@ -385,6 +382,13 @@ async function loadUserVideos(pubkey) {
         </div>
       `;
 
+      const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
+      interactiveEls.forEach((el) => {
+        if (!el.dataset) return;
+        el.dataset.playUrl = playbackUrl || "";
+        el.dataset.playMagnet = playbackMagnet || "";
+      });
+
       fragment.appendChild(cardEl);
     });
 
@@ -488,8 +492,12 @@ function localConvertEventToVideo(event) {
 
   const trimmedUrl = typeof url === "string" ? url.trim() : "";
   const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+  const legacyMagnet = findLegacyMagnetInEvent(event);
+  const trimmedLegacyMagnet =
+    typeof legacyMagnet === "string" ? legacyMagnet.trim() : "";
   const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
-  const playbackMagnet = trimmedMagnet || trimmedInfoHash;
+  const playbackMagnet =
+    trimmedMagnet || trimmedLegacyMagnet || trimmedInfoHash;
   const parsedVersion =
     typeof version === "number"
       ? version
@@ -533,7 +541,7 @@ function localConvertEventToVideo(event) {
     title: resolvedTitle,
     url: trimmedUrl,
     magnet: playbackMagnet,
-    rawMagnet: trimmedMagnet,
+    rawMagnet: trimmedMagnet || trimmedLegacyMagnet,
     infoHash: trimmedInfoHash,
     thumbnail: parsedContent.thumbnail ?? "",
     description: parsedContent.description ?? "",
diff --git a/js/nostr.js b/js/nostr.js
index 06c65763..b13765cd 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -5,6 +5,7 @@ import { accessControl } from "./accessControl.js";
 import {
   deriveTitleFromEvent,
   parseVideoEventPayload,
+  findLegacyMagnetInEvent,
 } from "./videoEventUtils.js";
 
 /**
@@ -106,8 +107,12 @@ function convertEventToVideo(event) {
 
   const trimmedUrl = typeof url === "string" ? url.trim() : "";
   const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
+  const legacyMagnet = findLegacyMagnetInEvent(event);
+  const trimmedLegacyMagnet =
+    typeof legacyMagnet === "string" ? legacyMagnet.trim() : "";
   const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
-  const playbackMagnet = trimmedMagnet || trimmedInfoHash;
+  const playbackMagnet =
+    trimmedMagnet || trimmedLegacyMagnet || trimmedInfoHash;
 
   const numericVersion = Number.isFinite(version) ? version : 0;
   const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
@@ -148,7 +153,7 @@ function convertEventToVideo(event) {
     title: resolvedTitle,
     url: trimmedUrl,
     magnet: playbackMagnet,
-    rawMagnet: trimmedMagnet,
+    rawMagnet: trimmedMagnet || trimmedLegacyMagnet,
     infoHash: trimmedInfoHash,
     thumbnail: parsedContent.thumbnail ?? "",
     description: parsedContent.description ?? "",
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 20f85344..83e581b1 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -3,6 +3,7 @@ import { nostrClient } from "./nostr.js";
 import {
   deriveTitleFromEvent,
   parseVideoEventPayload,
+  findLegacyMagnetInEvent,
 } from "./videoEventUtils.js";
 
 /**
@@ -254,11 +255,6 @@ class SubscriptionsManager {
     // Only declare localAuthorSet once
     const localAuthorSet = new Set();
 
-    const encodeDataValue = (value) =>
-      typeof value === "string" && value.length > 0
-        ? encodeURIComponent(value)
-        : "";
-
     videos.forEach((video, index) => {
       if (!video.id || !video.title) {
         console.error("Missing ID or title:", video);
@@ -342,15 +338,17 @@ class SubscriptionsManager {
 
       const safeTitle = window.app?.escapeHTML(video.title) || "Untitled";
       const safeThumb = window.app?.escapeHTML(video.thumbnail) || "";
-      const encodedMagnet = encodeDataValue(video.magnet);
-      const encodedUrl = encodeDataValue(video.url);
+      const playbackUrl =
+        typeof video.url === "string" ? video.url : "";
+      const playbackMagnet =
+        typeof video.magnet === "string" ? video.magnet : "";
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <a
             href="${shareUrl}"
             data-video-id="${video.id}"
-            data-play-url="${encodedUrl}"
-            data-play-magnet="${encodedMagnet}"
+            data-play-url=""
+            data-play-magnet=""
             class="block cursor-pointer relative group"
           >
             <div class="ratio-16-9">
@@ -365,8 +363,8 @@ class SubscriptionsManager {
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
               data-video-id="${video.id}"
-              data-play-url="${encodedUrl}"
-              data-play-magnet="${encodedMagnet}"
+              data-play-url=""
+              data-play-magnet=""
             >
               ${safeTitle}
             </h3>
@@ -401,6 +399,14 @@ class SubscriptionsManager {
       const t = document.createElement("template");
       t.innerHTML = cardHtml.trim();
       const cardEl = t.content.firstElementChild;
+      if (cardEl) {
+        const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
+        interactiveEls.forEach((el) => {
+          if (!el.dataset) return;
+          el.dataset.playUrl = playbackUrl || "";
+          el.dataset.playMagnet = playbackMagnet || "";
+        });
+      }
       fragment.appendChild(cardEl);
     });
 
@@ -516,8 +522,13 @@ class SubscriptionsManager {
 
     const trimmedUrl = typeof url === "string" ? url.trim() : "";
     const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
-    const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
-    const playbackMagnet = trimmedMagnet || trimmedInfoHash;
+    const legacyMagnet = findLegacyMagnetInEvent(evt);
+    const trimmedLegacyMagnet =
+      typeof legacyMagnet === "string" ? legacyMagnet.trim() : "";
+    const trimmedInfoHash =
+      typeof infoHash === "string" ? infoHash.trim() : "";
+    const playbackMagnet =
+      trimmedMagnet || trimmedLegacyMagnet || trimmedInfoHash;
     const parsedVersion =
       typeof version === "number"
         ? version
@@ -571,7 +582,7 @@ class SubscriptionsManager {
       title: resolvedTitle,
       url: trimmedUrl,
       magnet: playbackMagnet,
-      rawMagnet: trimmedMagnet,
+      rawMagnet: trimmedMagnet || trimmedLegacyMagnet,
       infoHash: trimmedInfoHash,
       thumbnail: parsedContent.thumbnail ?? "",
       description: parsedContent.description ?? "",
diff --git a/js/videoEventUtils.js b/js/videoEventUtils.js
index 4f835f7d..a9ac597c 100644
--- a/js/videoEventUtils.js
+++ b/js/videoEventUtils.js
@@ -6,6 +6,7 @@
  */
 const MAGNET_URI_PATTERN = /^magnet:\?/i;
 const HEX_INFO_HASH_PATTERN = /\b[0-9a-f]{40}\b/gi;
+const LEGACY_MAGNET_PATTERN = /magnet:\?xt=urn:btih:[0-9a-z]{40,}[^\s"'<>]*/i;
 
 function safeTrim(value) {
   return typeof value === "string" ? value.trim() : "";
@@ -251,3 +252,39 @@ export function parseVideoEventPayload(event = {}) {
     version,
   };
 }
+
+function magnetFromText(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  const match = value.match(LEGACY_MAGNET_PATTERN);
+  return match ? match[0] : "";
+}
+
+export function findLegacyMagnetInEvent(event = {}) {
+  const fromContent = magnetFromText(event?.content);
+  if (fromContent) {
+    return fromContent.trim();
+  }
+
+  const tags = Array.isArray(event?.tags) ? event.tags : [];
+  for (const tag of tags) {
+    if (!Array.isArray(tag) || tag.length < 2) {
+      continue;
+    }
+    const key = typeof tag[0] === "string" ? tag[0].trim().toLowerCase() : "";
+    const value = typeof tag[1] === "string" ? tag[1].trim() : "";
+    if (!value) {
+      continue;
+    }
+    if (key === "magnet" && value) {
+      return value;
+    }
+    const fromTag = magnetFromText(value);
+    if (fromTag) {
+      return fromTag.trim();
+    }
+  }
+
+  return "";
+}

From 7742e3968cc2104f62d5d4d32bbce28233714dbd Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 13:07:14 -0400
Subject: [PATCH 025/101] Fix magnet playback handling and update agent
 guidance

---
 AGENTS.md         |  74 +++++++++++++++++++++++----------
 js/app.js         |  21 ++++++----
 js/magnetUtils.js | 102 ++++++++++++++++++++++++++++++++--------------
 3 files changed, 138 insertions(+), 59 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index b06fd708..aebda66c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -91,10 +91,17 @@ This document tells AI agents how Bitvid works **now** and how to extend it goin
 
 ## 5) Key Client Functions (reference)
 
-### 5.1 `augmentMagnet(raw, ws?, xs?)`
+### 5.1 `normalizeAndAugmentMagnet(raw, { webSeed?, torrentUrl?, xs?, extraTrackers? })`
 
-* Accepts a magnet URI and conditionally **appends** `ws` and `xs` query params.
-* Returns the same magnet if not a `magnet:` scheme.
+* Accepts a magnet URI or bare hex info hash and returns a **sanitized magnet**.
+* Fixes accidentally encoded `xt=urn%3Abtih:` segments and tolerates bare hashes by
+  promoting them to `magnet:?xt=urn:btih:<hash>`.
+* Appends only **browser-safe WSS trackers** plus optional extras, avoiding mixed
+  content.
+* Adds HTTPS web seeds (`ws=`) and torrent hints (`xs=`) when provided, skipping
+  insecure `http://` web seeds unless the app itself is served via HTTP.
+* Preserves existing parameters in their original form—no `new URL()` usage and no
+  percent re-encoding of the `xt` payload.
 
 ### 5.2 `probeUrl(url)`
 
@@ -120,12 +127,36 @@ This document tells AI agents how Bitvid works **now** and how to extend it goin
 * **Cards:** add both attributes where applicable:
 
   * `data-play-url="<encoded URL or empty>"`
-  * `data-play-magnet="<magnet or empty>"`
-* **Click delegate:** look for a closest element bearing either attribute; decode `data-play-url` prior to use.
+  * `data-play-magnet="<raw magnet or empty>"`
+* **Click delegate:** look for a closest element bearing either attribute; decode
+  both `data-play-url` and `data-play-magnet` (if encoded upstream) **before** passing
+  them to playback logic. Never double-encode magnets when writing them into the DOM.
 
 ---
 
-## 7) Server Requirements for Hosted URLs
+## 7) Main vs Unstable — legacy WebTorrent compatibility lessons
+
+Legacy Bitvid posts (v1 / magnet-only) still play on **Main**. They broke on
+**Unstable** because of double-encoded magnets, URL constructors, and strict
+filters. Apply these rules to stay compatible:
+
+* **Raw magnets end-to-end.** Store the literal `magnet:?xt=urn:btih:...` in the DOM
+  and feed that same string into WebTorrent. If you must encode for transport, be
+  sure to decode once when handling clicks.
+* **No `new URL()` for magnets.** Appending params with `URLSearchParams` or `new URL`
+  percent-encodes the `xt` value and can corrupt legacy hashes. When you need to add
+  trackers or cache-busting params, concatenate plain text (or use
+  `normalizeAndAugmentMagnet`, which already preserves the payload).
+* **Converters should allow magnet-only posts.** A note is playable when it exposes
+  either a usable `magnet` **or** a direct `url`. Don’t require `version >= 2` to keep
+  legacy uploads alive.
+* **Browser-safe announce list.** Ship WSS trackers for browser playback. Skip UDP
+  trackers in the client path and only add `ws=` hints when they’re HTTPS on HTTPS
+  pages (mixed content gets blocked anyway).
+
+---
+
+## 8) Server Requirements for Hosted URLs
 
 * **CORS:** allow the app origin (or `*`).
 * **Range requests:** ensure `Accept-Ranges: bytes`.
@@ -134,7 +165,7 @@ This document tells AI agents how Bitvid works **now** and how to extend it goin
 
 ---
 
-## 8) P2P Notes for Agents
+## 9) P2P Notes for Agents
 
 * **`ws=` (web seed):** HTTP(S) base path where the file is fetchable; enables WebTorrent to download pieces even with zero peers.
 * **`xs=`:** HTTP(S) URL of the `.torrent` metadata so the client can start promptly without DHT/peer discovery.
@@ -142,7 +173,7 @@ This document tells AI agents how Bitvid works **now** and how to extend it goin
 
 ---
 
-## 9) Interop & Extensions
+## 10) Interop & Extensions
 
 * **Live streams:** future option via HLS URLs (MIME `application/x-mpegURL`). For Nostr live presence, consider **NIP‑53** events alongside VOD 1063 entries.
 * **Adaptive Bitrate + P2P:** if ABR is needed with P2P, consider a segment‑sharing overlay (e.g., p2p segment loaders) rather than WebTorrent.
@@ -150,7 +181,7 @@ This document tells AI agents how Bitvid works **now** and how to extend it goin
 
 ---
 
-## 10) Testing Checklist (agents)
+## 11) Testing Checklist (agents)
 
 * **Form validation:** title present; ensure `(url || magnet)` is true; `ws` and `xs` appended only for magnet.
 * **Probe:** healthy URL returns `ok=true`; dead URL hides/badges card; cache prevents re‑probing every render.
@@ -161,7 +192,7 @@ This document tells AI agents how Bitvid works **now** and how to extend it goin
 
 ---
 
-## 11) Guardrails & Do/Don’t
+## 12) Guardrails & Do/Don’t
 
 **Do**
 
@@ -177,7 +208,7 @@ This document tells AI agents how Bitvid works **now** and how to extend it goin
 
 ---
 
-## 12) Quick Reference (snippets)
+## 13) Quick Reference (snippets)
 
 **Bitvid content object (30078)**
 
@@ -193,17 +224,18 @@ const content = {
 };
 ```
 
-**Magnet augmentation**
+**Magnet normalization & augmentation**
 
 ```js
-function augmentMagnet(raw, ws, xs) {
-  if (!raw) return "";
-  const u = new URL(raw);
-  if (u.protocol !== "magnet:") return raw;
-  if (ws) u.searchParams.append("ws", ws);
-  if (xs) u.searchParams.append("xs", xs);
-  return u.toString();
-}
+import { normalizeAndAugmentMagnet } from "./js/magnetUtils.js";
+
+const { magnet } = normalizeAndAugmentMagnet(inputMagnetOrInfoHash, {
+  webSeed: hostedUrl ? [hostedUrl] : [],
+  torrentUrl: xsHint,
+  extraTrackers: ["wss://tracker.openwebtorrent.com"],
+});
+
+// Feed `magnet` directly to playVideoWithFallback / WebTorrent.
 ```
 
 **Playback with fallback**
@@ -218,7 +250,7 @@ async function playVideoWithFallback({ url, magnet }) {
 
 ---
 
-## 13) Roadmap Hooks (where to extend)
+## 14) Roadmap Hooks (where to extend)
 
 * **Analytics:** Keep using your existing 30078 analytics/logging. Add fields for `play_source: "url"|"torrent"` to measure cost savings.
 * **Integrity:** Optionally compute SHA‑256 of the hosted file (off‑thread) and publish as NIP‑94 `["x", hash]` tag.
diff --git a/js/app.js b/js/app.js
index cea4d77f..9a9a0ab6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2042,16 +2042,21 @@ class bitvidApp {
         );
       }
 
-      let cacheBustedMagnet = trimmedCandidate;
-      try {
-        const parsed = new URL(trimmedCandidate);
-        parsed.searchParams.set("ts", Date.now().toString());
-        cacheBustedMagnet = parsed.toString();
-      } catch (err) {
-        const separator = trimmedCandidate.includes("?") ? "&" : "?";
-        cacheBustedMagnet = `${trimmedCandidate}${separator}ts=${Date.now()}`;
+      const timestamp = Date.now().toString();
+      const [magnetPrefix, magnetQuery = ""] = trimmedCandidate.split("?", 2);
+      let normalizedMagnet = magnetPrefix;
+      let queryParts = magnetQuery
+        .split("&")
+        .map((part) => part.trim())
+        .filter((part) => part && !/^ts=\d+$/.test(part));
+
+      if (queryParts.length) {
+        normalizedMagnet = `${magnetPrefix}?${queryParts.join("&")}`;
       }
 
+      const separator = normalizedMagnet.includes("?") ? "&" : "?";
+      const cacheBustedMagnet = `${normalizedMagnet}${separator}ts=${timestamp}`;
+
       await torrentClient.cleanup();
       this.resetTorrentStats();
 
diff --git a/js/magnetUtils.js b/js/magnetUtils.js
index 7de9ab87..4cbcb737 100644
--- a/js/magnetUtils.js
+++ b/js/magnetUtils.js
@@ -108,27 +108,69 @@ export function normalizeAndAugmentMagnet(
     didMutate = true;
   }
 
+  const hashIndex = working.indexOf("#");
+  let fragment = "";
+  if (hashIndex !== -1) {
+    fragment = working.slice(hashIndex);
+    working = working.slice(0, hashIndex);
+  }
+
   const decodedXt = working.replace(ENCODED_BTih_PATTERN, (_, hash) => {
     didMutate = true;
     return `xt=${BTIH_PREFIX}${hash}`;
   });
   working = decodedXt;
 
-  let parsed;
-  try {
-    parsed = new URL(working);
-  } catch (err) {
+  if (!/^magnet:/i.test(working)) {
     return {
       magnet: working,
       didChange: didMutate || working !== initial,
     };
   }
 
-  if (parsed.protocol !== "magnet:") {
-    return {
-      magnet: working,
-      didChange: didMutate || working !== initial,
-    };
+  const [schemePart, queryPart = ""] = working.split("?", 2);
+  const normalizedScheme = "magnet:";
+  if (schemePart !== normalizedScheme) {
+    didMutate = true;
+  }
+
+  const rawParams = queryPart
+    .split("&")
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+  const params = [];
+
+  const decodeLoose = (value) => {
+    if (typeof value !== "string" || !value) {
+      return "";
+    }
+    try {
+      return decodeURIComponent(value);
+    } catch (err) {
+      return value;
+    }
+  };
+
+  for (const rawParam of rawParams) {
+    const [rawKey, rawValue = ""] = rawParam.split("=", 2);
+    const key = rawKey.trim();
+    if (!key) {
+      continue;
+    }
+    let value = rawValue.trim();
+    if (key.toLowerCase() === "xt" && value) {
+      const decoded = decodeLoose(value);
+      if (decoded !== value) {
+        value = decoded;
+        didMutate = true;
+      }
+    }
+    params.push({
+      key,
+      value,
+      decoded: decodeLoose(value),
+    });
   }
 
   const torrentHint = typeof torrentUrl === "string" && torrentUrl.trim()
@@ -151,9 +193,9 @@ export function normalizeAndAugmentMagnet(
       : "https:";
 
   const existingTrackers = new Set(
-    parsed.searchParams
-      .getAll("tr")
-      .map((value) => normalizeForComparison(value))
+    params
+      .filter((param) => param.key.toLowerCase() === "tr")
+      .map((param) => normalizeForComparison(param.decoded))
       .filter(Boolean)
   );
 
@@ -177,30 +219,34 @@ export function normalizeAndAugmentMagnet(
     if (!normalizedTracker || existingTrackers.has(normalizedTracker)) {
       continue;
     }
-    parsed.searchParams.append("tr", trimmedTracker);
+    params.push({ key: "tr", value: trimmedTracker, decoded: trimmedTracker });
     existingTrackers.add(normalizedTracker);
     didMutate = true;
   }
 
   if (safeTorrentHint) {
     const existingXs = new Set(
-      parsed.searchParams
-        .getAll("xs")
-        .map((value) => normalizeForComparison(value))
+      params
+        .filter((param) => param.key.toLowerCase() === "xs")
+        .map((param) => normalizeForComparison(param.decoded))
         .filter(Boolean)
     );
     const normalizedXs = normalizeForComparison(safeTorrentHint);
     if (normalizedXs && !existingXs.has(normalizedXs)) {
-      parsed.searchParams.append("xs", safeTorrentHint);
+      params.push({
+        key: "xs",
+        value: safeTorrentHint,
+        decoded: safeTorrentHint,
+      });
       didMutate = true;
     }
   }
 
   if (seedInputs.length) {
     const existingWs = new Set(
-      parsed.searchParams
-        .getAll("ws")
-        .map((value) => normalizeForComparison(value))
+      params
+        .filter((param) => param.key.toLowerCase() === "ws")
+        .map((param) => normalizeForComparison(param.decoded))
         .filter(Boolean)
     );
     for (const seedInput of seedInputs) {
@@ -222,7 +268,7 @@ export function normalizeAndAugmentMagnet(
           const seedValue = parsedSeed.toString();
           const normalizedSeed = normalizeForComparison(seedValue);
           if (normalizedSeed && !existingWs.has(normalizedSeed)) {
-            parsed.searchParams.append("ws", seedValue);
+            params.push({ key: "ws", value: seedValue, decoded: seedValue });
             existingWs.add(normalizedSeed);
             didMutate = true;
           }
@@ -237,15 +283,11 @@ export function normalizeAndAugmentMagnet(
     }
   }
 
-  let finalMagnet = parsed.toString();
-  const decodedFinalMagnet = finalMagnet.replace(
-    ENCODED_BTih_PATTERN,
-    (_, hash) => `xt=${BTIH_PREFIX}${hash}`
-  );
-  if (decodedFinalMagnet !== finalMagnet) {
-    finalMagnet = decodedFinalMagnet;
-    didMutate = true;
-  }
+  const queryString = params
+    .map(({ key, value }) => (value ? `${key}=${value}` : key))
+    .join("&");
+
+  const finalMagnet = `${normalizedScheme}${queryString ? `?${queryString}` : ""}${fragment}`;
 
   return {
     magnet: finalMagnet,

From ed6b69b2e0bfebd0d2adb8e657476914f499d28c Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 13:44:03 -0400
Subject: [PATCH 026/101] Add thumbnail fallback to lazy loader

---
 js/app.js | 44 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/js/app.js b/js/app.js
index 9a9a0ab6..b0ac1e38 100644
--- a/js/app.js
+++ b/js/app.js
@@ -94,11 +94,35 @@ class MediaLoader {
         for (const entry of entries) {
           if (entry.isIntersecting) {
             const el = entry.target;
-            const lazySrc = el.dataset.lazy;
+            const lazySrc =
+              typeof el.dataset.lazy === "string"
+                ? el.dataset.lazy.trim()
+                : "";
+
             if (lazySrc) {
+              const fallbackSrc =
+                (typeof el.dataset.fallbackSrc === "string"
+                  ? el.dataset.fallbackSrc.trim()
+                  : "") ||
+                el.getAttribute("data-fallback-src") ||
+                "";
+
+              const handleError = () => {
+                if (!fallbackSrc) {
+                  el.removeEventListener("error", handleError);
+                  return;
+                }
+                if (el.src !== fallbackSrc) {
+                  el.src = fallbackSrc;
+                }
+                el.removeEventListener("error", handleError);
+              };
+
+              el.addEventListener("error", handleError);
               el.src = lazySrc;
-              delete el.dataset.lazy;
             }
+
+            delete el.dataset.lazy;
             // Stop observing once loaded
             this.observer.unobserve(el);
           }
@@ -109,7 +133,21 @@ class MediaLoader {
   }
 
   observe(el) {
-    if (el.dataset.lazy) {
+    if (!el || typeof el.dataset === "undefined") {
+      return;
+    }
+
+    if (!el.dataset.fallbackSrc) {
+      const fallbackAttr =
+        el.getAttribute("data-fallback-src") || el.getAttribute("src") || "";
+      if (fallbackAttr) {
+        el.dataset.fallbackSrc = fallbackAttr;
+      }
+    }
+
+    const lazySrc =
+      typeof el.dataset.lazy === "string" ? el.dataset.lazy.trim() : "";
+    if (lazySrc) {
       this.observer.observe(el);
     }
   }

From dd47fbed93d02eba0de09e247362d4f7f3e69b78 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 13:59:09 -0400
Subject: [PATCH 027/101] Ensure thumbnails fall back to placeholder

---
 js/app.js | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 63 insertions(+), 5 deletions(-)

diff --git a/js/app.js b/js/app.js
index b0ac1e38..fdc797e8 100644
--- a/js/app.js
+++ b/js/app.js
@@ -23,6 +23,8 @@ function fakeDecrypt(str) {
 const UNSUPPORTED_BTITH_MESSAGE =
   "This magnet link is missing a compatible BitTorrent v1 info hash.";
 
+const FALLBACK_THUMBNAIL_SRC = "assets/jpg/video-thumbnail-fallback.jpg";
+
 /**
  * Basic validation for BitTorrent magnet URIs.
  *
@@ -107,19 +109,56 @@ class MediaLoader {
                 el.getAttribute("data-fallback-src") ||
                 "";
 
-              const handleError = () => {
+              const applyFallback = () => {
                 if (!fallbackSrc) {
-                  el.removeEventListener("error", handleError);
                   return;
                 }
                 if (el.src !== fallbackSrc) {
                   el.src = fallbackSrc;
                 }
+                el.dataset.thumbnailFailed = "true";
+              };
+
+              const cleanupListeners = () => {
                 el.removeEventListener("error", handleError);
+                el.removeEventListener("load", handleLoad);
+              };
+
+              const handleError = () => {
+                cleanupListeners();
+                applyFallback();
+              };
+
+              const handleLoad = () => {
+                cleanupListeners();
+                if (
+                  (el.naturalWidth === 0 && el.naturalHeight === 0) ||
+                  !el.currentSrc
+                ) {
+                  applyFallback();
+                } else {
+                  delete el.dataset.thumbnailFailed;
+                }
               };
 
               el.addEventListener("error", handleError);
-              el.src = lazySrc;
+              el.addEventListener("load", handleLoad);
+
+              if (fallbackSrc && lazySrc === fallbackSrc) {
+                cleanupListeners();
+                delete el.dataset.thumbnailFailed;
+              } else {
+                el.src = lazySrc;
+
+                if (el.complete) {
+                  // Handle cached results synchronously
+                  if (el.naturalWidth === 0 && el.naturalHeight === 0) {
+                    handleError();
+                  } else {
+                    handleLoad();
+                  }
+                }
+              }
             }
 
             delete el.dataset.lazy;
@@ -142,6 +181,20 @@ class MediaLoader {
         el.getAttribute("data-fallback-src") || el.getAttribute("src") || "";
       if (fallbackAttr) {
         el.dataset.fallbackSrc = fallbackAttr;
+      } else if (el.tagName === "IMG") {
+        el.dataset.fallbackSrc = FALLBACK_THUMBNAIL_SRC;
+        el.setAttribute("data-fallback-src", FALLBACK_THUMBNAIL_SRC);
+      }
+    }
+
+    if (
+      el.tagName === "IMG" &&
+      typeof HTMLImageElement !== "undefined" &&
+      "loading" in HTMLImageElement.prototype
+    ) {
+      el.loading = el.loading || "lazy";
+      if ("decoding" in HTMLImageElement.prototype) {
+        el.decoding = el.decoding || "async";
       }
     }
 
@@ -1521,7 +1574,8 @@ class bitvidApp {
           >
             <div class="ratio-16-9">
               <img
-                src="assets/jpg/video-thumbnail-fallback.jpg"
+                src="${FALLBACK_THUMBNAIL_SRC}"
+                data-fallback-src="${FALLBACK_THUMBNAIL_SRC}"
                 data-lazy="${this.escapeHTML(video.thumbnail)}"
                 alt="${this.escapeHTML(video.title)}"
               />
@@ -2510,7 +2564,11 @@ class bitvidApp {
   }
 
   escapeHTML(unsafe) {
-    return unsafe
+    if (unsafe === null || typeof unsafe === "undefined") {
+      return "";
+    }
+
+    return String(unsafe)
       .replace(/&/g, "&amp;")
       .replace(/</g, "&lt;")
       .replace(/>/g, "&gt;")

From 621465c538b2142833395cfffb18828cef307759 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 14:07:59 -0400
Subject: [PATCH 028/101] Ensure video thumbnails fallback to default image

---
 js/app.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/js/app.js b/js/app.js
index fdc797e8..9e7642c8 100644
--- a/js/app.js
+++ b/js/app.js
@@ -110,12 +110,27 @@ class MediaLoader {
                 "";
 
               const applyFallback = () => {
-                if (!fallbackSrc) {
+                const resolvedFallback =
+                  fallbackSrc && fallbackSrc.trim()
+                    ? fallbackSrc.trim()
+                    : FALLBACK_THUMBNAIL_SRC;
+
+                if (!resolvedFallback) {
                   return;
                 }
-                if (el.src !== fallbackSrc) {
-                  el.src = fallbackSrc;
+
+                if (el.src !== resolvedFallback) {
+                  el.src = resolvedFallback;
                 }
+
+                if (!el.dataset.fallbackSrc) {
+                  el.dataset.fallbackSrc = resolvedFallback;
+                }
+
+                if (!el.getAttribute("data-fallback-src")) {
+                  el.setAttribute("data-fallback-src", resolvedFallback);
+                }
+
                 el.dataset.thumbnailFailed = "true";
               };
 

From 57496969d7f4e129bc998ecb5bcf1e0518218279 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 14:40:08 -0400
Subject: [PATCH 029/101] Clear modal loading poster once playback starts

---
 js/app.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 5 deletions(-)

diff --git a/js/app.js b/js/app.js
index fdc797e8..73bbd686 100644
--- a/js/app.js
+++ b/js/app.js
@@ -24,6 +24,7 @@ const UNSUPPORTED_BTITH_MESSAGE =
   "This magnet link is missing a compatible BitTorrent v1 info hash.";
 
 const FALLBACK_THUMBNAIL_SRC = "assets/jpg/video-thumbnail-fallback.jpg";
+const MODAL_LOADING_POSTER = "assets/gif/please-stand-by.gif";
 
 /**
  * Basic validation for BitTorrent magnet URIs.
@@ -110,12 +111,27 @@ class MediaLoader {
                 "";
 
               const applyFallback = () => {
-                if (!fallbackSrc) {
+                const resolvedFallback =
+                  fallbackSrc && fallbackSrc.trim()
+                    ? fallbackSrc.trim()
+                    : FALLBACK_THUMBNAIL_SRC;
+
+                if (!resolvedFallback) {
                   return;
                 }
-                if (el.src !== fallbackSrc) {
-                  el.src = fallbackSrc;
+
+                if (el.src !== resolvedFallback) {
+                  el.src = resolvedFallback;
                 }
+
+                if (!el.dataset.fallbackSrc) {
+                  el.dataset.fallbackSrc = resolvedFallback;
+                }
+
+                if (!el.getAttribute("data-fallback-src")) {
+                  el.setAttribute("data-fallback-src", resolvedFallback);
+                }
+
                 el.dataset.thumbnailFailed = "true";
               };
 
@@ -263,6 +279,7 @@ class bitvidApp {
     this.creatorNpub = null;
     this.copyMagnetBtn = null;
     this.shareBtn = null;
+    this.modalPosterCleanup = null;
 
     // Hide/Show Subscriptions Link
     this.subscriptionsLink = null;
@@ -562,9 +579,40 @@ class bitvidApp {
       this.playerModal.style.display = "flex";
       this.playerModal.classList.remove("hidden");
     }
-    if (this.modalVideo) {
-      this.modalVideo.poster = "assets/gif/please-stand-by.gif";
+    this.applyModalLoadingPoster();
+  }
+
+  applyModalLoadingPoster() {
+    if (!this.modalVideo) {
+      return;
     }
+
+    if (typeof this.modalPosterCleanup === "function") {
+      this.modalPosterCleanup();
+      this.modalPosterCleanup = null;
+    }
+
+    const videoEl = this.modalVideo;
+
+    const clearPoster = () => {
+      videoEl.removeEventListener("loadeddata", clearPoster);
+      videoEl.removeEventListener("playing", clearPoster);
+      this.modalPosterCleanup = null;
+      videoEl.poster = "";
+      if (videoEl.hasAttribute("poster")) {
+        videoEl.removeAttribute("poster");
+      }
+    };
+
+    videoEl.addEventListener("loadeddata", clearPoster);
+    videoEl.addEventListener("playing", clearPoster);
+
+    videoEl.poster = MODAL_LOADING_POSTER;
+
+    this.modalPosterCleanup = () => {
+      videoEl.removeEventListener("loadeddata", clearPoster);
+      videoEl.removeEventListener("playing", clearPoster);
+    };
   }
 
   /**
@@ -1314,6 +1362,14 @@ class bitvidApp {
       this.playerModal.style.display = "none";
       this.playerModal.classList.add("hidden");
     }
+    if (typeof this.modalPosterCleanup === "function") {
+      this.modalPosterCleanup();
+      this.modalPosterCleanup = null;
+    }
+    if (this.modalVideo) {
+      this.modalVideo.poster = "";
+      this.modalVideo.removeAttribute("poster");
+    }
     this.currentMagnetUri = null;
 
     // 3) Remove only `?v=` but **keep** the hash

From 52ecb76ac94d57d9e7ad47f83ed9090b2329e1cb Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 14:45:08 -0400
Subject: [PATCH 030/101] refactor: centralize tracker constants

---
 js/constants.js             |  7 +++++++
 js/magnetUtils.js           | 10 ++++------
 tests/magnet-utils.test.mjs |  9 +++------
 3 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 js/constants.js

diff --git a/js/constants.js b/js/constants.js
new file mode 100644
index 00000000..8efdc688
--- /dev/null
+++ b/js/constants.js
@@ -0,0 +1,7 @@
+export const URL_FIRST_ENABLED = true;
+export const ACCEPT_LEGACY_V1 = true;
+export const WSS_TRACKERS = [
+  "wss://tracker.openwebtorrent.com",
+  "wss://tracker.btorrent.xyz",
+  "wss://tracker.webtorrent.dev",
+];
diff --git a/js/magnetUtils.js b/js/magnetUtils.js
index 4cbcb737..1bc0b54f 100644
--- a/js/magnetUtils.js
+++ b/js/magnetUtils.js
@@ -1,10 +1,8 @@
 // js/magnetUtils.js
 
-export const DEFAULT_WSS_TRACKERS = [
-  "wss://tracker.openwebtorrent.com",
-  "wss://tracker.btorrent.xyz",
-  "wss://tracker.fastcast.nz",
-];
+import { WSS_TRACKERS } from "./constants.js";
+
+export { WSS_TRACKERS };
 
 const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
 const BTIH_PREFIX = "urn:btih:";
@@ -200,7 +198,7 @@ export function normalizeAndAugmentMagnet(
   );
 
   const trackerCandidates = [
-    ...DEFAULT_WSS_TRACKERS,
+    ...WSS_TRACKERS,
     ...extraTrackers,
   ];
 
diff --git a/tests/magnet-utils.test.mjs b/tests/magnet-utils.test.mjs
index 601ac14e..ac313f47 100644
--- a/tests/magnet-utils.test.mjs
+++ b/tests/magnet-utils.test.mjs
@@ -1,9 +1,6 @@
 import assert from "node:assert/strict";
-import {
-  DEFAULT_WSS_TRACKERS,
-  normalizeAndAugmentMagnet,
-  safeDecodeMagnet,
-} from "../js/magnetUtils.js";
+import { WSS_TRACKERS } from "../js/constants.js";
+import { normalizeAndAugmentMagnet, safeDecodeMagnet } from "../js/magnetUtils.js";
 
 function getParamValues(magnet, key) {
   const parsed = new URL(magnet);
@@ -17,7 +14,7 @@ function getParamValues(magnet, key) {
   const xtValues = getParamValues(result.magnet, "xt");
   assert.deepEqual(xtValues, [`urn:btih:${infoHash}`]);
   const trackerValues = getParamValues(result.magnet, "tr");
-  for (const tracker of DEFAULT_WSS_TRACKERS) {
+  for (const tracker of WSS_TRACKERS) {
     assert.ok(
       trackerValues.includes(tracker),
       `Expected tracker ${tracker} to be appended`

From eb9b50b572fa8921863a20bdabafba3f549587c2 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 14:57:11 -0400
Subject: [PATCH 031/101] fix: ensure modal poster clears when playback starts

---
 js/app.js                   | 80 +++++++++++++++++++++++++++++++++----
 js/constants.js             |  7 ++++
 js/magnetUtils.js           | 10 ++---
 tests/magnet-utils.test.mjs |  9 ++---
 4 files changed, 87 insertions(+), 19 deletions(-)
 create mode 100644 js/constants.js

diff --git a/js/app.js b/js/app.js
index 73bbd686..d765d784 100644
--- a/js/app.js
+++ b/js/app.js
@@ -24,6 +24,11 @@ const UNSUPPORTED_BTITH_MESSAGE =
   "This magnet link is missing a compatible BitTorrent v1 info hash.";
 
 const FALLBACK_THUMBNAIL_SRC = "assets/jpg/video-thumbnail-fallback.jpg";
+// NOTE: The modal uses a "please stand by" animated poster while the torrent
+// or direct URL boots up. We've regressed multiple times by forgetting to clear
+// that poster once playback starts, which leaves the loading GIF covering the
+// video even though audio is playing. Centralising the cleanup logic makes it
+// easier to spot those regressions; see forceRemoveModalPoster() below.
 const MODAL_LOADING_POSTER = "assets/gif/please-stand-by.gif";
 
 /**
@@ -595,13 +600,10 @@ class bitvidApp {
     const videoEl = this.modalVideo;
 
     const clearPoster = () => {
-      videoEl.removeEventListener("loadeddata", clearPoster);
-      videoEl.removeEventListener("playing", clearPoster);
-      this.modalPosterCleanup = null;
-      videoEl.poster = "";
-      if (videoEl.hasAttribute("poster")) {
-        videoEl.removeAttribute("poster");
-      }
+      // Delegate to the shared helper so every code path clears the GIF in the
+      // same way. If we ever change how the poster works we only need to update
+      // forceRemoveModalPoster().
+      this.forceRemoveModalPoster("playback-event");
     };
 
     videoEl.addEventListener("loadeddata", clearPoster);
@@ -615,6 +617,52 @@ class bitvidApp {
     };
   }
 
+  /**
+   * Forcefully strip the modal's loading poster.
+   *
+   * The video modal shows an animated "please stand by" GIF while we wait for a
+   * `loadeddata` or `playing` event. Historically, small refactors would remove
+   * the matching cleanup path which left the GIF covering real playback. By
+   * routing every caller through this helper we can add defensive clears (for
+   * example when WebTorrent reports progress) without duplicating poster logic
+   * all over the file.
+   *
+   * @param {string} reason A debugging hint that documents why the poster was
+   * cleared.
+   * @returns {boolean} `true` if a poster attribute/value was removed.
+   */
+  forceRemoveModalPoster(reason = "manual-clear") {
+    if (!this.modalVideo) {
+      return false;
+    }
+
+    const videoEl = this.modalVideo;
+
+    if (typeof this.modalPosterCleanup === "function") {
+      this.modalPosterCleanup();
+      this.modalPosterCleanup = null;
+    }
+
+    const hadPoster =
+      videoEl.hasAttribute("poster") ||
+      (typeof videoEl.poster === "string" && videoEl.poster !== "");
+
+    if (!hadPoster) {
+      return false;
+    }
+
+    videoEl.poster = "";
+    if (videoEl.hasAttribute("poster")) {
+      videoEl.removeAttribute("poster");
+    }
+
+    console.debug(
+      `[bitvidApp] Cleared modal loading poster (${reason}).`
+    );
+
+    return true;
+  }
+
   /**
    * Initialize the upload modal (upload-modal.html).
    */
@@ -1799,6 +1847,15 @@ class bitvidApp {
       return;
     }
 
+    if (torrent.ready || (typeof torrent.progress === "number" && torrent.progress > 0)) {
+      // Belt-and-suspenders: if WebTorrent reports progress but the DOM events
+      // failed to fire we still rip off the loading GIF. This regression has
+      // bitten us in past releases, so the extra clear is intentional.
+      this.forceRemoveModalPoster(
+        torrent.ready ? "torrent-ready-flag" : "torrent-progress"
+      );
+    }
+
     // Log only fields that actually exist on the torrent:
     console.log("[DEBUG] torrent.progress =", torrent.progress);
     console.log("[DEBUG] torrent.numPeers =", torrent.numPeers);
@@ -2139,6 +2196,9 @@ class bitvidApp {
       if (this.modalStatus) {
         this.modalStatus.textContent = "Streaming from URL";
       }
+      // Defensive clear so the loading GIF never lingers if browsers skip
+      // firing `playing` (some autoplay policies do this).
+      this.forceRemoveModalPoster("http-loadeddata");
     };
 
     this.modalVideo.addEventListener("loadeddata", markUrlReady, {
@@ -2216,6 +2276,12 @@ class bitvidApp {
         cacheBustedMagnet,
         this.modalVideo
       );
+      if (torrentInstance && torrentInstance.ready) {
+        // Some browsers delay `playing` events for MediaSource-backed torrents.
+        // Clearing the poster here prevents the historic "GIF stuck over the
+        // video" regression when WebTorrent is already feeding data.
+        this.forceRemoveModalPoster("webtorrent-ready");
+      }
       this.startTorrentStatusMirrors(torrentInstance);
       return torrentInstance;
     };
diff --git a/js/constants.js b/js/constants.js
new file mode 100644
index 00000000..8efdc688
--- /dev/null
+++ b/js/constants.js
@@ -0,0 +1,7 @@
+export const URL_FIRST_ENABLED = true;
+export const ACCEPT_LEGACY_V1 = true;
+export const WSS_TRACKERS = [
+  "wss://tracker.openwebtorrent.com",
+  "wss://tracker.btorrent.xyz",
+  "wss://tracker.webtorrent.dev",
+];
diff --git a/js/magnetUtils.js b/js/magnetUtils.js
index 4cbcb737..1bc0b54f 100644
--- a/js/magnetUtils.js
+++ b/js/magnetUtils.js
@@ -1,10 +1,8 @@
 // js/magnetUtils.js
 
-export const DEFAULT_WSS_TRACKERS = [
-  "wss://tracker.openwebtorrent.com",
-  "wss://tracker.btorrent.xyz",
-  "wss://tracker.fastcast.nz",
-];
+import { WSS_TRACKERS } from "./constants.js";
+
+export { WSS_TRACKERS };
 
 const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
 const BTIH_PREFIX = "urn:btih:";
@@ -200,7 +198,7 @@ export function normalizeAndAugmentMagnet(
   );
 
   const trackerCandidates = [
-    ...DEFAULT_WSS_TRACKERS,
+    ...WSS_TRACKERS,
     ...extraTrackers,
   ];
 
diff --git a/tests/magnet-utils.test.mjs b/tests/magnet-utils.test.mjs
index 601ac14e..ac313f47 100644
--- a/tests/magnet-utils.test.mjs
+++ b/tests/magnet-utils.test.mjs
@@ -1,9 +1,6 @@
 import assert from "node:assert/strict";
-import {
-  DEFAULT_WSS_TRACKERS,
-  normalizeAndAugmentMagnet,
-  safeDecodeMagnet,
-} from "../js/magnetUtils.js";
+import { WSS_TRACKERS } from "../js/constants.js";
+import { normalizeAndAugmentMagnet, safeDecodeMagnet } from "../js/magnetUtils.js";
 
 function getParamValues(magnet, key) {
   const parsed = new URL(magnet);
@@ -17,7 +14,7 @@ function getParamValues(magnet, key) {
   const xtValues = getParamValues(result.magnet, "xt");
   assert.deepEqual(xtValues, [`urn:btih:${infoHash}`]);
   const trackerValues = getParamValues(result.magnet, "tr");
-  for (const tracker of DEFAULT_WSS_TRACKERS) {
+  for (const tracker of WSS_TRACKERS) {
     assert.ok(
       trackerValues.includes(tracker),
       `Expected tracker ${tracker} to be appended`

From 2150ac0f0b85d540f678ca87eff38ad7b7cc0f64 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 15:04:11 -0400
Subject: [PATCH 032/101] Add hosted URL and torrent hints inputs to upload
 modal

---
 components/upload-modal.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/upload-modal.html b/components/upload-modal.html
index fdf351d4..37fdeb30 100644
--- a/components/upload-modal.html
+++ b/components/upload-modal.html
@@ -73,13 +73,13 @@
             <label
               for="uploadUrl"
               class="block text-sm font-medium text-gray-200"
-              >Hosted Video URL (preferred)</label
+              >Hosted video URL</label
             >
             <input
               type="url"
               id="uploadUrl"
               placeholder="https://cdn.example.com/video.mp4"
-              class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+              class="mt-1 block w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
             />
             <p class="mt-1 text-xs text-gray-400">
               Direct link to your video or stream. Bitvid will play this first before falling back to WebTorrent.
@@ -90,13 +90,13 @@
             <label
               for="uploadMagnet"
               class="block text-sm font-medium text-gray-200"
-              >Magnet Link (optional if URL provided)</label
+              >Magnet link (optional if URL provided)</label
             >
             <input
               type="text"
               id="uploadMagnet"
               placeholder="magnet:?xt=urn:btih:..."
-              class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+              class="mt-1 block w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
             />
             <p class="mt-1 text-xs text-gray-400">
               Include this when you have a torrent source. Bitvid will automatically augment it with any web seeds or metadata you provide.
@@ -108,13 +108,13 @@
               <label
                 for="uploadWs"
                 class="block text-sm font-medium text-gray-200"
-                >Web Seed Base (ws, optional)</label
+                >Web seed base (ws, optional)</label
               >
               <input
                 type="url"
                 id="uploadWs"
                 placeholder="https://cdn.example.com/path/to/"
-                class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="mt-1 block w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
               />
               <p class="mt-1 text-xs text-gray-400">
                 HTTP(S) base path peers can fetch pieces from when falling back to the magnet.
@@ -124,13 +124,13 @@
               <label
                 for="uploadXs"
                 class="block text-sm font-medium text-gray-200"
-                >Torrent Metadata URL (xs, optional)</label
+                >Torrent metadata URL (xs, optional)</label
               >
               <input
                 type="url"
                 id="uploadXs"
                 placeholder="https://cdn.example.com/video.torrent"
-                class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                class="mt-1 block w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
               />
               <p class="mt-1 text-xs text-gray-400">
                 Link to the <code>.torrent</code> file so WebTorrent clients can bootstrap instantly.

From 0d56082c5414808596b8289bd5bf5f3abfca5738 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 15:20:40 -0400
Subject: [PATCH 033/101] docs: document magnet normalization behavior

---
 js/magnetUtils.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/js/magnetUtils.js b/js/magnetUtils.js
index 1bc0b54f..29057dc3 100644
--- a/js/magnetUtils.js
+++ b/js/magnetUtils.js
@@ -81,6 +81,21 @@ export function safeDecodeMagnet(value) {
   return decoded;
 }
 
+/**
+ * Normalize a magnet URI while preserving legacy payload quirks and augmenting it
+ * for browser playback.
+ *
+ * Key behaviors:
+ * - Accepts bare info-hash strings and promotes them to full `magnet:?xt=urn:btih:` links.
+ * - Leaves the existing `xt` payload untouched—no percent re-encoding or normalization
+ *   beyond decoding legacy `%3A` segments.
+ * - Only appends browser-safe WSS trackers in addition to whatever the caller provides.
+ * - Skips insecure `http:` web seeds unless the application itself is running over HTTP.
+ *
+ * Note: `didChange` may be reported even if the resulting magnet string is textually
+ * identical to the input. Callers should not rely on `didChange` to detect a modified
+ * URI.
+ */
 export function normalizeAndAugmentMagnet(
   rawValue,
   {

From b52e767f86b624a7151674bf41025622cf118084 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 15:23:24 -0400
Subject: [PATCH 034/101] Document torrent playback normalization details

---
 js/playbackUtils.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/js/playbackUtils.js b/js/playbackUtils.js
index a670effe..53c4c57b 100644
--- a/js/playbackUtils.js
+++ b/js/playbackUtils.js
@@ -8,6 +8,30 @@ import {
 const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
 const MAGNET_URI = /^magnet:\?/i;
 
+/**
+ * Normalizes torrent related playback inputs into a canonical magnet payload.
+ *
+ * The function first trims and safely decodes the incoming `magnet` string so
+ * that URL encoded magnets become plain text before processing. Bare info hash
+ * strings are tolerated: whenever the caller supplies an info hash (either via
+ * the `infoHash` field or a magnet that looks like one) it gets promoted to a
+ * full magnet URI so downstream WebTorrent code can consume it directly.
+ *
+ * When the normalized output differs from the original magnet input (for
+ * example due to whitespace/encoding fixes or tracker augmentation) the
+ * original candidate is exposed through `fallbackMagnet`. Callers can surface
+ * that value if a later refactor breaks magnet normalization.
+ *
+ * The returned flags communicate provenance: `provided` indicates that some
+ * torrent-related input was supplied, while `usedInfoHash` is only `true` when
+ * the normalized magnet was derived from an info hash instead of an already
+ * well-formed magnet URI.
+ *
+ * Web seeds coming from the `url` parameter are forwarded to
+ * `normalizeAndAugmentMagnet` via the `webSeed` option. Refactors must preserve
+ * that flow (even if the parameter name changes) so hosted URLs continue to
+ * populate `ws=` hints automatically.
+ */
 export function deriveTorrentPlaybackConfig({
   magnet = "",
   infoHash = "",

From 532ce8e2d2a118603bd2661004218335a0cbfc97 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 15:25:27 -0400
Subject: [PATCH 035/101] Document legacy magnet handling in URL parsing

---
 js/videoEventUtils.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/videoEventUtils.js b/js/videoEventUtils.js
index a9ac597c..bfca5107 100644
--- a/js/videoEventUtils.js
+++ b/js/videoEventUtils.js
@@ -191,8 +191,10 @@ export function parseVideoEventPayload(event = {}) {
   if (typeof parsedContent.url === "string") {
     const parsedUrl = parsedContent.url.trim();
     if (parsedUrl && parsedUrl !== thumbnail) {
+      // Keep this guard so we don't duplicate thumbnail URLs in the playable URL list.
       pushUnique(urlCandidates, parsedUrl);
     }
+    // Legacy Bitvid events sometimes embedded magnets/info-hashes in the URL field, so treat it accordingly.
     collectMagnetOrInfoHash(parsedUrl);
   }
 

From 9229f0fe80f9585a0869658b96fb631c81c2a82d Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 15:52:15 -0400
Subject: [PATCH 036/101] Document Chrome CORS pruning workaround

---
 js/webtorrent.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/webtorrent.js b/js/webtorrent.js
index 65b8ea80..a912c834 100644
--- a/js/webtorrent.js
+++ b/js/webtorrent.js
@@ -173,6 +173,8 @@ export class TorrentClient {
 
   // Handle Chrome-based browsers
   handleChromeTorrent(torrent, videoElement, resolve, reject) {
+    // Prune demo web seeds/trackers that chronically trip Chromium CORS and
+    // deliberately mutate `torrent._opts` as a sanctioned WebTorrent workaround.
     torrent.on("warning", (err) => {
       if (err && typeof err.message === "string") {
         if (

From 48a1f24ac992b4ceec1ae61fe42f4dd066ff4dd0 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 15:55:27 -0400
Subject: [PATCH 037/101] Explain post-template data-play attribute assignment

---
 js/app.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/js/app.js b/js/app.js
index d765d784..5ef902c3 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1736,6 +1736,10 @@ class bitvidApp {
           cardEl.dataset.torrentSupported = "true";
         }
         const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
+        // We intentionally leave the data-play-* attributes blank in cardHtml and
+        // assign them after template parsing so the raw URL/magnet strings avoid
+        // HTML entity escaping in the literal markup and keep any sensitive
+        // magnet payloads out of the static DOM text.
         interactiveEls.forEach((el) => {
           if (!el.dataset) return;
           el.dataset.playUrl = playbackUrl || "";

From 8a10a7cfc8a7a8f47ff099aed6a3a008bf8b5889 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 16:05:45 -0400
Subject: [PATCH 038/101] Document intentional post-parsing data-play
 assignments

---
 js/channelProfile.js | 3 +++
 js/subscriptions.js  | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/js/channelProfile.js b/js/channelProfile.js
index 42909fd5..21309171 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -382,6 +382,9 @@ async function loadUserVideos(pubkey) {
         </div>
       `;
 
+      // Leave the data-play-* attributes empty in the template markup so the raw
+      // URL/magnet strings can be assigned after parsing without HTML entity
+      // escaping, keeping this renderer consistent with app.js.
       const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
       interactiveEls.forEach((el) => {
         if (!el.dataset) return;
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 83e581b1..db4fc9a4 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -400,6 +400,9 @@ class SubscriptionsManager {
       t.innerHTML = cardHtml.trim();
       const cardEl = t.content.firstElementChild;
       if (cardEl) {
+        // Leave the data-play-* attributes empty in the literal markup so we can
+        // assign the raw URL/magnet strings post-parsing without HTML entity
+        // escaping, mirroring the approach in app.js.
         const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
         interactiveEls.forEach((el) => {
           if (!el.dataset) return;

From c5f67bc31e6c38b5b361b789e9d55135a34bdf99 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 16:10:22 -0400
Subject: [PATCH 039/101] Document Brave service worker workaround

---
 js/webtorrent.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/js/webtorrent.js b/js/webtorrent.js
index a912c834..da8fa5af 100644
--- a/js/webtorrent.js
+++ b/js/webtorrent.js
@@ -92,7 +92,15 @@ export class TorrentClient {
         throw new Error("Service Worker not supported or disabled");
       }
 
-      // Brave-specific logic
+      // Brave-specific logic: Brave Shields has a long-standing bug where
+      // stale service worker registrations linger even after we ship fixes.
+      // When that happens, the outdated worker keeps intercepting requests
+      // and WebTorrent fails to spin up, leaving playback broken until the
+      // user manually nukes the registration. To guarantee a clean slate we
+      // blanket-unregister every worker, then pause briefly so Brave can
+      // finish tearing down the old instance before we register the fresh
+      // one again. That delay is intentional—future tweaks should not shorten
+      // or remove it without understanding the regression risk.
       if (isBraveBrowser) {
         this.log("Checking Brave configuration...");
         if (!navigator.serviceWorker) {

From c94eb928e12274896c47e2f89ef3a8378d696f68 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 16:12:51 -0400
Subject: [PATCH 040/101] Document autoplay flags in torrent handlers

---
 js/webtorrent.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/webtorrent.js b/js/webtorrent.js
index da8fa5af..7cab729c 100644
--- a/js/webtorrent.js
+++ b/js/webtorrent.js
@@ -213,6 +213,7 @@ export class TorrentClient {
       return reject(new Error("No compatible video file found in torrent"));
     }
 
+    // Satisfy autoplay requirements and keep cross-origin chunks usable (e.g., for snapshots).
     videoElement.muted = true;
     videoElement.crossOrigin = "anonymous";
 
@@ -250,6 +251,7 @@ export class TorrentClient {
       return reject(new Error("No compatible video file found in torrent"));
     }
 
+    // Satisfy autoplay requirements and keep cross-origin chunks usable (e.g., for snapshots).
     videoElement.muted = true;
     videoElement.crossOrigin = "anonymous";
 

From 713cc909c7ae0c6ee5ba9b2a5b8e8b1a0a6d30a8 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 16:22:02 -0400
Subject: [PATCH 041/101] Document probeUrl HEAD and range fallback

---
 js/app.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/js/app.js b/js/app.js
index 5ef902c3..a1fb40ff 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2118,6 +2118,13 @@ class bitvidApp {
     }
   }
 
+  /**
+   * HEAD first avoids downloading bytes when probing, but many hosts reject
+   * HEAD or omit `Accept-Ranges`, so we fall back to a tiny `Range:
+   * bytes=0-1023` GET and only warn when range headers are missing. This
+   * fallback prevents false "unplayable" results and should stay paired with
+   * the HEAD logic unless a new probe keeps both paths in sync.
+   */
   async probeUrl(url) {
     const trimmed = typeof url === "string" ? url.trim() : "";
     if (!trimmed) {

From 2542e9739878b0fcaf5fa8bbd8ad5797f6da0246 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 16:27:51 -0400
Subject: [PATCH 042/101] Document relay readiness probe

---
 js/nostr.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/js/nostr.js b/js/nostr.js
index b13765cd..e043cff3 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -220,6 +220,11 @@ class NostrClient {
     }
   }
 
+  // We subscribe to kind `0` purely as a liveness probe because almost every
+  // relay can answer it quickly. Either an `event` or `eose` signals success,
+  // while the 5s timer guards against relays that never respond. We immediately
+  // `unsub` to avoid leaking subscriptions. Note: any future change must still
+  // provide a lightweight readiness check with similar timeout semantics.
   async connectToRelays() {
     return Promise.all(
       this.relays.map(

From 9342c967baf7f1f8ab3ab765b51eb9440df89d38 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 16:31:50 -0400
Subject: [PATCH 043/101] Explain encrypt-to-self subscriptions

---
 js/subscriptions.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/js/subscriptions.js b/js/subscriptions.js
index db4fc9a4..4b80ebe6 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -125,6 +125,14 @@ class SubscriptionsManager {
     const plainObj = { subPubkeys: Array.from(this.subscribedPubkeys) };
     const plainStr = JSON.stringify(plainObj);
 
+    /*
+     * The subscription list is stored as a NIP-04 message to self, so both
+     * encryption and decryption intentionally use the user's own pubkey.
+     * Extensions are expected to support this encrypt-to-self flow; altering
+     * the target would break loadSubscriptions, which decrypts with the same
+     * pubkey. Any future sharing model (e.g., sharing with another user) will
+     * need a parallel read path and should not overwrite this behavior.
+     */
     let cipherText = "";
     try {
       cipherText = await window.nostr.nip04.encrypt(userPubkey, plainStr);

From 9b11fe720cbb476646ca89d806ab3a0180e1e00f Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 17:08:36 -0400
Subject: [PATCH 044/101] Add magnet normalization helper and update upload
 flow

---
 js/app.js                   | 25 ++++++++----------------
 js/magnet.js                | 19 ++++++++++++++++++
 tests/magnet-utils.test.mjs | 39 +++++++++++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 17 deletions(-)
 create mode 100644 js/magnet.js

diff --git a/js/app.js b/js/app.js
index a1fb40ff..6ebb0f13 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,7 +5,8 @@ import { nostrClient } from "./nostr.js";
 import { torrentClient } from "./webtorrent.js";
 import { isDevMode } from "./config.js";
 import { isWhitelistEnabled } from "./config.js";
-import { normalizeAndAugmentMagnet, safeDecodeMagnet } from "./magnetUtils.js";
+import { safeDecodeMagnet } from "./magnetUtils.js";
+import { normalizeAndAugmentMagnet } from "./magnet.js";
 import { deriveTorrentPlaybackConfig } from "./playbackUtils.js";
 import {
   initialWhitelist,
@@ -1092,7 +1093,6 @@ class bitvidApp {
     const xs = xsEl?.value.trim() || "";
     const thumbnail = thumbEl?.value.trim() || "";
     const description = descEl?.value.trim() || "";
-    const sanitizedHostedUrl = url;
 
     const formData = {
       version: 2,
@@ -1106,26 +1106,17 @@ class bitvidApp {
     };
 
     if (!formData.title || (!formData.url && !formData.magnet)) {
-      this.showError("Please provide a title and at least one of URL or Magnet.");
+      this.showError(
+        "Please add a title plus either a hosted video URL or a magnet link."
+      );
       return;
     }
 
-    const webSeedCandidates = [];
-    if (ws) {
-      webSeedCandidates.push(ws);
-    }
-    if (sanitizedHostedUrl) {
-      webSeedCandidates.push(sanitizedHostedUrl);
-    }
-
-    const magnetAugmentation = normalizeAndAugmentMagnet(formData.magnet, {
-      webSeed: webSeedCandidates,
-      torrentUrl: xs,
-      logger: (message) => this.log(message),
+    formData.magnet = normalizeAndAugmentMagnet(formData.magnet, {
+      ws,
+      xs,
     });
 
-    formData.magnet = magnetAugmentation.magnet;
-
     try {
       await nostrClient.publishVideo(formData, this.pubkey);
 
diff --git a/js/magnet.js b/js/magnet.js
new file mode 100644
index 00000000..2f5934e9
--- /dev/null
+++ b/js/magnet.js
@@ -0,0 +1,19 @@
+import { WSS_TRACKERS } from "./constants.js";
+import { normalizeAndAugmentMagnet as normalizeLegacy } from "./magnetUtils.js";
+
+export function normalizeAndAugmentMagnet(rawValue, { ws = "", xs = "" } = {}) {
+  const trimmedInput = typeof rawValue === "string" ? rawValue.trim() : "";
+  const trimmedWs = typeof ws === "string" ? ws.trim() : "";
+  const trimmedXs = typeof xs === "string" ? xs.trim() : "";
+
+  const webSeeds = trimmedWs ? [trimmedWs] : [];
+
+  const result = normalizeLegacy(trimmedInput, {
+    webSeed: webSeeds,
+    torrentUrl: trimmedXs,
+    xs: trimmedXs,
+    extraTrackers: WSS_TRACKERS,
+  });
+
+  return result.magnet;
+}
diff --git a/tests/magnet-utils.test.mjs b/tests/magnet-utils.test.mjs
index ac313f47..6d0aad55 100644
--- a/tests/magnet-utils.test.mjs
+++ b/tests/magnet-utils.test.mjs
@@ -1,6 +1,7 @@
 import assert from "node:assert/strict";
 import { WSS_TRACKERS } from "../js/constants.js";
 import { normalizeAndAugmentMagnet, safeDecodeMagnet } from "../js/magnetUtils.js";
+import { normalizeAndAugmentMagnet as formNormalize } from "../js/magnet.js";
 
 function getParamValues(magnet, key) {
   const parsed = new URL(magnet);
@@ -111,4 +112,42 @@ function getParamValues(magnet, key) {
   );
 })();
 
+(function testFormHelperAugmentsWsXsAndDecodesXt() {
+  const infoHash = "abcdef0123456789abcdef0123456789abcdef01";
+  const encodedMagnet = `magnet:?xt=urn%3Abtih%3A${infoHash}`;
+  const normalized = formNormalize(encodedMagnet, {
+    ws: "https://cdn.example.com/video-base/",
+    xs: "https://cdn.example.com/video.torrent",
+  });
+  const parsed = new URL(normalized);
+  assert.equal(
+    parsed.searchParams.get("xt"),
+    `urn:btih:${infoHash}`,
+    "Form helper should decode encoded xt payloads"
+  );
+  assert.deepEqual(
+    parsed.searchParams.getAll("ws"),
+    ["https://cdn.example.com/video-base/"],
+    "Expected ws hint to be appended"
+  );
+  assert.deepEqual(
+    parsed.searchParams.getAll("xs"),
+    ["https://cdn.example.com/video.torrent"],
+    "Expected xs hint to be appended"
+  );
+})();
+
+(function testFormHelperSkipsInsecureWsOnHttpsOrigin() {
+  const infoHash = "0123456789abcdef0123456789abcdef01234567";
+  const normalized = formNormalize(`magnet:?xt=urn:btih:${infoHash}`, {
+    ws: "http://cdn.example.com/video-base/",
+  });
+  const parsed = new URL(normalized);
+  assert.equal(
+    parsed.searchParams.getAll("ws").length,
+    0,
+    "HTTP ws value should be skipped on HTTPS origins"
+  );
+})();
+
 console.log("magnet-utils tests passed");

From 96e1679618ed5ffca2ce7c529a7357177282ab37 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 17:23:41 -0400
Subject: [PATCH 045/101] update

---
 AGENTS.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/AGENTS.md b/AGENTS.md
index aebda66c..6e791b76 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -2,6 +2,8 @@
 
 This document tells AI agents how Bitvid works **now** and how to extend it going forward. It focuses on the newly adopted **URL‑first playback with WebTorrent fallback** strategy, minimal code touchpoints, and reliable interop with the Nostr ecosystem.
 
+As you work in the repo, please add detailed comments to help others understand what and why your code is doing. 
+
 ---
 
 ## 1) Mission & Product Direction

From 4456719bc9e046d563db6f0587faa8153cb20928 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 17:30:58 -0400
Subject: [PATCH 046/101] Handle legacy magnets in shared converter

---
 js/channelProfile.js  |  90 ++-------------------
 js/nostr.js           | 179 +++++++++++++++++++++++++++++++-----------
 js/subscriptions.js   |  89 +--------------------
 js/videoEventUtils.js |   2 +-
 4 files changed, 144 insertions(+), 216 deletions(-)

diff --git a/js/channelProfile.js b/js/channelProfile.js
index 21309171..60d5df9b 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -1,15 +1,13 @@
 // js/channelProfile.js
 
-import { nostrClient } from "./nostr.js";
+import {
+  nostrClient,
+  convertEventToVideo as sharedConvertEventToVideo,
+} from "./nostr.js";
 import { app } from "./app.js";
 import { subscriptions } from "./subscriptions.js"; // <-- NEW import
 import { initialBlacklist, initialWhitelist } from "./lists.js";
 import { isWhitelistEnabled } from "./config.js";
-import {
-  deriveTitleFromEvent,
-  parseVideoEventPayload,
-  findLegacyMagnetInEvent,
-} from "./videoEventUtils.js";
 
 /**
  * Initialize the channel profile view.
@@ -204,7 +202,7 @@ async function loadUserVideos(pubkey) {
     // 3) Convert to "video" objects
     let videos = [];
     for (const evt of events) {
-      const vid = localConvertEventToVideo(evt);
+      const vid = sharedConvertEventToVideo(evt);
       if (!vid.invalid && !vid.deleted) {
         videos.push(vid);
       }
@@ -479,84 +477,6 @@ function dedupeToNewestByRoot(videos) {
   return Array.from(map.values());
 }
 
-/**
- * Convert raw event => "video" object.
- */
-function localConvertEventToVideo(event) {
-  const {
-    parsedContent,
-    parseError,
-    title,
-    url,
-    magnet,
-    infoHash,
-    version,
-  } = parseVideoEventPayload(event);
-
-  const trimmedUrl = typeof url === "string" ? url.trim() : "";
-  const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
-  const legacyMagnet = findLegacyMagnetInEvent(event);
-  const trimmedLegacyMagnet =
-    typeof legacyMagnet === "string" ? legacyMagnet.trim() : "";
-  const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
-  const playbackMagnet =
-    trimmedMagnet || trimmedLegacyMagnet || trimmedInfoHash;
-  const parsedVersion =
-    typeof version === "number"
-      ? version
-      : typeof version === "string"
-        ? Number.parseInt(version, 10)
-        : Number.NaN;
-  const numericVersion = Number.isFinite(parsedVersion)
-    ? parsedVersion
-    : 0;
-
-  const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
-  if (!hasPlayableSource) {
-    return { id: event.id, invalid: true, reason: "missing playable source" };
-  }
-
-  const derivedTitle = deriveTitleFromEvent({
-    parsedContent,
-    tags: event.tags,
-    primaryTitle: title,
-  });
-
-  let resolvedTitle = derivedTitle;
-  if (!resolvedTitle && numericVersion < 2 && playbackMagnet) {
-    resolvedTitle = trimmedInfoHash
-      ? `Legacy Video ${trimmedInfoHash.slice(0, 8)}`
-      : "Legacy BitTorrent Video";
-  }
-
-  if (!resolvedTitle) {
-    const reason = parseError
-      ? "missing title (json parse error)"
-      : "missing title";
-    return { id: event.id, invalid: true, reason };
-  }
-
-  return {
-    id: event.id,
-    videoRootId: parsedContent.videoRootId || event.id,
-    version: numericVersion,
-    isPrivate: parsedContent.isPrivate ?? false,
-    title: resolvedTitle,
-    url: trimmedUrl,
-    magnet: playbackMagnet,
-    rawMagnet: trimmedMagnet || trimmedLegacyMagnet,
-    infoHash: trimmedInfoHash,
-    thumbnail: parsedContent.thumbnail ?? "",
-    description: parsedContent.description ?? "",
-    mode: parsedContent.mode ?? "live",
-    deleted: parsedContent.deleted === true,
-    pubkey: event.pubkey,
-    created_at: event.created_at,
-    tags: event.tags,
-    invalid: false,
-  };
-}
-
 /**
  * Basic escaping to avoid XSS.
  */
diff --git a/js/nostr.js b/js/nostr.js
index e043cff3..0c378315 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -1,12 +1,9 @@
 // js/nostr.js
 
 import { isDevMode } from "./config.js";
+import { ACCEPT_LEGACY_V1 } from "./constants.js";
 import { accessControl } from "./accessControl.js";
-import {
-  deriveTitleFromEvent,
-  parseVideoEventPayload,
-  findLegacyMagnetInEvent,
-} from "./videoEventUtils.js";
+import { deriveTitleFromEvent, magnetFromText } from "./videoEventUtils.js";
 
 /**
  * The usual relays
@@ -91,33 +88,80 @@ function inferMimeTypeFromUrl(url) {
 }
 
 /**
- * Convert a raw Nostr event => your "video" object.
- * Accepts legacy (<2) payloads when they expose a usable magnet/info hash.
+ * Convert a raw Nostr event => Bitvid's "video" object.
+ * Accepts legacy (<v2) payloads when ACCEPT_LEGACY_V1 allows it and either a
+ * hosted URL or a recoverable magnet is present.
  */
-function convertEventToVideo(event) {
-  const {
-    parsedContent,
-    parseError,
-    title,
-    url,
-    magnet,
-    infoHash,
-    version,
-  } = parseVideoEventPayload(event);
+function convertEventToVideo(event = {}) {
+  const safeTrim = (value) => (typeof value === "string" ? value.trim() : "");
+  const parseInteger = (value) => {
+    if (typeof value === "number" && Number.isFinite(value)) {
+      return value;
+    }
+    if (typeof value === "string") {
+      const parsed = Number.parseInt(value, 10);
+      if (Number.isFinite(parsed)) {
+        return parsed;
+      }
+    }
+    return 0;
+  };
 
-  const trimmedUrl = typeof url === "string" ? url.trim() : "";
-  const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
-  const legacyMagnet = findLegacyMagnetInEvent(event);
-  const trimmedLegacyMagnet =
-    typeof legacyMagnet === "string" ? legacyMagnet.trim() : "";
-  const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
-  const playbackMagnet =
-    trimmedMagnet || trimmedLegacyMagnet || trimmedInfoHash;
+  const rawContent = safeTrim(event.content);
+  let parsedContent = {};
+  let parseError = null;
+  if (rawContent) {
+    try {
+      const parsed = JSON.parse(rawContent);
+      if (parsed && typeof parsed === "object") {
+        parsedContent = parsed;
+      }
+    } catch (err) {
+      parseError = err;
+      parsedContent = {};
+    }
+  }
 
-  const numericVersion = Number.isFinite(version) ? version : 0;
-  const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
+  const declaredTitle = safeTrim(parsedContent.title);
+  const declaredUrl = safeTrim(parsedContent.url);
+  const declaredMagnet = safeTrim(parsedContent.magnet);
 
-  if (!hasPlayableSource) {
+  const tags = Array.isArray(event.tags) ? event.tags : [];
+
+  let recoveredMagnet = "";
+  if (!declaredMagnet && ACCEPT_LEGACY_V1) {
+    recoveredMagnet = safeTrim(magnetFromText(rawContent));
+    if (!recoveredMagnet) {
+      for (const tag of tags) {
+        if (!Array.isArray(tag) || tag.length < 2) {
+          continue;
+        }
+        const key = safeTrim(tag[0]).toLowerCase();
+        if (key === "magnet" && typeof tag[1] === "string") {
+          const candidate = safeTrim(tag[1]);
+          if (candidate) {
+            recoveredMagnet = candidate;
+            break;
+          }
+        }
+        for (let i = 1; i < tag.length && !recoveredMagnet; i += 1) {
+          const candidate = safeTrim(magnetFromText(tag[i]));
+          if (candidate) {
+            recoveredMagnet = candidate;
+            break;
+          }
+        }
+        if (recoveredMagnet) {
+          break;
+        }
+      }
+    }
+  }
+
+  const magnet = declaredMagnet || recoveredMagnet;
+  const url = declaredUrl;
+
+  if (!url && !magnet) {
     return {
       id: event.id,
       invalid: true,
@@ -125,16 +169,59 @@ function convertEventToVideo(event) {
     };
   }
 
+  const resolveInfoHash = () => {
+    const declaredHash = safeTrim(parsedContent.infoHash);
+    if (declaredHash) {
+      return declaredHash.toLowerCase();
+    }
+    const sourceMagnet = magnet || safeTrim(magnetFromText(rawContent));
+    if (sourceMagnet) {
+      const match = sourceMagnet.match(/xt=urn:btih:([0-9a-z]+)/i);
+      if (match && match[1]) {
+        return match[1].toLowerCase();
+      }
+    }
+    if (ACCEPT_LEGACY_V1) {
+      const hexMatch = rawContent.match(/\b[0-9a-f]{40}\b/i);
+      if (hexMatch && hexMatch[0]) {
+        return hexMatch[0].toLowerCase();
+      }
+      for (const tag of tags) {
+        if (!Array.isArray(tag)) {
+          continue;
+        }
+        for (const value of tag) {
+          if (typeof value !== "string") {
+            continue;
+          }
+          const match = value.match(/\b[0-9a-f]{40}\b/i);
+          if (match && match[0]) {
+            return match[0].toLowerCase();
+          }
+        }
+      }
+    }
+    return "";
+  };
+
+  const infoHash = resolveInfoHash();
+  const version = parseInteger(parsedContent.version);
+
   const derivedTitle = deriveTitleFromEvent({
     parsedContent,
-    tags: event.tags,
-    primaryTitle: title,
+    tags,
+    primaryTitle: declaredTitle,
   });
 
   let resolvedTitle = derivedTitle;
-  if (!resolvedTitle && numericVersion < 2 && playbackMagnet) {
-    resolvedTitle = trimmedInfoHash
-      ? `Legacy Video ${trimmedInfoHash.slice(0, 8)}`
+  if (
+    !resolvedTitle &&
+    ACCEPT_LEGACY_V1 &&
+    version < 2 &&
+    (magnet || infoHash)
+  ) {
+    resolvedTitle = infoHash
+      ? `Legacy Video ${infoHash.slice(0, 8)}`
       : "Legacy BitTorrent Video";
   }
 
@@ -145,23 +232,25 @@ function convertEventToVideo(event) {
     return { id: event.id, invalid: true, reason };
   }
 
+  const normalizeOptional = (value) => safeTrim(value) || "";
+
   return {
     id: event.id,
-    videoRootId: parsedContent.videoRootId || event.id,
-    version: numericVersion,
+    videoRootId: safeTrim(parsedContent.videoRootId) || event.id,
+    version,
     isPrivate: parsedContent.isPrivate ?? false,
     title: resolvedTitle,
-    url: trimmedUrl,
-    magnet: playbackMagnet,
-    rawMagnet: trimmedMagnet || trimmedLegacyMagnet,
-    infoHash: trimmedInfoHash,
-    thumbnail: parsedContent.thumbnail ?? "",
-    description: parsedContent.description ?? "",
-    mode: parsedContent.mode ?? "live",
+    url,
+    magnet,
+    rawMagnet: declaredMagnet || recoveredMagnet,
+    infoHash,
+    thumbnail: normalizeOptional(parsedContent.thumbnail),
+    description: normalizeOptional(parsedContent.description),
+    mode: safeTrim(parsedContent.mode) || "live",
     deleted: parsedContent.deleted === true,
     pubkey: event.pubkey,
     created_at: event.created_at,
-    tags: event.tags,
+    tags,
     invalid: false,
   };
 }
@@ -332,14 +421,14 @@ class NostrClient {
     const contentObject = {
       videoRootId,
       version: 2, // forcibly set version=2
-      deleted: false,
-      isPrivate: videoData.isPrivate ?? false,
       title: finalTitle,
       url: finalUrl,
       magnet: finalMagnet,
       thumbnail: finalThumbnail,
       description: finalDescription,
       mode: videoData.mode || "live",
+      deleted: false,
+      isPrivate: videoData.isPrivate ?? false,
     };
 
     const event = {
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 4b80ebe6..fff42045 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -1,10 +1,8 @@
 // js/subscriptions.js
-import { nostrClient } from "./nostr.js";
 import {
-  deriveTitleFromEvent,
-  parseVideoEventPayload,
-  findLegacyMagnetInEvent,
-} from "./videoEventUtils.js";
+  nostrClient,
+  convertEventToVideo as sharedConvertEventToVideo,
+} from "./nostr.js";
 
 /**
  * Manages the user's subscription list (kind=30002) *privately*,
@@ -521,86 +519,7 @@ class SubscriptionsManager {
   }
 
   convertEventToVideo(evt) {
-    const {
-      parsedContent,
-      parseError,
-      title,
-      url,
-      magnet,
-      infoHash,
-      version,
-    } = parseVideoEventPayload(evt);
-
-    const trimmedUrl = typeof url === "string" ? url.trim() : "";
-    const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
-    const legacyMagnet = findLegacyMagnetInEvent(evt);
-    const trimmedLegacyMagnet =
-      typeof legacyMagnet === "string" ? legacyMagnet.trim() : "";
-    const trimmedInfoHash =
-      typeof infoHash === "string" ? infoHash.trim() : "";
-    const playbackMagnet =
-      trimmedMagnet || trimmedLegacyMagnet || trimmedInfoHash;
-    const parsedVersion =
-      typeof version === "number"
-        ? version
-        : typeof version === "string"
-          ? Number.parseInt(version, 10)
-          : Number.NaN;
-    const numericVersion = Number.isFinite(parsedVersion)
-      ? parsedVersion
-      : 0;
-
-    const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
-    if (!hasPlayableSource) {
-      return {
-        id: evt.id,
-        invalid: true,
-        reason: "missing playable source",
-      };
-    }
-
-    const derivedTitle = deriveTitleFromEvent({
-      parsedContent,
-      tags: evt.tags,
-      primaryTitle: title,
-    });
-
-    let resolvedTitle = derivedTitle;
-    if (!resolvedTitle && numericVersion < 2 && playbackMagnet) {
-      resolvedTitle = trimmedInfoHash
-        ? `Legacy Video ${trimmedInfoHash.slice(0, 8)}`
-        : "Legacy BitTorrent Video";
-    }
-
-    if (!resolvedTitle) {
-      return {
-        id: evt.id,
-        invalid: true,
-        reason: parseError
-          ? "missing title (json parse error)"
-          : "missing title",
-      };
-    }
-
-    return {
-      id: evt.id,
-      pubkey: evt.pubkey,
-      created_at: evt.created_at,
-      videoRootId: parsedContent.videoRootId || evt.id,
-      version: numericVersion,
-      deleted: parsedContent.deleted === true,
-      isPrivate: parsedContent.isPrivate ?? false,
-      title: resolvedTitle,
-      url: trimmedUrl,
-      magnet: playbackMagnet,
-      rawMagnet: trimmedMagnet || trimmedLegacyMagnet,
-      infoHash: trimmedInfoHash,
-      thumbnail: parsedContent.thumbnail ?? "",
-      description: parsedContent.description ?? "",
-      mode: parsedContent.mode ?? "live",
-      tags: evt.tags || [],
-      invalid: false,
-    };
+    return sharedConvertEventToVideo(evt);
   }
 
   dedupeToNewestByRoot(videos) {
diff --git a/js/videoEventUtils.js b/js/videoEventUtils.js
index bfca5107..acf48f63 100644
--- a/js/videoEventUtils.js
+++ b/js/videoEventUtils.js
@@ -255,7 +255,7 @@ export function parseVideoEventPayload(event = {}) {
   };
 }
 
-function magnetFromText(value) {
+export function magnetFromText(value) {
   if (typeof value !== "string") {
     return "";
   }

From 940d9e66f717675443e4fba6903c1ab9a2e8de5a Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 19:57:29 -0400
Subject: [PATCH 047/101] Restore legacy magnet playback in converter

---
 js/channelProfile.js           |  90 ++---------------------
 js/nostr.js                    | 128 +++++++++++++++++++++++----------
 js/subscriptions.js            |  89 ++---------------------
 js/videoEventUtils.js          |   2 +-
 tests/legacy-infohash.test.mjs |  18 +++++
 5 files changed, 120 insertions(+), 207 deletions(-)

diff --git a/js/channelProfile.js b/js/channelProfile.js
index 21309171..60d5df9b 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -1,15 +1,13 @@
 // js/channelProfile.js
 
-import { nostrClient } from "./nostr.js";
+import {
+  nostrClient,
+  convertEventToVideo as sharedConvertEventToVideo,
+} from "./nostr.js";
 import { app } from "./app.js";
 import { subscriptions } from "./subscriptions.js"; // <-- NEW import
 import { initialBlacklist, initialWhitelist } from "./lists.js";
 import { isWhitelistEnabled } from "./config.js";
-import {
-  deriveTitleFromEvent,
-  parseVideoEventPayload,
-  findLegacyMagnetInEvent,
-} from "./videoEventUtils.js";
 
 /**
  * Initialize the channel profile view.
@@ -204,7 +202,7 @@ async function loadUserVideos(pubkey) {
     // 3) Convert to "video" objects
     let videos = [];
     for (const evt of events) {
-      const vid = localConvertEventToVideo(evt);
+      const vid = sharedConvertEventToVideo(evt);
       if (!vid.invalid && !vid.deleted) {
         videos.push(vid);
       }
@@ -479,84 +477,6 @@ function dedupeToNewestByRoot(videos) {
   return Array.from(map.values());
 }
 
-/**
- * Convert raw event => "video" object.
- */
-function localConvertEventToVideo(event) {
-  const {
-    parsedContent,
-    parseError,
-    title,
-    url,
-    magnet,
-    infoHash,
-    version,
-  } = parseVideoEventPayload(event);
-
-  const trimmedUrl = typeof url === "string" ? url.trim() : "";
-  const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
-  const legacyMagnet = findLegacyMagnetInEvent(event);
-  const trimmedLegacyMagnet =
-    typeof legacyMagnet === "string" ? legacyMagnet.trim() : "";
-  const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
-  const playbackMagnet =
-    trimmedMagnet || trimmedLegacyMagnet || trimmedInfoHash;
-  const parsedVersion =
-    typeof version === "number"
-      ? version
-      : typeof version === "string"
-        ? Number.parseInt(version, 10)
-        : Number.NaN;
-  const numericVersion = Number.isFinite(parsedVersion)
-    ? parsedVersion
-    : 0;
-
-  const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
-  if (!hasPlayableSource) {
-    return { id: event.id, invalid: true, reason: "missing playable source" };
-  }
-
-  const derivedTitle = deriveTitleFromEvent({
-    parsedContent,
-    tags: event.tags,
-    primaryTitle: title,
-  });
-
-  let resolvedTitle = derivedTitle;
-  if (!resolvedTitle && numericVersion < 2 && playbackMagnet) {
-    resolvedTitle = trimmedInfoHash
-      ? `Legacy Video ${trimmedInfoHash.slice(0, 8)}`
-      : "Legacy BitTorrent Video";
-  }
-
-  if (!resolvedTitle) {
-    const reason = parseError
-      ? "missing title (json parse error)"
-      : "missing title";
-    return { id: event.id, invalid: true, reason };
-  }
-
-  return {
-    id: event.id,
-    videoRootId: parsedContent.videoRootId || event.id,
-    version: numericVersion,
-    isPrivate: parsedContent.isPrivate ?? false,
-    title: resolvedTitle,
-    url: trimmedUrl,
-    magnet: playbackMagnet,
-    rawMagnet: trimmedMagnet || trimmedLegacyMagnet,
-    infoHash: trimmedInfoHash,
-    thumbnail: parsedContent.thumbnail ?? "",
-    description: parsedContent.description ?? "",
-    mode: parsedContent.mode ?? "live",
-    deleted: parsedContent.deleted === true,
-    pubkey: event.pubkey,
-    created_at: event.created_at,
-    tags: event.tags,
-    invalid: false,
-  };
-}
-
 /**
  * Basic escaping to avoid XSS.
  */
diff --git a/js/nostr.js b/js/nostr.js
index e043cff3..75d557f3 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -1,11 +1,12 @@
 // js/nostr.js
 
 import { isDevMode } from "./config.js";
+import { ACCEPT_LEGACY_V1 } from "./constants.js";
 import { accessControl } from "./accessControl.js";
 import {
   deriveTitleFromEvent,
+  magnetFromText,
   parseVideoEventPayload,
-  findLegacyMagnetInEvent,
 } from "./videoEventUtils.js";
 
 /**
@@ -91,32 +92,82 @@ function inferMimeTypeFromUrl(url) {
 }
 
 /**
- * Convert a raw Nostr event => your "video" object.
- * Accepts legacy (<2) payloads when they expose a usable magnet/info hash.
+ * Convert a raw Nostr event into Bitvid's canonical "video" object.
+ *
+ * The converter intentionally centralises all of the quirky legacy handling so
+ * that feed rendering, subscriptions, and deep links rely on the exact same
+ * rules. Any future regression around magnet-only posts or malformed JSON
+ * should be solved by updating this function (and its tests) instead of
+ * sprinkling ad-hoc checks elsewhere in the UI.
  */
-function convertEventToVideo(event) {
+function convertEventToVideo(event = {}) {
+  const tags = Array.isArray(event.tags) ? event.tags : [];
+
   const {
     parsedContent,
     parseError,
-    title,
-    url,
-    magnet,
+    title: declaredTitle,
+    url: parsedUrl,
+    magnet: parsedMagnet,
     infoHash,
     version,
   } = parseVideoEventPayload(event);
 
-  const trimmedUrl = typeof url === "string" ? url.trim() : "";
-  const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
-  const legacyMagnet = findLegacyMagnetInEvent(event);
-  const trimmedLegacyMagnet =
-    typeof legacyMagnet === "string" ? legacyMagnet.trim() : "";
-  const trimmedInfoHash = typeof infoHash === "string" ? infoHash.trim() : "";
-  const playbackMagnet =
-    trimmedMagnet || trimmedLegacyMagnet || trimmedInfoHash;
+  const safeTrim = (value) => (typeof value === "string" ? value.trim() : "");
+  const normalizeOptional = (value) => safeTrim(value) || "";
 
   const numericVersion = Number.isFinite(version) ? version : 0;
-  const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
+  const normalizedUrl = safeTrim(parsedUrl);
+  const directMagnet = safeTrim(parsedMagnet);
+  const normalizedInfoHash = safeTrim(infoHash).toLowerCase();
 
+  // Legacy Bitvid posts (version < 2) sometimes stored the magnet in free-form
+  // JSON strings or tags. We keep that scavenging behind ACCEPT_LEGACY_V1 so it
+  // can be disabled globally without touching each call-site.
+  let legacyMagnet = "";
+  if (!directMagnet && ACCEPT_LEGACY_V1) {
+    const fromContent = magnetFromText(event.content);
+    if (fromContent) {
+      legacyMagnet = safeTrim(fromContent);
+    }
+
+    if (!legacyMagnet) {
+      for (const tag of tags) {
+        if (!Array.isArray(tag)) {
+          continue;
+        }
+
+        // Specified magnet tags always win.
+        if (safeTrim(tag[0]).toLowerCase() === "magnet" && tag[1]) {
+          const tagValue = magnetFromText(tag[1]) || tag[1];
+          const trimmed = safeTrim(tagValue);
+          if (trimmed) {
+            legacyMagnet = trimmed;
+            break;
+          }
+        }
+
+        // Fall back to scanning the remaining tag values for inline magnets.
+        for (let i = 1; i < tag.length && !legacyMagnet; i += 1) {
+          const candidate = magnetFromText(tag[i]);
+          if (candidate) {
+            legacyMagnet = safeTrim(candidate);
+          }
+        }
+
+        if (legacyMagnet) {
+          break;
+        }
+      }
+    }
+  }
+
+  const magnetCandidate = directMagnet || legacyMagnet;
+  const magnetForPlayback = magnetCandidate
+    || (ACCEPT_LEGACY_V1 ? normalizedInfoHash : "");
+
+  const hasPlayableSource = Boolean(normalizedUrl)
+    || Boolean(magnetForPlayback);
   if (!hasPlayableSource) {
     return {
       id: event.id,
@@ -125,20 +176,25 @@ function convertEventToVideo(event) {
     };
   }
 
-  const derivedTitle = deriveTitleFromEvent({
+  const resolvedTitle = deriveTitleFromEvent({
     parsedContent,
-    tags: event.tags,
-    primaryTitle: title,
+    tags,
+    primaryTitle: declaredTitle,
   });
 
-  let resolvedTitle = derivedTitle;
-  if (!resolvedTitle && numericVersion < 2 && playbackMagnet) {
-    resolvedTitle = trimmedInfoHash
-      ? `Legacy Video ${trimmedInfoHash.slice(0, 8)}`
+  let finalTitle = resolvedTitle;
+  if (
+    !finalTitle &&
+    ACCEPT_LEGACY_V1 &&
+    numericVersion < 2 &&
+    magnetForPlayback
+  ) {
+    finalTitle = normalizedInfoHash
+      ? `Legacy Video ${normalizedInfoHash.slice(0, 8)}`
       : "Legacy BitTorrent Video";
   }
 
-  if (!resolvedTitle) {
+  if (!finalTitle) {
     const reason = parseError
       ? "missing title (json parse error)"
       : "missing title";
@@ -147,21 +203,21 @@ function convertEventToVideo(event) {
 
   return {
     id: event.id,
-    videoRootId: parsedContent.videoRootId || event.id,
+    videoRootId: normalizeOptional(parsedContent.videoRootId) || event.id,
     version: numericVersion,
     isPrivate: parsedContent.isPrivate ?? false,
-    title: resolvedTitle,
-    url: trimmedUrl,
-    magnet: playbackMagnet,
-    rawMagnet: trimmedMagnet || trimmedLegacyMagnet,
-    infoHash: trimmedInfoHash,
-    thumbnail: parsedContent.thumbnail ?? "",
-    description: parsedContent.description ?? "",
-    mode: parsedContent.mode ?? "live",
+    title: finalTitle,
+    url: normalizedUrl,
+    magnet: magnetForPlayback,
+    rawMagnet: directMagnet || (ACCEPT_LEGACY_V1 ? legacyMagnet : ""),
+    infoHash: normalizedInfoHash,
+    thumbnail: normalizeOptional(parsedContent.thumbnail),
+    description: normalizeOptional(parsedContent.description),
+    mode: normalizeOptional(parsedContent.mode) || "live",
     deleted: parsedContent.deleted === true,
     pubkey: event.pubkey,
     created_at: event.created_at,
-    tags: event.tags,
+    tags,
     invalid: false,
   };
 }
@@ -332,14 +388,14 @@ class NostrClient {
     const contentObject = {
       videoRootId,
       version: 2, // forcibly set version=2
-      deleted: false,
-      isPrivate: videoData.isPrivate ?? false,
       title: finalTitle,
       url: finalUrl,
       magnet: finalMagnet,
       thumbnail: finalThumbnail,
       description: finalDescription,
       mode: videoData.mode || "live",
+      deleted: false,
+      isPrivate: videoData.isPrivate ?? false,
     };
 
     const event = {
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 4b80ebe6..fff42045 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -1,10 +1,8 @@
 // js/subscriptions.js
-import { nostrClient } from "./nostr.js";
 import {
-  deriveTitleFromEvent,
-  parseVideoEventPayload,
-  findLegacyMagnetInEvent,
-} from "./videoEventUtils.js";
+  nostrClient,
+  convertEventToVideo as sharedConvertEventToVideo,
+} from "./nostr.js";
 
 /**
  * Manages the user's subscription list (kind=30002) *privately*,
@@ -521,86 +519,7 @@ class SubscriptionsManager {
   }
 
   convertEventToVideo(evt) {
-    const {
-      parsedContent,
-      parseError,
-      title,
-      url,
-      magnet,
-      infoHash,
-      version,
-    } = parseVideoEventPayload(evt);
-
-    const trimmedUrl = typeof url === "string" ? url.trim() : "";
-    const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
-    const legacyMagnet = findLegacyMagnetInEvent(evt);
-    const trimmedLegacyMagnet =
-      typeof legacyMagnet === "string" ? legacyMagnet.trim() : "";
-    const trimmedInfoHash =
-      typeof infoHash === "string" ? infoHash.trim() : "";
-    const playbackMagnet =
-      trimmedMagnet || trimmedLegacyMagnet || trimmedInfoHash;
-    const parsedVersion =
-      typeof version === "number"
-        ? version
-        : typeof version === "string"
-          ? Number.parseInt(version, 10)
-          : Number.NaN;
-    const numericVersion = Number.isFinite(parsedVersion)
-      ? parsedVersion
-      : 0;
-
-    const hasPlayableSource = Boolean(trimmedUrl) || Boolean(playbackMagnet);
-    if (!hasPlayableSource) {
-      return {
-        id: evt.id,
-        invalid: true,
-        reason: "missing playable source",
-      };
-    }
-
-    const derivedTitle = deriveTitleFromEvent({
-      parsedContent,
-      tags: evt.tags,
-      primaryTitle: title,
-    });
-
-    let resolvedTitle = derivedTitle;
-    if (!resolvedTitle && numericVersion < 2 && playbackMagnet) {
-      resolvedTitle = trimmedInfoHash
-        ? `Legacy Video ${trimmedInfoHash.slice(0, 8)}`
-        : "Legacy BitTorrent Video";
-    }
-
-    if (!resolvedTitle) {
-      return {
-        id: evt.id,
-        invalid: true,
-        reason: parseError
-          ? "missing title (json parse error)"
-          : "missing title",
-      };
-    }
-
-    return {
-      id: evt.id,
-      pubkey: evt.pubkey,
-      created_at: evt.created_at,
-      videoRootId: parsedContent.videoRootId || evt.id,
-      version: numericVersion,
-      deleted: parsedContent.deleted === true,
-      isPrivate: parsedContent.isPrivate ?? false,
-      title: resolvedTitle,
-      url: trimmedUrl,
-      magnet: playbackMagnet,
-      rawMagnet: trimmedMagnet || trimmedLegacyMagnet,
-      infoHash: trimmedInfoHash,
-      thumbnail: parsedContent.thumbnail ?? "",
-      description: parsedContent.description ?? "",
-      mode: parsedContent.mode ?? "live",
-      tags: evt.tags || [],
-      invalid: false,
-    };
+    return sharedConvertEventToVideo(evt);
   }
 
   dedupeToNewestByRoot(videos) {
diff --git a/js/videoEventUtils.js b/js/videoEventUtils.js
index bfca5107..acf48f63 100644
--- a/js/videoEventUtils.js
+++ b/js/videoEventUtils.js
@@ -255,7 +255,7 @@ export function parseVideoEventPayload(event = {}) {
   };
 }
 
-function magnetFromText(value) {
+export function magnetFromText(value) {
   if (typeof value !== "string") {
     return "";
   }
diff --git a/tests/legacy-infohash.test.mjs b/tests/legacy-infohash.test.mjs
index d2ac0ff8..1a1f7dce 100644
--- a/tests/legacy-infohash.test.mjs
+++ b/tests/legacy-infohash.test.mjs
@@ -81,6 +81,24 @@ const LEGACY_INFO_HASH = "0123456789abcdef0123456789abcdef01234567";
   assert.ok(video.title && video.title.length > 0, "Fallback title should be provided");
 })();
 
+(function testConvertRecoversMagnetFromMagnetTag() {
+  const magnetUri =
+    `magnet:?xt=urn:btih:${LEGACY_INFO_HASH}&dn=legacy-tag&tr=wss://tracker.openwebtorrent.com`;
+  const event = {
+    id: "evt-magnet-tag",
+    pubkey: "pk3",
+    created_at: 3,
+    // Deliberately invalid JSON so the converter must rely on scavenging.
+    content: "{not valid json}",
+    tags: [["magnet", magnetUri]],
+  };
+
+  const video = convertEventToVideo(event);
+  assert.equal(video.invalid, false, "Magnet in tag should still be playable");
+  assert.equal(video.magnet, magnetUri);
+  assert.equal(video.rawMagnet, magnetUri);
+})();
+
 (function testPlaybackConfigNormalizesInfoHash() {
   const result = deriveTorrentPlaybackConfig({
     magnet: "",

From b52076cc26f03f3874dffc253e5b973afb99c086 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 20:01:49 -0400
Subject: [PATCH 048/101] Refine legacy magnet scavenging after merge

---
 js/nostr.js | 50 ++++++++++----------------------------------------
 1 file changed, 10 insertions(+), 40 deletions(-)

diff --git a/js/nostr.js b/js/nostr.js
index 75d557f3..44eaee77 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -5,7 +5,7 @@ import { ACCEPT_LEGACY_V1 } from "./constants.js";
 import { accessControl } from "./accessControl.js";
 import {
   deriveTitleFromEvent,
-  magnetFromText,
+  findLegacyMagnetInEvent,
   parseVideoEventPayload,
 } from "./videoEventUtils.js";
 
@@ -124,47 +124,17 @@ function convertEventToVideo(event = {}) {
   // Legacy Bitvid posts (version < 2) sometimes stored the magnet in free-form
   // JSON strings or tags. We keep that scavenging behind ACCEPT_LEGACY_V1 so it
   // can be disabled globally without touching each call-site.
-  let legacyMagnet = "";
-  if (!directMagnet && ACCEPT_LEGACY_V1) {
-    const fromContent = magnetFromText(event.content);
-    if (fromContent) {
-      legacyMagnet = safeTrim(fromContent);
-    }
-
-    if (!legacyMagnet) {
-      for (const tag of tags) {
-        if (!Array.isArray(tag)) {
-          continue;
-        }
-
-        // Specified magnet tags always win.
-        if (safeTrim(tag[0]).toLowerCase() === "magnet" && tag[1]) {
-          const tagValue = magnetFromText(tag[1]) || tag[1];
-          const trimmed = safeTrim(tagValue);
-          if (trimmed) {
-            legacyMagnet = trimmed;
-            break;
-          }
-        }
-
-        // Fall back to scanning the remaining tag values for inline magnets.
-        for (let i = 1; i < tag.length && !legacyMagnet; i += 1) {
-          const candidate = magnetFromText(tag[i]);
-          if (candidate) {
-            legacyMagnet = safeTrim(candidate);
-          }
-        }
-
-        if (legacyMagnet) {
-          break;
-        }
-      }
-    }
-  }
+  const legacyMagnet =
+    !directMagnet && ACCEPT_LEGACY_V1
+      ? safeTrim(findLegacyMagnetInEvent(event))
+      : "";
 
+  // Prefer the structured magnet from the payload; otherwise accept the
+  // scavenged legacy value. As a last resort we promote the recovered info hash
+  // so downstream callers can rebuild a usable magnet URI during playback.
   const magnetCandidate = directMagnet || legacyMagnet;
-  const magnetForPlayback = magnetCandidate
-    || (ACCEPT_LEGACY_V1 ? normalizedInfoHash : "");
+  const magnetForPlayback =
+    magnetCandidate || (ACCEPT_LEGACY_V1 ? normalizedInfoHash : "");
 
   const hasPlayableSource = Boolean(normalizedUrl)
     || Boolean(magnetForPlayback);

From 996647f23d1981bd4cc764f98461b1f93fee4327 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 20:11:40 -0400
Subject: [PATCH 049/101] Restore legacy magnet playback in converter

---
 js/nostr.js | 127 ++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 93 insertions(+), 34 deletions(-)

diff --git a/js/nostr.js b/js/nostr.js
index 44eaee77..7b8312f8 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -5,7 +5,7 @@ import { ACCEPT_LEGACY_V1 } from "./constants.js";
 import { accessControl } from "./accessControl.js";
 import {
   deriveTitleFromEvent,
-  findLegacyMagnetInEvent,
+  magnetFromText,
   parseVideoEventPayload,
 } from "./videoEventUtils.js";
 
@@ -101,6 +101,10 @@ function inferMimeTypeFromUrl(url) {
  * sprinkling ad-hoc checks elsewhere in the UI.
  */
 function convertEventToVideo(event = {}) {
+  const safeTrim = (value) => (typeof value === "string" ? value.trim() : "");
+  const normalizeOptional = (value) => safeTrim(value) || "";
+
+  const rawContent = typeof event.content === "string" ? event.content : "";
   const tags = Array.isArray(event.tags) ? event.tags : [];
 
   const {
@@ -113,32 +117,60 @@ function convertEventToVideo(event = {}) {
     version,
   } = parseVideoEventPayload(event);
 
-  const safeTrim = (value) => (typeof value === "string" ? value.trim() : "");
-  const normalizeOptional = (value) => safeTrim(value) || "";
-
-  const numericVersion = Number.isFinite(version) ? version : 0;
   const normalizedUrl = safeTrim(parsedUrl);
   const directMagnet = safeTrim(parsedMagnet);
-  const normalizedInfoHash = safeTrim(infoHash).toLowerCase();
+  const parsedInfoHash = safeTrim(infoHash).toLowerCase();
 
-  // Legacy Bitvid posts (version < 2) sometimes stored the magnet in free-form
-  // JSON strings or tags. We keep that scavenging behind ACCEPT_LEGACY_V1 so it
-  // can be disabled globally without touching each call-site.
-  const legacyMagnet =
-    !directMagnet && ACCEPT_LEGACY_V1
-      ? safeTrim(findLegacyMagnetInEvent(event))
-      : "";
+  let recoveredMagnet = "";
+  if (!directMagnet && ACCEPT_LEGACY_V1) {
+    // Legacy v1 payloads frequently stuffed the magnet into arbitrary JSON
+    // strings. Inspect the raw content before JSON parsing so malformed
+    // payloads (or intentionally non-JSON legacy notes) still surface a magnet.
+    const inlineMagnet = magnetFromText(rawContent);
+    if (inlineMagnet) {
+      recoveredMagnet = safeTrim(inlineMagnet);
+    }
 
-  // Prefer the structured magnet from the payload; otherwise accept the
-  // scavenged legacy value. As a last resort we promote the recovered info hash
-  // so downstream callers can rebuild a usable magnet URI during playback.
-  const magnetCandidate = directMagnet || legacyMagnet;
-  const magnetForPlayback =
-    magnetCandidate || (ACCEPT_LEGACY_V1 ? normalizedInfoHash : "");
+    if (!recoveredMagnet) {
+      // Older clients also placed magnets into tags, sometimes under a literal
+      // ["magnet", ...] tuple and other times hidden in auxiliary values. The
+      // scavenger walks each tag to retain those posts while keeping the logic
+      // behind ACCEPT_LEGACY_V1 for easy rollback.
+      for (const tag of tags) {
+        if (!Array.isArray(tag) || tag.length === 0) {
+          continue;
+        }
 
-  const hasPlayableSource = Boolean(normalizedUrl)
-    || Boolean(magnetForPlayback);
-  if (!hasPlayableSource) {
+        const key = typeof tag[0] === "string" ? tag[0].trim().toLowerCase() : "";
+        if (key === "magnet" && typeof tag[1] === "string") {
+          const tagMagnet = magnetFromText(tag[1]) || tag[1];
+          const trimmed = safeTrim(tagMagnet);
+          if (trimmed) {
+            recoveredMagnet = trimmed;
+            break;
+          }
+        }
+
+        for (let i = 1; i < tag.length && !recoveredMagnet; i += 1) {
+          const candidate = magnetFromText(tag[i]);
+          if (candidate) {
+            recoveredMagnet = safeTrim(candidate);
+          }
+        }
+
+        if (recoveredMagnet) {
+          break;
+        }
+      }
+    }
+  }
+
+  const magnetCandidate = directMagnet || recoveredMagnet;
+  const normalizedMagnet = safeTrim(magnetCandidate);
+  const fallbackInfoHash = ACCEPT_LEGACY_V1 ? parsedInfoHash : "";
+  const magnetForPlayback = normalizedMagnet || fallbackInfoHash;
+
+  if (!normalizedUrl && !magnetForPlayback) {
     return {
       id: event.id,
       invalid: true,
@@ -146,21 +178,38 @@ function convertEventToVideo(event = {}) {
     };
   }
 
-  const resolvedTitle = deriveTitleFromEvent({
+  const deriveInfoHash = () => {
+    // Prefer the structured info hash found during payload parsing so the UI
+    // can surface it directly and playbackUtils can promote it to a magnet.
+    if (parsedInfoHash) {
+      return parsedInfoHash;
+    }
+    const source = normalizedMagnet || "";
+    if (!source) {
+      return "";
+    }
+    // When only a magnet string exists we still try to recover the info hash
+    // because downstream helpers display a friendlier fallback title and can
+    // rebuild a magnet URI if the original string gets mangled later on.
+    const match = source.match(/xt=urn:btih:([0-9a-z]+)/i);
+    if (match && match[1]) {
+      return match[1].toLowerCase();
+    }
+    return "";
+  };
+
+  const resolvedInfoHash = deriveInfoHash();
+
+  const derivedTitle = deriveTitleFromEvent({
     parsedContent,
     tags,
     primaryTitle: declaredTitle,
   });
 
-  let finalTitle = resolvedTitle;
-  if (
-    !finalTitle &&
-    ACCEPT_LEGACY_V1 &&
-    numericVersion < 2 &&
-    magnetForPlayback
-  ) {
-    finalTitle = normalizedInfoHash
-      ? `Legacy Video ${normalizedInfoHash.slice(0, 8)}`
+  let finalTitle = derivedTitle;
+  if (!finalTitle && ACCEPT_LEGACY_V1 && magnetForPlayback) {
+    finalTitle = resolvedInfoHash
+      ? `Legacy Video ${resolvedInfoHash.slice(0, 8)}`
       : "Legacy BitTorrent Video";
   }
 
@@ -171,6 +220,16 @@ function convertEventToVideo(event = {}) {
     return { id: event.id, invalid: true, reason };
   }
 
+  let numericVersion = 0;
+  if (typeof version === "number" && Number.isFinite(version)) {
+    numericVersion = version;
+  } else if (typeof version === "string") {
+    const parsedVersion = Number(version);
+    if (Number.isFinite(parsedVersion)) {
+      numericVersion = parsedVersion;
+    }
+  }
+
   return {
     id: event.id,
     videoRootId: normalizeOptional(parsedContent.videoRootId) || event.id,
@@ -179,8 +238,8 @@ function convertEventToVideo(event = {}) {
     title: finalTitle,
     url: normalizedUrl,
     magnet: magnetForPlayback,
-    rawMagnet: directMagnet || (ACCEPT_LEGACY_V1 ? legacyMagnet : ""),
-    infoHash: normalizedInfoHash,
+    rawMagnet: directMagnet || (ACCEPT_LEGACY_V1 ? recoveredMagnet : ""),
+    infoHash: resolvedInfoHash,
     thumbnail: normalizeOptional(parsedContent.thumbnail),
     description: normalizeOptional(parsedContent.description),
     mode: normalizeOptional(parsedContent.mode) || "live",

From 8e42816ec53385e43b3daa6982c0bb57a24ce570 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 20:30:41 -0400
Subject: [PATCH 050/101] Clear srcObject before replaying torrents

---
 js/app.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/js/app.js b/js/app.js
index 6ebb0f13..79bf45c3 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1247,12 +1247,20 @@ class bitvidApp {
       if (this.videoElement) {
         this.videoElement.pause();
         this.videoElement.src = "";
+        // When WebTorrent (or other MediaSource based flows) mount a stream they
+        // set `srcObject` behind the scenes. Forgetting to clear it leaves the
+        // detached MediaSource hanging around which breaks the next playback
+        // attempt. Always null it out alongside the normal `src` reset.
+        this.videoElement.srcObject = null;
         this.videoElement.load();
       }
       // If there's a modal video
       if (this.modalVideo) {
         this.modalVideo.pause();
         this.modalVideo.src = "";
+        // See comment above—keep the `srcObject` reset paired with the `src`
+        // wipe so magnet-only replays do not regress into the grey screen bug.
+        this.modalVideo.srcObject = null;
         this.modalVideo.load();
       }
       // Tell webtorrent to cleanup
@@ -2372,8 +2380,13 @@ class bitvidApp {
       await torrentClient.cleanup();
 
       this.modalVideo.pause();
+      // Clearing the WebTorrent attachment requires wiping both `src` and
+      // `srcObject`. Multiple regressions have shipped where we only blanked
+      // `src`, leaving the old MediaSource wired up and the next magnet would
+      // stall on a grey frame. Always clear both before calling `load()`.
       this.modalVideo.src = "";
       this.modalVideo.removeAttribute("src");
+      this.modalVideo.srcObject = null;
       this.modalVideo.load();
 
       this.resetTorrentStats();

From b66d6e108081a3f00c41cdb5212b04dadc6c7294 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 20:49:35 -0400
Subject: [PATCH 051/101] Fix WebTorrent modal playback when worker not
 controlling

---
 js/webtorrent.js | 59 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/js/webtorrent.js b/js/webtorrent.js
index 7cab729c..5391f754 100644
--- a/js/webtorrent.js
+++ b/js/webtorrent.js
@@ -43,6 +43,12 @@ export class TorrentClient {
     // 2) If we haven’t registered the service worker yet, do it now
     if (!this.swRegistration) {
       this.swRegistration = await this.setupServiceWorker();
+    } else {
+      // Even with an existing registration we still wait for control so that a
+      // transient controller drop (e.g. Chrome devtools unregister/reload) does
+      // not resurrect the grey-screen regression mentioned in
+      // waitForActiveController().
+      await this.waitForActiveController();
     }
   }
 
@@ -81,6 +87,54 @@ export class TorrentClient {
     });
   }
 
+  /**
+   * Ensure a live service worker is actively controlling the page before we
+   * start WebTorrent streaming.
+   *
+   * This regression has bitten us repeatedly: the first playback attempt after
+   * a cold load would get stuck on a grey frame because `navigator.serviceWorker`
+   * had finished installing but never claimed the page yet. WebTorrent's
+   * service-worker proxy never attached, so `file.streamTo(videoElement)` fed
+   * data into the void. Refreshing the page “fixed” it because the worker became
+   * the controller during navigation. Future refactors **must not** remove this
+   * guard — wait for `controllerchange` whenever `controller` is still null.
+   */
+  async waitForActiveController() {
+    if (!("serviceWorker" in navigator)) {
+      return null;
+    }
+
+    if (navigator.serviceWorker.controller) {
+      return navigator.serviceWorker.controller;
+    }
+
+    return new Promise((resolve, reject) => {
+      const onControllerChange = () => {
+        if (navigator.serviceWorker.controller) {
+          clearTimeout(timeout);
+          navigator.serviceWorker.removeEventListener(
+            "controllerchange",
+            onControllerChange
+          );
+          resolve(navigator.serviceWorker.controller);
+        }
+      };
+
+      const timeout = setTimeout(() => {
+        navigator.serviceWorker.removeEventListener(
+          "controllerchange",
+          onControllerChange
+        );
+        reject(new Error("Service worker controller claim timeout"));
+      }, this.TIMEOUT_DURATION);
+
+      navigator.serviceWorker.addEventListener(
+        "controllerchange",
+        onControllerChange
+      );
+    });
+  }
+
   async setupServiceWorker() {
     try {
       const isBraveBrowser = await this.isBrave();
@@ -168,6 +222,11 @@ export class TorrentClient {
         throw new Error("Service worker not active after ready state");
       }
 
+      // See waitForActiveController() docstring for why this must remain in
+      // place. We intentionally wait here instead of racing with playback so a
+      // newly installed worker claims the page before WebTorrent spins up.
+      await this.waitForActiveController();
+
       // Force the SW to check for updates
       registration.update();
       this.log("Service worker ready");

From 3b4bb7f0df1ab873f08c1618545fbe395eb4fcd4 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 20:53:54 -0400
Subject: [PATCH 052/101] Add form magnet normalizer and tests

---
 js/magnet.js                | 177 +++++++++++++++++++++++++++++++++---
 tests/magnet-utils.test.mjs |   7 ++
 2 files changed, 171 insertions(+), 13 deletions(-)

diff --git a/js/magnet.js b/js/magnet.js
index 2f5934e9..5fe5d80c 100644
--- a/js/magnet.js
+++ b/js/magnet.js
@@ -1,19 +1,170 @@
 import { WSS_TRACKERS } from "./constants.js";
-import { normalizeAndAugmentMagnet as normalizeLegacy } from "./magnetUtils.js";
 
-export function normalizeAndAugmentMagnet(rawValue, { ws = "", xs = "" } = {}) {
-  const trimmedInput = typeof rawValue === "string" ? rawValue.trim() : "";
-  const trimmedWs = typeof ws === "string" ? ws.trim() : "";
-  const trimmedXs = typeof xs === "string" ? xs.trim() : "";
+const HEX_INFO_HASH = /^[0-9a-f]{40}$/i;
+const ENCODED_BTih_PATTERN = /xt=urn%3Abtih%3A([0-9a-z]+)/gi;
 
-  const webSeeds = trimmedWs ? [trimmedWs] : [];
+function getOriginProtocol() {
+  if (typeof window !== "undefined" && window.location?.protocol) {
+    return window.location.protocol.toLowerCase();
+  }
+  return "https:";
+}
 
-  const result = normalizeLegacy(trimmedInput, {
-    webSeed: webSeeds,
-    torrentUrl: trimmedXs,
-    xs: trimmedXs,
-    extraTrackers: WSS_TRACKERS,
-  });
+function decodeLoose(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    return decodeURIComponent(trimmed);
+  } catch (err) {
+    return trimmed;
+  }
+}
 
-  return result.magnet;
+function normalizeForComparison(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  return value.trim().replace(/\/+$/, "").toLowerCase();
+}
+
+function tryFormatAbsoluteUrl(candidate) {
+  if (typeof candidate !== "string") {
+    return "";
+  }
+  const trimmed = candidate.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    const parsed = new URL(trimmed);
+    return parsed.toString();
+  } catch (err) {
+    return trimmed;
+  }
+}
+
+/**
+ * Normalize and enrich a magnet string entered in the upload form so that it
+ * always produces a WebTorrent-friendly URI. The logic mirrors the behaviour of
+ * the legacy magnetUtils helper but returns a plain string for ease of use.
+ */
+export function normalizeAndAugmentMagnet(rawValue, { ws = "", xs = "" } = {}) {
+  const initial = typeof rawValue === "string" ? rawValue.trim() : "";
+  if (!initial) {
+    return "";
+  }
+
+  let working = initial;
+
+  if (HEX_INFO_HASH.test(working)) {
+    working = `magnet:?xt=urn:btih:${working.toLowerCase()}`;
+  }
+
+  working = working.replace(ENCODED_BTih_PATTERN, (_, hash) => `xt=urn:btih:${hash}`);
+
+  if (!/^magnet:/i.test(working)) {
+    return working;
+  }
+
+  let fragment = "";
+  const hashIndex = working.indexOf("#");
+  if (hashIndex !== -1) {
+    fragment = working.slice(hashIndex);
+    working = working.slice(0, hashIndex);
+  }
+
+  const [, queryPart = ""] = working.split("?", 2);
+  const normalizedScheme = "magnet:";
+  const rawParams = queryPart
+    .split("&")
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+  const params = [];
+
+  for (const rawParam of rawParams) {
+    const [rawKey, rawVal = ""] = rawParam.split("=", 2);
+    const key = rawKey.trim();
+    if (!key) {
+      continue;
+    }
+    let value = rawVal.trim();
+    if (key.toLowerCase() === "xt" && value) {
+      const decoded = decodeLoose(value);
+      if (decoded) {
+        value = decoded;
+      }
+    }
+    params.push({
+      key,
+      value,
+      lowerKey: key.toLowerCase(),
+      compareValue: normalizeForComparison(value),
+    });
+  }
+
+  const appendUniqueParam = (key, value) => {
+    if (!value) {
+      return;
+    }
+    const trimmedValue = value.trim();
+    if (!trimmedValue) {
+      return;
+    }
+    const lowerKey = key.toLowerCase();
+    const compareValue = normalizeForComparison(trimmedValue);
+    if (compareValue) {
+      const exists = params.some(
+        (param) => param.lowerKey === lowerKey && param.compareValue === compareValue
+      );
+      if (exists) {
+        return;
+      }
+    }
+    params.push({
+      key,
+      value: trimmedValue,
+      lowerKey,
+      compareValue,
+    });
+  };
+
+  for (const tracker of WSS_TRACKERS) {
+    if (typeof tracker !== "string") {
+      continue;
+    }
+    const trimmedTracker = tracker.trim();
+    if (!/^wss:\/\//i.test(trimmedTracker)) {
+      continue;
+    }
+    appendUniqueParam("tr", trimmedTracker);
+  }
+
+  const normalizedXs = typeof xs === "string" ? xs.trim() : "";
+  if (normalizedXs) {
+    appendUniqueParam("xs", normalizedXs);
+  }
+
+  const originProtocol = getOriginProtocol();
+  const rawWs = typeof ws === "string" ? ws.trim() : "";
+  if (rawWs) {
+    const formattedWs = tryFormatAbsoluteUrl(rawWs);
+    const lowerWs = formattedWs.toLowerCase();
+    const isHttpSeed = lowerWs.startsWith("http://");
+    const allowHttpSeed = originProtocol === "http:";
+    if (!isHttpSeed || allowHttpSeed) {
+      appendUniqueParam("ws", formattedWs);
+    }
+  }
+
+  const queryString = params
+    .map(({ key, value }) => (value ? `${key}=${value}` : key))
+    .join("&");
+
+  return `${normalizedScheme}${queryString ? `?${queryString}` : ""}${fragment}`;
 }
diff --git a/tests/magnet-utils.test.mjs b/tests/magnet-utils.test.mjs
index 6d0aad55..1297664c 100644
--- a/tests/magnet-utils.test.mjs
+++ b/tests/magnet-utils.test.mjs
@@ -135,6 +135,13 @@ function getParamValues(magnet, key) {
     ["https://cdn.example.com/video.torrent"],
     "Expected xs hint to be appended"
   );
+  const trackers = parsed.searchParams.getAll("tr");
+  for (const tracker of WSS_TRACKERS) {
+    assert.ok(
+      trackers.includes(tracker),
+      `Expected helper to append tracker ${tracker}`
+    );
+  }
 })();
 
 (function testFormHelperSkipsInsecureWsOnHttpsOrigin() {

From b031e98c4a6b372ae7cd154c7274000a46470e13 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 21:15:49 -0400
Subject: [PATCH 053/101] Fix service worker claiming for WebTorrent playback

---
 js/webtorrent.js | 99 ++++++++++++++++++++++++++++++++++++++++--------
 sw.min.js        |  3 ++
 2 files changed, 87 insertions(+), 15 deletions(-)

diff --git a/js/webtorrent.js b/js/webtorrent.js
index 5391f754..77b792f2 100644
--- a/js/webtorrent.js
+++ b/js/webtorrent.js
@@ -48,7 +48,8 @@ export class TorrentClient {
       // transient controller drop (e.g. Chrome devtools unregister/reload) does
       // not resurrect the grey-screen regression mentioned in
       // waitForActiveController().
-      await this.waitForActiveController();
+      this.requestClientsClaim(this.swRegistration);
+      await this.waitForActiveController(this.swRegistration);
     }
   }
 
@@ -99,7 +100,31 @@ export class TorrentClient {
    * the controller during navigation. Future refactors **must not** remove this
    * guard — wait for `controllerchange` whenever `controller` is still null.
    */
-  async waitForActiveController() {
+  requestClientsClaim(registration = this.swRegistration) {
+    if (!("serviceWorker" in navigator)) {
+      return;
+    }
+
+    try {
+      const activeWorker = registration?.active;
+      if (!activeWorker) {
+        return;
+      }
+
+      // Some Chromium builds require an explicit startMessages() call before a
+      // yet-to-claim worker will accept postMessage traffic. Calling it is a
+      // harmless no-op elsewhere.
+      if (navigator.serviceWorker.startMessages) {
+        navigator.serviceWorker.startMessages();
+      }
+
+      activeWorker.postMessage({ type: "ENSURE_CLIENTS_CLAIM" });
+    } catch (err) {
+      this.log("Failed to request clients.claim():", err);
+    }
+  }
+
+  async waitForActiveController(registration = this.swRegistration) {
     if (!("serviceWorker" in navigator)) {
       return null;
     }
@@ -108,30 +133,69 @@ export class TorrentClient {
       return navigator.serviceWorker.controller;
     }
 
-    return new Promise((resolve, reject) => {
-      const onControllerChange = () => {
-        if (navigator.serviceWorker.controller) {
-          clearTimeout(timeout);
-          navigator.serviceWorker.removeEventListener(
-            "controllerchange",
-            onControllerChange
-          );
-          resolve(navigator.serviceWorker.controller);
-        }
-      };
+    this.requestClientsClaim(registration);
 
-      const timeout = setTimeout(() => {
+    return new Promise((resolve, reject) => {
+      let timeoutId = null;
+      let pollId = null;
+
+      const cleanup = () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+        if (pollId) {
+          clearInterval(pollId);
+          pollId = null;
+        }
         navigator.serviceWorker.removeEventListener(
           "controllerchange",
           onControllerChange
         );
+      };
+
+      const maybeResolve = () => {
+        const controller = navigator.serviceWorker.controller;
+        if (controller) {
+          cleanup();
+          resolve(controller);
+          return true;
+        }
+        return false;
+      };
+
+      const onControllerChange = () => {
+        if (maybeResolve()) {
+          return;
+        }
+        // If we received a controllerchange event but still don't have a
+        // controller it usually means the new worker hasn't claimed this page
+        // yet. Ask it again to be safe.
+        this.requestClientsClaim(registration);
+      };
+
+      timeoutId = setTimeout(() => {
+        cleanup();
         reject(new Error("Service worker controller claim timeout"));
       }, this.TIMEOUT_DURATION);
 
+      pollId = setInterval(() => {
+        if (maybeResolve()) {
+          return;
+        }
+        this.requestClientsClaim(registration);
+      }, 500);
+
       navigator.serviceWorker.addEventListener(
         "controllerchange",
         onControllerChange
       );
+
+      // One last check in case the controller appeared between the earlier
+      // synchronous guard and the promise wiring above.
+      if (!maybeResolve()) {
+        this.requestClientsClaim(registration);
+      }
     });
   }
 
@@ -222,10 +286,15 @@ export class TorrentClient {
         throw new Error("Service worker not active after ready state");
       }
 
+      // Give the newly activated worker an explicit nudge to claim the page
+      // before we continue. This keeps Chromium's occasionally sluggish claim
+      // hand-offs from derailing the subsequent wait below.
+      this.requestClientsClaim(registration);
+
       // See waitForActiveController() docstring for why this must remain in
       // place. We intentionally wait here instead of racing with playback so a
       // newly installed worker claims the page before WebTorrent spins up.
-      await this.waitForActiveController();
+      await this.waitForActiveController(registration);
 
       // Force the SW to check for updates
       registration.update();
diff --git a/sw.min.js b/sw.min.js
index 4acb34e5..de8c8651 100644
--- a/sw.min.js
+++ b/sw.min.js
@@ -15,6 +15,9 @@
           Promise.all(cacheNames.map((cacheName) => caches.delete(cacheName)))
         );
     }
+    if (event.data && event.data.type === "ENSURE_CLIENTS_CLAIM") {
+      event.waitUntil(clients.claim());
+    }
   });
 
   // Immediately install and skip waiting

From 42bfde21d5bd6b00d62f689571c98e98b72e385c Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 21:28:36 -0400
Subject: [PATCH 054/101] Update video converter and publishing schema

---
 js/nostr.js                    | 266 ++++++++++++++++++---------------
 tests/legacy-infohash.test.mjs |   8 +-
 2 files changed, 148 insertions(+), 126 deletions(-)

diff --git a/js/nostr.js b/js/nostr.js
index cb0d3bec..e2283809 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -4,11 +4,7 @@ import { isDevMode } from "./config.js";
 import { ACCEPT_LEGACY_V1 } from "./constants.js";
 import { accessControl } from "./accessControl.js";
 // 🔧 merged conflicting changes from codex/update-video-publishing-and-parsing-logic vs unstable
-import {
-  deriveTitleFromEvent,
-  magnetFromText,
-  parseVideoEventPayload,
-} from "./videoEventUtils.js";
+import { deriveTitleFromEvent, magnetFromText } from "./videoEventUtils.js";
 
 /**
  * The usual relays
@@ -103,167 +99,195 @@ function inferMimeTypeFromUrl(url) {
  *
  * Also accepts legacy (<v2) payloads when ACCEPT_LEGACY_V1 allows it.
  */
-// 🔧 merged conflicting changes from codex/update-video-publishing-and-parsing-logic vs unstable
 function convertEventToVideo(event = {}) {
   const safeTrim = (value) => (typeof value === "string" ? value.trim() : "");
-  const normalizeOptional = (value) => safeTrim(value) || "";
 
   const rawContent = typeof event.content === "string" ? event.content : "";
   const tags = Array.isArray(event.tags) ? event.tags : [];
 
-  const {
-    parsedContent,
-    parseError,
-    title: declaredTitle,
-    url: parsedUrl,
-    magnet: parsedMagnet,
-    infoHash,
-    version,
-  } = parseVideoEventPayload(event);
+  let parsedContent = {};
+  let parseError = null;
+  if (rawContent) {
+    try {
+      const parsed = JSON.parse(rawContent);
+      if (parsed && typeof parsed === "object") {
+        parsedContent = parsed;
+      }
+    } catch (err) {
+      parseError = err;
+      parsedContent = {};
+    }
+  }
 
-  const normalizedUrl = safeTrim(parsedUrl);
-  const directMagnet = safeTrim(parsedMagnet);
-  const parsedInfoHash = safeTrim(infoHash).toLowerCase();
+  const directUrl = safeTrim(parsedContent.url);
+  const directMagnetRaw = safeTrim(parsedContent.magnet);
 
-  let recoveredMagnet = "";
-  if (!directMagnet && ACCEPT_LEGACY_V1) {
-    // Legacy v1 payloads frequently stuffed the magnet into arbitrary JSON
-    // strings. Inspect the raw content before JSON parsing so malformed
-    // payloads (or intentionally non-JSON legacy notes) still surface a magnet.
-    const inlineMagnet = magnetFromText(rawContent);
+  const normalizeMagnetCandidate = (value) => {
+    if (typeof value !== "string") {
+      return "";
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return "";
+    }
+    if (trimmed.toLowerCase().startsWith("magnet:?")) {
+      return trimmed;
+    }
+    const extracted = magnetFromText(trimmed);
+    return extracted ? extracted.trim() : "";
+  };
+
+  let magnet = normalizeMagnetCandidate(directMagnetRaw);
+  let rawMagnet = magnet ? directMagnetRaw : "";
+
+  if (!magnet && ACCEPT_LEGACY_V1) {
+    const inlineMagnet = normalizeMagnetCandidate(rawContent);
     if (inlineMagnet) {
-      recoveredMagnet = safeTrim(inlineMagnet);
+      magnet = inlineMagnet;
     }
 
-    if (!recoveredMagnet) {
-      // Older clients also placed magnets into tags, sometimes under a literal
-      // ["magnet", ...] tuple and other times hidden in auxiliary values. The
-      // scavenger walks each tag to retain those posts while keeping the logic
-      // behind ACCEPT_LEGACY_V1 for easy rollback.
-      for (const tag of tags) {
-        if (!Array.isArray(tag) || tag.length === 0) {
+    if (!magnet) {
+      outer: for (const tag of tags) {
+        if (!Array.isArray(tag) || tag.length < 2) {
           continue;
         }
 
-        const key = typeof tag[0] === "string" ? tag[0].trim().toLowerCase() : "";
-        if (key === "magnet" && typeof tag[1] === "string") {
-          const tagMagnet = magnetFromText(tag[1]) || tag[1];
-          const trimmed = safeTrim(tagMagnet);
-          if (trimmed) {
-            recoveredMagnet = trimmed;
-            break;
-          }
-        }
+        const key =
+          typeof tag[0] === "string" ? tag[0].trim().toLowerCase() : "";
 
-        for (let i = 1; i < tag.length && !recoveredMagnet; i += 1) {
-          const candidate = magnetFromText(tag[i]);
+        const startIndex = key === "magnet" ? 1 : 0;
+        for (let i = startIndex; i < tag.length; i += 1) {
+          const candidate = normalizeMagnetCandidate(tag[i]);
           if (candidate) {
-            recoveredMagnet = safeTrim(candidate);
+            magnet = candidate;
+            break outer;
           }
         }
+      }
+    }
 
-        if (recoveredMagnet) {
+    if (!magnet) {
+      const recoveredFromRaw = magnetFromText(rawContent);
+      if (recoveredFromRaw) {
+        magnet = safeTrim(recoveredFromRaw);
+      }
+    }
+  }
+
+  if (!rawMagnet && magnet) {
+    rawMagnet = magnet;
+  }
+
+  const url = directUrl;
+
+  if (!url && !magnet) {
+    return { id: event.id, invalid: true, reason: "missing playable source" };
+  }
+
+  const thumbnail = safeTrim(parsedContent.thumbnail);
+  const description = safeTrim(parsedContent.description);
+  const rawMode = safeTrim(parsedContent.mode);
+  const mode = rawMode || "live";
+  const deleted = parsedContent.deleted === true;
+  const isPrivate = parsedContent.isPrivate === true;
+  const videoRootId = safeTrim(parsedContent.videoRootId) || event.id;
+
+  let infoHash = "";
+  const pushInfoHash = (candidate) => {
+    if (typeof candidate !== "string") {
+      return false;
+    }
+    const normalized = candidate.trim().toLowerCase();
+    if (/^[0-9a-f]{40}$/.test(normalized)) {
+      infoHash = normalized;
+      return true;
+    }
+    return false;
+  };
+
+  pushInfoHash(parsedContent.infoHash);
+
+  if (!infoHash && magnet) {
+    const match = magnet.match(/xt=urn:btih:([0-9a-z]+)/i);
+    if (match && match[1]) {
+      pushInfoHash(match[1]);
+    }
+  }
+
+  const searchInfoHashInString = (value) => {
+    if (infoHash || typeof value !== "string") {
+      return;
+    }
+    const match = value.match(/[0-9a-f]{40}/i);
+    if (match && match[0]) {
+      pushInfoHash(match[0]);
+    }
+  };
+
+  if (!infoHash && ACCEPT_LEGACY_V1) {
+    searchInfoHashInString(rawContent);
+    for (const tag of tags) {
+      if (infoHash) {
+        break;
+      }
+      if (!Array.isArray(tag)) {
+        continue;
+      }
+      for (let i = 0; i < tag.length; i += 1) {
+        searchInfoHashInString(tag[i]);
+        if (infoHash) {
           break;
         }
       }
     }
   }
 
-  const magnetCandidate = directMagnet || recoveredMagnet;
-  const normalizedMagnet = safeTrim(magnetCandidate);
-  const fallbackInfoHash = ACCEPT_LEGACY_V1 ? parsedInfoHash : "";
-  const magnetForPlayback = normalizedMagnet || fallbackInfoHash;
-
-  if (!normalizedUrl && !magnetForPlayback) {
-    return {
-      id: event.id,
-      invalid: true,
-      reason: "missing playable source",
-    };
-  }
-
-  const deriveInfoHash = () => {
-    // Prefer the structured info hash found during payload parsing so the UI
-    // can surface it directly and playbackUtils can promote it to a magnet.
-    if (parsedInfoHash) {
-      return parsedInfoHash;
-    }
-    const source = normalizedMagnet || "";
-    if (source) {
-      // When only a magnet string exists we still try to recover the info hash
-      // because downstream helpers display a friendlier fallback title and can
-      // rebuild a magnet URI if the original string gets mangled later on.
-      const match = source.match(/xt=urn:btih:([0-9a-z]+)/i);
-      if (match && match[1]) {
-        return match[1].toLowerCase();
-      }
-    }
-    // Blend in additional legacy recovery from the other branch: 40-char hex hashes
-    if (ACCEPT_LEGACY_V1) {
-      const hexMatch = rawContent.match(/\b[0-9a-f]{40}\b/i);
-      if (hexMatch && hexMatch[0]) {
-        return hexMatch[0].toLowerCase();
-      }
-      for (const tag of tags) {
-        if (!Array.isArray(tag)) continue;
-        for (const value of tag) {
-          if (typeof value !== "string") continue;
-          const m = value.match(/\b[0-9a-f]{40}\b/i);
-          if (m && m[0]) {
-            return m[0].toLowerCase();
-          }
-        }
-      }
-    }
-    return "";
-  };
-
-  const resolvedInfoHash = deriveInfoHash();
-
+  const declaredTitle = safeTrim(parsedContent.title);
   const derivedTitle = deriveTitleFromEvent({
     parsedContent,
     tags,
     primaryTitle: declaredTitle,
   });
 
-  let finalTitle = derivedTitle;
-  if (!finalTitle && ACCEPT_LEGACY_V1 && magnetForPlayback) {
-    finalTitle = resolvedInfoHash
-      ? `Legacy Video ${resolvedInfoHash.slice(0, 8)}`
+  let title = safeTrim(derivedTitle);
+  if (!title && ACCEPT_LEGACY_V1 && (magnet || infoHash)) {
+    title = infoHash
+      ? `Legacy Video ${infoHash.slice(0, 8)}`
       : "Legacy BitTorrent Video";
   }
 
-  if (!finalTitle) {
+  if (!title) {
     const reason = parseError
       ? "missing title (json parse error)"
       : "missing title";
     return { id: event.id, invalid: true, reason };
   }
 
-  let numericVersion = 0;
-  if (typeof version === "number" && Number.isFinite(version)) {
-    numericVersion = version;
-  } else if (typeof version === "string") {
-    const parsedVersion = Number(version);
+  const rawVersion = parsedContent.version;
+  let version = 0;
+  if (typeof rawVersion === "number" && Number.isFinite(rawVersion)) {
+    version = rawVersion;
+  } else if (typeof rawVersion === "string") {
+    const parsedVersion = Number(rawVersion);
     if (Number.isFinite(parsedVersion)) {
-      numericVersion = parsedVersion;
+      version = parsedVersion;
     }
   }
 
   return {
     id: event.id,
-    videoRootId: normalizeOptional(parsedContent.videoRootId) || event.id,
-    version: numericVersion,
-    isPrivate: parsedContent.isPrivate ?? false,
-    title: finalTitle,
-    url: normalizedUrl,
-    magnet: magnetForPlayback,
-    rawMagnet: directMagnet || (ACCEPT_LEGACY_V1 ? recoveredMagnet : ""),
-    infoHash: resolvedInfoHash,
-    thumbnail: normalizeOptional(parsedContent.thumbnail),
-    description: normalizeOptional(parsedContent.description),
-    mode: normalizeOptional(parsedContent.mode) || "live",
-    deleted: parsedContent.deleted === true,
+    videoRootId,
+    version,
+    isPrivate,
+    title,
+    url,
+    magnet,
+    rawMagnet,
+    infoHash,
+    thumbnail,
+    description,
+    mode,
+    deleted,
     pubkey: event.pubkey,
     created_at: event.created_at,
     tags,
@@ -435,7 +459,6 @@ class NostrClient {
     const dTagValue = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
 
     const contentObject = {
-      videoRootId,
       version: 2, // forcibly set version=2
       title: finalTitle,
       url: finalUrl,
@@ -443,6 +466,7 @@ class NostrClient {
       thumbnail: finalThumbnail,
       description: finalDescription,
       mode: videoData.mode || "live",
+      videoRootId,
       deleted: false,
       isPrivate: videoData.isPrivate ?? false,
     };
diff --git a/tests/legacy-infohash.test.mjs b/tests/legacy-infohash.test.mjs
index 1a1f7dce..b6beeace 100644
--- a/tests/legacy-infohash.test.mjs
+++ b/tests/legacy-infohash.test.mjs
@@ -44,7 +44,7 @@ const LEGACY_INFO_HASH = "0123456789abcdef0123456789abcdef01234567";
   assert.equal(parsed.infoHash, LEGACY_INFO_HASH);
 })();
 
-(function testConvertTreatsInfoHashAsPlayable() {
+(function testConvertFlagsBareInfoHashAsInvalid() {
   const event = {
     id: "evt-convert",
     pubkey: "pk",
@@ -58,10 +58,8 @@ const LEGACY_INFO_HASH = "0123456789abcdef0123456789abcdef01234567";
   };
 
   const video = convertEventToVideo(event);
-  assert.equal(video.invalid, false, "Legacy info hash events should not be dropped");
-  assert.equal(video.magnet, LEGACY_INFO_HASH);
-  assert.equal(video.infoHash, LEGACY_INFO_HASH);
-  assert.equal(video.rawMagnet, "");
+  assert.equal(video.invalid, true, "Bare info-hash payloads should be flagged");
+  assert.equal(video.reason, "missing playable source");
 })();
 
 (function testLegacyEventWithoutTitleStillLoads() {

From f4821244115baf24ae52f06ffd3c13e2139bc34c Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 21:34:01 -0400
Subject: [PATCH 055/101] Fix playback data encoding for cards

---
 js/app.js            | 30 +++++++++++++++---------------
 js/channelProfile.js |  7 +++++--
 js/subscriptions.js  |  6 ++++--
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/js/app.js b/js/app.js
index 79bf45c3..437772d5 100644
--- a/js/app.js
+++ b/js/app.js
@@ -898,16 +898,6 @@ class bitvidApp {
       if (event.button === 0 && !event.ctrlKey && !event.metaKey) {
         event.preventDefault();
 
-        const decodeDataValue = (value) => {
-          if (!value) return "";
-          try {
-            return decodeURIComponent(value);
-          } catch (err) {
-            console.warn("Failed to decode data attribute:", err);
-            return value;
-          }
-        };
-
         const rawUrlValue =
           (trigger.dataset && typeof trigger.dataset.playUrl === "string"
             ? trigger.dataset.playUrl
@@ -917,10 +907,17 @@ class bitvidApp {
             ? trigger.dataset.playMagnet
             : null) ?? trigger.getAttribute("data-play-magnet") ?? "";
 
-        const url = decodeDataValue(rawUrlValue);
-        const decodedMagnetValue = decodeDataValue(rawMagnetValue);
-        const magnet =
-          safeDecodeMagnet(decodedMagnetValue) || decodedMagnetValue;
+        let url = "";
+        if (rawUrlValue) {
+          try {
+            url = decodeURIComponent(rawUrlValue);
+          } catch (err) {
+            console.warn("Failed to decode data-play-url attribute:", err);
+            url = rawUrlValue;
+          }
+        }
+
+        const magnet = safeDecodeMagnet(rawMagnetValue) || rawMagnetValue;
         const eventId = trigger.getAttribute("data-video-id");
 
         if (eventId) {
@@ -1739,9 +1736,12 @@ class bitvidApp {
         // assign them after template parsing so the raw URL/magnet strings avoid
         // HTML entity escaping in the literal markup and keep any sensitive
         // magnet payloads out of the static DOM text.
+        // The play URL is stored URL-encoded to keep spaces and query params
+        // intact inside data-* attributes; attachVideoListHandler() decodes it
+        // before playback.
         interactiveEls.forEach((el) => {
           if (!el.dataset) return;
-          el.dataset.playUrl = playbackUrl || "";
+          el.dataset.playUrl = encodeURIComponent(playbackUrl || "");
           el.dataset.playMagnet = playbackMagnet || "";
           if (magnetProvided) {
             el.dataset.torrentSupported = magnetSupported ? "true" : "false";
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 60d5df9b..833c1262 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -382,11 +382,14 @@ async function loadUserVideos(pubkey) {
 
       // Leave the data-play-* attributes empty in the template markup so the raw
       // URL/magnet strings can be assigned after parsing without HTML entity
-      // escaping, keeping this renderer consistent with app.js.
+      // escaping, keeping this renderer consistent with app.js. The stored URL is
+      // encoded so it stays intact within data-* attributes, and the click
+      // handler decodes it while leaving magnets untouched until
+      // safeDecodeMagnet() runs.
       const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
       interactiveEls.forEach((el) => {
         if (!el.dataset) return;
-        el.dataset.playUrl = playbackUrl || "";
+        el.dataset.playUrl = encodeURIComponent(playbackUrl || "");
         el.dataset.playMagnet = playbackMagnet || "";
       });
 
diff --git a/js/subscriptions.js b/js/subscriptions.js
index fff42045..be192aee 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -408,11 +408,13 @@ class SubscriptionsManager {
       if (cardEl) {
         // Leave the data-play-* attributes empty in the literal markup so we can
         // assign the raw URL/magnet strings post-parsing without HTML entity
-        // escaping, mirroring the approach in app.js.
+        // escaping, mirroring the approach in app.js. The URL is encoded so that
+        // special characters survive storage in data-* attributes; the click
+        // handler decodes it right before playback while keeping the magnet raw.
         const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
         interactiveEls.forEach((el) => {
           if (!el.dataset) return;
-          el.dataset.playUrl = playbackUrl || "";
+          el.dataset.playUrl = encodeURIComponent(playbackUrl || "");
           el.dataset.playMagnet = playbackMagnet || "";
         });
       }

From 16d4578ead97f04f85646ba26e8e2da8252870b8 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 21:42:56 -0400
Subject: [PATCH 056/101] Refine URL-first video playback flow

---
 js/app.js | 209 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 123 insertions(+), 86 deletions(-)

diff --git a/js/app.js b/js/app.js
index 437772d5..eb0e3dae 100644
--- a/js/app.js
+++ b/js/app.js
@@ -8,6 +8,7 @@ import { isWhitelistEnabled } from "./config.js";
 import { safeDecodeMagnet } from "./magnetUtils.js";
 import { normalizeAndAugmentMagnet } from "./magnet.js";
 import { deriveTorrentPlaybackConfig } from "./playbackUtils.js";
+import { URL_FIRST_ENABLED } from "./constants.js";
 import {
   initialWhitelist,
   initialBlacklist,
@@ -2184,61 +2185,37 @@ class bitvidApp {
     }
   }
 
-  async playHttp(url, { fallbackMagnet = "", fallbackRawMagnet = "" } = {}) {
-    if (!this.modalVideo) {
-      throw new Error("No modal video element available for playback.");
+  async playHttp(videoEl, url) {
+    const target = videoEl || this.modalVideo;
+    if (!target) {
+      throw new Error("No video element available for direct playback.");
     }
 
-    const normalizedFallback = isValidMagnetUri(fallbackMagnet)
-      ? fallbackMagnet.trim()
-      : "";
-    const rawFallback = isValidMagnetUri(fallbackRawMagnet)
-      ? fallbackRawMagnet.trim()
-      : "";
-
-    this.resetTorrentStats();
-
-    if (this.modalStatus) {
-      this.modalStatus.textContent = "Loading video...";
+    const sanitizedUrl = typeof url === "string" ? url.trim() : "";
+    if (!sanitizedUrl) {
+      throw new Error("No URL provided for direct playback.");
     }
 
-    const markUrlReady = () => {
-      if (this.modalStatus) {
-        this.modalStatus.textContent = "Streaming from URL";
+    target.src = sanitizedUrl;
+    target.load();
+
+    try {
+      await target.play();
+    } catch (err) {
+      this.log("Direct URL autoplay failed:", err);
+      if (!target.muted) {
+        this.log("Retrying direct playback with muted audio.");
+        target.muted = true;
+        try {
+          await target.play();
+        } catch (mutedErr) {
+          this.log("Muted direct playback also failed:", mutedErr);
+          throw mutedErr;
+        }
+      } else {
+        throw err;
       }
-      // Defensive clear so the loading GIF never lingers if browsers skip
-      // firing `playing` (some autoplay policies do this).
-      this.forceRemoveModalPoster("http-loadeddata");
-    };
-
-    this.modalVideo.addEventListener("loadeddata", markUrlReady, {
-      once: true,
-    });
-
-    if (normalizedFallback) {
-      this.modalVideo.addEventListener(
-        "error",
-        async () => {
-          this.log("HTTP playback failed, falling back to WebTorrent.");
-          if (this.modalStatus) {
-            this.modalStatus.textContent = "Switching to WebTorrent...";
-          }
-          try {
-            await this.playViaWebTorrent(normalizedFallback, {
-              fallbackMagnet: rawFallback,
-            });
-            this.autoplayModalVideo();
-          } catch (torrentErr) {
-            console.error("WebTorrent fallback failed:", torrentErr);
-            this.showError("Unable to play this video.");
-          }
-        },
-        { once: true }
-      );
     }
-
-    this.modalVideo.src = url;
-    this.modalVideo.load();
   }
 
   async playViaWebTorrent(magnet, { fallbackMagnet = "" } = {}) {
@@ -2327,21 +2304,12 @@ class bitvidApp {
    * Unified playback helper that prefers HTTP URL sources
    * and falls back to WebTorrent when needed.
    */
-  async playVideoWithFallback({
-    url = "",
-    magnet = "",
-    infoHash = "",
-    title = "",
-    description = "",
-  } = {}) {
+  async playVideoWithFallback({ url = "", magnet = "" } = {}) {
     const sanitizedUrl = typeof url === "string" ? url.trim() : "";
     const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
-    const trimmedInfoHash =
-      typeof infoHash === "string" ? infoHash.trim().toLowerCase() : "";
 
     const playbackConfig = deriveTorrentPlaybackConfig({
       magnet: trimmedMagnet,
-      infoHash: trimmedInfoHash,
       url: sanitizedUrl,
       logger: (message) => this.log(message),
     });
@@ -2370,6 +2338,8 @@ class bitvidApp {
         throw new Error("Video element is not ready for playback.");
       }
 
+      this.showModalWithPoster();
+
       if (this.modalStatus) {
         this.modalStatus.textContent = "Preparing video...";
       }
@@ -2390,6 +2360,7 @@ class bitvidApp {
       this.modalVideo.load();
 
       this.resetTorrentStats();
+      this.playSource = null;
 
       if (magnetForPlayback) {
         const label = playbackConfig.didMutate
@@ -2398,32 +2369,107 @@ class bitvidApp {
         this.log(`${label} ${magnetForPlayback}`);
       }
 
-      let urlPlayable = false;
-      if (sanitizedUrl) {
-        urlPlayable = await this.probeUrl(sanitizedUrl);
-      }
+      const startTorrentPlayback = async (reason) => {
+        if (reason) {
+          this.log(reason);
+        }
+
+        if (!magnetForPlayback) {
+          const message =
+            magnetProvided && !magnetForPlayback
+              ? UNSUPPORTED_BTITH_MESSAGE
+              : "No playable source provided.";
+          if (this.modalStatus) {
+            this.modalStatus.textContent = message;
+          }
+          this.playSource = null;
+          this.showError(message);
+          return false;
+        }
+
+        this.modalVideo.pause();
+        this.modalVideo.src = "";
+        this.modalVideo.removeAttribute("src");
+        this.modalVideo.srcObject = null;
+        this.modalVideo.load();
 
-      if (urlPlayable) {
-        await this.playHttp(sanitizedUrl, {
-          fallbackMagnet: magnetForPlayback,
-          fallbackRawMagnet: fallbackMagnet,
-        });
-      } else if (magnetForPlayback) {
         await this.playViaWebTorrent(magnetForPlayback, {
           fallbackMagnet,
         });
-      } else {
-        const message = magnetProvided && !magnetForPlayback
-          ? UNSUPPORTED_BTITH_MESSAGE
-          : "No playable source available.";
-        if (this.modalStatus) {
-          this.modalStatus.textContent = message;
+        this.playSource = "torrent";
+        this.autoplayModalVideo();
+        return true;
+      };
+
+      if (URL_FIRST_ENABLED && sanitizedUrl) {
+        const urlPlayable = await this.probeUrl(sanitizedUrl);
+
+        if (urlPlayable) {
+          const markUrlReady = () => {
+            if (this.modalStatus) {
+              this.modalStatus.textContent = "Streaming from URL";
+            }
+            this.forceRemoveModalPoster("http-loadeddata");
+          };
+
+          const handleHttpError = async () => {
+            this.modalVideo.removeEventListener("loadeddata", markUrlReady);
+            if (this.modalStatus) {
+              this.modalStatus.textContent = "Switching to WebTorrent...";
+            }
+            await startTorrentPlayback(
+              "[playVideoWithFallback] HTTP playback error triggered torrent fallback."
+            );
+          };
+
+          this.modalVideo.addEventListener("loadeddata", markUrlReady, {
+            once: true,
+          });
+          this.modalVideo.addEventListener("error", handleHttpError, {
+            once: true,
+          });
+
+          if (this.modalStatus) {
+            this.modalStatus.textContent = "Loading video...";
+          }
+
+          try {
+            await this.playHttp(this.modalVideo, sanitizedUrl);
+            this.playSource = "url";
+            return;
+          } catch (httpError) {
+            this.log(
+              "[playVideoWithFallback] Direct URL playback promise rejected:",
+              httpError
+            );
+            this.modalVideo.removeEventListener("error", handleHttpError);
+            this.modalVideo.removeEventListener("loadeddata", markUrlReady);
+            if (this.modalStatus) {
+              this.modalStatus.textContent = "Switching to WebTorrent...";
+            }
+            await startTorrentPlayback(
+              "[playVideoWithFallback] Falling back to torrent after direct URL failure."
+            );
+            return;
+          }
         }
-        this.showError(message);
+      }
+
+      if (magnetForPlayback) {
+        await startTorrentPlayback(
+          "[playVideoWithFallback] Using WebTorrent fallback for playback."
+        );
         return;
       }
 
-      this.autoplayModalVideo();
+      const message = magnetProvided && !magnetForPlayback
+        ? UNSUPPORTED_BTITH_MESSAGE
+        : "No playable source provided.";
+      if (this.modalStatus) {
+        this.modalStatus.textContent = message;
+      }
+      this.playSource = null;
+      this.showError(message);
     } catch (error) {
       this.log("Error in playVideoWithFallback:", error);
       this.showError(`Playback error: ${error.message}`);
@@ -2492,8 +2538,6 @@ class bitvidApp {
 
     this.currentMagnetUri = sanitizedMagnet || null;
 
-    await this.showModalWithPoster();
-
     this.setCopyMagnetState(!!sanitizedMagnet);
     this.setShareButtonState(true);
 
@@ -2549,9 +2593,6 @@ class bitvidApp {
     await this.playVideoWithFallback({
       url: trimmedUrl,
       magnet: usableMagnetCandidate,
-      infoHash: legacyInfoHash,
-      title: video.title,
-      description: video.description,
     });
   }
 
@@ -2576,8 +2617,6 @@ class bitvidApp {
       return;
     }
 
-    await this.showModalWithPoster();
-
     this.currentVideo = {
       id: null,
       title,
@@ -2622,8 +2661,6 @@ class bitvidApp {
     await this.playVideoWithFallback({
       url: sanitizedUrl,
       magnet: usableMagnet,
-      title,
-      description,
     });
   }
 

From aaf906666626bac6552192145585441b62ff3e75 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 21:49:43 -0400
Subject: [PATCH 057/101] Add cached URL health badges to video cards

---
 js/app.js            | 255 +++++++++++++++++++++++++++++++++++++++++++
 js/channelProfile.js |  46 +++++---
 js/subscriptions.js  |  16 +++
 3 files changed, 303 insertions(+), 14 deletions(-)

diff --git a/js/app.js b/js/app.js
index eb0e3dae..7bfbab96 100644
--- a/js/app.js
+++ b/js/app.js
@@ -26,6 +26,100 @@ const UNSUPPORTED_BTITH_MESSAGE =
   "This magnet link is missing a compatible BitTorrent v1 info hash.";
 
 const FALLBACK_THUMBNAIL_SRC = "assets/jpg/video-thumbnail-fallback.jpg";
+// We probe hosted URLs often enough that a naive implementation would spam
+// remote CDNs. A tiny, short-lived cache keeps us from hammering dead hosts
+// while still giving the UI near-real-time feedback when a URL comes back.
+const URL_HEALTH_TTL_MS = 45_000;
+const urlHealthCache = new Map();
+const urlHealthInFlight = new Map();
+
+/**
+ * Returns the cached health result for a given event ID when the entry is
+ * still "fresh". Entries are evicted eagerly once their TTL expires or when
+ * the associated URL changes (e.g. a user edits the post to point elsewhere).
+ */
+function readUrlHealthFromCache(eventId, url) {
+  if (!eventId) {
+    return null;
+  }
+
+  const entry = urlHealthCache.get(eventId);
+  if (!entry) {
+    return null;
+  }
+
+  const now = Date.now();
+  if (entry.expiresAt <= now) {
+    urlHealthCache.delete(eventId);
+    return null;
+  }
+
+  if (url && entry.url && entry.url !== url) {
+    urlHealthCache.delete(eventId);
+    return null;
+  }
+
+  return entry;
+}
+
+/**
+ * Stores a health result and calculates the expiry moment. The TTL is short on
+ * purpose (~45s) so we recover quickly when a CDN comes back online while
+ * still avoiding redundant probes during render thrash.
+ */
+function writeUrlHealthToCache(eventId, url, result, ttlMs = URL_HEALTH_TTL_MS) {
+  if (!eventId) {
+    return null;
+  }
+
+  const ttl = typeof ttlMs === "number" && ttlMs > 0 ? ttlMs : URL_HEALTH_TTL_MS;
+  const now = Date.now();
+  const entry = {
+    status: result?.status || "checking",
+    message: result?.message || "Checking hosted URL…",
+    url: url || result?.url || "",
+    expiresAt: now + ttl,
+    lastCheckedAt: now,
+  };
+  urlHealthCache.set(eventId, entry);
+  return entry;
+}
+
+/**
+ * Tracks in-flight probe promises so that multiple cards rendering the same
+ * event simultaneously do not all fire off duplicate requests. The stored
+ * metadata includes the URL so edits invalidate the old request immediately.
+ */
+function setInFlightUrlProbe(eventId, url, promise) {
+  if (!eventId || !promise) {
+    return;
+  }
+
+  urlHealthInFlight.set(eventId, { promise, url });
+  promise.finally(() => {
+    const current = urlHealthInFlight.get(eventId);
+    if (current && current.promise === promise) {
+      urlHealthInFlight.delete(eventId);
+    }
+  });
+}
+
+function getInFlightUrlProbe(eventId, url) {
+  if (!eventId) {
+    return null;
+  }
+
+  const entry = urlHealthInFlight.get(eventId);
+  if (!entry) {
+    return null;
+  }
+
+  if (url && entry.url && entry.url !== url) {
+    return null;
+  }
+
+  return entry.promise;
+}
 // NOTE: The modal uses a "please stand by" animated poster while the torrent
 // or direct URL boots up. We've regressed multiple times by forgetting to clear
 // that poster once playback starts, which leaves the loading GIF covering the
@@ -1544,6 +1638,151 @@ class bitvidApp {
     return olderMatches.length > 0;
   }
 
+  /**
+   * Centralised helper for other modules (channel profiles, subscriptions)
+   * so they can re-use the exact same badge skeleton. Keeping the markup in
+   * one place avoids subtle mismatches when we tweak copy or classes later.
+   */
+  getUrlHealthPlaceholderMarkup() {
+    return `
+      <div
+        class="url-health-badge mt-3 text-xs font-semibold px-2 py-1 rounded inline-flex items-center gap-1 bg-gray-800 text-gray-300"
+        data-url-health-state="checking"
+        aria-live="polite"
+        role="status"
+      >
+        Checking hosted URL…
+      </div>
+    `;
+  }
+
+  getCachedUrlHealth(eventId, url) {
+    return readUrlHealthFromCache(eventId, url);
+  }
+
+  storeUrlHealth(eventId, url, result, ttlMs) {
+    return writeUrlHealthToCache(eventId, url, result, ttlMs);
+  }
+
+  updateUrlHealthBadge(badgeEl, state, videoId) {
+    if (!badgeEl || !badgeEl.isConnected) {
+      return;
+    }
+
+    if (videoId && badgeEl.dataset.urlHealthFor && badgeEl.dataset.urlHealthFor !== videoId) {
+      return;
+    }
+
+    const status = state?.status || "checking";
+    const message = state?.message ||
+      (status === "healthy"
+        ? "CDN Healthy"
+        : status === "offline"
+        ? "URL offline — using P2P fallback"
+        : "Checking hosted URL…");
+
+    badgeEl.dataset.urlHealthState = status;
+    badgeEl.setAttribute("aria-live", "polite");
+    badgeEl.setAttribute("role", status === "offline" ? "alert" : "status");
+    badgeEl.textContent = message;
+
+    badgeEl.className =
+      "url-health-badge mt-3 text-xs font-semibold px-2 py-1 rounded transition-colors duration-200";
+
+    if (status === "healthy") {
+      badgeEl.classList.add(
+        "inline-flex",
+        "items-center",
+        "gap-1",
+        "bg-green-900",
+        "text-green-200"
+      );
+    } else if (status === "offline") {
+      badgeEl.classList.add("block", "bg-red-900", "text-red-200");
+    } else {
+      badgeEl.classList.add(
+        "inline-flex",
+        "items-center",
+        "gap-1",
+        "bg-gray-800",
+        "text-gray-300"
+      );
+    }
+  }
+
+  handleUrlHealthBadge({ video, url, badgeEl }) {
+    if (!video?.id || !badgeEl || !url) {
+      return;
+    }
+
+    const eventId = video.id;
+    const trimmedUrl = typeof url === "string" ? url.trim() : "";
+    if (!trimmedUrl) {
+      return;
+    }
+
+    badgeEl.dataset.urlHealthFor = eventId;
+
+    const cached = this.getCachedUrlHealth(eventId, trimmedUrl);
+    if (cached) {
+      this.updateUrlHealthBadge(badgeEl, cached, eventId);
+      return;
+    }
+
+    this.updateUrlHealthBadge(badgeEl, { status: "checking" }, eventId);
+
+    const existingProbe = getInFlightUrlProbe(eventId, trimmedUrl);
+    if (existingProbe) {
+      existingProbe
+        .then((entry) => {
+          if (entry) {
+            this.updateUrlHealthBadge(badgeEl, entry, eventId);
+          }
+        })
+        .catch((err) => {
+          console.warn(
+            `[urlHealth] cached probe promise rejected for ${trimmedUrl}:`,
+            err
+          );
+        });
+      return;
+    }
+
+    const probePromise = this.probeUrl(trimmedUrl)
+      .then((ok) => {
+        const result = ok
+          ? { status: "healthy", message: "CDN Healthy" }
+          : {
+              status: "offline",
+              message: "URL offline — using P2P fallback",
+            };
+        return this.storeUrlHealth(eventId, trimmedUrl, result);
+      })
+      .catch((err) => {
+        console.warn(`[urlHealth] probe failed for ${trimmedUrl}:`, err);
+        const result = {
+          status: "offline",
+          message: "URL offline — using P2P fallback",
+        };
+        return this.storeUrlHealth(eventId, trimmedUrl, result);
+      });
+
+    setInFlightUrlProbe(eventId, trimmedUrl, probePromise);
+
+    probePromise
+      .then((entry) => {
+        if (entry) {
+          this.updateUrlHealthBadge(badgeEl, entry, eventId);
+        }
+      })
+      .catch((err) => {
+        console.warn(
+          `[urlHealth] probe promise rejected post-cache for ${trimmedUrl}:`,
+          err
+        );
+      });
+  }
+
   async renderVideoList(videos) {
     if (!this.videoList) return;
 
@@ -1662,6 +1901,10 @@ class bitvidApp {
         `
         : "";
 
+      const urlStatusHtml = trimmedUrl
+        ? this.getUrlHealthPlaceholderMarkup()
+        : "";
+
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <!-- The clickable link to play video -->
@@ -1718,6 +1961,7 @@ class bitvidApp {
               </div>
               ${gearMenu}
             </div>
+            ${urlStatusHtml}
             ${torrentBadge}
           </div>
         </div>
@@ -1748,6 +1992,17 @@ class bitvidApp {
             el.dataset.torrentSupported = magnetSupported ? "true" : "false";
           }
         });
+
+        if (trimmedUrl) {
+          const badgeEl = cardEl.querySelector("[data-url-health-state]");
+          if (badgeEl) {
+            this.handleUrlHealthBadge({
+              video,
+              url: trimmedUrl,
+              badgeEl,
+            });
+          }
+        }
       }
       fragment.appendChild(cardEl);
     });
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 833c1262..0ad2eaf0 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -345,7 +345,11 @@ async function loadUserVideos(pubkey) {
       const magnetCandidate = trimmedMagnet || legacyInfoHash;
       const playbackUrl =
         typeof video.url === "string" ? video.url : "";
+      const trimmedUrl = playbackUrl ? playbackUrl.trim() : "";
       const playbackMagnet = magnetCandidate || "";
+      const urlStatusHtml = trimmedUrl
+        ? app.getUrlHealthPlaceholderMarkup()
+        : "";
 
       cardEl.innerHTML = `
         <div
@@ -362,21 +366,24 @@ async function loadUserVideos(pubkey) {
             />
           </div>
         </div>
-        <div class="p-4 flex items-center justify-between">
-          <div>
-            <h3
-              class="text-lg font-bold text-white mb-2 line-clamp-2"
-              data-video-id="${video.id}"
-              data-play-url=""
-              data-play-magnet=""
-            >
-              ${safeTitle}
-            </h3>
-            <p class="text-sm text-gray-500">
-              ${new Date(video.created_at * 1000).toLocaleString()}
-            </p>
+        <div class="p-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <h3
+                class="text-lg font-bold text-white mb-2 line-clamp-2"
+                data-video-id="${video.id}"
+                data-play-url=""
+                data-play-magnet=""
+              >
+                ${safeTitle}
+              </h3>
+              <p class="text-sm text-gray-500">
+                ${new Date(video.created_at * 1000).toLocaleString()}
+              </p>
+            </div>
+            ${gearMenu}
           </div>
-          ${gearMenu}
+          ${urlStatusHtml}
         </div>
       `;
 
@@ -393,6 +400,17 @@ async function loadUserVideos(pubkey) {
         el.dataset.playMagnet = playbackMagnet || "";
       });
 
+      if (trimmedUrl) {
+        const badgeEl = cardEl.querySelector("[data-url-health-state]");
+        if (badgeEl) {
+          app.handleUrlHealthBadge({
+            video,
+            url: trimmedUrl,
+            badgeEl,
+          });
+        }
+      }
+
       fragment.appendChild(cardEl);
     });
 
diff --git a/js/subscriptions.js b/js/subscriptions.js
index be192aee..61031c5d 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -348,6 +348,10 @@ class SubscriptionsManager {
         typeof video.url === "string" ? video.url : "";
       const playbackMagnet =
         typeof video.magnet === "string" ? video.magnet : "";
+      const trimmedUrl = playbackUrl ? playbackUrl.trim() : "";
+      const urlStatusHtml = trimmedUrl
+        ? window.app?.getUrlHealthPlaceholderMarkup?.() ?? ""
+        : "";
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <a
@@ -398,6 +402,7 @@ class SubscriptionsManager {
               </div>
               ${gearMenu}
             </div>
+            ${urlStatusHtml}
           </div>
         </div>
       `;
@@ -417,6 +422,17 @@ class SubscriptionsManager {
           el.dataset.playUrl = encodeURIComponent(playbackUrl || "");
           el.dataset.playMagnet = playbackMagnet || "";
         });
+
+        if (trimmedUrl && window.app?.handleUrlHealthBadge) {
+          const badgeEl = cardEl.querySelector("[data-url-health-state]");
+          if (badgeEl) {
+            window.app.handleUrlHealthBadge({
+              video,
+              url: trimmedUrl,
+              badgeEl,
+            });
+          }
+        }
       }
       fragment.appendChild(cardEl);
     });

From e85831bbf60636f98d275ba4726b47cacd15cc3d Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 21:53:50 -0400
Subject: [PATCH 058/101] Update contributor docs for URL-first playback

---
 AGENTS.md  | 279 ++++++++---------------------------------------------
 README.md  |  28 +++++-
 docs/qa.md |  21 ++++
 3 files changed, 88 insertions(+), 240 deletions(-)
 create mode 100644 docs/qa.md

diff --git a/AGENTS.md b/AGENTS.md
index 6e791b76..c8c593f9 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,263 +1,66 @@
-# Bitvid — AI Agent Guide (AGENTS.md)
+# Bitvid — AI Agent Guide
 
-This document tells AI agents how Bitvid works **now** and how to extend it going forward. It focuses on the newly adopted **URL‑first playback with WebTorrent fallback** strategy, minimal code touchpoints, and reliable interop with the Nostr ecosystem.
-
-As you work in the repo, please add detailed comments to help others understand what and why your code is doing. 
+This guide tells AI agents how to keep Bitvid aligned with the current product direction. Follow it whenever you touch code, content, or documentation inside this repository.
 
 ---
 
-## 1) Mission & Product Direction
+## 1. Mission: URL‑First Playback with WebTorrent Fallback
 
-**Goal:** Stream videos reliably and cheaply.
-
-* **Primary transport:** a **hosted video URL** (MP4/WebM/HLS/DASH) that plays directly in the browser.
-* **Secondary transport (fallback & cost control):** a **WebTorrent magnet** enhanced with **`ws=` (web seed)** and **`xs=` (.torrent URL)**.
-* **Behavior:** Try `url` first. If it’s missing or unreachable, **fallback to WebTorrent** using the same post’s magnet. If the magnet includes `ws`/`xs`, WebTorrent can bootstrap via HTTP and/or peers.
-* **Nostr interop:** Keep existing kind `30078` events for Bitvid’s app data; optionally **mirror a NIP‑94 kind `1063`** event so other clients can discover the same hosted video URL.
-* **Resilience:** Light link‑health probing to hide/flag dead URLs and avoid broken playback.
+* **Goal:** Always deliver smooth playback while keeping hosting costs low.
+* **Primary transport:** A hosted video URL (MP4/WebM/HLS/DASH) that the `<video>` element can stream directly.
+* **Fallback transport:** A WebTorrent magnet that includes browser‑safe trackers plus optional HTTP hints.
+* **Runtime behavior:** Call `playVideoWithFallback({ url, magnet })` (see `js/playbackUtils.js`). It probes the URL first; only when that fails should WebTorrent start.
+* **Content contract:** Bitvid posts (Nostr kind `30078`) must include a `title` and at least one of `url` or `magnet`. Prefer to publish both along with optional `thumbnail`, `description`, and `mode` fields. When mirroring to NIP‑94 (`kind 1063`), copy the hosted URL and (optionally) the magnet so other clients can discover the same asset.
 
 ---
 
-## 2) High‑Level Architecture
+## 2. Magnet Handling — Do’s & Don’ts
 
-* **Frontend app** (vanilla JS + HTML/CSS)
-
-  * **Upload modal** accepts: Title (required), **URL or Magnet** (at least one required), Thumbnail, Description. Optional fields for **`ws`** and **`xs`** help P2P bootstrap.
-  * **Feed / Cards** render video posts, each carrying both `data-play-url` and `data-play-magnet` attributes.
-  * **Player** uses `playVideoWithFallback({ url, magnet })`: probe `url`; if OK, play via `<video>`; else call `torrentClient.streamVideo(magnet, videoEl)`.
-* **Nostr client**
-
-  * Publishes Bitvid’s **kind `30078`** events with content `{ version, title, url?, magnet?, thumbnail?, description?, mode }`.
-  * Subscribes to Bitvid video events and (optionally) **NIP‑94 `kind 1063`** to interop with external clients.
-* **Optional Upload API** (future): If adding server‑side upload (NIP‑96/98), the client would POST to an uploader, receive an HTTPS URL, then publish events.
+* **Use the helpers:** Always pass inbound values through `safeDecodeMagnet()` before playback, and use `normalizeAndAugmentMagnet()` (see `js/magnetUtils.js`) to append `ws=` or `xs=` hints.
+* **Do keep magnets raw:** Store and reuse the literal `magnet:?xt=urn:btih:...` string. Decode once, then feed that exact value to WebTorrent.
+* **Don’t call `new URL()` on magnets:** URL constructors/`URLSearchParams` percent‑encode the `xt` payload and can break legacy hashes. Manipulate magnets via the helper utilities or string concatenation.
+* **Do encourage HTTP hints:** `ws=` (web seed) should point to an HTTPS file root; `xs=` points to a `.torrent`. They help the fallback path warm up quickly.
+* **Don’t ship insecure trackers:** Stick to the WSS tracker list exported from `js/constants.js`. Avoid UDP or plaintext HTTP trackers in browser code.
 
 ---
 
-## 3) Data Contracts
+## 3. Upload Modal Troubleshooting
 
-### 3.1 Bitvid app event (kind `30078`)
-
-**Content JSON** (superset; some fields optional):
-
-```json
-{
-  "version": 2,
-  "title": "<string>",
-  "url": "https://cdn.example.com/video.mp4",     // optional but recommended
-  "magnet": "magnet:?xt=urn:btih:...&tr=...",      // optional but recommended
-  "thumbnail": "https://.../thumb.jpg",            // optional
-  "description": "<string>",                       // optional
-  "mode": "live" | "dev"                          // optional
-}
-```
-
-**Validation:**
-
-* `title` **required**; **at least one** of `url` **or** `magnet` **required**.
-* If `magnet` present and uploader supplied `ws` and/or `xs`, append them to the magnet before publish.
-
-### 3.2 NIP‑94 mirror (kind `1063`, optional but encouraged)
-
-**Tags (typical):**
-
-* `["url", "https://cdn.example.com/video.mp4"]`
-* `["m", "video/mp4"]` (or `video/webm`, `application/x-mpegURL`, etc.)
-* `["thumb", "https://.../thumb.jpg"]` (optional)
-* `["alt", "<title or description>"]` (optional)
-* `["size", "<bytes>"]` (optional)
-* `["x", "<sha256-of-file>"]` (optional integrity)
-* `["magnet", "magnet:?xt=...&ws=...&xs=..."]` (optional for P2P aware clients)
-
-> Agents SHOULD keep Bitvid’s 30078 as the source of truth, and publish a **lossless mirror** into 1063 when possible.
+1. **Required fields:** Validation must ensure a title exists and that either a hosted URL or a magnet (or both) is supplied. Optional `ws` / `xs` inputs should be appended only when a magnet is present.
+2. **Magnet parsing errors:** When a user pastes encoded magnets, run `safeDecodeMagnet()` before normalizing. Show inline errors if decoding fails.
+3. **URL-first promise:** After submission, confirm the resulting feed item carries `data-play-url` and `data-play-magnet` attributes so playback utilities can attempt the URL first.
+4. **Mixed-content warnings:** If the page is served over HTTPS, reject `ws=` or `xs=` hints that begin with `http://` and show guidance to upgrade to HTTPS.
+5. **Telemetry hooks:** Keep existing analytics/logging untouched unless instructed. If you add new modal states, annotate them clearly in code comments.
 
 ---
 
-## 4) UI & UX Flows
+## 4. Manual QA Checklist
 
-### 4.1 Upload Flow (author)
+Run this script before shipping notable UI changes, especially around upload/playback flows. Automate when possible, but manual verification is required for releases.
 
-1. Author opens **Upload modal**.
-2. Inputs **Title**, plus **either** Hosted URL **or** Magnet (or both). Optionally adds **Web seed base (ws)** and **.torrent URL (xs)**.
-3. Client **augments magnet** with `ws`/`xs` and publishes a kind `30078` event (and optionally a NIP‑94 `1063`).
+1. **Smoke test the modal**
+   * Launch the site, open the Upload modal, and confirm required-field validation (title + one of URL/magnet).
+   * Submit with URL only, magnet only, and both; ensure success states are clear.
+2. **URL-first playback**
+   * Publish a post with both URL and magnet. Load the card and verify the player fetches the hosted URL first (check network tab or logs).
+   * Temporarily block the URL (e.g., devtools throttling or offline). Confirm playback seamlessly falls back to the magnet.
+3. **Magnet hygiene**
+   * Paste an encoded magnet; ensure `safeDecodeMagnet()` returns the raw value and the final string still includes the original `xt` hash.
+   * Confirm `normalizeAndAugmentMagnet()` appends `ws=`/`xs=` hints without corrupting parameters.
+4. **P2P hints**
+   * Verify magnets authored through the modal include HTTPS `ws=` and optional `xs=` values when provided.
+   * Ensure tracker lists come from `js/constants.js` and remain WSS-only.
+5. **Cross-browser sanity**
+   * Spot-check playback in Chromium and Firefox (desktop) to ensure no console errors related to CORS, Range requests, or tracker connections.
 
-### 4.2 Consumption Flow (viewer)
-
-1. Feed renders cards with `data-play-url` + `data-play-magnet`.
-2. On click: `playVideoWithFallback()`
-
-   * `probeUrl(url)` → If reachable, set `<video>.src = url` and play.
-   * Else: `torrentClient.streamVideo(magnet, videoEl)`.
-3. UI hides or badges items whose `probeUrl()` fails consistently (cached temporarily).
+Document the run in PR descriptions so QA can cross-reference results.
 
 ---
 
-## 5) Key Client Functions (reference)
+## 5. Additional Notes for Agents
 
-### 5.1 `normalizeAndAugmentMagnet(raw, { webSeed?, torrentUrl?, xs?, extraTrackers? })`
-
-* Accepts a magnet URI or bare hex info hash and returns a **sanitized magnet**.
-* Fixes accidentally encoded `xt=urn%3Abtih:` segments and tolerates bare hashes by
-  promoting them to `magnet:?xt=urn:btih:<hash>`.
-* Appends only **browser-safe WSS trackers** plus optional extras, avoiding mixed
-  content.
-* Adds HTTPS web seeds (`ws=`) and torrent hints (`xs=`) when provided, skipping
-  insecure `http://` web seeds unless the app itself is served via HTTP.
-* Preserves existing parameters in their original form—no `new URL()` usage and no
-  percent re-encoding of the `xt` payload.
-
-### 5.2 `probeUrl(url)`
-
-* `HEAD` request to check availability; expects `2xx` and (ideally) `Accept-Ranges: bytes`.
-* Fallback small `GET` with `Range: bytes=0-1023` can be used if certain hosts block `HEAD`.
-* Returns boolean `ok`.
-
-### 5.3 `playVideoWithFallback({ url, magnet })`
-
-* Try `playHttp(url)` if `probeUrl(url)` passes.
-* Else try `playViaWebTorrent(magnet)`.
-* Show UI error if neither source available.
-
-### 5.4 `playViaWebTorrent(magnet)`
-
-* Uses existing `torrentClient.streamVideo(magnet, videoEl)` under the hood.
-* Benefits if magnet contains `ws`/`xs` for bootstrap.
-
----
-
-## 6) Markup Contracts
-
-* **Cards:** add both attributes where applicable:
-
-  * `data-play-url="<encoded URL or empty>"`
-  * `data-play-magnet="<raw magnet or empty>"`
-* **Click delegate:** look for a closest element bearing either attribute; decode
-  both `data-play-url` and `data-play-magnet` (if encoded upstream) **before** passing
-  them to playback logic. Never double-encode magnets when writing them into the DOM.
-
----
-
-## 7) Main vs Unstable — legacy WebTorrent compatibility lessons
-
-Legacy Bitvid posts (v1 / magnet-only) still play on **Main**. They broke on
-**Unstable** because of double-encoded magnets, URL constructors, and strict
-filters. Apply these rules to stay compatible:
-
-* **Raw magnets end-to-end.** Store the literal `magnet:?xt=urn:btih:...` in the DOM
-  and feed that same string into WebTorrent. If you must encode for transport, be
-  sure to decode once when handling clicks.
-* **No `new URL()` for magnets.** Appending params with `URLSearchParams` or `new URL`
-  percent-encodes the `xt` value and can corrupt legacy hashes. When you need to add
-  trackers or cache-busting params, concatenate plain text (or use
-  `normalizeAndAugmentMagnet`, which already preserves the payload).
-* **Converters should allow magnet-only posts.** A note is playable when it exposes
-  either a usable `magnet` **or** a direct `url`. Don’t require `version >= 2` to keep
-  legacy uploads alive.
-* **Browser-safe announce list.** Ship WSS trackers for browser playback. Skip UDP
-  trackers in the client path and only add `ws=` hints when they’re HTTPS on HTTPS
-  pages (mixed content gets blocked anyway).
-
----
-
-## 8) Server Requirements for Hosted URLs
-
-* **CORS:** allow the app origin (or `*`).
-* **Range requests:** ensure `Accept-Ranges: bytes`.
-* **Correct MIME:** `video/mp4`, `video/webm`, `application/x-mpegURL`, etc.
-* **Optional:** expose `Content-Length` for better UX/progress.
-
----
-
-## 9) P2P Notes for Agents
-
-* **`ws=` (web seed):** HTTP(S) base path where the file is fetchable; enables WebTorrent to download pieces even with zero peers.
-* **`xs=`:** HTTP(S) URL of the `.torrent` metadata so the client can start promptly without DHT/peer discovery.
-* **Trackers:** Keep WSS trackers for peer discovery; they reduce CDN load when peers exist.
-
----
-
-## 10) Interop & Extensions
-
-* **Live streams:** future option via HLS URLs (MIME `application/x-mpegURL`). For Nostr live presence, consider **NIP‑53** events alongside VOD 1063 entries.
-* **Adaptive Bitrate + P2P:** if ABR is needed with P2P, consider a segment‑sharing overlay (e.g., p2p segment loaders) rather than WebTorrent.
-* **Uploads (optional):** NIP‑96/NIP‑98 flow to obtain a hosted URL, then publish Bitvid/NIP‑94 events.
-
----
-
-## 11) Testing Checklist (agents)
-
-* **Form validation:** title present; ensure `(url || magnet)` is true; `ws` and `xs` appended only for magnet.
-* **Probe:** healthy URL returns `ok=true`; dead URL hides/badges card; cache prevents re‑probing every render.
-* **Playback:** URL path plays successfully; disconnect network to force WebTorrent path; verify video plays via magnet.
-* **CORS & Range:** verify no console CORS errors; confirm seeking works.
-* **Events:** verify kind `30078` contains `url` and/or `magnet`; optional 1063 mirror created correctly.
-* **Cards:** both `data-play-url` and `data-play-magnet` present; click handler calls fallback player.
-
----
-
-## 12) Guardrails & Do/Don’t
-
-**Do**
-
-* Fail soft: when URL fails, fall back to magnet without blocking UI.
-* Prefer standards: URL + NIP‑94 mirror when possible.
-* Degrade gracefully when `ws`/`xs` missing; torrent should still work with peers.
-
-**Don’t**
-
-* Don’t require magnet if URL is provided (and vice versa).
-* Don’t assume CORS/Range are configured—probe and message helpfully.
-* Don’t block the main thread with large HEAD/GETs; keep probes lightweight with timeouts.
-
----
-
-## 13) Quick Reference (snippets)
-
-**Bitvid content object (30078)**
-
-```js
-const content = {
-  version: 2,
-  title,
-  url,            // optional but preferred
-  magnet,         // optional but preferred
-  thumbnail,      // optional
-  description,    // optional
-  mode            // "live" | "dev"
-};
-```
-
-**Magnet normalization & augmentation**
-
-```js
-import { normalizeAndAugmentMagnet } from "./js/magnetUtils.js";
-
-const { magnet } = normalizeAndAugmentMagnet(inputMagnetOrInfoHash, {
-  webSeed: hostedUrl ? [hostedUrl] : [],
-  torrentUrl: xsHint,
-  extraTrackers: ["wss://tracker.openwebtorrent.com"],
-});
-
-// Feed `magnet` directly to playVideoWithFallback / WebTorrent.
-```
-
-**Playback with fallback**
-
-```js
-async function playVideoWithFallback({ url, magnet }) {
-  if (url && await probeUrl(url)) return playHttp(url);
-  if (magnet) return playViaWebTorrent(magnet);
-  throw new Error("No playable source");
-}
-```
-
----
-
-## 14) Roadmap Hooks (where to extend)
-
-* **Analytics:** Keep using your existing 30078 analytics/logging. Add fields for `play_source: "url"|"torrent"` to measure cost savings.
-* **Integrity:** Optionally compute SHA‑256 of the hosted file (off‑thread) and publish as NIP‑94 `["x", hash]` tag.
-* **Moderation:** Add a background task to periodically probe and mark dead links; publish a lightweight status event so other Bitvid clients learn from each other.
-
----
+* **Nostr interoperability:** Keep kind `30078` events as the source of truth and optionally mirror to kind `1063` so external clients see the hosted URL.
+* **Probing:** Lightweight `HEAD`/`GET` requests should back `probeUrl()` so dead URLs can be hidden or flagged without blocking the UI.
+* **Extensibility:** Future work (live streams, NIP-96 uploads, analytics) should preserve the URL-first strategy and magnet safety rules above.
 
 **End of AGENTS.md**
diff --git a/README.md b/README.md
index 9b46b0ed..88b09ccb 100644
--- a/README.md
+++ b/README.md
@@ -27,10 +27,15 @@
 2. **Login with Nostr**:
    - Use a compatible Nostr browser extension or manually input your public key.
 3. **Upload Videos**:
-   - Provide a title, magnet link, and optional thumbnail or description.
+   - Provide a title plus a hosted URL (recommended) and optionally a magnet link. Bitvid plays the URL first and falls back to WebTorrent.
    - Toggle "Private" for encrypted listings.
 4. **Stream Videos**:
-   - Play videos directly in the browser using WebTorrent technology.
+   - The player attempts the hosted URL first and uses WebTorrent as a fallback when a magnet is available.
+
+#### P2P Hints
+
+- Append `ws=` parameters to magnets to expose HTTPS web seeds that help the fallback warm up quickly.
+- Append `xs=` parameters when you have an HTTPS `.torrent` URL so WebTorrent can bootstrap without waiting on peer discovery.
 
 ---
 
@@ -67,6 +72,10 @@ To run **bitvid** locally:
 
 - **`config.js`**:
   - Toggle `isDevMode` for development (`true`) or production (`false`).
+- **`js/constants.js`**:
+  - Source for browser-safe tracker lists and feature flags that govern WebTorrent behavior.
+- **Magnet helpers**:
+  - Use `safeDecodeMagnet()` and `normalizeAndAugmentMagnet()` from `js/magnetUtils.js` to preserve hashes and add `ws=` / `xs=` hints safely.
 
 ### Adding Features
 
@@ -101,6 +110,21 @@ To run **bitvid** locally:
 - Follow the [MIT License](https://opensource.org/licenses/MIT).
 - Use clear, concise commit messages.
 - Respect the existing coding style and architecture.
+- Run the manual QA script (see below) and note results in PR descriptions for changes that affect upload or playback.
+
+---
+
+## Testing
+
+Use the manual QA checklist before releases or when altering upload/playback flows:
+
+1. Open the Upload modal, confirm validation (title plus URL or magnet), and test submissions for URL-only, magnet-only, and combined entries.
+2. Publish a post with both URL and magnet, verify the player streams the hosted URL, then simulate a URL failure and confirm WebTorrent playback.
+3. Paste encoded magnets to ensure `safeDecodeMagnet()` returns the raw string and `normalizeAndAugmentMagnet()` adds `ws=` / `xs=` hints without corruption.
+4. Confirm magnets include HTTPS `ws=` / optional `xs=` hints and use the WSS tracker list from `js/constants.js`.
+5. Spot-check Chromium and Firefox for console warnings (CORS, Range requests, tracker connectivity).
+
+See [`docs/qa.md`](docs/qa.md) for the copy/paste-friendly checklist we share with QA.
 
 ---
 
diff --git a/docs/qa.md b/docs/qa.md
new file mode 100644
index 00000000..2b785423
--- /dev/null
+++ b/docs/qa.md
@@ -0,0 +1,21 @@
+# Bitvid Manual QA Script
+
+Run this checklist before publishing releases or merging changes that touch upload or playback flows. Copy/paste the steps into QA tickets when requesting validation.
+
+1. **Upload Modal Smoke Test**
+   - Open the Upload modal, verify title is required, and ensure either a hosted URL or a magnet (or both) must be supplied.
+   - Submit three variants: URL-only, magnet-only, and both URL + magnet. Confirm success messaging or event publication in each case.
+2. **URL-First Playback**
+   - For a post with both URL and magnet, play the video and confirm the hosted URL loads first (inspect network requests or logs).
+   - Simulate a dead URL (offline mode or request blocker) and confirm playback falls back to WebTorrent without breaking the UI.
+3. **Magnet Safety**
+   - Paste an encoded magnet and confirm `safeDecodeMagnet()` outputs the raw string before playback.
+   - Ensure `normalizeAndAugmentMagnet()` adds provided `ws=` / `xs=` hints while keeping the original `xt` hash intact.
+4. **P2P Hints & Trackers**
+   - Confirm magnets generated through the modal include HTTPS `ws=` seeds and optional HTTPS `xs=` torrent URLs when supplied.
+   - Check that tracker arrays originate from `js/constants.js` and only include WSS endpoints.
+5. **Cross-Browser Verification**
+   - Spot-check Chromium and Firefox (desktop) for console warnings about CORS, Range requests, or tracker connectivity.
+   - Optionally validate on mobile Safari/Chrome if the change targets mobile UX.
+
+Document findings (pass/fail notes plus relevant screenshots or logs) so they can be attached to release or PR notes.

From fbd6fa412116617f6e5325eb58c8d642f31febe4 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 22:34:12 -0400
Subject: [PATCH 059/101] feat: add runtime-toggable playback constants

---
 js/constants.js | 166 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 159 insertions(+), 7 deletions(-)

diff --git a/js/constants.js b/js/constants.js
index 8efdc688..38600fe9 100644
--- a/js/constants.js
+++ b/js/constants.js
@@ -1,7 +1,159 @@
-export const URL_FIRST_ENABLED = true;
-export const ACCEPT_LEGACY_V1 = true;
-export const WSS_TRACKERS = [
-  "wss://tracker.openwebtorrent.com",
-  "wss://tracker.btorrent.xyz",
-  "wss://tracker.webtorrent.dev",
-];
+const DEFAULT_FLAGS = Object.freeze({
+  URL_FIRST_ENABLED: true,   // try URL before magnet in the player
+  ACCEPT_LEGACY_V1: true,    // accept v1 magnet-only notes
+  WSS_TRACKERS: Object.freeze([
+    "wss://tracker.openwebtorrent.com",
+    "wss://tracker.btorrent.xyz",
+    "wss://tracker.webtorrent.dev",
+  ]),
+});
+
+const globalScope = typeof globalThis === "object" && globalThis ? globalThis : undefined;
+
+const runtimeFlags = (() => {
+  if (globalScope && typeof globalScope.__BITVID_RUNTIME_FLAGS__ === "object") {
+    return globalScope.__BITVID_RUNTIME_FLAGS__;
+  }
+  const initial = {
+    URL_FIRST_ENABLED: DEFAULT_FLAGS.URL_FIRST_ENABLED,
+    ACCEPT_LEGACY_V1: DEFAULT_FLAGS.ACCEPT_LEGACY_V1,
+    WSS_TRACKERS: [...DEFAULT_FLAGS.WSS_TRACKERS],
+  };
+  if (globalScope) {
+    globalScope.__BITVID_RUNTIME_FLAGS__ = initial;
+  }
+  return initial;
+})();
+
+function coerceBoolean(value, fallback) {
+  if (typeof value === "boolean") {
+    return value;
+  }
+  if (typeof value === "string") {
+    const normalized = value.trim().toLowerCase();
+    if (!normalized) {
+      return fallback;
+    }
+    if (["false", "0", "off", "no"].includes(normalized)) {
+      return false;
+    }
+    if (["true", "1", "on", "yes"].includes(normalized)) {
+      return true;
+    }
+  }
+  if (value == null) {
+    return fallback;
+  }
+  return Boolean(value);
+}
+
+function sanitizeTrackerList(candidate) {
+  const input = Array.isArray(candidate) ? candidate : DEFAULT_FLAGS.WSS_TRACKERS;
+  const seen = new Set();
+  const sanitized = [];
+
+  for (const tracker of input) {
+    if (typeof tracker !== "string") {
+      continue;
+    }
+    const trimmed = tracker.trim();
+    if (!trimmed) {
+      continue;
+    }
+    if (!/^wss:\/\//i.test(trimmed)) {
+      continue;
+    }
+    const normalized = trimmed.toLowerCase();
+    if (seen.has(normalized)) {
+      continue;
+    }
+    seen.add(normalized);
+    sanitized.push(trimmed);
+  }
+
+  if (!sanitized.length) {
+    return [...DEFAULT_FLAGS.WSS_TRACKERS];
+  }
+
+  return sanitized;
+}
+
+function freezeTrackers(list) {
+  return Object.freeze([...list]);
+}
+
+export let URL_FIRST_ENABLED = coerceBoolean(
+  runtimeFlags.URL_FIRST_ENABLED,
+  DEFAULT_FLAGS.URL_FIRST_ENABLED
+);
+
+export let ACCEPT_LEGACY_V1 = coerceBoolean(
+  runtimeFlags.ACCEPT_LEGACY_V1,
+  DEFAULT_FLAGS.ACCEPT_LEGACY_V1
+);
+
+export let WSS_TRACKERS = freezeTrackers(
+  sanitizeTrackerList(runtimeFlags.WSS_TRACKERS)
+);
+
+Object.defineProperty(runtimeFlags, "URL_FIRST_ENABLED", {
+  configurable: true,
+  enumerable: true,
+  get() {
+    return URL_FIRST_ENABLED;
+  },
+  set(next) {
+    URL_FIRST_ENABLED = coerceBoolean(next, DEFAULT_FLAGS.URL_FIRST_ENABLED);
+  },
+});
+
+Object.defineProperty(runtimeFlags, "ACCEPT_LEGACY_V1", {
+  configurable: true,
+  enumerable: true,
+  get() {
+    return ACCEPT_LEGACY_V1;
+  },
+  set(next) {
+    ACCEPT_LEGACY_V1 = coerceBoolean(next, DEFAULT_FLAGS.ACCEPT_LEGACY_V1);
+  },
+});
+
+Object.defineProperty(runtimeFlags, "WSS_TRACKERS", {
+  configurable: true,
+  enumerable: true,
+  get() {
+    return [...WSS_TRACKERS];
+  },
+  set(next) {
+    WSS_TRACKERS = freezeTrackers(sanitizeTrackerList(next));
+  },
+});
+
+// Ensure the runtime object reflects the sanitized defaults immediately.
+runtimeFlags.URL_FIRST_ENABLED = URL_FIRST_ENABLED;
+runtimeFlags.ACCEPT_LEGACY_V1 = ACCEPT_LEGACY_V1;
+runtimeFlags.WSS_TRACKERS = WSS_TRACKERS;
+
+export function setUrlFirstEnabled(next) {
+  runtimeFlags.URL_FIRST_ENABLED = next;
+  return URL_FIRST_ENABLED;
+}
+
+export function setAcceptLegacyV1(next) {
+  runtimeFlags.ACCEPT_LEGACY_V1 = next;
+  return ACCEPT_LEGACY_V1;
+}
+
+export function setWssTrackers(next) {
+  runtimeFlags.WSS_TRACKERS = next;
+  return WSS_TRACKERS;
+}
+
+export function resetRuntimeFlags() {
+  setUrlFirstEnabled(DEFAULT_FLAGS.URL_FIRST_ENABLED);
+  setAcceptLegacyV1(DEFAULT_FLAGS.ACCEPT_LEGACY_V1);
+  setWssTrackers(DEFAULT_FLAGS.WSS_TRACKERS);
+}
+
+export const RUNTIME_FLAGS = runtimeFlags;
+

From 0af08f60b003de11321ae4c2322a39dc5fef26e1 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 24 Sep 2025 22:36:25 -0400
Subject: [PATCH 060/101] Add hosted URL and seed hint inputs to upload modal

---
 components/upload-modal.html | 69 ++++++++++++------------------------
 1 file changed, 22 insertions(+), 47 deletions(-)

diff --git a/components/upload-modal.html b/components/upload-modal.html
index 37fdeb30..59124b05 100644
--- a/components/upload-modal.html
+++ b/components/upload-modal.html
@@ -69,21 +69,31 @@
             />
           </div>
 
-          <div>
-            <label
-              for="uploadUrl"
-              class="block text-sm font-medium text-gray-200"
-              >Hosted video URL</label
+          <!-- Hosted video URL -->
+          <div class="mb-4">
+            <label for="uploadUrl" class="block text-sm font-medium">Hosted video URL</label>
+            <input
+              id="uploadUrl"
+              type="url"
+              class="w-full p-2 rounded"
+              placeholder="https://cdn.example.com/video.mp4 or .webm/.m3u8"
+            >
+          </div>
+
+          <!-- Optional: seed bootstraps for magnet -->
+          <div class="grid grid-cols-1 gap-3 mb-2 text-xs">
+            <input
+              id="uploadWs"
+              type="url"
+              class="w-full p-2 rounded"
+              placeholder="Web seed (ws=) e.g., https://cdn.example.com/video.mp4"
             >
             <input
+              id="uploadXs"
               type="url"
-              id="uploadUrl"
-              placeholder="https://cdn.example.com/video.mp4"
-              class="mt-1 block w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
-            />
-            <p class="mt-1 text-xs text-gray-400">
-              Direct link to your video or stream. Bitvid will play this first before falling back to WebTorrent.
-            </p>
+              class="w-full p-2 rounded"
+              placeholder=".torrent URL (xs=) e.g., https://cdn.example.com/video.torrent"
+            >
           </div>
 
           <div>
@@ -103,41 +113,6 @@
             </p>
           </div>
 
-          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div>
-              <label
-                for="uploadWs"
-                class="block text-sm font-medium text-gray-200"
-                >Web seed base (ws, optional)</label
-              >
-              <input
-                type="url"
-                id="uploadWs"
-                placeholder="https://cdn.example.com/path/to/"
-                class="mt-1 block w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
-              />
-              <p class="mt-1 text-xs text-gray-400">
-                HTTP(S) base path peers can fetch pieces from when falling back to the magnet.
-              </p>
-            </div>
-            <div>
-              <label
-                for="uploadXs"
-                class="block text-sm font-medium text-gray-200"
-                >Torrent metadata URL (xs, optional)</label
-              >
-              <input
-                type="url"
-                id="uploadXs"
-                placeholder="https://cdn.example.com/video.torrent"
-                class="mt-1 block w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
-              />
-              <p class="mt-1 text-xs text-gray-400">
-                Link to the <code>.torrent</code> file so WebTorrent clients can bootstrap instantly.
-              </p>
-            </div>
-          </div>
-
           <div>
             <label
               for="uploadThumbnail"

From 8a9e325c2287424a7f53a3ac7a3c512ea0a563c6 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 06:41:02 -0400
Subject: [PATCH 061/101] Normalize video version parsing

---
 js/nostr.js | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/js/nostr.js b/js/nostr.js
index e2283809..f20d62da 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -263,15 +263,10 @@ function convertEventToVideo(event = {}) {
     return { id: event.id, invalid: true, reason };
   }
 
-  const rawVersion = parsedContent.version;
-  let version = 0;
-  if (typeof rawVersion === "number" && Number.isFinite(rawVersion)) {
-    version = rawVersion;
-  } else if (typeof rawVersion === "string") {
-    const parsedVersion = Number(rawVersion);
-    if (Number.isFinite(parsedVersion)) {
-      version = parsedVersion;
-    }
+  const rawVersion = parsedContent.version ?? 1;
+  let version = Number(rawVersion);
+  if (!Number.isFinite(version)) {
+    version = 1;
   }
 
   return {

From 447aea3d4bbc25998680ff6a20fd3d2d9df096ea Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 06:58:30 -0400
Subject: [PATCH 062/101] Fix playback dataset handling for raw magnets

---
 js/app.js            |  6 +++---
 js/channelProfile.js | 15 ++++++++++-----
 js/subscriptions.js  |  8 +++++++-
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/js/app.js b/js/app.js
index 7bfbab96..51d28298 100644
--- a/js/app.js
+++ b/js/app.js
@@ -984,7 +984,7 @@ class bitvidApp {
 
     const handler = async (event) => {
       const trigger = event.target.closest(
-        "[data-play-url], [data-play-magnet]"
+        "[data-play-magnet],[data-play-url]"
       );
       if (!trigger) {
         return;
@@ -1012,13 +1012,13 @@ class bitvidApp {
           }
         }
 
-        const magnet = safeDecodeMagnet(rawMagnetValue) || rawMagnetValue;
+        const magnet = typeof rawMagnetValue === "string" ? rawMagnetValue : "";
         const eventId = trigger.getAttribute("data-video-id");
 
         if (eventId) {
           await this.playVideoByEventId(eventId);
         } else {
-          await this.playVideoWithoutEvent({ url, magnet });
+          await this.playVideoWithFallback({ url, magnet });
         }
       }
     };
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 0ad2eaf0..73ae117d 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -338,15 +338,14 @@ async function loadUserVideos(pubkey) {
         "duration-300"
       );
 
-      const trimmedMagnet =
-        typeof video.magnet === "string" ? video.magnet.trim() : "";
+      const rawMagnet =
+        typeof video.magnet === "string" ? video.magnet : "";
       const legacyInfoHash =
         typeof video.infoHash === "string" ? video.infoHash.trim() : "";
-      const magnetCandidate = trimmedMagnet || legacyInfoHash;
       const playbackUrl =
         typeof video.url === "string" ? video.url : "";
       const trimmedUrl = playbackUrl ? playbackUrl.trim() : "";
-      const playbackMagnet = magnetCandidate || "";
+      const playbackMagnet = rawMagnet || legacyInfoHash || "";
       const urlStatusHtml = trimmedUrl
         ? app.getUrlHealthPlaceholderMarkup()
         : "";
@@ -396,7 +395,13 @@ async function loadUserVideos(pubkey) {
       const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
       interactiveEls.forEach((el) => {
         if (!el.dataset) return;
-        el.dataset.playUrl = encodeURIComponent(playbackUrl || "");
+
+        if (trimmedUrl) {
+          el.dataset.playUrl = encodeURIComponent(trimmedUrl);
+        } else {
+          delete el.dataset.playUrl;
+        }
+
         el.dataset.playMagnet = playbackMagnet || "";
       });
 
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 61031c5d..c1ab846e 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -419,7 +419,13 @@ class SubscriptionsManager {
         const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
         interactiveEls.forEach((el) => {
           if (!el.dataset) return;
-          el.dataset.playUrl = encodeURIComponent(playbackUrl || "");
+
+          if (trimmedUrl) {
+            el.dataset.playUrl = encodeURIComponent(trimmedUrl);
+          } else {
+            delete el.dataset.playUrl;
+          }
+
           el.dataset.playMagnet = playbackMagnet || "";
         });
 

From 9bf283c2d4c9d5b5c5c7e654d21248a6182ab461 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 07:07:27 -0400
Subject: [PATCH 063/101] Implement URL-first playback fallback

---
 js/app.js | 191 +++++++++++-------------------------------------------
 1 file changed, 37 insertions(+), 154 deletions(-)

diff --git a/js/app.js b/js/app.js
index 51d28298..1eb1296a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2373,103 +2373,43 @@ class bitvidApp {
     }
   }
 
-  /**
-   * HEAD first avoids downloading bytes when probing, but many hosts reject
-   * HEAD or omit `Accept-Ranges`, so we fall back to a tiny `Range:
-   * bytes=0-1023` GET and only warn when range headers are missing. This
-   * fallback prevents false "unplayable" results and should stay paired with
-   * the HEAD logic unless a new probe keeps both paths in sync.
-   */
   async probeUrl(url) {
     const trimmed = typeof url === "string" ? url.trim() : "";
     if (!trimmed) {
       return false;
     }
 
-    const rangeProbe = async () => {
-      try {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 8000);
-        const response = await fetch(trimmed, {
-          method: "GET",
-          headers: { Range: "bytes=0-1023" },
-          signal: controller.signal,
-        });
-        clearTimeout(timeoutId);
-        if (!response.ok) {
-          return false;
-        }
-        const acceptRanges = response.headers.get("accept-ranges");
-        if (!acceptRanges || acceptRanges.toLowerCase() !== "bytes") {
-          console.warn(
-            `[probeUrl] Range probe missing Accept-Ranges header for ${trimmed}`
-          );
-        }
-        return true;
-      } catch (err) {
-        console.warn(`[probeUrl] Range probe failed for ${trimmed}:`, err);
-        return false;
-      }
-    };
-
     try {
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), 8000);
       const response = await fetch(trimmed, {
         method: "HEAD",
-        signal: controller.signal,
+        mode: "cors",
       });
-      clearTimeout(timeoutId);
-      if (!response.ok) {
-        if (response.status === 405 || response.status === 501) {
-          return rangeProbe();
-        }
-        return false;
-      }
-
-      const acceptRanges = response.headers.get("accept-ranges");
-      if (!acceptRanges || acceptRanges.toLowerCase() !== "bytes") {
-        console.warn(
-          `[probeUrl] HEAD missing Accept-Ranges header for ${trimmed}`
-        );
-      }
-      return true;
+      return response.ok;
     } catch (err) {
-      console.warn(`[probeUrl] HEAD probe failed for ${trimmed}:`, err);
-      return rangeProbe();
+      console.warn(`[probeUrl] HEAD request failed for ${trimmed}:`, err);
+      return false;
     }
   }
 
   async playHttp(videoEl, url) {
     const target = videoEl || this.modalVideo;
     if (!target) {
-      throw new Error("No video element available for direct playback.");
+      return false;
     }
 
     const sanitizedUrl = typeof url === "string" ? url.trim() : "";
     if (!sanitizedUrl) {
-      throw new Error("No URL provided for direct playback.");
+      return false;
     }
 
     target.src = sanitizedUrl;
-    target.load();
 
     try {
       await target.play();
+      return true;
     } catch (err) {
-      this.log("Direct URL autoplay failed:", err);
-      if (!target.muted) {
-        this.log("Retrying direct playback with muted audio.");
-        target.muted = true;
-        try {
-          await target.play();
-        } catch (mutedErr) {
-          this.log("Muted direct playback also failed:", mutedErr);
-          throw mutedErr;
-        }
-      } else {
-        throw err;
-      }
+      console.warn("[playHttp] Direct URL playback failed:", err);
+      return false;
     }
   }
 
@@ -2594,6 +2534,7 @@ class bitvidApp {
       }
 
       this.showModalWithPoster();
+      const videoEl = this.modalVideo;
 
       if (this.modalStatus) {
         this.modalStatus.textContent = "Preparing video...";
@@ -2604,15 +2545,15 @@ class bitvidApp {
 
       await torrentClient.cleanup();
 
-      this.modalVideo.pause();
+      videoEl.pause();
       // Clearing the WebTorrent attachment requires wiping both `src` and
       // `srcObject`. Multiple regressions have shipped where we only blanked
       // `src`, leaving the old MediaSource wired up and the next magnet would
       // stall on a grey frame. Always clear both before calling `load()`.
-      this.modalVideo.src = "";
-      this.modalVideo.removeAttribute("src");
-      this.modalVideo.srcObject = null;
-      this.modalVideo.load();
+      videoEl.src = "";
+      videoEl.removeAttribute("src");
+      videoEl.srcObject = null;
+      videoEl.load();
 
       this.resetTorrentStats();
       this.playSource = null;
@@ -2624,102 +2565,44 @@ class bitvidApp {
         this.log(`${label} ${magnetForPlayback}`);
       }
 
-      const startTorrentPlayback = async (reason) => {
-        if (reason) {
-          this.log(reason);
+      if (URL_FIRST_ENABLED && sanitizedUrl) {
+        if (this.modalStatus) {
+          this.modalStatus.textContent = "Checking hosted URL...";
         }
+        const urlPlayable = await this.probeUrl(sanitizedUrl);
 
-        if (!magnetForPlayback) {
-          const message =
-            magnetProvided && !magnetForPlayback
-              ? UNSUPPORTED_BTITH_MESSAGE
-              : "No playable source provided.";
+        if (urlPlayable) {
           if (this.modalStatus) {
-            this.modalStatus.textContent = message;
+            this.modalStatus.textContent = "Streaming from URL";
           }
-          this.playSource = null;
-          this.showError(message);
-          return false;
+          const played = await this.playHttp(videoEl, sanitizedUrl);
+          if (played) {
+            this.forceRemoveModalPoster("http-success");
+            this.playSource = "url";
+            return;
+          }
+          this.log(
+            "[playVideoWithFallback] Direct URL playback promise rejected."
+          );
         }
+      }
 
-        this.modalVideo.pause();
-        this.modalVideo.src = "";
-        this.modalVideo.removeAttribute("src");
-        this.modalVideo.srcObject = null;
-        this.modalVideo.load();
-
+      if (magnetForPlayback) {
+        if (this.modalStatus) {
+          this.modalStatus.textContent = "Switching to WebTorrent...";
+        }
+        console.debug("[WT] add magnet =", magnetForPlayback);
         await this.playViaWebTorrent(magnetForPlayback, {
           fallbackMagnet,
         });
         this.playSource = "torrent";
         this.autoplayModalVideo();
-        return true;
-      };
-
-      if (URL_FIRST_ENABLED && sanitizedUrl) {
-        const urlPlayable = await this.probeUrl(sanitizedUrl);
-
-        if (urlPlayable) {
-          const markUrlReady = () => {
-            if (this.modalStatus) {
-              this.modalStatus.textContent = "Streaming from URL";
-            }
-            this.forceRemoveModalPoster("http-loadeddata");
-          };
-
-          const handleHttpError = async () => {
-            this.modalVideo.removeEventListener("loadeddata", markUrlReady);
-            if (this.modalStatus) {
-              this.modalStatus.textContent = "Switching to WebTorrent...";
-            }
-            await startTorrentPlayback(
-              "[playVideoWithFallback] HTTP playback error triggered torrent fallback."
-            );
-          };
-
-          this.modalVideo.addEventListener("loadeddata", markUrlReady, {
-            once: true,
-          });
-          this.modalVideo.addEventListener("error", handleHttpError, {
-            once: true,
-          });
-
-          if (this.modalStatus) {
-            this.modalStatus.textContent = "Loading video...";
-          }
-
-          try {
-            await this.playHttp(this.modalVideo, sanitizedUrl);
-            this.playSource = "url";
-            return;
-          } catch (httpError) {
-            this.log(
-              "[playVideoWithFallback] Direct URL playback promise rejected:",
-              httpError
-            );
-            this.modalVideo.removeEventListener("error", handleHttpError);
-            this.modalVideo.removeEventListener("loadeddata", markUrlReady);
-            if (this.modalStatus) {
-              this.modalStatus.textContent = "Switching to WebTorrent...";
-            }
-            await startTorrentPlayback(
-              "[playVideoWithFallback] Falling back to torrent after direct URL failure."
-            );
-            return;
-          }
-        }
-      }
-
-      if (magnetForPlayback) {
-        await startTorrentPlayback(
-          "[playVideoWithFallback] Using WebTorrent fallback for playback."
-        );
         return;
       }
 
       const message = magnetProvided && !magnetForPlayback
         ? UNSUPPORTED_BTITH_MESSAGE
-        : "No playable source provided.";
+        : "No playable source found.";
       if (this.modalStatus) {
         this.modalStatus.textContent = message;
       }

From adf6bd56cd1b87998ba69bc35a92279f11fdfd40 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 07:35:08 -0400
Subject: [PATCH 064/101] Improve URL health caching and cleanup flows

---
 js/app.js            | 252 +++++++++++++++++++++++++++++++++++--------
 js/channelProfile.js |   2 +-
 js/nostr.js          |  17 +++
 js/subscriptions.js  |  42 ++++++--
 4 files changed, 261 insertions(+), 52 deletions(-)

diff --git a/js/app.js b/js/app.js
index 1eb1296a..50a8c0ab 100644
--- a/js/app.js
+++ b/js/app.js
@@ -27,12 +27,85 @@ const UNSUPPORTED_BTITH_MESSAGE =
 
 const FALLBACK_THUMBNAIL_SRC = "assets/jpg/video-thumbnail-fallback.jpg";
 // We probe hosted URLs often enough that a naive implementation would spam
-// remote CDNs. A tiny, short-lived cache keeps us from hammering dead hosts
-// while still giving the UI near-real-time feedback when a URL comes back.
-const URL_HEALTH_TTL_MS = 45_000;
+// remote CDNs. A medium-lived cache (roughly 45 minutes) keeps us from
+// hammering dead hosts while still giving the UI timely updates when a CDN
+// recovers. Results are stored both in-memory and in localStorage so other
+// views can reuse them without re-probing.
+const URL_HEALTH_TTL_MS = 45 * 60 * 1000; // 45 minutes
+const URL_HEALTH_STORAGE_PREFIX = "bitvid:urlHealth:";
 const urlHealthCache = new Map();
 const urlHealthInFlight = new Map();
 
+function getUrlHealthStorageKey(eventId) {
+  return `${URL_HEALTH_STORAGE_PREFIX}${eventId}`;
+}
+
+function readUrlHealthFromStorage(eventId) {
+  if (!eventId || typeof localStorage === "undefined") {
+    return null;
+  }
+
+  try {
+    const raw = localStorage.getItem(getUrlHealthStorageKey(eventId));
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === "object") {
+      return parsed;
+    }
+  } catch (err) {
+    console.warn(`Failed to parse stored URL health for ${eventId}:`, err);
+  }
+
+  removeUrlHealthFromStorage(eventId);
+  return null;
+}
+
+function writeUrlHealthToStorage(eventId, entry) {
+  if (!eventId || typeof localStorage === "undefined") {
+    return;
+  }
+
+  try {
+    localStorage.setItem(
+      getUrlHealthStorageKey(eventId),
+      JSON.stringify(entry)
+    );
+  } catch (err) {
+    console.warn(`Failed to persist URL health for ${eventId}:`, err);
+  }
+}
+
+function removeUrlHealthFromStorage(eventId) {
+  if (!eventId || typeof localStorage === "undefined") {
+    return;
+  }
+
+  try {
+    localStorage.removeItem(getUrlHealthStorageKey(eventId));
+  } catch (err) {
+    console.warn(`Failed to remove URL health for ${eventId}:`, err);
+  }
+}
+
+function isUrlHealthEntryFresh(entry, url) {
+  if (!entry || typeof entry !== "object") {
+    return false;
+  }
+
+  const now = Date.now();
+  if (typeof entry.expiresAt !== "number" || entry.expiresAt <= now) {
+    return false;
+  }
+
+  if (url && entry.url && entry.url !== url) {
+    return false;
+  }
+
+  return true;
+}
+
 /**
  * Returns the cached health result for a given event ID when the entry is
  * still "fresh". Entries are evicted eagerly once their TTL expires or when
@@ -44,29 +117,31 @@ function readUrlHealthFromCache(eventId, url) {
   }
 
   const entry = urlHealthCache.get(eventId);
-  if (!entry) {
-    return null;
+  if (isUrlHealthEntryFresh(entry, url)) {
+    return entry;
   }
 
-  const now = Date.now();
-  if (entry.expiresAt <= now) {
+  if (entry) {
     urlHealthCache.delete(eventId);
+  }
+
+  const stored = readUrlHealthFromStorage(eventId);
+  if (!isUrlHealthEntryFresh(stored, url)) {
+    if (stored) {
+      removeUrlHealthFromStorage(eventId);
+    }
     return null;
   }
 
-  if (url && entry.url && entry.url !== url) {
-    urlHealthCache.delete(eventId);
-    return null;
-  }
-
-  return entry;
+  urlHealthCache.set(eventId, stored);
+  return stored;
 }
 
 /**
- * Stores a health result and calculates the expiry moment. The TTL is short on
- * purpose (~45s) so we recover quickly when a CDN comes back online while
- * still avoiding redundant probes during render thrash.
- */
+ * Stores a health result and calculates the expiry moment. The TTL lasts for
+ * roughly three quarters of an hour so we recover quickly when a CDN returns
+ * while still avoiding redundant probes during render thrash.
+*/
 function writeUrlHealthToCache(eventId, url, result, ttlMs = URL_HEALTH_TTL_MS) {
   if (!eventId) {
     return null;
@@ -82,6 +157,7 @@ function writeUrlHealthToCache(eventId, url, result, ttlMs = URL_HEALTH_TTL_MS)
     lastCheckedAt: now,
   };
   urlHealthCache.set(eventId, entry);
+  writeUrlHealthToStorage(eventId, entry);
   return entry;
 }
 
@@ -337,6 +413,7 @@ class bitvidApp {
 
     // Lazy-loading helper for images
     this.mediaLoader = new MediaLoader();
+    this.activeIntervals = [];
 
     // Optional: a "profile" button or avatar (if used)
     this.profileButton = document.getElementById("profileButton") || null;
@@ -505,8 +582,6 @@ class bitvidApp {
       // 9. Check URL ?v= param
       this.checkUrlParams();
 
-      // Keep an array of active interval IDs so we can clear them on modal close
-      this.activeIntervals = [];
     } catch (error) {
       console.error("Init failed:", error);
       this.showError("Failed to connect to Nostr relay");
@@ -518,6 +593,12 @@ class bitvidApp {
    */
   async initModal() {
     try {
+      const existingModal = document.getElementById("playerModal");
+      if (existingModal) {
+        this.playerModal = existingModal;
+        return true;
+      }
+
       const resp = await fetch("components/video-modal.html");
       if (!resp.ok) {
         throw new Error(`HTTP error! status: ${resp.status}`);
@@ -605,19 +686,15 @@ class bitvidApp {
           this.showError("No shareable video is loaded.");
           return;
         }
-        try {
-          const nevent = window.NostrTools.nip19.neventEncode({
-            id: this.currentVideo.id,
-          });
-          const shareUrl = `${window.location.origin}${window.location.pathname}?v=${nevent}`;
-          navigator.clipboard
-            .writeText(shareUrl)
-            .then(() => this.showSuccess("Video link copied to clipboard!"))
-            .catch(() => this.showError("Failed to copy the link."));
-        } catch (err) {
-          console.error("Error generating share link:", err);
+        const shareUrl = this.buildShareUrlFromEventId(this.currentVideo.id);
+        if (!shareUrl) {
           this.showError("Could not generate link.");
+          return;
         }
+        navigator.clipboard
+          .writeText(shareUrl)
+          .then(() => this.showSuccess("Video link copied to clipboard!"))
+          .catch(() => this.showError("Failed to copy the link."));
       });
     }
 
@@ -941,8 +1018,10 @@ class bitvidApp {
     }
 
     // 7) Cleanup on page unload
-    window.addEventListener("beforeunload", async () => {
-      await this.cleanup();
+    window.addEventListener("beforeunload", () => {
+      this.cleanup().catch((err) => {
+        console.error("Cleanup before unload failed:", err);
+      });
     });
 
     // 8) Handle back/forward navigation => hide video modal
@@ -1250,7 +1329,7 @@ class bitvidApp {
     }
     // Optionally hide logout or userStatus
     if (this.logoutButton) {
-      this.logoutButton.classList.add("hidden");
+      this.logoutButton.classList.remove("hidden");
     }
     if (this.userStatus) {
       this.userStatus.classList.add("hidden");
@@ -1333,8 +1412,26 @@ class bitvidApp {
   /**
    * Cleanup resources on unload or modal close.
    */
-  async cleanup() {
+  async cleanup({ preserveSubscriptions = false, preserveObservers = false } = {}) {
     try {
+      this.clearActiveIntervals();
+
+      if (!preserveObservers && this.mediaLoader) {
+        this.mediaLoader.disconnect();
+      }
+
+      if (!preserveSubscriptions && this.videoSubscription) {
+        try {
+          if (typeof this.videoSubscription.unsub === "function") {
+            this.videoSubscription.unsub();
+          }
+        } catch (err) {
+          console.error("Failed to unsubscribe from video feed:", err);
+        } finally {
+          this.videoSubscription = null;
+        }
+      }
+
       // If there's a small inline player
       if (this.videoElement) {
         this.videoElement.pause();
@@ -1405,6 +1502,60 @@ class bitvidApp {
     this.shareBtn.classList.toggle("cursor-not-allowed", !enabled);
   }
 
+  getShareUrlBase() {
+    try {
+      const current = new URL(window.location.href);
+      return `${current.origin}${current.pathname}`;
+    } catch (err) {
+      const origin = window.location?.origin || "";
+      const pathname = window.location?.pathname || "";
+      if (origin || pathname) {
+        return `${origin}${pathname}`;
+      }
+      const href = window.location?.href || "";
+      if (href) {
+        const base = href.split(/[?#]/)[0];
+        if (base) {
+          return base;
+        }
+      }
+      console.warn("Unable to determine share URL base:", err);
+      return "";
+    }
+  }
+
+  buildShareUrlFromNevent(nevent) {
+    if (!nevent) {
+      return "";
+    }
+    const base = this.getShareUrlBase();
+    if (!base) {
+      return "";
+    }
+    return `${base}?v=${encodeURIComponent(nevent)}`;
+  }
+
+  buildShareUrlFromEventId(eventId) {
+    if (!eventId) {
+      return "";
+    }
+
+    try {
+      const nevent = window.NostrTools.nip19.neventEncode({ id: eventId });
+      return this.buildShareUrlFromNevent(nevent);
+    } catch (err) {
+      console.error("Error generating nevent for share URL:", err);
+      return "";
+    }
+  }
+
+  dedupeVideosByRoot(videos) {
+    if (!Array.isArray(videos) || videos.length === 0) {
+      return [];
+    }
+    return dedupeToNewestByRoot(videos);
+  }
+
   prepareModalVideoForPlayback() {
     if (!this.modalVideo) {
       return;
@@ -1494,7 +1645,10 @@ class bitvidApp {
     } catch (err) {
       // ignore
     }
-    await this.cleanup();
+    await this.cleanup({
+      preserveSubscriptions: true,
+      preserveObservers: true,
+    });
 
     // 2) Hide the modal
     if (this.playerModal) {
@@ -1786,8 +1940,10 @@ class bitvidApp {
   async renderVideoList(videos) {
     if (!this.videoList) return;
 
+    const dedupedVideos = this.dedupeVideosByRoot(videos);
+
     // 1) If no videos
-    if (!videos || videos.length === 0) {
+    if (!dedupedVideos.length) {
       this.videoList.innerHTML = `
         <p class="flex justify-center items-center h-full w-full text-center text-gray-500">
           No public videos available yet. Be the first to upload one!
@@ -1796,14 +1952,18 @@ class bitvidApp {
     }
 
     // 2) Sort newest first
-    videos.sort((a, b) => b.created_at - a.created_at);
+    dedupedVideos.sort((a, b) => b.created_at - a.created_at);
 
     const fullAllEventsArray = Array.from(nostrClient.allEvents.values());
     const fragment = document.createDocumentFragment();
     const authorSet = new Set();
+    const defaultShareBase =
+      this.getShareUrlBase() ||
+      `${window.location?.origin || ""}${window.location?.pathname || ""}` ||
+      (window.location?.href ? window.location.href.split(/[?#]/)[0] : "");
 
     // 3) Build each card
-    videos.forEach((video, index) => {
+    dedupedVideos.forEach((video, index) => {
       if (!video.id || !video.title) {
         console.error("Video missing ID/title:", video);
         return;
@@ -1812,9 +1972,9 @@ class bitvidApp {
       authorSet.add(video.pubkey);
 
       const nevent = window.NostrTools.nip19.neventEncode({ id: video.id });
-      const shareUrl = `${window.location.pathname}?v=${encodeURIComponent(
-        nevent
-      )}`;
+      const shareUrl =
+        this.buildShareUrlFromNevent(nevent) ||
+        `${defaultShareBase}?v=${encodeURIComponent(nevent)}`;
       const canEdit = video.pubkey === this.pubkey;
       const highlightClass =
         video.isPrivate && canEdit
@@ -2680,10 +2840,12 @@ class bitvidApp {
     this.setShareButtonState(true);
 
     const nevent = window.NostrTools.nip19.neventEncode({ id: eventId });
-    const newUrl = `${window.location.pathname}?v=${encodeURIComponent(
-      nevent
-    )}`;
-    window.history.pushState({}, "", newUrl);
+    const pushUrl =
+      this.buildShareUrlFromNevent(nevent) ||
+      `${this.getShareUrlBase() || window.location.pathname}?v=${encodeURIComponent(
+        nevent
+      )}`;
+    window.history.pushState({}, "", pushUrl);
 
     let creatorProfile = {
       name: "Unknown",
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 73ae117d..cac4fee2 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -209,7 +209,7 @@ async function loadUserVideos(pubkey) {
     }
 
     // 4) Deduplicate older overshadowed versions => newest only
-    videos = dedupeToNewestByRoot(videos);
+    videos = app?.dedupeVideosByRoot?.(videos) ?? dedupeToNewestByRoot(videos);
 
     // 5) Filter out blacklisted IDs / authors
     videos = videos.filter((video) => {
diff --git a/js/nostr.js b/js/nostr.js
index f20d62da..c846f278 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -959,6 +959,23 @@ class NostrClient {
     });
 
     // Return the subscription object if you need to unsub manually later
+    const originalUnsub =
+      typeof sub.unsub === "function" ? sub.unsub.bind(sub) : () => {};
+    let unsubscribed = false;
+    sub.unsub = () => {
+      if (unsubscribed) {
+        return;
+      }
+      unsubscribed = true;
+      clearInterval(processInterval);
+      try {
+        return originalUnsub();
+      } catch (err) {
+        console.error("[subscribeVideos] Failed to unsub from pool:", err);
+        return undefined;
+      }
+    };
+
     return sub;
   }
 
diff --git a/js/subscriptions.js b/js/subscriptions.js
index c1ab846e..f5e5db50 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -4,6 +4,33 @@ import {
   convertEventToVideo as sharedConvertEventToVideo,
 } from "./nostr.js";
 
+function getAbsoluteShareUrl(nevent) {
+  if (!nevent) {
+    return "";
+  }
+
+  if (window.app?.buildShareUrlFromNevent) {
+    const candidate = window.app.buildShareUrlFromNevent(nevent);
+    if (candidate) {
+      return candidate;
+    }
+  }
+
+  const origin = window.location?.origin || "";
+  const pathname = window.location?.pathname || "";
+  let base = origin || pathname ? `${origin}${pathname}` : "";
+  if (!base) {
+    const href = window.location?.href || "";
+    base = href ? href.split(/[?#]/)[0] : "";
+  }
+
+  if (!base) {
+    return `?v=${encodeURIComponent(nevent)}`;
+  }
+
+  return `${base}?v=${encodeURIComponent(nevent)}`;
+}
+
 /**
  * Manages the user's subscription list (kind=30002) *privately*,
  * using NIP-04 encryption for the content field.
@@ -245,7 +272,12 @@ class SubscriptionsManager {
     const container = document.getElementById(containerId);
     if (!container) return;
 
-    if (!videos.length) {
+    const safeVideos = Array.isArray(videos) ? videos : [];
+    const dedupedVideos =
+      window.app?.dedupeVideosByRoot?.(safeVideos) ??
+      this.dedupeToNewestByRoot(safeVideos);
+
+    if (!dedupedVideos.length) {
       container.innerHTML = `
         <p class="flex justify-center items-center h-full w-full text-center text-gray-500">
           No videos available yet.
@@ -254,14 +286,14 @@ class SubscriptionsManager {
     }
 
     // Sort newest first
-    videos.sort((a, b) => b.created_at - a.created_at);
+    dedupedVideos.sort((a, b) => b.created_at - a.created_at);
 
     const fullAllEventsArray = Array.from(nostrClient.allEvents.values());
     const fragment = document.createDocumentFragment();
     // Only declare localAuthorSet once
     const localAuthorSet = new Set();
 
-    videos.forEach((video, index) => {
+    dedupedVideos.forEach((video, index) => {
       if (!video.id || !video.title) {
         console.error("Missing ID or title:", video);
         return;
@@ -274,9 +306,7 @@ class SubscriptionsManager {
       localAuthorSet.add(video.pubkey);
 
       const nevent = window.NostrTools.nip19.neventEncode({ id: video.id });
-      const shareUrl = `${window.location.pathname}?v=${encodeURIComponent(
-        nevent
-      )}`;
+      const shareUrl = getAbsoluteShareUrl(nevent);
       const canEdit = window.app?.pubkey === video.pubkey;
 
       const highlightClass =

From 1a6371fee3f0b751678d4a23274b859fd1a98d2d Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 07:40:42 -0400
Subject: [PATCH 065/101] Document magnet safety rules for contributors

---
 AGENTS.md | 31 +++++++++++++++++++------------
 README.md | 25 +++++++++++++++++--------
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index c8c593f9..f658d0c5 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -4,7 +4,13 @@ This guide tells AI agents how to keep Bitvid aligned with the current product d
 
 ---
 
-## 1. Mission: URL‑First Playback with WebTorrent Fallback
+## 1. Release Channels: Main vs. Unstable
+
+* **Main** is the production track. Anything merged here must preserve today’s UX and magnet safety guarantees. Rollbacks should be painless: keep commits atomic, avoid destructive migrations, and leave feature flags in a known-good default (`false` unless product explicitly flips them).
+* **Unstable** is our experimentation lane. Gate risky behavior behind feature flags defined in `js/constants.js` and document the toggle/rollback plan in PR descriptions.
+* **Emergency response:** If a change regresses URL-first playback or breaks magnet parsing, revert immediately and annotate the AGENTS.md changelog with remediation tips so future agents do not repeat the mistake.
+
+## 2. Mission: URL‑First Playback with WebTorrent Fallback
 
 * **Goal:** Always deliver smooth playback while keeping hosting costs low.
 * **Primary transport:** A hosted video URL (MP4/WebM/HLS/DASH) that the `<video>` element can stream directly.
@@ -14,27 +20,28 @@ This guide tells AI agents how to keep Bitvid aligned with the current product d
 
 ---
 
-## 2. Magnet Handling — Do’s & Don’ts
+## 3. Magnet Handling — Do’s & Don’ts
 
-* **Use the helpers:** Always pass inbound values through `safeDecodeMagnet()` before playback, and use `normalizeAndAugmentMagnet()` (see `js/magnetUtils.js`) to append `ws=` or `xs=` hints.
-* **Do keep magnets raw:** Store and reuse the literal `magnet:?xt=urn:btih:...` string. Decode once, then feed that exact value to WebTorrent.
-* **Don’t call `new URL()` on magnets:** URL constructors/`URLSearchParams` percent‑encode the `xt` payload and can break legacy hashes. Manipulate magnets via the helper utilities or string concatenation.
-* **Do encourage HTTP hints:** `ws=` (web seed) should point to an HTTPS file root; `xs=` points to a `.torrent`. They help the fallback path warm up quickly.
-* **Don’t ship insecure trackers:** Stick to the WSS tracker list exported from `js/constants.js`. Avoid UDP or plaintext HTTP trackers in browser code.
+* **Use the helpers every time:** Always run inbound values through `safeDecodeMagnet()` before playback or normalization, and call `normalizeAndAugmentMagnet()` (see `js/magnetUtils.js`) to append `ws=` / `xs=` hints without mutating hashes.
+* **Keep magnets raw:** Persist the literal `magnet:?xt=urn:btih:...` string. Decode once, then feed that exact value to WebTorrent or storage. Never rely on re-encoding helpers that might alter casing.
+* **Never call `new URL()` on magnets:** URL constructors/`URLSearchParams` percent-encode the `xt` payload and corrupt legacy hashes. Manipulate magnets with the helper utilities or string functions that respect the raw hash.
+* **HTTP hints:** Encourage HTTPS `ws=` web seeds (file roots only) and HTTPS `xs=` pointers to `.torrent` files so fallback peers warm quickly.
+* **Tracker policy:** Browser code must ship WSS trackers only. Pull the canonical list from `js/constants.js`; do not add UDP or plaintext HTTP trackers.
 
 ---
 
-## 3. Upload Modal Troubleshooting
+## 4. Upload Modal Troubleshooting
 
 1. **Required fields:** Validation must ensure a title exists and that either a hosted URL or a magnet (or both) is supplied. Optional `ws` / `xs` inputs should be appended only when a magnet is present.
-2. **Magnet parsing errors:** When a user pastes encoded magnets, run `safeDecodeMagnet()` before normalizing. Show inline errors if decoding fails.
+2. **Magnet parsing errors:** When a user pastes encoded magnets, run `safeDecodeMagnet()` before normalizing. Show inline errors if decoding fails and confirm the raw `magnet:?xt=` string survives the round trip.
 3. **URL-first promise:** After submission, confirm the resulting feed item carries `data-play-url` and `data-play-magnet` attributes so playback utilities can attempt the URL first.
-4. **Mixed-content warnings:** If the page is served over HTTPS, reject `ws=` or `xs=` hints that begin with `http://` and show guidance to upgrade to HTTPS.
+4. **Mixed-content warnings:** If the page is served over HTTPS, reject `ws=` or `xs=` hints that begin with `http://` and show guidance to upgrade to HTTPS. Document the copy in README/UX strings so operators can align messaging.
 5. **Telemetry hooks:** Keep existing analytics/logging untouched unless instructed. If you add new modal states, annotate them clearly in code comments.
+6. **Modal regressions:** If validation or helper wiring breaks in Main, disable new feature flags and ship a revert PR immediately. Note the rollback steps in AGENTS.md for posterity.
 
 ---
 
-## 4. Manual QA Checklist
+## 5. Manual QA Checklist
 
 Run this script before shipping notable UI changes, especially around upload/playback flows. Automate when possible, but manual verification is required for releases.
 
@@ -57,7 +64,7 @@ Document the run in PR descriptions so QA can cross-reference results.
 
 ---
 
-## 5. Additional Notes for Agents
+## 6. Additional Notes for Agents
 
 * **Nostr interoperability:** Keep kind `30078` events as the source of truth and optionally mirror to kind `1063` so external clients see the hosted URL.
 * **Probing:** Lightweight `HEAD`/`GET` requests should back `probeUrl()` so dead URLs can be hidden or flagged without blocking the UI.
diff --git a/README.md b/README.md
index 88b09ccb..33647842 100644
--- a/README.md
+++ b/README.md
@@ -26,16 +26,25 @@
 1. **Visit the Site**: Navigate to the live instance of **bitvid** (e.g., `[https://bitvid.network](https://bitvid.network)`).
 2. **Login with Nostr**:
    - Use a compatible Nostr browser extension or manually input your public key.
-3. **Upload Videos**:
-   - Provide a title plus a hosted URL (recommended) and optionally a magnet link. Bitvid plays the URL first and falls back to WebTorrent.
-   - Toggle "Private" for encrypted listings.
-4. **Stream Videos**:
-   - The player attempts the hosted URL first and uses WebTorrent as a fallback when a magnet is available.
 
-#### P2P Hints
+### Post a video
 
-- Append `ws=` parameters to magnets to expose HTTPS web seeds that help the fallback warm up quickly.
-- Append `xs=` parameters when you have an HTTPS `.torrent` URL so WebTorrent can bootstrap without waiting on peer discovery.
+The upload modal enforces **Title + (URL or Magnet)**. Hosted URLs are strongly recommended so the player can start instantly, and you may also add a magnet for resilience.
+
+- **Title**: Required. Matches the in-app validation copy.
+- **Hosted URL (recommended)**: Supply an HTTPS MP4/WebM/HLS/DASH asset. This is the primary playback path.
+- **Magnet (optional but encouraged)**: Paste the literal `magnet:?xt=urn:btih:...` string. The form decodes it with `safeDecodeMagnet()` to prevent hash corruption. Never wrap magnets in `new URL()`—store them raw or decode then pass directly to the helpers.
+- **Web seeds (`ws=`)**: HTTPS only. Point to a file root (e.g., `https://cdn.example.com/video/`). Mixed-content (`http://`) hints are rejected just like the modal message explains.
+- **Additional sources (`xs=`)**: Recommend adding an HTTPS `.torrent` link so WebTorrent peers can bootstrap faster.
+- **Trackers**: Bitvid’s browser client only connects to WSS trackers shipped in `js/constants.js`. Do not add UDP or plaintext HTTP trackers to published magnets.
+- **Private toggle**: Encrypts the listing for invited viewers.
+
+### How playback works
+
+1. **URL-first**: `playVideoWithFallback({ url, magnet })` attempts the hosted URL immediately. Healthy URLs deliver the full experience without touching P2P resources.
+2. **WebTorrent fallback**: If the URL probe fails or returns an error status, Bitvid falls back to WebTorrent using the raw magnet. The helpers append HTTPS `ws=`/`xs=` hints so peers seed quickly.
+3. **Safety checks**: Magnets are decoded with `safeDecodeMagnet()` and normalized via `normalizeAndAugmentMagnet()` before reaching WebTorrent. Trackers remain WSS-only to satisfy browser constraints.
+4. **Operator playbook**: If a deployment causes playback regressions, flip the relevant feature flags back to their default values in `js/constants.js` and redeploy. Capture the rollback steps in AGENTS.md and the PR description so the Main channel stays stable.
 
 ---
 

From c9ebc80ab462afcf3ab6c576346db77b52509c41 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 08:35:19 -0400
Subject: [PATCH 066/101] Document v3 publishing schema

---
 AGENTS.md                    |  11 ++
 components/upload-modal.html |  19 ++-
 js/app.js                    | 249 ++++++++++++++++++++++++++++++-----
 js/nostr.js                  |  19 ++-
 js/webtorrent.js             |  16 ++-
 5 files changed, 269 insertions(+), 45 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index f658d0c5..1c211c1e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -70,4 +70,15 @@ Document the run in PR descriptions so QA can cross-reference results.
 * **Probing:** Lightweight `HEAD`/`GET` requests should back `probeUrl()` so dead URLs can be hidden or flagged without blocking the UI.
 * **Extensibility:** Future work (live streams, NIP-96 uploads, analytics) should preserve the URL-first strategy and magnet safety rules above.
 
+---
+
+## 7. Content Schema v3 & Playback Rules
+
+* **Event payloads:** New video notes serialize as version `3` with the JSON shape:
+  `{ "version": 3, "title": string, "url"?: string, "magnet"?: string, "thumbnail"?: string, "description"?: string, "mode": "live"|"dev", "isPrivate": boolean, "deleted": boolean, "videoRootId": string }`.
+* **Validation:** Every note must include a non-empty `title` plus at least one playable source (`url` or `magnet`). URL-only and magnet-only posts are both valid. Legacy v2 magnet notes stay readable.
+* **Upload UX:** The modal collects a hosted HTTPS URL and/or magnet. Enforce HTTPS for direct playback while keeping magnets optional when a URL is supplied.
+* **Playback orchestration:** `playVideoWithFallback` probes and plays the HTTPS URL first, watches for stalls/errors, and then falls back to WebTorrent. When both sources exist, pass the hosted URL through to WebTorrent as a webseed hint.
+* **Status messaging:** Update modal copy to reflect whether playback is direct or via P2P so regressions surface quickly during QA.
+
 **End of AGENTS.md**
diff --git a/components/upload-modal.html b/components/upload-modal.html
index 59124b05..ea0eeb15 100644
--- a/components/upload-modal.html
+++ b/components/upload-modal.html
@@ -70,13 +70,21 @@
           </div>
 
           <!-- Hosted video URL -->
-          <div class="mb-4">
-            <label for="uploadUrl" class="block text-sm font-medium">Hosted video URL</label>
+          <div class="form-group">
+            <label
+              for="uploadUrl"
+              class="block text-sm font-medium text-gray-200"
+              >Hosted video URL (https)</label
+            >
             <input
               id="uploadUrl"
               type="url"
-              class="w-full p-2 rounded"
-              placeholder="https://cdn.example.com/video.mp4 or .webm/.m3u8"
+              class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+              placeholder="https://cdn.example.com/video.mp4"
+            />
+            <small class="mt-1 block text-xs text-gray-400"
+              >Optional but preferred. We will play this first and fall back to
+              P2P.</small
             >
           </div>
 
@@ -109,7 +117,8 @@
               class="mt-1 block w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
             />
             <p class="mt-1 text-xs text-gray-400">
-              Include this when you have a torrent source. Bitvid will automatically augment it with any web seeds or metadata you provide.
+              Provide a hosted URL for instant playback. Add a magnet for P2P
+              cost control.
             </p>
           </div>
 
diff --git a/js/app.js b/js/app.js
index 50a8c0ab..6202f110 100644
--- a/js/app.js
+++ b/js/app.js
@@ -414,6 +414,7 @@ class bitvidApp {
     // Lazy-loading helper for images
     this.mediaLoader = new MediaLoader();
     this.activeIntervals = [];
+    this.urlPlaybackWatchdogCleanup = null;
 
     // Optional: a "profile" button or avatar (if used)
     this.profileButton = document.getElementById("profileButton") || null;
@@ -1266,7 +1267,7 @@ class bitvidApp {
     const description = descEl?.value.trim() || "";
 
     const formData = {
-      version: 2,
+      version: 3,
       title,
       url,
       magnet,
@@ -1277,16 +1278,21 @@ class bitvidApp {
     };
 
     if (!formData.title || (!formData.url && !formData.magnet)) {
-      this.showError(
-        "Please add a title plus either a hosted video URL or a magnet link."
-      );
+      this.showError("Title and at least one of URL or Magnet is required.");
       return;
     }
 
-    formData.magnet = normalizeAndAugmentMagnet(formData.magnet, {
-      ws,
-      xs,
-    });
+    if (formData.url && !/^https:\/\//i.test(formData.url)) {
+      this.showError("Hosted video URLs must use HTTPS.");
+      return;
+    }
+
+    if (formData.magnet) {
+      formData.magnet = normalizeAndAugmentMagnet(formData.magnet, {
+        ws,
+        xs,
+      });
+    }
 
     try {
       await nostrClient.publishVideo(formData, this.pubkey);
@@ -1415,6 +1421,7 @@ class bitvidApp {
   async cleanup({ preserveSubscriptions = false, preserveObservers = false } = {}) {
     try {
       this.clearActiveIntervals();
+      this.cleanupUrlPlaybackWatchdog();
 
       if (!preserveObservers && this.mediaLoader) {
         this.mediaLoader.disconnect();
@@ -1467,6 +1474,113 @@ class bitvidApp {
     this.activeIntervals = [];
   }
 
+  cleanupUrlPlaybackWatchdog() {
+    if (typeof this.urlPlaybackWatchdogCleanup === "function") {
+      try {
+        this.urlPlaybackWatchdogCleanup();
+      } catch (err) {
+        console.warn("[cleanupUrlPlaybackWatchdog]", err);
+      } finally {
+        this.urlPlaybackWatchdogCleanup = null;
+      }
+    }
+  }
+
+  registerUrlPlaybackWatchdogs(
+    videoElement,
+    { stallMs = 8000, onSuccess, onFallback } = {}
+  ) {
+    this.cleanupUrlPlaybackWatchdog();
+
+    if (!videoElement || typeof onFallback !== "function") {
+      return () => {};
+    }
+
+    const normalizedStallMs = Number.isFinite(stallMs) && stallMs > 0 ? stallMs : 0;
+    let active = true;
+    let stallTimerId = null;
+
+    const listeners = [];
+
+    const cleanup = () => {
+      if (!active) {
+        return;
+      }
+      active = false;
+      if (stallTimerId) {
+        clearTimeout(stallTimerId);
+        stallTimerId = null;
+      }
+      for (const [eventName, handler] of listeners) {
+        videoElement.removeEventListener(eventName, handler);
+      }
+      this.urlPlaybackWatchdogCleanup = null;
+    };
+
+    const triggerFallback = (reason) => {
+      if (!active) {
+        return;
+      }
+      cleanup();
+      onFallback(reason);
+    };
+
+    const handleSuccess = () => {
+      if (!active) {
+        return;
+      }
+      cleanup();
+      if (typeof onSuccess === "function") {
+        onSuccess();
+      }
+    };
+
+    const resetTimer = () => {
+      if (!active || !normalizedStallMs) {
+        return;
+      }
+      if (stallTimerId) {
+        clearTimeout(stallTimerId);
+      }
+      stallTimerId = setTimeout(() => triggerFallback("stall"), normalizedStallMs);
+    };
+
+    const addListener = (eventName, handler) => {
+      videoElement.addEventListener(eventName, handler);
+      listeners.push([eventName, handler]);
+    };
+
+    addListener("error", () => triggerFallback("error"));
+    addListener("abort", () => triggerFallback("abort"));
+    addListener("stalled", () => triggerFallback("stalled"));
+    addListener("emptied", () => triggerFallback("emptied"));
+    addListener("playing", handleSuccess);
+    addListener("ended", handleSuccess);
+
+    const timerEvents = [
+      "timeupdate",
+      "progress",
+      "loadeddata",
+      "canplay",
+      "canplaythrough",
+      "suspend",
+      "waiting",
+    ];
+    for (const eventName of timerEvents) {
+      addListener(eventName, resetTimer);
+    }
+
+    if (normalizedStallMs) {
+      resetTimer();
+    }
+
+    this.urlPlaybackWatchdogCleanup = () => {
+      cleanup();
+    };
+
+    return this.urlPlaybackWatchdogCleanup;
+  }
+
   resetTorrentStats() {
     if (this.modalPeers) {
       this.modalPeers.textContent = "";
@@ -2573,7 +2687,18 @@ class bitvidApp {
     }
   }
 
-  async playViaWebTorrent(magnet, { fallbackMagnet = "" } = {}) {
+  async playViaWebTorrent(
+    magnet,
+    { fallbackMagnet = "", urlList = [] } = {}
+  ) {
+    const sanitizedUrlList = Array.isArray(urlList)
+      ? urlList
+          .map((entry) =>
+            typeof entry === "string" ? entry.trim() : ""
+          )
+          .filter((entry) => /^https?:\/\//i.test(entry))
+      : [];
+
     const attemptStream = async (candidate) => {
       const trimmedCandidate =
         typeof candidate === "string" ? candidate.trim() : "";
@@ -2616,7 +2741,8 @@ class bitvidApp {
 
       const torrentInstance = await torrentClient.streamVideo(
         cacheBustedMagnet,
-        this.modalVideo
+        this.modalVideo,
+        { urlList: sanitizedUrlList }
       );
       if (torrentInstance && torrentInstance.ready) {
         // Some browsers delay `playing` events for MediaSource-backed torrents.
@@ -2717,6 +2843,7 @@ class bitvidApp {
 
       this.resetTorrentStats();
       this.playSource = null;
+      this.cleanupUrlPlaybackWatchdog();
 
       if (magnetForPlayback) {
         const label = playbackConfig.didMutate
@@ -2725,38 +2852,98 @@ class bitvidApp {
         this.log(`${label} ${magnetForPlayback}`);
       }
 
-      if (URL_FIRST_ENABLED && sanitizedUrl) {
-        if (this.modalStatus) {
-          this.modalStatus.textContent = "Checking hosted URL...";
-        }
-        const urlPlayable = await this.probeUrl(sanitizedUrl);
+      const httpsUrl =
+        sanitizedUrl && /^https:\/\//i.test(sanitizedUrl) ? sanitizedUrl : "";
+      const webSeedCandidates = httpsUrl ? [httpsUrl] : [];
 
-        if (urlPlayable) {
+      const startTorrentFallback = async (reason) => {
+        this.cleanupUrlPlaybackWatchdog();
+        if (!magnetForPlayback) {
+          const message =
+            "Hosted playback failed and no magnet fallback is available.";
           if (this.modalStatus) {
-            this.modalStatus.textContent = "Streaming from URL";
+            this.modalStatus.textContent = message;
           }
-          const played = await this.playHttp(videoEl, sanitizedUrl);
-          if (played) {
-            this.forceRemoveModalPoster("http-success");
-            this.playSource = "url";
-            return;
-          }
-          this.log(
-            "[playVideoWithFallback] Direct URL playback promise rejected."
-          );
+          this.playSource = null;
+          throw new Error(message);
         }
-      }
 
-      if (magnetForPlayback) {
         if (this.modalStatus) {
           this.modalStatus.textContent = "Switching to WebTorrent...";
         }
+        this.log(
+          `[playVideoWithFallback] Falling back to WebTorrent (${reason}).`
+        );
         console.debug("[WT] add magnet =", magnetForPlayback);
-        await this.playViaWebTorrent(magnetForPlayback, {
-          fallbackMagnet,
-        });
+        const torrentInstance = await this.playViaWebTorrent(
+          magnetForPlayback,
+          {
+            fallbackMagnet,
+            urlList: webSeedCandidates,
+          }
+        );
         this.playSource = "torrent";
         this.autoplayModalVideo();
+        return torrentInstance;
+      };
+
+      if (URL_FIRST_ENABLED && httpsUrl) {
+        if (this.modalStatus) {
+          this.modalStatus.textContent = "Checking hosted URL...";
+        }
+        const urlPlayable = await this.probeUrl(httpsUrl);
+
+        if (urlPlayable) {
+          let outcomeResolver;
+          const playbackOutcomePromise = new Promise((resolve) => {
+            outcomeResolver = resolve;
+            this.registerUrlPlaybackWatchdogs(videoEl, {
+              stallMs: 8000,
+              onSuccess: () => resolve({ status: "success" }),
+              onFallback: (reason) => resolve({ status: "fallback", reason }),
+            });
+          });
+
+          try {
+            videoEl.src = httpsUrl;
+            const playPromise = videoEl.play();
+            if (playPromise && typeof playPromise.then === "function") {
+              await playPromise;
+            }
+          } catch (err) {
+            this.log(
+              "[playVideoWithFallback] Direct URL playback threw:",
+              err
+            );
+            if (typeof outcomeResolver === "function") {
+              outcomeResolver({ status: "fallback", reason: "play-error" });
+            }
+            return await startTorrentFallback("play-error");
+          }
+
+          const playbackOutcome = await playbackOutcomePromise;
+          if (playbackOutcome?.status === "success") {
+            this.forceRemoveModalPoster("http-success");
+            this.playSource = "url";
+            if (this.modalStatus) {
+              this.modalStatus.textContent = "Streaming from URL";
+            }
+            return;
+          }
+
+          const fallbackReason =
+            playbackOutcome?.reason || "watchdog-triggered";
+          await startTorrentFallback(fallbackReason);
+          return;
+        }
+
+        this.log(
+          "[playVideoWithFallback] Hosted URL probe failed; deferring to WebTorrent."
+        );
+      }
+
+      if (magnetForPlayback) {
+        await startTorrentFallback("magnet-primary");
         return;
       }
 
diff --git a/js/nostr.js b/js/nostr.js
index c846f278..f690723a 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -263,10 +263,18 @@ function convertEventToVideo(event = {}) {
     return { id: event.id, invalid: true, reason };
   }
 
-  const rawVersion = parsedContent.version ?? 1;
-  let version = Number(rawVersion);
+  const rawVersion = parsedContent.version;
+  let version = rawVersion === undefined ? 2 : Number(rawVersion);
   if (!Number.isFinite(version)) {
-    version = 1;
+    version = rawVersion === undefined ? 2 : 1;
+  }
+
+  if (version < 2 && !ACCEPT_LEGACY_V1) {
+    return {
+      id: event.id,
+      invalid: true,
+      reason: `unsupported version ${version}`,
+    };
   }
 
   return {
@@ -417,8 +425,7 @@ class NostrClient {
   }
 
   /**
-   * Publish a new video
-   * CHANGED: Force version=2 for all new notes
+   * Publish a new video using the v3 content schema.
    */
   async publishVideo(videoData, pubkey) {
     if (!pubkey) throw new Error("Not logged in to publish video.");
@@ -454,7 +461,7 @@ class NostrClient {
     const dTagValue = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
 
     const contentObject = {
-      version: 2, // forcibly set version=2
+      version: 3,
       title: finalTitle,
       url: finalUrl,
       magnet: finalMagnet,
diff --git a/js/webtorrent.js b/js/webtorrent.js
index 77b792f2..90b272fc 100644
--- a/js/webtorrent.js
+++ b/js/webtorrent.js
@@ -412,7 +412,7 @@ export class TorrentClient {
    * Initiates streaming of a torrent magnet to a <video> element.
    * Ensures the service worker is set up only once and the client is reused.
    */
-  async streamVideo(magnetURI, videoElement) {
+  async streamVideo(magnetURI, videoElement, opts = {}) {
     try {
       // 1) Make sure we have a WebTorrent client and a valid SW registration.
       await this.init();
@@ -428,6 +428,16 @@ export class TorrentClient {
       }
 
       const isFirefoxBrowser = this.isFirefox();
+      const candidateUrls = Array.isArray(opts?.urlList)
+        ? opts.urlList
+            .map((entry) => (typeof entry === "string" ? entry.trim() : ""))
+            .filter((entry) => /^https?:\/\//i.test(entry))
+        : [];
+
+      const chromeOptions = { strategy: "sequential" };
+      if (candidateUrls.length) {
+        chromeOptions.urlList = candidateUrls;
+      }
 
       return new Promise((resolve, reject) => {
         // 3) Add the torrent to the client and handle accordingly.
@@ -435,7 +445,7 @@ export class TorrentClient {
           this.log("Starting torrent download (Firefox path)");
           this.client.add(
             magnetURI,
-            { strategy: "sequential", maxWebConns: 4 },
+            { ...chromeOptions, maxWebConns: 4 },
             (torrent) => {
               this.log("Torrent added (Firefox path):", torrent.name);
               this.handleFirefoxTorrent(torrent, videoElement, resolve, reject);
@@ -443,7 +453,7 @@ export class TorrentClient {
           );
         } else {
           this.log("Starting torrent download (Chrome path)");
-          this.client.add(magnetURI, { strategy: "sequential" }, (torrent) => {
+          this.client.add(magnetURI, chromeOptions, (torrent) => {
             this.log("Torrent added (Chrome path):", torrent.name);
             this.handleChromeTorrent(torrent, videoElement, resolve, reject);
           });

From 109f5e0746f1556e26b78ca026de06897ad42a45 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 09:18:43 -0400
Subject: [PATCH 067/101] Handle CORS-safe URL probes and resilient hosted
 playback

---
 js/app.js | 173 ++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 136 insertions(+), 37 deletions(-)

diff --git a/js/app.js b/js/app.js
index 6202f110..07878cc0 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1942,11 +1942,14 @@ class bitvidApp {
     }
 
     const status = state?.status || "checking";
-    const message = state?.message ||
+    const message =
+      state?.message ||
       (status === "healthy"
         ? "CDN Healthy"
         : status === "offline"
         ? "URL offline — using P2P fallback"
+        : status === "unknown"
+        ? "Hosted URL reachable (CORS restricted)"
         : "Checking hosted URL…");
 
     badgeEl.dataset.urlHealthState = status;
@@ -1967,6 +1970,14 @@ class bitvidApp {
       );
     } else if (status === "offline") {
       badgeEl.classList.add("block", "bg-red-900", "text-red-200");
+    } else if (status === "unknown") {
+      badgeEl.classList.add(
+        "inline-flex",
+        "items-center",
+        "gap-1",
+        "bg-amber-900",
+        "text-amber-200"
+      );
     } else {
       badgeEl.classList.add(
         "inline-flex",
@@ -2017,22 +2028,33 @@ class bitvidApp {
     }
 
     const probePromise = this.probeUrl(trimmedUrl)
-      .then((ok) => {
-        const result = ok
-          ? { status: "healthy", message: "CDN Healthy" }
-          : {
-              status: "offline",
-              message: "URL offline — using P2P fallback",
-            };
-        return this.storeUrlHealth(eventId, trimmedUrl, result);
+      .then((result) => {
+        const outcome = result?.outcome || "error";
+        let entry;
+
+        if (outcome === "ok") {
+          entry = { status: "healthy", message: "CDN Healthy" };
+        } else if (outcome === "opaque") {
+          entry = {
+            status: "unknown",
+            message: "Hosted URL reachable (CORS restricted)",
+          };
+        } else {
+          entry = {
+            status: "offline",
+            message: "URL offline — using P2P fallback",
+          };
+        }
+
+        return this.storeUrlHealth(eventId, trimmedUrl, entry);
       })
       .catch((err) => {
         console.warn(`[urlHealth] probe failed for ${trimmedUrl}:`, err);
-        const result = {
+        const entry = {
           status: "offline",
           message: "URL offline — using P2P fallback",
         };
-        return this.storeUrlHealth(eventId, trimmedUrl, result);
+        return this.storeUrlHealth(eventId, trimmedUrl, entry);
       });
 
     setInFlightUrlProbe(eventId, trimmedUrl, probePromise);
@@ -2650,18 +2672,31 @@ class bitvidApp {
   async probeUrl(url) {
     const trimmed = typeof url === "string" ? url.trim() : "";
     if (!trimmed) {
-      return false;
+      return { outcome: "invalid" };
     }
 
     try {
       const response = await fetch(trimmed, {
         method: "HEAD",
-        mode: "cors",
+        mode: "no-cors",
+        cache: "no-store",
       });
-      return response.ok;
+
+      if (!response) {
+        return { outcome: "error" };
+      }
+
+      if (response.type === "opaque") {
+        return { outcome: "opaque" };
+      }
+
+      return {
+        outcome: response.ok ? "ok" : "bad",
+        status: response.status,
+      };
     } catch (err) {
       console.warn(`[probeUrl] HEAD request failed for ${trimmed}:`, err);
-      return false;
+      return { outcome: "error", error: err };
     }
   }
 
@@ -2856,7 +2891,15 @@ class bitvidApp {
         sanitizedUrl && /^https:\/\//i.test(sanitizedUrl) ? sanitizedUrl : "";
       const webSeedCandidates = httpsUrl ? [httpsUrl] : [];
 
+      let fallbackStarted = false;
       const startTorrentFallback = async (reason) => {
+        if (fallbackStarted) {
+          this.log(
+            `[playVideoWithFallback] Duplicate fallback request ignored (${reason}).`
+          );
+          return null;
+        }
+        fallbackStarted = true;
         this.cleanupUrlPlaybackWatchdog();
         if (!magnetForPlayback) {
           const message =
@@ -2891,34 +2934,91 @@ class bitvidApp {
         if (this.modalStatus) {
           this.modalStatus.textContent = "Checking hosted URL...";
         }
-        const urlPlayable = await this.probeUrl(httpsUrl);
+        const probeResult = await this.probeUrl(httpsUrl);
+        const probeOutcome = probeResult?.outcome || "error";
+        const shouldAttemptHosted =
+          probeOutcome !== "bad" && probeOutcome !== "error";
+
+        if (shouldAttemptHosted) {
+          let outcomeResolved = false;
+          let outcomeResolver = () => {};
+          let autoplayBlocked = false;
 
-        if (urlPlayable) {
-          let outcomeResolver;
           const playbackOutcomePromise = new Promise((resolve) => {
-            outcomeResolver = resolve;
-            this.registerUrlPlaybackWatchdogs(videoEl, {
-              stallMs: 8000,
-              onSuccess: () => resolve({ status: "success" }),
-              onFallback: (reason) => resolve({ status: "fallback", reason }),
-            });
+            outcomeResolver = (value) => {
+              if (outcomeResolved) {
+                return;
+              }
+              outcomeResolved = true;
+              resolve(value);
+            };
           });
 
-          try {
-            videoEl.src = httpsUrl;
-            const playPromise = videoEl.play();
-            if (playPromise && typeof playPromise.then === "function") {
-              await playPromise;
-            }
-          } catch (err) {
+          const attachWatchdogs = ({ stallMs = 8000 } = {}) => {
+            this.registerUrlPlaybackWatchdogs(videoEl, {
+              stallMs,
+              onSuccess: () => outcomeResolver({ status: "success" }),
+              onFallback: (reason) => {
+                if (autoplayBlocked && reason === "stall") {
+                  this.log(
+                    "[playVideoWithFallback] Autoplay blocked; waiting for user gesture before falling back."
+                  );
+                  if (this.modalStatus) {
+                    this.modalStatus.textContent =
+                      "Press play to start the hosted video.";
+                  }
+                  attachWatchdogs({ stallMs: 0 });
+                  return;
+                }
+
+                outcomeResolver({ status: "fallback", reason });
+              },
+            });
+          };
+
+          attachWatchdogs({ stallMs: 8000 });
+
+          const handleFatalPlaybackError = (err) => {
             this.log(
               "[playVideoWithFallback] Direct URL playback threw:",
               err
             );
-            if (typeof outcomeResolver === "function") {
-              outcomeResolver({ status: "fallback", reason: "play-error" });
+            outcomeResolver({ status: "fallback", reason: "play-error" });
+          };
+
+          try {
+            videoEl.src = httpsUrl;
+            const playPromise = videoEl.play();
+            if (playPromise && typeof playPromise.catch === "function") {
+              playPromise.catch((err) => {
+                if (err?.name === "NotAllowedError") {
+                  autoplayBlocked = true;
+                  this.log(
+                    "[playVideoWithFallback] Autoplay blocked by browser; awaiting user interaction.",
+                    err
+                  );
+                  if (this.modalStatus) {
+                    this.modalStatus.textContent =
+                      "Press play to start the hosted video.";
+                  }
+                  this.cleanupUrlPlaybackWatchdog();
+                  attachWatchdogs({ stallMs: 0 });
+                  const restoreOnPlay = () => {
+                    videoEl.removeEventListener("play", restoreOnPlay);
+                    this.cleanupUrlPlaybackWatchdog();
+                    autoplayBlocked = false;
+                    attachWatchdogs({ stallMs: 8000 });
+                  };
+                  videoEl.addEventListener("play", restoreOnPlay, {
+                    once: true,
+                  });
+                  return;
+                }
+                handleFatalPlaybackError(err);
+              });
             }
-            return await startTorrentFallback("play-error");
+          } catch (err) {
+            handleFatalPlaybackError(err);
           }
 
           const playbackOutcome = await playbackOutcomePromise;
@@ -2931,14 +3031,13 @@ class bitvidApp {
             return;
           }
 
-          const fallbackReason =
-            playbackOutcome?.reason || "watchdog-triggered";
+          const fallbackReason = playbackOutcome?.reason || "watchdog-triggered";
           await startTorrentFallback(fallbackReason);
           return;
         }
 
         this.log(
-          "[playVideoWithFallback] Hosted URL probe failed; deferring to WebTorrent."
+          `[playVideoWithFallback] Hosted URL probe reported "${probeOutcome}"; deferring to WebTorrent.`
         );
       }
 

From dbe4563bb7269c2cad7c30f6b2d19287b2c17f4e Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 10:09:45 -0400
Subject: [PATCH 068/101] Add centralized analytics tracking

---
 blog.html             |   4 +
 js/analytics.js       | 170 ++++++++++++++++++++++++++++++++++++++++++
 js/analyticsConfig.js |  18 +++++
 js/app.js             |  20 +++++
 js/index.js           |   9 +++
 5 files changed, 221 insertions(+)
 create mode 100644 js/analytics.js
 create mode 100644 js/analyticsConfig.js

diff --git a/blog.html b/blog.html
index bd41b469..54aad57e 100644
--- a/blog.html
+++ b/blog.html
@@ -34,6 +34,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title></title>
+    <script type="module">
+      import { trackPageView } from "./js/analytics.js";
+      trackPageView(window.location.pathname);
+    </script>
     <script type="module" crossorigin>
       var pv = Object.defineProperty;
       var gv = (e, t, n) =>
diff --git a/js/analytics.js b/js/analytics.js
new file mode 100644
index 00000000..c3ba2618
--- /dev/null
+++ b/js/analytics.js
@@ -0,0 +1,170 @@
+// js/analytics.js
+import { ANALYTICS_CONFIG } from "./analyticsConfig.js";
+
+const SCRIPT_ATTR = "data-bitvid-analytics";
+const SCRIPT_IDENTIFIER = "umami";
+const pendingCalls = [];
+let flushTimerId = null;
+let scriptLoadedOnce = false;
+
+function isBrowserEnvironment() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+
+function flushPendingCalls() {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  const umami = window.umami;
+  if (!umami) {
+    return;
+  }
+
+  while (pendingCalls.length > 0) {
+    const { method, args } = pendingCalls.shift();
+    const fn = typeof umami[method] === "function" ? umami[method] : null;
+    if (!fn) {
+      continue;
+    }
+    try {
+      fn.apply(umami, args);
+    } catch (err) {
+      console.warn("[analytics] Failed to call", method, err);
+    }
+  }
+}
+
+function scheduleFlush() {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  if (flushTimerId !== null) {
+    return;
+  }
+
+  flushTimerId = window.setInterval(() => {
+    if (window.umami && typeof window.umami.trackEvent === "function") {
+      window.clearInterval(flushTimerId);
+      flushTimerId = null;
+      flushPendingCalls();
+    }
+  }, 500);
+}
+
+export function ensureAnalyticsLoaded(doc = typeof document !== "undefined" ? document : null) {
+  if (!doc) {
+    return null;
+  }
+
+  let script = doc.querySelector(`script[${SCRIPT_ATTR}]`);
+  if (script) {
+    if (!scriptLoadedOnce) {
+      // If a server rendered script already exists, make sure we flush asap.
+      scriptLoadedOnce = true;
+      flushPendingCalls();
+    }
+    return script;
+  }
+
+  script = doc.createElement("script");
+  script.defer = true;
+  script.src = ANALYTICS_CONFIG.scriptSrc;
+  script.setAttribute(SCRIPT_ATTR, SCRIPT_IDENTIFIER);
+  script.dataset.websiteId = ANALYTICS_CONFIG.websiteId;
+  script.addEventListener("load", () => {
+    scriptLoadedOnce = true;
+    flushPendingCalls();
+  });
+  doc.head.appendChild(script);
+
+  scheduleFlush();
+
+  return script;
+}
+
+function queueCall(method, args) {
+  pendingCalls.push({ method, args });
+  scheduleFlush();
+}
+
+function invokeUmami(method, args) {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  ensureAnalyticsLoaded();
+
+  const umami = window.umami;
+  if (umami && typeof umami[method] === "function") {
+    try {
+      umami[method].apply(umami, args);
+    } catch (err) {
+      console.warn("[analytics] Failed to call", method, err);
+    }
+    return;
+  }
+
+  queueCall(method, args);
+}
+
+export function trackPageView(path, referrer) {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  const resolvedPath =
+    typeof path === "string" && path.length > 0
+      ? path
+      : `${window.location.pathname}${window.location.hash || ""}`;
+
+  const resolvedReferrer =
+    typeof referrer === "string" ? referrer : document.referrer || "";
+
+  invokeUmami("trackView", [resolvedPath, resolvedReferrer]);
+}
+
+export function trackVideoView({
+  videoId,
+  title,
+  source,
+  hasMagnet,
+  hasUrl,
+} = {}) {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  const payload = {};
+
+  if (videoId) {
+    payload.videoId = String(videoId);
+  }
+
+  if (title) {
+    payload.title = String(title);
+  }
+
+  if (source) {
+    payload.source = String(source);
+  }
+
+  if (typeof hasMagnet === "boolean") {
+    payload.hasMagnet = hasMagnet;
+  }
+
+  if (typeof hasUrl === "boolean") {
+    payload.hasUrl = hasUrl;
+  }
+
+  invokeUmami("trackEvent", [
+    ANALYTICS_CONFIG.videoViewEventName,
+    payload,
+  ]);
+}
+
+// Immediately queue the analytics script so page views are captured early.
+if (isBrowserEnvironment()) {
+  ensureAnalyticsLoaded();
+}
diff --git a/js/analyticsConfig.js b/js/analyticsConfig.js
new file mode 100644
index 00000000..a4bf0749
--- /dev/null
+++ b/js/analyticsConfig.js
@@ -0,0 +1,18 @@
+// js/analyticsConfig.js
+// Central configuration for site-wide analytics tracking.
+
+export const ANALYTICS_CONFIG = Object.freeze({
+  /**
+   * Hosted Umami script that powers analytics.
+   * Update this value if the tracker is relocated.
+   */
+  scriptSrc: "https://umami.malin.onl/script.js",
+  /**
+   * The Umami website identifier for this deployment.
+   */
+  websiteId: "1f8eead2-79f0-4dba-8c3b-ed9b08b6e877",
+  /**
+   * Event name used when recording individual video views.
+   */
+  videoViewEventName: "video_view",
+});
diff --git a/js/app.js b/js/app.js
index 07878cc0..61fd68df 100644
--- a/js/app.js
+++ b/js/app.js
@@ -9,6 +9,7 @@ import { safeDecodeMagnet } from "./magnetUtils.js";
 import { normalizeAndAugmentMagnet } from "./magnet.js";
 import { deriveTorrentPlaybackConfig } from "./playbackUtils.js";
 import { URL_FIRST_ENABLED } from "./constants.js";
+import { trackVideoView } from "./analytics.js";
 import {
   initialWhitelist,
   initialBlacklist,
@@ -3111,6 +3112,14 @@ class bitvidApp {
     const magnetSupported = isValidMagnetUri(usableMagnetCandidate);
     const sanitizedMagnet = magnetSupported ? usableMagnetCandidate : "";
 
+    trackVideoView({
+      videoId: video.id || eventId,
+      title: video.title || "Untitled",
+      source: "event",
+      hasMagnet: !!sanitizedMagnet,
+      hasUrl: !!trimmedUrl,
+    });
+
     this.currentVideo = {
       ...video,
       url: trimmedUrl,
@@ -3195,6 +3204,17 @@ class bitvidApp {
     const magnetSupported = isValidMagnetUri(usableMagnet);
     const sanitizedMagnet = magnetSupported ? usableMagnet : "";
 
+    trackVideoView({
+      videoId:
+        typeof title === "string" && title.trim().length > 0
+          ? `direct:${title.trim()}`
+          : "direct-playback",
+      title,
+      source: "direct",
+      hasMagnet: !!sanitizedMagnet,
+      hasUrl: !!sanitizedUrl,
+    });
+
     if (!sanitizedUrl && !sanitizedMagnet) {
       const message = trimmedMagnet && !magnetSupported
         ? UNSUPPORTED_BTITH_MESSAGE
diff --git a/js/index.js b/js/index.js
index 64d41275..8b4a2d10 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,5 +1,7 @@
 // js/index.js
 
+import { trackPageView } from "./analytics.js";
+
 // 1) Load modals (login, application, etc.)
 async function loadModal(url) {
   try {
@@ -301,6 +303,11 @@ function handleQueryParams() {
 /**
  * Handle #view=... in the hash and load the correct partial view.
  */
+function recordView(viewName) {
+  const path = `${window.location.pathname}#view=${viewName}`;
+  trackPageView(path);
+}
+
 function handleHashChange() {
   console.log("handleHashChange called, current hash =", window.location.hash);
 
@@ -317,6 +324,7 @@ function handleHashChange() {
         if (typeof initFn === "function") {
           initFn();
         }
+        recordView("most-recent-videos");
       });
     });
     return;
@@ -332,6 +340,7 @@ function handleHashChange() {
       if (typeof initFn === "function") {
         initFn();
       }
+      recordView(viewName);
     });
   });
 }

From 7bdf93cb63bda331ddb3176366913af8e323d905 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 10:28:31 -0400
Subject: [PATCH 069/101] Fix Umami integration

---
 blog.html             |   4 +
 js/analytics.js       | 194 ++++++++++++++++++++++++++++++++++++++++++
 js/analyticsConfig.js |  18 ++++
 js/app.js             |  20 +++++
 js/index.js           |   9 ++
 5 files changed, 245 insertions(+)
 create mode 100644 js/analytics.js
 create mode 100644 js/analyticsConfig.js

diff --git a/blog.html b/blog.html
index bd41b469..54aad57e 100644
--- a/blog.html
+++ b/blog.html
@@ -34,6 +34,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title></title>
+    <script type="module">
+      import { trackPageView } from "./js/analytics.js";
+      trackPageView(window.location.pathname);
+    </script>
     <script type="module" crossorigin>
       var pv = Object.defineProperty;
       var gv = (e, t, n) =>
diff --git a/js/analytics.js b/js/analytics.js
new file mode 100644
index 00000000..e72f40d1
--- /dev/null
+++ b/js/analytics.js
@@ -0,0 +1,194 @@
+// js/analytics.js
+import { ANALYTICS_CONFIG } from "./analyticsConfig.js";
+
+const SCRIPT_ATTR = "data-bitvid-analytics";
+const SCRIPT_IDENTIFIER = "umami";
+const pendingCalls = [];
+let flushTimerId = null;
+let scriptLoadedOnce = false;
+
+function isBrowserEnvironment() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+
+function flushPendingCalls() {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  const umami = window.umami;
+  if (!umami) {
+    return;
+  }
+
+  while (pendingCalls.length > 0) {
+    const { method, args } = pendingCalls.shift();
+    const fn = typeof umami[method] === "function" ? umami[method] : null;
+    if (!fn) {
+      continue;
+    }
+    try {
+      fn.apply(umami, args);
+    } catch (err) {
+      console.warn("[analytics] Failed to call", method, err);
+    }
+  }
+}
+
+function scheduleFlush() {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  if (flushTimerId !== null) {
+    return;
+  }
+
+  flushTimerId = window.setInterval(() => {
+    if (window.umami && typeof window.umami.track === "function") {
+      window.clearInterval(flushTimerId);
+      flushTimerId = null;
+      flushPendingCalls();
+    }
+  }, 500);
+}
+
+export function ensureAnalyticsLoaded(doc = typeof document !== "undefined" ? document : null) {
+  if (!doc) {
+    return null;
+  }
+
+  let script = doc.querySelector(`script[${SCRIPT_ATTR}]`);
+  if (script) {
+    if (!scriptLoadedOnce) {
+      // If a server rendered script already exists, make sure we flush asap.
+      scriptLoadedOnce = true;
+      flushPendingCalls();
+    }
+    return script;
+  }
+
+  script = doc.createElement("script");
+  script.defer = true;
+  script.src = ANALYTICS_CONFIG.scriptSrc;
+  script.setAttribute(SCRIPT_ATTR, SCRIPT_IDENTIFIER);
+  script.dataset.websiteId = ANALYTICS_CONFIG.websiteId;
+  script.dataset.autoTrack = "false";
+  script.addEventListener("load", () => {
+    scriptLoadedOnce = true;
+    flushPendingCalls();
+  });
+  doc.head.appendChild(script);
+
+  scheduleFlush();
+
+  return script;
+}
+
+function queueCall(method, args) {
+  pendingCalls.push({ method, args });
+  scheduleFlush();
+}
+
+function invokeUmami(method, args) {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  ensureAnalyticsLoaded();
+
+  const umami = window.umami;
+  if (umami && typeof umami[method] === "function") {
+    try {
+      umami[method].apply(umami, args);
+    } catch (err) {
+      console.warn("[analytics] Failed to call", method, err);
+    }
+    return;
+  }
+
+  queueCall(method, args);
+}
+
+export function trackPageView(path, referrer) {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  const resolvedPath =
+    typeof path === "string" && path.length > 0
+      ? path
+      : `${window.location.pathname}${window.location.hash || ""}`;
+
+  const resolvedReferrer =
+    typeof referrer === "string" ? referrer : document.referrer || "";
+
+  let absoluteUrl = resolvedPath;
+  try {
+    absoluteUrl = new URL(resolvedPath, window.location.origin).toString();
+  } catch (err) {
+    // Fall back to the provided path if it cannot be resolved.
+  }
+
+  let absoluteReferrer = resolvedReferrer;
+  if (resolvedReferrer) {
+    try {
+      absoluteReferrer = new URL(resolvedReferrer, window.location.origin).toString();
+    } catch (err) {
+      // Keep original referrer if it cannot be normalized.
+    }
+  }
+
+  invokeUmami("track", [
+    (basePayload = {}) => ({
+      ...basePayload,
+      url: absoluteUrl || basePayload.url,
+      referrer: absoluteReferrer || basePayload.referrer,
+    }),
+    "pageview",
+  ]);
+}
+
+export function trackVideoView({
+  videoId,
+  title,
+  source,
+  hasMagnet,
+  hasUrl,
+} = {}) {
+  if (!isBrowserEnvironment()) {
+    return;
+  }
+
+  const payload = {};
+
+  if (videoId) {
+    payload.videoId = String(videoId);
+  }
+
+  if (title) {
+    payload.title = String(title);
+  }
+
+  if (source) {
+    payload.source = String(source);
+  }
+
+  if (typeof hasMagnet === "boolean") {
+    payload.hasMagnet = hasMagnet;
+  }
+
+  if (typeof hasUrl === "boolean") {
+    payload.hasUrl = hasUrl;
+  }
+
+  invokeUmami("track", [
+    ANALYTICS_CONFIG.videoViewEventName,
+    payload,
+  ]);
+}
+
+// Immediately queue the analytics script so page views are captured early.
+if (isBrowserEnvironment()) {
+  ensureAnalyticsLoaded();
+}
diff --git a/js/analyticsConfig.js b/js/analyticsConfig.js
new file mode 100644
index 00000000..a4bf0749
--- /dev/null
+++ b/js/analyticsConfig.js
@@ -0,0 +1,18 @@
+// js/analyticsConfig.js
+// Central configuration for site-wide analytics tracking.
+
+export const ANALYTICS_CONFIG = Object.freeze({
+  /**
+   * Hosted Umami script that powers analytics.
+   * Update this value if the tracker is relocated.
+   */
+  scriptSrc: "https://umami.malin.onl/script.js",
+  /**
+   * The Umami website identifier for this deployment.
+   */
+  websiteId: "1f8eead2-79f0-4dba-8c3b-ed9b08b6e877",
+  /**
+   * Event name used when recording individual video views.
+   */
+  videoViewEventName: "video_view",
+});
diff --git a/js/app.js b/js/app.js
index 07878cc0..61fd68df 100644
--- a/js/app.js
+++ b/js/app.js
@@ -9,6 +9,7 @@ import { safeDecodeMagnet } from "./magnetUtils.js";
 import { normalizeAndAugmentMagnet } from "./magnet.js";
 import { deriveTorrentPlaybackConfig } from "./playbackUtils.js";
 import { URL_FIRST_ENABLED } from "./constants.js";
+import { trackVideoView } from "./analytics.js";
 import {
   initialWhitelist,
   initialBlacklist,
@@ -3111,6 +3112,14 @@ class bitvidApp {
     const magnetSupported = isValidMagnetUri(usableMagnetCandidate);
     const sanitizedMagnet = magnetSupported ? usableMagnetCandidate : "";
 
+    trackVideoView({
+      videoId: video.id || eventId,
+      title: video.title || "Untitled",
+      source: "event",
+      hasMagnet: !!sanitizedMagnet,
+      hasUrl: !!trimmedUrl,
+    });
+
     this.currentVideo = {
       ...video,
       url: trimmedUrl,
@@ -3195,6 +3204,17 @@ class bitvidApp {
     const magnetSupported = isValidMagnetUri(usableMagnet);
     const sanitizedMagnet = magnetSupported ? usableMagnet : "";
 
+    trackVideoView({
+      videoId:
+        typeof title === "string" && title.trim().length > 0
+          ? `direct:${title.trim()}`
+          : "direct-playback",
+      title,
+      source: "direct",
+      hasMagnet: !!sanitizedMagnet,
+      hasUrl: !!sanitizedUrl,
+    });
+
     if (!sanitizedUrl && !sanitizedMagnet) {
       const message = trimmedMagnet && !magnetSupported
         ? UNSUPPORTED_BTITH_MESSAGE
diff --git a/js/index.js b/js/index.js
index 64d41275..8b4a2d10 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,5 +1,7 @@
 // js/index.js
 
+import { trackPageView } from "./analytics.js";
+
 // 1) Load modals (login, application, etc.)
 async function loadModal(url) {
   try {
@@ -301,6 +303,11 @@ function handleQueryParams() {
 /**
  * Handle #view=... in the hash and load the correct partial view.
  */
+function recordView(viewName) {
+  const path = `${window.location.pathname}#view=${viewName}`;
+  trackPageView(path);
+}
+
 function handleHashChange() {
   console.log("handleHashChange called, current hash =", window.location.hash);
 
@@ -317,6 +324,7 @@ function handleHashChange() {
         if (typeof initFn === "function") {
           initFn();
         }
+        recordView("most-recent-videos");
       });
     });
     return;
@@ -332,6 +340,7 @@ function handleHashChange() {
       if (typeof initFn === "function") {
         initFn();
       }
+      recordView(viewName);
     });
   });
 }

From f9f9c8149c86a455fc88012b7112dca3a2324689 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 11:14:10 -0400
Subject: [PATCH 070/101] Simplify tracking script integration

---
 blog.html                            |  1 +
 index.html                           |  1 +
 js/index.js                          | 15 ++++------
 js/tracking.js                       | 41 ++++++++++++++++++++++++++++
 tests/nostr-ephemeral-dm-tester.html |  1 +
 torrent/beacon.html                  |  1 +
 6 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 js/tracking.js

diff --git a/blog.html b/blog.html
index bd41b469..395c5be8 100644
--- a/blog.html
+++ b/blog.html
@@ -34,6 +34,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title></title>
+    <script src="./js/tracking.js" defer></script>
     <script type="module" crossorigin>
       var pv = Object.defineProperty;
       var gv = (e, t, n) =>
diff --git a/index.html b/index.html
index e707cdd4..8ee91fbe 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,7 @@
     <meta name="theme-color" content="#0f172a" />
 
     <!-- Styles -->
+    <script src="js/tracking.js" defer></script>
     <link href="css/tailwind.min.css" rel="stylesheet" />
     <link href="css/style.css" rel="stylesheet" />
     <link href="css/markdown.css" rel="stylesheet" />
diff --git a/js/index.js b/js/index.js
index 64d41275..d86228d1 100644
--- a/js/index.js
+++ b/js/index.js
@@ -298,9 +298,6 @@ function handleQueryParams() {
   }
 }
 
-/**
- * Handle #view=... in the hash and load the correct partial view.
- */
 function handleHashChange() {
   console.log("handleHashChange called, current hash =", window.location.hash);
 
@@ -327,11 +324,11 @@ function handleHashChange() {
 
   // Now dynamically load that partial, then call its init function
   import("./viewManager.js").then(({ loadView, viewInitRegistry }) => {
-    loadView(viewUrl).then(() => {
-      const initFn = viewInitRegistry[viewName];
-      if (typeof initFn === "function") {
-        initFn();
-      }
-    });
+      loadView(viewUrl).then(() => {
+        const initFn = viewInitRegistry[viewName];
+        if (typeof initFn === "function") {
+          initFn();
+        }
+      });
   });
 }
diff --git a/js/tracking.js b/js/tracking.js
new file mode 100644
index 00000000..f19158c7
--- /dev/null
+++ b/js/tracking.js
@@ -0,0 +1,41 @@
+// js/tracking.js
+// Centralized configuration and loader for the site's analytics script.
+// Update `bitvidTrackingConfig` to change the tracking provider or settings.
+window.bitvidTrackingConfig = window.bitvidTrackingConfig || {
+  src: "https://umami.malin.onl/script.js",
+  websiteId: "1f8eead2-79f0-4dba-8c3b-ed9b08b6e877",
+};
+
+(function loadTrackingScript(config) {
+  if (!config || !config.src) {
+    return;
+  }
+
+  if (document.querySelector(`script[src="${config.src}"]`)) {
+    return;
+  }
+
+  const script = document.createElement("script");
+  script.src = config.src;
+  script.defer = true;
+
+  if (config.websiteId) {
+    script.setAttribute("data-website-id", config.websiteId);
+  }
+
+  const additionalAttributes = config.attributes || {};
+  Object.entries(additionalAttributes).forEach(([key, value]) => {
+    if (key === "defer") {
+      script.defer = Boolean(value);
+      return;
+    }
+
+    if (value === false || value === null || typeof value === "undefined") {
+      return;
+    }
+
+    script.setAttribute(key, value);
+  });
+
+  document.head.appendChild(script);
+})(window.bitvidTrackingConfig);
diff --git a/tests/nostr-ephemeral-dm-tester.html b/tests/nostr-ephemeral-dm-tester.html
index 4c908ae9..2a97cfa2 100644
--- a/tests/nostr-ephemeral-dm-tester.html
+++ b/tests/nostr-ephemeral-dm-tester.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Nostr Ephemeral DM Tester (Using finalizeEvent)</title>
+    <script src="../js/tracking.js" defer></script>
     <style>
       /* Basic styling for the demo page */
       body {
diff --git a/torrent/beacon.html b/torrent/beacon.html
index 541fb82b..8c6b6052 100644
--- a/torrent/beacon.html
+++ b/torrent/beacon.html
@@ -17,6 +17,7 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
     <!-- Scripts: webtorrent, angular, etc. -->
+    <script src="../js/tracking.js" defer></script>
     <script src="bundle.min.js"></script>
     <!--<script src="https://cdn.jsdelivr.net/combine/npm/webtorrent/webtorrent.min.js,npm/moment@2,npm/angular@1.5/angular.min.js,npm/angular-route@1.5/angular-route.min.js,npm/angular-sanitize@1.5/angular-sanitize.min.js,npm/angular-ui-grid@3/ui-grid.min.js,gh/matowens/ng-notify/dist/ng-notify.min.js,npm/ng-file-upload@12.2.13/dist/ng-file-upload.min.js"></script>-->
 

From 6c6641c961791fcf131bb536d1930523a0d0bb75 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 11:48:31 -0400
Subject: [PATCH 071/101] Restore Umami automatic tracking

---
 js/analytics.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/js/analytics.js b/js/analytics.js
index f256f4ee..bdab3ef8 100644
--- a/js/analytics.js
+++ b/js/analytics.js
@@ -74,8 +74,7 @@ export function ensureAnalyticsLoaded(doc = typeof document !== "undefined" ? do
   script.src = ANALYTICS_CONFIG.scriptSrc;
   script.setAttribute(SCRIPT_ATTR, SCRIPT_IDENTIFIER);
   script.dataset.websiteId = ANALYTICS_CONFIG.websiteId;
-  // 🔧 merged conflicting changes from codex/add-tracking-script-to-all-pages vs unstable
-  script.dataset.autoTrack = "false";
+  // Allow Umami to handle automatic pageview tracking by default.
   script.addEventListener("load", () => {
     scriptLoadedOnce = true;
     flushPendingCalls();

From c56ffdfee6f35b27769393a6636e7fd90a124cac Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 12:20:29 -0400
Subject: [PATCH 072/101] Reduce video list thrash and skip modal tracking

---
 js/app.js   | 31 +++++++++++++++++++++++++++++++
 js/index.js |  7 ++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/js/app.js b/js/app.js
index 61fd68df..040c2c38 100644
--- a/js/app.js
+++ b/js/app.js
@@ -27,6 +27,7 @@ const UNSUPPORTED_BTITH_MESSAGE =
   "This magnet link is missing a compatible BitTorrent v1 info hash.";
 
 const FALLBACK_THUMBNAIL_SRC = "assets/jpg/video-thumbnail-fallback.jpg";
+const EMPTY_VIDEO_LIST_SIGNATURE = "__EMPTY__";
 // We probe hosted URLs often enough that a naive implementation would spam
 // remote CDNs. A medium-lived cache (roughly 45 minutes) keeps us from
 // hammering dead hosts while still giving the UI timely updates when a CDN
@@ -481,6 +482,8 @@ class bitvidApp {
     this.videosMap = new Map();
     // Simple cache for user profiles
     this.profileCache = new Map();
+    this.lastRenderedVideoSignature = null;
+    this._lastRenderedVideoListElement = null;
 
     // NEW: reference to the login modal's close button
     this.closeLoginModalBtn =
@@ -1803,6 +1806,7 @@ class bitvidApp {
     // The rest of your existing logic:
     if (!this.videoSubscription) {
       if (this.videoList) {
+        this.lastRenderedVideoSignature = null;
         this.videoList.innerHTML = `
         <p class="text-center text-gray-500">
           Loading videos as they arrive...
@@ -2077,10 +2081,19 @@ class bitvidApp {
   async renderVideoList(videos) {
     if (!this.videoList) return;
 
+    if (this._lastRenderedVideoListElement !== this.videoList) {
+      this.lastRenderedVideoSignature = null;
+      this._lastRenderedVideoListElement = this.videoList;
+    }
+
     const dedupedVideos = this.dedupeVideosByRoot(videos);
 
     // 1) If no videos
     if (!dedupedVideos.length) {
+      if (this.lastRenderedVideoSignature === EMPTY_VIDEO_LIST_SIGNATURE) {
+        return;
+      }
+      this.lastRenderedVideoSignature = EMPTY_VIDEO_LIST_SIGNATURE;
       this.videoList.innerHTML = `
         <p class="flex justify-center items-center h-full w-full text-center text-gray-500">
           No public videos available yet. Be the first to upload one!
@@ -2091,6 +2104,24 @@ class bitvidApp {
     // 2) Sort newest first
     dedupedVideos.sort((a, b) => b.created_at - a.created_at);
 
+    const signaturePayload = dedupedVideos.map((video) => ({
+      id: typeof video.id === "string" ? video.id : "",
+      createdAt: Number.isFinite(video.created_at)
+        ? video.created_at
+        : Number(video.created_at) || 0,
+      deleted: Boolean(video.deleted),
+      isPrivate: Boolean(video.isPrivate),
+      thumbnail: typeof video.thumbnail === "string" ? video.thumbnail : "",
+      url: typeof video.url === "string" ? video.url : "",
+      magnet: typeof video.magnet === "string" ? video.magnet : "",
+    }));
+    const signature = JSON.stringify(signaturePayload);
+
+    if (signature === this.lastRenderedVideoSignature) {
+      return;
+    }
+    this.lastRenderedVideoSignature = signature;
+
     const fullAllEventsArray = Array.from(nostrClient.allEvents.values());
     const fragment = document.createDocumentFragment();
     const authorSet = new Set();
diff --git a/js/index.js b/js/index.js
index 12e3726b..a26695be 100644
--- a/js/index.js
+++ b/js/index.js
@@ -10,9 +10,14 @@ async function loadModal(url) {
       throw new Error("Failed to load " + url);
     }
     const html = await response.text();
+    // Remove analytics loader tags from modal partials to avoid duplicate pageview events.
+    const sanitizedHtml = html.replace(
+      /<script\b[^>]*src=["'][^"']*tracking\.js[^"']*["'][^>]*>\s*<\/script>/gi,
+      ""
+    );
     document
       .getElementById("modalContainer")
-      .insertAdjacentHTML("beforeend", html);
+      .insertAdjacentHTML("beforeend", sanitizedHtml);
     console.log(url, "loaded");
   } catch (err) {
     console.error(err);

From 2d48f89f454a84a686cb24d032760b2dbeeac04e Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 12:53:29 -0400
Subject: [PATCH 073/101] Improve thumbnail loading stability and skip tracking
 in modals

---
 js/app.js         | 91 ++++++++++++++++++++++++++++++++++++++++++++---
 js/viewManager.js |  6 ++++
 2 files changed, 93 insertions(+), 4 deletions(-)

diff --git a/js/app.js b/js/app.js
index 040c2c38..83cb4666 100644
--- a/js/app.js
+++ b/js/app.js
@@ -27,6 +27,7 @@ const UNSUPPORTED_BTITH_MESSAGE =
   "This magnet link is missing a compatible BitTorrent v1 info hash.";
 
 const FALLBACK_THUMBNAIL_SRC = "assets/jpg/video-thumbnail-fallback.jpg";
+const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
 const EMPTY_VIDEO_LIST_SIGNATURE = "__EMPTY__";
 // We probe hosted URLs often enough that a naive implementation would spam
 // remote CDNs. A medium-lived cache (roughly 45 minutes) keeps us from
@@ -38,6 +39,19 @@ const URL_HEALTH_STORAGE_PREFIX = "bitvid:urlHealth:";
 const urlHealthCache = new Map();
 const urlHealthInFlight = new Map();
 
+function removeTrackingScripts(root) {
+  if (!root || typeof root.querySelectorAll !== "function") {
+    return;
+  }
+
+  root.querySelectorAll("script[src]").forEach((script) => {
+    const src = script.getAttribute("src") || "";
+    if (TRACKING_SCRIPT_PATTERN.test(src)) {
+      script.remove();
+    }
+  });
+}
+
 function getUrlHealthStorageKey(eventId) {
   return `${URL_HEALTH_STORAGE_PREFIX}${eventId}`;
 }
@@ -415,6 +429,7 @@ class bitvidApp {
 
     // Lazy-loading helper for images
     this.mediaLoader = new MediaLoader();
+    this.loadedThumbnails = new Map();
     this.activeIntervals = [];
     this.urlPlaybackWatchdogCleanup = null;
 
@@ -618,6 +633,7 @@ class bitvidApp {
       // Instead of overwriting, we append a new DIV with the fetched HTML
       const wrapper = document.createElement("div");
       wrapper.innerHTML = html; // set the markup
+      removeTrackingScripts(wrapper);
       modalContainer.appendChild(wrapper); // append the markup
 
       // Now we can safely find elements inside:
@@ -859,6 +875,7 @@ class bitvidApp {
       // Append the upload modal markup
       const wrapper = document.createElement("div");
       wrapper.innerHTML = html;
+      removeTrackingScripts(wrapper);
       modalContainer.appendChild(wrapper);
 
       // Grab references
@@ -911,6 +928,7 @@ class bitvidApp {
       }
       const wrapper = document.createElement("div");
       wrapper.innerHTML = html;
+      removeTrackingScripts(wrapper);
       modalContainer.appendChild(wrapper);
 
       // Now references
@@ -2088,6 +2106,20 @@ class bitvidApp {
 
     const dedupedVideos = this.dedupeVideosByRoot(videos);
 
+    if (this.loadedThumbnails && this.loadedThumbnails.size) {
+      const activeIds = new Set();
+      dedupedVideos.forEach((video) => {
+        if (video && typeof video.id === "string" && video.id) {
+          activeIds.add(video.id);
+        }
+      });
+      Array.from(this.loadedThumbnails.keys()).forEach((videoId) => {
+        if (!activeIds.has(videoId)) {
+          this.loadedThumbnails.delete(videoId);
+        }
+      });
+    }
+
     // 1) If no videos
     if (!dedupedVideos.length) {
       if (this.lastRenderedVideoSignature === EMPTY_VIDEO_LIST_SIGNATURE) {
@@ -2233,6 +2265,36 @@ class bitvidApp {
         ? this.getUrlHealthPlaceholderMarkup()
         : "";
 
+      const rawThumbnail =
+        typeof video.thumbnail === "string" ? video.thumbnail.trim() : "";
+      const escapedThumbnail = rawThumbnail
+        ? this.escapeHTML(rawThumbnail)
+        : "";
+      const previouslyLoadedThumbnail =
+        this.loadedThumbnails.get(video.id) || "";
+      const shouldLazyLoadThumbnail =
+        escapedThumbnail && previouslyLoadedThumbnail !== escapedThumbnail;
+      const thumbnailAttrLines = ["data-video-thumbnail=\"true\""];
+      if (shouldLazyLoadThumbnail) {
+        thumbnailAttrLines.push(
+          `src=\"${FALLBACK_THUMBNAIL_SRC}\"`,
+          `data-fallback-src=\"${FALLBACK_THUMBNAIL_SRC}\"`,
+          `data-lazy=\"${escapedThumbnail}\"`,
+          'loading="lazy"',
+          'decoding="async"'
+        );
+      } else {
+        thumbnailAttrLines.push(
+          `src=\"${escapedThumbnail || FALLBACK_THUMBNAIL_SRC}\"`,
+          `data-fallback-src=\"${FALLBACK_THUMBNAIL_SRC}\"`,
+          'loading="lazy"',
+          'decoding="async"'
+        );
+      }
+      thumbnailAttrLines.push(
+        `alt=\"${this.escapeHTML(video.title)}\"`
+      );
+
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <!-- The clickable link to play video -->
@@ -2246,10 +2308,7 @@ class bitvidApp {
           >
             <div class="ratio-16-9">
               <img
-                src="${FALLBACK_THUMBNAIL_SRC}"
-                data-fallback-src="${FALLBACK_THUMBNAIL_SRC}"
-                data-lazy="${this.escapeHTML(video.thumbnail)}"
-                alt="${this.escapeHTML(video.title)}"
+                ${thumbnailAttrLines.join("\n                ")}
               />
             </div>
           </a>
@@ -2299,6 +2358,30 @@ class bitvidApp {
       template.innerHTML = cardHtml.trim();
       const cardEl = template.content.firstElementChild;
       if (cardEl) {
+        const thumbnailEl = cardEl.querySelector("[data-video-thumbnail]");
+        if (thumbnailEl) {
+          const handleThumbnailLoad = () => {
+            if (!thumbnailEl.dataset.thumbnailFailed && escapedThumbnail) {
+              this.loadedThumbnails.set(video.id, escapedThumbnail);
+            }
+          };
+          const handleThumbnailError = () => {
+            if (
+              escapedThumbnail &&
+              this.loadedThumbnails.get(video.id) === escapedThumbnail
+            ) {
+              this.loadedThumbnails.delete(video.id);
+            }
+          };
+
+          thumbnailEl.addEventListener("load", handleThumbnailLoad, {
+            once: true,
+          });
+          thumbnailEl.addEventListener("error", handleThumbnailError, {
+            once: true,
+          });
+        }
+
         if (showUnsupportedTorrentBadge) {
           cardEl.dataset.torrentSupported = "false";
         } else if (magnetProvided && magnetSupported) {
diff --git a/js/viewManager.js b/js/viewManager.js
index 3f21aa75..f22746c7 100644
--- a/js/viewManager.js
+++ b/js/viewManager.js
@@ -2,6 +2,8 @@
 import { initChannelProfileView } from "./channelProfile.js";
 import { subscriptions } from "./subscriptions.js";
 
+const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
+
 /**
  * Load a partial view by URL into the #viewContainer.
  */
@@ -23,6 +25,10 @@ export async function loadView(viewUrl) {
     // Copy and execute any inline scripts
     const scriptTags = doc.querySelectorAll("script");
     scriptTags.forEach((oldScript) => {
+      const src = oldScript.getAttribute("src") || "";
+      if (src && TRACKING_SCRIPT_PATTERN.test(src)) {
+        return;
+      }
       const newScript = document.createElement("script");
       Array.from(oldScript.attributes).forEach((attr) => {
         newScript.setAttribute(attr.name, attr.value);

From 52553165d6743b23c60e3faa77ed80d6a3d62043 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 13:24:05 -0400
Subject: [PATCH 074/101] Speed up modal open animations

---
 components/upload-modal.html | 2 +-
 components/video-modal.html  | 2 +-
 css/style.css                | 9 ++++++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/upload-modal.html b/components/upload-modal.html
index ea0eeb15..d361a352 100644
--- a/components/upload-modal.html
+++ b/components/upload-modal.html
@@ -24,7 +24,7 @@
     >
       <!-- Top Bar (similar to video-modal) -->
       <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300 p-4 flex items-center justify-between"
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150 p-4 flex items-center justify-between"
       >
         <h2 class="text-xl font-bold text-white">Share a Video</h2>
         <button
diff --git a/components/video-modal.html b/components/video-modal.html
index 13202077..5b08e61a 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -9,7 +9,7 @@
       <!-- Navigation bar - sliding at top -->
       <div
         id="modalNav"
-        class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300"
+        class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150"
       >
         <div class="flex items-center px-6 py-4">
           <button
diff --git a/css/style.css b/css/style.css
index 839ecf2e..21e19f30 100644
--- a/css/style.css
+++ b/css/style.css
@@ -8,6 +8,7 @@
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --modal-motion-duration: 160ms;
 }
 
 /* Core Styles */
@@ -137,7 +138,7 @@ header img {
   display: flex;
   flex-direction: column;
   background-color: #0f172a;
-  animation: fadeIn 0.3s ease-in-out;
+  animation: fadeIn var(--modal-motion-duration) ease-out;
 }
 
 @keyframes fadeIn {
@@ -151,6 +152,12 @@ header img {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .modal-content {
+    animation-duration: 1ms;
+  }
+}
+
 /* Video Container */
 .video-container {
   width: 100%;

From 4cbcfcfbf406c4ca30e6b84e8ca0961bd62a1fd8 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 13:58:06 -0400
Subject: [PATCH 075/101] Add drop-up resources menu to sidebar

---
 components/sidebar.html | 125 ++++++++++++++++++++++++----------------
 css/style.css           |  57 ++++++++++++++++++
 2 files changed, 133 insertions(+), 49 deletions(-)

diff --git a/components/sidebar.html b/components/sidebar.html
index 21180f22..0511db9b 100644
--- a/components/sidebar.html
+++ b/components/sidebar.html
@@ -45,39 +45,16 @@
       </div>
     </div>
 
-    <!-- Mobile Dropdown Button for Footer Links -->
-    <!-- Added p-4 around the button for spacing, and styling consistent with top links -->
-    <div class="md:hidden p-4">
-      <button
-        id="footerDropdownButton"
-        class="flex items-center w-full py-2 px-4 bg-gray-800 hover:bg-gray-700 text-sm font-semibold text-gray-100 rounded shadow-md focus:outline-none transition-colors duration-200"
-      >
-        <!-- Arrow on the left side -->
-        <svg
-          id="footerDropdownIcon"
-          class="w-4 h-4 mr-2 transform transition-transform duration-300"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-        <span id="footerDropdownText">More</span>
-      </button>
-    </div>
-
     <!-- Footer Links Container -->
-    <!-- On mobile: hidden by default; on desktop: visible and pushed to the bottom -->
-    <div id="footerLinksContainer" class="hidden md:block md:mt-auto">
-      <hr class="border-gray-700" />
-      <div class="p-4">
-        <nav class="space-y-2 text-sm opacity-70">
+    <div class="md:mt-auto px-4 pb-6">
+      <div class="sidebar-dropup">
+        <div
+          id="sidebarResourceLinks"
+          class="sidebar-dropup-panel sidebar-dropup-panel--collapsed"
+          aria-hidden="true"
+        >
+          <div class="sidebar-dropup-panel__inner">
+            <nav class="space-y-2 text-sm opacity-70">
           <a
             href="#view=about"
             class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
@@ -216,30 +193,80 @@
             <img src="assets/svg/dns-icon.svg" alt="DNS" class="w-5 h-5 mr-3" />
             <span class="sidebar-text">DNS</span>
           </a>
-        </nav>
+            </nav>
+          </div>
+        </div>
+        <button
+          id="sidebarResourceToggle"
+          class="sidebar-dropup-trigger"
+          type="button"
+          aria-expanded="false"
+          aria-controls="sidebarResourceLinks"
+        >
+          <span class="sidebar-dropup-trigger__content">
+            <img
+              src="assets/svg/video-settings-gear.svg"
+              alt="Open resources menu"
+              class="w-5 h-5"
+            />
+            <span class="ml-3 text-sm font-semibold tracking-wide">Resources</span>
+          </span>
+          <svg
+            id="sidebarResourceArrow"
+            class="w-4 h-4 ml-3 transition-transform duration-300"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M5 15l7-7 7 7"
+            />
+          </svg>
+        </button>
       </div>
     </div>
   </div>
 
   <script>
     (function () {
-      var btn = document.getElementById("footerDropdownButton");
-      var footerLinks = document.getElementById("footerLinksContainer");
-      if (btn && footerLinks) {
-        btn.addEventListener("click", function () {
-          footerLinks.classList.toggle("hidden");
-          var icon = document.getElementById("footerDropdownIcon");
-          var textSpan = document.getElementById("footerDropdownText");
-          if (footerLinks.classList.contains("hidden")) {
-            textSpan.textContent = "More";
-            if (icon) {
-              icon.classList.remove("rotate-180");
-            }
-          } else {
-            textSpan.textContent = "Less";
-            if (icon) {
-              icon.classList.add("rotate-180");
+      var toggleButton = document.getElementById("sidebarResourceToggle");
+      var dropupPanel = document.getElementById("sidebarResourceLinks");
+      var arrowIcon = document.getElementById("sidebarResourceArrow");
+      if (toggleButton && dropupPanel) {
+        var focusableItems = dropupPanel.querySelectorAll("a, button, [tabindex]");
+        var setFocusableState = function (shouldDisable) {
+          focusableItems.forEach(function (el) {
+            if (shouldDisable) {
+              el.setAttribute("tabindex", "-1");
+            } else if (el.hasAttribute("data-original-tabindex")) {
+              el.setAttribute("tabindex", el.getAttribute("data-original-tabindex"));
+            } else {
+              el.removeAttribute("tabindex");
             }
+          });
+        };
+
+        focusableItems.forEach(function (el) {
+          if (el.hasAttribute("tabindex")) {
+            el.setAttribute("data-original-tabindex", el.getAttribute("tabindex"));
+          }
+        });
+
+        setFocusableState(true);
+
+        toggleButton.addEventListener("click", function () {
+          var isExpanded = toggleButton.getAttribute("aria-expanded") === "true";
+          toggleButton.setAttribute("aria-expanded", String(!isExpanded));
+          dropupPanel.setAttribute("aria-hidden", String(isExpanded));
+          dropupPanel.classList.toggle("sidebar-dropup-panel--expanded", !isExpanded);
+          dropupPanel.classList.toggle("sidebar-dropup-panel--collapsed", isExpanded);
+          setFocusableState(isExpanded);
+          if (arrowIcon) {
+            arrowIcon.classList.toggle("rotate-180", !isExpanded);
           }
         });
       }
diff --git a/css/style.css b/css/style.css
index 21e19f30..031d7f0a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -548,3 +548,60 @@ footer a:hover {
 #sidebar hr {
   border-color: rgba(255, 255, 255, 0.1);
 }
+
+/* Sidebar drop-up menu styling */
+.sidebar-dropup {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.75rem;
+}
+
+.sidebar-dropup-panel {
+  background-color: #1f2937; /* gray-800 */
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 0.75rem;
+  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.45);
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transform: translateY(16px);
+  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
+}
+
+.sidebar-dropup-panel__inner {
+  padding: 1.25rem;
+}
+
+.sidebar-dropup-panel--expanded {
+  max-height: 640px;
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.sidebar-dropup-trigger {
+  align-items: center;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(14, 116, 144, 0.35));
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  border-radius: 9999px;
+  color: #f8fafc;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+  width: 100%;
+}
+
+.sidebar-dropup-trigger:hover,
+.sidebar-dropup-trigger:focus {
+  border-color: rgba(148, 163, 184, 0.6);
+  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
+  outline: none;
+  transform: translateY(-1px);
+}
+
+.sidebar-dropup-trigger__content {
+  align-items: center;
+  display: flex;
+}

From 237724b8ac2ed4b611dcb197825104c2c30c42d7 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 14:07:36 -0400
Subject: [PATCH 076/101] Restore sidebar footer toggle

---
 components/sidebar.html | 358 ++++++++++++++++++++--------------------
 1 file changed, 179 insertions(+), 179 deletions(-)

diff --git a/components/sidebar.html b/components/sidebar.html
index 21180f22..de61c597 100644
--- a/components/sidebar.html
+++ b/components/sidebar.html
@@ -45,178 +45,181 @@
       </div>
     </div>
 
-    <!-- Mobile Dropdown Button for Footer Links -->
-    <!-- Added p-4 around the button for spacing, and styling consistent with top links -->
-    <div class="md:hidden p-4">
-      <button
-        id="footerDropdownButton"
-        class="flex items-center w-full py-2 px-4 bg-gray-800 hover:bg-gray-700 text-sm font-semibold text-gray-100 rounded shadow-md focus:outline-none transition-colors duration-200"
-      >
-        <!-- Arrow on the left side -->
-        <svg
-          id="footerDropdownIcon"
-          class="w-4 h-4 mr-2 transform transition-transform duration-300"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-        <span id="footerDropdownText">More</span>
-      </button>
-    </div>
-
-    <!-- Footer Links Container -->
-    <!-- On mobile: hidden by default; on desktop: visible and pushed to the bottom -->
-    <div id="footerLinksContainer" class="hidden md:block md:mt-auto">
-      <hr class="border-gray-700" />
+    <!-- Footer Links Toggle -->
+    <div class="md:mt-auto">
       <div class="p-4">
-        <nav class="space-y-2 text-sm opacity-70">
-          <a
-            href="#view=about"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+        <button
+          id="footerDropdownButton"
+          type="button"
+          class="flex items-center w-full py-2 px-4 bg-gray-800 hover:bg-gray-700 text-sm font-semibold text-gray-100 rounded shadow-md focus:outline-none transition-colors duration-200"
+          aria-expanded="false"
+          aria-controls="footerLinksContainer"
+        >
+          <!-- Arrow on the left side -->
+          <svg
+            id="footerDropdownIcon"
+            class="w-4 h-4 mr-2 transform transition-transform duration-300"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
           >
-            <img
-              src="assets/svg/about-icon.svg"
-              alt="About"
-              class="w-5 h-5 mr-3"
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
             />
-            <span class="sidebar-text">About</span>
-          </a>
-          <a
-            href="#view=community-guidelines"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/guidelines-icon.svg"
-              alt="Guidelines"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Guidelines</span>
-          </a>
-          <a
-            href="#view=getting-started"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/getting-started-icon.svg"
-              alt="Getting Started"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Getting Started</span>
-          </a>
-          <a
-            href="#view=roadmap"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/roadmap-icon.svg"
-              alt="Roadmap"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Roadmap</span>
-          </a>
-          <a
-            href="#view=blog"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/blog-icon.svg"
-              alt="Blog"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Blog</span>
-          </a>
-          <a
-            href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/nostr-icon.svg"
-              alt="Nostr"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Nostr</span>
-          </a>
-          <a
-            href="https://github.com/PR0M3TH3AN/bitvid"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/github-icon.svg"
-              alt="GitHub"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">GitHub</span>
-          </a>
-          <a
-            href="torrent/beacon.html"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/beacon-icon.svg"
-              alt="βeacon"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">βeacon</span>
-          </a>
-          <a
-            href="https://beta.bitvid.network/"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/beta-icon.svg"
-              alt="Beta"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Beta</span>
-          </a>
-          <a
-            href="#view=links"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/links-icon.svg"
-              alt="Links"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">Links</span>
-          </a>
-          <a
-            href="#view=ipns"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img
-              src="assets/svg/ipns-icon.svg"
-              alt="IPNS"
-              class="w-5 h-5 mr-3"
-            />
-            <span class="sidebar-text">IPNS</span>
-          </a>
-          <a
-            href="https://bitvid.network/"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
-          >
-            <img src="assets/svg/dns-icon.svg" alt="DNS" class="w-5 h-5 mr-3" />
-            <span class="sidebar-text">DNS</span>
-          </a>
-        </nav>
+          </svg>
+          <span id="footerDropdownText">More</span>
+        </button>
+      </div>
+
+      <!-- Footer Links Container -->
+      <div id="footerLinksContainer" class="hidden">
+        <hr class="border-gray-700" />
+        <div class="p-4">
+          <nav class="space-y-2 text-sm opacity-70">
+            <a
+              href="#view=about"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/about-icon.svg"
+                alt="About"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">About</span>
+            </a>
+            <a
+              href="#view=community-guidelines"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/guidelines-icon.svg"
+                alt="Guidelines"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Guidelines</span>
+            </a>
+            <a
+              href="#view=getting-started"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/getting-started-icon.svg"
+                alt="Getting Started"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Getting Started</span>
+            </a>
+            <a
+              href="#view=roadmap"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/roadmap-icon.svg"
+                alt="Roadmap"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Roadmap</span>
+            </a>
+            <a
+              href="#view=blog"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/blog-icon.svg"
+                alt="Blog"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Blog</span>
+            </a>
+            <a
+              href="https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/nostr-icon.svg"
+                alt="Nostr"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Nostr</span>
+            </a>
+            <a
+              href="https://github.com/PR0M3TH3AN/bitvid"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/github-icon.svg"
+                alt="GitHub"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">GitHub</span>
+            </a>
+            <a
+              href="torrent/beacon.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/beacon-icon.svg"
+                alt="βeacon"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">βeacon</span>
+            </a>
+            <a
+              href="https://beta.bitvid.network/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/beta-icon.svg"
+                alt="Beta"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Beta</span>
+            </a>
+            <a
+              href="#view=links"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/links-icon.svg"
+                alt="Links"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">Links</span>
+            </a>
+            <a
+              href="#view=ipns"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img
+                src="assets/svg/ipns-icon.svg"
+                alt="IPNS"
+                class="w-5 h-5 mr-3"
+              />
+              <span class="sidebar-text">IPNS</span>
+            </a>
+            <a
+              href="https://bitvid.network/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center hover:bg-gray-800 px-4 py-2 rounded"
+            >
+              <img src="assets/svg/dns-icon.svg" alt="DNS" class="w-5 h-5 mr-3" />
+              <span class="sidebar-text">DNS</span>
+            </a>
+          </nav>
+        </div>
       </div>
     </div>
   </div>
@@ -228,18 +231,15 @@
       if (btn && footerLinks) {
         btn.addEventListener("click", function () {
           footerLinks.classList.toggle("hidden");
+          var isHidden = footerLinks.classList.contains("hidden");
+          btn.setAttribute("aria-expanded", String(!isHidden));
           var icon = document.getElementById("footerDropdownIcon");
           var textSpan = document.getElementById("footerDropdownText");
-          if (footerLinks.classList.contains("hidden")) {
-            textSpan.textContent = "More";
-            if (icon) {
-              icon.classList.remove("rotate-180");
-            }
-          } else {
-            textSpan.textContent = "Less";
-            if (icon) {
-              icon.classList.add("rotate-180");
-            }
+          if (textSpan) {
+            textSpan.textContent = isHidden ? "More" : "Less";
+          }
+          if (icon) {
+            icon.classList.toggle("rotate-180", !isHidden);
           }
         });
       }

From 67b8caa623c99b2e040fca49dafade09877478fe Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 14:12:27 -0400
Subject: [PATCH 077/101] Ensure video thumbnails fall back to placeholder

---
 js/app.js | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/js/app.js b/js/app.js
index 83cb4666..e6af396a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2422,6 +2422,12 @@ class bitvidApp {
     this.videoList.innerHTML = "";
     this.videoList.appendChild(fragment);
 
+    // Ensure every thumbnail can recover with a fallback image if the primary
+    // source fails to load or returns a zero-sized response (some CDNs error
+    // with HTTP 200 + empty body). We set up the listeners before kicking off
+    // any lazy-loading observers so cached failures are covered as well.
+    this.bindThumbnailFallbacks(this.videoList);
+
     // Lazy-load images
     const lazyEls = this.videoList.querySelectorAll("[data-lazy]");
     lazyEls.forEach((el) => this.mediaLoader.observe(el));
@@ -2504,6 +2510,88 @@ class bitvidApp {
     });
   }
 
+  bindThumbnailFallbacks(container) {
+    if (!container || typeof container.querySelectorAll !== "function") {
+      return;
+    }
+
+    const thumbnails = container.querySelectorAll("[data-video-thumbnail]");
+    thumbnails.forEach((img) => {
+      if (!img) {
+        return;
+      }
+
+      const ensureFallbackSource = () => {
+        let fallbackSrc = "";
+        if (typeof img.dataset.fallbackSrc === "string") {
+          fallbackSrc = img.dataset.fallbackSrc.trim();
+        }
+
+        if (!fallbackSrc) {
+          const attr = img.getAttribute("data-fallback-src") || "";
+          fallbackSrc = attr.trim();
+        }
+
+        if (!fallbackSrc && img.tagName === "IMG") {
+          fallbackSrc = FALLBACK_THUMBNAIL_SRC;
+        }
+
+        if (fallbackSrc) {
+          if (img.dataset.fallbackSrc !== fallbackSrc) {
+            img.dataset.fallbackSrc = fallbackSrc;
+          }
+          if (!img.getAttribute("data-fallback-src")) {
+            img.setAttribute("data-fallback-src", fallbackSrc);
+          }
+        }
+
+        return fallbackSrc;
+      };
+
+      const applyFallback = () => {
+        const fallbackSrc = ensureFallbackSource() || FALLBACK_THUMBNAIL_SRC;
+        if (!fallbackSrc) {
+          return;
+        }
+
+        if (img.src !== fallbackSrc) {
+          img.src = fallbackSrc;
+        }
+
+        img.dataset.thumbnailFailed = "true";
+      };
+
+      const handleLoad = () => {
+        if (
+          (img.naturalWidth === 0 && img.naturalHeight === 0) ||
+          !img.currentSrc
+        ) {
+          applyFallback();
+        } else {
+          delete img.dataset.thumbnailFailed;
+        }
+      };
+
+      ensureFallbackSource();
+
+      if (img.dataset.thumbnailFallbackBound === "true") {
+        if (img.complete) {
+          handleLoad();
+        }
+        return;
+      }
+
+      img.addEventListener("error", applyFallback);
+      img.addEventListener("load", handleLoad);
+
+      img.dataset.thumbnailFallbackBound = "true";
+
+      if (img.complete) {
+        handleLoad();
+      }
+    });
+  }
+
   /**
    * Updates the modal to reflect current torrent stats.
    * We remove the unused torrent.status references,

From 32f652e7a8ea9988768e12d0960c660c4451d93a Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 14:36:09 -0400
Subject: [PATCH 078/101] Fix modal playback race after cleanup

---
 js/app.js | 118 +++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 81 insertions(+), 37 deletions(-)

diff --git a/js/app.js b/js/app.js
index e6af396a..21bb3628 100644
--- a/js/app.js
+++ b/js/app.js
@@ -476,6 +476,7 @@ class bitvidApp {
     this.copyMagnetBtn = null;
     this.shareBtn = null;
     this.modalPosterCleanup = null;
+    this.cleanupPromise = null;
 
     // Hide/Show Subscriptions Link
     this.subscriptionsLink = null;
@@ -1441,50 +1442,85 @@ class bitvidApp {
    * Cleanup resources on unload or modal close.
    */
   async cleanup({ preserveSubscriptions = false, preserveObservers = false } = {}) {
-    try {
-      this.clearActiveIntervals();
-      this.cleanupUrlPlaybackWatchdog();
-
-      if (!preserveObservers && this.mediaLoader) {
-        this.mediaLoader.disconnect();
+    // Serialise teardown so overlapping calls (e.g. close button spam) don't
+    // race each other and clobber a fresh playback setup.
+    if (this.cleanupPromise) {
+      try {
+        await this.cleanupPromise;
+      } catch (err) {
+        console.warn("Previous cleanup rejected:", err);
       }
+    }
 
-      if (!preserveSubscriptions && this.videoSubscription) {
-        try {
-          if (typeof this.videoSubscription.unsub === "function") {
-            this.videoSubscription.unsub();
-          }
-        } catch (err) {
-          console.error("Failed to unsubscribe from video feed:", err);
-        } finally {
-          this.videoSubscription = null;
+    const runCleanup = async () => {
+      try {
+        this.clearActiveIntervals();
+        this.cleanupUrlPlaybackWatchdog();
+
+        if (!preserveObservers && this.mediaLoader) {
+          this.mediaLoader.disconnect();
         }
-      }
 
-      // If there's a small inline player
-      if (this.videoElement) {
-        this.videoElement.pause();
-        this.videoElement.src = "";
-        // When WebTorrent (or other MediaSource based flows) mount a stream they
-        // set `srcObject` behind the scenes. Forgetting to clear it leaves the
-        // detached MediaSource hanging around which breaks the next playback
-        // attempt. Always null it out alongside the normal `src` reset.
-        this.videoElement.srcObject = null;
-        this.videoElement.load();
+        if (!preserveSubscriptions && this.videoSubscription) {
+          try {
+            if (typeof this.videoSubscription.unsub === "function") {
+              this.videoSubscription.unsub();
+            }
+          } catch (err) {
+            console.error("Failed to unsubscribe from video feed:", err);
+          } finally {
+            this.videoSubscription = null;
+          }
+        }
+
+        // If there's a small inline player
+        if (this.videoElement) {
+          this.videoElement.pause();
+          this.videoElement.src = "";
+          // When WebTorrent (or other MediaSource based flows) mount a stream they
+          // set `srcObject` behind the scenes. Forgetting to clear it leaves the
+          // detached MediaSource hanging around which breaks the next playback
+          // attempt. Always null it out alongside the normal `src` reset.
+          this.videoElement.srcObject = null;
+          this.videoElement.load();
+        }
+        // If there's a modal video
+        if (this.modalVideo) {
+          this.modalVideo.pause();
+          this.modalVideo.src = "";
+          // See comment above—keep the `srcObject` reset paired with the `src`
+          // wipe so magnet-only replays do not regress into the grey screen bug.
+          this.modalVideo.srcObject = null;
+          this.modalVideo.load();
+        }
+        // Tell webtorrent to cleanup
+        await torrentClient.cleanup();
+      } catch (err) {
+        console.error("Cleanup error:", err);
       }
-      // If there's a modal video
-      if (this.modalVideo) {
-        this.modalVideo.pause();
-        this.modalVideo.src = "";
-        // See comment above—keep the `srcObject` reset paired with the `src`
-        // wipe so magnet-only replays do not regress into the grey screen bug.
-        this.modalVideo.srcObject = null;
-        this.modalVideo.load();
+    };
+
+    const cleanupPromise = runCleanup();
+    this.cleanupPromise = cleanupPromise;
+
+    try {
+      await cleanupPromise;
+    } finally {
+      if (this.cleanupPromise === cleanupPromise) {
+        this.cleanupPromise = null;
       }
-      // Tell webtorrent to cleanup
-      await torrentClient.cleanup();
+    }
+  }
+
+  async waitForCleanup() {
+    if (!this.cleanupPromise) {
+      return;
+    }
+
+    try {
+      await this.cleanupPromise;
     } catch (err) {
-      console.error("Cleanup error:", err);
+      console.warn("waitForCleanup observed a rejected cleanup:", err);
     }
   }
 
@@ -3024,6 +3060,14 @@ class bitvidApp {
    * and falls back to WebTorrent when needed.
    */
   async playVideoWithFallback({ url = "", magnet = "" } = {}) {
+    // When the modal closes we run an asynchronous cleanup that tears down the
+    // previous MediaSource attachment. If the user immediately selects another
+    // video we must wait for that teardown to finish or the stale cleanup will
+    // wipe the freshly attached `src`/`srcObject`, leaving playback stuck on a
+    // blank frame. Guard every playback entry point with waitForCleanup() so the
+    // race never reappears.
+    await this.waitForCleanup();
+
     const sanitizedUrl = typeof url === "string" ? url.trim() : "";
     const trimmedMagnet = typeof magnet === "string" ? magnet.trim() : "";
 

From ab1eaaa5a1531efbfbe9c95fe0306469522fb57f Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 14:42:57 -0400
Subject: [PATCH 079/101] Add fade-in animation for new video cards

---
 css/style.css | 23 +++++++++++++++++++++++
 js/app.js     | 10 +++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 031d7f0a..bae2bb11 100644
--- a/css/style.css
+++ b/css/style.css
@@ -74,6 +74,29 @@ header img {
   box-shadow: var(--shadow-md);
 }
 
+.video-card--enter {
+  opacity: 0;
+  animation: video-card-fade-in 220ms ease-out forwards;
+}
+
+@keyframes video-card-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .video-card--enter {
+    opacity: 1;
+    animation: none;
+  }
+}
+
 .video-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
diff --git a/js/app.js b/js/app.js
index 21bb3628..82290ff5 100644
--- a/js/app.js
+++ b/js/app.js
@@ -500,6 +500,7 @@ class bitvidApp {
     this.profileCache = new Map();
     this.lastRenderedVideoSignature = null;
     this._lastRenderedVideoListElement = null;
+    this.renderedVideoIds = new Set();
 
     // NEW: reference to the login modal's close button
     this.closeLoginModalBtn =
@@ -2158,6 +2159,7 @@ class bitvidApp {
 
     // 1) If no videos
     if (!dedupedVideos.length) {
+      this.renderedVideoIds.clear();
       if (this.lastRenderedVideoSignature === EMPTY_VIDEO_LIST_SIGNATURE) {
         return;
       }
@@ -2190,6 +2192,9 @@ class bitvidApp {
     }
     this.lastRenderedVideoSignature = signature;
 
+    const previouslyRenderedIds = new Set(this.renderedVideoIds);
+    this.renderedVideoIds.clear();
+
     const fullAllEventsArray = Array.from(nostrClient.allEvents.values());
     const fragment = document.createDocumentFragment();
     const authorSet = new Set();
@@ -2216,6 +2221,8 @@ class bitvidApp {
         video.isPrivate && canEdit
           ? "border-2 border-yellow-500"
           : "border-none";
+      const isNewlyRendered = !previouslyRenderedIds.has(video.id);
+      const animationClass = isNewlyRendered ? "video-card--enter" : "";
       const timeAgo = this.formatTimeAgo(video.created_at);
 
       // Check if there's an older version
@@ -2332,7 +2339,7 @@ class bitvidApp {
       );
 
       const cardHtml = `
-        <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
+        <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass} ${animationClass}">
           <!-- The clickable link to play video -->
           <a
             href="${shareUrl}"
@@ -2452,6 +2459,7 @@ class bitvidApp {
         }
       }
       fragment.appendChild(cardEl);
+      this.renderedVideoIds.add(video.id);
     });
 
     // Clear old content, add new

From 90a3bf97fef5eff59d38c9254dc28930586a14b7 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 15:07:25 -0400
Subject: [PATCH 080/101] Add local caching for events and profiles

---
 js/app.js   | 251 ++++++++++++++++++++++++++++++++++++++++++----------
 js/nostr.js | 131 ++++++++++++++++++++++++++-
 2 files changed, 332 insertions(+), 50 deletions(-)

diff --git a/js/app.js b/js/app.js
index 82290ff5..064b8406 100644
--- a/js/app.js
+++ b/js/app.js
@@ -29,6 +29,9 @@ const UNSUPPORTED_BTITH_MESSAGE =
 const FALLBACK_THUMBNAIL_SRC = "assets/jpg/video-thumbnail-fallback.jpg";
 const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
 const EMPTY_VIDEO_LIST_SIGNATURE = "__EMPTY__";
+const PROFILE_CACHE_STORAGE_KEY = "bitvid:profileCache:v1";
+const PROFILE_CACHE_VERSION = 1;
+const PROFILE_CACHE_TTL_MS = 10 * 60 * 1000; // 10 minutes
 // We probe hosted URLs often enough that a naive implementation would spam
 // remote CDNs. A medium-lived cache (roughly 45 minutes) keeps us from
 // hammering dead hosts while still giving the UI timely updates when a CDN
@@ -528,6 +531,148 @@ class bitvidApp {
     }
   }
 
+  loadProfileCacheFromStorage() {
+    if (typeof localStorage === "undefined") {
+      return;
+    }
+
+    const now = Date.now();
+    const raw = localStorage.getItem(PROFILE_CACHE_STORAGE_KEY);
+    if (!raw) {
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== "object") {
+        return;
+      }
+
+      if (parsed.version !== PROFILE_CACHE_VERSION) {
+        return;
+      }
+
+      const entries = parsed.entries;
+      if (!entries || typeof entries !== "object") {
+        return;
+      }
+
+      for (const [pubkey, entry] of Object.entries(entries)) {
+        if (!pubkey || !entry || typeof entry !== "object") {
+          continue;
+        }
+
+        const timestamp = typeof entry.timestamp === "number" ? entry.timestamp : 0;
+        if (!timestamp || now - timestamp > PROFILE_CACHE_TTL_MS) {
+          continue;
+        }
+
+        const profile = entry.profile;
+        if (!profile || typeof profile !== "object") {
+          continue;
+        }
+
+        const normalized = {
+          name: profile.name || profile.display_name || "Unknown",
+          picture: profile.picture || "assets/svg/default-profile.svg",
+        };
+
+        this.profileCache.set(pubkey, {
+          profile: normalized,
+          timestamp,
+        });
+      }
+    } catch (err) {
+      console.warn("Failed to parse stored profile cache:", err);
+    }
+  }
+
+  persistProfileCacheToStorage() {
+    if (typeof localStorage === "undefined") {
+      return;
+    }
+
+    const now = Date.now();
+    const entries = {};
+
+    for (const [pubkey, entry] of this.profileCache.entries()) {
+      if (!entry || typeof entry !== "object") {
+        continue;
+      }
+      const timestamp = typeof entry.timestamp === "number" ? entry.timestamp : 0;
+      if (!timestamp || now - timestamp > PROFILE_CACHE_TTL_MS) {
+        this.profileCache.delete(pubkey);
+        continue;
+      }
+
+      entries[pubkey] = {
+        profile: entry.profile,
+        timestamp,
+      };
+    }
+
+    const payload = {
+      version: PROFILE_CACHE_VERSION,
+      savedAt: now,
+      entries,
+    };
+
+    if (Object.keys(entries).length === 0) {
+      try {
+        localStorage.removeItem(PROFILE_CACHE_STORAGE_KEY);
+      } catch (err) {
+        console.warn("Failed to clear profile cache storage:", err);
+      }
+      return;
+    }
+
+    try {
+      localStorage.setItem(PROFILE_CACHE_STORAGE_KEY, JSON.stringify(payload));
+    } catch (err) {
+      console.warn("Failed to persist profile cache:", err);
+    }
+  }
+
+  getProfileCacheEntry(pubkey) {
+    if (!pubkey) {
+      return null;
+    }
+
+    const entry = this.profileCache.get(pubkey);
+    if (!entry) {
+      return null;
+    }
+
+    const timestamp = typeof entry.timestamp === "number" ? entry.timestamp : 0;
+    if (!timestamp || Date.now() - timestamp > PROFILE_CACHE_TTL_MS) {
+      this.profileCache.delete(pubkey);
+      this.persistProfileCacheToStorage();
+      return null;
+    }
+
+    return entry;
+  }
+
+  setProfileCacheEntry(pubkey, profile) {
+    if (!pubkey || !profile) {
+      return;
+    }
+
+    const normalized = {
+      name: profile.name || profile.display_name || "Unknown",
+      picture: profile.picture || "assets/svg/default-profile.svg",
+    };
+
+    const entry = {
+      profile: normalized,
+      timestamp: Date.now(),
+    };
+
+    this.profileCache.set(pubkey, entry);
+    this.persistProfileCacheToStorage();
+    return entry;
+  }
+
   forceRefreshAllProfiles() {
     // 1) Grab the newest set of videos from nostrClient
     const activeVideos = nostrClient.getActiveVideos();
@@ -550,6 +695,8 @@ class bitvidApp {
         });
       }
 
+      this.loadProfileCacheFromStorage();
+
       // 1. Initialize the video modal (components/video-modal.html)
       await this.initModal();
       this.updateModalElements();
@@ -1149,6 +1296,11 @@ class bitvidApp {
         picture = data.picture || "assets/svg/default-profile.svg";
       }
 
+      this.setProfileCacheEntry(pubkey, {
+        name: displayName,
+        picture,
+      });
+
       // If you have a top-bar avatar (profileAvatar)
       if (this.profileAvatar) {
         this.profileAvatar.src = picture;
@@ -1166,14 +1318,12 @@ class bitvidApp {
   }
 
   async fetchAndRenderProfile(pubkey, forceRefresh = false) {
-    const now = Date.now();
-
-    // 1) Check if we have a cached entry
-    const cacheEntry = this.profileCache.get(pubkey);
-    if (!forceRefresh && cacheEntry && now - cacheEntry.timestamp < 60000) {
-      // If it's less than 60 seconds old, just update DOM with it
+    const cacheEntry = this.getProfileCacheEntry(pubkey);
+    if (cacheEntry) {
       this.updateProfileInDOM(pubkey, cacheEntry.profile);
-      return;
+      if (!forceRefresh) {
+        return;
+      }
     }
 
     // 2) Otherwise, fetch from Nostr
@@ -1189,7 +1339,7 @@ class bitvidApp {
         };
 
         // Cache it
-        this.profileCache.set(pubkey, { profile, timestamp: now });
+        this.setProfileCacheEntry(pubkey, profile);
         // Update DOM
         this.updateProfileInDOM(pubkey, profile);
       }
@@ -1202,10 +1352,25 @@ class bitvidApp {
     const pubkeys = Array.from(authorSet);
     if (!pubkeys.length) return;
 
+    const toFetch = [];
+
+    pubkeys.forEach((pubkey) => {
+      const cacheEntry = this.getProfileCacheEntry(pubkey);
+      if (cacheEntry) {
+        this.updateProfileInDOM(pubkey, cacheEntry.profile);
+      } else {
+        toFetch.push(pubkey);
+      }
+    });
+
+    if (!toFetch.length) {
+      return;
+    }
+
     const filter = {
       kinds: [0],
-      authors: pubkeys,
-      limit: pubkeys.length,
+      authors: toFetch,
+      limit: toFetch.length,
     };
 
     try {
@@ -1236,7 +1401,7 @@ class bitvidApp {
             name: data.name || data.display_name || "Unknown",
             picture: data.picture || "assets/svg/default-profile.svg",
           };
-          this.profileCache.set(pubkey, { profile, timestamp: Date.now() });
+          this.setProfileCacheEntry(pubkey, profile);
           this.updateProfileInDOM(pubkey, profile);
         } catch (err) {
           console.error("Profile parse error:", err);
@@ -1851,6 +2016,27 @@ class bitvidApp {
   async loadVideos(forceFetch = false) {
     console.log("Starting loadVideos... (forceFetch =", forceFetch, ")");
 
+    const shouldIncludeVideo = (video) => {
+      if (!video || typeof video !== "object") {
+        return false;
+      }
+
+      if (this.blacklistedEventIds.has(video.id)) {
+        return false;
+      }
+
+      const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
+      if (initialBlacklist.includes(authorNpub)) {
+        return false;
+      }
+
+      if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
+        return false;
+      }
+
+      return true;
+    };
+
     // If forceFetch is true, unsubscribe from the old subscription to start fresh
     if (forceFetch && this.videoSubscription) {
       // Call unsubscribe on the subscription object directly.
@@ -1873,29 +2059,17 @@ class bitvidApp {
         const updatedAll = nostrClient.getActiveVideos();
 
         // Filter out blacklisted authors & blacklisted event IDs
-        const filteredVideos = updatedAll.filter((video) => {
-          // 1) If the event ID is in our blacklistedEventIds set, skip
-          if (this.blacklistedEventIds.has(video.id)) {
-            return false;
-          }
-
-          // 2) Check if the author's npub is in initialBlacklist
-          const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
-          if (initialBlacklist.includes(authorNpub)) {
-            return false;
-          }
-
-          // 3) If whitelist mode is enabled, only keep authors in initialWhitelist
-          if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
-            return false;
-          }
-
-          return true;
-        });
+        const filteredVideos = updatedAll.filter(shouldIncludeVideo);
 
         this.renderVideoList(filteredVideos);
       });
 
+      const cachedActiveVideos = nostrClient.getActiveVideos();
+      const cachedFiltered = cachedActiveVideos.filter(shouldIncludeVideo);
+      if (cachedFiltered.length) {
+        this.renderVideoList(cachedFiltered);
+      }
+
       if (this.videoSubscription) {
         console.log(
           "[loadVideos] subscription remains open to get live updates."
@@ -1905,22 +2079,7 @@ class bitvidApp {
       // Already subscribed: just show what's cached
       const allCached = nostrClient.getActiveVideos();
 
-      const filteredCached = allCached.filter((video) => {
-        if (this.blacklistedEventIds.has(video.id)) {
-          return false;
-        }
-
-        const authorNpub = this.safeEncodeNpub(video.pubkey) || video.pubkey;
-        if (initialBlacklist.includes(authorNpub)) {
-          return false;
-        }
-
-        if (isWhitelistEnabled && !initialWhitelist.includes(authorNpub)) {
-          return false;
-        }
-
-        return true;
-      });
+      const filteredCached = allCached.filter(shouldIncludeVideo);
 
       this.renderVideoList(filteredCached);
     }
diff --git a/js/nostr.js b/js/nostr.js
index f690723a..6df1dffc 100644
--- a/js/nostr.js
+++ b/js/nostr.js
@@ -17,6 +17,10 @@ const RELAY_URLS = [
   "wss://relay.nostr.band",
 ];
 
+const EVENTS_CACHE_STORAGE_KEY = "bitvid:eventsCache:v1";
+const LEGACY_EVENTS_STORAGE_KEY = "bitvidEvents";
+const EVENTS_CACHE_TTL_MS = 10 * 60 * 1000; // 10 minutes
+
 // To limit error spam
 let errorLogCount = 0;
 const MAX_ERROR_LOGS = 100;
@@ -326,6 +330,107 @@ class NostrClient {
 
     // “activeMap” holds only the newest version for each root
     this.activeMap = new Map();
+
+    this.hasRestoredLocalData = false;
+  }
+
+  restoreLocalData() {
+    if (this.hasRestoredLocalData) {
+      return this.allEvents.size > 0;
+    }
+
+    this.hasRestoredLocalData = true;
+
+    if (typeof localStorage === "undefined") {
+      return false;
+    }
+
+    const now = Date.now();
+    const parsePayload = (raw) => {
+      if (!raw) {
+        return null;
+      }
+      try {
+        const parsed = JSON.parse(raw);
+        if (parsed && typeof parsed === "object") {
+          return parsed;
+        }
+      } catch (err) {
+        if (isDevMode) {
+          console.warn("[nostr] Failed to parse cached events:", err);
+        }
+      }
+      return null;
+    };
+
+    let payload = parsePayload(localStorage.getItem(EVENTS_CACHE_STORAGE_KEY));
+
+    if (!payload) {
+      const legacyRaw = localStorage.getItem(LEGACY_EVENTS_STORAGE_KEY);
+      const legacyParsed = parsePayload(legacyRaw);
+      if (legacyParsed) {
+        payload = {
+          version: 1,
+          savedAt: now,
+          events: legacyParsed,
+        };
+      }
+      if (legacyRaw) {
+        try {
+          localStorage.removeItem(LEGACY_EVENTS_STORAGE_KEY);
+        } catch (err) {
+          if (isDevMode) {
+            console.warn("[nostr] Failed to remove legacy cache:", err);
+          }
+        }
+      }
+    }
+
+    if (!payload || payload.version !== 1) {
+      return false;
+    }
+
+    if (
+      typeof payload.savedAt !== "number" ||
+      payload.savedAt <= 0 ||
+      now - payload.savedAt > EVENTS_CACHE_TTL_MS
+    ) {
+      try {
+        localStorage.removeItem(EVENTS_CACHE_STORAGE_KEY);
+      } catch (err) {
+        if (isDevMode) {
+          console.warn("[nostr] Failed to clear expired cache:", err);
+        }
+      }
+      return false;
+    }
+
+    const events = payload.events;
+    if (!events || typeof events !== "object") {
+      return false;
+    }
+
+    this.allEvents.clear();
+    this.activeMap.clear();
+
+    for (const [id, video] of Object.entries(events)) {
+      if (!id || !video || typeof video !== "object") {
+        continue;
+      }
+
+      this.allEvents.set(id, video);
+      if (video.deleted) {
+        continue;
+      }
+
+      const activeKey = getActiveKey(video);
+      const existing = this.activeMap.get(activeKey);
+      if (!existing || video.created_at > existing.created_at) {
+        this.activeMap.set(activeKey, video);
+      }
+    }
+
+    return this.allEvents.size > 0;
   }
 
   /**
@@ -334,6 +439,8 @@ class NostrClient {
   async init() {
     if (isDevMode) console.log("Connecting to relays...");
 
+    this.restoreLocalData();
+
     try {
       this.pool = new window.NostrTools.SimplePool();
       const results = await this.connectToRelays();
@@ -868,12 +975,28 @@ class NostrClient {
  * Saves all known events to localStorage (or a different storage if you prefer).
  */
   saveLocalData() {
-    // Convert our allEvents map into a plain object for JSON storage
-    const allEventsObject = {};
+    if (typeof localStorage === "undefined") {
+      return;
+    }
+
+    const payload = {
+      version: 1,
+      savedAt: Date.now(),
+      events: {},
+    };
+
     for (const [id, vid] of this.allEvents.entries()) {
-      allEventsObject[id] = vid;
+      payload.events[id] = vid;
+    }
+
+    try {
+      localStorage.setItem(EVENTS_CACHE_STORAGE_KEY, JSON.stringify(payload));
+      localStorage.removeItem(LEGACY_EVENTS_STORAGE_KEY);
+    } catch (err) {
+      if (isDevMode) {
+        console.warn("[nostr] Failed to persist events cache:", err);
+      }
     }
-    localStorage.setItem("bitvidEvents", JSON.stringify(allEventsObject));
   }
 
   /**

From 0de68cbd6b47886d9f5836c5284802dcdc9f6f98 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 15:21:26 -0400
Subject: [PATCH 081/101] Improve thumbnail caching and fade-in

---
 css/style.css | 18 +++++++++++++
 js/app.js     | 73 ++++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 85 insertions(+), 6 deletions(-)

diff --git a/css/style.css b/css/style.css
index bae2bb11..de699c57 100644
--- a/css/style.css
+++ b/css/style.css
@@ -90,11 +90,29 @@ header img {
   }
 }
 
+[data-video-thumbnail][data-thumbnail-loaded="true"] {
+  animation: video-thumbnail-fade-in 220ms ease-out forwards;
+}
+
+@keyframes video-thumbnail-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .video-card--enter {
     opacity: 1;
     animation: none;
   }
+
+  [data-video-thumbnail][data-thumbnail-loaded="true"] {
+    animation: none;
+    opacity: 1;
+  }
 }
 
 .video-card:hover {
diff --git a/js/app.js b/js/app.js
index 064b8406..49cac9d1 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2562,10 +2562,63 @@ class bitvidApp {
       if (cardEl) {
         const thumbnailEl = cardEl.querySelector("[data-video-thumbnail]");
         if (thumbnailEl) {
-          const handleThumbnailLoad = () => {
-            if (!thumbnailEl.dataset.thumbnailFailed && escapedThumbnail) {
-              this.loadedThumbnails.set(video.id, escapedThumbnail);
+          const markThumbnailAsLoaded = () => {
+            if (!escapedThumbnail) {
+              return;
             }
+
+            if (thumbnailEl.dataset.thumbnailLoaded !== "true") {
+              thumbnailEl.dataset.thumbnailLoaded = "true";
+            }
+
+            this.loadedThumbnails.set(video.id, escapedThumbnail);
+          };
+
+          const handleThumbnailLoad = () => {
+            if (thumbnailEl.dataset.thumbnailLoaded === "true") {
+              return;
+            }
+
+            const hasPendingLazySrc =
+              typeof thumbnailEl.dataset.lazy === "string" &&
+              thumbnailEl.dataset.lazy.trim().length > 0;
+
+            if (hasPendingLazySrc) {
+              return;
+            }
+
+            if (thumbnailEl.dataset.thumbnailFailed || !escapedThumbnail) {
+              return;
+            }
+
+            const fallbackAttr =
+              (typeof thumbnailEl.dataset.fallbackSrc === "string"
+                ? thumbnailEl.dataset.fallbackSrc.trim()
+                : "") ||
+              thumbnailEl.getAttribute("data-fallback-src") ||
+              "";
+
+            const currentSrc = thumbnailEl.currentSrc || thumbnailEl.src || "";
+            const isFallbackSrc =
+              !!fallbackAttr &&
+              !!currentSrc &&
+              (currentSrc === fallbackAttr || currentSrc.endsWith(fallbackAttr));
+
+            if (isFallbackSrc) {
+              return;
+            }
+
+            if (
+              (thumbnailEl.naturalWidth === 0 &&
+                thumbnailEl.naturalHeight === 0) ||
+              !currentSrc
+            ) {
+              return;
+            }
+
+            markThumbnailAsLoaded();
+
+            thumbnailEl.removeEventListener("load", handleThumbnailLoad);
           };
           const handleThumbnailError = () => {
             if (
@@ -2574,14 +2627,22 @@ class bitvidApp {
             ) {
               this.loadedThumbnails.delete(video.id);
             }
+
+            if (thumbnailEl.dataset.thumbnailLoaded) {
+              delete thumbnailEl.dataset.thumbnailLoaded;
+            }
+
+            thumbnailEl.removeEventListener("load", handleThumbnailLoad);
           };
 
-          thumbnailEl.addEventListener("load", handleThumbnailLoad, {
-            once: true,
-          });
+          thumbnailEl.addEventListener("load", handleThumbnailLoad);
           thumbnailEl.addEventListener("error", handleThumbnailError, {
             once: true,
           });
+
+          if (thumbnailEl.complete) {
+            handleThumbnailLoad();
+          }
         }
 
         if (showUnsupportedTorrentBadge) {

From 6f0dca0d62dce19574600d617eac9ad50b876930 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 15:31:50 -0400
Subject: [PATCH 082/101] Add fade-in animations to static interface elements

---
 components/sidebar.html |  2 +-
 css/style.css           | 35 ++++++++++++++++++++++++++++++++++-
 index.html              | 10 +++++-----
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/components/sidebar.html b/components/sidebar.html
index 8ecd9cde..6d4aa306 100644
--- a/components/sidebar.html
+++ b/components/sidebar.html
@@ -1,6 +1,6 @@
 <aside
   id="sidebar"
-  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto"
+  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto fade-in fade-in-delay-100"
 >
   <div class="flex flex-col h-full">
     <!-- Top Navigation Links -->
diff --git a/css/style.css b/css/style.css
index de699c57..012872c2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -103,8 +103,41 @@ header img {
   }
 }
 
+/* Generic fade-in utility for interface elements */
+.fade-in {
+  opacity: 0;
+  animation: interface-fade-in 280ms ease-out forwards;
+  animation-delay: var(--fade-in-delay, 0ms);
+}
+
+.fade-in-delay-100 {
+  --fade-in-delay: 100ms;
+}
+
+.fade-in-delay-200 {
+  --fade-in-delay: 200ms;
+}
+
+.fade-in-delay-300 {
+  --fade-in-delay: 300ms;
+}
+
+.fade-in-delay-400 {
+  --fade-in-delay: 400ms;
+}
+
+@keyframes interface-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .video-card--enter {
+  .video-card--enter,
+  .fade-in {
     opacity: 1;
     animation: none;
   }
diff --git a/index.html b/index.html
index 8ee91fbe..861caa07 100644
--- a/index.html
+++ b/index.html
@@ -59,14 +59,14 @@
       md:ml-64 ensures content is shifted on desktop so the pinned sidebar doesn't overlap.
       On mobile, we also toggle .sidebar-open to shift the entire content.
     -->
-    <div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col">
+    <div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col fade-in">
       <!-- Header -->
       <header class="mb-8 flex items-center w-full">
         <!-- Mobile hamburger button (hidden on md+) -->
         <!-- New button -->
         <button
           id="mobileMenuBtn"
-          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60]"
+          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60] fade-in"
         >
           <img
             src="assets/svg/mobile-sidebar-menu-icon.svg"
@@ -78,11 +78,11 @@
         <img
           src="assets/svg/bitvid-logo-light-mode.svg"
           alt="BitVid Logo"
-          class="h-16"
+          class="h-16 fade-in fade-in-delay-100"
         />
 
         <!-- Buttons on the far right -->
-        <div class="ml-auto flex items-center space-x-4">
+        <div class="ml-auto flex items-center space-x-4 fade-in fade-in-delay-200">
           <!-- Login Button -->
           <button
             id="loginButton"
@@ -141,7 +141,7 @@
       <div id="modalContainer"></div>
 
       <!-- Tagline / Slogan -->
-      <div class="text-center mb-8">
+      <div class="text-center mb-8 fade-in fade-in-delay-300">
         <h2 class="text-2xl font-bold text-gray-500 tracking-wide">
           seed. zap. subscribe.
         </h2>

From 35969b0fc655ec7277d452232b58aa181f91daa4 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 16:14:43 -0400
Subject: [PATCH 083/101] Stop re-triggering interface fade-ins

---
 components/sidebar.html |  2 +-
 css/style.css           | 35 ++++++++++++++++++++++++++++++++++-
 index.html              | 10 +++++-----
 js/index.js             | 27 +++++++++++++++++++++++++++
 4 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/components/sidebar.html b/components/sidebar.html
index 8ecd9cde..6d4aa306 100644
--- a/components/sidebar.html
+++ b/components/sidebar.html
@@ -1,6 +1,6 @@
 <aside
   id="sidebar"
-  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto"
+  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto fade-in fade-in-delay-100"
 >
   <div class="flex flex-col h-full">
     <!-- Top Navigation Links -->
diff --git a/css/style.css b/css/style.css
index de699c57..012872c2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -103,8 +103,41 @@ header img {
   }
 }
 
+/* Generic fade-in utility for interface elements */
+.fade-in {
+  opacity: 0;
+  animation: interface-fade-in 280ms ease-out forwards;
+  animation-delay: var(--fade-in-delay, 0ms);
+}
+
+.fade-in-delay-100 {
+  --fade-in-delay: 100ms;
+}
+
+.fade-in-delay-200 {
+  --fade-in-delay: 200ms;
+}
+
+.fade-in-delay-300 {
+  --fade-in-delay: 300ms;
+}
+
+.fade-in-delay-400 {
+  --fade-in-delay: 400ms;
+}
+
+@keyframes interface-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .video-card--enter {
+  .video-card--enter,
+  .fade-in {
     opacity: 1;
     animation: none;
   }
diff --git a/index.html b/index.html
index 8ee91fbe..861caa07 100644
--- a/index.html
+++ b/index.html
@@ -59,14 +59,14 @@
       md:ml-64 ensures content is shifted on desktop so the pinned sidebar doesn't overlap.
       On mobile, we also toggle .sidebar-open to shift the entire content.
     -->
-    <div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col">
+    <div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col fade-in">
       <!-- Header -->
       <header class="mb-8 flex items-center w-full">
         <!-- Mobile hamburger button (hidden on md+) -->
         <!-- New button -->
         <button
           id="mobileMenuBtn"
-          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60]"
+          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60] fade-in"
         >
           <img
             src="assets/svg/mobile-sidebar-menu-icon.svg"
@@ -78,11 +78,11 @@
         <img
           src="assets/svg/bitvid-logo-light-mode.svg"
           alt="BitVid Logo"
-          class="h-16"
+          class="h-16 fade-in fade-in-delay-100"
         />
 
         <!-- Buttons on the far right -->
-        <div class="ml-auto flex items-center space-x-4">
+        <div class="ml-auto flex items-center space-x-4 fade-in fade-in-delay-200">
           <!-- Login Button -->
           <button
             id="loginButton"
@@ -141,7 +141,7 @@
       <div id="modalContainer"></div>
 
       <!-- Tagline / Slogan -->
-      <div class="text-center mb-8">
+      <div class="text-center mb-8 fade-in fade-in-delay-300">
         <h2 class="text-2xl font-bold text-gray-500 tracking-wide">
           seed. zap. subscribe.
         </h2>
diff --git a/js/index.js b/js/index.js
index a26695be..3ba4fbc1 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,6 +2,33 @@
 
 import { trackPageView } from "./analytics.js";
 
+const INTERFACE_FADE_IN_ANIMATION = "interface-fade-in";
+
+const handleInterfaceFadeInComplete = (event) => {
+  const { animationName, target } = event;
+  if (animationName !== INTERFACE_FADE_IN_ANIMATION) {
+    return;
+  }
+
+  if (!(target instanceof HTMLElement)) {
+    return;
+  }
+
+  if (!target.classList.contains("fade-in")) {
+    return;
+  }
+
+  target.classList.remove("fade-in");
+  Array.from(target.classList).forEach((className) => {
+    if (className.startsWith("fade-in-delay-")) {
+      target.classList.remove(className);
+    }
+  });
+};
+
+document.addEventListener("animationend", handleInterfaceFadeInComplete, true);
+document.addEventListener("animationcancel", handleInterfaceFadeInComplete, true);
+
 // 1) Load modals (login, application, etc.)
 async function loadModal(url) {
   try {

From 96c97071136ec81e065def59969a948efb88be6c Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 16:30:12 -0400
Subject: [PATCH 084/101] Document fade-in safeguards

---
 components/sidebar.html |  7 +++++-
 css/style.css           | 46 ++++++++++++++++++++++++++++++++-
 index.html              | 23 +++++++++++++----
 js/app.js               | 13 ++++++++--
 js/index.js             | 56 +++++++++++++++++++++++++++++++++++++++++
 5 files changed, 136 insertions(+), 9 deletions(-)

diff --git a/components/sidebar.html b/components/sidebar.html
index 8ecd9cde..beaab150 100644
--- a/components/sidebar.html
+++ b/components/sidebar.html
@@ -1,6 +1,11 @@
+<!--
+  Sidebar fades in once when hydrated on the client. js/index.js removes the
+  helper classes after the initial animation to avoid flashes each time we
+  re-render navigation links.
+-->
 <aside
   id="sidebar"
-  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto"
+  class="bg-gray-900 text-white transition-transform duration-300 ease-in-out fixed top-0 left-0 w-64 h-screen overflow-y-auto fade-in fade-in-delay-100"
 >
   <div class="flex flex-col h-full">
     <!-- Top Navigation Links -->
diff --git a/css/style.css b/css/style.css
index de699c57..380ec497 100644
--- a/css/style.css
+++ b/css/style.css
@@ -90,6 +90,12 @@ header img {
   }
 }
 
+/*
+  Thumbnails start transparent and fade in the first time they finish loading.
+  `data-thumbnail-loaded` is cleared by js/index.js once the animation completes
+  so re-rendering the same element later does not replay the transition and cause
+  a distracting flash.
+*/
 [data-video-thumbnail][data-thumbnail-loaded="true"] {
   animation: video-thumbnail-fade-in 220ms ease-out forwards;
 }
@@ -103,8 +109,46 @@ header img {
   }
 }
 
+/*
+  Generic fade-in utility for chrome elements (sidebar, header controls, etc.).
+  js/index.js listens for the `interface-fade-in` animation finishing and removes
+  the temporary classes so that once an element has gracefully appeared it stays
+  opaque even if the DOM is re-used or re-parented later.
+*/
+.fade-in {
+  opacity: 0;
+  animation: interface-fade-in 280ms ease-out forwards;
+  animation-delay: var(--fade-in-delay, 0ms);
+}
+
+.fade-in-delay-100 {
+  --fade-in-delay: 100ms;
+}
+
+.fade-in-delay-200 {
+  --fade-in-delay: 200ms;
+}
+
+.fade-in-delay-300 {
+  --fade-in-delay: 300ms;
+}
+
+.fade-in-delay-400 {
+  --fade-in-delay: 400ms;
+}
+
+@keyframes interface-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .video-card--enter {
+  .video-card--enter,
+  .fade-in {
     opacity: 1;
     animation: none;
   }
diff --git a/index.html b/index.html
index 8ee91fbe..b9c9f100 100644
--- a/index.html
+++ b/index.html
@@ -59,14 +59,24 @@
       md:ml-64 ensures content is shifted on desktop so the pinned sidebar doesn't overlap.
       On mobile, we also toggle .sidebar-open to shift the entire content.
     -->
-    <div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col">
+    <!--
+      `fade-in` is scrubbed by js/index.js after the first animation so that
+      re-rendering views does not cause the shell to flicker. Only apply it to
+      elements that should animate exactly once on initial paint.
+    -->
+    <div id="app" class="md:ml-64 px-4 py-8 min-h-screen flex flex-col fade-in">
       <!-- Header -->
       <header class="mb-8 flex items-center w-full">
         <!-- Mobile hamburger button (hidden on md+) -->
         <!-- New button -->
+        <!--
+          Mobile menu button: uses `fade-in` to match the rest of the chrome.
+          The JS animation cleanup removes the helper classes once the entrance
+          finishes to prevent flashes on future sidebar toggles.
+        -->
         <button
           id="mobileMenuBtn"
-          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60]"
+          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60] fade-in"
         >
           <img
             src="assets/svg/mobile-sidebar-menu-icon.svg"
@@ -75,14 +85,16 @@
           />
         </button>
         <!-- Logo -->
+        <!-- Logo fades in once on initial load. -->
         <img
           src="assets/svg/bitvid-logo-light-mode.svg"
           alt="BitVid Logo"
-          class="h-16"
+          class="h-16 fade-in fade-in-delay-100"
         />
 
         <!-- Buttons on the far right -->
-        <div class="ml-auto flex items-center space-x-4">
+        <!-- Header action buttons share the fade-in treatment for consistency. -->
+        <div class="ml-auto flex items-center space-x-4 fade-in fade-in-delay-200">
           <!-- Login Button -->
           <button
             id="loginButton"
@@ -141,7 +153,8 @@
       <div id="modalContainer"></div>
 
       <!-- Tagline / Slogan -->
-      <div class="text-center mb-8">
+      <!-- Tagline fade matches the cards. -->
+      <div class="text-center mb-8 fade-in fade-in-delay-300">
         <h2 class="text-2xl font-bold text-gray-500 tracking-wide">
           seed. zap. subscribe.
         </h2>
diff --git a/js/app.js b/js/app.js
index 49cac9d1..839d0e59 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2476,6 +2476,8 @@ class bitvidApp {
         this.loadedThumbnails.get(video.id) || "";
       const shouldLazyLoadThumbnail =
         escapedThumbnail && previouslyLoadedThumbnail !== escapedThumbnail;
+      const shouldAnimateThumbnail =
+        !!escapedThumbnail && previouslyLoadedThumbnail !== escapedThumbnail;
       const thumbnailAttrLines = ["data-video-thumbnail=\"true\""];
       if (shouldLazyLoadThumbnail) {
         thumbnailAttrLines.push(
@@ -2567,8 +2569,15 @@ class bitvidApp {
               return;
             }
 
-            if (thumbnailEl.dataset.thumbnailLoaded !== "true") {
-              thumbnailEl.dataset.thumbnailLoaded = "true";
+            if (shouldAnimateThumbnail) {
+              // Flag the element so CSS runs a one-time fade. js/index.js scrubs
+              // this attribute in the `animationend` handler so reusing the same
+              // DOM node later will not re-trigger the animation and flash.
+              if (thumbnailEl.dataset.thumbnailLoaded !== "true") {
+                thumbnailEl.dataset.thumbnailLoaded = "true";
+              }
+            } else if (thumbnailEl.dataset.thumbnailLoaded) {
+              delete thumbnailEl.dataset.thumbnailLoaded;
             }
 
             this.loadedThumbnails.set(video.id, escapedThumbnail);
diff --git a/js/index.js b/js/index.js
index a26695be..d3c062d0 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,6 +2,62 @@
 
 import { trackPageView } from "./analytics.js";
 
+const INTERFACE_FADE_IN_ANIMATION = "interface-fade-in";
+const VIDEO_THUMBNAIL_FADE_IN_ANIMATION = "video-thumbnail-fade-in";
+
+//
+// Centralized animation cleanup
+// ------------------------------
+// We attach a single capture-phase listener for animation events so that any
+// chrome element or thumbnail using our fade-in helpers can automatically shed
+// the temporary classes/data attributes that trigger the transition. This is
+// critical because these DOM nodes frequently persist while the surrounding
+// lists re-render; if the classes stick around, future layout shuffles would
+// replay the fade and make the UI flicker. Clearing the hooks immediately after
+// the first animation keeps the graceful entrance without introducing future
+// flashes.
+const handleFadeInAnimationComplete = (event) => {
+  const { animationName, target } = event;
+
+  if (!(target instanceof HTMLElement)) {
+    return;
+  }
+
+  if (animationName === INTERFACE_FADE_IN_ANIMATION) {
+    if (!target.classList.contains("fade-in")) {
+      return;
+    }
+
+    // Remove the transient fade-in class so future renders keep the element
+    // visible. The delays piggyback on `fade-in`, so we strip those too.
+    target.classList.remove("fade-in");
+    Array.from(target.classList).forEach((className) => {
+      if (className.startsWith("fade-in-delay-")) {
+        target.classList.remove(className);
+      }
+    });
+    return;
+  }
+
+  if (animationName !== VIDEO_THUMBNAIL_FADE_IN_ANIMATION) {
+    return;
+  }
+
+  if (
+    target.dataset &&
+    target.dataset.videoThumbnail === "true" &&
+    target.dataset.thumbnailLoaded === "true"
+  ) {
+    // Thumbnails use the same pattern: once the fade finishes we clear the flag
+    // so a later `load` event (or template reuse) does not restart the
+    // animation.
+    delete target.dataset.thumbnailLoaded;
+  }
+};
+
+document.addEventListener("animationend", handleFadeInAnimationComplete, true);
+document.addEventListener("animationcancel", handleFadeInAnimationComplete, true);
+
 // 1) Load modals (login, application, etc.)
 async function loadModal(url) {
   try {

From 93493815fbcd7096225b8bbd28864af2692a4ff7 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 17:06:12 -0400
Subject: [PATCH 085/101] Fix ownership checks for video actions

---
 js/app.js            | 191 ++++++++++++++++++++++++++++++++++++++-----
 js/channelProfile.js |  36 ++++++--
 js/subscriptions.js  |  36 ++++++--
 3 files changed, 224 insertions(+), 39 deletions(-)

diff --git a/js/app.js b/js/app.js
index 839d0e59..e861eef4 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2395,6 +2395,7 @@ class bitvidApp {
           <button
             class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
             data-revert-index="${index}"
+            data-revert-event-id="${video.id}"
           >
             Revert
           </button>
@@ -2423,6 +2424,7 @@ class bitvidApp {
                 <button
                   class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
                   data-edit-index="${index}"
+                  data-edit-event-id="${video.id}"
                 >
                   Edit
                 </button>
@@ -2430,6 +2432,7 @@ class bitvidApp {
                 <button
                   class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
                   data-delete-all-index="${index}"
+                  data-delete-all-event-id="${video.id}"
                 >
                   Delete All
                 </button>
@@ -2687,6 +2690,10 @@ class bitvidApp {
           }
         }
       }
+      if (video && video.id) {
+        this.videosMap.set(video.id, video);
+      }
+
       fragment.appendChild(cardEl);
       this.renderedVideoIds.add(video.id);
     });
@@ -2723,10 +2730,15 @@ class bitvidApp {
     const editButtons = this.videoList.querySelectorAll("[data-edit-index]");
     editButtons.forEach((button) => {
       button.addEventListener("click", () => {
-        const index = button.getAttribute("data-edit-index");
-        const dropdown = document.getElementById(`settingsDropdown-${index}`);
+        const indexAttr = button.getAttribute("data-edit-index");
+        const eventId = button.getAttribute("data-edit-event-id") || "";
+        const index = Number.parseInt(indexAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${indexAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        this.handleEditVideo(index);
+        this.handleEditVideo({
+          eventId,
+          index: Number.isNaN(index) ? null : index,
+        });
       });
     });
 
@@ -2736,10 +2748,15 @@ class bitvidApp {
     );
     revertButtons.forEach((button) => {
       button.addEventListener("click", () => {
-        const index = button.getAttribute("data-revert-index");
-        const dropdown = document.getElementById(`settingsDropdown-${index}`);
+        const indexAttr = button.getAttribute("data-revert-index");
+        const eventId = button.getAttribute("data-revert-event-id") || "";
+        const index = Number.parseInt(indexAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${indexAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        this.handleRevertVideo(index);
+        this.handleRevertVideo({
+          eventId,
+          index: Number.isNaN(index) ? null : index,
+        });
       });
     });
 
@@ -2749,10 +2766,15 @@ class bitvidApp {
     );
     deleteAllButtons.forEach((button) => {
       button.addEventListener("click", () => {
-        const index = button.getAttribute("data-delete-all-index");
-        const dropdown = document.getElementById(`settingsDropdown-${index}`);
+        const indexAttr = button.getAttribute("data-delete-all-index");
+        const eventId = button.getAttribute("data-delete-all-event-id") || "";
+        const index = Number.parseInt(indexAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${indexAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        this.handleFullDeleteVideo(index);
+        this.handleFullDeleteVideo({
+          eventId,
+          index: Number.isNaN(index) ? null : index,
+        });
       });
     });
 
@@ -2934,21 +2956,137 @@ class bitvidApp {
     }
   }
 
+  normalizeActionTarget(target) {
+    if (target && typeof target === "object") {
+      const eventId =
+        typeof target.eventId === "string" ? target.eventId.trim() : "";
+      let index = null;
+      if (typeof target.index === "number" && Number.isInteger(target.index)) {
+        index = target.index;
+      } else if (
+        typeof target.index === "string" && target.index.trim().length > 0
+      ) {
+        const parsed = Number.parseInt(target.index.trim(), 10);
+        index = Number.isNaN(parsed) ? null : parsed;
+      }
+      return { eventId, index };
+    }
+
+    if (typeof target === "string") {
+      const trimmed = target.trim();
+      if (!trimmed) {
+        return { eventId: "", index: null };
+      }
+      if (/^-?\d+$/.test(trimmed)) {
+        const parsed = Number.parseInt(trimmed, 10);
+        return { eventId: "", index: Number.isNaN(parsed) ? null : parsed };
+      }
+      return { eventId: trimmed, index: null };
+    }
+
+    if (typeof target === "number" && Number.isInteger(target)) {
+      return { eventId: "", index: target };
+    }
+
+    return { eventId: "", index: null };
+  }
+
+  async resolveVideoActionTarget({
+    eventId = "",
+    index = null,
+    preloadedList,
+  } = {}) {
+    const trimmedEventId = typeof eventId === "string" ? eventId.trim() : "";
+    const normalizedIndex =
+      typeof index === "number" && Number.isInteger(index) && index >= 0
+        ? index
+        : null;
+
+    const candidateLists = Array.isArray(preloadedList)
+      ? [preloadedList]
+      : [];
+
+    for (const list of candidateLists) {
+      if (trimmedEventId) {
+        const match = list.find((video) => video?.id === trimmedEventId);
+        if (match) {
+          this.videosMap.set(match.id, match);
+          return match;
+        }
+      }
+      if (
+        normalizedIndex !== null &&
+        normalizedIndex >= 0 &&
+        normalizedIndex < list.length
+      ) {
+        const match = list[normalizedIndex];
+        if (match) {
+          this.videosMap.set(match.id, match);
+          return match;
+        }
+      }
+    }
+
+    if (trimmedEventId) {
+      const fromMap = this.videosMap.get(trimmedEventId);
+      if (fromMap) {
+        return fromMap;
+      }
+
+      const activeVideos = nostrClient.getActiveVideos();
+      const fromActive = activeVideos.find((video) => video.id === trimmedEventId);
+      if (fromActive) {
+        this.videosMap.set(fromActive.id, fromActive);
+        return fromActive;
+      }
+
+      const fromAll = nostrClient.allEvents.get(trimmedEventId);
+      if (fromAll) {
+        this.videosMap.set(fromAll.id, fromAll);
+        return fromAll;
+      }
+
+      const fetched = await nostrClient.getEventById(trimmedEventId);
+      if (fetched) {
+        this.videosMap.set(fetched.id, fetched);
+        return fetched;
+      }
+    }
+
+    if (normalizedIndex !== null) {
+      const activeVideos = nostrClient.getActiveVideos();
+      if (normalizedIndex >= 0 && normalizedIndex < activeVideos.length) {
+        const candidate = activeVideos[normalizedIndex];
+        if (candidate) {
+          this.videosMap.set(candidate.id, candidate);
+          return candidate;
+        }
+      }
+    }
+
+    return null;
+  }
+
   /**
    * Handle "Edit Video" from gear menu.
    */
-  async handleEditVideo(index) {
+  async handleEditVideo(target) {
     try {
-      // 1) Fetch the current list of videos (the newest versions)
-      const all = await nostrClient.fetchVideos();
-      const video = all[index];
+      const normalizedTarget = this.normalizeActionTarget(target);
+      const latestVideos = await nostrClient.fetchVideos();
+      const video = await this.resolveVideoActionTarget({
+        ...normalizedTarget,
+        preloadedList: latestVideos,
+      });
 
       // 2) Basic ownership checks
       if (!this.pubkey) {
         this.showError("Please login to edit videos.");
         return;
       }
-      if (!video || video.pubkey !== this.pubkey) {
+      const userPubkey = (this.pubkey || "").toLowerCase();
+      const videoPubkey = (video?.pubkey || "").toLowerCase();
+      if (!video || !videoPubkey || videoPubkey !== userPubkey) {
         this.showError("You do not own this video.");
         return;
       }
@@ -3022,17 +3160,22 @@ class bitvidApp {
     }
   }
 
-  async handleRevertVideo(index) {
+  async handleRevertVideo(target) {
     try {
-      // 1) Still use fetchVideos to get the video in question
+      const normalizedTarget = this.normalizeActionTarget(target);
       const activeVideos = await nostrClient.fetchVideos();
-      const video = activeVideos[index];
+      const video = await this.resolveVideoActionTarget({
+        ...normalizedTarget,
+        preloadedList: activeVideos,
+      });
 
       if (!this.pubkey) {
         this.showError("Please login to revert.");
         return;
       }
-      if (!video || video.pubkey !== this.pubkey) {
+      const userPubkey = (this.pubkey || "").toLowerCase();
+      const videoPubkey = (video?.pubkey || "").toLowerCase();
+      if (!video || !videoPubkey || videoPubkey !== userPubkey) {
         this.showError("You do not own this video.");
         return;
       }
@@ -3070,16 +3213,22 @@ class bitvidApp {
   /**
    * Handle "Delete Video" from gear menu.
    */
-  async handleFullDeleteVideo(index) {
+  async handleFullDeleteVideo(target) {
     try {
+      const normalizedTarget = this.normalizeActionTarget(target);
       const all = await nostrClient.fetchVideos();
-      const video = all[index];
+      const video = await this.resolveVideoActionTarget({
+        ...normalizedTarget,
+        preloadedList: all,
+      });
 
       if (!this.pubkey) {
         this.showError("Please login to delete videos.");
         return;
       }
-      if (!video || video.pubkey !== this.pubkey) {
+      const userPubkey = (this.pubkey || "").toLowerCase();
+      const videoPubkey = (video?.pubkey || "").toLowerCase();
+      if (!video || !videoPubkey || videoPubkey !== userPubkey) {
         this.showError("You do not own this video.");
         return;
       }
diff --git a/js/channelProfile.js b/js/channelProfile.js
index cac4fee2..aa552426 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -271,6 +271,7 @@ async function loadUserVideos(pubkey) {
             class="block w-full text-left px-4 py-2 text-sm text-red-400
             hover:bg-red-700 hover:text-white"
             data-revert-index="${index}"
+            data-revert-event-id="${video.id}"
           >
             Revert
           </button>
@@ -305,6 +306,7 @@ async function loadUserVideos(pubkey) {
                   class="block w-full text-left px-4 py-2 text-sm text-gray-100
                   hover:bg-gray-700"
                   data-edit-index="${index}"
+                  data-edit-event-id="${video.id}"
                 >
                   Edit
                 </button>
@@ -313,6 +315,7 @@ async function loadUserVideos(pubkey) {
                   class="block w-full text-left px-4 py-2 text-sm text-red-400
                   hover:bg-red-700 hover:text-white"
                   data-delete-all-index="${index}"
+                  data-delete-all-event-id="${video.id}"
                 >
                   Delete All
                 </button>
@@ -446,10 +449,15 @@ async function loadUserVideos(pubkey) {
     editBtns.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = parseInt(btn.getAttribute("data-edit-index"), 10);
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-edit-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        app.handleEditVideo(idx);
+        const eventId = btn.getAttribute("data-edit-event-id") || "";
+        app.handleEditVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
 
@@ -458,10 +466,15 @@ async function loadUserVideos(pubkey) {
     revertBtns.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = parseInt(btn.getAttribute("data-revert-index"), 10);
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-revert-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        app.handleRevertVideo(idx);
+        const eventId = btn.getAttribute("data-revert-event-id") || "";
+        app.handleRevertVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
 
@@ -470,10 +483,15 @@ async function loadUserVideos(pubkey) {
     deleteAllBtns.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = parseInt(btn.getAttribute("data-delete-all-index"), 10);
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-delete-all-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        app.handleFullDeleteVideo(idx);
+        const eventId = btn.getAttribute("data-delete-all-event-id") || "";
+        app.handleFullDeleteVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
   } catch (err) {
diff --git a/js/subscriptions.js b/js/subscriptions.js
index f5e5db50..2ef66b04 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -328,6 +328,7 @@ class SubscriptionsManager {
           <button
             class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
             data-revert-index="${index}"
+            data-revert-event-id="${video.id}"
           >
             Revert
           </button>
@@ -356,6 +357,7 @@ class SubscriptionsManager {
                 <button
                   class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
                   data-edit-index="${index}"
+                  data-edit-event-id="${video.id}"
                 >
                   Edit
                 </button>
@@ -363,6 +365,7 @@ class SubscriptionsManager {
                 <button
                   class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
                   data-delete-all-index="${index}"
+                  data-delete-all-event-id="${video.id}"
                 >
                   Delete All
                 </button>
@@ -500,10 +503,15 @@ class SubscriptionsManager {
     editButtons.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = btn.getAttribute("data-edit-index");
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-edit-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        window.app?.handleEditVideo(idx);
+        const eventId = btn.getAttribute("data-edit-event-id") || "";
+        window.app?.handleEditVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
 
@@ -512,10 +520,15 @@ class SubscriptionsManager {
     revertButtons.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = btn.getAttribute("data-revert-index");
-        const dropdown = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-revert-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dropdown = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dropdown) dropdown.classList.add("hidden");
-        window.app?.handleRevertVideo(idx);
+        const eventId = btn.getAttribute("data-revert-event-id") || "";
+        window.app?.handleRevertVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
 
@@ -526,10 +539,15 @@ class SubscriptionsManager {
     deleteAllButtons.forEach((btn) => {
       btn.addEventListener("click", (ev) => {
         ev.stopPropagation();
-        const idx = btn.getAttribute("data-delete-all-index");
-        const dd = document.getElementById(`settingsDropdown-${idx}`);
+        const idxAttr = btn.getAttribute("data-delete-all-index");
+        const idx = Number.parseInt(idxAttr, 10);
+        const dd = document.getElementById(`settingsDropdown-${idxAttr}`);
         if (dd) dd.classList.add("hidden");
-        window.app?.handleFullDeleteVideo(idx);
+        const eventId = btn.getAttribute("data-delete-all-event-id") || "";
+        window.app?.handleFullDeleteVideo({
+          eventId,
+          index: Number.isNaN(idx) ? null : idx,
+        });
       });
     });
 

From 65d79509327fe105bc139ddc7d251cdd651716d7 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 17:14:23 -0400
Subject: [PATCH 086/101] Abort edit flow when prompts are cancelled

---
 js/app.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/js/app.js b/js/app.js
index e861eef4..1fab3281 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3093,22 +3093,41 @@ class bitvidApp {
 
       // 3) Prompt the user for updated fields
       const newTitle = prompt("New Title? (blank=keep existing)", video.title);
+      if (newTitle === null) {
+        return;
+      }
+
       const newMagnet = prompt(
         "New Magnet? (blank=keep existing)",
         video.magnet
       );
+      if (newMagnet === null) {
+        return;
+      }
+
       const newUrl = prompt(
         "New URL? (blank=keep existing)",
         video.url || ""
       );
+      if (newUrl === null) {
+        return;
+      }
+
       const newThumb = prompt(
         "New Thumbnail? (blank=keep existing)",
         video.thumbnail
       );
+      if (newThumb === null) {
+        return;
+      }
+
       const newDesc = prompt(
         "New Description? (blank=keep existing)",
         video.description
       );
+      if (newDesc === null) {
+        return;
+      }
       // const wantPrivate = confirm("Make this video private? OK=Yes, Cancel=No");
 
       // 4) Build final updated fields (or fallback to existing)

From b3b0ca7979d7f97cab5b4e7873c54c341efc37f2 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 17:35:11 -0400
Subject: [PATCH 087/101] Improve hosted URL status messaging

---
 js/app.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/js/app.js b/js/app.js
index 1fab3281..9e15559d 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3508,6 +3508,7 @@ class bitvidApp {
 
       this.showModalWithPoster();
       const videoEl = this.modalVideo;
+      const HOSTED_URL_SUCCESS_MESSAGE = "✅ Streaming from hosted URL";
 
       if (this.modalStatus) {
         this.modalStatus.textContent = "Preparing video...";
@@ -3542,6 +3543,7 @@ class bitvidApp {
       const httpsUrl =
         sanitizedUrl && /^https:\/\//i.test(sanitizedUrl) ? sanitizedUrl : "";
       const webSeedCandidates = httpsUrl ? [httpsUrl] : [];
+      let cleanupHostedUrlStatusListeners = () => {};
 
       let fallbackStarted = false;
       const startTorrentFallback = async (reason) => {
@@ -3553,6 +3555,7 @@ class bitvidApp {
         }
         fallbackStarted = true;
         this.cleanupUrlPlaybackWatchdog();
+        cleanupHostedUrlStatusListeners();
         if (!magnetForPlayback) {
           const message =
             "Hosted playback failed and no magnet fallback is available.";
@@ -3586,6 +3589,55 @@ class bitvidApp {
         if (this.modalStatus) {
           this.modalStatus.textContent = "Checking hosted URL...";
         }
+        let hostedStatusResolved = false;
+        const hostedStatusHandlers = [];
+        const addHostedStatusListener = (eventName, handler, options) => {
+          if (!videoEl) {
+            return;
+          }
+          videoEl.addEventListener(eventName, handler, options);
+          hostedStatusHandlers.push([eventName, handler, options]);
+        };
+        const markHostedUrlAsLive = () => {
+          if (hostedStatusResolved) {
+            return;
+          }
+          hostedStatusResolved = true;
+          if (this.modalStatus) {
+            this.modalStatus.textContent = HOSTED_URL_SUCCESS_MESSAGE;
+          }
+          cleanupHostedUrlStatusListeners();
+        };
+        const maybeMarkHostedUrl = () => {
+          if (
+            hostedStatusResolved ||
+            !videoEl ||
+            videoEl.readyState < HTMLMediaElement.HAVE_CURRENT_DATA
+          ) {
+            return;
+          }
+          if (videoEl.currentTime > 0 || !videoEl.paused) {
+            markHostedUrlAsLive();
+          }
+        };
+        cleanupHostedUrlStatusListeners = () => {
+          if (!hostedStatusHandlers.length || !videoEl) {
+            hostedStatusHandlers.length = 0;
+            cleanupHostedUrlStatusListeners = () => {};
+            return;
+          }
+          for (const [eventName, handler, options] of hostedStatusHandlers) {
+            videoEl.removeEventListener(eventName, handler, options);
+          }
+          hostedStatusHandlers.length = 0;
+          cleanupHostedUrlStatusListeners = () => {};
+        };
+        addHostedStatusListener("playing", markHostedUrlAsLive, { once: true });
+        addHostedStatusListener("loadeddata", maybeMarkHostedUrl);
+        addHostedStatusListener("canplay", maybeMarkHostedUrl);
+        addHostedStatusListener("error", () => {
+          cleanupHostedUrlStatusListeners();
+        }, { once: true });
         const probeResult = await this.probeUrl(httpsUrl);
         const probeOutcome = probeResult?.outcome || "error";
         const shouldAttemptHosted =
@@ -3678,8 +3730,9 @@ class bitvidApp {
             this.forceRemoveModalPoster("http-success");
             this.playSource = "url";
             if (this.modalStatus) {
-              this.modalStatus.textContent = "Streaming from URL";
+              this.modalStatus.textContent = HOSTED_URL_SUCCESS_MESSAGE;
             }
+            cleanupHostedUrlStatusListeners();
             return;
           }
 
@@ -3691,6 +3744,7 @@ class bitvidApp {
         this.log(
           `[playVideoWithFallback] Hosted URL probe reported "${probeOutcome}"; deferring to WebTorrent.`
         );
+        cleanupHostedUrlStatusListeners();
       }
 
       if (magnetForPlayback) {

From 7e63771651d9c1be669e7ad910c190f3c87f6716 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 17:52:54 -0400
Subject: [PATCH 088/101] Improve hosted URL health badge detection

---
 js/app.js | 168 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 146 insertions(+), 22 deletions(-)

diff --git a/js/app.js b/js/app.js
index 9e15559d..3060a9f4 100644
--- a/js/app.js
+++ b/js/app.js
@@ -38,6 +38,7 @@ const PROFILE_CACHE_TTL_MS = 10 * 60 * 1000; // 10 minutes
 // recovers. Results are stored both in-memory and in localStorage so other
 // views can reuse them without re-probing.
 const URL_HEALTH_TTL_MS = 45 * 60 * 1000; // 45 minutes
+const URL_PROBE_TIMEOUT_MS = 8 * 1000; // 8 seconds
 const URL_HEALTH_STORAGE_PREFIX = "bitvid:urlHealth:";
 const urlHealthCache = new Map();
 const urlHealthInFlight = new Map();
@@ -2164,11 +2165,13 @@ class bitvidApp {
     const message =
       state?.message ||
       (status === "healthy"
-        ? "CDN Healthy"
+        ? "✅ CDN Healthy"
         : status === "offline"
-        ? "URL offline — using P2P fallback"
+        ? "⚠️ URL offline — using P2P fallback"
         : status === "unknown"
-        ? "Hosted URL reachable (CORS restricted)"
+        ? "⚠️ Hosted URL reachable (CORS restricted)"
+        : status === "timeout"
+        ? "⚠️ Hosted URL check timed out"
         : "Checking hosted URL…");
 
     badgeEl.dataset.urlHealthState = status;
@@ -2189,7 +2192,7 @@ class bitvidApp {
       );
     } else if (status === "offline") {
       badgeEl.classList.add("block", "bg-red-900", "text-red-200");
-    } else if (status === "unknown") {
+    } else if (status === "unknown" || status === "timeout") {
       badgeEl.classList.add(
         "inline-flex",
         "items-center",
@@ -2252,16 +2255,21 @@ class bitvidApp {
         let entry;
 
         if (outcome === "ok") {
-          entry = { status: "healthy", message: "CDN Healthy" };
+          entry = { status: "healthy", message: "✅ CDN Healthy" };
         } else if (outcome === "opaque") {
           entry = {
             status: "unknown",
-            message: "Hosted URL reachable (CORS restricted)",
+            message: "⚠️ Hosted URL reachable (CORS restricted)",
+          };
+        } else if (outcome === "timeout") {
+          entry = {
+            status: "timeout",
+            message: "⚠️ Hosted URL check timed out",
           };
         } else {
           entry = {
             status: "offline",
-            message: "URL offline — using P2P fallback",
+            message: "⚠️ URL offline — using P2P fallback",
           };
         }
 
@@ -2271,7 +2279,7 @@ class bitvidApp {
         console.warn(`[urlHealth] probe failed for ${trimmedUrl}:`, err);
         const entry = {
           status: "offline",
-          message: "URL offline — using P2P fallback",
+          message: "⚠️ URL offline — using P2P fallback",
         };
         return this.storeUrlHealth(eventId, trimmedUrl, entry);
       });
@@ -3313,35 +3321,151 @@ class bitvidApp {
     }
   }
 
+  async probeUrlWithVideoElement(url, timeoutMs = URL_PROBE_TIMEOUT_MS) {
+    const trimmed = typeof url === "string" ? url.trim() : "";
+    if (!trimmed || typeof document === "undefined") {
+      return { outcome: "error" };
+    }
+
+    return new Promise((resolve) => {
+      const video = document.createElement("video");
+      let settled = false;
+      let timeoutId = null;
+
+      const cleanup = () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        video.removeEventListener("loadeddata", handleSuccess);
+        video.removeEventListener("canplay", handleSuccess);
+        video.removeEventListener("error", handleError);
+        try {
+          video.pause();
+        } catch (err) {
+          // ignore pause failures (e.g. if never played)
+        }
+        try {
+          video.removeAttribute("src");
+          video.load();
+        } catch (err) {
+          // ignore cleanup failures
+        }
+      };
+
+      const settle = (result) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        cleanup();
+        resolve(result);
+      };
+
+      const handleSuccess = () => {
+        settle({ outcome: "ok" });
+      };
+
+      const handleError = () => {
+        settle({ outcome: "error" });
+      };
+
+      if (Number.isFinite(timeoutMs) && timeoutMs > 0) {
+        timeoutId = setTimeout(() => {
+          settle({ outcome: "timeout" });
+        }, timeoutMs);
+      }
+
+      try {
+        video.preload = "metadata";
+        video.muted = true;
+        video.playsInline = true;
+        video.addEventListener("loadeddata", handleSuccess, { once: true });
+        video.addEventListener("canplay", handleSuccess, { once: true });
+        video.addEventListener("error", handleError, { once: true });
+        video.src = trimmed;
+        video.load();
+      } catch (err) {
+        settle({ outcome: "error", error: err });
+      }
+    });
+  }
+
   async probeUrl(url) {
     const trimmed = typeof url === "string" ? url.trim() : "";
     if (!trimmed) {
       return { outcome: "invalid" };
     }
 
-    try {
-      const response = await fetch(trimmed, {
+    const supportsAbort = typeof AbortController !== "undefined";
+    const controller = supportsAbort ? new AbortController() : null;
+    let timeoutId = null;
+
+    const racers = [
+      fetch(trimmed, {
         method: "HEAD",
         mode: "no-cors",
         cache: "no-store",
-      });
+        signal: controller ? controller.signal : undefined,
+      }),
+    ];
 
-      if (!response) {
-        return { outcome: "error" };
-      }
+    if (Number.isFinite(URL_PROBE_TIMEOUT_MS) && URL_PROBE_TIMEOUT_MS > 0) {
+      racers.push(
+        new Promise((resolve) => {
+          timeoutId = setTimeout(() => {
+            if (controller) {
+              try {
+                controller.abort();
+              } catch (err) {
+                // ignore abort errors
+              }
+            }
+            resolve({ outcome: "timeout" });
+          }, URL_PROBE_TIMEOUT_MS);
+        })
+      );
+    }
 
-      if (response.type === "opaque") {
-        return { outcome: "opaque" };
-      }
-
-      return {
-        outcome: response.ok ? "ok" : "bad",
-        status: response.status,
-      };
+    let responseOrTimeout;
+    try {
+      responseOrTimeout = await Promise.race(racers);
     } catch (err) {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
       console.warn(`[probeUrl] HEAD request failed for ${trimmed}:`, err);
+      const fallback = await this.probeUrlWithVideoElement(trimmed);
+      if (fallback && fallback.outcome) {
+        return fallback;
+      }
       return { outcome: "error", error: err };
     }
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    if (responseOrTimeout && responseOrTimeout.outcome === "timeout") {
+      const fallback = await this.probeUrlWithVideoElement(trimmed);
+      if (fallback && fallback.outcome) {
+        return fallback;
+      }
+      return { outcome: "timeout" };
+    }
+
+    const response = responseOrTimeout;
+    if (!response) {
+      return { outcome: "error" };
+    }
+
+    if (response.type === "opaque") {
+      return { outcome: "opaque" };
+    }
+
+    return {
+      outcome: response.ok ? "ok" : "bad",
+      status: response.status,
+    };
   }
 
   async playHttp(videoEl, url) {

From eb989bee89d3e96436a10ab57867b855df7a89b4 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 18:03:48 -0400
Subject: [PATCH 089/101] Ensure url health badges update once cards mount

---
 js/app.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/js/app.js b/js/app.js
index 3060a9f4..f9da5c58 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2153,7 +2153,7 @@ class bitvidApp {
   }
 
   updateUrlHealthBadge(badgeEl, state, videoId) {
-    if (!badgeEl || !badgeEl.isConnected) {
+    if (!badgeEl) {
       return;
     }
 
@@ -2161,6 +2161,17 @@ class bitvidApp {
       return;
     }
 
+    if (!badgeEl.isConnected) {
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(() => {
+          if (badgeEl.isConnected) {
+            this.updateUrlHealthBadge(badgeEl, state, videoId);
+          }
+        });
+      }
+      return;
+    }
+
     const status = state?.status || "checking";
     const message =
       state?.message ||

From 58f564d1b275e253779c3f9ac545096165fbe58f Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 18:11:51 -0400
Subject: [PATCH 090/101] Simplify CDN health badge messages

---
 js/app.js | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/js/app.js b/js/app.js
index 3060a9f4..04e2b9f9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2153,7 +2153,7 @@ class bitvidApp {
   }
 
   updateUrlHealthBadge(badgeEl, state, videoId) {
-    if (!badgeEl || !badgeEl.isConnected) {
+    if (!badgeEl) {
       return;
     }
 
@@ -2161,13 +2161,24 @@ class bitvidApp {
       return;
     }
 
+    if (!badgeEl.isConnected) {
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(() => {
+          if (badgeEl.isConnected) {
+            this.updateUrlHealthBadge(badgeEl, state, videoId);
+          }
+        });
+      }
+      return;
+    }
+
     const status = state?.status || "checking";
     const message =
       state?.message ||
       (status === "healthy"
-        ? "✅ CDN Healthy"
+        ? "✅ CDN"
         : status === "offline"
-        ? "⚠️ URL offline — using P2P fallback"
+        ? "❌ CDN"
         : status === "unknown"
         ? "⚠️ Hosted URL reachable (CORS restricted)"
         : status === "timeout"
@@ -2191,7 +2202,13 @@ class bitvidApp {
         "text-green-200"
       );
     } else if (status === "offline") {
-      badgeEl.classList.add("block", "bg-red-900", "text-red-200");
+      badgeEl.classList.add(
+        "inline-flex",
+        "items-center",
+        "gap-1",
+        "bg-red-900",
+        "text-red-200"
+      );
     } else if (status === "unknown" || status === "timeout") {
       badgeEl.classList.add(
         "inline-flex",
@@ -2255,7 +2272,7 @@ class bitvidApp {
         let entry;
 
         if (outcome === "ok") {
-          entry = { status: "healthy", message: "✅ CDN Healthy" };
+          entry = { status: "healthy", message: "✅ CDN" };
         } else if (outcome === "opaque") {
           entry = {
             status: "unknown",
@@ -2269,7 +2286,7 @@ class bitvidApp {
         } else {
           entry = {
             status: "offline",
-            message: "⚠️ URL offline — using P2P fallback",
+            message: "❌ CDN",
           };
         }
 
@@ -2279,7 +2296,7 @@ class bitvidApp {
         console.warn(`[urlHealth] probe failed for ${trimmedUrl}:`, err);
         const entry = {
           status: "offline",
-          message: "⚠️ URL offline — using P2P fallback",
+          message: "❌ CDN",
         };
         return this.storeUrlHealth(eventId, trimmedUrl, entry);
       });

From df6878aef69af4341ee652c0f1cf490fc34cde30 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 18:16:16 -0400
Subject: [PATCH 091/101] update

---
 js/app.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/app.js b/js/app.js
index 04e2b9f9..25be6895 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2180,9 +2180,9 @@ class bitvidApp {
         : status === "offline"
         ? "❌ CDN"
         : status === "unknown"
-        ? "⚠️ Hosted URL reachable (CORS restricted)"
+        ? "⚠️ CDN"
         : status === "timeout"
-        ? "⚠️ Hosted URL check timed out"
+        ? "⚠️ CDN timed out"
         : "Checking hosted URL…");
 
     badgeEl.dataset.urlHealthState = status;
@@ -2276,12 +2276,12 @@ class bitvidApp {
         } else if (outcome === "opaque") {
           entry = {
             status: "unknown",
-            message: "⚠️ Hosted URL reachable (CORS restricted)",
+            message: "⚠️ CDN",
           };
         } else if (outcome === "timeout") {
           entry = {
             status: "timeout",
-            message: "⚠️ Hosted URL check timed out",
+            message: "⚠️ CDN timed out",
           };
         } else {
           entry = {

From 614847c99b53351c827b87c40e138400942f7d1a Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 18:23:44 -0400
Subject: [PATCH 092/101] Handle opaque URL probes via video fallback

---
 js/app.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/js/app.js b/js/app.js
index 25be6895..1a58ee62 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3476,6 +3476,10 @@ class bitvidApp {
     }
 
     if (response.type === "opaque") {
+      const fallback = await this.probeUrlWithVideoElement(trimmed);
+      if (fallback && fallback.outcome) {
+        return fallback;
+      }
       return { outcome: "opaque" };
     }
 

From c1da7dbb391401b52cde35fb959775c16cef27f8 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 18:36:18 -0400
Subject: [PATCH 093/101] Add zap button placeholder on channel profiles

---
 assets/svg/lightning-bolt.svg | 13 +++++++++++++
 js/channelProfile.js          | 18 ++++++++++++++++++
 views/channel-profile.html    | 16 +++++++++++++++-
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 assets/svg/lightning-bolt.svg

diff --git a/assets/svg/lightning-bolt.svg b/assets/svg/lightning-bolt.svg
new file mode 100644
index 00000000..db4c7623
--- /dev/null
+++ b/assets/svg/lightning-bolt.svg
@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="white"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+</svg>
diff --git a/js/channelProfile.js b/js/channelProfile.js
index aa552426..8922b649 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -47,6 +47,8 @@ export async function initChannelProfileView() {
     if (btn) btn.classList.add("hidden");
   }
 
+  setupZapButton();
+
   // 4) Load user’s profile (banner, avatar, etc.)
   await loadUserProfile(hexPub);
 
@@ -54,6 +56,22 @@ export async function initChannelProfileView() {
   await loadUserVideos(hexPub);
 }
 
+function setupZapButton() {
+  const zapButton = document.getElementById("zapButton");
+  if (!zapButton) {
+    return;
+  }
+
+  if (zapButton.dataset.initialized === "true") {
+    return;
+  }
+
+  zapButton.addEventListener("click", () => {
+    window.alert("Zaps coming soon.");
+  });
+  zapButton.dataset.initialized = "true";
+}
+
 /**
  * Renders a Subscribe / Unsubscribe button with an icon,
  * using color #fe0032 and the subscribe-button-icon.svg on the left.
diff --git a/views/channel-profile.html b/views/channel-profile.html
index 693c7dd5..845e08e1 100644
--- a/views/channel-profile.html
+++ b/views/channel-profile.html
@@ -43,7 +43,21 @@
 
   <!-- Area for Subscribe/Unsubscribe button -->
   <div class="px-4 my-4">
-    <div id="subscribeBtnArea" class="hidden"></div>
+    <div class="flex items-center gap-3">
+      <button
+        id="zapButton"
+        type="button"
+        class="icon-button"
+        aria-label="Send a zap"
+      >
+        <img
+          src="assets/svg/lightning-bolt.svg"
+          alt="Zap"
+          class="icon-image"
+        />
+      </button>
+      <div id="subscribeBtnArea" class="hidden"></div>
+    </div>
   </div>
 
   <hr class="my-6" />

From ddd8a393f42688aceea945531155ab13da8aa334 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 18:50:12 -0400
Subject: [PATCH 094/101] Add tracker health badges for magnets

---
 css/style.css        |  38 +++++++
 js/app.js            |  21 ++++
 js/bufferPolyfill.js |  17 ++++
 js/gridHealth.js     | 186 ++++++++++++++++++++++++++++++++++
 js/healthService.js  |  98 ++++++++++++++++++
 js/index.js          |   1 +
 js/magnets.js        |  66 +++++++++++++
 js/subscriptions.js  |  30 +++++-
 js/trackerConfig.js  |  39 ++++++++
 js/trackerPing.js    | 230 +++++++++++++++++++++++++++++++++++++++++++
 10 files changed, 724 insertions(+), 2 deletions(-)
 create mode 100644 js/bufferPolyfill.js
 create mode 100644 js/gridHealth.js
 create mode 100644 js/healthService.js
 create mode 100644 js/magnets.js
 create mode 100644 js/trackerConfig.js
 create mode 100644 js/trackerPing.js

diff --git a/css/style.css b/css/style.css
index 208e5552..bd9cdd74 100644
--- a/css/style.css
+++ b/css/style.css
@@ -74,6 +74,44 @@ header img {
   box-shadow: var(--shadow-md);
 }
 
+.video-card .stream-health {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  font-size: 1.1rem;
+  line-height: 1;
+  transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
+}
+
+.video-card .stream-health[data-stream-health-state="good"] {
+  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45));
+}
+
+.video-card .stream-health[data-stream-health-state="none"] {
+  opacity: 0.85;
+}
+
+.video-card .stream-health[data-stream-health-state="noresp"],
+.video-card .stream-health[data-stream-health-state="unknown"] {
+  opacity: 0.6;
+}
+
+.video-card .stream-health[data-stream-health-state="checking"] {
+  animation: stream-health-pulse 1.2s ease-in-out infinite alternate;
+}
+
+@keyframes stream-health-pulse {
+  from {
+    transform: scale(0.95);
+    opacity: 0.65;
+  }
+  to {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+}
+
 .video-card--enter {
   opacity: 0;
   animation: video-card-fade-in 220ms ease-out forwards;
diff --git a/js/app.js b/js/app.js
index 1a58ee62..2be08ceb 100644
--- a/js/app.js
+++ b/js/app.js
@@ -10,6 +10,7 @@ import { normalizeAndAugmentMagnet } from "./magnet.js";
 import { deriveTorrentPlaybackConfig } from "./playbackUtils.js";
 import { URL_FIRST_ENABLED } from "./constants.js";
 import { trackVideoView } from "./analytics.js";
+import { attachHealthBadges } from "./gridHealth.js";
 import {
   initialWhitelist,
   initialBlacklist,
@@ -2545,6 +2546,19 @@ class bitvidApp {
             </div>
           </a>
           <div class="p-4">
+            <div class="flex items-center justify-between text-xs text-gray-500 mb-2">
+              <span class="uppercase tracking-wide text-[0.65rem] text-gray-500">
+                Streamable?
+              </span>
+              <span
+                class="stream-health text-lg"
+                aria-live="polite"
+                aria-label="Checking stream availability"
+                title="Checking stream availability"
+              >
+                🟦
+              </span>
+            </div>
             <!-- Title triggers the video modal as well -->
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
@@ -2687,6 +2701,12 @@ class bitvidApp {
         } else if (magnetProvided && magnetSupported) {
           cardEl.dataset.torrentSupported = "true";
         }
+
+        if (magnetProvided) {
+          cardEl.dataset.magnet = playbackMagnet;
+        } else if (cardEl.dataset.magnet) {
+          delete cardEl.dataset.magnet;
+        }
         const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
         // We intentionally leave the data-play-* attributes blank in cardHtml and
         // assign them after template parsing so the raw URL/magnet strings avoid
@@ -2726,6 +2746,7 @@ class bitvidApp {
     // Clear old content, add new
     this.videoList.innerHTML = "";
     this.videoList.appendChild(fragment);
+    attachHealthBadges(this.videoList);
 
     // Ensure every thumbnail can recover with a fallback image if the primary
     // source fails to load or returns a zero-sized response (some CDNs error
diff --git a/js/bufferPolyfill.js b/js/bufferPolyfill.js
new file mode 100644
index 00000000..eb201cff
--- /dev/null
+++ b/js/bufferPolyfill.js
@@ -0,0 +1,17 @@
+import { Buffer } from "https://esm.sh/buffer@6.0.3?bundle";
+
+const globalScope = typeof globalThis !== "undefined" ? globalThis : window;
+
+if (globalScope && !globalScope.Buffer) {
+  globalScope.Buffer = Buffer;
+}
+
+if (globalScope && !globalScope.global) {
+  globalScope.global = globalScope;
+}
+
+if (globalScope && !globalScope.process) {
+  globalScope.process = { env: {} };
+}
+
+export { Buffer };
diff --git a/js/gridHealth.js b/js/gridHealth.js
new file mode 100644
index 00000000..c05ba294
--- /dev/null
+++ b/js/gridHealth.js
@@ -0,0 +1,186 @@
+import { infoHashFromMagnet } from "./magnets.js";
+import {
+  getDefaultHealth,
+  getHealthCached,
+  queueHealthCheck,
+} from "./healthService.js";
+
+const containerState = new WeakMap();
+const ROOT_MARGIN = "200px 0px";
+
+function ensureState(container) {
+  let state = containerState.get(container);
+  if (state) {
+    return state;
+  }
+
+  const pendingByCard = new WeakMap();
+  const observedCards = new WeakSet();
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const card = entry.target;
+        if (!(card instanceof HTMLElement)) {
+          return;
+        }
+        if (!entry.isIntersecting) {
+          return;
+        }
+        handleCardVisible({ card, pendingByCard });
+      });
+    },
+    { root: null, rootMargin: ROOT_MARGIN, threshold: 0.01 }
+  );
+
+  state = { observer, pendingByCard, observedCards };
+  containerState.set(container, state);
+  return state;
+}
+
+function toVisual(health) {
+  if (!health) {
+    return "unknown";
+  }
+  if (health.ok && health.seeders > 0) {
+    return "good";
+  }
+  if (health.responded) {
+    if (health.seeders > 0) {
+      return "good";
+    }
+    return "none";
+  }
+  return "noresp";
+}
+
+function formatCount(health) {
+  if (!health || !Number.isFinite(health.seeders) || health.seeders <= 0) {
+    return "";
+  }
+  return ` (${health.seeders})`;
+}
+
+function setBadge(card, visual, health) {
+  const el = card.querySelector(".stream-health");
+  if (!el) {
+    return;
+  }
+  const map = {
+    good: {
+      text: "🟢",
+      aria: "Streamable: seeders available",
+    },
+    none: {
+      text: "🟡",
+      aria: "No seeders reported by trackers",
+    },
+    noresp: {
+      text: "⚫",
+      aria: "No tracker response",
+    },
+    checking: {
+      text: "🟦",
+      aria: "Checking stream availability",
+    },
+    unknown: {
+      text: "⚪",
+      aria: "Unknown stream availability",
+    },
+  };
+  const entry = map[visual] || map.unknown;
+  const countText = formatCount(health);
+  el.textContent = `${entry.text}${countText}`;
+  el.setAttribute("aria-label", countText ? `${entry.aria}${countText}` : entry.aria);
+  el.setAttribute("title", countText ? `${entry.aria}${countText}` : entry.aria);
+  el.dataset.streamHealthState = visual;
+}
+
+function applyHealth(card, health) {
+  if (!health) {
+    setBadge(card, "unknown");
+    return;
+  }
+  const visual = toVisual(health);
+  setBadge(card, visual, health);
+}
+
+function handleCardVisible({ card, pendingByCard }) {
+  if (!(card instanceof HTMLElement)) {
+    return;
+  }
+  const magnet = card.dataset.magnet || "";
+  if (!magnet) {
+    setBadge(card, "unknown");
+    return;
+  }
+
+  const infoHash = infoHashFromMagnet(magnet);
+  if (!infoHash) {
+    setBadge(card, "unknown");
+    return;
+  }
+
+  const cached = getHealthCached(infoHash);
+  if (cached) {
+    applyHealth(card, cached);
+    return;
+  }
+
+  if (pendingByCard.has(card)) {
+    return;
+  }
+
+  setBadge(card, "checking", getDefaultHealth());
+  const pending = queueHealthCheck(magnet).then((health) => {
+    pendingByCard.delete(card);
+    if (!card.isConnected) {
+      return;
+    }
+    applyHealth(card, health);
+  });
+  pending.catch(() => {
+    pendingByCard.delete(card);
+    if (!card.isConnected) {
+      return;
+    }
+    setBadge(card, "noresp");
+  });
+  pendingByCard.set(card, pending);
+}
+
+export function attachHealthBadges(container) {
+  if (!(container instanceof HTMLElement)) {
+    return;
+  }
+  const state = ensureState(container);
+  const cards = container.querySelectorAll(".video-card");
+  cards.forEach((card) => {
+    if (!(card instanceof HTMLElement)) {
+      return;
+    }
+    if (state.observedCards.has(card)) {
+      return;
+    }
+    state.observedCards.add(card);
+    state.observer.observe(card);
+    if (!card.dataset.magnet) {
+      setBadge(card, "unknown");
+    }
+  });
+}
+
+export function refreshHealthBadges(container) {
+  if (!(container instanceof HTMLElement)) {
+    return;
+  }
+  const state = containerState.get(container);
+  if (!state) {
+    return;
+  }
+  state.observer.takeRecords().forEach((entry) => {
+    if (entry.isIntersecting) {
+      handleCardVisible({ card: entry.target, pendingByCard: state.pendingByCard });
+    }
+  });
+}
diff --git a/js/healthService.js b/js/healthService.js
new file mode 100644
index 00000000..de265bab
--- /dev/null
+++ b/js/healthService.js
@@ -0,0 +1,98 @@
+import PQueue from "https://esm.sh/p-queue@7.4.1";
+import { trackerPing } from "./trackerPing.js";
+import { infoHashFromMagnet } from "./magnets.js";
+import { HEALTH_TTL_MS, CONCURRENCY } from "./trackerConfig.js";
+
+const queue = new PQueue({ concurrency: CONCURRENCY });
+const cache = new Map();
+const inflight = new Map();
+
+export function getDefaultHealth() {
+  return {
+    ok: false,
+    seeders: 0,
+    leechers: 0,
+    responded: false,
+    from: [],
+  };
+}
+
+export function getHealthCached(infoHash) {
+  if (!infoHash) {
+    return null;
+  }
+  const entry = cache.get(infoHash);
+  if (!entry) {
+    return null;
+  }
+  if (Date.now() - entry.ts > HEALTH_TTL_MS) {
+    cache.delete(infoHash);
+    return null;
+  }
+  return entry.value;
+}
+
+export function setHealthCache(infoHash, value) {
+  if (!infoHash) {
+    return;
+  }
+  cache.set(infoHash, { ts: Date.now(), value });
+}
+
+export function queueHealthCheck(magnet, onResult) {
+  const infoHash = infoHashFromMagnet(magnet);
+  if (!infoHash) {
+    const fallback = getDefaultHealth();
+    if (typeof onResult === "function") {
+      onResult(fallback);
+    }
+    return Promise.resolve(fallback);
+  }
+
+  const cached = getHealthCached(infoHash);
+  if (cached) {
+    if (typeof onResult === "function") {
+      onResult(cached);
+    }
+    return Promise.resolve(cached);
+  }
+
+  if (inflight.has(infoHash)) {
+    const pending = inflight.get(infoHash);
+    if (typeof onResult === "function") {
+      pending.then(onResult).catch(() => {});
+    }
+    return pending;
+  }
+
+  const jobPromise = queue
+    .add(async () => {
+      try {
+        const health = await trackerPing(magnet);
+        setHealthCache(infoHash, health);
+        return health;
+      } catch (err) {
+        console.warn("trackerPing failed", err);
+        return getDefaultHealth();
+      }
+    })
+    .finally(() => {
+      inflight.delete(infoHash);
+    });
+
+  inflight.set(infoHash, jobPromise);
+  if (typeof onResult === "function") {
+    jobPromise.then(onResult).catch(() => {});
+  }
+  return jobPromise;
+}
+
+export function purgeHealthCache() {
+  const now = Date.now();
+  Array.from(cache.keys()).forEach((infoHash) => {
+    const entry = cache.get(infoHash);
+    if (!entry || now - entry.ts > HEALTH_TTL_MS) {
+      cache.delete(infoHash);
+    }
+  });
+}
diff --git a/js/index.js b/js/index.js
index d3c062d0..6ad7302f 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,5 +1,6 @@
 // js/index.js
 
+import "./bufferPolyfill.js";
 import { trackPageView } from "./analytics.js";
 
 const INTERFACE_FADE_IN_ANIMATION = "interface-fade-in";
diff --git a/js/magnets.js b/js/magnets.js
new file mode 100644
index 00000000..b5ab9fd3
--- /dev/null
+++ b/js/magnets.js
@@ -0,0 +1,66 @@
+import parseMagnet from "https://esm.sh/magnet-uri@9.1.2";
+
+function normalizeInfoHash(candidate) {
+  const trimmed = typeof candidate === "string" ? candidate.trim() : "";
+  if (!trimmed) {
+    return null;
+  }
+  if (/^[0-9a-f]{40}$/i.test(trimmed)) {
+    return trimmed.toLowerCase();
+  }
+  if (/^[a-z2-7]{32}$/i.test(trimmed)) {
+    try {
+      const parsed = parseMagnet(`magnet:?xt=urn:btih:${trimmed}`);
+      const hash = typeof parsed.infoHash === "string" ? parsed.infoHash : "";
+      return hash ? hash.toLowerCase() : null;
+    } catch (err) {
+      console.warn("Failed to normalize base32 info hash", err);
+    }
+  }
+  return null;
+}
+
+export function infoHashFromMagnet(magnet) {
+  if (typeof magnet !== "string") {
+    return null;
+  }
+  const direct = normalizeInfoHash(magnet);
+  if (direct) {
+    return direct;
+  }
+  try {
+    const parsed = parseMagnet(magnet);
+    const hash = typeof parsed.infoHash === "string" ? parsed.infoHash : "";
+    return hash ? hash.toLowerCase() : null;
+  } catch (err) {
+    console.warn("Failed to parse magnet for info hash", err);
+    return null;
+  }
+}
+
+export function trackersFromMagnet(magnet) {
+  if (typeof magnet !== "string") {
+    return [];
+  }
+  try {
+    const parsed = parseMagnet(magnet);
+    if (!parsed || !Array.isArray(parsed.announce)) {
+      return [];
+    }
+    const deduped = new Set();
+    parsed.announce.forEach((url) => {
+      if (typeof url !== "string") {
+        return;
+      }
+      const trimmed = url.trim();
+      if (!trimmed) {
+        return;
+      }
+      deduped.add(trimmed);
+    });
+    return Array.from(deduped);
+  } catch (err) {
+    console.warn("Failed to parse magnet trackers", err);
+    return [];
+  }
+}
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 2ef66b04..50ed39cb 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -3,6 +3,7 @@ import {
   nostrClient,
   convertEventToVideo as sharedConvertEventToVideo,
 } from "./nostr.js";
+import { attachHealthBadges } from "./gridHealth.js";
 
 function getAbsoluteShareUrl(nevent) {
   if (!nevent) {
@@ -379,9 +380,14 @@ class SubscriptionsManager {
       const safeThumb = window.app?.escapeHTML(video.thumbnail) || "";
       const playbackUrl =
         typeof video.url === "string" ? video.url : "";
-      const playbackMagnet =
-        typeof video.magnet === "string" ? video.magnet : "";
       const trimmedUrl = playbackUrl ? playbackUrl.trim() : "";
+      const trimmedMagnet =
+        typeof video.magnet === "string" ? video.magnet.trim() : "";
+      const legacyInfoHash =
+        typeof video.infoHash === "string" ? video.infoHash.trim() : "";
+      const magnetCandidate = trimmedMagnet || legacyInfoHash;
+      const playbackMagnet = magnetCandidate;
+      const magnetProvided = magnetCandidate.length > 0;
       const urlStatusHtml = trimmedUrl
         ? window.app?.getUrlHealthPlaceholderMarkup?.() ?? ""
         : "";
@@ -403,6 +409,19 @@ class SubscriptionsManager {
             </div>
           </a>
           <div class="p-4">
+            <div class="flex items-center justify-between text-xs text-gray-500 mb-2">
+              <span class="uppercase tracking-wide text-[0.65rem] text-gray-500">
+                Streamable?
+              </span>
+              <span
+                class="stream-health text-lg"
+                aria-live="polite"
+                aria-label="Checking stream availability"
+                title="Checking stream availability"
+              >
+                🟦
+              </span>
+            </div>
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
               data-video-id="${video.id}"
@@ -462,6 +481,12 @@ class SubscriptionsManager {
           el.dataset.playMagnet = playbackMagnet || "";
         });
 
+        if (magnetProvided) {
+          cardEl.dataset.magnet = playbackMagnet;
+        } else if (cardEl.dataset.magnet) {
+          delete cardEl.dataset.magnet;
+        }
+
         if (trimmedUrl && window.app?.handleUrlHealthBadge) {
           const badgeEl = cardEl.querySelector("[data-url-health-state]");
           if (badgeEl) {
@@ -477,6 +502,7 @@ class SubscriptionsManager {
     });
 
     container.appendChild(fragment);
+    attachHealthBadges(container);
 
     if (window.app) {
       window.app.videoList = container;
diff --git a/js/trackerConfig.js b/js/trackerConfig.js
new file mode 100644
index 00000000..9e31870a
--- /dev/null
+++ b/js/trackerConfig.js
@@ -0,0 +1,39 @@
+import { WSS_TRACKERS as DEFAULT_WSS_TRACKERS } from "./constants.js";
+
+export const TRACKER_TIMEOUT_MS = 3000;
+export const TRACKER_PER_MAGNET = 3;
+export const HEALTH_TTL_MS = 2 * 60 * 1000;
+export const CONCURRENCY = 3;
+export const TRACKER_ERROR_COOLDOWN_MS = 60 * 1000;
+
+export function resolveTrackerList({ magnetTrackers } = {}) {
+  const combined = [];
+  const seen = new Set();
+
+  const pushUnique = (url) => {
+    if (typeof url !== "string") {
+      return;
+    }
+    const trimmed = url.trim();
+    if (!trimmed) {
+      return;
+    }
+    if (!/^wss:\/\//i.test(trimmed)) {
+      return;
+    }
+    const normalized = trimmed.toLowerCase();
+    if (seen.has(normalized)) {
+      return;
+    }
+    seen.add(normalized);
+    combined.push(trimmed);
+  };
+
+  if (Array.isArray(magnetTrackers)) {
+    magnetTrackers.forEach(pushUnique);
+  }
+
+  DEFAULT_WSS_TRACKERS.forEach(pushUnique);
+
+  return combined.slice(0, TRACKER_PER_MAGNET);
+}
diff --git a/js/trackerPing.js b/js/trackerPing.js
new file mode 100644
index 00000000..eb85c6ba
--- /dev/null
+++ b/js/trackerPing.js
@@ -0,0 +1,230 @@
+import "./bufferPolyfill.js";
+import Client from "https://esm.sh/bittorrent-tracker@11.0.0/client?bundle";
+import { infoHashFromMagnet, trackersFromMagnet } from "./magnets.js";
+import {
+  resolveTrackerList,
+  TRACKER_TIMEOUT_MS,
+  TRACKER_ERROR_COOLDOWN_MS,
+} from "./trackerConfig.js";
+
+const trackerState = new Map();
+
+function now() {
+  return Date.now();
+}
+
+function randomPeerId() {
+  const bytes = new Uint8Array(20);
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    crypto.getRandomValues(bytes);
+  } else {
+    for (let i = 0; i < bytes.length; i += 1) {
+      bytes[i] = Math.floor(Math.random() * 256);
+    }
+  }
+  return bytes;
+}
+
+function getDefaultHealth() {
+  return {
+    ok: false,
+    seeders: 0,
+    leechers: 0,
+    responded: false,
+    from: [],
+  };
+}
+
+function getTrackerEntry(url) {
+  const existing = trackerState.get(url);
+  if (existing) {
+    return existing;
+  }
+  const entry = {
+    consecutiveErrors: 0,
+    lastErrorAt: 0,
+    cooldownUntil: 0,
+  };
+  trackerState.set(url, entry);
+  return entry;
+}
+
+function markTrackerSuccess(url) {
+  const entry = getTrackerEntry(url);
+  entry.consecutiveErrors = 0;
+  entry.cooldownUntil = 0;
+}
+
+function markTrackerError(url) {
+  const entry = getTrackerEntry(url);
+  const nowTs = now();
+  if (entry.lastErrorAt && nowTs - entry.lastErrorAt < TRACKER_ERROR_COOLDOWN_MS) {
+    entry.consecutiveErrors += 1;
+  } else {
+    entry.consecutiveErrors = 1;
+  }
+  entry.lastErrorAt = nowTs;
+  if (entry.consecutiveErrors >= 2) {
+    entry.cooldownUntil = nowTs + TRACKER_ERROR_COOLDOWN_MS;
+  }
+}
+
+function isTrackerUsable(url) {
+  const entry = getTrackerEntry(url);
+  return entry.cooldownUntil === 0 || entry.cooldownUntil <= now();
+}
+
+export async function trackerPing(magnet, trackers) {
+  const infoHash = infoHashFromMagnet(magnet);
+  if (!infoHash) {
+    return getDefaultHealth();
+  }
+
+  const magnetTrackers = trackers || trackersFromMagnet(magnet);
+  const announceList = resolveTrackerList({ magnetTrackers });
+  const usable = announceList.filter(isTrackerUsable);
+  const announces = usable.length ? usable : announceList;
+
+  if (!announces.length) {
+    return getDefaultHealth();
+  }
+
+  const peerId = randomPeerId();
+  const result = getDefaultHealth();
+  const clients = new Set();
+  let settled = false;
+  let timeoutId = null;
+
+  const finalize = () => {
+    if (settled) {
+      return;
+    }
+    settled = true;
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    clients.forEach((client) => {
+      try {
+        client.destroy();
+      } catch (err) {
+        // ignore
+      }
+    });
+    clients.clear();
+  };
+
+  return new Promise((resolve) => {
+    if (Number.isFinite(TRACKER_TIMEOUT_MS) && TRACKER_TIMEOUT_MS > 0) {
+      timeoutId = setTimeout(() => {
+        finalize();
+        resolve(result);
+      }, TRACKER_TIMEOUT_MS);
+    }
+
+    let remaining = announces.length;
+
+    const handleComplete = (client, url) => {
+      if (clients.has(client)) {
+        clients.delete(client);
+      }
+      if (url && result.from.includes(url) && result.ok) {
+        markTrackerSuccess(url);
+      }
+      remaining -= 1;
+      if (remaining <= 0 && !settled) {
+        finalize();
+        resolve(result);
+      }
+    };
+
+    const handleResult = (url, data) => {
+      result.responded = true;
+      if (url && !result.from.includes(url)) {
+        result.from.push(url);
+      }
+      const seeders = Number.isFinite(data?.complete)
+        ? Number(data.complete)
+        : 0;
+      const leechers = Number.isFinite(data?.incomplete)
+        ? Number(data.incomplete)
+        : 0;
+      if (seeders > result.seeders) {
+        result.seeders = seeders;
+      }
+      if (leechers > result.leechers) {
+        result.leechers = leechers;
+      }
+      if (seeders > 0) {
+        result.ok = true;
+      }
+    };
+
+    announces.forEach((url) => {
+      let client;
+      try {
+        client = new Client({
+          infoHash,
+          peerId,
+          announce: [url],
+        });
+      } catch (err) {
+        markTrackerError(url);
+        remaining -= 1;
+        if (remaining <= 0 && !settled) {
+          finalize();
+          resolve(result);
+        }
+        return;
+      }
+
+      clients.add(client);
+
+      const cleanupAndResolve = () => {
+        if (settled) {
+          return;
+        }
+        finalize();
+        resolve(result);
+      };
+
+      client.once("update", (data) => {
+        handleResult(url, data);
+        markTrackerSuccess(url);
+        if (result.ok) {
+          cleanupAndResolve();
+          return;
+        }
+        handleComplete(client, url);
+      });
+
+      client.once("error", () => {
+        markTrackerError(url);
+        handleComplete(client, url);
+      });
+
+      client.once("warning", () => {
+        handleComplete(client, url);
+      });
+
+      try {
+        client.start();
+      } catch (err) {
+        markTrackerError(url);
+        handleComplete(client, url);
+      }
+    });
+
+    if (announces.length === 0) {
+      finalize();
+      resolve(result);
+    }
+  });
+}
+
+export function getTrackerStateSnapshot() {
+  const snapshot = {};
+  trackerState.forEach((value, key) => {
+    snapshot[key] = { ...value };
+  });
+  return snapshot;
+}

From b3b85b6323c547ee63286ab32d7b937b1f5e0504 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 18:58:41 -0400
Subject: [PATCH 095/101] Fix magnet-uri import version

---
 css/style.css        |  38 +++++++
 js/app.js            |  21 ++++
 js/bufferPolyfill.js |  17 ++++
 js/gridHealth.js     | 186 ++++++++++++++++++++++++++++++++++
 js/healthService.js  |  98 ++++++++++++++++++
 js/index.js          |   1 +
 js/magnets.js        |  66 +++++++++++++
 js/subscriptions.js  |  30 +++++-
 js/trackerConfig.js  |  39 ++++++++
 js/trackerPing.js    | 230 +++++++++++++++++++++++++++++++++++++++++++
 10 files changed, 724 insertions(+), 2 deletions(-)
 create mode 100644 js/bufferPolyfill.js
 create mode 100644 js/gridHealth.js
 create mode 100644 js/healthService.js
 create mode 100644 js/magnets.js
 create mode 100644 js/trackerConfig.js
 create mode 100644 js/trackerPing.js

diff --git a/css/style.css b/css/style.css
index 208e5552..bd9cdd74 100644
--- a/css/style.css
+++ b/css/style.css
@@ -74,6 +74,44 @@ header img {
   box-shadow: var(--shadow-md);
 }
 
+.video-card .stream-health {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  font-size: 1.1rem;
+  line-height: 1;
+  transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
+}
+
+.video-card .stream-health[data-stream-health-state="good"] {
+  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45));
+}
+
+.video-card .stream-health[data-stream-health-state="none"] {
+  opacity: 0.85;
+}
+
+.video-card .stream-health[data-stream-health-state="noresp"],
+.video-card .stream-health[data-stream-health-state="unknown"] {
+  opacity: 0.6;
+}
+
+.video-card .stream-health[data-stream-health-state="checking"] {
+  animation: stream-health-pulse 1.2s ease-in-out infinite alternate;
+}
+
+@keyframes stream-health-pulse {
+  from {
+    transform: scale(0.95);
+    opacity: 0.65;
+  }
+  to {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+}
+
 .video-card--enter {
   opacity: 0;
   animation: video-card-fade-in 220ms ease-out forwards;
diff --git a/js/app.js b/js/app.js
index 1a58ee62..2be08ceb 100644
--- a/js/app.js
+++ b/js/app.js
@@ -10,6 +10,7 @@ import { normalizeAndAugmentMagnet } from "./magnet.js";
 import { deriveTorrentPlaybackConfig } from "./playbackUtils.js";
 import { URL_FIRST_ENABLED } from "./constants.js";
 import { trackVideoView } from "./analytics.js";
+import { attachHealthBadges } from "./gridHealth.js";
 import {
   initialWhitelist,
   initialBlacklist,
@@ -2545,6 +2546,19 @@ class bitvidApp {
             </div>
           </a>
           <div class="p-4">
+            <div class="flex items-center justify-between text-xs text-gray-500 mb-2">
+              <span class="uppercase tracking-wide text-[0.65rem] text-gray-500">
+                Streamable?
+              </span>
+              <span
+                class="stream-health text-lg"
+                aria-live="polite"
+                aria-label="Checking stream availability"
+                title="Checking stream availability"
+              >
+                🟦
+              </span>
+            </div>
             <!-- Title triggers the video modal as well -->
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
@@ -2687,6 +2701,12 @@ class bitvidApp {
         } else if (magnetProvided && magnetSupported) {
           cardEl.dataset.torrentSupported = "true";
         }
+
+        if (magnetProvided) {
+          cardEl.dataset.magnet = playbackMagnet;
+        } else if (cardEl.dataset.magnet) {
+          delete cardEl.dataset.magnet;
+        }
         const interactiveEls = cardEl.querySelectorAll("[data-video-id]");
         // We intentionally leave the data-play-* attributes blank in cardHtml and
         // assign them after template parsing so the raw URL/magnet strings avoid
@@ -2726,6 +2746,7 @@ class bitvidApp {
     // Clear old content, add new
     this.videoList.innerHTML = "";
     this.videoList.appendChild(fragment);
+    attachHealthBadges(this.videoList);
 
     // Ensure every thumbnail can recover with a fallback image if the primary
     // source fails to load or returns a zero-sized response (some CDNs error
diff --git a/js/bufferPolyfill.js b/js/bufferPolyfill.js
new file mode 100644
index 00000000..eb201cff
--- /dev/null
+++ b/js/bufferPolyfill.js
@@ -0,0 +1,17 @@
+import { Buffer } from "https://esm.sh/buffer@6.0.3?bundle";
+
+const globalScope = typeof globalThis !== "undefined" ? globalThis : window;
+
+if (globalScope && !globalScope.Buffer) {
+  globalScope.Buffer = Buffer;
+}
+
+if (globalScope && !globalScope.global) {
+  globalScope.global = globalScope;
+}
+
+if (globalScope && !globalScope.process) {
+  globalScope.process = { env: {} };
+}
+
+export { Buffer };
diff --git a/js/gridHealth.js b/js/gridHealth.js
new file mode 100644
index 00000000..c05ba294
--- /dev/null
+++ b/js/gridHealth.js
@@ -0,0 +1,186 @@
+import { infoHashFromMagnet } from "./magnets.js";
+import {
+  getDefaultHealth,
+  getHealthCached,
+  queueHealthCheck,
+} from "./healthService.js";
+
+const containerState = new WeakMap();
+const ROOT_MARGIN = "200px 0px";
+
+function ensureState(container) {
+  let state = containerState.get(container);
+  if (state) {
+    return state;
+  }
+
+  const pendingByCard = new WeakMap();
+  const observedCards = new WeakSet();
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const card = entry.target;
+        if (!(card instanceof HTMLElement)) {
+          return;
+        }
+        if (!entry.isIntersecting) {
+          return;
+        }
+        handleCardVisible({ card, pendingByCard });
+      });
+    },
+    { root: null, rootMargin: ROOT_MARGIN, threshold: 0.01 }
+  );
+
+  state = { observer, pendingByCard, observedCards };
+  containerState.set(container, state);
+  return state;
+}
+
+function toVisual(health) {
+  if (!health) {
+    return "unknown";
+  }
+  if (health.ok && health.seeders > 0) {
+    return "good";
+  }
+  if (health.responded) {
+    if (health.seeders > 0) {
+      return "good";
+    }
+    return "none";
+  }
+  return "noresp";
+}
+
+function formatCount(health) {
+  if (!health || !Number.isFinite(health.seeders) || health.seeders <= 0) {
+    return "";
+  }
+  return ` (${health.seeders})`;
+}
+
+function setBadge(card, visual, health) {
+  const el = card.querySelector(".stream-health");
+  if (!el) {
+    return;
+  }
+  const map = {
+    good: {
+      text: "🟢",
+      aria: "Streamable: seeders available",
+    },
+    none: {
+      text: "🟡",
+      aria: "No seeders reported by trackers",
+    },
+    noresp: {
+      text: "⚫",
+      aria: "No tracker response",
+    },
+    checking: {
+      text: "🟦",
+      aria: "Checking stream availability",
+    },
+    unknown: {
+      text: "⚪",
+      aria: "Unknown stream availability",
+    },
+  };
+  const entry = map[visual] || map.unknown;
+  const countText = formatCount(health);
+  el.textContent = `${entry.text}${countText}`;
+  el.setAttribute("aria-label", countText ? `${entry.aria}${countText}` : entry.aria);
+  el.setAttribute("title", countText ? `${entry.aria}${countText}` : entry.aria);
+  el.dataset.streamHealthState = visual;
+}
+
+function applyHealth(card, health) {
+  if (!health) {
+    setBadge(card, "unknown");
+    return;
+  }
+  const visual = toVisual(health);
+  setBadge(card, visual, health);
+}
+
+function handleCardVisible({ card, pendingByCard }) {
+  if (!(card instanceof HTMLElement)) {
+    return;
+  }
+  const magnet = card.dataset.magnet || "";
+  if (!magnet) {
+    setBadge(card, "unknown");
+    return;
+  }
+
+  const infoHash = infoHashFromMagnet(magnet);
+  if (!infoHash) {
+    setBadge(card, "unknown");
+    return;
+  }
+
+  const cached = getHealthCached(infoHash);
+  if (cached) {
+    applyHealth(card, cached);
+    return;
+  }
+
+  if (pendingByCard.has(card)) {
+    return;
+  }
+
+  setBadge(card, "checking", getDefaultHealth());
+  const pending = queueHealthCheck(magnet).then((health) => {
+    pendingByCard.delete(card);
+    if (!card.isConnected) {
+      return;
+    }
+    applyHealth(card, health);
+  });
+  pending.catch(() => {
+    pendingByCard.delete(card);
+    if (!card.isConnected) {
+      return;
+    }
+    setBadge(card, "noresp");
+  });
+  pendingByCard.set(card, pending);
+}
+
+export function attachHealthBadges(container) {
+  if (!(container instanceof HTMLElement)) {
+    return;
+  }
+  const state = ensureState(container);
+  const cards = container.querySelectorAll(".video-card");
+  cards.forEach((card) => {
+    if (!(card instanceof HTMLElement)) {
+      return;
+    }
+    if (state.observedCards.has(card)) {
+      return;
+    }
+    state.observedCards.add(card);
+    state.observer.observe(card);
+    if (!card.dataset.magnet) {
+      setBadge(card, "unknown");
+    }
+  });
+}
+
+export function refreshHealthBadges(container) {
+  if (!(container instanceof HTMLElement)) {
+    return;
+  }
+  const state = containerState.get(container);
+  if (!state) {
+    return;
+  }
+  state.observer.takeRecords().forEach((entry) => {
+    if (entry.isIntersecting) {
+      handleCardVisible({ card: entry.target, pendingByCard: state.pendingByCard });
+    }
+  });
+}
diff --git a/js/healthService.js b/js/healthService.js
new file mode 100644
index 00000000..de265bab
--- /dev/null
+++ b/js/healthService.js
@@ -0,0 +1,98 @@
+import PQueue from "https://esm.sh/p-queue@7.4.1";
+import { trackerPing } from "./trackerPing.js";
+import { infoHashFromMagnet } from "./magnets.js";
+import { HEALTH_TTL_MS, CONCURRENCY } from "./trackerConfig.js";
+
+const queue = new PQueue({ concurrency: CONCURRENCY });
+const cache = new Map();
+const inflight = new Map();
+
+export function getDefaultHealth() {
+  return {
+    ok: false,
+    seeders: 0,
+    leechers: 0,
+    responded: false,
+    from: [],
+  };
+}
+
+export function getHealthCached(infoHash) {
+  if (!infoHash) {
+    return null;
+  }
+  const entry = cache.get(infoHash);
+  if (!entry) {
+    return null;
+  }
+  if (Date.now() - entry.ts > HEALTH_TTL_MS) {
+    cache.delete(infoHash);
+    return null;
+  }
+  return entry.value;
+}
+
+export function setHealthCache(infoHash, value) {
+  if (!infoHash) {
+    return;
+  }
+  cache.set(infoHash, { ts: Date.now(), value });
+}
+
+export function queueHealthCheck(magnet, onResult) {
+  const infoHash = infoHashFromMagnet(magnet);
+  if (!infoHash) {
+    const fallback = getDefaultHealth();
+    if (typeof onResult === "function") {
+      onResult(fallback);
+    }
+    return Promise.resolve(fallback);
+  }
+
+  const cached = getHealthCached(infoHash);
+  if (cached) {
+    if (typeof onResult === "function") {
+      onResult(cached);
+    }
+    return Promise.resolve(cached);
+  }
+
+  if (inflight.has(infoHash)) {
+    const pending = inflight.get(infoHash);
+    if (typeof onResult === "function") {
+      pending.then(onResult).catch(() => {});
+    }
+    return pending;
+  }
+
+  const jobPromise = queue
+    .add(async () => {
+      try {
+        const health = await trackerPing(magnet);
+        setHealthCache(infoHash, health);
+        return health;
+      } catch (err) {
+        console.warn("trackerPing failed", err);
+        return getDefaultHealth();
+      }
+    })
+    .finally(() => {
+      inflight.delete(infoHash);
+    });
+
+  inflight.set(infoHash, jobPromise);
+  if (typeof onResult === "function") {
+    jobPromise.then(onResult).catch(() => {});
+  }
+  return jobPromise;
+}
+
+export function purgeHealthCache() {
+  const now = Date.now();
+  Array.from(cache.keys()).forEach((infoHash) => {
+    const entry = cache.get(infoHash);
+    if (!entry || now - entry.ts > HEALTH_TTL_MS) {
+      cache.delete(infoHash);
+    }
+  });
+}
diff --git a/js/index.js b/js/index.js
index d3c062d0..6ad7302f 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,5 +1,6 @@
 // js/index.js
 
+import "./bufferPolyfill.js";
 import { trackPageView } from "./analytics.js";
 
 const INTERFACE_FADE_IN_ANIMATION = "interface-fade-in";
diff --git a/js/magnets.js b/js/magnets.js
new file mode 100644
index 00000000..208b703c
--- /dev/null
+++ b/js/magnets.js
@@ -0,0 +1,66 @@
+import parseMagnet from "https://esm.sh/magnet-uri@7.0.7";
+
+function normalizeInfoHash(candidate) {
+  const trimmed = typeof candidate === "string" ? candidate.trim() : "";
+  if (!trimmed) {
+    return null;
+  }
+  if (/^[0-9a-f]{40}$/i.test(trimmed)) {
+    return trimmed.toLowerCase();
+  }
+  if (/^[a-z2-7]{32}$/i.test(trimmed)) {
+    try {
+      const parsed = parseMagnet(`magnet:?xt=urn:btih:${trimmed}`);
+      const hash = typeof parsed.infoHash === "string" ? parsed.infoHash : "";
+      return hash ? hash.toLowerCase() : null;
+    } catch (err) {
+      console.warn("Failed to normalize base32 info hash", err);
+    }
+  }
+  return null;
+}
+
+export function infoHashFromMagnet(magnet) {
+  if (typeof magnet !== "string") {
+    return null;
+  }
+  const direct = normalizeInfoHash(magnet);
+  if (direct) {
+    return direct;
+  }
+  try {
+    const parsed = parseMagnet(magnet);
+    const hash = typeof parsed.infoHash === "string" ? parsed.infoHash : "";
+    return hash ? hash.toLowerCase() : null;
+  } catch (err) {
+    console.warn("Failed to parse magnet for info hash", err);
+    return null;
+  }
+}
+
+export function trackersFromMagnet(magnet) {
+  if (typeof magnet !== "string") {
+    return [];
+  }
+  try {
+    const parsed = parseMagnet(magnet);
+    if (!parsed || !Array.isArray(parsed.announce)) {
+      return [];
+    }
+    const deduped = new Set();
+    parsed.announce.forEach((url) => {
+      if (typeof url !== "string") {
+        return;
+      }
+      const trimmed = url.trim();
+      if (!trimmed) {
+        return;
+      }
+      deduped.add(trimmed);
+    });
+    return Array.from(deduped);
+  } catch (err) {
+    console.warn("Failed to parse magnet trackers", err);
+    return [];
+  }
+}
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 2ef66b04..50ed39cb 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -3,6 +3,7 @@ import {
   nostrClient,
   convertEventToVideo as sharedConvertEventToVideo,
 } from "./nostr.js";
+import { attachHealthBadges } from "./gridHealth.js";
 
 function getAbsoluteShareUrl(nevent) {
   if (!nevent) {
@@ -379,9 +380,14 @@ class SubscriptionsManager {
       const safeThumb = window.app?.escapeHTML(video.thumbnail) || "";
       const playbackUrl =
         typeof video.url === "string" ? video.url : "";
-      const playbackMagnet =
-        typeof video.magnet === "string" ? video.magnet : "";
       const trimmedUrl = playbackUrl ? playbackUrl.trim() : "";
+      const trimmedMagnet =
+        typeof video.magnet === "string" ? video.magnet.trim() : "";
+      const legacyInfoHash =
+        typeof video.infoHash === "string" ? video.infoHash.trim() : "";
+      const magnetCandidate = trimmedMagnet || legacyInfoHash;
+      const playbackMagnet = magnetCandidate;
+      const magnetProvided = magnetCandidate.length > 0;
       const urlStatusHtml = trimmedUrl
         ? window.app?.getUrlHealthPlaceholderMarkup?.() ?? ""
         : "";
@@ -403,6 +409,19 @@ class SubscriptionsManager {
             </div>
           </a>
           <div class="p-4">
+            <div class="flex items-center justify-between text-xs text-gray-500 mb-2">
+              <span class="uppercase tracking-wide text-[0.65rem] text-gray-500">
+                Streamable?
+              </span>
+              <span
+                class="stream-health text-lg"
+                aria-live="polite"
+                aria-label="Checking stream availability"
+                title="Checking stream availability"
+              >
+                🟦
+              </span>
+            </div>
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
               data-video-id="${video.id}"
@@ -462,6 +481,12 @@ class SubscriptionsManager {
           el.dataset.playMagnet = playbackMagnet || "";
         });
 
+        if (magnetProvided) {
+          cardEl.dataset.magnet = playbackMagnet;
+        } else if (cardEl.dataset.magnet) {
+          delete cardEl.dataset.magnet;
+        }
+
         if (trimmedUrl && window.app?.handleUrlHealthBadge) {
           const badgeEl = cardEl.querySelector("[data-url-health-state]");
           if (badgeEl) {
@@ -477,6 +502,7 @@ class SubscriptionsManager {
     });
 
     container.appendChild(fragment);
+    attachHealthBadges(container);
 
     if (window.app) {
       window.app.videoList = container;
diff --git a/js/trackerConfig.js b/js/trackerConfig.js
new file mode 100644
index 00000000..9e31870a
--- /dev/null
+++ b/js/trackerConfig.js
@@ -0,0 +1,39 @@
+import { WSS_TRACKERS as DEFAULT_WSS_TRACKERS } from "./constants.js";
+
+export const TRACKER_TIMEOUT_MS = 3000;
+export const TRACKER_PER_MAGNET = 3;
+export const HEALTH_TTL_MS = 2 * 60 * 1000;
+export const CONCURRENCY = 3;
+export const TRACKER_ERROR_COOLDOWN_MS = 60 * 1000;
+
+export function resolveTrackerList({ magnetTrackers } = {}) {
+  const combined = [];
+  const seen = new Set();
+
+  const pushUnique = (url) => {
+    if (typeof url !== "string") {
+      return;
+    }
+    const trimmed = url.trim();
+    if (!trimmed) {
+      return;
+    }
+    if (!/^wss:\/\//i.test(trimmed)) {
+      return;
+    }
+    const normalized = trimmed.toLowerCase();
+    if (seen.has(normalized)) {
+      return;
+    }
+    seen.add(normalized);
+    combined.push(trimmed);
+  };
+
+  if (Array.isArray(magnetTrackers)) {
+    magnetTrackers.forEach(pushUnique);
+  }
+
+  DEFAULT_WSS_TRACKERS.forEach(pushUnique);
+
+  return combined.slice(0, TRACKER_PER_MAGNET);
+}
diff --git a/js/trackerPing.js b/js/trackerPing.js
new file mode 100644
index 00000000..eb85c6ba
--- /dev/null
+++ b/js/trackerPing.js
@@ -0,0 +1,230 @@
+import "./bufferPolyfill.js";
+import Client from "https://esm.sh/bittorrent-tracker@11.0.0/client?bundle";
+import { infoHashFromMagnet, trackersFromMagnet } from "./magnets.js";
+import {
+  resolveTrackerList,
+  TRACKER_TIMEOUT_MS,
+  TRACKER_ERROR_COOLDOWN_MS,
+} from "./trackerConfig.js";
+
+const trackerState = new Map();
+
+function now() {
+  return Date.now();
+}
+
+function randomPeerId() {
+  const bytes = new Uint8Array(20);
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    crypto.getRandomValues(bytes);
+  } else {
+    for (let i = 0; i < bytes.length; i += 1) {
+      bytes[i] = Math.floor(Math.random() * 256);
+    }
+  }
+  return bytes;
+}
+
+function getDefaultHealth() {
+  return {
+    ok: false,
+    seeders: 0,
+    leechers: 0,
+    responded: false,
+    from: [],
+  };
+}
+
+function getTrackerEntry(url) {
+  const existing = trackerState.get(url);
+  if (existing) {
+    return existing;
+  }
+  const entry = {
+    consecutiveErrors: 0,
+    lastErrorAt: 0,
+    cooldownUntil: 0,
+  };
+  trackerState.set(url, entry);
+  return entry;
+}
+
+function markTrackerSuccess(url) {
+  const entry = getTrackerEntry(url);
+  entry.consecutiveErrors = 0;
+  entry.cooldownUntil = 0;
+}
+
+function markTrackerError(url) {
+  const entry = getTrackerEntry(url);
+  const nowTs = now();
+  if (entry.lastErrorAt && nowTs - entry.lastErrorAt < TRACKER_ERROR_COOLDOWN_MS) {
+    entry.consecutiveErrors += 1;
+  } else {
+    entry.consecutiveErrors = 1;
+  }
+  entry.lastErrorAt = nowTs;
+  if (entry.consecutiveErrors >= 2) {
+    entry.cooldownUntil = nowTs + TRACKER_ERROR_COOLDOWN_MS;
+  }
+}
+
+function isTrackerUsable(url) {
+  const entry = getTrackerEntry(url);
+  return entry.cooldownUntil === 0 || entry.cooldownUntil <= now();
+}
+
+export async function trackerPing(magnet, trackers) {
+  const infoHash = infoHashFromMagnet(magnet);
+  if (!infoHash) {
+    return getDefaultHealth();
+  }
+
+  const magnetTrackers = trackers || trackersFromMagnet(magnet);
+  const announceList = resolveTrackerList({ magnetTrackers });
+  const usable = announceList.filter(isTrackerUsable);
+  const announces = usable.length ? usable : announceList;
+
+  if (!announces.length) {
+    return getDefaultHealth();
+  }
+
+  const peerId = randomPeerId();
+  const result = getDefaultHealth();
+  const clients = new Set();
+  let settled = false;
+  let timeoutId = null;
+
+  const finalize = () => {
+    if (settled) {
+      return;
+    }
+    settled = true;
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    clients.forEach((client) => {
+      try {
+        client.destroy();
+      } catch (err) {
+        // ignore
+      }
+    });
+    clients.clear();
+  };
+
+  return new Promise((resolve) => {
+    if (Number.isFinite(TRACKER_TIMEOUT_MS) && TRACKER_TIMEOUT_MS > 0) {
+      timeoutId = setTimeout(() => {
+        finalize();
+        resolve(result);
+      }, TRACKER_TIMEOUT_MS);
+    }
+
+    let remaining = announces.length;
+
+    const handleComplete = (client, url) => {
+      if (clients.has(client)) {
+        clients.delete(client);
+      }
+      if (url && result.from.includes(url) && result.ok) {
+        markTrackerSuccess(url);
+      }
+      remaining -= 1;
+      if (remaining <= 0 && !settled) {
+        finalize();
+        resolve(result);
+      }
+    };
+
+    const handleResult = (url, data) => {
+      result.responded = true;
+      if (url && !result.from.includes(url)) {
+        result.from.push(url);
+      }
+      const seeders = Number.isFinite(data?.complete)
+        ? Number(data.complete)
+        : 0;
+      const leechers = Number.isFinite(data?.incomplete)
+        ? Number(data.incomplete)
+        : 0;
+      if (seeders > result.seeders) {
+        result.seeders = seeders;
+      }
+      if (leechers > result.leechers) {
+        result.leechers = leechers;
+      }
+      if (seeders > 0) {
+        result.ok = true;
+      }
+    };
+
+    announces.forEach((url) => {
+      let client;
+      try {
+        client = new Client({
+          infoHash,
+          peerId,
+          announce: [url],
+        });
+      } catch (err) {
+        markTrackerError(url);
+        remaining -= 1;
+        if (remaining <= 0 && !settled) {
+          finalize();
+          resolve(result);
+        }
+        return;
+      }
+
+      clients.add(client);
+
+      const cleanupAndResolve = () => {
+        if (settled) {
+          return;
+        }
+        finalize();
+        resolve(result);
+      };
+
+      client.once("update", (data) => {
+        handleResult(url, data);
+        markTrackerSuccess(url);
+        if (result.ok) {
+          cleanupAndResolve();
+          return;
+        }
+        handleComplete(client, url);
+      });
+
+      client.once("error", () => {
+        markTrackerError(url);
+        handleComplete(client, url);
+      });
+
+      client.once("warning", () => {
+        handleComplete(client, url);
+      });
+
+      try {
+        client.start();
+      } catch (err) {
+        markTrackerError(url);
+        handleComplete(client, url);
+      }
+    });
+
+    if (announces.length === 0) {
+      finalize();
+      resolve(result);
+    }
+  });
+}
+
+export function getTrackerStateSnapshot() {
+  const snapshot = {};
+  trackerState.forEach((value, key) => {
+    snapshot[key] = { ...value };
+  });
+  return snapshot;
+}

From 1e388757ff01d9f5be062ce2078b9401198e20ed Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 19:21:18 -0400
Subject: [PATCH 096/101] Align WebTorrent indicators with CDN badges

---
 js/app.js            | 97 +++++++++++++++++++++++++++++++++++---------
 js/channelProfile.js | 19 +++++++--
 js/subscriptions.js  | 36 ++++++++--------
 3 files changed, 113 insertions(+), 39 deletions(-)

diff --git a/js/app.js b/js/app.js
index 2be08ceb..552b9c3b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2132,10 +2132,28 @@ class bitvidApp {
    * so they can re-use the exact same badge skeleton. Keeping the markup in
    * one place avoids subtle mismatches when we tweak copy or classes later.
    */
-  getUrlHealthPlaceholderMarkup() {
+  getUrlHealthPlaceholderMarkup(options = {}) {
+    const includeMargin = options?.includeMargin !== false;
+    const classes = [
+      "url-health-badge",
+      "text-xs",
+      "font-semibold",
+      "px-2",
+      "py-1",
+      "rounded",
+      "inline-flex",
+      "items-center",
+      "gap-1",
+      "bg-gray-800",
+      "text-gray-300",
+    ];
+    if (includeMargin) {
+      classes.splice(1, 0, "mt-3");
+    }
+
     return `
       <div
-        class="url-health-badge mt-3 text-xs font-semibold px-2 py-1 rounded inline-flex items-center gap-1 bg-gray-800 text-gray-300"
+        class="${classes.join(" ")}"
         data-url-health-state="checking"
         aria-live="polite"
         role="status"
@@ -2145,6 +2163,46 @@ class bitvidApp {
     `;
   }
 
+  getTorrentHealthBadgeMarkup(options = {}) {
+    const includeMargin = options?.includeMargin !== false;
+    const classes = [
+      "torrent-health-badge",
+      "inline-flex",
+      "items-center",
+      "gap-2",
+      "px-2",
+      "py-1",
+      "rounded",
+      "bg-gray-800",
+      "text-gray-300",
+      "text-xs",
+      "font-semibold",
+    ];
+    if (includeMargin) {
+      classes.unshift("mt-3");
+    }
+
+    return `
+      <div class="${classes.join(" ")}">
+        <span
+          class="stream-health text-lg"
+          aria-live="polite"
+          aria-label="Checking WebTorrent availability"
+          title="Checking WebTorrent availability"
+        >
+          🟦
+        </span>
+        <span class="uppercase tracking-wide text-[0.65rem] text-gray-400">
+          WebTorrent
+        </span>
+      </div>
+    `;
+  }
+
+  isMagnetUriSupported(magnet) {
+    return isValidMagnetUri(magnet);
+  }
+
   getCachedUrlHealth(eventId, url) {
     return readUrlHealthFromCache(eventId, url);
   }
@@ -2480,7 +2538,7 @@ class bitvidApp {
       const playbackMagnet = magnetCandidate;
       const showUnsupportedTorrentBadge =
         !trimmedUrl && magnetProvided && !magnetSupported;
-      const torrentBadge = showUnsupportedTorrentBadge
+      const torrentWarningHtml = showUnsupportedTorrentBadge
         ? `
           <p
             class="mt-3 text-xs text-amber-300"
@@ -2492,9 +2550,21 @@ class bitvidApp {
         `
         : "";
 
-      const urlStatusHtml = trimmedUrl
-        ? this.getUrlHealthPlaceholderMarkup()
+      const urlBadgeHtml = trimmedUrl
+        ? this.getUrlHealthPlaceholderMarkup({ includeMargin: false })
         : "";
+      const torrentHealthBadgeHtml =
+        magnetSupported && magnetProvided
+          ? this.getTorrentHealthBadgeMarkup({ includeMargin: false })
+          : "";
+      const connectionBadgesHtml =
+        urlBadgeHtml || torrentHealthBadgeHtml
+          ? `
+            <div class="mt-3 flex flex-wrap items-center gap-2">
+              ${urlBadgeHtml}${torrentHealthBadgeHtml}
+            </div>
+          `
+          : "";
 
       const rawThumbnail =
         typeof video.thumbnail === "string" ? video.thumbnail.trim() : "";
@@ -2546,19 +2616,6 @@ class bitvidApp {
             </div>
           </a>
           <div class="p-4">
-            <div class="flex items-center justify-between text-xs text-gray-500 mb-2">
-              <span class="uppercase tracking-wide text-[0.65rem] text-gray-500">
-                Streamable?
-              </span>
-              <span
-                class="stream-health text-lg"
-                aria-live="polite"
-                aria-label="Checking stream availability"
-                title="Checking stream availability"
-              >
-                🟦
-              </span>
-            </div>
             <!-- Title triggers the video modal as well -->
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
@@ -2594,8 +2651,8 @@ class bitvidApp {
               </div>
               ${gearMenu}
             </div>
-            ${urlStatusHtml}
-            ${torrentBadge}
+            ${connectionBadgesHtml}
+            ${torrentWarningHtml}
           </div>
         </div>
       `;
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 8922b649..0292ba96 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -367,9 +367,22 @@ async function loadUserVideos(pubkey) {
         typeof video.url === "string" ? video.url : "";
       const trimmedUrl = playbackUrl ? playbackUrl.trim() : "";
       const playbackMagnet = rawMagnet || legacyInfoHash || "";
-      const urlStatusHtml = trimmedUrl
-        ? app.getUrlHealthPlaceholderMarkup()
+      const magnetSupported = app.isMagnetUriSupported(playbackMagnet);
+      const urlBadgeHtml = trimmedUrl
+        ? app.getUrlHealthPlaceholderMarkup({ includeMargin: false })
         : "";
+      const torrentHealthBadgeHtml =
+        magnetSupported && playbackMagnet
+          ? app.getTorrentHealthBadgeMarkup({ includeMargin: false })
+          : "";
+      const connectionBadgesHtml =
+        urlBadgeHtml || torrentHealthBadgeHtml
+          ? `
+            <div class="mt-3 flex flex-wrap items-center gap-2">
+              ${urlBadgeHtml}${torrentHealthBadgeHtml}
+            </div>
+          `
+          : "";
 
       cardEl.innerHTML = `
         <div
@@ -403,7 +416,7 @@ async function loadUserVideos(pubkey) {
             </div>
             ${gearMenu}
           </div>
-          ${urlStatusHtml}
+          ${connectionBadgesHtml}
         </div>
       `;
 
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 50ed39cb..68b42102 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -388,9 +388,26 @@ class SubscriptionsManager {
       const magnetCandidate = trimmedMagnet || legacyInfoHash;
       const playbackMagnet = magnetCandidate;
       const magnetProvided = magnetCandidate.length > 0;
-      const urlStatusHtml = trimmedUrl
-        ? window.app?.getUrlHealthPlaceholderMarkup?.() ?? ""
+      const magnetSupported =
+        window.app?.isMagnetUriSupported?.(magnetCandidate) ?? false;
+      const urlBadgeHtml = trimmedUrl
+        ? window.app?.getUrlHealthPlaceholderMarkup?.({ includeMargin: false }) ??
+          ""
         : "";
+      const torrentHealthBadgeHtml =
+        magnetProvided && magnetSupported
+          ? window.app?.getTorrentHealthBadgeMarkup?.({
+              includeMargin: false,
+            }) ?? ""
+          : "";
+      const connectionBadgesHtml =
+        urlBadgeHtml || torrentHealthBadgeHtml
+          ? `
+            <div class="mt-3 flex flex-wrap items-center gap-2">
+              ${urlBadgeHtml}${torrentHealthBadgeHtml}
+            </div>
+          `
+          : "";
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <a
@@ -409,19 +426,6 @@ class SubscriptionsManager {
             </div>
           </a>
           <div class="p-4">
-            <div class="flex items-center justify-between text-xs text-gray-500 mb-2">
-              <span class="uppercase tracking-wide text-[0.65rem] text-gray-500">
-                Streamable?
-              </span>
-              <span
-                class="stream-health text-lg"
-                aria-live="polite"
-                aria-label="Checking stream availability"
-                title="Checking stream availability"
-              >
-                🟦
-              </span>
-            </div>
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
               data-video-id="${video.id}"
@@ -454,7 +458,7 @@ class SubscriptionsManager {
               </div>
               ${gearMenu}
             </div>
-            ${urlStatusHtml}
+            ${connectionBadgesHtml}
           </div>
         </div>
       `;

From 40f87167b9ea8c4f783dfb04bcd6acaa031525e6 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 19:31:41 -0400
Subject: [PATCH 097/101] Align torrent badge styling with CDN indicator

---
 css/style.css        | 38 ------------------
 js/app.js            | 94 ++++++++++++++++++++++++++++++++++----------
 js/channelProfile.js | 19 +++++++--
 js/gridHealth.js     | 80 ++++++++++++++++++++++++++-----------
 js/subscriptions.js  | 36 +++++++++--------
 5 files changed, 168 insertions(+), 99 deletions(-)

diff --git a/css/style.css b/css/style.css
index bd9cdd74..208e5552 100644
--- a/css/style.css
+++ b/css/style.css
@@ -74,44 +74,6 @@ header img {
   box-shadow: var(--shadow-md);
 }
 
-.video-card .stream-health {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2rem;
-  font-size: 1.1rem;
-  line-height: 1;
-  transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
-}
-
-.video-card .stream-health[data-stream-health-state="good"] {
-  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45));
-}
-
-.video-card .stream-health[data-stream-health-state="none"] {
-  opacity: 0.85;
-}
-
-.video-card .stream-health[data-stream-health-state="noresp"],
-.video-card .stream-health[data-stream-health-state="unknown"] {
-  opacity: 0.6;
-}
-
-.video-card .stream-health[data-stream-health-state="checking"] {
-  animation: stream-health-pulse 1.2s ease-in-out infinite alternate;
-}
-
-@keyframes stream-health-pulse {
-  from {
-    transform: scale(0.95);
-    opacity: 0.65;
-  }
-  to {
-    transform: scale(1.05);
-    opacity: 1;
-  }
-}
-
 .video-card--enter {
   opacity: 0;
   animation: video-card-fade-in 220ms ease-out forwards;
diff --git a/js/app.js b/js/app.js
index 2be08ceb..ffbe72ba 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2132,10 +2132,28 @@ class bitvidApp {
    * so they can re-use the exact same badge skeleton. Keeping the markup in
    * one place avoids subtle mismatches when we tweak copy or classes later.
    */
-  getUrlHealthPlaceholderMarkup() {
+  getUrlHealthPlaceholderMarkup(options = {}) {
+    const includeMargin = options?.includeMargin !== false;
+    const classes = [
+      "url-health-badge",
+      "text-xs",
+      "font-semibold",
+      "px-2",
+      "py-1",
+      "rounded",
+      "inline-flex",
+      "items-center",
+      "gap-1",
+      "bg-gray-800",
+      "text-gray-300",
+    ];
+    if (includeMargin) {
+      classes.splice(1, 0, "mt-3");
+    }
+
     return `
       <div
-        class="url-health-badge mt-3 text-xs font-semibold px-2 py-1 rounded inline-flex items-center gap-1 bg-gray-800 text-gray-300"
+        class="${classes.join(" ")}"
         data-url-health-state="checking"
         aria-live="polite"
         role="status"
@@ -2145,6 +2163,43 @@ class bitvidApp {
     `;
   }
 
+  getTorrentHealthBadgeMarkup(options = {}) {
+    const includeMargin = options?.includeMargin !== false;
+    const classes = [
+      "torrent-health-badge",
+      "text-xs",
+      "font-semibold",
+      "px-2",
+      "py-1",
+      "rounded",
+      "inline-flex",
+      "items-center",
+      "gap-1",
+      "bg-gray-800",
+      "text-gray-300",
+      "transition-colors",
+      "duration-200",
+    ];
+    if (includeMargin) {
+      classes.unshift("mt-3");
+    }
+
+    return `
+      <div
+        class="${classes.join(" ")}"
+        data-stream-health-state="checking"
+        aria-live="polite"
+        role="status"
+      >
+        ⏳ Torrent
+      </div>
+    `;
+  }
+
+  isMagnetUriSupported(magnet) {
+    return isValidMagnetUri(magnet);
+  }
+
   getCachedUrlHealth(eventId, url) {
     return readUrlHealthFromCache(eventId, url);
   }
@@ -2480,7 +2535,7 @@ class bitvidApp {
       const playbackMagnet = magnetCandidate;
       const showUnsupportedTorrentBadge =
         !trimmedUrl && magnetProvided && !magnetSupported;
-      const torrentBadge = showUnsupportedTorrentBadge
+      const torrentWarningHtml = showUnsupportedTorrentBadge
         ? `
           <p
             class="mt-3 text-xs text-amber-300"
@@ -2492,9 +2547,21 @@ class bitvidApp {
         `
         : "";
 
-      const urlStatusHtml = trimmedUrl
-        ? this.getUrlHealthPlaceholderMarkup()
+      const urlBadgeHtml = trimmedUrl
+        ? this.getUrlHealthPlaceholderMarkup({ includeMargin: false })
         : "";
+      const torrentHealthBadgeHtml =
+        magnetSupported && magnetProvided
+          ? this.getTorrentHealthBadgeMarkup({ includeMargin: false })
+          : "";
+      const connectionBadgesHtml =
+        urlBadgeHtml || torrentHealthBadgeHtml
+          ? `
+            <div class="mt-3 flex flex-wrap items-center gap-2">
+              ${urlBadgeHtml}${torrentHealthBadgeHtml}
+            </div>
+          `
+          : "";
 
       const rawThumbnail =
         typeof video.thumbnail === "string" ? video.thumbnail.trim() : "";
@@ -2546,19 +2613,6 @@ class bitvidApp {
             </div>
           </a>
           <div class="p-4">
-            <div class="flex items-center justify-between text-xs text-gray-500 mb-2">
-              <span class="uppercase tracking-wide text-[0.65rem] text-gray-500">
-                Streamable?
-              </span>
-              <span
-                class="stream-health text-lg"
-                aria-live="polite"
-                aria-label="Checking stream availability"
-                title="Checking stream availability"
-              >
-                🟦
-              </span>
-            </div>
             <!-- Title triggers the video modal as well -->
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
@@ -2594,8 +2648,8 @@ class bitvidApp {
               </div>
               ${gearMenu}
             </div>
-            ${urlStatusHtml}
-            ${torrentBadge}
+            ${connectionBadgesHtml}
+            ${torrentWarningHtml}
           </div>
         </div>
       `;
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 8922b649..0292ba96 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -367,9 +367,22 @@ async function loadUserVideos(pubkey) {
         typeof video.url === "string" ? video.url : "";
       const trimmedUrl = playbackUrl ? playbackUrl.trim() : "";
       const playbackMagnet = rawMagnet || legacyInfoHash || "";
-      const urlStatusHtml = trimmedUrl
-        ? app.getUrlHealthPlaceholderMarkup()
+      const magnetSupported = app.isMagnetUriSupported(playbackMagnet);
+      const urlBadgeHtml = trimmedUrl
+        ? app.getUrlHealthPlaceholderMarkup({ includeMargin: false })
         : "";
+      const torrentHealthBadgeHtml =
+        magnetSupported && playbackMagnet
+          ? app.getTorrentHealthBadgeMarkup({ includeMargin: false })
+          : "";
+      const connectionBadgesHtml =
+        urlBadgeHtml || torrentHealthBadgeHtml
+          ? `
+            <div class="mt-3 flex flex-wrap items-center gap-2">
+              ${urlBadgeHtml}${torrentHealthBadgeHtml}
+            </div>
+          `
+          : "";
 
       cardEl.innerHTML = `
         <div
@@ -403,7 +416,7 @@ async function loadUserVideos(pubkey) {
             </div>
             ${gearMenu}
           </div>
-          ${urlStatusHtml}
+          ${connectionBadgesHtml}
         </div>
       `;
 
diff --git a/js/gridHealth.js b/js/gridHealth.js
index c05ba294..be1f976d 100644
--- a/js/gridHealth.js
+++ b/js/gridHealth.js
@@ -54,46 +54,82 @@ function toVisual(health) {
   return "noresp";
 }
 
-function formatCount(health) {
-  if (!health || !Number.isFinite(health.seeders) || health.seeders <= 0) {
-    return "";
-  }
-  return ` (${health.seeders})`;
-}
-
 function setBadge(card, visual, health) {
-  const el = card.querySelector(".stream-health");
-  if (!el) {
+  const badge = card.querySelector(".torrent-health-badge");
+  if (!badge) {
     return;
   }
+  const hadMargin = badge.classList.contains("mt-3");
+
+  const baseClasses = [
+    "torrent-health-badge",
+    "text-xs",
+    "font-semibold",
+    "px-2",
+    "py-1",
+    "rounded",
+    "inline-flex",
+    "items-center",
+    "gap-1",
+    "transition-colors",
+    "duration-200",
+  ];
+  if (hadMargin) {
+    baseClasses.unshift("mt-3");
+  }
+  badge.className = baseClasses.join(" ");
+
   const map = {
     good: {
-      text: "🟢",
-      aria: "Streamable: seeders available",
+      icon: "✅",
+      aria: "WebTorrent fallback ready",
+      classes: ["bg-green-900", "text-green-200"],
+      role: "status",
     },
     none: {
-      text: "🟡",
+      icon: "⚠️",
       aria: "No seeders reported by trackers",
+      classes: ["bg-amber-900", "text-amber-200"],
+      role: "status",
     },
     noresp: {
-      text: "⚫",
+      icon: "❌",
       aria: "No tracker response",
+      classes: ["bg-red-900", "text-red-200"],
+      role: "alert",
     },
     checking: {
-      text: "🟦",
-      aria: "Checking stream availability",
+      icon: "⏳",
+      aria: "Checking Torrent availability",
+      classes: ["bg-gray-800", "text-gray-300"],
+      role: "status",
     },
     unknown: {
-      text: "⚪",
-      aria: "Unknown stream availability",
+      icon: "⚠️",
+      aria: "Torrent availability unknown",
+      classes: ["bg-amber-900", "text-amber-200"],
+      role: "status",
     },
   };
+
   const entry = map[visual] || map.unknown;
-  const countText = formatCount(health);
-  el.textContent = `${entry.text}${countText}`;
-  el.setAttribute("aria-label", countText ? `${entry.aria}${countText}` : entry.aria);
-  el.setAttribute("title", countText ? `${entry.aria}${countText}` : entry.aria);
-  el.dataset.streamHealthState = visual;
+  entry.classes.forEach((cls) => badge.classList.add(cls));
+
+  const seederCount =
+    health && Number.isFinite(health.seeders) && health.seeders > 0
+      ? health.seeders
+      : null;
+  const countText = seederCount ? ` (${seederCount})` : "";
+  const ariaCount = seederCount ? ` with ${seederCount} seeders` : "";
+
+  const iconPrefix = entry.icon ? `${entry.icon} ` : "";
+  badge.textContent = `${iconPrefix}Torrent${countText}`;
+  const ariaLabel = `${entry.aria}${ariaCount}`;
+  badge.setAttribute("aria-label", ariaLabel);
+  badge.setAttribute("title", ariaLabel);
+  badge.setAttribute("aria-live", "polite");
+  badge.setAttribute("role", entry.role);
+  badge.dataset.streamHealthState = visual;
 }
 
 function applyHealth(card, health) {
diff --git a/js/subscriptions.js b/js/subscriptions.js
index 50ed39cb..68b42102 100644
--- a/js/subscriptions.js
+++ b/js/subscriptions.js
@@ -388,9 +388,26 @@ class SubscriptionsManager {
       const magnetCandidate = trimmedMagnet || legacyInfoHash;
       const playbackMagnet = magnetCandidate;
       const magnetProvided = magnetCandidate.length > 0;
-      const urlStatusHtml = trimmedUrl
-        ? window.app?.getUrlHealthPlaceholderMarkup?.() ?? ""
+      const magnetSupported =
+        window.app?.isMagnetUriSupported?.(magnetCandidate) ?? false;
+      const urlBadgeHtml = trimmedUrl
+        ? window.app?.getUrlHealthPlaceholderMarkup?.({ includeMargin: false }) ??
+          ""
         : "";
+      const torrentHealthBadgeHtml =
+        magnetProvided && magnetSupported
+          ? window.app?.getTorrentHealthBadgeMarkup?.({
+              includeMargin: false,
+            }) ?? ""
+          : "";
+      const connectionBadgesHtml =
+        urlBadgeHtml || torrentHealthBadgeHtml
+          ? `
+            <div class="mt-3 flex flex-wrap items-center gap-2">
+              ${urlBadgeHtml}${torrentHealthBadgeHtml}
+            </div>
+          `
+          : "";
       const cardHtml = `
         <div class="video-card bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ${highlightClass}">
           <a
@@ -409,19 +426,6 @@ class SubscriptionsManager {
             </div>
           </a>
           <div class="p-4">
-            <div class="flex items-center justify-between text-xs text-gray-500 mb-2">
-              <span class="uppercase tracking-wide text-[0.65rem] text-gray-500">
-                Streamable?
-              </span>
-              <span
-                class="stream-health text-lg"
-                aria-live="polite"
-                aria-label="Checking stream availability"
-                title="Checking stream availability"
-              >
-                🟦
-              </span>
-            </div>
             <h3
               class="text-lg font-bold text-white line-clamp-2 hover:text-blue-400 cursor-pointer mb-3"
               data-video-id="${video.id}"
@@ -454,7 +458,7 @@ class SubscriptionsManager {
               </div>
               ${gearMenu}
             </div>
-            ${urlStatusHtml}
+            ${connectionBadgesHtml}
           </div>
         </div>
       `;

From 836509e2f01bfe5815d563dfc54367ed6ed769f8 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 19:52:06 -0400
Subject: [PATCH 098/101] Fix torrent badge alignment and channel grid styling

---
 js/app.js            | 18 ++++++++++++++++--
 js/channelProfile.js | 31 +++++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/js/app.js b/js/app.js
index ffbe72ba..048001be 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2241,13 +2241,27 @@ class bitvidApp {
         ? "⚠️ CDN timed out"
         : "Checking hosted URL…");
 
+    const hadMargin = badgeEl.classList.contains("mt-3");
+
     badgeEl.dataset.urlHealthState = status;
     badgeEl.setAttribute("aria-live", "polite");
     badgeEl.setAttribute("role", status === "offline" ? "alert" : "status");
     badgeEl.textContent = message;
 
-    badgeEl.className =
-      "url-health-badge mt-3 text-xs font-semibold px-2 py-1 rounded transition-colors duration-200";
+    const baseClasses = [
+      "url-health-badge",
+      "text-xs",
+      "font-semibold",
+      "px-2",
+      "py-1",
+      "rounded",
+      "transition-colors",
+      "duration-200",
+    ];
+    if (hadMargin) {
+      baseClasses.unshift("mt-3");
+    }
+    badgeEl.className = baseClasses.join(" ");
 
     if (status === "healthy") {
       badgeEl.classList.add(
diff --git a/js/channelProfile.js b/js/channelProfile.js
index 0292ba96..1a5037cb 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -6,6 +6,7 @@ import {
 } from "./nostr.js";
 import { app } from "./app.js";
 import { subscriptions } from "./subscriptions.js"; // <-- NEW import
+import { attachHealthBadges } from "./gridHealth.js";
 import { initialBlacklist, initialWhitelist } from "./lists.js";
 import { isWhitelistEnabled } from "./config.js";
 
@@ -350,6 +351,7 @@ async function loadUserVideos(pubkey) {
 
       const cardEl = document.createElement("div");
       cardEl.classList.add(
+        "video-card",
         "bg-gray-900",
         "rounded-lg",
         "overflow-hidden",
@@ -361,18 +363,22 @@ async function loadUserVideos(pubkey) {
 
       const rawMagnet =
         typeof video.magnet === "string" ? video.magnet : "";
+      const trimmedMagnet = rawMagnet ? rawMagnet.trim() : "";
       const legacyInfoHash =
         typeof video.infoHash === "string" ? video.infoHash.trim() : "";
       const playbackUrl =
         typeof video.url === "string" ? video.url : "";
       const trimmedUrl = playbackUrl ? playbackUrl.trim() : "";
-      const playbackMagnet = rawMagnet || legacyInfoHash || "";
+      const playbackMagnet = trimmedMagnet || legacyInfoHash || "";
+      const magnetProvided = playbackMagnet.length > 0;
       const magnetSupported = app.isMagnetUriSupported(playbackMagnet);
+      const showUnsupportedTorrentBadge =
+        !trimmedUrl && magnetProvided && !magnetSupported;
       const urlBadgeHtml = trimmedUrl
         ? app.getUrlHealthPlaceholderMarkup({ includeMargin: false })
         : "";
       const torrentHealthBadgeHtml =
-        magnetSupported && playbackMagnet
+        magnetSupported && magnetProvided
           ? app.getTorrentHealthBadgeMarkup({ includeMargin: false })
           : "";
       const connectionBadgesHtml =
@@ -420,6 +426,20 @@ async function loadUserVideos(pubkey) {
         </div>
       `;
 
+      if (showUnsupportedTorrentBadge) {
+        cardEl.dataset.torrentSupported = "false";
+      } else if (magnetProvided && magnetSupported) {
+        cardEl.dataset.torrentSupported = "true";
+      } else if (cardEl.dataset.torrentSupported) {
+        delete cardEl.dataset.torrentSupported;
+      }
+
+      if (magnetProvided) {
+        cardEl.dataset.magnet = playbackMagnet;
+      } else if (cardEl.dataset.magnet) {
+        delete cardEl.dataset.magnet;
+      }
+
       // Leave the data-play-* attributes empty in the template markup so the raw
       // URL/magnet strings can be assigned after parsing without HTML entity
       // escaping, keeping this renderer consistent with app.js. The stored URL is
@@ -437,6 +457,11 @@ async function loadUserVideos(pubkey) {
         }
 
         el.dataset.playMagnet = playbackMagnet || "";
+        if (magnetProvided) {
+          el.dataset.torrentSupported = magnetSupported ? "true" : "false";
+        } else if (el.dataset.torrentSupported) {
+          delete el.dataset.torrentSupported;
+        }
       });
 
       if (trimmedUrl) {
@@ -455,6 +480,8 @@ async function loadUserVideos(pubkey) {
 
     container.appendChild(fragment);
 
+    attachHealthBadges(container);
+
     window.app.videoList = container;
     window.app.attachVideoListHandler();
 

From 54a6e052851284645e88b9fb2457c3b885b24a6a Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 20:01:23 -0400
Subject: [PATCH 099/101] Allow WebTorrent playback to respect volume
 preference

---
 js/webtorrent.js | 46 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/js/webtorrent.js b/js/webtorrent.js
index 90b272fc..bd724f43 100644
--- a/js/webtorrent.js
+++ b/js/webtorrent.js
@@ -307,6 +307,26 @@ export class TorrentClient {
     }
   }
 
+  attemptAutoplay(videoElement, context = "webtorrent") {
+    if (!videoElement || typeof videoElement.play !== "function") {
+      return;
+    }
+
+    videoElement
+      .play()
+      .catch((err) => {
+        this.log(`Autoplay failed (${context} path):`, err);
+        if (videoElement.muted) {
+          return;
+        }
+        this.log(`Retrying with muted autoplay (${context} path).`);
+        videoElement.muted = true;
+        videoElement.play().catch((err2) => {
+          this.log(`Muted autoplay also failed (${context} path):`, err2);
+        });
+      });
+  }
+
   // Handle Chrome-based browsers
   handleChromeTorrent(torrent, videoElement, resolve, reject) {
     // Prune demo web seeds/trackers that chronically trip Chromium CORS and
@@ -342,18 +362,19 @@ export class TorrentClient {
     }
 
     // Satisfy autoplay requirements and keep cross-origin chunks usable (e.g., for snapshots).
-    videoElement.muted = true;
     videoElement.crossOrigin = "anonymous";
 
     videoElement.addEventListener("error", (e) => {
       this.log("Video error:", e.target.error);
     });
 
-    videoElement.addEventListener("canplay", () => {
-      videoElement.play().catch((err) => {
-        this.log("Autoplay failed:", err);
-      });
-    });
+    videoElement.addEventListener(
+      "canplay",
+      () => {
+        this.attemptAutoplay(videoElement, "chrome");
+      },
+      { once: true }
+    );
 
     try {
       file.streamTo(videoElement);
@@ -380,18 +401,19 @@ export class TorrentClient {
     }
 
     // Satisfy autoplay requirements and keep cross-origin chunks usable (e.g., for snapshots).
-    videoElement.muted = true;
     videoElement.crossOrigin = "anonymous";
 
     videoElement.addEventListener("error", (e) => {
       this.log("Video error (Firefox path):", e.target.error);
     });
 
-    videoElement.addEventListener("canplay", () => {
-      videoElement.play().catch((err) => {
-        this.log("Autoplay failed:", err);
-      });
-    });
+    videoElement.addEventListener(
+      "canplay",
+      () => {
+        this.attemptAutoplay(videoElement, "firefox");
+      },
+      { once: true }
+    );
 
     try {
       file.streamTo(videoElement, { highWaterMark: 256 * 1024 });

From 27e45f56b5b9577479cc579b2ee0c1f5d107ed0d Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 20:16:05 -0400
Subject: [PATCH 100/101] Add zap button to video modal

---
 components/video-modal.html | 13 +++++++++++++
 js/app.js                   |  7 +++++++
 2 files changed, 20 insertions(+)

diff --git a/components/video-modal.html b/components/video-modal.html
index 5b08e61a..56df5588 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -51,6 +51,19 @@
                 class="icon-image"
               />
             </button>
+            <!-- Zap Button (circular) -->
+            <button
+              id="modalZapBtn"
+              type="button"
+              class="icon-button"
+              aria-label="Send a zap"
+            >
+              <img
+                src="assets/svg/lightning-bolt.svg"
+                alt="Zap"
+                class="icon-image"
+              />
+            </button>
             <!-- Share Button (circular) -->
             <button id="shareBtn" class="icon-button">
               <img
diff --git a/js/app.js b/js/app.js
index 048001be..be73a127 100644
--- a/js/app.js
+++ b/js/app.js
@@ -480,6 +480,7 @@ class bitvidApp {
     this.creatorNpub = null;
     this.copyMagnetBtn = null;
     this.shareBtn = null;
+    this.modalZapBtn = null;
     this.modalPosterCleanup = null;
     this.cleanupPromise = null;
 
@@ -845,6 +846,7 @@ class bitvidApp {
     // Copy/Share buttons
     this.copyMagnetBtn = document.getElementById("copyMagnetBtn") || null;
     this.shareBtn = document.getElementById("shareBtn") || null;
+    this.modalZapBtn = document.getElementById("modalZapBtn") || null;
 
     // Attach existing event listeners for copy/share
     if (this.copyMagnetBtn) {
@@ -869,6 +871,11 @@ class bitvidApp {
           .catch(() => this.showError("Failed to copy the link."));
       });
     }
+    if (this.modalZapBtn) {
+      this.modalZapBtn.addEventListener("click", () => {
+        window.alert("Zaps coming soon.");
+      });
+    }
 
     // Add click handlers for avatar and name => channel profile
     if (this.creatorAvatar) {

From bc085ad3beacd12ff5acdc6df4ad7f854c41fc86 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 20:31:25 -0400
Subject: [PATCH 101/101] Add WebTorrent probe for grid health badges

---
 js/gridHealth.js | 382 +++++++++++++++++++++++++++++++++++++----------
 js/webtorrent.js | 289 +++++++++++++++++++++++++++++++++++
 2 files changed, 590 insertions(+), 81 deletions(-)

diff --git a/js/gridHealth.js b/js/gridHealth.js
index be1f976d..11815a6d 100644
--- a/js/gridHealth.js
+++ b/js/gridHealth.js
@@ -1,13 +1,230 @@
 import { infoHashFromMagnet } from "./magnets.js";
-import {
-  getDefaultHealth,
-  getHealthCached,
-  queueHealthCheck,
-} from "./healthService.js";
+import { TorrentClient, torrentClient } from "./webtorrent.js";
 
 const containerState = new WeakMap();
 const ROOT_MARGIN = "200px 0px";
 
+function now() {
+  return Date.now();
+}
+
+function getCacheEntry(key) {
+  if (!key) {
+    return null;
+  }
+  const entry = probeCache.get(key);
+  if (!entry) {
+    return null;
+  }
+  if (now() - entry.ts > PROBE_CACHE_TTL_MS) {
+    probeCache.delete(key);
+    return null;
+  }
+  return entry.value;
+}
+
+function setCacheEntry(key, value) {
+  if (!key) {
+    return;
+  }
+  probeCache.set(key, { ts: now(), value });
+}
+
+function formatTime(ts) {
+  if (!Number.isFinite(ts)) {
+    return "";
+  }
+  try {
+    return new Date(ts).toLocaleTimeString([], { hour12: false });
+  } catch (err) {
+    return new Date(ts).toLocaleTimeString();
+  }
+}
+
+function buildTooltip({ peers = 0, checkedAt, reason } = {}) {
+  const parts = [];
+  if (Number.isFinite(peers)) {
+    parts.push(`Peers: ${Math.max(0, peers)}`);
+  }
+  if (Number.isFinite(checkedAt)) {
+    const formatted = formatTime(checkedAt);
+    if (formatted) {
+      parts.push(`Checked ${formatted}`);
+    }
+  }
+  if (typeof reason === "string" && reason && reason !== "peer") {
+    let normalizedReason;
+    if (reason === "timeout") {
+      normalizedReason = "Timed out";
+    } else if (reason === "no-trackers") {
+      normalizedReason = "No WSS trackers";
+    } else if (reason === "invalid") {
+      normalizedReason = "Invalid magnet";
+    } else {
+      normalizedReason = reason.charAt(0).toUpperCase() + reason.slice(1);
+    }
+    parts.push(normalizedReason);
+  }
+  if (!parts.length) {
+    return "WebTorrent status unknown";
+  }
+  return `WebTorrent • ${parts.join(" • ")}`;
+}
+
+function normalizeResult(result) {
+  const fallback = {
+    healthy: false,
+    peers: 0,
+    reason: "error",
+    appendedTrackers: false,
+    hasProbeTrackers: false,
+    usedTrackers: Array.isArray(TorrentClient.PROBE_TRACKERS)
+      ? [...TorrentClient.PROBE_TRACKERS]
+      : [],
+    durationMs: 0,
+  };
+  if (!result || typeof result !== "object") {
+    return { ...fallback, checkedAt: now() };
+  }
+  const peers = Number.isFinite(result.peers)
+    ? Math.max(0, Number(result.peers))
+    : 0;
+  const healthy = Boolean(result.healthy) && peers > 0;
+  const reason = typeof result.reason === "string" ? result.reason : "error";
+  return {
+    healthy,
+    peers: healthy ? Math.max(1, peers) : peers,
+    reason,
+    appendedTrackers: Boolean(result.appendedTrackers),
+    hasProbeTrackers:
+      typeof result.hasProbeTrackers === "boolean"
+        ? result.hasProbeTrackers
+        : healthy || Boolean(result.appendedTrackers),
+    usedTrackers: Array.isArray(result.usedTrackers)
+      ? result.usedTrackers.slice()
+      : fallback.usedTrackers,
+    durationMs: Number.isFinite(result.durationMs)
+      ? Math.max(0, Number(result.durationMs))
+      : 0,
+    checkedAt: now(),
+  };
+}
+
+function queueProbe(magnet, cacheKey) {
+  if (!magnet) {
+    return Promise.resolve(null);
+  }
+
+  const cached = getCacheEntry(cacheKey);
+  if (cached) {
+    return Promise.resolve(cached);
+  }
+
+  if (probeInflight.has(cacheKey)) {
+    return probeInflight.get(cacheKey);
+  }
+
+  const job = probeQueue
+    .run(() =>
+      torrentClient
+        .probePeers(magnet, {
+          timeoutMs: PROBE_TIMEOUT_MS,
+          maxWebConns: 2,
+          polls: PROBE_POLL_COUNT,
+        })
+        .catch((err) => ({
+          healthy: false,
+          peers: 0,
+          reason: "error",
+          error: err,
+          appendedTrackers: false,
+          hasProbeTrackers: false,
+        }))
+    )
+    .then((result) => {
+      const normalized = normalizeResult(result);
+      if (cacheKey) {
+        setCacheEntry(cacheKey, normalized);
+      }
+      return normalized;
+    })
+    .finally(() => {
+      if (cacheKey) {
+        probeInflight.delete(cacheKey);
+      }
+    });
+
+  if (cacheKey) {
+    probeInflight.set(cacheKey, job);
+  }
+
+  return job;
+}
+
+const PROBE_CACHE_TTL_MS = 5 * 60 * 1000;
+const PROBE_TIMEOUT_MS = 8000;
+const PROBE_CONCURRENCY = 3;
+const PROBE_POLL_COUNT = 3;
+
+class ProbeQueue {
+  constructor(max = 2) {
+    this.max = Math.max(1, Number(max) || 1);
+    this.running = 0;
+    this.queue = [];
+  }
+
+  run(task) {
+    return new Promise((resolve, reject) => {
+      this.queue.push({ task, resolve, reject });
+      this.drain();
+    });
+  }
+
+  drain() {
+    if (this.running >= this.max) {
+      return;
+    }
+    const job = this.queue.shift();
+    if (!job) {
+      return;
+    }
+    this.running += 1;
+    let finished = false;
+    const finalize = () => {
+      if (finished) {
+        return;
+      }
+      finished = true;
+      this.running -= 1;
+      this.drain();
+    };
+
+    let result;
+    try {
+      result = job.task();
+    } catch (err) {
+      job.reject(err);
+      finalize();
+      return;
+    }
+
+    Promise.resolve(result)
+      .then((value) => {
+        job.resolve(value);
+      })
+      .catch((err) => {
+        job.reject(err);
+      })
+      .finally(() => {
+        finalize();
+      });
+  }
+}
+
+const probeQueue = new ProbeQueue(PROBE_CONCURRENCY);
+const probeCache = new Map();
+const probeInflight = new Map();
+
 function ensureState(container) {
   let state = containerState.get(container);
   if (state) {
@@ -38,23 +255,7 @@ function ensureState(container) {
   return state;
 }
 
-function toVisual(health) {
-  if (!health) {
-    return "unknown";
-  }
-  if (health.ok && health.seeders > 0) {
-    return "good";
-  }
-  if (health.responded) {
-    if (health.seeders > 0) {
-      return "good";
-    }
-    return "none";
-  }
-  return "noresp";
-}
-
-function setBadge(card, visual, health) {
+function setBadge(card, state, details) {
   const badge = card.querySelector(".torrent-health-badge");
   if (!badge) {
     return;
@@ -80,65 +281,61 @@ function setBadge(card, visual, health) {
   badge.className = baseClasses.join(" ");
 
   const map = {
-    good: {
-      icon: "✅",
-      aria: "WebTorrent fallback ready",
+    healthy: {
+      icon: "🟢",
+      aria: "WebTorrent peers available",
       classes: ["bg-green-900", "text-green-200"],
       role: "status",
     },
-    none: {
-      icon: "⚠️",
-      aria: "No seeders reported by trackers",
-      classes: ["bg-amber-900", "text-amber-200"],
-      role: "status",
-    },
-    noresp: {
-      icon: "❌",
-      aria: "No tracker response",
+    unhealthy: {
+      icon: "🔴",
+      aria: "WebTorrent peers unavailable",
       classes: ["bg-red-900", "text-red-200"],
       role: "alert",
     },
     checking: {
       icon: "⏳",
-      aria: "Checking Torrent availability",
+      aria: "Checking WebTorrent peers",
       classes: ["bg-gray-800", "text-gray-300"],
       role: "status",
     },
     unknown: {
-      icon: "⚠️",
-      aria: "Torrent availability unknown",
-      classes: ["bg-amber-900", "text-amber-200"],
+      icon: "⚪",
+      aria: "WebTorrent status unknown",
+      classes: ["bg-gray-800", "text-gray-300"],
       role: "status",
     },
   };
 
-  const entry = map[visual] || map.unknown;
+  const entry = map[state] || map.unknown;
   entry.classes.forEach((cls) => badge.classList.add(cls));
 
-  const seederCount =
-    health && Number.isFinite(health.seeders) && health.seeders > 0
-      ? health.seeders
-      : null;
-  const countText = seederCount ? ` (${seederCount})` : "";
-  const ariaCount = seederCount ? ` with ${seederCount} seeders` : "";
+  const peers =
+    details && Number.isFinite(details.peers)
+      ? Math.max(0, Number(details.peers))
+      : 0;
+  const peersText = state === "healthy" && peers > 0 ? ` (${peers})` : "";
 
   const iconPrefix = entry.icon ? `${entry.icon} ` : "";
-  badge.textContent = `${iconPrefix}Torrent${countText}`;
-  const ariaLabel = `${entry.aria}${ariaCount}`;
-  badge.setAttribute("aria-label", ariaLabel);
-  badge.setAttribute("title", ariaLabel);
-  badge.setAttribute("aria-live", "polite");
+  badge.textContent = `${iconPrefix}WebTorrent${peersText}`;
+  const tooltip =
+    state === "checking" || state === "unknown"
+      ? entry.aria
+      : buildTooltip({
+          peers,
+          checkedAt: details?.checkedAt,
+          reason: details?.reason,
+        });
+  badge.setAttribute("aria-label", tooltip);
+  badge.setAttribute("title", tooltip);
+  badge.setAttribute("aria-live", entry.role === "alert" ? "assertive" : "polite");
   badge.setAttribute("role", entry.role);
-  badge.dataset.streamHealthState = visual;
-}
-
-function applyHealth(card, health) {
-  if (!health) {
-    setBadge(card, "unknown");
-    return;
+  badge.dataset.streamHealthState = state;
+  if (Number.isFinite(peers)) {
+    badge.dataset.streamHealthPeers = String(peers);
+  } else if (badge.dataset.streamHealthPeers) {
+    delete badge.dataset.streamHealthPeers;
   }
-  const visual = toVisual(health);
-  setBadge(card, visual, health);
 }
 
 function handleCardVisible({ card, pendingByCard }) {
@@ -157,32 +354,55 @@ function handleCardVisible({ card, pendingByCard }) {
     return;
   }
 
-  const cached = getHealthCached(infoHash);
-  if (cached) {
-    applyHealth(card, cached);
-    return;
-  }
-
   if (pendingByCard.has(card)) {
     return;
   }
 
-  setBadge(card, "checking", getDefaultHealth());
-  const pending = queueHealthCheck(magnet).then((health) => {
-    pendingByCard.delete(card);
-    if (!card.isConnected) {
-      return;
-    }
-    applyHealth(card, health);
-  });
-  pending.catch(() => {
-    pendingByCard.delete(card);
-    if (!card.isConnected) {
-      return;
-    }
-    setBadge(card, "noresp");
-  });
-  pendingByCard.set(card, pending);
+  const cached = getCacheEntry(infoHash);
+  if (cached) {
+    const cachedState = cached.healthy
+      ? "healthy"
+      : cached.hasProbeTrackers
+      ? "unhealthy"
+      : "unknown";
+    setBadge(card, cachedState, cached);
+    return;
+  }
+
+  setBadge(card, "checking");
+
+  const probePromise = queueProbe(magnet, infoHash);
+
+  pendingByCard.set(card, probePromise);
+
+  probePromise
+    .then((result) => {
+      pendingByCard.delete(card);
+      if (!card.isConnected) {
+        return;
+      }
+      if (!result) {
+        setBadge(card, "unknown");
+        return;
+      }
+      if (!result.hasProbeTrackers) {
+        setBadge(card, "unknown", result);
+        return;
+      }
+      if (result.healthy) {
+        setBadge(card, "healthy", result);
+        return;
+      }
+      setBadge(card, "unhealthy", result);
+    })
+    .catch((err) => {
+      console.warn("[gridHealth] probe failed", err);
+      pendingByCard.delete(card);
+      if (!card.isConnected) {
+        return;
+      }
+      setBadge(card, "unhealthy");
+    });
 }
 
 export function attachHealthBadges(container) {
diff --git a/js/webtorrent.js b/js/webtorrent.js
index bd724f43..ee8aac8b 100644
--- a/js/webtorrent.js
+++ b/js/webtorrent.js
@@ -2,11 +2,145 @@
 
 import WebTorrent from "./webtorrent.min.js";
 
+const DEFAULT_PROBE_TRACKERS = Object.freeze([
+  "wss://tracker.btorrent.xyz",
+  "wss://tracker.openwebtorrent.com",
+]);
+
+function decodeComponentSafe(value) {
+  if (typeof value !== "string") {
+    return "";
+  }
+  try {
+    return decodeURIComponent(value);
+  } catch (err) {
+    return value;
+  }
+}
+
+function normalizeTrackerList(trackers) {
+  const normalized = [];
+  const seen = new Set();
+  if (!Array.isArray(trackers)) {
+    return normalized;
+  }
+  trackers.forEach((tracker) => {
+    if (typeof tracker !== "string") {
+      return;
+    }
+    const trimmed = tracker.trim();
+    if (!trimmed || !/^wss:\/\//i.test(trimmed)) {
+      return;
+    }
+    const lower = trimmed.toLowerCase();
+    if (seen.has(lower)) {
+      return;
+    }
+    seen.add(lower);
+    normalized.push(trimmed);
+  });
+  return normalized;
+}
+
+function appendProbeTrackers(magnetURI, trackers) {
+  if (typeof magnetURI !== "string") {
+    return { magnet: "", appended: false, hasProbeTrackers: false };
+  }
+
+  const trimmedMagnet = magnetURI.trim();
+  if (!trimmedMagnet) {
+    return { magnet: "", appended: false, hasProbeTrackers: false };
+  }
+
+  const probeTrackers = normalizeTrackerList(trackers);
+  if (!probeTrackers.length) {
+    return {
+      magnet: trimmedMagnet,
+      appended: false,
+      hasProbeTrackers: false,
+    };
+  }
+
+  const trackerSet = new Set();
+  const [withoutFragment, fragment = ""] = trimmedMagnet.split("#", 2);
+  const [, queryPart = ""] = withoutFragment.split("?", 2);
+
+  if (queryPart) {
+    queryPart
+      .split("&")
+      .map((segment) => segment.trim())
+      .filter(Boolean)
+      .forEach((segment) => {
+        const [rawKey, rawValue = ""] = segment.split("=", 2);
+        if (!rawKey || rawKey.trim().toLowerCase() !== "tr") {
+          return;
+        }
+        const decoded = decodeComponentSafe(rawValue).trim().toLowerCase();
+        if (decoded) {
+          trackerSet.add(decoded);
+        }
+      });
+  }
+
+  const normalizedProbe = probeTrackers.map((url) => url.toLowerCase());
+  const hadProbeTracker = normalizedProbe.some((url) => trackerSet.has(url));
+
+  const toAppend = [];
+  probeTrackers.forEach((tracker, index) => {
+    const normalizedTracker = normalizedProbe[index];
+    if (trackerSet.has(normalizedTracker)) {
+      return;
+    }
+    trackerSet.add(normalizedTracker);
+    toAppend.push(`tr=${encodeURIComponent(tracker)}`);
+  });
+
+  if (!toAppend.length) {
+    return {
+      magnet: trimmedMagnet,
+      appended: false,
+      hasProbeTrackers: hadProbeTracker,
+    };
+  }
+
+  const separator = queryPart ? "&" : "?";
+  const augmented = `${withoutFragment}${separator}${toAppend.join("&")}`;
+  const finalMagnet = fragment
+    ? `${augmented}#${fragment}`
+    : augmented;
+
+  return {
+    magnet: finalMagnet,
+    appended: true,
+    hasProbeTrackers: true,
+  };
+}
+
+function normalizeNumber(value, fallback = 0) {
+  const coerced = Number(value);
+  if (Number.isFinite(coerced)) {
+    return coerced;
+  }
+  return fallback;
+}
+
+function toError(err) {
+  if (err instanceof Error) {
+    return err;
+  }
+  try {
+    return new Error(String(err));
+  } catch (stringifyError) {
+    return new Error("Unknown error");
+  }
+}
+
 export class TorrentClient {
   constructor() {
     // Reusable objects and flags
     this.client = null;
     this.currentTorrent = null;
+    this.probeClient = null;
 
     // Service worker registration is cached
     this.swRegistration = null;
@@ -16,6 +150,155 @@ export class TorrentClient {
     this.TIMEOUT_DURATION = 60000;
   }
 
+  ensureClientForProbe() {
+    if (!this.probeClient) {
+      this.probeClient = new WebTorrent();
+    }
+    return this.probeClient;
+  }
+
+  async probePeers(
+    magnetURI,
+    { timeoutMs = 8000, maxWebConns = 2, polls = 3 } = {}
+  ) {
+    const magnet = typeof magnetURI === "string" ? magnetURI.trim() : "";
+    if (!magnet) {
+      return {
+        healthy: false,
+        peers: 0,
+        reason: "invalid",
+        appendedTrackers: false,
+        hasProbeTrackers: false,
+        usedTrackers: [...TorrentClient.PROBE_TRACKERS],
+        durationMs: 0,
+      };
+    }
+
+    const trackers = normalizeTrackerList(TorrentClient.PROBE_TRACKERS);
+    const { magnet: augmentedMagnet, appended, hasProbeTrackers } =
+      appendProbeTrackers(magnet, trackers);
+
+    if (!hasProbeTrackers) {
+      return {
+        healthy: false,
+        peers: 0,
+        reason: "no-trackers",
+        appendedTrackers: false,
+        hasProbeTrackers: false,
+        usedTrackers: trackers,
+        durationMs: 0,
+      };
+    }
+
+    const client = this.ensureClientForProbe();
+    const safeTimeout = Math.max(0, normalizeNumber(timeoutMs, 8000));
+    const safePolls = Math.max(1, Math.floor(normalizeNumber(polls, 3)));
+    const safeMaxWebConns = Math.max(1, Math.floor(normalizeNumber(maxWebConns, 2)));
+    const pollInterval = Math.max(
+      250,
+      Math.floor(safeTimeout / Math.max(1, safePolls))
+    );
+
+    const startedAt =
+      typeof performance !== "undefined" && performance?.now
+        ? performance.now()
+        : Date.now();
+
+    return new Promise((resolve) => {
+      let settled = false;
+      let torrent = null;
+      let timeoutId = null;
+      let pollId = null;
+
+      const finalize = (overrides = {}) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+        if (pollId) {
+          clearInterval(pollId);
+          pollId = null;
+        }
+        if (torrent) {
+          try {
+            torrent.destroy({ destroyStore: true });
+          } catch (err) {
+            // ignore
+          }
+        }
+
+        const endedAt =
+          typeof performance !== "undefined" && performance?.now
+            ? performance.now()
+            : Date.now();
+
+        resolve({
+          healthy: false,
+          peers: 0,
+          reason: "timeout",
+          appendedTrackers: appended,
+          hasProbeTrackers,
+          usedTrackers: trackers,
+          durationMs: Math.max(0, endedAt - startedAt),
+          ...overrides,
+        });
+      };
+
+      try {
+        torrent = client.add(augmentedMagnet, {
+          announce: trackers,
+          maxWebConns: safeMaxWebConns,
+        });
+      } catch (err) {
+        finalize({
+          reason: "error",
+          error: toError(err),
+          peers: 0,
+        });
+        return;
+      }
+
+      const settleHealthy = () => {
+        const peers = Math.max(1, Math.floor(normalizeNumber(torrent?.numPeers, 1)));
+        finalize({ healthy: true, peers, reason: "peer" });
+      };
+
+      torrent.once("wire", settleHealthy);
+
+      torrent.once("error", (err) => {
+        finalize({
+          healthy: false,
+          reason: "error",
+          error: toError(err),
+          peers: Math.max(0, Math.floor(normalizeNumber(torrent?.numPeers, 0))),
+        });
+      });
+
+      if (safeTimeout > 0) {
+        timeoutId = setTimeout(() => {
+          finalize({
+            healthy: false,
+            peers: Math.max(0, Math.floor(normalizeNumber(torrent?.numPeers, 0))),
+          });
+        }, safeTimeout);
+      }
+
+      pollId = setInterval(() => {
+        if (!torrent || settled) {
+          return;
+        }
+        const peers = Math.max(0, Math.floor(normalizeNumber(torrent.numPeers, 0)));
+        if (peers > 0) {
+          finalize({ healthy: true, peers, reason: "peer" });
+        }
+      }, pollInterval);
+    });
+  }
+
   log(msg) {
     console.log(msg);
   }
@@ -502,6 +785,10 @@ export class TorrentClient {
         await this.client.destroy();
         this.client = null;
       }
+      if (this.probeClient) {
+        await this.probeClient.destroy();
+        this.probeClient = null;
+      }
       this.currentTorrent = null;
       this.serverCreated = false;
     } catch (error) {
@@ -510,4 +797,6 @@ export class TorrentClient {
   }
 }
 
+TorrentClient.PROBE_TRACKERS = DEFAULT_PROBE_TRACKERS;
+
 export const torrentClient = new TorrentClient();