added more info

aadeshkulkarni · Nov 6, 2023 · f8b9a60 · f8b9a60
1 parent 9a2e343
commit f8b9a60
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 12 deletions.
diff --git a/src/components/Browse.js b/src/components/Browse.js
@@ -8,17 +8,22 @@ import GPTSearch from './GPTSearch'
 import Header from './Header'
 import MainContainer from './MainContainer'
 import SecondaryContainer from './SecondaryContainer'
+import Shimmer from './Shimmer'
+import MovieDetails from './MovieDetails'
 
 const Browse = () => {
   const showGPTSearch = useSelector(store => store?.gpt?.showGPTSearch)
+  const showInfo = useSelector(store => store?.config?.showInfo)
   useNowPlayingMovies()
   usePopularMovies()
   useTopRatedMovies()
   useUpcomingMovies()
-
+  if (showGPTSearch === undefined || showGPTSearch == null) return <Shimmer />
+
   return (
     <div className="flex flex-col justify-between h-screen min-h-screen text-gray-400">
       <Header />
+      {showInfo?.show && <MovieDetails />}
       {showGPTSearch ? <GPTSearch /> : <>
         <MainContainer />
         <SecondaryContainer />

diff --git a/src/components/Login.js b/src/components/Login.js
@@ -28,13 +28,9 @@ const Login = () => {
         if (!isSignInForm) {
             createUserWithEmailAndPassword(auth, email.current.value, password.current.value)
                 .then((userCredential) => {
-                    // const user = userCredential.user;
                     updateProfile(auth.currentUser, {
                         displayName: name.current.value, photoURL: USER_IMAGE
                     }).then(() => {
-                        // const { uid, email, displayName, photoURL } = auth.currentUser;
-                        // dispatch(addUser({ uid, email, displayName, photoURL }))
-                        // navigate("/login")
                         setSignInForm(true)
                         password.current.value = ""
                     }).catch((error) => {
@@ -90,7 +86,6 @@ const Login = () => {
                     <span>This is not the real Netflix. It's a clone developed by Aadesh Kulkarni to learn how Netflix frontend works and is intended to show off his development skills.</span>
                 </div>
             </div>
-            <Footer />
         </div>
     )
 }

diff --git a/src/components/MainContainer.js b/src/components/MainContainer.js
@@ -8,10 +8,10 @@ const MainContainer = () => {
     const movies = useSelector(store => store?.movies?.nowPlayingMovies)
     if (movies === null || movies === undefined) return;
     const mainMovie = movies[0]
-    const { original_title, overview} = mainMovie
+    const { original_title, overview, id} = mainMovie
     return (
         <div className="pt-[30%] bg-black md:pt-0">
-            <VideoTitle title={original_title} overview={overview} isMute={isMute} setIsMute={setIsMute} />
+            <VideoTitle id={id} title={original_title} overview={overview} isMute={isMute} setIsMute={setIsMute} />
             <VideoBackground movieId={mainMovie.id} isMute={isMute} setIsMute={setIsMute}/>
         </div>
     )

diff --git a/src/components/MovieDetails.js b/src/components/MovieDetails.js
@@ -0,0 +1,82 @@
+import React, { useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { changeShowInfo } from '../utils/slice/configSlice'
+import { API_OPTIONS, IMG_CDN_URL } from '../utils/constants'
+
+const MovieDetails = () => {
+    const showInfo = useSelector(store => store.config.showInfo)
+    const { movieDetails = {}, movieKeywords = [], movieCredits = [] } = showInfo
+    const dispatch = useDispatch()
+    useEffect(() => {
+        getDetails()
+    }, [])
+    async function getDetails() {
+        if (showInfo.movieId) {
+            const movieDetails = await getMovieDetails(showInfo?.movieId)
+            const movieKeywords = await getKeywords(showInfo?.movieId)
+            const movieCredits = await getCredits(showInfo?.movieId)
+            dispatch(changeShowInfo({ ...showInfo, movieDetails, movieKeywords, movieCredits }))
+        }
+    }
+    async function getMovieDetails(movieId) {
+        const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}?language=en-US`, API_OPTIONS)
+        const data = await response.json()
+        console.log("getMovieDetails: ", data)
+        return data;
+    }
+    async function getKeywords(movieId) {
+        const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}/keywords`, API_OPTIONS)
+        const data = await response.json()
+        console.log("Keywords: ", data)
+        return data;
+    }
+
+    async function getCredits(movieId) {
+        const response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}/credits?language=en-US`, API_OPTIONS)
+        const data = await response.json()
+        console.log("getCredits: ", data)
+        return data;
+    }
+    const close = () => {
+        dispatch(changeShowInfo({ show: false, movieId: null }))
+    }
+    return showInfo?.show && (<div className="z-50 absolute top-0 left-0 flex mt-[5%] justify-center w-screen h-screen bg-black bg-opacity-70 overflow-hidden">
+        <div className="relative w-3/5 pb-4 bg-gray-900 border border-gray-900 h-fit border-spacing-10">
+            <div onClick={close} className="z-[900] absolute flex items-center justify-center px-2 text-center text-white bg-black border border-black rounded-full cursor-pointer font-sm hover:opacity-50 right-4 top-4">X</div>
+            <div className="w-full min-h-[400px] bg-gray-900 relative">
+                <img src={IMG_CDN_URL + movieDetails?.backdrop_path} className="w-full h-full" alt="backdrop" />
+                <div className="z-[600] absolute text-white text-3xl font-bold bottom-8 left-8">{movieDetails?.original_title}</div>
+
+            </div>
+            <div className="grid grid-cols-12 p-4 text-white">
+                <div className="col-span-7 p-4">
+                    <div className="flex">
+                        <div className="pr-4 font-bold text-green-600">98% Match</div>
+                        <div>{movieDetails?.release_date?.split("-")[0]}</div>
+                    </div>
+                    <div>
+                        {movieKeywords.length > 0 && movieKeywords?.map(keyword => keyword?.name).join(", ")}
+                    </div>
+                    <div className="py-2 text-xl font-bold">
+                        #1 in TV Shows Today
+                    </div>
+                    <p className="text-sm">{movieDetails?.overview}</p>
+                </div>
+                <div className="col-span-5 p-4 text-sm">
+                    <div>
+                        <div className="grid grid-cols-12 mb-4">
+                            <div className="col-span-3 text-gray-300">Cast:</div>
+                            <div className="col-span-9">{movieCredits?.cast?.filter((a, i) => i < 4).map(credit => credit.name).join(", ")}</div>
+                        </div>
+                        <div className="grid grid-cols-12">
+                            <div className="col-span-3 text-gray-300">Genres:</div>
+                            <div className="col-span-9">{movieDetails?.genres?.map(genre => genre?.name).join(", ")}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>)
+}
+
+export default MovieDetails
diff --git a/src/components/Shimmer.js b/src/components/Shimmer.js
@@ -0,0 +1,74 @@
+import React from 'react'
+import Header from './Header'
+const MovieCardShimmer = () => {
+    return (<div className="ml-2 bg-gray-700 cursor-pointer md:h-[298px] w-36 md:w-[192px]">
+    </div>)
+}
+const Shimmer = () => {
+    return (
+        <div>
+            <Header isShimmer={true} />
+        <div className="flex flex-col justify-between h-screen min-h-screen text-gray-400">
+            <div className="w-screen h-screen min-h-screen bg-black md:pt-0">
+                <div className="w-screen aspect-video pt-[30%] md:pt-[20%] px-6 md:px-12 absolute text-white bg-gradient-to-r from-black">
+                    <h1 className="p-4 mb-2 text-2xl font-bold bg-gray-700 md:text-5xl w-36"> </h1>
+                    <p className="hidden w-1/4 py-2 text-lg bg-gray-700 h-36 md:inline-block md:py-6"> </p>
+                    <div className="flex justify-between">
+                        <div className="flex p-2 md:p-4">
+                            <button className="hover:bg-opacity-80 px-2 md:px-4 py-2 bg-white text-black rounded-md w-[100px] min-w-[100px] flex"> </button>
+                            <button className="hidden hover:bg-opacity-80 ml-4 px-4 py-2 bg-gray-700 rounded-md w-[140px] min-w-[140px] text-white md:flex"></button>
+                        </div>
+                        <div className="flex p-2 md:p-4">
+                            <img
+                                src="./mute.svg"
+                                className="px-2 py-2 text-white border border-white rounded-full cursor-pointer hover:bg-opacity-10 hover:bg-white md:p-2"
+                                alt="mute-sound" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="z-30 mt-0 md:-mt-52">
+                <h1 className="w-1/4 pb-2 pl-4 ml-4 text-lg bg-gray-700 md:text-3xl md:p-4"> </h1>
+                <div className="flex overflow-x-scroll">
+                    <div className="flex p-2">
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                    </div>
+                </div>
+                <h1 className="w-1/4 pb-2 pl-4 ml-4 text-lg bg-gray-700 md:text-3xl md:p-4"> </h1>
+                <div className="flex overflow-x-scroll">
+                    <div className="flex p-2">
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                    </div>
+                </div>
+                <h1 className="w-1/4 pb-2 pl-4 ml-4 text-lg bg-gray-700 md:text-3xl md:p-4"> </h1>
+                <div className="flex overflow-x-scroll">
+                    <div className="flex p-2">
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                        <MovieCardShimmer />
+                    </div>
+                </div>
+            </div>
+        </div>
+        </div>
+    )
+}
+
+
+export default Shimmer
diff --git a/src/components/VideoTitle.js b/src/components/VideoTitle.js
@@ -1,14 +1,17 @@
 import React from 'react'
+import { useDispatch } from 'react-redux'
+import { changeShowInfo } from '../utils/slice/configSlice'
 
-const VideoTitle = ({overview, title, isMute, setIsMute}) => {
+const VideoTitle = ({overview, title, isMute, setIsMute, id}) => {
+  const dispatch = useDispatch()
   return (
     <div className="w-screen aspect-video pt-[30%] md:pt-[20%] px-6 md:px-12 absolute text-white bg-gradient-to-r from-black">
         <h1 className="text-2xl font-bold md:text-5xl">{title}</h1>
         <p className="hidden w-1/4 py-2 text-lg md:inline-block md:py-6">{overview}</p>
         <div className="flex justify-between">
         <div className="flex p-2 md:p-4">
             <button className="hover:bg-opacity-80 px-2 md:px-4 py-2 bg-white text-black rounded-md w-[100px] min-w-[100px] flex"><img src="./play.svg" alt="play-icon" className="mr-2"/>Play</button>
-            <button className="hidden hover:bg-opacity-80 ml-4 px-4 py-2 bg-gray-700 rounded-md w-[140px] min-w-[140px] text-white md:flex"><img src="./info.svg" alt="play-icon" className="mr-2"/>More Info</button>
+            <button onClick={()=>{dispatch(changeShowInfo({show:true, movieId:id}))}}className="hidden hover:bg-opacity-80 ml-4 px-4 py-2 bg-gray-700 rounded-md w-[140px] min-w-[140px] text-white md:flex"><img src="./info.svg" alt="play-icon" className="mr-2"/>More Info</button>
         </div>
         <div className="flex p-2 md:p-4">
             <img 

diff --git a/src/utils/slice/configSlice.js b/src/utils/slice/configSlice.js
@@ -3,14 +3,24 @@ import { createSlice } from "@reduxjs/toolkit";
 const configSlice = createSlice({
     name: "config",
     initialState: {
-        lang: "en"
+        lang: "en",
+        showInfo: {
+            show:false,
+            movieId: null,
+            movieDetails:{},
+            movieKeywords: [], 
+            movieCredits: []
+        }
     },
     reducers: {
         changeLanguage: (state,action) =>{
             state.lang = action.payload
+        },
+        changeShowInfo: (state,action)=>{
+            state.showInfo = action.payload
         }
     }
 })
 
-export const { changeLanguage } = configSlice.actions;
+export const { changeLanguage, changeShowInfo } = configSlice.actions;
 export default configSlice.reducer;