psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor details

Browse Source
This commit is contained in:
andres alcocer
2018-11-19 02:32:28 -05:00
parent 3192982638
commit f4f5219133
12 changed files with 134 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Header/Header.js
View File

@@ -8,17 +8,22 @@ class Header extends Component {
render() { render() {
const backgroundStyle = { const backgroundStyle = {
transform: "scaleY(-45rem)",
backgroundPosition: "center", // backgroundPosition: "center fixed",
// backgroundPosition: "center",
// backgroundAttachment: "fixed",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})` backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`,
backgroundPosition: "center",
} }
return ( return (
<header style={backgroundStyle} className="header"> <header style={backgroundStyle} className="header">
<div className="header__container"> <div className="header__container">
<h1 className="header__container-heading">{this.props.movie.name}</h1> <h1 className="header__container-heading">{this.props.movie.name}</h1>
<button onClick={() => alert("not a moive!")} className="header__container-btnPlay"> <button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
<PlayLogo className="header__container-btnMyList-play" /> <PlayLogo className="header__container-btnMyList-play" />
Play Play
</button> </button>
@@ -28,8 +33,8 @@ class Header extends Component {
</button> </button>
<p className="header__container-overview">{this.props.movie.overview}</p> <p className="header__container-overview">{this.props.movie.overview}</p>
</div> </div>
<div className="header--fadeBottom"></div>
</header> </header>
) )
} }

36
src/components/MovieRow/MovieSummary/MovieSummary.js
View File

@@ -1,5 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Aux from '../../../hoc/Aux/Aux'; import Aux from '../../../hoc/Aux/Aux';
import AddIcon from '../../../static/images/add.svg';
import PlayIcon from '../../../static/images/play-button.svg';
class MovieSummary extends Component { class MovieSummary extends Component {
@@ -16,17 +18,22 @@ class MovieSummary extends Component {
<span className="modal__rating"> <span className="modal__rating">
Rating: {this.props.movie.vote_average * 10}%{" "} Rating: {this.props.movie.vote_average * 10}%{" "}
</span> </span>
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
</p> </p>
<p className="modal__episode"> <p className="modal__episode">
{this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""} {this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""}
{this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""} {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""}
</p> </p>
<p className="modal__overview">{this.props.movie.overview}</p> <p className="modal__overview">{this.props.movie.overview}</p>
<button>Play</button> <button className="modal__btn modal__btn--red">
<button>My list</button> <PlayIcon className="modal__btn--icon" />
<p>staring: mdf gglo bool emmy djf </p> Play
<p>Genres: mdf gglo bool emmy djf </p> </button>
<button className="modal__btn">
<AddIcon className="modal__btn--icon" />
My List
</button>
</div> </div>
</Aux>; </Aux>;
} }
@@ -35,24 +42,5 @@ class MovieSummary extends Component {
// const movieSummary = (props) => (
// <Aux>
// <div>
// <h1 className="modal__title">{props.movie.title || props.movie.name}</h1>
// <p className="modal__info">
// <span className="modal__rating">Rating: {props.movie.vote_average * 10}% </span>
// Release date: {props.movie.release_date || props.movie.first_air_date} Runtime: {props.movie.runtime || props.movie.episode_run_time}m
// </p>
// <p className="modal__episode">{props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""}
// {props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}</p>
// <p className="modal__overview">{props.movie.overview}</p>
// <button>Play</button>
// <button>My list</button>
// <p>staring: mdf gglo bool emmy djf </p>
// <p>Genres: mdf gglo bool emmy djf </p>
// </div>
// </Aux>
// );
export default MovieSummary; export default MovieSummary;

3
src/containers/App.js
View File

@@ -69,14 +69,17 @@ makeAipCall = (searchItem) => {
/* Get the appropriate details for a specific movie that was clicked */ /* Get the appropriate details for a specific movie that was clicked */
selectMovieHandler = (movie) => { selectMovieHandler = (movie) => {
this.setState({toggleModal: true}); this.setState({toggleModal: true});
let url; let url;
if (movie.media_type === "movie") { if (movie.media_type === "movie") {
const movieId = movie.id; const movieId = movie.id;
console.log(movie.id);
url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
} else if (movie.media_type === "tv") { } else if (movie.media_type === "tv") {
const tvId = movie.id const tvId = movie.id
url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`; url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
} }
axios.get(url) axios.get(url)
.then(res => { .then(res => {
console.log(res); console.log(res);

50
src/containers/Layout/Layout.js
View File

@@ -7,44 +7,44 @@ import { BrowserRouter } from "react-router-dom";
class Layout extends Component { class Layout extends Component {
state = { state = {
selectedMovie: {} selectedMovie: {}
} };
componentDidMount = () => { componentDidMount = () => {
this.getMovie(); this.getMovie();
} };
// 71411
getMovie = () => { getMovie = () => {
/**
* @param movieId narcos netflix series id
*/
const movieId = 63351;
const url = "https://api.themoviedb.org/3/tv/71411?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0"; const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0`;
axios.get(url) axios
.get(url)
.then(res => { .then(res => {
const movieData = res.data; const movieData = res.data;
this.setState({ selectedMovie: movieData }) this.setState({ selectedMovie: movieData });
}).catch(error => {
console.log(error);
}) })
.catch(error => {
console.log(error);
});
};
} render() {
return (
render() {
return (
<BrowserRouter> <BrowserRouter>
<div className="container"> <div className="container">
<Header movie={this.state.selectedMovie}/> <Header movie={this.state.selectedMovie} />
<MovieShowcase /> <MovieShowcase />
{/* <MovieOriginals /> */} <Footer />
<Footer /> </div>
</div> </BrowserRouter>
</BrowserRouter>) );
} }
} }
export default Layout; export default Layout;

20
src/containers/MovieShowcase/MovieShowcase.js
View File

@@ -58,7 +58,7 @@ class MovieShowcase extends Component {
} }
if (movie.poster_path && movie.backdrop_path !== null) { if (movie.poster_path && movie.backdrop_path !== null) {
console.log(movieImageUrl);
const movieComponent = <MovieShowCaseRow const movieComponent = <MovieShowCaseRow
movieDetails={() => this.getMovieDetails(movie)} movieDetails={() => this.getMovieDetails(movie)}
key={movie.id} key={movie.id}
@@ -82,8 +82,9 @@ class MovieShowcase extends Component {
axios.get(url) axios.get(url)
.then(res => { .then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url); const movieRows = this.getMovieRows(res, url);
this.setState({ trendingMovieRow: movieRows }); this.setState({ trendingMovieRow: movieRows });
}) })
.catch(error => { .catch(error => {
@@ -114,7 +115,7 @@ class MovieShowcase extends Component {
axios.get(url) axios.get(url)
.then(res => { .then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url); const movieRows = this.getMovieRows(res, url);
this.setState({ netflixOriginalsRow: movieRows }); this.setState({ netflixOriginalsRow: movieRows });
}) })
@@ -128,7 +129,7 @@ class MovieShowcase extends Component {
axios.get(url) axios.get(url)
.then(res => { .then(res => {
console.log(res); console.log(res);
const movieRows = this.getMovieRows(res, url); const movieRows = this.getMovieRows(res, url);
this.setState({ actionMovieRow: movieRows }); this.setState({ actionMovieRow: movieRows });
}) })
@@ -142,7 +143,7 @@ class MovieShowcase extends Component {
axios.get(url) axios.get(url)
.then(res => { .then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url); const movieRows = this.getMovieRows(res, url);
this.setState({ comedyMovieRow: movieRows }); this.setState({ comedyMovieRow: movieRows });
}) })
@@ -156,7 +157,7 @@ class MovieShowcase extends Component {
axios.get(url) axios.get(url)
.then(res => { .then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url); const movieRows = this.getMovieRows(res, url);
this.setState({ horrorMovieRow: movieRows }); this.setState({ horrorMovieRow: movieRows });
}) })
@@ -170,7 +171,7 @@ class MovieShowcase extends Component {
axios.get(url) axios.get(url)
.then(res => { .then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url); const movieRows = this.getMovieRows(res, url);
this.setState({ romanceMovieRow: movieRows }); this.setState({ romanceMovieRow: movieRows });
}) })
@@ -184,7 +185,7 @@ class MovieShowcase extends Component {
axios.get(url) axios.get(url)
.then(res => { .then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url); const movieRows = this.getMovieRows(res, url);
this.setState({ animatedMovieRow: movieRows }); this.setState({ animatedMovieRow: movieRows });
}) })
@@ -198,7 +199,7 @@ class MovieShowcase extends Component {
axios.get(url) axios.get(url)
.then(res => { .then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url); const movieRows = this.getMovieRows(res, url);
this.setState({ documentaryRow: movieRows }); this.setState({ documentaryRow: movieRows });
}) })
@@ -212,7 +213,6 @@ class MovieShowcase extends Component {
return ( return (
<div className="movieShowcase"> <div className="movieShowcase">
<h1 className="movieShowcase__heading">Netflix Originals</h1> <h1 className="movieShowcase__heading">Netflix Originals</h1>
<div className="movieShowcase__container"> <div className="movieShowcase__container">
{this.state.netflixOriginalsRow} {this.state.netflixOriginalsRow}

7
src/containers/MovieShowcase/MovieShowcaseRow/MovieShowcaseRow.js
View File

@@ -7,24 +7,17 @@ class movieShowcaseRow extends Component {
render() { render() {
let netflixUrl = false; let netflixUrl = false;
const netflixStyle = {
height: "52rem",
}
if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") { if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
netflixUrl = true; netflixUrl = true;
} }
return ( return (
// style = { netflixUrl? netflixStyle : null}
<div onClick={this.props.movieDetails} <div onClick={this.props.movieDetails}
className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}> className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/> <img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
</div> </div>
); );
} }
} }

