postmerge

src/components/Views/Expo/Expo.tsx

@@ -43,7 +43,7 @@ export const Expo = (props: Props) => {
   const getLoadShoutsFilters = (additionalFilters: LoadShoutsFilters = {}): LoadShoutsFilters => {
     const filters = { published: true, ...additionalFilters }
 
-    filters.layouts = []
+    if (!filters.layouts) filters.layouts = []
     if (props.layout) {
       filters.layouts.push(props.layout)
     } else {
@@ -132,7 +132,6 @@ export const Expo = (props: Props) => {
         loadRandomTopArticles()
         loadRandomTopMonthArticles()
       },
-      { defer: true },
     ),
   )
 
@@ -143,6 +142,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 />}>

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;

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,33 @@ 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 },
+    ),
+  )
+
   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 +151,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}

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}>

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);

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 = (