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() {
const backgroundStyle = {
transform: "scaleY(-45rem)",
backgroundPosition: "center",
// backgroundPosition: "center fixed",
// backgroundPosition: "center",
// backgroundAttachment: "fixed",
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 (
<header style={backgroundStyle} className="header">
<div className="header__container">
<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" />
Play
</button>
@@ -28,8 +33,8 @@ class Header extends Component {
</button>
<p className="header__container-overview">{this.props.movie.overview}</p>
</div>
</header>
<div className="header--fadeBottom"></div>
</header>
)
}

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

@@ -1,12 +1,14 @@
import React, { Component } from 'react';
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 {
render() {
return <Aux>
<div className="modal__container">
<h1 className="modal__title">
@@ -16,17 +18,22 @@ class MovieSummary extends Component {
<span className="modal__rating">
Rating: {this.props.movie.vote_average * 10}%{" "}
</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 className="modal__episode">
{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 : ""}
</p>
<p className="modal__overview">{this.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>
<button className="modal__btn modal__btn--red">
<PlayIcon className="modal__btn--icon" />
Play
</button>
<button className="modal__btn">
<AddIcon className="modal__btn--icon" />
My List
</button>
</div>
</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;

3
src/containers/App.js
View File

@@ -69,14 +69,17 @@ makeAipCall = (searchItem) => {
/* 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);

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

@@ -7,44 +7,44 @@ import { BrowserRouter } from "react-router-dom";
class Layout extends Component {
state = {
selectedMovie: {}
}
};
componentDidMount = () => {
this.getMovie();
}
// 71411
this.getMovie();
};
getMovie = () => {
const url = "https://api.themoviedb.org/3/tv/71411?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0";
axios.get(url)
/**
* @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);
const movieData = res.data;
this.setState({ selectedMovie: movieData });
})
}
.catch(error => {
console.log(error);
});
};
render() {
return (
render() {
return (
<BrowserRouter>
<div className="container">
<Header movie={this.state.selectedMovie}/>
<MovieShowcase />
{/* <MovieOriginals /> */}
<Footer />
</div>
</BrowserRouter>)
}
<div className="container">
<Header movie={this.state.selectedMovie} />
<MovieShowcase />
<Footer />
</div>
</BrowserRouter>
);
}
}
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) {
console.log(movieImageUrl);
const movieComponent = <MovieShowCaseRow
movieDetails={() => this.getMovieDetails(movie)}
key={movie.id}
@@ -82,8 +82,9 @@ class MovieShowcase extends Component {
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ trendingMovieRow: movieRows });
})
.catch(error => {
@@ -114,7 +115,7 @@ class MovieShowcase extends Component {
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ netflixOriginalsRow: movieRows });
})
@@ -128,7 +129,7 @@ class MovieShowcase extends Component {
axios.get(url)
.then(res => {
console.log(res);
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ actionMovieRow: movieRows });
})
@@ -142,7 +143,7 @@ class MovieShowcase extends Component {
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ comedyMovieRow: movieRows });
})
@@ -156,7 +157,7 @@ class MovieShowcase extends Component {
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ horrorMovieRow: movieRows });
})
@@ -170,7 +171,7 @@ class MovieShowcase extends Component {
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ romanceMovieRow: movieRows });
})
@@ -184,7 +185,7 @@ class MovieShowcase extends Component {
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ animatedMovieRow: movieRows });
})
@@ -198,7 +199,7 @@ class MovieShowcase extends Component {
axios.get(url)
.then(res => {
console.log(res);
const movieRows = this.getMovieRows(res, url);
this.setState({ documentaryRow: movieRows });
})
@@ -212,7 +213,6 @@ class MovieShowcase extends Component {
return (
<div className="movieShowcase">
<h1 className="movieShowcase__heading">Netflix Originals</h1>
<div className="movieShowcase__container">
{this.state.netflixOriginalsRow}

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

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

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

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

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

@@ -58,6 +58,6 @@ html {
.container {
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%;
}

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

@@ -5,9 +5,17 @@
top: 25%;
left: 0;
color: #fff;
height: 50rem;
height: 52rem;
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 {
font-size: 4rem;
}
@@ -37,11 +45,43 @@
}
&__overview {
color: $color-modal-grey;
color: $color-modal-grey-2;
padding-top: 2rem;
font-size: 2rem;
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;
}
.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 {
transform: translate3d(-2rem, 0, 0);
transform: translate3d(-1rem, 0, 0);
}
&--movie__netflix:hover ~ &--movie__netflix {
@@ -71,7 +71,6 @@
}
&__netflix {
// width: 2rem;
padding-top: 3rem;
padding-bottom: 4rem;
padding-right: 1rem;

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

@@ -4,11 +4,6 @@
padding-bottom: 4rem;
grid-column: 1 / 13;
text-align: center;
// // &__container {
// // display: grid;
// // grid-template-columns: repeat(4, 1fr);
&__copyright {
color: #fff;
@@ -16,8 +11,8 @@
&--link {
text-decoration: none;
color: #fff;
transition: all .3s;
color: $color-red-2;
transition: all .3s;
}

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

@@ -1,9 +1,10 @@
.header {
background-color: $color-background;
grid-column: 1 / 13;
display: flex;
height: 65rem;
display: inline-block;
&__container {
padding-top: 20rem;
padding-left: 4.5rem;
@@ -63,5 +64,19 @@
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));
}
}