v0.1.4 beta

frontend/TODO.md

@@ -0,0 +1,14 @@
+# Project
+
+Project Description
+
+<em>[TODO.md spec & Kanban Board](https://bit.ly/3fCwKfM)</em>
+
+### Todo
+
+
+### In Progress
+
+### Done ✓
+
+

frontend/app/movies/page.tsx

@@ -5,103 +5,246 @@ import { useSearchParams, useRouter } from 'next/navigation';
 import { getAllMovies } from '@/lib/lb';
 import { MovieCard } from '@/components/movie/MovieCard';
 import { useLoading } from '@/components/loading/SplashScreen';
+import GenresFilter from '@/components/shared/GenresFilter';
 
 function MoviesContent() {
-    const searchParams = useSearchParams();
-    const router = useRouter();
-    const currentPage = parseInt(searchParams.get('page') || '1', 10);
-    const [movies, setMovies] = useState<any[]>([]);
-    const { loading, setLoading } = useLoading();
-    const itemsPerPage = 16;
-    const [totalPages, setTotalPages] = useState(1);
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const currentPage = parseInt(searchParams.get('page') || '1', 10);
+  const [movies, setMovies] = useState<any[]>([]);
+  const [allMovies, setAllMovies] = useState<any[]>([]);
+  const { loading, setLoading } = useLoading();
+  const itemsPerPage = 20;
+  const [totalPages, setTotalPages] = useState(1);
 
-    useEffect(() => {
-        async function fetchMovies() {
-            setLoading(true);
-            try {
-                const data: any[] = (await getAllMovies()) || [];
-                const totalMovies = data?.length;
-                setTotalPages(Math.ceil(totalMovies / itemsPerPage));
-                const startIndex = (currentPage - 1) * itemsPerPage;
-                const paginatedMovies = data?.slice(startIndex, startIndex + itemsPerPage);
-                setMovies(paginatedMovies);
-            } catch (error) {
-                console.error('Error fetching movies:', error);
-            } finally {
-                setLoading(false);
-            }
+  // Fetch all movies once on mount
+  useEffect(() => {
+    async function fetchMovies() {
+      setLoading(true);
+      try {
+        const data = await getAllMovies();
+        if (data.length) {
+          // Sort the data to ensure a consistent order (e.g., alphabetically by title)
+          const sortedData = [...data].sort((a, b) =>
+            a.title.localeCompare(b.title)
+          );
+          setAllMovies(sortedData);
+          setTotalPages(Math.ceil(sortedData.length / itemsPerPage));
         }
-        fetchMovies();
-    }, [currentPage]);
+      } catch (error) {
+        console.error('Error fetching TV shows:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchMovies();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    const handlePageChange = (newPage: number) => {
-        router.push(`/movies?page=${newPage}`);
-    };
+  // Update the displayed movies when the page or full list changes
+  useEffect(() => {
+    if (allMovies.length) {
+      const startIndex = (currentPage - 1) * itemsPerPage;
+      setMovies(allMovies.slice(startIndex, startIndex + itemsPerPage));
+    }
+  }, [allMovies, currentPage]);
 
-    return (
+  const handlePageChange = (newPage: number) => {
+    if (newPage >= 1 && newPage <= totalPages) {
+      router.push(`/movies?page=${newPage}`);
+    }
+  };
+
+  return (
+    <div className="portrait:p-2 p-4" data-oid="z4j5t8d">
+      {loading ? (
+        <div
+          className="flex items-center justify-center min-h-[60vh]"
+          data-oid="jdvygx2"
+        >
+          <div
+            className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+            data-oid="ex20n6p"
+          ></div>
+        </div>
+      ) : (
         <>
-            {loading ? (
-                <p className="text-center" data-oid="3ozsx6.">
-                    Loading...
-                </p>
-            ) : (
-                <>
-                    <div
-                        className="grid grid-cols-2 md:grid-cols-6 gap-4 md:gap-6"
-                        data-oid="zbazz1e"
-                    >
-                        {movies.map((title, index) => (
-                            <MovieCard title={title} key={`${currentPage}page${index}`} data-oid="mc:2.uh" />
-                        ))}
-                    </div>
-                    <div className="flex justify-center mt-8 gap-4" data-oid="noq2z2.">
-                        <button
-                            onClick={() => handlePageChange(currentPage - 1)}
-                            disabled={currentPage <= 1}
-                            className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50"
-                            data-oid="d:8u196"
-                        >
-                            Previous
-                        </button>
-                        <span className="px-4 py-2 text-white" data-oid="v7is21m">
-                            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="b.bxaco"
-                        >
-                            Next
-                        </button>
-                    </div>
-                </>
-            )}
-        </>
-    );
-}
+          {/* Default Movies Grid */}
+          <div
+            key={currentPage}
+            className="flex flex-wrap justify-center items-center portrait:gap-2 gap-10"
+            data-oid="ke2_x_x"
+          >
+            {movies.map((movie, index) => (
+              <div
+                key={`${movie.title}-${index}`}
+                className="transform transition-transform duration-300 hover:scale-105 w-[fit-content]"
+                data-oid="x:.ceyx"
+              >
+                <MovieCard
+                  title={movie.title}
+                  data-oid="p.v-:hm"
+                />
+              </div>
+            ))}
+          </div>
 
-export default function MoviesPage() {
-    return (
-        <div className="page py-16" data-oid="_s_yu53">
-            <div className="container mx-auto px-6" data-oid="ty5ykip">
-                <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="_y6oahy"
+          {/* Pagination */}
+          <div
+            className="mt-12 flex flex-row items-center justify-center gap-2"
+            data-oid="6fx8gif"
+          >
+            <div className="flex items-center gap-2" data-oid="qq.402e">
+              <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="ve0w5mr"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  data-oid="ya2aw1i"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                    data-oid="xc60cie"
+                  />
+                </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="z91p4_y"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  data-oid="bk.mb1x"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 19l-7-7 7-7"
+                    data-oid="7m5rce:"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            <div className="flex items-center gap-2" data-oid="hqeas1v">
+              <span
+                className="px-4 py-2 rounded-lg bg-gray-800 text-white font-medium"
+                data-oid="k8ve27b"
+              >
+                Page {currentPage} of {totalPages}
+              </span>
+            </div>
+
+            <div className="flex items-center gap-2" data-oid="yq:jhwz">
+              <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="bi1rjxh"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  data-oid=".1uvef3"
                 >
-                    Discover Movies
-                </h2>
-                <Suspense
-                    fallback={
-                        <p className="text-center" data-oid="pmn28rb">
-                            Loading...
-                        </p>
-                    }
-                    data-oid="boa955w"
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                    data-oid="i91blmp"
+                  />
+                </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="g9nu10p"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  data-oid=".g:j8vb"
                 >
-                    <MoviesContent data-oid="j159kgb" />
-                </Suspense>
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                    data-oid="yh5__i."
+                  />
+                </svg>
+              </button>
             </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default function MoviesPage() {
+  const [filterActive, setFilterActive] = useState(false);
+
+  return (
+    <div className="page min-h-screen pt-20 pb-4" data-oid="0-uxuak">
+      <div className="container mx-auto portrait:px-3 px-4" data-oid="7tvn4t1">
+        {/* Header Section */}
+        <div className="mb-8 space-y-2" data-oid="8d_p425">
+            <h2 className="text-4xl font-bold text-white" data-oid="y4vnny4">
+            Movies
+            </h2>
+            <p className="text-gray-400 max-w-3xl" data-oid="othjg4g">
+            Explore our collection of movies from various genres. From action to romance, find your next movie night selection here.
+            </p>
+          <GenresFilter mediaType="movie" onFilterChange={setFilterActive} />
         </div>
-    );
+
+        {/* Content Section */}
+        {!filterActive && (
+          <div
+            className="bg-gray-800/30 rounded-3xl backdrop-blur-sm border border-gray-700/50"
+            data-oid="zv:kb.h"
+          >
+            <Suspense
+              fallback={
+                <div
+                  className="flex items-center justify-center min-h-[50vh]"
+                  data-oid="uo0i4dx"
+                >
+                  <div
+                    className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+                    data-oid="7nesstc"
+                  ></div>
+                </div>
+              }
+              data-oid="85rngk_"
+            >
+              <MoviesContent data-oid="z5e4dpy" />
+            </Suspense>
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }

frontend/app/movies/page.tsx.bkp

@@ -0,0 +1,107 @@
+'use client';
+
+import { useEffect, useState, Suspense } from 'react';
+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<any[]>([]);
+    const { loading, setLoading } = useLoading();
+    const itemsPerPage = 16;
+    const [totalPages, setTotalPages] = useState(1);
+
+    useEffect(() => {
+        async function fetchMovies() {
+            setLoading(true);
+            try {
+                const data: any[] = (await getAllMovies()) || [];
+                const totalMovies = data?.length;
+                setTotalPages(Math.ceil(totalMovies / itemsPerPage));
+                const startIndex = (currentPage - 1) * itemsPerPage;
+                const paginatedMovies = data?.slice(startIndex, startIndex + itemsPerPage);
+                setMovies(paginatedMovies);
+            } catch (error) {
+                console.error('Error fetching movies:', error);
+            } finally {
+                setLoading(false);
+            }
+        }
+        fetchMovies();
+    }, [currentPage]);
+
+    const handlePageChange = (newPage: number) => {
+        router.push(`/movies?page=${newPage}`);
+    };
+
+    return (
+        <>
+            {loading ? (
+                <p className="text-center" data-oid="3ozsx6.">
+                    Loading...
+                </p>
+            ) : (
+                <>
+                    <div
+                        className="grid grid-cols-2 md:grid-cols-6 gap-4 md:gap-6"
+                        data-oid="zbazz1e"
+                    >
+                        {movies.map((title, index) => (
+                            <MovieCard title={title} key={`${currentPage}page${index}`} data-oid="mc:2.uh" />
+                        ))}
+                    </div>
+                    <div className="flex justify-center mt-8 gap-4" data-oid="noq2z2.">
+                        <button
+                            onClick={() => handlePageChange(currentPage - 1)}
+                            disabled={currentPage <= 1}
+                            className="px-4 py-2 bg-gray-700 text-white rounded disabled:opacity-50"
+                            data-oid="d:8u196"
+                        >
+                            Previous
+                        </button>
+                        <span className="px-4 py-2 text-white" data-oid="v7is21m">
+                            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="b.bxaco"
+                        >
+                            Next
+                        </button>
+                    </div>
+                </>
+            )}
+        </>
+    );
+}
+
+export default function MoviesPage() {
+    return (
+        <div className="page py-16" data-oid="_s_yu53">
+            <div className="container mx-auto px-6" data-oid="ty5ykip">
+                <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="_y6oahy"
+                >
+                    Discover Movies
+                </h2>
+                <Suspense
+                    fallback={
+                        <p className="text-center" data-oid="pmn28rb">
+                            Loading...
+                        </p>
+                    }
+                    data-oid="boa955w"
+                >
+                    <MoviesContent data-oid="j159kgb" />
+                </Suspense>
+            </div>
+        </div>
+    );
+}

frontend/app/tvshows/page.tsx

@@ -8,224 +8,244 @@ import { useLoading } from '@/components/loading/SplashScreen';
 import GenresFilter from '@/components/shared/GenresFilter';
 
 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 searchParams = useSearchParams();
+  const router = useRouter();
+  const currentPage = parseInt(searchParams.get('page') || '1', 10);
+  const [allTvShows, setAllTvShows] = useState<{ title: string; episodeCount: any }[]>([]);
+  const [tvshows, setTvShows] = useState<{ title: string; episodeCount: any }[]>([]);
+  const { loading, setLoading } = useLoading();
+  const itemsPerPage = 20;
+  const [totalPages, setTotalPages] = useState(1);
 
-    const handlePageChange = (newPage: number) => {
-        if (newPage >= 1 && newPage <= totalPages) {
-            router.push(`/tvshows?page=${newPage}`);
+  // Fetch all TV shows once on mount
+  useEffect(() => {
+    async function fetchTvShows() {
+      setLoading(true);
+      try {
+        const data = await getAllTvShows();
+        if (data.length) {
+          // Sort the data to ensure a consistent order (e.g., alphabetically by title)
+          const sortedData = [...data].sort((a, b) =>
+            a.title.localeCompare(b.title)
+          );
+          setAllTvShows(sortedData);
+          setTotalPages(Math.ceil(sortedData.length / itemsPerPage));
         }
-    };
-
-    return (
-        <div className="portrait:p-2 p-4" data-oid="z4j5t8d">
-            {loading ? (
-                <div className="flex items-center justify-center min-h-[60vh]" data-oid="jdvygx2">
-                    <div
-                        className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
-                        data-oid="ex20n6p"
-                    ></div>
-                </div>
-            ) : (
-                <>
-                    {/* Dynamic Grid */}
-                    <div
-                        className="flex flex-wrap justify-center items-center portrait:gap-2 gap-10"
-                        data-oid="ke2_x_x"
-                    >
-                        {tvshows.map((show, index) => (
-                            <div
-                                key={`${currentPage}page${index}`}
-                                className="transform transition-transform duration-300 hover:scale-105 w-[fit-content]"
-                                data-oid="x:.ceyx"
-                            >
-                                <TvShowCard
-                                    title={show.title}
-                                    episodesCount={show.episodeCount}
-                                    data-oid="p.v-:hm"
-                                />
-                            </div>
-                        ))}
-                    </div>
+      } catch (error) {
+        console.error('Error fetching TV shows:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchTvShows();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-                    {/* Improved Pagination */}
-                    <div
-                        className="mt-12 flex flex-row items-center justify-center gap-2"
-                        data-oid="6fx8gif"
-                    >
-                        <div className="flex items-center gap-2" data-oid="qq.402e">
-                            <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="ve0w5mr"
-                            >
-                                <svg
-                                    className="w-5 h-5"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    data-oid="ya2aw1i"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
-                                        data-oid="xc60cie"
-                                    />
-                                </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="z91p4_y"
-                            >
-                                <svg
-                                    className="w-5 h-5"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    data-oid="bk.mb1x"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M15 19l-7-7 7-7"
-                                        data-oid="7m5rce:"
-                                    />
-                                </svg>
-                            </button>
-                        </div>
+  // Update the displayed tv shows when the page or full list changes
+  useEffect(() => {
+    if (allTvShows.length) {
+      const startIndex = (currentPage - 1) * itemsPerPage;
+      setTvShows(allTvShows.slice(startIndex, startIndex + itemsPerPage));
+    }
+  }, [allTvShows, currentPage]);
 
-                        <div className="flex items-center gap-2" data-oid="hqeas1v">
-                            <span
-                                className="px-4 py-2 rounded-lg bg-gray-800 text-white font-medium"
-                                data-oid="k8ve27b"
-                            >
-                                Page {currentPage} of {totalPages}
-                            </span>
-                        </div>
+  const handlePageChange = (newPage: number) => {
+    if (newPage >= 1 && newPage <= totalPages) {
+      router.push(`/tvshows?page=${newPage}`);
+    }
+  };
 
-                        <div className="flex items-center gap-2" data-oid="yq:jhwz">
-                            <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="bi1rjxh"
-                            >
-                                <svg
-                                    className="w-5 h-5"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    data-oid=".1uvef3"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M9 5l7 7-7 7"
-                                        data-oid="i91blmp"
-                                    />
-                                </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="g9nu10p"
-                            >
-                                <svg
-                                    className="w-5 h-5"
-                                    fill="none"
-                                    stroke="currentColor"
-                                    viewBox="0 0 24 24"
-                                    data-oid=".g:j8vb"
-                                >
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth={2}
-                                        d="M13 5l7 7-7 7M5 5l7 7-7 7"
-                                        data-oid="yh5__i."
-                                    />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                </>
-            )}
+  return (
+    <div className="portrait:p-2 p-4" data-oid="z4j5t8d">
+      {loading ? (
+        <div
+          className="flex items-center justify-center min-h-[60vh]"
+          data-oid="jdvygx2"
+        >
+          <div
+            className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+            data-oid="ex20n6p"
+          ></div>
         </div>
-    );
-}
+      ) : (
+        <>
+          {/* Default TV Shows Grid */}
+          <div
+            key={currentPage}
+            className="flex flex-wrap justify-center items-center portrait:gap-2 gap-10"
+            data-oid="ke2_x_x"
+          >
+            {tvshows.map((show, index) => (
+              <div
+                key={`${show.title}-${index}`}
+                className="transform transition-transform duration-300 hover:scale-105 w-[fit-content]"
+                data-oid="x:.ceyx"
+              >
+                <TvShowCard
+                  title={show.title}
+                  episodesCount={show.episodeCount}
+                  data-oid="p.v-:hm"
+                />
+              </div>
+            ))}
+          </div>
 
+          {/* Pagination */}
+          <div
+            className="mt-12 flex flex-row items-center justify-center gap-2"
+            data-oid="6fx8gif"
+          >
+            <div className="flex items-center gap-2" data-oid="qq.402e">
+              <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="ve0w5mr"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  data-oid="ya2aw1i"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                    data-oid="xc60cie"
+                  />
+                </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="z91p4_y"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  data-oid="bk.mb1x"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 19l-7-7 7-7"
+                    data-oid="7m5rce:"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            <div className="flex items-center gap-2" data-oid="hqeas1v">
+              <span
+                className="px-4 py-2 rounded-lg bg-gray-800 text-white font-medium"
+                data-oid="k8ve27b"
+              >
+                Page {currentPage} of {totalPages}
+              </span>
+            </div>
 
+            <div className="flex items-center gap-2" data-oid="yq:jhwz">
+              <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="bi1rjxh"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  data-oid=".1uvef3"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                    data-oid="i91blmp"
+                  />
+                </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="g9nu10p"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  data-oid=".g:j8vb"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                    data-oid="yh5__i."
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
 
 export default function TvShowsPage() {
-    return (
-        <div className="page min-h-screen pt-20 pb-4" data-oid="0-uxuak">
-            <div className="container mx-auto portrait:px-3 px-4" data-oid="7tvn4t1">
-                {/* Header Section */}
-                <div className="mb-8 space-y-2" data-oid="8d_p425">
-                    <h2 className="text-4xl font-bold text-white" data-oid="y4vnny4">
-                        TV Shows
-                    </h2>
-                    <p className="text-gray-400 max-w-3xl" data-oid="othjg4g">
-                        Explore our collection of TV series from various genres. From drama to
-                        comedy, find your next binge-worthy show here.
-                    </p>
-                    <GenresFilter mediaType='series' />
-                </div>
+  const [filterActive, setFilterActive] = useState(false);
 
-                {/* Content Section */}
+  return (
+    <div className="page min-h-screen pt-20 pb-4" data-oid="0-uxuak">
+      <div className="container mx-auto portrait:px-3 px-4" data-oid="7tvn4t1">
+        {/* Header Section */}
+        <div className="mb-8 space-y-2" data-oid="8d_p425">
+          <h2 className="text-4xl font-bold text-white" data-oid="y4vnny4">
+            TV Shows
+          </h2>
+          <p className="text-gray-400 max-w-3xl" data-oid="othjg4g">
+            Explore our collection of TV series from various genres. From drama to comedy, find your next binge-worthy show here.
+          </p>
+          <GenresFilter mediaType="series" onFilterChange={setFilterActive} />
+        </div>
+
+        {/* Content Section */}
+        {!filterActive && (
+          <div
+            className="bg-gray-800/30 rounded-3xl backdrop-blur-sm border border-gray-700/50"
+            data-oid="zv:kb.h"
+          >
+            <Suspense
+              fallback={
                 <div
-                    className="bg-gray-800/30 rounded-3xl backdrop-blur-sm border border-gray-700/50"
-                    data-oid="zv:kb.h"
+                  className="flex items-center justify-center min-h-[50vh]"
+                  data-oid="uo0i4dx"
                 >
-                    <Suspense
-                        fallback={
-                            <div
-                                className="flex items-center justify-center min-h-[50vh]"
-                                data-oid="uo0i4dx"
-                            >
-                                <div
-                                    className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
-                                    data-oid="7nesstc"
-                                ></div>
-                            </div>
-                        }
-                        data-oid="85rngk_"
-                    >
-                        <TvShowsContent data-oid="z5e4dpy" />
-                    </Suspense>
+                  <div
+                    className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"
+                    data-oid="7nesstc"
+                  ></div>
                 </div>
-            </div>
-        </div>
-    );
+              }
+              data-oid="85rngk_"
+            >
+              <TvShowsContent data-oid="z5e4dpy" />
+            </Suspense>
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }

frontend/components/movie/MovieCard.tsx

@@ -72,20 +72,18 @@ export const MovieCard: React.FC<MovieCardProps> = ({ title }) => {
     const slideshowTimer = useRef<NodeJS.Timeout | null>(null);
     const hoverTimer = useRef<NodeJS.Timeout | null>(null);
 
-    // Extract the correct title
-    const formattedTitle = title.includes('/') ? title.split('/').pop() : title;
 
     useEffect(() => {
         async function fetchMovieCard() {
             try {
-                const cardData = await getMovieCard(formattedTitle);
+                const cardData = await getMovieCard(title);
                 setCard(cardData);
             } catch (error) {
                 console.error('Error fetching movie card:', error);
             }
         }
         fetchMovieCard();
-    }, [formattedTitle]);
+    }, [title]);
 
     // Set a random card image once when card loads.
     useEffect(() => {
@@ -281,7 +279,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ title }) => {
                           ✕
                       </button>
                       <div className="flex flex-col w-full">
-                          <h3 className="pb-2 pl-2 pt-2 bg-gray-700/60 text-md sm:text-lg md:text-xl font-semibold text-white sm:max-w-[50%] md:max-w-[70%] text-clip line-clamp-1">
+                          <h3 className="pb-2 pl-2 pt-2 bg-gray-700/60 text-md sm:text-lg md:text-xl font-semibold text-white text-clip line-clamp-1">
                               {card?.title || 'Loading...'}
                           </h3>
 
@@ -311,7 +309,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ title }) => {
                                   alt="Banner Preview"
                               />
                               {/* Slideshow controls */}
-                              {card.banner.length > 0 && (
+                              {card.banner.length > 1 && (
                                   <>
                                       <button
                                           onClick={handlePrev}
@@ -334,8 +332,8 @@ export const MovieCard: React.FC<MovieCardProps> = ({ title }) => {
                           {card.overview || 'No overview available.'}
                       </div>
                       {/* View Details Button */}
-                      <div>
-                          <Link href={`/movie/${formattedTitle}`}>
+                      <div className='flex flex-row'>
+                          <Link href={`/movie/${title}`}>
                               <button className="text-white bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-2 rounded-3xl flex items-center text-sm md:text-base transition-all duration-750 ease-in-out">
                                   {`View Details >`}
                               </button>
@@ -357,7 +355,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ title }) => {
             >
                 <div
                     className="rounded-lg border border-gray-400/50 overflow-hidden relative transition-transform duration-300 w-[140px] sm:w-[150px] md:w-[180px] lg:w-[180px] xl:w-[200px] 
-                                                                                                                                  h-[210px] sm:h-[220px] md:h-[250px] lg:h-[270px] xl:h-[290px]"
+                                                                                                                                  h-[210px] sm:h-[220px] md:h-[250px] lg:h-[280px] xl:h-[300px]"
                 >
                     {/* Skeleton Loader */}
                     {!imageLoaded && (

frontend/components/shared/GenresFilter.tsx

@@ -2,20 +2,25 @@ import { getGenresItems, getGenreCategories } from '@/lib/lb';
 import { useEffect, useState } from 'react';
 import { useLoading } from '../loading/SplashScreen';
 import { FunnelIcon } from '@heroicons/react/24/outline';
-import { useSearchParams } from 'next/navigation';
-import { useRouter } from 'next/navigation';
 import { TvShowCard } from '../tvshow/TvShowCard';
+import { MovieCard } from '../movie/MovieCard';
 import { useSpinnerLoading } from '../loading/Spinner';
 
+interface Genre {
+    name: string;
+    density: number;
+}
+
 interface GenreCompProps {
     mediaType: string;
+    onFilterChange?: (active: boolean) => void;
 }
 
-export default function GenresFilter({ mediaType }: GenreCompProps) {
-    const [genreCategories, setGenreCategories] = useState<string[]>([]);
+export default function GenresFilter({ mediaType, onFilterChange }: GenreCompProps) {
+    const [genreCategories, setGenreCategories] = useState<Genre[]>([]);
     const [selectedGenreCategories, setSelectedGenreCategories] = useState<string[]>([]);
     const [genresItems, setGenresItems] = useState<any[]>([]);
-    const {spinnerLoading, setSpinnerLoading} = useSpinnerLoading();
+    const { spinnerLoading, setSpinnerLoading } = useSpinnerLoading();
     const [currentPage, setCurrentPage] = useState(1);
     const [totalPages, setTotalPages] = useState(1);
     const [showAll, setShowAll] = useState(false);
@@ -25,8 +30,8 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
         async function fetchGenreCategories() {
             setSpinnerLoading(true);
             try {
-                const gc = await getGenreCategories();
-                setGenreCategories(gc);
+                const response = await getGenreCategories(mediaType);
+                setGenreCategories(response);
             } catch (error) {
                 console.error('Error fetching genre categories:', error);
             } finally {
@@ -34,13 +39,13 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
             }
         }
         fetchGenreCategories();
-    }, []);
+    }, [mediaType, setSpinnerLoading]);
 
     const handleGenreClick = (genre: string) => {
         if (genre === 'All') {
             setSelectedGenreCategories(['All']);
             setGenresItems([]);
-            setCurrentPage(1); // Reset to first page when changing genres
+            setCurrentPage(1);
         } else {
             setSelectedGenreCategories((prev) => {
                 const filtered = prev.filter((g) => g !== 'All');
@@ -48,7 +53,7 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
                     ? filtered.filter((g) => g !== genre)
                     : [...filtered, genre];
             });
-            setCurrentPage(1); // Reset to first page when changing genres
+            setCurrentPage(1);
         }
     };
 
@@ -63,9 +68,19 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
                 itemsPerPage,
                 currentPage,
             );
-            setGenresItems(response?.series || []);
-            // Assuming the API returns total count or total pages
-            setTotalPages(Math.ceil(response?.totalCount / itemsPerPage) || 1);
+            if (mediaType === 'movie') {
+                setGenresItems(response?.movies || []);
+            } else {
+                setGenresItems(response?.series || []);
+            }
+
+            setTotalPages(Math.ceil(response?.total_series / itemsPerPage) || 1);
+            const filteringActive =
+                selectedGenreCategories.length > 0 &&
+                !(selectedGenreCategories.length === 1 && selectedGenreCategories[0] === 'All');
+            if (onFilterChange) {
+                onFilterChange(filteringActive);
+            }
         } catch (error) {
             console.error('Error fetching genre items:', error);
         } finally {
@@ -73,12 +88,18 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
         }
     };
 
-    // Call handleFilter when page changes or when filters are updated
+    // If no filter is active, clear any filtered items and notify parent.
     useEffect(() => {
-        if (selectedGenreCategories.length > 0) {
-            handleFilter();
+        const filteringActive =
+            selectedGenreCategories.length > 0 &&
+            !(selectedGenreCategories.length === 1 && selectedGenreCategories[0] === 'All');
+        if (!filteringActive) {
+            setGenresItems([]);
+            if (onFilterChange) {
+                onFilterChange(false);
+            }
         }
-    }, [currentPage, selectedGenreCategories]);
+    }, [selectedGenreCategories, onFilterChange]);
 
     const handlePageChange = (newPage: number) => {
         if (newPage >= 1 && newPage <= totalPages) {
@@ -99,6 +120,7 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
                     <FunnelIcon className="size-5" />
                     <p className="text-sm">Filter</p>
                 </button>
+                {/* "All" Button */}
                 <button
                     key="All"
                     onClick={() => handleGenreClick('All')}
@@ -110,20 +132,23 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
                 >
                     All
                 </button>
-                {genreCategories.slice(0, showAll ? genreCategories.length : 5).map((genre) => (
-                    <button
-                        key={genre}
-                        onClick={() => handleGenreClick(genre)}
-                        className={`px-4 py-2 rounded-full text-sm font-medium transition-colors border border-gray-400/50 ${
-                            isSelected(genre)
-                                ? 'bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 text-white'
-                                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                        }`}
-                    >
-                        {genre}
-                    </button>
-                ))}
-                {genreCategories.length > 5 && (
+                {/* Other Genre Buttons */}
+                {genreCategories?.length > 0 &&
+                    genreCategories.slice(0, showAll ? genreCategories.length : 5).map((genre) => (
+                        <button
+                            key={genre.name}
+                            onClick={() => handleGenreClick(genre.name)}
+                            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors border border-gray-400/50 ${
+                                isSelected(genre.name)
+                                    ? 'bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 text-white'
+                                    : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+                            }`}
+                        >
+                            {genre.name}{' '}
+                            <span className="text-xs text-gray-500">({genre.density})</span>
+                        </button>
+                    ))}
+                {genreCategories?.length > 5 && (
                     <button
                         className="text-gray-500 hover:text-gray-400"
                         onClick={() => setShowAll(!showAll)}
@@ -139,12 +164,12 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
                 ) : (
                     <>
                         <div className="flex flex-wrap justify-center items-center portrait:gap-2 gap-10">
-                            {genresItems.map((show, index) => (
+                            {genresItems.map((item, index) => (
                                 <div
                                     key={index}
                                     className="transform transition-transform duration-300 hover:scale-105 w-[fit-content]"
-                                >
-                                    <TvShowCard title={show.title} episodesCount={null} />
+                                >{mediaType === 'movie' ? <MovieCard title={item.title} /> : <TvShowCard title={item.title} episodesCount={null} />}
+                                    
                                 </div>
                             ))}
                         </div>
@@ -154,7 +179,7 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
                                     <button
                                         onClick={() => handlePageChange(1)}
                                         disabled={currentPage <= 1 || spinnerLoading}
-                                        className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                        className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 transition-colors"
                                     >
                                         <svg
                                             className="w-5 h-5"
@@ -173,7 +198,7 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
                                     <button
                                         onClick={() => handlePageChange(currentPage - 1)}
                                         disabled={currentPage <= 1 || spinnerLoading}
-                                        className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                        className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 transition-colors"
                                     >
                                         <svg
                                             className="w-5 h-5"
@@ -199,7 +224,7 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
                                     <button
                                         onClick={() => handlePageChange(currentPage + 1)}
                                         disabled={currentPage >= totalPages || spinnerLoading}
-                                        className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                        className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 transition-colors"
                                     >
                                         <svg
                                             className="w-5 h-5"
@@ -218,7 +243,7 @@ export default function GenresFilter({ mediaType }: GenreCompProps) {
                                     <button
                                         onClick={() => handlePageChange(totalPages)}
                                         disabled={currentPage >= totalPages || spinnerLoading}
-                                        className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 disabled:hover:bg-gray-800 disabled:hover:text-gray-400 transition-colors"
+                                        className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white disabled:opacity-50 transition-colors"
                                     >
                                         <svg
                                             className="w-5 h-5"

frontend/components/tvshow/TvShowCard.tsx

@@ -288,7 +288,7 @@ export const TvShowCard: React.FC<TvShowCardProps> = ({ title, episodesCount = n
                       )}
                       {/* Title and Year */}
                       <div className="flex flex-col w-full">
-                          <h3 className="pl-8 h-11 lg:pb:2 pt-2 bg-gray-700/60 text-md sm:text-lg md:text-xl font-semibold text-white sm:max-w-[50%] md:max-w-[70%] text-clip line-clamp-1">
+                          <h3 className="pl-8 h-11 lg:pb:2 pt-2 bg-gray-700/60 text-md sm:text-lg md:text-xl font-semibold text-white text-clip line-clamp-1">
                               {card?.title || 'Loading...'}
                           </h3>
 
@@ -318,7 +318,7 @@ export const TvShowCard: React.FC<TvShowCardProps> = ({ title, episodesCount = n
                                   alt="Banner Preview"
                               />
                               {/* Slideshow controls */}
-                              {card.banner.length > 0 && (
+                              {card.banner.length > 1 && (
                                   <>
                                       <button
                                           onClick={handlePrev}
@@ -341,8 +341,8 @@ export const TvShowCard: React.FC<TvShowCardProps> = ({ title, episodesCount = n
                           {card.overview}
                       </div>
                       {/* View Details Button */}
-                      <div>
-                          <Link href={`/tvshow/${card.title}`}>
+                      <div className='flex flex-row'>
+                          <Link href={`/tvshow/${title}`}>
                               <button className="text-white bg-gradient-to-r from-violet-600 to-purple-500 hover:bg-gradient-to-r hover:from-violet-500 hover:to-purple-400 px-4 py-2 rounded-3xl flex items-center text-sm md:text-base transition-all duration-750 ease-in-out">
                                   {`View Details >`}
                               </button>
@@ -364,7 +364,7 @@ export const TvShowCard: React.FC<TvShowCardProps> = ({ title, episodesCount = n
             >
                 <div
                     className="rounded-lg border border-gray-400/50 overflow-hidden relative transition-transform duration-300 w-[140px] sm:w-[150px] md:w-[180px] lg:w-[180px] xl:w-[200px] 
-                                                                                                                                  h-[210px] sm:h-[220px] md:h-[250px] lg:h-[270px] xl:h-[290px]"
+                                                                                                                                  h-[210px] sm:h-[220px] md:h-[250px] lg:h-[280px] xl:h-[300px]"
                 >
                     {/* Episodes Count Bubble */}
                     {episodesCount !== null && (

frontend/lib/LoadbalancerAPI.js

@@ -87,9 +87,13 @@ class LoadBalancerAPI {
     return await this._get(`/api/get/recent?limit=${limit}`);
   }
 
-  async getGenreCategories() {
-    return await this._get('/api/get/genre_categories');
+  async getGenreCategories(mediaType) {
+    const url = mediaType
+      ? `/api/get/genre_categories?media_type=${encodeURIComponent(mediaType)}`
+      : '/api/get/genre_categories';
+    return await this._get(url);
   }
+  
 
   async getGenreItems(genres, mediaType, limit = 5, page = 1) {
     if (!Array.isArray(genres)) {

frontend/lib/config.ts

@@ -0,0 +1 @@
+export const WEB_VERSION = 'v0.1.4 beta';

frontend/lib/config.tsx

@@ -1 +0,0 @@
-export const WEB_VERSION = 'v0.1.3 beta';

frontend/lib/lb.js

@@ -77,9 +77,13 @@ export async function getNewContents(limit = 5) {
 
 
 export async function getAllMovies(){
-    const movies = await lb.getAllMovies();
-    console.debug(movies);
-    return movies
+  const movies = await lb.getAllMovies();
+  console.debug(movies);
+  
+  const formattedMovies = movies.map(title => ({
+    title: title.replace('films/', '')
+  }));
+  return formattedMovies
 }
 
 export async function getAllTvShows() {
@@ -119,8 +123,8 @@ export async function getTvShowMetadata(title){
   return tvshow
 }
 
-export async function getGenreCategories(){
-  const gc = await lb.getGenreCategories();
+export async function getGenreCategories(mediaType){
+  const gc = await lb.getGenreCategories(mediaType);
   console.debug(gc);
   if (gc.genres)
     return gc.genres