css and player

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

@@ -34,28 +34,28 @@ body {
 }
 
 /* Horizontal scrolling container */
-.items-grid {
+.genre-items-grid {
   display: flex;
   overflow-x: auto;
   padding: 10px 0;
   gap: 20px;
 }
 
-.items-grid::-webkit-scrollbar {
+.genre-items-grid::-webkit-scrollbar {
   height: 8px;
 }
 
-.items-grid::-webkit-scrollbar-thumb {
+.genre-items-grid::-webkit-scrollbar-thumb {
   background-color: #3c23cf;
   border-radius: 4px;
 }
 
-.items-grid::-webkit-scrollbar-track {
+.genre-items-grid::-webkit-scrollbar-track {
   background-color: #2c2c2c;
 }
 
 /* Card for each item */
-.item-card {
+.genre-item-card {
   background-color: #1d1f2d; /* Dark card background */
   border-radius: 8px;
   overflow: hidden;
@@ -64,19 +64,19 @@ body {
   flex: 0 0 200px; /* Fixed width for horizontal scrolling */
 }
 
-.item-card:hover {
+.genre-item-card:hover {
   transform: scale(1.03);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
 }
 
 /* Styling for item link */
-.item-link {
+.genre-item-link {
   display: block;
   text-decoration: none;
   color: inherit;
 }
 
-.item-image {
+.genre-item-image {
   width: 100%;
   height: 100px; /* Fixed height for consistency */
   object-fit: cover; /* Maintain aspect ratio and fill container */
@@ -84,11 +84,11 @@ body {
 }
 
 /* Item information */
-.item-info {
+.genre-item-info {
   padding: 5px;
 }
 
-.item-title {
+.genre-item-title {
   font-size: 1rem;
   font-weight: bold;
   margin: 0;
@@ -98,7 +98,7 @@ body {
   text-overflow: ellipsis; /* Handle overflow with ellipsis */
 }
 
-.item-description {
+.genre-item-description {
   font-size: 0.9rem;
   color: #b0b0b0; /* Lighter gray for descriptions */
   margin: 5px 0 0;
@@ -160,37 +160,37 @@ body {
   outline: none;
 }
 
-.section-controls {
+.genre-section-controls {
   display: flex;
   align-items: center;
   text-align: center;
   justify-content: space-between;
 }
 
-.scroll-controls button {
+.genre-scroll-controls button {
   margin-left: 10px;
   margin-right: 10px;
 }
 
-.filter-button {
+.genre-filter-button {
   margin-right: 10px;
 }
-.bubbles-scroll-section{
+.genre-bubbles-scroll-section{
   display: flex;
   overflow-x: auto;
   width: 100%;
 }
 
-.bubbles-scroll-section::-webkit-scrollbar {
+.genre-bubbles-scroll-section::-webkit-scrollbar {
   height: 8px;
 }
 
-.bubbles-scroll-section::-webkit-scrollbar-thumb {
+.genre-bubbles-scroll-section::-webkit-scrollbar-thumb {
   background-color: #3c23cf;
   border-radius: 4px;
 }
 
-.bubbles-scroll-section::-webkit-scrollbar-track {
+.genre-bubbles-scroll-section::-webkit-scrollbar-track {
   background-color: #2c2c2c;
 }
 
@@ -213,7 +213,7 @@ body {
   border: 1px solid #4339ff;
 }
 
-.bubble-close-button {
+.genre-bubble-close-button {
   font-size: 15px;
   cursor: pointer;
   padding: 2px;

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

@@ -89,16 +89,16 @@ export default function GenrePage({ params }) {
     <div className="genre-page">
       <div className="genre-title-section"></div>
       <div className="genre-bubbles">
-        <button className="filter-button" onClick={openModal}>
+        <button className="genre-filter-button" onClick={openModal}>
           <FontAwesomeIcon icon={faFilter} size="sm" />
         </button>
-        <div className="bubbles-scroll-section">
+        <div className="genre-bubbles-scroll-section">
           {selectedGenres.size > 0
             ? Array.from(selectedGenres).map((genre, index) => (
                 <div key={index} className="bubbles">
                   {genre}
                   <button
-                    className="bubble-close-button"
+                    className="genre-bubble-close-button"
                     onClick={() => removeGenre(genre)}
                   >
                     <FontAwesomeIcon icon={faXmark} size="sm" />
@@ -118,49 +118,49 @@ export default function GenrePage({ params }) {
       {genreItems && (
         <>
           {genreItems.movies && genreItems.movies.length > 0 && (
-            <section className="section movies">
-              <div className="section-controls">
+            <section className="genre-section movies">
+              <div className="genre-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">
+                <div className="genre-scroll-controls">
                   <button
                     onClick={() => scroll(moviesRef, "left")}
-                    className="scroll-button"
+                    className="genre-scroll-button"
                   >
                     <FontAwesomeIcon icon={faCaretLeft} size="2xl" />
                   </button>
                   <button
                     onClick={() => scroll(moviesRef, "right")}
-                    className="scroll-button"
+                    className="genre-scroll-button"
                   >
                     <FontAwesomeIcon icon={faCaretRight} size="2xl" />
                   </button>
                 </div>
               </div>
-              <div className="items-grid" ref={moviesRef}>
+              <div className="genre-items-grid" ref={moviesRef}>
                 {genreItems.movies.map((item, index) => (
-                  <div key={index} className="item-card">
+                  <div key={index} className="genre-item-card">
                     <Link href={`/movie/${item[0]}`} passHref>
-                      <div className="item-link">
+                      <div className="genre-item-link">
                         <Image
                           src={
                             item[3] ||
-                            `https://via.placeholder.com/400x100/1a1c3f/FFF?text=${encodeURIComponent(
+                            `https://via.placeholder.com/300x80/1a1c3f/FFF?text=${encodeURIComponent(
                               item[0]
                             )}`
                           }
                           alt={item[0]}
-                          className="item-image"
-                          height={120}
-                          width={250}
+                          className="genre-item-image"
+                          height={80}
+                          width={300}
                         />
-                        <div className="item-info">
-                          <h3 className="item-title">{item[0]}</h3>
-                          <p className="item-description">{item[2]}</p>
+                        <div className="genre-item-info">
+                          <h3 className="genre-item-title">{item[0]}</h3>
+                          <p className="genre-item-description">{item[2]}</p>
                         </div>
                       </div>
                     </Link>
@@ -171,44 +171,44 @@ export default function GenrePage({ params }) {
           )}
 
           {genreItems.series && genreItems.series.length > 0 && (
-            <section className="section series">
-              <div className="section-controls">
+            <section className="genre-section series">
+              <div className="genre-section-controls">
                 <h2>TV Shows</h2>
-                <div className="scroll-controls">
+                <div className="genre-scroll-controls">
                   <button
                     onClick={() => scroll(seriesRef, "left")}
-                    className="scroll-button"
+                    className="genre-scroll-button"
                   >
                     <FontAwesomeIcon icon={faCaretLeft} size="2xl" />
                   </button>
                   <button
                     onClick={() => scroll(seriesRef, "right")}
-                    className="scroll-button"
+                    className="genre-scroll-button"
                   >
                     <FontAwesomeIcon icon={faCaretRight} size="2xl" />
                   </button>
                 </div>
               </div>
-              <div className="items-grid" ref={seriesRef}>
+              <div className="genre-items-grid" ref={seriesRef}>
                 {genreItems.series.map((item, index) => (
-                  <div key={index} className="item-card">
+                  <div key={index} className="genre-item-card">
                     <Link href={`/series/${item[0]}`} passHref>
-                      <div className="item-link">
+                      <div className="genre-item-link">
                         <Image
                           src={
                             item[3] ||
-                            `https://via.placeholder.com/150?text=${encodeURIComponent(
+                            `https://via.placeholder.com/300x80?text=${encodeURIComponent(
                               item[0]
                             )}`
                           }
                           alt={item[0]}
-                          className="item-image"
-                          width={250}
-                          height={120}
+                          className="genre-item-image"
+                          width={300}
+                          height={80}
                         />
-                        <div className="item-info">
-                          <h3 className="item-title">{item[0]}</h3>
-                          <p className="item-description">{item[2]}</p>
+                        <div className="genre-item-info">
+                          <h3 className="genre-item-title">{item[0]}</h3>
+                          <p className="genre-item-description">{item[2]}</p>
                         </div>
                       </div>
                     </Link>
@@ -222,7 +222,7 @@ export default function GenrePage({ params }) {
 
       {(!genreItems ||
         (genreItems.movies.length === 0 && genreItems.series.length === 0)) && (
-        <p className="no-items">
+        <p className="genre-no-items">
           {selectedGenres.size === 0
             ? "Please select a genre to see results."
             : "No items available for the selected genres."}

frontend/src/app/movie/[title]/movie.css

@@ -187,13 +187,13 @@
   }
 }
 
-.geners-section {
+.movie-geners-section {
   display: flex;
   text-align: center;
   align-items: center;
 }
 
-.genre-list {
+.movie-genre-list {
   list-style-type: none;
   padding: 0;
   display: flex;
@@ -202,17 +202,17 @@
   align-items: center;
 }
 
-.genre-item {
+.movie-genre-item {
   margin: 5px;
 }
 
-.genre-link {
+.movie-genre-link {
   text-decoration: none;
   color: #0082f3; /* Next.js blue color */
   font-weight: bold;
 }
 
-.genre-link:hover {
+.movie-genre-link:hover {
   text-decoration: underline;
 }
 

frontend/src/app/movie/[title]/page.js

@@ -109,14 +109,14 @@ export default function MovieDetailsPage({ params }) {
         </div>
         <div className="movie-details-info">
           <div className="movie-details-metadata">
-            <label className="geners-section">
+            <label className="movie-geners-section">
               <strong>Genre:</strong>{" "}
               {genres.length > 0 ? (
-                <ul className="genre-list">
+                <ul className="movie-genre-list">
                   {genres.map((genre) => (
-                    <li key={genre.id} className="genre-item">
+                    <li key={genre.id} className="movie-genre-item">
                       <Link href={`/genres/${genre.name}`} passHref>
-                        <label className="genre-link">{genre.name}</label>
+                        <label className="movie-genre-link">{genre.name}</label>
                       </Link>
                     </li>
                   ))}

frontend/src/components/CastSection.css

@@ -1,38 +1,40 @@
-.cast-section {
-    /* Your styles here */
-  }
-  
-  .cast-list {
-    list-style: none;
-    padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px; /* Add space between items */
-  }
-  
-  .cast-item {
-    margin: 0;
-    text-align: center;
-    width: 100px;
-  }
-  
-  .cast-image-container {
-    position: relative;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%; /* Circular container */
-    overflow: hidden;
-  }
-  
-  .cast-image {
-    border-radius: 50%; /* Circular images */
-    object-position: top;
-  }
-  
-  .cast-name {
-    display: block;
-    margin-top: 8px;
-    font-weight: bold; /* Highlight the actor's name */
-    text-overflow: clip;
-  }
-  
+.cast-section h2 {
+  margin-bottom: 15px;
+  font-size: 1.5rem;
+  border-bottom: 2px solid #4339ff;
+  padding-bottom: 5px;
+}
+
+.cast-list {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px; /* Adjusted space between items */
+}
+
+.cast-item {
+  margin: 0;
+  display: flex; /* Use flex to align image and text */
+  align-items: center; /* Center vertically */
+  width: auto; /* Allow dynamic width */
+}
+
+.cast-image-container {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%; /* Circular container */
+  overflow: hidden;
+  margin-right: 10px; /* Space between image and text */
+}
+
+.cast-image {
+  border-radius: 50%; /* Circular images */
+  object-position: top;
+}
+
+.cast-name {
+  font-weight: bold; /* Highlight the actor's name */
+  text-overflow: clip;
+}

frontend/src/components/CastSection.js

@@ -4,7 +4,7 @@ import './CastSection.css';
 const CastSection = ({ cast }) => {
   return (
     <div className="cast-section">
-      <strong>Cast:</strong>
+      <h2>Cast</h2>
       {cast.length > 0 ? (
         <ul className="cast-list">
           {cast.map((profile) => (

frontend/src/components/MoviePlayer.js

@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
 import "./MoviePlayer.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-  faFastBackward,
-  faFastForward,
   faPause,
   faPlay,
   faVolumeUp,
@@ -12,13 +11,15 @@ import {
   faExpand,
   faDownload,
   faArrowLeft,
-  faCaretLeft,
-  faAngleLeft,
+  faAngleDoubleRight,
+  faAngleDoubleLeft,
+  faCompress,
 } from "@fortawesome/free-solid-svg-icons";
 import { Spinner } from "@/components/Spinner";
 import SeekableProgressBar from "./SeekableProgressBar";
 
 export default function MoviePlayer({ videoUrl, title }) {
+  const router = useRouter();
   const videoRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [volume, setVolume] = useState(1);
@@ -195,10 +196,19 @@ export default function MoviePlayer({ videoUrl, title }) {
     }
   };
 
+  const handleExitClick = () => {
+    router.back();
+  };
+
   return (
     <div className="video-player-container" onMouseMove={handleMouseMove} onContextMenu={handleContextMenu}>
       <div className={`player-overlay ${showControls ? "show" : "hide"}`}>
-         <h2 className="video-title"><div className="control-btn"><FontAwesomeIcon icon={faAngleLeft} size="lg"/></div>{title}</h2>
+         <h2 className="video-title">
+           <div className="control-btn player-exit" onClick={handleExitClick}>
+             <FontAwesomeIcon icon={faArrowLeft} size="lg" />
+           </div>
+           {title}
+         </h2>
         <div className="controls">
           <div className="player-controls-top">
             <label className="current-time">{formatTime(videoRef?.current?.currentTime)}</label>
@@ -210,9 +220,8 @@ export default function MoviePlayer({ videoUrl, title }) {
               <button
                 onClick={handleRewind}
                 className="control-btn"
-                disabled={!isPlaying}
               >
-                <FontAwesomeIcon icon={faFastBackward} size="xl" />
+                <FontAwesomeIcon icon={faAngleDoubleLeft} size="xl" />
               </button>
               <button onClick={togglePlayPause} className="play-pause-btn">
                 {isPlaying ? (
@@ -224,9 +233,8 @@ export default function MoviePlayer({ videoUrl, title }) {
               <button
                 onClick={handleFastForward}
                 className="control-btn"
-                disabled={!isPlaying}
               >
-                <FontAwesomeIcon icon={faFastForward} size="xl" />
+                <FontAwesomeIcon icon={faAngleDoubleRight} size="xl" />
               </button>
             </div>
             <div className="player-controls-right">
@@ -246,7 +254,7 @@ export default function MoviePlayer({ videoUrl, title }) {
                 onChange={handleVolumeChange}
               />
               <button onClick={toggleFullscreen} className="control-btn">
-                <FontAwesomeIcon icon={faExpand} size="xl" />
+                <FontAwesomeIcon icon={isFullscreen ? faCompress : faExpand} size="xl" />
               </button>
               {videoUrl && (
                 <a href={videoUrl} download className="control-btn">

frontend/src/components/Sidebar.js

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -23,6 +23,7 @@ const Sidebar = () => {
   const pathname = usePathname();
   const [hoveredLink, setHoveredLink] = useState(null);
   const [prevLink, setPrevLink] = useState(null);
+  const sidebarRef = useRef(null);
 
   useEffect(() => {
     const activeLink = document.querySelector(
@@ -46,8 +47,25 @@ const Sidebar = () => {
     setHoveredLink(null);
   };
 
+  const handleClickOutside = (e) => {
+    if (sidebarRef.current && !sidebarRef.current.contains(e.target)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
   return (
-    <div className={`sidebar ${isOpen ? "open" : "closed"}`}>
+    <div ref={sidebarRef} className={`sidebar ${isOpen ? "open" : "closed"}`}>
       <div className="sidebar-header">
         <button className="sidebar-toggle" onClick={toggleSidebar}>
           <FontAwesomeIcon icon={faBars} size="sm" />
@@ -56,7 +74,7 @@ const Sidebar = () => {
           <h1 className="sidebar-title">
             Nexora{" "}
             <Image
-            className="sidebar-logo"
+              className="sidebar-logo"
               src="/favicon-32x32.png"
               width={32}
               height={32}