From cca2e3ac4891491172015d3f290eefc3f3732df0 Mon Sep 17 00:00:00 2001 From: polter-dev <144177408+polter-dev@users.noreply.github.com> Date: Sat, 11 Jul 2026 20:40:02 -0400 Subject: [PATCH 1/6] Adapt analyze embed aspect ratio --- e2e/capcheck.spec.ts | 7 +++ src/app/globals.css | 6 ++- src/components/capcheck-app.test.tsx | 33 ++++++++++++- src/components/scorecard.tsx | 7 ++- src/lib/source-orientation.test.ts | 69 ++++++++++++++++++++++++++++ src/lib/source-orientation.ts | 34 ++++++++++++++ 6 files changed, 153 insertions(+), 3 deletions(-) create mode 100644 src/lib/source-orientation.test.ts create mode 100644 src/lib/source-orientation.ts diff --git a/e2e/capcheck.spec.ts b/e2e/capcheck.spec.ts index f31787d..1931cee 100644 --- a/e2e/capcheck.spec.ts +++ b/e2e/capcheck.spec.ts @@ -207,6 +207,13 @@ test("mixed result exposes every claim and safe evidence destination, then re-ch ), ).toBeVisible(); await expect(page.getByText(/Checked:/)).toBeVisible(); + const videoFacade = page.locator(".video-facade"); + await expect(videoFacade).toHaveAttribute("data-orientation", "vertical"); + const videoFacadeRatio = await videoFacade.evaluate((element) => { + const { width, height } = element.getBoundingClientRect(); + return width / height; + }); + expect(videoFacadeRatio).toBeCloseTo(9 / 16, 2); await expect(page.getByText(/Verdict weights determine the score/)).toBeVisible(); await expect(page.getByText(/hype is shown separately and does not add points/)).toBeVisible(); await expect(page.getByText(/Evidence may be high, medium, or low trust—or unavailable/)).toBeVisible(); diff --git a/src/app/globals.css b/src/app/globals.css index 0cec988..912207f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -664,7 +664,7 @@ input:disabled { .video-facade { display: grid; - aspect-ratio: 9 / 16; + aspect-ratio: 16 / 9; place-items: center; border-bottom: 1px solid var(--ink); background-color: var(--raised); @@ -677,6 +677,10 @@ input:disabled { ); } +.video-facade[data-orientation="vertical"] { + aspect-ratio: 9 / 16; +} + .video-facade svg { width: 44px; height: 44px; diff --git a/src/components/capcheck-app.test.tsx b/src/components/capcheck-app.test.tsx index 1c548f6..d314d7c 100644 --- a/src/components/capcheck-app.test.tsx +++ b/src/components/capcheck-app.test.tsx @@ -61,7 +61,7 @@ describe("CapCheckApp", () => { vi.stubGlobal("fetch", fetchMock); const user = userEvent.setup(); - render(); + const { container } = render(); await submitUrl(user, "https://www.youtube.com/shorts/demo"); expect(await screen.findByText("52")).toBeInTheDocument(); @@ -74,6 +74,37 @@ describe("CapCheckApp", () => { "/api/analyze", expect.objectContaining({ method: "POST" }), ); + expect(container.querySelector(".video-facade")).toHaveAttribute( + "data-orientation", + "vertical", + ); + }); + + it("marks the checked-video facade as landscape for a long-form source", async () => { + const landscapeScorecard = { + ...DEMO_SCORECARDS.mixed, + source: { + kind: "url" as const, + url: "https://www.youtube.com/watch?v=capcheck-long-form", + title: "Long-form market breakdown", + }, + }; + vi.stubGlobal( + "fetch", + vi.fn().mockResolvedValue( + sseResponse({ type: "complete", scorecard: landscapeScorecard }), + ), + ); + const user = userEvent.setup(); + const { container } = render(); + + await submitUrl(user, landscapeScorecard.source.url); + await screen.findByText("52"); + + expect(container.querySelector(".video-facade")).toHaveAttribute( + "data-orientation", + "landscape", + ); }); it("shows the complete accessible Cap Score bands", async () => { diff --git a/src/components/scorecard.tsx b/src/components/scorecard.tsx index 4e305ce..2215d04 100644 --- a/src/components/scorecard.tsx +++ b/src/components/scorecard.tsx @@ -6,6 +6,7 @@ import { import type { Scorecard } from "@/domain/analysis"; import { formatTimestamp } from "@/lib/format-timestamp"; +import { sourceOrientation } from "@/lib/source-orientation"; import { ClaimCard } from "./claim-card"; import { HowItWorks } from "./how-it-works"; @@ -213,7 +214,11 @@ export function ScorecardView({