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>

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

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