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

implemented new carousel component

Browse Source
This commit is contained in:
andres alcocer
2020-08-02 16:25:06 -04:00
parent 1985db16d6
commit 661e885905
4 changed files with 113 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
package-lock.json generated
View File

@@ -932,11 +932,6 @@
"to-fast-properties": "^2.0.0"
}
},
"@brainhubeu/react-carousel": {
"version": "1.19.26",
"resolved": "https://registry.npmjs.org/@brainhubeu/react-carousel/-/react-carousel-1.19.26.tgz",
"integrity": "sha512-+YO8cJrJEk+QDZTQM+i7ct5Ouy0LyoVHQD4fomdsV+3AQmWUkMVZNBYmxFMvhRQVFKreTTzyKuGPkhDKilL/CQ=="
},
"@sindresorhus/is": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
@@ -2864,6 +2859,11 @@
}
}
},
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
},
"clean-css": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -5274,6 +5274,11 @@
}
}
},
"enquire.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
"integrity": "sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ="
},
"entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
@@ -9605,6 +9610,14 @@
"integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
"dev": true
},
"json2mq": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
"integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
"requires": {
"string-convert": "^0.2.0"
}
},
"json3": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",
@@ -9808,6 +9821,11 @@
"integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI=",
"dev": true
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
},
"lodash.escape": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz",
@@ -12370,6 +12388,18 @@
"warning": "^4.0.1"
}
},
"react-slick": {
"version": "0.27.1",
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.27.1.tgz",
"integrity": "sha512-dlT8QW37XahezqcnJ/qquktzNvd9R16bBXoN7CsTab1EzUL1QqieYqYkn+A/eBetxeRUy2Z9kW+XnljZboju0w==",
"requires": {
"classnames": "^2.2.5",
"enquire.js": "^2.1.6",
"json2mq": "^0.2.0",
"lodash.debounce": "^4.0.8",
"resize-observer-polyfill": "^1.5.0"
}
},
"read-all-stream": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz",
@@ -12768,6 +12798,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"resolve": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
@@ -14107,6 +14142,11 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true
},
"string-convert": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
"integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
},
"string-width": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",

2
package.json
View File

@@ -16,7 +16,6 @@
"author": "Andres Alcocer",
"license": "ISC",
"dependencies": {
"@brainhubeu/react-carousel": "^1.19.26",
"axios": "^0.18.1",
"lodash": "^4.17.19",
"prop-types": "^15.6.2",
@@ -24,6 +23,7 @@
"react-dom": "^16.6.1",
"react-redux": "^6.0.1",
"react-router-dom": "^4.3.1",
"react-slick": "^0.27.1",
"redux": "^4.0.1",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0"

103
src/containers/DisplayMovieRow.js
View File

@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import Carousel, { Dots, slidesToShowPlugin } from '@brainhubeu/react-carousel';
import '@brainhubeu/react-carousel/lib/style.css';
import Slider from "react-slick";
import MovieGenre from '../components/MovieGenre';
@@ -32,32 +32,6 @@ const getMovieRows = (movies, url, selectMovieHandler) => {
return movieRow;
};
// export default function DisplayMovieRow(props) {
// // let movies = getMovieRows(props.movies, props.url, props.selectMovieHandler);
// return (
// <>
// <h1 className="movieShowcase__heading">{props.title}</h1>
// {/* <div className="movieShowcase__container">{movies}</div> */}
// <OwlCarousel
// ref="car"
// options={options}
// event={events}
// className="movieShowcase__container"
// >
// {props.movies.map((movieItem) => {
// return (
// <div>
// <img src={movieItem.posterUrl} />
// </div>
// );
// })}
// </OwlCarousel>
// </>
// );
// }
// import React, { Component } from 'react'
export default class DisplayMovieRow extends Component {
constructor(props) {
super(props);
@@ -72,6 +46,62 @@ export default class DisplayMovieRow extends Component {
render() {
console.log('DisplayMovie.render()', this.props.movies);
const settings = {
dots: true,
infinite: true,
speed: 1000,
draggable: false,
slidesToShow: 6,
slidesToScroll: 6,
initialSlide: 0,
responsive: [
{
breakpoint: 1824,
settings: {
slidesToShow: 6,
slidesToScroll: 6,
infinite: true,
dots: true
}
},
{
breakpoint: 1300,
settings: {
slidesToShow: 5,
slidesToScroll: 5,
infinite: true,
dots: true
}
},
{
breakpoint: 1100,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: true
}
},
{
breakpoint: 798,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 500,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true,
dots: true
}
}
]
};
let netflixUrl = false;
if (
this.props.url ===
@@ -79,21 +109,15 @@ export default class DisplayMovieRow extends Component {
) {
netflixUrl = true;
}
return (
<>
<h1 className="movieShowcase__heading">{this.props.title}</h1>
{/* <div className="movieShowcase__container">{movies}</div> */}
<Dots value={this.state.value} onChange={this.onSlideChange} number={this.props.movies.length} />
<Carousel
<Slider
// className="movieShowcase__container"
infinite
draggable={false}
arrows
value={this.state.value}
slidesPerScroll={4}
slidesPerPage={4}
onChange={this.onSlideChange}
{...settings}
>
{this.props.movies.map((movie, idx) => {
let movieImageUrl =
'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
@@ -104,7 +128,6 @@ export default class DisplayMovieRow extends Component {
movieImageUrl =
'https://image.tmdb.org/t/p/original/' + movie.poster_path;
}
// return <img key={idx} src={movieImageUrl} />;
return (
<div
className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}
@@ -116,7 +139,7 @@ export default class DisplayMovieRow extends Component {
</div>
);
})}
</Carousel>
</Slider>
</>
);
}

4
src/index.html
View File

@@ -5,6 +5,10 @@
<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>