- {Array.from({ length: 8 }, (_, index) => (
-
+
+ {Array.from({ length: 12 }, (_, index) => (
+ // biome-ignore lint/suspicious/noArrayIndexKey: static placeholders with no identity.
+ -
+
+
))}
+
+ );
+}
+
+/** The cast row skeleton clipped and padded like the carousel's region. */
+function CastRowSkeletonFrame() {
+ return (
+
+
);
}
export {
CastRowSkeleton,
+ CastRowSkeletonFrame,
DetailHeroSkeleton,
OverviewSkeleton,
SectionHeadingSkeleton,
diff --git a/components/catalog/title-details.test.tsx b/components/catalog/title-details.test.tsx
new file mode 100644
index 0000000..51157e4
--- /dev/null
+++ b/components/catalog/title-details.test.tsx
@@ -0,0 +1,166 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import type { Movie, TvShow } from "@/lib/tmdb";
+
+import {
+ AgeRatingChip,
+ MovieCrew,
+ MovieFacts,
+ ShowCrew,
+ ShowFacts,
+} from "./title-details";
+
+/**
+ * covers: spec 0022, AC-13, AC-15, AC-16
+ *
+ * The crew lines, the age chip and the Facts panel: each value only when
+ * TMDB has one, never Unknown or 0, and the panel gone when nothing is left.
+ */
+
+const MOVIE = {
+ title: "Fight Club",
+ originalTitle: "Fight Club",
+ originalLanguage: "en",
+ status: "Released",
+ budget: 63_000_000,
+ revenue: 100_853_753,
+ productionCompanies: [
+ { id: 1, name: "Fox 2000 Pictures", logoUrl: null },
+ { id: 2, name: "Regency Enterprises", logoUrl: null },
+ ],
+ directors: ["David Fincher"],
+ writers: ["Jim Uhls"],
+} as Movie;
+
+const SHOW = {
+ status: "Ended",
+ type: "Scripted",
+ originalLanguage: "en",
+ networks: [
+ { id: 174, name: "AMC", logoUrl: "https://image.tmdb.org/t/p/w154/a.png" },
+ { id: 2, name: "No Logo TV", logoUrl: null },
+ ],
+ productionCompanies: [],
+ firstAirDate: "2008-01-20",
+ lastAirDate: "2013-09-29",
+ createdBy: ["Vince Gilligan"],
+} as unknown as TvShow;
+
+/** The panel's facts as `label: value` pairs, in order. */
+function facts(): string[] {
+ return Array.from(document.querySelectorAll("dl > div")).map(
+ (row) =>
+ `${row.querySelector("dt")?.textContent}: ${row.querySelector("dd")?.textContent}`,
+ );
+}
+
+describe("crew lines (AC-15)", () => {
+ it("shows Directed by and Written by for a movie", () => {
+ render(
);
+
+ expect(screen.getByText("Directed by")).toBeVisible();
+ expect(screen.getByText("A, B")).toBeVisible();
+ expect(screen.getByText("Written by")).toBeVisible();
+ });
+
+ it("leaves out a line with no names, and renders nothing with none", () => {
+ const { container, rerender } = render(
+
,
+ );
+ expect(screen.queryByText("Written by")).toBeNull();
+
+ rerender(
);
+ expect(container).toBeEmptyDOMElement();
+ });
+
+ it("shows Created by for a show", () => {
+ render(
);
+
+ expect(screen.getByText("Created by")).toBeVisible();
+ expect(screen.getByText("Vince Gilligan")).toBeVisible();
+ });
+});
+
+describe("AgeRatingChip (AC-9, AC-13)", () => {
+ it("shows the rating and names the country", () => {
+ render(
+
,
+ );
+
+ expect(screen.getByText("16")).toBeVisible();
+ expect(screen.getByText(/Age rating in Germany/)).toBeInTheDocument();
+ });
+});
+
+describe("MovieFacts (AC-16)", () => {
+ it("lists each fact TMDB has, money in compact US dollars", () => {
+ render(
);
+
+ expect(screen.getByRole("heading", { name: "Facts" })).toBeVisible();
+ expect(facts()).toEqual([
+ "Status: Released",
+ "Original language: English",
+ "Budget: $63M",
+ "Revenue: $100.9M",
+ "Production companies: Fox 2000 Pictures, Regency Enterprises",
+ ]);
+ });
+
+ it("shows the original title only when it differs", () => {
+ render(
);
+
+ expect(facts()).toContain("Original title: Le Fight Club");
+ });
+
+ it("never shows Unknown or 0 for a missing value", () => {
+ render(
+
,
+ );
+
+ expect(facts()).toEqual(["Original language: English"]);
+ expect(document.body.textContent).not.toMatch(/Unknown|\$0/);
+ });
+});
+
+describe("ShowFacts (AC-16)", () => {
+ it("lists status, type, language, networks and both air dates", () => {
+ render(
);
+
+ expect(facts()).toEqual([
+ "Status: Ended",
+ "Type: Scripted",
+ "Original language: English",
+ "Networks: AMCNo Logo TV",
+ "First aired: Jan 20, 2008",
+ "Last aired: Sep 29, 2013",
+ ]);
+ });
+
+ it("leaves out an empty status and missing air dates", () => {
+ render(
+
,
+ );
+
+ expect(facts()).toEqual(["Original language: English"]);
+ });
+});
diff --git a/components/catalog/title-details.tsx b/components/catalog/title-details.tsx
new file mode 100644
index 0000000..9cf9006
--- /dev/null
+++ b/components/catalog/title-details.tsx
@@ -0,0 +1,185 @@
+import Image from "next/image";
+import type * as React from "react";
+
+import { GlassPill } from "@/components/glass-pill";
+import type { Region } from "@/lib/catalog/region";
+import { formatAirDate, formatUsdCompact, languageName } from "@/lib/format";
+import type { Company, Movie, TvShow } from "@/lib/tmdb";
+
+import { SECTION_HEADING_CLASS } from "./title-section";
+
+/**
+ * The key crew under the overview (spec 0022, AC-15): "Directed by" and
+ * "Written by" for a movie, "Created by" for a show. Each line only when it
+ * has a name, and nothing at all when none does.
+ */
+function CrewLines({
+ lines,
+}: {
+ lines: ReadonlyArray<{ label: string; names: string[] }>;
+}) {
+ const shown = lines.filter((line) => line.names.length > 0);
+ if (shown.length === 0) return null;
+
+ return (
+
+ {shown.map((line) => (
+
+
- {line.label}
+ -
+ {line.names.join(", ")}
+
+
+ ))}
+
+ );
+}
+
+/** A movie's crew lines, from the crew `getMovie` already read. */
+function MovieCrew({ movie }: { movie: Pick
}) {
+ return (
+
+ );
+}
+
+/** A show's crew line, from `created_by` on `getTvShow`. */
+function ShowCrew({ show }: { show: Pick }) {
+ return ;
+}
+
+/**
+ * The hero's age rating chip for the visitor's country (spec 0022, AC-13).
+ * The country is named for assistive technology and on hover, since a bare
+ * "16" means little without it (AC-9). Rendered only when the country has a
+ * rating; another country's is never borrowed.
+ */
+function AgeRatingChip({ rating, region }: { rating: string; region: Region }) {
+ return (
+
+ Age rating in {region.name}:
+ {rating}
+
+ );
+}
+
+type Fact = { label: string; value: React.ReactNode };
+
+/**
+ * The Facts panel at the end of a title page (spec 0022, AC-16): a list of
+ * labelled values, each only when TMDB has one. Nothing is shown as Unknown
+ * or 0; with no facts at all the panel is left out.
+ */
+function FactsPanel({ facts }: { facts: Array }) {
+ const shown = facts.filter((fact): fact is Fact => fact !== null);
+ if (shown.length === 0) return null;
+
+ return (
+
+
+ Facts
+
+
+ {shown.map((fact) => (
+
+
- {fact.label}
+ -
+ {fact.value}
+
+
+ ))}
+
+
+ );
+}
+
+/** A fact with a text value, or null when there is no value. */
+function textFact(label: string, value: string | null): Fact | null {
+ return value === null || value === "" ? null : { label, value };
+}
+
+/** Company names joined, or null when TMDB lists none. */
+function companiesFact(label: string, companies: Company[]): Fact | null {
+ return companies.length === 0
+ ? null
+ : { label, value: companies.map((company) => company.name).join(", ") };
+}
+
+/** A movie's facts, all from `getMovie` (AC-16). */
+function MovieFacts({ movie }: { movie: Movie }) {
+ return (
+
+ );
+}
+
+/** A show's facts, all from `getTvShow` (AC-16). */
+function ShowFacts({ show }: { show: TvShow }) {
+ return (
+ ,
+ },
+ companiesFact("Production companies", show.productionCompanies),
+ textFact("First aired", formatAirDate(show.firstAirDate)),
+ textFact("Last aired", formatAirDate(show.lastAirDate)),
+ ]}
+ />
+ );
+}
+
+/**
+ * A show's networks: each `w154` logo on a mid grey tile, followed by the
+ * name. TMDB's network logos come both white and dark, so no single tile
+ * keeps every one readable, and the name is what always reads; the logo is
+ * decoration beside it (`alt=""`). With no logo, the name alone.
+ */
+function NetworkList({ networks }: { networks: Company[] }) {
+ return (
+
+ {networks.map((network) => (
+ -
+ {network.logoUrl === null ? null : (
+
+
+
+ )}
+ {network.name}
+
+ ))}
+
+ );
+}
+
+export { AgeRatingChip, MovieCrew, MovieFacts, ShowCrew, ShowFacts };
diff --git a/components/catalog/title-extras.test.tsx b/components/catalog/title-extras.test.tsx
new file mode 100644
index 0000000..1002621
--- /dev/null
+++ b/components/catalog/title-extras.test.tsx
@@ -0,0 +1,286 @@
+import { render, screen, within } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+/**
+ * covers: spec 0022, AC-9, AC-11, AC-12, AC-13, AC-14, AC-18
+ *
+ * The extras slots on their own: the region picks the entry after the read,
+ * an empty or missing value leaves its piece out, and a `TmdbError` (a 404
+ * included) stays inside the slot that asked, as a one line error with a
+ * Retry to the title page. The reads, the region and the cards are replaced;
+ * `TmdbError` is the real one.
+ */
+const readMovie = vi.fn();
+const readTv = vi.fn();
+const region = vi.fn();
+
+vi.mock("@/lib/tmdb", async () => ({
+ TmdbError: (await import("@/lib/tmdb/errors")).TmdbError,
+ getMovieExtras: (...args: unknown[]) => readMovie(...args),
+ getTvExtras: (...args: unknown[]) => readTv(...args),
+}));
+vi.mock("@/lib/region", () => ({ getVisitorRegion: () => region() }));
+vi.mock("@/components/catalog/list-cards", () => ({
+ MovieListCard: ({
+ movie,
+ returnPath,
+ }: {
+ movie: { title: string };
+ returnPath: string;
+ }) => {movie.title},
+ ShowListCard: ({ show }: { show: { name: string } }) => (
+ {show.name}
+ ),
+}));
+
+const { TmdbError } = await import("@/lib/tmdb/errors");
+const { JUSTWATCH_ATTRIBUTION } = await import("@/lib/legal/operator");
+const {
+ AgeRatingSlotContent,
+ MoreLikeThisContent,
+ TrailerSlotContent,
+ WhereToWatchContent,
+} = await import("./title-extras");
+
+const POLAND = { code: "PL", name: "Poland" };
+const MOVIE = { mediaType: "movie", id: 550 } as const;
+
+function provider(id: number, name: string) {
+ return { id, name, logoUrl: `https://image.tmdb.org/t/p/w92/${id}.png` };
+}
+
+function extras(overrides: Record = {}) {
+ return {
+ trailer: { key: "dfeUzm6KF4g", name: "Official Trailer" },
+ recommendations: {
+ mediaType: "movie",
+ paged: {
+ page: 1,
+ totalPages: 2,
+ totalResults: 40,
+ results: Array.from({ length: 20 }, (_, index) => ({
+ id: index + 1,
+ title: `Movie ${index + 1}`,
+ })),
+ },
+ },
+ watchProviders: {
+ PL: {
+ link: "https://www.themoviedb.org/movie/550/watch?locale=PL",
+ stream: [provider(8, "Netflix")],
+ free: [],
+ rentOrBuy: [
+ provider(10, "Amazon Video"),
+ { ...provider(11, "No Logo"), logoUrl: null },
+ ],
+ },
+ US: {
+ link: "https://www.themoviedb.org/movie/550/watch?locale=US",
+ stream: [provider(9, "Hulu")],
+ free: [],
+ rentOrBuy: [],
+ },
+ },
+ ageRatings: { PL: "18", US: "R" },
+ ...overrides,
+ };
+}
+
+beforeEach(() => {
+ // The row's scroller measures itself; jsdom has no ResizeObserver.
+ vi.stubGlobal(
+ "ResizeObserver",
+ class {
+ observe() {}
+ disconnect() {}
+ },
+ );
+});
+
+afterEach(() => {
+ vi.unstubAllGlobals();
+ readMovie.mockReset();
+ readTv.mockReset();
+ region.mockReset();
+});
+
+describe("TrailerSlotContent (AC-11)", () => {
+ it("renders the Trailer button for a title with a trailer", async () => {
+ readMovie.mockResolvedValue(extras());
+
+ render(await TrailerSlotContent({ ...MOVIE, title: "Fight Club" }));
+
+ expect(readMovie).toHaveBeenCalledWith(550);
+ expect(screen.getByRole("button", { name: "Trailer" })).toBeVisible();
+ // The player does not exist until the dialog opens.
+ expect(document.querySelector("iframe")).toBeNull();
+ });
+
+ it("renders nothing with no trailer, or when the read failed (AC-18)", async () => {
+ readMovie.mockResolvedValue(extras({ trailer: null }));
+ expect(await TrailerSlotContent({ ...MOVIE, title: "X" })).toBeNull();
+
+ readMovie.mockRejectedValue(new TmdbError("timeout", "/movie/550", "x"));
+ expect(await TrailerSlotContent({ ...MOVIE, title: "X" })).toBeNull();
+ });
+
+ it("reads a show's extras for a show", async () => {
+ readTv.mockResolvedValue(extras({ trailer: null }));
+
+ await TrailerSlotContent({ mediaType: "tv", id: 1396, title: "X" });
+
+ expect(readTv).toHaveBeenCalledWith(1396);
+ expect(readMovie).not.toHaveBeenCalled();
+ });
+
+ it("rethrows anything that is not a TMDB failure", async () => {
+ readMovie.mockRejectedValue(new Error("bug"));
+
+ await expect(TrailerSlotContent({ ...MOVIE, title: "X" })).rejects.toThrow(
+ "bug",
+ );
+ });
+});
+
+describe("AgeRatingSlotContent (AC-9, AC-13)", () => {
+ it("shows the visitor's country rating, naming the country", async () => {
+ readMovie.mockResolvedValue(extras());
+ region.mockResolvedValue(POLAND);
+
+ render(<>{await AgeRatingSlotContent(MOVIE)});
+
+ expect(screen.getByText("18")).toBeVisible();
+ expect(screen.getByText(/Age rating in Poland/)).toBeInTheDocument();
+ });
+
+ it("never borrows another country's rating", async () => {
+ readMovie.mockResolvedValue(extras({ ageRatings: { US: "R" } }));
+ region.mockResolvedValue(POLAND);
+
+ expect(await AgeRatingSlotContent(MOVIE)).toBeNull();
+ });
+
+ it("renders nothing when the read failed (AC-18)", async () => {
+ readMovie.mockRejectedValue(new TmdbError("not_found", "/movie/550", "x"));
+ region.mockResolvedValue(POLAND);
+
+ expect(await AgeRatingSlotContent(MOVIE)).toBeNull();
+ });
+});
+
+describe("WhereToWatchContent (AC-9, AC-12, AC-18)", () => {
+ it("names the country and lists only its non empty groups, in order", async () => {
+ readMovie.mockResolvedValue(extras());
+ region.mockResolvedValue(POLAND);
+
+ render(await WhereToWatchContent(MOVIE));
+
+ expect(
+ screen.getByRole("heading", { name: "Where to watch in Poland" }),
+ ).toBeVisible();
+ const groups = screen
+ .getAllByRole("list")
+ .map((list) => list.getAttribute("aria-label"));
+ expect(groups).toEqual(["Stream", "Rent or buy"]);
+ expect(
+ within(screen.getByRole("list", { name: "Stream" })).getByRole("img", {
+ name: "Netflix",
+ }),
+ ).toBeVisible();
+ expect(screen.queryByRole("img", { name: "Hulu" })).toBeNull();
+ // A provider with no logo shows its name.
+ expect(screen.getByText("No Logo")).toBeVisible();
+ });
+
+ it("links once to TMDB's page for the country, with the JustWatch credit", async () => {
+ readMovie.mockResolvedValue(extras());
+ region.mockResolvedValue(POLAND);
+
+ render(await WhereToWatchContent(MOVIE));
+
+ const link = screen.getByRole("link", { name: /All options on TMDB/ });
+ expect(link).toHaveAttribute(
+ "href",
+ "https://www.themoviedb.org/movie/550/watch?locale=PL",
+ );
+ expect(link).toHaveAttribute("target", "_blank");
+ expect(link).toHaveAttribute("rel", "noopener noreferrer");
+ expect(screen.getByText(JUSTWATCH_ATTRIBUTION)).toBeVisible();
+ });
+
+ it("says plainly when the country has no providers", async () => {
+ readMovie.mockResolvedValue(extras({ watchProviders: {} }));
+ region.mockResolvedValue(POLAND);
+
+ render(await WhereToWatchContent(MOVIE));
+
+ expect(
+ screen.getByText("Not streaming in Poland right now."),
+ ).toBeVisible();
+ expect(screen.getByText(JUSTWATCH_ATTRIBUTION)).toBeVisible();
+ expect(screen.queryByRole("link")).toBeNull();
+ });
+
+ it("keeps a failure to one line with a Retry to the page (AC-18)", async () => {
+ readMovie.mockRejectedValue(new TmdbError("not_found", "/movie/550", "x"));
+ region.mockResolvedValue(POLAND);
+
+ render(await WhereToWatchContent(MOVIE));
+
+ expect(
+ screen.getByText("Couldn't load where to watch from TMDB."),
+ ).toBeVisible();
+ expect(screen.getByRole("link", { name: "Try again" })).toHaveAttribute(
+ "href",
+ "/movies/550",
+ );
+ });
+});
+
+describe("MoreLikeThisContent (AC-14, AC-18)", () => {
+ it("shows up to 12 recommendations, returning to the title page", async () => {
+ readMovie.mockResolvedValue(extras());
+
+ render(<>{await MoreLikeThisContent(MOVIE)});
+
+ expect(
+ screen.getByRole("heading", { name: "More like this" }),
+ ).toBeVisible();
+ expect(screen.getByText("Movie 12")).toHaveAttribute(
+ "data-return",
+ "/movies/550",
+ );
+ expect(screen.queryByText("Movie 13")).toBeNull();
+ expect(screen.queryByRole("link", { name: /See all/ })).toBeNull();
+ });
+
+ it("leaves the whole section out with no recommendations", async () => {
+ readMovie.mockResolvedValue(
+ extras({
+ recommendations: {
+ mediaType: "movie",
+ paged: { page: 1, results: [], totalPages: 0, totalResults: 0 },
+ },
+ }),
+ );
+
+ expect(await MoreLikeThisContent(MOVIE)).toBeNull();
+ });
+
+ it("keeps its heading with a one line error and Retry on failure", async () => {
+ readTv.mockRejectedValue(new TmdbError("upstream", "/tv/1396", "x"));
+
+ render(<>{await MoreLikeThisContent({ mediaType: "tv", id: 1396 })});
+
+ expect(
+ screen.getByRole("heading", { name: "More like this" }),
+ ).toBeVisible();
+ expect(
+ screen.getByText("Couldn't load recommendations from TMDB."),
+ ).toBeVisible();
+ expect(screen.getByRole("link", { name: "Try again" })).toHaveAttribute(
+ "href",
+ "/shows/1396",
+ );
+ });
+});
diff --git a/components/catalog/title-extras.tsx b/components/catalog/title-extras.tsx
new file mode 100644
index 0000000..8d20450
--- /dev/null
+++ b/components/catalog/title-extras.tsx
@@ -0,0 +1,248 @@
+import type * as React from "react";
+import { cache, Suspense } from "react";
+
+import {
+ CarouselRowSkeleton,
+ ROW_ITEM_CLASS,
+ ROW_POSTER_SIZES,
+ ROW_SIZE,
+} from "@/components/catalog/carousel-row-states";
+import { CarouselScroller } from "@/components/catalog/carousel-scroller";
+import { CatalogListCards } from "@/components/catalog/catalog-list-cards";
+import { type MediaType, titleHref } from "@/lib/catalog/media-type";
+import { getVisitorRegion } from "@/lib/region";
+import {
+ getMovieExtras,
+ getTvExtras,
+ type MovieExtras,
+ TmdbError,
+ type TvExtras,
+} from "@/lib/tmdb";
+
+import { AgeRatingChip } from "./title-details";
+import { SECTION_HEADING_CLASS, SectionErrorLine } from "./title-section";
+import { TrailerButton } from "./trailer-button";
+import {
+ WhereToWatch,
+ WhereToWatchError,
+ WhereToWatchSkeleton,
+} from "./where-to-watch";
+
+/**
+ * The title page sections fed by the extras read (spec 0022, AC-11 to
+ * AC-14, AC-18), shared by the movie and show pages.
+ *
+ * Each slot is its own async Server Component inside its own Suspense
+ * boundary and calls `readExtras` itself. The calls share one read: the
+ * cached `getMovieExtras` or `getTvExtras` underneath, and React `cache()`
+ * on top, so one render asks once. The visitor's region is read only in the
+ * slots that need it, outside the cache and inside their boundaries, so the
+ * title pages keep their prerendered shells (AC-9, AC-10).
+ */
+
+/** Which extras read a slot makes, and the page a Retry reloads. */
+type TitleRef = { mediaType: MediaType; id: number };
+
+/** A `TitleRef` with the title's name, which the trailer dialog is labelled by. */
+type NamedTitleRef = TitleRef & { title: string };
+
+/**
+ * The title's extras, or null when TMDB failed, a 404 included (AC-18). A
+ * `TmdbError` stays inside the slot that asked; anything else is a bug and
+ * is rethrown.
+ */
+const readExtras = cache(
+ async (
+ mediaType: TitleRef["mediaType"],
+ id: number,
+ ): Promise => {
+ try {
+ return mediaType === "movie"
+ ? await getMovieExtras(id)
+ : await getTvExtras(id);
+ } catch (error) {
+ if (!(error instanceof TmdbError)) throw error;
+ return null;
+ }
+ },
+);
+
+/**
+ * The hero's Trailer button (AC-11), or nothing: while the extras load,
+ * when they failed, and when the title has no usable trailer.
+ */
+function TrailerSlot(props: NamedTitleRef) {
+ return (
+
+
+
+ );
+}
+
+/**
+ * The trailer slot's body. Exported apart from its Suspense boundary so the
+ * tests can await it as the async Server Component it is; pages render
+ * `TrailerSlot`.
+ */
+async function TrailerSlotContent({ mediaType, id, title }: NamedTitleRef) {
+ const trailer = (await readExtras(mediaType, id))?.trailer ?? null;
+ if (trailer === null) return null;
+ return (
+
+ );
+}
+
+/**
+ * The hero's age rating chip for the visitor's country (AC-13), or nothing:
+ * while loading, on failure, and when that country has no rating.
+ */
+function AgeRatingSlot(props: TitleRef) {
+ return (
+
+
+
+ );
+}
+
+/**
+ * The age rating slot's body. Exported apart from its Suspense boundary for
+ * the tests, like `TrailerSlotContent`; pages render `AgeRatingSlot`. It
+ * reads the region here, never above the boundary (AC-9).
+ */
+async function AgeRatingSlotContent({ mediaType, id }: TitleRef) {
+ const [extras, region] = await Promise.all([
+ readExtras(mediaType, id),
+ getVisitorRegion(),
+ ]);
+ const rating = extras?.ageRatings[region.code];
+ if (rating === undefined) return null;
+ return ;
+}
+
+/** Where to watch in the visitor's country, with its own states (AC-12, AC-18). */
+function WhereToWatchSection(props: TitleRef) {
+ return (
+ }>
+
+
+ );
+}
+
+/**
+ * Where to watch's body. Exported apart from its Suspense boundary for the
+ * tests, like `TrailerSlotContent`; pages render `WhereToWatchSection`. It
+ * reads the region here, never above the boundary (AC-9).
+ */
+async function WhereToWatchContent(props: TitleRef) {
+ const [extras, region] = await Promise.all([
+ readExtras(props.mediaType, props.id),
+ getVisitorRegion(),
+ ]);
+ if (extras === null) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+}
+
+/**
+ * More like this (AC-14): up to 12 of TMDB's recommendations in the home
+ * row card, through the same `CatalogListCards` as a landing row, so each
+ * card carries the visitor's tracked, planned or watched status. No See all,
+ * since TMDB's recommendations have no list page here. With none, the whole
+ * section is left out; on failure it keeps its heading with a one line
+ * error and Retry.
+ */
+function MoreLikeThisSection(props: TitleRef) {
+ return (
+
+
+
+ }
+ >
+
+
+ );
+}
+
+/**
+ * More like this's body. Exported apart from its Suspense boundary for the
+ * tests, like `TrailerSlotContent`; pages render `MoreLikeThisSection`.
+ */
+async function MoreLikeThisContent(props: TitleRef) {
+ const extras = await readExtras(props.mediaType, props.id);
+ if (extras === null) {
+ return (
+
+
+
+ );
+ }
+ if (extras.recommendations.paged.results.length === 0) return null;
+
+ return (
+
+
+
+ );
+}
+
+/** The section, its heading and the row's arrow scroller, in every state. */
+function MoreLikeThisFrame({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ More like this
+
+ }
+ seeAll={null}
+ >
+ {children}
+
+
+ );
+}
+
+export {
+ AgeRatingSlot,
+ AgeRatingSlotContent,
+ MoreLikeThisContent,
+ MoreLikeThisSection,
+ TrailerSlot,
+ TrailerSlotContent,
+ WhereToWatchContent,
+ WhereToWatchSection,
+};
diff --git a/components/catalog/title-section.tsx b/components/catalog/title-section.tsx
new file mode 100644
index 0000000..3fba6ec
--- /dev/null
+++ b/components/catalog/title-section.tsx
@@ -0,0 +1,35 @@
+import { RetryLink } from "@/components/retry-link";
+
+/**
+ * The h2 look every title page section shares: Overview, Seasons, Where to
+ * watch, Cast, More like this and Facts (spec 0006, spec 0009, spec 0022).
+ * One constant, so a new section cannot drift from the old ones.
+ */
+export const SECTION_HEADING_CLASS =
+ "text-xl leading-tight font-bold text-foreground md:text-2xl";
+
+/**
+ * The one line a title page section shows when the extras read failed, with
+ * a full page Retry (spec 0022, AC-18). It names no cause: a 404, a timeout
+ * and a bad response all land here, and "didn't respond" would be untrue
+ * for the first and the last.
+ *
+ * @param what What failed to load, as it reads after "Couldn't load".
+ * @param href The title page, which the Retry reloads in full.
+ */
+export function SectionErrorLine({
+ what,
+ href,
+}: {
+ what: string;
+ href: string;
+}) {
+ return (
+
+
+ Couldn't load {what} from TMDB.
+
+
+
+ Not streaming in {region.name} right now.
+
+ ) : (
+
+ {groups.map((group) => (
+
+ ))}
+
+
{label}
+
+ {providers.map((provider) => (
+ -
+
+
+ ))}
+
+
+ {region === null
+ ? "Where to watch"
+ : `Where to watch in ${region.name}`}
+
+ {children}
+
+ );
+}
+
+/**
+ * The section while the extras load (AC-18): one group's label and a row of
+ * logo tiles at their size, so the usual height is held.
+ */
+function WhereToWatchSkeleton() {
+ return (
+
+
+
+
+ {Array.from({ length: 4 }, (_, index) => (
+
+ ))}
+
+
+ Loading where to watch
+
+
+ );
+}
+
+/** The extras read failed (AC-18): one line and a full page Retry. */
+function WhereToWatchError({ region, href }: { region: Region; href: string }) {
+ return (
+
+
+
+ );
+}
+
+export { WhereToWatch, WhereToWatchError, WhereToWatchSkeleton };
diff --git a/components/library/library-grid.tsx b/components/library/library-grid.tsx
index c0aad35..fad14a9 100644
--- a/components/library/library-grid.tsx
+++ b/components/library/library-grid.tsx
@@ -10,7 +10,7 @@ import {
setMovieWatched,
setMovieWatchlist,
} from "@/app/movies/actions";
-import { PosterGrid } from "@/components/poster-grid";
+import { POSTER_GRID_EAGER, PosterGrid } from "@/components/poster-grid";
import {
runUndoInToast,
settleResultCall,
@@ -38,12 +38,6 @@ import {
libraryItemKey,
} from "./types";
-/**
- * Cards whose posters load eagerly: one full row at the widest grid, as on
- * `/movies`.
- */
-const EAGER_POSTERS = 4;
-
/**
* The movie grid on `/watchlist`, `/upcoming` and `/watched`, and everything
* a removal does (spec 0008, AC-5 to AC-7, AC-16, AC-18; spec 0020, AC-13).
@@ -221,7 +215,7 @@ function LibraryGrid({
list={list}
item={item}
onRemove={() => remove(item)}
- priority={index < EAGER_POSTERS}
+ priority={index < POSTER_GRID_EAGER.catalog}
/>
);
diff --git a/components/library/library-panels.tsx b/components/library/library-panels.tsx
index 8888aa6..7477378 100644
--- a/components/library/library-panels.tsx
+++ b/components/library/library-panels.tsx
@@ -232,8 +232,8 @@ function LoadFailed({
}
/**
- * The static shell's stand in for the list: one row of cards, two below `md`
- * and four from it. The real count is unknown until the read, and a full page
+ * The static shell's stand in for the list: one row of cards at the current
+ * column count, 2 up to 6 (spec 0022, AC-6). The real count is unknown until the read, and a full page
* of placeholders made a short library collapse by several rows when it
* arrived (prompts/grid-tabs-footer-legend.md); one row is the smallest
* honest guess and never wraps.
@@ -251,5 +251,12 @@ export function LibrarySkeleton() {
);
}
-/** Each card's visibility in that row: the last two show only from `md`. */
-const ROW_CARD_VISIBILITY = ["", "", "hidden md:block", "hidden md:block"];
+/** Each card's visibility in that row: one more card at each column step. */
+const ROW_CARD_VISIBILITY = [
+ "",
+ "",
+ "hidden sm:block",
+ "hidden md:block",
+ "hidden lg:block",
+ "hidden xl:block",
+];
diff --git a/components/library/show-library-tab.tsx b/components/library/show-library-tab.tsx
index 831a891..1c73dba 100644
--- a/components/library/show-library-tab.tsx
+++ b/components/library/show-library-tab.tsx
@@ -1,5 +1,5 @@
import { PaginationLinks } from "@/components/pagination-links";
-import { PosterGrid } from "@/components/poster-grid";
+import { POSTER_GRID_EAGER, PosterGrid } from "@/components/poster-grid";
import {
getShowLibraryTab,
type LibraryTabQuery,
@@ -21,9 +21,6 @@ import { UpcomingShowCard, WatchedShowCard } from "./show-cards";
import type { LibraryList } from "./types";
import { WatchlistShowCard } from "./watchlist-show-card";
-/** Posters that load eagerly: one full row at the widest grid. */
-const EAGER_POSTERS = 4;
-
/**
* A show tab (AC-9, AC-11, AC-12, AC-15 to AC-18): Watchlist with Mark
* watched cards; Upcoming with dated and Date TBA cards; Watched with the
@@ -73,7 +70,7 @@ export async function showLibraryTab(query: LibraryTabQuery) {
itemId={itemId}
today={today}
rating={ratings.get(card.showId) ?? null}
- priority={index < EAGER_POSTERS}
+ priority={index < POSTER_GRID_EAGER.catalog}
/>
);
diff --git a/components/movie/cast-row.test.tsx b/components/movie/cast-row.test.tsx
index 2a30ce1..2910bd0 100644
--- a/components/movie/cast-row.test.tsx
+++ b/components/movie/cast-row.test.tsx
@@ -1,10 +1,10 @@
import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
-import { CastRow } from "@/components/movie/cast-row";
+import { CastRow, CastSection } from "@/components/movie/cast-row";
import type { CastMember } from "@/lib/tmdb";
-/** covers: spec 0006, AC-4, AC-6 */
+/** covers: spec 0006, AC-4, AC-6 (the row drawn as a carousel since spec 0022) */
function member(index: number, overrides: Partial = {}) {
return {
personId: index,
@@ -17,6 +17,17 @@ function member(index: number, overrides: Partial = {}) {
};
}
+beforeEach(() => {
+ // The carousel's scroller measures itself; jsdom has no ResizeObserver.
+ vi.stubGlobal(
+ "ResizeObserver",
+ class {
+ observe() {}
+ disconnect() {}
+ },
+ );
+});
+
describe("CastRow", () => {
it("shows at most the first 12, in billing order", () => {
render( member(i))} />);
@@ -27,11 +38,35 @@ describe("CastRow", () => {
expect(items[11]).toHaveTextContent("Actor 11");
});
- it("is a labelled region the keyboard can reach", () => {
+ it("is a carousel: a Cast heading and a labelled region the keyboard can reach", () => {
+ render(
+
+
+ ,
+ );
+
+ expect(screen.getByRole("heading", { name: "Cast" })).toBeVisible();
+ // The section is named by its heading; the scroll region inside it is
+ // the focusable one, as on every carousel row.
+ const region = screen
+ .getAllByRole("region", { name: "Cast" })
+ .find((element) => element.getAttribute("tabindex") === "0");
+ expect(region).toBeDefined();
+ expect(region).toContainElement(screen.getByRole("listitem"));
+ });
+
+ it("draws each person like a row media card", () => {
render();
- const region = screen.getByRole("region", { name: "Cast" });
- expect(region).toHaveAttribute("tabindex", "0");
+ const item = screen.getByRole("listitem");
+ expect(item).toHaveClass("w-[140px]", "md:w-[180px]", "snap-start");
+ expect(
+ screen.getByRole("heading", { level: 3, name: "Actor 1" }),
+ ).toBeVisible();
+ expect(item.querySelector("img")).toHaveAttribute(
+ "sizes",
+ "(min-width: 768px) 180px, 140px",
+ );
});
it("has no links, because there is no person page", () => {
@@ -49,7 +84,8 @@ describe("CastRow", () => {
container.querySelector('[data-slot="profile-fallback"]'),
).toBeInTheDocument();
expect(container.querySelectorAll("img")).toHaveLength(0);
- expect(screen.getByRole("listitem").querySelectorAll("p")).toHaveLength(1);
+ // The name is the caption; with no character there is no second line.
+ expect(screen.getByRole("listitem").querySelectorAll("p")).toHaveLength(0);
});
it("says so when TMDB lists no cast", () => {
diff --git a/components/movie/cast-row.tsx b/components/movie/cast-row.tsx
index a9f4727..e49593b 100644
--- a/components/movie/cast-row.tsx
+++ b/components/movie/cast-row.tsx
@@ -1,6 +1,13 @@
import { UserRoundIcon } from "lucide-react";
import Image from "next/image";
+import type * as React from "react";
+import {
+ ROW_ITEM_CLASS,
+ ROW_POSTER_SIZES,
+} from "@/components/catalog/carousel-row-states";
+import { CarouselScroller } from "@/components/catalog/carousel-scroller";
+import { SECTION_HEADING_CLASS } from "@/components/catalog/title-section";
import type { CastMember } from "@/lib/tmdb";
/**
@@ -11,11 +18,36 @@ import type { CastMember } from "@/lib/tmdb";
const CAST_LIMIT = 12;
/**
- * The top billed cast as one horizontal row (spec 0006, AC-6).
+ * The Cast section as a carousel row, the same frame as a landing row and
+ * More like this: the heading with the arrow buttons from `md`, then a
+ * focusable, labelled scroll region that touch, trackpad and the arrow keys
+ * scroll natively. It never widens the page (spec 0006, AC-14).
*
- * The scroll container is a focusable, labelled region, so a keyboard user can
- * tab to it and scroll it with the arrow keys; touch and trackpad scroll it
- * natively. The row scrolls inside itself and never widens the page (AC-14).
+ * The cards stream in as `children`, so the show page can keep its cast in
+ * its own Suspense boundary under a prerendered heading.
+ */
+function CastSection({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ Cast
+
+ }
+ seeAll={null}
+ >
+ {children}
+
+
+ );
+}
+
+/**
+ * The top billed cast as row cards (spec 0006, AC-6), drawn like the media
+ * cards beside them: the 2:3 frame and rim at a row card's width, the name as
+ * the caption and the character on the line under it.
*
* Cards are not links: there is no person page to go to, and a link that
* leads nowhere useful is worse than none. The photo is decorative (`alt=""`)
@@ -37,58 +69,52 @@ function CastRow({
}
return (
-
-
- {cast.slice(0, CAST_LIMIT).map((member) => (
- -
-
- {member.profileUrl ? (
-
- ) : (
-
-
-
- )}
-
+ {cast.slice(0, CAST_LIMIT).map((member) => (
+ -
+
+ {member.profileUrl ? (
+
-
-
-
- {member.name}
-
- {member.character ? (
-
- {member.character}
-
- ) : null}
-
- ))}
-
-
+ ) : (
+
+
+
+ )}
+
+
+ {member.name}
+
+ {member.character ? (
+
+ {member.character}
+
+ ) : null}
+
+ ))}
+
);
}
-export { CAST_LIMIT, CastRow };
+export { CAST_LIMIT, CastRow, CastSection };
diff --git a/components/movie/movie-detail-skeleton.tsx b/components/movie/movie-detail-skeleton.tsx
index c848ebc..97455b7 100644
--- a/components/movie/movie-detail-skeleton.tsx
+++ b/components/movie/movie-detail-skeleton.tsx
@@ -1,5 +1,5 @@
import {
- CastRowSkeleton,
+ CastRowSkeletonFrame,
DetailHeroSkeleton,
OverviewSkeleton,
SectionHeadingSkeleton,
@@ -24,7 +24,7 @@ function MovieDetailSkeleton() {
-
+