Master

netflix/netlify.toml

@@ -0,0 +1,6 @@
+[[redirects]]
+from ="/*"
+to="index.html"
+status=200
+
+

netflix/package.json

@@ -8,15 +8,17 @@
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
-    "firebase": "^9.8.3",
+    "firebase": "^8.2.3",
     "movie-trailer": "^2.1.0",
+    "netlify": "^11.0.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-youtube": "^9.0.1",
     "redux": "^4.2.0",
+    "vercel": "^27.1.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -42,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "netlify-cli": "^10.10.0"
   }
 }

netflix/public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

netflix/src/App.js

@@ -1,21 +1,24 @@
 import React from 'react';
 import './App.css';
 import { BrowserRouter,Routes,Route} from 'react-router-dom'
+import SignUpScreen from './components/screen/signUpScreen';
 import ProfileScreen from './components/screen/profileScreen';
 import HomeScreen from './components/screen/HomeScreen';
 import LoginScreen from './components/screen/LoginScreen'
 
 import { useEffect } from 'react';
-import {getAuth,onAuthStateChanged} from 'firebase/auth'
+// import {getAuth,onAuthStateChanged} from 'firebase/auth'
+import { auth } from './firebase';
 import {useDispatch, useSelector} from 'react-redux'
 import {login,logout, selectUser} from './features/user/userSlice';
