v0.2.1 beta. search page, tvshow player and movie player

frontend/TODO.md

@@ -10,6 +10,4 @@ Project Description
 
 ### In Progress
 
-### Done ✓
-
-
+### Done ✓

frontend/app/{movies → browse/movies}/page.tsx

@@ -54,10 +54,13 @@ function MoviesContent() {
     };
 
     return (
-        <div className="portrait:p-2 p-4">
+        <div className="portrait:p-2 p-4" data-oid="fvshohr">
             {loading ? (
-                <div className="flex items-center justify-center min-h-[60vh]">
-                    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"></div>
+                <div className="flex items-center justify-center min-h-[60vh]" data-oid="bvikmt-">
+                    <div
+                        className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+                        data-oid="rtqwuek"
+                    ></div>
                 </div>
             ) : (
                 <>
@@ -65,36 +68,44 @@ function MoviesContent() {
                     <div
                         key={currentPage}
                         className="flex flex-wrap justify-center items-center portrait:gap-2 gap-10"
+                        data-oid="aln__mo"
                     >
                         {movies.map((movie, index) => (
                             <div
                                 key={`${movie.title}-${index}`}
                                 className="transform transition-transform duration-300 hover:scale-105 w-[fit-content]"
+                                data-oid="769vh_3"
                             >
-                                <MovieCard title={movie.title} />
+                                <MovieCard title={movie.title} data-oid="ypnr91j" />
                             </div>
                         ))}
                     </div>
 
                     {/* Pagination */}
-                    <div className="mt-12 flex flex-row items-center justify-center gap-2">
-                        <div className="flex items-center gap-2">
+                    <div
+                        className="mt-12 flex flex-row items-center justify-center gap-2"
+                        data-oid="y9gjnx6"
+                    >
+                        <div className="flex items-center gap-2" data-oid="khk:95c">
                             <button
                                 onClick={() => handlePageChange(1)}
                                 disabled={currentPage <= 1}
                                 className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                data-oid="h_956lx"
                             >
                                 <svg
                                     className="w-5 h-5"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24"
+                                    data-oid="jdlqnep"
                                 >
                                     <path
                                         strokeLinecap="round"
                                         strokeLinejoin="round"
                                         strokeWidth={2}
                                         d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                                        data-oid="d2gu_mw"
                                     />
                                 </svg>
                             </button>
@@ -102,46 +113,55 @@ function MoviesContent() {
                                 onClick={() => handlePageChange(currentPage - 1)}
                                 disabled={currentPage <= 1}
                                 className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                data-oid="5yi3mm4"
                             >
                                 <svg
                                     className="w-5 h-5"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24"
+                                    data-oid="gk-zc44"
                                 >
                                     <path
                                         strokeLinecap="round"
                                         strokeLinejoin="round"
                                         strokeWidth={2}
                                         d="M15 19l-7-7 7-7"
+                                        data-oid="_jaw6sg"
                                     />
                                 </svg>
                             </button>
                         </div>
 
-                        <div className="flex items-center gap-2">
-                            <span className="px-4 py-2 rounded-lg bg-gray-800 text-white font-medium">
+                        <div className="flex items-center gap-2" data-oid="d.gjt6x">
+                            <span
+                                className="px-4 py-2 rounded-lg bg-gray-800 text-white font-medium"
+                                data-oid="wir:k4e"
+                            >
                                 Page {currentPage} of {totalPages}
                             </span>
                         </div>
 
-                        <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-2" data-oid="bs-wdt.">
                             <button
                                 onClick={() => handlePageChange(currentPage + 1)}
                                 disabled={currentPage >= totalPages}
                                 className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                data-oid="zr44.g5"
                             >
                                 <svg
                                     className="w-5 h-5"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24"
+                                    data-oid="v3y5gev"
                                 >
                                     <path
                                         strokeLinecap="round"
                                         strokeLinejoin="round"
                                         strokeWidth={2}
                                         d="M9 5l7 7-7 7"
+                                        data-oid="r9qw8a8"
                                     />
                                 </svg>
                             </button>
@@ -149,18 +169,21 @@ function MoviesContent() {
                                 onClick={() => handlePageChange(totalPages)}
                                 disabled={currentPage >= totalPages}
                                 className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                data-oid="v0wgcaw"
                             >
                                 <svg
                                     className="w-5 h-5"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24"
+                                    data-oid="b__v.hd"
                                 >
                                     <path
                                         strokeLinecap="round"
                                         strokeLinejoin="round"
                                         strokeWidth={2}
                                         d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                                        data-oid="ha_gdi9"
                                     />
                                 </svg>
                             </button>
@@ -176,29 +199,45 @@ export default function MoviesPage() {
     const [filterActive, setFilterActive] = useState(false);
 
     return (
-        <div className="page min-h-screen pt-20 pb-4">
-            <div className="container mx-auto portrait:px-3 px-4">
+        <div className="page min-h-screen pt-20 pb-4" data-oid="c30dpdf">
+            <div className="container mx-auto portrait:px-3 px-4" data-oid="qc8wc5o">
                 {/* Header Section */}
-                <div className="mb-8 space-y-2">
-                    <h2 className="text-4xl font-bold text-white">Movies</h2>
-                    <p className="text-gray-400 max-w-3xl">
+                <div className="mb-8 space-y-2" data-oid="l_h1wg-">
+                    <h2 className="text-4xl font-bold text-white" data-oid="q5f:fz6">
+                        Movies
+                    </h2>
+                    <p className="text-gray-400 max-w-3xl" data-oid="087lc-o">
                         Explore our collection of movies from various genres. From action to
                         romance, find your next movie night selection here.
                     </p>
-                    <GenresFilter mediaType="movie" onFilterChange={setFilterActive} />
+                    <GenresFilter
+                        mediaType="movie"
+                        onFilterChange={setFilterActive}
+                        data-oid="7v966l9"
+                    />
                 </div>
 
                 {/* Content Section */}
                 {!filterActive && (
-                    <div className="bg-gray-800/30 rounded-3xl backdrop-blur-sm border border-gray-700/50">
+                    <div
+                        className="bg-gray-800/30 rounded-3xl backdrop-blur-sm border border-gray-700/50"
+                        data-oid="go9ax7."
+                    >
                         <Suspense
                             fallback={
-                                <div className="flex items-center justify-center min-h-[50vh]">
-                                    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"></div>
+                                <div
+                                    className="flex items-center justify-center min-h-[50vh]"
+                                    data-oid=":rp_h5l"
+                                >
+                                    <div
+                                        className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+                                        data-oid="w:3x912"
+                                    ></div>
                                 </div>
                             }
+                            data-oid="fvt3emu"
                         >
-                            <MoviesContent />
+                            <MoviesContent data-oid="tgt2kr2" />
                         </Suspense>
                     </div>
                 )}

frontend/app/{tvshows → browse/tvshows}/page.tsx

@@ -54,10 +54,13 @@ function TvShowsContent() {
     };
 
     return (
-        <div className="portrait:p-2 p-4">
+        <div className="portrait:p-2 p-4" data-oid="n2:_pgl">
             {loading ? (
-                <div className="flex items-center justify-center min-h-[60vh]">
-                    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"></div>
+                <div className="flex items-center justify-center min-h-[60vh]" data-oid="ae6-.3e">
+                    <div
+                        className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+                        data-oid="nmkri01"
+                    ></div>
                 </div>
             ) : (
                 <>
@@ -65,36 +68,48 @@ function TvShowsContent() {
                     <div
                         key={currentPage}
                         className="flex flex-wrap justify-center items-center portrait:gap-2 gap-10"
+                        data-oid="lzyd1tg"
                     >
                         {tvshows.map((show, index) => (
                             <div
                                 key={`${show.title}-${index}`}
                                 className="transform transition-transform duration-300 hover:scale-105 w-[fit-content]"
+                                data-oid="rct63vr"
                             >
-                                <TvShowCard title={show.title} episodesCount={show.episodeCount} />
+                                <TvShowCard
+                                    title={show.title}
+                                    episodesCount={show.episodeCount}
+                                    data-oid="k259d8k"
+                                />
                             </div>
                         ))}
                     </div>
 
                     {/* Pagination */}
-                    <div className="mt-12 flex flex-row items-center justify-center gap-2">
-                        <div className="flex items-center gap-2">
+                    <div
+                        className="mt-12 flex flex-row items-center justify-center gap-2"
+                        data-oid="tv8c_oq"
+                    >
+                        <div className="flex items-center gap-2" data-oid="djdzja-">
                             <button
                                 onClick={() => handlePageChange(1)}
                                 disabled={currentPage <= 1}
                                 className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                data-oid="vy3:pbt"
                             >
                                 <svg
                                     className="w-5 h-5"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24"
+                                    data-oid="ithecvc"
                                 >
                                     <path
                                         strokeLinecap="round"
                                         strokeLinejoin="round"
                                         strokeWidth={2}
                                         d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                                        data-oid="s6-ahz3"
                                     />
                                 </svg>
                             </button>
@@ -102,46 +117,55 @@ function TvShowsContent() {
                                 onClick={() => handlePageChange(currentPage - 1)}
                                 disabled={currentPage <= 1}
                                 className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                data-oid="3o:hlwp"
                             >
                                 <svg
                                     className="w-5 h-5"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24"
+                                    data-oid="hshz1fz"
                                 >
                                     <path
                                         strokeLinecap="round"
                                         strokeLinejoin="round"
                                         strokeWidth={2}
                                         d="M15 19l-7-7 7-7"
+                                        data-oid="ur0xm_r"
                                     />
                                 </svg>
                             </button>
                         </div>
 
-                        <div className="flex items-center gap-2">
-                            <span className="px-4 py-2 rounded-lg bg-gray-800 text-white font-medium">
+                        <div className="flex items-center gap-2" data-oid="flleluo">
+                            <span
+                                className="px-4 py-2 rounded-lg bg-gray-800 text-white font-medium"
+                                data-oid="o6jdc8l"
+                            >
                                 Page {currentPage} of {totalPages}
                             </span>
                         </div>
 
-                        <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-2" data-oid="mvf4as4">
                             <button
                                 onClick={() => handlePageChange(currentPage + 1)}
                                 disabled={currentPage >= totalPages}
                                 className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                data-oid="urckp54"
                             >
                                 <svg
                                     className="w-5 h-5"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24"
+                                    data-oid="ic4kb.e"
                                 >
                                     <path
                                         strokeLinecap="round"
                                         strokeLinejoin="round"
                                         strokeWidth={2}
                                         d="M9 5l7 7-7 7"
+                                        data-oid="k3a5i-q"
                                     />
                                 </svg>
                             </button>
@@ -149,18 +173,21 @@ function TvShowsContent() {
                                 onClick={() => handlePageChange(totalPages)}
                                 disabled={currentPage >= totalPages}
                                 className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                data-oid="r.gov:g"
                             >
                                 <svg
                                     className="w-5 h-5"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24"
+                                    data-oid="stt:nzr"
                                 >
                                     <path
                                         strokeLinecap="round"
                                         strokeLinejoin="round"
                                         strokeWidth={2}
                                         d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                                        data-oid="qf14v4d"
                                     />
                                 </svg>
                             </button>
@@ -176,29 +203,45 @@ export default function TvShowsPage() {
     const [filterActive, setFilterActive] = useState(false);
 
     return (
-        <div className="page min-h-screen pt-20 pb-4">
-            <div className="container mx-auto portrait:px-3 px-4">
+        <div className="page min-h-screen pt-20 pb-4" data-oid="g:6lbe-">
+            <div className="container mx-auto portrait:px-3 px-4" data-oid="rfwhupx">
                 {/* Header Section */}
-                <div className="mb-8 space-y-2">
-                    <h2 className="text-4xl font-bold text-white">TV Shows</h2>
-                    <p className="text-gray-400 max-w-3xl">
+                <div className="mb-8 space-y-2" data-oid="s_fx0hn">
+                    <h2 className="text-4xl font-bold text-white" data-oid="i2lnnbw">
+                        TV Shows
+                    </h2>
+                    <p className="text-gray-400 max-w-3xl" data-oid="_-_30bb">
                         Explore our collection of TV series from various genres. From drama to
                         comedy, find your next binge-worthy show here.
                     </p>
-                    <GenresFilter mediaType="series" onFilterChange={setFilterActive} />
+                    <GenresFilter
+                        mediaType="series"
+                        onFilterChange={setFilterActive}
+                        data-oid="rm:i33j"
+                    />
                 </div>
 
                 {/* Content Section */}
                 {!filterActive && (
-                    <div className="bg-gray-800/30 rounded-3xl backdrop-blur-sm border border-gray-700/50">
+                    <div
+                        className="bg-gray-800/30 rounded-3xl backdrop-blur-sm border border-gray-700/50"
+                        data-oid="qbe.vm6"
+                    >
                         <Suspense
                             fallback={
-                                <div className="flex items-center justify-center min-h-[50vh]">
-                                    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"></div>
+                                <div
+                                    className="flex items-center justify-center min-h-[50vh]"
+                                    data-oid="y_wp-ye"
+                                >
+                                    <div
+                                        className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+                                        data-oid="12i7scm"
+                                    ></div>
                                 </div>
                             }
+                            data-oid="ocs:-_m"
                         >
-                            <TvShowsContent />
+                            <TvShowsContent data-oid="0vw1_jx" />
                         </Suspense>
                     </div>
                 )}

frontend/app/layout.tsx

@@ -10,18 +10,19 @@ const inter = Inter({ subsets: ['latin'] });
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
     return (
-        <html lang="en">
-            <body className={inter.className}>
-                <LoadingProvider>
-                    <SpinnerLoadingProvider>
-                        <div className="min-h-screen bg-gray-900 text-white">
-                            <Navbar />
+        <html lang="en" data-oid="1_gq4u4">
+            <body className={inter.className} data-oid="9kys4r7">
+                <LoadingProvider data-oid=".vw1l-d">
+                    <SpinnerLoadingProvider data-oid="coli-8u">
+                        <div className="min-h-screen bg-gray-900 text-white" data-oid="lqjkae6">
+                            <Navbar data-oid="5q86ab0" />
                             {children}
                             <ProgressBar
                                 height="5px"
                                 color="#8927e9"
                                 options={{ showSpinner: false }}
                                 shallowRouting
+                                data-oid="egg_77i"
                             />
                         </div>
                     </SpinnerLoadingProvider>

frontend/app/movie/[title]/LoadingSkeleton.tsx

@@ -1,32 +1,56 @@
 export function LoadingSkeleton() {
     return (
-        <div className="w-full min-h-screen bg-gray-900 animate-pulse">
+        <div className="w-full min-h-screen bg-gray-900 animate-pulse" data-oid="73f9oui">
             {/* Hero Section Skeleton */}
-            <div className="relative w-full h-[60vh] bg-gray-800">
-                <div className="absolute inset-0 flex items-center justify-center">
-                    <div className="w-full max-w-7xl px-6 space-y-4">
-                        <div className="h-12 bg-gray-700 rounded-lg w-3/4 max-w-2xl"></div>
-                        <div className="h-6 bg-gray-700 rounded-lg w-1/4 max-w-xs"></div>
-                        <div className="flex gap-4">
-                            <div className="h-12 bg-gray-700 rounded-3xl w-32"></div>
-                            <div className="h-12 bg-gray-700 rounded-3xl w-32"></div>
+            <div className="relative w-full h-[60vh] bg-gray-800" data-oid="2lssp0g">
+                <div
+                    className="absolute inset-0 flex items-center justify-center"
+                    data-oid="e:k_3l2"
+                >
+                    <div className="w-full max-w-7xl px-6 space-y-4" data-oid=":8p5gdk">
+                        <div
+                            className="h-12 bg-gray-700 rounded-lg w-3/4 max-w-2xl"
+                            data-oid="bdjs9p4"
+                        ></div>
+                        <div
+                            className="h-6 bg-gray-700 rounded-lg w-1/4 max-w-xs"
+                            data-oid="6hifqk3"
+                        ></div>
+                        <div className="flex gap-4" data-oid="p3p8-k4">
+                            <div
+                                className="h-12 bg-gray-700 rounded-3xl w-32"
+                                data-oid="i_.99tb"
+                            ></div>
+                            <div
+                                className="h-12 bg-gray-700 rounded-3xl w-32"
+                                data-oid="qda.fb7"
+                            ></div>
                         </div>
                     </div>
                 </div>
             </div>
 
             {/* Details Section Skeleton */}
-            <div className="max-w-7xl mx-auto px-6 py-12 space-y-8">
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <div className="md:col-span-2 space-y-4">
-                        <div className="h-8 bg-gray-800 rounded-lg w-1/2"></div>
-                        <div className="h-32 bg-gray-800 rounded-lg w-full"></div>
-                        <div className="h-8 bg-gray-800 rounded-lg w-1/3"></div>
-                        <div className="h-24 bg-gray-800 rounded-lg w-full"></div>
+            <div className="max-w-7xl mx-auto px-6 py-12 space-y-8" data-oid="v_::bzo">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="n5y-f2a">
+                    <div className="md:col-span-2 space-y-4" data-oid="9u4ksz9">
+                        <div className="h-8 bg-gray-800 rounded-lg w-1/2" data-oid="t7dke8s"></div>
+                        <div
+                            className="h-32 bg-gray-800 rounded-lg w-full"
+                            data-oid="f9jr15m"
+                        ></div>
+                        <div className="h-8 bg-gray-800 rounded-lg w-1/3" data-oid="zmv0iah"></div>
+                        <div
+                            className="h-24 bg-gray-800 rounded-lg w-full"
+                            data-oid="xg:0sg7"
+                        ></div>
                     </div>
-                    <div className="space-y-4">
-                        <div className="h-8 bg-gray-800 rounded-lg w-full"></div>
-                        <div className="h-40 bg-gray-800 rounded-lg w-full"></div>
+                    <div className="space-y-4" data-oid="22h1s57">
+                        <div className="h-8 bg-gray-800 rounded-lg w-full" data-oid=":85tapy"></div>
+                        <div
+                            className="h-40 bg-gray-800 rounded-lg w-full"
+                            data-oid="p29b82g"
+                        ></div>
                     </div>
                 </div>
             </div>

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

@@ -8,12 +8,9 @@ import { useLoading } from '@/components/loading/SplashScreen';
 import Link from 'next/link';
 import CastSection from '@/components/sections/CastSection';
 import { PlayIcon } from '@heroicons/react/24/outline';
-import MovieLinkFetcherModal from '@/components/movie/MovieLinkFetcherModal';
-import MoviePlayerModal from '@/components/movie/MoviePlayerModal';
 
 export default function MovieTitlePage() {
     const { title } = useParams();
-    const { loading, setLoading } = useLoading();
     const decodedTitle = decodeURIComponent(Array.isArray(title) ? title[0] : title);
 
     interface Movie {
@@ -30,9 +27,6 @@ export default function MovieTitlePage() {
     }
 
     const [movie, setMovie] = useState<Movie | null>(null);
-    const [isFetchLinkModalOpen, setIsFetchLinkModalOpen] = useState(false);
-    const [isPlayerModalOpen, setIsPlayerModalOpen] = useState(false);
-    const [videoLink, setVideoLink] = useState<string | null>(null);
 
     useEffect(() => {
         async function fetchMovie() {
@@ -47,23 +41,7 @@ export default function MovieTitlePage() {
     }, [decodedTitle]);
 
     if (!movie) {
-        return <LoadingSkeleton />;
-    }
-
-    // When the Play button is clicked, open the link fetcher modal.
-    const handlePlayClick = () => {
-        setIsFetchLinkModalOpen(true);
-    };
-
-    // Callback when the video link is fetched
-    const handleVideoLinkFetched = (link: string) => {
-        setVideoLink(link);
-        setIsFetchLinkModalOpen(false);
-        setIsPlayerModalOpen(true);
-    };
-
-    if (loading) {
-        setLoading(false);
+        return <LoadingSkeleton data-oid="jqmlniy" />;
     }
 
     return (
@@ -75,21 +53,31 @@ export default function MovieTitlePage() {
                 backgroundPosition: 'top',
                 backgroundAttachment: 'fixed',
             }}
+            data-oid="oo5okx8"
         >
             {/* Gradient Overlays */}
-            <div className="h-screen fixed inset-0">
-                <div className="h-full bg-gradient-to-b from-gray-900/90 via-gray-900/50 to-gray-900/90"></div>
+            <div className="h-screen fixed inset-0" data-oid="sxu9dm_">
+                <div
+                    className="h-full bg-gradient-to-b from-gray-900/90 via-gray-900/50 to-gray-900/90"
+                    data-oid="ifbddio"
+                ></div>
             </div>
 
             {/* Main Content Container */}
-            <div className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div
+                className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+                data-oid="igsokki"
+            >
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8" data-oid="6kseqcc">
                     {/* Left Column - Main Info */}
-                    <div className="lg:col-span-2 space-y-6">
-                        <div className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
+                    <div className="lg:col-span-2 space-y-6" data-oid="2dark0v">
+                        <div
+                            className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50"
+                            data-oid="xftrcvj"
+                        >
                             {/* Title and Year */}
-                            <div className="space-y-2">
-                                <h1 className="text-4xl font-bold text-white">
+                            <div className="space-y-2" data-oid="54-fa7v">
+                                <h1 className="text-4xl font-bold text-white" data-oid="ko:o3._">
                                     {movie.translations?.nameTranslations?.find(
                                         (t: { language: string; name: string }) =>
                                             t.language === 'eng',
@@ -104,28 +92,43 @@ export default function MovieTitlePage() {
                                         movie?.name ||
                                         'Unknown Title'}
                                 </h1>
-                                <div className="flex items-center gap-3 text-gray-300">
-                                    <span className="text-lg">{movie.year}</span>
-                                    <span>•</span>
-                                    <span className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm">
+                                <div
+                                    className="flex items-center gap-3 text-gray-300"
+                                    data-oid="ioyb9wh"
+                                >
+                                    <span className="text-lg" data-oid=":9_szf2">
+                                        {movie.year}
+                                    </span>
+                                    <span data-oid="o6sjf8l">•</span>
+                                    <span
+                                        className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm"
+                                        data-oid="p08w2ui"
+                                    >
                                         Movie
                                     </span>
                                 </div>
                             </div>
                             {/* Genres and Score */}
-                            <div className="flex flex-wrap items-center gap-4 mt-4">
-                                <div className="flex items-center gap-2">
-                                    <span className="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            <div
+                                className="flex flex-wrap items-center gap-4 mt-4"
+                                data-oid="jd_:e49"
+                            >
+                                <div className="flex items-center gap-2" data-oid="d:ehbw8">
+                                    <span
+                                        className="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-medium"
+                                        data-oid="cgw5de_"
+                                    >
                                         ⭐ {movie.score ? (movie.score / 1000).toFixed(1) : 'N/A'}
                                     </span>
                                 </div>
-                                <div className="flex flex-wrap gap-2">
+                                <div className="flex flex-wrap gap-2" data-oid="t6r1p.e">
                                     {Array.isArray(movie.genres)
                                         ? movie.genres.map((genre) => (
                                               <Link
                                                   key={genre.id}
                                                   href={`/genre/${encodeURIComponent(genre.slug)}`}
                                                   className="bg-gray-700/50 hover:bg-gray-600/50 text-gray-200 px-3 py-1 rounded-full text-sm transition-colors"
+                                                  data-oid="g.wawra"
                                               >
                                                   {genre.name}
                                               </Link>
@@ -136,11 +139,14 @@ export default function MovieTitlePage() {
                             {/* Content Ratings */}
                             {Array.isArray(movie.contentRatings) &&
                             movie.contentRatings.length > 0 ? (
-                                <div className="mt-6">
-                                    <h3 className="text-lg font-semibold text-gray-200 mb-3">
+                                <div className="mt-6" data-oid="beabj1.">
+                                    <h3
+                                        className="text-lg font-semibold text-gray-200 mb-3"
+                                        data-oid="ypcu8ls"
+                                    >
                                         Content Ratings
                                     </h3>
-                                    <ul className="flex flex-wrap gap-3">
+                                    <ul className="flex flex-wrap gap-3" data-oid="qtdbmg:">
                                         {movie.contentRatings.map((rating, index) => {
                                             const countryFlags = {
                                                 AUS: '🇦🇺',
@@ -165,12 +171,21 @@ export default function MovieTitlePage() {
                                                 <li
                                                     key={index}
                                                     className="flex items-center bg-gray-800/50 px-2 py-1 rounded-md text-xs"
+                                                    data-oid="1gf7ys3"
                                                 >
-                                                    <span className="mr-2">{flag}</span>
-                                                    <span className="text-white font-semibold">
+                                                    <span className="mr-2" data-oid="5m:gb43">
+                                                        {flag}
+                                                    </span>
+                                                    <span
+                                                        className="text-white font-semibold"
+                                                        data-oid="wk7za_2"
+                                                    >
                                                         {rating.name}
                                                     </span>
-                                                    <span className="text-gray-400 ml-1">
+                                                    <span
+                                                        className="text-gray-400 ml-1"
+                                                        data-oid="6_0lvvu"
+                                                    >
                                                         {' '}
                                                         - {rating.description || 'N/A'}
                                                     </span>
@@ -180,32 +195,45 @@ export default function MovieTitlePage() {
                                     </ul>
                                 </div>
                             ) : (
-                                <p className="text-gray-400 text-sm">
+                                <p className="text-gray-400 text-sm" data-oid="_uhsf1e">
                                     No content ratings available.
                                 </p>
                             )}
 
                             {/* Action Buttons */}
-                            <div className="flex justify-start landscape:gap-2 mt-4">
-                                <button
-                                    onClick={handlePlayClick}
+                            <div
+                                className="flex justify-start landscape:gap-2 mt-4"
+                                data-oid="_uwb90y"
+                            >
+                                <Link
+                                    href={`/watch/movie/${encodeURIComponent(decodedTitle)}`}
                                     className="bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-2 md:px-8 landscape:rounded-3xl rounded-s-2xl flex items-center gap-1 transition-colors text-sm md:text-base"
+                                    data-oid="k:mbnk4"
                                 >
-                                    <PlayIcon className="size-5" />
+                                    <PlayIcon className="size-5" data-oid="urpd3kx" />
                                     Play Now
-                                </button>
+                                </Link>
                                 <Link
                                     href="#"
                                     className="bg-gray-800/80 hover:bg-gray-700/80 px-4 py-2 md:px-8 landscape:rounded-3xl rounded-e-2xl transition-colors text-sm md:text-base"
+                                    data-oid="v0s61bn"
                                 >
                                     Add to My List
                                 </Link>
                             </div>
                         </div>
                         {/* Overview Section */}
-                        <div className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
-                            <h3 className="text-lg font-semibold text-gray-200 mb-3">Overview</h3>
-                            <p className="text-gray-300 leading-relaxed">
+                        <div
+                            className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50"
+                            data-oid="ouop9w0"
+                        >
+                            <h3
+                                className="text-lg font-semibold text-gray-200 mb-3"
+                                data-oid="7a6ky4n"
+                            >
+                                Overview
+                            </h3>
+                            <p className="text-gray-300 leading-relaxed" data-oid="nlr586l">
                                 {movie.translations?.overviewTranslations?.find(
                                     (t: { language: string; overview: string }) =>
                                         t.language === 'eng',
@@ -217,29 +245,11 @@ export default function MovieTitlePage() {
                     </div>
 
                     {/* Right Column - Cast */}
-                    <div className="lg:col-span-1">
-                        <CastSection movie={movie} />
+                    <div className="lg:col-span-1" data-oid="75iz6fx">
+                        <CastSection movie={movie} data-oid="h-0mzb7" />
                     </div>
                 </div>
             </div>
-            {/* Modals */}
-            <MovieLinkFetcherModal
-                title={decodedTitle}
-                isOpen={isFetchLinkModalOpen}
-                onClose={() => setIsFetchLinkModalOpen(false)}
-                onVideoLinkFetched={handleVideoLinkFetched}
-            />
-
-            {/* Movie Player Modal */}
-            {videoLink && (
-                <MoviePlayerModal
-                    videoUrl={videoLink}
-                    videoTitle={decodedTitle}
-                    isOpen={isPlayerModalOpen}
-                    onClose={() => setIsPlayerModalOpen(false)}
-                    contentRatings={movie.contentRatings || []} // or pass a single rating if you prefer
-                />
-            )}
         </div>
     );
 }

frontend/app/mylist/page.tsx

@@ -12,5 +12,5 @@ export default function MyListPage() {
     if (spinnerLoading === false) {
         setSpinnerLoading(true);
     }
-    return <div></div>;
+    return <div data-oid="55x4xe6"></div>;
 }

frontend/app/not-found.tsx

@@ -14,11 +14,15 @@ export default function NotFound() {
     }, []);
 
     return (
-        <div className="flex flex-col items-center justify-center min-h-screen text-white">
+        <div
+            className="flex flex-col items-center justify-center min-h-screen text-white"
+            data-oid="7fn1qz:"
+        >
             <h1
                 className={`text-6xl font-bold text-gray-300 transition-transform duration-500 ${
                     floating ? 'translate-y-1' : '-translate-y-1'
                 }`}
+                data-oid="t:boz3."
             >
                 <svg
                     fill="#b8b8b8"
@@ -28,67 +32,88 @@ export default function NotFound() {
                     id="Layer_1"
                     viewBox="0 0 512 512"
                     stroke="#b8b8b8"
+                    data-oid="8vjll3o"
                 >
-                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                    <g id="SVGRepo_bgCarrier" stroke-width="0" data-oid="sg7bur1"></g>
                     <g
                         id="SVGRepo_tracerCarrier"
                         stroke-linecap="round"
                         stroke-linejoin="round"
+                        data-oid="ijsnjgi"
                     ></g>
-                    <g id="SVGRepo_iconCarrier">
+                    <g id="SVGRepo_iconCarrier" data-oid="yhgbs62">
                         {' '}
-                        <g>
+                        <g data-oid="348e0g9">
                             {' '}
-                            <g>
+                            <g data-oid="tqzhz4f">
                                 {' '}
-                                <path d="M170.667,320.007V320c0-11.782-9.551-21.333-21.333-21.333C137.552,298.667,128,308.218,128,320v-56.89 c0-11.782-9.551-21.333-21.333-21.333s-21.333,9.551-21.333,21.333v78.229c-0.001,11.783,9.551,21.334,21.333,21.334H128v42.66 c0,11.782,9.551,21.333,21.333,21.333s21.333-9.551,21.333-21.333v-42.66c11.782,0,21.333-9.551,21.333-21.333 C192,329.558,182.449,320.007,170.667,320.007z"></path>{' '}
+                                <path
+                                    d="M170.667,320.007V320c0-11.782-9.551-21.333-21.333-21.333C137.552,298.667,128,308.218,128,320v-56.89 c0-11.782-9.551-21.333-21.333-21.333s-21.333,9.551-21.333,21.333v78.229c-0.001,11.783,9.551,21.334,21.333,21.334H128v42.66 c0,11.782,9.551,21.333,21.333,21.333s21.333-9.551,21.333-21.333v-42.66c11.782,0,21.333-9.551,21.333-21.333 C192,329.558,182.449,320.007,170.667,320.007z"
+                                    data-oid="gpy308i"
+                                ></path>{' '}
                             </g>{' '}
                         </g>{' '}
-                        <g>
+                        <g data-oid="kmi5rgh">
                             {' '}
-                            <g>
+                            <g data-oid="pprspeg">
                                 {' '}
-                                <path d="M426.667,320.007V320c0-11.782-9.551-21.333-21.333-21.333C393.552,298.667,384,308.218,384,320v-56.89 c0-11.782-9.551-21.333-21.333-21.333c-11.782,0-21.333,9.551-21.333,21.333v78.229c-0.001,11.783,9.551,21.334,21.333,21.334H384 v42.66c0,11.782,9.551,21.333,21.333,21.333c11.782,0,21.333-9.551,21.333-21.333v-42.66c11.782,0,21.333-9.551,21.333-21.333 C448,329.558,438.449,320.007,426.667,320.007z"></path>{' '}
+                                <path
+                                    d="M426.667,320.007V320c0-11.782-9.551-21.333-21.333-21.333C393.552,298.667,384,308.218,384,320v-56.89 c0-11.782-9.551-21.333-21.333-21.333c-11.782,0-21.333,9.551-21.333,21.333v78.229c-0.001,11.783,9.551,21.334,21.333,21.334H384 v42.66c0,11.782,9.551,21.333,21.333,21.333c11.782,0,21.333-9.551,21.333-21.333v-42.66c11.782,0,21.333-9.551,21.333-21.333 C448,329.558,438.449,320.007,426.667,320.007z"
+                                    data-oid="zz.o2js"
+                                ></path>{' '}
                             </g>{' '}
                         </g>{' '}
-                        <g>
+                        <g data-oid="tcnsy4o">
                             {' '}
-                            <g>
+                            <g data-oid="5d7:28a">
                                 {' '}
-                                <path d="M266.667,256c-29.446,0-53.333,23.887-53.333,53.333v64c-0.001,29.446,23.887,53.334,53.333,53.334 S320,402.78,320,373.334v-64C320,279.887,296.114,256,266.667,256z M277.334,373.333c0,5.882-4.785,10.667-10.667,10.667 c-5.882,0-10.667-4.785-10.667-10.667v-64c0-5.882,4.785-10.667,10.667-10.667c5.882,0,10.667,4.785,10.667,10.667V373.333z"></path>{' '}
+                                <path
+                                    d="M266.667,256c-29.446,0-53.333,23.887-53.333,53.333v64c-0.001,29.446,23.887,53.334,53.333,53.334 S320,402.78,320,373.334v-64C320,279.887,296.114,256,266.667,256z M277.334,373.333c0,5.882-4.785,10.667-10.667,10.667 c-5.882,0-10.667-4.785-10.667-10.667v-64c0-5.882,4.785-10.667,10.667-10.667c5.882,0,10.667,4.785,10.667,10.667V373.333z"
+                                    data-oid="u2n36p_"
+                                ></path>{' '}
                             </g>{' '}
                         </g>{' '}
-                        <g>
+                        <g data-oid="fifqx49">
                             {' '}
-                            <g>
+                            <g data-oid=":7qgb9o">
                                 {' '}
-                                <path d="M490.667,0H21.333C9.552,0,0,9.551,0,21.333V192v298.667C0,502.449,9.552,512,21.333,512h469.333 c11.782,0,21.333-9.551,21.333-21.333V192V21.333C512,9.551,502.45,0,490.667,0z M469.334,469.333L469.334,469.333H42.667v-256 h426.667V469.333z M469.334,170.667H42.667v-128h426.667V170.667z"></path>{' '}
+                                <path
+                                    d="M490.667,0H21.333C9.552,0,0,9.551,0,21.333V192v298.667C0,502.449,9.552,512,21.333,512h469.333 c11.782,0,21.333-9.551,21.333-21.333V192V21.333C512,9.551,502.45,0,490.667,0z M469.334,469.333L469.334,469.333H42.667v-256 h426.667V469.333z M469.334,170.667H42.667v-128h426.667V170.667z"
+                                    data-oid="5givur:"
+                                ></path>{' '}
                             </g>{' '}
                         </g>{' '}
-                        <g>
+                        <g data-oid="1x0ldr6">
                             {' '}
-                            <g>
+                            <g data-oid=".3-a8sy">
                                 {' '}
-                                <path d="M435.505,106.666l6.248-6.248c8.331-8.331,8.331-21.838,0-30.17c-8.331-8.331-21.839-8.331-30.17,0l-6.248,6.248 l-6.248-6.248c-8.331-8.331-21.839-8.331-30.17,0c-8.331,8.331-8.331,21.839,0,30.17l6.248,6.248l-6.248,6.248 c-8.331,8.331-8.331,21.839,0,30.17s21.839,8.331,30.17,0l6.248-6.248l6.248,6.248c8.331,8.331,21.839,8.331,30.17,0 s8.331-21.839,0-30.17L435.505,106.666z"></path>{' '}
+                                <path
+                                    d="M435.505,106.666l6.248-6.248c8.331-8.331,8.331-21.838,0-30.17c-8.331-8.331-21.839-8.331-30.17,0l-6.248,6.248 l-6.248-6.248c-8.331-8.331-21.839-8.331-30.17,0c-8.331,8.331-8.331,21.839,0,30.17l6.248,6.248l-6.248,6.248 c-8.331,8.331-8.331,21.839,0,30.17s21.839,8.331,30.17,0l6.248-6.248l6.248,6.248c8.331,8.331,21.839,8.331,30.17,0 s8.331-21.839,0-30.17L435.505,106.666z"
+                                    data-oid="g1ou.9n"
+                                ></path>{' '}
                             </g>{' '}
                         </g>{' '}
-                        <g>
+                        <g data-oid="la4toiq">
                             {' '}
-                            <g>
+                            <g data-oid=".:vwvk4">
                                 {' '}
-                                <path d="M256,85.333H85.333C73.552,85.333,64,94.885,64,106.667S73.552,128,85.333,128H256c11.782,0,21.333-9.551,21.333-21.333 S267.783,85.333,256,85.333z"></path>{' '}
+                                <path
+                                    d="M256,85.333H85.333C73.552,85.333,64,94.885,64,106.667S73.552,128,85.333,128H256c11.782,0,21.333-9.551,21.333-21.333 S267.783,85.333,256,85.333z"
+                                    data-oid="o8q57y9"
+                                ></path>{' '}
                             </g>{' '}
                         </g>{' '}
                     </g>
                 </svg>
             </h1>
 
-            <p className="text-xl text-gray-400 mt-4">
+            <p className="text-xl text-gray-400 mt-4" data-oid=":m00ggz">
                 Oops! The page you’re looking for doesn’t exist.
             </p>
             <Link
                 href="/"
                 className="mt-5 px-6 py-2 rounded-3xl bg-purple-600 hover:bg-purple-500 transition-all text-white text-lg font-semibold shadow-lg shadow-purple-500/30"
+                data-oid="6mc7yrw"
             >
                 Go Home
             </Link>

frontend/app/page.tsx

@@ -48,19 +48,32 @@ export default function Page() {
     }, [slides]);
 
     return (
-        <div className="page">
+        <div className="page" data-oid="ch.sdg3">
             {/* Hero Slideshow */}
-            <div className="relative landscape:h-[100vh] portrait:h-[80vh]">
+            <div className="relative landscape:h-[100vh] portrait:h-[80vh]" data-oid="hqn:4x0">
                 {/* Loading Skeleton */}
                 <div
                     className={`absolute inset-0 flex items-center justify-center bg-gray-900 transition-opacity duration-1000 ${
                         loading ? 'opacity-100' : 'opacity-0 pointer-events-none'
                     }`}
+                    data-oid="-2:w7k3"
                 >
-                    <div className="w-full h-full flex flex-col justify-end bg-gray-800 rounded-lg animate-pulse">
-                        <div className="w-2/4 h-5 landscape:w-1/4 ml-10 landscape:ml-20 mb-4 bg-gray-700 rounded-lg"></div>
-                        <div className="w-3/4 h-14 landscape:w-2/4 ml-10 landscape:ml-20 mb-4 bg-gray-700 rounded-lg"></div>
-                        <div className="w-3/4 h-1/4 landscape:w-2/4 ml-10 landscape:ml-20 mb-20 bg-gray-700 rounded-lg"></div>
+                    <div
+                        className="w-full h-full flex flex-col justify-end bg-gray-800 rounded-lg animate-pulse"
+                        data-oid="n6-k2i1"
+                    >
+                        <div
+                            className="w-2/4 h-5 landscape:w-1/4 ml-10 landscape:ml-20 mb-4 bg-gray-700 rounded-lg"
+                            data-oid="xe8lt-i"
+                        ></div>
+                        <div
+                            className="w-3/4 h-14 landscape:w-2/4 ml-10 landscape:ml-20 mb-4 bg-gray-700 rounded-lg"
+                            data-oid="5aultfi"
+                        ></div>
+                        <div
+                            className="w-3/4 h-1/4 landscape:w-2/4 ml-10 landscape:ml-20 mb-20 bg-gray-700 rounded-lg"
+                            data-oid="zepou.t"
+                        ></div>
                     </div>
                 </div>
 
@@ -69,6 +82,7 @@ export default function Page() {
                     className={`absolute inset-0 transition-opacity duration-1000 ${
                         loaded ? 'opacity-100' : 'opacity-0'
                     }`}
+                    data-oid="uz.mhtp"
                 >
                     {slides.map((slide, index) => (
                         <div
@@ -76,24 +90,36 @@ export default function Page() {
                             className={`absolute inset-0 transition-opacity duration-1000 ${
                                 index === currentSlide ? 'opacity-100' : 'opacity-0'
                             }`}
+                            data-oid="4woww41"
                         >
-                            <div className="absolute inset-0 bg-black/50 z-10" />
+                            <div className="absolute inset-0 bg-black/50 z-10" data-oid="kbvkdme" />
                             <div
                                 className="w-full h-full bg-center pan-animation transition-transform duration-1000 transform-gpu"
                                 style={{ backgroundImage: `url(${slide.image})` }}
+                                data-oid="t82igp8"
                             ></div>
-                            <div className="absolute bottom-0 left-0 right-0 z-20 p-10 md:p-20 bg-gradient-to-t from-gray-900">
-                                <div className="container mx-auto">
-                                    <h1 className="text-4xl md:text-5xl font-sans font-medium mt-2 mb-4">
+                            <div
+                                className="absolute bottom-0 left-0 right-0 z-20 p-10 md:p-20 bg-gradient-to-t from-gray-900"
+                                data-oid="wxk6yyx"
+                            >
+                                <div className="container mx-auto" data-oid="4sd-e6x">
+                                    <h1
+                                        className="text-4xl md:text-5xl font-sans font-medium mt-2 mb-4"
+                                        data-oid="u8_4-sy"
+                                    >
                                         {slide.title}
                                     </h1>
-                                    <span className="text-purple-400 text-base font-semibold flex flex-wrap gap-2">
+                                    <span
+                                        className="text-purple-400 text-base font-semibold flex flex-wrap gap-2"
+                                        data-oid="qauzuhb"
+                                    >
                                         {Array.isArray(slide.genre) ? (
                                             slide.genre.map((genre, index) => (
-                                                <span key={index}>
+                                                <span key={index} data-oid="vi:_x28">
                                                     <Link
                                                         href={`/genre/${encodeURIComponent(genre)}`}
                                                         className="bg-purple-700/50 hover:bg-gray-600/50 text-gray-200 px-3 py-1 rounded-full text-sm transition-colors"
+                                                        data-oid="t0d8h7x"
                                                     >
                                                         {genre}
                                                     </Link>
@@ -103,21 +129,33 @@ export default function Page() {
                                             <Link
                                                 href={`/genre/${encodeURIComponent(slide.genre)}`}
                                                 className="bg-purple-700/50 hover:bg-gray-600/50 text-gray-200 px-3 py-1 rounded-full text-sm transition-colors"
+                                                data-oid="fka3qge"
                                             >
                                                 {slide.genre}
                                             </Link>
                                         )}
                                     </span>
 
-                                    <p className="text-gray-300 text-lg font-sans max-w-xl overflow-hidden line-clamp-5">
+                                    <p
+                                        className="text-gray-300 text-lg font-sans max-w-xl overflow-hidden line-clamp-5"
+                                        data-oid="yjgs9an"
+                                    >
                                         {slide.description}
                                     </p>
-                                    <div className="flex justify-start landscape:gap-4 mt-8">
+                                    <div
+                                        className="flex justify-start landscape:gap-4 mt-8"
+                                        data-oid="a05syev"
+                                    >
                                         <Link
-                                            href={'#play'}
+                                            href={
+                                                slide.type === 'movie'
+                                                    ? `/watch/movie/${slide.title}`
+                                                    : `/watch/tvshow/${slide.title}`
+                                            }
                                             className="bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 landscape:py-2 py-2 md:px-8 md:py-3 landscape:rounded-3xl rounded-s-2xl flex flex-row gap-1 items-center transition-colors text-sm md:text-base"
+                                            data-oid="7no3hf3"
                                         >
-                                            <PlayIcon className="size-5" />
+                                            <PlayIcon className="size-5" data-oid="a8d24n_" />
                                             Play Now
                                         </Link>
                                         <Link
@@ -127,8 +165,13 @@ export default function Page() {
                                                     : `/tvshow/${slide.title}`
                                             }
                                             className="bg-gray-800/80 hover:bg-gray-700/80 px-4 landscape:py-2 py-2  md:px-8 md:py-3 landscape:rounded-3xl rounded-e-2xl transition-colors text-sm md:text-base flex flex-row gap-1"
+                                            data-oid="51qqotn"
                                         >
-                                            More Info <InformationCircleIcon className="size-5" />
+                                            More Info{' '}
+                                            <InformationCircleIcon
+                                                className="size-5"
+                                                data-oid="_bm0usz"
+                                            />
                                         </Link>
                                     </div>
                                 </div>
@@ -138,7 +181,7 @@ export default function Page() {
                 </div>
             </div>
 
-            <NewContentSection />
+            <NewContentSection data-oid="v5_ktqn" />
         </div>
     );
 }

frontend/app/search/page.tsx

@@ -0,0 +1,301 @@
+'use client';
+
+import { useState, useEffect, FormEvent, useMemo } from 'react';
+import Link from 'next/link';
+import { SEARCH_API_URL } from '@/lib/config';
+import { useSpinnerLoading } from '@/components/loading/Spinner';
+import { MovieCard } from '@/components/movie/MovieCard';
+import { TvShowCard } from '@/components/tvshow/TvShowCard';
+import ScrollSection from '@/components/sections/ScrollSection';
+import { getSeasonMetadata } from '@/lib/lb';
+// ^ assumed signature: getSeasonMetadata(seriesName: string, seasonNum: number) => Promise<Metadata[]>
+
+type EpisodeMetadata = {
+    id: number;
+    seriesId: number;
+    name: string;
+    aired: string;
+    runtime: number;
+    overview: string;
+    image: string; // e.g. "/banners/episodes/343913/6684232.jpg"
+    number: number; // Episode number in the season
+    seasonNumber: number;
+    year?: string;
+};
+
+type Episode = {
+    series: string;
+    title: string;
+    path: string;
+    season: string;
+    metadata?: EpisodeMetadata; // Attach the matched metadata here
+};
+
+type SearchResults = {
+    films: string[];
+    series: string[];
+    episodes: Episode[];
+};
+
+export default function SearchPage() {
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState<SearchResults | null>(null);
+
+    const { spinnerLoading, setSpinnerLoading } = useSpinnerLoading();
+    const [error, setError] = useState('');
+
+    // By default, all types (films, series, episodes) are selected
+    const [selectedTypes, setSelectedTypes] = useState<string[]>(['films', 'series', 'episodes']);
+
+    // Toggle which types are displayed (using "pills" instead of checkboxes)
+    const toggleType = (type: string) => {
+        setSelectedTypes((prev) =>
+            prev.includes(type) ? prev.filter((t) => t !== type) : [...prev, type],
+        );
+    };
+
+    // Helper: parse season number from something like "Season 1" or "S01"
+    function parseSeasonNumber(seasonName: string): number | null {
+        const match = seasonName.match(/(\d+)/);
+        return match ? parseInt(match[1], 10) : null;
+    }
+
+    // Helper: parse episode number from something like "S01E03" or "E03"
+    function parseEpisodeNumber(title: string): number | null {
+        // Try the standard SxxExx first
+        let match = title.match(/S(\d+)E(\d+)/i);
+        if (match) {
+            return parseInt(match[2], 10);
+        }
+        // Fallback: just Exx
+        match = title.match(/E(\d+)/i);
+        if (match) {
+            return parseInt(match[1], 10);
+        }
+        return null;
+    }
+
+    // Debounced search whenever 'query' changes
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            if (query.trim() === '') {
+                setResults(null);
+                return;
+            }
+            doSearch(query);
+        }, 500);
+
+        return () => clearTimeout(handler);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [query]);
+
+    // For manual searching if the user presses Enter
+    const handleSubmit = (e: FormEvent) => {
+        e.preventDefault();
+        if (query.trim() !== '') {
+            doSearch(query);
+        }
+    };
+
+    // Core search function
+    const doSearch = async (searchQuery: string) => {
+        setSpinnerLoading(true);
+        setError('');
+        try {
+            const res = await fetch(`${SEARCH_API_URL}/api/search`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query: searchQuery }),
+            });
+            if (!res.ok) {
+                throw new Error('Network response was not ok');
+            }
+            const data: SearchResults = await res.json();
+
+            // Now we have data. Next, fetch & attach metadata for episodes.
+            const grouped = groupEpisodesBySeriesAndSeason(data.episodes);
+            await attachSeasonMetadata(grouped);
+            // Once done, flatten them back for display
+            const flattened = flattenGroupedEpisodes(grouped);
+
+            // Put the updated episodes & everything else in state
+            setResults({
+                ...data,
+                episodes: flattened,
+            });
+        } catch (err) {
+            setError('Error fetching search results');
+        }
+        setSpinnerLoading(false);
+    };
+
+    // Group episodes by series -> season
+    function groupEpisodesBySeriesAndSeason(episodes: Episode[]) {
+        const grouped: Record<string, Record<string, Episode[]>> = {};
+        episodes.forEach((ep) => {
+            if (!grouped[ep.series]) {
+                grouped[ep.series] = {};
+            }
+            if (!grouped[ep.series][ep.season]) {
+                grouped[ep.series][ep.season] = [];
+            }
+            grouped[ep.series][ep.season].push(ep);
+        });
+        return grouped;
+    }
+
+    // For each (series + season) group, fetch getSeasonMetadata once,
+    // then match local episodes by episode number.
+    async function attachSeasonMetadata(grouped: Record<string, Record<string, Episode[]>>) {
+        const promises: Promise<void>[] = [];
+
+        for (const [seriesName, seasons] of Object.entries(grouped)) {
+            for (const [seasonName, episodesArr] of Object.entries(seasons)) {
+                // We'll fetch metadata for that (seriesName, seasonName)
+                const promise = getSeasonMetadata(seriesName, seasonName).then(
+                    (seasonMeta: EpisodeMetadata[]) => {
+                        // For each local ep, parse its episode number & find matching metadata
+                        episodesArr.forEach((ep) => {
+                            const epNum = parseEpisodeNumber(ep.title);
+                            if (!epNum) return;
+                            const matchedMeta = seasonMeta.find((m) => m.number === epNum);
+                            if (matchedMeta) {
+                                ep.metadata = matchedMeta;
+                            }
+                        });
+                    },
+                );
+                promises.push(promise);
+            }
+        }
+        await Promise.all(promises);
+    }
+
+    // Flatten grouped episodes back into a single array
+    function flattenGroupedEpisodes(grouped: Record<string, Record<string, Episode[]>>): Episode[] {
+        return Object.values(grouped).flatMap((seasons) =>
+            Object.values(seasons).flatMap((eps) => eps),
+        );
+    }
+
+    // Once everything is attached, we can just rely on `results.episodes` for final display
+    const flattenedEpisodes = results?.episodes ?? [];
+
+    return (
+        <div className="page min-h-screen pt-20 pb-4" data-oid="c30dpdf">
+            <div className="container mx-auto portrait:px-3 px-4" data-oid="qc8wc5o">
+                {/* Header Section */}
+                <div className="mb-8 space-y-2" data-oid="l_h1wg-">
+                    <h2 className="text-4xl font-bold text-white" data-oid="q5f:fz6">
+                        Search
+                    </h2>
+                    <p className="text-gray-400 max-w-3xl" data-oid="087lc-o">
+                        Search for movies, TV shows, and episodes.
+                    </p>
+                </div>
+                {/* Search + Filters */}
+                <form onSubmit={handleSubmit} className="mb-8">
+                    <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+                        {/* Search Input */}
+                        <div className="flex flex-col">
+                            <input
+                                id="search"
+                                type="text"
+                                value={query}
+                                onChange={(e) => setQuery(e.target.value)}
+                                placeholder="Type to search..."
+                                className="p-2 w-72 rounded border border-gray-700 bg-[#1E1E1E] text-white 
+                         focus:outline-none focus:ring-2 focus:ring-blue-600"
+                            />
+                        </div>
+
+                        {/* Filter Pills */}
+                        <div className="flex flex-wrap gap-2 items-center">
+                            {['films', 'series', 'episodes'].map((type) => {
+                                const isActive = selectedTypes.includes(type);
+                                // Make the label more user-friendly
+                                const label =
+                                    type === 'films'
+                                        ? 'Movies'
+                                        : type === 'series'
+                                          ? 'TV Shows'
+                                          : 'Episodes';
+
+                                return (
+                                    <button
+                                        key={type}
+                                        type="button"
+                                        onClick={() => toggleType(type)}
+                                        className={`px-4 py-1 rounded-full transition-colors 
+                    ${isActive ? 'bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 text-white' : 'bg-gray-700 text-gray-300'}
+                    hover:bg-gray-600`}
+                                    >
+                                        {label}
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </form>
+
+                {/* Error message */}
+                {error && <p className="text-red-500 mb-4">{error}</p>}
+
+                {/* Results */}
+                {results && (
+                    <div className="mt-4 space-y-8">
+                        {/* Movies Section */}
+                        {selectedTypes.includes('films') && results.films?.length > 0 && (
+                            <ScrollSection title="Movies" link="/browse/movies">
+                                {results.films.map((film, index) => (
+                                    <MovieCard key={index} title={film.replace('films/', '')} />
+                                ))}
+                            </ScrollSection>
+                        )}
+
+                        {/* TV Shows Section */}
+                        {selectedTypes.includes('series') && results.series?.length > 0 && (
+                            <ScrollSection title="TV Shows" link="/browse/tvshows">
+                                {results.series.map((serie, index) => (
+                                    <TvShowCard key={index} title={serie} episodesCount={null} />
+                                ))}
+                            </ScrollSection>
+                        )}
+
+                        {/* Episodes Section (flattened, with metadata) */}
+                        {selectedTypes.includes('episodes') && flattenedEpisodes.length > 0 && (
+                            <ScrollSection title="Episodes" link="/browse/tvshows">
+                                {flattenedEpisodes.map((episode) => (
+                                    <Link
+                                        href={`/watch/tvshow/${episode.series}/${episode.season}/${episode.title}`}
+                                        key={episode.path}
+                                        className="w-[160px] flex-shrink-0 rounded-md bg-[#1E1E1E] border border-gray-700
+                               p-2 flex flex-col text-center"
+                                    >
+                                        {/* If you want to show the metadata image */}
+                                        {episode.metadata?.image && (
+                                            <img
+                                                src={`https://artworks.thetvdb.com${episode.metadata.image}`}
+                                                alt={episode.metadata.name || episode.title}
+                                                className="h-[90px] w-full object-contain rounded mb-2"
+                                            />
+                                        )}
+                                        <h4 className="text-sm font-semibold line-clamp-2 mb-1">
+                                            {episode.metadata?.name ?? episode.title}
+                                        </h4>
+                                        {/* Display short overview, or the local series-season text */}
+                                        <p className="text-xs text-gray-300 line-clamp-3">
+                                            {episode.metadata?.overview
+                                                ? episode.metadata.overview
+                                                : `${episode.series} - ${episode.season}`}
+                                        </p>
+                                    </Link>
+                                ))}
+                            </ScrollSection>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/app/tvshow/[title]/LoadingSkeleton.tsx

@@ -1,32 +1,56 @@
 export function LoadingSkeleton() {
     return (
-        <div className="w-full min-h-screen bg-gray-900 animate-pulse">
+        <div className="w-full min-h-screen bg-gray-900 animate-pulse" data-oid="v0dd7s5">
             {/* Hero Section Skeleton */}
-            <div className="relative w-full h-[60vh] bg-gray-800">
-                <div className="absolute inset-0 flex items-center justify-center">
-                    <div className="w-full max-w-7xl px-6 space-y-4">
-                        <div className="h-12 bg-gray-700 rounded-lg w-3/4 max-w-2xl"></div>
-                        <div className="h-6 bg-gray-700 rounded-lg w-1/4 max-w-xs"></div>
-                        <div className="flex gap-4">
-                            <div className="h-12 bg-gray-700 rounded-3xl w-32"></div>
-                            <div className="h-12 bg-gray-700 rounded-3xl w-32"></div>
+            <div className="relative w-full h-[60vh] bg-gray-800" data-oid="h:37-w6">
+                <div
+                    className="absolute inset-0 flex items-center justify-center"
+                    data-oid="t4nb.n8"
+                >
+                    <div className="w-full max-w-7xl px-6 space-y-4" data-oid="p1jl.eg">
+                        <div
+                            className="h-12 bg-gray-700 rounded-lg w-3/4 max-w-2xl"
+                            data-oid="wpv9e.8"
+                        ></div>
+                        <div
+                            className="h-6 bg-gray-700 rounded-lg w-1/4 max-w-xs"
+                            data-oid="7jd5zcs"
+                        ></div>
+                        <div className="flex gap-4" data-oid=":nu-56g">
+                            <div
+                                className="h-12 bg-gray-700 rounded-3xl w-32"
+                                data-oid=".8c06ec"
+                            ></div>
+                            <div
+                                className="h-12 bg-gray-700 rounded-3xl w-32"
+                                data-oid=".5c0u6o"
+                            ></div>
                         </div>
                     </div>
                 </div>
             </div>
 
             {/* Details Section Skeleton */}
-            <div className="max-w-7xl mx-auto px-6 py-12 space-y-8">
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <div className="md:col-span-2 space-y-4">
-                        <div className="h-8 bg-gray-800 rounded-lg w-1/2"></div>
-                        <div className="h-32 bg-gray-800 rounded-lg w-full"></div>
-                        <div className="h-8 bg-gray-800 rounded-lg w-1/3"></div>
-                        <div className="h-24 bg-gray-800 rounded-lg w-full"></div>
+            <div className="max-w-7xl mx-auto px-6 py-12 space-y-8" data-oid="v7i4ygf">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="icit7ao">
+                    <div className="md:col-span-2 space-y-4" data-oid="2bv0cox">
+                        <div className="h-8 bg-gray-800 rounded-lg w-1/2" data-oid="ju1av99"></div>
+                        <div
+                            className="h-32 bg-gray-800 rounded-lg w-full"
+                            data-oid="_4-_cmg"
+                        ></div>
+                        <div className="h-8 bg-gray-800 rounded-lg w-1/3" data-oid="x.08-8o"></div>
+                        <div
+                            className="h-24 bg-gray-800 rounded-lg w-full"
+                            data-oid="ktjj29j"
+                        ></div>
                     </div>
-                    <div className="space-y-4">
-                        <div className="h-8 bg-gray-800 rounded-lg w-full"></div>
-                        <div className="h-40 bg-gray-800 rounded-lg w-full"></div>
+                    <div className="space-y-4" data-oid="zs83v6-">
+                        <div className="h-8 bg-gray-800 rounded-lg w-full" data-oid="zilvhpx"></div>
+                        <div
+                            className="h-40 bg-gray-800 rounded-lg w-full"
+                            data-oid="9sr_zfs"
+                        ></div>
                     </div>
                 </div>
             </div>

frontend/app/tvshow/[title]/page.tsx

@@ -7,148 +7,7 @@ import { LoadingSkeleton } from './LoadingSkeleton';
 import { convertMinutesToHM } from '@lib/utils';
 import Link from 'next/link';
 import CastSection from '@components/sections/CastSection';
-
-interface FileStructure {
-    contents?: any[];
-}
-
-const EpisodesSection = ({ fileStructure }: { fileStructure: FileStructure }) => {
-    const [activeSeason, setActiveSeason] = useState(0);
-
-    return (
-        <div className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
-            <div className="flex flex-col space-y-4">
-                <div className="flex items-center justify-between">
-                    <h3 className="text-lg font-semibold text-gray-200">Episodes</h3>
-                </div>
-
-                {/* Season Buttons */}
-                <div className="overflow-x-auto whitespace-nowrap flex gap-2 scrollbar-hide snap-x snap-mandatory pb-2">
-                    {fileStructure.contents?.map((season, idx) => {
-                        const seasonName = season.path.split('/').pop();
-                        const isSpecials = seasonName === 'Specials';
-
-                        return (
-                            <button
-                                key={idx}
-                                onClick={() => setActiveSeason(idx)}
-                                className={`px-4 py-2 min-w-fit rounded-full text-sm font-medium transition-colors snap-start
-                                    ${
-                                        activeSeason === idx
-                                            ? 'bg-purple-500 text-white'
-                                            : isSpecials
-                                              ? 'bg-amber-500/20 text-amber-300 hover:bg-amber-500/30'
-                                              : 'bg-purple-500/20 text-purple-300 hover:bg-purple-500/30'
-                                    }`}
-                            >
-                                {seasonName}
-                            </button>
-                        );
-                    })}
-                </div>
-
-                {/* Episodes List */}
-                <div className="space-y-8 mt-4">
-                    {fileStructure.contents?.[activeSeason] && (
-                        <div key={activeSeason} className="space-y-4">
-                            <h4
-                                className={`text-base font-medium ${
-                                    fileStructure.contents[activeSeason].path.includes('Specials')
-                                        ? 'text-amber-300'
-                                        : 'text-purple-300'
-                                }`}
-                            >
-                                {fileStructure.contents[activeSeason].path.split('/').pop()}
-                            </h4>
-                            <div className="space-y-2">
-                                {fileStructure.contents[activeSeason].contents?.map(
-                                    (episode: any, episodeIdx: number) => {
-                                        const match = episode.path.match(
-                                            /[S](\d+)[E](\d+) - (.+?)\./,
-                                        );
-                                        if (!match) return null;
-
-                                        const [, , episodeNum, episodeTitle] = match;
-                                        const isSpecials =
-                                            fileStructure.contents &&
-                                            fileStructure.contents[activeSeason]?.path.includes(
-                                                'Specials',
-                                            );
-
-                                        return (
-                                            <div
-                                                key={episodeIdx}
-                                                className="group flex items-center gap-4 p-3 rounded-xl transition-colors hover:bg-gray-700/50 cursor-pointer"
-                                            >
-                                                {/* Episode Number */}
-                                                <div
-                                                    className={`flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-xl bg-gray-700/50 
-                                                        ${
-                                                            isSpecials
-                                                                ? 'group-hover:bg-amber-500/20'
-                                                                : 'group-hover:bg-purple-500/20'
-                                                        }`}
-                                                >
-                                                    <span
-                                                        className={`text-lg font-semibold text-gray-300 
-                                                            ${
-                                                                isSpecials
-                                                                    ? 'group-hover:text-amber-300'
-                                                                    : 'group-hover:text-purple-300'
-                                                            }`}
-                                                    >
-                                                        {episodeNum}
-                                                    </span>
-                                                </div>
-
-                                                {/* Episode Info */}
-                                                <div className="flex-grow">
-                                                    <h4 className="text-gray-200 font-medium">
-                                                        {episodeTitle.replace(/_/g, ' ')}
-                                                    </h4>
-                                                    <div className="flex items-center gap-3 text-sm text-gray-400">
-                                                        <span>
-                                                            {Math.round(episode.size / 1024 / 1024)}{' '}
-                                                            MB
-                                                        </span>
-                                                        <span>•</span>
-                                                        <span>
-                                                            {episode.path.includes('720p')
-                                                                ? 'HD'
-                                                                : 'SD'}
-                                                        </span>
-                                                    </div>
-                                                </div>
-
-                                                {/* Play Button */}
-                                                <button
-                                                    className={`flex-shrink-0 p-2 rounded-full text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity
-                                                        ${
-                                                            isSpecials
-                                                                ? 'bg-amber-500/20 hover:bg-amber-500/30'
-                                                                : 'bg-purple-500/20 hover:bg-purple-500/30'
-                                                        }`}
-                                                >
-                                                    <svg
-                                                        className="w-5 h-5"
-                                                        fill="currentColor"
-                                                        viewBox="0 0 20 20"
-                                                    >
-                                                        <path d="M4 4l12 6-12 6V4z" />
-                                                    </svg>
-                                                </button>
-                                            </div>
-                                        );
-                                    },
-                                )}
-                            </div>
-                        </div>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-};
+import EpisodesSection from '@/components/sections/EpisodesSection';
 
 export default function TvShowTitlePage() {
     const { title } = useParams();
@@ -188,7 +47,7 @@ export default function TvShowTitlePage() {
     }, [decodedTitle]);
 
     if (!tvshow) {
-        return <LoadingSkeleton />;
+        return <LoadingSkeleton data-oid="wt9w2fo" />;
     }
 
     return (
@@ -200,21 +59,31 @@ export default function TvShowTitlePage() {
                 backgroundPosition: 'top',
                 backgroundAttachment: 'fixed',
             }}
+            data-oid="4.jurse"
         >
             {/* Gradient Overlays */}
-            <div className="h-screen fixed inset-0">
-                <div className="h-full bg-gradient-to-b from-gray-900/90 via-gray-900/50 to-gray-900/90"></div>
+            <div className="h-screen fixed inset-0" data-oid=":7b37p7">
+                <div
+                    className="h-full bg-gradient-to-b from-gray-900/90 via-gray-900/50 to-gray-900/90"
+                    data-oid="srrv8s_"
+                ></div>
             </div>
 
             {/* Main Content Container */}
-            <div className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div
+                className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+                data-oid="u-stmqh"
+            >
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8" data-oid="6r8ultd">
                     {/* Left Column - Main Info */}
-                    <div className="lg:col-span-2 space-y-6">
-                        <div className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
+                    <div className="lg:col-span-2 space-y-6" data-oid="xpvg.4g">
+                        <div
+                            className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50"
+                            data-oid="5:3lc_h"
+                        >
                             {/* Title and Year */}
-                            <div className="space-y-2">
-                                <h1 className="text-4xl font-bold text-white">
+                            <div className="space-y-2" data-oid="bijg9ok">
+                                <h1 className="text-4xl font-bold text-white" data-oid="g.g.h9q">
                                     {tvshow.translations?.nameTranslations?.find(
                                         (t: { language: string; name: string }) =>
                                             t.language === 'eng',
@@ -229,28 +98,43 @@ export default function TvShowTitlePage() {
                                         tvshow?.name ||
                                         'Unknown Title'}
                                 </h1>
-                                <div className="flex items-center gap-3 text-gray-300">
-                                    <span className="text-lg">{tvshow.year}</span>
-                                    <span>•</span>
-                                    <span className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm">
+                                <div
+                                    className="flex items-center gap-3 text-gray-300"
+                                    data-oid="bgr3b5u"
+                                >
+                                    <span className="text-lg" data-oid="aiifu47">
+                                        {tvshow.year}
+                                    </span>
+                                    <span data-oid="waw327_">•</span>
+                                    <span
+                                        className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm"
+                                        data-oid="da8mf4b"
+                                    >
                                         TV Series
                                     </span>
                                 </div>
                             </div>
                             {/* Genres and Score */}
-                            <div className="flex flex-wrap items-center gap-4 mt-4">
-                                <div className="flex items-center gap-2">
-                                    <span className="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            <div
+                                className="flex flex-wrap items-center gap-4 mt-4"
+                                data-oid="n::tuqe"
+                            >
+                                <div className="flex items-center gap-2" data-oid="zodeb7x">
+                                    <span
+                                        className="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-medium"
+                                        data-oid="_51g95r"
+                                    >
                                         ⭐ {tvshow.score ? (tvshow.score / 1000).toFixed(1) : 'N/A'}
                                     </span>
                                 </div>
-                                <div className="flex flex-wrap gap-2">
+                                <div className="flex flex-wrap gap-2" data-oid="dz_1gae">
                                     {Array.isArray(tvshow.genres)
                                         ? tvshow.genres.map((genre) => (
                                               <Link
                                                   key={genre.id}
                                                   href={`/genre/${encodeURIComponent(genre.slug)}`}
                                                   className="bg-gray-700/50 hover:bg-gray-600/50 text-gray-200 px-3 py-1 rounded-full text-sm transition-colors"
+                                                  data-oid="i4eoln4"
                                               >
                                                   {genre.name}
                                               </Link>
@@ -261,13 +145,15 @@ export default function TvShowTitlePage() {
                             {/* Content Ratings */}
                             {Array.isArray(tvshow.contentRatings) &&
                             tvshow.contentRatings.length > 0 ? (
-                                <div className="mt-6">
-                                    <h3 className="text-lg font-semibold text-gray-200 mb-3">
+                                <div className="mt-6" data-oid="54siwr_">
+                                    <h3
+                                        className="text-lg font-semibold text-gray-200 mb-3"
+                                        data-oid="nsy-_00"
+                                    >
                                         Content Ratings
                                     </h3>
-                                    <ul className="flex flex-wrap gap-3">
+                                    <ul className="flex flex-wrap gap-3" data-oid="2:qr8cp">
                                         {tvshow.contentRatings.map((rating, index) => {
-                                            // Map country codes to corresponding flags
                                             const countryFlags = {
                                                 AUS: '🇦🇺',
                                                 USA: '🇺🇸',
@@ -285,18 +171,27 @@ export default function TvShowTitlePage() {
                                             const flag =
                                                 countryFlags[
                                                     rating.country.toUpperCase() as keyof typeof countryFlags
-                                                ] || '🌍'; // Default to globe if no match
+                                                ] || '🌍';
 
                                             return (
                                                 <li
                                                     key={index}
                                                     className="flex items-center bg-gray-800/50 px-2 py-1 rounded-md text-xs"
+                                                    data-oid="-u:voln"
                                                 >
-                                                    <span className="mr-2">{flag}</span>
-                                                    <span className="text-white font-semibold">
+                                                    <span className="mr-2" data-oid="62_8hg5">
+                                                        {flag}
+                                                    </span>
+                                                    <span
+                                                        className="text-white font-semibold"
+                                                        data-oid="_xxbhea"
+                                                    >
                                                         {rating.name}
                                                     </span>
-                                                    <span className="text-gray-400 ml-1">
+                                                    <span
+                                                        className="text-gray-400 ml-1"
+                                                        data-oid="qvcr4tn"
+                                                    >
                                                         {' '}
                                                         - {rating.description || 'N/A'}
                                                     </span>
@@ -306,37 +201,51 @@ export default function TvShowTitlePage() {
                                     </ul>
                                 </div>
                             ) : (
-                                <p className="text-gray-400 text-sm">
+                                <p className="text-gray-400 text-sm" data-oid="tnn4uku">
                                     No content ratings available.
                                 </p>
                             )}
-                            {/* Action Buttons */}{' '}
-                            <div className="flex justify-start landscape:gap-2 mt-4">
+                            {/* Action Buttons */}
+                            <div
+                                className="flex justify-start landscape:gap-2 mt-4"
+                                data-oid="-.:cblk"
+                            >
                                 <Link
                                     href={'#play'}
                                     className="bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-2 md:px-8 landscape:rounded-3xl rounded-s-2xl flex items-center transition-colors text-sm md:text-base"
+                                    data-oid="kr95utu"
                                 >
                                     <svg
                                         className="w-4 h-4 md:w-5 md:h-5 mr-2"
                                         fill="currentColor"
                                         viewBox="0 0 20 20"
+                                        data-oid="y56_5ga"
                                     >
-                                        <path d="M4 4l12 6-12 6V4z" />
+                                        <path d="M4 4l12 6-12 6V4z" data-oid=".-7cwlz" />
                                     </svg>
                                     Play Now
                                 </Link>
                                 <Link
                                     href={'#'}
                                     className="bg-gray-800/80 hover:bg-gray-700/80 px-4 py-2 md:px-8 landscape:rounded-3xl rounded-e-2xl transition-colors text-sm md:text-base"
+                                    data-oid="aask6sd"
                                 >
                                     Add to My List
                                 </Link>
                             </div>
                         </div>
                         {/* Overview Section */}
-                        <div className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
-                            <h3 className="text-lg font-semibold text-gray-200 mb-3">Overview</h3>
-                            <p className="text-gray-300 leading-relaxed">
+                        <div
+                            className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50"
+                            data-oid="twvwhom"
+                        >
+                            <h3
+                                className="text-lg font-semibold text-gray-200 mb-3"
+                                data-oid="s3f.i.p"
+                            >
+                                Overview
+                            </h3>
+                            <p className="text-gray-300 leading-relaxed" data-oid="exdh8pn">
                                 {tvshow.translations?.overviewTranslations?.find(
                                     (t: { language: string; overview: string }) =>
                                         t.language === 'eng',
@@ -346,13 +255,16 @@ export default function TvShowTitlePage() {
                             </p>
                         </div>
                         {/* Episodes Section */}
-                        <EpisodesSection fileStructure={fileStructure} />
-                        {/* end of episodes section*/}
+                        <EpisodesSection
+                            fileStructure={fileStructure}
+                            tvshow={title}
+                            data-oid="trlojhf"
+                        />
                     </div>
 
                     {/* Right Column - Cast */}
-                    <div className="lg:col-span-1">
-                        <CastSection movie={tvshow} />
+                    <div className="lg:col-span-1" data-oid="-c328r.">
+                        <CastSection movie={tvshow} data-oid="p6hxqrq" />
                     </div>
                 </div>
             </div>

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

@@ -0,0 +1,28 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import MoviePlayer from '@/components/movie/MoviePlayer';
+import { useParams } from 'next/navigation';
+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;
+
+    const handleClose = () => {
+        router.back();
+    };
+
+    if (!title) {
+        return <div data-oid="w6._haz">Movie title is missing.</div>;
+    }
+    return (
+        <MoviePlayer
+            videoTitle={decodeURIComponent(videoTitle) as string}
+            onClosePlayer={handleClose}
+            data-oid="i9k-1k4"
+        />
+    );
+};
+
+export default MoviePlayerPage;

frontend/app/watch/tvshow/[title]/[season]/[episode]/page.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import TvShowPlayer from '@/components/tvshow/TvshowPlayer';
+import { useParams } from 'next/navigation';
+const TvShowPlayerPage = () => {
+    // Assuming you get the movie title from the route params
+    const router = useRouter();
+    const { title, season, episode } = useParams();
+    const videoTitle = Array.isArray(title) ? title[0] : title;
+
+    const handleClose = () => {
+        router.back();
+    };
+
+    if (!title || !season || !episode) {
+        return <div data-oid="jlx4rr5">tvshow title, season or episode is missing.</div>;
+    }
+    return (
+        <TvShowPlayer
+            videoTitle={decodeURIComponent(videoTitle) as string}
+            season={season as string}
+            episode={episode as string}
+            onClosePlayer={handleClose}
+            data-oid="g1cs-r4"
+        />
+    );
+};
+
+export default TvShowPlayerPage;

frontend/components/loading/Spinner.tsx

@@ -23,26 +23,34 @@ export function SpinnerLoadingProvider({ children }: { children: ReactNode }) {
     const [spinnerLoading, setSpinnerLoading] = useState(false);
 
     return (
-        <LoadingContext.Provider value={{ spinnerLoading, setSpinnerLoading }}>
-            <AnimatePresence mode="wait">
+        <LoadingContext.Provider value={{ spinnerLoading, setSpinnerLoading }} data-oid=".8kjy-y">
+            <AnimatePresence mode="wait" data-oid="d2x5jij">
                 {spinnerLoading && (
                     <motion.div
                         initial={{ opacity: 1 }}
                         exit={{ opacity: 0 }}
                         transition={{ duration: 0.6, ease: 'easeInOut' }}
                         className="fixed inset-0 z-40 flex items-center justify-center bg-gray-900/50"
+                        data-oid="8:iqov0"
                     >
-                        <div className="relative flex flex-col items-center">
+                        <div className="relative flex flex-col items-center" data-oid="fs.5iw6">
                             {/* Loading Animation */}
                             <motion.div
                                 animate={{ rotate: 360 }}
                                 transition={{ repeat: Infinity, duration: 1.2, ease: 'linear' }}
                                 className="relative w-16 h-16"
+                                data-oid="7c81ip_"
                             >
                                 {/* Outer Ring */}
-                                <div className="absolute inset-0 border-4 border-transparent border-t-purple-500 border-l-purple-500 rounded-full"></div>
+                                <div
+                                    className="absolute inset-0 border-4 border-transparent border-t-purple-500 border-l-purple-500 rounded-full"
+                                    data-oid="nch7_v2"
+                                ></div>
                                 {/* Inner Glow Effect */}
-                                <div className="absolute inset-0 w-full h-full animate-ping rounded-full bg-purple-500 opacity-30"></div>
+                                <div
+                                    className="absolute inset-0 w-full h-full animate-ping rounded-full bg-purple-500 opacity-30"
+                                    data-oid=":eo20gp"
+                                ></div>
                             </motion.div>
                         </div>
                     </motion.div>

frontend/components/loading/SplashScreen.tsx

@@ -21,7 +21,7 @@ export function useLoading() {
 
 // Provider Component
 export function LoadingProvider({ children }: { children: ReactNode }) {
-    const [loading, setLoading] = useState(true);
+    const [loading, setLoading] = useState(false);
     const [message, setMessage] = useState('Getting things ready for you');
 
     useEffect(() => {
@@ -39,35 +39,51 @@ export function LoadingProvider({ children }: { children: ReactNode }) {
     }, []);
 
     return (
-        <LoadingContext.Provider value={{ loading, setLoading }}>
-            <AnimatePresence mode="wait">
+        <LoadingContext.Provider value={{ loading, setLoading }} data-oid="k5me0da">
+            <AnimatePresence mode="wait" data-oid="u49096x">
                 {loading && (
                     <motion.div
                         initial={{ opacity: 1 }}
                         exit={{ opacity: 0 }}
                         transition={{ duration: 0.6, ease: 'easeInOut' }}
                         className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900"
+                        data-oid="_rjul_i"
                     >
-                        <div className="relative flex flex-col items-center">
+                        <div className="relative flex flex-col items-center" data-oid="zmc8scv">
                             {/* Logo Animation */}
                             <motion.div
                                 initial={{ scale: 0.5, opacity: 0 }}
                                 animate={{ scale: 1, opacity: 1 }}
                                 transition={{ duration: 0.6, ease: 'easeOut' }}
                                 className="mb-8"
+                                data-oid="oik_h9r"
                             >
-                                <div className="w-44 h-44 relative ">
-                                    <div className="animate-pulse absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl" />
+                                <div className="w-44 h-44 relative " data-oid="3tbwztk">
+                                    <div
+                                        className="animate-pulse absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl"
+                                        data-oid="nswqfs6"
+                                    />
 
                                     {/* Inner Background */}
-                                    <div className="animate-pulse absolute inset-1 bg-gray-800 rounded-xl" />
+                                    <div
+                                        className="animate-pulse absolute inset-1 bg-gray-800 rounded-xl"
+                                        data-oid="p7wrz0e"
+                                    />
 
                                     {/* Text */}
-                                    <div className="absolute inset-0 flex-col items-center text-center flex justify-items-center justify-center">
-                                        <span className="text-4xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent drop-shadow-lg">
+                                    <div
+                                        className="absolute inset-0 flex-col items-center text-center flex justify-items-center justify-center"
+                                        data-oid="8w:62dp"
+                                    >
+                                        <span
+                                            className="text-4xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent drop-shadow-lg"
+                                            data-oid="a3y25ex"
+                                        >
                                             NEXORA
                                         </span>
-                                        <p className="text-gray-300 font-mono">{WEB_VERSION}</p>
+                                        <p className="text-gray-300 font-mono" data-oid="l5hfcjt">
+                                            {WEB_VERSION}
+                                        </p>
                                     </div>
                                 </div>
                             </motion.div>
@@ -78,6 +94,7 @@ export function LoadingProvider({ children }: { children: ReactNode }) {
                                 animate={{ width: '150px' }}
                                 transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}
                                 className="animate-pulse h-1 bg-gradient-to-r m from-purple-500 to-pink-500 rounded-full"
+                                data-oid="ve7kdif"
                             />
 
                             {/* Loading Text */}
@@ -86,6 +103,7 @@ export function LoadingProvider({ children }: { children: ReactNode }) {
                                 animate={{ opacity: 1, y: 0 }}
                                 transition={{ delay: 0.5, ease: 'easeOut' }}
                                 className="mt-6 text-gray-300 text-sm font-mono tracking-wide"
+                                data-oid="r.-e_gs"
                             >
                                 {message}
                             </motion.p>

frontend/components/movie/MovieCard.tsx

@@ -11,387 +11,468 @@ import {
 } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import { StarIcon } from '@heroicons/react/24/solid';
+import TrailersComp from '@/components/shared/Trailers';
 
 interface Artwork {
-    id: number;
-    image: string;
-    thumbnail: string;
-    language: string | null;
-    type: number;
-    score: number;
-    width: number;
-    height: number;
-    includesText: boolean;
-    thumbnailWidth: number;
-    thumbnailHeight: number;
-    updatedAt: number;
-    status: { id: number; name: string | null };
-    tagOptions: any;
+  id: number;
+  image: string;
+  thumbnail: string;
+  language: string | null;
+  type: number;
+  score: number;
+  width: number;
+  height: number;
+  includesText: boolean;
+  thumbnailWidth: number;
+  thumbnailHeight: number;
+  updatedAt: number;
+  status: { id: number; name: string | null };
+  tagOptions: any;
+}
+
+interface Trailer {
+  id: number;
+  name: string;
+  url: string;
+  language: string;
+  runtime: number;
 }
 
 interface Card {
-    title: string;
-    year: string;
-    image: string;
-    portrait: Artwork[];
-    banner: Artwork[];
-    overview: string;
+  title: string;
+  year: string;
+  image: string;
+  portrait: Artwork[];
+  banner: Artwork[];
+  overview: string;
+  trailers: Trailer[]; // Now trailers is an array of Trailer objects
 }
 
 interface MovieCardProps {
-    title: string;
+  title: string;
 }
 
 // BannerImage component: remounts on src change to trigger fade-in.
 const BannerImage: React.FC<{ src: string; alt: string }> = ({ src, alt }) => {
-    const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState(false);
 
-    useEffect(() => {
-        // Reset visibility to false on src change then fade in.
-        setVisible(false);
-        const timer = setTimeout(() => {
-            setVisible(true);
-        }, 100);
-        return () => clearTimeout(timer);
-    }, [src]);
+  useEffect(() => {
+    setVisible(false);
+    const timer = setTimeout(() => {
+      setVisible(true);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [src]);
 
-    return (
-        <img
-            src={src}
-            alt={alt}
-            className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ease-in-out ${
-                visible ? 'opacity-100' : 'opacity-0'
-            }`}
-        />
-    );
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ease-in-out ${
+        visible ? 'opacity-100' : 'opacity-0'
+      }`}
+      data-oid="b2qav2h"
+    />
+  );
 };
 
 export const MovieCard: React.FC<MovieCardProps> = ({ title }) => {
-    const [card, setCard] = useState<Card | null>(null);
-    const [cardImage, setCardImage] = useState<string>('');
-    const [imageLoaded, setImageLoaded] = useState(false);
-    const [showModal, setShowModal] = useState(false);
-    const [bannerIndex, setBannerIndex] = useState(0);
-    const [isHovering, setIsHovering] = useState(false);
-    // modalStyle is used during both opening and closing animations.
-    const [modalStyle, setModalStyle] = useState<React.CSSProperties | null>(null);
-    const cardRef = useRef<HTMLDivElement>(null);
-    const slideshowTimer = useRef<NodeJS.Timeout | null>(null);
-    const hoverTimer = useRef<NodeJS.Timeout | null>(null);
+  const [card, setCard] = useState<Card | null>(null);
+  const [cardImage, setCardImage] = useState<string>('');
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [bannerIndex, setBannerIndex] = useState(0);
+  const [isHovering, setIsHovering] = useState(false);
+  const [modalStyle, setModalStyle] = useState<React.CSSProperties | null>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const slideshowTimer = useRef<NodeJS.Timeout | null>(null);
+  const hoverTimer = useRef<NodeJS.Timeout | null>(null);
+  const touchTimer = useRef<NodeJS.Timeout | null>(null);
 
-    useEffect(() => {
-        async function fetchMovieCard() {
-            try {
-                const cardData = await getMovieCard(title);
-                setCard(cardData);
-            } catch (error) {
-                console.error('Error fetching movie card:', error);
-            }
-        }
-        fetchMovieCard();
-    }, [title]);
+  useEffect(() => {
+    async function fetchMovieCard() {
+      try {
+        const cardData = await getMovieCard(title);
+        setCard(cardData);
+      } catch (error) {
+        console.error('Error fetching movie card:', error);
+      }
+    }
+    fetchMovieCard();
+  }, [title]);
 
-    // Set a random card image once when card loads.
-    useEffect(() => {
-        if (card) {
-            if (card.portrait && card.portrait.length > 0) {
-                setCardImage(
-                    card.portrait[Math.floor(Math.random() * card.portrait.length)].thumbnail,
-                );
-            } else {
-                setCardImage(card.image);
-            }
-        }
-    }, [card]);
+  // Set a random card image once card loads.
+  useEffect(() => {
+    if (card) {
+      if (card.portrait && card.portrait.length > 0) {
+        setCardImage(
+          card.portrait[Math.floor(Math.random() * card.portrait.length)].thumbnail
+        );
+      } else {
+        setCardImage(card.image);
+      }
+    }
+  }, [card]);
 
-    // Compute the final (expanded) modal style dynamically.
-    const computeFinalModalStyle = (): React.CSSProperties => {
-        if (!cardRef.current) return {};
-        const rect = cardRef.current.getBoundingClientRect();
-        const margin = 20;
-        const modalWidth = Math.min(600, window.innerWidth * 0.9);
-        const modalHeight = Math.min(500, window.innerHeight * 0.7);
-        let modalLeft = rect.left + rect.width / 2 - modalWidth / 2;
-        if (modalLeft < margin) modalLeft = margin;
-        if (modalLeft + modalWidth > window.innerWidth - margin) {
-            modalLeft = window.innerWidth - modalWidth - margin;
-        }
-        let modalTop = rect.bottom - modalHeight;
-        if (modalTop < margin) modalTop = margin;
-        if (modalTop + modalHeight > window.innerHeight - margin) {
-            modalTop = window.innerHeight - modalHeight - margin;
-        }
-        return {
-            position: 'fixed',
-            left: modalLeft,
-            top: modalTop,
-            width: modalWidth,
-            height: modalHeight,
-            zIndex: 1000,
-        };
+  // Compute the final (expanded) modal style dynamically.
+  const computeFinalModalStyle = (): React.CSSProperties => {
+    if (!cardRef.current) return {};
+    const rect = cardRef.current.getBoundingClientRect();
+    const margin = 20;
+    const modalWidth = Math.min(600, window.innerWidth * 0.9);
+    const modalHeight = Math.min(500, window.innerHeight * 0.7);
+    let modalLeft = rect.left + rect.width / 2 - modalWidth / 2;
+    if (modalLeft < margin) modalLeft = margin;
+    if (modalLeft + modalWidth > window.innerWidth - margin) {
+      modalLeft = window.innerWidth - modalWidth - margin;
+    }
+    let modalTop = rect.bottom - modalHeight;
+    if (modalTop < margin) modalTop = margin;
+    if (modalTop + modalHeight > window.innerHeight - margin) {
+      modalTop = window.innerHeight - modalHeight - margin;
+    }
+    return {
+      position: 'fixed',
+      left: modalLeft,
+      top: modalTop,
+      width: modalWidth,
+      height: modalHeight,
+      zIndex: 1000,
     };
+  };
 
-    // Animate modal opening/closing.
-    useEffect(() => {
-        let animationFrame: number;
-        let timer: NodeJS.Timeout;
-        const duration = 400; // duration in ms
-        if (showModal && cardRef.current) {
-            // OPENING: Start at card's rect.
-            const rect = cardRef.current.getBoundingClientRect();
-            const initialStyle: React.CSSProperties = {
-                position: 'fixed',
-                left: rect.left,
-                top: rect.top,
-                width: rect.width,
-                height: rect.height,
-                opacity: 0,
-                zIndex: 1000,
-                transition: `all ${duration}ms ease-in-out`,
-            };
-            setModalStyle(initialStyle);
-            // Next frame: animate to final style.
-            animationFrame = requestAnimationFrame(() => {
-                const finalStyle = computeFinalModalStyle();
-                setModalStyle({
-                    ...finalStyle,
-                    opacity: 1,
-                    transition: `all ${duration}ms ease-in-out`,
-                });
-            });
-        } else if (!showModal && modalStyle && cardRef.current) {
-            // CLOSING: Animate from current style back to card's rect.
-            const rect = cardRef.current.getBoundingClientRect();
-            const closingStyle: React.CSSProperties = {
-                position: 'fixed',
-                left: rect.left,
-                top: rect.top,
-                width: rect.width,
-                height: rect.height,
-                opacity: 0,
-                zIndex: 1000,
-                transition: `all ${duration}ms ease-in-out`,
-            };
-            setModalStyle(closingStyle);
-            // Unmount after animation.
-            timer = setTimeout(() => {
-                setModalStyle(null);
-            }, duration);
-        }
-        return () => {
-            cancelAnimationFrame(animationFrame);
-            if (timer) clearTimeout(timer);
-        };
-    }, [showModal]);
-
-    // Banner slideshow: update bannerIndex every 1.5 seconds.
-    useEffect(() => {
-        if (showModal && card?.banner && card.banner.length > 0) {
-            slideshowTimer.current = setInterval(() => {
-                setBannerIndex((prev) => (prev + 1) % card.banner.length);
-            }, 1500);
-        }
-        return () => {
-            if (slideshowTimer.current) clearInterval(slideshowTimer.current);
-        };
-    }, [showModal, card]);
-
-    // Function to reset the slideshow timer when manually controlling the slideshow.
-    const resetSlideshowTimer = () => {
-        if (slideshowTimer.current) {
-            clearInterval(slideshowTimer.current);
-        }
-        if (showModal && card?.banner && card.banner.length > 0) {
-            slideshowTimer.current = setInterval(() => {
-                setBannerIndex((prev) => (prev + 1) % card.banner.length);
-            }, 1500);
-        }
+  // Animate modal opening/closing.
+  useEffect(() => {
+    let animationFrame: number;
+    let timer: NodeJS.Timeout;
+    const duration = 400;
+    if (showModal && cardRef.current) {
+      const rect = cardRef.current.getBoundingClientRect();
+      const initialStyle: React.CSSProperties = {
+        position: 'fixed',
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+        opacity: 0,
+        zIndex: 1000,
+        transition: `all ${duration}ms ease-in-out`,
+      };
+      setModalStyle(initialStyle);
+      animationFrame = requestAnimationFrame(() => {
+        const finalStyle = computeFinalModalStyle();
+        setModalStyle({
+          ...finalStyle,
+          opacity: 1,
+          transition: `all ${duration}ms ease-in-out`,
+        });
+      });
+    } else if (!showModal && modalStyle && cardRef.current) {
+      const rect = cardRef.current.getBoundingClientRect();
+      const closingStyle: React.CSSProperties = {
+        position: 'fixed',
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+        opacity: 0,
+        zIndex: 1000,
+        transition: `all ${duration}ms ease-in-out`,
+      };
+      setModalStyle(closingStyle);
+      timer = setTimeout(() => {
+        setModalStyle(null);
+      }, duration);
+    }
+    return () => {
+      cancelAnimationFrame(animationFrame);
+      if (timer) clearTimeout(timer);
     };
+  }, [showModal]);
 
-    // Slideshow control functions.
-    const handlePrev = () => {
-        if (card?.banner && card.banner.length > 0) {
-            setBannerIndex((prev) => (prev - 1 + card.banner.length) % card.banner.length);
-            resetSlideshowTimer();
-        }
+  // Banner slideshow: update bannerIndex every 1.5 seconds.
+  useEffect(() => {
+    if (showModal && card?.banner && card.banner.length > 0) {
+      slideshowTimer.current = setInterval(() => {
+        setBannerIndex((prev) => (prev + 1) % card.banner.length);
+      }, 1500);
+    }
+    return () => {
+      if (slideshowTimer.current) clearInterval(slideshowTimer.current);
     };
+  }, [showModal, card]);
 
-    const handleNext = () => {
-        if (card?.banner && card.banner.length > 0) {
-            setBannerIndex((prev) => (prev + 1) % card.banner.length);
-            resetSlideshowTimer();
-        }
-    };
+  const resetSlideshowTimer = () => {
+    if (slideshowTimer.current) {
+      clearInterval(slideshowTimer.current);
+    }
+    if (showModal && card?.banner && card.banner.length > 0) {
+      slideshowTimer.current = setInterval(() => {
+        setBannerIndex((prev) => (prev + 1) % card.banner.length);
+      }, 1500);
+    }
+  };
 
-    // Control modal visibility based on hover (desktop) or click (mobile).
-    // (Modal will only render if hovered for more than 0.3s.)
-    useEffect(() => {
-        setShowModal(isHovering);
-    }, [isHovering]);
+  const handlePrev = () => {
+    if (card?.banner && card.banner.length > 0) {
+      setBannerIndex((prev) => (prev - 1 + card.banner.length) % card.banner.length);
+      resetSlideshowTimer();
+    }
+  };
 
-    const handleCardMouseEnter = () => {
-        hoverTimer.current = setTimeout(() => {
-            setIsHovering(true);
-        }, 300); // Only show modal if hovered for more than 0.3s.
-    };
+  const handleNext = () => {
+    if (card?.banner && card.banner.length > 0) {
+      setBannerIndex((prev) => (prev + 1) % card.banner.length);
+      resetSlideshowTimer();
+    }
+  };
 
-    const handleCardMouseLeave = () => {
-        if (hoverTimer.current) {
-            clearTimeout(hoverTimer.current);
-            hoverTimer.current = null;
-        }
-        setIsHovering(false);
-    };
+  useEffect(() => {
+    setShowModal(isHovering);
+  }, [isHovering]);
+
+  const handleCardMouseEnter = () => {
+    hoverTimer.current = setTimeout(() => {
+      setIsHovering(true);
+    }, 300);
+  };
+
+  const handleCardMouseLeave = () => {
+    if (hoverTimer.current) {
+      clearTimeout(hoverTimer.current);
+      hoverTimer.current = null;
+    }
+    setIsHovering(false);
+  };
 
-    const handleCardClick = (e: React.MouseEvent) => {
-        e.preventDefault();
-        // Toggle modal on click (for mobile) immediately.
-        setShowModal((prev) => !prev);
+  const handleCardClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setShowModal((prev) => !prev);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (hoverTimer.current) clearTimeout(hoverTimer.current);
+      if (touchTimer.current) clearTimeout(touchTimer.current);
     };
+  }, []);
 
-    // Clear hover timer on unmount.
-    useEffect(() => {
-        return () => {
-            if (hoverTimer.current) clearTimeout(hoverTimer.current);
-        };
-    }, []);
+  useEffect(() => {
+    const pageElements = document.getElementsByClassName('page');
+    for (let i = 0; i < pageElements.length; i++) {
+      (pageElements[i] as HTMLElement).style.filter = showModal
+        ? 'brightness(0.6)'
+        : 'brightness(1)';
+    }
+  }, [showModal]);
 
-    // Adjust brightness of page elements with class "page" based on modal open state.
-    useEffect(() => {
-        const pageElements = document.getElementsByClassName('page');
-        for (let i = 0; i < pageElements.length; i++) {
-            (pageElements[i] as HTMLElement).style.filter = showModal
-                ? 'brightness(0.6)'
-                : 'brightness(1)';
-        }
-    }, [showModal]);
+  const handleTouchStart = () => {
+    touchTimer.current = setTimeout(() => {
+      setShowModal(true);
+    }, 300);
+  };
 
-    // Render modal via portal when modalStyle is set.
-    const modal =
-        card && cardRef.current && modalStyle
-            ? createPortal(
-                  <div
-                      style={modalStyle}
-                      className="bg-gray-800/60 backdrop-blur-md rounded-lg p-2.5 border border-gray-400/50 transition-all flex flex-col justify-between pt-0"
-                      // Keep modal open on hover (desktop).
-                      onMouseEnter={() => setIsHovering(true)}
-                      onMouseLeave={() => setIsHovering(false)}
-                  >
-                      <button
-                          onClick={() => setShowModal(false)}
-                          className="absolute top-0 right-0 text-white bg-gray-800 hover:bg-gradient-to-r hover:from-violet-500/80 hover:to-purple-400/80 px-3 py-2 rounded-md z-10 border border-gray-400/50"
-                      >
-                          <XMarkIcon className="size-6" />
-                      </button>
-                      <div className="flex flex-col w-full">
-                          <h3 className="pb-2 pl-2 pt-2 bg-gray-700/40 backdrop-blur-md text-md sm:text-lg md:text-xl font-semibold text-white text-clip line-clamp-1">
-                              {card?.title || 'Loading...'}
-                          </h3>
+  const handleTouchEnd = () => {
+    if (touchTimer.current) {
+      clearTimeout(touchTimer.current);
+      touchTimer.current = null;
+    }
+  };
 
-                          <div className="flex pb-2 items-center space-x-2 mt-1 text-sm sm:text-md">
-                              <span className="text-yellow-400 flex gap-1 items-center">
-                                  <StarIcon className="size-3" /> 0
-                              </span>
-                              <span className="text-gray-300">• {card?.year || '----'}</span>
-                              <span className="text-purple-300 text-sm">•</span>
-                              <span className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm">
-                                  Movie
-                              </span>
-                          </div>
-                      </div>
-                      {/* Banner slideshow preview with crossfade effect and controls */}
-                      {card.banner && (
-                          <div className="relative w-full h-56 overflow-hidden rounded-md mb-4">
-                              <BannerImage
-                                  key={bannerIndex}
-                                  src={
-                                      card.banner[bannerIndex]?.thumbnail ||
-                                      `https://placehold.co/640x360?text=Preview+Not+Available`
-                                  }
-                                  alt="Banner Preview"
-                              />
+  const handleTouchCancel = () => {
+    if (touchTimer.current) {
+      clearTimeout(touchTimer.current);
+      touchTimer.current = null;
+    }
+  };
 
-                              {/* Slideshow controls */}
-                              {card.banner.length > 1 && (
-                                  <>
-                                      <button
-                                          onClick={handlePrev}
-                                          className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-900/70 hover:bg-gray-900/90 text-white rounded-full"
-                                      >
-                                          <ArrowLeftCircleIcon className="size-10 text-violet-400" />
-                                      </button>
-                                      <button
-                                          onClick={handleNext}
-                                          className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-900/70 hover:bg-gray-900/90 text-white rounded-full"
-                                      >
-                                          <ArrowRightCircleIcon className="size-10 text-violet-400" />
-                                      </button>
-                                  </>
-                              )}
-                          </div>
-                      )}
-                      {/* Overview text */}
-                      <div className="text-gray-300 text-base sm:text-lg overflow-hidden line-clamp-4 transition-all duration-300 mb-4">
-                          {card.overview || 'No overview available.'}
-                      </div>
-                      {/* View Details Button */}
-                      <div className="flex flex-row items-center">
-                          <Link href={`/movie/${title}`}>
-                              <button className="text-white bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-2 rounded-3xl flex items-center text-sm md:text-base transition-all duration-750 ease-in-out gap-0.5">
-                                  View Details <ChevronRightIcon className="size-4" />
-                              </button>
-                          </Link>
-                      </div>
-                  </div>,
-                  document.body,
-              )
-            : null;
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+  };
 
-    return (
-        <>
-            <div
-                ref={cardRef}
-                className="relative block w-[fit-content] cursor-pointer"
-                onMouseEnter={handleCardMouseEnter}
-                onMouseLeave={handleCardMouseLeave}
-                onClick={handleCardClick}
+  // Render modal via portal.
+  const modal =
+    card && cardRef.current && modalStyle
+      ? createPortal(
+          <div
+            style={modalStyle}
+            className="bg-gray-800/60 backdrop-blur-md rounded-lg p-2.5 border border-gray-400/50 transition-all flex flex-col justify-between pt-0"
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            data-oid="tb8v-uu"
+          >
+            <button
+              onClick={() => setShowModal(false)}
+              className="absolute top-0 right-0 text-white bg-gray-800 hover:bg-gradient-to-r hover:from-violet-500/80 hover:to-purple-400/80 px-3 py-2 rounded-md z-10 border border-gray-400/50"
+              data-oid="5t0t0w8"
             >
+              <XMarkIcon className="size-6" data-oid="9l_e-n4" />
+            </button>
+            <div className="flex flex-col w-full" data-oid="yqltdoi">
+              <h3
+                className="pb-2 pl-2 pt-2 bg-gray-700/40 backdrop-blur-md text-md sm:text-lg md:text-xl font-semibold text-white text-clip line-clamp-1"
+                data-oid="5m8o8:w"
+              >
+                {card?.title || 'Loading...'}
+              </h3>
+              <div
+                className="flex pb-2 items-center space-x-2 mt-1 text-sm sm:text-md"
+                data-oid="c4mccmo"
+              >
+                <span
+                  className="text-yellow-400 flex gap-1 items-center"
+                  data-oid="xicxnyd"
+                >
+                  <StarIcon className="size-3" data-oid="_p6_8g9" /> 0
+                </span>
+                <span className="text-gray-300" data-oid="jmctmcv">
+                  • {card?.year || '----'}
+                </span>
+                <span className="text-purple-300 text-sm" data-oid="eb540.e">
+                  •
+                </span>
+                <span
+                  className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm"
+                  data-oid="3ojoz.m"
+                >
+                  Movie
+                </span>
+              </div>
+            </div>
+            {/* Conditionally render TrailersComp if trailers exist, otherwise show banner slideshow */}
+            {card?.trailers && card.trailers.length > 0 ? (
+              <TrailersComp trailers={card.trailers} />
+            ) : (
+              card.banner && (
                 <div
-                    className="rounded-lg border border-gray-400/50 overflow-hidden relative transition-transform duration-300 w-[140px] sm:w-[150px] md:w-[180px] lg:w-[180px] xl:w-[200px] 
-                                                                                                                                  h-[210px] sm:h-[220px] md:h-[250px] lg:h-[280px] xl:h-[300px]"
+                  className="relative w-full h-56 overflow-hidden rounded-md mb-4"
+                  data-oid="h__x1wg"
                 >
-                    {/* Skeleton Loader */}
-                    {!imageLoaded && (
-                        <div className="absolute inset-0 bg-gray-700 animate-pulse rounded-lg" />
-                    )}
-                    {/* Card Image (fixed once randomly selected) */}
-                    {cardImage && (
-                        <img
-                            src={cardImage}
-                            alt={card?.title || title}
-                            className={`w-full h-full object-cover transition-opacity ease-in-out duration-300 ${
-                                imageLoaded ? 'opacity-100' : 'opacity-0'
-                            }`}
-                            onLoad={() => setImageLoaded(true)}
+                  <BannerImage
+                    key={bannerIndex}
+                    src={
+                      card.banner[bannerIndex]?.thumbnail ||
+                      `https://placehold.co/640x360?text=Preview+Not+Available`
+                    }
+                    alt="Banner Preview"
+                    data-oid="9kczgk8"
+                  />
+                  {card.banner.length > 1 && (
+                    <>
+                      <button
+                        onClick={handlePrev}
+                        className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-900/70 hover:bg-gray-900/90 text-white rounded-full"
+                        data-oid="z151qsy"
+                      >
+                        <ArrowLeftCircleIcon
+                          className="size-10 text-violet-400"
+                          data-oid="fpnh2w9"
                         />
-                    )}
-                    {/* Overlay */}
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent">
-                        <div className="absolute bottom-0 p-4 w-full">
-                            <h3 className="text-sm sm:text-base md:text-lg font-semibold text-white">
-                                {card?.title || 'Loading...'}
-                            </h3>
-                            <div className="flex items-center space-x-2 mt-1 text-xs sm:text-sm">
-                                <span className="text-yellow-400 flex gap-1 items-center">
-                                    <StarIcon className="size-3" /> 0
-                                </span>
-                                <span className="text-gray-300">• {card?.year || '----'}</span>
-                            </div>
-                        </div>
-                    </div>
+                      </button>
+                      <button
+                        onClick={handleNext}
+                        className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-900/70 hover:bg-gray-900/90 text-white rounded-full"
+                        data-oid="h.h66si"
+                      >
+                        <ArrowRightCircleIcon
+                          className="size-10 text-violet-400"
+                          data-oid="l56nlzc"
+                        />
+                      </button>
+                    </>
+                  )}
                 </div>
+              )
+            )}
+            <div>
+            <div
+              className="text-gray-300 text-base sm:text-lg overflow-hidden line-clamp-4 transition-all duration-300 mb-4"
+              data-oid="kv2m21p"
+            >
+              {card.overview || 'No overview available.'}
+            </div>
+            <div className="flex flex-row items-center" data-oid="0b-7rk:">
+              <Link href={`/movie/${title}`} data-oid="hkbkx6n">
+                <button
+                  className="text-white bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-2 rounded-3xl flex items-center text-sm md:text-base transition-all duration-750 ease-in-out gap-0.5"
+                  data-oid="twpk-.0"
+                >
+                  View Details{' '}
+                  <ChevronRightIcon className="size-4" data-oid="qcfuh6i" />
+                </button>
+              </Link>
+            </div>
+            </div>
+          </div>,
+          document.body
+        )
+      : null;
+
+  return (
+    <>
+      <div
+        ref={cardRef}
+        className="relative block w-[fit-content] cursor-pointer"
+        onMouseEnter={handleCardMouseEnter}
+        onMouseLeave={handleCardMouseLeave}
+        onClick={handleCardClick}
+        onContextMenu={handleContextMenu}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        onTouchCancel={handleTouchCancel}
+        data-oid="n5vhem8"
+      >
+        <div
+          className="rounded-lg border border-gray-400/50 overflow-hidden relative transition-transform duration-300 w-[140px] sm:w-[150px] md:w-[180px] lg:w-[180px] xl:w-[200px] h-[210px] sm:h-[220px] md:h-[250px] lg:h-[280px] xl:h-[300px]"
+          data-oid="l9pmup."
+        >
+          {!imageLoaded && (
+            <div
+              className="absolute inset-0 bg-gray-700 animate-pulse rounded-lg"
+              data-oid="2voine3"
+            />
+          )}
+          {cardImage && (
+            <img
+              src={cardImage}
+              alt={card?.title || title}
+              className={`w-full h-full object-cover transition-opacity ease-in-out duration-300 ${
+                imageLoaded ? 'opacity-100' : 'opacity-0'
+              }`}
+              onLoad={() => setImageLoaded(true)}
+              data-oid="nwn_z5j"
+            />
+          )}
+          <div
+            className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"
+            data-oid="r2rej5e"
+          >
+            <div className="absolute bottom-0 p-4 w-full" data-oid="1eaxbqc">
+              <h3
+                className="text-sm sm:text-base md:text-lg font-semibold text-white"
+                data-oid="hpfobv_"
+              >
+                {card?.title || 'Loading...'}
+              </h3>
+              <div
+                className="flex items-center space-x-2 mt-1 text-xs sm:text-sm"
+                data-oid="ezlhf5b"
+              >
+                <span
+                  className="text-yellow-400 flex gap-1 items-center"
+                  data-oid="y:azqm."
+                >
+                  <StarIcon className="size-3" data-oid="3xs1fgq" /> 0
+                </span>
+                <span className="text-gray-300" data-oid="xws-0rb">
+                  • {card?.year || '----'}
+                </span>
+              </div>
             </div>
-            {modal}
-        </>
-    );
+          </div>
+        </div>
+      </div>
+      {modal}
+    </>
+  );
 };

frontend/components/movie/MovieLinkFetcher.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { getMovieLinkByTitle } from '@/lib/lb';
+
+interface MovieLinkFetcherProps {
+    title: string;
+    onCancel?: () => void;
+    onVideoLinkFetched: (url: string) => void;
+}
+
+interface ProgressData {
+    status: string;
+    progress: number;
+    downloaded: number;
+    total: number;
+}
+
+const MovieLinkFetcher: React.FC<MovieLinkFetcherProps> = ({
+    title,
+    onCancel,
+    onVideoLinkFetched,
+}) => {
+    const [progress, setProgress] = useState<ProgressData | null>(null);
+    const [pollingInterval, setPollingInterval] = useState<NodeJS.Timeout | null>(null);
+    const [videoFetched, setVideoFetched] = useState(false);
+    const videoFetchedRef = useRef(videoFetched);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        videoFetchedRef.current = videoFetched;
+    }, [videoFetched]);
+
+    const fetchMovieLink = async () => {
+        if (videoFetchedRef.current) return;
+        try {
+            const response = await getMovieLinkByTitle(title);
+            if (response.url) {
+                setVideoFetched(true);
+                onVideoLinkFetched(response.url);
+            } else if (response.progress_url) {
+                startPolling(response.progress_url);
+            }
+        } catch (error) {
+            console.error('Error fetching movie link:', error);
+        }
+    };
+
+    const pollProgress = async (progressUrl: string) => {
+        try {
+            const res = await fetch(progressUrl);
+            const data: { progress: ProgressData } = await res.json();
+            setProgress(data.progress);
+            if (data.progress && data.progress.progress >= 100) {
+                if (pollingInterval) {
+                    clearInterval(pollingInterval);
+                    setPollingInterval(null);
+                }
+                if (!videoFetchedRef.current) {
+                    timeoutRef.current = setTimeout(() => {
+                        fetchMovieLink();
+                    }, 5000);
+                }
+            }
+        } catch (error) {
+            console.error('Error polling progress:', error);
+        }
+    };
+
+    const startPolling = (progressUrl: string) => {
+        if (!pollingInterval) {
+            const interval = setInterval(() => {
+                pollProgress(progressUrl);
+            }, 2000);
+            setPollingInterval(interval);
+        }
+    };
+
+    useEffect(() => {
+        fetchMovieLink();
+        return () => {
+            if (pollingInterval) clearInterval(pollingInterval);
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [title]);
+
+    return (
+        <div className="p-6 bg-gray-800 text-gray-200 rounded-lg shadow-md" data-oid="vvphqe1">
+            <h2 className="text-xl font-semibold mb-4" data-oid="0tsia7.">
+                Fetching Video Link
+            </h2>
+            {progress ? (
+                <div className="space-y-2" data-oid="xxr2e-g">
+                    <p className="text-sm" data-oid="vbpgm.d">
+                        Status: {progress.status}
+                    </p>
+                    <p className="text-sm" data-oid="dw1pv31">
+                        Progress: {progress.progress.toFixed(2)}%
+                    </p>
+                    <p className="text-sm" data-oid="lna-q-l">
+                        Downloaded: {progress.downloaded} / {progress.total}
+                    </p>
+                </div>
+            ) : (
+                <p className="text-sm" data-oid=":dwyu_n">
+                    Initializing...
+                </p>
+            )}
+            {onCancel && (
+                <button
+                    onClick={onCancel}
+                    className="mt-6 w-full py-2 bg-purple-600 hover:bg-purple-500 rounded-md text-white font-semibold transition-colors"
+                    data-oid="zgczbvu"
+                >
+                    Cancel
+                </button>
+            )}
+        </div>
+    );
+};
+
+export default MovieLinkFetcher;

frontend/components/movie/MovieLinkFetcherModal.tsx

@@ -90,30 +90,50 @@ const MovieLinkFetcherModal: React.FC<VideoLinkFetcherModalProps> = ({
     if (!isOpen) return null;
 
     return (
-        <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fadeIn">
-            <div className="bg-gradient-to-b from-gray-900 to-gray-800 text-gray-200 rounded-lg shadow-lg p-6 w-full max-w-md mx-4 relative">
-                <h2 className="text-xl font-semibold text-center mb-4">Fetching Video Link</h2>
+        <div
+            className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fadeIn"
+            data-oid="adbm35z"
+        >
+            <div
+                className="bg-gradient-to-b from-gray-900 to-gray-800 text-gray-200 rounded-lg shadow-lg p-6 w-full max-w-md mx-4 relative"
+                data-oid=".rz6w-q"
+            >
+                <h2 className="text-xl font-semibold text-center mb-4" data-oid="4rplmdm">
+                    Fetching Video Link
+                </h2>
 
                 {progress ? (
-                    <div className="text-center space-y-2">
-                        <p className="text-sm">Status: {progress.status}</p>
-                        <p className="text-sm">Progress: {progress.progress.toFixed(2)}%</p>
-                        <p className="text-sm">
+                    <div className="text-center space-y-2" data-oid="036m60o">
+                        <p className="text-sm" data-oid="n21qhw0">
+                            Status: {progress.status}
+                        </p>
+                        <p className="text-sm" data-oid="9jgpb6y">
+                            Progress: {progress.progress.toFixed(2)}%
+                        </p>
+                        <p className="text-sm" data-oid="ofdd2_.">
                             Downloaded: {progress.downloaded} / {progress.total}
                         </p>
                     </div>
                 ) : (
-                    <p className="text-center text-sm">Initializing...</p>
+                    <p className="text-center text-sm" data-oid="y0ktcy:">
+                        Initializing...
+                    </p>
                 )}
 
                 {!videoFetched && (
-                    <div className="mt-4 p-2 bg-gray-700 rounded text-center text-sm text-yellow-300">
-                        <p>Advertisement: Your video is caching, please wait...</p>
-                        <div className="mt-2 flex justify-center">
+                    <div
+                        className="mt-4 p-2 bg-gray-700 rounded text-center text-sm text-yellow-300"
+                        data-oid="s3d5_nv"
+                    >
+                        <p data-oid="dcvr:z:">
+                            Advertisement: Your video is caching, please wait...
+                        </p>
+                        <div className="mt-2 flex justify-center" data-oid="76x-kmq">
                             <img
                                 src="https://www.adspeed.com/placeholder-300x250.gif"
                                 alt="Ad"
                                 className="h-24 rounded"
+                                data-oid="pmav4wc"
                             />
                         </div>
                     </div>
@@ -122,6 +142,7 @@ const MovieLinkFetcherModal: React.FC<VideoLinkFetcherModalProps> = ({
                 <button
                     onClick={onClose}
                     className="mt-6 w-full py-2 bg-purple-600 hover:bg-purple-500 rounded-md text-white font-semibold transition-colors"
+                    data-oid="2g1v29b"
                 >
                     Cancel
                 </button>

frontend/components/movie/MoviePlayer.tsx

@@ -0,0 +1,566 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useSpinnerLoading } from '@/components/loading/Spinner';
+import {
+    PlayIcon,
+    PauseIcon,
+    SpeakerWaveIcon,
+    SpeakerXMarkIcon,
+    ArrowsPointingOutIcon,
+    ArrowsPointingInIcon,
+} from '@heroicons/react/24/solid';
+import { XCircleIcon } from '@heroicons/react/24/outline';
+import { getMovieLinkByTitle } from '@/lib/lb';
+
+interface ContentRating {
+    country: string;
+    name: string;
+    description: string;
+}
+
+interface MoviePlayerProps {
+    videoTitle: string;
+    contentRatings?: ContentRating[];
+    onClosePlayer?: () => void; // Optional close handler for page context
+}
+
+interface ProgressData {
+    status: string;
+    progress: number;
+    downloaded: number;
+    total: number;
+}
+
+const MoviePlayer: React.FC<MoviePlayerProps> = ({
+    videoTitle,
+    contentRatings = [],
+    onClosePlayer,
+}) => {
+    // Spinner
+    const { spinnerLoading, setSpinnerLoading } = useSpinnerLoading();
+
+    // Refs
+    const containerRef = useRef<HTMLDivElement>(null);
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const inactivityRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Video URL & blob state
+    const [videoUrl, setVideoUrl] = useState<string | null>(null);
+    const [videoBlobUrl, setVideoBlobUrl] = useState<string>('');
+
+    // Player UI states
+    const [showControls, setShowControls] = useState(true);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isSeeking, setIsSeeking] = useState(false);
+    const [duration, setDuration] = useState(0);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const isMuted = volume === 0;
+    const [buffered, setBuffered] = useState(0);
+
+    // Link fetching states
+    const [progress, setProgress] = useState<ProgressData | null>(null);
+    const [pollingInterval, setPollingInterval] = useState<NodeJS.Timeout | null>(null);
+    const [videoFetched, setVideoFetched] = useState(false);
+    const videoFetchedRef = useRef(videoFetched);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Keep ref in sync
+    useEffect(() => {
+        videoFetchedRef.current = videoFetched;
+    }, [videoFetched]);
+
+    // --- Link Fetching & Polling ---
+    const fetchMovieLink = async () => {
+        if (videoFetchedRef.current) return;
+        try {
+            const response = await getMovieLinkByTitle(videoTitle);
+            if (response.url) {
+                // Stop any polling if running
+                if (pollingInterval) {
+                    clearInterval(pollingInterval);
+                    setPollingInterval(null);
+                }
+                setVideoUrl(response.url);
+                setVideoFetched(true);
+                console.log('Video URL fetched:', response.url);
+            } else if (response.progress_url) {
+                startPolling(response.progress_url);
+            }
+        } catch (error) {
+            console.error('Error fetching movie link:', error);
+        }
+    };
+
+    const pollProgress = async (progressUrl: string) => {
+        try {
+            const res = await fetch(progressUrl);
+            const data: { progress: ProgressData } = await res.json();
+            setProgress(data.progress);
+            if (data.progress.progress >= 100) {
+                if (pollingInterval) {
+                    clearInterval(pollingInterval);
+                    setPollingInterval(null);
+                }
+                // If still no video URL, try again after 5 sec
+                if (!videoFetchedRef.current) {
+                    timeoutRef.current = setTimeout(fetchMovieLink, 5000);
+                }
+            }
+        } catch (error) {
+            console.error('Error polling progress:', error);
+        }
+    };
+
+    const startPolling = (progressUrl: string) => {
+        if (!pollingInterval) {
+            const interval = setInterval(() => pollProgress(progressUrl), 2000);
+            setPollingInterval(interval);
+        }
+    };
+
+    useEffect(() => {
+        fetchMovieLink();
+        return () => {
+            if (pollingInterval) clearInterval(pollingInterval);
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [videoTitle]);
+
+    // --- Player Control Helpers ---
+    const resetInactivityTimer = () => {
+        setShowControls(true);
+        if (inactivityRef.current) clearTimeout(inactivityRef.current);
+        inactivityRef.current = setTimeout(() => setShowControls(false), 3000);
+    };
+
+    const updateBuffered = () => {
+        if (videoRef.current) {
+            const bufferedTime =
+                videoRef.current.buffered.length > 0
+                    ? videoRef.current.buffered.end(videoRef.current.buffered.length - 1)
+                    : 0;
+            setBuffered(bufferedTime);
+        }
+    };
+
+    // Update buffered every second (even when paused)
+    useEffect(() => {
+        const interval = setInterval(updateBuffered, 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+    // --- Fullscreen Listener ---
+    useEffect(() => {
+        const handleFullScreenChange = () => {
+            setIsFullscreen(document.fullscreenElement === containerRef.current);
+        };
+        document.addEventListener('fullscreenchange', handleFullScreenChange);
+        return () => document.removeEventListener('fullscreenchange', handleFullScreenChange);
+    }, []);
+
+    // --- Blob Fetching ---
+    useEffect(() => {
+        if (videoUrl) {
+            setSpinnerLoading(true);
+            const abortController = new AbortController();
+            const fetchBlob = async () => {
+                try {
+                    const response = await fetch(videoUrl, {
+                        signal: abortController.signal,
+                        mode: 'cors',
+                    });
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    const blob = await response.blob();
+                    const blobUrl = URL.createObjectURL(blob);
+                    setVideoBlobUrl(blobUrl);
+                    console.log('Blob URL created:', blobUrl);
+                    setSpinnerLoading(false);
+                } catch (error: any) {
+                    if (error.name === 'AbortError') {
+                        console.log('Blob fetch aborted.');
+                    } else {
+                        console.error('Error fetching video blob:', error);
+                        console.error('Falling back to direct video URL.');
+                        setVideoBlobUrl('');
+                        setSpinnerLoading(false);
+                    }
+                }
+            };
+            fetchBlob();
+            return () => {
+                abortController.abort();
+                if (videoBlobUrl) {
+                    URL.revokeObjectURL(videoBlobUrl);
+                    console.log('Blob URL revoked:', videoBlobUrl);
+                }
+                setVideoBlobUrl('');
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [videoUrl]);
+
+    // --- Reset Player on New URL ---
+    useEffect(() => {
+        setIsPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+        setVolume(1);
+        setIsFullscreen(false);
+        resetInactivityTimer();
+        console.log(
+            'Video player loaded using',
+            videoBlobUrl ? 'blob' : 'direct URL',
+            videoBlobUrl,
+        );
+        return () => {
+            if (inactivityRef.current) clearTimeout(inactivityRef.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [videoUrl]);
+
+    // --- Video Event Handlers ---
+    const handleLoadedMetadata = () => {
+        if (videoRef.current) {
+            setDuration(videoRef.current.duration);
+        }
+    };
+
+    const handleTimeUpdate = () => {
+        if (videoRef.current && !isSeeking) {
+            setCurrentTime(videoRef.current.currentTime);
+            updateBuffered();
+        }
+    };
+
+    const handleProgress = () => {
+        updateBuffered();
+    };
+
+    // Show content rating overlay briefly when playing
+    const [showRatingOverlay, setShowRatingOverlay] = useState(false);
+    const triggerRatingOverlay = () => {
+        if (contentRatings.length > 0) {
+            setShowRatingOverlay(true);
+            setTimeout(() => setShowRatingOverlay(false), 5000);
+        }
+    };
+
+    const handlePlay = () => {
+        setIsPlaying(true);
+        setSpinnerLoading(false);
+        triggerRatingOverlay();
+    };
+
+    const handlePause = () => {
+        setIsPlaying(false);
+    };
+
+    const togglePlay = () => {
+        if (!videoRef.current) return;
+        videoRef.current.paused ? videoRef.current.play() : videoRef.current.pause();
+    };
+
+    const handleSeekStart = () => setIsSeeking(true);
+    const handleSeekEnd = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newTime = Number(e.target.value);
+        if (videoRef.current) videoRef.current.currentTime = newTime;
+        setCurrentTime(newTime);
+        setIsSeeking(false);
+    };
+
+    const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newVolume = Number(e.target.value);
+        setVolume(newVolume);
+        if (videoRef.current) videoRef.current.volume = newVolume;
+    };
+
+    const toggleMute = () => {
+        if (!videoRef.current) return;
+        if (volume > 0) {
+            setVolume(0);
+            videoRef.current.volume = 0;
+        } else {
+            setVolume(1);
+            videoRef.current.volume = 1;
+        }
+    };
+
+    const toggleFullscreen = async () => {
+        if (!containerRef.current) return;
+        if (!isFullscreen) {
+            await containerRef.current.requestFullscreen?.();
+            setIsFullscreen(true);
+        } else {
+            await document.exitFullscreen?.();
+            setIsFullscreen(false);
+        }
+    };
+
+    const handleClose = () => {
+        onClosePlayer && onClosePlayer();
+    };
+
+    const formatTime = (time: number): string => {
+        const hours = Math.floor(time / 3600);
+        const minutes = Math.floor((time % 3600) / 60);
+        const seconds = Math.floor(time % 60);
+        const minutesStr = minutes.toString().padStart(2, '0');
+        const secondsStr = seconds.toString().padStart(2, '0');
+        return hours > 0 ? `${hours}:${minutesStr}:${secondsStr}` : `${minutesStr}:${secondsStr}`;
+    };
+
+    // --- Progress Bar Calculations ---
+    const playedPercent = duration ? (currentTime / duration) * 100 : 0;
+    const bufferedPercent = duration ? (buffered / duration) * 100 : 0;
+
+    return (
+        <div
+            className="z-30 absolute w-full h-full"
+            ref={containerRef}
+            onMouseMove={resetInactivityTimer}
+            data-oid="r0v5aoy"
+        >
+            {videoUrl ? (
+                <>
+                    <video
+                        ref={videoRef}
+                        crossOrigin="anonymous"
+                        className="w-full h-full bg-black object-cover"
+                        style={{ pointerEvents: 'none' }}
+                        onLoadedMetadata={handleLoadedMetadata}
+                        onTimeUpdate={handleTimeUpdate}
+                        onProgress={handleProgress}
+                        onPlay={handlePlay}
+                        onPause={handlePause}
+                        onWaiting={() => setSpinnerLoading(true)}
+                        onCanPlay={() => setSpinnerLoading(false)}
+                        onPlaying={() => setSpinnerLoading(false)}
+                        autoPlay
+                        data-oid="b1om8sp"
+                    >
+                        <source
+                            src={videoBlobUrl || videoUrl}
+                            type="video/webm"
+                            data-oid="fkv995l"
+                        />
+                    </video>
+
+                    {showRatingOverlay && contentRatings.length > 0 && (
+                        <div
+                            className="absolute z-50 pointer-events-none"
+                            style={{ top: '80px', left: '20px' }}
+                            data-oid="ut68anl"
+                        >
+                            <div
+                                className="px-6 py-3 bg-black bg-opacity-70 rounded-lg border border-white text-white text-3xl font-bold animate-fade-out"
+                                data-oid="kmmj3.7"
+                            >
+                                {contentRatings[0].country ? `[${contentRatings[0].country}] ` : ''}
+                                {contentRatings[0].name}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Controls Overlay */}
+                    <div
+                        className={`absolute inset-0 flex flex-col justify-between transition-opacity duration-300 z-40 ${
+                            showControls
+                                ? 'opacity-100 pointer-events-auto'
+                                : 'opacity-0 pointer-events-none'
+                        }`}
+                        data-oid="ie8a4tx"
+                    >
+                        <div
+                            className="flex items-center justify-between p-6 bg-gradient-to-b from-black/90 to-transparent"
+                            data-oid="sbitr2x"
+                        >
+                            <div className="flex flex-col" data-oid="2izgux-">
+                                <h1
+                                    className="text-white text-3xl font-extrabold"
+                                    data-oid="3jf5av-"
+                                >
+                                    {videoTitle || 'Video Player'}
+                                </h1>
+                                {contentRatings.length > 0 && (
+                                    <div
+                                        className="mt-2 inline-block bg-gray-700 text-white text-sm px-3 py-1 rounded-md"
+                                        data-oid="hih_w29"
+                                    >
+                                        {contentRatings[0].country
+                                            ? `[${contentRatings[0].country}] `
+                                            : ''}
+                                        {contentRatings[0].name}
+                                    </div>
+                                )}
+                            </div>
+                            {onClosePlayer && (
+                                <button
+                                    onClick={handleClose}
+                                    className="text-white hover:text-red-400 transition-colors"
+                                    data-oid="vw:rhzp"
+                                >
+                                    <XCircleIcon className="w-10 h-10" data-oid="rr-p16m" />
+                                </button>
+                            )}
+                        </div>
+                        <div
+                            className="flex flex-col p-6 bg-gradient-to-t from-black/90 to-transparent"
+                            data-oid="oqn0s0f"
+                        >
+                            <div
+                                className="flex items-center justify-between mb-4"
+                                data-oid="qo0gq8w"
+                            >
+                                <span className="text-white text-sm" data-oid="h9bzg-k">
+                                    {formatTime(currentTime)}
+                                </span>
+                                {/* Custom Progress Bar */}
+                                <div className="relative w-full mx-4" data-oid="is-s2q_">
+                                    <div className="h-2 rounded bg-gray-700" data-oid="jm10y2t">
+                                        <div
+                                            className="h-2 rounded bg-purple-300"
+                                            style={{ width: `${bufferedPercent}%` }}
+                                            data-oid="t4-00_s"
+                                        ></div>
+                                        <div
+                                            className="h-2 rounded bg-purple-700 absolute top-0 left-0"
+                                            style={{ width: `${playedPercent}%` }}
+                                            data-oid="uq6zt6h"
+                                        ></div>
+                                    </div>
+                                    <input
+                                        type="range"
+                                        min="0"
+                                        max={duration}
+                                        value={
+                                            isSeeking
+                                                ? currentTime
+                                                : videoRef.current?.currentTime || 0
+                                        }
+                                        onMouseDown={handleSeekStart}
+                                        onTouchStart={handleSeekStart}
+                                        onChange={handleSeekEnd}
+                                        className="absolute top-0 left-0 w-full h-2 opacity-0 cursor-pointer"
+                                        data-oid="qlau95d"
+                                    />
+                                </div>
+                                <span className="text-white text-sm" data-oid="swiz6uh">
+                                    {formatTime(duration)}
+                                </span>
+                            </div>
+                            <div className="flex items-center justify-between" data-oid="r:rpbrz">
+                                <div className="flex items-center space-x-6" data-oid="milzceh">
+                                    <button
+                                        onClick={togglePlay}
+                                        className="text-white hover:text-purple-300 transition-colors"
+                                        data-oid="9xeiulf"
+                                    >
+                                        {isPlaying ? (
+                                            <PauseIcon className="w-10 h-10" data-oid="3_2us3v" />
+                                        ) : (
+                                            <PlayIcon className="w-10 h-10" data-oid="8hyyjo_" />
+                                        )}
+                                    </button>
+                                    <button
+                                        onClick={toggleMute}
+                                        className="text-white hover:text-purple-300 transition-colors"
+                                        data-oid="rf1ura4"
+                                    >
+                                        {isMuted ? (
+                                            <SpeakerXMarkIcon
+                                                className="w-10 h-10"
+                                                data-oid="f6mx23l"
+                                            />
+                                        ) : (
+                                            <SpeakerWaveIcon
+                                                className="w-10 h-10"
+                                                data-oid="y2bqchw"
+                                            />
+                                        )}
+                                    </button>
+                                    <input
+                                        type="range"
+                                        min={0}
+                                        max={1}
+                                        step={0.01}
+                                        value={volume}
+                                        onChange={handleVolumeChange}
+                                        className="w-24 accent-purple-500"
+                                        data-oid="4db1hvt"
+                                    />
+                                </div>
+                                <button
+                                    onClick={toggleFullscreen}
+                                    className="text-white hover:text-purple-300 transition-colors"
+                                    data-oid="eqb0vgb"
+                                >
+                                    {!isFullscreen ? (
+                                        <ArrowsPointingOutIcon
+                                            className="w-10 h-10"
+                                            data-oid="oyn8yc6"
+                                        />
+                                    ) : (
+                                        <ArrowsPointingInIcon
+                                            className="w-10 h-10"
+                                            data-oid="t7zqpg9"
+                                        />
+                                    )}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </>
+            ) : (
+                // Link Fetcher UI while waiting for video URL
+                <div
+                    className="p-6 bg-gray-800 text-gray-200 rounded-lg shadow-md"
+                    data-oid="x:w-azo"
+                >
+                    <h2 className="text-xl font-semibold mb-4" data-oid="gsa4riq">
+                        Fetching Video Link
+                    </h2>
+                    {progress ? (
+                        <div className="space-y-2" data-oid="d0ty9:0">
+                            <p className="text-sm" data-oid="bacm-s6">
+                                Status: {progress.status}
+                            </p>
+                            <p className="text-sm" data-oid="miy4vsg">
+                                Progress: {progress.progress.toFixed(2)}%
+                            </p>
+                            <p className="text-sm" data-oid="_0i74dp">
+                                Downloaded: {progress.downloaded} / {progress.total}
+                            </p>
+                        </div>
+                    ) : (
+                        <p className="text-sm" data-oid="05y0gze">
+                            Initializing link fetching...
+                        </p>
+                    )}
+                </div>
+            )}
+
+            <style jsx data-oid="45q3vmn">{`
+                @keyframes fade-out {
+                    0% {
+                        opacity: 1;
+                    }
+                    80% {
+                        opacity: 1;
+                    }
+                    100% {
+                        opacity: 0;
+                    }
+                }
+                .animate-fade-out {
+                    animation: fade-out 4s forwards;
+                }
+            `}</style>
+        </div>
+    );
+};
+
+export default MoviePlayer;

frontend/components/movie/MoviePlayerModal.tsx

@@ -32,11 +32,10 @@ const MoviePlayerModal: React.FC<MoviePlayerModalProps> = ({
     contentRatings = [],
 }) => {
     const { spinnerLoading, setSpinnerLoading } = useSpinnerLoading();
-    // Refs for the container and video
     const containerRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
 
-    // Player state
+    const [videoBlobUrl, setVideoBlobUrl] = useState<string>('');
     const [showControls, setShowControls] = useState(true);
     const [isPlaying, setIsPlaying] = useState(false);
     const [isSeeking, setIsSeeking] = useState(false);
@@ -44,12 +43,9 @@ const MoviePlayerModal: React.FC<MoviePlayerModalProps> = ({
     const [currentTime, setCurrentTime] = useState(0);
     const [volume, setVolume] = useState(1);
     const [isFullscreen, setIsFullscreen] = useState(false);
-
-    // Mute toggle – we consider volume 0 as muted
     const isMuted = volume === 0;
-
-    // Overlay auto-hide timer
     const inactivityRef = useRef<NodeJS.Timeout | null>(null);
+
     const resetInactivityTimer = () => {
         setShowControls(true);
         if (inactivityRef.current) clearTimeout(inactivityRef.current);
@@ -58,21 +54,63 @@ const MoviePlayerModal: React.FC<MoviePlayerModalProps> = ({
         }, 3000);
     };
 
-    // Top overlay: show content rating briefly; we show only the first rating
-    const [showRatingOverlay, setShowRatingOverlay] = useState(true);
+    // State for rating overlay (now positioned at top left below the top overlay)
+    const [showRatingOverlay, setShowRatingOverlay] = useState(false);
+
+    // Fetch the video blob and create a blob URL when modal opens
+    useEffect(() => {
+        let abortController: AbortController;
+        if (isOpen) {
+            setSpinnerLoading(true);
+            abortController = new AbortController();
+            fetch(videoUrl, { signal: abortController.signal, mode: 'cors' })
+                .then((response) => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.blob();
+                })
+                .then((blob) => {
+                    const blobUrl = URL.createObjectURL(blob);
+                    setVideoBlobUrl(blobUrl);
+                    console.log('Blob URL created:', blobUrl); // Debug log - Blob URL creation success
+                    setSpinnerLoading(false);
+                })
+                .catch((error) => {
+                    console.error('Error fetching video blob:', error); // Enhanced error logging
+                    console.error('Falling back to direct video URL.');
+                    setVideoBlobUrl('');
+                    setSpinnerLoading(false);
+                });
+        }
+        return () => {
+            if (abortController) {
+                setTimeout(() => {
+                    // Delayed abort
+                    abortController.abort();
+                    console.log('Blob fetch aborted (delayed)'); // Optional: Log delayed abort
+                }, 100);
+            }
+            if (videoBlobUrl) {
+                URL.revokeObjectURL(videoBlobUrl);
+                console.log('Blob URL revoked:', videoBlobUrl); // Debug log - Blob URL revocation
+            }
+            setVideoBlobUrl('');
+        };
+    }, [isOpen, videoUrl]);
+
+    // Show the content rating overlay when video starts playing
     useEffect(() => {
-        if (contentRatings.length > 0) {
+        if (contentRatings.length > 0 && isPlaying) {
             setShowRatingOverlay(true);
-            const timeout = setTimeout(() => {
+            const timer = setTimeout(() => {
                 setShowRatingOverlay(false);
             }, 4000);
-            return () => clearTimeout(timeout);
-        } else {
-            setShowRatingOverlay(false);
+            return () => clearTimeout(timer);
         }
-    }, [contentRatings]);
+    }, [contentRatings, isPlaying]);
 
-    // Listen for fullscreen changes (e.g. if user presses Esc)
+    // Listen for fullscreen changes
     useEffect(() => {
         const handleFullScreenChange = () => {
             if (document.fullscreenElement === containerRef.current) {
@@ -87,7 +125,6 @@ const MoviePlayerModal: React.FC<MoviePlayerModalProps> = ({
         };
     }, []);
 
-    // Reset player state when modal opens
     useEffect(() => {
         if (isOpen) {
             setIsPlaying(false);
@@ -96,15 +133,20 @@ const MoviePlayerModal: React.FC<MoviePlayerModalProps> = ({
             setVolume(1);
             setIsFullscreen(false);
             resetInactivityTimer();
+            console.log(
+                'Modal opened, videoBlobUrl:',
+                videoBlobUrl ? 'using blob' : 'using direct URL',
+                videoBlobUrl,
+            ); // Debug log - Modal opened, check blob usage
         } else {
             videoRef.current?.pause();
+            console.log('Modal closed, pausing video'); // Debug log - Modal closed
         }
         return () => {
             if (inactivityRef.current) clearTimeout(inactivityRef.current);
         };
-    }, [isOpen]);
+    }, [isOpen, videoBlobUrl]); // Added videoBlobUrl to dependency array to log on blob URL change
 
-    // Video event handlers
     const handleLoadedMetadata = () => {
         if (videoRef.current) {
             setDuration(videoRef.current.duration);
@@ -139,13 +181,7 @@ const MoviePlayerModal: React.FC<MoviePlayerModalProps> = ({
         setIsSeeking(true);
     };
 
-    interface SeekEvent {
-        target: {
-            value: string;
-        };
-    }
-
-    const handleSeekEnd = (e: SeekEvent) => {
+    const handleSeekEnd = (e: React.ChangeEvent<HTMLInputElement>) => {
         const newTime = Number(e.target.value);
         if (videoRef.current) {
             videoRef.current.currentTime = newTime;
@@ -193,30 +229,35 @@ const MoviePlayerModal: React.FC<MoviePlayerModalProps> = ({
         onClose();
     };
 
-    // Format time (mm:ss)
-    const formatTime = (time: number) => {
-        const mins = Math.floor(time / 60)
-            .toString()
-            .padStart(2, '0');
-        const secs = Math.floor(time % 60)
-            .toString()
-            .padStart(2, '0');
-        return `${mins}:${secs}`;
+    const formatTime = (time: number): string => {
+        const hours = Math.floor(time / 3600);
+        const minutes = Math.floor((time % 3600) / 60);
+        const seconds = Math.floor(time % 60);
+
+        const minutesStr = minutes.toString().padStart(2, '0');
+        const secondsStr = seconds.toString().padStart(2, '0');
+
+        if (hours > 0) {
+            const hoursStr = hours.toString(); // No need to pad hours to 1 digit, can just use toString()
+            return `${hoursStr}:${minutesStr}:${secondsStr}`;
+        } else {
+            return `${minutesStr}:${secondsStr}`;
+        }
     };
 
     if (!isOpen) return null;
 
     return (
         <div
-            className="fixed inset-0 z-[30] bg-black/90 flex items-center justify-center"
+            className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"
             onMouseMove={resetInactivityTimer}
+            data-oid="gr7.4q9"
         >
-            <div className="relative w-full h-full" ref={containerRef}>
-                {/* Video Element */}
+            <div className="relative w-full h-full" ref={containerRef} data-oid="4g9fqds">
                 <video
                     ref={videoRef}
-                    src={videoUrl}
-                    className="w-full h-full bg-black"
+                    src={videoBlobUrl || videoUrl}
+                    className="w-full h-full bg-black object-cover"
                     onLoadedMetadata={handleLoadedMetadata}
                     onTimeUpdate={handleTimeUpdate}
                     onPlay={handlePlay}
@@ -225,20 +266,43 @@ const MoviePlayerModal: React.FC<MoviePlayerModalProps> = ({
                     onCanPlay={() => setSpinnerLoading(false)}
                     onPlaying={() => setSpinnerLoading(false)}
                     autoPlay
+                    data-oid="s8jxm43"
                 />
 
-                {/* Single Overlay: Top and Bottom Controls */}
+                {showRatingOverlay && contentRatings.length > 0 && (
+                    <div
+                        className="absolute z-30 pointer-events-none"
+                        style={{ top: '80px', left: '20px' }}
+                        data-oid="26uj.jk"
+                    >
+                        <div
+                            className="px-6 py-3 bg-black bg-opacity-70 rounded-lg border border-white text-white text-3xl font-bold animate-fade-out"
+                            data-oid="o4huudt"
+                        >
+                            {contentRatings[0].country ? `[${contentRatings[0].country}] ` : ''}
+                            {contentRatings[0].name}
+                        </div>
+                    </div>
+                )}
                 <div
-                    className={`absolute inset-0 flex flex-col justify-between transition-opacity duration-300 z-20 ${
+                    className={`absolute inset-0 flex flex-col justify-between transition-opacity duration-300 z-40 ${
                         showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'
                     }`}
+                    data-oid="gwt99if"
                 >
-                    {/* Top Controls */}
-                    <div className="flex items-center justify-between p-4 bg-gradient-to-b from-black/80 to-transparent">
-                        <div className="flex flex-col">
-                            <h1 className="text-white text-2xl font-bold w-full">{videoTitle}</h1>
+                    <div
+                        className="flex items-center justify-between p-6 bg-gradient-to-b from-black/90 to-transparent"
+                        data-oid="y-ywqt."
+                    >
+                        <div className="flex flex-col" data-oid="jageq1l">
+                            <h1 className="text-white text-3xl font-extrabold" data-oid=":mrvbt_">
+                                {videoTitle}
+                            </h1>
                             {contentRatings.length > 0 && (
-                                <div className="mt-1 inline-block bg-gray-800 text-white text-xs px-2 py-1 rounded">
+                                <div
+                                    className="mt-2 inline-block bg-gray-700 text-white text-sm px-3 py-1 rounded-md"
+                                    data-oid="o3qr03s"
+                                >
                                     {contentRatings[0].country
                                         ? `[${contentRatings[0].country}] `
                                         : ''}
@@ -246,17 +310,22 @@ const MoviePlayerModal: React.FC<MoviePlayerModalProps> = ({
                                 </div>
                             )}
                         </div>
-                        <button onClick={handleClose} className="text-white hover:text-red-400">
-                            <XCircleIcon className="w-12 h-12" />
+                        <button
+                            onClick={handleClose}
+                            className="text-white hover:text-red-400 transition-colors"
+                            data-oid="330owz4"
+                        >
+                            <XCircleIcon className="w-10 h-10" data-oid="y5b.7gv" />
                         </button>
                     </div>
-
-                    {/* Bottom Controls */}
-                    <div className="flex flex-col p-4 bg-gradient-to-t from-black/80 to-transparent">
-                        {/* Progress Row */}
-                        <div className="flex items-center justify-between mb-2">
-                            <span className="text-white text-xs">{formatTime(currentTime)}</span>
-
+                    <div
+                        className="flex flex-col p-6 bg-gradient-to-t from-black/90 to-transparent"
+                        data-oid="t2hi_:9"
+                    >
+                        <div className="flex items-center justify-between mb-4" data-oid="xockgo8">
+                            <span className="text-white text-sm" data-oid="_r0wwui">
+                                {formatTime(currentTime)}
+                            </span>
                             <input
                                 type="range"
                                 min="0"
@@ -266,31 +335,38 @@ const MoviePlayerModal: React.FC<MoviePlayerModalProps> = ({
                                 onTouchStart={handleSeekStart}
                                 onChange={handleSeekEnd}
                                 className="w-full mx-4 accent-purple-500 cursor-pointer"
+                                data-oid="jxplunv"
                             />
 
-                            <span className="text-white text-xs">{formatTime(duration)}</span>
+                            <span className="text-white text-sm" data-oid=":.a9omh">
+                                {formatTime(duration)}
+                            </span>
                         </div>
-                        {/* Control Row */}
-                        <div className="flex items-center justify-between">
-                            <div className="flex items-center space-x-4">
+                        <div className="flex items-center justify-between" data-oid="5mh.64r">
+                            <div className="flex items-center space-x-6" data-oid="v1-s8y8">
                                 <button
                                     onClick={togglePlay}
-                                    className="text-white hover:text-purple-300"
+                                    className="text-white hover:text-purple-300 transition-colors"
+                                    data-oid=".msovrz"
                                 >
                                     {isPlaying ? (
-                                        <PauseIcon className="size-8" />
+                                        <PauseIcon className="w-10 h-10" data-oid="y-_g:m0" />
                                     ) : (
-                                        <PlayIcon className="size-8" />
+                                        <PlayIcon className="w-10 h-10" data-oid="gubg__s" />
                                     )}
                                 </button>
                                 <button
                                     onClick={toggleMute}
-                                    className="text-white hover:text-purple-300"
+                                    className="text-white hover:text-purple-300 transition-colors"
+                                    data-oid="acvgb5x"
                                 >
                                     {isMuted ? (
-                                        <SpeakerXMarkIcon className="w-8 h-8" />
+                                        <SpeakerXMarkIcon
+                                            className="w-10 h-10"
+                                            data-oid="6:qnknc"
+                                        />
                                     ) : (
-                                        <SpeakerWaveIcon className="w-8 h-8" />
+                                        <SpeakerWaveIcon className="w-10 h-10" data-oid="edsvj72" />
                                     )}
                                 </button>
                                 <input
@@ -301,22 +377,46 @@ const MoviePlayerModal: React.FC<MoviePlayerModalProps> = ({
                                     value={volume}
                                     onChange={handleVolume}
                                     className="w-24 accent-purple-500"
+                                    data-oid="kob7ehe"
                                 />
                             </div>
                             <button
                                 onClick={toggleFullscreen}
                                 className="text-white hover:text-purple-300 transition-colors"
+                                data-oid="q6togk5"
                             >
                                 {!isFullscreen ? (
-                                    <ArrowsPointingOutIcon className="w-8 h-8" />
+                                    <ArrowsPointingOutIcon
+                                        className="w-10 h-10"
+                                        data-oid="m5oa5si"
+                                    />
                                 ) : (
-                                    <ArrowsPointingInIcon className="w-8 h-8" />
+                                    <ArrowsPointingInIcon
+                                        className="w-10 h-10"
+                                        data-oid=":rxbd5:"
+                                    />
                                 )}
                             </button>
                         </div>
                     </div>
                 </div>
             </div>
+            <style jsx data-oid="9q-00-m">{`
+                @keyframes fade-out {
+                    0% {
+                        opacity: 1;
+                    }
+                    80% {
+                        opacity: 1;
+                    }
+                    100% {
+                        opacity: 0;
+                    }
+                }
+                .animate-fade-out {
+                    animation: fade-out 4s forwards;
+                }
+            `}</style>
         </div>
     );
 };

frontend/components/navigation/DesktopMenu.tsx

@@ -2,17 +2,29 @@ import Link from 'next/link';
 
 export const DesktopMenu = () => {
     return (
-        <div className="hidden md:flex space-x-8">
-            <Link href="/" className="hover:text-purple-400 transition-colors">
+        <div className="hidden md:flex space-x-8" data-oid="8clvgxs">
+            <Link href="/" className="hover:text-purple-400 transition-colors" data-oid="en._w4y">
                 Home
             </Link>
-            <Link href="/movies" className="hover:text-purple-400 transition-colors">
+            <Link
+                href="/browse/movies"
+                className="hover:text-purple-400 transition-colors"
+                data-oid=".4cp8fx"
+            >
                 Movies
             </Link>
-            <Link href="/tvshows" className="hover:text-purple-400 transition-colors">
+            <Link
+                href="/browse/tvshows"
+                className="hover:text-purple-400 transition-colors"
+                data-oid="s0:-:vi"
+            >
                 TV Shows
             </Link>
-            <Link href="/mylist" className="hover:text-purple-400 transition-colors">
+            <Link
+                href="/mylist"
+                className="hover:text-purple-400 transition-colors"
+                data-oid="aci1ac:"
+            >
                 My List
             </Link>
         </div>

frontend/components/navigation/MobileMenu.tsx

@@ -17,22 +17,45 @@ export const MobileMenu = ({ isOpen }: MobileMenuProps) => {
             leave="transition ease-in duration-200"
             leaveFrom="opacity-100 transform scale-100"
             leaveTo="opacity-0 transform scale-95"
+            data-oid="nwd51ke"
         >
-            <div className="md:hidden bg-gray-900 border-t border-gray-900 bg-opacity-50 backdrop-blur-lg">
-                <div className="px-6 py-4 space-y-4">
-                    <Link href="/" className="block hover:text-purple-400 transition-colors">
+            <div
+                className="md:hidden bg-gray-900 border-t border-gray-900 bg-opacity-50 backdrop-blur-lg"
+                data-oid="wxr9fto"
+            >
+                <div className="px-6 py-4 space-y-4" data-oid="vk_jznl">
+                    <Link
+                        href="/"
+                        className="block hover:text-purple-400 transition-colors"
+                        data-oid="di7h_s8"
+                    >
                         Home
                     </Link>
-                    <Link href="/movies" className="block hover:text-purple-400 transition-colors">
+                    <Link
+                        href="/browse/movies"
+                        className="block hover:text-purple-400 transition-colors"
+                        data-oid="::e1v3l"
+                    >
                         Movies
                     </Link>
-                    <Link href="/tvshows" className="block hover:text-purple-400 transition-colors">
+                    <Link
+                        href="/browse/tvshows"
+                        className="block hover:text-purple-400 transition-colors"
+                        data-oid="sckwvhe"
+                    >
                         TV Shows
                     </Link>
-                    <Link href="/mylist" className="block hover:text-purple-400 transition-colors">
+                    <Link
+                        href="/mylist"
+                        className="block hover:text-purple-400 transition-colors"
+                        data-oid="tam_u1k"
+                    >
                         My List
                     </Link>
-                    <button className="w-full bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-6 py-2 rounded-full transition-colors">
+                    <button
+                        className="w-full bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-6 py-2 rounded-full transition-colors"
+                        data-oid="k8swkjc"
+                    >
                         Sign In
                     </button>
                 </div>

frontend/components/navigation/Navbar.tsx

@@ -10,40 +10,48 @@ export const Navbar = () => {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
     return (
-        <nav className="fixed w-full z-20 bg-gradient-to-b from-gray-900 to-transparent backdrop-blur-lg">
-            <div className="container mx-auto px-6 py-4">
-                <div className="flex items-center justify-between">
+        <nav
+            className="fixed w-full z-20 bg-gradient-to-b from-gray-900 to-transparent backdrop-blur-lg"
+            data-oid="90uin_x"
+        >
+            <div className="container mx-auto px-6 py-4" data-oid="qdbt3n8">
+                <div className="flex items-center justify-between" data-oid="7j-7ngy">
                     <Link
                         href={'/'}
                         className="text-3xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent"
+                        data-oid="t-_qli-"
                     >
                         NEXORA
                     </Link>
-                    <DesktopMenu />
-                    <div className="flex gap-4">
-                        <button className="text-white">
-                            <Link href={'#search'}>
-                                <MagnifyingGlassIcon className="size-6" />
+                    <DesktopMenu data-oid="12hlixc" />
+                    <div className="flex gap-4" data-oid="4t7:7ph">
+                        <button className="text-white" data-oid="8_f3qsv">
+                            <Link href={'/search'} data-oid="qbms7nq">
+                                <MagnifyingGlassIcon className="size-6" data-oid="0y0pv8e" />
                             </Link>
                         </button>
                         <button
                             className="md:hidden text-white"
                             onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                            data-oid="ul.haxw"
                         >
                             {isMobileMenuOpen ? (
-                                <XMarkIcon className="size-6" />
+                                <XMarkIcon className="size-6" data-oid="z3215xb" />
                             ) : (
-                                <Bars3Icon className="size-6" />
+                                <Bars3Icon className="size-6" data-oid="kj5xto2" />
                             )}
                         </button>
 
-                        <button className="hidden md:block bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-6 py-2 rounded-full">
+                        <button
+                            className="hidden md:block bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-6 py-2 rounded-full"
+                            data-oid="vjtb.l3"
+                        >
                             Sign In
                         </button>
                     </div>
                 </div>
             </div>
-            <MobileMenu isOpen={isMobileMenuOpen} />
+            <MobileMenu isOpen={isMobileMenuOpen} data-oid="32owrug" />
         </nav>
     );
 };

frontend/components/sections/CastSection.tsx

@@ -20,23 +20,37 @@ export default function CastSection({ movie }: CastSectionProps) {
     const visibleCharacters = expanded ? movie.characters : movie.characters?.slice(0, 5);
 
     return (
-        <div className="flex-1 bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50">
-            <div className="flex justify-between items-center mb-2">
-                <h2 className="text-xl font-semibold text-white">Cast</h2>
+        <div
+            className="flex-1 bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50"
+            data-oid="el-dr0u"
+        >
+            <div className="flex justify-between items-center mb-2" data-oid="ungegze">
+                <h2 className="text-xl font-semibold text-white" data-oid="2nge4xt">
+                    Cast
+                </h2>
                 {movie.characters && movie.characters.length > 5 && (
                     <button
                         onClick={() => setExpanded(!expanded)}
                         className="text-white hover:text-gray-300 flex items-center"
+                        data-oid="p18:2hi"
                     >
                         {expanded ? 'Hide' : 'Show'}{' '}
-                        {expanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
+                        {expanded ? (
+                            <ChevronUp size={18} data-oid="4ob-a3h" />
+                        ) : (
+                            <ChevronDown size={18} data-oid="v0fnd16" />
+                        )}
                     </button>
                 )}
             </div>
 
-            <div className="flex flex-wrap gap-4">
+            <div className="flex flex-wrap gap-4" data-oid="2i8wny_">
                 {visibleCharacters?.map((character) => (
-                    <div key={character.id} className="flex items-center space-x-3">
+                    <div
+                        key={character.id}
+                        className="flex items-center space-x-3"
+                        data-oid="z-rn0go"
+                    >
                         <img
                             src={
                                 character.personImgURL ||
@@ -45,18 +59,22 @@ export default function CastSection({ movie }: CastSectionProps) {
                             }
                             alt={character.personName}
                             className="w-12 h-12 rounded-full object-cover"
+                            data-oid="ll8y:xp"
                         />
 
-                        <div>
+                        <div data-oid="9p-f8ar">
                             <a
                                 target="_blank"
                                 href={`https://thetvdb.com/people/${character.url}`}
                                 className="text-white font-semibold hover:underline"
+                                data-oid="dg_dhmp"
                             >
                                 {character.personName}
                             </a>
                             {character.name && (
-                                <p className="text-sm text-gray-400">as {character.name}</p>
+                                <p className="text-sm text-gray-400" data-oid="t4g7z9d">
+                                    as {character.name}
+                                </p>
                             )}
                         </div>
                     </div>

frontend/components/sections/EpisodesSection.tsx

@@ -0,0 +1,181 @@
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+interface FileStructure {
+    contents?: any[];
+}
+
+export default function EpisodesSection({
+    fileStructure,
+    tvshow,
+}: {
+    fileStructure: FileStructure;
+    tvshow: any;
+}) {
+    const [activeSeasonName, setActiveSeasonName] = useState('');
+
+    useEffect(() => {
+        if (!activeSeasonName && fileStructure.contents && fileStructure.contents.length > 0) {
+            setActiveSeasonName(fileStructure.contents[0].path.split('/').pop() || '');
+        }
+    }, [fileStructure.contents, activeSeasonName]);
+
+    const activeSeasonContent = fileStructure.contents?.find(
+        (season) => season.path.split('/').pop() === activeSeasonName,
+    );
+
+    return (
+        <div
+            className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50"
+            data-oid="-u.7aal"
+        >
+            <div className="flex flex-col space-y-4" data-oid="mlieuhm">
+                <div className="flex items-center justify-between" data-oid="9bhr4nm">
+                    <h3 className="text-lg font-semibold text-gray-200" data-oid="-oysqta">
+                        Episodes
+                    </h3>
+                </div>
+
+                {/* Season Buttons */}
+                <div
+                    className="overflow-x-auto whitespace-nowrap flex gap-2 scrollbar-hide snap-x snap-mandatory pb-2"
+                    data-oid="hqh:hnv"
+                >
+                    {fileStructure.contents?.map((season, idx) => {
+                        const seasonName = season.path.split('/').pop();
+                        const isSpecials = seasonName === 'Specials';
+
+                        return (
+                            <button
+                                key={idx}
+                                onClick={() => setActiveSeasonName(seasonName)}
+                                className={`px-4 py-2 min-w-fit rounded-full text-sm font-medium transition-colors snap-start ${
+                                    activeSeasonName === seasonName
+                                        ? 'bg-purple-500 text-white'
+                                        : isSpecials
+                                          ? 'bg-amber-500/20 text-amber-300 hover:bg-amber-500/30'
+                                          : 'bg-purple-500/20 text-purple-300 hover:bg-purple-500/30'
+                                }`}
+                                data-oid="epw09b7"
+                            >
+                                {seasonName}
+                            </button>
+                        );
+                    })}
+                </div>
+
+                {/* Episodes List */}
+                <div className="space-y-8 mt-4" data-oid="jehi09c">
+                    {activeSeasonContent && (
+                        <div key={activeSeasonName} className="space-y-4" data-oid="h23fi3y">
+                            <h4
+                                className={`text-base font-medium ${
+                                    activeSeasonContent.path.includes('Specials')
+                                        ? 'text-amber-300'
+                                        : 'text-purple-300'
+                                }`}
+                                data-oid="g_ta-8k"
+                            >
+                                {activeSeasonName}
+                            </h4>
+                            <div className="space-y-2" data-oid="4wxezna">
+                                {activeSeasonContent.contents?.map(
+                                    (episode: any, episodeIdx: number) => {
+                                        const match = episode.path.match(
+                                            /[S](\d+)[E](\d+) - (.+?)\./,
+                                        );
+                                        if (!match) return null;
+
+                                        const [, , episodeNum, episodeTitle] = match;
+                                        const isSpecials =
+                                            activeSeasonContent.path.includes('Specials');
+
+                                        // Use the actual file name from the file structure for the Link href
+                                        const fileName = episode.path.split('/').pop();
+
+                                        return (
+                                            <div
+                                                key={episodeIdx}
+                                                className="group flex items-center gap-4 p-3 rounded-xl transition-colors hover:bg-gray-700/50 cursor-pointer"
+                                                data-oid="tsgeg2u"
+                                            >
+                                                {/* Episode Number */}
+                                                <div
+                                                    className={`flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-xl bg-gray-700/50 ${
+                                                        isSpecials
+                                                            ? 'group-hover:bg-amber-500/20'
+                                                            : 'group-hover:bg-purple-500/20'
+                                                    }`}
+                                                    data-oid=":t-c1qy"
+                                                >
+                                                    <span
+                                                        className={`text-lg font-semibold text-gray-300 ${
+                                                            isSpecials
+                                                                ? 'group-hover:text-amber-300'
+                                                                : 'group-hover:text-purple-300'
+                                                        }`}
+                                                        data-oid="l:36s8q"
+                                                    >
+                                                        {episodeNum}
+                                                    </span>
+                                                </div>
+
+                                                {/* Episode Info */}
+                                                <div className="flex-grow" data-oid="8dem83b">
+                                                    <h4
+                                                        className="text-gray-200 font-medium"
+                                                        data-oid="z3dxeg6"
+                                                    >
+                                                        {episodeTitle.replace(/_/g, ' ')}
+                                                    </h4>
+                                                    <div
+                                                        className="flex items-center gap-3 text-sm text-gray-400"
+                                                        data-oid="sbyuvx."
+                                                    >
+                                                        <span data-oid="km.dfmx">
+                                                            {Math.round(episode.size / 1024 / 1024)}{' '}
+                                                            MB
+                                                        </span>
+                                                        <span data-oid=".m7gvkj">•</span>
+                                                        <span data-oid="4ae3wzk">
+                                                            {episode.path.includes('720p')
+                                                                ? 'HD'
+                                                                : 'SD'}
+                                                        </span>
+                                                    </div>
+                                                </div>
+
+                                                {/* Play Button */}
+                                                <Link
+                                                    href={`/watch/tvshow/${tvshow}/${activeSeasonName}/${fileName}`}
+                                                    className={`flex-shrink-0 p-2 rounded-full text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity ${
+                                                        isSpecials
+                                                            ? 'bg-amber-500/20 hover:bg-amber-500/30'
+                                                            : 'bg-purple-500/20 hover:bg-purple-500/30'
+                                                    }`}
+                                                    data-oid="ccsav_w"
+                                                >
+                                                    <svg
+                                                        className="w-5 h-5"
+                                                        fill="currentColor"
+                                                        viewBox="0 0 20 20"
+                                                        data-oid="ygzyjqj"
+                                                    >
+                                                        <path
+                                                            d="M4 4l12 6-12 6V4z"
+                                                            data-oid="ei5lvf8"
+                                                        />
+                                                    </svg>
+                                                </Link>
+                                            </div>
+                                        );
+                                    },
+                                )}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/components/sections/NewContentSection.tsx

@@ -23,16 +23,21 @@ export default function NewContentSection() {
     }, []);
 
     return (
-        <div className="space-y-2">
-            <ScrollSection title="Discover Movies" link={'/movies'}>
+        <div className="space-y-2" data-oid="oy_azwu">
+            <ScrollSection title="Discover Movies" link={'/browse/movies'} data-oid="ntbj5.r">
                 {movies.map((movie, index) => (
-                    <MovieCard key={index} title={movie.title} />
+                    <MovieCard key={index} title={movie.title} data-oid="k4q4huw" />
                 ))}
             </ScrollSection>
 
-            <ScrollSection title="Discover TV Shows" link={'/tvshows'}>
+            <ScrollSection title="Discover TV Shows" link={'/browse/tvshows'} data-oid="n5ayj1:">
                 {tvshows.map((tvshow, index) => (
-                    <TvShowCard key={index} title={tvshow.title} episodesCount={null} />
+                    <TvShowCard
+                        key={index}
+                        title={tvshow.title}
+                        episodesCount={null}
+                        data-oid="4kr.uwk"
+                    />
                 ))}
             </ScrollSection>
         </div>

frontend/components/sections/ScrollSection.tsx

@@ -34,13 +34,18 @@ export default function ScrollSection({ title, link, children }: ScrollSectionPr
     };
 
     return (
-        <section className="py-4 relative group">
-            <div className="container mx-auto px-6">
-                <div className="font-bold flex flex-row items-center mb-6 bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
-                    <Link href={link}>
-                        <h2 className="text-2xl">{title}</h2>
+        <section className="py-4 relative group" data-oid="7.vb_gm">
+            <div className="container mx-auto px-6" data-oid="gmpcoe7">
+                <div
+                    className="font-bold flex flex-row items-center mb-6 bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent"
+                    data-oid="ica-vju"
+                >
+                    <Link href={link} data-oid="nql64b9">
+                        <h2 className="text-2xl" data-oid="x9k79:o">
+                            {title}
+                        </h2>
                     </Link>
-                    <ChevronRightIcon className="size-6 text-pink-400" />
+                    <ChevronRightIcon className="size-6 text-pink-400" data-oid="dly-0en" />
                 </div>
 
                 {/* Scroll Arrows */}
@@ -48,8 +53,12 @@ export default function ScrollSection({ title, link, children }: ScrollSectionPr
                     <button
                         onClick={() => scroll('left')}
                         className="absolute left-0 top-1/2 z-10 transform -translate-y-1/6 bg-gradient-to-r from-transparent to-gray-900/50 hover:bg-gradient-to-r hover:from-transparent hover:to-purple-900 rounded-full p-1 ml-2 transition-all duration-500 ease-in-out"
+                        data-oid="wt2v-yr"
                     >
-                        <ChevronLeftIcon className="size-8 lg:size-10 text-gray-300/50 hover:text-purple-400/50 transition-colors" />
+                        <ChevronLeftIcon
+                            className="size-8 lg:size-10 text-gray-300/50 hover:text-purple-400/50 transition-colors"
+                            data-oid="_hewksv"
+                        />
                     </button>
                 )}
 
@@ -57,8 +66,12 @@ export default function ScrollSection({ title, link, children }: ScrollSectionPr
                     <button
                         onClick={() => scroll('right')}
                         className="absolute right-0 top-1/2 z-10 transform -translate-y-1/6 bg-gradient-to-r from-gray-600/50 to-transparent hover:bg-gradient-to-r hover:from-purple-900 hover:to-transparent rounded-full p-1 mr-2 transition-all duration-300 ease-in-out"
+                        data-oid="t1dk76c"
                     >
-                        <ChevronRightIcon className="size-8 lg:size-10 text-gray-300/50 hover:text-purple-400/50 transition-colors" />
+                        <ChevronRightIcon
+                            className="size-8 lg:size-10 text-gray-300/50 hover:text-purple-400/50 transition-colors"
+                            data-oid="uah3r3a"
+                        />
                     </button>
                 )}
 
@@ -73,6 +86,7 @@ export default function ScrollSection({ title, link, children }: ScrollSectionPr
                         WebkitMaskImage:
                             'linear-gradient(to right, transparent, black 2%, black 98%, transparent)',
                     }}
+                    data-oid="_f_ue5."
                 >
                     {children}
                 </div>

frontend/components/shared/GenresFilter.tsx

@@ -107,17 +107,20 @@ export default function GenresFilter({ mediaType, onFilterChange }: GenreCompPro
     };
 
     return (
-        <div>
-            <div className="flex flex-wrap gap-2">
+        <div data-oid="oqe_y_p">
+            <div className="flex flex-wrap gap-2" data-oid="ah3ubl1">
                 <button
                     className={`${
                         isSelected('All') ? 'bg-gray-500' : 'hover:bg-gray-700 bg-gray-800'
                     } p-1 rounded-xl transition-all duration-300 ease-in-out flex text-center items-center`}
                     disabled={spinnerLoading}
                     onClick={handleFilter}
+                    data-oid="yl4kaix"
                 >
-                    <FunnelIcon className="size-5" />
-                    <p className="text-sm">Filter</p>
+                    <FunnelIcon className="size-5" data-oid="7ybmtue" />
+                    <p className="text-sm" data-oid="6hjm88a">
+                        Filter
+                    </p>
                 </button>
                 {/* "All" Button */}
                 <button
@@ -128,6 +131,7 @@ export default function GenresFilter({ mediaType, onFilterChange }: GenreCompPro
                             ? 'bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 text-white'
                             : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
                     }`}
+                    data-oid="-pf6h7t"
                 >
                     All
                 </button>
@@ -142,59 +146,77 @@ export default function GenresFilter({ mediaType, onFilterChange }: GenreCompPro
                                     ? 'bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 text-white'
                                     : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
                             }`}
+                            data-oid="g1r:sb1"
                         >
                             {genre.name}{' '}
-                            <span className="text-xs text-gray-500">({genre.density})</span>
+                            <span className="text-xs text-gray-500" data-oid=":mkli2i">
+                                ({genre.density})
+                            </span>
                         </button>
                     ))}
                 {genreCategories?.length > 5 && (
                     <button
                         className="text-gray-500 hover:text-gray-400"
                         onClick={() => setShowAll(!showAll)}
+                        data-oid="vf6.5ov"
                     >
                         {showAll ? 'Show Less' : 'Show More'}
                     </button>
                 )}
             </div>
 
-            <div className="portrait:p-2 p-4">
+            <div className="portrait:p-2 p-4" data-oid="7gguey_">
                 {spinnerLoading ? (
                     <></>
                 ) : (
                     <>
-                        <div className="flex flex-wrap justify-center items-center portrait:gap-2 gap-10">
+                        <div
+                            className="flex flex-wrap justify-center items-center portrait:gap-2 gap-10"
+                            data-oid="doqrqyx"
+                        >
                             {genresItems.map((item, index) => (
                                 <div
                                     key={index}
                                     className="transform transition-transform duration-300 hover:scale-105 w-[fit-content]"
+                                    data-oid="4am7nqj"
                                 >
                                     {mediaType === 'movie' ? (
-                                        <MovieCard title={item.title} />
+                                        <MovieCard title={item.title} data-oid="lw6e-fx" />
                                     ) : (
-                                        <TvShowCard title={item.title} episodesCount={null} />
+                                        <TvShowCard
+                                            title={item.title}
+                                            episodesCount={null}
+                                            data-oid="m9p0gxh"
+                                        />
                                     )}
                                 </div>
                             ))}
                         </div>
                         {genresItems.length > 0 && (
-                            <div className="mt-12 flex flex-row items-center justify-center gap-2">
-                                <div className="flex items-center gap-2">
+                            <div
+                                className="mt-12 flex flex-row items-center justify-center gap-2"
+                                data-oid="lw2i8wp"
+                            >
+                                <div className="flex items-center gap-2" data-oid="dv1m-uj">
                                     <button
                                         onClick={() => handlePageChange(1)}
                                         disabled={currentPage <= 1 || spinnerLoading}
                                         className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 transition-colors"
+                                        data-oid="oaqw:zg"
                                     >
                                         <svg
                                             className="w-5 h-5"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24"
+                                            data-oid="pjpu2__"
                                         >
                                             <path
                                                 strokeLinecap="round"
                                                 strokeLinejoin="round"
                                                 strokeWidth={2}
                                                 d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                                                data-oid="7_.pz8i"
                                             />
                                         </svg>
                                     </button>
@@ -202,44 +224,53 @@ export default function GenresFilter({ mediaType, onFilterChange }: GenreCompPro
                                         onClick={() => handlePageChange(currentPage - 1)}
                                         disabled={currentPage <= 1 || spinnerLoading}
                                         className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 transition-colors"
+                                        data-oid="xmljhv2"
                                     >
                                         <svg
                                             className="w-5 h-5"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24"
+                                            data-oid=".01drod"
                                         >
                                             <path
                                                 strokeLinecap="round"
                                                 strokeLinejoin="round"
                                                 strokeWidth={2}
                                                 d="M15 19l-7-7 7-7"
+                                                data-oid="ecujajp"
                                             />
                                         </svg>
                                     </button>
                                 </div>
-                                <div className="flex items-center gap-2">
-                                    <span className="px-4 py-2 rounded-lg bg-gray-800 text-white font-medium">
+                                <div className="flex items-center gap-2" data-oid="jld8ntq">
+                                    <span
+                                        className="px-4 py-2 rounded-lg bg-gray-800 text-white font-medium"
+                                        data-oid="8sgehe:"
+                                    >
                                         Page {currentPage} of {totalPages}
                                     </span>
                                 </div>
-                                <div className="flex items-center gap-2">
+                                <div className="flex items-center gap-2" data-oid="kam4goe">
                                     <button
                                         onClick={() => handlePageChange(currentPage + 1)}
                                         disabled={currentPage >= totalPages || spinnerLoading}
                                         className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 transition-colors"
+                                        data-oid="avruout"
                                     >
                                         <svg
                                             className="w-5 h-5"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24"
+                                            data-oid="xyitw4w"
                                         >
                                             <path
                                                 strokeLinecap="round"
                                                 strokeLinejoin="round"
                                                 strokeWidth={2}
                                                 d="M9 5l7 7-7 7"
+                                                data-oid="bl:qtwo"
                                             />
                                         </svg>
                                     </button>
@@ -247,18 +278,21 @@ export default function GenresFilter({ mediaType, onFilterChange }: GenreCompPro
                                         onClick={() => handlePageChange(totalPages)}
                                         disabled={currentPage >= totalPages || spinnerLoading}
                                         className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 transition-colors"
+                                        data-oid=".5dwk0i"
                                     >
                                         <svg
                                             className="w-5 h-5"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24"
+                                            data-oid="_sg3:_a"
                                         >
                                             <path
                                                 strokeLinecap="round"
                                                 strokeLinejoin="round"
                                                 strokeWidth={2}
                                                 d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                                                data-oid="8vrmq5t"
                                             />
                                         </svg>
                                     </button>

frontend/components/shared/Trailers.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { ArrowLeftCircleIcon, ArrowRightCircleIcon } from '@heroicons/react/24/outline';
+
+interface Trailer {
+    id: number;
+    name: string;
+    url: string;
+    language: string;
+    runtime: number;
+}
+
+interface TrailersProps {
+    trailers?: Trailer[];
+}
+const TrailersComp: React.FC<TrailersProps> = ({ trailers }) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const regex = /(?:[?&]v=|\/embed\/|\/1\/|\/v\/|https:\/\/(?:www\.)?youtu\.be\/)([^&\n?#]+)/;
+    if (!trailers || trailers.length === 0) {
+        return <p>No trailers available.</p>;
+    }
+
+    const currentTrailer = trailers[currentIndex];
+    const match = currentTrailer.url.match(regex);
+    const videoId = match ? match[1] : null;
+    if (!videoId) return <p>Invalid trailer URL.</p>;
+
+    // Use URL parameters to remove many of YouTube’s UI elements.
+    const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&loop=1&mute=1&playlist=${videoId}&rel=0&modestbranding=1&iv_load_policy=3`;
+
+    const handlePrev = () => {
+        setCurrentIndex((prev) => (prev - 1 + trailers.length) % trailers.length);
+    };
+
+    const handleNext = () => {
+        setCurrentIndex((prev) => (prev + 1) % trailers.length);
+    };
+
+    return (
+        <div className="relative h-60 w-full rounded-md mb-4">
+            <iframe
+                className="h-full"
+                key={currentTrailer.id}
+                width="100%"
+                src={embedUrl}
+                allow="autoplay"
+                title={currentTrailer.name}
+            ></iframe>
+            {trailers.length > 1 && (
+                <>
+                    <button
+                        onClick={handlePrev}
+                        className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-900/70 hover:bg-gray-900/90 text-white rounded-full"
+                        data-oid="z151qsy"
+                    >
+                        <ArrowLeftCircleIcon
+                            className="size-10 text-violet-400"
+                            data-oid="fpnh2w9"
+                        />
+                    </button>
+                    <button
+                        onClick={handleNext}
+                        className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-900/70 hover:bg-gray-900/90 text-white rounded-full"
+                        data-oid="h.h66si"
+                    >
+                        <ArrowRightCircleIcon
+                            className="size-10 text-violet-400"
+                            data-oid="l56nlzc"
+                        />
+                    </button>
+                </>
+            )}
+        </div>
+    );
+};
+
+export default TrailersComp;

frontend/components/tvshow/TvShowCard.tsx

@@ -11,6 +11,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { StarIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
+import TrailersComp from '@/components/shared/Trailers';
 
 interface Artwork {
     id: number;
@@ -29,14 +30,23 @@ interface Artwork {
     tagOptions: any;
 }
 
-interface Card {
+interface Trailer {
+    id: number;
+    name: string;
+    url: string;
+    language: string;
+    runtime: number;
+  }
+  
+  interface Card {
     title: string;
     year: string;
     image: string;
     portrait: Artwork[];
     banner: Artwork[];
     overview: string;
-}
+    trailers: Trailer[]; // Now trailers is an array of Trailer objects
+  }
 
 interface TvShowCardProps {
     title: string;
@@ -63,6 +73,7 @@ const BannerImage: React.FC<{ src: string; alt: string }> = ({ src, alt }) => {
             className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ease-in-out ${
                 visible ? 'opacity-100' : 'opacity-0'
             }`}
+            data-oid="ia4kus."
         />
     );
 };
@@ -79,6 +90,8 @@ export const TvShowCard: React.FC<TvShowCardProps> = ({ title, episodesCount = n
     const cardRef = useRef<HTMLDivElement>(null);
     const slideshowTimer = useRef<NodeJS.Timeout | null>(null);
     const hoverTimer = useRef<NodeJS.Timeout | null>(null);
+    const touchTimer = useRef<NodeJS.Timeout | null>(null); // Timer for touch and hold detection
+
 
     // Fetch card data.
     useEffect(() => {
@@ -255,6 +268,7 @@ export const TvShowCard: React.FC<TvShowCardProps> = ({ title, episodesCount = n
     useEffect(() => {
         return () => {
             if (hoverTimer.current) clearTimeout(hoverTimer.current);
+            if (touchTimer.current) clearTimeout(touchTimer.current); // Clear touch timer on unmount
         };
     }, []);
 
@@ -268,94 +282,168 @@ export const TvShowCard: React.FC<TvShowCardProps> = ({ title, episodesCount = n
         }
     }, [showModal]);
 
+    // Handle touch start to initiate touch and hold detection
+    const handleTouchStart = () => {
+        touchTimer.current = setTimeout(() => {
+            setShowModal(true); // Show modal after holding for some time
+        }, 300); // 300ms delay for touch and hold
+    };
+
+    // Handle touch end or cancel to clear the timer if touch is short
+    const handleTouchEnd = () => {
+        if (touchTimer.current) {
+            clearTimeout(touchTimer.current); // Clear the timer if touch ends before 300ms
+            touchTimer.current = null;
+        }
+    };
+
+    const handleTouchCancel = () => {
+        if (touchTimer.current) {
+            clearTimeout(touchTimer.current); // Clear the timer if touch is cancelled
+            touchTimer.current = null;
+        }
+    };
+
+    // Prevent default context menu on right click and long press
+    const handleContextMenu = (e: React.MouseEvent) => {
+        e.preventDefault();
+    };
+
+
     // Render modal via portal when modalStyle is set.
     const modal =
         card && cardRef.current && modalStyle
             ? createPortal(
-                  <div
-                      style={modalStyle}
-                      className="bg-gray-800/60 backdrop-blur-md rounded-lg p-2.5 border border-gray-400/50 transition-all flex flex-col justify-between pt-0"
-                      // Keep modal open on hover (desktop).
-                      onMouseEnter={() => setIsHovering(true)}
-                      onMouseLeave={() => setIsHovering(false)}
-                  >
-                      {/* Close button for mobile */}
+                <div
+                    style={modalStyle}
+                    className="bg-gray-800/60 backdrop-blur-md rounded-lg p-2.5 border border-gray-400/50 transition-all flex flex-col justify-between pt-0"
+                    // Keep modal open on hover (desktop).
+                    onMouseEnter={() => setIsHovering(true)}
+                    onMouseLeave={() => setIsHovering(false)}
+                    data-oid="62_r6ny"
+                >
+                    {/* Close button for mobile */}
+                    <button
+                        onClick={() => setShowModal(false)}
+                        className="absolute top-0 right-0 text-white bg-gray-800 hover:bg-gradient-to-r hover:from-violet-500/80 hover:to-purple-400/80 px-3 py-2 rounded-md z-10 border border-gray-400/50"
+                        data-oid="2xa9juf"
+                    >
+                        <XMarkIcon className="size-6" data-oid=".o05-n6" />
+                    </button>
+                    {/* Episodes Count Bubble */}
+                    {episodesCount !== null && (
+                        <div
+                            className="absolute top-0 left-0 z-10 bg-gradient-to-r font-mono from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 text-white font-bold px-2 py-1 rounded-md rounded-b-none rounded-r-none shadow-lg"
+                            data-oid="8:a6w2r"
+                        >
+                            <p className="text-gray-700 text-sm" data-oid="h5_kec8">
+                                {episodesCount}
+                            </p>
+                            <p className="text-xs" data-oid="a-q6gbi">
+                                Ep{episodesCount > 1 ? 's' : ''}
+                            </p>
+                        </div>
+                    )}
+                    {/* Title and Year */}
+                    <div className="flex flex-col w-full" data-oid="ja4_4rt">
+                        <h3
+                            className="pl-8 h-11 lg:pb:2 pt-2 bg-gray-700/40 backdrop-blur-md text-md sm:text-lg md:text-xl font-semibold text-white text-clip line-clamp-1"
+                            data-oid="_m52qkf"
+                        >
+                            {card?.title || 'Loading...'}
+                        </h3>
+
+                        <div
+                            className="flex pb-2 items-center space-x-2 mt-1 text-sm sm:text-md"
+                            data-oid="gfad6kg"
+                        >
+                            <span
+                                className="text-yellow-400 flex gap-1 items-center"
+                                data-oid="zw-h.fz"
+                            >
+                                <StarIcon className="size-3" data-oid=":y4ilwk" /> 0
+                            </span>
+                            <span className="text-gray-300" data-oid="b-1izto">
+                                • {card?.year || '----'}
+                            </span>
+                            <span className="text-purple-300 text-sm" data-oid="r5f0nac">
+                                •
+                            </span>
+                            <span
+                                className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm"
+                                data-oid="7ht_3pu"
+                            >
+                                TV Series
+                            </span>
+                        </div>
+                    </div>
+                    {/* Conditionally render TrailersComp if trailers exist, otherwise show banner slideshow */}
+            {card?.trailers && card.trailers.length > 0 ? (
+              <TrailersComp trailers={card.trailers} />
+            ) : (
+              card.banner && (
+                <div
+                  className="relative w-full h-56 overflow-hidden rounded-md mb-4"
+                  data-oid="h__x1wg"
+                >
+                  <BannerImage
+                    key={bannerIndex}
+                    src={
+                      card.banner[bannerIndex]?.thumbnail ||
+                      `https://placehold.co/640x360?text=Preview+Not+Available`
+                    }
+                    alt="Banner Preview"
+                    data-oid="9kczgk8"
+                  />
+                  {card.banner.length > 1 && (
+                    <>
                       <button
-                          onClick={() => setShowModal(false)}
-                          className="absolute top-0 right-0 text-white bg-gray-800 hover:bg-gradient-to-r hover:from-violet-500/80 hover:to-purple-400/80 px-3 py-2 rounded-md z-10 border border-gray-400/50"
+                        onClick={handlePrev}
+                        className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-900/70 hover:bg-gray-900/90 text-white rounded-full"
+                        data-oid="z151qsy"
                       >
-                          <XMarkIcon className="size-6" />
+                        <ArrowLeftCircleIcon
+                          className="size-10 text-violet-400"
+                          data-oid="fpnh2w9"
+                        />
                       </button>
-                      {/* Episodes Count Bubble */}
-                      {episodesCount !== null && (
-                          <div className="absolute top-0 left-0 z-10 bg-gradient-to-r font-mono from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 text-white font-bold px-2 py-1 rounded-md rounded-b-none rounded-r-none shadow-lg">
-                              <p className="text-gray-700 text-sm">{episodesCount}</p>{' '}
-                              <p className="text-xs">Ep{episodesCount > 1 ? 's' : ''}</p>
-                          </div>
-                      )}
-                      {/* Title and Year */}
-                      <div className="flex flex-col w-full">
-                          <h3 className="pl-8 h-11 lg:pb:2 pt-2 bg-gray-700/40 backdrop-blur-md text-md sm:text-lg md:text-xl font-semibold text-white text-clip line-clamp-1">
-                              {card?.title || 'Loading...'}
-                          </h3>
-
-                          <div className="flex pb-2 items-center space-x-2 mt-1 text-sm sm:text-md">
-                              <span className="text-yellow-400 flex gap-1 items-center">
-                                  <StarIcon className="size-3" /> 0
-                              </span>
-                              <span className="text-gray-300">• {card?.year || '----'}</span>
-                              <span className="text-purple-300 text-sm">•</span>
-                              <span className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm">
-                                  TV Series
-                              </span>
-                          </div>
-                      </div>
-                      {/* Banner slideshow preview with crossfade effect and controls */}
-                      {card.banner && (
-                          <div className="relative w-full h-56 overflow-hidden rounded-md mb-4">
-                              <BannerImage
-                                  key={bannerIndex}
-                                  src={
-                                      card.banner[bannerIndex]?.thumbnail ||
-                                      `https://placehold.co/640x360?text=Preview+Not+Available`
-                                  }
-                                  alt="Banner Preview"
-                              />
-
-                              {/* Slideshow controls */}
-                              {card.banner.length > 1 && (
-                                  <>
-                                      <button
-                                          onClick={handlePrev}
-                                          className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-900/70 hover:bg-gray-900/90 text-white rounded-full"
-                                      >
-                                          <ArrowLeftCircleIcon className="size-10 text-violet-400" />
-                                      </button>
-                                      <button
-                                          onClick={handleNext}
-                                          className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-900/70 hover:bg-gray-900/90 text-white rounded-full"
-                                      >
-                                          <ArrowRightCircleIcon className="size-10 text-violet-400" />
-                                      </button>
-                                  </>
-                              )}
-                          </div>
-                      )}
-                      {/* Overview text */}
-                      <div className="text-gray-300 text-base sm:text-lg overflow-hidden line-clamp-4 transition-all duration-300 mb-4">
-                          {card.overview}
-                      </div>
-                      {/* View Details Button */}
-                      <div className="flex flex-row">
-                          <Link href={`/tvshow/${title}`}>
-                              <button className="text-white bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-2 rounded-3xl flex items-center text-sm md:text-base transition-all duration-750 ease-in-out gap-0.5">
-                                  View Details <ChevronRightIcon className="size-4" />
-                              </button>
-                          </Link>
-                      </div>
-                  </div>,
-                  document.body,
+                      <button
+                        onClick={handleNext}
+                        className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-900/70 hover:bg-gray-900/90 text-white rounded-full"
+                        data-oid="h.h66si"
+                      >
+                        <ArrowRightCircleIcon
+                          className="size-10 text-violet-400"
+                          data-oid="l56nlzc"
+                        />
+                      </button>
+                    </>
+                  )}
+                </div>
               )
+            )}
+                    {/* Overview text */}
+                    <div
+                        className="text-gray-300 text-base sm:text-lg overflow-hidden line-clamp-4 transition-all duration-300 mb-4"
+                        data-oid="k_8v6dq"
+                    >
+                        {card.overview}
+                    </div>
+                    {/* View Details Button */}
+                    <div className="flex flex-row" data-oid="pgts_xn">
+                        <Link href={`/tvshow/${title}`} data-oid="bg-:bsv">
+                            <button
+                                className="text-white bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-2 rounded-3xl flex items-center text-sm md:text-base transition-all duration-750 ease-in-out gap-0.5"
+                                data-oid="sl6wajo"
+                            >
+                                View Details
+                                <ChevronRightIcon className="size-4" data-oid="cnht:jj" />
+                            </button>
+                        </Link>
+                    </div>
+                </div>,
+                document.body,
+            )
             : null;
 
     return (
@@ -366,21 +454,37 @@ export const TvShowCard: React.FC<TvShowCardProps> = ({ title, episodesCount = n
                 onMouseEnter={handleCardMouseEnter}
                 onMouseLeave={handleCardMouseLeave}
                 onClick={handleCardClick}
+                data-oid="ud-dhj."
+                onContextMenu={handleContextMenu} // Prevent default context menu
+                onTouchStart={handleTouchStart}     // Detect touch start
+                onTouchEnd={handleTouchEnd}         // Detect touch end
+                onTouchCancel={handleTouchCancel}    // Detect touch cancel
             >
                 <div
-                    className="rounded-lg border border-gray-400/50 overflow-hidden relative transition-transform duration-300 w-[140px] sm:w-[150px] md:w-[180px] lg:w-[180px] xl:w-[200px] 
-                                                                                                                                  h-[210px] sm:h-[220px] md:h-[250px] lg:h-[280px] xl:h-[300px]"
+                    className="rounded-lg border border-gray-400/50 overflow-hidden relative transition-transform duration-300 w-[140px] sm:w-[150px] md:w-[180px] lg:w-[180px] xl:w-[200px]
+                                                     h-[210px] sm:h-[220px] md:h-[250px] lg:h-[280px] xl:h-[300px]"
+                    data-oid="ukn:8pp"
                 >
                     {/* Episodes Count Bubble */}
                     {episodesCount !== null && (
-                        <div className="absolute top-0 right-0 z-10 bg-gradient-to-r font-mono from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 text-white font-bold px-2 py-1 rounded-md shadow-lg">
-                            <p className="text-gray-700 text-sm">{episodesCount}</p>{' '}
-                            <p className="text-xs">Ep{episodesCount > 1 ? 's' : ''}</p>
+                        <div
+                            className="absolute top-0 right-0 z-10 bg-gradient-to-r font-mono from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 text-white font-bold px-2 py-1 rounded-md shadow-lg"
+                            data-oid="f3o:paw"
+                        >
+                            <p className="text-gray-700 text-sm" data-oid="xg012zc">
+                                {episodesCount}
+                            </p>
+                            <p className="text-xs" data-oid="zfm-c-2">
+                                Ep{episodesCount > 1 ? 's' : ''}
+                            </p>
                         </div>
                     )}
                     {/* Skeleton Loader */}
                     {!imageLoaded && (
-                        <div className="absolute inset-0 bg-gray-700 animate-pulse rounded-lg" />
+                        <div
+                            className="absolute inset-0 bg-gray-700 animate-pulse rounded-lg"
+                            data-oid="8n4dvf0"
+                        />
                     )}
                     {/* Card Image (fixed once randomly selected) */}
                     {cardImage && (
@@ -391,19 +495,34 @@ export const TvShowCard: React.FC<TvShowCardProps> = ({ title, episodesCount = n
                                 imageLoaded ? 'opacity-100' : 'opacity-0'
                             }`}
                             onLoad={() => setImageLoaded(true)}
+                            data-oid="5v6i7xs"
                         />
                     )}
                     {/* Overlay */}
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent">
-                        <div className="absolute bottom-0 p-4 w-full">
-                            <h3 className="text-sm sm:text-base md:text-lg font-semibold text-white">
+                    <div
+                        className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"
+                        data-oid="o8k0fd0"
+                    >
+                        <div className="absolute bottom-0 p-4 w-full" data-oid="tuk:gjp">
+                            <h3
+                                className="text-sm sm:text-base md:text-lg font-semibold text-white"
+                                data-oid="ang88pi"
+                            >
                                 {card?.title || 'Loading...'}
                             </h3>
-                            <div className="flex items-center space-x-2 mt-1 text-xs sm:text-sm">
-                                <span className="text-yellow-400 flex gap-1 items-center">
-                                    <StarIcon className="size-3" /> 0
+                            <div
+                                className="flex items-center space-x-2 mt-1 text-xs sm:text-sm"
+                                data-oid="xc7:386"
+                            >
+                                <span
+                                    className="text-yellow-400 flex gap-1 items-center"
+                                    data-oid="vbg52ma"
+                                >
+                                    <StarIcon className="size-3" data-oid="_b_pzrl" /> 0
+                                </span>
+                                <span className="text-gray-300" data-oid="c8.qvjj">
+                                    • {card?.year || '----'}
                                 </span>
-                                <span className="text-gray-300">• {card?.year || '----'}</span>
                             </div>
                         </div>
                     </div>
@@ -412,4 +531,4 @@ export const TvShowCard: React.FC<TvShowCardProps> = ({ title, episodesCount = n
             {modal}
         </>
     );
-};
+};

frontend/components/tvshow/TvshowPlayer.tsx

@@ -0,0 +1,695 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useSpinnerLoading } from '@/components/loading/Spinner';
+import {
+    PlayIcon,
+    PauseIcon,
+    SpeakerWaveIcon,
+    SpeakerXMarkIcon,
+    ArrowsPointingOutIcon,
+    ArrowsPointingInIcon,
+    RectangleStackIcon,
+} from '@heroicons/react/24/solid';
+import { XCircleIcon } from '@heroicons/react/24/outline';
+import { getEpisodeLinkByTitle } from '@/lib/lb';
+import Hls from 'hls.js'; // Import HLS.js
+
+interface ContentRating {
+    country: string;
+    name: string;
+    description: string;
+}
+
+interface TvShowPlayerProps {
+    videoTitle: string;
+    season: string;
+    episode: string;
+    contentRatings?: ContentRating[];
+    onClosePlayer?: () => void;
+}
+
+interface ProgressData {
+    status: string;
+    progress: number;
+    downloaded: number;
+    total: number;
+}
+
+const TvShowPlayer: React.FC<TvShowPlayerProps> = ({
+    videoTitle,
+    season,
+    episode,
+    contentRatings = [],
+    onClosePlayer,
+}) => {
+    // Extract season and episode info using regex
+    const episodeRegex = /.*S(\d+)E(\d+).*?-\s*(.*?)(?=\..*|$)/i;
+    const episodeMatch = episode.match(episodeRegex);
+    const seasonNumber = episodeMatch ? episodeMatch[1] : season;
+    const episodeNumber = episodeMatch ? episodeMatch[2] : '';
+    const episodeTitleClean = episodeMatch
+        ? decodeURIComponent(episodeMatch[3])
+        : decodeURIComponent(episode);
+
+    // Spinner
+    const { spinnerLoading, setSpinnerLoading } = useSpinnerLoading();
+
+    // Refs
+    const containerRef = useRef<HTMLDivElement>(null);
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const inactivityRef = useRef<NodeJS.Timeout | null>(null);
+    const progressBarRef = useRef<HTMLDivElement>(null); // Ref for progress bar container
+    const hlsRef = useRef<Hls | null>(null); // Ref to HLS.js instance
+
+    // Video URL & blob state
+    const [videoUrl, setVideoUrl] = useState<string | null>(null);
+    const [videoBlobUrl, setVideoBlobUrl] = useState<string>('');
+    const [isVideoTs, setIsVideoTs] = useState<boolean>(false); // State to track if video is .ts
+
+    // Player UI states
+    const [showControls, setShowControls] = useState(true);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isSeeking, setIsSeeking] = useState(false);
+    const [duration, setDuration] = useState(0);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const isMuted = volume === 0;
+    const [buffered, setBuffered] = useState(0);
+
+    // Progress bar hover preview state
+    const [hoverTime, setHoverTime] = useState<number | null>(null);
+    const [hoverPos, setHoverPos] = useState<number | null>(null);
+
+    // Link fetching states
+    const [progress, setProgress] = useState<ProgressData | null>(null);
+    const [pollingInterval, setPollingInterval] = useState<NodeJS.Timeout | null>(null);
+    const [videoFetched, setVideoFetched] = useState(false);
+    const videoFetchedRef = useRef(videoFetched);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Keep ref in sync
+    useEffect(() => {
+        videoFetchedRef.current = videoFetched;
+    }, [videoFetched]);
+
+    // --- Link Fetching & Polling ---
+    const fetchMovieLink = async () => {
+        if (videoFetchedRef.current) return;
+        try {
+            const response = await getEpisodeLinkByTitle(videoTitle, season, episode);
+            if (response.url) {
+                if (pollingInterval) {
+                    clearInterval(pollingInterval);
+                    setPollingInterval(null);
+                }
+                setVideoUrl(response.url);
+                setVideoFetched(true);
+                console.log('Video URL fetched:', response.url);
+            } else if (response.progress_url) {
+                startPolling(response.progress_url);
+            }
+        } catch (error) {
+            console.error('Error fetching movie link:', error);
+        }
+    };
+
+    const pollProgress = async (progressUrl: string) => {
+        try {
+            const res = await fetch(progressUrl);
+            const data: { progress: ProgressData } = await res.json();
+            setProgress(data.progress);
+            if (data.progress.progress >= 100) {
+                if (pollingInterval) {
+                    clearInterval(pollingInterval);
+                    setPollingInterval(null);
+                }
+                if (!videoFetchedRef.current) {
+                    timeoutRef.current = setTimeout(fetchMovieLink, 5000);
+                }
+            }
+        } catch (error) {
+            console.error('Error polling progress:', error);
+        }
+    };
+
+    const startPolling = (progressUrl: string) => {
+        if (!pollingInterval) {
+            const interval = setInterval(() => pollProgress(progressUrl), 2000);
+            setPollingInterval(interval);
+        }
+    };
+
+    useEffect(() => {
+        fetchMovieLink();
+        return () => {
+            if (pollingInterval) clearInterval(pollingInterval);
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+            if (hlsRef.current) {
+                // Destroy HLS instance on unmount
+                hlsRef.current.destroy();
+                hlsRef.current = null;
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [videoTitle]);
+
+    // --- Player Control Helpers ---
+    const resetInactivityTimer = () => {
+        setShowControls(true);
+        if (inactivityRef.current) clearTimeout(inactivityRef.current);
+        inactivityRef.current = setTimeout(() => setShowControls(false), 5000);
+    };
+
+    const updateBuffered = () => {
+        if (videoRef.current) {
+            const bufferedTime =
+                videoRef.current.buffered.length > 0
+                    ? videoRef.current.buffered.end(videoRef.current.buffered.length - 1)
+                    : 0;
+            setBuffered(bufferedTime);
+        }
+    };
+
+    useEffect(() => {
+        const interval = setInterval(updateBuffered, 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+    // --- Fullscreen Listener ---
+    useEffect(() => {
+        const handleFullScreenChange = () => {
+            setIsFullscreen(document.fullscreenElement === containerRef.current);
+        };
+        document.addEventListener('fullscreenchange', handleFullScreenChange);
+        return () => document.removeEventListener('fullscreenchange', handleFullScreenChange);
+    }, []);
+
+    // --- Video Source Handling (Blob or HLS) ---
+    useEffect(() => {
+        if (videoUrl) {
+            const isTsVideo = videoUrl.toLowerCase().endsWith('.ts');
+            setIsVideoTs(isTsVideo);
+
+            if (isTsVideo) {
+                // HLS.js setup for .ts videos
+                if (Hls.isSupported()) {
+                    setSpinnerLoading(true);
+                    const hls = new Hls();
+                    hlsRef.current = hls; // Store HLS instance in ref
+                    hls.on(Hls.Events.ERROR, (event, data) => {
+                        console.error('HLS.js error:', event, data);
+                        setSpinnerLoading(false);
+                        // Optionally handle error, e.g., fallback to direct URL or display error message
+                    });
+                    hls.loadSource(videoUrl);
+                    hls.attachMedia(videoRef.current as HTMLVideoElement); // Attach to video element
+                    if (videoRef.current) {
+                        videoRef.current.play();
+                    }
+                } else if (videoRef.current?.canPlayType('application/vnd.apple.mpegurl')) {
+                    // For Safari, which might have native HLS support
+                    videoRef.current.src = videoUrl;
+                    setSpinnerLoading(false); // If Safari plays it natively, consider it loaded
+                } else {
+                    console.error(
+                        'HLS is not supported and not a Safari browser, cannot play .ts video.',
+                    );
+                    setSpinnerLoading(false);
+                    // Optionally display an error message to the user about .ts not being supported
+                }
+                setVideoBlobUrl(''); // Clear blob URL as it's not used for .ts
+            } else {
+                // Fallback to Blob URL for other video types (like webm, mp4)
+                setSpinnerLoading(true);
+                if (hlsRef.current) {
+                    // Destroy HLS instance if switching to blob
+                    hlsRef.current.destroy();
+                    hlsRef.current = null;
+                }
+                const abortController = new AbortController();
+                const fetchBlob = async () => {
+                    try {
+                        const response = await fetch(videoUrl, {
+                            signal: abortController.signal,
+                            mode: 'cors',
+                        });
+                        if (!response.ok) {
+                            throw new Error(`HTTP error! status: ${response.status}`);
+                        }
+                        const blob = await response.blob();
+                        const blobUrl = URL.createObjectURL(blob);
+                        setVideoBlobUrl(blobUrl);
+                        console.log('Blob URL created:', blobUrl);
+                        setSpinnerLoading(false);
+                        if (videoRef.current && isPlaying) {
+                            // Autoplay if was playing before URL change
+                            videoRef.current.play();
+                        }
+                    } catch (error: any) {
+                        if (error.name === 'AbortError') {
+                            console.log('Blob fetch aborted.');
+                        } else {
+                            console.error('Error fetching video blob:', error);
+                            console.error('Falling back to direct video URL.');
+                            setVideoBlobUrl('');
+                            setSpinnerLoading(false);
+                        }
+                    }
+                };
+                fetchBlob();
+                return () => {
+                    abortController.abort();
+                    if (videoBlobUrl) {
+                        URL.revokeObjectURL(videoBlobUrl);
+                        console.log('Blob URL revoked:', videoBlobUrl);
+                    }
+                    setVideoBlobUrl('');
+                };
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [videoUrl]);
+
+    // --- Reset Player on New URL ---
+    useEffect(() => {
+        setIsPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+        setVolume(1);
+        setIsFullscreen(false);
+        resetInactivityTimer();
+        console.log(
+            'Video player loaded using',
+            isVideoTs ? 'HLS.js' : videoBlobUrl ? 'blob' : 'direct URL',
+            videoUrl,
+        );
+        return () => {
+            if (inactivityRef.current) clearTimeout(inactivityRef.current);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [videoUrl, isVideoTs]);
+
+    // --- Video Event Handlers ---
+    const handleLoadedMetadata = () => {
+        if (videoRef.current) {
+            setDuration(videoRef.current.duration);
+        }
+    };
+
+    const handleTimeUpdate = () => {
+        if (videoRef.current && !isSeeking) {
+            setCurrentTime(videoRef.current.currentTime);
+            updateBuffered();
+        }
+    };
+
+    const handleProgress = () => {
+        updateBuffered();
+    };
+
+    // Show content rating overlay briefly when playing
+    const [showRatingOverlay, setShowRatingOverlay] = useState(false);
+    const triggerRatingOverlay = () => {
+        if (contentRatings.length > 0) {
+            setShowRatingOverlay(true);
+            setTimeout(() => setShowRatingOverlay(false), 5000);
+        }
+    };
+
+    const handlePlay = () => {
+        setIsPlaying(true);
+        setSpinnerLoading(false);
+        triggerRatingOverlay();
+    };
+
+    const handlePause = () => {
+        setIsPlaying(false);
+    };
+
+    const togglePlay = () => {
+        if (!videoRef.current) return;
+        videoRef.current.paused ? videoRef.current.play() : videoRef.current.pause();
+    };
+
+    const handleSeekStart = () => setIsSeeking(true);
+    const handleSeekEnd = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newTime = Number(e.target.value);
+        if (videoRef.current) videoRef.current.currentTime = newTime;
+        setCurrentTime(newTime);
+        setIsSeeking(false);
+    };
+
+    const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newVolume = Number(e.target.value);
+        setVolume(newVolume);
+        if (videoRef.current) videoRef.current.volume = newVolume;
+    };
+
+    const toggleMute = () => {
+        if (!videoRef.current) return;
+        if (volume > 0) {
+            setVolume(0);
+            videoRef.current.volume = 0;
+        } else {
+            setVolume(1);
+            videoRef.current.volume = 1;
+        }
+    };
+
+    const toggleFullscreen = async () => {
+        if (!containerRef.current) return;
+        if (!isFullscreen) {
+            await containerRef.current.requestFullscreen?.();
+            setIsFullscreen(true);
+        } else {
+            await document.exitFullscreen?.();
+            setIsFullscreen(false);
+        }
+    };
+
+    const toggleEpisodesContainer = () => {
+        console.log('Episodes container toggled');
+    };
+
+    const handleClose = () => {
+        onClosePlayer && onClosePlayer();
+    };
+
+    const formatTime = (time: number): string => {
+        const hours = Math.floor(time / 3600);
+        const minutes = Math.floor((time % 3600) / 60);
+        const seconds = Math.floor(time % 60);
+        const minutesStr = minutes.toString().padStart(2, '0');
+        const secondsStr = seconds.toString().padStart(2, '0');
+        return hours > 0 ? `${hours}:${minutesStr}:${secondsStr}` : `${minutesStr}:${secondsStr}`;
+    };
+
+    const playedPercent = duration ? (currentTime / duration) * 100 : 0;
+    const bufferedPercent = duration ? (buffered / duration) * 100 : 0;
+
+    // --- Progress Bar Hover Handlers ---
+    const handleProgressBarHover = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!videoRef.current || !progressBarRef.current) return;
+        const rect = progressBarRef.current.getBoundingClientRect();
+        const hoverX = e.clientX - rect.left;
+        const hoverPercentage = hoverX / rect.width;
+        const hoverTimeCalc = duration * hoverPercentage;
+
+        setHoverTime(hoverTimeCalc);
+        setHoverPos(hoverX);
+    };
+
+    const handleProgressBarLeave = () => {
+        setHoverTime(null);
+        setHoverPos(null);
+    };
+
+    return (
+        <div
+            className="z-30 absolute flex w-full h-full"
+            ref={containerRef}
+            onMouseMove={resetInactivityTimer}
+            data-oid="isgsztg"
+        >
+            {videoUrl ? (
+                <>
+                    <video
+                        ref={videoRef}
+                        crossOrigin="anonymous"
+                        className="w-full h-auto bg-black object-contain"
+                        style={{ pointerEvents: 'none' }}
+                        onLoadedMetadata={handleLoadedMetadata}
+                        onTimeUpdate={handleTimeUpdate}
+                        onProgress={handleProgress}
+                        onPlay={handlePlay}
+                        onPause={handlePause}
+                        onWaiting={() => setSpinnerLoading(true)}
+                        onCanPlay={() => setSpinnerLoading(false)}
+                        onPlaying={() => setSpinnerLoading(false)}
+                        autoPlay
+                        data-oid="bokrys8"
+                    >
+                        {!isVideoTs && (
+                            <source
+                                type="video/webm"
+                                src={videoBlobUrl || videoUrl}
+                                data-oid="ctulub7"
+                            />
+                        )}
+                    </video>
+
+                    {showRatingOverlay && contentRatings.length > 0 && (
+                        <div
+                            className="absolute z-50 pointer-events-none"
+                            style={{ top: '80px', left: '20px' }}
+                            data-oid="-j89csn"
+                        >
+                            <div
+                                className="px-6 py-3 bg-black bg-opacity-70 rounded-lg border border-white text-white text-3xl font-bold animate-fade-out"
+                                data-oid="-b7thm6"
+                            >
+                                {contentRatings[0].country ? `[${contentRatings[0].country}] ` : ''}
+                                {contentRatings[0].name}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Controls Overlay */}
+                    <div
+                        className={`absolute inset-0 flex flex-col justify-between transition-opacity duration-300 z-40 ${
+                            showControls
+                                ? 'opacity-100 pointer-events-auto'
+                                : 'opacity-0 pointer-events-none'
+                        }`}
+                        data-oid="k_kclok"
+                    >
+                        <div
+                            className="flex items-center justify-between p-6 bg-gradient-to-b from-black/90 to-transparent"
+                            data-oid="ckd923j"
+                        >
+                            <div className="flex flex-col" data-oid="tkshse.">
+                                <h1
+                                    className="text-white text-3xl font-extrabold"
+                                    data-oid="jrgzk6d"
+                                >
+                                    {videoTitle || 'Video Player'}
+                                </h1>
+                                {episodeMatch && (
+                                    <p className="text-white text-xl mt-2" data-oid="3.ijpjz">
+                                        Season {seasonNumber} - Episode {episodeNumber}:{' '}
+                                        {episodeTitleClean.replace(/_/g, ' ')}
+                                    </p>
+                                )}
+                                {contentRatings.length > 0 && (
+                                    <div
+                                        className="mt-2 inline-block bg-gray-700 text-white text-sm px-3 py-1 rounded-md"
+                                        data-oid="rreuy6-"
+                                    >
+                                        {contentRatings[0].country
+                                            ? `[${contentRatings[0].country}] `
+                                            : ''}
+                                        {contentRatings[0].name}
+                                    </div>
+                                )}
+                            </div>
+                            {onClosePlayer && (
+                                <button
+                                    onClick={handleClose}
+                                    className="text-white hover:text-red-400 transition-colors"
+                                    data-oid="ii761xf"
+                                >
+                                    <XCircleIcon className="w-10 h-10" data-oid="lk9v0b7" />
+                                </button>
+                            )}
+                        </div>
+                        <div
+                            className="flex flex-col p-6 bg-gradient-to-t from-black/90 to-transparent"
+                            data-oid="u5xh7y8"
+                        >
+                            <div
+                                className="flex items-center justify-between mb-4"
+                                data-oid="f5_1cr-"
+                            >
+                                <span className="text-white text-sm" data-oid="bt011xf">
+                                    {formatTime(currentTime)}
+                                </span>
+                                {/* Custom Progress Bar */}
+                                <div
+                                    className="relative w-full mx-4"
+                                    ref={progressBarRef}
+                                    onMouseMove={handleProgressBarHover}
+                                    onMouseLeave={handleProgressBarLeave}
+                                    data-oid="428m9qx"
+                                >
+                                    <div className="h-2 rounded bg-gray-700" data-oid="rrwocs4">
+                                        <div
+                                            className="h-2 rounded bg-purple-300"
+                                            style={{
+                                                width: `${bufferedPercent}%`,
+                                                pointerEvents: 'none',
+                                            }} // Make buffer click-through
+                                            data-oid="dtm4j3_"
+                                        ></div>
+                                        <div
+                                            className="h-2 rounded bg-purple-700 absolute top-0 left-0"
+                                            style={{ width: `${playedPercent}%` }}
+                                            data-oid="f3n26dy"
+                                        ></div>
+                                    </div>
+                                    <input
+                                        type="range"
+                                        min="0"
+                                        max={duration}
+                                        value={
+                                            isSeeking
+                                                ? currentTime
+                                                : videoRef.current?.currentTime || 0
+                                        }
+                                        onMouseDown={handleSeekStart}
+                                        onTouchStart={handleSeekStart}
+                                        onChange={handleSeekEnd}
+                                        className="absolute top-0 left-0 w-full h-2 opacity-0 cursor-pointer"
+                                        data-oid="bz9_3k9"
+                                    />
+
+                                    {/* Hover time tooltip */}
+                                    {hoverTime !== null && hoverPos !== null && (
+                                        <div
+                                            className="absolute top-[-30px] bg-black bg-opacity-70 text-white text-sm px-2 py-1 rounded pointer-events-none"
+                                            style={{
+                                                left: `${hoverPos}px`,
+                                                transform: 'translateX(-50%)',
+                                            }}
+                                            data-oid="sasbntz"
+                                        >
+                                            {formatTime(hoverTime)}
+                                        </div>
+                                    )}
+                                </div>
+                                <span className="text-white text-sm" data-oid="jjjke09">
+                                    {formatTime(duration)}
+                                </span>
+                            </div>
+                            <div className="flex items-center justify-between" data-oid="ylwy8qb">
+                                <div className="flex items-center space-x-6" data-oid="g_0ggfc">
+                                    <button
+                                        onClick={togglePlay}
+                                        className="text-white hover:text-purple-300 transition-colors"
+                                        data-oid="g0_b6ag"
+                                    >
+                                        {isPlaying ? (
+                                            <PauseIcon className="w-10 h-10" data-oid="l7auwq_" />
+                                        ) : (
+                                            <PlayIcon className="w-10 h-10" data-oid="kk-oa9c" />
+                                        )}
+                                    </button>
+                                    <button
+                                        onClick={toggleMute}
+                                        className="text-white hover:text-purple-300 transition-colors"
+                                        data-oid="vvs_inp"
+                                    >
+                                        {isMuted ? (
+                                            <SpeakerXMarkIcon
+                                                className="w-10 h-10"
+                                                data-oid="1k5xnuh"
+                                            />
+                                        ) : (
+                                            <SpeakerWaveIcon
+                                                className="w-10 h-10"
+                                                data-oid="9kxfosj"
+                                            />
+                                        )}
+                                    </button>
+                                    <input
+                                        type="range"
+                                        min={0}
+                                        max={1}
+                                        step={0.01}
+                                        value={volume}
+                                        onChange={handleVolumeChange}
+                                        className="w-24 accent-purple-500"
+                                        data-oid="uw3g5nx"
+                                    />
+                                </div>
+                                <div className="flex items-center space-x-6" data-oid="_5k4fj3">
+                                    <button
+                                        onClick={toggleEpisodesContainer}
+                                        className="text-white hover:text-purple-300 transition-colors"
+                                        data-oid="6_53ef2"
+                                    >
+                                        <RectangleStackIcon
+                                            className="w-10 h-10"
+                                            data-oid="ad_9rnr"
+                                        />
+                                    </button>
+                                    <button
+                                        onClick={toggleFullscreen}
+                                        className="text-white hover:text-purple-300 transition-colors"
+                                        data-oid="eapqw1:"
+                                    >
+                                        {!isFullscreen ? (
+                                            <ArrowsPointingOutIcon
+                                                className="w-10 h-10"
+                                                data-oid="5wyw-0_"
+                                            />
+                                        ) : (
+                                            <ArrowsPointingInIcon
+                                                className="w-10 h-10"
+                                                data-oid="2gu-1__"
+                                            />
+                                        )}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </>
+            ) : (
+                <div
+                    className="p-6 bg-gray-800 text-gray-200 rounded-lg shadow-md"
+                    data-oid="1th-4qq"
+                >
+                    <h2 className="text-xl font-semibold mb-4" data-oid="2kcidjw">
+                        Fetching Video Link
+                    </h2>
+                    {progress ? (
+                        <div className="space-y-2" data-oid="200h7pi">
+                            <p className="text-sm" data-oid="bco2m0u">
+                                Status: {progress.status}
+                            </p>
+                            <p className="text-sm" data-oid="21i-5iy">
+                                Progress: {progress.progress.toFixed(2)}%
+                            </p>
+                            <p className="text-sm" data-oid="pks0l83">
+                                Downloaded: {progress.downloaded} / {progress.total}
+                            </p>
+                        </div>
+                    ) : (
+                        <p className="text-sm" data-oid="eug0g3t">
+                            Initializing link fetching...
+                        </p>
+                    )}
+                </div>
+            )}
+
+            <style jsx data-oid=".a1gcx0">{`
+                @keyframes fade-out {
+                    0% {
+                        opacity: 1;
+                    }
+                    80% {
+                        opacity: 1;
+                    }
+                    100% {
+                        opacity: 0;
+                    }
+                }
+                .animate-fade-out {
+                    animation: fade-out 4s forwards;
+                }
+            `}</style>
+        </div>
+    );
+};
+
+export default TvShowPlayer;

frontend/lib/LoadbalancerAPI.js

@@ -65,6 +65,10 @@ class LoadBalancerAPI {
     return await this._get(`/api/get/series/card/${encodeURIComponent(title)}`);
   }
 
+  async getSeasonMetadataByTitleAndSeason(title, season) {
+    return await this._get(`/api/get/series/metadata/${encodeURIComponent(title)}/${encodeURIComponent(season)}`);
+  }
+
   async getSeasonMetadataBySeriesId(series_id, season) {
     return await this._get(`/api/get/series/metadata/${series_id}/${season}`);
   }

frontend/lib/config.ts

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

frontend/lib/lb.js

@@ -104,6 +104,11 @@ export async function getMovieLinkByTitle(title){
   return response
 }
 
+export async function getEpisodeLinkByTitle(title, season, episode){
+  const response = await lb.getSeriesEpisode(title, season, episode);
+  console.debug(response);
+  return response
+}
 
 export async function getMovieCard(title){
     const movie = await lb.getMovieCard(title);
@@ -129,6 +134,12 @@ export async function getTvShowMetadata(title){
   return tvshow
 }
 
+export async function getSeasonMetadata(title,season){
+  const data = await lb.getSeasonMetadataByTitleAndSeason(title, season);
+  console.debug(data);
+  return data
+}
+
 export async function getGenreCategories(mediaType){
   const gc = await lb.getGenreCategories(mediaType);
   console.debug(gc);

frontend/package.json

@@ -16,6 +16,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "framer-motion": "^12.4.2",
+        "hls.js": "^1.5.20",
         "lucide-react": "^0.438.0",
         "next": "14.2.23",
         "next-nprogress-bar": "^2.4.4",
@@ -34,5 +35,6 @@
         "prettier": "^3.3.3",
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
-    }
+    },
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

frontend/yarn.lock

@@ -165,6 +165,46 @@
   dependencies:
     fast-glob "3.3.1"
 
+"@next/swc-darwin-arm64@14.2.23":
+  version "14.2.23"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.23.tgz#6d83f03e35e163e8bbeaf5aeaa6bf55eed23d7a1"
+  integrity sha512-WhtEntt6NcbABA8ypEoFd3uzq5iAnrl9AnZt9dXdO+PZLACE32z3a3qA5OoV20JrbJfSJ6Sd6EqGZTrlRnGxQQ==
+
+"@next/swc-darwin-x64@14.2.23":
+  version "14.2.23"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.23.tgz#e02abc35d5e36ce1550f674f8676999f293ba54f"
+  integrity sha512-vwLw0HN2gVclT/ikO6EcE+LcIN+0mddJ53yG4eZd0rXkuEr/RnOaMH8wg/sYl5iz5AYYRo/l6XX7FIo6kwbw1Q==
+
+"@next/swc-linux-arm64-gnu@14.2.23":
+  version "14.2.23"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.23.tgz#f13516ad2d665950951b59e7c239574bb8504d63"
+  integrity sha512-uuAYwD3At2fu5CH1wD7FpP87mnjAv4+DNvLaR9kiIi8DLStWSW304kF09p1EQfhcbUI1Py2vZlBO2VaVqMRtpg==
+
+"@next/swc-linux-arm64-musl@14.2.23":
+  version "14.2.23"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.23.tgz#10d05a1c161dc8426d54ccf6d9bbed6953a3252a"
+  integrity sha512-Mm5KHd7nGgeJ4EETvVgFuqKOyDh+UMXHXxye6wRRFDr4FdVRI6YTxajoV2aHE8jqC14xeAMVZvLqYqS7isHL+g==
+
+"@next/swc-linux-x64-gnu@14.2.23":
+  version "14.2.23"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.23.tgz#7f5856df080f58ba058268b30429a2ab52500536"
+  integrity sha512-Ybfqlyzm4sMSEQO6lDksggAIxnvWSG2cDWnG2jgd+MLbHYn2pvFA8DQ4pT2Vjk3Cwrv+HIg7vXJ8lCiLz79qoQ==
+
+"@next/swc-linux-x64-musl@14.2.23":
+  version "14.2.23"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.23.tgz#d494ebdf26421c91be65f9b1d095df0191c956d8"
+  integrity sha512-OSQX94sxd1gOUz3jhhdocnKsy4/peG8zV1HVaW6DLEbEmRRtUCUQZcKxUD9atLYa3RZA+YJx+WZdOnTkDuNDNA==
+
+"@next/swc-win32-arm64-msvc@14.2.23":
+  version "14.2.23"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.23.tgz#62786e7ba4822a20b6666e3e03e5a389b0e7eb3b"
+  integrity sha512-ezmbgZy++XpIMTcTNd0L4k7+cNI4ET5vMv/oqNfTuSXkZtSA9BURElPFyarjjGtRgZ9/zuKDHoMdZwDZIY3ehQ==
+
+"@next/swc-win32-ia32-msvc@14.2.23":
+  version "14.2.23"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.23.tgz#ef028af91e1c40a4ebba0d2c47b23c1eeb299594"
+  integrity sha512-zfHZOGguFCqAJ7zldTKg4tJHPJyJCOFhpoJcVxKL9BSUHScVDnMdDuOU1zPPGdOzr/GWxbhYTjyiEgLEpAoFPA==
+
 "@next/swc-win32-x64-msvc@14.2.23":
   version "14.2.23"
   resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.23.tgz"
@@ -178,7 +218,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -279,7 +319,7 @@
   resolved "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz"
   integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
 
-"@swc/helpers@^0.5.0", "@swc/helpers@0.5.5":
+"@swc/helpers@0.5.5", "@swc/helpers@^0.5.0":
   version "0.5.5"
   resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz"
   integrity sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==
@@ -346,7 +386,7 @@
     natural-compare "^1.4.0"
     ts-api-utils "^2.0.1"
 
-"@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0", "@typescript-eslint/parser@^8.0.0 || ^8.0.0-alpha.0":
+"@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
   version "8.24.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.24.0.tgz"
   integrity sha512-MFDaO9CYiard9j9VepMNa9MTcqVvSny2N4hkY6roquzj8pdCBRENhErrteaQuu7Yjn1ppk0v1/ZF9CG3KIlrTA==
@@ -422,7 +462,7 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.9.0:
+acorn@^8.9.0:
   version "8.12.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz"
   integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
@@ -717,16 +757,16 @@ client-only@0.0.1:
   resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-clsx@^2.0.0, clsx@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
-  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
-
 clsx@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
+clsx@^2.0.0, clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
@@ -1066,7 +1106,7 @@ eslint-module-utils@^2.12.0, eslint-module-utils@^2.8.1:
   dependencies:
     debug "^3.2.7"
 
-eslint-plugin-import@*, eslint-plugin-import@^2.31.0:
+eslint-plugin-import@^2.31.0:
   version "2.31.0"
   resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz"
   integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==
@@ -1159,7 +1199,7 @@ eslint-visitor-keys@^4.2.0:
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz"
   integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==
 
-eslint@*, "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9", "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9", "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7", "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^7.23.0 || ^8.0.0 || ^9.0.0", eslint@^8, "eslint@^8.57.0 || ^9.0.0":
+eslint@^8:
   version "8.57.0"
   resolved "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz"
   integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
@@ -1241,10 +1281,10 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.3.0, fast-glob@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
-  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+fast-glob@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz"
+  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -1252,10 +1292,10 @@ fast-glob@^3.3.0, fast-glob@^3.3.2:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-glob@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz"
-  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+fast-glob@^3.3.0, fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -1345,6 +1385,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
@@ -1407,7 +1452,7 @@ get-tsconfig@^4.7.5:
   dependencies:
     resolve-pkg-maps "^1.0.0"
 
-glob-parent@^5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -1421,13 +1466,6 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-parent@~5.1.2:
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
-  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
-  dependencies:
-    is-glob "^4.0.1"
-
 glob@^10.3.10:
   version "10.4.5"
   resolved "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz"
@@ -1525,6 +1563,11 @@ hasown@^2.0.0, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+hls.js@^1.5.20:
+  version "1.5.20"
+  resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.5.20.tgz#7eb23bb5e2595311d4e2761038ca6882673de7e2"
+  integrity sha512-uu0VXUK52JhihhnN/MVVo1lvqNNuhoxkonqgO3IpjvQiGpJBdIXMGkofjQb/j9zvV7a1SW8U9g1FslWx/1HOiQ==
+
 ignore@^5.2.0, ignore@^5.3.1:
   version "5.3.2"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz"
@@ -1971,7 +2014,7 @@ motion-utils@^12.0.0:
   resolved "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz"
   integrity sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==
 
-ms@^2.1.1, ms@2.1.2:
+ms@2.1.2, ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
@@ -2256,15 +2299,6 @@ postcss-value-parser@^4.0.0:
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8, postcss@^8.0.0, postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@>=8.0.9:
-  version "8.4.44"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.44.tgz"
-  integrity sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.0.1"
-    source-map-js "^1.2.0"
-
 postcss@8.4.31:
   version "8.4.31"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz"
@@ -2274,6 +2308,15 @@ postcss@8.4.31:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8, postcss@^8.4.23:
+  version "8.4.44"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.44.tgz"
+  integrity sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.1"
+    source-map-js "^1.2.0"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -2303,7 +2346,7 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", react-dom@^18, "react-dom@^18 || ^19 || ^19.0.0-rc", "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.2.0, react-dom@>=16.8.0:
+react-dom@^18:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -2316,7 +2359,7 @@ react-is@^16.13.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", react@^18, "react@^18 || ^19 || ^19.0.0-rc", "react@^18.0.0 || ^19.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16 || ^19.0.0-rc", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16.8.0:
+react@^18:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -2560,6 +2603,8 @@ streamsearch@^1.1.0:
 
 "string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
   dependencies:
     emoji-regex "^8.0.0"
     is-fullwidth-code-point "^3.0.0"
@@ -2653,6 +2698,8 @@ string.prototype.trimstart@^1.0.8:
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
@@ -2727,7 +2774,7 @@ tailwindcss-animate@^1.0.7:
   resolved "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz"
   integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
 
-tailwindcss@^3.4.1, "tailwindcss@>=3.0.0 || insiders":
+tailwindcss@^3.4.1:
   version "3.4.10"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz"
   integrity sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==
@@ -2868,7 +2915,7 @@ typed-array-length@^1.0.7:
     possible-typed-array-names "^1.0.0"
     reflect.getprototypeof "^1.0.6"
 
-typescript@^5, typescript@>=3.3.1, typescript@>=4.8.4, "typescript@>=4.8.4 <5.8.0":
+typescript@^5:
   version "5.5.4"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz"
   integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
@@ -2966,6 +3013,8 @@ word-wrap@^1.2.5:
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
   dependencies:
     ansi-styles "^4.0.0"
     string-width "^4.1.0"