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

src/app/api/posts/route.ts

@@ -1,11 +1,11 @@
 import { NextResponse, type NextRequest } from "next/server";
 import { SESSION_COOKIE } from "@/lib/cookie";
 import { createTextPost } from "@/lib/post-create";
-import { createImagePost } from "@/lib/post-media";
+import { createMediaPost } from "@/lib/post-media";
 
 // POST /api/posts
 //   - JSON  { content }                -> public text post
-//   - multipart/form-data content+file -> public image post (one file)
+//   - multipart/form-data content+file -> public image or video post (one file)
 // Both create a public draft on the feed, then publish it, and return { id }.
 // For an image the server also uploads the bytes to a presigned URL and confirms
 // the upload; the browser never receives the feed token. The create call can
@@ -31,7 +31,7 @@ export async function POST(req: NextRequest) {
     } catch {
       return NextResponse.json({ error: "bad_file" }, { status: 400 });
     }
-    const result = await createImagePost(sessionId, content, file);
+    const result = await createMediaPost(sessionId, content, file);
     if (!result.ok) {
       return NextResponse.json({ error: result.error }, { status: result.status });
     }

src/app/globals.css

@@ -25,6 +25,7 @@ button:disabled { opacity: .5; cursor: not-allowed; }
 .post-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
 .post-media img { display: block; width: 100%; height: auto; border-radius: 8px; }
 .post-video { background: #000; border-radius: 8px; overflow: hidden; }
+.post-video-pending { color: #fff; padding: 48px 12px; text-align: center; }
 .post-video video { display: block; width: 100%; max-height: 520px; background: #000; }
 .post-stats { display: flex; gap: 16px; color: var(--grey); font-size: 14px; }
 .heart { color: var(--red); }
@@ -52,6 +53,7 @@ button:disabled { opacity: .5; cursor: not-allowed; }
 .composer-image span { padding: 6px 12px; border: 1px solid #999; background: #fafafa; }
 .composer-image input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
 .composer-preview { display: flex; align-items: center; gap: 10px; }
+.composer-preview video { width: 96px; height: 64px; object-fit: cover; border: 1px solid var(--line); background: #000; }
 .composer-preview img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); }
 .composer-filename { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .composer-remove { margin: 0; padding: 6px 12px; border-radius: 0; }

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">

src/lib/feed-model.ts

@@ -76,7 +76,8 @@ function toMedia(raw: unknown): CardMedia[] {
     if (m.mediaType === "video") {
       const thumb = str(m.thumbnailUrl);
       const hls = muxHlsUrl(m.hlsUrl);
-      if (thumb || hls) out.push({ kind: "video", src: thumb, hlsUrl: hls });
+      // Keep a video even with no thumbnail or hlsUrl yet (just published).
+      out.push({ kind: "video", src: thumb, hlsUrl: hls });
       continue;
     }
     const src = str(m.imageMediumWebpUrl) ?? str(m.imageMediumUrl) ?? str(m.imageUrl);
@@ -142,6 +143,27 @@ export function mergePosts(...lists: CardPost[][]): CardPost[] {
   return sortByPublishedDesc(all);
 }
 
+const hasHls = (p: CardPost) => p.media.some((m) => m.kind === "video" && m.hlsUrl);
+
+/**
+ * Swap in the media of shown posts whose video gained an hlsUrl on a refresh
+ * (transcoding finished), so the thumbnail upgrades to the player in place.
+ * Returns the same array when nothing changed.
+ */
+export function upgradeVideos(current: CardPost[], fresh: CardPost[]): CardPost[] {
+  const byKey = new Map(fresh.map((p) => [p.key, p]));
+  let changed = false;
+  const next = current.map((p) => {
+    const f = byKey.get(p.key);
+    if (f && !hasHls(p) && hasHls(f)) {
+      changed = true;
+      return { ...p, media: f.media };
+    }
+    return p;
+  });
+  return changed ? next : current;
+}
+
 export function relativeTime(publishedAt: string | null, now: number = Date.now()): string {
   const t = publishedAt ? Date.parse(publishedAt) : NaN;
   if (!Number.isFinite(t)) return "";

src/lib/post-media.ts

@@ -9,8 +9,8 @@ import type { SessionData } from "./session-store";
 //   3. the SERVER PUTs the bytes to that URL (the browser never gets the token)
 //   4. confirm the upload (image confirmation blocks until processing finishes)
 //   5. publish with the same {content} publish call as a text post
-// The pipeline is media-type agnostic so the video task can reuse it; only the
-// allowed-type gate and the public entry point here are image-specific.
+// The pipeline is media-type agnostic; the allowed-type gates and entry points
+// (createImagePost, createVideoPost) are per kind.
 // Neither the feed token nor the file bytes are ever logged.
 
 export type MediaKind = "image" | "video";
@@ -25,6 +25,12 @@ export const ALLOWED_IMAGE_TYPES: readonly string[] = [
   "image/heic",
 ];
 
+/** Video content types the feed accepts. */
+export const ALLOWED_VIDEO_TYPES: readonly string[] = ["video/mp4", "video/quicktime", "video/webm"];
+
+/** Upper bound on an uploaded video, enforced before any feed call. */
+export const MAX_VIDEO_BYTES = 200 * 1024 * 1024;
+
 /** Upper bound on an uploaded image, enforced before any feed call. */
 export const MAX_IMAGE_BYTES = 15 * 1024 * 1024;
 
@@ -112,6 +118,44 @@ export function isAllowedImageType(type: string): boolean {
   return ALLOWED_IMAGE_TYPES.includes(type.trim().toLowerCase());
 }
 
+/** True when the type is an accepted video content type (case-insensitive). */
+export function isAllowedVideoType(type: string): boolean {
+  return ALLOWED_VIDEO_TYPES.includes(type.trim().toLowerCase());
+}
+
+/**
+ * Create a public video post: same pipeline as an image with type "video".
+ * Video confirmation may return while transcoding continues; the post is
+ * published anyway and the card shows the thumbnail until hlsUrl appears.
+ */
+export async function createVideoPost(
+  sessionId: string | undefined,
+  content: unknown,
+  file: MediaUpload["file"] | null,
+  options: RefreshOptions = {},
+): Promise<CreateMediaPostResult> {
+  if (!file || typeof file.size !== "number" || file.size <= 0 || file.size > MAX_VIDEO_BYTES) {
+    return { ok: false, status: 400, error: "bad_file" };
+  }
+  if (typeof file.type !== "string" || !isAllowedVideoType(file.type)) {
+    return { ok: false, status: 400, error: "bad_file" };
+  }
+  return runMediaPipeline(sessionId, content, { file, mediaType: "video" }, options);
+}
+
+/** Route entry point: picks image or video from the file type; anything else is a 400. */
+export async function createMediaPost(
+  sessionId: string | undefined,
+  content: unknown,
+  file: MediaUpload["file"] | null,
+  options: RefreshOptions = {},
+): Promise<CreateMediaPostResult> {
+  if (file && typeof file.type === "string" && isAllowedVideoType(file.type)) {
+    return createVideoPost(sessionId, content, file, options);
+  }
+  return createImagePost(sessionId, content, file, options);
+}
+
 /**
  * Create a public image post from a caption and one file: draft -> presigned URL
  * -> server-side PUT -> confirm -> publish. Returns the post id so the caller can

tests/feed-view.test.ts

@@ -3,7 +3,7 @@ import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { FeedView, type FeedViewProps } from "@/components/FeedView";
 import { fetchFeedPage, FeedLoadError } from "@/lib/feed-client";
-import { mergePosts, relativeTime, toCardPosts } from "@/lib/feed-model";
+import { mergePosts, relativeTime, toCardPosts, upgradeVideos } from "@/lib/feed-model";
 
 const NOW = Date.parse("2026-10-19T12:00:00Z");
 const post = (id: string, publishedAt: string, extra: Record<string, unknown> = {}) => ({
@@ -137,3 +137,35 @@ describe("fetchFeedPage", () => {
     await expect(fetchFeedPage(null, mk(500))).rejects.toMatchObject({ signedOut: false });
   });
 });
+
+describe("video transcoding", () => {
+  const vid = (hls: unknown) =>
+    toCardPosts([post("7", "2026-10-19T10:00:00Z", { mediaItems: [{ mediaType: "video", thumbnailUrl: "https://i/t.jpg", hlsUrl: hls }] })]);
+
+  it("keeps a just-published video as a thumbnail with no hlsUrl", () => {
+    const [p] = vid(null);
+    expect(p.media).toEqual([{ kind: "video", src: "https://i/t.jpg", hlsUrl: null }]);
+  });
+
+  it("keeps a video with neither thumbnail nor hlsUrl as a pending card", () => {
+    const [p] = toCardPosts([post("8", "2026-10-19T10:00:00Z", { mediaItems: [{ mediaType: "video" }] })]);
+    expect(p.media).toHaveLength(1);
+    expect(p.media[0].src).toBeNull();
+  });
+
+  it("upgrades the shown thumbnail to the player when hlsUrl appears", () => {
+    const shown = vid(null);
+    const next = upgradeVideos(shown, vid("https://stream.mux.com/abc"));
+    expect(next[0].media[0].hlsUrl).toContain("stream.mux.com");
+    expect(upgradeVideos(next, vid("https://stream.mux.com/abc"))).toBe(next);
+    expect(upgradeVideos(shown, vid(null))).toBe(shown);
+  });
+
+  it("renders the thumbnail while transcoding and the player once hlsUrl is present", () => {
+    const html = render({ posts: vid(null) });
+    expect(html).toContain("https://i/t.jpg");
+    expect(html).not.toContain("<video");
+    const live = render({ posts: vid("https://stream.mux.com/abc") });
+    expect(live).toContain("<video");
+  });
+});

tests/post-media.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 import { NextRequest } from "next/server";
 import { POST } from "@/app/api/posts/route";
-import { createImagePost } from "@/lib/post-media";
+import { createImagePost, createVideoPost } from "@/lib/post-media";
 import { createSession } from "@/lib/session-store";
 
 // Server-side image-post pipeline, with a fully mocked feed. The browser sends
@@ -181,3 +181,52 @@ describe("POST /api/posts (image)", () => {
     expect(bad).toEqual({ ok: false, status: 400, error: "bad_file" });
   });
 });
+
+describe("POST /api/posts (video)", () => {
+  const videoFile = (name = "clip.mp4", type = "video/mp4") =>
+    new File([new Uint8Array([1, 2, 3])], name, { type });
+
+  function videoFeed(bodies: Record<string, unknown>, calls: string[]) {
+    return vi.fn(async (url: string | URL, init?: RequestInit) => {
+      const u = String(url);
+      calls.push(u);
+      if (u.includes("/api/v1/") && typeof init?.body === "string") bodies[new URL(u).pathname] = JSON.parse(init.body);
+      if (u.endsWith("/api/v1/posts")) return jsonRes({ data: { id: "v1", status: "draft" } }, 201);
+      if (u.endsWith("/attachments/presigned-urls"))
+        return jsonRes({ data: [{ attachmentId: "a1", s3Key: "k/1.mp4", url: "https://s3.example/put" }] }, 200);
+      if (u === "https://s3.example/put") return new Response(null, { status: 200 });
+      // Confirmation returns while transcoding continues: no hlsUrl.
+      if (u.endsWith("/confirm-uploads")) return jsonRes({ data: { status: "processing" } }, 200);
+      return jsonRes({ data: { success: true } }, 200);
+    });
+  }
+
+  it("uses draft type video, confirms mediaType video, and publishes without hlsUrl", async () => {
+    const sid = session();
+    const bodies: Record<string, unknown> = {};
+    const calls: string[] = [];
+    const fn = videoFeed(bodies, calls);
+    const res = await withFetch(fn as unknown as typeof fetch, () => POST(multipart("hi", videoFile("c.mov", "video/quicktime"), sid)));
+    expect(res.status).toBe(200);
+    expect(await res.json()).toEqual({ id: "v1" });
+    expect((bodies["/api/v1/posts"] as { type: string }).type).toBe("video");
+    const uploads = (bodies["/api/v1/attachments/confirm-uploads"] as { uploads: { mediaType: string }[] }).uploads;
+    expect(uploads[0].mediaType).toBe("video");
+    expect(calls.some((u) => u.endsWith("/api/v1/posts/v1/publish"))).toBe(true);
+  });
+
+  it("accepts mp4, quicktime and webm; rejects other video types before any feed call", async () => {
+    const sid = session();
+    const ok = videoFeed({}, []) as unknown as typeof fetch;
+    for (const t of ["video/mp4", "video/quicktime", "video/webm"]) {
+      expect((await createVideoPost(sid, "c", videoFile("f", t), { fetchImpl: ok })).ok).toBe(true);
+    }
+    const fn = vi.fn();
+    const res = await withFetch(fn as unknown as typeof fetch, () =>
+      POST(multipart("x", videoFile("a.avi", "video/x-msvideo"), sid)),
+    );
+    expect(res.status).toBe(400);
+    expect(await res.json()).toEqual({ error: "bad_file" });
+    expect(fn).not.toHaveBeenCalled();
+  });
+});