0.0.0.4 Alpha

frontend/next.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     images: {
-        domains: ['artworks.thetvdb.com'],
+        domains: ['artworks.thetvdb.com','via.placeholder.com'],
       },
 };
 

frontend/src/app/genres/[genre]/genres.css

@@ -10,17 +10,10 @@ body {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
-/* Title styling */
-.genre-title {
-  font-size: 2rem;
-  text-align: center;
-  color: #ffffff; /* Light color for the title */
-}
-
-.genre-title-section{
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.genre-title-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 /* Section styling */
@@ -29,10 +22,10 @@ body {
 }
 
 @media (orientation: landscape) {
-    .section {
-        margin-left: 25px;
-        margin-right: 25px;
-      }
+  .section {
+    margin-left: 25px;
+    margin-right: 25px;
+  }
 }
 
 .section h2 {
@@ -63,12 +56,12 @@ body {
 
 /* Card for each item */
 .item-card {
-  background-color: #202232; /* Dark card background */
+  background-color: #1d1f2d; /* Dark card background */
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   transition: transform 0.3s, box-shadow 0.3s;
-  flex: 0 0 300px; /* Fixed width for horizontal scrolling */
+  flex: 0 0 200px; /* Fixed width for horizontal scrolling */
 }
 
 .item-card:hover {
@@ -85,18 +78,18 @@ body {
 
 .item-image {
   width: 100%;
-  height: 120px; /* Fixed height for consistency */
+  height: 100px; /* Fixed height for consistency */
   object-fit: cover; /* Maintain aspect ratio and fill container */
   display: block;
 }
 
 /* Item information */
 .item-info {
-  padding: 10px;
+  padding: 5px;
 }
 
 .item-title {
-  font-size: 1.2rem;
+  font-size: 1rem;
   font-weight: bold;
   margin: 0;
   color: #ffffff; /* Light color for item titles */
@@ -133,7 +126,7 @@ body {
 /* Load More Button container */
 .load-more-container {
   text-align: center;
-  margin: 20px 0;
+  margin: 10px 0;
 }
 
 /* Load More Button styling */
@@ -169,3 +162,55 @@ body {
   margin-left: 10px;
   margin-right: 10px;
 }
+
+.filter-button {
+  margin-right: 10px;
+}
+.bubbles-scroll-section{
+  display: flex;
+  overflow-x: auto;
+  width: 100%;
+}
+
+.bubbles-scroll-section::-webkit-scrollbar {
+  height: 8px;
+}
+
+.bubbles-scroll-section::-webkit-scrollbar-thumb {
+  background-color: #3c23cf;
+  border-radius: 4px;
+}
+
+.bubbles-scroll-section::-webkit-scrollbar-track {
+  background-color: #2c2c2c;
+}
+
+.genre-bubbles {
+  text-align: center;
+  color: #ffffff; /* Light color for the title */
+  width: 92dvw;
+  display: flex;
+}
+
+.bubbles {
+  display: inline-block;
+  margin: 0 5px;
+  padding: 5px 10px;
+  border-radius: 20px;
+  background-color: #1d233e;
+  font-size: 14px;
+  color: white;
+  white-space: nowrap;
+  border: 1px solid #4339ff;
+}
+
+.bubble-close-button {
+  font-size: 15px;
+  cursor: pointer;
+  padding: 2px;
+  color: #716ffc;
+}
+
+.bubble-close-button:hover {
+  color: red; /* Optional: Change color on hover */
+}

frontend/src/app/genres/[genre]/page.js

@@ -3,15 +3,26 @@ import apiClient from "@/api/apiClient";
 import { useEffect, useState, useRef } from "react";
 import Link from "next/link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCaretLeft, faCaretRight } from "@fortawesome/free-solid-svg-icons";
-import "./genres.css";
+import {
+  faCaretLeft,
+  faCaretRight,
+  faFilter,
+  faTimes,
+  faXmark, // Import the close icon
+} from "@fortawesome/free-solid-svg-icons";
 import Image from "next/image";
+import "./genres.css";
+import GenreFilterModal from "@/modals/GenreFilterModal"; // Import the Modal
 
 export default function GenrePage({ params }) {
   const [genreItems, setGenreItems] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [itemLimit, setItemLimit] = useState(5);
+  const [itemLimit, setItemLimit] = useState(10);
+  const [selectedGenres, setSelectedGenres] = useState(
+    new Set(params.genre ? decodeURIComponent(params.genre).split(",") : [])
+  );
+  const [isModalOpen, setIsModalOpen] = useState(false); // State for modal visibility
 
   const moviesRef = useRef(null);
   const seriesRef = useRef(null);
@@ -19,20 +30,29 @@ export default function GenrePage({ params }) {
   useEffect(() => {
     async function fetchData() {
       try {
-        const data = await apiClient.getGenreItems(params.genre, null, itemLimit);
+        if (selectedGenres.size === 0) {
+          setGenreItems({ movies: [], series: [] });
+          setLoading(false);
+          return;
+        }
+
+        const genreArray = Array.from(selectedGenres);
+        const data = await apiClient.getGenreItems(genreArray, null, itemLimit);
         if (data) {
           setGenreItems(data);
+          console.log(data);
         } else {
           setError("Genre data not found.");
         }
       } catch (err) {
-        setError("An error occurred while fetching genre data.");
+        setError(err.message || "An error occurred while fetching genre data.");
+        console.log(err);
       } finally {
         setLoading(false);
       }
     }
     fetchData();
-  }, [params.genre, itemLimit]);
+  }, [selectedGenres, itemLimit]);
 
   const loadMore = () => {
     setItemLimit((prevLimit) => prevLimit + 5);
@@ -45,35 +65,73 @@ export default function GenrePage({ params }) {
     }
   };
 
+  const openModal = () => setIsModalOpen(true);
+  const closeModal = () => setIsModalOpen(false);
+
+  const removeGenre = (genreToRemove) => {
+    setSelectedGenres((prevGenres) => {
+      const updatedGenres = new Set(prevGenres);
+      updatedGenres.delete(genreToRemove);
+      return updatedGenres;
+    });
+  };
+
   if (loading) {
     return <div className="loading">Loading...</div>;
   }
 
-  if (error) {
-    return <div className="error">Error: {error}</div>;
-  }
-
   return (
     <div className="genre-page">
-      <div className="genre-title-section">
-        <h1 className="genre-title">{params.genre}</h1>
-        <div className="load-more-container">
-          <button className="load-more-button" onClick={loadMore}>
-            Load More
-          </button>
+      <div className="genre-title-section"></div>
+      <div className="genre-bubbles">
+        <button className="filter-button" onClick={openModal}>
+          <FontAwesomeIcon icon={faFilter} size="sm" />
+        </button>
+        <div className="bubbles-scroll-section">
+          {selectedGenres.size > 0
+            ? Array.from(selectedGenres).map((genre, index) => (
+                <div key={index} className="bubbles">
+                  {genre}
+                  <button
+                    className="bubble-close-button"
+                    onClick={() => removeGenre(genre)}
+                  >
+                    <FontAwesomeIcon icon={faXmark} size="sm" />
+                  </button>
+                </div>
+              ))
+            : "Select Genres"}
         </div>
       </div>
+      <GenreFilterModal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        selectedGenres={selectedGenres}
+        onGenreChange={setSelectedGenres}
+      />
+
       {genreItems && (
         <>
           {genreItems.movies && genreItems.movies.length > 0 && (
             <section className="section movies">
               <div className="section-controls">
                 <h2>Movies</h2>
+                <div className="load-more-container">
+                  <button className="load-more-button" onClick={loadMore}>
+                    Load More
+                  </button>
+                </div>
                 <div className="scroll-controls">
-                  <button onClick={() => scroll(moviesRef, "left")} className="scroll-button">
+                  <button
+                    onClick={() => scroll(moviesRef, "left")}
+                    className="scroll-button"
+                  >
                     <FontAwesomeIcon icon={faCaretLeft} size="2xl" />
                   </button>
-                  <button onClick={() => scroll(moviesRef, "right")} className="scroll-button">
+                  <button
+                    onClick={() => scroll(moviesRef, "right")}
+                    className="scroll-button"
+                  >
                     <FontAwesomeIcon icon={faCaretRight} size="2xl" />
                   </button>
                 </div>
@@ -84,7 +142,12 @@ export default function GenrePage({ params }) {
                     <Link href={`/movie/${item[0]}`} passHref>
                       <div className="item-link">
                         <Image
-                          src={item[3] || `https://via.placeholder.com/400x100/1a1c3f/FFF?text=${encodeURIComponent(item[0])}`}
+                          src={
+                            item[3] ||
+                            `https://via.placeholder.com/400x100/1a1c3f/FFF?text=${encodeURIComponent(
+                              item[0]
+                            )}`
+                          }
                           alt={item[0]}
                           className="item-image"
                           height={120}
@@ -107,10 +170,16 @@ export default function GenrePage({ params }) {
               <div className="section-controls">
                 <h2>Series</h2>
                 <div className="scroll-controls">
-                  <button onClick={() => scroll(seriesRef, "left")} className="scroll-button">
+                  <button
+                    onClick={() => scroll(seriesRef, "left")}
+                    className="scroll-button"
+                  >
                     <FontAwesomeIcon icon={faCaretLeft} size="2xl" />
                   </button>
-                  <button onClick={() => scroll(seriesRef, "right")} className="scroll-button">
+                  <button
+                    onClick={() => scroll(seriesRef, "right")}
+                    className="scroll-button"
+                  >
                     <FontAwesomeIcon icon={faCaretRight} size="2xl" />
                   </button>
                 </div>
@@ -121,7 +190,12 @@ export default function GenrePage({ params }) {
                     <Link href={`/series/${item[0]}`} passHref>
                       <div className="item-link">
                         <Image
-                          src={item[3] || `https://via.placeholder.com/150?text=${encodeURIComponent(item[0])}`}
+                          src={
+                            item[3] ||
+                            `https://via.placeholder.com/150?text=${encodeURIComponent(
+                              item[0]
+                            )}`
+                          }
                           alt={item[0]}
                           className="item-image"
                           width={250}
@@ -141,10 +215,14 @@ export default function GenrePage({ params }) {
         </>
       )}
 
-      {!genreItems ||
-        (!genreItems.movies && !genreItems.series && (
-          <p className="no-items">No items available for this genre.</p>
-        ))}
+      {(!genreItems ||
+        (genreItems.movies.length === 0 && genreItems.series.length === 0)) && (
+        <p className="no-items">
+          {selectedGenres.size === 0
+            ? "Please select a genre to see results."
+            : "No items available for the selected genres."}
+        </p>
+      )}
     </div>
   );
 }

frontend/src/lib/LoadBalancer.js

@@ -73,14 +73,25 @@ class LoadBalancerAPI {
     return this._getRequest('/api/get/recent');
   }
 
-  async getGenreItems(genre, mediaType = null, limit = 5) {
-    const queryParams = new URLSearchParams({ genre, limit });
+  async getGenreItems(genres, mediaType = null, limit = 5) {
+    // Create a new URLSearchParams object
+    const queryParams = new URLSearchParams();
+
+    // Append each genre to the query parameters
+    genres.forEach(genre => queryParams.append('genre', genre));
+    
+    // Append the limit parameter
+    queryParams.append('limit', limit);
+    
+    // Conditionally append the media_type parameter
     if (mediaType) {
-      queryParams.append('media_type', mediaType);
+        queryParams.append('media_type', mediaType);
     }
+    
+    // Make the GET request with the query parameters
     return this._getRequest(`/api/get/genre?${queryParams.toString()}`);
-  }
-  
+}
+
   async getDownloadProgress(url) {
     return this._getRequestNoBase(url);
   }

frontend/src/lib/config.js

@@ -1,7 +1,7 @@
 const config = {
     apiBaseUrl: 'https://hans-den-load-balancer.hf.space',
     searchUrl: 'https://unicone-studio-search.hf.space/api/search',
-    version: "0.0.0.3 Alpha",
+    version: "0.0.0.4 Alpha",
   };
   
 export default config;

frontend/src/modals/GenreFilterModal.css

@@ -0,0 +1,86 @@
+/* GenreFilterModal.css */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.814); /* Slightly darker overlay */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background: #11111e; /* Slightly lighter dark background */
+  color: #e0e0e0; /* Light grey text color */
+  padding: 20px;
+  border-radius: 10px; /* More rounded corners */
+  width: 90%;
+  max-width: 600px;
+  position: relative;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* Enhanced shadow effect */
+}
+
+.modal-close {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  border: none;
+  background: transparent;
+  font-size: 24px; /* Larger icon size */
+  color: #e0e0e0;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.modal-close:hover {
+  color: #ff6f61; /* Highlight color on hover */
+}
+
+.genre-options {
+  margin-top: 20px;
+  display: flex;
+  flex-wrap: wrap; /* Allow genres to wrap onto multiple lines */
+  gap: 15px; /* Increased space between options */
+  overflow-y: auto; /* Scroll if content overflows vertically */
+  max-height: 50vh; /* Fixed maximum height */
+  background-color: #17162c;
+  padding: 5px;
+}
+
+.genre-options::-webkit-scrollbar {
+  width: 8px;
+}
+
+.genre-options::-webkit-scrollbar-thumb {
+  background-color: #3c23cf;
+  border-radius: 4px;
+}
+
+.genre-options::-webkit-scrollbar-track {
+  background-color: #2c2c2c;
+}
+
+.genre-option {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px; /* Slightly increased space between rows */
+  cursor: pointer;
+}
+
+.genre-option input {
+  margin-right: 10px; /* Increased space between checkbox and label */
+  accent-color: #616bff; /* Custom checkbox color */
+}
+
+.genre-label {
+  font-size: 16px; /* Adjusted font size for better readability */
+}
+
+@media (orientation: portrait) {
+  .modal-content {
+    width: 95%;
+    max-height: 60vh; /* Adjusted height for portrait orientation */
+  }
+}

frontend/src/modals/GenreFilterModal.js

@@ -0,0 +1,108 @@
+import { useState } from "react";
+import "./GenreFilterModal.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+
+const allGenres = [
+  "Action",
+  "Adventure",
+  "Animation",
+  "Biography",
+  "Comedy",
+  "Crime",
+  "Documentary",
+  "Drama",
+  "Family",
+  "Fantasy",
+  "Film-Noir",
+  "History",
+  "Horror",
+  "Music",
+  "Musical",
+  "Mystery",
+  "Romance",
+  "Sci-Fi",
+  "Sport",
+  "Thriller",
+  "War",
+  "Western",
+  "Action & Adventure",
+  "Adult Animation",
+  "Anthology",
+  "Bollywood",
+  "Chick Flick",
+  "Cult",
+  "Dance",
+  "Game Show",
+  "Gothic",
+  "Historical Fiction",
+  "Romantic Comedy",
+  "Superhero",
+  "Teen",
+  "True Crime",
+  "Urban",
+  "Political",
+  "Experimental",
+  "Supernatural",
+  "Sci-Fi & Fantasy",
+  "Psychological",
+  "Dystopian",
+  "Medical",
+  "Legal",
+  "Military",
+  "Romantic Drama",
+  "Stand-Up Comedy",
+  "Docudrama",
+  "Family Drama",
+  "Social",
+  "Science",
+  "Historical Drama",
+  "Travel",
+  "Biography & Memoir",
+  "Kids",
+];
+
+export default function GenreFilterModal({
+  isOpen,
+  onClose,
+  selectedGenres,
+  onGenreChange,
+}) {
+  if (!isOpen) return null;
+
+  const handleGenreToggle = (genre) => {
+    onGenreChange((prevSelected) => {
+      const newSelected = new Set(prevSelected);
+      if (newSelected.has(genre)) {
+        newSelected.delete(genre);
+      } else {
+        newSelected.add(genre);
+      }
+      return newSelected;
+    });
+  };
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal-content">
+        <button className="modal-close" onClick={onClose}>
+          <FontAwesomeIcon icon={faXmark} size="l" />
+        </button>
+        <h2>Filter by Genre</h2>
+        <div className="genre-options">
+          {allGenres.map((genre) => (
+            <label key={genre} className="genre-option">
+              <input
+                type="checkbox"
+                checked={selectedGenres.has(genre)}
+                onChange={() => handleGenreToggle(genre)}
+                className="genre-checkbox"
+              />
+              <span className="genre-label">{genre}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}