247 lines
8.8 KiB
TypeScript
247 lines
8.8 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router"
|
|
import { useState } from "react"
|
|
import { useTranslation } from "react-i18next"
|
|
import { Calendar, ChevronDown, ExternalLink, Film, Globe, MapPin, User } from "lucide-react"
|
|
import { Link } from "@tanstack/react-router"
|
|
import { BackButton } from "@/components/back-button"
|
|
import { EmptyState } from "@/components/empty-state"
|
|
import { HorizontalStrip } from "@/components/horizontal-strip"
|
|
import { SwipeTabs } from "@/components/swipe-tabs"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
import { posterUrl, tmdbProfileUrl } from "@/lib/api/client"
|
|
import { usePersonCredits } from "@/hooks/use-search"
|
|
import { useDocumentTitle } from "@/hooks/use-document-title"
|
|
import { shortDate } from "@/lib/date"
|
|
import { differenceInYears, parseISO } from "date-fns"
|
|
|
|
export const Route = createFileRoute("/_app/people/$id")({
|
|
component: PersonDetailPage,
|
|
})
|
|
|
|
function PersonDetailPage() {
|
|
const { t } = useTranslation()
|
|
const { id } = Route.useParams()
|
|
const { data, isPending } = usePersonCredits(id)
|
|
useDocumentTitle(data?.person.name)
|
|
|
|
if (isPending) return <PersonSkeleton />
|
|
if (!data) return null
|
|
|
|
const { person, cast, crew } = data
|
|
|
|
const age = person.birthday
|
|
? differenceInYears(
|
|
person.deathday ? parseISO(person.deathday) : new Date(),
|
|
parseISO(person.birthday),
|
|
)
|
|
: null
|
|
|
|
const creditTabs = [
|
|
...(cast.length > 0 ? [{ value: "cast", label: t("movie.cast") + ` (${cast.length})` }] : []),
|
|
...(crew.length > 0 ? [{ value: "crew", label: t("movie.crew") + ` (${crew.length})` }] : []),
|
|
] as const
|
|
|
|
return (
|
|
<div className="space-y-4 p-4">
|
|
<BackButton />
|
|
|
|
{/* Header */}
|
|
<div className="flex gap-4">
|
|
<div className="size-24 flex-shrink-0 overflow-hidden rounded-xl bg-muted">
|
|
{person.profile_path ? (
|
|
<img src={tmdbProfileUrl(person.profile_path)} alt="" className="size-full object-cover" />
|
|
) : (
|
|
<div className="flex size-full items-center justify-center">
|
|
<User className="size-10 text-muted-foreground/40" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="min-w-0 flex-1 space-y-1">
|
|
<h1 className="text-xl font-bold">{person.name}</h1>
|
|
{person.known_for_department && (
|
|
<Badge variant="secondary">{person.known_for_department}</Badge>
|
|
)}
|
|
{(person.homepage || person.imdb_url) && (
|
|
<div className="flex gap-1.5 pt-1">
|
|
{person.imdb_url && (
|
|
<a href={person.imdb_url} target="_blank" rel="noopener noreferrer">
|
|
<Badge variant="outline" className="gap-1 text-[10px]">
|
|
<ExternalLink className="size-2.5" />
|
|
IMDb
|
|
</Badge>
|
|
</a>
|
|
)}
|
|
{person.homepage && (
|
|
<a href={person.homepage} target="_blank" rel="noopener noreferrer">
|
|
<Badge variant="outline" className="gap-1 text-[10px]">
|
|
<Globe className="size-2.5" />
|
|
{t("person.homepage")}
|
|
</Badge>
|
|
</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Details card */}
|
|
{(person.birthday || person.place_of_birth) && (
|
|
<Card size="sm">
|
|
<CardContent className="space-y-2">
|
|
{person.birthday && (
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Calendar className="size-3.5 text-muted-foreground" />
|
|
<span>{shortDate(person.birthday)}</span>
|
|
{age != null && (
|
|
<span className="text-muted-foreground">({age})</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
{person.deathday && (
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Calendar className="size-3.5 text-muted-foreground" />
|
|
<span>{shortDate(person.deathday)}</span>
|
|
<span className="text-muted-foreground">({t("person.deathday").toLowerCase()})</span>
|
|
</div>
|
|
)}
|
|
{person.place_of_birth && (
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<MapPin className="size-3.5 text-muted-foreground" />
|
|
<span>{person.place_of_birth}</span>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Biography */}
|
|
{person.biography && <BiographySection text={person.biography} />}
|
|
|
|
{/* Also known as */}
|
|
{person.also_known_as?.length > 0 && (
|
|
<Card size="sm">
|
|
<CardHeader>
|
|
<CardTitle className="text-xs">{t("person.alsoKnownAs")}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-wrap gap-1">
|
|
{person.also_known_as.map((name) => (
|
|
<Badge key={name} variant="outline" className="text-xs font-normal">
|
|
{name}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<Separator />
|
|
|
|
{/* Filmography */}
|
|
{creditTabs.length > 0 ? (
|
|
<SwipeTabs tabs={creditTabs} defaultValue={creditTabs[0].value} tabsListClassName="w-full">
|
|
{(tab) => (
|
|
<>
|
|
{tab === "cast" && <FilmStrip items={cast.map((c) => ({ movieId: c.movie_id, title: c.title, year: c.release_year, posterPath: c.poster_path, subtitle: c.character }))} />}
|
|
{tab === "crew" && <FilmStrip items={crew.map((c) => ({ movieId: c.movie_id, title: c.title, year: c.release_year, posterPath: c.poster_path, subtitle: `${c.job}` }))} />}
|
|
</>
|
|
)}
|
|
</SwipeTabs>
|
|
) : (
|
|
<EmptyState icon={Film} title={t("movie.noCredits")} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
type FilmStripItem = {
|
|
movieId: string
|
|
title: string
|
|
year?: number
|
|
posterPath?: string
|
|
subtitle: string
|
|
}
|
|
|
|
function FilmStrip({ items }: { items: FilmStripItem[] }) {
|
|
return (
|
|
<HorizontalStrip>
|
|
{items.map((item, i) => (
|
|
<Link key={`${item.movieId}-${i}`} to="/movies/$id" params={{ id: item.movieId }} className="w-28 flex-shrink-0">
|
|
<div className="aspect-[2/3] overflow-hidden rounded-xl bg-muted">
|
|
{item.posterPath ? (
|
|
<img src={posterUrl(item.posterPath)} alt="" className="size-full object-cover" loading="lazy" />
|
|
) : (
|
|
<div className="flex size-full items-center justify-center">
|
|
<Film className="size-6 text-muted-foreground/40" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<p className="mt-1.5 truncate text-xs font-semibold">{item.title}</p>
|
|
{item.year && <p className="text-[10px] text-muted-foreground">{item.year}</p>}
|
|
<p className="truncate text-[10px] italic text-muted-foreground">{item.subtitle}</p>
|
|
</Link>
|
|
))}
|
|
</HorizontalStrip>
|
|
)
|
|
}
|
|
|
|
const BIO_COLLAPSE_THRESHOLD = 300
|
|
|
|
function BiographySection({ text }: { text: string }) {
|
|
const { t } = useTranslation()
|
|
const isLong = text.length > BIO_COLLAPSE_THRESHOLD
|
|
const [expanded, setExpanded] = useState(!isLong)
|
|
|
|
return (
|
|
<Card size="sm">
|
|
<CardHeader>
|
|
<CardTitle className="text-xs">{t("person.biography")}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className={`text-sm leading-relaxed text-muted-foreground ${!expanded ? "line-clamp-4" : ""}`}>
|
|
{text}
|
|
</p>
|
|
{isLong && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="mt-1 h-auto p-0 text-xs text-primary"
|
|
onClick={() => setExpanded((v) => !v)}
|
|
>
|
|
<ChevronDown className={`mr-1 size-3 transition-transform ${expanded ? "rotate-180" : ""}`} />
|
|
{expanded ? t("common.less") : t("common.more")}
|
|
</Button>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function PersonSkeleton() {
|
|
return (
|
|
<div className="space-y-4 p-4">
|
|
<Skeleton className="h-5 w-16" />
|
|
<div className="flex gap-4">
|
|
<Skeleton className="size-24 rounded-xl" />
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton className="h-6 w-32" />
|
|
<Skeleton className="h-5 w-20 rounded-full" />
|
|
<Skeleton className="h-4 w-24" />
|
|
</div>
|
|
</div>
|
|
<Skeleton className="h-20 rounded-xl" />
|
|
<Skeleton className="h-32 rounded-xl" />
|
|
<Skeleton className="h-1 w-full" />
|
|
<div className="space-y-2">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<Skeleton key={i} className="h-10 rounded-lg" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|