Add video poster frames and rework the media status row

poc/public/media.js

@@ -194,8 +194,8 @@
     function renderStatus() {
         const stats = state.stats ?? { total: 0, downloaded: 0, cached: 0, notDownloaded: 0 };
         setStatus(
-            `downloaded ${stats.downloaded}/${stats.total} (images/videos)  |  ` +
-                `cached ${stats.cached}/${stats.notDownloaded} (excludes downloaded)  |  ${state.items.length} loaded`
+            `(Images/Videos) | Downloaded ${stats.downloaded}/${stats.total} | ` +
+                `Cached ${stats.cached}/${stats.total} (excl Downl) | Loaded ${state.items.length}/${stats.total}`
         );
     }
 
@@ -403,12 +403,27 @@
         const source = gridSource(item);
         const visual = item.kind === "image" || item.kind === "gif" || item.kind === "video";
 
-        if (visual && /^(https?:|\/)/.test(source)) {
+        if (visual && /^(https?:|\/)/.test(source) && item.kind !== "video") {
             const img = document.createElement("img");
             img.loading = "lazy";
             img.src = source;
             img.alt = item.kind;
             media.append(img);
+        } else if (item.kind === "video" && /^(https?:|\/)/.test(source)) {
+            // Discord has no server-side video thumbnails; the browser shows the first frame.
+            const video = document.createElement("video");
+            video.preload = "metadata";
+            video.muted = true;
+            video.playsInline = true;
+            video.src = source;
+            video.addEventListener(
+                "loadedmetadata",
+                () => {
+                    if (video.duration) video.currentTime = Math.min(0.1, video.duration / 2);
+                },
+                { once: true }
+            );
+            media.append(video);
         } else {
             media.append(el("span", "vk-media-card-kind", item.kind.toUpperCase()));
         }