Merge pull request #59 from plang-psm/resize-swpers

updates to swiper and more.

frontend/src/components/Footer.jsx

@@ -4,7 +4,7 @@ import { AiFillLinkedin, AiFillGithub, AiFillRocket } from 'react-icons/ai';
 
 function Footer() {
   return (
-    <div className="min-h-100 py-8 text-center bg-transparent">
+    <div className="h-[300px] py-8 text-center flex flex-col justify-center items-center bg-transparent">
       <p
         className="text-md
       "

frontend/src/components/MediaCard.jsx

@@ -56,7 +56,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
             </picture>
           </div>
         </div>
-        <div className="max-w-[1000px] mx-auto">
+        <div className="max-w-[1100px] mx-auto">
           <div className="top-container relative pt-24 px-4">
             <div className="media-heading w-full flex flex-col justify-center content-center md:flex-row">
               <div className="media-image mx-auto">
@@ -170,7 +170,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
                 <span className="font-bold ">Overview: </span>
                 {mediaArr.overview ? mediaArr.overview : 'No overview found'}
               </div>
-              <div className="side-info-container flex flex-row justify-evenly items-center md:flex-col md:justify-center min-w-[250px] md:w-full my-8 bg-slate-900 rounded-2xl font-thin w-full p-2 md:py-0">
+              <div className="side-info-container flex flex-row justify-evenly items-center md:flex-col md:justify-center min-w-[250px] md:max-w-[350px] md:w-full my-8 bg-slate-900 rounded-2xl font-thin w-full p-2 md:py-0">
                 <div className="user-rating max-w-[140px] mx-auto flex justify-around items-center py-4">
                   <ReviewBar vote={mediaArr.vote_average} />
                   <h2>User Rating</h2>
@@ -196,7 +196,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
             <div className="mid-container my-2 w-full md:flex md:justify-between">
               <div className="credits-container text-center md:w-full">
                 {/* Media cast */}
-                <h2 className="text-start font-bold mb-2">Casting</h2>
+                <h2 className="text-start pb-4 text-2xl font-bold">Casting</h2>
                 {credits.length === 0 ? (
                   <div className="h-[250px] w-full flex justify-center items-center">
                     <h2> No Cast Members</h2>
@@ -236,7 +236,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
                             srcSet={`${credit.profile_path === null ? NOIMAGE : POSTER_IMG + credit.profile_path}.jpeg`}
                           />
                           <img
-                            className="object-cover mx-auto w-[161px] h-[250px]"
+                            className="object-cover mx-auto w-full h-[250px]"
                             loading="lazy"
                             srcSet={`
                           ${credit.profile_path === null ? NOIMAGE : POSTER_IMG + credit.profile_path}.jpg?width=100 100w,
@@ -274,7 +274,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
             {/* Media suggest */}
             <div className="bottom-container w-full md:flex my-8 border-t-[.001px] py-8 border-gray-100">
               <div className="suggestion-container text-center w-full">
-                <h2 className="text-start font-bold mb-2">Suggestions</h2>
+                <h2 className="text-start pb-4 text-2xl font-bold">Suggestions</h2>
                 {suggested.length === 0 ? (
                   <div className="h-[200px] flex justify-center items-center">
                     <h2> No Suggested Movies</h2>
@@ -314,7 +314,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
                               srcSet={`${media.backdrop_path === null ? NOIMAGE : BACKDROP_IMG + media.backdrop_path}.jpeg`}
                             />
                             <img
-                              className="object-cover w-[230px] h-[200px]"
+                              className="object-cover w-full h-[200px]"
                               loading="lazy"
                               srcSet={`
                           ${media.backdrop_path === null ? NOIMAGE : BACKDROP_IMG + media.backdrop_path}.jpg?width=100 100w,

frontend/src/components/Navbar.jsx

@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import { AiOutlineClose, AiOutlineMenu, AiOutlineKey } from 'react-icons/ai';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import SearchBar from './home components/SearchBar';
+import SearchBar from '../components/SearchBar';
 import { useSelector, useDispatch } from 'react-redux';
 import { logout } from '../features/auth/authSlice';
 
@@ -76,10 +76,7 @@ function Navbar() {
             >
               Home
             </li>
-            <li
-              className="p-4 text-white font-semibold cursor-pointer group block"
-              onClick={() => navigate('/')}
-            >
+            <li className="p-4 text-white font-semibold cursor-pointer group block">
               Movies
               <div
                 className="dropdown-movie hidden group-hover:block relative"
@@ -116,10 +113,7 @@ function Navbar() {
                 </ul>
               </div>
             </li>
-            <li
-              className="p-4 text-white font-semibold cursor-pointer group block"
-              onClick={() => navigate('/')}
-            >
+            <li className="p-4 text-white font-semibold cursor-pointer group block">
               TV
               <div
                 className="dropdown-tv  hidden group-hover:block relative"

frontend/src/components/home components/SearchBar.jsx → frontend/src/components/SearchBar.jsx

@@ -33,7 +33,7 @@ function SearchBar({ handleSearch, handleSearchRoute }) {
 
   return (
     <div
-      className="z-40 search-bar h-screen absolute top-0 left-0 w-full opacity-[85%] bg-black"
+      className="z-40 search-bar h-screen absolute top-0 left-0 w-full opacity-[95%] bg-black"
       data-test="searchbar"
     >
       <div
@@ -70,7 +70,8 @@ function SearchBar({ handleSearch, handleSearchRoute }) {
         <ul className="movie-container max-h-[400px] overflow-y-scroll">
           {movieData.map((data) => (
             <li
-              className="card-container bg-gray-900 border-t border-gray-500 items-center hover:bg-gray-800 opacity-[80%]"
+              key={data.id}
+              className="card-container bg-gray-900 border-t border-gray-500 items-center hover:bg-gray-800 opacity-[95%]"
               onClick={() => handleSearchRoute(`/${typeParam}/${data.id}`)}
             >
               <div className="title p-1">

frontend/src/index.css

@@ -5,12 +5,21 @@
 html {
   -webkit-tap-highlight-color: transparent;
 }
-
+.swiper-button-next {
+  background-color: white;
+  opacity: 70%;
+  border-radius: 100%;
+}
+.swiper-button-prev {
+  background-color: white;
+  opacity: 70%;
+  border-radius: 100%;
+}
 .swiper-button-next::after {
-  font-size: 40px !important;
-  color: white;
+  font-size: 30px !important;
+  color: black;
 }
 .swiper-button-prev::after {
-  font-size: 40px !important;
-  color: white;
+  font-size: 30px !important;
+  color: black;
 }

frontend/src/pages/Home.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import Header from '../components/home components/Header';
-import NowPlaying from '../components/home components/NowPlaying';
-import TrendingMovieCarousel from '../components/home components/TrendingMovieCarousel';
-import TrendingTvCarousel from '../components/home components/TrendingTvCarousel';
-import ScifiMovieCarousel from '../components/home components/ScifiMovieCarousel';
-import FamilyMovieCarousel from '../components/home components/FamilyMovieCarousel';
+import Header from '../views/Header';
+import NowPlaying from '../views/NowPlaying';
+import TrendingMovieCarousel from '../views/TrendingMovieCarousel';
+import TrendingTvCarousel from '../views/TrendingTvCarousel';
+import ScifiMovieCarousel from '../views/ScifiMovieCarousel';
+import FamilyMovieCarousel from '../views/FamilyMovieCarousel';
 
 function MovieHome() {
   return (

frontend/src/pages/Login.jsx

@@ -16,7 +16,6 @@ function LogIn() {
     email: '',
     password: '',
   });
-  const [showPassword, setShowPassword] = useState(false);
   const { email, password } = form;
 
   // Updates data if any fields are changed.
@@ -64,25 +63,21 @@ function LogIn() {
             value={email}
             onChange={handleChange}
             placeholder="Email"
+            autoComplete="email"
             className="p-1.5"
             required
           />
           <input
             data-test="pwd-input"
-            type={showPassword ? 'text' : 'password'}
+            type="password"
             name="password"
             value={password}
             onChange={handleChange}
             placeholder="Password"
+            autoComplete="current-password"
             className="p-1.5"
             required
           />
-          <button
-            className="text-gray-400 p-2 right-0 absolute"
-            onClick={() => setShowPassword(!showPassword)}
-          >
-            Show
-          </button>
           <input data-test="submit-button" type="submit" className="p-1.5 bg-red-700 text-white" />
         </form>
         <button

frontend/src/pages/MovieHome.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useParams, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import MovieAndTvSkeleton from './MovieAndTvSkeleton';
+import MovieAndTvSkeleton from './skeletons/MovieAndTvSkeleton';
 
 const MovieHome = () => {
   const [moviesArr, setMoviesArr] = useState([]);

frontend/src/pages/MoviePage.jsx

@@ -8,7 +8,7 @@ import 'swiper/css';
 import 'swiper/css/free-mode';
 import Spinner from '../components/Spinner';
 import MediaCard from '../components/MediaCard';
-import MediaSkeleton from '../components/MediaSkeleton';
+import MediaSkeleton from '../views/skeletons/MediaSkeleton';
 
 function MoviePage() {
   const dispatch = useDispatch();

frontend/src/pages/SignUp.jsx

@@ -87,6 +87,7 @@ function SignUp() {
             value={username}
             onChange={handleChange}
             placeholder="Username"
+            autoComplete="username"
             className="p-1.5"
             required
           />
@@ -97,6 +98,7 @@ function SignUp() {
             value={email}
             onChange={handleChange}
             placeholder="Email"
+            autoComplete="email"
             className="p-1.5"
             required
           />
@@ -107,6 +109,7 @@ function SignUp() {
             value={password}
             onChange={handleChange}
             placeholder="Password"
+            autoComplete="new-password"
             className="p-1.5"
             required
           />
@@ -117,23 +120,10 @@ function SignUp() {
             value={confirmPassword}
             onChange={handleChange}
             placeholder="Password"
+            autoComplete="new-password"
             className="p-1.5"
             required
           />
-          {/* <button
-
-            className='text-gray-400 p-2 right-0 absolute'
-            onClick={() => setShowPassword(!showPassword)}
-          >
-            Show
-          </button>
-
-          <button
-            className='text-gray-400 p-2 right-0 bottom-12 absolute'
-            onClick={() => setShowPassword(!showPassword)}
-          >
-            Show
-          </button> */}
           <input data-test="submit-button" type="submit" className="p-1.5 bg-red-700 text-white" />
         </form>
         <button

frontend/src/pages/TvHome.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useParams, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import MovieAndTvSkeleton from './MovieAndTvSkeleton';
+import MovieAndTvSkeleton from './skeletons/MovieAndTvSkeleton';
 
 const TvHome = () => {
   const [tvShowArr, setTvShowArr] = useState([]);

frontend/src/pages/TvPage.jsx

@@ -7,7 +7,7 @@ import { toast } from 'react-toastify';
 import 'swiper/css';
 import 'swiper/css/free-mode';
 import MediaCard from '../components/MediaCard';
-import MediaSkeleton from '../components/MediaSkeleton';
+import MediaSkeleton from '../views/skeletons/MediaSkeleton';
 
 function TvPage() {
   const dispatch = useDispatch();

frontend/src/pages/Watchlist.jsx

@@ -3,8 +3,8 @@ import { useSelector, useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { getWatchlists } from '../features/watchlist/watchlistSlice';
 import { logout } from '../features/auth/authSlice';
-import EmptyWatchlist from '../components/EmptyWatchlist';
-import WatchlistMovies from '../components/WatchlistMovies';
+import EmptyWatchlist from '../views/WatchlistMovies';
+import WatchlistMovies from '../views/EmptyWatchlist';
 
 function Watchlist() {
   // Pull user/isLoading from state

frontend/src/components/home components/FamilyMovieCarousel.jsx → frontend/src/views/FamilyMovieCarousel.jsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
-import { ReviewBarABS } from '../../util/utils';
+import { ReviewBarABS } from '../util/utils';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Navigation } from 'swiper';
-import CardSkeleton from './CardSkeleton';
+import CardSkeleton from './skeletons/CardSkeleton';
 
 function FamilyMovieCarousel() {
   const API_KEY = process.env.REACT_APP_TMDB_KEY;
@@ -42,51 +42,39 @@ function FamilyMovieCarousel() {
   };
 
   return (
-    <div className="trending-container h-[338px] py-5">
-      <h1 className="pb-4 text-2xl">{'Trending Movies'}</h1>
+    <div className="trending-container mx-auto max-w-[1200px] h-[338px] p-6">
+      <h1 className="pb-4 text-2xl font-bold">Family Movies</h1>
       {/* Swiper configuration settings for carousel */}
       <div className="">
         {loading ? (
           <CardSkeleton />
         ) : (
           <Swiper
             slidesPerView={2}
-            spaceBetween={15}
+            spaceBetween={10}
             navigation={true}
             modules={[Navigation]}
             className="mySwiper"
             breakpoints={{
               510: {
                 slidesPerView: 3,
-                spaceBetween: 15,
+                spaceBetween: 10,
               },
               768: {
                 slidesPerView: 4,
-                spaceBetween: 15,
+                spaceBetween: 10,
               },
-              1024: {
+              900: {
                 slidesPerView: 6,
-                spaceBetween: 20,
-              },
-              1300: {
-                slidesPerView: 6,
-                spaceBetween: 20,
-              },
-              1500: {
-                slidesPerView: 8,
-                spaceBetween: 20,
-              },
-              2000: {
-                slidesPerView: 10,
-                spaceBetween: 25,
+                spaceBetween: 10,
               },
             }}
           >
             <div className="relative md:overflow-x-auto">
               {trendingFamilyData.map(({ id, poster_path, original_title, vote_average }) => (
                 <SwiperSlide key={id}>
                   <Link to={`/movie/${id}`}>
-                    <picture>
+                    <picture className="group block">
                       <source
                         type="image/webp"
                         srcSet={`${poster_path == null ? NOIMAGE : API_IMG + poster_path}.webp`}
@@ -96,7 +84,7 @@ function FamilyMovieCarousel() {
                         srcSet={`${poster_path == null ? NOIMAGE : API_IMG + poster_path}.jpeg`}
                       />
                       <img
-                        className="object-cover w-[167px] h-[250px]"
+                        className="object-cover w-full h-[250px]"
                         loading="lazy"
                         fetchpriority="low"
                         srcSet={`
@@ -110,6 +98,9 @@ function FamilyMovieCarousel() {
                             : `${original_title} image`
                         }`}
                       />
+                      <div className="absolute hidden inset-0 group-hover:flex items-center justify-center cursor-pointer bg-slate-800/90">
+                        <p className="font-semibold text-xl text-center px-2">{original_title}</p>
+                      </div>
                     </picture>
 
                     <ReviewBarABS vote={vote_average} />