From 19aeb8a3344c15d534a77281ca90056ef2d1dbd1 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 20 Apr 2020 18:04:09 +0700
Subject: [PATCH] photoswipe element

---
 package.json                                  |   1 +
 .../node/NodeAudioImageBlock/index.tsx        |   1 +
 src/components/node/NodeImageBlock/index.tsx  |  58 ++++-----
 .../node/NodeImageSlideBlock/index.tsx        |  44 ++++---
 src/constants/dialogs.ts                      |   2 +
 src/containers/dialogs/PhotoSwipe/index.tsx   | 121 ++++++++++++++++++
 src/containers/dialogs/PhotoSwipe/styles.scss |   7 +
 src/containers/node/NodeLayout/index.tsx      |  15 ++-
 src/redux/modal/actions.ts                    |  12 ++
 src/redux/modal/constants.ts                  |  11 +-
 src/redux/modal/handlers.ts                   |   3 +
 src/redux/modal/reducer.ts                    |  10 +-
 src/redux/modal/sagas.ts                      |  17 +++
 src/redux/node/constants.ts                   |   9 +-
 webpack.config.js                             |   2 +-
 yarn.lock                                     |   5 +
 16 files changed, 260 insertions(+), 58 deletions(-)
 create mode 100644 src/containers/dialogs/PhotoSwipe/index.tsx
 create mode 100644 src/containers/dialogs/PhotoSwipe/styles.scss

diff --git a/package.json b/package.json
index a7010af3..ed23e0ea 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
     "less-middleware": "~2.2.1",
     "lodash": "^4.17.10",
     "node-sass": "^4.11.0",
+    "photoswipe": "^4.1.3",
     "raleway-cyrillic": "^4.0.2",
     "ramda": "^0.26.1",
     "react": "16.13.0",
diff --git a/src/components/node/NodeAudioImageBlock/index.tsx b/src/components/node/NodeAudioImageBlock/index.tsx
index 95eb3fde..a00f4b1a 100644
--- a/src/components/node/NodeAudioImageBlock/index.tsx
+++ b/src/components/node/NodeAudioImageBlock/index.tsx
@@ -8,6 +8,7 @@ import { PRESETS } from '~/constants/urls';
 
 interface IProps {
   node: INode;
+  modalShowPhotoswipe: any;
 }
 
 const NodeAudioImageBlock: FC<IProps> = ({ node }) => {
diff --git a/src/components/node/NodeImageBlock/index.tsx b/src/components/node/NodeImageBlock/index.tsx
index 0ccd33d1..ef2f9f85 100644
--- a/src/components/node/NodeImageBlock/index.tsx
+++ b/src/components/node/NodeImageBlock/index.tsx
@@ -1,27 +1,22 @@
-import React, {
-  FC,
-  useMemo,
-  useState,
-  useEffect,
-  useRef,
-  useCallback
-} from "react";
-import { ImageSwitcher } from "../ImageSwitcher";
-import * as styles from "./styles.scss";
-import { INode } from "~/redux/types";
-import classNames from "classnames";
-import { getURL } from "~/utils/dom";
-import { UPLOAD_TYPES } from "~/redux/uploads/constants";
-import { PRESETS } from "~/constants/urls";
+import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import { ImageSwitcher } from '../ImageSwitcher';
+import * as styles from './styles.scss';
+import { INode } from '~/redux/types';
+import classNames from 'classnames';
+import { getURL } from '~/utils/dom';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
+import { PRESETS } from '~/constants/urls';
+import * as MODAL_ACTIONS from '~/redux/modal/actions';
 
 interface IProps {
   is_loading: boolean;
   node: INode;
   layout: {};
   updateLayout: () => void;
+  modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
 }
 
-const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
+const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowPhotoswipe }) => {
   const [is_animated, setIsAnimated] = useState(false);
   const [current, setCurrent] = useState(0);
   const [height, setHeight] = useState(320);
@@ -30,36 +25,35 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
 
   const images = useMemo(
     () =>
-      (node &&
-        node.files &&
-        node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) ||
-      [],
+      (node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
     [node]
   );
 
   const setRef = useCallback(index => el => (refs.current[index] = el), [refs]);
-  const onImageLoad = useCallback(
-    index => () => setLoaded({ ...loaded, [index]: true }),
-    [setLoaded, loaded]
+  const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
+    setLoaded,
+    loaded,
+  ]);
+
+  const onOpenPhotoSwipe = useCallback(
+    (index: number) => () => modalShowPhotoswipe(images, index),
+    [modalShowPhotoswipe, images]
   );
 
   useEffect(() => updateLayout(), [loaded]);
 
   useEffect(() => {
-    if (!refs || !refs.current[current] || !loaded[current])
-      return setHeight(320);
+    if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320);
 
     const el = refs.current[current];
 
-    const element_height =
-      el.getBoundingClientRect && el.getBoundingClientRect().height;
+    const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
 
     setHeight(element_height);
   }, [refs, current, loaded]);
 
   useEffect(() => {
     const timer = setTimeout(() => setIsAnimated(true), 250);
-
     return () => clearTimeout(timer);
   }, []);
 
