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

Merge pull request #20 from AndresXI/carousel-component

Browse Source 
Carousel component
This commit is contained in:
Andres Alcocer
2020-08-07 14:06:55 -04:00
committed by GitHub
parent 057d454087 054eb1ed28
commit 03c701def2
11 changed files with 105 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
.firebase/hosting.ZGlzdA.cache Normal file
View File

@@ -0,0 +1,13 @@
index.html,1596823315374,294686b5824777966e74b788a74f613225bd2a74f6e7eca9b7b98b3bd6e4ae60
main.css,1596823315373,1fe11d275cdaeefa9ac00b547cc17a7559f641d94302b061941c58441778dc90
static/images/add.svg,1596823315374,ef7cf8e9df96200815d767e6b3b767ef092dd338b4851d2f35966911dab09e4c
static/images/bell-logo.svg,1596823315374,5ef07d3b72a99ccebfff2fb9bc1a80513d59376038055b606deff8133c3e3b56
static/images/bell.svg,1596823315375,6766dfa1ef7da3acfab70cdb2bbee5e6861fc0cdf8afbaf1cf7c387e4df415a4
static/images/cancel-music.svg,1596823315375,1bbd7eef0b56c5d4cec9993f3762a384447ca99392778a87292333b82f8a2f39
static/images/drop-down-arrow.svg,1596823315374,7ebe79b34f9fa2590b4beb29e6e6e8d0b0fff722ff0e3071ad36d3467c045743
static/images/play-button.svg,1596823315375,d43cf31799ae2e480227ae79d858b997dfb0b54f67b1d3a3a1c18ca1dd927251
static/images/search-icon.svg,1596823315375,fcad2b6afe31083f5b452f601b1ca8669f6f768deecadf07e9d647269296012a
8562b6565f5ae1db5e4af40d85b4ed2d.png,1596823315373,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1
static/images/Netflix_Logo_RGB.png,1596823315375,ddacf16aa0704b6ff5ed27a0ff5416eff337a05915beb9c10504639f2f105ec1
bundle.js,1596823315373,033e3afff30e48c0cc6b812ab7b48ad066cbc65e6442c1f10109e6a55a0e103b
static/images/header-bg.jpg,1596823315376,f4cfcb4caa304a777e03d623c68bf00d22f9c21a55d0a6fb088889e3c2867d40

5
.firebaserc Normal file
View File

@@ -0,0 +1,5 @@
{
"projects": {
"default": "netflix-clone-9a0b9"
}
}

4
.gitignore vendored
View File

@@ -10,4 +10,6 @@ dist/
# Logs
logs
*.log
npm-debug.log*
npm-debug.log*
.firebase

3
README.md
View File

@@ -1,6 +1,6 @@
# Netflix Clone
- Demo: http://netflix-react-clone.surge.sh/
- Demo: http://netflix-clone-react.surge.sh/
This project is a simplified front end clone of Netflix. It was created with React and CSS (Grid and Flexbox). It uses [The MovieDB Api](https://www.themoviedb.org/documentation/api) to search for movies and display details. Feel free to contribute!
@@ -10,6 +10,7 @@ This project is a simplified front end clone of Netflix. It was created with Rea
- Redux & React
- Sass (grid & flexbox)
- Media queries
- Swiper JS
### Runing Project Locally
- Install dependencies: run `npm install` in root project

16
firebase.json Normal file
View File

@@ -0,0 +1,16 @@
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}

78
src/containers/DisplayMovieRow.js
View File

