bump photoswipe

package.json

@@ -26,7 +26,7 @@
     "mobx-persist-store": "^1.0.4",
     "mobx-react-lite": "^3.2.3",
     "next": "^12.3.0",
-    "photoswipe": "^4.1.3",
+    "photoswipe": "^5.4.4",
     "raleway-cyrillic": "^4.0.2",
     "ramda": "^0.26.1",
     "react": "^17.0.2",

src/containers/dialogs/PhotoSwipe/index.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useRef, VFC } from 'react';
+import { useEffect } from 'react';
 
-import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js';
+import { SlideData } from 'photoswipe/dist/types/slide/slide';
-import PhotoSwipeJs from 'photoswipe/dist/photoswipe.js';
+
+import 'photoswipe/style.css';
 
 import { imagePresets } from '~/constants/urls';
 import { useWindowSize } from '~/hooks/dom/useWindowSize';
@@ -14,124 +14,76 @@ import { getURL } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-export interface PhotoSwipeProps extends DialogComponentProps {
+export interface Props extends DialogComponentProps {
   items: IFile[];
   index: number;
 }
 
-const PhotoSwipe: VFC<PhotoSwipeProps> = observer(({ index, items }) => {
+const padding = { top: 10, left: 10, right: 10, bottom: 10 } as const;
-  let ref = useRef<HTMLDivElement>(null);
+
+const PhotoSwipe = observer(({ index, items }: Props) => {
   const { hideModal } = useModal();
   const { isTablet } = useWindowSize();
 
   useEffect(() => {
-    new Promise(async (resolve) => {
+    Promise.all(
-      const images = await Promise.all(
+      items.map(
-        items.map(
+        (file): Promise<SlideData> =>
-          (file) =>
+          new Promise((resolve) => {
-            new Promise((resolve) => {
+            const src = getURL(
-              const src = getURL(
+              file,
-                file,
+              isTablet ? imagePresets[900] : imagePresets[1600],
-                isTablet ? imagePresets[900] : imagePresets[1600],
+            );
-              );
 
-              if (file.metadata?.width && file.metadata.height) {
+            if (file.metadata?.width && file.metadata.height) {
-                resolve({
+              resolve({
-                  src,
+                src,
-                  w: file.metadata.width,
+                width: file.metadata.width,
-                  h: file.metadata.height,
+                height: file.metadata.height,
-                });
+              });
 
-                return;
+              return;
-              }
+            }
 
-              const img = new Image();
+            const img = new Image();
 
-              img.onload = () => {
+            img.onload = () => {
-                resolve({
+              resolve({
-                  src,
+                src,
-                  h: img.naturalHeight,
+                height: img.naturalHeight,
-                  w: img.naturalWidth,
+                width: img.naturalWidth,
-                });
+              });
-              };
+            };
 
-              img.onerror = () => {
+            img.onerror = () => {
-                resolve({});
+              resolve({});
-              };
+            };
 
-              img.src = getURL(file, imagePresets[1600]);
+            img.src = getURL(file, imagePresets[1600]);
-            }),
+          }),
-        ),
+      ),
-      );
+    ).then(async (images: SlideData[]) => {
+      const PSWP = await import('photoswipe').then((it) => it.default);
 
-      resolve(images);
+      const ps = new PSWP({
-    }).then((images) => {
+        dataSource: images,
-      const ps = new PhotoSwipeJs(ref.current, PhotoSwipeUI_Default, images, {
         index: index || 0,
-        closeOnScroll: false,
+        closeOnVerticalDrag: true,
-        history: false,
+        padding,
+        mainClass: styles.wrap,
+        zoom: false,
+        counter: false,
+        bgOpacity: 0.1,
       });
 
+      ps.on('destroy', hideModal);
+      ps.on('close', hideModal);
+
       ps.init();
-      ps.listen('destroy', hideModal);
-      ps.listen('close', hideModal);
     });
   }, [hideModal, items, index, isTablet]);
 
-  return (
+  return null;
-    <div
-      className="pswp"
-      tabIndex={-1}
-      role="dialog"
-      aria-hidden="true"
-      ref={ref}
-    >
-      <div className={classNames('pswp__bg', styles.bg)} />
-      <div className={classNames('pswp__scroll-wrap', styles.wrap)}>
-        <div className="pswp__container">
-          <div className="pswp__item" />
-          <div className="pswp__item" />
-          <div className="pswp__item" />
-        </div>
-
-        <div className="pswp__ui pswp__ui--hidden">
-          <div className={classNames('pswp__top-bar', styles.bar)}>
-            <div className="pswp__counter" />
-            <button
-              className="pswp__button pswp__button--close"
-              title="Close (Esc)"
-            />
-
-            <div className="pswp__preloader">
-              <div className="pswp__preloader__icn">
-                <div className="pswp__preloader__cut">
-                  <div className="pswp__preloader__donut" />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
-            <div className="pswp__share-tooltip" />
-          </div>
-
-          <button
-            className="pswp__button pswp__button--arrow--left"
-            title="Previous (arrow left)"
-          />
-
-          <button
-            className="pswp__button pswp__button--arrow--right"
-            title="Next (arrow right)"
-          />
-
-          <div className="pswp__caption">
-            <div className="pswp__caption__center" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
 });
 
 export { PhotoSwipe };

src/containers/dialogs/PhotoSwipe/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   :global(.pswp__img) {

src/styles/_global.scss

@@ -2,8 +2,6 @@
 @use './themes/horizon' as theme_horizon;
 
 @import 'src/styles/variables';
-@import 'photoswipe/dist/photoswipe';
-@import 'photoswipe/dist/default-skin/default-skin';
 
 @import 'swiper/css';
 @import 'swiper/css/effect-fade';

yarn.lock

@@ -2423,10 +2423,10 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-photoswipe@^4.1.3:
+photoswipe@^5.4.4:
-  version "4.1.3"
+  version "5.4.4"
-  resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-4.1.3.tgz#59f49494eeb9ddab5888d03392926a19bc197550"
+  resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.4.4.tgz#e045dc036453493188d5c8665b0e8f1000ac4d6e"
-  integrity sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA==
+  integrity sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==
 
 picocolors@^1.0.0:
   version "1.0.0"