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}