diff --git a/package-lock.json b/package-lock.json index a1c7648..7ec4095 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index d434ba3..5ffe50a 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/containers/DisplayMovieRow.js b/src/containers/DisplayMovieRow.js index fb45523..4f0918b 100644 --- a/src/containers/DisplayMovieRow.js +++ b/src/containers/DisplayMovieRow.js @@ -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 ( -// <> -//

{props.title}

-// {/*
{movies}
*/} -// -// {props.movies.map((movieItem) => { -// return ( -//
-// -//
-// ); -// })} -// -// -// ); -// } - -// 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 ( <>

{this.props.title}

- {/*
{movies}
*/} - - + {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 ; return (
); })} - + ); } diff --git a/src/index.html b/src/index.html index 0d117d9..b0fe964 100644 --- a/src/index.html +++ b/src/index.html @@ -5,6 +5,10 @@ + + Netflix Clone