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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user