diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index f4d2eb4..cebb0f1 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -1,10 +1,8 @@ import React from 'react'; -import NavigationItem from '../NavigationItems/NavigationItem/NavigationItem'; const footer = () => ( diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 56362fe..e52c360 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -8,14 +8,9 @@ class Header extends Component { render() { const backgroundStyle = { - - // backgroundPosition: "center fixed", - // backgroundPosition: "center", - // backgroundAttachment: "fixed", - backgroundSize: "cover", backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`, - backgroundPosition: "center", + backgroundPosition: "center", } return ( @@ -40,6 +35,4 @@ class Header extends Component { } } - - export default Header; \ No newline at end of file diff --git a/src/components/MovieRow/MovieRow.js b/src/components/Movie/Movie.js similarity index 86% rename from src/components/MovieRow/MovieRow.js rename to src/components/Movie/Movie.js index 0f8968e..65908ba 100644 --- a/src/components/MovieRow/MovieRow.js +++ b/src/components/Movie/Movie.js @@ -1,6 +1,5 @@ -import React, {Component} from 'react'; +import React from 'react'; - const movieRow = (props) => (
diff --git a/src/components/MovieRow/MovieSummary/MovieSummary.js b/src/components/Movie/MovieDetails/MovieDetails.js similarity index 87% rename from src/components/MovieRow/MovieSummary/MovieSummary.js rename to src/components/Movie/MovieDetails/MovieDetails.js index 847aa34..2b89cf8 100644 --- a/src/components/MovieRow/MovieSummary/MovieSummary.js +++ b/src/components/Movie/MovieDetails/MovieDetails.js @@ -4,7 +4,7 @@ import AddIcon from '../../../static/images/add.svg'; import PlayIcon from '../../../static/images/play-button.svg'; -class MovieSummary extends Component { +class MovieDetails extends Component { render() { @@ -18,8 +18,7 @@ class MovieSummary extends Component { Rating: {this.props.movie.vote_average * 10}%{" "} - Release date: {this.props.movie.release_date || this.props.movie.first_air_date} Runtime: - {this.props.movie.runtime || this.props.movie.episode_run_time} m + Release date: {this.props.movie.release_date || this.props.movie.first_air_date } Runtime: { this.props.movie.runtime || this.props.movie.episode_run_time}m

{this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""} @@ -39,8 +38,4 @@ class MovieSummary extends Component { } } - - - - -export default MovieSummary; \ No newline at end of file +export default MovieDetails; \ No newline at end of file diff --git a/src/components/NavigationItems/NavigationItem/NavigationItem.js b/src/components/NavigationItem/NavigationItem.js similarity index 100% rename from src/components/NavigationItems/NavigationItem/NavigationItem.js rename to src/components/NavigationItem/NavigationItem.js diff --git a/src/components/NavigationItems/NavigationItems.js b/src/components/NavigationItems/NavigationItems.js deleted file mode 100644 index 0aeca69..0000000 --- a/src/components/NavigationItems/NavigationItems.js +++ /dev/null @@ -1,52 +0,0 @@ -import React, { Component } from 'react'; - -import NavigationItem from './NavigationItem/NavigationItem'; -import SearchLogo from '../../static/images/search-icon.svg'; -import SearchMovie from '../../containers/SearchMovie/SearchMovie'; - - -// const navigationItems = (props) => ( -//

-// ); - -// export default navigationItems; - -class NavigationItems extends Component { - - - render() { - return ( - - ); - } -} - -export default NavigationItems; diff --git a/src/components/Search/Search.js b/src/components/Search/Search.js deleted file mode 100644 index e095ef5..0000000 --- a/src/components/Search/Search.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -const search = (props) => ( - - -) - -export default search; \ No newline at end of file diff --git a/src/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js index c640f10..cecb740 100644 --- a/src/components/UI/Modal/Modal.js +++ b/src/components/UI/Modal/Modal.js @@ -18,7 +18,7 @@ class Modal extends Component {
+ className={(this.props.show ? "modal show" : "modal hide")}> {this.props.children}
diff --git a/src/containers/App.js b/src/containers/App.js index d616991..f406d09 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -1,116 +1,16 @@ import React, { Component } from 'react'; -import Navigation from "./Navigation/Navigation" -import Layout from './Layout/Layout'; -import axios from 'axios'; -import MovieRow from '../components/MovieRow/MovieRow' -import Modal from '../components/UI/Modal/Modal'; -import MovieSummary from '../components/MovieRow/MovieSummary/MovieSummary'; -import CancelIcon from '../static/images/cancel-music.svg' +import Layout from './Layout/Layout'; class App extends Component { - state = { - toggleMovieList: true, - //an array that will hold all of our movies component - rows: [], - toggleModal: false, - movieDetails: {}, + render() { + return ( + + ) } -makeAipCall = (searchItem) => { - const url = `https://api.themoviedb.org/3/search/multi?api_key=9ea839ec7891591994ec0f540b4b199f&language=en-US&include_adult=false&query=${searchItem}`; - axios.get(url) - .then(res => { - // console.log(res.data.results); - // extract the data from json object - const results = res.data.results; - let movieImageUrl; - let movieRows = []; - results.forEach((movie) => { - // manually build our image url and set it on the movie object - if (movie.poster_path !== null && movie.media_type !== "person") { - movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path; - // pass in the movie object to our MovieRow component and keep it in a variable called - // movieComponent - const movieComponent = this.selectMovieHandler(movie)} - key={movie.id} - movieImage={movieImageUrl} - movie={movie} /> - // push our movieComponent to our movieRows array; - movieRows.push(movieComponent); - } - - }) - // update state - this.setState({ rows: movieRows }); - }).catch(error => { - console.log(error); - }); - } - - onSearchHandler = (event) => { - this.setState({ - toggleMovieList: false - }); - const userInput = event.target.value; - this.makeAipCall(userInput); - - - if (userInput === "") { - this.setState({ - toggleMovieList: true - }); - } - } - - /* Get the appropriate details for a specific movie that was clicked */ - selectMovieHandler = (movie) => { - this.setState({toggleModal: true}); - - let url; - if (movie.media_type === "movie") { - const movieId = movie.id; - console.log(movie.id); - url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; - } else if (movie.media_type === "tv") { - const tvId = movie.id - url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; - } - - axios.get(url) - .then(res => { - console.log(res); - const movieData = res.data; - // console.log(movieData); - this.setState({movieDetails: movieData}); - }).catch(error => { - - console.log(error); - }); - - } - - closeModal = () => { - this.setState({ toggleModal: false }); - } - - render() { - - return ( -
- - {this.state.toggleMovieList ? :
{this.state.rows}
} - - - -
- - ); - } } export default App; diff --git a/src/containers/Layout/Layout.js b/src/containers/Layout/Layout.js index 9dca1da..8195f59 100644 --- a/src/containers/Layout/Layout.js +++ b/src/containers/Layout/Layout.js @@ -1,50 +1,115 @@ -import React, { Component } from 'react'; -import axios from 'axios'; -import Header from '../../components/Header/Header'; -import MovieShowcase from '../MovieShowcase/MovieShowcase'; -import Footer from '../../components/Footer/Footer'; -import { BrowserRouter } from "react-router-dom"; +import React, { Component } from 'react'; +import axios from "axios"; +import Navbar from '../Navbar/Navbar'; +import MainContent from './MainContent/MainContent'; +import Movie from '../../components/Movie/Movie'; +import Modal from '../../components/UI/Modal/Modal'; +import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails'; class Layout extends Component { + state = { - selectedMovie: {} - }; + toggleMovieList: true, + //an array that will hold all of our movies component + rows: [], + toggleModal: false, + movieDetails: {}, + } - componentDidMount = () => { - this.getMovie(); - }; - - - getMovie = () => { - /** - * @param movieId narcos netflix series id - */ - const movieId = 63351; - - const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; - axios - .get(url) + makeAipCall = (searchItem) => { + const url = `https://api.themoviedb.org/3/search/multi?api_key=9ea839ec7891591994ec0f540b4b199f&language=en-US&include_adult=false&query=${searchItem}`; + axios.get(url) .then(res => { - const movieData = res.data; - this.setState({ selectedMovie: movieData }); - }) - .catch(error => { + // console.log(res.data.results); + // extract the data from json object + const results = res.data.results; + let movieImageUrl; + let movieRows = []; + results.forEach((movie) => { + // manually build our image url and set it on the movie object + if (movie.poster_path !== null && movie.media_type !== "person") { + movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path; + // pass in the movie object to our MovieRow component and keep it in a variable called + // movieComponent + const movieComponent = this.selectMovieHandler(movie)} + key={movie.id} + movieImage={movieImageUrl} + movie={movie} /> + // push our movieComponent to our movieRows array; + movieRows.push(movieComponent); + } + + }) + // update state + this.setState({ rows: movieRows }); + }).catch(error => { console.log(error); }); - }; + } + + onSearchHandler = (event) => { + this.setState({ + toggleMovieList: false + }); + const userInput = event.target.value; + this.makeAipCall(userInput); + + + if (userInput === "") { + this.setState({ + toggleMovieList: true + }); + } + } + + /* Get the appropriate details for a specific movie that was clicked */ + selectMovieHandler = (movie) => { + this.setState({ toggleModal: true }); + + let url; + if (movie.media_type === "movie") { + const movieId = movie.id; + console.log(movie.id); + url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; + } else if (movie.media_type === "tv") { + const tvId = movie.id + url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; + } + + axios.get(url) + .then(res => { + console.log(res); + const movieData = res.data; + // console.log(movieData); + this.setState({ movieDetails: movieData }); + }).catch(error => { + + console.log(error); + }); + + } + + closeModal = () => { + this.setState({ toggleModal: false }); + } render() { + return ( - -
-
- -
-
- +
+ + {this.state.toggleMovieList ? :
{this.state.rows}
} + + + +
+ ); } + } export default Layout; \ No newline at end of file diff --git a/src/containers/Layout/MainContent/MainContent.js b/src/containers/Layout/MainContent/MainContent.js new file mode 100644 index 0000000..15650fb --- /dev/null +++ b/src/containers/Layout/MainContent/MainContent.js @@ -0,0 +1,50 @@ +import React, { Component } from 'react'; +import axios from 'axios'; +import Header from '../../../components/Header/Header'; +import MovieShowcase from '../MovieShowcase/MovieShowcase'; +import Footer from '../../../components/Footer/Footer'; +import { BrowserRouter } from "react-router-dom"; + + +class MainContent extends Component { + state = { + selectedMovie: {} + }; + + componentDidMount = () => { + this.getMovie(); + }; + + + getMovie = () => { + /** + * @param movieId narcos netflix series id + */ + const movieId = 63351; + + const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; + axios + .get(url) + .then(res => { + const movieData = res.data; + this.setState({ selectedMovie: movieData }); + }) + .catch(error => { + console.log(error); + }); + }; + + render() { + return ( + +
+
+ +
+
+ + ); + } +} + +export default MainContent; \ No newline at end of file diff --git a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js b/src/containers/MovieGenreRow/MovieGenre.js similarity index 88% rename from src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js rename to src/containers/MovieGenreRow/MovieGenre.js index 34e4d01..5a34609 100644 --- a/src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js +++ b/src/containers/MovieGenreRow/MovieGenre.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; -class movieShowcaseRow extends Component { +class movieGenre extends Component { render() { @@ -22,4 +22,4 @@ class movieShowcaseRow extends Component { } } -export default movieShowcaseRow; \ No newline at end of file +export default movieGenre; \ No newline at end of file diff --git a/src/containers/MovieShowcase/MovieShowcase.js b/src/containers/MovieGenreRow/MovieGenreRow.js similarity index 95% rename from src/containers/MovieShowcase/MovieShowcase.js rename to src/containers/MovieGenreRow/MovieGenreRow.js index d49eb61..bb721a1 100644 --- a/src/containers/MovieShowcase/MovieShowcase.js +++ b/src/containers/MovieGenreRow/MovieGenreRow.js @@ -1,10 +1,10 @@ import React, { Component } from "react"; import axios from 'axios'; -import MovieShowCaseRow from '../MovieShowcase/MovieShowcaseRow/MovieShowcaseRow'; +import MovieGenre from './MovieGenre'; import Modal from "../../components/UI/Modal/Modal"; import MovieSummary from '../../components/MovieRow/MovieSummary/MovieSummary'; -class MovieShowcase extends Component { +class MovieGenreRow extends Component { state = { trendingMovieRow: [], @@ -59,7 +59,7 @@ class MovieShowcase extends Component { if (movie.poster_path && movie.backdrop_path !== null) { - const movieComponent = this.getMovieDetails(movie)} key={movie.id} url={url} @@ -82,7 +82,6 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - console.log(res); const movieRows = this.getMovieRows(res, url); this.setState({ trendingMovieRow: movieRows }); @@ -101,6 +100,7 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { const movieRows = this.getMovieRows(res, url); + this.setState({ topRatedRow: movieRows }); }).catch(error => { console.log(error); @@ -115,8 +115,8 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - console.log(res); const movieRows = this.getMovieRows(res, url); + this.setState({ netflixOriginalsRow: movieRows }); }) .catch(error => { @@ -129,8 +129,8 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - console.log(res); const movieRows = this.getMovieRows(res, url); + this.setState({ actionMovieRow: movieRows }); }) .catch(error => { @@ -143,8 +143,8 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - const movieRows = this.getMovieRows(res, url); + this.setState({ comedyMovieRow: movieRows }); }) .catch(error => { @@ -157,8 +157,8 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - const movieRows = this.getMovieRows(res, url); + this.setState({ horrorMovieRow: movieRows }); }) .catch(error => { @@ -171,8 +171,8 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - const movieRows = this.getMovieRows(res, url); + this.setState({ romanceMovieRow: movieRows }); }) .catch(error => { @@ -185,8 +185,8 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - const movieRows = this.getMovieRows(res, url); + this.setState({ animatedMovieRow: movieRows }); }) .catch(error => { @@ -199,8 +199,8 @@ class MovieShowcase extends Component { axios.get(url) .then(res => { - const movieRows = this.getMovieRows(res, url); + this.setState({ documentaryRow: movieRows }); }) .catch(error => { @@ -210,7 +210,6 @@ class MovieShowcase extends Component { render() { - return (

Netflix Originals

@@ -266,4 +265,4 @@ class MovieShowcase extends Component { } } -export default MovieShowcase; +export default MovieGenreRow; diff --git a/src/containers/Navbar/DropdownContent.js b/src/containers/Navbar/DropdownContent.js new file mode 100644 index 0000000..e032388 --- /dev/null +++ b/src/containers/Navbar/DropdownContent.js @@ -0,0 +1,36 @@ +import React from 'react'; + + +const dropdownContent = () => ( + +
+
+
+
+
+

Andres

+
+
+
+

Tony

+
+
+
+

Luis

+
+

Manage Profiles

+ +
+
+

Account

+

Help Center

+

Sign out of Netflix

+
+
+
+ + +); + +export default dropdownContent; + diff --git a/src/containers/Navigation/Navigation.js b/src/containers/Navbar/Navbar.js similarity index 60% rename from src/containers/Navigation/Navigation.js rename to src/containers/Navbar/Navbar.js index 96cebad..10f3879 100644 --- a/src/containers/Navigation/Navigation.js +++ b/src/containers/Navbar/Navbar.js @@ -1,9 +1,11 @@ import React, { Component } from 'react'; -import NavigationItem from '../../components/NavigationItems/NavigationItem/NavigationItem' +import NavigationItem from '../../components/NavigationItem/NavigationItem' import SearchLogo from '../../static/images/search-icon.svg'; import NetflixLogo from '../../static/images/Netflix_Logo_RGB.png'; import BellLogo from '../../static/images/bell-logo.svg'; import DropdownArrow from '../../static/images/drop-down-arrow.svg'; +import DropdownContent from "./DropdownContent"; + class navigation extends Component { state = { @@ -29,12 +31,10 @@ class navigation extends Component { - render () { return ( ) } diff --git a/src/static/sass/components/_backdrop.scss b/src/static/sass/components/_backdrop.scss index ad0c0f3..b090245 100644 --- a/src/static/sass/components/_backdrop.scss +++ b/src/static/sass/components/_backdrop.scss @@ -6,5 +6,5 @@ left: 0; top: 0; background-color: rgba($color-background, .7); - + transition: all .5s; } \ No newline at end of file diff --git a/src/static/sass/components/_modal.scss b/src/static/sass/components/_modal.scss index d6f2d3c..ad997ad 100644 --- a/src/static/sass/components/_modal.scss +++ b/src/static/sass/components/_modal.scss @@ -2,12 +2,15 @@ position: fixed; z-index: 500; width: 100%; - top: 25%; + top: 0; left: 0; color: #fff; height: 52rem; + opacity: 0; + // transform: scale(0); box-shadow: 0 1.5rem 4rem rgba($color-dark, .15); - + // transition: all 2s 1s; + &__container { background: linear-gradient(90deg, #000 50%, transparent); width: 70%; @@ -35,15 +38,6 @@ font-size: 2rem; } - &__cancel { - cursor: pointer; - width: 1.8rem; - fill: #fff; - float: right; - padding-right: 2rem; - padding-top: 2rem; - } - &__overview { color: $color-modal-grey-2; padding-top: 2rem; @@ -86,11 +80,15 @@ } .show { + transition: .5s .3s ease-out; + top: 25%; + left: 0; + visibility: visible; opacity: 1; + } .hide { - transition: all 1s; - display: none; + visibility: hidden; } diff --git a/src/static/sass/components/_movie.scss b/src/static/sass/components/_movie.scss index a14f28f..7d03448 100644 --- a/src/static/sass/components/_movie.scss +++ b/src/static/sass/components/_movie.scss @@ -8,12 +8,11 @@ width: 17.5rem; cursor: pointer; transition: transform .3s; - - &:hover { - z-index: -1; - transform: scale(1.25); - - } + -webkit-transition: transform .3s; + + &:hover { + transform: scale(1.25); + } } diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index a788502..3582e99 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/src/static/sass/components/_movieShowcase.scss @@ -11,9 +11,10 @@ overflow-y: hidden; transition: transform 450ms; overflow-x: scroll; - - flex: 1 1 auto; - display: grid; + display: flex; + width: 95vw; + overflow: -moz-scrollbars-horizontal; + grid-template-columns: repeat(20, 1fr); column-gap: 0; @@ -60,6 +61,7 @@ padding-top: 3.5rem; padding-bottom: 4rem; height: 21.5rem; + min-height: 0; &:not(:last-child) { padding-right: .5rem; @@ -71,6 +73,7 @@ } &__netflix { + min-height: 0; padding-top: 3rem; padding-bottom: 4rem; padding-right: 1rem; diff --git a/src/static/sass/layout/_header.scss b/src/static/sass/layout/_header.scss index 243690c..fd4ab58 100644 --- a/src/static/sass/layout/_header.scss +++ b/src/static/sass/layout/_header.scss @@ -66,17 +66,8 @@ } &--fadeBottom { - - // height: 65vw; - // height: 34rem; - // padding-top: 45rem; - // width: 100%; - // height: 20vh; height: 27.4rem; - // padding-bottom: 100rem; - // transform: translateY(-1rem); - - background-image: linear-gradient(180deg, transparent,rgba(37, 37, 37, 0.61), rgb(17, 17, 17)); + background-image: linear-gradient(180deg, transparent,rgba(37, 37, 37, 0.61), rgb(17, 17, 17)); } }