From c58bf1a3794042cea3cc6256c4bf1646b429bf8f Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 26 Oct 2020 12:18:43 +0700
Subject: [PATCH 1/7] made simple full-width image container

---
 src/components/node/NodeImageTinySlider/index.tsx     |  8 ++++++++
 .../node/NodeImageTinySlider/styles.module.scss       | 11 +++++++++++
 src/containers/App.tsx                                |  1 +
 src/redux/node/constants.ts                           |  4 +++-
 4 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/components/node/NodeImageTinySlider/index.tsx
 create mode 100644 src/components/node/NodeImageTinySlider/styles.module.scss

diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx
new file mode 100644
index 00000000..a906c1ed
--- /dev/null
+++ b/src/components/node/NodeImageTinySlider/index.tsx
@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+
+interface IProps {}
+
+const NodeImageTinySlider: FC<IProps> = () => <div className={styles.wrap}>Slider :3</div>;
+
+export { NodeImageTinySlider };
diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss
new file mode 100644
index 00000000..183dc118
--- /dev/null
+++ b/src/components/node/NodeImageTinySlider/styles.module.scss
@@ -0,0 +1,11 @@
+.wrap {
+  //padding-bottom: $radius;
+  background-color: $red;
+
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index d90a8e15..70677195 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -25,6 +25,7 @@ const Component: FC<IProps> = ({ modal: { is_shown } }) => {
       <div>
         <BlurWrapper is_blurred={is_shown}>
           <PageCover />
+
           <MainLayout>
             <Modal />
             <Sprites />
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index 76d421b0..edea89bd 100644
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@@ -16,6 +16,7 @@ import { Filler } from '~/components/containers/Filler';
 import { modalShowPhotoswipe } from '../modal/actions';
 import { IEditorComponentProps } from '~/redux/node/types';
 import { EditorFiller } from '~/components/editors/EditorFiller';
+import { NodeImageTinySlider } from '~/components/node/NodeImageTinySlider';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -90,7 +91,8 @@ export type INodeComponentProps = {
 export type INodeComponents = Record<ValueOf<typeof NODE_TYPES>, FC<INodeComponentProps>>;
 
 export const NODE_HEADS: INodeComponents = {
-  [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
+  // [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
+  [NODE_TYPES.IMAGE]: NodeImageTinySlider,
 };
 
 export const NODE_COMPONENTS: INodeComponents = {

From fefec524db4e67e2ee005652f1e43d4905e6031d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 26 Oct 2020 17:48:50 +0700
Subject: [PATCH 2/7] made simple full-width image container

---
 .../node/NodeImageTinySlider/index.tsx        | 41 ++++++++++++++++++-
 .../NodeImageTinySlider/styles.module.scss    | 15 ++++++-
 src/styles/global.scss                        |  2 +
 3 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx
index a906c1ed..6ca0e61a 100644
--- a/src/components/node/NodeImageTinySlider/index.tsx
+++ b/src/components/node/NodeImageTinySlider/index.tsx
@@ -1,8 +1,45 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styles from './styles.module.scss';
 
 interface IProps {}
 
-const NodeImageTinySlider: FC<IProps> = () => <div className={styles.wrap}>Slider :3</div>;
+const NodeImageTinySlider: FC<IProps> = () => {
+  const sample = useRef<HTMLDivElement>(null);
+  const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth);
+
+  const style = useMemo(() => {
+    if (!sample.current) return { display: 'none' };
+
+    const { width } = sample.current.getBoundingClientRect();
+    const { clientWidth } = document.documentElement;
+
+    return {
+      // width: clientWidth,
+      // transform: `translate(-${(clientWidth - width) / 2}px, 0)`,
+    };
+  }, [sample.current, clientWidth]);
+
+  const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []);
+
+  useEffect(() => {
+    window.addEventListener('resize', onResize);
+    document.body.addEventListener('overflow', onResize);
+    document.body.addEventListener('overflowchanged', console.log);
+
+    document.body.addEventListener('resize', console.log);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+      window.removeEventListener('overflow', onResize);
+    };
+  }, []);
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.slider} style={style} />
+      <div className={styles.sample} ref={sample} />
+    </div>
+  );
+};
 
 export { NodeImageTinySlider };
diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss
index 183dc118..f96e7258 100644
--- a/src/components/node/NodeImageTinySlider/styles.module.scss
+++ b/src/components/node/NodeImageTinySlider/styles.module.scss
@@ -1,11 +1,22 @@
 .wrap {
-  //padding-bottom: $radius;
-  background-color: $red;
+  background: $red;
+}
 
