{"version":3,"sources":["axios.js","Row.js","requests.js","Banner.js","Nav.js","App.js","reportWebVitals.js","index.js"],"names":["instance","axios","create","baseURL","Row","title","fetchUrl","isLargeRow","useState","movies","setMovies","trailerUrl","setTrailerUrl","useEffect","a","get","request","data","results","fetchData","className","map","movie","onClick","movieTrailer","name","then","url","urlParams","URLSearchParams","URL","search","catch","error","console","log","handleClick","src","poster_path","backdrop_path","alt","id","videoId","opts","height","width","playerVars","autoplay","API_KEY","requests","fetchTrending","fetchNetflixOriginals","fetchComedyMovies","fetchHorrorMovies","fetchRomanceMovies","fetchDocumentaries","Banner","str","n","setMovie","Math","floor","random","length","style","backgroundSize","backgroundImage","backgroundPosition","original_name","overview","lenght","substr","Nav","show","handleShow","window","addEventListener","scrollY","removeEventListener","class","App","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"wTAQeA,E,OAJEC,EAAMC,OAAO,CAC1BC,QAAS,iC,wCCoEEC,MAlEf,YAA+C,IAAhCC,EAA+B,EAA/BA,MAAOC,EAAwB,EAAxBA,SAAUC,EAAc,EAAdA,WAG5B,EAA4BC,mBAAS,IAArC,mBAAOC,EAAP,KAAeC,EAAf,KACA,EAAoCF,mBAAS,IAA7C,mBAAOG,EAAP,KAAmBC,EAAnB,KAqCA,OAlCAC,qBAAW,WAAK,4CACb,4BAAAC,EAAA,sEACqBb,EAAMc,IAAIT,GAD/B,cACKU,EADL,OAIDN,EAAUM,EAAQC,KAAKC,SAJtB,kBAKMF,GALN,4CADa,uBAAC,WAAD,wBAQbG,KACA,CAACb,IA0BA,sBAAKc,UAAU,MAAf,UACG,6BAAKf,IAGL,qBAAKe,UAAS,sBAAiBb,GAAc,mBAA7C,SAEEE,EAAOY,KAAI,SAAAC,GAAK,OACb,qBAEMC,QAAS,kBAzBP,SAACD,GACdX,EACCC,EAAc,IAGdY,KAAkB,OAALF,QAAK,IAALA,OAAA,EAAAA,EAAOG,OAAQ,IAC3BC,MAAK,SAACC,GACN,IAAMC,EAAW,IAAIC,gBAAiB,IAAIC,IAAIH,GAAKI,QACnDnB,EAAcgB,EAAUb,IAAI,SAE5BiB,OAAM,SAACC,GAAD,OAAWC,QAAQC,IAAIF,MAeLG,CAAYd,IAC3BF,UAAU,aACViB,IAAG,UAtDR,wCAsDQ,OAAiB9B,EAAae,EAAMgB,YAAchB,EAAMiB,eAC1DC,IAAKlB,EAAMG,MAJPH,EAAMmB,SASvB9B,GAAgB,cAAC,IAAD,CAAS+B,QAAS/B,EAAYgC,KAzCvC,CACTC,OAAO,MACPC,MAAM,OACNC,WAAY,CACRC,SAAS,UC7BfC,EAAW,mCAWFC,EATE,CACbC,cAAc,8BAAD,OAAgCF,EAAhC,mBACbG,sBAAsB,wBAAD,OAA0BH,EAA1B,sBACrBI,kBAAkB,2BAAD,OAA6BJ,EAA7B,mBACjBK,kBAAkB,2BAAD,OAA6BL,EAA7B,mBACjBM,mBAAmB,2BAAD,OAA6BN,EAA7B,sBAClBO,mBAAmB,2BAAD,OAA6BP,EAA7B,oB,MCqDPQ,MAxDf,WAEI,IAgBkBC,EAAKC,EAhBvB,EAAyBlD,mBAAS,IAAlC,mBAAOc,EAAP,KAAaqC,EAAb,KAmBA,OAjBA9C,qBAAW,WAAK,4CAEZ,4BAAAC,EAAA,sEACyBb,EAAMc,IAAIkC,EAASE,uBAD5C,cACSnC,EADT,OAEG2C,EACI3C,EAAQC,KAAKC,QACb0C,KAAKC,MAAMD,KAAKE,SAAW9C,EAAQC,KAAKC,QAAQ6C,OAAS,KAJhE,kBAMU/C,GANV,4CAFY,uBAAC,WAAD,wBAUZG,KACF,IAEFe,QAAQC,IAAIb,GAKR,yBACAF,UAAU,SACV4C,MAAO,CACHC,eAAgB,QAChBC,gBAAgB,8DAAD,cAC4B5C,QAD5B,IAC4BA,OAD5B,EAC4BA,EAAOiB,cADnC,wBAGf4B,mBAAoB,iBAPxB,UAWI,sBAAK/C,UAAU,kBAAf,UACI,sBAAMA,UAAU,OAAhB,SACF,oBAAIA,UAAU,eAAd,UACU,OAALE,QAAK,IAALA,OAAA,EAAAA,EAAOjB,SAAP,OAAgBiB,QAAhB,IAAgBA,OAAhB,EAAgBA,EAAOG,QAAvB,OAA+BH,QAA/B,IAA+BA,OAA/B,EAA+BA,EAAO8C,mBAI3C,sBAAKhD,UAAU,iBAAf,UACE,wBAAQA,UAAU,gBAAlB,mBACA,wBAAQA,UAAU,gBAAlB,wBAGF,oBAAIA,UAAU,qBAAd,UA3BQqC,EA4BE,OAACnC,QAAD,IAACA,OAAD,EAACA,EAAO+C,SA5BLX,EA4Be,KA3BxB,OAAHD,QAAG,IAAHA,OAAA,EAAAA,EAAKa,QAASZ,EAAID,EAAIc,OAAO,EAAGb,EAAE,GAAK,OAAQD,QA+BlD,qBAAKrC,UAAU,0B,MCpBZoD,MAjCf,WACE,MAA2BhE,oBAAS,GAApC,mBAAOiE,EAAP,KAAaC,EAAb,KAYE,OAXA7D,qBAAW,WAOV,OANA8D,OAAOC,iBAAiB,UAAU,WAC3BD,OAAOE,QAAU,IACxBH,GAAW,GACAA,GAAW,MAGf,WACHC,OAAOG,oBAAoB,aAE9B,IAEE,sBAAKC,MAAK,cAASN,GAAQ,aAA3B,UACI,qBAEJpC,IAAI,kHACAjB,UAAU,WACVoB,IAAI,iBAGhB,qBAEQH,IAAI,wIAEAjB,UAAU,aACVoB,IAAI,qB,MCHDwC,MApBf,WACE,OACE,sBAAK5D,UAAU,MAAf,UACE,cAAC,EAAD,IACA,cAAC,EAAD,IACC,cAAC,EAAD,CAEAf,MAAM,mBACNC,SAAU2C,EAASE,sBACnB5C,YAAU,IAEV,cAAC,EAAD,CAAKF,MAAM,eAAeC,SAAU2C,EAASC,gBAC7C,cAAC,EAAD,CAAK7C,MAAM,gBAAgBC,SAAU2C,EAASG,oBAC9C,cAAC,EAAD,CAAK/C,MAAM,gBAAgBC,SAAU2C,EAASI,oBAC9C,cAAC,EAAD,CAAKhD,MAAM,UAAUC,SAAU2C,EAASK,qBACxC,cAAC,EAAD,CAAKjD,MAAM,gBAAgBC,SAAU2C,EAASM,yBCTtC0B,EAZS,SAAAC,GAClBA,GAAeA,aAAuBC,UACxC,6BAAqBzD,MAAK,YAAkD,IAA/C0D,EAA8C,EAA9CA,OAAQC,EAAsC,EAAtCA,OAAQC,EAA8B,EAA9BA,OAAQC,EAAsB,EAAtBA,OAAQC,EAAc,EAAdA,QAC3DJ,EAAOF,GACPG,EAAOH,GACPI,EAAOJ,GACPK,EAAOL,GACPM,EAAQN,OCDdO,IAASC,OACP,cAAC,IAAMC,WAAP,UACE,cAAC,EAAD,MAEFC,SAASC,eAAe,SAM1BZ,M","file":"static/js/main.4bfb7231.chunk.js","sourcesContent":["import axios from \"axios\";\n\n\n/** */\nconst instance = axios.create({\n    baseURL: \"https://api.themoviedb.org/3\",\n});\n\nexport default instance;","import React, {useState, useEffect} from 'react';\nimport axios from './axios';\nimport \"./Row.css\";\nimport YouTube from \"react-youtube\";\nimport movieTrailer from \"movie-trailer\";\n\nconst base_url = \"https://image.tmdb.org/t/p/original/\";\nfunction Row({ title, fetchUrl, isLargeRow }) {\n\n\n    const [movies, setMovies] = useState([]);\n    const [trailerUrl, setTrailerUrl] = useState(\"\");\n\n    // SNipet code \n    useEffect( () =>{\n       async function fetchData(){\n      const request = await axios.get(fetchUrl);\n\n\n      setMovies(request.data.results);\n      return request;\n       }\n       fetchData();\n    }, [fetchUrl]);\n\n    const opts = {\n        height:\"390\",\n        width:\"100%\",\n        playerVars: {\n            autoplay:1,\n        },\n    };\n\n    const handleClick = (movie) => {\n        if(trailerUrl){\n            setTrailerUrl('');\n\n        }else{\n            movieTrailer(movie?.name || \"\")\n            .then((url) =>{\n             const urlParams =new URLSearchParams( new URL(url).search);\n             setTrailerUrl(urlParams.get('v'));\n            })\n            .catch((error) => console.log(error));\n        }\n    };\n\n     \n    return (\n        <div className=\"row\">\n           <h2>{title}</h2>\n\n\n           <div className={`row_posters ${isLargeRow && \"row_posterLarge\"}`}>\n            {/* row_posters*/}\n            {movies.map(movie => (\n                <img \n                      key={movie.id}\n                      onClick={() => handleClick(movie)}\n                      className=\"row_poster\"\n                      src={`${base_url}${ isLargeRow ? movie.poster_path : movie.backdrop_path}`}\n                       alt={movie.name} /> \n            ))}\n           </div>\n\n\n         {trailerUrl &&   <YouTube videoId={trailerUrl} opts={opts} /> }\n\n          \n        </div>\n    )\n}\n\nexport default Row\n","const API_KEY =  \"2e281a3b6b9746108e500cf87e033890\";\n\nconst requests = {\n    fetchTrending: `/trending/all/week?api_key=${API_KEY}&language=en-US`,\n    fetchNetflixOriginals: `/discover/tv?api_key=${API_KEY}&with_networks=213`,\n    fetchComedyMovies: `/discover/movie?api_key=${API_KEY}&with_genres=35`,\n    fetchHorrorMovies: `/discover/movie?api_key=${API_KEY}&with_genres=27`,\n    fetchRomanceMovies: `/discover/movie?api_key=${API_KEY}&with_genres=10749`,\n    fetchDocumentaries: `/discover/movie?api_key=${API_KEY}&with_genres=99`,\n};\n\nexport default requests;","import React, {useState, useEffect} from 'react'\nimport axios from './axios';\nimport requests from './requests';\nimport \"./banner.css\";\n\nfunction Banner() {\n\n    const [movie,setMovie] = useState([]);\n\n    useEffect( () =>{\n\n        async function fetchData(){\n           const request = await axios.get(requests.fetchNetflixOriginals);\n           setMovie(\n               request.data.results[\n               Math.floor(Math.random() * request.data.results.length - 1) ]\n           );\n           return request;\n        }\n        fetchData();\n    },[] );\n\n    console.log(movie);\n    function truncate(str, n) {\n        return str?.lenght > n ? str.substr(0, n-1) + \"....\": str;\n    }\n    return (\n        <header \n        className=\"banner\"\n        style={{\n            backgroundSize: \"cover\",\n            backgroundImage: `url(\n                \"https://image.tmdb.org/t/p/original/${movie?.backdrop_path}\"\n                )`,\n            backgroundPosition: \"center center\",\n\n        }}\n        >\n            <div className=\"banner_contents\">\n                <span className=\"back\">\n              <h1 className=\"banner_title\">\n                  {movie?.title || movie?.name || movie?.original_name}\n              </h1>\n              </span>\n\n              <div className=\"banner_buttons\">\n                <button className=\"banner_button\">Play </button>\n                <button className=\"banner_button\">My List</button>\n              </div>\n\n              <h1 className=\"banner_description\">\n               {truncate(movie?.overview, 150)}\n              </h1>\n            </div>\n\n            <div className=\"banner-fadeBottom\" />\n\n        </header>\n    )\n}\n\nexport default Banner\n","import React , {useState , useEffect} from 'react'\nimport './Nav.css';\nfunction Nav() {\n  const [show, handleShow] = useState(false);\n    useEffect( () =>{\n     window.addEventListener(\"scroll\", () =>{\n         if(window.scrollY > 100) {\n     handleShow(true);\n         } else handleShow(false);\n     });\n\n     return () =>{\n         window.removeEventListener(\"scroll\");\n     }; \n    },[]);\n    return (\n        <div class={`nav ${show && \"nav_black\"}`}>\n            <img \n             \n        src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/799px-Netflix_2015_logo.svg.png\"\n            className=\"nav_logo\"\n            alt=\"Netflix Logo\"\n            />\n\n<img \n             \n        src=\"\n        https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMti6Y58F9U28BKZAOQMWDh9auJ5gfJahe5uKYMjr0kSNaXP4MZYkvDomyRUVKOfiPT5g&usqp=CAU\"\n            className=\"nav_avatar\"\n            alt=\"Netflix Logo\"\n            />\n        </div>\n    )\n}\n\nexport default Nav\n\n","import React from 'react';\nimport Row from './Row';\nimport requests from './requests';\nimport Banner from './Banner';\nimport Nav from './Nav';\nimport './App.css';\nfunction App() {\n  return (\n    <div className=\"app\">\n      <Nav />\n      <Banner />\n       <Row \n       \n       title=\"NetFlix Orginals\" \n       fetchUrl={requests.fetchNetflixOriginals}\n       isLargeRow\n        />\n       <Row title=\"Trending Now\" fetchUrl={requests.fetchTrending} />\n       <Row title=\"Comedy Movies\" fetchUrl={requests.fetchComedyMovies} />\n       <Row title=\"Horror Movies\" fetchUrl={requests.fetchHorrorMovies} />\n       <Row title=\"Romance\" fetchUrl={requests.fetchRomanceMovies} />\n       <Row title=\"Documentaries\" fetchUrl={requests.fetchDocumentaries} />\n    </div>\n  );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}