4
src/static/sass/abstracts/_variables.scss
View File

@@ -1,13 +1,15 @@
$color-dark: #171818; $color-dark: #171818;
$color-background: #141414; $color-background: #111111;
$color-background-modal: #000000; $color-background-modal: #000000;
$color-white: rgb(221, 218, 218); $color-white: rgb(221, 218, 218);
$color-green: #1cb831; $color-green: #1cb831;
$color-green-modal: rgb(92, 223, 92); $color-green-modal: rgb(92, 223, 92);
$color-modal-grey: rgb(172, 171, 171); $color-modal-grey: rgb(172, 171, 171);
$color-modal-grey-2: rgb(122, 122, 122);
$color-red: #e21221; $color-red: #e21221;
$color-red-2: #f80616de;
$color-dark-blue: #082452; $color-dark-blue: #082452;
$color-light-blue: rgb(15, 61, 129); $color-light-blue: rgb(15, 61, 129);

2
src/static/sass/base/_base.scss
View File

@@ -58,6 +58,6 @@ html {
.container { .container {
display: grid; display: grid;
grid-template-rows: 50vw min-content min-content min-content; grid-template-rows: min-content min-content min-content min-content;
grid-template-columns: 4% repeat(10, 1fr) 4%; grid-template-columns: 4% repeat(10, 1fr) 4%;
} }

53
src/static/sass/components/_modal.scss
View File

@@ -5,9 +5,17 @@
top: 25%; top: 25%;
left: 0; left: 0;
color: #fff; color: #fff;
height: 50rem; height: 52rem;
box-shadow: 0 1.5rem 4rem rgba($color-dark, .15); box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
&__container {
background: linear-gradient(90deg, #000 50%, transparent);
width: 70%;
padding-top: 3rem;
height: 100%;
padding-left: 5rem;
}
&__title { &__title {
font-size: 4rem; font-size: 4rem;
} }
@@ -37,11 +45,43 @@
} }
&__overview { &__overview {
color: $color-modal-grey; color: $color-modal-grey-2;
padding-top: 2rem; padding-top: 2rem;
font-size: 2rem; font-size: 2rem;
hyphens: auto; hyphens: auto;
width: 60%; width: 55%;
line-height: 1.2;
}
&__btn {
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
background-color: transparent;
color: #fff;
border: .5px solid $color-modal-grey-2;
border-radius: 2px;
font-size: 1.5rem;
margin-top: 2rem;
margin-right: 1rem;
padding: 1rem 2rem 1rem 2rem;
transition: all .2s;
&:hover {
transform: scale(1.09);
}
&--red {
background-color: $color-red-2;
border: none;
}
&--icon {
fill: #fff;
padding-right: 1rem;
height: 1.4rem;
width: 1.4rem;
}
} }
} }
@@ -54,10 +94,3 @@
display: none; display: none;
} }
.modal__container {
background: linear-gradient(90deg, #000 50%, transparent);
width: 70%;
padding-top: 3rem;
height: 100%;
padding-left: 3.5rem;
}

3
src/static/sass/components/_movieShowcase.scss
View File

@@ -37,7 +37,7 @@
&:hover > &--movie__netflix { &:hover > &--movie__netflix {
transform: translate3d(-2rem, 0, 0); transform: translate3d(-1rem, 0, 0);
} }
&--movie__netflix:hover ~ &--movie__netflix { &--movie__netflix:hover ~ &--movie__netflix {
@@ -71,7 +71,6 @@
} }
&__netflix { &__netflix {
// width: 2rem;
padding-top: 3rem; padding-top: 3rem;
padding-bottom: 4rem; padding-bottom: 4rem;
padding-right: 1rem; padding-right: 1rem;

9
src/static/sass/layout/_footer.scss
View File

@@ -5,19 +5,14 @@
grid-column: 1 / 13; grid-column: 1 / 13;
text-align: center; text-align: center;
// // &__container {
// // display: grid;
// // grid-template-columns: repeat(4, 1fr);
&__copyright { &__copyright {
color: #fff; color: #fff;
font-size: 1.8rem; font-size: 1.8rem;
&--link { &--link {
text-decoration: none; text-decoration: none;
color: #fff; color: $color-red-2;
transition: all .3s; transition: all .3s;
} }

17
src/static/sass/layout/_header.scss
View File

@@ -1,7 +1,8 @@
.header { .header {
background-color: $color-background; background-color: $color-background;
grid-column: 1 / 13; grid-column: 1 / 13;
display: flex; height: 65rem;
display: inline-block;
&__container { &__container {
@@ -63,5 +64,19 @@
font-size: 1.8rem; font-size: 1.8rem;
} }
} }
&--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));
}
} }