223 lines
11 KiB
TypeScript
223 lines
11 KiB
TypeScript
import { getMovieDetail, getSources, SourceData, Subject, Resource } from '@/lib/api';
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import Image from 'next/image';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { Button } from '@/components/ui/button';
|
|
import { MoveLeft, PlayCircle, Download } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
|
|
// ... imports
|
|
import { EpisodeSelector } from '@/components/admin/EpisodeSelector';
|
|
|
|
interface MovieDetailPageProps {
|
|
params: Promise<{ id: string }>;
|
|
searchParams: Promise<{ season?: string; episode?: string }>;
|
|
}
|
|
|
|
export default async function MovieDetailPage({ params, searchParams }: MovieDetailPageProps) {
|
|
const { id } = await params;
|
|
const { season, episode } = await searchParams;
|
|
|
|
let movie: Subject | null = null;
|
|
let resource: Resource | undefined = undefined;
|
|
let sources: SourceData[] = [];
|
|
let errorMsg = '';
|
|
|
|
// Parse params or default to 0
|
|
let currentSeason = season ? parseInt(season) : 0;
|
|
let currentEpisode = episode ? parseInt(episode) : 0;
|
|
|
|
// Valid flags
|
|
let isSeries = false;
|
|
let showSources = false;
|
|
|
|
try {
|
|
const detail = await getMovieDetail(id);
|
|
movie = detail.subject;
|
|
resource = detail.resource;
|
|
isSeries = movie.subjectType === 2;
|
|
|
|
if (isSeries) {
|
|
// For Series, only fetch if season/episode are explicitly selected
|
|
if (currentSeason > 0 && currentEpisode > 0) {
|
|
const sourceData = await getSources(id, movie.detailPath, currentSeason, currentEpisode);
|
|
sources = sourceData.sources || [];
|
|
showSources = true;
|
|
} else {
|
|
// Nothing selected yet, or invalid
|
|
showSources = false;
|
|
}
|
|
} else {
|
|
// Movies: always fetch 0,0
|
|
const sourceData = await getSources(id, movie.detailPath, 0, 0);
|
|
sources = sourceData.sources || [];
|
|
showSources = true;
|
|
}
|
|
|
|
} catch (e: any) {
|
|
console.error("Error fetching detail:", e);
|
|
errorMsg = e.message;
|
|
}
|
|
|
|
if (errorMsg || !movie) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<Link href="/admin/movies">
|
|
<Button variant="ghost" className="gap-2 text-gray-400 hover:text-white">
|
|
<MoveLeft className="h-4 w-4" /> Back to Movies
|
|
</Button>
|
|
</Link>
|
|
<div className="p-4 text-red-500 bg-red-500/10 rounded border border-red-500/20">
|
|
Error loading movie: {errorMsg}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6 max-w-5xl mx-auto">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/admin/movies">
|
|
<Button variant="outline" size="icon" className="h-9 w-9 border-gray-700 bg-transparent text-gray-400 hover:text-white hover:bg-gray-800">
|
|
<MoveLeft className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<h1 className="text-2xl font-bold tracking-tight text-white line-clamp-1">{movie.title}</h1>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-6">
|
|
{/* Poster Column */}
|
|
<div className="space-y-4">
|
|
<div className="relative aspect-[2/3] rounded-lg overflow-hidden border border-gray-800 shadow-xl">
|
|
<Image
|
|
src={movie.cover?.url || (movie.image?.url ?? '/placeholder.png')}
|
|
alt={movie.title}
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Details Column */}
|
|
<div className="space-y-6">
|
|
<Card className="bg-[#141414] border-gray-800 text-white">
|
|
<CardHeader>
|
|
<CardTitle>Details</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-500 mb-1">Synopsis</h3>
|
|
<p className="text-gray-300 leading-relaxed text-sm">
|
|
{movie.description || "No description available."}
|
|
</p>
|
|
</div>
|
|
|
|
<Separator className="bg-gray-800" />
|
|
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<h3 className="text-gray-500 mb-1">Release Date</h3>
|
|
<p>{movie.releaseDate || 'Unknown'}</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-gray-500 mb-1">IMDb Rating</h3>
|
|
<div className="flex items-center gap-1">
|
|
<span className="text-yellow-500 font-bold">{movie.imdbRatingValue}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-gray-500 mb-1">Genre</h3>
|
|
<p>{movie.genre || 'Unknown'}</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-gray-500 mb-1">Country</h3>
|
|
<p>{movie.countryName || 'Unknown'}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-[#141414] border-gray-800 text-white">
|
|
<CardHeader>
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle>Streaming Sources</CardTitle>
|
|
<CardDescription>Available video sources for playback.</CardDescription>
|
|
</div>
|
|
{isSeries && currentSeason > 0 && (
|
|
<Badge variant="outline" className="text-primary border-primary/50">
|
|
Season {currentSeason} - Episode {currentEpisode}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
{isSeries && resource?.seasons && (
|
|
<EpisodeSelector
|
|
seasons={resource.seasons}
|
|
currentSeason={currentSeason}
|
|
currentEpisode={currentEpisode}
|
|
/>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{!showSources && isSeries ? (
|
|
<div className="text-center py-8 text-gray-500">
|
|
Please select an episode to view sources.
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-gray-800 hover:bg-transparent">
|
|
<TableHead className="text-gray-400">Quality</TableHead>
|
|
<TableHead className="text-gray-400">Size</TableHead>
|
|
<TableHead className="text-gray-400 text-right">Action</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{sources.map((source, idx) => (
|
|
<TableRow key={idx} className="border-gray-800 hover:bg-gray-900/50">
|
|
<TableCell className="font-medium">
|
|
<Badge variant="secondary" className="bg-gray-800 hover:bg-gray-700">
|
|
{source.resolution}p
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-gray-400 font-mono text-xs">{source.size || '-'}</TableCell>
|
|
<TableCell className="text-right">
|
|
<Link href={source.url} target="_blank">
|
|
<Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-primary hover:text-primary hover:bg-primary/10">
|
|
<PlayCircle className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
{sources.length === 0 && (
|
|
<TableRow>
|
|
<TableCell colSpan={3} className="text-center text-gray-500 py-4">
|
|
No sources found.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|