upgraded react and react-dom

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",
+      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
-      "integrity": "sha512-OtawJThYlvRgm9BXK+xTL7BIlDx8vv21j+fbQDjRRUyok6y7NyjlweGorielTahLZHYIdKUoK2Dp9ByVWuMqxw==",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
+        "prop-types": "^15.6.2"
-        "scheduler": "^0.11.0"
       }
     },
     "react-dom": {
-      "version": "16.6.1",
+      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
-      "integrity": "sha512-zm+wBuEMGm009Wt1uE4Zw5KcXOW7qC4E/xW/fpJsCsbOco4U/R84u+DzzO/S4SYSdNBcqcaulcp4w3FXl8pImw==",
+      "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",
+      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-MAYbBfmiEHxF0W+c4CxMpEqMYK+rYF584VP/qMKSiHM6lTkBKKYOJaDiSILpJHla6hBOsVd6GucPL46o2Uq3sg==",
+      "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",

package.json

@@ -19,14 +19,14 @@
     "axios": "^0.18.1",
     "lodash": "^4.17.19",
     "prop-types": "^15.6.2",
-    "react": "^16.6.1",
+    "react": "^16.13.1",
-    "react-dom": "^16.6.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",

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 (
       <>
         <h1 className="movieShowcase__heading">{this.props.title}</h1>
-        <Slider
+        <Swiper
-          // className="movieShowcase__container"
+          spaceBetween={50}
-          {...settings}
+          slidesPerView={3}
+          navigation
+          pagination={{ clickable: true }}
+          scrollbar={{ draggable: true }}
+          onSwiper={(swiper) => console.log(swiper)}
+          onSlideChange={() => console.log('slide change')}
         >
-
+          <SwiperSlide>Slide 1</SwiperSlide>
-          {this.props.movies.map((movie, idx) => {
+          <SwiperSlide>Slide 2</SwiperSlide>
-            let movieImageUrl =
+          <SwiperSlide>Slide 3</SwiperSlide>
-              'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
+          <SwiperSlide>Slide 4</SwiperSlide>
-            if (
+        </Swiper>
-              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 (
-              <div
-                className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}
-              >
-                <img
-                  className="movieShowcase__container--movie-image"
-                  src={movieImageUrl}
-                />
-              </div>
-            );
-          })}
-        </Slider>
       </>
     );
   }
 }
+
+{/* <div className="movieShowcase__container">
+  {
+    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 (
+        <div className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
+          <img src={movieImageUrl} className="movieShowcase__container--movie-image" />
+        </div>
+      )
+    })
+  }
+</div> */}

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;
+      // overflow: -moz-scrollbars-horizontal;
-      grid-template-columns: repeat(20, 1fr);
+      // 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 {
@@ -124,3 +126,31 @@
       }
    }
 }
+
+// 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;
+}