diff --git a/package-lock.json b/package-lock.json index 7ec4095..9b6a16c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2859,11 +2859,6 @@ } } }, - "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", @@ -5063,6 +5058,14 @@ } } }, + "dom7": { + "version": "3.0.0-alpha.7", + "resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0-alpha.7.tgz", + "integrity": "sha512-3epkQPsKsbk2Dixqqgm2DT/KzhiAPByjDK7emu6owwFLbM5UoiqWKgdsH+6PpMEgoeR6Ex/bW1UbOe0FWZU0zg==", + "requires": { + "ssr-window": "^3.0.0-alpha.1" + } + }, "domain-browser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", @@ -5274,11 +5277,6 @@ } } }, - "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", @@ -9610,14 +9608,6 @@ "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", @@ -9821,11 +9811,6 @@ "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", @@ -12281,25 +12266,24 @@ "dev": true }, "react": { - "version": "16.6.1", - "resolved": "https://registry.npmjs.org/react/-/react-16.6.1.tgz", - "integrity": "sha512-OtawJThYlvRgm9BXK+xTL7BIlDx8vv21j+fbQDjRRUyok6y7NyjlweGorielTahLZHYIdKUoK2Dp9ByVWuMqxw==", + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz", + "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.11.0" + "prop-types": "^15.6.2" } }, "react-dom": { - "version": "16.6.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.1.tgz", - "integrity": "sha512-zm+wBuEMGm009Wt1uE4Zw5KcXOW7qC4E/xW/fpJsCsbOco4U/R84u+DzzO/S4SYSdNBcqcaulcp4w3FXl8pImw==", + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", + "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.11.0" + "scheduler": "^0.19.1" } }, "react-is": { @@ -12388,18 +12372,6 @@ "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", @@ -12798,11 +12770,6 @@ "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", @@ -13209,9 +13176,9 @@ "dev": true }, "scheduler": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.0.tgz", - "integrity": "sha512-MAYbBfmiEHxF0W+c4CxMpEqMYK+rYF584VP/qMKSiHM6lTkBKKYOJaDiSILpJHla6hBOsVd6GucPL46o2Uq3sg==", + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", + "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -14030,6 +13997,11 @@ "tweetnacl": "~0.14.0" } }, + "ssr-window": { + "version": "3.0.0-alpha.4", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0-alpha.4.tgz", + "integrity": "sha512-+dBRP/pZ+VyITxTzD0lMDzDwN/BmfUl8xi2e6t5Nz4+FqUphfcBLB1OOUSYCRNFB25rD3c8AJRYpY5rHTbL+kg==" + }, "ssri": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz", @@ -14142,11 +14114,6 @@ "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", @@ -14793,6 +14760,15 @@ } } }, + "swiper": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.1.1.tgz", + "integrity": "sha512-w6rmEUnpuSWvzuIDJ+nTi7YQ4+pvr++zUnBO2VxkzOZbzQzcMNKNw1yj0RFEok682IHDPCs3LXSl8zSQ+zDEdw==", + "requires": { + "dom7": "^3.0.0-alpha.7", + "ssr-window": "^3.0.0-alpha.4" + } + }, "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", diff --git a/package.json b/package.json index 5ffe50a..1b1ac6b 100644 --- a/package.json +++ b/package.json @@ -19,14 +19,14 @@ "axios": "^0.18.1", "lodash": "^4.17.19", "prop-types": "^15.6.2", - "react": "^16.6.1", - "react-dom": "^16.6.1", + "react": "^16.13.1", + "react-dom": "^16.13.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" + "redux-thunk": "^2.3.0", + "swiper": "^6.1.1" }, "devDependencies": { "@babel/core": "^7.1.5", diff --git a/src/containers/DisplayMovieRow.js b/src/containers/DisplayMovieRow.js index 4f0918b..8bf5740 100644 --- a/src/containers/DisplayMovieRow.js +++ b/src/containers/DisplayMovieRow.js @@ -1,9 +1,17 @@ import React, { Component } from 'react'; -import Slider from "react-slick"; - +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'; import MovieGenre from '../components/MovieGenre'; +// install Swiper components +SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]); + const getMovieRows = (movies, url, selectMovieHandler) => { const movieRow = movies.map((movie) => { let movieImageUrl = @@ -46,62 +54,6 @@ 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 === @@ -113,34 +65,42 @@ export default class DisplayMovieRow extends Component { return ( <>

{this.props.title}

- console.log(swiper)} + onSlideChange={() => console.log('slide change')} > - - {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; - } - return ( -
- -
- ); - })} - + Slide 1 + Slide 2 + Slide 3 + Slide 4 + ); } } + +{/*
+ { + this.props.movies.map((movie) => { + 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; + } + return ( +
+ +
+ ) + }) + } +
*/} \ No newline at end of file diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index 214b3ed..f16ddcd 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/src/static/sass/components/_movieShowcase.scss @@ -15,11 +15,11 @@ overflow-y: hidden; transition: transform 450ms; overflow: -moz-hidden-unscrollable; - overflow-x: scroll; + // overflow-x: scroll; display: flex; width: 95vw; - overflow: -moz-scrollbars-horizontal; - grid-template-columns: repeat(20, 1fr); + // overflow: -moz-scrollbars-horizontal; + // grid-template-columns: repeat(20, 1fr); column-gap: 0; @include responsive(phone) { @@ -86,6 +86,7 @@ padding-bottom: 4rem; height: 21.5rem; min-height: 0; + object-fit: contain; @include responsive(tab_port) { height: 18.5rem; @@ -101,6 +102,7 @@ &-image { height: 100%; + // object-fit: contain; } &__netflix { @@ -123,4 +125,32 @@ } } } +} + +// Slick carousel override styles +.slick-track { + transition: transform 450ms; + + &:hover>div.movieShowcase__container--movie-image { + opacity: .3; + + &:hover { + transform: scale(1.5); + opacity: 1; + } + } +} + +.slick-slider { + margin-right: 4rem; + // right: -5px !important; +} + +.slick-prev { + left: 0 !important; + z-index: 10000; +} + +.slick-next { + right: 0 !important; } \ No newline at end of file