Spaces:

Hans-Den
/

Nexorav2

Sleeping

App Files Files Community

ChandimaPrabath commited on Feb 14

Commit

6cf508e

1 Parent(s): 2583ec0

v0.1.2 beta

Browse files

Files changed (36) hide show

frontend/app/globals.css +19 -12
frontend/app/layout.tsx +16 -12
frontend/app/movie/[title]/{LoadingSkeleton.js → LoadingSkeleton.tsx} +19 -19
frontend/app/movie/[title]/page.js +0 -171
frontend/app/movie/[title]/page.tsx +261 -0
frontend/app/movies/{page.js → page.tsx} +40 -18
frontend/app/mylist/page.tsx +9 -0
frontend/app/not-found.js +0 -37
frontend/app/not-found.tsx +122 -0
frontend/app/{page.js → page.tsx} +68 -22
frontend/app/tvshow/[title]/{LoadingSkeleton.js → LoadingSkeleton.tsx} +19 -19
frontend/app/tvshow/[title]/page.js +0 -161
frontend/app/tvshow/[title]/page.tsx +436 -0
frontend/app/tvshows/page.js +0 -91
frontend/app/tvshows/page.tsx +253 -0
frontend/app/tvshows/page.tsx.tmp +253 -0
frontend/components/loading/SplashScreen.tsx +102 -0
frontend/components/movie/{MovieCard.js → MovieCard.tsx} +46 -21
frontend/components/movie/MovieCardTemp.js +0 -66
frontend/components/navigation/DesktopMenu.tsx +17 -5
frontend/components/navigation/MobileMenu.tsx +30 -7
frontend/components/navigation/Navbar.tsx +18 -6
frontend/components/sections/CastSection.js +0 -52
frontend/components/sections/CastSection.tsx +85 -0
frontend/components/sections/NewContentSection.js +0 -67
frontend/components/sections/NewContentSection.tsx +45 -0
frontend/components/sections/ScrollSection.tsx +110 -0
frontend/components/sections/TrendingSection.js +0 -38
frontend/components/tvshow/{TvShowCard.js → TvShowCard.tsx} +62 -24
frontend/components/tvshow/TvShowCardTemp.js +0 -63
frontend/lib/LoadbalancerAPI.js +147 -130
frontend/lib/config.js +0 -0
frontend/lib/config.tsx +1 -0
frontend/package-lock.json +43 -0
frontend/package.json +1 -0
frontend/yarn.lock +23 -2

frontend/app/globals.css CHANGED Viewed