@@ -74,21 +68,19 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
         />
 
         <div className={styles.image_container} style={{ height }}>
-          {(is_loading || !loaded[0] || !images.length) && (
-            <div className={styles.placeholder} />
-          )}
+          {(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}
 
           {images.map((file, index) => (
             <div
               className={classNames(styles.image_wrap, {
-                is_active: index === current && loaded[index]
+                is_active: index === current && loaded[index],
               })}
               ref={setRef(index)}
               key={file.id}
             >
               <img
                 className={styles.image}
-                src={getURL(file, PRESETS["1600"])}
+                src={getURL(file, PRESETS['1600'])}
                 alt=""
                 key={file.id}
                 onLoad={onImageLoad(index)}
diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 7b1f7775..9f2314fe 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -1,12 +1,4 @@
-import React, {
-  FC,
-  useMemo,
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  useLayoutEffect,
-} from 'react';
+import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { ImageSwitcher } from '../ImageSwitcher';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
@@ -17,17 +9,24 @@ import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { throttle } from 'throttle-debounce';
+import * as MODAL_ACTIONS from '~/redux/modal/actions';
 
 interface IProps {
   is_loading: boolean;
   node: INode;
   layout: {};
   updateLayout: () => void;
+  modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
 }
 
 const getX = event => (event.touches ? event.touches[0].clientX : event.clientX);
 
-const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) => {
+const NodeImageSlideBlock: FC<IProps> = ({
+  node,
+  is_loading,
+  updateLayout,
+  modalShowPhotoswipe,
+}) => {
   const [current, setCurrent] = useState(0);
   const [height, setHeight] = useState(320);
   const [max_height, setMaxHeight] = useState(960);
@@ -39,6 +38,8 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
   const [initial_x, setInitialX] = useState(0);
   const [offset, setOffset] = useState(0);
   const [is_dragging, setIsDragging] = useState(false);
+  const [drag_start_time, setDragStartTime] = useState(0);
+
   const slide = useRef<HTMLDivElement>();
   const wrap = useRef<HTMLDivElement>();
 
@@ -166,12 +167,25 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     normalizeOffset();
   }, [wrap, setMaxHeight, normalizeOffset]);
 
-  const stopDragging = useCallback(() => {
-    if (!is_dragging) return;
+  const onOpenPhotoSwipe = useCallback(() => modalShowPhotoswipe(images, current), [
+    modalShowPhotoswipe,
+    images,
+    current,
+  ]);
 
-    setIsDragging(false);
-    normalizeOffset();
-  }, [setIsDragging, is_dragging, normalizeOffset]);
+  const stopDragging = useCallback(
+    event => {
+      if (!is_dragging) return;
+
+      setIsDragging(false);
+      normalizeOffset();
+
+      if (initial_x - event.clientX < 10) {
+        onOpenPhotoSwipe();
+      }
+    },
+    [setIsDragging, is_dragging, normalizeOffset, onOpenPhotoSwipe]
+  );
 
   const startDragging = useCallback(
     event => {
diff --git a/src/constants/dialogs.ts b/src/constants/dialogs.ts
index 0fd36b11..82b52a1e 100644
--- a/src/constants/dialogs.ts
+++ b/src/constants/dialogs.ts
@@ -10,6 +10,7 @@ import { ProfileDialog } from '~/containers/dialogs/ProfileDialog';
 import { RestoreRequestDialog } from '~/containers/dialogs/RestoreRequestDialog';
 import { RestorePasswordDialog } from '~/containers/dialogs/RestorePasswordDialog';
 import { DIALOGS } from '~/redux/modal/constants';
+import { PhotoSwipe } from '~/containers/dialogs/PhotoSwipe';
 
 export const DIALOG_CONTENT = {
   [DIALOGS.EDITOR_IMAGE]: EditorDialogImage,
@@ -22,6 +23,7 @@ export const DIALOG_CONTENT = {
   [DIALOGS.PROFILE]: ProfileDialog,
   [DIALOGS.RESTORE_REQUEST]: RestoreRequestDialog,
   [DIALOGS.RESTORE_PASSWORD]: RestorePasswordDialog,
+  [DIALOGS.PHOTOSWIPE]: PhotoSwipe,
 };
 
 export const NODE_EDITOR_DIALOGS = {
diff --git a/src/containers/dialogs/PhotoSwipe/index.tsx b/src/containers/dialogs/PhotoSwipe/index.tsx
new file mode 100644
index 00000000..1a27d896
--- /dev/null
+++ b/src/containers/dialogs/PhotoSwipe/index.tsx
@@ -0,0 +1,121 @@
+import React, { FC, useRef, useEffect, useMemo, useCallback } from 'react';
+import { connect } from 'react-redux';
+
+import PhotoSwipeJs from 'photoswipe/dist/photoswipe.js';
+import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js';
+import 'photoswipe/dist/photoswipe.css';
+import 'photoswipe/dist/default-skin/default-skin.css';
+import { IState } from '~/redux/store';
+import { selectModal } from '~/redux/modal/selectors';
+import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import styles from './styles.scss';
+import classNames from 'classnames';
+
+const mapStateToProps = (state: IState) => ({
+  photoswipe: selectModal(state).photoswipe,
+});
+
+const mapDispatchToProps = {
+  modalSetShown: MODAL_ACTIONS.modalSetShown,
+};
+
+type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
+  let ref = useRef<HTMLDivElement>(null);
+
+  const items = useMemo(
+    () =>
+      photoswipe.images.map(image => ({
+        src: getURL(image, window.innerWidth < 768 ? PRESETS[900] : ''),
+      })),
+    [photoswipe.images]
+  );
+
+  const closeModal = useCallback(() => modalSetShown(false), [modalSetShown]);
+
+  useEffect(() => {
+    new Promise(async resolve => {
+      const images = await Promise.all(
+        items.map(
+          item =>
+            new Promise(resolveImage => {
+              const img = new Image();
+
+              img.onload = () => {
+                resolveImage({
+                  src: item.src,
+                  h: img.naturalHeight,
+                  w: img.naturalWidth,
+                });
+              };
+
+              img.onerror = () => {
+                resolveImage({});
+              };
+
+              img.src = item.src;
+            })
+        )
+      );
+
+      resolve(images);
+    }).then(images => {
+      const ps = new PhotoSwipeJs(ref.current, PhotoSwipeUI_Default, images, {
+        index: photoswipe.index || 0,
+        closeOnScroll: false,
+        history: false,
+      });
+
+      ps.init();
+      ps.listen('destroy', closeModal);
+      ps.listen('close', closeModal);
+    });
+  }, [items, photoswipe.index]);
+
+  return (
+    <div className="pswp" tabIndex={-1} role="dialog" aria-hidden="true" ref={ref}>
+      <div className={classNames('pswp__bg', styles.bg)} />
+      <div className="pswp__scroll-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)" />
+            <button className="pswp__button pswp__button--fs" title="Toggle fullscreen" />
+            <button className="pswp__button pswp__button--zoom" title="Zoom in/out" />
+            <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>
+  );
+};
+
+const PhotoSwipe = connect(mapStateToProps, mapDispatchToProps)(PhotoSwipeUnconnected);
+
+export { PhotoSwipe };
diff --git a/src/containers/dialogs/PhotoSwipe/styles.scss b/src/containers/dialogs/PhotoSwipe/styles.scss
new file mode 100644
index 00000000..076c7f8f
--- /dev/null
+++ b/src/containers/dialogs/PhotoSwipe/styles.scss
@@ -0,0 +1,7 @@
+.bg {
+  background-color: transparent;
+}
+
+.bar {
+  background-color: transparent !important;
+}
diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index 42ad799e..dfcc0a3e 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@@ -10,11 +10,9 @@ import { Group } from '~/components/containers/Group';
 import { Padder } from '~/components/containers/Padder';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelated } from '~/components/node/NodeRelated';
-import * as styles from './styles.scss';
 import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
 import { NODE_COMPONENTS, NODE_INLINES } from '~/redux/node/constants';
-import * as NODE_ACTIONS from '~/redux/node/actions';
 import { selectUser } from '~/redux/auth/selectors';
 import pick from 'ramda/es/pick';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
@@ -23,7 +21,12 @@ import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import { Sticky } from '~/components/containers/Sticky';
 import { Footer } from '~/components/main/Footer';
 
-const mapStateToProps = state => ({
+import * as styles from './styles.scss';
+import * as NODE_ACTIONS from '~/redux/node/actions';
+import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import { IState } from '~/redux/store';
+
+const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
   user: selectUser(state),
 });
@@ -39,6 +42,7 @@ const mapDispatchToProps = {
   nodeLockComment: NODE_ACTIONS.nodeLockComment,
   nodeEditComment: NODE_ACTIONS.nodeEditComment,
   nodeLoadMoreComments: NODE_ACTIONS.nodeLoadMoreComments,
+  modalShowPhotoswipe: MODAL_ACTIONS.modalShowPhotoswipe,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> &
@@ -71,6 +75,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
     nodeLockComment,
     nodeEditComment,
     nodeLoadMoreComments,
+    modalShowPhotoswipe,
   }) => {
     const [layout, setLayout] = useState({});
 
@@ -108,7 +113,8 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
 
     return (
       <Card className={styles.node} seamless>
-        {block && createElement(block, { node, is_loading, updateLayout, layout })}
+        {block &&
+          createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}
 
         <NodePanel
           node={pick(['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'], node)}
@@ -137,6 +143,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                         is_loading,
                         updateLayout,
                         layout,
+                        modalShowPhotoswipe,
                       })}
                     </div>
                   )}
diff --git a/src/redux/modal/actions.ts b/src/redux/modal/actions.ts
index ca0a003a..23106e43 100644
--- a/src/redux/modal/actions.ts
+++ b/src/redux/modal/actions.ts
@@ -1,5 +1,11 @@
 import { IModalState } from '~/redux/modal/reducer';
 import { MODAL_ACTIONS } from '~/redux/modal/constants';
+import { IFile } from '../types';
+
+export const modalSet = (modal: Partial<IModalState>) => ({
+  type: MODAL_ACTIONS.SET,
+  modal,
+});
 
 export const modalSetShown = (is_shown: IModalState['is_shown']) => ({
   is_shown,
@@ -15,3 +21,9 @@ export const modalShowDialog = (dialog: IModalState['dialog']) => ({
   dialog,
   type: MODAL_ACTIONS.SHOW_DIALOG,
 });
+
+export const modalShowPhotoswipe = (images: IFile[], index: number) => ({
+  type: MODAL_ACTIONS.SHOW_PHOTOSWIPE,
+  images,
+  index,
+});
diff --git a/src/redux/modal/constants.ts b/src/redux/modal/constants.ts
index b1e8e4e6..3fdedb0c 100644
--- a/src/redux/modal/constants.ts
+++ b/src/redux/modal/constants.ts
@@ -11,12 +11,17 @@ export const DIALOGS = {
   RESTORE_REQUEST: 'RESTORE_REQUEST',
   RESTORE_PASSWORD: 'RESTORE_PASSWORD',
   TEST: 'TEST',
+  PHOTOSWIPE: 'PHOTOSWIPE',
 };
 
+const prefix = 'MODAL.';
+
 export const MODAL_ACTIONS = {
-  SET_SHOWN: 'MODAL.SET_SHOWN',
-  SET_DIALOG: 'SET_DIALOG',
-  SHOW_DIALOG: 'SHOW_DIALOG',
+  SET: `${prefix}SET`,
+  SET_SHOWN: `${prefix}MODAL.SET_SHOWN`,
+  SET_DIALOG: `${prefix}SET_DIALOG`,
+  SHOW_DIALOG: `${prefix}SHOW_DIALOG`,
+  SHOW_PHOTOSWIPE: `${prefix}SHOW_PHOTOSWIPE`,
 };
 
 export interface IDialogProps {
diff --git a/src/redux/modal/handlers.ts b/src/redux/modal/handlers.ts
index 6b8ef4ca..04211378 100644
--- a/src/redux/modal/handlers.ts
+++ b/src/redux/modal/handlers.ts
@@ -1,10 +1,13 @@
 import { MODAL_ACTIONS } from '~/redux/modal/constants';
+import { modalSet } from './actions';
 
+const setState = (state, { modal }: ReturnType<typeof modalSet>) => ({ ...state, ...modal });
 const setShown = (state, { is_shown }) => ({ ...state, is_shown });
 const showDialog = (state, { dialog }) => ({ ...state, dialog, is_shown: true });
 const setDialog = (state, { dialog }) => ({ ...state, dialog });
 
 export const MODAL_HANDLERS = {
+  [MODAL_ACTIONS.SET]: setState,
   [MODAL_ACTIONS.SET_SHOWN]: setShown,
   [MODAL_ACTIONS.SHOW_DIALOG]: showDialog,
   [MODAL_ACTIONS.SET_DIALOG]: setDialog,
diff --git a/src/redux/modal/reducer.ts b/src/redux/modal/reducer.ts
index be90b850..7b9dfaee 100644
--- a/src/redux/modal/reducer.ts
+++ b/src/redux/modal/reducer.ts
@@ -1,16 +1,24 @@
 import { MODAL_HANDLERS } from '~/redux/modal/handlers';
 import { createReducer } from '~/utils/reducer';
 import { DIALOGS } from '~/redux/modal/constants';
-import { ValueOf } from '~/redux/types';
+import { ValueOf, IFile } from '~/redux/types';
 
 export interface IModalState {
   is_shown: boolean;
   dialog: ValueOf<typeof DIALOGS>;
+  photoswipe: {
+    images: IFile[];
+    index: number;
+  };
 }
 
 const INITIAL_STATE: IModalState = {
   is_shown: false,
   dialog: null,
+  photoswipe: {
+    images: [],
+    index: 0,
+  },
 };
 
 export default createReducer(INITIAL_STATE, MODAL_HANDLERS);
diff --git a/src/redux/modal/sagas.ts b/src/redux/modal/sagas.ts
index 36fa076c..fad0a3ea 100644
--- a/src/redux/modal/sagas.ts
+++ b/src/redux/modal/sagas.ts
@@ -1,6 +1,8 @@
 import { takeEvery, put } from 'redux-saga/effects';
 import { LocationChangeAction, LOCATION_CHANGE } from 'connected-react-router';
 import { authOpenProfile, authShowRestoreModal } from '../auth/actions';
+import { MODAL_ACTIONS, DIALOGS } from './constants';
+import { modalShowPhotoswipe, modalSet } from './actions';
 
 function* onPathChange({
   payload: {
@@ -18,6 +20,21 @@ function* onPathChange({
   }
 }
 
+function* onShowPhotoswipe({ images, index }: ReturnType<typeof modalShowPhotoswipe>) {
+  console.log({ images, index });
+  yield put(
+    modalSet({
+      dialog: DIALOGS.PHOTOSWIPE,
+      is_shown: true,
+      photoswipe: {
+        images,
+        index,
+      },
+    })
+  );
+}
+
 export function* modalSaga() {
   yield takeEvery(LOCATION_CHANGE, onPathChange);
+  yield takeEvery(MODAL_ACTIONS.SHOW_PHOTOSWIPE, onShowPhotoswipe);
 }
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index 46e81770..8cee2dba 100644
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@@ -13,6 +13,7 @@ import { EditorImageUploadButton } from '~/components/editors/EditorImageUploadB
 import { EditorAudioUploadButton } from '~/components/editors/EditorAudioUploadButton';
 import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverButton';
 import { Filler } from '~/components/containers/Filler';
+import { modalShowPhotoswipe } from '../modal/actions';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -77,7 +78,13 @@ export const NODE_TYPES = {
 
 type INodeComponents = Record<
   ValueOf<typeof NODE_TYPES>,
-  FC<{ node: INode; is_loading: boolean; layout: {}; updateLayout: () => void }>
+  FC<{
+    node: INode;
+    is_loading: boolean;
+    layout: {};
+    updateLayout: () => void;
+    modalShowPhotoswipe: typeof modalShowPhotoswipe;
+  }>
 >;
 
 export const NODE_COMPONENTS: INodeComponents = {
diff --git a/webpack.config.js b/webpack.config.js
index 07314a45..6cb6b064 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -122,7 +122,7 @@ module.exports = () => {
           },
         },
         {
-          test: /\.(png|svg)$/,
+          test: /\.(png|svg|gif)$/,
           use: {
             loader: 'file-loader',
             options: {},
diff --git a/yarn.lock b/yarn.lock
index 6ef53da8..4beb632e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7179,6 +7179,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+photoswipe@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-4.1.3.tgz#59f49494eeb9ddab5888d03392926a19bc197550"
+  integrity sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"