14oqjtsnb: Play trending video answers as video with thumbnail fallback

src/components/MinnectMedia.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import type { DiscoverMedia } from "@/lib/discover";
+
+interface Props {
+  media: DiscoverMedia | null;
+  thumbnailUrl: string | null;
+  question: string | null;
+  who: string;
+}
+
+/** Video answers play inline; audio keeps the audio control; no url shows the thumbnail only. */
+export function MinnectMedia({ media, thumbnailUrl, question, who }: Props) {
+  const [videoFailed, setVideoFailed] = useState(false);
+
+  const thumb = thumbnailUrl ? (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img className="minnect-thumb" src={thumbnailUrl} alt={question ? `Thumbnail for: ${question}` : "Minnect thumbnail"} />
+  ) : null;
+
+  if (media?.kind === "video" && !videoFailed) {
+    return (
+      <video
+        className="minnect-thumb minnect-video"
+        controls
+        playsInline
+        preload="none"
+        src={media.url}
+        poster={thumbnailUrl ?? undefined}
+        aria-label={`Play answer from ${who}`}
+        onError={() => setVideoFailed(true)}
+      />
+    );
+  }
+  return (
+    <>
+      {thumb}
+      {media?.kind === "audio" ? (
+        <audio className="minnect-audio" controls preload="none" src={media.url} aria-label={`Play answer from ${who}`} />
+      ) : null}
+    </>
+  );
+}

src/components/TrendingMinnectsRail.tsx

@@ -1,4 +1,5 @@
 import type { DiscoverMinnect } from "@/lib/discover";
+import { MinnectMedia } from "./MinnectMedia";
 import { initials } from "@/lib/feed-model";
 
 export function TrendingMinnectsRail({ minnects }: { minnects: DiscoverMinnect[] }) {
@@ -20,17 +21,11 @@ export function TrendingMinnectsRail({ minnects }: { minnects: DiscoverMinnect[]
                 )}
                 <strong className="rail-name">{who}</strong>
               </div>
-              {m.thumbnailUrl ? (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img className="minnect-thumb" src={m.thumbnailUrl} alt={m.question ? `Thumbnail for: ${m.question}` : "Minnect thumbnail"} />
-              ) : null}
+              <MinnectMedia media={m.media} thumbnailUrl={m.thumbnailUrl} question={m.question} who={who} />
               {m.question ? <p className="minnect-question">{m.question}</p> : null}
               {m.views !== null ? (
                 <span className="rail-meta">{m.views.toLocaleString("en-US")} {m.views === 1 ? "view" : "views"}</span>
               ) : null}
-              {m.audio.url ? (
-                <audio className="minnect-audio" controls preload="none" src={m.audio.url} aria-label={`Play answer from ${who}`} />
-              ) : null}
             </li>
           );
         })}