Align torrent badge styling with CDN indicator

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;

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>
       `;

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>
       `;
 

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) {

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>
       `;