qhkr2z22o: Prefer direct mp4Url for feed video playback with hls fallback

src/components/PostCard.tsx

@@ -87,9 +87,9 @@ export function PostCard({ post, now, onToggleLike, likeBusy, likeError, onSigne
       {deleteError ? <p className="like-error" role="alert">Could not delete the post.</p> : null}
       {post.text ? <p className="post-text">{post.text}</p> : null}
       {post.media.map((m, i) =>
-        m.kind === "video" && m.hlsUrl ? (
+        m.kind === "video" && (m.mp4Url || m.hlsUrl) ? (
           <div className="post-media post-video" key={i}>
-            <VideoPlayer hlsUrl={m.hlsUrl} poster={m.src} label={`Video from ${post.authorName}`} />
+            <VideoPlayer mp4Url={m.mp4Url} hlsUrl={m.hlsUrl} poster={m.src} label={`Video from ${post.authorName}`} />
           </div>
         ) : m.src ? (
           <div className={m.kind === "video" ? "post-media post-video" : "post-media"} key={i}>

src/components/VideoPlayer.tsx

@@ -4,7 +4,8 @@ import { useEffect, useRef, useState } from "react";
 import { choosePlayback, supportsNativeHls } from "@/lib/video-playback";
 
 export interface VideoPlayerProps {
-  hlsUrl: string;
+  mp4Url?: string | null;
+  hlsUrl?: string | null;
   poster: string | null;
   label: string;
 }
@@ -12,17 +13,19 @@ export interface VideoPlayerProps {
 const UNPLAYABLE = "Video can't be played here.";
 
 /**
- * Real <video controls>. hls.js (loaded only when a video card mounts) is
- * preferred; native HLS is used only where hls.js is unsupported. Never
+ * Real <video controls>. Order: direct mp4Url (plain progressive source), else
+ * hls.js (lazy-loaded, only for the HLS path; native HLS only where hls.js is
+ * unsupported), else thumbnail only. Never
  * autoplays. Any failure falls back to the thumbnail with a short note.
  */
-export function VideoPlayer({ hlsUrl, poster, label }: VideoPlayerProps) {
+export function VideoPlayer({ mp4Url, hlsUrl, poster, label }: VideoPlayerProps) {
   const ref = useRef<HTMLVideoElement>(null);
   const [failed, setFailed] = useState(false);
 
   useEffect(() => {
     const video = ref.current;
-    if (!video) return;
+    // A progressive MP4 needs no hls.js; only the HLS fallback loads it.
+    if (!video || mp4Url || !hlsUrl) return;
     let destroy: (() => void) | undefined;
     let cancelled = false;
     import("hls.js")
@@ -51,7 +54,7 @@ export function VideoPlayer({ hlsUrl, poster, label }: VideoPlayerProps) {
       cancelled = true;
       destroy?.();
     };
-  }, [hlsUrl]);
+  }, [mp4Url, hlsUrl]);
 
   if (failed) {
     return (
@@ -64,9 +67,16 @@ export function VideoPlayer({ hlsUrl, poster, label }: VideoPlayerProps) {
       </div>
     );
   }
+  if (!mp4Url && !hlsUrl) {
+    return poster ? (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img src={poster} alt="Video thumbnail" loading="lazy" />
+    ) : null;
+  }
   return (
     <video
       ref={ref}
+      src={mp4Url ?? undefined}
       controls
       playsInline
       preload="none"