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,154 @@
|
||||
import Link from "next/link";
|
||||
import type { Metadata } from "next";
|
||||
import { requireUser } from "@/lib/auth";
|
||||
import { getSettings } from "@/lib/settings";
|
||||
import { env } from "@/lib/env";
|
||||
import { searchMovies, searchMulti, searchSeries, type TmdbSearchResult } from "@/lib/tmdb";
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { Poster } from "@/components/Poster";
|
||||
import { SearchField } from "@/components/SearchField";
|
||||
|
||||
export const metadata: Metadata = { title: "Suchen" };
|
||||
|
||||
type Filter = "alle" | "serien" | "filme";
|
||||
|
||||
const FILTERS: { key: Filter; label: string }[] = [
|
||||
{ key: "alle", label: "Alles" },
|
||||
{ key: "serien", label: "Serien" },
|
||||
{ key: "filme", label: "Filme" },
|
||||
];
|
||||
|
||||
/** Normalisiert die drei TMDB-Antwortformen auf eine gemeinsame Darstellung. */
|
||||
function normalize(item: TmdbSearchResult, fallbackType: "tv" | "movie") {
|
||||
const type = item.media_type === "tv" || item.media_type === "movie" ? item.media_type : fallbackType;
|
||||
const date = type === "tv" ? item.first_air_date : item.release_date;
|
||||
return {
|
||||
tmdbId: item.id,
|
||||
type,
|
||||
title: (type === "tv" ? item.name : item.title) ?? item.original_name ?? item.original_title ?? "Ohne Titel",
|
||||
overview: item.overview ?? "",
|
||||
posterPath: item.poster_path ?? null,
|
||||
year: date ? date.slice(0, 4) : null,
|
||||
rating: item.vote_average ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function SearchPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ q?: string; typ?: string }>;
|
||||
}) {
|
||||
const user = await requireUser("/suche");
|
||||
const settings = await getSettings();
|
||||
|
||||
const params = await searchParams;
|
||||
const query = (params.q ?? "").trim();
|
||||
const filter: Filter = FILTERS.some((f) => f.key === params.typ) ? (params.typ as Filter) : "alle";
|
||||
|
||||
return (
|
||||
<AppShell user={user} instanceName={settings.instanceName}>
|
||||
<header className="mb-6">
|
||||
<h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Suchen</h1>
|
||||
<p className="mt-1 text-sm text-[var(--fl-muted)]">
|
||||
Serien und Filme aus der TMDB-Datenbank — mit Postern, Staffeln und Episoden.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<SearchField initialQuery={query} filter={filter} filters={FILTERS} />
|
||||
|
||||
<div className="mt-8">
|
||||
{!env.tmdb.isConfigured ? (
|
||||
<Notice tone="warning">
|
||||
Ohne TMDB-Schlüssel kann Flimmer nicht suchen. Trage <code>TMDB_API_KEY</code> in der{" "}
|
||||
<code>.env</code> ein und starte die Instanz neu.
|
||||
</Notice>
|
||||
) : query.length < 2 ? (
|
||||
<Notice>Gib mindestens zwei Zeichen ein, um zu suchen.</Notice>
|
||||
) : (
|
||||
<Results query={query} filter={filter} />
|
||||
)}
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
async function Results({ query, filter }: { query: string; filter: Filter }) {
|
||||
let items: ReturnType<typeof normalize>[];
|
||||
|
||||
try {
|
||||
if (filter === "serien") {
|
||||
const data = await searchSeries(query);
|
||||
items = data.results.map((item) => normalize(item, "tv"));
|
||||
} else if (filter === "filme") {
|
||||
const data = await searchMovies(query);
|
||||
items = data.results.map((item) => normalize(item, "movie"));
|
||||
} else {
|
||||
const data = await searchMulti(query);
|
||||
items = data.results.map((item) => normalize(item, "movie"));
|
||||
}
|
||||
} catch (error) {
|
||||
return (
|
||||
<Notice tone="danger">
|
||||
{error instanceof Error ? error.message : "Die Suche bei TMDB ist fehlgeschlagen."}
|
||||
</Notice>
|
||||
);
|
||||
}
|
||||
|
||||
if (items.length === 0) {
|
||||
return <Notice>Zu „{query}" hat TMDB nichts gefunden.</Notice>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="mb-4 text-sm text-[var(--fl-faint)]">
|
||||
{items.length} {items.length === 1 ? "Treffer" : "Treffer"} zu „{query}"
|
||||
</p>
|
||||
<ul className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
|
||||
{items.map((item) => (
|
||||
<li key={`${item.type}-${item.tmdbId}`}>
|
||||
<Link
|
||||
href={`/titel/${item.type === "tv" ? "serie" : "film"}/${item.tmdbId}`}
|
||||
className="fl-poster-card group block focus:outline-none"
|
||||
>
|
||||
<Poster path={item.posterPath} alt={item.title} size="w342" />
|
||||
<div className="mt-2 space-y-0.5">
|
||||
<p className="line-clamp-2 text-sm font-medium leading-snug group-hover:text-[var(--fl-text)]">
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--fl-faint)]">
|
||||
{item.type === "tv" ? "Serie" : "Film"}
|
||||
{item.year ? ` · ${item.year}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Notice({
|
||||
children,
|
||||
tone = "neutral",
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
tone?: "neutral" | "warning" | "danger";
|
||||
}) {
|
||||
const color =
|
||||
tone === "warning" ? "var(--fl-warning)" : tone === "danger" ? "var(--fl-danger)" : "var(--fl-muted)";
|
||||
return (
|
||||
<p
|
||||
className="fl-card px-4 py-3 text-sm"
|
||||
style={{
|
||||
color,
|
||||
borderColor:
|
||||
tone === "neutral" ? undefined : `color-mix(in oklab, ${color} 45%, transparent)`,
|
||||
backgroundColor:
|
||||
tone === "neutral" ? undefined : `color-mix(in oklab, ${color} 10%, transparent)`,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import type { Metadata } from "next";
|
||||
import { requireUser } from "@/lib/auth";
|
||||
import { getSettings } from "@/lib/settings";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { ensureTitle } from "@/lib/catalog";
|
||||
import { TmdbError, TmdbNotConfiguredError } from "@/lib/tmdb";
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { Backdrop, Poster } from "@/components/Poster";
|
||||
import { ProviderList, type ProviderBadgeData, type ProviderKindKey } from "@/components/ProviderBadges";
|
||||
import { SeasonList, type SeasonData } from "@/components/SeasonList";
|
||||
import type { TitleType } from "@/generated/prisma/client";
|
||||
|
||||
/** URL-Segment auf den Titeltyp abbilden — /titel/serie/1396 bzw. /titel/film/550. */
|
||||
const ART_TO_TYPE: Record<string, TitleType> = { serie: "SERIES", film: "MOVIE" };
|
||||
|
||||
type Params = Promise<{ art: string; tmdbId: string }>;
|
||||
|
||||
export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
|
||||
const { art, tmdbId } = await params;
|
||||
const type = ART_TO_TYPE[art];
|
||||
if (!type) return { title: "Nicht gefunden" };
|
||||
|
||||
const title = await prisma.title.findUnique({
|
||||
where: { type_tmdbId: { type, tmdbId: Number(tmdbId) } },
|
||||
select: { title: true },
|
||||
});
|
||||
return { title: title?.title ?? "Titel" };
|
||||
}
|
||||
|
||||
export default async function TitlePage({ params }: { params: Params }) {
|
||||
const user = await requireUser();
|
||||
const settings = await getSettings();
|
||||
|
||||
const { art, tmdbId: rawId } = await params;
|
||||
const type = ART_TO_TYPE[art];
|
||||
const tmdbId = Number.parseInt(rawId, 10);
|
||||
if (!type || !Number.isFinite(tmdbId)) notFound();
|
||||
|
||||
let importError: string | null = null;
|
||||
try {
|
||||
await ensureTitle(type, tmdbId, { region: user.region });
|
||||
} catch (error) {
|
||||
if (error instanceof TmdbError && error.status === 404) notFound();
|
||||
importError =
|
||||
error instanceof TmdbNotConfiguredError
|
||||
? error.message
|
||||
: error instanceof Error
|
||||
? error.message
|
||||
: "Der Titel konnte nicht von TMDB geladen werden.";
|
||||
}
|
||||
|
||||
const title = await prisma.title.findUnique({
|
||||
where: { type_tmdbId: { type, tmdbId } },
|
||||
include: {
|
||||
seasons: {
|
||||
orderBy: { seasonNumber: "asc" },
|
||||
include: { episodes: { orderBy: { episodeNumber: "asc" } } },
|
||||
},
|
||||
providers: {
|
||||
where: { region: user.region },
|
||||
include: { provider: true },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!title) {
|
||||
return (
|
||||
<AppShell user={user} instanceName={settings.instanceName}>
|
||||
<div className="fl-card p-6">
|
||||
<h1 className="text-xl font-semibold">Titel nicht verfügbar</h1>
|
||||
<p className="mt-2 text-sm text-[var(--fl-muted)]">
|
||||
{importError ?? "Zu dieser Kennung liegt nichts vor."}
|
||||
</p>
|
||||
<Link href="/suche" className="fl-btn fl-btn-ghost mt-4">
|
||||
Zurück zur Suche
|
||||
</Link>
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
const year = title.releaseDate?.getFullYear() ?? null;
|
||||
const providerGroups: Partial<Record<ProviderKindKey, ProviderBadgeData[]>> = {};
|
||||
for (const row of title.providers) {
|
||||
const kind = row.kind as ProviderKindKey;
|
||||
(providerGroups[kind] ??= []).push({
|
||||
id: row.provider.id,
|
||||
name: row.provider.name,
|
||||
logoPath: row.provider.logoPath,
|
||||
color: row.provider.color,
|
||||
});
|
||||
}
|
||||
|
||||
const seasons: SeasonData[] = title.seasons.map((season) => ({
|
||||
id: season.id,
|
||||
seasonNumber: season.seasonNumber,
|
||||
name: season.name,
|
||||
overview: season.overview,
|
||||
airDate: season.airDate?.toISOString() ?? null,
|
||||
episodes: season.episodes.map((episode) => ({
|
||||
id: episode.id,
|
||||
episodeNumber: episode.episodeNumber,
|
||||
name: episode.name,
|
||||
overview: episode.overview,
|
||||
airDate: episode.airDate?.toISOString() ?? null,
|
||||
runtime: episode.runtime,
|
||||
})),
|
||||
}));
|
||||
|
||||
return (
|
||||
<AppShell user={user} instanceName={settings.instanceName}>
|
||||
<article className="relative">
|
||||
<div className="fl-card relative overflow-hidden">
|
||||
<Backdrop path={title.backdropPath} alt="" />
|
||||
|
||||
<div className="relative flex flex-col gap-6 p-5 sm:flex-row sm:p-7">
|
||||
<div className="w-36 shrink-0 sm:w-48">
|
||||
<Poster path={title.posterPath} alt={title.title} size="w500" priority />
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-[var(--fl-faint)]">
|
||||
{title.type === "SERIES" ? "Serie" : "Film"}
|
||||
{year ? ` · ${year}` : ""}
|
||||
{title.status ? ` · ${title.status}` : ""}
|
||||
</p>
|
||||
|
||||
<h1 className="mt-1 text-2xl font-semibold tracking-tight sm:text-3xl">
|
||||
{title.title}
|
||||
</h1>
|
||||
{title.originalTitle && title.originalTitle !== title.title && (
|
||||
<p className="mt-0.5 text-sm text-[var(--fl-faint)]">{title.originalTitle}</p>
|
||||
)}
|
||||
{title.tagline && (
|
||||
<p className="mt-2 text-sm italic text-[var(--fl-muted)]">„{title.tagline}"</p>
|
||||
)}
|
||||
|
||||
<dl className="mt-4 flex flex-wrap gap-x-6 gap-y-2 text-sm">
|
||||
{title.type === "SERIES" ? (
|
||||
<Fact label="Umfang">
|
||||
{title.seasonCount} {title.seasonCount === 1 ? "Staffel" : "Staffeln"} ·{" "}
|
||||
{title.episodeCount} Episoden
|
||||
</Fact>
|
||||
) : null}
|
||||
{title.runtime ? (
|
||||
<Fact label={title.type === "SERIES" ? "Pro Episode" : "Laufzeit"}>
|
||||
{title.runtime} min
|
||||
</Fact>
|
||||
) : null}
|
||||
{title.voteAverage ? (
|
||||
<Fact label="TMDB">{title.voteAverage.toFixed(1)} / 10</Fact>
|
||||
) : null}
|
||||
</dl>
|
||||
|
||||
{title.genres.length > 0 && (
|
||||
<ul className="mt-4 flex flex-wrap gap-1.5">
|
||||
{title.genres.map((genre) => (
|
||||
<li
|
||||
key={genre}
|
||||
className="rounded-full border border-[var(--fl-border)] px-2.5 py-0.5 text-xs text-[var(--fl-muted)]"
|
||||
>
|
||||
{genre}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{title.overview && (
|
||||
<p className="mt-4 max-w-2xl text-sm leading-relaxed text-[var(--fl-muted)]">
|
||||
{title.overview}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p className="mt-5 rounded-xl border border-dashed border-[var(--fl-border)] px-3 py-2 text-xs text-[var(--fl-faint)]">
|
||||
Die Bibliothek kommt in der nächsten Etappe — dann lässt sich der Titel von hier
|
||||
aus aufnehmen und der Fortschritt abhaken.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2 className="mb-3 text-lg font-semibold">Wo läuft das?</h2>
|
||||
<div className="fl-card p-4">
|
||||
<ProviderList groups={providerGroups} region={user.region} />
|
||||
<p className="mt-3 text-xs text-[var(--fl-faint)]">
|
||||
Verfügbarkeitsdaten von JustWatch über TMDB, Region {user.region}.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{title.type === "SERIES" && (
|
||||
<section className="mt-6">
|
||||
<h2 className="mb-3 text-lg font-semibold">Staffeln</h2>
|
||||
<SeasonList seasons={seasons} />
|
||||
</section>
|
||||
)}
|
||||
|
||||
{importError && (
|
||||
<p className="mt-6 text-xs text-[var(--fl-warning)]">
|
||||
Hinweis: Die Daten stammen aus dem lokalen Katalog — die Auffrischung bei TMDB ist
|
||||
fehlgeschlagen ({importError}).
|
||||
</p>
|
||||
)}
|
||||
</article>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
function Fact({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div>
|
||||
<dt className="text-xs uppercase tracking-wide text-[var(--fl-faint)]">{label}</dt>
|
||||
<dd className="mt-0.5 font-medium">{children}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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