From 291c3421bf56ee8ffdc68d0f2b8b2cedbbb71401 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 27 Oct 2023 11:21:04 +0600
Subject: [PATCH] fixed flow hero appearance

---
 src/components/flow/FlowSwiperHero/index.tsx       | 13 ++++++++++++-
 .../flow/FlowSwiperHero/styles.module.scss         | 11 +++++++----
 src/utils/dom.ts                                   | 14 +++++++-------
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx
index d6e62839..1dc2bc3a 100644
--- a/src/components/flow/FlowSwiperHero/index.tsx
+++ b/src/components/flow/FlowSwiperHero/index.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
+import Image from 'next/image';
 import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import SwiperClass from 'swiper/types/swiper-class';
@@ -36,6 +37,12 @@ const lazy = {
   checkInView: true,
 };
 
+const getSrcSet = (url?: string) =>
+  [
+    `${getURLFromString(url, imagePresets.cover)} 768w`,
+    `${getURLFromString(url, imagePresets.small_hero)}`,
+  ].join(', ');
+
 export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
   const { isTablet } = useWindowSize();
   const { push } = useNavigation();
@@ -140,7 +147,11 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
           .map((node) => (
             <SwiperSlide key={node.id}>
               <img
-                data-src={getURLFromString(node.thumbnail!, preset)}
+                data-src={getURLFromString(
+                  node.thumbnail,
+                  imagePresets.small_hero,
+                )}
+                data-srcSet={getSrcSet(node.thumbnail)}
                 alt=""
                 className={classNames(styles.preview, 'swiper-lazy')}
               />
diff --git a/src/components/flow/FlowSwiperHero/styles.module.scss b/src/components/flow/FlowSwiperHero/styles.module.scss
index d61130fd..1ea60df1 100644
--- a/src/components/flow/FlowSwiperHero/styles.module.scss
+++ b/src/components/flow/FlowSwiperHero/styles.module.scss
@@ -9,6 +9,7 @@
 
 .swiper {
   @include outer_shadow;
+
   width: 100%;
   height: 100%;
   border-radius: $radius;
@@ -17,7 +18,8 @@
     object-fit: cover;
 
     img {
-      min-width: 150%;
+      min-width: 100%;
+      min-height: 120%;
     }
   }
 }
@@ -67,13 +69,14 @@
 }
 
 img.preview {
-  transform: translate(-15%, 0);
-  transition: transform 7s linear, opacity 1s linear;
+  transform: translate(0, 0);
+  transition: transform 10s linear, opacity 1s linear;
   opacity: 0;
+  will-change: transform;
 
   :global(.swiper-slide-active) &,
   :global(.swiper-slide-duplicate-active) & {
-    transform: translate(-15%, -20%);
+    transform: translate(0, -20%);
     opacity: 1;
   }
 }
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 91098e8c..db41e757 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -70,15 +70,15 @@ export const describeArc = (
   ].join(' ');
 };
 
-export const getURLFromString = (url?: string, size?: ImagePreset): string => {
-  if (size) {
-    return (url || '').replace(
-      'REMOTE_CURRENT://',
-      `${CONFIG.remoteCurrent}cache/${size}/`,
-    );
+export const getURLFromString = (url = '', size?: ImagePreset): string => {
+  if (!size) {
+    return url.replace('REMOTE_CURRENT://', CONFIG.remoteCurrent);
   }
 
-  return (url || '').replace('REMOTE_CURRENT://', CONFIG.remoteCurrent);
+  return url.replace(
+    'REMOTE_CURRENT://',
+    `${CONFIG.remoteCurrent}cache/${size}/`,
+  );
 };
 
 export const getURL = (