Fix playable upload preview in results

src/app/globals.css

@@ -669,6 +669,11 @@ input:disabled {
   aspect-ratio: 9 / 16;
 }
 
+.video-preview {
+  width: 100%;
+  object-fit: contain;
+}
+
 .video-facade svg {
   width: 44px;
   height: 44px;

src/components/capcheck-app.test.tsx

@@ -218,6 +218,34 @@ describe("CapCheckApp", () => {
     expect((request.body as FormData).get("file")).toEqual(file);
   });
 
+  it("plays the submitted upload in the completed result and releases its preview", async () => {
+    const createObjectURL = vi.fn(() => "blob:capcheck-upload-preview");
+    const revokeObjectURL = vi.fn();
+    vi.stubGlobal("URL", Object.assign(URL, { createObjectURL, revokeObjectURL }));
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(
+        sseResponse({ type: "complete", scorecard: DEMO_SCORECARDS.partialFailure }),
+      ),
+    );
+    const user = userEvent.setup();
+    const { unmount } = render(<CapCheckApp />);
+    const file = new File(["video"], "earnings-demo.mp4", { type: "video/mp4" });
+
+    await user.upload(screen.getByLabelText(/choose a video file/i), file);
+    await user.click(checkItButton());
+
+    const preview = await screen.findByLabelText(
+      "Play uploaded video: demo-earnings-claims.mp4",
+    );
+    expect(preview).toHaveAttribute("src", "blob:capcheck-upload-preview");
+    expect(preview).toHaveAttribute("controls");
+    expect(createObjectURL).toHaveBeenCalledWith(file);
+
+    unmount();
+    expect(revokeObjectURL).toHaveBeenCalledWith("blob:capcheck-upload-preview");
+  });
+
   it("allows a selected upload to be removed", async () => {
     vi.stubGlobal("fetch", vi.fn());
     const user = userEvent.setup();

src/components/capcheck-app.tsx

@@ -28,6 +28,10 @@ export function CapCheckApp() {
   const [progress, setProgress] = useState<UiProgress[]>([]);
   const [scorecard, setScorecard] = useState<Scorecard | null>(null);
   const [loading, setLoading] = useState(false);
+  const uploadPreviewUrl = useMemo(
+    () => (file ? URL.createObjectURL(file) : null),
+    [file],
+  );
 
   const scenario = useMemo(() => {
     if (typeof window === "undefined") return undefined;
@@ -42,6 +46,11 @@ export function CapCheckApp() {
     };
   }, []);
 
+  useEffect(() => {
+    if (!uploadPreviewUrl) return;
+    return () => URL.revokeObjectURL(uploadPreviewUrl);
+  }, [uploadPreviewUrl]);
+
   const performAnalysis = async (submitUrl: string, submitFile: File | null) => {
     setValidation("");
     setMiniError("");
@@ -175,6 +184,7 @@ export function CapCheckApp() {
         )}
         <ScorecardView
           scorecard={scorecard}
+          uploadPreviewUrl={uploadPreviewUrl}
           onRunAgain={() => void performAnalysis(url, file)}
           onCheckAnother={reset}
         />

src/components/scorecard.tsx

@@ -32,10 +32,12 @@ const displayUrl = (url: string) => url.replace(/^https?:\/\//, "");
 
 export function ScorecardView({
   scorecard,
+  uploadPreviewUrl,
   onRunAgain,
   onCheckAnother,
 }: {
   scorecard: Scorecard;
+  uploadPreviewUrl: string | null;
   onRunAgain(): void;
   onCheckAnother(): void;
 }) {
@@ -214,13 +216,23 @@ export function ScorecardView({
         </div>
 
         <aside className="source-rail" aria-label="Checked video">
-          <div
-            className="video-facade"
-            data-orientation={embedOrientation}
-            aria-hidden="true"
-          >
-            <Play />
-          </div>
+          {scorecard.source.kind === "upload" && uploadPreviewUrl ? (
+            <video
+              className="video-facade video-preview"
+              src={uploadPreviewUrl}
+              controls
+              preload="metadata"
+              aria-label={`Play uploaded video: ${scorecard.source.fileName}`}
+            />
+          ) : (
+            <div
+              className="video-facade"
+              data-orientation={embedOrientation}
+              aria-hidden="true"
+            >
+              <Play />
+            </div>
+          )}
           <div className="source-details">
             <span>Checked: <b>{sourceTitle}</b></span>
             {scorecard.source.kind === "url" ? (