cynarAI/evOo-local
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(web): render media card outputs with the URL-based previews

Browse Source 
The media pipeline moved image and file previews to the artifact route, so
they no longer take a bot or group target. The media card still passed one,
which no longer type-checks; only its follow-up actions need the target.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MRtGG9ARfqqhma3t85Ro2u
This commit is contained in:
Claude 2026-10-03 14:31:15 +00:00
parent 46349acbd1
commit 0c2b6dd666
No known key found for this signature in database
2 changed files with 6 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/src/components/media/MediaCard.test.tsx
View File

@ -29,7 +29,6 @@ vi.mock("../../lib/artifact-url", () => ({
import { exportPresetsFor, isActiveMediaStatus, MediaCardView } from "./MediaCard";
const target = { groupId: "group-1" };
const video = {
artifactId: "video-1",
kind: "video" as const,
@ -64,7 +63,7 @@ describe("media card", () => {
["failed", "Failed"],
["cancelled", "Cancelled"],
] as const)("labels a %s job as %s", (status, label) => {
const html = renderToString(<MediaCardView block={block({ status })} target={target} />);
const html = renderToString(<MediaCardView block={block({ status })} />);
expect(html).toContain(`data-status="${status}"`);
expect(html).toContain(label);
expect(html).toContain("Cut the intro");
@ -74,7 +73,6 @@ describe("media card", () => {
const html = renderToString(
<MediaCardView
block={block({ status: "running", progress: 0.42, outputs: [video] })}
target={target}
available={everything}
onAction={noop}
/>,
@ -88,21 +86,14 @@ describe("media card", () => {
});
it("leaves the progress value out when the backend does not report one", () => {
const html = renderToString(
<MediaCardView block={block({ status: "waiting" })} target={target} />,
);
const html = renderToString(<MediaCardView block={block({ status: "waiting" })} />);
expect(html).toContain('role="progressbar"');
expect(html).not.toContain("aria-valuenow");
});
it("offers download, export and transcribe for a finished video", () => {
const html = renderToString(
<MediaCardView
block={block({ outputs: [video] })}
target={target}
available={everything}
onAction={noop}
/>,
<MediaCardView block={block({ outputs: [video] })} available={everything} onAction={noop} />,
);
expect(html).toContain('data-player="video"');
expect(html).toContain('href="/artifact/video-1?download=1"');
@ -119,7 +110,6 @@ describe("media card", () => {
const onlyTranscribe = renderToString(
<MediaCardView
block={block({ outputs: [audio] })}
target={target}
available={{ export: true, transcribe: true }}
onAction={noop}
/>,
@ -129,7 +119,7 @@ describe("media card", () => {
expect(onlyTranscribe).not.toContain("Export");
const nothingAvailable = renderToString(
<MediaCardView block={block({ outputs: [video] })} target={target} onAction={noop} />,
<MediaCardView block={block({ outputs: [video] })} onAction={noop} />,
);
expect(nothingAvailable).toContain("Download clip.mp4");
expect(nothingAvailable).not.toContain("Export");
@ -147,7 +137,6 @@ describe("media card", () => {
{ ...video, artifactId: "vtt-1", kind: "file", name: "clip.vtt" },
],
})}
target={target}
available={everything}
onAction={noop}
/>,
@ -160,10 +149,7 @@ describe("media card", () => {
it("shows why a job failed", () => {
const html = renderToString(
<MediaCardView
block={block({ status: "failed", error: "GPU server is unreachable" })}
target={target}
/>,
<MediaCardView block={block({ status: "failed", error: "GPU server is unreachable" })} />,
);
expect(html).toContain("GPU server is unreachable");
});

6
apps/web/src/components/media/MediaCard.tsx
View File

@ -174,12 +174,10 @@ function OutputActions({
*/
export function MediaCardView({
block,
target,
available = NOTHING_AVAILABLE,
onAction,
}: {
block: MediaJobBlock;
target: ArtifactTarget;
available?: MediaCardAvailability;
/** Starts a follow-up job or cancels this one; rejects with a message to show. */
onAction?: (action: MediaCardAction) => Promise<void>;
@ -263,7 +261,6 @@ export function MediaCardView({
{images.map((output) => (
<ArtifactImage
key={output.artifactId}
target={target}
artifactId={output.artifactId}
name={output.name}
/>
@ -288,7 +285,6 @@ export function MediaCardView({
</>
) : (
<ArtifactFileCard
target={target}
artifactId={output.artifactId}
name={output.name}
mimeType={output.mimeType}
@ -386,5 +382,5 @@ export function MediaCard({
}),
});
};
return <MediaCardView block={block} target={target} available={available} onAction={onAction} />;
return <MediaCardView block={block} available={available} onAction={onAction} />;
}