Rating Overlay fix

frontend/TODO.md

@@ -5,8 +5,7 @@ Project Description
 <em>[TODO.md spec & Kanban Board](https://bit.ly/3fCwKfM)</em>
 
 ### Todo
-[] reset link fetcher's state after cancelling and closing
-[] create searching page
+[] movie player progressbar hover time is inaccurate.
 
 ### In Progress
 

frontend/app/watch/movie/[title]/page.tsx

@@ -3,19 +3,21 @@
 import { useRouter } from 'next/navigation';
 import MoviePlayer from '@/components/movie/MoviePlayer';
 import { useParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { getMovieMetadata } from '@/lib/lb';
 
 interface Movie {
     name: string;
     image: string;
-    translations?: any;
+    translations?: {
+        nameTranslations: { language: string; name: string; isAlias?: boolean }[];
+    };
     year?: number;
-    genres?: any[];
+    genres?: string[];
     score?: number;
-    contentRatings?: any[];
+    contentRatings?: ContentRating[];
     characters?: any;
-    artworks?: any[];
+    artworks?: Artwork[];
 }
 
 interface ContentRating {
@@ -24,8 +26,12 @@ interface ContentRating {
     description: string;
 }
 
+interface Artwork {
+    type: number;
+    thumbnail: string;
+}
+
 const MoviePlayerPage = () => {
-    // Assuming you get the movie title from the route params
     const router = useRouter();
     const { title } = useParams();
     const videoTitle = Array.isArray(title) ? title[0] : title;
@@ -37,55 +43,72 @@ const MoviePlayerPage = () => {
     const [movie, setMovie] = useState<Movie | null>(null);
 
     useEffect(() => {
-        async function fetchMovie() {
+        const fetchMovie = async () => {
             try {
                 const data = await getMovieMetadata(decodeURIComponent(videoTitle));
                 setMovie(data.data as Movie);
-                console.log(data.data?.contentRatings);
             } catch (error) {
                 console.error('Failed to fetch movie details', error);
             }
+        };
+
+        if (videoTitle) {
+            fetchMovie();
         }
-        fetchMovie();
     }, [videoTitle]);
 
-    function formatContentRatings(contentRatings: any[]): ContentRating[] | undefined {
-        if (!contentRatings || contentRatings.length === 0) return undefined;
-        return contentRatings.map(({ country, name, description }) => ({ country, name, description }));
-    }
-        
-    const formattedContentRating = movie?.contentRatings ? formatContentRatings(movie.contentRatings) : undefined;
-
-    console.log(formattedContentRating);
-
-    // Select a random background image (type 15) for the thumbnail
-    const getRandomThumbnail = (artworks?: any[]): string => {
-        if (!artworks) return '';
-        const backgrounds = artworks.filter((artwork) => artwork.type === 15); // Filter for type 15 (backgrounds)
-        if (backgrounds.length === 0) return ''; // No backgrounds found, return default empty string
-        const randomBackground = backgrounds[Math.floor(Math.random() * backgrounds.length)]; // Randomly select one
-        return randomBackground.thumbnail || ''; // Return the thumbnail (or fallback if undefined)
-    };
+    const formatContentRatings = useMemo(() => {
+        return (contentRatings: ContentRating[] = []) => {
+            if (contentRatings.length === 0) return undefined;
+            return contentRatings.map(({ country, name, description }) => ({ country, name, description }));
+        };
+    }, []);
 
-    const randomThumbnail = getRandomThumbnail(movie?.artworks);
+    const formattedContentRating = useMemo(() => {
+        return movie?.contentRatings ? formatContentRatings(movie.contentRatings) : undefined;
+    }, [movie, formatContentRatings]);
+
+    const getRandomThumbnail = useMemo(() => {
+        return (artworks?: Artwork[]): string => {
+            if (!artworks) return '';
+            const backgrounds = artworks.filter((artwork) => artwork.type === 15);
+            if (backgrounds.length === 0) return '';
+            const randomBackground = backgrounds[Math.floor(Math.random() * backgrounds.length)];
+            return randomBackground.thumbnail || '';
+        };
+    }, []);
+
+    const randomThumbnail = useMemo(() => getRandomThumbnail(movie?.artworks), [getRandomThumbnail, movie]);
+
+    // Fallback for movie title if undefined
+    const movieTitle = useMemo(() => {
+        return (
+            movie?.translations?.nameTranslations?.find((t) => t.language === 'eng')?.name ||
+            movie?.translations?.nameTranslations?.find((t) => t.isAlias && t.language === 'eng')?.name ||
+            movie?.name ||
+            'Unknown Title'
+        );
+    }, [movie]);
+
+    useEffect(() => {
+        if (!title) {
+            handleClose();
+        }
+    }, [title]);
 
-    if (!title) {
-        handleClose();
+    if (!movie) {
+        return <div>Loading...</div>;
     }
 
     return (
-        <>
-            {movie && (
-                <MoviePlayer
-                    videoTitle={decodeURIComponent(videoTitle) as string}
-                    movieTitle={movie.name}
-                    thumbnail={randomThumbnail || movie.image}
-                    poster={movie.image}
-                    contentRatings={formattedContentRating}
-                    onClosePlayer={handleClose}
-                />
-            )}
-        </>
+        <MoviePlayer
+            videoTitle={decodeURIComponent(videoTitle)}
+            movieTitle={movieTitle}
+            thumbnail={randomThumbnail || movie.image}
+            poster={movie.image}
+            contentRatings={formattedContentRating}
+            onClosePlayer={handleClose}
+        />
     );
 };
 

frontend/components/movie/MoviePlayer.tsx

@@ -9,7 +9,7 @@ import {
     ForwardIcon,
     BackwardIcon,
 } from '@heroicons/react/24/solid';
-import { XCircleIcon, FilmIcon } from '@heroicons/react/24/outline';
+import { XCircleIcon, FilmIcon, ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/outline';
 import { getMovieLinkByTitle } from '@/lib/lb';
 import { motion, AnimatePresence } from 'framer-motion';
 
@@ -507,7 +507,7 @@ const MoviePlayer: React.FC<MoviePlayerProps> = ({
             setRatingShown(true);
             setTimeout(() => {
                 setShowRatingOverlay(true);
-                setTimeout(() => setShowRatingOverlay(false), 5000);
+                setTimeout(() => setShowRatingOverlay(false), 8000);
             }, 800);
         }
     };
@@ -671,25 +671,14 @@ const MoviePlayer: React.FC<MoviePlayerProps> = ({
                     >
                         <source src={videoBlobUrl || videoUrl} type="video/webm" />
                     </video>
-
-                    {/* Controls Overlay */}
-                    <div
-                        className={`absolute inset-0 flex flex-col justify-between transition-opacity duration-300 z-[1000] ${showControls || localSpinnerLoading ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
-                    >
-                        {/* Top Controls */}
-                        <div className="flex items-center justify-between p-6 bg-gradient-to-b from-black/90 via-black/60 to-transparent">
-                            <div className="flex flex-col">
-                                <h1 className="text-white text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">
-                                    {movieTitle || 'Video Player'}
-                                </h1>
-                                <AnimatePresence>
+                    <AnimatePresence>
                                     {showRatingOverlay && contentRatings.length > 0 && (
                                         <motion.div
                                             initial={{ opacity: 0, y: 20 }}
                                             animate={{ opacity: 1, y: 0 }}
                                             exit={{ opacity: 0, y: -20 }}
                                             transition={{ duration: 0.5 }}
-                                            className="mt-2 inline-flex flex-col items-start bg-black/60 backdrop-blur-sm text-white text-sm px-3 py-1 rounded-md border border-gray-700/50"
+                                            className="fixed top-[5rem] ml-4 inline-flex flex-col items-start bg-black/60 backdrop-blur-sm text-white text-sm px-3 py-1 rounded-md border border-gray-700/50"
                                         >
                                             {/* Rating Name */}
                                             <motion.div className="flex items-center text-xl">
@@ -712,6 +701,17 @@ const MoviePlayer: React.FC<MoviePlayerProps> = ({
                                         </motion.div>
                                     )}
                                 </AnimatePresence>
+                    {/* Controls Overlay */}
+                    <div
+                        className={`absolute inset-0 flex flex-col justify-between transition-opacity duration-300 z-[1000] ${showControls || localSpinnerLoading ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
+                    >
+                        {/* Top Controls */}
+                        <div className="flex items-center justify-between p-6 bg-gradient-to-b from-black/90 via-black/60 to-transparent">
+                            <div className="flex flex-col">
+                                <h1 className="text-white text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">
+                                    {movieTitle || 'Video Player'}
+                                </h1>
+                                
                             </div>
 
                             {onClosePlayer && (
@@ -719,7 +719,7 @@ const MoviePlayer: React.FC<MoviePlayerProps> = ({
                                     onClick={handleClose}
                                     className="text-white hover:text-red-400 transition-colors p-2 rounded-full hover:bg-black/30"
                                 >
-                                    <XCircleIcon className="size-10" />
+                                    <ArrowLeftStartOnRectangleIcon className="size-10" />
                                 </button>
                             )}
                         </div>

frontend/lib/config.ts

@@ -1,2 +1,2 @@
-export const WEB_VERSION = 'v0.2.2 beta';
+export const WEB_VERSION = 'v0.2.3 beta';
 export const SEARCH_API_URL = 'https://hans-den-search.hf.space';