peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): the Plex detail poster keeps its 2:3, and a long crew shows its first names

Browse Source 
The hero's grid row is as tall as the crew column beside the text, and the poster, a flex child,
stretched to it: a 2:3 picture drawn ~175x590 and cropped. It now aligns to the top, and a wide hero
gives the movie and show poster a bigger rung (w-56). The crew, the hero's tallest part, shows its
first 6 names and a 'Show N more' toggle; a list of 8 or fewer shows whole.
This commit is contained in:
peter
2026-10-02 02:37:20 +02:00
parent 78fdcda6bb
commit 20010178b0
8 changed files with 90 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/DESIGN.md
+1
View File
@@ -701,3 +701,4 @@ of a full-width panel and nothing on the right.
| 2026-10-01 | E31 Plex info and show pages | A second column for the facts, keywords and crew, as the person page; a collection's hero sized to its content | Full-width text; a larger poster and fanart | The right ~40% was empty; one composition for every media page |
| 2026-10-01 | E31 Nav rail rows are links | Each page row is a real link: a middle-click or Ctrl-click opens the page in a new tab | A button | The owner: open a page in a tab of its own, as on any site |
| 2026-10-02 | E31 Plex detail second column (refined) | The facts over the key crew beside the text; the keywords, chips that filter like the genres, under the text; the show page gets all three too | All three in the column, as the mockup drew it | At 20 keywords and 12 crew the column ran to twice the text's height (849 vs ~400 px at 133%): a hole under the text instead of beside it |
| 2026-10-02 | E31 Plex detail poster and crew | The movie and show poster keeps its 2:3 and grows a rung in a wide hero (w-56 at a 64rem panel); the crew shows its first 6 names and "Show N more" (a list of 8 or fewer shows whole) | Poster stretched to the row; a "More" on the keywords | The row is as tall as the crew column, so the poster drew ~175×590 and cropped; the crew, not the keywords, set the hero's height |
frontend/src/components/PlexInfo.dom.test.tsx
+50
View File
@@ -27,6 +27,7 @@ vi.mock("react-i18next", async (importOriginal) => {
});
import PlexInfo from "./PlexInfo";
import { CREW_SHOWN } from "./plexDetailAside";
import type { PlexItemDetail } from "../lib/api";
afterEach(cleanup);
@@ -250,6 +251,55 @@ describe("PlexInfo — the hero's second column (page)", () => {
expect(document.querySelector(`[class*="${TWO_COLUMNS}"]`)).toBeNull();
expect(follows(heading("Test Movie"), kw)).toBe(true);
});
// E31: the hero's grid row is as tall as its taller column — the crew, beside the text — and the poster,
// a flex child, stretched to it: a 2:3 picture drawn ~175×590 and cropped. It keeps its own ratio.
it("keeps the poster at its own height, not stretched to the row", () => {
wrap(<PlexInfo onPlayItem={noop} detail={full} variant="page" />);
const poster = document.querySelector<HTMLImageElement>(`img[src="${detail.thumb}"]`)!;
expect(poster.className).toContain("aspect-2/3");
expect(poster.className.split(/\s+/)).toContain("self-start");
});
// E31 (the owner's call): twelve names ran the column ~170px past the text. The first CREW_SHOWN show,
// the rest behind "Show N more"; a list barely longer shows whole.
it("shows the first crew names and opens the rest on demand", () => {
const crew = Array.from({ length: 12 }, (_, i) => ({ name: `Person ${i}`, job: "Producer" }));
wrap(
<PlexInfo
onPlayItem={noop}
detail={{ ...full, tmdb: { ...full.tmdb!, crew } }}
variant="page"
/>,
);
const aside = screen.getByTestId("detail-aside");
expect(aside.textContent).toContain(`Person ${CREW_SHOWN - 1}`);
expect(aside.textContent).not.toContain(`Person ${CREW_SHOWN}`);
const more = screen.getByRole("button", { name: "plex.info.crewMore" });
expect(more.getAttribute("aria-expanded")).toBe("false");
fireEvent.click(more);
expect(aside.textContent).toContain("Person 11");
const less = screen.getByRole("button", { name: "plex.info.crewLess" });
expect(less.getAttribute("aria-expanded")).toBe("true");
fireEvent.click(less);
expect(aside.textContent).not.toContain(`Person ${CREW_SHOWN}`);
});
it("shows a crew only a little longer than that whole, with no toggle", () => {
const crew = Array.from({ length: CREW_SHOWN + 2 }, (_, i) => ({
name: `Person ${i}`,
job: "Producer",
}));
wrap(
<PlexInfo
onPlayItem={noop}
detail={{ ...full, tmdb: { ...full.tmdb!, crew } }}
variant="page"
/>,
);
expect(screen.getByTestId("detail-aside").textContent).toContain(`Person ${CREW_SHOWN + 1}`);
expect(screen.queryByRole("button", { name: "plex.info.crewMore" })).toBeNull();
});
});
// E28 review D1 + D2: a collection sibling is a Plex card like any other — its "…" menu, its watched
frontend/src/components/PlexInfo.tsx
+2 -1
View File
@@ -9,6 +9,7 @@ import { notifyActionError } from "../lib/actionErrors";
import { DetailCustomizeMenu, Filterable, PrefToggle } from "./plexDetailUi";
import { DetailAside, DetailAsideToggles, DetailKeywords } from "./plexDetailAside";
import {
DETAIL_POSTER,
tmdbBackdropUrl,
useCrossfadeBackdrop,
useDetailAside,
@@ -366,7 +367,7 @@ export default function PlexInfo({
<img
src={detail.thumb}
alt=""
className={`shrink-0 rounded-xl border border-border object-cover ${overlay ? "w-24 sm:w-28" : "w-32 sm:w-44"} aspect-2/3`}
className={`shrink-0 self-start rounded-xl border border-border object-cover ${overlay ? "w-24 sm:w-28" : DETAIL_POSTER} aspect-2/3`}
/>
<div className={`min-w-0 flex-1 ${overlay ? "text-white/90" : ""}`}>
frontend/src/components/plexDetailAside.tsx
+24 -2
View File
@@ -1,10 +1,11 @@
import type { ReactNode } from "react";
import { useState, type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import type { PlexFilters } from "../lib/api";
import { formatMoney, formatRuntime } from "../lib/format";
import type { AsideSection, DetailAsideState, DetailFacts } from "../lib/plexDetail";
import { regionName, vocab } from "../lib/vocab";
import { Filterable, PrefToggle } from "./plexDetailUi";
import { Button } from "./ui/Button";
import { Pressable } from "./ui/Pressable";
// The detail pages' second column (E31, the owner's pick "A"): the TMDB facts and key crew of a movie or
@@ -180,6 +181,12 @@ export function DetailKeywords({
);
}
// The crew shows its first CREW_SHOWN names and a "Show N more" that opens the rest: the column beside the
// text is the hero's tallest part, and twelve names ran it ~170px past the text (E31, the owner's call).
// A list only a little longer than that shows whole: a toggle that hides one or two names saves no room.
export const CREW_SHOWN = 6;
const CREW_FOLD_OVER = CREW_SHOWN + 2;
// The TMDB key crew (E5 S5) — Director / Writer / Producer / …, each opening their person page. It
// complements the hero's Director line (which comes from Plex directly).
function CrewSection({
@@ -190,12 +197,15 @@ function CrewSection({
onOpenPerson?: (name: string) => void;
}) {
const { t } = useTranslation();
const [all, setAll] = useState(false);
const folds = crew.length > CREW_FOLD_OVER;
const shown = folds && !all ? crew.slice(0, CREW_SHOWN) : crew;
return (
<section>
<h2 className="mb-3 text-sm font-semibold">{t("plex.info.crew")}</h2>
{/* As many name columns as the column holds: two in the hero's side column, one when narrow. */}
<div className="grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-x-3 gap-y-1.5">
{crew.map((c, i) => (
{shown.map((c, i) => (
<div key={`${c.name}:${c.job}:${i}`} className="min-w-0">
{onOpenPerson ? (
<Pressable
@@ -213,6 +223,18 @@ function CrewSection({
</div>
))}
</div>
{folds && (
<Button
variant={all ? "link-muted" : "link"}
aria-expanded={all}
onClick={() => setAll((v) => !v)}
className="mt-2 text-sm"
>
{all
? t("plex.info.crewLess")
: t("plex.info.crewMore", { count: crew.length - CREW_SHOWN })}
</Button>
)}
</section>
);
}
frontend/src/components/plexDetailUi.tsx
+2 -1
View File
@@ -9,6 +9,7 @@ import {
type LucideIcon,
} from "lucide-react";
import { useDismiss } from "../lib/useDismiss";
import { DETAIL_POSTER } from "../lib/plexDetail";
import { Button } from "./ui/Button";
import { IconButton } from "./ui/IconButton";
import { Pressable } from "./ui/Pressable";
@@ -239,7 +240,7 @@ export function DetailHero({
posterDisabled,
showPlayOverlay,
onPosterClick,
posterSizeClass = "w-32 sm:w-44",
posterSizeClass = DETAIL_POSTER,
customizeMenu,
aside,
children,
frontend/src/i18n/locales/en/plex.json
+3
View File
@@ -277,6 +277,9 @@
"audience": "Audience",
"keywords": "Keywords",
"crew": "Crew",
"crewMore_one": "Show {{count}} more",
"crewMore_other": "Show {{count}} more",
"crewLess": "Show less",
"filterValue": "Filter by “{{name}}”",
"facts": {
"title": "Details",
frontend/src/i18n/locales/hu/plex.json
+3
View File
@@ -277,6 +277,9 @@
"audience": "Közönség",
"keywords": "Kulcsszavak",
"crew": "Stáb",
"crewMore_one": "Még {{count}} mutatása",
"crewMore_other": "Még {{count}} mutatása",
"crewLess": "Kevesebb",
"filterValue": "Szűrés erre: „{{name}}”",
"facts": {
"title": "Részletek",
frontend/src/lib/plexDetail.ts
+5
View File
@@ -42,6 +42,11 @@ export interface DetailFacts {
export type AsideSection = "facts" | "keywords" | "crew";
// The movie and the show page's poster. It keeps its 2:3 (self-start, never stretched to the row: the
// second column beside the text runs taller than the poster), and a wide hero (the @container
// panel at 64rem+) gives it a bigger rung, so it is not a stamp beside a full text column (E31).
export const DETAIL_POSTER = "w-32 sm:w-44 @5xl:w-56";
// The detail pages' second column (plexDetailAside, E31): which of its three sections — the TMDB facts,
// keywords and key crew — have something to show, which the reader keeps on (three per-user prefs,
// default ON, the same on the movie and the show page), and the toggles' flips.