+
 const App=()=>{
   // const [trailerUrl,setTrailerUrl] = useState("")
   const user =useSelector(selectUser)
   const dispatch = useDispatch()
-  const auth = getAuth()
+  // const auth = getAuth()
   useEffect(()=>{
-    const unsubscribe = onAuthStateChanged(auth,(userAuth)=>{
+    const unsubscribe = auth.onAuthStateChanged((userAuth)=>{
       if(userAuth){
         //login 
         dispatch(
@@ -37,8 +40,10 @@ const App=()=>{
       <LoginScreen />
     ):(
       <Routes>
-        <Route path='/profile' element={<ProfileScreen />} />
-        <Route path='/' element={<HomeScreen />} >        
+        <Route path='/logout' element={<ProfileScreen />} />
+        <Route path='/signin' element={<SignUpScreen />} />
+        <Route path='/' element={<LoginScreen />} />
+        <Route path='/home' element={<HomeScreen />} >        
         </Route>
       </Routes>
     )

netflix/src/components/Navbar.js

@@ -25,13 +25,13 @@ const Navbar =()=>{
     return (
         <nav className={`navbar ${show && "navbar__black"}`}>
             <img
-            onClick={()=> navigate('/')}
+            onClick={()=> navigate('/home')}
             className='netflix__logo'
             src={NetflixLogo}
             alt="Netflix logo" 
             />
             <img
-            onClick={()=> navigate('/profile')}
+            onClick={()=> navigate('/logout')}
             className='avatar__logo'
             src={Avatar}
             alt="avatar" 

netflix/src/components/Row.js

@@ -1,11 +1,11 @@
 import React,{useState,useEffect} from 'react'
 import axios from '../axios'
 import  './row.css'
-import YouTube from 'react-youtube'
-import movieTrailer from 'movie-trailer'
+// import YouTube from 'react-youtube'
+// import movieTrailer from 'movie-trailer'
 
 let base_url= "https://image.tmdb.org/t/p/original/"
-const Row=({title,fetchUrl,isLargeRow,isPaddingBottom,videoid})=>{
+const Row=({title,fetchUrl,isLargeRow,isPaddingBottom})=>{
     const [movies,setMovies] = useState([]);
     const [trailerUrl,setTrailerUrl] = useState("")
 
@@ -14,6 +14,7 @@ const Row=({title,fetchUrl,isLargeRow,isPaddingBottom,videoid})=>{
       const fetchData= async ()=>{
             try {
                 let request = await axios.get(fetchUrl);
+                // console.log(request.data.results)
              setMovies(request.data.results)
              return request; 
             } catch (error) {
@@ -23,69 +24,75 @@ const Row=({title,fetchUrl,isLargeRow,isPaddingBottom,videoid})=>{
         fetchData()
     },[fetchUrl])
 
-    const opts ={
-      height:"390",
-      width:"100%",
-      playerVars:{
-        autoplay:1,
-      },
-    }
+    // const opts ={
+    //   height:"390",
+    //   width:"100%",
+    //   playerVars:{
+    //     autoplay:1,
+    //     controls:0,
+    //   },
+    // }
 
 
-    const videoOnReady =  (e)=>{
-      //  console.log(e.target.playVideoAt())
-      setTrailerUrl(e.target.playVideoAt())
-    }
+    // const videoOnReady =  (e)=>{
+    //    console.log(e.target.playVideoAt())
+    //   setTrailerUrl(e.target.playVideoAt())
+    //   setTrailerUrl(e.target.pauseVideo())
+    //   console.log(e.target)
+    // }
 
-    const videoOnPlayer= (e)=>{
-      const player =  e.target;
-      // console.log(player.getCurrentTime(e))
-      setTrailerUrl(player.getCurrentTime(e))
-    }
-    const videoStateChange = (event)=>{
-      // console.log(event.target.getCurrentTime(event))
-      setTrailerUrl(event.target.getCurrentTime(event))
-    }
+    // const videoOnPlayer= (e)=>{
+    //   const player =  e.target;
+    //   console.log(player.getCurrentTime(e))
+    //   setTrailerUrl(player.getCurrentTime(e))
+    // }
+    // const videoStateChange = (event)=>{
+    //   console.log(event.target.getCurrentTime(event))
+    //   setTrailerUrl(event.target.getCurrentTime(event))
+    // }
 
-    const handleClick = (movie)=>{
-      if(trailerUrl){
-        setTrailerUrl("")
-      }else{
-        movieTrailer(null,{tmdbId:movie.id})
-        .then(url =>{
-          // console.log("url is " + url)
-          const urlParams = new URLSearchParams(new URL(url).search)
-          // console.log("urlParamsn"+urlParams)
-          setTrailerUrl(urlParams.get("v"))
-        })
-        .catch(error =>{
-          console.log(error)
-        })
-      }
-    }
+    // const handleClick = (movie)=>{
+    //   if(trailerUrl){
+    //     setTrailerUrl("")
+    //   }else{
+    //     movieTrailer(null,{tmdbId:movie.id})
+    //     .then(url =>{
+    //       console.log("url is " + url)
+    //       const urlParams = new URLSearchParams(new URL(url).search)
+    //       console.log("urlParamsn"+urlParams)
+    //       setTrailerUrl(urlParams.get("v"))
+    //     })
+    //     .catch(error =>{
+    //       console.log(error)
+    //     })
+    //   }
+    // }
   return (
     <div className='row'>
          <h2>{title}</h2>
         <div className='row__posters'>
         {movies.map(movie => (
-            <img 
-            key={movie.id} 
+            <>
+            <img
+            key={movie.id}
             videoId={trailerUrl}
-         onClick={()=> handleClick(movie)}
-            src={`${base_url}${isLargeRow?movie.poster_path:movie.backdrop_path}`} 
-            alt={movie.name} 
+            // onClick={() => handleClick(movie)}
+            src={`${base_url}${isLargeRow ? movie.poster_path : movie.poster_path}`}
+            alt={movie.name}
             className={`row__poster ${isLargeRow && 'row__posterlarge'}
             ${isPaddingBottom && "row__poster--lastPaddingBottom"}`} />
+            {/* <h4 className='row__poster-title'>{movie.original_title || movie.title}</h4> */}
+            </>
             ))}
         </div>
-        { trailerUrl && 
+        {/* { trailerUrl && 
         <YouTube 
-        videoId={videoid}
+        videoId={trailerUrl}
         opts={opts} 
         onReady={(e)=> videoOnReady(e)}
         onPlay={(e)=> videoOnPlayer(e)}
         onStateChange={(event) => videoStateChange(event)}
-        />}
+          />} */}
     </div>
   )
 }

netflix/src/components/navbar.css

@@ -2,7 +2,7 @@
     display: flex;
     position: fixed;
     top: 0;
-    /* z-index: 1; */
+    z-index: 1;
     justify-content: space-between;
     align-items:center;
     width:100%;
@@ -27,4 +27,5 @@
 .navbar__black{
     background-color: #111;
     transition: all 2s ease;
+    /* position: relative; */
 }

netflix/src/components/row.css

@@ -1,8 +1,10 @@
 
 .row{
+    flex: flex;
     /* padding-left: 1rem; */
     background-color: #111;
     color: #f4f5f7;
+
 }
 
 .row > h2{
@@ -13,24 +15,27 @@
     padding: 0 2rem;
     display: flex;
     overflow-y: hidden;
+    position: relative;
     overflow-x: scroll;
     /* margin-left: 1rem; */
 }
 
 
-
 .row__posters::-webkit-scrollbar{
     display:none;
 }
 
 .row__poster{
     width:100%;
-    max-height: 100px;
+    max-height: 200px;
     object-fit: contain;
     margin-right:1rem;
+    /* z-index: 1; */
     transition: transform  450ms;
     cursor: pointer;
+    position: relative;
     /* margin-bottom: 2rem; */
+    box-shadow: inset 0,0,0,0.10 rgba(0, 0,0, 0.5);
 }
 
 .row__poster--lastPaddingBottom{
@@ -39,6 +44,9 @@
 
 .row__poster:hover{
     transform: scale(1.09);
+    background: linear-gradient(rgba(0.5,0.5,0.5,0.7),rgba(0.5,0.5,0.5,0.8));
+    position: relative;
+
 }
 
 .row__posterlarge{
@@ -48,4 +56,11 @@
 
 .row__posterlarge:hover{
     transform: scale(1.09);
-}
+
+}
+
+.row__posters .row__poster-title {
+        position: relative;
+        text-align: center;
+
+}

netflix/src/components/screen/Footer.css

@@ -0,0 +1,20 @@
+.footer{
+    background-color: #111;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 1rem;
+    color: grey;
+}
+
+.footer__lists{
+    /* text-decoration: none; */
+    list-style: none;
+    margin:1rem;
+}
+
+.footer__lists > li{
+    /* word-spacing: 1rem; */
+    line-height: 2rem;
+}
+

netflix/src/components/screen/Footer.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import '../screen/Footer.css';
+
+function Footer() {
+  return (
+    <div className='footer'>
+    <ul className='footer__lists'>
+        <li>FAQ</li>
+        <li>Investor Relations</li>
+        <li>Ways to watch</li>
+        <li>Corporate Information</li>
+        <li>Netflix Originals</li>
+    </ul>
+    <ul className='footer__lists'>
+        <li>Help Center</li>
+        <li>Jobs</li>
+        <li>Terms Of Use</li>
+        <li>Contact Us</li>
+    </ul>
+    <ul className='footer__lists'>
+        <li>Account</li>
+        <li>Redeem Gift Cards</li>
+        <li>Privacy</li>
+        <li>Speed Test</li>
+    </ul>
+    <ul className='footer__lists'>
+        <li>Media Center</li>
+        <li>Buy Gift Cards</li> Preferences
+        <li>Legal Preferences</li>
+        <li>Cookies Preferences</li>
+    </ul>
+    </div>
+  )
+}
+
+export default Footer