From 71b94ce585dcaffb93058ae82a4439b09e0c059e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 5 Oct 2021 18:25:40 +0700
Subject: [PATCH] added image preloading color for swiper

---
 src/components/media/ImagePreloader/index.tsx      | 7 +++++--
 src/components/node/NodeImageSwiperBlock/index.tsx | 1 +
 src/redux/types.ts                                 | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/media/ImagePreloader/index.tsx b/src/components/media/ImagePreloader/index.tsx
index 4e241194..62986b62 100644
--- a/src/components/media/ImagePreloader/index.tsx
+++ b/src/components/media/ImagePreloader/index.tsx
@@ -7,9 +7,11 @@ import { IFile } from '~/redux/types';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { Icon } from '~/components/input/Icon';
 import { useResizeHandler } from '~/utils/hooks/useResizeHandler';
+import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
 
 interface IProps {
   file: IFile;
+  color?: string;
   onLoad?: () => void;
   onClick?: MouseEventHandler;
   className?: string;
@@ -18,7 +20,7 @@ interface IProps {
 const DEFAULT_WIDTH = 1920;
 const DEFAULT_HEIGHT = 1020;
 
-const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
+const ImagePreloader: FC<IProps> = ({ file, color, onLoad, onClick, className }) => {
   const [maxHeight, setMaxHeight] = useState(window.innerHeight - 140);
   const [loaded, setLoaded] = useState(false);
   const [hasError, setHasError] = useState(false);
@@ -48,6 +50,7 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
   useResizeHandler(onResize);
 
   const estimatedWidth = (width * maxHeight) / height;
+  const fill = color && color !== DEFAULT_DOMINANT_COLOR ? color : '#222222';
 
   return (
     <>
@@ -67,7 +70,7 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
         </defs>
 
         <g filter="url(#f1)">
-          <rect fill="#222222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
+          <rect fill={fill} width="100%" height="100%" stroke="none" rx="8" ry="8" />
 
           {!hasError && (
             <image
diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
index 0463f00f..4fb4580e 100644
--- a/src/components/node/NodeImageSwiperBlock/index.tsx
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -97,6 +97,7 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
               onLoad={updateSwiper}
               onClick={() => onOpenPhotoSwipe(i)}
               className={styles.image}
+              color={file?.metadata?.dominant_color}
             />
           </SwiperSlide>
         ))}
diff --git a/src/redux/types.ts b/src/redux/types.ts
index 589578b2..cc99265b 100644
--- a/src/redux/types.ts
+++ b/src/redux/types.ts
@@ -83,6 +83,7 @@ export interface IFile {
     duration?: number;
     width?: number;
     height?: number;
+    dominant_color?: string;
   };
 
   createdAt?: string;