t3xbu10dr: Publish video posts through the media pipeline and upgrade thumbnails to the player

src/components/Composer.tsx

@@ -1,27 +1,27 @@
 "use client";
 
-import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from "react";
+import { useEffect, useState, type ChangeEvent, type FormEvent } from "react";
 
 export interface ComposerProps {
   value: string;
   busy: boolean;
   error: boolean;
-  /** The selected image file, when the image picker is wired. */
+  /** The selected image or video file, when the pickers are wired. */
   file?: File | null;
   onChange: (value: string) => void;
-  /** When present, the composer shows an image picker and reports the choice. */
+  /** When present, the composer shows image and video pickers and reports the choice. */
   onFile?: (file: File | null) => void;
   onSubmit: () => void;
 }
 
 // Content types the picker offers (spec: allowed image types).
 const IMAGE_ACCEPT = "image/jpeg,image/jpg,image/png,image/gif,image/webp,image/heic";
+const VIDEO_ACCEPT = "video/mp4,video/quicktime,video/webm";
 
 export function Composer({ value, busy, error, file = null, onChange, onFile, onSubmit }: ComposerProps) {
   const empty = value.trim().length === 0;
-  // A post needs either text or an image.
+  // A post needs either text or a file.
   const canSubmit = (!empty || !!file) && !busy;
-  const inputRef = useRef<HTMLInputElement | null>(null);
   const [preview, setPreview] = useState<string | null>(null);
 
   // Build a preview URL client-side only, and revoke it when the file changes.
@@ -42,11 +42,13 @@ export function Composer({ value, busy, error, file = null, onChange, onFile, on
   function pick(e: ChangeEvent<HTMLInputElement>) {
     const chosen = e.target.files && e.target.files[0] ? e.target.files[0] : null;
     onFile?.(chosen);
+    // One file per post: picking one kind clears the other input.
+    e.target.value = "";
   }
   function remove() {
     onFile?.(null);
-    if (inputRef.current) inputRef.current.value = "";
   }
+  const isVideo = !!file && file.type.startsWith("video/");
 
   return (
     <form className="composer" onSubmit={submit}>
@@ -64,16 +66,21 @@ export function Composer({ value, busy, error, file = null, onChange, onFile, on
           <label className="composer-image">
             <span>Add image</span>
             <input
-              ref={inputRef}
               type="file"
               accept={IMAGE_ACCEPT}
               disabled={busy}
               onChange={pick}
             />
           </label>
+          <label className="composer-image composer-video">
+            <span>Add video</span>
+            <input type="file" accept={VIDEO_ACCEPT} disabled={busy} onChange={pick} />
+          </label>
           {file ? (
             <div className="composer-preview">
-              {preview ? (
+              {preview && isVideo ? (
+                <video src={preview} muted playsInline preload="metadata" aria-label={`Selected video: ${file.name}`} />
+              ) : preview ? (
                 // eslint-disable-next-line @next/next/no-img-element
                 <img src={preview} alt={`Selected image: ${file.name}`} />
               ) : null}

src/components/Feed.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { fetchFeedPage, FeedLoadError } from "@/lib/feed-client";
 import { applyLikeOutcome, LikeError, sendLike } from "@/lib/like-client";
-import { mergePosts, toCardPosts, type CardPost } from "@/lib/feed-model";
+import { mergePosts, toCardPosts, upgradeVideos, type CardPost } from "@/lib/feed-model";
 import { PostError, publishAndConfirm } from "@/lib/post-client";
 import { DeleteError, sendDelete } from "@/lib/delete-client";
 import { FeedView, type FeedStatus } from "./FeedView";
@@ -106,7 +106,9 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
     const poll = async () => {
       try {
         const page = await fetchFeedPage(null);
-        const fresh = toCardPosts(page.items).filter((p) => !shown.current.has(p.key));
+        const all = toCardPosts(page.items);
+        setPosts((cur) => upgradeVideos(cur, all));
+        const fresh = all.filter((p) => !shown.current.has(p.key));
         if (fresh.length) setPending((cur) => mergePosts(cur, fresh));
       } catch (e) {
         fail(e);
@@ -188,7 +190,7 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
 
   const publish = useCallback(async () => {
     const text = draft.trim();
-    // A post needs either text or an image.
+    // A post needs either text or a file.
     if ((!text && !file) || posting) return;
     setPosting(true);
     setPostFailed(false);

src/components/PostCard.tsx

@@ -96,6 +96,10 @@ export function PostCard({ post, now, onToggleLike, likeBusy, likeError, onSigne
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img src={m.src} alt={m.kind === "video" ? "Video thumbnail" : ""} loading="lazy" />
           </div>
+        ) : m.kind === "video" ? (
+          <div className="post-media post-video post-video-pending" key={i} role="img" aria-label="Video is processing">
+            <span>Video is processing</span>
+          </div>
         ) : null,
       )}
       <footer className="post-stats">