From c5b94f62db83a933ad866fbc9fdd6ead93752c58 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Mon, 22 Feb 2021 20:30:36 +0200
Subject: [PATCH] Move const vars to props

---
 src/components/CrossFadeImages.tsx      | 15 ++++++---------
 src/views/ActualPage/ActualPageView.tsx |  6 +++---
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/CrossFadeImages.tsx b/src/components/CrossFadeImages.tsx
index 5c192f7..1ee0d7c 100644
--- a/src/components/CrossFadeImages.tsx
+++ b/src/components/CrossFadeImages.tsx
@@ -4,14 +4,10 @@ import styled, { keyframes, Keyframes } from "styled-components";
 
 interface CrossFadeImagesProps {
   images: string[];
-  width: number | string;
-  height: number | string;
+  presentationTime: number;
+  fadeTime: number;
 }
 
-const SINGLE_IMAGE_PRESENTATION_TIME = 5;
-const SINGLE_CROSSFADE_TIME = 1;
-const SINGLE_IMAGE_TIME = SINGLE_IMAGE_PRESENTATION_TIME + SINGLE_CROSSFADE_TIME;
-
 const AnimatedImage = styled(Image)<{ layout: "fill"; $delay: number }>`
   animation-delay: ${(p) => p.$delay}s;
 `;
@@ -33,22 +29,23 @@ const Container = styled.div<{ $animation: Keyframes; $duration: number; }>`
 `;
 
 const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
-  images,
+  images, presentationTime, fadeTime,
 }) => {
   const len = images.length;
+  const SINGLE_IMAGE_TIME = presentationTime + fadeTime;
   const TOTAL_TIME = SINGLE_IMAGE_TIME * len;
 
   const animation = keyframes`
     0% {
       opacity:1;
     }
-    ${(SINGLE_IMAGE_PRESENTATION_TIME / TOTAL_TIME) * 100}% {
+    ${(presentationTime / TOTAL_TIME) * 100}% {
       opacity:1;
     }
     ${(1 / len) * 100}% {
       opacity:0;
     }
-    ${100 - ((SINGLE_CROSSFADE_TIME / TOTAL_TIME) * 100)}% {
+    ${100 - ((fadeTime / TOTAL_TIME) * 100)}% {
       opacity:0;
     }
     100% {
diff --git a/src/views/ActualPage/ActualPageView.tsx b/src/views/ActualPage/ActualPageView.tsx
index 25c7efe..21c0620 100644
--- a/src/views/ActualPage/ActualPageView.tsx
+++ b/src/views/ActualPage/ActualPageView.tsx
@@ -52,8 +52,9 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({ events, feed }) => (
     </CTASection>
 
     <Gallery>
-      {/* <Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} /> */}
       <CrossFadeImages
+        presentationTime={5}
+        fadeTime={1}
         images={[
           "/img/koydenveto-jani-mannonen-miika-koskela-17.jpg",
           "/img/koydenveto-jani-mannonen-miika-koskela-28.jpg",
@@ -61,9 +62,8 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({ events, feed }) => (
           "/img/Varaslahto2020-AinoSuomi-73.jpg",
           "/img/wappusitsit-jani-mannonen-29.jpg",
         ]}
-        width={400}
-        height={400}
       />
+
       <Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
       <Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
     </Gallery>