feat(plex): the person page in two columns; a bio on its way holds its place (E30 S6)
The biography sat at reading width in the left half of a full-width panel with nothing on the right. Now the person (headshot, facts, the bio clamped to eight lines with More / Less when it is cut) is on the left and "Known for" on the right; with fewer than four titles the rail takes only its posters' width. One column where the panel is narrow (200% zoom, the largest text size). While the server fetches a bio (`enriching`), the page shows a paragraph skeleton (a new "text" shape of LoadingState) and asks again every 1.5 s for up to 20 s. The view is keyed by the person's name, so another person starts fresh.
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { lazy, Suspense, useState } from "react";
|
||||
import { lazy, Suspense, useLayoutEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
@@ -119,6 +119,53 @@ export function PlexInfoView({
|
||||
);
|
||||
}
|
||||
|
||||
// How often, and for how long, a person page asks again for a bio that is on its way (E30 S6). The
|
||||
// background fetch takes a second or two; twenty seconds covers a slow TMDB without waiting on a dead one.
|
||||
const BIO_POLL_MS = 1500;
|
||||
// From this many "Known for" titles the rail gets half the hero; fewer (about one person in five) get
|
||||
// just their posters' width, so a lone poster doesn't sit in an empty half (E30 S6, measured).
|
||||
const KNOWN_FOR_HALF = 4;
|
||||
const BIO_WAIT_MS = 20_000;
|
||||
|
||||
/** A person's biography, clamped to a few lines with a More / Less toggle — offered only when the
|
||||
* text is actually cut (measured, so a short bio carries no dead button). */
|
||||
function PersonBio({ text }: { text: string }) {
|
||||
const { t } = useTranslation();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [clipped, setClipped] = useState(false);
|
||||
const ref = useRef<HTMLParagraphElement>(null);
|
||||
useLayoutEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el || expanded) return;
|
||||
// Re-measured on a resize: the text-size slider and the window both change where the cut falls.
|
||||
const measure = () => setClipped(el.scrollHeight > el.clientHeight + 1);
|
||||
measure();
|
||||
const ro = new ResizeObserver(measure);
|
||||
ro.observe(el);
|
||||
return () => ro.disconnect();
|
||||
}, [text, expanded]);
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<p
|
||||
ref={ref}
|
||||
className={`measure whitespace-pre-line text-sm leading-relaxed text-muted ${expanded ? "" : "line-clamp-8"}`}
|
||||
>
|
||||
{text}
|
||||
</p>
|
||||
{(clipped || expanded) && (
|
||||
<Button
|
||||
variant="link"
|
||||
aria-expanded={expanded}
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
className="mt-1 text-xs"
|
||||
>
|
||||
{expanded ? t("plex.person.less") : t("plex.person.more")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Actor detail: a cast/crew member's filmography (movies + shows in one place) ---------------
|
||||
// The inverse of the cast-name → library-filter link: opened from a cast row (info/show page), it
|
||||
// shows the person's headshot + name, a "filter the library by them" action, and their titles as two
|
||||
@@ -146,7 +193,18 @@ export function PlexPersonView({
|
||||
const menu = useContextMenu<PlexCard>();
|
||||
const lang = plexLang(i18n.language);
|
||||
const personKey = qk.plexPerson(name, lang);
|
||||
const q = useQuery({ queryKey: personKey, queryFn: () => api.plexPerson(name, lang) });
|
||||
// A person the people_enrich job hasn't reached yet gets their bio fetched when the page opens (E30
|
||||
// S6); the answer says so (`enriching`) and the page asks again until it lands — for a while, not
|
||||
// forever: past BIO_WAIT_MS a TMDB that is down stops being waited on (the next open tries again).
|
||||
const [openedAt] = useState(() => Date.now());
|
||||
const q = useQuery({
|
||||
queryKey: personKey,
|
||||
queryFn: () => api.plexPerson(name, lang),
|
||||
refetchInterval: (query) =>
|
||||
query.state.data?.enriching && query.state.dataUpdatedAt - openedAt < BIO_WAIT_MS
|
||||
? BIO_POLL_MS
|
||||
: false,
|
||||
});
|
||||
// E5 S8: cross-dissolve the backdrop through the person's films' art (the touch the roadmap calls
|
||||
// out). Reuses the shared art-backdrop / crossfade prefs the detail pages own — no per-page control.
|
||||
const { artBg, crossfade } = useDetailPrefs();
|
||||
@@ -230,83 +288,106 @@ export function PlexPersonView({
|
||||
<LoadingState label={t("plex.loading")} />
|
||||
) : (
|
||||
<div className="p-4">
|
||||
{/* Hero: headshot + name + TMDB bio/birth facts (E5 S6) + a "filter the library" action. */}
|
||||
<section className={`${SURFACE.panel} p-4 sm:p-5 mb-6`}>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="h-24 w-24 shrink-0 overflow-hidden rounded-full border border-border bg-surface">
|
||||
{d.photo ? (
|
||||
<img src={d.photo} alt="" className="h-full w-full object-cover" />
|
||||
) : (
|
||||
<div className="grid h-full w-full place-items-center opacity-40">
|
||||
<User className="h-8 w-8" />
|
||||
{/* Hero (E30 S6, owner pick "A"): the person — headshot, facts, a clamped bio — on the left,
|
||||
what they are known for on the right, so the bio doesn't sit in a full-width panel with an
|
||||
empty half beside it. One column where the panel is narrow. */}
|
||||
<section className={`${SURFACE.panel} @container p-4 sm:p-5 mb-6`}>
|
||||
<div
|
||||
className={
|
||||
d.known_for.length >= KNOWN_FOR_HALF
|
||||
? "grid gap-6 @3xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]"
|
||||
: d.known_for.length > 0
|
||||
? "grid gap-6 @3xl:grid-cols-[minmax(0,1fr)_auto]"
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="h-24 w-24 shrink-0 overflow-hidden rounded-full border border-border bg-surface">
|
||||
{d.photo ? (
|
||||
<img src={d.photo} alt="" className="h-full w-full object-cover" />
|
||||
) : (
|
||||
<div className="grid h-full w-full place-items-center opacity-40">
|
||||
<User className="h-8 w-8" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<PageHeading className="text-xl font-semibold">{d.name}</PageHeading>
|
||||
{d.known_for_department && (
|
||||
<p className="text-xs font-medium text-accent">
|
||||
{vocab(t, "department", d.known_for_department)}
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-1 mb-2 text-xs text-muted">
|
||||
{t("plex.person.credits", { movies: d.movies.length, shows: d.shows.length })}
|
||||
</p>
|
||||
<div className="mb-2 space-y-0.5 text-xs text-muted">
|
||||
{(d.birthday || d.place_of_birth) && (
|
||||
<p>
|
||||
<span className="text-fg/70">{t("plex.person.born")}:</span>{" "}
|
||||
{[formatDate(d.birthday, lang), d.place_of_birth].filter(Boolean).join(" · ")}
|
||||
<div className="min-w-0 flex-1">
|
||||
<PageHeading className="text-xl font-semibold">{d.name}</PageHeading>
|
||||
{d.known_for_department && (
|
||||
<p className="text-xs font-medium text-accent">
|
||||
{vocab(t, "department", d.known_for_department)}
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-1 mb-2 text-xs text-muted">
|
||||
{t("plex.person.credits", { movies: d.movies.length, shows: d.shows.length })}
|
||||
</p>
|
||||
)}
|
||||
{d.deathday && (
|
||||
<p>
|
||||
<span className="text-fg/70">{t("plex.person.died")}:</span>{" "}
|
||||
{formatDate(d.deathday, lang)}
|
||||
</p>
|
||||
)}
|
||||
{d.also_known_as.length > 0 && (
|
||||
<p className="truncate">
|
||||
<span className="text-fg/70">{t("plex.person.aka")}:</span>{" "}
|
||||
{d.also_known_as.slice(0, 4).join(", ")}
|
||||
</p>
|
||||
)}
|
||||
<div className="mb-2 space-y-0.5 text-xs text-muted">
|
||||
{(d.birthday || d.place_of_birth) && (
|
||||
<p>
|
||||
<span className="text-fg/70">{t("plex.person.born")}:</span>{" "}
|
||||
{[formatDate(d.birthday, lang), d.place_of_birth]
|
||||
.filter(Boolean)
|
||||
.join(" · ")}
|
||||
</p>
|
||||
)}
|
||||
{d.deathday && (
|
||||
<p>
|
||||
<span className="text-fg/70">{t("plex.person.died")}:</span>{" "}
|
||||
{formatDate(d.deathday, lang)}
|
||||
</p>
|
||||
)}
|
||||
{d.also_known_as.length > 0 && (
|
||||
<p className="truncate">
|
||||
<span className="text-fg/70">{t("plex.person.aka")}:</span>{" "}
|
||||
{d.also_known_as.slice(0, 4).join(", ")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Chip onClick={() => onFilter({ actors: [d.name] })} className="font-medium">
|
||||
{t("plex.person.filterBy", { name: d.name })}
|
||||
</Chip>
|
||||
</div>
|
||||
</div>
|
||||
<Chip onClick={() => onFilter({ actors: [d.name] })} className="font-medium">
|
||||
{t("plex.person.filterBy", { name: d.name })}
|
||||
</Chip>
|
||||
</div>
|
||||
</div>
|
||||
{d.biography && (
|
||||
<p className="measure mt-4 whitespace-pre-line text-sm leading-relaxed text-muted">
|
||||
{d.biography}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* "Known for" — the person's most-popular titles that are in our library (E5 S6). */}
|
||||
{d.known_for.length > 0 && (
|
||||
<section className="mb-5">
|
||||
<Carousel
|
||||
title={t("plex.person.knownFor")}
|
||||
ariaLabel={t("plex.person.knownFor")}
|
||||
keyboardNav
|
||||
>
|
||||
{d.known_for.map((c, i) => (
|
||||
<div key={c.id} className="grid w-37.5 shrink-0 grid-cols-1">
|
||||
<PlexPosterCard
|
||||
shelf
|
||||
card={c}
|
||||
navIndex={i}
|
||||
onOpen={() => onOpenCard(c)}
|
||||
onToggleWatched={toggle}
|
||||
{...cardMenu(c)}
|
||||
{d.biography ? (
|
||||
<PersonBio text={d.biography} />
|
||||
) : (
|
||||
d.enriching &&
|
||||
q.dataUpdatedAt - openedAt < BIO_WAIT_MS && (
|
||||
<LoadingState
|
||||
shape="text"
|
||||
label={t("plex.person.bioLoading")}
|
||||
className="mt-4"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Carousel>
|
||||
</section>
|
||||
)}
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* "Known for" — the person's most-popular titles that are in our library (E5 S6). */}
|
||||
{d.known_for.length > 0 && (
|
||||
<div className="min-w-0">
|
||||
<Carousel
|
||||
title={t("plex.person.knownFor")}
|
||||
ariaLabel={t("plex.person.knownFor")}
|
||||
keyboardNav
|
||||
>
|
||||
{d.known_for.map((c, i) => (
|
||||
<div key={c.id} className="grid w-32 shrink-0 grid-cols-1">
|
||||
<PlexPosterCard
|
||||
shelf
|
||||
card={c}
|
||||
navIndex={i}
|
||||
onOpen={() => onOpenCard(c)}
|
||||
onToggleWatched={toggle}
|
||||
{...cardMenu(c)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Carousel>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{empty ? (
|
||||
<p className="text-sm text-muted">{t("plex.person.empty")}</p>
|
||||
|
||||
Reference in New Issue
Block a user