{"version":3,"sources":["axios.js","Row.js","requests.js","Banner.js","Nav.js","App.js","index.js"],"names":["instance","axios","create","baseUrl","Row","title","fetchUrl","isLargeRow","useState","movies","setMovies","trailerUrl","setTrailerUrl","useEffect","a","get","request","console","log","data","results","fetchData","className","map","movie","onClick","movieTrailer","then","url","urlParams","URLSearchParams","URL","search","catch","error","handleClick","src","poster_path","backdrop_path","alt","name","id","videoId","opts","height","width","playerVars","autoplay","API_KEY","requests","fetchTrending","fetchNetflixOriginals","fetchTopRated","fetchActionMovies","fetchComedyMovies","fetchHorrorMovies","fetchRomanceMovies","fetchDocumentaries","Banner","str","n","setMovie","Math","floor","random","length","style","backgroundSize","backgroundImage","backgroundPosition","original_name","backgroundColor","color","overview","substr","Nav","show","handleshow","window","addEventListener","scrollY","removeEventListener","App","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.9f4f3ffd.chunk.js","sourcesContent":["import axios from \"axios\";\n\nconst instance = axios.create({\n  baseUrl: \"https://api.themoviedb.org/3\",\n});\n\nexport default instance;\n","import React, { useState, useEffect } from \"react\";\nimport YouTube from \"react-youtube\";\nimport axios from \"./axios\";\nimport \"./Row.css\";\nimport movieTrailer from \"movie-trailer\";\n\nconst base_url = \"https://image.tmdb.org/t/p/original\";\n\nconst Row = ({ title, fetchUrl, isLargeRow }) => {\n  const [movies, setMovies] = useState([]);\n  const [trailerUrl, setTrailerUrl] = useState(\"\");\n\n  useEffect(() => {\n    async function fetchData() {\n      const request = await axios.get(fetchUrl);\n      console.log(request.data.results);\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    // console.table(movie?.title)\n    if (trailerUrl) {\n      setTrailerUrl(\"\");\n    } else {\n      movieTrailer(movie?.title || \"\")\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  return (\n    <div className=\"row\">\n      <h1>{title} </h1>\n      <div className=\"row__posters\">\n        {movies.map((movie) => (\n          <img\n            key={movie.id}\n            onClick={() => handleClick(movie)}\n            className={`row__poster ${isLargeRow && \"row__posterLarge\"}`}\n            src={`${base_url}${\n              isLargeRow ? movie.poster_path : movie.backdrop_path\n            }`}\n            alt={movie.name}\n          />\n        ))}\n      </div>\n      {trailerUrl && <YouTube videoId={trailerUrl} opts={opts} />}\n    </div>\n  );\n};\n\nexport default Row;\n","const baseUrl = \"https://api.themoviedb.org/3\";\nconst API_KEY = \"7d2c5c3fee7e99fc710f7e993820eccc\";\n\nconst requests = {\n  fetchTrending: `${baseUrl}/trending/all/week?api_key=${API_KEY}&language=en-US`,\n  fetchNetflixOriginals: `${baseUrl}/discover/tv?api_key=${API_KEY}&with_network=123`,\n  fetchTopRated: `${baseUrl}/movie/top_rated?api_key=${API_KEY}&language=en-US`,\n  fetchActionMovies: `${baseUrl}/discover/movie?api_key=${API_KEY}&with_genres=28`,\n  fetchComedyMovies: `${baseUrl}/discover/movie?api_key=${API_KEY}&with_genres=35`,\n  fetchHorrorMovies: `${baseUrl}/discover/movie?api_key=${API_KEY}&with_genres=27`,\n  fetchRomanceMovies: `${baseUrl}/discover/movie?api_key=${API_KEY}&with_genres=10749`,\n  fetchDocumentaries: `${baseUrl}/discover/movie?api_key=${API_KEY}&with_genres=99`,\n};\n\nexport default requests;\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"./axios\";\nimport requests from \"./requests\";\nimport \"./Banner.css\";\n\nconst Banner = () => {\n  const [movie, setMovie] = useState([]);\n\n  useEffect(() => {\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      );\n    }\n    fetchData();\n  }, []);\n\n  function truncate(str, n) {\n    return str?.length > n ? str.substr(0, n - 1) + \"...\" : str;\n  }\n\n  console.log(movie);\n  return (\n    <header\n      className=\"banner\"\n      style={{\n        backgroundSize: \"cover\",\n        backgroundImage: `url('https://image.tmdb.org/t/p/original/${movie?.poster_path}')`,\n        backgroundPosition: \"center center\",\n      }}\n    >\n      <div className=\"banner__contents\">\n        <h1 className=\"banner__title\">\n          {movie?.title || movie?.name || movie?.original_name}\n        </h1>\n        <div className=\"banner__buttons\">\n          <button\n            className=\"banner__button\"\n            style={{ backgroundColor: \"white\", color: \"#111\" }}\n          >\n            Play\n          </button>\n          <button className=\"banner__button\">My List</button>\n        </div>\n        <h1 className=\"banner__discription\">\n          {truncate(movie?.overview, 150)}\n        </h1>\n      </div>\n      <div className=\"banner__fadeButton\"></div>\n    </header>\n  );\n};\n\nexport default Banner;\n","import React, { useEffect, useState } from \"react\";\nimport \"./Nav.css\";\n\nconst Nav = () => {\n  const [show, handleshow] = useState(false);\n\n  useEffect(() => {\n    window.addEventListener(\"scroll\", () => {\n      if (window.scrollY > 100) {\n        handleshow(true);\n      } else handleshow(false);\n    });\n    return () => {\n      window.removeEventListener(\"scroll\");\n    };\n  }, []);\n\n  return (\n    <div className={`nav ${show && \"nav__black\"}`}>\n      <img\n        className=\"nav__logo\"\n        src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/250px-Netflix_2015_logo.svg.png\"\n        alt=\"Netflix Logo\"\n      />\n      <img\n        className=\"nav__avatar\"\n        src=\"https://mir-s3-cdn-cf.behance.net/project_modules/disp/366be133850498.56ba69ac36858.png\"\n        alt=\"Netflix Logo\"\n      />\n    </div>\n  );\n};\n\nexport default Nav;\n","import React from \"react\";\nimport \"./App.css\";\nimport Row from \"./Row\";\nimport requests from \"./requests\";\nimport Banner from \"./Banner\";\nimport Nav from \"./Nav\";\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <Nav />\n      <Banner />\n      <Row\n        title=\"NETFLIX ORIGINALS\"\n        fetchUrl={requests.fetchNetflixOriginals}\n        isLargeRow\n      />\n      <Row title=\"Trending\" fetchUrl={requests.fetchTrending} />\n      <Row title=\"Top Rated\" fetchUrl={requests.fetchTopRated} />\n      <Row title=\"Action Movies\" fetchUrl={requests.fetchActionMovies} />\n      <Row title=\"Comedy Movies\" fetchUrl={requests.fetchComedyMovies} />\n      <Row title=\"Horror Movies\" fetchUrl={requests.fetchHorrorMovies} />\n      <Row title=\"Romance Movies\" fetchUrl={requests.fetchRomanceMovies} />\n      <Row title=\"Documentaries\" fetchUrl={requests.fetchDocumentaries} />\n    </div>\n  );\n}\n\nexport default App;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n);\n"],"sourceRoot":""}