Merge branch 'master' into 15-use-cra-or-nextjs

# Conflicts:
#	src/components/node/CommentForm/index.tsx
#	src/utils/node.ts

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 {}
 
@@ -77,8 +78,8 @@ const NodeImageSlideBlock: FC<IProps> = ({
   ]);
 
   // update outside hooks
-  useEffect(() => updateLayout(), [loaded, height, images]);
-  useEffect(() => updateSizes(), [refs, current, loaded, images]);
+  useEffect(updateLayout, [loaded, height, images]);
+  useEffect(updateSizes, [refs, current, loaded, images]);
 
   useEffect(() => {
     const timeout = setTimeout(updateLayout, 300);
@@ -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);
@@ -270,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 || !loaded[current],
-          })}
-        >
-          <div>
-            <LoaderCircle size={96} />
-          </div>
-        </div>
-
         <div
           className={classNames(styles.image_container, { [styles.is_dragging]: is_dragging })}
           style={{
@@ -295,13 +264,57 @@ const NodeImageSlideBlock: FC<IProps> = ({
             images.map((file, index) => (
               <div
                 className={classNames(styles.image_wrap, {
-                  is_active: index === current && loaded[index],
+                  [styles.is_active]: index === current,
                 })}
                 ref={setRef(index)}
                 key={node.updated_at + file.id}
               >
+                <svg
+                  viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
+                  className={classNames(styles.preview, { [styles.is_loaded]: loaded[index] })}
+                  style={{
+                    maxHeight: max_height,
+                    width: '100%',
+                  }}
+                >
+                  <defs>
+                    <filter id="f1" x="0" y="0">
+                      <feBlend
+                        mode="multiply"
+                        x="0%"
+                        y="0%"
+                        width="100%"
+                        height="100%"
+                        in="SourceGraphic"
+                        in2="SourceGraphic"
+                        result="blend"
+                      />
+
+                      <feGaussianBlur
+                        stdDeviation="15 15"
+                        x="0%"
+                        y="0%"
+                        width="100%"
+                        height="100%"
+                        in="blend"
+                        edgeMode="none"
+                        result="blur2"
+                      />
+                    </filter>
+                  </defs>
+
+                  <rect fill="#242222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
+
+                  <image
+                    xlinkHref={getURL(file, PRESETS['300'])}
+                    width="100%"
+                    height="100%"
+                    filter="url(#f1)"
+                  />
+                </svg>
+
                 <img
-                  className={styles.image}
+                  className={classNames(styles.image, { [styles.is_loaded]: loaded[index] })}
                   src={getURL(file, PRESETS['1600'])}
                   alt=""
                   key={file.id}

src/components/node/NodeImageSlideBlock/styles.module.scss

@@ -41,18 +41,6 @@
     transition: none;
   }
 
-  .image {
-    max-width: 100%;
-    opacity: 1;
-    border-radius: $radius;
-    box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px,
-      transparentize($color: #000000, $amount: 0.6) 0 2px 5px;
-
-    @include tablet {
-      border-radius: 0;
-    }
-  }
-
   &.is_dragging {
     transition: none;
   }
@@ -69,7 +57,7 @@
   padding: 0 $gap / 2;
   position: relative;
 
-  &:global(.is_active) {
+  &.is_active {
     opacity: 1;
   }
 
@@ -157,7 +145,6 @@
   align-items: center;
   justify-content: center;
   background: $content_bg;
-  z-index: 0;
   pointer-events: none;
   touch-action: none;
   transition: opacity 2s;
@@ -173,3 +160,28 @@
     fill: white;
   }
 }
+
+.image, .preview {
+  max-width: 100%;
+  border-radius: $radius;
+
+  @include tablet {
+    border-radius: 0;
+  }
+}
+
+.image {
+  position: absolute;
+  opacity: 0;
+
+  &.is_loaded {
+    opacity: 1;
+    position: static;
+  }
+}
+
+.preview {
+  &.is_loaded {
+    display: none;
+  }
+}