Massive Massive Massive🔥🔥🔥✌

kaushiksheel · Dec 12, 2022 · 1bbc87f · 1bbc87f
1 parent 813dab7
commit 1bbc87f
Show file tree

Hide file tree

Showing 18 changed files with 287 additions and 147 deletions.
diff --git a/.env b/.env
@@ -1,6 +1,2 @@
 VITE_APP_TMDB_API_KEY=2edf9f02e088272f6ff2eab6bf5fa21a
 
-MOVIES_GENRE_LIST_URL="https://api.themoviedb.org/3/genre/movie/list?api_key=2edf9f02e088272f6ff2eab6bf5fa21a&language=en-US"
-TV_SERIES_GENRE_LIST_URL="https://api.themoviedb.org/3/genre/movie/list?api_key=2edf9f02e088272f6ff2eab6bf5fa21a&language=en-US"
-
-MOVIE_CREDITS="https://api.themoviedb.org/3/movie/505642/credits?api_key=2edf9f02e088272f6ff2eab6bf5fa21a&language=en-US"
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env
diff --git a/src/components/Genre.jsx b/src/components/Genre.jsx
@@ -1,15 +1,23 @@
-import React, { useContext } from 'react'
+import { motion } from 'framer-motion'
+import React  from 'react'
 import { Badge } from 'react-bootstrap'
