update

frontend/netlify.toml

@@ -0,0 +1,6 @@
+[build]
+command = "npm run build"
+publish = "dist"
+
+[dev]
+command = "npm run dev"

frontend/src/components/ContentCard.tsx

@@ -292,11 +292,11 @@ const ContentCard: React.FC<ContentCardProps> = ({
 
   return (
     <div 
-      className="relative flex-shrink-0 w-[240px] md:w-[280px] card-hover group"
+      className="relative flex-shrink-0 w-[240px] md:w-[280px] h-full card-hover group"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <div className="relative rounded-md overflow-hidden shadow-xl bg-theme-card h-[140px] md:h-[160px]">
+      <div className="relative rounded-md overflow-hidden shadow-xl bg-theme-card h-[170px] md:h-[170px]">
         {/* Base card image */}
         <Link to={path} className="block h-full">
           {loading ? (
@@ -330,7 +330,7 @@ const ContentCard: React.FC<ContentCardProps> = ({
         
         {/* Title overlay (simple version when not hovered) */}
         <div className={`absolute inset-x-0 bottom-0 p-3 ${isHovered ? 'opacity-0' : 'opacity-100'} 
-          transition-opacity duration-300 bg-gradient-to-t from-black/90 to-transparent`}>
+          transition-opacity duration-300 bg-gradient-to-t from-black to-transparent`}>
           <div className="flex items-center">
             <h3 className="font-bold text-sm line-clamp-1 flex-1">{title}</h3>
             {progress?.completed && (
@@ -355,9 +355,9 @@ const ContentCard: React.FC<ContentCardProps> = ({
         
         {/* Expanded hover overlay with detailed info and buttons */}
         <div 
-          className={`fixed group-hover:absolute inset-0 z-20 bg-gradient-to-b from-black/90 to-theme-background-dark
-            transition-opacity duration-300 flex flex-col justify-between p-3 w-[240px] md:w-[280px] h-[140px] md:h-[160px]
-            ${isHovered ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+          className={`fixed group-hover:absolute inset-0 z-20 bg-gradient-to-b from-black/40 to-theme-background-dark
+            transition-all duration-300 flex flex-col justify-between p-3 w-full h-full
+            ${isHovered ? 'opacity-100 backdrop-blur-md' : 'opacity-0 pointer-events-none backdrop-blur-none'}`}
         >
           {/* Top section - title and info */}
           <div>

frontend/src/components/HeroSection.tsx

@@ -88,8 +88,8 @@ const DynamicHeroSlideshow: React.FC<DynamicHeroSlideshowProps> = ({
               target.src = '/placeholder.svg';
             }}
           />
-          <div className="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent" />
-          <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-transparent" />
+          <div className="absolute inset-0 bg-gradient-to-t from-netflix-black via-netflix-black/60 to-transparent" />
+          <div className="absolute inset-0 bg-gradient-to-r from-netflix-black/80 via-netflix-black/40 to-transparent" />
         </motion.div>
       </AnimatePresence>
       
@@ -138,7 +138,7 @@ const DynamicHeroSlideshow: React.FC<DynamicHeroSlideshowProps> = ({
             <div className="flex space-x-3">
               <Link 
                 to={`${path}/watch`}
-                className="flex items-center px-6 py-2 rounded bg-indigo-600 text-white font-semibold hover:bg-indigo-700 transition"
+                className="flex items-center px-6 py-2 rounded bg-theme-primary text-white font-semibold hover:bg-theme-primary-hover transition"
               >
                 <Play className="w-5 h-5 mr-2" /> Play
               </Link>
@@ -161,7 +161,7 @@ const DynamicHeroSlideshow: React.FC<DynamicHeroSlideshowProps> = ({
             onClick={() => handleDotClick(index)}
             className={`w-2.5 h-2.5 rounded-full transition-all ${
               index === currentIndex 
-                ? 'bg-indigo-500 w-6' 
+                ? 'bg-theme-primary-light w-5' 
                 : 'bg-gray-500/50 hover:bg-gray-400/70'
             }`}
             aria-label={`Go to slide ${index + 1}`}

frontend/src/components/MoviePlayer.tsx

@@ -4,6 +4,7 @@ import { useToast } from '@/hooks/use-toast';
 import VideoPlayer from './VideoPlayer';
 import VideoPlayerControls from './VideoPlayerControls';
 import { Loader2, Play } from 'lucide-react';
+import { MovieCardData } from './ContentCard';
 
 interface ProgressData {
   status: string;
@@ -16,7 +17,6 @@ interface MoviePlayerProps {
   movieTitle: string;
   videoUrl?: string;
   contentRatings?: any[];
-  thumbnail?: string;
   poster?: string;
   startTime?: number;
   onClosePlayer?: () => void;
@@ -29,7 +29,6 @@ const MoviePlayer: React.FC<MoviePlayerProps> = ({
   movieTitle,
   videoUrl,
   contentRatings,
-  thumbnail,
   poster,
   startTime = 0,
   onClosePlayer,
@@ -42,23 +41,31 @@ const MoviePlayer: React.FC<MoviePlayerProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [progress, setProgress] = useState<ProgressData | null>(null);
   const [videoFetched, setVideoFetched] = useState(!!videoUrl);
+  const [cardData, setCardData] = useState<MovieCardData | null>(null);
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
   const { toast } = useToast();
-  
+
   const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const videoFetchedRef = useRef(!!videoUrl);
-  const [ratingInfo, setRatingInfo] = useState<{ rating: string, description: string } | null>(null);
+  const [ratingInfo, setRatingInfo] = useState<{ rating: string; description: string } | null>(null);
   const [currentTime, setCurrentTime] = useState(startTime);
   const containerRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
-  
-  // Update the onProgressUpdate handler to also update currentTime
+
+  // Reset fade state when image changes
+  useEffect(() => {
+    setImageLoaded(false);
+  }, [selectedImage]);
+
+  // Update progress and propagate up
   const handleProgressUpdate = (time: number, duration: number) => {
     setCurrentTime(time);
     onProgressUpdate?.(time, duration);
   };
 
-  // Handler for seeking from WatchTogether
+  // Seek handler
   const handleSeek = (time: number) => {
     if (videoRef.current) {
       videoRef.current.currentTime = time;
@@ -66,129 +73,105 @@ const MoviePlayer: React.FC<MoviePlayerProps> = ({
     }
   };
 
-  // --- Link Fetching & Polling ---
+  // Random image selector
+  const selectRandomImage = (card: MovieCardData | null) => {
+    if (!card) return null;
+    if (card.banner && card.banner.length > 0) {
+      return card.banner[Math.floor(Math.random() * card.banner.length)].image;
+    }
+    if (card.portrait && card.portrait.length > 0) {
+      return card.portrait[Math.floor(Math.random() * card.portrait.length)].image;
+    }
+    return card.image;
+  };
+
+  // Fetch movie link or start polling
   const fetchMovieLink = async () => {
     if (videoFetchedRef.current || videoUrlState) return;
-    
+
     try {
       const response = await getMovieLinkByTitle(movieTitle);
-      
-      if (response && response.url) {
-        // Stop any polling if running
-        if (pollingIntervalRef.current) {
-          clearInterval(pollingIntervalRef.current);
-          pollingIntervalRef.current = null;
-        }
-        
+      if (response.url) {
+        pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
         setVideoUrlState(response.url);
         setVideoFetched(true);
         videoFetchedRef.current = true;
-        setLoading(false); // Ensure loading is set to false when URL is fetched
-        console.log('Video URL fetched:', response.url);
-      } else if (response && response.progress_url) {
-        startPolling(response.progress_url);
+        setLoading(false);
+      } else if (response.progress_url) {
+        if (!pollingIntervalRef.current) {
+          pollingIntervalRef.current = setInterval(async () => {
+            try {
+              const res = await fetch(response.progress_url!);
+              const data = await res.json();
+              setProgress(data.progress);
+              if (data.progress.progress >= 100) {
+                clearInterval(pollingIntervalRef.current!);
+                timeoutRef.current = setTimeout(fetchMovieLink, 5000);
+              }
+            } catch (e) {
+              console.error(e);
+            }
+          }, 2000);
+        }
       } else {
-        console.error('No video URL or progress URL found in response:', response);
-        setError('Video URL not available');
+        throw new Error('No URL or progress URL');
       }
-    } catch (error) {
-      console.error('Error fetching movie link:', error);
+    } catch (e) {
+      console.error('Error fetching movie link:', e);
       setError('Failed to load video');
-      toast({
-        title: "Error",
-        description: "Could not load the video",
-        variant: "destructive"
-      });
-    } finally {
-      // Only set loading to false if we don't have a video yet
-      if (!videoFetchedRef.current && !videoUrlState) {
-        setLoading(false);
-      }
+      toast({ title: 'Error', description: 'Could not load the video', variant: 'destructive' });
+      setLoading(false);
     }
   };
 
-  // Fetch content ratings if not provided
+  // Fetch card data & ratings
   useEffect(() => {
-    const fetchRatingInfo = async () => {
-      if (contentRatings && contentRatings.length > 0) {
-        const usRating = contentRatings.find(r => r.country === 'usa') || contentRatings[0];
-        setRatingInfo({
-          rating: usRating.name || 'NR',
-          description: usRating.description || ''
-        });
-        return;
-      }
-      
+    const fetchCard = async () => {
       try {
         const movieData = await getMovieCard(movieTitle);
-        if (movieData && movieData.content_ratings) {
-          const ratings = movieData.content_ratings;
-          const usRating = ratings.find((r: any) => r.country === 'US') || ratings[0];
-          setRatingInfo({
-            rating: usRating?.name || 'NR',
-            description: usRating?.description || ''
-          });
-        }
-      } catch (error) {
-        console.error('Failed to fetch movie ratings:', error);
-      }
-    };
-    
-    fetchRatingInfo();
-  }, [movieTitle, contentRatings]);
-
-  const pollProgress = async (progressUrl: string) => {
-    try {
-      const res = await fetch(progressUrl);
-      const data = await res.json();
-      
-      setProgress(data.progress);
-      
-      if (data.progress.progress >= 100) {
-        if (pollingIntervalRef.current) {
-          clearInterval(pollingIntervalRef.current);
-          pollingIntervalRef.current = null;
+        setCardData(movieData);
+        const img = selectRandomImage(movieData);
+        setSelectedImage(img);
+        // Poster fallback
+        if (!poster) {
+          poster = movieData.image || poster;
         }
-        
-        if (!videoFetchedRef.current) {
-          timeoutRef.current = setTimeout(fetchMovieLink, 5000);
+        // Ratings
+        const ratings = contentRatings && contentRatings.length > 0
+          ? contentRatings
+          : movieData.content_ratings || [];
+        if (ratings.length) {
+          const us = ratings.find((r: any) => r.country === 'usa') || ratings[0];
+          setRatingInfo({ rating: us.name || 'NR', description: us.description || '' });
         }
+      } catch (e) {
+        console.error('Failed to fetch movie card:', e);
       }
-    } catch (error) {
-      console.error('Error polling progress:', error);
-    }
-  };
-
-  const startPolling = (progressUrl: string) => {
-    if (!pollingIntervalRef.current) {
-      const interval = setInterval(() => pollProgress(progressUrl), 2000);
-      pollingIntervalRef.current = interval;
-    }
-  };
+    };
+    fetchCard();
+  }, [movieTitle, contentRatings, poster]);
 
-  // Cleanup on unmount and when dependencies change
+  // Initial link fetch / cleanup
   useEffect(() => {
     if (!videoUrlState) {
       fetchMovieLink();
     } else {
       setVideoFetched(true);
       videoFetchedRef.current = true;
-      setLoading(false); // Make sure loading is false when we have a URL
+      setLoading(false);
     }
-    
     return () => {
-      if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      pollingIntervalRef.current && clearInterval(pollingIntervalRef.current);
+      timeoutRef.current && clearTimeout(timeoutRef.current);
     };
-  }, [movieTitle, videoUrl]);
+  }, [movieTitle, videoUrlState]);
 
-  // Add effect to update loading state when videoUrlState changes
+  // Sync loading state
   useEffect(() => {
-    if (videoUrlState) {
-      setLoading(false);
-    }
+    if (videoUrlState) setLoading(false);
   }, [videoUrlState]);
 
+  // Error UI
   if (error) {
     return (
       <div className="fixed inset-0 z-50 bg-black flex flex-col items-center justify-center">
@@ -205,62 +188,80 @@ const MoviePlayer: React.FC<MoviePlayerProps> = ({
     );
   }
 
+  // Loading / preparing UI with fade‑in backdrop
   if (loading || !videoFetched || !videoUrlState) {
     return (
-      <div className="fixed inset-0 z-50 bg-gradient-to-br from-theme-background-dark to-black flex flex-col items-center justify-center">
-        <div className="text-center max-w-md px-6">
-          <div className="mb-6 flex justify-center">
-            {poster ? (
-              <img src={poster} alt={movieTitle} className="h-auto w-24 rounded-lg shadow-lg" />
+      <>
+        <div className="relative w-full h-full">
+          <div className="absolute inset-0">
+            <img
+              src={selectedImage}
+              onLoad={() => setImageLoaded(true)}
+              onError={(e) => {
+                (e.target as HTMLImageElement).src = '/placeholder.svg';
+              }}
+              className={`w-full h-full object-cover transition-opacity duration-700 ease-in-out ${
+                imageLoaded ? 'opacity-100' : 'opacity-0'
+              }`}
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-netflix-black via-netflix-black/50 to-transparent" />
+            <div className="absolute inset-0 bg-gradient-to-r from-netflix-black/80 via-netflix-black/40 to-transparent" />
+          </div>
+        </div>
+        <div className="fixed inset-0 z-50 flex flex-col items-center backdrop-blur-sm justify-center">
+          <div className="text-center max-w-md px-6">
+            <div className="mb-6 flex justify-center">
+              {poster ? (
+                <img src={poster} alt={movieTitle} className="h-auto w-24 rounded-lg shadow-lg" />
+              ) : (
+                <div className="flex items-center justify-center h-24 w-24 bg-theme-primary/20 rounded-lg">
+                  <Play className="h-12 w-12 text-theme-primary" />
+                </div>
+              )}
+            </div>
+            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
+              {progress && progress.progress < 100
+                ? `Preparing "${movieTitle}"`
+                : `Loading "${movieTitle}"`
+              }
+            </h2>
+            {progress ? (
+              <>
+                <p className="text-gray-300 mb-4">
+                  {progress.progress < 5
+                    ? 'Initializing your stream...'
+                    : progress.progress < 100
+                      ? 'Your stream is being prepared.'
+                      : 'Almost ready! Starting playback soon...'}
+                </p>
+                <div className="relative w-full h-2 bg-gray-800 rounded-full overflow-hidden mb-2">
+                  <div
+                    className="absolute top-0 left-0 h-full bg-gradient-to-r from-theme-primary to-theme-primary-light transition-all duration-300"
+                    style={{ width: `${Math.min(100, Math.max(0, progress.progress))}%` }}
+                  />
+                </div>
+                <p className="text-sm text-gray-400">
+                  {Math.round(progress.progress)}% complete
+                </p>
+              </>
             ) : (
-              <div className="flex items-center justify-center h-24 w-24 bg-theme-primary/20 rounded-lg">
-                <Play className="h-12 w-12 text-theme-primary" />
+              <div className="flex justify-center">
+                <Loader2 className="h-8 w-8 animate-spin text-theme-primary" />
               </div>
             )}
           </div>
-          
-          <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
-            {progress && progress.progress < 100 
-              ? `Preparing "${movieTitle}"`
-              : `Loading "${movieTitle}"`
-            }
-          </h2>
-          
-          {progress ? (
-            <>
-              <p className="text-gray-300 mb-4">
-                {progress.progress < 5
-                  ? 'Initializing your stream...'
-                  : progress.progress < 100
-                    ? 'Your stream is being prepared.'
-                    : 'Almost ready! Starting playback soon...'}
-              </p>
-              <div className="relative w-full h-2 bg-gray-800 rounded-full overflow-hidden mb-2">
-                <div
-                  className="absolute top-0 left-0 h-full bg-gradient-to-r from-theme-primary to-theme-primary-light transition-all duration-300"
-                  style={{ width: `${Math.min(100, Math.max(0, progress.progress))}%` }}
-                />
-              </div>
-              <p className="text-sm text-gray-400">
-                {Math.round(progress.progress)}% complete
-              </p>
-            </>
-          ) : (
-            <div className="flex justify-center">
-              <Loader2 className="h-8 w-8 animate-spin text-theme-primary" />
-            </div>
-          )}
         </div>
-      </div>
+      </>
     );
   }
 
+  // Playback UI
   return (
     <div ref={containerRef} className="fixed inset-0 h-screen w-screen overflow-hidden">
       <VideoPlayer
         url={videoUrlState}
         title={movieTitle}
-        poster={poster || thumbnail}
+        poster={selectedImage || undefined}
         startTime={startTime}
         onClose={onClosePlayer}
         onProgressUpdate={handleProgressUpdate}
@@ -270,8 +271,7 @@ const MoviePlayer: React.FC<MoviePlayerProps> = ({
         containerRef={containerRef}
         videoRef={videoRef}
       />
-      
-      <VideoPlayerControls 
+      <VideoPlayerControls
         title={movieTitle}
         currentTime={currentTime}
         duration={videoRef.current?.duration || 0}

frontend/src/components/TVShowPlayer.tsx

@@ -3,6 +3,7 @@ import { getEpisodeLinkByTitle, getTvShowCard } from '../lib/api';
 import { useToast } from '@/hooks/use-toast';
 import { Film, GalleryVerticalEnd, Loader2, Play } from 'lucide-react';
 import VideoPlayer from './VideoPlayer';
+import { TvShowCardData } from './ContentCard';
 
 interface ProgressData {
   status: string;
@@ -23,7 +24,6 @@ interface TVShowPlayerProps {
   episode: string;
   movieTitle: string;
   contentRatings?: ContentRating[];
-  thumbnail?: string;
   poster?: string;
   startTime?: number;
   onClosePlayer?: () => void;
@@ -38,7 +38,6 @@ const TVShowPlayer: React.FC<TVShowPlayerProps> = ({
   episode,
   movieTitle,
   contentRatings,
-  thumbnail,
   poster,
   startTime = 0,
   onClosePlayer,
@@ -51,157 +50,128 @@ const TVShowPlayer: React.FC<TVShowPlayerProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [progress, setProgress] = useState<ProgressData | null>(null);
   const [videoFetched, setVideoFetched] = useState(false);
+  const [showData, setShowData] = useState<TvShowCardData | null>(null);
+  const [selectedImage, setSelectedImage] = useState<string>();
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [ratingInfo, setRatingInfo] = useState<{ rating: string; description: string } | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
   const { toast } = useToast();
-  
   const pollingInterval = useRef<NodeJS.Timeout | null>(null);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const videoFetchedRef = useRef(false);
-  const [ratingInfo, setRatingInfo] = useState<{ rating: string, description: string } | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // Reset imageLoaded whenever we pick a new image
+  useEffect(() => {
+    setImageLoaded(false);
+  }, [selectedImage]);
 
   // Parse episode info
   const getEpisodeInfo = () => {
     if (!episode) return { number: '1', title: 'Unknown Episode' };
-    
-    const episodeMatch = episode.match(/E(\d+)\s*-\s*(.+?)(?=\.\w+$)/i);
-    const number = episodeMatch ? episodeMatch[1] : '1';
-    const title = episodeMatch ? episodeMatch[2].trim() : 'Unknown Episode';
-    
-    return { number, title };
+    const match = episode.match(/E(\d+)\s*-\s*(.+?)(?=\.\w+$)/i);
+    return {
+      number: match ? match[1] : '1',
+      title: match ? match[2].trim() : 'Unknown Episode'
+    };
   };
-
   const { number: episodeNumber, title: episodeTitle } = getEpisodeInfo();
 
-  // --- Link Fetching & Polling ---
+  // Random image selector with fallback
+  const selectRandomImage = (cardData: TvShowCardData) => {
+    if (cardData.banner?.length) {
+      return cardData.banner[Math.floor(Math.random() * cardData.banner.length)].image;
+    }
+    if (cardData.portrait?.length) {
+      return cardData.portrait[Math.floor(Math.random() * cardData.portrait.length)].image;
+    }
+    return cardData.image;
+  };
+
+  // Fetch or poll for the video URL
   const fetchMovieLink = async () => {
     if (videoFetchedRef.current) return;
-    
     try {
       const response = await getEpisodeLinkByTitle(videoTitle, season, episode);
-      
-      if (response && response.url) {
-        // Stop any polling if running
-        if (pollingInterval.current) {
-          clearInterval(pollingInterval.current);
-          pollingInterval.current = null;
-        }
-        
+      if (response.url) {
+        pollingInterval.current && clearInterval(pollingInterval.current);
         setVideoUrl(response.url);
         setVideoFetched(true);
         videoFetchedRef.current = true;
         setLoading(false);
-        console.log('Video URL fetched:', response.url);
-      } else if (response && response.progress_url) {
-        startPolling(response.progress_url);
+      } else if (response.progress_url) {
+        const poll = async () => {
+          try {
+            const res = await fetch(response.progress_url);
+            const data = await res.json();
+            setProgress(data.progress);
+            if (data.progress.progress >= 100) {
+              pollingInterval.current && clearInterval(pollingInterval.current);
+              timeoutRef.current = setTimeout(fetchMovieLink, 5000);
+            }
+          } catch (e) {
+            console.error(e);
+          }
+        };
+        pollingInterval.current = setInterval(poll, 2000);
       } else {
-        console.error('No video URL or progress URL found in response:', response);
-        setError('Video URL not available');
+        throw new Error('No URL or progress URL');
       }
-    } catch (error) {
-      console.error('Error fetching episode link:', error);
+    } catch (e) {
+      console.error(e);
       setError('Failed to load episode');
-      toast({
-        title: "Error",
-        description: "Could not load the episode",
-        variant: "destructive"
-      });
-    } finally {
-      if (!videoFetchedRef.current && !videoUrl) {
-        setLoading(false);
-      }
-    }
-  };
-
-  // Fetch content ratings if not provided
-  useEffect(() => {
-    const fetchRatingInfo = async () => {
-      if (contentRatings && contentRatings.length > 0) {
-        const usRating = contentRatings.find(r => r.country === 'usa') || contentRatings[0];
-        setRatingInfo({
-          rating: usRating.name || 'NR',
-          description: usRating.description || ''
-        });
-        return;
-      }
-      
-      try {
-        const showData = await getTvShowCard(videoTitle);
-        if (showData && showData.data && showData.data.contentRatings) {
-          const ratings = showData.data.contentRatings;
-          const usRating = ratings.find((r: any) => r.country === 'US') || ratings[0];
-          setRatingInfo({
-            rating: usRating?.name || 'TV-14',
-            description: usRating?.description || ''
-          });
-        }
-      } catch (error) {
-        console.error('Failed to fetch show ratings:', error);
-      }
-    };
-    
-    fetchRatingInfo();
-  }, [videoTitle, contentRatings]);
-
-  const pollProgress = async (progressUrl: string) => {
-    try {
-      const res = await fetch(progressUrl);
-      const data = await res.json();
-      
-      setProgress(data.progress);
-      
-      if (data.progress.progress >= 100) {
-        if (pollingInterval.current) {
-          clearInterval(pollingInterval.current);
-          pollingInterval.current = null;
-        }
-        
-        if (!videoFetchedRef.current) {
-          timeoutRef.current = setTimeout(fetchMovieLink, 5000);
-        }
-      }
-    } catch (error) {
-      console.error('Error polling progress:', error);
-    }
-  };
-
-  const startPolling = (progressUrl: string) => {
-    if (!pollingInterval.current) {
-      const interval = setInterval(() => pollProgress(progressUrl), 2000);
-      pollingInterval.current = interval;
+      toast({ title: 'Error', description: 'Could not load the episode', variant: 'destructive' });
+      setLoading(false);
     }
   };
 
+  // Main init: fetch TV show card, then fetch link
   useEffect(() => {
     if (!videoTitle || !season || !episode) {
       setError('Missing required video information');
       setLoading(false);
       return;
     }
-    
-    // Reset state for new episode
+
+    setLoading(true);
+    setError(null);
     setVideoUrl(null);
     setVideoFetched(false);
     videoFetchedRef.current = false;
-    setLoading(true);
     setProgress(null);
-    setError(null);
-    
-    // Start fetching
-    fetchMovieLink();
-    
+
+    const init = async () => {
+      try {
+        const data = await getTvShowCard(videoTitle);
+        setShowData(data);
+        const img = selectRandomImage(data);
+        setSelectedImage(img);
+        const ratings = data.data?.contentRatings || contentRatings || [];
+        if (ratings.length) {
+          const us = ratings.find(r => r.country === 'usa') || ratings[0];
+          setRatingInfo({ rating: us.name || 'NR', description: us.description || '' });
+        }
+      } catch (e) {
+        console.error('Show card fetch error:', e);
+        setError('Failed to load show data');
+        toast({ title: 'Error', description: 'Could not load show data', variant: 'destructive' });
+        setLoading(false);
+        return;
+      }
+      await fetchMovieLink();
+    };
+
+    init();
+
     return () => {
-      if (pollingInterval.current) clearInterval(pollingInterval.current);
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      pollingInterval.current && clearInterval(pollingInterval.current);
+      timeoutRef.current && clearTimeout(timeoutRef.current);
     };
   }, [videoTitle, season, episode]);
 
-  // Add effect to update loading state when videoUrl changes
   useEffect(() => {
-    if (videoUrl) {
-      setLoading(false);
-    }
+    if (videoUrl) setLoading(false);
   }, [videoUrl]);
 
   if (error) {
@@ -212,7 +182,7 @@ const TVShowPlayer: React.FC<TVShowPlayerProps> = ({
         <p className="text-gray-400 mb-6">{error}</p>
         <button
           onClick={onClosePlayer}
-          className="px-6 py-2 bg-theme-primary hover:bg-theme-primary-hover rounded font-medium transition-colors"
+          className="px-6 py-2 bg-theme-primary hover:bg-theme-primary-hover rounded font-medium"
         >
           Back to Show
         </button>
@@ -222,58 +192,76 @@ const TVShowPlayer: React.FC<TVShowPlayerProps> = ({
 
   if (loading || !videoFetched || !videoUrl) {
     return (
-      <div className="fixed inset-0 z-50 bg-gradient-to-br from-theme-background-dark to-black flex flex-col items-center justify-center">
-        <div className="text-center max-w-md px-6">
-          <div className="mb-6 flex justify-center">
-            {poster ? (
-              <img src={poster} alt={movieTitle} className="h-auto w-24 rounded-lg shadow-lg" />
+      <>
+        {/* Hero backdrop with fade-in */}
+        <div className="absolute top-0 left-0 w-full h-full z-50">
+          <div className="absolute inset-0">
+            <img
+              src={selectedImage}
+              onLoad={() => setImageLoaded(true)}
+              onError={(e) => {
+                const target = e.target as HTMLImageElement;
+                target.src = '/placeholder.svg';
+              }}
+              className={`w-full h-full object-cover transition-opacity duration-700 ease-in-out ${
+                imageLoaded ? 'opacity-100' : 'opacity-0'
+              }`}
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-netflix-black via-netflix-black/50 to-transparent" />
+            <div className="absolute inset-0 bg-gradient-to-r from-netflix-black/80 via-netflix-black/40 to-transparent" />
+          </div>
+        </div>
+        <div className="fixed inset-0 z-50 flex flex-col items-center backdrop-blur-sm justify-center">
+          <div className="text-center max-w-md px-6">
+            <div className="mb-6 flex justify-center">
+              {poster ? (
+                <img src={poster} alt={movieTitle} className="h-auto w-24 rounded-lg shadow-lg" />
+              ) : (
+                <div className="flex items-center justify-center h-24 w-24 bg-theme-primary/20 rounded-lg">
+                  <Play className="h-12 w-12 text-theme-primary" />
+                </div>
+              )}
+            </div>
+
+            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
+              {progress && progress.progress < 100
+                ? `Preparing "${episodeTitle}"`
+                : `Loading "${episodeTitle}"`
+              }
+            </h2>
+
+            {progress ? (
+              <>
+                <p className="text-gray-300 mb-4">
+                  {progress.progress < 5
+                    ? 'Initializing your stream...'
+                    : progress.progress < 100
+                      ? 'Your stream is being prepared.'
+                      : 'Almost ready! Starting playback soon...'}
+                </p>
+                <div className="relative w-full h-2 bg-gray-800 rounded-full overflow-hidden mb-2">
+                  <div
+                    className="absolute top-0 left-0 h-full bg-gradient-to-r from-theme-primary to-theme-primary-light transition-all duration-300"
+                    style={{ width: `${Math.min(100, Math.max(0, progress.progress))}%` }}
+                  />
+                </div>
+                <p className="text-sm text-gray-400">
+                  {Math.round(progress.progress)}% complete
+                </p>
+              </>
             ) : (
-              <div className="flex items-center justify-center h-24 w-24 bg-theme-primary/20 rounded-lg">
-                <Play className="h-12 w-12 text-theme-primary" />
+              <div className="flex justify-center">
+                <Loader2 className="h-8 w-8 animate-spin text-theme-primary" />
               </div>
             )}
           </div>
-          
-          <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
-            {progress && progress.progress < 100 
-              ? `Preparing "${episodeTitle}"`
-              : `Loading "${episodeTitle}"`
-            }
-          </h2>
-          
-          {progress ? (
-            <>
-              <p className="text-gray-300 mb-4">
-                {progress.progress < 5
-                  ? 'Initializing your stream...'
-                  : progress.progress < 100
-                    ? 'Your stream is being prepared.'
-                    : 'Almost ready! Starting playback soon...'}
-              </p>
-              <div className="relative w-full h-2 bg-gray-800 rounded-full overflow-hidden mb-2">
-                <div
-                  className="absolute top-0 left-0 h-full bg-gradient-to-r from-theme-primary to-theme-primary-light transition-all duration-300"
-                  style={{ width: `${Math.min(100, Math.max(0, progress.progress))}%` }}
-                />
-              </div>
-              <p className="text-sm text-gray-400">
-                {Math.round(progress.progress)}% complete
-              </p>
-            </>
-          ) : (
-            <div className="flex justify-center">
-              <Loader2 className="h-8 w-8 animate-spin text-theme-primary" />
-            </div>
-          )}
         </div>
-      </div>
+      </>
     );
   }
 
-  // TV Show specific overlay elements that will be passed to VideoPlayer
   const tvShowOverlay = (
     <>
-      {/* Top info bar */}
       <div className="absolute top-0 left-0 right-0 z-10 flex items-center p-4 bg-gradient-to-b from-black/80 to-transparent">
         <div>
           <div className="flex items-center">
@@ -289,8 +277,7 @@ const TVShowPlayer: React.FC<TVShowPlayerProps> = ({
           <h1 className="text-white text-lg font-bold">{episodeTitle}</h1>
         </div>
       </div>
-      
-      {/* Episodes button */}
+
       <div className="absolute top-4 right-16 z-20">
         <button
           onClick={onShowEpisodes}
@@ -308,7 +295,7 @@ const TVShowPlayer: React.FC<TVShowPlayerProps> = ({
       <VideoPlayer
         url={videoUrl}
         title={`${videoTitle} - ${season}E${episodeNumber}`}
-        poster={poster || thumbnail}
+        poster={selectedImage}
         startTime={startTime}
         onClose={onClosePlayer}
         onProgressUpdate={onProgressUpdate}

frontend/src/lib/storage.ts

@@ -11,7 +11,6 @@ export interface WatchProgress {
 
 // Type for my list items
 export interface MyListItem {
-  id: string;
   title: string;
   type: 'movie' | 'tvshow';
   addedAt: string;

frontend/src/pages/TvShowPlayerPage.tsx

@@ -410,8 +410,6 @@ const TvShowPlayerPage = () => {
         episode={selectedEpisode}
         movieTitle={title || ''}
         contentRatings={showInfo?.data?.contentRatings || []}
-        thumbnail={showInfo?.data?.image || showInfo?.data?.poster_path}
-        poster={showInfo?.data?.poster_path}
         startTime={getStartTime()}
         onClosePlayer={handleBack}
         onProgressUpdate={handleProgressUpdate}