+.sample {
+  width: 100%;
+  display: block;
+  height: 24px;
+  background: green;
+}
+
+.slider {
+  background: blue;
+  height: 20px;
   width: 100vw;
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
+  box-sizing: border-box;
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 961fc74d..b856a237 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -2,6 +2,8 @@
 
 html {
   min-height: 100vh;
+  box-sizing: border-box;
+  overflow: auto;
 }
 
 body {

From 531bd3626aba09339c17c03d42f66ddde43a8396 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 26 Oct 2020 19:14:41 +0700
Subject: [PATCH 3/7] added working tiny-slider!

---
 package.json                                  |  2 +
 src/components/containers/FullWidth/index.tsx | 46 +++++++++++++
 .../containers/FullWidth/styles.module.scss   | 10 +++
 .../node/NodeImageTinySlider/index.tsx        | 69 +++++++++----------
 .../NodeImageTinySlider/styles.module.scss    | 23 +------
 src/utils/node.ts                             | 12 +++-
 yarn.lock                                     | 17 +++++
 7 files changed, 122 insertions(+), 57 deletions(-)
 create mode 100644 src/components/containers/FullWidth/index.tsx
 create mode 100644 src/components/containers/FullWidth/styles.module.scss

diff --git a/package.json b/package.json
index 7332d17b..1767cc16 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,8 @@
     "scrypt": "^6.0.3",
     "sticky-sidebar": "^3.3.1",
     "throttle-debounce": "^2.1.0",
+    "tiny-slider-react": "^0.5.3",
+    "tiny-slider": "2.9.2",
     "tinycolor": "^0.0.1",
     "tslint": "^5.20.0",
     "tslint-config-airbnb": "^5.11.2",
diff --git a/src/components/containers/FullWidth/index.tsx b/src/components/containers/FullWidth/index.tsx
new file mode 100644
index 00000000..f2f8a603
--- /dev/null
+++ b/src/components/containers/FullWidth/index.tsx
@@ -0,0 +1,46 @@
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import styles from './styles.module.scss';
+import ResizeSensor from 'resize-sensor';
+
+const FullWidth: FC = ({ children }) => {
+  const sample = useRef<HTMLDivElement>(null);
+  const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth);
+
+  const style = useMemo(() => {
+    if (!sample.current) return { display: 'none' };
+
+    const { width } = sample.current.getBoundingClientRect();
+    const { clientWidth } = document.documentElement;
+
+    return {
+      width: clientWidth,
+      transform: `translate(-${(clientWidth - width) / 2}px, 0)`,
+    };
+  }, [sample.current, clientWidth]);
+
+  const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []);
+
+  useEffect(() => {
+    if (!sample.current) return;
+
+    window.addEventListener('resize', onResize);
+    new ResizeSensor(document.body, onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+      ResizeSensor.detach(document.body, onResize);
+    };
+  }, []);
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.slider} style={style}>
+        {children}
+      </div>
+
+      <div className={styles.sample} ref={sample} />
+    </div>
+  );
+};
+
+export { FullWidth };
diff --git a/src/components/containers/FullWidth/styles.module.scss b/src/components/containers/FullWidth/styles.module.scss
new file mode 100644
index 00000000..c1541aec
--- /dev/null
+++ b/src/components/containers/FullWidth/styles.module.scss
@@ -0,0 +1,10 @@
+.sample {
+  width: 100%;
+  display: block;
+  background: green;
+  height: 0;
+}
+
+.slider {
+  max-height: calc(100vh - 125px);
+}
diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx
index 6ca0e61a..070339bc 100644
--- a/src/components/node/NodeImageTinySlider/index.tsx
+++ b/src/components/node/NodeImageTinySlider/index.tsx
@@ -1,44 +1,41 @@
-import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FC } from 'react';
+import { INodeComponentProps } from '~/redux/node/constants';
+import { FullWidth } from '~/components/containers/FullWidth';
+import { useNodeImages } from '~/utils/node';
+import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import TinySlider from 'tiny-slider-react';
 import styles from './styles.module.scss';
 
-interface IProps {}
+const settings = {
+  nav: false,
+  buttons: false,
+  mouseDrag: true,
+  gutter: 10,
+  center: true,
+  lazyload: true,
+  items: 1,
+  edgePadding: 150,
+  loop: true,
+  arrowKeys: false,
+  prevButton: false,
+  nextButton: false,
+  swipeAngle: 45,
+};
 
