Merge pull request #20 from AndresXI/carousel-component

Carousel component

.firebase/hosting.ZGlzdA.cache

@@ -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

.firebaserc

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

.gitignore

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

README.md

@@ -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

firebase.json

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

src/containers/DisplayMovieRow.js

@@ -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) => {
-            this.props.movies.map((movie, idx) => {
+            let movieImageUrl =
-              let movieImageUrl =
+              'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
-                'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
+            if (
-              if (
+              this.props.url ===
-                this.props.url ===
+              `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
-                `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
+            ) {
-              ) {
+              movieImageUrl =
-                movieImageUrl =
+                'https://image.tmdb.org/t/p/original/' + movie.poster_path;
-                  'https://image.tmdb.org/t/p/original/' + movie.poster_path;
+            }
-              }
+            if (movie.poster_path && movie.backdrop_path !== null) {
-              if (movie.poster_path && movie.backdrop_path !== null) {
+              return (
-                return (
+                <SwiperSlide
-                  <SwiperSlide
+                  onClick={() => this.props.selectMovieHandler(movie)}
-                    onClick={() => this.props.selectMovieHandler(movie)}
+                  key={idx}
-                    key={idx} className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}
+                  className={
-                  >
+                    'movieShowcase__container--movie' +
-                    <img src={movieImageUrl} className="movieShowcase__container--movie-image" />
+                    (netflixUrl ? '__netflix' : '')
-                  </SwiperSlide>
+                  }
-                )
+                >
-              }
+                  <img
-            })
+                    src={movieImageUrl}
-          }
+                    className="movieShowcase__container--movie-image"
+                  />
+                </SwiperSlide>
+              );
+            }
+          })}
         </Swiper>
       </>
     );

src/containers/Home.js

@@ -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';
 

src/containers/Navbar.js

@@ -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 });
     }

src/index.html

@@ -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>

src/index.js

@@ -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 />

src/static/sass/components/_movieShowcase.scss

@@ -1,46 +1,49 @@
 // Override swiper styles
 .swiper-pagination {
-   top: 0;
+   top: 0 !important;
-   height: 2rem;
+   height: 2rem !important;
-   text-align: right;
+   text-align: right !important;
-   padding-right: 4rem;
+   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;
+   bottom: 0 !important;
-   left: 0;
+   left: 0 !important;
-   width: 100%;
+   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);
+      transform: scale(1.2) !important;
-      transition: all .3s;
+      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);
+      transform: scale(1.3) !important;
-      opacity: 1;
+      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;
             }
          }
       }