From 65fdb36e5d120780162585f6b8a718550e2d711c Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Sun, 21 Jan 2024 10:42:32 +0300
Subject: [PATCH 1/3] update swiper slides (#370)

---
 src/components/_shared/SolidSwiper/ImageSwiper.tsx    | 1 -
 src/components/_shared/SolidSwiper/Swiper.module.scss | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
index e9ebbda3..188a95f8 100644
--- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
@@ -143,7 +143,6 @@ export const ImageSwiper = (props: Props) => {
               slides-per-view={1}
               thumbs-swiper={'.thumbSwiper'}
               observer={true}
-              // slide-change={handleSlideChange}
               space-between={isMobileView() ? 20 : 10}
             >
               <For each={props.images}>
diff --git a/src/components/_shared/SolidSwiper/Swiper.module.scss b/src/components/_shared/SolidSwiper/Swiper.module.scss
index 3e9cdf82..703a3337 100644
--- a/src/components/_shared/SolidSwiper/Swiper.module.scss
+++ b/src/components/_shared/SolidSwiper/Swiper.module.scss
@@ -130,6 +130,7 @@
     box-sizing: border-box;
     overflow: hidden;
     width: 100%;
+    max-height: var(--slide-height);
 
     .counter {
       @include font-size(1.2rem);

From 0796b41a42038436807b4ec0ef60ddcdf6e32e9d Mon Sep 17 00:00:00 2001
From: Arkadzi Rakouski <arkadyrakovsky@gmail.com>
Date: Sun, 21 Jan 2024 11:05:36 +0300
Subject: [PATCH 2/3] show origin image res & add scale perc & refactor
 lightbox (#359)

* show origin image res & add scale perc & refactor lightbox

---------

Co-authored-by: ilya-bkv <i.yablokov@ccmp.me>
---
 .../_shared/Lightbox/Lightbox.module.scss     | 22 +++++++++++++
 src/components/_shared/Lightbox/Lightbox.tsx  | 33 +++++++++++++++++--
 src/utils/getImageUrl.ts                      | 16 +++++++--
 3 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/src/components/_shared/Lightbox/Lightbox.module.scss b/src/components/_shared/Lightbox/Lightbox.module.scss
index 6add1468..4958b65a 100644
--- a/src/components/_shared/Lightbox/Lightbox.module.scss
+++ b/src/components/_shared/Lightbox/Lightbox.module.scss
@@ -80,6 +80,28 @@
   animation-fill-mode: backwards;
 }
 
+.scalePercentage {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 40px;
+  height: 24px;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10001;
+
+  font-size: 1.2rem;
+  border-radius: 6px;
+  background-color: rgb(0 0 0 / 80%);
+  color: #fff;
+
+  pointer-events: none;
+}
+
 @keyframes fadeIn {
   0% {
     opacity: 0;
diff --git a/src/components/_shared/Lightbox/Lightbox.tsx b/src/components/_shared/Lightbox/Lightbox.tsx
index 89c7d94b..674f7ec8 100644
--- a/src/components/_shared/Lightbox/Lightbox.tsx
+++ b/src/components/_shared/Lightbox/Lightbox.tsx
@@ -1,6 +1,7 @@
 import { clsx } from 'clsx'
-import { createMemo, createSignal, onCleanup } from 'solid-js'
+import { Show, createEffect, on, createMemo, createSignal, onCleanup } from 'solid-js'
 
+import { getImageUrl } from '../../../utils/getImageUrl'
 import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
 import { Icon } from '../Icon'
 
@@ -18,6 +19,7 @@ const TRANSITION_SPEED = 300
 
 export const Lightbox = (props: Props) => {
   const [zoomLevel, setZoomLevel] = createSignal(1)
+  const [pictureScalePercentage, setPictureScalePercentage] = createSignal<number | null>(null)
   const [translateX, setTranslateX] = createSignal(0)
   const [translateY, setTranslateY] = createSignal(0)
   const [transitionEnabled, setTransitionEnabled] = createSignal(false)
@@ -33,7 +35,7 @@ export const Lightbox = (props: Props) => {
 
     setTimeout(() => {
       props.onClose()
-    }, 300)
+    }, 200)
   }
 
   const zoomIn = (event) => {
@@ -64,6 +66,7 @@ export const Lightbox = (props: Props) => {
 
     scale = Math.min(Math.max(0.125, scale), 4)
 
+    setTransitionEnabled(true)
     setZoomLevel(scale * ZOOM_STEP)
   }
 
@@ -105,12 +108,36 @@ export const Lightbox = (props: Props) => {
     cursor: 'grab',
   }))
 
+  let fadeTimer
+
+  createEffect(
+    on(
+      () => zoomLevel(),
+      () => {
+        clearTimeout(fadeTimer)
+
+        fadeTimer = setTimeout(() => {
+          setPictureScalePercentage(null)
+        }, 2200)
+
+        setPictureScalePercentage(Math.round(zoomLevel() * 100))
+      },
+      { defer: true },
+    ),
+  )
+
+  createEffect(() => {
+    console.log('!!! pictureScalePercentage:', pictureScalePercentage())
+  })
   return (
     <div
       class={clsx(styles.Lightbox, props.class)}
       onClick={closeLightbox}
       ref={(el) => (lightboxRef.current = el)}
     >
+      <Show when={pictureScalePercentage()}>
+        <div class={styles.scalePercentage}>{`${pictureScalePercentage()}%`}</div>
+      </Show>
       <span class={styles.close} onClick={closeLightbox}>
         <Icon name="close-white" class={styles.icon} />
       </span>
@@ -127,7 +154,7 @@ export const Lightbox = (props: Props) => {
       </div>
       <img
         class={styles.image}
-        src={props.image}
+        src={getImageUrl(props.image, { noSizeUrlPart: true })}
         alt={props.imageAlt || ''}
         onClick={(event) => event.stopPropagation()}
         onWheel={handleWheelZoom}
diff --git a/src/utils/getImageUrl.ts b/src/utils/getImageUrl.ts
index 7805efa0..661e3951 100644
--- a/src/utils/getImageUrl.ts
+++ b/src/utils/getImageUrl.ts
@@ -13,15 +13,25 @@ const getSizeUrlPart = (options: { width?: number; height?: number } = {}) => {
   return `${widthString}x${heightString}/`
 }
 
-export const getImageUrl = (src: string, options: { width?: number; height?: number } = {}) => {
+export const getImageUrl = (
+  src: string,
+  options: { width?: number; height?: number; noSizeUrlPart?: boolean } = {},
+) => {
   const sizeUrlPart = getSizeUrlPart(options)
 
+  let modifiedSrc = src // Используйте новую переменную вместо переназначения параметра
+
+  if (options.noSizeUrlPart) {
+    modifiedSrc = modifiedSrc.replace(/\d+x.*?\//, '')
+  }
+
   if (src.startsWith(thumborPrefix)) {
-    const thumborKey = src.replace(thumborPrefix, '')
+    const thumborKey = modifiedSrc.replace(thumborPrefix, '')
+
     return `${thumborUrl}/unsafe/${sizeUrlPart}${thumborKey}`
   }
 
-  return `${thumborUrl}/unsafe/${sizeUrlPart}${src}`
+  return `${thumborUrl}/unsafe/${sizeUrlPart}${modifiedSrc}`
 }
 
 export const getOpenGraphImageUrl = (

From 439e27c60396734636933106734d84152412695d Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Sun, 21 Jan 2024 11:56:38 +0300
Subject: [PATCH 3/3] sortable shouts onMount in expo (#371)

---
 src/components/Views/Expo/Expo.tsx           | 3 +--
 src/components/_shared/Lightbox/Lightbox.tsx | 3 ---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/Views/Expo/Expo.tsx b/src/components/Views/Expo/Expo.tsx
index 87ee8aec..63533875 100644
--- a/src/components/Views/Expo/Expo.tsx
+++ b/src/components/Views/Expo/Expo.tsx
@@ -47,7 +47,6 @@ export const Expo = (props: Props) => {
 
   const getLoadShoutsFilters = (additionalFilters: LoadShoutsFilters = {}): LoadShoutsFilters => {
     const filters = { visibility: 'public', ...additionalFilters }
-
     if (props.layout) {
       filters.layout = props.layout
     } else {
@@ -132,7 +131,6 @@ export const Expo = (props: Props) => {
         loadRandomTopArticles()
         loadRandomTopMonthArticles()
       },
-      { defer: true },
     ),
   )
 
@@ -143,6 +141,7 @@ export const Expo = (props: Props) => {
   const handleLoadMoreClick = () => {
     loadMoreWithoutScrolling(LOAD_MORE_PAGE_SIZE)
   }
+
   return (
     <div class={styles.Expo}>
       <Show when={sortedArticles().length > 0} fallback={<Loading />}>
diff --git a/src/components/_shared/Lightbox/Lightbox.tsx b/src/components/_shared/Lightbox/Lightbox.tsx
index 674f7ec8..e4ad4f5a 100644
--- a/src/components/_shared/Lightbox/Lightbox.tsx
+++ b/src/components/_shared/Lightbox/Lightbox.tsx
@@ -126,9 +126,6 @@ export const Lightbox = (props: Props) => {
     ),
   )
 
-  createEffect(() => {
-    console.log('!!! pictureScalePercentage:', pictureScalePercentage())
-  })
   return (
     <div
       class={clsx(styles.Lightbox, props.class)}