+import { item } from '../helpers/framerMotion'
+
 
 export const Genre = ({title,handleGenres,id,active}) => {
 
 
   return (
-<h3>
-<Badge onClick={()=>handleGenres(id)} id='badge' style={{
+<motion.h3
+ whileTap={{
+  scale: 0.8,
+}}
+
+onClick={()=>handleGenres(id)}  variants={item}>
+<Badge id='badge' style={{
     cursor:'pointer',
 
 }} bg={active?"primary":"dark"}>{title}</Badge>
-</h3>
+</motion.h3>
   )
 }
diff --git a/src/components/MovieCard.jsx b/src/components/MovieCard.jsx
@@ -1,14 +1,26 @@
 import React from "react";
 import { Card } from "react-bootstrap";
 import { LazyLoadImage } from "react-lazy-load-image-component";
-import { IMAGE_LINK } from "../constants";
+import { IMAGE_LINK, IMAGE_UNAVAILABLE_PLACEHOLDER } from "../constants";
 import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
 
-export const MovieCard = ({ movie, tvShow }) => {
+
+export const MovieCard = ({ movie }) => {
   const navigate = useNavigate();
 
   return (
-    <Card
+  <motion.div
+  initial={{ scale: 0,opacity:0 }}
+  animate={{ opacity:1, scale: 1 }}
+  transition={{
+    type: "spring",
+    stiffness: 260,
+    damping: 40,
+  }}
+
+  >
+      <Card
       style={{
         width: "100%",
         background: "#161616",
@@ -20,7 +32,7 @@ export const MovieCard = ({ movie, tvShow }) => {
     >
       <Card.Body>
         <LazyLoadImage
-          src={`${IMAGE_LINK}${movie.poster_path || movie.backdrop_path}`}
+          src={!movie.poster_path||!movie.backdrop_path ?IMAGE_UNAVAILABLE_PLACEHOLDER :`${IMAGE_LINK}${movie.backdrop_path}`}
           width={"100%"}
           height={350}
           alt="movie"
@@ -36,5 +48,6 @@ export const MovieCard = ({ movie, tvShow }) => {
         </Card.Title>
       </Card.Body>
     </Card>
+  </motion.div>
   );
 };
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,81 +1,61 @@
 import React from "react";
 import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
-import { FireIcon, TvIcon, FilmIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import {Link,useParams,useLocation} from 'react-router-dom'
+import {
+  FireIcon,
+  TvIcon,
+  FilmIcon,
+  MagnifyingGlassIcon,
+} from "@heroicons/react/24/outline";
+import { Link, useParams, useLocation } from "react-router-dom";
+import { nav_links } from "../helpers/data";
 
 export default function NavComp() {
-  const params=useLocation();
-const currentPath=params.pathname
+  const params = useLocation();
+  const currentPath = params.pathname;
 
   return (
-    <Navbar className="navbar" expand="lg"   style={{position:'sticky',height:'fit-content',top:0,zIndex:2}}>
+    <Navbar
+      className="navbar"
+      expand="lg"
+      style={{ position: "sticky", height: "fit-content", top: 0, zIndex: 2 }}
+    >
       <Container>
         <Navbar.Brand style={{ color: "white", fontWeight: "bold" }} href="#">
           MoviesHub
         </Navbar.Brand>
 
-        <Navbar.Toggle 
-        style={{background:'white'}}
-        aria-controls="navbarScroll" />
+        <Navbar.Toggle
+          style={{ background: "white" }}
+          aria-controls="navbarScroll"
+        />
         <Navbar.Collapse id="navbarScroll">
           <Nav
             className="me-auto my-2 my-lg-0 d-flex gap-3"
             style={{ maxHeight: "100px" }}
             navbarScroll
           >
-          <Link to='/' style={{ color: "white", display: "flex", alignItems: "center",fontWeight:currentPath==='/'?'bold':'medium' }}>
-
-
-
-
-              <FireIcon
+            {nav_links.map((item) => (
+              <Link
+                key={item.id}
+                to={item.href}
                 style={{
-                  width: 22,
-                  height: 22,
-                  marginRight: 6,
+                  color:currentPath === item.href ? "white" : "#afafaf",
+                  display: "flex",
+                  alignItems: "center",
+                  fontWeight: currentPath === item.href ? "bold" : "medium",
                 }}
-              />
-              Trendings
-
-          </Link>
-          <Link to='/movies' style={{ color: "white", display: "flex", alignItems: "center",fontWeight:currentPath==='/movies'?'bold':'medium'  }}>
-
-              <FilmIcon
-                style={{
-                  width: 22,
-                  height: 22,
-                  marginRight: 6,
-                }}
-              />
-              Movies
-
-          </Link>
-          <Link to='/tv-series'   style={{ color: "white", display: "flex", alignItems: "center" ,fontWeight:currentPath==='/tv-series'?'bold':'medium' }}>
-
-              <TvIcon
-                style={{
-                  width: 22,
-                  height: 22,
-                  marginRight: 6,
-                }}
-              />
-              TV Series
-
-          </Link>
-          <Link to='/search'   style={{ color: "white", display: "flex", alignItems: "center" ,fontWeight:currentPath==='/search'?'bold':'medium' }}>
-
-              <MagnifyingGlassIcon
-                style={{
-                  width: 22,
-                  height: 22,
-                  marginRight: 6,
-                }}
-              />
-Search
-
-          </Link>
+              >
+                <item.icon
+                  style={{
+                    width: 22,
+                    height: 22,
+                    marginRight: 6,
+                  }}
+                />
+                {item.title}
+              </Link>
+            ))}
           </Nav>
-
         </Navbar.Collapse>
       </Container>
     </Navbar>

diff --git a/src/components/SearchComp.jsx b/src/components/SearchComp.jsx
@@ -0,0 +1,31 @@
+
+import React, { useContext } from 'react'
+import { Form,Button } from 'react-bootstrap'
+import { MovieContext } from '../context/MovieContext'
+
+export const SearchComp = () => {
+    const{setQuery,query,SearchMovies}=useContext(MovieContext);
+
+
+const handleSearch=(e)=>{
+  e.preventDefault()
+SearchMovies()
+}
+
+
+  return (
+<Form onSubmit={handleSearch} id='form' className=' d-flex gap-3 w-50'>
+    <Form.Control 
+    className='search-box py-2'
+    placeholder='search movies' value={query} onChange={e=>setQuery(e.target.value)}/>
+    <Button
+    onClick={handleSearch}
+    style={{
+        background:"#00CE79",
+        border:'none',
+        color:'black'
+    }}
+    className='search-btn'>Search</Button>
+</Form>
+  )
+}
diff --git a/src/components/TvCard.jsx b/src/components/TvCard.jsx
@@ -1,16 +1,25 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Card } from "react-bootstrap";
 import { LazyLoadImage } from "react-lazy-load-image-component";
-import { IMAGE_LINK } from "../constants";
-import {useNavigate} from 'react-router-dom';
-import { MovieContext } from "../context/MovieContext";
+import { IMAGE_LINK, IMAGE_UNAVAILABLE_PLACEHOLDER } from "../constants";
+import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
 
-export const TVCard = ({ movie ,tvShow}) => {
-  const navigate=useNavigate()
 
+export const TVCard = ({ movie}) => {
+  const navigate = useNavigate();
 
   return (
-    <Card
+  <motion.div
+  initial={{ scale: 0,opacity:0 }}
+  animate={{ opacity:1, scale: 1 }}
+  transition={{
+    type: "spring",
+    stiffness: 260,
+    damping: 40
+  }}
+  >
+  <Card
       style={{
         width: "100%",
         background: "#161616",
@@ -22,20 +31,23 @@ export const TVCard = ({ movie ,tvShow}) => {
     >
       <Card.Body>
         <LazyLoadImage
-          src={`${IMAGE_LINK}${movie.poster_path || movie.backdrop_path}`}
+            src={!movie.poster_path||!movie.backdrop_path ?IMAGE_UNAVAILABLE_PLACEHOLDER :`${IMAGE_LINK}${movie.backdrop_path}`}
           width={"100%"}
           height={350}
           alt="movie"
           effect="blur"
           style={{ objectFit: "cover" }}
         />
         <Card.Title
-         onClick={()=>navigate(`/tv/${movie.id}`)}
-        className="text-center mt-3" style={{ cursor: "pointer" }}>
+          onClick={() => navigate(`/tv/${movie.id}`)}
+          className="text-center mt-3"
+          style={{ cursor: "pointer" }}
+        >
           {movie.name || movie.title}
         </Card.Title>
-
       </Card.Body>
     </Card>
+
+  </motion.div>
   );
 };
diff --git a/src/components/VideoPlayerModal.jsx b/src/components/VideoPlayerModal.jsx
@@ -20,8 +20,9 @@ export const VideoPlayerModal = (props) => {
       </Modal.Header>
       <Modal.Body style={{background:'#161616'}} >
       <ReactPlayer
+
       width={'100%'}
-      playing controls url={`https://youtu.be/${props.videoId}`} />
+      playing controls url={`https://youtu.be/${props?.videoid}`} />
       </Modal.Body>
       <Modal.Footer style={{background:"#161616",border:'none'}}>
         <Button onClick={props.onHide}>Close</Button>

diff --git a/src/constants.js b/src/constants.js
@@ -1,7 +1,7 @@
-export const API_KEY = "2edf9f02e088272f6ff2eab6bf5fa21a";
+export const API_KEY = import.meta.env.VITE_APP_TMDB_API_KEY;
 
 export const IMAGE_LINK = "https://image.tmdb.org/t/p/w500";
-
+export const IMAGE_UNAVAILABLE_PLACEHOLDER="https://upload.wikimedia.org/wikipedia/en/6/60/No_Picture.jpg"
 
 export const TRENDINGS = (pageNumber = 1) =>
   `https://api.themoviedb.org/3/trending/movie/week?api_key=${API_KEY}&page=${pageNumber}`;
@@ -17,4 +17,7 @@ export const TV_SHOWS=(pageNumber=1) => `https://api.themoviedb.org/3/tv/on_the_
 
 export const FILTERED_MOVIES_WITH_GENRES=(pageNumber=1,id)=>`https://api.themoviedb.org/3/discover/movie?api_key=${API_KEY}&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=${pageNumber}&with_genres=${id}&with_watch_monetization_types=flatrate`
 
-export const FILTERED_TV_SHOWS_WITH_GENRES=(pageNumber=1,id)=>`https://api.themoviedb.org/3/discover/tv?api_key=${API_KEY}&language=en-US&sort_by=popularity.desc&page=${pageNumber}&timezone=America%2FNew_York&with_genres=${id}&include_null_first_air_dates=false&with_watch_monetization_types=flatrate&with_status=0&with_type=0`
+export const FILTERED_TV_SHOWS_WITH_GENRES=(pageNumber=1,id)=>`https://api.themoviedb.org/3/discover/tv?api_key=${API_KEY}&language=en-US&sort_by=popularity.desc&page=${pageNumber}&timezone=America%2FNew_York&with_genres=${id}&include_null_first_air_dates=false&with_watch_monetization_types=flatrate&with_status=0&with_type=0`
+
+
+export const SEARCH_MOVIES=(pageNumber=1,query="")=>`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&language=en-US&query=${query}&page=${pageNumber}&include_adult=false`
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,3 +22,5 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
+    .env