mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 05:05:38 -04:00
Rename /person to /people, simplify cast to actors-only, and polish UI
Rename the person detail route from `app/(pages)/person/[id]` to `app/(pages)/people/[id]` and update all internal links accordingly. Strip crew members from the cast carousel so only actors are shown; remove the `crew` prop from `CastCarousel` and `TitleCast` entirely. Move the trailer trigger from the metadata row into a centered overlay on the backdrop image using a new `variant="backdrop"` prop on `TrailerDialog`, replacing the previous inline button approach. Swap several icons for better semantic matches: `IconBooks` for the library section, `IconCheck` for the "Mark Watched" button, `IconSparkles` on the Recommendations heading, and `IconDeviceTvOld` on the Seasons heading. Replace a nested `motion.p` with a plain `<p>` using CSS `transition-opacity` in `StatsDisplay`. Remove the `animate-gentle-float` keyframe and the `feed-scroll` utility from `globals.css`, replacing the latter with the existing `no-scrollbar` class.
This commit is contained in:
@@ -0,0 +1,158 @@
|
||||
"use client";
|
||||
|
||||
import { IconMovie } from "@tabler/icons-react";
|
||||
import { motion } from "motion/react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState } from "react";
|
||||
import type { PersonCredit } from "@/lib/types/title";
|
||||
|
||||
type Filter = "all" | "movie" | "tv";
|
||||
type Sort = "newest" | "rating";
|
||||
|
||||
const staggerContainer = {
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.04 } },
|
||||
};
|
||||
|
||||
const staggerItem = {
|
||||
hidden: { opacity: 0, y: 12, scale: 0.98 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
transition: { type: "spring" as const, stiffness: 300, damping: 24 },
|
||||
},
|
||||
};
|
||||
|
||||
interface FilmographyGridProps {
|
||||
credits: PersonCredit[];
|
||||
}
|
||||
|
||||
export function FilmographyGrid({ credits }: FilmographyGridProps) {
|
||||
const [filter, setFilter] = useState<Filter>("all");
|
||||
const [sort, setSort] = useState<Sort>("newest");
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
let list = credits;
|
||||
if (filter !== "all") {
|
||||
list = list.filter((c) => c.type === filter);
|
||||
}
|
||||
|
||||
// Deduplicate by titleId (keep the first credit per title)
|
||||
const seen = new Set<string>();
|
||||
list = list.filter((c) => {
|
||||
if (seen.has(c.titleId)) return false;
|
||||
seen.add(c.titleId);
|
||||
return true;
|
||||
});
|
||||
|
||||
return list.sort((a, b) => {
|
||||
if (sort === "rating") {
|
||||
return (b.voteAverage ?? 0) - (a.voteAverage ?? 0);
|
||||
}
|
||||
const dateA = a.releaseDate ?? a.firstAirDate ?? "";
|
||||
const dateB = b.releaseDate ?? b.firstAirDate ?? "";
|
||||
return dateB.localeCompare(dateA);
|
||||
});
|
||||
}, [credits, filter, sort]);
|
||||
|
||||
if (credits.length === 0) return null;
|
||||
|
||||
const filters: { value: Filter; label: string }[] = [
|
||||
{ value: "all", label: "All" },
|
||||
{ value: "movie", label: "Movies" },
|
||||
{ value: "tv", label: "TV" },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<IconMovie className="size-5 text-primary" />
|
||||
<h2 className="font-display text-xl tracking-tight">Filmography</h2>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
({filtered.length})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={sort}
|
||||
onChange={(e) => setSort(e.target.value as Sort)}
|
||||
className="rounded-lg border border-border/50 bg-card px-2 py-1 text-xs text-foreground"
|
||||
>
|
||||
<option value="newest">Newest</option>
|
||||
<option value="rating">Rating</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{filters.map((f) => (
|
||||
<button
|
||||
key={f.value}
|
||||
type="button"
|
||||
onClick={() => setFilter(f.value)}
|
||||
className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
|
||||
filter === f.value
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-muted text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
key={`${filter}-${sort}`}
|
||||
variants={staggerContainer}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
|
||||
>
|
||||
{filtered.map((credit) => (
|
||||
<motion.div key={credit.titleId} variants={staggerItem}>
|
||||
<Link href={`/titles/${credit.titleId}`} className="group">
|
||||
<div className="overflow-hidden rounded-xl bg-card ring-1 ring-white/[0.06] transition-all group-hover:ring-primary/25">
|
||||
<div className="aspect-[2/3] w-full bg-muted">
|
||||
{credit.posterPath ? (
|
||||
<Image
|
||||
src={credit.posterPath}
|
||||
alt={credit.title}
|
||||
width={200}
|
||||
height={300}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center text-muted-foreground/30">
|
||||
<IconMovie className="size-10" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-3 pb-3 pt-2.5">
|
||||
<p className="truncate text-xs font-medium">{credit.title}</p>
|
||||
<div className="mt-0.5 flex items-center gap-1.5 text-[10px] text-muted-foreground">
|
||||
<span className="uppercase">{credit.type}</span>
|
||||
{(credit.releaseDate ?? credit.firstAirDate) && (
|
||||
<span>
|
||||
{(credit.releaseDate ?? credit.firstAirDate)?.slice(
|
||||
0,
|
||||
4,
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{credit.character && (
|
||||
<p className="mt-1 truncate text-[10px] text-muted-foreground/70">
|
||||
as {credit.character}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import { IconCalendar, IconMapPin } from "@tabler/icons-react";
|
||||
import { motion } from "motion/react";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import type { ResolvedPerson } from "@/lib/types/title";
|
||||
|
||||
interface PersonHeroProps {
|
||||
person: ResolvedPerson;
|
||||
}
|
||||
|
||||
function calculateAge(birthday: string, deathday?: string | null): number {
|
||||
const birth = new Date(birthday);
|
||||
const end = deathday ? new Date(deathday) : new Date();
|
||||
let age = end.getFullYear() - birth.getFullYear();
|
||||
const m = end.getMonth() - birth.getMonth();
|
||||
if (m < 0 || (m === 0 && end.getDate() < birth.getDate())) {
|
||||
age--;
|
||||
}
|
||||
return age;
|
||||
}
|
||||
|
||||
export function PersonHero({ person }: PersonHeroProps) {
|
||||
const [bioExpanded, setBioExpanded] = useState(false);
|
||||
const age = person.birthday
|
||||
? calculateAge(person.birthday, person.deathday)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="flex flex-col gap-6 sm:flex-row sm:gap-8"
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 28 }}
|
||||
>
|
||||
<div className="size-40 shrink-0 self-center overflow-hidden rounded-2xl ring-1 ring-white/10 shadow-2xl sm:size-56 sm:self-start">
|
||||
{person.profilePath ? (
|
||||
<Image
|
||||
src={person.profilePath}
|
||||
alt={person.name}
|
||||
width={224}
|
||||
height={224}
|
||||
className="h-full w-full object-cover"
|
||||
priority
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-muted to-muted/50">
|
||||
<span className="font-display text-5xl text-muted-foreground/40">
|
||||
{person.name.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 flex-1 space-y-3">
|
||||
<h1 className="font-display text-3xl tracking-tight sm:text-5xl">
|
||||
{person.name}
|
||||
</h1>
|
||||
|
||||
{person.knownForDepartment && (
|
||||
<span className="inline-block rounded-full bg-primary/10 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-primary">
|
||||
{person.knownForDepartment}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
|
||||
{person.birthday && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<IconCalendar className="size-3.5" />
|
||||
{person.birthday}
|
||||
{age !== null && (
|
||||
<span className="text-muted-foreground/60">
|
||||
({person.deathday ? `died at ${age}` : `age ${age}`})
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
{person.placeOfBirth && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<IconMapPin className="size-3.5" />
|
||||
{person.placeOfBirth}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{person.biography && (
|
||||
<div className="max-w-3xl">
|
||||
<p
|
||||
className={`text-sm leading-relaxed text-muted-foreground ${
|
||||
!bioExpanded ? "line-clamp-6" : ""
|
||||
}`}
|
||||
>
|
||||
{person.biography}
|
||||
</p>
|
||||
{person.biography.length > 400 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBioExpanded(!bioExpanded)}
|
||||
className="mt-1 text-xs font-medium text-primary transition-colors hover:text-primary/80"
|
||||
>
|
||||
{bioExpanded ? "Show less" : "Read more"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { PersonDetailSkeleton } from "@/components/skeletons";
|
||||
|
||||
export default function PersonLoading() {
|
||||
return <PersonDetailSkeleton />;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function PersonNotFound() {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-4 py-24 text-center">
|
||||
<h1 className="font-display text-4xl tracking-tight">Person not found</h1>
|
||||
<p className="text-muted-foreground">
|
||||
The person you're looking for doesn't exist or may have been
|
||||
removed.
|
||||
</p>
|
||||
<Link
|
||||
href="/explore"
|
||||
className="inline-flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-all hover:shadow-md hover:shadow-primary/20"
|
||||
>
|
||||
Explore titles
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { eq } from "drizzle-orm";
|
||||
import type { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
import { getSession } from "@/lib/auth/session";
|
||||
import { db } from "@/lib/db/client";
|
||||
import { persons } from "@/lib/db/schema";
|
||||
import {
|
||||
getLocalFilmography,
|
||||
getOrFetchPerson,
|
||||
getOrFetchPersonByTmdbId,
|
||||
} from "@/lib/services/person";
|
||||
import { FilmographyGrid } from "./_components/filmography-grid";
|
||||
import { PersonHero } from "./_components/person-hero";
|
||||
|
||||
const TMDB_PATTERN = /^tmdb-(\d+)$/;
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
if (TMDB_PATTERN.test(id)) return { title: "Sofa" };
|
||||
|
||||
const person = db.select().from(persons).where(eq(persons.id, id)).get();
|
||||
if (!person) return { title: "Not Found — Sofa" };
|
||||
|
||||
return {
|
||||
title: `${person.name} — Sofa`,
|
||||
description: person.biography?.slice(0, 160),
|
||||
};
|
||||
}
|
||||
|
||||
export default async function PersonDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = await params;
|
||||
await getSession();
|
||||
|
||||
const tmdbMatch = TMDB_PATTERN.exec(id);
|
||||
const person = tmdbMatch
|
||||
? await getOrFetchPersonByTmdbId(Number(tmdbMatch[1]))
|
||||
: await getOrFetchPerson(id);
|
||||
|
||||
if (!person) notFound();
|
||||
|
||||
const filmography = getLocalFilmography(person.id);
|
||||
|
||||
return (
|
||||
<div className="space-y-10">
|
||||
<PersonHero person={person} />
|
||||
<FilmographyGrid credits={filmography} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user