ignoring image modal key sliding when modal is shown

src/components/node/NodeAudioBlock/index.tsx

@@ -3,10 +3,9 @@ import { INode } from '~/redux/types';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import * as styles from './styles.scss';
+import { INodeComponentProps } from '~/redux/node/constants';
 
-interface IProps {
-  node: INode;
-}
+interface IProps extends INodeComponentProps {}
 
 const NodeAudioBlock: FC<IProps> = ({ node }) => {
   const audios = useMemo(

src/components/node/NodeAudioImageBlock/index.tsx

@@ -5,10 +5,9 @@ import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import path from 'ramda/es/path';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
+import { INodeComponentProps } from '~/redux/node/constants';
 
-interface IProps {
-  node: INode;
-}
+interface IProps extends INodeComponentProps {}
 
 const NodeAudioImageBlock: FC<IProps> = ({ node }) => {
   const images = useMemo(

src/components/node/NodeImageSlideBlock/index.tsx

@@ -1,24 +1,15 @@
-import React, { FC, useMemo, useState, useEffect, useRef, useCallback, KeyboardEvent } from 'react';
-import { ImageSwitcher } from '../ImageSwitcher';
+import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import * as styles from './styles.scss';
-import { INode } from '~/redux/types';
 import classNames from 'classnames';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
-import { NODE_SETTINGS } from '~/redux/node/constants';
+import { INodeComponentProps } from '~/redux/node/constants';
 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';
 import { Icon } from '~/components/input/Icon';
 
-interface IProps {
-  is_loading: boolean;
-  node: INode;
-  layout: {};
-  updateLayout: () => void;
-  modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
-}
+interface IProps extends INodeComponentProps {}
 
 const getX = event =>
   (event.touches && event.touches.length) || (event.changedTouches && event.changedTouches.length)
@@ -28,6 +19,7 @@ const getX = event =>
 const NodeImageSlideBlock: FC<IProps> = ({
   node,
   is_loading,
+  is_modal_shown,
   updateLayout,
   modalShowPhotoswipe,
 }) => {
@@ -250,7 +242,11 @@ const NodeImageSlideBlock: FC<IProps> = ({
 
   const onKeyDown = useCallback(
     event => {
-      if (event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) return;
+      if (
+        (event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) ||
+        is_modal_shown
+      )
+        return;
 
       switch (event.key) {
         case 'ArrowLeft':
@@ -259,7 +255,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
           return onNext();
       }
     },
-    [onNext, onPrev]
+    [onNext, onPrev, is_modal_shown]
   );
 
   useEffect(() => {

src/components/node/NodeTextBlock/index.tsx

@@ -3,10 +3,9 @@ import { INode } from '~/redux/types';
 import path from 'ramda/es/path';
 import { formatTextParagraphs } from '~/utils/dom';
 import * as styles from './styles.scss';
+import { INodeComponentProps } from '~/redux/node/constants';
 
-interface IProps {
-  node: INode;
-}
+interface IProps extends INodeComponentProps {}
 
 const NodeTextBlock: FC<IProps> = ({ node }) => (
   <div

src/components/node/NodeVideoBlock/index.tsx

@@ -1,11 +1,9 @@
 import React, { FC, useMemo } from 'react';
-import { INode } from '~/redux/types';
 import * as styles from './styles.scss';
 import path from 'ramda/es/path';
+import { INodeComponentProps } from '~/redux/node/constants';
 
-interface IProps {
-  node: INode;
-}
+interface IProps extends INodeComponentProps {}
 
 const NodeVideoBlock: FC<IProps> = ({ node }) => {
   const video = useMemo(() => {