bump swiper to latest version

package.json

@@ -41,7 +41,7 @@
     "react-sticky-box": "^1.0.2",
     "sass": "^1.49.0",
     "sharp": "^0.32.6",
-    "swiper": "^8.4.4",
+    "swiper": "^11.0.3",
     "swr": "^1.0.1",
     "throttle-debounce": "^2.1.0",
     "typescript": "^4.0.5",

src/components/media/PinchZoom/index.tsx

@@ -48,6 +48,7 @@ const PinchZoom: FC<Props> = ({ children }) => {
       if (event.touches.length !== 2 || !ref) {
         return;
       }
+
       event.preventDefault(); // Prevent page scroll
 
       // Safari provides event.scale as two fingers move on the screen

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -2,12 +2,11 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import SwiperCore, { Keyboard, Lazy, Navigation, Pagination } from 'swiper';
+import { Keyboard, Navigation, Pagination, Zoom } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperClass from 'swiper/types/swiper-class';
 
 import { ImageLoadingWrapper } from '~/components/common/ImageLoadingWrapper/index';
-import { PinchZoom } from '~/components/media/PinchZoom';
 import { NodeComponentProps } from '~/constants/node';
 import { imagePresets } from '~/constants/urls';
 import { useWindowSize } from '~/hooks/dom/useWindowSize';
@@ -23,8 +22,6 @@ import { getNodeSwiperImageSizes } from './helpers';
 import { NODE_SWIPER_OPTIONS } from './options';
 import styles from './styles.module.scss';
 
-SwiperCore.use([Navigation, Pagination, Keyboard, Lazy]);
-
 interface IProps extends NodeComponentProps {}
 
 const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
@@ -65,9 +62,9 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
 
   useEffect(() => {
     if (isModalActive) {
-      controlledSwiper?.keyboard.disable();
+      controlledSwiper?.keyboard?.disable();
     } else {
-      controlledSwiper?.keyboard.enable();
+      controlledSwiper?.keyboard?.enable();
     }
   }, [controlledSwiper?.keyboard, isModalActive]);
 
@@ -78,6 +75,7 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
   return (
     <div className={styles.wrapper}>
       <Swiper
+        modules={[Navigation, Pagination, Keyboard, Zoom]}
         enabled={images.length > 1}
         initialSlide={0}
         slidesPerView="auto"
@@ -90,48 +88,36 @@ const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
         observer
         resizeObserver
         watchOverflow
-        updateOnImagesReady
         keyboard={keyboard}
         grabCursor
         autoHeight
         zoom
         navigation
         watchSlidesProgress
-        lazy={NODE_SWIPER_OPTIONS.lazy}
+        lazyPreloadPrevNext={1}
       >
         {images.map((file, index) => (
           <SwiperSlide className={styles.slide} key={file.id}>
-            <PinchZoom>
-              {({ setRef }) => (
             <ImageLoadingWrapper
               preview={getURL(file, imagePresets['300'])}
               color={file.metadata?.dominant_color}
-                  ref={setRef}
             >
               {({ loading, onLoad }) => (
                 <NodeImageLazy
                   src={getURL(file)}
                   width={file.metadata?.width}
                   height={file.metadata?.height}
-                      color={normalizeBrightColor(
+                  color={normalizeBrightColor(file?.metadata?.dominant_color)}
-                        file?.metadata?.dominant_color,
-                      )}
                   onLoad={onLoad}
                   onClick={() => onOpenPhotoSwipe(index)}
                   className={classNames(styles.image, 'swiper-lazy', {
                     [styles.loading]: loading,
                   })}
-                      sizes={getNodeSwiperImageSizes(
+                  sizes={getNodeSwiperImageSizes(file, innerWidth, innerHeight)}
-                        file,
-                        innerWidth,
-                        innerHeight,
-                      )}
                   quality={90}
                 />
               )}
             </ImageLoadingWrapper>
-              )}
-            </PinchZoom>
           </SwiperSlide>
         ))}
       </Swiper>

src/components/node/NodeImageSwiperBlock/options.ts

@@ -14,4 +14,4 @@ export const NODE_SWIPER_OPTIONS: SwiperOptions = {
     loadPrevNext: true,
     checkInView: true,
   },
-};
+} as const;

src/styles/_global.scss

@@ -7,7 +7,6 @@
 
 @import 'swiper/css';
 @import 'swiper/css/effect-fade';
-@import 'swiper/css/lazy';
 @import 'swiper/css/pagination';
 @import 'swiper/css/scrollbar';
 @import 'swiper/css/zoom';

yarn.lock

@@ -710,7 +710,7 @@ autosize@^4.0.2:
   resolved "https://registry.yarnpkg.com/autosize/-/autosize-4.0.4.tgz#924f13853a466b633b9309330833936d8bccce03"
   integrity sha512-5yxLQ22O0fCRGoxGfeLSNt3J8LB1v+umtpMnPW6XjkTWXKoN0AmXAIhelJcDtFT/Y/wYWmfE+oqU10Q0b8FhaQ==
 
-axios@^0.21.100:
+axios@^0.21.4:
   version "0.21.4"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
   integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
@@ -1069,13 +1069,6 @@ dom-accessibility-api@^0.5.6:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.11.tgz#79d5846c4f90eba3e617d9031e921de9324f84ed"
   integrity sha512-7X6GvzjYf4yTdRKuCVScV+aA9Fvh5r8WzWrXBH9w82ZWB/eYDMGCnazoC/YAqAzUJWHzLOnZqr46K3iEyUhUvw==
 
-dom7@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.4.tgz#8b68c5d8e5e2ed0fddb1cb93e433bc9060c8f3fb"
-  integrity sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==
-  dependencies:
-    ssr-window "^4.0.0"
-
 duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
@@ -2948,11 +2941,6 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
-ssr-window@^4.0.0, ssr-window@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
-  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
-
 streamx@^2.15.0:
   version "2.15.2"
   resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.15.2.tgz#680eacebdc9c43ede7362c2e6695b34dd413c741"
@@ -3091,13 +3079,10 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-swiper@^8.4.4:
+swiper@^11.0.3:
-  version "8.4.5"
+  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.4.5.tgz#149ca81f67393d3f33abddd0f968fc37e99980b5"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.0.3.tgz#9c325154db2a4431f508b7e8e300621365eb4c3d"
-  integrity sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==
+  integrity sha512-MyV9ooQsriAe2EibeamqewLjgCfSvl2xoyratl6S3ln5BXDL4BzlO6mxcbLMCzQL6Z60b/u0AS/nKrepL0+TAg==
-  dependencies:
-    dom7 "^4.0.4"
-    ssr-window "^4.0.2"
 
 swr@^1.0.1:
   version "1.2.0"