@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -87,24 +96,22 @@
     }
 }
 @media screen and (orientation: landscape) {
-  .pan-animation {
-    animation: kenburns-pan-landscape 5s ease-in-out infinite;
-    background-repeat: no-repeat;
-    background-position: center;
-}
 }
 @media screen and (orientation: portrait) {
-  .pan-animation {
-    animation: kenburns-pan-portrait 5s ease-in-out infinite;
-    background-repeat: no-repeat;
-    background-position: top;
-}
 }
 @keyframes kenburns-pan-landscape {
     0% {
         background-position: 0% 50%;

+/* Add this to your existing CSS */
+.scrollbar-hide {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+.scrollbar-hide::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+}
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
     }
 }
 @media screen and (orientation: landscape) {
+    .pan-animation {
+        animation: kenburns-pan-landscape 5s ease-in-out infinite;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
 }
 @media screen and (orientation: portrait) {
+    .pan-animation {
+        animation: kenburns-pan-portrait 5s ease-in-out infinite;
+        background-repeat: no-repeat;
+        background-position: top;
+    }
 }
 @keyframes kenburns-pan-landscape {
     0% {
         background-position: 0% 50%;

frontend/app/layout.tsx CHANGED Viewed

@@ -3,23 +3,27 @@ import { Inter } from 'next/font/google';
 import './globals.css';
 import { Navbar } from '@components/navigation/Navbar';
 import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
 const inter = Inter({ subsets: ['latin'] });
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
     return (
-        <html lang="en">
-            <body className={inter.className}>
-                <div className="min-h-screen bg-gray-900 text-white">
-                    <Navbar />
-                    {children}
-                    <ProgressBar
-                        height="5px"
-                        color="#8927e9"
-                        options={{ showSpinner: false }}
-                        shallowRouting
-                    />
-                </div>
             </body>
         </html>
     );

 import './globals.css';
 import { Navbar } from '@components/navigation/Navbar';
 import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
+import { LoadingProvider } from '@/components/loading/SplashScreen';
 const inter = Inter({ subsets: ['latin'] });
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
     return (
+        <html lang="en" data-oid="dkam3:s">
+            <body className={inter.className} data-oid="-:k4nci">
+                <LoadingProvider data-oid="mu:2qb-">
+                    <div className="min-h-screen bg-gray-900 text-white" data-oid="e2xig-g">
+                        <Navbar data-oid="x1wtrkz" />
+                        {children}
+                        <ProgressBar
+                            height="5px"
+                            color="#8927e9"
+                            options={{ showSpinner: false }}
+                            shallowRouting
+                            data-oid="ymwuf1d"
+                        />
+                    </div>
+                </LoadingProvider>
             </body>
         </html>
     );

frontend/app/movie/[title]/{LoadingSkeleton.js → LoadingSkeleton.tsx} RENAMED Viewed

@@ -1,29 +1,29 @@
 export function LoadingSkeleton() {
     return (
-        <div className="w-full min-h-screen bg-gray-900 animate-pulse" data-oid="bxlim:7">
             {/* Hero Section Skeleton */}
-            <div className="relative w-full h-[60vh] bg-gray-800" data-oid="15s-275">
                 <div
                     className="absolute inset-0 flex items-center justify-center"
-                    data-oid="-7z9u4-"
                 >
-                    <div className="w-full max-w-7xl px-6 space-y-4" data-oid="qjq7:4p">
                         <div
                             className="h-12 bg-gray-700 rounded-lg w-3/4 max-w-2xl"
-                            data-oid=".crlged"
                         ></div>
                         <div
                             className="h-6 bg-gray-700 rounded-lg w-1/4 max-w-xs"
-                            data-oid="m2f8k02"
                         ></div>
-                        <div className="flex gap-4" data-oid="99ud:0g">
                             <div
                                 className="h-12 bg-gray-700 rounded-3xl w-32"
-                                data-oid="djnshw1"
                             ></div>
                             <div
                                 className="h-12 bg-gray-700 rounded-3xl w-32"
-                                data-oid="3cmt5:k"
                             ></div>
                         </div>
                     </div>
@@ -31,25 +31,25 @@ export function LoadingSkeleton() {
             </div>
             {/* Details Section Skeleton */}
-            <div className="max-w-7xl mx-auto px-6 py-12 space-y-8" data-oid="g-n.rse">
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="q1ayxmh">
-                    <div className="md:col-span-2 space-y-4" data-oid="lq:eldw">
-                        <div className="h-8 bg-gray-800 rounded-lg w-1/2" data-oid="ufp7lyx"></div>
                         <div
                             className="h-32 bg-gray-800 rounded-lg w-full"
-                            data-oid="tgmoxx:"
                         ></div>
-                        <div className="h-8 bg-gray-800 rounded-lg w-1/3" data-oid="-t-uslw"></div>
                         <div
                             className="h-24 bg-gray-800 rounded-lg w-full"
-                            data-oid="wkup7cw"
                         ></div>
                     </div>
-                    <div className="space-y-4" data-oid="760f:2.">
-                        <div className="h-8 bg-gray-800 rounded-lg w-full" data-oid="zk.9vl4"></div>
                         <div
                             className="h-40 bg-gray-800 rounded-lg w-full"
-                            data-oid="p5io6zx"
                         ></div>
                     </div>
                 </div>

 export function LoadingSkeleton() {
     return (
+        <div className="w-full min-h-screen bg-gray-900 animate-pulse" data-oid="55fubag">
             {/* Hero Section Skeleton */}
+            <div className="relative w-full h-[60vh] bg-gray-800" data-oid="x6dgbus">
                 <div
                     className="absolute inset-0 flex items-center justify-center"
+                    data-oid="6cr1frz"
                 >
+                    <div className="w-full max-w-7xl px-6 space-y-4" data-oid="xnr2lak">
                         <div
                             className="h-12 bg-gray-700 rounded-lg w-3/4 max-w-2xl"
+                            data-oid="e.v3sso"
                         ></div>
                         <div
                             className="h-6 bg-gray-700 rounded-lg w-1/4 max-w-xs"
+                            data-oid="u3.2iri"
                         ></div>
+                        <div className="flex gap-4" data-oid="ghrtycm">
                             <div
                                 className="h-12 bg-gray-700 rounded-3xl w-32"
+                                data-oid="5h6-d3i"
                             ></div>
                             <div
                                 className="h-12 bg-gray-700 rounded-3xl w-32"
+                                data-oid="8dfdf5j"
                             ></div>
                         </div>
                     </div>
             </div>
             {/* Details Section Skeleton */}
+            <div className="max-w-7xl mx-auto px-6 py-12 space-y-8" data-oid="1fd0cj5">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="uev..vj">
+                    <div className="md:col-span-2 space-y-4" data-oid="7q8.12o">
+                        <div className="h-8 bg-gray-800 rounded-lg w-1/2" data-oid="1ibmxaw"></div>
                         <div
                             className="h-32 bg-gray-800 rounded-lg w-full"
+                            data-oid="7rt8ae9"
                         ></div>
+                        <div className="h-8 bg-gray-800 rounded-lg w-1/3" data-oid="__ka3gb"></div>
                         <div
                             className="h-24 bg-gray-800 rounded-lg w-full"
+                            data-oid="2b-ajsb"
                         ></div>
                     </div>
+                    <div className="space-y-4" data-oid="s73q162">
+                        <div className="h-8 bg-gray-800 rounded-lg w-full" data-oid="425zelo"></div>
                         <div
                             className="h-40 bg-gray-800 rounded-lg w-full"
+                            data-oid="kjwqwuc"
                         ></div>
                     </div>
                 </div>

frontend/app/movie/[title]/page.js DELETED Viewed

@@ -1,171 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { useParams } from 'next/navigation';
-import { getMovieMetadata } from '@/lib/lb';
-import { LoadingSkeleton } from './LoadingSkeleton';
-import { convertMinutesToHM } from '@lib/utils';
-import Link from 'next/link';
-import CastSection from '@/components/sections/CastSection';
-export default function MovieTitlePage() {
-    const { title } = useParams();
-    const decodedTitle = decodeURIComponent(title);
-    const [movie, setMovie] = useState(null);
-    useEffect(() => {
-        async function fetchMovie() {
-            try {
-                const data = await getMovieMetadata(decodedTitle);
-                setMovie(data.data);
-            } catch (error) {
-                console.error('Failed to fetch movie details', error);
-            }
-        }
-        fetchMovie();
-    }, [decodedTitle]);
-    if (!movie) {
-        return <LoadingSkeleton />;
-    }
-    return (
-        <div
-            className="relative w-full min-h-screen h-full flex items-start landscape:pt-36 pt-40 text-white"
-            style={{
-                backgroundImage: `url(${movie.image})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-            }}
-        >
-            <div className="h-screen fixed inset-0 bg-gray-900 bg-opacity-50">
-                <div className="h-2/6"></div>
-                <div className="h-4/6 bg-gradient-to-t from-gray-900 to-transparent"></div>
-            </div>
-            <div className="relative z-10 max-w-1/3 landscape:mx-40 mx-6 min-h-screen">
-                <div className="relative z-10 max-w-2/6  w-5/6 landscape:w-4/6 flex-col items-start justify-start bg-gray-800 bg-opacity-50 backdrop-blur-md p-4 rounded-xl">
-                    <h1 className="landscape:text-3xl text-2xl font-bold mb-2 text-gray-200">
-                        {movie.translations?.nameTranslations?.find((t) => t.language === 'eng')
-                            ?.name ||
-                            movie.translations?.nameTranslations?.find(
-                                (t) => t.isAlias && t.language === 'eng',
-                            )?.name ||
-                            'Unknown Title'}
-                        ({movie.year})
-                    </h1>
-                    {/* Genres */}
-                    <span className="text-purple-400 text-base font-semibold">
-                        {Array.isArray(movie.genres)
-                            ? movie.genres.map((genre, index) => (
-                                  <span key={genre.id}>
-                                      <Link
-                                          href={`/genre/${encodeURIComponent(genre.slug)}`}
-                                          className="hover:underline"
-                                      >
-                                          {genre.name}
-                                      </Link>
-                                      {index < movie.genres.length - 1 && ', '}
-                                  </span>
-                              ))
-                            : null}
-                    </span>
-                    {/* Improved Score Display */}
-                    <div className="mb-2 mt-2 flex items-center">
-                        <span className="bg-gradient-to-r from-violet-500 to-purple-400 text-gray-700 px-3 py-1 rounded-md text-sm font-semibold">
-                            ⭐ {movie.score}
-                        </span>
-                    </div>
-                    {/* Improved Content Ratings Display */}
-                    {movie.contentRatings?.length > 0 ? (
-                        <div className="mt-2 text-gray-300">
-                            <p className="text-sm font-semibold mb-1">Content Ratings:</p>
-                            <ul className="flex flex-wrap gap-2">
-                                {movie.contentRatings.map((rating, index) => {
-                                    // Map country codes to corresponding flags
-                                    const countryFlags = {
-                                        AUS: '🇦🇺',
-                                        USA: '🇺🇸',
-                                        GBR: '🇬🇧',
-                                        EU: '🇪🇺',
-                                        JPN: '🇯🇵',
-                                        KOR: '🇰🇷',
-                                        CAN: '🇨🇦',
-                                        DEU: '🇩🇪',
-                                        FRA: '🇫🇷',
-                                        ESP: '🇪🇸',
-                                        ITA: '🇮🇹',
-                                    };
-                                    const flag = countryFlags[rating.country.toUpperCase()] || '🌍'; // 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"
-                                        >
-                                            <span className="mr-2">{flag}</span>
-                                            <span className="text-white font-semibold">
-                                                {rating.name}
-                                            </span>
-                                            <span className="text-gray-400 ml-1">
-                                                {' '}
-                                                - {rating.description || 'N/A'}
-                                            </span>
-                                        </li>
-                                    );
-                                })}
-                            </ul>
-                        </div>
-                    ) : (
-                        <p className="text-gray-400 text-sm">No content ratings available.</p>
-                    )}
-                    <span className="text-gray-300 text-sm font-semibold">
-                        {movie.spoken_languages?.map((lang, index) => (
-                            <span key={index}>
-                                {lang.toUpperCase()}
-                                {index < movie.spoken_languages.length - 1 && ', '}
-                            </span>
-                        ))}
-                    </span>
-                    <div className="flex justify-start landscape:gap-2 mt-4">
-                        <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"
-                        >
-                            <svg
-                                className="w-4 h-4 md:w-5 md:h-5 mr-2"
-                                fill="currentColor"
-                                viewBox="0 0 20 20"
-                            >
-                                <path d="M4 4l12 6-12 6V4z" />
-                            </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"
-                        >
-                            Add to My List
-                        </Link>
-                    </div>
-                </div>
-                <div className="flex flex-col landscape:flex-row gap-6 mt-4">
-                    {/* Overview Section */}
-                    <div className="flex-1 bg-gray-800 bg-opacity-50 backdrop-blur-md p-4 rounded-xl">
-                        <p className="text-gray-400">
-                            {movie.translations?.overviewTranslations?.find(
-                                (t) => t.language === 'eng',
-                            )?.overview || 'No overview available.'}
-                        </p>
-                    </div>
-                    <CastSection movie={movie} />
-                </div>
-            </div>
-        </div>
-    );
-}

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

	@@ -0,0 +1,261 @@

+'use client';
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import { getMovieMetadata } from '@/lib/lb';
+import { LoadingSkeleton } from './LoadingSkeleton';
+import { convertMinutesToHM } from '@lib/utils';
+import Link from 'next/link';
+import CastSection from '@/components/sections/CastSection';
+export default function MovieTitlePage() {
+    const { title } = useParams();
+    const decodedTitle = decodeURIComponent(Array.isArray(title) ? title[0] : title);
+    interface Movie {
+        name: string;
+        image: string;
+        translations?: any;
+        year?: number;
+        genres?: any[];
+        score?: number;
+        contentRatings?: any[];
+        characters?: any;
+        artworks?: any[];
+        file_structure?: any;
+    }
+    const [movie, setMovie] = useState<Movie | null>(null);
+    useEffect(() => {
+        async function fetchMovie() {
+            try {
+                const data = await getMovieMetadata(decodedTitle);
+                setMovie(data.data as Movie);
+            } catch (error) {
+                console.error('Failed to fetch movie details', error);
+            }
+        }
+        fetchMovie();
+    }, [decodedTitle]);
+    if (!movie) {
+        return <LoadingSkeleton data-oid="4z94._3" />;
+    }
+    return (
+        <div
+            className="relative w-full min-h-screen h-full flex items-start landscape:pt-24 pt-28 text-white"
+            style={{
+                backgroundImage: `url(${movie.artworks?.[0]?.image || movie.image})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'top',
+                backgroundAttachment: 'fixed',
+            }}
+            data-oid="revv9kh"
+        >
+            {/* Gradient Overlays */}
+            <div className="h-screen fixed inset-0" data-oid="9cjzadn">
+                <div
+                    className="h-full bg-gradient-to-b from-gray-900/90 via-gray-900/50 to-gray-900/90"
+                    data-oid=":j124gq"
+                ></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"
+                data-oid="jn:xenk"
+            >
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8" data-oid="7qn5zd.">
+                    {/* Left Column - Main Info */}
+                    <div className="lg:col-span-2 space-y-6" data-oid="9soi9yh">
+                        <div
+                            className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50"
+                            data-oid="i3s6s8."
+                        >
+                            {/* Title and Year */}
+                            <div className="space-y-2" data-oid="etbp9oi">
+                                <h1 className="text-4xl font-bold text-white" data-oid="dsob41d">
+                                    {movie.translations?.nameTranslations?.find(
+                                        (t: { language: string; name: string }) =>
+                                            t.language === 'eng',
+                                    )?.name ||
+                                        movie.translations?.nameTranslations?.find(
+                                            (t: {
+                                                isAlias: boolean;
+                                                language: string;
+                                                name: string;
+                                            }) => t.isAlias && t.language === 'eng',
+                                        )?.name ||
+                                        movie?.name ||
+                                        'Unknown Title'}
+                                </h1>
+                                <div
+                                    className="flex items-center gap-3 text-gray-300"
+                                    data-oid="df5cjt:"
+                                >
+                                    <span className="text-lg" data-oid="sfvh8h.">
+                                        {movie.year}
+                                    </span>
+                                    <span data-oid="8s72a-.">•</span>
+                                    <span
+                                        className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm"
+                                        data-oid="xel06np"
+                                    >
+                                        Movie
+                                    </span>
+                                </div>
+                            </div>
+                            {/* Genres and Score */}
+                            <div
+                                className="flex flex-wrap items-center gap-4 mt-4"
+                                data-oid="u8ozk4w"
+                            >
+                                <div className="flex items-center gap-2" data-oid="he6yrlk">
+                                    <span
+                                        className="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-medium"
+                                        data-oid="rnhvohx"
+                                    >
+                                        ⭐ {movie.score ? (movie.score / 1000).toFixed(1) : 'N/A'}
+                                    </span>
+                                </div>
+                                <div className="flex flex-wrap gap-2" data-oid="dp4ku:9">
+                                    {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="jhs32ty"
+                                              >
+                                                  {genre.name}
+                                              </Link>
+                                          ))
+                                        : null}
+                                </div>
+                            </div>
+                            {/* Content Ratings */}
+                            {Array.isArray(movie.contentRatings) &&
+                            movie.contentRatings.length > 0 ? (
+                                <div className="mt-6" data-oid="1yk1r-p">
+                                    <h3
+                                        className="text-lg font-semibold text-gray-200 mb-3"
+                                        data-oid="dni4581"
+                                    >
+                                        Content Ratings
+                                    </h3>
+                                    <ul className="flex flex-wrap gap-3" data-oid="el5h0bp">
+                                        {movie.contentRatings.map((rating, index) => {
+                                            // Map country codes to corresponding flags
+                                            const countryFlags = {
+                                                AUS: '🇦🇺',
+                                                USA: '🇺🇸',
+                                                GBR: '🇬🇧',
+                                                EU: '🇪🇺',
+                                                JPN: '🇯🇵',
+                                                KOR: '🇰🇷',
+                                                CAN: '🇨🇦',
+                                                DEU: '🇩🇪',
+                                                FRA: '🇫🇷',
+                                                ESP: '🇪🇸',
+                                                ITA: '🇮🇹',
+                                            };
+                                            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="jyj-mez"
+                                                >
+                                                    <span className="mr-2" data-oid="e-5n.a3">
+                                                        {flag}
+                                                    </span>
+                                                    <span
+                                                        className="text-white font-semibold"
+                                                        data-oid="9:ua6ec"
+                                                    >
+                                                        {rating.name}
+                                                    </span>
+                                                    <span
+                                                        className="text-gray-400 ml-1"
+                                                        data-oid="iq0nf4s"
+                                                    >
+                                                        {' '}
+                                                        - {rating.description || 'N/A'}
+                                                    </span>
+                                                </li>
+                                            );
+                                        })}
+                                    </ul>
+                                </div>
+                            ) : (
+                                <p className="text-gray-400 text-sm" data-oid="z2khxq1">
+                                    No content ratings available.
+                                </p>
+                            )}
+                            {/* Action Buttons */}{' '}
+                            <div
+                                className="flex justify-start landscape:gap-2 mt-4"
+                                data-oid="xaulnx5"
+                            >
+                                <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="nt4wfms"
+                                >
+                                    <svg
+                                        className="w-4 h-4 md:w-5 md:h-5 mr-2"
+                                        fill="currentColor"
+                                        viewBox="0 0 20 20"
+                                        data-oid="bji9c:e"
+                                    >
+                                        <path d="M4 4l12 6-12 6V4z" data-oid="f9vgah4" />
+                                    </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=":33g7ew"
+                                >
+                                    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"
+                            data-oid="_:x12te"
+                        >
+                            <h3
+                                className="text-lg font-semibold text-gray-200 mb-3"
+                                data-oid="3wu.i__"
+                            >
+                                Overview
+                            </h3>
+                            <p className="text-gray-300 leading-relaxed" data-oid="bvgsgiv">
+                                {movie.translations?.overviewTranslations?.find(
+                                    (t: { language: string; overview: string }) =>
+                                        t.language === 'eng',
+                                )?.overview ||
+                                    movie.translations?.overviewTranslations?.[0]?.overview ||
+                                    'No overview available.'}
+                            </p>
+                        </div>
+                    </div>
+                    {/* Right Column - Cast */}
+                    <div className="lg:col-span-1" data-oid="5-5evlt">
+                        <CastSection movie={movie} data-oid="8d3b-36" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/app/movies/{page.js → page.tsx} RENAMED Viewed

@@ -4,13 +4,14 @@ import { useEffect, useState, Suspense } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { getAllMovies } from '@/lib/lb';
 import { MovieCard } from '@/components/movie/MovieCard';
 function MoviesContent() {
     const searchParams = useSearchParams();
     const router = useRouter();
     const currentPage = parseInt(searchParams.get('page') || '1', 10);
     const [movies, setMovies] = useState([]);
-    const [loading, setLoading] = useState(true);
     const itemsPerPage = 16;
     const [totalPages, setTotalPages] = useState(1);
@@ -33,33 +34,44 @@ function MoviesContent() {
         fetchMovies();
     }, [currentPage]);
-    const handlePageChange = (newPage) => {
         router.push(`/movies?page=${newPage}`);
     };
     return (
         <>
             {loading ? (
-                <p className="text-center">Loading...</p>
             ) : (
                 <>
-                    <div className="grid grid-cols-2 md:grid-cols-8 gap-4 md:gap-6">
                         {movies.map((title, index) => (
-                            <MovieCard title={title} key={index} />
                         ))}
                     </div>
-                    <div className="flex justify-center mt-8 gap-4">
-                        <button
-                            onClick={() => handlePageChange(currentPage - 1)}
                             disabled={currentPage <= 1}
-                            className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50">
                             Previous
                         </button>
-                        <span className="px-4 py-2 text-white">Page {currentPage} of {totalPages}</span>
-                        <button
-                            onClick={() => handlePageChange(currentPage + 1)}
                             disabled={currentPage >= totalPages}
-                            className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50">
                             Next
                         </button>
                     </div>
@@ -71,13 +83,23 @@ function MoviesContent() {
 export default function MoviesPage() {
     return (
-        <div className="py-16">
-            <div className="container mx-auto px-6">
-                <h2 className="text-2xl font-bold mb-8 bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
                     Discover Movies
                 </h2>
-                <Suspense fallback={<p className="text-center">Loading...</p>}>
-                    <MoviesContent />
                 </Suspense>
             </div>
         </div>

 import { useSearchParams, useRouter } from 'next/navigation';
 import { getAllMovies } from '@/lib/lb';
 import { MovieCard } from '@/components/movie/MovieCard';
+import { useLoading } from '@/components/loading/SplashScreen';
 function MoviesContent() {
     const searchParams = useSearchParams();
     const router = useRouter();
     const currentPage = parseInt(searchParams.get('page') || '1', 10);
     const [movies, setMovies] = useState([]);
+    const { loading, setLoading } = useLoading();
     const itemsPerPage = 16;
     const [totalPages, setTotalPages] = useState(1);
         fetchMovies();
     }, [currentPage]);
+    const handlePageChange = (newPage: number) => {
         router.push(`/movies?page=${newPage}`);
     };
     return (
         <>
             {loading ? (
+                <p className="text-center" data-oid="wt363:4">
+                    Loading...
+                </p>
             ) : (
                 <>
+                    <div
+                        className="grid grid-cols-2 md:grid-cols-6 gap-4 md:gap-6"
+                        data-oid="nnyjyh_"
+                    >
                         {movies.map((title, index) => (
+                            <MovieCard title={title} key={index} data-oid="qbq--rn" />
                         ))}
                     </div>
+                    <div className="flex justify-center mt-8 gap-4" data-oid="o8hwe0o">
+                        <button
+                            onClick={() => handlePageChange(currentPage - 1)}
                             disabled={currentPage <= 1}
+                            className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50"
+                            data-oid="in9w58i"
+                        >
                             Previous
                         </button>
+                        <span className="px-4 py-2 text-white" data-oid=":f4i:-h">
+                            Page {currentPage} of {totalPages}
+                        </span>
+                        <button
+                            onClick={() => handlePageChange(currentPage + 1)}
                             disabled={currentPage >= totalPages}
+                            className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50"
+                            data-oid="fn1v5nv"
+                        >
                             Next
                         </button>
                     </div>
 export default function MoviesPage() {
     return (
+        <div className="py-16" data-oid="7-jgkqc">
+            <div className="container mx-auto px-6" data-oid="ww2qum_">
+                <h2
+                    className="text-2xl font-bold mb-8 bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent"
+                    data-oid="5d7mzrh"
+                >
                     Discover Movies
                 </h2>
+                <Suspense
+                    fallback={
+                        <p className="text-center" data-oid="7lprvmz">
+                            Loading...
+                        </p>
+                    }
+                    data-oid="5dnkf7b"
+                >
+                    <MoviesContent data-oid="ln0l91t" />
                 </Suspense>
             </div>
         </div>

frontend/app/mylist/page.tsx ADDED Viewed

	@@ -0,0 +1,9 @@

+'use client';
+import { useLoading } from '@/components/loading/SplashScreen';
+export default function MyListPage() {
+    const { loading, setLoading } = useLoading();
+    setLoading(true);
+    return <div data-oid="3bux562"></div>;
+}

frontend/app/not-found.js DELETED Viewed

@@ -1,37 +0,0 @@
-'use client';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-export default function NotFound() {
-    const [floating, setFloating] = useState(false);
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setFloating((prev) => !prev);
-        }, 2000);
-        return () => clearInterval(interval);
-    }, []);
-    return (
-        <div className="flex flex-col items-center justify-center min-h-screen text-white">
-            <h1
-                className={`text-6xl font-bold text-gray-300 transition-transform duration-500 ${
-                    floating ? 'translate-y-1' : '-translate-y-1'
-                }`}
-            >
-                <svg
-                 fill="#b8b8b8" height="200px" width="200px" version="1.1" id="Layer_1" viewBox="0 0 512 512" stroke="#b8b8b8"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <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> </g> </g> <g> <g> <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> </g> </g> <g> <g> <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> </g> </g> <g> <g> <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> </g> </g> <g> <g> <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> </g> </g> <g> <g> <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> </g> </g> </g>
-                 </svg>
-            </h1>
-            <p className="text-xl text-gray-400 mt-4">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"
-            >
-                Go Home
-            </Link>
-        </div>
-    );
-}

frontend/app/not-found.tsx ADDED Viewed

	@@ -0,0 +1,122 @@

+'use client';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+export default function NotFound() {
+    const [floating, setFloating] = useState(false);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setFloating((prev) => !prev);
+        }, 2000);
+        return () => clearInterval(interval);
+    }, []);
+    return (
+        <div
+            className="flex flex-col items-center justify-center min-h-screen text-white"
+            data-oid="pou15yo"
+        >
+            <h1
+                className={`text-6xl font-bold text-gray-300 transition-transform duration-500 ${
+                    floating ? 'translate-y-1' : '-translate-y-1'
+                }`}
+                data-oid="6f5x09d"
+            >
+                <svg
+                    fill="#b8b8b8"
+                    height="200px"
+                    width="200px"
+                    version="1.1"
+                    id="Layer_1"
+                    viewBox="0 0 512 512"
+                    stroke="#b8b8b8"
+                    data-oid="z4xly:t"
+                >
+                    <g id="SVGRepo_bgCarrier" stroke-width="0" data-oid="codyezp"></g>
+                    <g
+                        id="SVGRepo_tracerCarrier"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        data-oid="t1:xb-5"
+                    ></g>
+                    <g id="SVGRepo_iconCarrier" data-oid="ghtfh9h">
+                        {' '}
+                        <g data-oid=":f10y:v">
+                            {' '}
+                            <g data-oid="7zcg76n">
+                                {' '}
+                                <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="lt7rll5"
+                                ></path>{' '}
+                            </g>{' '}
+                        </g>{' '}
+                        <g data-oid="so2w9ck">
+                            {' '}
+                            <g data-oid="0kbzm.2">
+                                {' '}
+                                <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="y4oji:m"
+                                ></path>{' '}
+                            </g>{' '}
+                        </g>{' '}
+                        <g data-oid="pf3sr3b">
+                            {' '}
+                            <g data-oid="4ukzqi5">
+                                {' '}
+                                <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="pfto:60"
+                                ></path>{' '}
+                            </g>{' '}
+                        </g>{' '}
+                        <g data-oid="j0k-zf7">
+                            {' '}
+                            <g data-oid="tuf9-xo">
+                                {' '}
+                                <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=".-1dcb."
+                                ></path>{' '}
+                            </g>{' '}
+                        </g>{' '}
+                        <g data-oid="nnpjyjq">
+                            {' '}
+                            <g data-oid="1j1fsc5">
+                                {' '}
+                                <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="4a3u-1b"
+                                ></path>{' '}
+                            </g>{' '}
+                        </g>{' '}
+                        <g data-oid="fvjii.6">
+                            {' '}
+                            <g data-oid="o153rqo">
+                                {' '}
+                                <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="zr-f0k2"
+                                ></path>{' '}
+                            </g>{' '}
+                        </g>{' '}
+                    </g>
+                </svg>
+            </h1>
+            <p className="text-xl text-gray-400 mt-4" data-oid="b0x5vhh">
+                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="jb2a6hd"
+            >
+                Go Home
+            </Link>
+        </div>
+    );
+}

frontend/app/{page.js → page.tsx} RENAMED Viewed

@@ -4,16 +4,27 @@ import { useState, useEffect } from 'react';
 import NewContentSection from '@components/sections/NewContentSection';
 import { getRecentItems } from '@lib/lb';
 import Link from 'next/link';
 export default function Page() {
-    const [slides, setSlides] = useState([]);
     const [currentSlide, setCurrentSlide] = useState(0);
-    const [loading, setLoading] = useState(true);
     const [loaded, setLoaded] = useState(false);
     useEffect(() => {
         async function fetchSlides() {
             try {
                 const slidesData = await getRecentItems();
                 setSlides(slidesData);
             } catch (error) {
@@ -39,17 +50,30 @@ export default function Page() {
     return (
         <>
             {/* Hero Slideshow */}
-            <div className="relative h-screen">
                 {/* 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'
                     }`}
                 >
-                    <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>
                 </div>
@@ -58,6 +82,7 @@ export default function Page() {
                     className={`absolute inset-0 transition-opacity duration-1000 ${
                         loaded ? 'opacity-100' : 'opacity-0'
                     }`}
                 >
                     {slides.map((slide, index) => (
                         <div
@@ -65,54 +90,74 @@ export default function Page() {
                             className={`absolute inset-0 transition-opacity duration-1000 ${
                                 index === currentSlide ? 'opacity-100' : 'opacity-0'
                             }`}
                         >
-                            <div className="absolute inset-0 bg-black/50 z-10" />
                             <div
                                 className="w-full h-full bg-center pan-animation transition-transform duration-1000 transform-gpu"
                                 style={{ backgroundImage: `url(${slide.image})` }}
                             ></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">
-                                    <span className="text-purple-400 text-base font-semibold">
                                         {Array.isArray(slide.genre) ? (
                                             slide.genre.map((genre, index) => (
-                                                <span key={index}>
                                                     <Link
                                                         href={`/genre/${encodeURIComponent(genre)}`}
-                                                        className="hover:underline"
                                                     >
                                                         {genre}
                                                     </Link>
-                                                    {index < slide.genre.length - 1 && ', '}
                                                 </span>
                                             ))
                                         ) : (
                                             <Link
                                                 href={`/genre/${encodeURIComponent(slide.genre)}`}
-                                                className="hover:underline"
                                             >
                                                 {slide.genre}
                                             </Link>
                                         )}
                                     </span>
-                                    <h1 className="text-4xl md:text-5xl font-bold mt-2 mb-4">
-                                        {slide.title}
-                                    </h1>
-                                    <p className="text-gray-300 text-lg max-w-xl overflow-hidden line-clamp-5">
                                         {slide.description}
                                     </p>
-                                    <div className="flex justify-start landscape:gap-4 mt-8">
                                         <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 landscape:py-2 py-2 md:px-8 md:py-3 landscape:rounded-3xl rounded-s-2xl flex items-center transition-colors text-sm md:text-base"
                                         >
                                             <svg
                                                 className="w-4 h-4 md:w-5 md:h-5 mr-2"
                                                 fill="currentColor"
                                                 viewBox="0 0 20 20"
                                             >
-                                                <path d="M4 4l12 6-12 6V4z" />
                                             </svg>
                                             Play Now
                                         </Link>
@@ -123,6 +168,7 @@ 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"
                                         >
                                             More Info
                                         </Link>
@@ -134,7 +180,7 @@ export default function Page() {
                 </div>
             </div>
-            <NewContentSection />
         </>
     );
 }

 import NewContentSection from '@components/sections/NewContentSection';
 import { getRecentItems } from '@lib/lb';
 import Link from 'next/link';
+import { useLoading } from '@/components/loading/SplashScreen';
+import { tr } from 'framer-motion/client';
+interface Slide {
+    image: string;
+    genre: string | string[];
+    title: string;
+    description: string;
+    type: 'movie' | 'tvshow';
+}
 export default function Page() {
+    const [slides, setSlides] = useState<Slide[]>([]);
     const [currentSlide, setCurrentSlide] = useState(0);
+    const { loading, setLoading } = useLoading();
     const [loaded, setLoaded] = useState(false);
     useEffect(() => {
         async function fetchSlides() {
             try {
+                setLoading(true);
                 const slidesData = await getRecentItems();
                 setSlides(slidesData);
             } catch (error) {
     return (
         <>
             {/* Hero Slideshow */}
+            <div className="relative landscape:h-[80vh] portrait:h-[75vh]" data-oid="g9z.yar">
                 {/* 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="qzwq8le"
                 >
+                    <div
+                        className="w-full h-full flex flex-col justify-end bg-gray-800 rounded-lg animate-pulse"
+                        data-oid="8.2oef."
+                    >
+                        <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="sji8cjl"
+                        ></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="wv3i._3"
+                        ></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="324b.67"
+                        ></div>
                     </div>
                 </div>
                     className={`absolute inset-0 transition-opacity duration-1000 ${
                         loaded ? 'opacity-100' : 'opacity-0'
                     }`}
+                    data-oid=".1jufir"
                 >
                     {slides.map((slide, index) => (
                         <div
                             className={`absolute inset-0 transition-opacity duration-1000 ${
                                 index === currentSlide ? 'opacity-100' : 'opacity-0'
                             }`}
+                            data-oid="zwb7.j-"
                         >
+                            <div className="absolute inset-0 bg-black/50 z-10" data-oid="ydvf.3z" />
                             <div
                                 className="w-full h-full bg-center pan-animation transition-transform duration-1000 transform-gpu"
                                 style={{ backgroundImage: `url(${slide.image})` }}
+                                data-oid="b12pu__"
                             ></div>
+                            <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="4tmdrv."
+                            >
+                                <div className="container mx-auto" data-oid="tvybbc2">
+                                    <h1
+                                        className="text-4xl md:text-5xl font-sans font-medium mt-2 mb-4"
+                                        data-oid="au.xh0_"
+                                    >
+                                        {slide.title}
+                                    </h1>
+                                    <span
+                                        className="text-purple-400 text-base font-semibold flex flex-wrap gap-2"
+                                        data-oid="hnb32u."
+                                    >
                                         {Array.isArray(slide.genre) ? (
                                             slide.genre.map((genre, index) => (
+                                                <span key={index} data-oid="ka.icr8">
                                                     <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="7usaujq"
                                                     >
                                                         {genre}
                                                     </Link>
                                                 </span>
                                             ))
                                         ) : (
                                             <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=".16-s0w"
                                             >
                                                 {slide.genre}
                                             </Link>
                                         )}
                                     </span>
+                                    <p
+                                        className="text-gray-300 text-lg font-sans max-w-xl overflow-hidden line-clamp-5"
+                                        data-oid="u2nu3zd"
+                                    >
                                         {slide.description}
                                     </p>
+                                    <div
+                                        className="flex justify-start landscape:gap-4 mt-8"
+                                        data-oid="5-s.c8t"
+                                    >
                                         <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 landscape:py-2 py-2 md:px-8 md:py-3 landscape:rounded-3xl rounded-s-2xl flex items-center transition-colors text-sm md:text-base"
+                                            data-oid="1defff:"
                                         >
                                             <svg
                                                 className="w-4 h-4 md:w-5 md:h-5 mr-2"
                                                 fill="currentColor"
                                                 viewBox="0 0 20 20"
+                                                data-oid="o7fg:-l"
                                             >
+                                                <path d="M4 4l12 6-12 6V4z" data-oid="f3i:9y." />
                                             </svg>
                                             Play Now
                                         </Link>
                                                     : `/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"
+                                            data-oid="si84l0u"
                                         >
                                             More Info
                                         </Link>
                 </div>
             </div>
+            <NewContentSection data-oid="u50ba33" />
         </>
     );
 }

frontend/app/tvshow/[title]/{LoadingSkeleton.js → LoadingSkeleton.tsx} RENAMED Viewed

@@ -1,29 +1,29 @@
 export function LoadingSkeleton() {
     return (
-        <div className="w-full min-h-screen bg-gray-900 animate-pulse" data-oid="bxlim:7">
             {/* Hero Section Skeleton */}
-            <div className="relative w-full h-[60vh] bg-gray-800" data-oid="15s-275">
                 <div
                     className="absolute inset-0 flex items-center justify-center"
-                    data-oid="-7z9u4-"
                 >
-                    <div className="w-full max-w-7xl px-6 space-y-4" data-oid="qjq7:4p">
                         <div
                             className="h-12 bg-gray-700 rounded-lg w-3/4 max-w-2xl"
-                            data-oid=".crlged"
                         ></div>
                         <div
                             className="h-6 bg-gray-700 rounded-lg w-1/4 max-w-xs"
-                            data-oid="m2f8k02"
                         ></div>
-                        <div className="flex gap-4" data-oid="99ud:0g">
                             <div
                                 className="h-12 bg-gray-700 rounded-3xl w-32"
-                                data-oid="djnshw1"
                             ></div>
                             <div
                                 className="h-12 bg-gray-700 rounded-3xl w-32"
-                                data-oid="3cmt5:k"
                             ></div>
                         </div>
                     </div>
@@ -31,25 +31,25 @@ export function LoadingSkeleton() {
             </div>
             {/* Details Section Skeleton */}
-            <div className="max-w-7xl mx-auto px-6 py-12 space-y-8" data-oid="g-n.rse">
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="q1ayxmh">
-                    <div className="md:col-span-2 space-y-4" data-oid="lq:eldw">
-                        <div className="h-8 bg-gray-800 rounded-lg w-1/2" data-oid="ufp7lyx"></div>
                         <div
                             className="h-32 bg-gray-800 rounded-lg w-full"
-                            data-oid="tgmoxx:"
                         ></div>
-                        <div className="h-8 bg-gray-800 rounded-lg w-1/3" data-oid="-t-uslw"></div>
                         <div
                             className="h-24 bg-gray-800 rounded-lg w-full"
-                            data-oid="wkup7cw"
                         ></div>
                     </div>
-                    <div className="space-y-4" data-oid="760f:2.">
-                        <div className="h-8 bg-gray-800 rounded-lg w-full" data-oid="zk.9vl4"></div>
                         <div
                             className="h-40 bg-gray-800 rounded-lg w-full"
-                            data-oid="p5io6zx"
                         ></div>
                     </div>
                 </div>

 export function LoadingSkeleton() {
     return (
+        <div className="w-full min-h-screen bg-gray-900 animate-pulse" data-oid="9y-8h.e">
             {/* Hero Section Skeleton */}
+            <div className="relative w-full h-[60vh] bg-gray-800" data-oid="r83jchn">
                 <div
                     className="absolute inset-0 flex items-center justify-center"
+                    data-oid="qvnro3o"
                 >
+                    <div className="w-full max-w-7xl px-6 space-y-4" data-oid="n4sx.uk">
                         <div
                             className="h-12 bg-gray-700 rounded-lg w-3/4 max-w-2xl"
+                            data-oid="wl80sa8"
                         ></div>
                         <div
                             className="h-6 bg-gray-700 rounded-lg w-1/4 max-w-xs"
+                            data-oid="rs621yh"
                         ></div>
+                        <div className="flex gap-4" data-oid="ahdwte6">
                             <div
                                 className="h-12 bg-gray-700 rounded-3xl w-32"
+                                data-oid="wuzu2mf"
                             ></div>
                             <div
                                 className="h-12 bg-gray-700 rounded-3xl w-32"
+                                data-oid="4b32gv."
                             ></div>
                         </div>
                     </div>
             </div>
             {/* Details Section Skeleton */}
+            <div className="max-w-7xl mx-auto px-6 py-12 space-y-8" data-oid="w1k.gzv">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="itpb4ce">
+                    <div className="md:col-span-2 space-y-4" data-oid="0m8hnwd">
+                        <div className="h-8 bg-gray-800 rounded-lg w-1/2" data-oid="voa7_l_"></div>
                         <div
                             className="h-32 bg-gray-800 rounded-lg w-full"
+                            data-oid="by65z9d"
                         ></div>
+                        <div className="h-8 bg-gray-800 rounded-lg w-1/3" data-oid="odbfq.m"></div>
                         <div
                             className="h-24 bg-gray-800 rounded-lg w-full"
+                            data-oid="iv43qmh"
                         ></div>
                     </div>
+                    <div className="space-y-4" data-oid="hx3cr-7">
+                        <div className="h-8 bg-gray-800 rounded-lg w-full" data-oid="aolxfq6"></div>
                         <div
                             className="h-40 bg-gray-800 rounded-lg w-full"
+                            data-oid="vv.ju.h"
                         ></div>
                     </div>
                 </div>

frontend/app/tvshow/[title]/page.js DELETED Viewed

@@ -1,161 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { useParams } from 'next/navigation';
-import { getTvShowMetadata } from '@/lib/lb';
-import { LoadingSkeleton } from './LoadingSkeleton';
-import { convertMinutesToHM } from '@lib/utils';
-import Link from 'next/link';
-import CastSection from '@components/sections/CastSection';
-export default function TvShowTitlePage() {
-    const { title } = useParams();
-    const decodedTitle = decodeURIComponent(title);
-    const [tvshow, setTvShow] = useState(null);
-    useEffect(() => {
-        async function fetchMovie() {
-            try {
-                const data = await getTvShowMetadata(decodedTitle);
-                setTvShow(data.data);
-            } catch (error) {
-                console.error('Failed to fetch movie details', error);
-            }
-        }
-        fetchMovie();
-    }, [decodedTitle]);
-    if (!tvshow) {
-        return <LoadingSkeleton />;
-    }
-    return (
-        <div
-            className="relative w-full min-h-screen h-full flex items-start landscape:pt-36 pt-40 text-white"
-            style={{
-                backgroundImage: `url(${tvshow.image})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-            }}
-        >
-            <div className="h-screen fixed inset-0 bg-gray-900 bg-opacity-50">
-                <div className="h-2/6"></div>
-                <div className="h-4/6 bg-gradient-to-t from-gray-900 to-transparent"></div>
-            </div>
-            <div className="relative z-10 max-w-1/3 landscape:mx-40 mx-6 min-h-screen">
-                <div className="relative z-10 max-w-2/6  w-5/6 landscape:w-4/6 flex-col items-start justify-start bg-gray-800 bg-opacity-50 backdrop-blur-md p-4 rounded-xl">
-                    <h1 className="landscape:text-3xl text-2xl font-bold mb-2 text-gray-200">
-                        {tvshow.translations?.nameTranslations?.find((t) => t.language === 'eng')
-                            ?.name ||
-                            tvshow.translations?.nameTranslations?.find(
-                                (t) => t.isAlias && t.language === 'eng',
-                            )?.name ||
-                            'Unknown Title'}
-                        ({tvshow.year})
-                    </h1>
-                    {/* Genres */}
-                    <span className="text-purple-400 text-base font-semibold">
-                        {Array.isArray(tvshow.genres)
-                            ? tvshow.genres.map((genre, index) => (
-                                  <span key={genre.id}>
-                                      <Link
-                                          href={`/genre/${encodeURIComponent(genre.slug)}`}
-                                          className="hover:underline"
-                                      >
-                                          {genre.name}
-                                      </Link>
-                                      {index < tvshow.genres.length - 1 && ', '}
-                                  </span>
-                              ))
-                            : null}
-                    </span>
-                    {/* Improved Score Display */}
-                    <div className="mb-2 mt-2 flex items-center">
-                        <span className="bg-gradient-to-r from-violet-500 to-purple-400 text-gray-700 px-3 py-1 rounded-md text-sm font-semibold">
-                            ⭐ {tvshow.score}
-                        </span>
-                    </div>
-                    {/* Improved Content Ratings Display */}
-                    {tvshow.contentRatings?.length > 0 ? (
-                        <div className="mt-2 text-gray-300">
-                            <p className="text-sm font-semibold mb-1">Content Ratings:</p>
-                            <ul className="flex flex-wrap gap-2">
-                                {tvshow.contentRatings.map((rating, index) => {
-                                    // Map country codes to corresponding flags
-                                    const countryFlags = {
-                                        AUS: '🇦🇺',
-                                        USA: '🇺🇸',
-                                        GBR: '🇬🇧',
-                                        EU: '🇪🇺',
-                                        JPN: '🇯🇵',
-                                        KOR: '🇰🇷',
-                                        CAN: '🇨🇦',
-                                        DEU: '🇩🇪',
-                                        FRA: '🇫🇷',
-                                        ESP: '🇪🇸',
-                                        ITA: '🇮🇹',
-                                    };
-                                    const flag = countryFlags[rating.country.toUpperCase()] || '🌍'; // 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"
-                                        >
-                                            <span className="mr-2">{flag}</span>
-                                            <span className="text-white font-semibold">
-                                                {rating.name}
-                                            </span>
-                                            <span className="text-gray-400 ml-1">
-                                                {' '}
-                                                - {rating.description || 'N/A'}
-                                            </span>
-                                        </li>
-                                    );
-                                })}
-                            </ul>
-                        </div>
-                    ) : (
-                        <p className="text-gray-400 text-sm">No content ratings available.</p>
-                    )}
-                    <div className="flex justify-start landscape:gap-2 mt-4">
-                        <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"
-                        >
-                            <svg
-                                className="w-4 h-4 md:w-5 md:h-5 mr-2"
-                                fill="currentColor"
-                                viewBox="0 0 20 20"
-                            >
-                                <path d="M4 4l12 6-12 6V4z" />
-                            </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"
-                        >
-                            Add to My List
-                        </Link>
-                    </div>
-                </div>
-                <div className="flex flex-col landscape:flex-row gap-6 mt-4">
-                    {/* Overview Section */}
-                    <div className="flex-1 bg-gray-800 bg-opacity-50 backdrop-blur-md p-4 rounded-xl">
-                        <p className="text-gray-400">
-                            {tvshow.translations?.overviewTranslations?.find(
-                                (t) => t.language === 'eng',
-                            )?.overview || 'No overview available.'}
-                        </p>
-                    </div>
-                    <CastSection movie={tvshow} />
-                </div>
-            </div>
-        </div>
-    );
-}

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

	@@ -0,0 +1,436 @@

+'use client';
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import { getTvShowMetadata } from '@/lib/lb';
+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"
+            data-oid="569dula"
+        >
+            <div className="flex flex-col space-y-4" data-oid="j.zuj5c">
+                <div className="flex items-center justify-between" data-oid="znwvqvv">
+                    <h3 className="text-lg font-semibold text-gray-200" data-oid=".t5i_kn">
+                        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="wvu-yod"
+                >
+                    {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'
+                                    }`}
+                                data-oid=":2:ubya"
+                            >
+                                {seasonName}
+                            </button>
+                        );
+                    })}
+                </div>
+                {/* Episodes List */}
+                <div className="space-y-8 mt-4" data-oid="2vjyfsk">
+                    {fileStructure.contents?.[activeSeason] && (
+                        <div key={activeSeason} className="space-y-4" data-oid="1rzvyvm">
+                            <h4
+                                className={`text-base font-medium ${
+                                    fileStructure.contents[activeSeason].path.includes('Specials')
+                                        ? 'text-amber-300'
+                                        : 'text-purple-300'
+                                }`}
+                                data-oid="b1h.lah"
+                            >
+                                {fileStructure.contents[activeSeason].path.split('/').pop()}
+                            </h4>
+                            <div className="space-y-2" data-oid="zxw.0:j">
+                                {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"
+                                                data-oid="w8y34vl"
+                                            >
+                                                {/* 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="gg4owr7"
+                                                >
+                                                    <span
+                                                        className={`text-lg font-semibold text-gray-300
+                                                            ${
+                                                                isSpecials
+                                                                    ? 'group-hover:text-amber-300'
+                                                                    : 'group-hover:text-purple-300'
+                                                            }`}
+                                                        data-oid="4.djlcp"
+                                                    >
+                                                        {episodeNum}
+                                                    </span>
+                                                </div>
+                                                {/* Episode Info */}
+                                                <div className="flex-grow" data-oid="1.f11w6">
+                                                    <h4
+                                                        className="text-gray-200 font-medium"
+                                                        data-oid="_6lmv4j"
+                                                    >
+                                                        {episodeTitle.replace(/_/g, ' ')}
+                                                    </h4>
+                                                    <div
+                                                        className="flex items-center gap-3 text-sm text-gray-400"
+                                                        data-oid="ahjmc12"
+                                                    >
+                                                        <span data-oid="a0trzby">
+                                                            {Math.round(episode.size / 1024 / 1024)}{' '}
+                                                            MB
+                                                        </span>
+                                                        <span data-oid="1hyz3i4">•</span>
+                                                        <span data-oid="ib0kbnn">
+                                                            {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'
+                                                        }`}
+                                                    data-oid="xw0-ovl"
+                                                >
+                                                    <svg
+                                                        className="w-5 h-5"
+                                                        fill="currentColor"
+                                                        viewBox="0 0 20 20"
+                                                        data-oid="sk9m.8v"
+                                                    >
+                                                        <path
+                                                            d="M4 4l12 6-12 6V4z"
+                                                            data-oid="y1gqh_1"
+                                                        />
+                                                    </svg>
+                                                </button>
+                                            </div>
+                                        );
+                                    },
+                                )}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+export default function TvShowTitlePage() {
+    const { title } = useParams();
+    const decodedTitle = decodeURIComponent(Array.isArray(title) ? title[0] : title);
+    interface TvShow {
+        name: string;
+        image: string;
+        translations?: any;
+        year?: number;
+        genres?: any[];
+        score?: number;
+        contentRatings?: any[];
+        characters?: any;
+        artworks?: any[];
+        file_structure?: any;
+    }
+    interface FileStructure {
+        contents?: any[];
+    }
+    const [tvshow, setTvShow] = useState<TvShow | null>(null);
+    const [fileStructure, setFileStructure] = useState<FileStructure>({});
+    useEffect(() => {
+        async function fetchMovie() {
+            try {
+                const data = await getTvShowMetadata(decodedTitle);
+                setTvShow(data.data);
+                setFileStructure(data.file_structure);
+            } catch (error) {
+                console.error('Failed to fetch movie details', error);
+            }
+        }
+        fetchMovie();
+    }, [decodedTitle]);
+    if (!tvshow) {
+        return <LoadingSkeleton data-oid="1w.hc1q" />;
+    }
+    return (
+        <div
+            className="relative w-full min-h-screen h-full flex items-start landscape:pt-24 pt-28 text-white"
+            style={{
+                backgroundImage: `url(${tvshow.artworks?.[0]?.image || tvshow.image})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'top',
+                backgroundAttachment: 'fixed',
+            }}
+            data-oid="0t-8gd6"
+        >
+            {/* Gradient Overlays */}
+            <div className="h-screen fixed inset-0" data-oid="5-ul0qs">
+                <div
+                    className="h-full bg-gradient-to-b from-gray-900/90 via-gray-900/50 to-gray-900/90"
+                    data-oid="uwf2xrs"
+                ></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"
+                data-oid="cagjlpk"
+            >
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8" data-oid="vic82wp">
+                    {/* Left Column - Main Info */}
+                    <div className="lg:col-span-2 space-y-6" data-oid="yxtbieb">
+                        <div
+                            className="bg-gray-800/60 backdrop-blur-md rounded-2xl p-6 border border-gray-700/50"
+                            data-oid="v03u3f8"
+                        >
+                            {/* Title and Year */}
+                            <div className="space-y-2" data-oid="prpjazr">
+                                <h1 className="text-4xl font-bold text-white" data-oid="w3tnf--">
+                                    {tvshow.translations?.nameTranslations?.find(
+                                        (t: { language: string; name: string }) =>
+                                            t.language === 'eng',
+                                    )?.name ||
+                                        tvshow.translations?.nameTranslations?.find(
+                                            (t: {
+                                                isAlias: boolean;
+                                                language: string;
+                                                name: string;
+                                            }) => t.isAlias && t.language === 'eng',
+                                        )?.name ||
+                                        tvshow?.name ||
+                                        'Unknown Title'}
+                                </h1>
+                                <div
+                                    className="flex items-center gap-3 text-gray-300"
+                                    data-oid="clwsp-l"
+                                >
+                                    <span className="text-lg" data-oid="v66_mp8">
+                                        {tvshow.year}
+                                    </span>
+                                    <span data-oid="mcuiami">•</span>
+                                    <span
+                                        className="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-sm"
+                                        data-oid="bqk3z3j"
+                                    >
+                                        TV Series
+                                    </span>
+                                </div>
+                            </div>
+                            {/* Genres and Score */}
+                            <div
+                                className="flex flex-wrap items-center gap-4 mt-4"
+                                data-oid="-brwied"
+                            >
+                                <div className="flex items-center gap-2" data-oid="-u.ed9k">
+                                    <span
+                                        className="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-medium"
+                                        data-oid="h188t58"
+                                    >
+                                        ⭐ {tvshow.score ? (tvshow.score / 1000).toFixed(1) : 'N/A'}
+                                    </span>
+                                </div>
+                                <div className="flex flex-wrap gap-2" data-oid="pz.v6zj">
+                                    {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=".jalfq6"
+                                              >
+                                                  {genre.name}
+                                              </Link>
+                                          ))
+                                        : null}
+                                </div>
+                            </div>
+                            {/* Content Ratings */}
+                            {Array.isArray(tvshow.contentRatings) &&
+                            tvshow.contentRatings.length > 0 ? (
+                                <div className="mt-6" data-oid="jeyectu">
+                                    <h3
+                                        className="text-lg font-semibold text-gray-200 mb-3"
+                                        data-oid="1c5r65f"
+                                    >
+                                        Content Ratings
+                                    </h3>
+                                    <ul className="flex flex-wrap gap-3" data-oid="dbshej9">
+                                        {tvshow.contentRatings.map((rating, index) => {
+                                            // Map country codes to corresponding flags
+                                            const countryFlags = {
+                                                AUS: '🇦🇺',
+                                                USA: '🇺🇸',
+                                                GBR: '🇬🇧',
+                                                EU: '🇪🇺',
+                                                JPN: '🇯🇵',
+                                                KOR: '🇰🇷',
+                                                CAN: '🇨🇦',
+                                                DEU: '🇩🇪',
+                                                FRA: '🇫🇷',
+                                                ESP: '🇪🇸',
+                                                ITA: '🇮🇹',
+                                            };
+                                            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="i78owye"
+                                                >
+                                                    <span className="mr-2" data-oid="7_r:-jk">
+                                                        {flag}
+                                                    </span>
+                                                    <span
+                                                        className="text-white font-semibold"
+                                                        data-oid="8q9px9."
+                                                    >
+                                                        {rating.name}
+                                                    </span>
+                                                    <span
+                                                        className="text-gray-400 ml-1"
+                                                        data-oid="zf08c.5"
+                                                    >
+                                                        {' '}
+                                                        - {rating.description || 'N/A'}
+                                                    </span>
+                                                </li>
+                                            );
+                                        })}
+                                    </ul>
+                                </div>
+                            ) : (
+                                <p className="text-gray-400 text-sm" data-oid="x_m8c:m">
+                                    No content ratings available.
+                                </p>
+                            )}
+                            {/* Action Buttons */}{' '}
+                            <div
+                                className="flex justify-start landscape:gap-2 mt-4"
+                                data-oid="1w2v9n0"
+                            >
+                                <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="mxsr0t."
+                                >
+                                    <svg
+                                        className="w-4 h-4 md:w-5 md:h-5 mr-2"
+                                        fill="currentColor"
+                                        viewBox="0 0 20 20"
+                                        data-oid="wb166p6"
+                                    >
+                                        <path d="M4 4l12 6-12 6V4z" data-oid="oacqels" />
+                                    </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="1qwh9q3"
+                                >
+                                    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"
+                            data-oid="49xalb5"
+                        >
+                            <h3
+                                className="text-lg font-semibold text-gray-200 mb-3"
+                                data-oid="j0l9.dk"
+                            >
+                                Overview
+                            </h3>
+                            <p className="text-gray-300 leading-relaxed" data-oid="f4smlv3">
+                                {tvshow.translations?.overviewTranslations?.find(
+                                    (t: { language: string; overview: string }) =>
+                                        t.language === 'eng',
+                                )?.overview ||
+                                    tvshow.translations?.overviewTranslations?.[0]?.overview ||
+                                    'No overview available.'}
+                            </p>
+                        </div>
+                        {/* Episodes Section */}
+                        <EpisodesSection fileStructure={fileStructure} data-oid="wcxi:s8" />
+                        {/* end of episodes section*/}
+                    </div>
+                    {/* Right Column - Cast */}
+                    <div className="lg:col-span-1" data-oid="-ar8nfz">
+                        <CastSection movie={tvshow} data-oid="zvjum9x" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/app/tvshows/page.js DELETED Viewed

@@ -1,91 +0,0 @@
-'use client';
-import { useEffect, useState, Suspense } from 'react';
-import { useSearchParams, useRouter } from 'next/navigation';
-import { getAllTvShows } from '@/lib/lb';
-import { TvShowCardTemp } from '@/components/tvshow/TvShowCardTemp';
-function TvShowsContent() {
-    const searchParams = useSearchParams();
-    const router = useRouter();
-    const currentPage = parseInt(searchParams.get('page') || '1', 10);
-    const [tvshows, setTvShows] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const itemsPerPage = 16;
-    const [totalPages, setTotalPages] = useState(1);
-    useEffect(() => {
-        async function fetchTvShows() {
-            setLoading(true);
-            try {
-                const data = await getAllTvShows();
-                if (data.length) {
-                    setTotalPages(Math.ceil(data.length / itemsPerPage));
-                    const startIndex = (currentPage - 1) * itemsPerPage;
-                    setTvShows(data.slice(startIndex, startIndex + itemsPerPage));
-                }
-            } catch (error) {
-                console.error('Error fetching TV shows:', error);
-            } finally {
-                setLoading(false);
-            }
-        }
-        fetchTvShows();
-    }, [currentPage]);
-    const handlePageChange = (newPage) => {
-        if (newPage >= 1 && newPage <= totalPages) {
-            router.push(`/tvshows?page=${newPage}`);
-        }
-    };
-    return (
-        <>
-            {loading ? (
-                <p className="text-center">Loading...</p>
-            ) : (
-                <>
-                    <div className="grid grid-cols-2 md:grid-cols-8 gap-4 md:gap-6">
-                        {tvshows.map((show, index) => (
-                            <TvShowCardTemp
-                                key={index}
-                                title={show.title}
-                                episodesCount={show.episodeCount}
-                            />
-                        ))}
-                    </div>
-                    <div className="flex justify-center mt-8 gap-4">
-                        <button
-                            onClick={() => handlePageChange(currentPage - 1)}
-                            disabled={currentPage <= 1}
-                            className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50">
-                            Previous
-                        </button>
-                        <span className="px-4 py-2 text-white">Page {currentPage} of {totalPages}</span>
-                        <button
-                            onClick={() => handlePageChange(currentPage + 1)}
-                            disabled={currentPage >= totalPages}
-                            className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50">
-                            Next
-                        </button>
-                    </div>
-                </>
-            )}
-        </>
-    );
-}
-export default function TvShowsPage() {
-    return (
-        <div className="py-16">
-            <div className="container mx-auto px-6">
-                <h2 className="text-2xl font-bold mb-8 bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
-                    Discover TV Shows
-                </h2>
-                <Suspense fallback={<p className="text-center">Loading...</p>}>
-                    <TvShowsContent />
-                </Suspense>
-            </div>
-        </div>
-    );
-}

frontend/app/tvshows/page.tsx ADDED Viewed

	@@ -0,0 +1,253 @@

+'use client';
+import { useEffect, useState, Suspense } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import { getAllTvShows } from '@/lib/lb';
+import { TvShowCard } from '@/components/tvshow/TvShowCard';
+import { useLoading } from '@/components/loading/SplashScreen';
+function TvShowsContent() {
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const currentPage = parseInt(searchParams.get('page') || '1', 10);
+    const [tvshows, setTvShows] = useState<{ title: string; episodeCount: any }[]>([]);
+    const { loading, setLoading } = useLoading();
+    const itemsPerPage = 16;
+    const [totalPages, setTotalPages] = useState(1);
+    useEffect(() => {
+        async function fetchTvShows() {
+            setLoading(true);
+            try {
+                const data = await getAllTvShows();
+                if (data.length) {
+                    setTotalPages(Math.ceil(data.length / itemsPerPage));
+                    const startIndex = (currentPage - 1) * itemsPerPage;
+                    setTvShows(data.slice(startIndex, startIndex + itemsPerPage));
+                }
+            } catch (error) {
+                console.error('Error fetching TV shows:', error);
+            } finally {
+                setLoading(false);
+            }
+        }
+        fetchTvShows();
+    }, [currentPage]);
+    const handlePageChange = (newPage: number) => {
+        if (newPage >= 1 && newPage <= totalPages) {
+            router.push(`/tvshows?page=${newPage}`);
+        }
+    };
+    return (
+        <div className="p-6" data-oid="mfagx7.">
+            {loading ? (
+                <div className="flex items-center justify-center min-h-[50vh]" data-oid="uooinde">
+                    <div
+                        className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+                        data-oid="eb5e30i"
+                    ></div>
+                </div>
+            ) : (
+                <>
+                    {/* Dynamic Grid */}
+                    <div
+                        className="grid portrait:gap-2 gap-14"
+                        style={{
+                            gridTemplateColumns: 'repeat(auto-fill, minmax(min(150px, 100%), 1fr))',
+                            '@media (min-width: 640px)': {
+                                gridTemplateColumns: 'repeat(auto-fill, minmax(225px, 1fr))',
+                            },
+                            '@media (min-width: 1024px)': {
+                                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+                            },
+                        }}
+                        data-oid="jom5n2c"
+                    >
+                        {tvshows.map((show, index) => (
+                            <div
+                                key={index}
+                                className="transform transition-transform duration-300 hover:scale-105 w-[fit-content]"
+                                data-oid="kwv3cwu"
+                            >
+                                <TvShowCard
+                                    title={show.title}
+                                    episodesCount={show.episodeCount}
+                                    data-oid="b3ud42f"
+                                />
+                            </div>
+                        ))}
+                    </div>
+                    {/* Improved Pagination */}
+                    <div
+                        className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4"
+                        data-oid="4z66hfe"
+                    >
+                        <div className="flex items-center gap-2" data-oid="u0wozr_">
+                            <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="s9brfdx"
+                            >
+                                <svg
+                                    className="w-5 h-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                    data-oid="csf:grn"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                                        data-oid=".d2eccm"
+                                    />
+                                </svg>
+                            </button>
+                            <button
+                                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="bqrtm80"
+                            >
+                                <svg
+                                    className="w-5 h-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                    data-oid="6a0yg4_"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M15 19l-7-7 7-7"
+                                        data-oid="1pnx7a0"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                        <div className="flex items-center gap-2" data-oid="ag92fzo">
+                            <span
+                                className="px-4 py-2 rounded-lg bg-gray-800 text-white font-medium"
+                                data-oid="vu6z6:z"
+                            >
+                                Page {currentPage} of {totalPages}
+                            </span>
+                        </div>
+                        <div className="flex items-center gap-2" data-oid="nckg2v7">
+                            <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="psvhnlh"
+                            >
+                                <svg
+                                    className="w-5 h-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                    data-oid="7_wyhov"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M9 5l7 7-7 7"
+                                        data-oid="dr2p7r0"
+                                    />
+                                </svg>
+                            </button>
+                            <button
+                                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="jrzhg0."
+                            >
+                                <svg
+                                    className="w-5 h-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                    data-oid="os2n_ha"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                                        data-oid="g0m_z54"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}
+export default function TvShowsPage() {
+    return (
+        <div className="min-h-screen pt-24 pb-16" data-oid="vmkunj1">
+            <div className="container mx-auto px-4 sm:px-6 lg:px-8" data-oid="e8nsmst">
+                {/* Header Section */}
+                <div className="mb-8 space-y-4" data-oid="d36d5sh">
+                    <h2 className="text-4xl font-bold text-white" data-oid=".2j2af-">
+                        TV Shows
+                    </h2>
+                    <p className="text-gray-400 max-w-3xl" data-oid="d0g1zry">
+                        Explore our collection of TV series from various genres. From drama to
+                        comedy, find your next binge-worthy show here.
+                    </p>
+                    {/* Genre Filter Chips - You can make these functional later */}
+                    <div className="flex flex-wrap gap-2" data-oid="t-cl4a6">
+                        {['All', 'Action', 'Drama', 'Comedy', 'Anime', 'Sci-Fi'].map((genre) => (
+                            <button
+                                key={genre}
+                                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors
+                                    ${
+                                        genre === 'All'
+                                            ? 'bg-purple-600 text-white'
+                                            : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+                                    }`}
+                                data-oid="wb9w_xa"
+                            >
+                                {genre}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                {/* Content Section */}
+                <div
+                    className="bg-gray-800/30 rounded-3xl backdrop-blur-sm border border-gray-700/50"
+                    data-oid="gxvywvg"
+                >
+                    <Suspense
+                        fallback={
+                            <div
+                                className="flex items-center justify-center min-h-[50vh]"
+                                data-oid="7t-_ota"
+                            >
+                                <div
+                                    className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+                                    data-oid="-4.z3yi"
+                                ></div>
+                            </div>
+                        }
+                        data-oid="cgb8xnf"
+                    >
+                        <TvShowsContent data-oid="731rgcy" />
+                    </Suspense>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/app/tvshows/page.tsx.tmp ADDED Viewed

	@@ -0,0 +1,253 @@

+'use client';
+import { useEffect, useState, Suspense } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import { getAllTvShows } from '@/lib/lb';
+import { TvShowCard } from '@/components/tvshow/TvShowCard';
+import { useLoading } from '@/components/loading/SplashScreen';
+function TvShowsContent() {
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const currentPage = parseInt(searchParams.get('page') || '1', 10);
+    const [tvshows, setTvShows] = useState<{ title: string; episodeCount: any }[]>([]);
+    const { loading, setLoading } = useLoading();
+    const itemsPerPage = 16;
+    const [totalPages, setTotalPages] = useState(1);
+    useEffect(() => {
+        async function fetchTvShows() {
+            setLoading(true);
+            try {
+                const data = await getAllTvShows();
+                if (data.length) {
+                    setTotalPages(Math.ceil(data.length / itemsPerPage));
+                    const startIndex = (currentPage - 1) * itemsPerPage;
+                    setTvShows(data.slice(startIndex, startIndex + itemsPerPage));
+                }
+            } catch (error) {
+                console.error('Error fetching TV shows:', error);
+            } finally {
+                setLoading(false);
+            }
+        }
+        fetchTvShows();
+    }, [currentPage]);
+    const handlePageChange = (newPage: number) => {
+        if (newPage >= 1 && newPage <= totalPages) {
+            router.push(`/tvshows?page=${newPage}`);
+        }
+    };
+    return (
+        <div className="p-6" data-oid="mfagx7.">
+            {loading ? (
+                <div className="flex items-center justify-center min-h-[50vh]" data-oid="uooinde">
+                    <div
+                        className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+                        data-oid="eb5e30i"
+                    ></div>
+                </div>
+            ) : (
+                <>
+                    {/* Dynamic Grid */}
+                    <div
+                        className="grid portrait:gap-2 gap-14"
+                        style={{
+                            gridTemplateColumns: 'repeat(auto-fill, minmax(min(150px, 100%), 1fr))',
+                            '@media (min-width: 640px)': {
+                                gridTemplateColumns: 'repeat(auto-fill, minmax(225px, 1fr))',
+                            },
+                            '@media (min-width: 1024px)': {
+                                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+                            },
+                        }}
+                        data-oid="jom5n2c"
+                    >
+                        {tvshows.map((show, index) => (
+                            <div
+                                key={index}
+                                className="transform transition-transform duration-300 hover:scale-105 w-[fit-content]"
+                                data-oid="kwv3cwu"
+                            >
+                                <TvShowCard
+                                    title={show.title}
+                                    episodesCount={show.episodeCount}
+                                    data-oid="b3ud42f"
+                                />
+                            </div>
+                        ))}
+                    </div>
+                    {/* Improved Pagination */}
+                    <div
+                        className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4"
+                        data-oid="4z66hfe"
+                    >
+                        <div className="flex items-center gap-2" data-oid="u0wozr_">
+                            <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="s9brfdx"
+                            >
+                                <svg
+                                    className="w-5 h-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                    data-oid="csf:grn"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                                        data-oid=".d2eccm"
+                                    />
+                                </svg>
+                            </button>
+                            <button
+                                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="bqrtm80"
+                            >
+                                <svg
+                                    className="w-5 h-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                    data-oid="6a0yg4_"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M15 19l-7-7 7-7"
+                                        data-oid="1pnx7a0"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                        <div className="flex items-center gap-2" data-oid="ag92fzo">
+                            <span
+                                className="px-4 py-2 rounded-lg bg-gray-800 text-white font-medium"
+                                data-oid="vu6z6:z"
+                            >
+                                Page {currentPage} of {totalPages}
+                            </span>
+                        </div>
+                        <div className="flex items-center gap-2" data-oid="nckg2v7">
+                            <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="psvhnlh"
+                            >
+                                <svg
+                                    className="w-5 h-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                    data-oid="7_wyhov"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M9 5l7 7-7 7"
+                                        data-oid="dr2p7r0"
+                                    />
+                                </svg>
+                            </button>
+                            <button
+                                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="jrzhg0."
+                            >
+                                <svg
+                                    className="w-5 h-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                    data-oid="os2n_ha"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                                        data-oid="g0m_z54"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}
+export default function TvShowsPage() {
+    return (
+        <div className="min-h-screen pt-24 pb-16" data-oid="vmkunj1">
+            <div className="container mx-auto px-4 sm:px-6 lg:px-8" data-oid="e8nsmst">
+                {/* Header Section */}
+                <div className="mb-8 space-y-4" data-oid="d36d5sh">
+                    <h2 className="text-4xl font-bold text-white" data-oid=".2j2af-">
+                        TV Shows
+                    </h2>
+                    <p className="text-gray-400 max-w-3xl" data-oid="d0g1zry">
+                        Explore our collection of TV series from various genres. From drama to
+                        comedy, find your next binge-worthy show here.
+                    </p>
+                    {/* Genre Filter Chips - You can make these functional later */}
+                    <div className="flex flex-wrap gap-2" data-oid="t-cl4a6">
+                        {['All', 'Action', 'Drama', 'Comedy', 'Anime', 'Sci-Fi'].map((genre) => (
+                            <button
+                                key={genre}
+                                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors
+                                    ${
+                                        genre === 'All'
+                                            ? 'bg-purple-600 text-white'
+                                            : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+                                    }`}
+                                data-oid="wb9w_xa"
+                            >
+                                {genre}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                {/* Content Section */}
+                <div
+                    className="bg-gray-800/30 rounded-3xl backdrop-blur-sm border border-gray-700/50"
+                    data-oid="gxvywvg"
+                >
+                    <Suspense
+                        fallback={
+                            <div
+                                className="flex items-center justify-center min-h-[50vh]"
+                                data-oid="7t-_ota"
+                            >
+                                <div
+                                    className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+                                    data-oid="-4.z3yi"
+                                ></div>
+                            </div>
+                        }
+                        data-oid="cgb8xnf"
+                    >
+                        <TvShowsContent data-oid="731rgcy" />
+                    </Suspense>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/components/loading/SplashScreen.tsx ADDED Viewed

	@@ -0,0 +1,102 @@

+'use client';
+import { createContext, useContext, useState, ReactNode } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { WEB_VERSION } from '@/lib/config';
+// Create Context
+const LoadingContext = createContext<{
+    loading: boolean;
+    setLoading: (state: boolean) => void;
+} | null>(null);
+// Custom Hook
+export function useLoading() {
+    const context = useContext(LoadingContext);
+    if (!context) {
+        throw new Error('useLoading must be used within a LoadingProvider');
+    }
+    return context;
+}
+// Provider Component
+export function LoadingProvider({ children }: { children: ReactNode }) {
+    const [loading, setLoading] = useState(true);
+    return (
+        <LoadingContext.Provider value={{ loading, setLoading }} data-oid="ehjch.t">
+            <AnimatePresence mode="wait" data-oid="4vxhfjc">
+                {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="rqdqh4a"
+                    >
+                        <div className="relative flex flex-col items-center" data-oid="2c2vljb">
+                            {/* 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="wey21fv"
+                            >
+                                <div className="w-44 h-44 relative " data-oid="-fvshbu">
+                                    <div
+                                        className="animate-pulse absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl"
+                                        data-oid="4a95xnj"
+                                    />
+                                    {/* Inner Background */}
+                                    <div
+                                        className="animate-pulse absolute inset-1 bg-gray-800 rounded-xl"
+                                        data-oid="pjmzzb8"
+                                    />
+                                    {/* Text */}
+                                    <div
+                                        className="absolute inset-0 flex-col items-center text-center flex justify-items-center justify-center"
+                                        data-oid="2xa07_8"
+                                    >
+                                        <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="fyxc:w6"
+                                        >
+                                            NEXORA
+                                        </span>
+                                        <p className="text-gray-300" data-oid=":x61lfc">
+                                            {WEB_VERSION}
+                                        </p>
+                                    </div>
+                                </div>
+                            </motion.div>
+                            {/* Loading Bar */}
+                            <motion.div
+                                initial={{ width: 0 }}
+                                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="bv8_lkk"
+                            />
+                            {/* Loading Text */}
+                            <motion.p
+                                initial={{ opacity: 0, y: 10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ delay: 0.5, ease: 'easeOut' }}
+                                className="mt-6 text-gray-300 text-sm tracking-wide"
+                                data-oid="h3btqc-"
+                            >
+                                Getting things ready for you...
+                            </motion.p>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+            {children}
+        </LoadingContext.Provider>
+    );
+}

frontend/components/movie/{MovieCard.js → MovieCard.tsx} RENAMED Viewed

@@ -4,58 +4,83 @@ import { useEffect, useState } from 'react';
 import { getMovieCard } from '@/lib/lb';
 import Link from 'next/link';
-export const MovieCard = ({ title }) => {
-    const [card, setCard] = useState(null);
     const [imageLoaded, setImageLoaded] = useState(false);
-    const formattedTitle = title.split('/');
     useEffect(() => {
         async function fetchMovieCard() {
             try {
-                const cardData = await getMovieCard(formattedTitle[1]);
                 setCard(cardData);
             } catch (error) {
                 console.error('Error fetching movie card:', error);
             }
         }
         fetchMovieCard();
-    }, []);
     return (
-        <Link href={`/movie/${formattedTitle[1]}`} className="relative group" data-oid="_h1ze:e">
-            <div className="aspect-[2/3] rounded-lg overflow-hidden relative" data-oid="tf3burv">
                 {/* Skeleton Loader */}
                 {!imageLoaded && (
-                    <div className="absolute inset-0 bg-gray-700 animate-pulse rounded-lg" />
                 )}
                 {/* Image */}
                 {card?.image && (
                     <img
                         src={card.image}
                         alt={card.title}
-                        className={`w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-300 opacity-0 transition-opacity ease-in-out duration-500 ${
-                            imageLoaded ? 'opacity-100' : 'opacity-0'
-                        }`}
                         onLoad={() => setImageLoaded(true)}
-                        data-oid="aqx14q7"
                     />
                 )}
-                {/* Overlay */}
                 <div
-                    className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-                    data-oid="c5z5p9j"
                 >
-                    <div className="absolute bottom-0 p-4 w-full" data-oid="-3a50qd">
-                        <h3 className="text-lg font-semibold text-white" data-oid="vw8.q_r">
                             {card?.title || 'Loading...'}
                         </h3>
-                        <div className="flex items-center space-x-2 mt-1" data-oid="382afz5">
-                            <span className="text-yellow-400" data-oid="ol91ry.">
                                 ★ {card?.rating || '0'}
                             </span>
-                            <span className="text-gray-300" data-oid="s8mo0:q">
                                 • {card?.year || '----'}
                             </span>
                         </div>

 import { getMovieCard } from '@/lib/lb';
 import Link from 'next/link';
+interface Card {
+    image: string;
+    title: string;
+    rating: string;
+    year: string;
+}
+export const MovieCard = ({ title }: { title: string }) => {
+    const [card, setCard] = useState<Card | null>(null);
     const [imageLoaded, setImageLoaded] = useState(false);
+    const formattedTitle = title.includes('/') ? title.split('/')[1] : title;
     useEffect(() => {
         async function fetchMovieCard() {
             try {
+                const cardData = await getMovieCard(formattedTitle);
                 setCard(cardData);
             } catch (error) {
                 console.error('Error fetching movie card:', error);
             }
         }
         fetchMovieCard();
+    }, [formattedTitle]);
     return (
+        <Link
+            href={`/movie/${title}`}
+            className="relative block w-[fit-content] h-[fit-content]"
+            data-oid="7arzaxn"
+        >
+            <div
+                className="rounded-lg overflow-hidden relative transition-transform duration-300
+                w-[150px] sm:w-[150px] md:w-[150px] lg:w-[200px] xl:w-[200px]
+                h-[225px] sm:h-[220px] md:h-[250px] lg:h-[310px] xl:h-[325px]"
+                data-oid="jn0s4au"
+            >
                 {/* Skeleton Loader */}
                 {!imageLoaded && (
+                    <div
+                        className="absolute inset-0 bg-gray-700 animate-pulse rounded-lg"
+                        data-oid="aqy:mkn"
+                    />
                 )}
                 {/* Image */}
                 {card?.image && (
                     <img
                         src={card.image}
                         alt={card.title}
+                        className={`w-full h-full object-cover transform group-hover:scale-110 transition-all opacity-0 ease-in-out duration-500
+                        ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
                         onLoad={() => setImageLoaded(true)}
+                        data-oid="0i69h4s"
                     />
                 )}
+                {/* Overlay (always visible on mobile) */}
                 <div
+                    className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"
+                    data-oid=":aitd01"
                 >
+                    <div className="absolute bottom-0 p-4 w-full" data-oid="qy.l4pa">
+                        <h3
+                            className="text-sm sm:text-base md:text-lg font-semibold text-white"
+                            data-oid="ceh2z0f"
+                        >
                             {card?.title || 'Loading...'}
                         </h3>
+                        <div
+                            className="flex items-center space-x-2 mt-1 text-xs sm:text-sm"
+                            data-oid="qnl0hwx"
+                        >
+                            <span className="text-yellow-400" data-oid="bet08uk">
                                 ★ {card?.rating || '0'}
                             </span>
+                            <span className="text-gray-300" data-oid="ei2vuum">
                                 • {card?.year || '----'}
                             </span>
                         </div>

frontend/components/movie/MovieCardTemp.js DELETED Viewed

@@ -1,66 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { getMovieCard } from '@/lib/lb';
-import Link from 'next/link';
-export const MovieCardTemp = ({ title }) => {
-    const [card, setCard] = useState(null);
-    const [imageLoaded, setImageLoaded] = useState(false);
-    useEffect(() => {
-        async function fetchMovieCard() {
-            try {
-                const cardData = await getMovieCard(title);
-                setCard(cardData);
-            } catch (error) {
-                console.error('Error fetching movie card:', error);
-            }
-        }
-        fetchMovieCard();
-    }, []);
-    return (
-        <Link href={`/movie/${title}`} className="relative group" data-oid="_h1ze:e">
-            <div className="aspect-[2/3] rounded-lg overflow-hidden relative" data-oid="tf3burv">
-                {/* Skeleton Loader */}
-                {!imageLoaded && (
-                    <div className="absolute inset-0 bg-gray-700 animate-pulse rounded-lg" />
-                )}
-                {/* Image */}
-                {card?.image && (
-                    <img
-                        src={card.image}
-                        alt={card.title}
-                        className={`w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-300 opacity-0 transition-opacity ease-in-out duration-500 ${
-                            imageLoaded ? 'opacity-100' : 'opacity-0'
-                        }`}
-                        onLoad={() => setImageLoaded(true)}
-                        data-oid="aqx14q7"
-                    />
-                )}
-                {/* Overlay */}
-                <div
-                    className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-                    data-oid="c5z5p9j"
-                >
-                    <div className="absolute bottom-0 p-4 w-full" data-oid="-3a50qd">
-                        <h3 className="text-lg font-semibold text-white" data-oid="vw8.q_r">
-                            {card?.title || 'Loading...'}
-                        </h3>
-                        <div className="flex items-center space-x-2 mt-1" data-oid="382afz5">
-                            <span className="text-yellow-400" data-oid="ol91ry.">
-                                ★ {card?.rating || '0'}
-                            </span>
-                            <span className="text-gray-300" data-oid="s8mo0:q">
-                                • {card?.year || '----'}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Link>
-    );
-};

frontend/components/navigation/DesktopMenu.tsx CHANGED Viewed

@@ -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">
                 Home
             </Link>
-            <Link href="/movies" className="hover:text-purple-400 transition-colors">
                 Movies
             </Link>
-            <Link href="/tvshows" className="hover:text-purple-400 transition-colors">
                 TV Shows
             </Link>
-            <Link href="#" className="hover:text-purple-400 transition-colors">
                 My List
             </Link>
         </div>

 export const DesktopMenu = () => {
     return (
+        <div className="hidden md:flex space-x-8" data-oid="x14h_he">
+            <Link href="/" className="hover:text-purple-400 transition-colors" data-oid="dboxzpn">
                 Home
             </Link>
+            <Link
+                href="/movies"
+                className="hover:text-purple-400 transition-colors"
+                data-oid="7n83ezu"
+            >
                 Movies
             </Link>
+            <Link
+                href="/tvshows"
+                className="hover:text-purple-400 transition-colors"
+                data-oid="3xu:-t3"
+            >
                 TV Shows
             </Link>
+            <Link
+                href="/mylist"
+                className="hover:text-purple-400 transition-colors"
+                data-oid="lhuwt77"
+            >
                 My List
             </Link>
         </div>

frontend/components/navigation/MobileMenu.tsx CHANGED Viewed

@@ -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"
         >
-            <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">
                         Home
                     </Link>
-                    <Link href="/movies" className="block hover:text-purple-400 transition-colors">
                         Movies
                     </Link>
-                    <Link href="/tvshows" className="block hover:text-purple-400 transition-colors">
                         TV Shows
                     </Link>
-                    <Link href="#" className="block hover:text-purple-400 transition-colors">
                         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">
                         Sign In
                     </button>
                 </div>

             leave="transition ease-in duration-200"
             leaveFrom="opacity-100 transform scale-100"
             leaveTo="opacity-0 transform scale-95"
+            data-oid="iko9y9c"
         >
+            <div
+                className="md:hidden bg-gray-900 border-t border-gray-900 bg-opacity-50 backdrop-blur-lg"
+                data-oid="m9tvm_2"
+            >
+                <div className="px-6 py-4 space-y-4" data-oid="th_ve6p">
+                    <Link
+                        href="/"
+                        className="block hover:text-purple-400 transition-colors"
+                        data-oid="losouyn"
+                    >
                         Home
                     </Link>
+                    <Link
+                        href="/movies"
+                        className="block hover:text-purple-400 transition-colors"
+                        data-oid="dc-_o_e"
+                    >
                         Movies
                     </Link>
+                    <Link
+                        href="/tvshows"
+                        className="block hover:text-purple-400 transition-colors"
+                        data-oid="7tr9q01"
+                    >
                         TV Shows
                     </Link>
+                    <Link
+                        href="/mylist"
+                        className="block hover:text-purple-400 transition-colors"
+                        data-oid=".-9li1m"
+                    >
                         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"
+                        data-oid="7se69t7"
+                    >
                         Sign In
                     </button>
                 </div>

frontend/components/navigation/Navbar.tsx CHANGED Viewed

@@ -9,19 +9,24 @@ export const Navbar = () => {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     return (
-        <nav className="fixed w-full z-50 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">
                     <Link
                         href={'/'}
                         className="text-3xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent"
                     >
                         NEXORA
                     </Link>
-                    <DesktopMenu />
                     <button
                         className="md:hidden text-white"
                         onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                     >
                         {isMobileMenuOpen ? (
                             <svg
@@ -29,12 +34,14 @@ export const Navbar = () => {
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24"
                             >
                                 <path
                                     strokeLinecap="round"
                                     strokeLinejoin="round"
                                     strokeWidth={2}
                                     d="M6 18L18 6M6 6l12 12"
                                 />
                             </svg>
                         ) : (
@@ -43,22 +50,27 @@ export const Navbar = () => {
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24"
                             >
                                 <path
                                     strokeLinecap="round"
                                     strokeLinejoin="round"
                                     strokeWidth={2}
                                     d="M4 6h16M4 12h16M4 18h16"
                                 />
                             </svg>
                         )}
                     </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">
                         Sign In
                     </button>
                 </div>
             </div>
-            <MobileMenu isOpen={isMobileMenuOpen} />
         </nav>
     );
 };

     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     return (
+        <nav
+            className="fixed w-full z-50 bg-gradient-to-b from-gray-900 to-transparent backdrop-blur-lg"
+            data-oid="6mitiyb"
+        >
+            <div className="container mx-auto px-6 py-4" data-oid="23ltc1.">
+                <div className="flex items-center justify-between" data-oid="50-cuwq">
                     <Link
                         href={'/'}
                         className="text-3xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent"
+                        data-oid="f-hlmdo"
                     >
                         NEXORA
                     </Link>
+                    <DesktopMenu data-oid="jpxa-wq" />
                     <button
                         className="md:hidden text-white"
                         onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                        data-oid="dljai9s"
                     >
                         {isMobileMenuOpen ? (
                             <svg
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24"
+                                data-oid="29ld4tb"
                             >
                                 <path
                                     strokeLinecap="round"
                                     strokeLinejoin="round"
                                     strokeWidth={2}
                                     d="M6 18L18 6M6 6l12 12"
+                                    data-oid="_znir0_"
                                 />
                             </svg>
                         ) : (
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24"
+                                data-oid="rnc:m-t"
                             >
                                 <path
                                     strokeLinecap="round"
                                     strokeLinejoin="round"
                                     strokeWidth={2}
                                     d="M4 6h16M4 12h16M4 18h16"
+                                    data-oid="n3lg_d8"
                                 />
                             </svg>
                         )}
                     </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"
+                        data-oid="6wedudj"
+                    >
                         Sign In
                     </button>
                 </div>
             </div>
+            <MobileMenu isOpen={isMobileMenuOpen} data-oid="lxv.-c_" />
         </nav>
     );
 };

frontend/components/sections/CastSection.js DELETED Viewed

@@ -1,52 +0,0 @@
-import { useState } from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-export default function CastSection ({ movie }) {
-    const [expanded, setExpanded] = useState(false);
-    return (
-        <div className="flex-1 bg-gray-800 bg-opacity-50 backdrop-blur-md p-4 rounded-xl">
-            <div className="flex justify-between items-center mb-2">
-                <h2 className="text-xl font-semibold text-white">Cast</h2>
-                <button
-                    onClick={() => setExpanded(!expanded)}
-                    className="text-white hover:text-gray-300 flex items-center"
-                >
-                    {expanded ? 'Hide' : 'Show'}{' '}
-                    {expanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
-                </button>
-            </div>
-            {expanded && (
-                <div className="flex flex-wrap gap-4">
-                    {movie.characters?.map((character) => (
-                        <div key={character.id} className="flex items-center space-x-3">
-                            <img
-                                src={
-                                    character.personImgURL ||
-                                    character.image ||
-                                    `https://eu.ui-avatars.com/api/?name=${character.personName}&size=250`
-                                }
-                                alt={character.personName}
-                                className="w-12 h-12 rounded-full object-cover"
-                            />
-                            <div>
-                                <a
-                                    target="_blank"
-                                    href={`https://thetvdb.com/people/${character.url}`}
-                                    className="text-white font-semibold hover:underline"
-                                >
-                                    {character.personName}
-                                </a>
-                                {character.name && (
-                                    <p className="text-sm text-gray-400">as {character.name}</p>
-                                )}
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-};

frontend/components/sections/CastSection.tsx ADDED Viewed

	@@ -0,0 +1,85 @@

+import { useState } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+interface CastSectionProps {
+    movie: {
+        characters?: {
+            id: string;
+            personImgURL?: string;
+            image?: string;
+            personName: string;
+            url?: string;
+            name?: string;
+        }[];
+    };
+}
+export default function CastSection({ movie }: CastSectionProps) {
+    const [expanded, setExpanded] = useState(false);
+    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"
+            data-oid="ffawpf_"
+        >
+            <div className="flex justify-between items-center mb-2" data-oid=".muu25o">
+                <h2 className="text-xl font-semibold text-white" data-oid="7lng_mo">
+                    Cast
+                </h2>
+                {movie.characters && movie.characters.length > 5 && (
+                    <button
+                        onClick={() => setExpanded(!expanded)}
+                        className="text-white hover:text-gray-300 flex items-center"
+                        data-oid="lh9t.zb"
+                    >
+                        {expanded ? 'Hide' : 'Show'}{' '}
+                        {expanded ? (
+                            <ChevronUp size={18} data-oid="y8.f7ty" />
+                        ) : (
+                            <ChevronDown size={18} data-oid=".bovf._" />
+                        )}
+                    </button>
+                )}
+            </div>
+            <div className="flex flex-wrap gap-4" data-oid="e149i:n">
+                {visibleCharacters?.map((character) => (
+                    <div
+                        key={character.id}
+                        className="flex items-center space-x-3"
+                        data-oid="7u:62hb"
+                    >
+                        <img
+                            src={
+                                character.personImgURL ||
+                                character.image ||
+                                `https://eu.ui-avatars.com/api/?name=${character.personName}&size=250`
+                            }
+                            alt={character.personName}
+                            className="w-12 h-12 rounded-full object-cover"
+                            data-oid="gck7k98"
+                        />
+                        <div data-oid="vldv6x2">
+                            <a
+                                target="_blank"
+                                href={`https://thetvdb.com/people/${character.url}`}
+                                className="text-white font-semibold hover:underline"
+                                data-oid="o1rg6pp"
+                            >
+                                {character.personName}
+                            </a>
+                            {character.name && (
+                                <p className="text-sm text-gray-400" data-oid="q9kg8ee">
+                                    as {character.name}
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

frontend/components/sections/NewContentSection.js DELETED Viewed

@@ -1,67 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { getNewContents } from '@/lib/lb';
-import { MovieCardTemp } from '@/components/movie/MovieCardTemp';
-import { MovieCard } from '../movie/MovieCard';
-import {TvShowCardTemp} from '@components/tvshow/TvShowCardTemp';
-export default function NewContentSection() {
-    const [movies, setMovies] = useState([]);
-    const [tvshows, setTvShows] = useState([]);
-    useEffect(() => {
-        async function fetchMovies() {
-            try {
-                const { movies, tvshows } = await getNewContents(10); // Correctly destructure as an object
-                setMovies(movies);
-                setTvShows(tvshows);
-            } catch (error) {
-                console.error('Error fetching slides:', error);
-            }
-        }
-        fetchMovies();
-    }, []);
-    return (
-        <>
-            <section className="py-16" data-oid="yvz2_cl">
-                <div className="container mx-auto px-6" data-oid="_xku7wx">
-                    <h2
-                        className="text-2xl font-bold mb-8 bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent"
-                        data-oid="62.dxoz"
-                    >
-                        Discover Movies
-                    </h2>
-                    <div
-                        className="grid grid-cols-2 md:grid-cols-6 gap-4 md:gap-6"
-                        data-oid="owphddg"
-                    >
-                        {movies.map((movie, index) => (
-                            <MovieCardTemp title={movie.title} key={index} />
-                            //<MovieCard title={movie?.title} key={index}/>
-                        ))}
-                    </div>
-                </div>
-            </section>
-            <section className="py-16" data-oid="yvz2_cl">
-                <div className="container mx-auto px-6" data-oid="_xku7wx">
-                    <h2
-                        className="text-2xl font-bold mb-8 bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent"
-                        data-oid="62.dxoz"
-                    >
-                        Discover Tv Shows
-                    </h2>
-                    <div
-                        className="grid grid-cols-2 md:grid-cols-6 gap-4 md:gap-6"
-                        data-oid="owphddg"
-                    >
-                        {tvshows.map((tvshow, index) => (
-                             <TvShowCardTemp title={tvshow.title} key={index} />
-                            //<MovieCard title={tvshow?.title} key={index}/>
-                        ))}
-                    </div>
-                </div>
-            </section>
-        </>
-    );
-}

frontend/components/sections/NewContentSection.tsx ADDED Viewed

	@@ -0,0 +1,45 @@

+'use client';
+import { useEffect, useState } from 'react';
+import { getNewContents } from '@/lib/lb';
+import { MovieCard } from '../movie/MovieCard';
+import { TvShowCard } from '@/components/tvshow/TvShowCard';
+import ScrollSection from './ScrollSection';
+export default function NewContentSection() {
+    const [movies, setMovies] = useState<any[]>([]);
+    const [tvshows, setTvShows] = useState<any[]>([]);
+    useEffect(() => {
+        async function fetchMovies() {
+            try {
+                const { movies, tvshows } = await getNewContents(20); // Correctly destructure as an object
+                setMovies(movies as any[]);
+                setTvShows(tvshows as any[]);
+            } catch (error) {
+                console.error('Error fetching slides:', error);
+            }
+        }
+        fetchMovies();
+    }, []);
+    return (
+        <div className="space-y-2" data-oid="ioedrx4">
+            <ScrollSection title="Discover Movies" data-oid="iezk49o">
+                {movies.map((movie, index) => (
+                    <MovieCard key={index} title={movie.title} data-oid="6ml:-c3" />
+                ))}
+            </ScrollSection>
+            <ScrollSection title="Discover TV Shows" data-oid="vldcu:9">
+                {tvshows.map((tvshow, index) => (
+                    <TvShowCard
+                        key={index}
+                        title={tvshow.title}
+                        episodesCount={null}
+                        data-oid="6w316m-"
+                    />
+                ))}
+            </ScrollSection>
+        </div>
+    );
+}

frontend/components/sections/ScrollSection.tsx ADDED Viewed

	@@ -0,0 +1,110 @@

+'use client';
+import { useRef, useState } from 'react';
+interface ScrollSectionProps {
+    title: string;
+    children: React.ReactNode;
+}
+export default function ScrollSection({ title, children }: ScrollSectionProps) {
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const [showLeftArrow, setShowLeftArrow] = useState(false);
+    const [showRightArrow, setShowRightArrow] = useState(true);
+    const handleScroll = () => {
+        if (scrollContainerRef.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+            setShowLeftArrow(scrollLeft > 0);
+            setShowRightArrow(scrollLeft < scrollWidth - clientWidth - 10);
+        }
+    };
+    const scroll = (direction: 'left' | 'right') => {
+        if (scrollContainerRef.current) {
+            const scrollAmount = scrollContainerRef.current.clientWidth * 0.8;
+            scrollContainerRef.current.scrollBy({
+                left: direction === 'left' ? -scrollAmount : scrollAmount,
+                behavior: 'smooth',
+            });
+        }
+    };
+    return (
+        <section className="py-4 relative group" data-oid="l.ccaf8">
+            <div className="container mx-auto px-6" data-oid="3t:dihz">
+                <h2
+                    className="text-2xl font-bold mb-6 bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent"
+                    data-oid="ekzzpou"
+                >
+                    {title}
+                </h2>
+                {/* Scroll Arrows */}
+                {showLeftArrow && (
+                    <button
+                        onClick={() => scroll('left')}
+                        className="absolute left-0 top-1/2 z-10 transform -translate-y-1/2 bg-gradient-to-r from-gray-900 to-transparent pl-2 pr-8 py-16"
+                        data-oid="cd65:45"
+                    >
+                        <svg
+                            className="w-8 h-8 text-white hover:text-purple-400 transition-colors"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            data-oid="-dl2br6"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M15 19l-7-7 7-7"
+                                data-oid="n7uuo9l"
+                            />
+                        </svg>
+                    </button>
+                )}
+                {showRightArrow && (
+                    <button
+                        onClick={() => scroll('right')}
+                        className="absolute right-0 top-1/2 z-10 transform -translate-y-1/2 bg-gradient-to-l from-gray-900 to-transparent pr-2 pl-8 py-16"
+                        data-oid="s.ixi1d"
+                    >
+                        <svg
+                            className="w-8 h-8 text-white hover:text-purple-400 transition-colors"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            data-oid="sklx_ai"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M9 5l7 7-7 7"
+                                data-oid="5izu.kw"
+                            />
+                        </svg>
+                    </button>
+                )}
+                {/* Scrollable Content */}
+                <div
+                    ref={scrollContainerRef}
+                    onScroll={handleScroll}
+                    className="flex landscape:gap-5 gap-4 overflow-x-auto scrollbar-hide scroll-smooth"
+                    style={{
+                        maskImage:
+                            'linear-gradient(to right, transparent, black 2%, black 98%, transparent)',
+                        WebkitMaskImage:
+                            'linear-gradient(to right, transparent, black 2%, black 98%, transparent)',
+                    }}
+                    data-oid="9xwvre:"
+                >
+                    {children}
+                </div>
+            </div>
+        </section>
+    );
+}

frontend/components/sections/TrendingSection.js DELETED Viewed

@@ -1,38 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { getAllMovies } from '@/lib/lb';
-import { MovieCard } from '@/components/movie/MovieCard';
-export const TrendingSection = () => {
-        const [movies, setMovies] = useState([]);
-        useEffect(() => {
-            async function fetchMovies() {
-                try {
-                    const data = await getAllMovies();
-                    setMovies(data);
-                } catch (error) {
-                    console.error('Error fetching slides:', error);
-                }
-            }
-            fetchMovies();
-        }, []);
-    return (
-        <section className="py-16" data-oid="yvz2_cl">
-            <div className="container mx-auto px-6" data-oid="_xku7wx">
-                <h2
-                    className="text-2xl font-bold mb-8 bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent"
-                    data-oid="62.dxoz"
-                >
-                    Trending Now
-                </h2>
-                <div className="grid grid-cols-2 md:grid-cols-6 gap-4 md:gap-6" data-oid="owphddg">
-                    {movies.map((title, index) => (
-                        <MovieCard title={title} key={index} />
-                    ))}
-                </div>
-            </div>
-        </section>
-    );
-};

frontend/components/tvshow/{TvShowCard.js → TvShowCard.tsx} RENAMED Viewed

@@ -4,58 +4,96 @@ import { useEffect, useState } from 'react';
 import { getTvShowCard } from '@/lib/lb';
 import Link from 'next/link';
-export const TvShowCard = ({ title }) => {
-    const [card, setCard] = useState(null);
     const [imageLoaded, setImageLoaded] = useState(false);
-    const formattedTitle = title.split('/');
     useEffect(() => {
-        async function fetchMovieCard() {
             try {
-                const cardData = await getTvShowCard(formattedTitle[1]);
                 setCard(cardData);
             } catch (error) {
-                console.error('Error fetching movie card:', error);
             }
         }
-        fetchMovieCard();
-    }, []);
     return (
-        <Link href={`/tvshow/${formattedTitle[1]}`} className="relative group" data-oid="_h1ze:e">
-            <div className="aspect-[2/3] rounded-lg overflow-hidden relative" data-oid="tf3burv">
                 {/* Skeleton Loader */}
                 {!imageLoaded && (
-                    <div className="absolute inset-0 bg-gray-700 animate-pulse rounded-lg" />
                 )}
                 {/* Image */}
                 {card?.image && (
                     <img
                         src={card.image}
                         alt={card.title}
-                        className={`w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-300 opacity-0 transition-opacity ease-in-out duration-500 ${
-                            imageLoaded ? 'opacity-100' : 'opacity-0'
-                        }`}
                         onLoad={() => setImageLoaded(true)}
-                        data-oid="aqx14q7"
                     />
                 )}
-                {/* Overlay */}
                 <div
-                    className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-                    data-oid="c5z5p9j"
                 >
-                    <div className="absolute bottom-0 p-4 w-full" data-oid="-3a50qd">
-                        <h3 className="text-lg font-semibold text-white" data-oid="vw8.q_r">
                             {card?.title || 'Loading...'}
                         </h3>
-                        <div className="flex items-center space-x-2 mt-1" data-oid="382afz5">
-                            <span className="text-yellow-400" data-oid="ol91ry.">
                                 ★ {card?.rating || '0'}
                             </span>
-                            <span className="text-gray-300" data-oid="s8mo0:q">
                                 • {card?.year || '----'}
                             </span>
                         </div>

 import { getTvShowCard } from '@/lib/lb';
 import Link from 'next/link';
+interface Card {
+    image: string;
+    title: string;
+    rating: string;
+    year: string;
+}
+export const TvShowCard = ({
+    title,
+    episodesCount = null,
+}: {
+    title: string;
+    episodesCount: number | null;
+}) => {
+    const [card, setCard] = useState<Card | null>(null);
     const [imageLoaded, setImageLoaded] = useState(false);
     useEffect(() => {
+        async function fetchTvShowCard() {
             try {
+                const cardData = await getTvShowCard(title);
                 setCard(cardData);
             } catch (error) {
+                console.error('Error fetching TV show card:', error);
             }
         }
+        fetchTvShowCard();
+    }, [title]); // Added title as dependency to prevent stale state issues
     return (
+        <Link
+            href={`/tvshow/${title}`}
+            className="relative block w-[fit-content]"
+            data-oid="ov688_a"
+        >
+            <div
+                className="rounded-lg overflow-hidden relative transition-transform duration-300
+                w-[130px] sm:w-[150px] md:w-[150px] lg:w-[180px] xl:w-[200px]
+                "
+                data-oid="cvzn.gm"
+            >
+                {/* Episodes Count Bubble */}
+                {episodesCount !== null && (
+                    <div
+                        className="absolute top-2 right-1 z-10 bg-violet-700 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg"
+                        data-oid="q32w..7"
+                    >
+                        {episodesCount} Ep{episodesCount > 1 ? 's' : ''}
+                    </div>
+                )}
                 {/* Skeleton Loader */}
                 {!imageLoaded && (
+                    <div
+                        className="absolute inset-0 bg-gray-700 animate-pulse rounded-lg"
+                        data-oid="z4z:q2x"
+                    />
                 )}
                 {/* Image */}
                 {card?.image && (
                     <img
                         src={card.image}
                         alt={card.title}
+                        className={`w-full h-full object-cover transform group-hover:scale-110 transition-all opacity-0 ease-in-out duration-500
+                        ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
                         onLoad={() => setImageLoaded(true)}
+                        data-oid="4e47cca"
                     />
                 )}
+                {/* Overlay (always visible on mobile) */}
                 <div
+                    className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"
+                    data-oid="u:mamg5"
                 >
+                    <div className="absolute bottom-0 p-4 w-full" data-oid="pnq95qw">
+                        <h3
+                            className="text-sm sm:text-base md:text-lg font-semibold text-white"
+                            data-oid="dh5njzq"
+                        >
                             {card?.title || 'Loading...'}
                         </h3>
+                        <div
+                            className="flex items-center space-x-2 mt-1 text-xs sm:text-sm"
+                            data-oid="yq8hk20"
+                        >
+                            <span className="text-yellow-400" data-oid=".0_zsul">
                                 ★ {card?.rating || '0'}
                             </span>
+                            <span className="text-gray-300" data-oid="pz11um6">
                                 • {card?.year || '----'}
                             </span>
                         </div>

frontend/components/tvshow/TvShowCardTemp.js DELETED Viewed

@@ -1,63 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { getTvShowCard } from '@/lib/lb';
-import Link from 'next/link';
-export const TvShowCardTemp = ({ title, episodesCount = null }) => {
-    const [card, setCard] = useState(null);
-    const [imageLoaded, setImageLoaded] = useState(false);
-    useEffect(() => {
-        async function fetchTvShowCard() {
-            try {
-                const cardData = await getTvShowCard(title);
-                setCard(cardData);
-            } catch (error) {
-                console.error('Error fetching TV show card:', error);
-            }
-        }
-        fetchTvShowCard();
-    }, [title]); // Added title as dependency to prevent stale state issues
-    return (
-        <Link href={`/tvshow/${title}`} className="relative group">
-            <div className="aspect-[2/3] rounded-lg overflow-hidden relative">
-                {/* Episodes Count Bubble */}
-                {episodesCount !== null && (
-                    <div className="absolute top-2 right-1 z-10 bg-violet-700 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
-                        {episodesCount} Ep{episodesCount > 1 ? 's' : ''}
-                    </div>
-                )}
-                {/* Skeleton Loader */}
-                {!imageLoaded && (
-                    <div className="absolute inset-0 bg-gray-700 animate-pulse rounded-lg" />
-                )}
-                {/* Image */}
-                {card?.image && (
-                    <img
-                        src={card.image}
-                        alt={card?.title || 'TV Show Poster'}
-                        className={`w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-300 ${
-                            imageLoaded ? 'opacity-100' : 'opacity-0'
-                        }`}
-                        onLoad={() => setImageLoaded(true)}
-                    />
-                )}
-                {/* Overlay */}
-                <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                    <div className="absolute bottom-0 p-4 w-full">
-                        <h3 className="text-lg font-semibold text-white">{card?.title || 'Loading...'}</h3>
-                        <div className="flex items-center space-x-2 mt-1">
-                            <span className="text-yellow-400">★ {card?.rating || '0'}</span>
-                            <span className="text-gray-300">• {card?.year || '----'}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Link>
-    );
-};

frontend/lib/LoadbalancerAPI.js CHANGED Viewed

@@ -1,141 +1,158 @@
 class LoadBalancerAPI {
-    constructor(baseURL) {
-      this.baseURL = baseURL;
-      this.filmCache = null; // Cache for movie store
-      this.tvCache = null;   // Cache for series store
-    }
-    // -----------------------------
-    // Public API Methods
-    // -----------------------------
-    async getInstances() {
-      return await this._get('/api/get/instances');
-    }
-    async getInstancesHealth() {
-      return await this._get('/api/get/instances/health');
-    }
-    async getMovieByTitle(title) {
-      return await this._get(`/api/get/movie/${encodeURIComponent(title)}`);
-    }
-    async getSeriesEpisode(title, season, episode) {
-      return await this._get(`/api/get/series/${encodeURIComponent(title)}/${season}/${episode}`);
-    }
-    async getSeriesStore() {
-      const response = await this._get('/api/get/series/store');
-      if (response && Object.keys(response).length > 0) {
-        this.tvCache = response;
-      }
-      return this.tvCache || {};
-    }
-    async getMovieStore() {
-      const response = await this._get('/api/get/movie/store');
-      if (response && Object.keys(response).length > 0) {
-        this.filmCache = response;
-      }
-      return this.filmCache || {};
-    }
-    async getMovieMetadataByTitle(title) {
-      return await this._get(`/api/get/movie/metadata/${encodeURIComponent(title)}`);
-    }
-    async getMovieCard(title) {
-      return await this._get(`/api/get/movie/card/${encodeURIComponent(title)}`);
-    }
-    async getSeriesMetadataByTitle(title) {
-      return await this._get(`/api/get/series/metadata/${encodeURIComponent(title)}`);
-    }
-    async getSeriesCard(title) {
-      return await this._get(`/api/get/series/card/${encodeURIComponent(title)}`);
-    }
-    async getSeasonMetadataBySeriesId(series_id, season) {
-      return await this._get(`/api/get/series/metadata/${series_id}/${season}`);
-    }
-    async getAllMovies() {
-      return await this._get('/api/get/movie/all');
-    }
-    async getAllSeriesShows() {
-      return await this._get('/api/get/series/all');
     }
-    async getRecent(limit = 5) {
-      return await this._get(`/api/get/recent?limit=${limit}`);
     }
-    async getGenreItems(genres, mediaType = null, limit = 5) {
-      const params = new URLSearchParams();
-      genres.forEach(genre => params.append('genre', genre));
-      params.append('limit', limit);
-      if (mediaType) {
-        params.append('media_type', mediaType);
-      }
-      return await this._get(`/api/get/genre?${params.toString()}`);
     }
-    async getDownloadProgress(url) {
-      return await this._getNoBase(url);
     }
-    // -----------------------------
-    // Helper Methods
-    // -----------------------------
-    async _get(endpoint) {
-      return await this._request(`${this.baseURL}${endpoint}`, { method: 'GET' });
     }
-    async _getNoBase(url) {
-      return await this._request(url, { method: 'GET' });
     }
-    async _post(endpoint, body) {
-      return await this._request(`${this.baseURL}${endpoint}`, {
-        method: 'POST',
-        body: JSON.stringify(body)
       });
     }
-    async _request(url, options) {
-      try {
-        const response = await fetch(url, {
-          headers: { 'Content-Type': 'application/json' },
-          ...options,
-        });
-        console.log(`API Request: ${url} with options: ${JSON.stringify(options)}`);
-        return await this._handleResponse(response);
-      } catch (error) {
-        console.error(`Request error for ${url}:`, error);
-        throw error;
-      }
-    }
-    async _handleResponse(response) {
-      if (!response.ok) {
-        const errorDetails = await response.text();
-        throw new Error(`HTTP Error ${response.status}: ${errorDetails}`);
-      }
-      try {
-        return await response.json();
-      } catch (error) {
-        console.error('Error parsing JSON response:', error);
-        throw error;
-      }
-    }
-    // Utility method to clear caches if needed
-    clearCache() {
-      this.filmCache = null;
-      this.tvCache = null;
     }
   }
-  export { LoadBalancerAPI };

 class LoadBalancerAPI {
+  constructor(baseURL) {
+    this.baseURL = baseURL;
+    this.cache = {
+      filmStore: null,
+      tvStore: null,
+      allMovies: null,
+      allSeries: null,
+      movieMetadata: new Map(),
+      seriesMetadata: new Map(),
+    };
+  }
+  async getInstances() {
+    return await this._get('/api/get/instances');
+  }
+  async getInstancesHealth() {
+    return await this._get('/api/get/instances/health');
+  }
+  async getMovieByTitle(title) {
+    return await this._get(`/api/get/movie/${encodeURIComponent(title)}`);
+  }
+  async getSeriesEpisode(title, season, episode) {
+    return await this._get(`/api/get/series/${encodeURIComponent(title)}/${season}/${episode}`);
+  }
+  async getSeriesStore() {
+    if (!this.cache.tvStore) {
+      this.cache.tvStore = await this._get('/api/get/series/store');
     }
+    return this.cache.tvStore || {};
+  }
+  async getMovieStore() {
+    if (!this.cache.filmStore) {
+      this.cache.filmStore = await this._get('/api/get/movie/store');
     }
+    return this.cache.filmStore || {};
+  }
+  async getMovieMetadataByTitle(title) {
+    if (!this.cache.movieMetadata.has(title)) {
+      const metadata = await this._get(`/api/get/movie/metadata/${encodeURIComponent(title)}`);
+      this.cache.movieMetadata.set(title, metadata);
     }
+    return this.cache.movieMetadata.get(title);
+  }
+  async getMovieCard(title) {
+    return await this._get(`/api/get/movie/card/${encodeURIComponent(title)}`);
+  }
+  async getSeriesMetadataByTitle(title) {
+    if (!this.cache.seriesMetadata.has(title)) {
+      const metadata = await this._get(`/api/get/series/metadata/${encodeURIComponent(title)}`);
+      this.cache.seriesMetadata.set(title, metadata);
     }
+    return this.cache.seriesMetadata.get(title);
+  }
+  async getSeriesCard(title) {
+    return await this._get(`/api/get/series/card/${encodeURIComponent(title)}`);
+  }
+  async getSeasonMetadataBySeriesId(series_id, season) {
+    return await this._get(`/api/get/series/metadata/${series_id}/${season}`);
+  }
+  async getAllMovies() {
+    if (!this.cache.allMovies) {
+      this.cache.allMovies = await this._get('/api/get/movie/all');
     }
+    return this.cache.allMovies;
+  }
+  async getAllSeriesShows() {
+    if (!this.cache.allSeries) {
+      this.cache.allSeries = await this._get('/api/get/series/all');
     }
+    return this.cache.allSeries;
+  }
+  async getRecent(limit = 5) {
+    return await this._get(`/api/get/recent?limit=${limit}`);
+  }
+  async getGenreItems(genres, mediaType = null, limit = 5) {
+    const params = new URLSearchParams();
+    genres.forEach(genre => params.append('genre', genre));
+    params.append('limit', limit);
+    if (mediaType) {
+      params.append('media_type', mediaType);
+    }
+    return await this._get(`/api/get/genre?${params.toString()}`);
+  }
+  async getDownloadProgress(url) {
+    return await this._getNoBase(url);
+  }
+  async _get(endpoint) {
+    return await this._request(`${this.baseURL}${endpoint}`, { method: 'GET' });
+  }
+  async _getNoBase(url) {
+    return await this._request(url, { method: 'GET' });
+  }
+  async _post(endpoint, body) {
+    return await this._request(`${this.baseURL}${endpoint}`, {
+      method: 'POST',
+      body: JSON.stringify(body)
+    });
+  }
+  async _request(url, options) {
+    try {
+      const response = await fetch(url, {
+        headers: { 'Content-Type': 'application/json' },
+        ...options,
       });
+      console.log(`API Request: ${url} with options: ${JSON.stringify(options)}`);
+      return await this._handleResponse(response);
+    } catch (error) {
+      console.error(`Request error for ${url}:`, error);
+      throw error;
     }
+  }
+  async _handleResponse(response) {
+    if (!response.ok) {
+      const errorDetails = await response.text();
+      throw new Error(`HTTP Error ${response.status}: ${errorDetails}`);
+    }
+    try {
+      return await response.json();
+    } catch (error) {
+      console.error('Error parsing JSON response:', error);
+      throw error;
     }
   }
+  clearCache() {
+    this.cache = {
+      filmStore: null,
+      tvStore: null,
+      allMovies: null,
+      allSeries: null,
+      movieMetadata: new Map(),
+      seriesMetadata: new Map(),
+    };
+  }
+}
+export { LoadBalancerAPI };

frontend/lib/config.js DELETED Viewed

File without changes

frontend/lib/config.tsx ADDED Viewed

	@@ -0,0 +1 @@


1	+ export const WEB_VERSION = 'v0.1.2 beta';

frontend/package-lock.json CHANGED Viewed

@@ -13,6 +13,7 @@
                 "@radix-ui/react-slot": "^1.1.0",
                 "class-variance-authority": "^0.7.0",
                 "clsx": "^2.1.1",
                 "lucide-react": "^0.438.0",
                 "next": "14.2.23",
                 "next-nprogress-bar": "^2.4.4",
@@ -2586,6 +2587,33 @@
                 "url": "https://github.com/sponsors/isaacs"
             }
         },
         "node_modules/fs.realpath": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3660,6 +3688,21 @@
                 "node": ">=16 || 14 >=14.17"
             }
         },
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

                 "@radix-ui/react-slot": "^1.1.0",
                 "class-variance-authority": "^0.7.0",
                 "clsx": "^2.1.1",
+                "framer-motion": "^12.4.2",
                 "lucide-react": "^0.438.0",
                 "next": "14.2.23",
                 "next-nprogress-bar": "^2.4.4",
                 "url": "https://github.com/sponsors/isaacs"
             }
         },
+        "node_modules/framer-motion": {
+            "version": "12.4.2",
+            "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.2.tgz",
+            "integrity": "sha512-pW307cQKjDqEuO1flEoIFf6TkuJRfKr+c7qsHAJhDo4368N/5U8/7WU8J+xhd9+gjmOgJfgp+46evxRRFM39dA==",
+            "license": "MIT",
+            "dependencies": {
+                "motion-dom": "^12.0.0",
+                "motion-utils": "^12.0.0",
+                "tslib": "^2.4.0"
+            },
+            "peerDependencies": {
+                "@emotion/is-prop-valid": "*",
+                "react": "^18.0.0 || ^19.0.0",
+                "react-dom": "^18.0.0 || ^19.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/is-prop-valid": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                },
+                "react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/fs.realpath": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
                 "node": ">=16 || 14 >=14.17"
             }
         },
+        "node_modules/motion-dom": {
+            "version": "12.0.0",
+            "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
+            "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
+            "license": "MIT",
+            "dependencies": {
+                "motion-utils": "^12.0.0"
+            }
+        },
+        "node_modules/motion-utils": {
+            "version": "12.0.0",
+            "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+            "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
+            "license": "MIT"
+        },
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

frontend/package.json CHANGED Viewed

@@ -15,6 +15,7 @@
         "@radix-ui/react-slot": "^1.1.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "lucide-react": "^0.438.0",
         "next": "14.2.23",
         "next-nprogress-bar": "^2.4.4",

         "@radix-ui/react-slot": "^1.1.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "framer-motion": "^12.4.2",
         "lucide-react": "^0.438.0",
         "next": "14.2.23",
         "next-nprogress-bar": "^2.4.4",

frontend/yarn.lock CHANGED Viewed

@@ -1331,6 +1331,15 @@ foreground-child@^3.1.0:
     cross-spawn "^7.0.0"
     signal-exit "^4.0.1"
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
@@ -1950,6 +1959,18 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 ms@^2.1.1, ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
@@ -2282,7 +2303,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.2.0, react-dom@>=16.8.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -2295,7 +2316,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.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:
   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==

     cross-spawn "^7.0.0"
     signal-exit "^4.0.1"
+framer-motion@^12.4.2:
+  version "12.4.2"
+  resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.2.tgz"
+  integrity sha512-pW307cQKjDqEuO1flEoIFf6TkuJRfKr+c7qsHAJhDo4368N/5U8/7WU8J+xhd9+gjmOgJfgp+46evxRRFM39dA==
+  dependencies:
+    motion-dom "^12.0.0"
+    motion-utils "^12.0.0"
+    tslib "^2.4.0"
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+motion-dom@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz"
+  integrity sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==
+  dependencies:
+    motion-utils "^12.0.0"
+motion-utils@^12.0.0:
+  version "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:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   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:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   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:
   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==