-const NodeImageTinySlider: FC<IProps> = () => {
-  const sample = useRef<HTMLDivElement>(null);
-  const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth);
-
-  const style = useMemo(() => {
-    if (!sample.current) return { display: 'none' };
-
-    const { width } = sample.current.getBoundingClientRect();
-    const { clientWidth } = document.documentElement;
-
-    return {
-      // width: clientWidth,
-      // transform: `translate(-${(clientWidth - width) / 2}px, 0)`,
-    };
-  }, [sample.current, clientWidth]);
-
-  const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []);
-
-  useEffect(() => {
-    window.addEventListener('resize', onResize);
-    document.body.addEventListener('overflow', onResize);
-    document.body.addEventListener('overflowchanged', console.log);
-
-    document.body.addEventListener('resize', console.log);
-
-    return () => {
-      window.removeEventListener('resize', onResize);
-      window.removeEventListener('overflow', onResize);
-    };
-  }, []);
+const NodeImageTinySlider: FC<INodeComponentProps> = ({ node }) => {
+  const images = useNodeImages(node);
 
   return (
-    <div className={styles.wrap}>
-      <div className={styles.slider} style={style} />
-      <div className={styles.sample} ref={sample} />
-    </div>
+    <FullWidth>
+      <div className={styles.slider}>
+        <TinySlider settings={settings}>
+          {images.map(image => (
+            <img src={getURL(image, PRESETS['1600'])} key={image.url} />
+          ))}
+        </TinySlider>
+      </div>
+    </FullWidth>
   );
 };
 
diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss
index f96e7258..98fe700e 100644
--- a/src/components/node/NodeImageTinySlider/styles.module.scss
+++ b/src/components/node/NodeImageTinySlider/styles.module.scss
@@ -1,22 +1,5 @@
-.wrap {
-  background: $red;
-}
-
-.sample {
-  width: 100%;
-  display: block;
-  height: 24px;
-  background: green;
-}
-
 .slider {
-  background: blue;
-  height: 20px;
-  width: 100vw;
-  position: relative;
-  left: 50%;
-  right: 50%;
-  margin-left: -50vw;
-  margin-right: -50vw;
-  box-sizing: border-box;
+  img {
+    max-height: calc(100vh - 140px);
+  }
 }
diff --git a/src/utils/node.ts b/src/utils/node.ts
index 286b3fe2..8ccd2946 100644
--- a/src/utils/node.ts
+++ b/src/utils/node.ts
@@ -1,8 +1,10 @@
 import { USER_ROLES } from '~/redux/auth/constants';
-import { INode, IComment, ICommentGroup } from '~/redux/types';
+import { INode, IComment, ICommentGroup, IFile } from '~/redux/types';
 import { IUser } from '~/redux/auth/types';
 import path from 'ramda/es/path';
 import { NODE_TYPES } from '~/redux/node/constants';
+import { useMemo } from 'react';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 
 export const canEditNode = (node: Partial<INode>, user: Partial<IUser>): boolean =>
   path(['role'], user) === USER_ROLES.ADMIN ||
@@ -19,3 +21,11 @@ export const canStarNode = (node: Partial<INode>, user: Partial<IUser>): boolean
   node.type === NODE_TYPES.IMAGE &&
   path(['role'], user) &&
   path(['role'], user) === USER_ROLES.ADMIN;
