Florian Wilde
5cf4fc48a6
Die Posterkachel zog über lib/images.ts die serverseitige Cache-Logik in den Browser-Bundle, sobald sie aus einer Client-Komponente heraus gerendert wurde — der Build brach ab, sobald eine solche Seite dazukam. Die reine URL-Bildung liegt jetzt in lib/image-url.ts und darf überall verwendet werden; Abruf und Dateicache bleiben hinter server-only.
98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import { clsx } from "clsx";
|
|
import { posterUrl, type ImageSize } from "@/lib/image-url";
|
|
import { FlimmerMark } from "@/components/brand/FlimmerLogo";
|
|
|
|
/**
|
|
* Posterbild mit Rückfallebene.
|
|
*
|
|
* Nicht jeder Titel hat bei TMDB ein Poster, manuell angelegte schon gar
|
|
* nicht, und einzelne Pfade verschwinden mit der Zeit.
|
|
*
|
|
* Die Rückfallkachel liegt deshalb **dauerhaft darunter**, das Bild darüber:
|
|
* lädt es, verdeckt es die Kachel; lädt es nicht, bleibt die Kachel stehen.
|
|
* Bewusst ohne onError-Handler — ein Bild kann schon fehlschlagen, bevor React
|
|
* den Handler überhaupt angehängt hat. Das leere alt-Attribut sorgt dafür,
|
|
* dass ein kaputtes Bild in sich zusammenfällt statt ein Symbol zu zeigen;
|
|
* den Titel trägt der Container als aria-label.
|
|
*/
|
|
export function Poster({
|
|
path,
|
|
alt,
|
|
size = "w342",
|
|
className,
|
|
sizes = "(min-width: 1024px) 12rem, 40vw",
|
|
priority = false,
|
|
}: {
|
|
path: string | null | undefined;
|
|
alt: string;
|
|
size?: ImageSize;
|
|
className?: string;
|
|
sizes?: string;
|
|
priority?: boolean;
|
|
}) {
|
|
const url = posterUrl(path, size);
|
|
|
|
return (
|
|
<div
|
|
role="img"
|
|
aria-label={alt}
|
|
className={clsx(
|
|
"relative aspect-[2/3] w-full overflow-hidden rounded-[var(--radius-poster,0.875rem)] bg-[var(--fl-surface-2)]",
|
|
className,
|
|
)}
|
|
>
|
|
<div
|
|
aria-hidden
|
|
className="absolute inset-0 flex flex-col items-center justify-center gap-2 p-3 text-center"
|
|
style={{ backgroundImage: "var(--fl-gradient-soft)" }}
|
|
>
|
|
<FlimmerMark className="h-8 w-8 opacity-70" flat />
|
|
<span className="line-clamp-3 text-xs text-[var(--fl-muted)]">{alt}</span>
|
|
</div>
|
|
|
|
{url && (
|
|
// Bewusst <img> statt next/image: die Bilder laufen bereits über den
|
|
// eigenen Cache-Endpunkt, eine zweite Optimierungsschicht brächte dem
|
|
// selbst gehosteten Server nur zusätzliche Last.
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={url}
|
|
alt=""
|
|
sizes={sizes}
|
|
loading={priority ? "eager" : "lazy"}
|
|
decoding="async"
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Breitbild-Variante für Kopfbereiche (Backdrop). */
|
|
export function Backdrop({
|
|
path,
|
|
alt,
|
|
className,
|
|
}: {
|
|
path: string | null | undefined;
|
|
alt: string;
|
|
className?: string;
|
|
}) {
|
|
const url = posterUrl(path, "w1280");
|
|
if (!url) return null;
|
|
|
|
return (
|
|
<div className={clsx("absolute inset-0 overflow-hidden", className)} aria-hidden>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={url} alt="" className="h-full w-full object-cover opacity-25" />
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
background:
|
|
"linear-gradient(to top, var(--fl-bg) 8%, color-mix(in oklab, var(--fl-bg) 70%, transparent) 55%, color-mix(in oklab, var(--fl-bg) 30%, transparent) 100%)",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|