387 lines
14 KiB
TypeScript
387 lines
14 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Tv, Search, Play, Info, ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { tvDiscoveryApi, DiscoveredShow } from '../services/api/tvDiscovery';
|
|
import Button from '../components/ui/Button';
|
|
import { MovieCardSkeleton, HeroSkeleton } from '../components/ui/Skeleton';
|
|
|
|
// Hero component for TV Shows
|
|
function TVHero({ shows }: { shows: DiscoveredShow[] }) {
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
if (shows.length <= 1) return;
|
|
const interval = setInterval(() => {
|
|
setCurrentIndex((prev) => (prev + 1) % shows.length);
|
|
}, 8000);
|
|
return () => clearInterval(interval);
|
|
}, [shows.length]);
|
|
|
|
if (shows.length === 0) return <HeroSkeleton />;
|
|
|
|
const current = shows[currentIndex];
|
|
|
|
return (
|
|
<div className="relative h-[80vh] min-h-[600px] overflow-hidden">
|
|
{/* Background Image */}
|
|
<div className="absolute inset-0">
|
|
<img
|
|
src={current.backdrop || current.poster || '/placeholder-backdrop.jpg'}
|
|
alt={current.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-netflix-black via-netflix-black/50 to-netflix-black/30" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-netflix-black via-transparent to-transparent" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="absolute bottom-0 left-0 right-0 p-8 md:p-16">
|
|
<motion.div
|
|
key={current.id}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="max-w-2xl"
|
|
>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Tv className="text-blue-400" size={24} />
|
|
<span className="text-blue-400 font-semibold text-sm tracking-wider">TV SERIES</span>
|
|
</div>
|
|
|
|
<h1 className="text-4xl md:text-6xl font-bold mb-4 drop-shadow-lg">{current.title}</h1>
|
|
|
|
<div className="flex items-center gap-4 text-sm text-gray-300 mb-4">
|
|
<span className="text-green-400 font-semibold">
|
|
{current.rating ? `${(current.rating * 10).toFixed(0)}% Match` : 'New'}
|
|
</span>
|
|
<span>{current.year}</span>
|
|
{current.seasonCount && (
|
|
<span>{current.seasonCount} Season{current.seasonCount !== 1 ? 's' : ''}</span>
|
|
)}
|
|
{current.genres.length > 0 && (
|
|
<span className="hidden md:inline">{current.genres.slice(0, 2).join(' • ')}</span>
|
|
)}
|
|
</div>
|
|
|
|
<p className="text-gray-300 text-lg mb-6 line-clamp-3 leading-relaxed">
|
|
{current.overview || 'No description available.'}
|
|
</p>
|
|
|
|
<div className="flex gap-4">
|
|
<Button
|
|
size="lg"
|
|
leftIcon={<Play size={20} fill="currentColor" />}
|
|
onClick={() => navigate(`/tv/${current.id}`)}
|
|
>
|
|
Watch Now
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="secondary"
|
|
leftIcon={<Info size={20} />}
|
|
onClick={() => navigate(`/tv/${current.id}`)}
|
|
>
|
|
More Info
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Navigation Indicators */}
|
|
{shows.length > 1 && (
|
|
<div className="flex items-center gap-4 mt-8">
|
|
<button
|
|
onClick={() => setCurrentIndex((prev) => (prev - 1 + shows.length) % shows.length)}
|
|
className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
|
|
>
|
|
<ChevronLeft size={20} />
|
|
</button>
|
|
<div className="flex gap-2">
|
|
{shows.map((_, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={() => setCurrentIndex(idx)}
|
|
className={`h-1 rounded-full transition-all duration-300 ${
|
|
idx === currentIndex ? 'w-8 bg-white' : 'w-2 bg-white/40 hover:bg-white/60'
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={() => setCurrentIndex((prev) => (prev + 1) % shows.length)}
|
|
className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
|
|
>
|
|
<ChevronRight size={20} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Show Row component
|
|
function ShowRow({
|
|
title,
|
|
shows,
|
|
isLoading,
|
|
linkTo,
|
|
}: {
|
|
title: string;
|
|
shows: DiscoveredShow[];
|
|
isLoading: boolean;
|
|
linkTo?: string;
|
|
}) {
|
|
const scrollContainer = useState<HTMLDivElement | null>(null)[1];
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="px-4 md:px-8 mb-8">
|
|
<h2 className="text-xl font-semibold mb-4">{title}</h2>
|
|
<div className="flex gap-4 overflow-x-auto pb-4 scrollbar-hide">
|
|
{[...Array(6)].map((_, i) => (
|
|
<MovieCardSkeleton key={i} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (shows.length === 0) return null;
|
|
|
|
return (
|
|
<div className="px-4 md:px-8 mb-8">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-xl font-semibold">{title}</h2>
|
|
{linkTo && (
|
|
<Link to={linkTo} className="text-sm text-gray-400 hover:text-white transition-colors">
|
|
See All →
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="flex gap-3 overflow-x-auto pb-4 scrollbar-hide scroll-smooth"
|
|
ref={scrollContainer}
|
|
>
|
|
{shows.map((show) => (
|
|
<Link
|
|
key={show.id}
|
|
to={`/tv/${show.id}`}
|
|
className="flex-shrink-0 w-[160px] md:w-[180px] group"
|
|
>
|
|
<div className="relative aspect-[2/3] rounded-lg overflow-hidden mb-2 bg-gray-800">
|
|
{show.poster ? (
|
|
<img
|
|
src={show.poster}
|
|
alt={show.title}
|
|
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
|
|
loading="lazy"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center bg-gray-700">
|
|
<Tv size={48} className="text-gray-500" />
|
|
</div>
|
|
)}
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center">
|
|
<Play
|
|
size={48}
|
|
className="text-white opacity-0 group-hover:opacity-100 transition-opacity drop-shadow-lg"
|
|
fill="currentColor"
|
|
/>
|
|
</div>
|
|
{show.rating > 7 && (
|
|
<div className="absolute top-2 left-2 bg-green-500 text-xs px-2 py-0.5 rounded font-semibold">
|
|
{show.rating.toFixed(1)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<h3 className="font-medium text-sm truncate group-hover:text-white transition-colors">
|
|
{show.title}
|
|
</h3>
|
|
<p className="text-xs text-gray-400">
|
|
{show.year} {show.seasonCount ? `• ${show.seasonCount} Season${show.seasonCount !== 1 ? 's' : ''}` : ''}
|
|
</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function TVShows() {
|
|
const [trending, setTrending] = useState<DiscoveredShow[]>([]);
|
|
const [popular, setPopular] = useState<DiscoveredShow[]>([]);
|
|
const [topRated, setTopRated] = useState<DiscoveredShow[]>([]);
|
|
const [airingToday, setAiringToday] = useState<DiscoveredShow[]>([]);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [searchResults, setSearchResults] = useState<DiscoveredShow[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
|
|
// Load initial data
|
|
useEffect(() => {
|
|
async function loadData() {
|
|
setIsLoading(true);
|
|
try {
|
|
const [trendingData, popularData, topRatedData, airingData] = await Promise.all([
|
|
tvDiscoveryApi.getTrending(),
|
|
tvDiscoveryApi.getPopular(),
|
|
tvDiscoveryApi.getTopRated(),
|
|
tvDiscoveryApi.getAiringToday(),
|
|
]);
|
|
setTrending(trendingData.shows);
|
|
setPopular(popularData.shows);
|
|
setTopRated(topRatedData.shows);
|
|
setAiringToday(airingData.shows);
|
|
} catch (error) {
|
|
console.error('Error loading TV shows:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
loadData();
|
|
}, []);
|
|
|
|
// Search handler
|
|
useEffect(() => {
|
|
if (!searchQuery.trim()) {
|
|
setSearchResults([]);
|
|
return;
|
|
}
|
|
|
|
const searchTimeout = setTimeout(async () => {
|
|
setIsSearching(true);
|
|
try {
|
|
const results = await tvDiscoveryApi.search(searchQuery);
|
|
setSearchResults(results.shows);
|
|
} catch (error) {
|
|
console.error('Search error:', error);
|
|
} finally {
|
|
setIsSearching(false);
|
|
}
|
|
}, 300);
|
|
|
|
return () => clearTimeout(searchTimeout);
|
|
}, [searchQuery]);
|
|
|
|
const isShowingSearch = searchQuery.trim().length > 0;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="min-h-screen bg-netflix-black"
|
|
>
|
|
{/* Hero Section */}
|
|
{!isShowingSearch && <TVHero shows={trending.slice(0, 5)} />}
|
|
|
|
{/* Search Bar */}
|
|
<div className={`sticky top-16 z-30 bg-netflix-black/95 backdrop-blur-lg py-4 px-4 md:px-8 ${isShowingSearch ? 'pt-24' : ''}`}>
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="relative">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
|
|
<input
|
|
type="text"
|
|
placeholder="Search TV shows..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full bg-white/10 border border-white/20 rounded-full py-3 pl-12 pr-4 text-white placeholder-gray-400 focus:outline-none focus:border-white/40 focus:bg-white/15 transition-all"
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
onClick={() => setSearchQuery('')}
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
|
|
>
|
|
✕
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className={trending.length > 0 && !isShowingSearch ? '-mt-32 relative z-10 pt-8' : 'pt-4'}>
|
|
{isShowingSearch ? (
|
|
// Search Results
|
|
<div className="px-4 md:px-8 pb-16">
|
|
<h2 className="text-xl font-semibold mb-6">
|
|
{isSearching ? 'Searching...' : `Results for "${searchQuery}"`}
|
|
</h2>
|
|
{isSearching ? (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
|
|
{[...Array(12)].map((_, i) => (
|
|
<MovieCardSkeleton key={i} />
|
|
))}
|
|
</div>
|
|
) : searchResults.length === 0 ? (
|
|
<div className="text-center py-16 text-gray-400">
|
|
<Tv size={64} className="mx-auto mb-4 opacity-50" />
|
|
<p>No shows found for "{searchQuery}"</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
|
|
{searchResults.map((show) => (
|
|
<Link
|
|
key={show.id}
|
|
to={`/tv/${show.id}`}
|
|
className="group"
|
|
>
|
|
<div className="relative aspect-[2/3] rounded-lg overflow-hidden mb-2 bg-gray-800">
|
|
{show.poster ? (
|
|
<img
|
|
src={show.poster}
|
|
alt={show.title}
|
|
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
|
|
loading="lazy"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center bg-gray-700">
|
|
<Tv size={48} className="text-gray-500" />
|
|
</div>
|
|
)}
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center">
|
|
<Play
|
|
size={48}
|
|
className="text-white opacity-0 group-hover:opacity-100 transition-opacity"
|
|
fill="currentColor"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<h3 className="font-medium text-sm truncate">{show.title}</h3>
|
|
<p className="text-xs text-gray-400">{show.year}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
// Browse Rows
|
|
<>
|
|
<ShowRow
|
|
title="🔥 Trending This Week"
|
|
shows={trending}
|
|
isLoading={isLoading}
|
|
/>
|
|
<ShowRow
|
|
title="📺 Airing Today"
|
|
shows={airingToday}
|
|
isLoading={isLoading}
|
|
/>
|
|
<ShowRow
|
|
title="⭐ Top Rated"
|
|
shows={topRated}
|
|
isLoading={isLoading}
|
|
/>
|
|
<ShowRow
|
|
title="🎬 Popular"
|
|
shows={popular}
|
|
isLoading={isLoading}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|