Prefer cached stills and stream first frames in the grid

poc/src/media.ts

@@ -391,16 +391,20 @@ export class MediaService {
         const file = this.getMediaFile(scrapeId, itemId);
         if (file) return { kind: "file", ...file };
 
+        const item = this.getMediaItem(scrapeId, itemId);
+        if (!item) return null;
+
+        return { kind: "remote", url: item.play_url ?? item.url };
+    }
+
+    /** Re-fetch the source message for a fresh signed URL. Null when not possible. */
+    async refreshMediaUrl(scrapeId: string, itemId: number): Promise<string | null> {
         const meta = this.engine.get(scrapeId);
         const item = this.getMediaItem(scrapeId, itemId);
         if (!meta || !item) return null;
+        if (meta.backend !== "slopbot" || !meta.guildId || !this.bot) return null;
 
-        if (meta.backend === "slopbot" && meta.guildId && this.bot) {
-            const refreshed = await this.refreshUrls(meta.id, meta.channelId, item);
-            if (refreshed) return { kind: "remote", url: refreshed };
-        }
-
-        return { kind: "remote", url: item.play_url ?? item.url };
+        return this.refreshUrls(meta.id, meta.channelId, item);
     }
 
     /** Re-fetch the source message and update expired URLs. Returns the fresh playable URL. */

poc/src/webui.ts

@@ -789,9 +789,20 @@ export function startWebUi(deps: WebUiDeps): WebUiHandle {
                 return;
             }
 
-            const upstream = await fetch(source.url, {
-                headers: req.headers.range ? { range: String(req.headers.range) } : {}
-            });
+            const rangeHeaders: Record<string, string> = req.headers.range
+                ? { range: String(req.headers.range) }
+                : {};
+            let upstream = await fetch(source.url, { headers: rangeHeaders });
+
+            // The signed CDN URL may have expired; re-fetch the message once and retry.
+            if (!upstream.ok && [403, 404, 410].includes(upstream.status)) {
+                const refreshed = await deps.media.refreshMediaUrl(
+                    String(req.params.scrapeId),
+                    Number(req.params.itemId)
+                );
+                if (refreshed) upstream = await fetch(refreshed, { headers: rangeHeaders });
+            }
+
             if (!upstream.ok && upstream.status !== 206) {
                 throw new HttpError(502, `upstream ${upstream.status}`);
             }