@@ -1,10 +1,5 @@
import React, { Component } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
@@ -13,12 +8,10 @@ export default class DisplayMovieRow extends Component {
constructor(props) {
super(props);
this.state = {
value: 0,
width: window.innerWidth
width: window.innerWidth,
};
}
componentDidMount() {
window.addEventListener("resize", this.handleResize);
}
@@ -31,10 +24,6 @@ export default class DisplayMovieRow extends Component {
this.setState({ width: window.innerWidth });
};
onSlideChange = (value) => {
this.setState({ value })
}
render() {
const { width } = this.state;
let netflixUrl = false;
@@ -50,19 +39,23 @@ export default class DisplayMovieRow extends Component {
<h1 className="movieShowcase__heading">{this.props.title}</h1>
<Swiper
className="movieShowcase__container"
navigation
navigation={true}
grabCursor={false}
draggable={false}
loop={true}
loopAdditionalSlides={2}
loopAdditionalSlides={
width >= 1378 ? 4 :
width >= 998 ? 3 :
width >= 625 ? 2 : 2
}
breakpoints={{
1378: {
slidesPerView: 5,
slidesPerGroup: 5
slidesPerGroup: 5,
},
998: {
slidesPerView: 4,
slidesPerGroup: 4
slidesPerGroup: 4,
},
625: {
slidesPerView: 3,
@@ -70,7 +63,7 @@ export default class DisplayMovieRow extends Component {
},
0: {
slidesPerView: 2,
slidesPerGroup: 2
slidesPerGroup: 2,
},
}}
preventClicksPropagation={true}
@@ -79,29 +72,34 @@ export default class DisplayMovieRow extends Component {
slideToClickedSlide={false}
pagination={{ clickable: true }}
>
{
this.props.movies.map((movie, idx) => {
let movieImageUrl =
'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
if (
this.props.url ===
`/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
) {
movieImageUrl =
'https://image.tmdb.org/t/p/original/' + movie.poster_path;
}
if (movie.poster_path && movie.backdrop_path !== null) {
return (
<SwiperSlide
onClick={() => this.props.selectMovieHandler(movie)}
key={idx} className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}
>
<img src={movieImageUrl} className="movieShowcase__container--movie-image" />
</SwiperSlide>
)
}
})
}
{this.props.movies.map((movie, idx) => {
let movieImageUrl =
'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
if (
this.props.url ===
`/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
) {
movieImageUrl =
'https://image.tmdb.org/t/p/original/' + movie.poster_path;
}
if (movie.poster_path && movie.backdrop_path !== null) {
return (
<SwiperSlide
onClick={() => this.props.selectMovieHandler(movie)}
key={idx}
className={
'movieShowcase__container--movie' +
(netflixUrl ? '__netflix' : '')
}
>
<img
src={movieImageUrl}
className="movieShowcase__container--movie-image"
/>
</SwiperSlide>
);
}
})}
</Swiper>
</>
);

3
src/containers/Home.js
View File

@@ -1,9 +1,6 @@
import React, { Component } from 'react';
import axios from "../axios-movies";
import Navbar from './Navbar';
import MainContent from './MainContent';
import Movie from '../components/Movie/Movie';
import Modal from '../components/UI/Modal';
import MovieDetails from '../components/Movie/MovieDetails';

5
src/containers/Navbar.js
View File

@@ -2,9 +2,8 @@ import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import _ from 'lodash';
import { withRouter } from 'react-router-dom';
import axios from '../axios-movies';
import Movie from '../components/Movie/Movie';
import axios from '../axios-movies';
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';
@@ -31,7 +30,7 @@ class Navbar extends Component {
}
/** changes the scrolling state depending on the Y-position */
handleScroll = (event) => {
handleScroll = () => {
if (window.scrollY === 0) {
this.setState({ scrolling: false });
}

4
src/index.html
View File

@@ -5,10 +5,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Hind:400,500,700|Ramabhadra" rel="stylesheet">
<link rel="stylesheet" type="text/css" charset="UTF-8"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Netflix Clone</title>
</head>

6
src/index.js
View File

@@ -7,13 +7,15 @@ import promise from 'redux-promise';
import '@babel/polyfill';
import App from './containers/App';
import 'swiper/swiper-bundle.min.css';
// import 'swiper/components/navigation/navigation.scss';
// import 'swiper/components/pagination/pagination.scss';
// import 'swiper/components/scrollbar/scrollbar.scss';
// Import main sass file to apply global styles
import './static/sass/style.scss';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
// TODO
// - implement carousel
const app = (
<Provider store={createStoreWithMiddleware(reducers)}>
<App />

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

@@ -1,46 +1,49 @@
// Override swiper styles
.swiper-pagination {
top: 0;
height: 2rem;
text-align: right;
padding-right: 4rem;
top: 0 !important;
height: 2rem !important;
text-align: right !important;
padding-right: 4rem !important;
}
.swiper-pagination-bullet {
background-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255) !important;
}
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: 0;
left: 0;
width: 100%;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
}
div.swiper-button-prev,
div.swiper-button-next {
transition: all .3s;
transition: all 450ms !important;
color: rgb(255, 255, 255);
&:hover {
transform: scale(1.2);
transition: all .3s;
transform: scale(1.2) !important;
transition: all 450ms !important;
}
}
.swiper-slide {
transition: all 450ms !important;
}
.swiper-wrapper:hover .swiper-slide {
opacity: .3;
opacity: .3 !important;
&:hover {
transform: scale(1.3);
opacity: 1;
transform: scale(1.3) !important;
opacity: 1 !important;
@include responsive(tab_port) {
transform: scale(1.2);
transform: scale(1.2) !important;
}
}
}
.movieShowcase {
background-color: $color-background;
grid-column: 2 / 13;
@@ -55,8 +58,6 @@ div.swiper-button-next {
}
&__container {
transition: transform 450ms;
@include responsive(phone) {
width: 98vw;
}
@@ -79,14 +80,14 @@ div.swiper-button-next {
&:hover &--movie__netflix {
&:hover {
transform: scale(1.1);
transform: scale(1.1) !important;
@include responsive(tab_port) {
transform: scale(1.05);
transform: scale(1.05) !important;
}
@include responsive(phone) {
transform: scale(1.05);
transform: scale(1.05) !important;
}
}
}