feat: Suchseite und Titel-Detailseite
Die Suchanfrage steht in der URL: Treffer sind teilbar, der Zurück-Knopf funktioniert, und die Suche selbst bleibt eine Server-Komponente. Posterkacheln zeigen bei fehlendem Bild die Bildmarke über dem Signaturverlauf. Die Rückfalldarstellung liegt dauerhaft unter dem Bild — ein onError-Handler hilft nicht, wenn das Bild schon vor der Hydration scheitert, und der Browser zeigt dann sein kaputtes Bildsymbol.
This commit is contained in:
Florian Wilde
@@ -0,0 +1,97 @@
|
||||
import { clsx } from "clsx";
|
||||
import { posterUrl, type ImageSize } from "@/lib/images";
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { posterUrl } from "@/lib/images";
|
||||
|
||||
/**
|
||||
* Streamingdienste als Badges.
|
||||
*
|
||||
* Farbe und Logo kommen aus dem Katalog; Dienste ohne hinterlegte Akzentfarbe
|
||||
* bekommen einen neutralen Ton, damit die Reihe trotzdem ruhig aussieht.
|
||||
*/
|
||||
|
||||
export type ProviderBadgeData = {
|
||||
id: string;
|
||||
name: string;
|
||||
logoPath: string | null;
|
||||
color: string | null;
|
||||
};
|
||||
|
||||
const KIND_LABEL = {
|
||||
FLATRATE: "Im Abo",
|
||||
FREE: "Kostenlos",
|
||||
ADS: "Mit Werbung",
|
||||
RENT: "Leihen",
|
||||
BUY: "Kaufen",
|
||||
} as const;
|
||||
|
||||
export type ProviderKindKey = keyof typeof KIND_LABEL;
|
||||
|
||||
export function ProviderBadge({ provider }: { provider: ProviderBadgeData }) {
|
||||
const logo = posterUrl(provider.logoPath, "w92");
|
||||
const accent = provider.color ?? "var(--fl-border-strong)";
|
||||
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center gap-1.5 rounded-full border py-1 pl-1 pr-3 text-xs font-medium"
|
||||
style={{
|
||||
borderColor: `color-mix(in oklab, ${accent} 55%, transparent)`,
|
||||
backgroundColor: `color-mix(in oklab, ${accent} 14%, transparent)`,
|
||||
}}
|
||||
>
|
||||
{/* Farbpunkt liegt darunter; ein Logo, das nicht lädt, fällt in sich
|
||||
zusammen und gibt ihn wieder frei. */}
|
||||
<span className="relative h-5 w-5 shrink-0">
|
||||
<span
|
||||
aria-hidden
|
||||
className="absolute inset-0 rounded-full"
|
||||
style={{ backgroundColor: accent }}
|
||||
/>
|
||||
{logo && (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={logo}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="absolute inset-0 h-5 w-5 rounded-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-[var(--fl-text)]">{provider.name}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** Alle Verfügbarkeiten eines Titels, nach Art gruppiert. */
|
||||
export function ProviderList({
|
||||
groups,
|
||||
region,
|
||||
}: {
|
||||
groups: Partial<Record<ProviderKindKey, ProviderBadgeData[]>>;
|
||||
region: string;
|
||||
}) {
|
||||
const order: ProviderKindKey[] = ["FLATRATE", "FREE", "ADS", "RENT", "BUY"];
|
||||
const present = order.filter((kind) => (groups[kind]?.length ?? 0) > 0);
|
||||
|
||||
if (present.length === 0) {
|
||||
return (
|
||||
<p className="text-sm text-[var(--fl-faint)]">
|
||||
Für die Region {region} meldet TMDB derzeit keinen Streamingdienst.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{present.map((kind) => (
|
||||
<div key={kind} className="flex flex-wrap items-center gap-2">
|
||||
<span className="w-24 shrink-0 text-xs font-semibold uppercase tracking-wide text-[var(--fl-faint)]">
|
||||
{KIND_LABEL[kind]}
|
||||
</span>
|
||||
{groups[kind]?.map((provider) => (
|
||||
<ProviderBadge key={`${kind}-${provider.id}`} provider={provider} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState, useTransition } from "react";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { clsx } from "clsx";
|
||||
|
||||
/**
|
||||
* Suchfeld mit Typfilter.
|
||||
*
|
||||
* Die Anfrage steht in der URL — damit sind Treffer teilbar, der Zurück-Knopf
|
||||
* funktioniert und die Suche selbst bleibt eine Server-Komponente. Getippte
|
||||
* Eingaben werden kurz gesammelt, bevor die Adresse fortgeschrieben wird.
|
||||
*/
|
||||
export function SearchField({
|
||||
initialQuery,
|
||||
filter,
|
||||
filters,
|
||||
}: {
|
||||
initialQuery: string;
|
||||
filter: string;
|
||||
filters: { key: string; label: string }[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [value, setValue] = useState(initialQuery);
|
||||
const [pending, startTransition] = useTransition();
|
||||
const first = useRef(true);
|
||||
|
||||
useEffect(() => {
|
||||
// Beim ersten Rendern nichts tun — sonst ersetzt die Komponente die
|
||||
// gerade geladene URL durch eine identische.
|
||||
if (first.current) {
|
||||
first.current = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (value.trim()) params.set("q", value.trim());
|
||||
if (filter !== "alle") params.set("typ", filter);
|
||||
startTransition(() => {
|
||||
router.replace(`${pathname}?${params.toString()}`, { scroll: false });
|
||||
});
|
||||
}, 350);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [value, filter, pathname, router]);
|
||||
|
||||
function selectFilter(key: string) {
|
||||
const params = new URLSearchParams();
|
||||
if (value.trim()) params.set("q", value.trim());
|
||||
if (key !== "alle") params.set("typ", key);
|
||||
startTransition(() => {
|
||||
router.replace(`${pathname}?${params.toString()}`, { scroll: false });
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="relative">
|
||||
<SearchIcon />
|
||||
<input
|
||||
type="search"
|
||||
value={value}
|
||||
onChange={(event) => setValue(event.target.value)}
|
||||
placeholder="Serie oder Film suchen …"
|
||||
aria-label="Suchbegriff"
|
||||
autoFocus
|
||||
className="fl-input pl-10 text-base"
|
||||
/>
|
||||
{pending && (
|
||||
<span
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-[var(--fl-faint)]"
|
||||
role="status"
|
||||
>
|
||||
sucht …
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2" role="group" aria-label="Nach Typ filtern">
|
||||
{filters.map((item) => (
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
onClick={() => selectFilter(item.key)}
|
||||
aria-pressed={filter === item.key}
|
||||
className={clsx(
|
||||
"rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors",
|
||||
filter === item.key
|
||||
? "border-transparent text-[var(--fl-on-accent)]"
|
||||
: "border-[var(--fl-border)] text-[var(--fl-muted)] hover:border-[var(--fl-border-strong)] hover:text-[var(--fl-text)]",
|
||||
)}
|
||||
style={filter === item.key ? { backgroundImage: "var(--fl-gradient)" } : undefined}
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SearchIcon() {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--fl-faint)]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
aria-hidden
|
||||
>
|
||||
<circle cx="11" cy="11" r="6.5" />
|
||||
<path d="m16 16 4.5 4.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { clsx } from "clsx";
|
||||
|
||||
/**
|
||||
* Staffel- und Episodenliste.
|
||||
*
|
||||
* Staffeln sind eingeklappt, damit eine Serie mit zwanzig Staffeln die Seite
|
||||
* nicht sprengt; die erste reguläre Staffel steht offen. In Etappe 3 kommen
|
||||
* hier die Häkchen für den Fortschritt dazu.
|
||||
*/
|
||||
|
||||
export type EpisodeData = {
|
||||
id: string;
|
||||
episodeNumber: number;
|
||||
name: string;
|
||||
overview: string | null;
|
||||
airDate: string | null;
|
||||
runtime: number | null;
|
||||
};
|
||||
|
||||
export type SeasonData = {
|
||||
id: string;
|
||||
seasonNumber: number;
|
||||
name: string;
|
||||
overview: string | null;
|
||||
airDate: string | null;
|
||||
episodes: EpisodeData[];
|
||||
};
|
||||
|
||||
function formatDate(value: string | null): string | null {
|
||||
if (!value) return null;
|
||||
return new Date(value).toLocaleDateString("de-DE", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
export function SeasonList({ seasons }: { seasons: SeasonData[] }) {
|
||||
const firstRegular = seasons.find((season) => season.seasonNumber > 0) ?? seasons[0];
|
||||
const [open, setOpen] = useState<string[]>(firstRegular ? [firstRegular.id] : []);
|
||||
|
||||
function toggle(id: string) {
|
||||
setOpen((current) =>
|
||||
current.includes(id) ? current.filter((entry) => entry !== id) : [...current, id],
|
||||
);
|
||||
}
|
||||
|
||||
if (seasons.length === 0) {
|
||||
return <p className="text-sm text-[var(--fl-faint)]">Zu dieser Serie liegen keine Staffeln vor.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{seasons.map((season) => {
|
||||
const isOpen = open.includes(season.id);
|
||||
const air = formatDate(season.airDate);
|
||||
|
||||
return (
|
||||
<section key={season.id} className="fl-card overflow-hidden">
|
||||
<h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggle(season.id)}
|
||||
aria-expanded={isOpen}
|
||||
className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-[var(--fl-surface-2)]"
|
||||
>
|
||||
<Chevron open={isOpen} />
|
||||
<span className="flex-1">
|
||||
<span className="font-medium">{season.name}</span>
|
||||
<span className="ml-2 text-sm text-[var(--fl-faint)]">
|
||||
{season.episodes.length}{" "}
|
||||
{season.episodes.length === 1 ? "Episode" : "Episoden"}
|
||||
{air ? ` · ab ${air}` : ""}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</h3>
|
||||
|
||||
{isOpen && (
|
||||
<ol className="border-t border-[var(--fl-border)]">
|
||||
{season.episodes.map((episode) => (
|
||||
<li
|
||||
key={episode.id}
|
||||
className="flex gap-3 border-b border-[var(--fl-border)] px-4 py-2.5 last:border-b-0"
|
||||
>
|
||||
<span className="w-14 shrink-0 pt-0.5 font-mono text-xs text-[var(--fl-faint)]">
|
||||
S{String(season.seasonNumber).padStart(2, "0")}E
|
||||
{String(episode.episodeNumber).padStart(2, "0")}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block text-sm font-medium">{episode.name}</span>
|
||||
{episode.overview && (
|
||||
<span className="mt-0.5 line-clamp-2 block text-xs text-[var(--fl-faint)]">
|
||||
{episode.overview}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="shrink-0 pt-0.5 text-right text-xs text-[var(--fl-faint)]">
|
||||
{formatDate(episode.airDate) ?? "—"}
|
||||
{episode.runtime ? <span className="block">{episode.runtime} min</span> : null}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
{season.episodes.length === 0 && (
|
||||
<li className="px-4 py-3 text-sm text-[var(--fl-faint)]">
|
||||
Für diese Staffel liegen noch keine Episoden vor.
|
||||
</li>
|
||||
)}
|
||||
</ol>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Chevron({ open }: { open: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className={clsx(
|
||||
"h-4 w-4 shrink-0 text-[var(--fl-muted)] transition-transform duration-200",
|
||||
open && "rotate-90",
|
||||
)}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
aria-hidden
|
||||
>
|
||||
<path d="m9 6 6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user