+
+export const useNodeImages = (node: INode): IFile[] => {
+  return useMemo(
+    () =>
+      (node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
+    [node.files]
+  );
+};
diff --git a/yarn.lock b/yarn.lock
index 7c74c586..6686f3f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9564,6 +9564,23 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
   integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==
 
+tiny-slider-react@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/tiny-slider-react/-/tiny-slider-react-0.5.3.tgz#0e96f6b9a6cdafaac7b1bc29cfc9cb9a356760f5"
+  integrity sha512-miTPlaWgwfg2U7WBDxdR40LFhAncIS2fF03tuNE5nqVIF5tuvjVFHGz1V0LSJWoNeOtXgoWs94JB2/hdxrCWqA==
+  dependencies:
+    tiny-slider "^2.9.2"
+
+tiny-slider@2.9.2:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/tiny-slider/-/tiny-slider-2.9.2.tgz#dcd70ac79054a4d170bc2cfde3efbdaa2cc0c75f"
+  integrity sha512-2sgEJpVbpIbbgiYM/xGa0HMvvtUZSJvXeZJmLWBux6VgFqh/MQG8LXBR59ZLYpa/1OtwM0E6/ic55oLOJN9Mnw==
+
+tiny-slider@^2.9.2:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/tiny-slider/-/tiny-slider-2.9.3.tgz#94d8158f704f3192fef1634c0ae6779fb14ea04e"
+  integrity sha512-KZY45m+t3fb3Kwlqsic0PIos1lgTNXBEC5N/AhI3aNEcryrd0nXohZMbVPMkcNYdbLjY1IUJAXWYAO6/RGJnKw==
+
 tiny-warning@^1.0.0, tiny-warning@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"

From 5da9a0547de2fd7467971741766b9a98dfd4ee2d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 27 Oct 2020 11:42:20 +0700
Subject: [PATCH 4/7] fixed tiny slider on bigger resolutions

---
 .../node/NodeImageTinySlider/index.tsx        | 14 ++++++++------
 .../NodeImageTinySlider/styles.module.scss    | 19 +++++++++++++++++--
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx
index 070339bc..8c9ce2e3 100644
--- a/src/components/node/NodeImageTinySlider/index.tsx
+++ b/src/components/node/NodeImageTinySlider/index.tsx
@@ -6,20 +6,20 @@ import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import TinySlider from 'tiny-slider-react';
 import styles from './styles.module.scss';
+import { TinySliderSettings } from 'tiny-slider';
 
-const settings = {
+const settings: TinySliderSettings & { center: boolean } = {
   nav: false,
-  buttons: false,
   mouseDrag: true,
   gutter: 10,
   center: true,
   lazyload: true,
   items: 1,
   edgePadding: 150,
-  loop: true,
+  loop: false,
   arrowKeys: false,
-  prevButton: false,
-  nextButton: false,
+  // prevButton: false,
+  // nextButton: false,
   swipeAngle: 45,
 };
 
@@ -31,7 +31,9 @@ const NodeImageTinySlider: FC<INodeComponentProps> = ({ node }) => {
       <div className={styles.slider}>
         <TinySlider settings={settings}>
           {images.map(image => (
-            <img src={getURL(image, PRESETS['1600'])} key={image.url} />
+            <div className={styles.slide}>
+              <img src={getURL(image, PRESETS['1600'])} key={image.url} />
+            </div>
           ))}
         </TinySlider>
       </div>
diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss
index 98fe700e..980681f2 100644
--- a/src/components/node/NodeImageTinySlider/styles.module.scss
+++ b/src/components/node/NodeImageTinySlider/styles.module.scss
@@ -1,5 +1,20 @@
 .slider {
-  img {
-    max-height: calc(100vh - 140px);
+  padding-bottom: 15px;
+
+  :global(.tns-controls) {
+    display: none;
+  }
+}
+
+.slide {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+
+  img {
+    max-height: calc(100vh - 150px);
+    max-width: 100%;
+    border-radius: $radius;
   }
 }

From 3808f2f5167fd00474fb5bf61021a814237562fe Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 29 Oct 2020 20:14:24 +0700
Subject: [PATCH 5/7] made simple tiny slider

---
 src/components/containers/FullWidth/index.tsx | 10 ++-
 .../containers/FullWidth/styles.module.scss   |  2 +-
 .../node/NodeImageSlideBlock/index.tsx        | 25 +------
 .../node/NodeImageTinySlider/index.tsx        | 65 ++++++++++++++++---
 .../NodeImageTinySlider/styles.module.scss    |  6 +-
 src/utils/{hooks.ts => hooks/index.ts}        |  0
 src/utils/hooks/keys.ts                       | 23 +++++++
 7 files changed, 95 insertions(+), 36 deletions(-)
 rename src/utils/{hooks.ts => hooks/index.ts} (100%)
 create mode 100644 src/utils/hooks/keys.ts

diff --git a/src/components/containers/FullWidth/index.tsx b/src/components/containers/FullWidth/index.tsx
index f2f8a603..3c3eefed 100644
--- a/src/components/containers/FullWidth/index.tsx
+++ b/src/components/containers/FullWidth/index.tsx
@@ -2,7 +2,11 @@ import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 're
 import styles from './styles.module.scss';
 import ResizeSensor from 'resize-sensor';
 
-const FullWidth: FC = ({ children }) => {
+interface IProps {
+  onRefresh?: (width: number) => void;
+}
+
+const FullWidth: FC<IProps> = ({ children, onRefresh }) => {
   const sample = useRef<HTMLDivElement>(null);
   const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth);
 
@@ -12,11 +16,13 @@ const FullWidth: FC = ({ children }) => {
     const { width } = sample.current.getBoundingClientRect();
     const { clientWidth } = document.documentElement;
 
+    onRefresh(clientWidth);
+
     return {
       width: clientWidth,
       transform: `translate(-${(clientWidth - width) / 2}px, 0)`,
     };
-  }, [sample.current, clientWidth]);
+  }, [sample.current, clientWidth, onRefresh]);
 
   const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []);
 
diff --git a/src/components/containers/FullWidth/styles.module.scss b/src/components/containers/FullWidth/styles.module.scss
index c1541aec..f318d3c4 100644
--- a/src/components/containers/FullWidth/styles.module.scss
+++ b/src/components/containers/FullWidth/styles.module.scss
@@ -6,5 +6,5 @@
 }
 
 .slider {
-  max-height: calc(100vh - 125px);
+  display: block;
 }
diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 3f67b153..27f7b42f 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -8,6 +8,7 @@ import { PRESETS } from '~/constants/urls';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { throttle } from 'throttle-debounce';
 import { Icon } from '~/components/input/Icon';
+import { useArrows } from '~/utils/hooks/keys';
 
 interface IProps extends INodeComponentProps {}
 
@@ -239,29 +240,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
     images,
   ]);
 
-  const onKeyDown = useCallback(
-    event => {
-      if (
-        (event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) ||
-        is_modal_shown
-      )
-        return;
-
-      switch (event.key) {
-        case 'ArrowLeft':
-          return onPrev();
-        case 'ArrowRight':
-          return onNext();
-      }
-    },
-    [onNext, onPrev, is_modal_shown]
-  );
-
-  useEffect(() => {
-    window.addEventListener('keydown', onKeyDown);
-
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [onKeyDown]);
+  useArrows(onNext, onPrev, is_modal_shown);
 
   useEffect(() => {
     setOffset(0);
diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx
index 8c9ce2e3..a84d9b50 100644
--- a/src/components/node/NodeImageTinySlider/index.tsx
+++ b/src/components/node/NodeImageTinySlider/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { INodeComponentProps } from '~/redux/node/constants';
 import { FullWidth } from '~/components/containers/FullWidth';
 import { useNodeImages } from '~/utils/node';
@@ -6,7 +6,8 @@ import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import TinySlider from 'tiny-slider-react';
 import styles from './styles.module.scss';
-import { TinySliderSettings } from 'tiny-slider';
+import { TinySliderInstance, TinySliderSettings } from 'tiny-slider';
+import { useArrows } from '~/utils/hooks/keys';
 
 const settings: TinySliderSettings & { center: boolean } = {
   nav: false,
@@ -20,19 +21,67 @@ const settings: TinySliderSettings & { center: boolean } = {
   arrowKeys: false,
   // prevButton: false,
   // nextButton: false,
+  autoHeight: true,
   swipeAngle: 45,
+  responsive: {
+    0: {
+      edgePadding: 10,
+      gutter: 40,
+    },
+    768: {
+      edgePadding: 50,
+    },
+    1024: {
+      edgePadding: 150,
+    },
+  },
 };
 
 const NodeImageTinySlider: FC<INodeComponentProps> = ({ node }) => {
+  const ref = useRef(null);
+  const slides = useRef<HTMLDivElement[]>([]);
   const images = useNodeImages(node);
+  const [current, setCurrent] = useState(0);
+  const [height, setHeight] = useState(images[0]?.metadata?.height || 0);
+
+  const onResize = useCallback(() => {
+    if (!ref.current) return;
+    ref.current.slider.refresh();
+    const el = slides.current[current];
+    if (!el) return;
+    const { height } = el.getBoundingClientRect();
+    setHeight(height);
+  }, [ref.current, slides.current, current]);
+
+  const onIndexChanged = useCallback(({ index }) => {
+    setCurrent(index || 0);
+  }, []);
+
+  useEffect(() => {
+    setCurrent(0);
+  }, [node.id]);
+
+  useEffect(onResize, [slides, current]);
+
+  const onNext = useCallback(() => {
+    if (!ref.current || images.length <= 1 || current === images.length - 1) return;
+    ref.current.slider.goTo(current + 1);
+  }, [ref.current, current, images]);
+
+  const onPrev = useCallback(() => {
+    if (!ref.current || images.length <= 1 || current === 0) return;
+    ref.current.slider.goTo(current - 1);
+  }, [ref.current, current, images]);
+
+  useArrows(onNext, onPrev, false);
 
   return (
-    <FullWidth>
-      <div className={styles.slider}>
-        <TinySlider settings={settings}>
-          {images.map(image => (
-            <div className={styles.slide}>
-              <img src={getURL(image, PRESETS['1600'])} key={image.url} />
+    <FullWidth onRefresh={onResize}>
+      <div className={styles.slider} style={{ height }}>
+        <TinySlider settings={settings} ref={ref} onTransitionEnd={onIndexChanged}>
+          {images.map((image, i) => (
+            <div className={styles.slide} key={image.id} ref={el => (slides.current[i] = el)}>
+              <img src={getURL(image, PRESETS['1600'])} key={image.url} onLoad={onResize} />
             </div>
           ))}
         </TinySlider>
diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss
index 980681f2..ec978ab3 100644
--- a/src/components/node/NodeImageTinySlider/styles.module.scss
+++ b/src/components/node/NodeImageTinySlider/styles.module.scss
@@ -1,5 +1,7 @@
 .slider {
   padding-bottom: 15px;
+  overflow: hidden;
+  transition: height 0.25s;
 
   :global(.tns-controls) {
     display: none;
@@ -8,12 +10,12 @@
 
 .slide {
   align-items: center;
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   text-align: center;
 
   img {
-    max-height: calc(100vh - 150px);
+    max-height: calc(100vh - 140px);
     max-width: 100%;
     border-radius: $radius;
   }
diff --git a/src/utils/hooks.ts b/src/utils/hooks/index.ts
similarity index 100%
rename from src/utils/hooks.ts
rename to src/utils/hooks/index.ts
diff --git a/src/utils/hooks/keys.ts b/src/utils/hooks/keys.ts
new file mode 100644
index 00000000..93432d00
--- /dev/null
+++ b/src/utils/hooks/keys.ts
@@ -0,0 +1,23 @@
+import { useCallback, useEffect } from 'react';
+
+export const useArrows = (onNext: () => void, onPrev: () => void, locked) => {
+  const onKeyDown = useCallback(
+    event => {
+      if ((event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) || locked)
+        return;
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          return onPrev();
+        case 'ArrowRight':
+          return onNext();
+      }
+    },
+    [onNext, onPrev, locked]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onKeyDown]);
+};

From 3423123d35e43fa67e22d9c8eb96607fe5427b2f Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 6 Nov 2020 22:22:24 +0700
Subject: [PATCH 6/7] removed tiny slider

---
 src/redux/node/constants.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index 9c193f05..9d3da6af 100644
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@@ -15,7 +15,6 @@ import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverB
 import { modalShowPhotoswipe } from '../modal/actions';
 import { IEditorComponentProps } from '~/redux/node/types';
 import { EditorFiller } from '~/components/editors/EditorFiller';
-import { NodeImageTinySlider } from '~/components/node/NodeImageTinySlider';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -90,8 +89,7 @@ export type INodeComponentProps = {
 export type INodeComponents = Record<ValueOf<typeof NODE_TYPES>, FC<INodeComponentProps>>;
 
 export const NODE_HEADS: INodeComponents = {
-  // [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
-  [NODE_TYPES.IMAGE]: NodeImageTinySlider,
+  [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
 };
 
 export const NODE_COMPONENTS: INodeComponents = {

From ce5ec91571e63f4799431f9ff9f9a38e432c6ff6 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 6 Nov 2020 22:28:44 +0700
Subject: [PATCH 7/7] removed placeholder for images

---
 .../node/NodeImageSlideBlock/index.tsx        | 10 --
 .../node/NodeImageTinySlider/index.tsx        | 93 -------------------
 .../NodeImageTinySlider/styles.module.scss    | 22 -----
 3 files changed, 125 deletions(-)
 delete mode 100644 src/components/node/NodeImageTinySlider/index.tsx
 delete mode 100644 src/components/node/NodeImageTinySlider/styles.module.scss

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 91e465f2..97ee96cd 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -249,16 +249,6 @@ const NodeImageSlideBlock: FC<IProps> = ({
   return (
     <div className={styles.wrap}>
       <div className={classNames(styles.cutter, { [styles.is_loading]: is_loading })} ref={wrap}>
-        <div
-          className={classNames(styles.placeholder, {
-            [styles.is_loading]: is_loading,
-          })}
-        >
-          <div>
-            <LoaderCircle size={96} />
-          </div>
-        </div>
-
         <div
           className={classNames(styles.image_container, { [styles.is_dragging]: is_dragging })}
           style={{
diff --git a/src/components/node/NodeImageTinySlider/index.tsx b/src/components/node/NodeImageTinySlider/index.tsx
deleted file mode 100644
index a84d9b50..00000000
--- a/src/components/node/NodeImageTinySlider/index.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { FC, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { INodeComponentProps } from '~/redux/node/constants';
-import { FullWidth } from '~/components/containers/FullWidth';
-import { useNodeImages } from '~/utils/node';
-import { getURL } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
-import TinySlider from 'tiny-slider-react';
-import styles from './styles.module.scss';
-import { TinySliderInstance, TinySliderSettings } from 'tiny-slider';
-import { useArrows } from '~/utils/hooks/keys';
-
-const settings: TinySliderSettings & { center: boolean } = {
-  nav: false,
-  mouseDrag: true,
-  gutter: 10,
-  center: true,
-  lazyload: true,
-  items: 1,
-  edgePadding: 150,
-  loop: false,
-  arrowKeys: false,
-  // prevButton: false,
-  // nextButton: false,
-  autoHeight: true,
-  swipeAngle: 45,
-  responsive: {
-    0: {
-      edgePadding: 10,
-      gutter: 40,
-    },
-    768: {
-      edgePadding: 50,
-    },
-    1024: {
-      edgePadding: 150,
-    },
-  },
-};
-
-const NodeImageTinySlider: FC<INodeComponentProps> = ({ node }) => {
-  const ref = useRef(null);
-  const slides = useRef<HTMLDivElement[]>([]);
-  const images = useNodeImages(node);
-  const [current, setCurrent] = useState(0);
-  const [height, setHeight] = useState(images[0]?.metadata?.height || 0);
-
-  const onResize = useCallback(() => {
-    if (!ref.current) return;
-    ref.current.slider.refresh();
-    const el = slides.current[current];
-    if (!el) return;
-    const { height } = el.getBoundingClientRect();
-    setHeight(height);
-  }, [ref.current, slides.current, current]);
-
-  const onIndexChanged = useCallback(({ index }) => {
-    setCurrent(index || 0);
-  }, []);
-
-  useEffect(() => {
-    setCurrent(0);
-  }, [node.id]);
-
-  useEffect(onResize, [slides, current]);
-
-  const onNext = useCallback(() => {
-    if (!ref.current || images.length <= 1 || current === images.length - 1) return;
-    ref.current.slider.goTo(current + 1);
-  }, [ref.current, current, images]);
-
-  const onPrev = useCallback(() => {
-    if (!ref.current || images.length <= 1 || current === 0) return;
-    ref.current.slider.goTo(current - 1);
-  }, [ref.current, current, images]);
-
-  useArrows(onNext, onPrev, false);
-
-  return (
-    <FullWidth onRefresh={onResize}>
-      <div className={styles.slider} style={{ height }}>
-        <TinySlider settings={settings} ref={ref} onTransitionEnd={onIndexChanged}>
-          {images.map((image, i) => (
-            <div className={styles.slide} key={image.id} ref={el => (slides.current[i] = el)}>
-              <img src={getURL(image, PRESETS['1600'])} key={image.url} onLoad={onResize} />
-            </div>
-          ))}
-        </TinySlider>
-      </div>
-    </FullWidth>
-  );
-};
-
-export { NodeImageTinySlider };
diff --git a/src/components/node/NodeImageTinySlider/styles.module.scss b/src/components/node/NodeImageTinySlider/styles.module.scss
deleted file mode 100644
index ec978ab3..00000000
--- a/src/components/node/NodeImageTinySlider/styles.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.slider {
-  padding-bottom: 15px;
-  overflow: hidden;
-  transition: height 0.25s;
-
-  :global(.tns-controls) {
-    display: none;
-  }
-}
-
-.slide {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  text-align: center;
-
-  img {
-    max-height: calc(100vh - 140px);
-    max-width: 100%;
-    border-radius: $radius;
-  }
-}