fix/DS-17501

.changeset/gentle-clocks-rest.md

@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-gallery': minor
+---
+
+- Исправлены паддинги у swiper
+- Переработано отображение в full screen режиме

packages/gallery/src/Component.tsx

@@ -133,14 +133,15 @@ export const Gallery: FC<GalleryProps> = ({
         slideTo(nextIndex);
     }, [images.length, loop, currentSlideIndex, slideTo]);
 
-    const setImageMeta = useCallback(
-        (meta: ImageMeta, index: number) => {
-            imagesMeta[index] = meta;
+    const setImageMeta = useCallback((meta: ImageMeta, index: number) => {
+        setImagesMeta((prevImagesMeta) => {
+            const nextImagesMeta = prevImagesMeta.slice();
 
-            setImagesMeta(imagesMeta.slice());
-        },
-        [imagesMeta],
-    );
+            nextImagesMeta[index] = meta;
+
+            return nextImagesMeta;
+        });
+    }, []);
 
     const handleBottomButtonClick = useCallback(
         (e: MouseEvent) => {

packages/gallery/src/components/image-viewer/component.tsx

@@ -8,7 +8,7 @@ import { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIco
 import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 
 import { GalleryContext } from '../../context';
-import { getImageAlt, getImageKey, isVideo, TestIds } from '../../utils';
+import { getImageKey, isVideo, TestIds } from '../../utils';
 
 import { useHandleImageViewer } from './hooks';
 import { Slide } from './slide';
@@ -128,49 +128,70 @@ export const ImageViewer: FC = () => {
                 </div>
             )}
 
-            {fullScreen && !isVideo(currentImage?.src) && (
-                <img
-                    src={currentImage?.src}
-                    alt={currentImage ? getImageAlt(currentImage, currentSlideIndex) : ''}
-                    className={styles.fullScreenImage}
-                />
+            {fullScreen && currentImage && !isVideo(currentImage.src) && (
+                <div className={styles.fullScreenFrame}>
+                    <Slide
+                        isActive={true}
+                        containerAspectRatio={swiperAspectRatio}
+                        image={currentImage}
+                        containerHeight={swiperHeight}
+                        meta={imagesMeta[currentSlideIndex]}
+                        index={currentSlideIndex}
+                        imageAspectRatio={
+                            (imagesMeta[currentSlideIndex]?.width || 1) /
+                            (imagesMeta[currentSlideIndex]?.height || 1)
+                        }
+                        slideVisible={false}
+                        fullScreen={true}
+                    />
+                </div>
             )}
 
-            <Swiper {...swiperProps}>
-                {images.map((image, index) => {
-                    const meta = imagesMeta[index];
-
-                    const imageWidth = meta?.width || 1;
-                    const imageHeight = meta?.height || 1;
-
-                    const imageAspectRatio = imageWidth / imageHeight;
-
-                    const slideVisible = index === currentSlideIndex;
-
-                    return (
-                        <SwiperSlide
-                            key={getImageKey(image, index)}
-                            style={{
-                                pointerEvents: slideVisible ? 'auto' : 'none',
-                                transitionProperty: 'opacity',
-                            }}
-                        >
-                            {({ isActive }) => (
-                                <Slide
-                                    isActive={isActive}
-                                    containerAspectRatio={swiperAspectRatio}
-                                    image={image}
-                                    containerHeight={swiperHeight}
-                                    meta={meta}
-                                    index={index}
-                                    imageAspectRatio={imageAspectRatio}
-                                    slideVisible={slideVisible}
-                                />
-                            )}
-                        </SwiperSlide>
-                    );
+            <div
+                className={cn(styles.swiperFrame, {
+                    [styles.mobile]: isMobile,
+                    [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
+                    [styles.fullScreenFrame]: fullScreen,
+                    [styles.hiddenFrame]: fullScreen && !isVideo(currentImage?.src),
                 })}
-            </Swiper>
+            >
+                <Swiper {...swiperProps}>
+                    {images.map((image, index) => {
+                        const meta = imagesMeta[index];
+
+                        const imageWidth = meta?.width || 1;
+                        const imageHeight = meta?.height || 1;
+
+                        const imageAspectRatio = imageWidth / imageHeight;
+
+                        const slideVisible = index === currentSlideIndex;
+
+                        return (
+                            <SwiperSlide
+                                key={getImageKey(image, index)}
+                                style={{
+                                    pointerEvents: slideVisible ? 'auto' : 'none',
+                                    transitionProperty: 'opacity',
+                                }}
+                            >
+                                {({ isActive }) => (
+                                    <Slide
+                                        isActive={isActive}
+                                        containerAspectRatio={swiperAspectRatio}
+                                        image={image}
+                                        containerHeight={swiperHeight}
+                                        meta={meta}
+                                        index={index}
+                                        imageAspectRatio={imageAspectRatio}
+                                        slideVisible={slideVisible}
+                                        fullScreen={fullScreen && isVideo(image.src)}
+                                    />
+                                )}
+                            </SwiperSlide>
+                        );
+                    })}
+                </Swiper>
+            </div>
 
             {showControls && (
                 <div

packages/gallery/src/components/image-viewer/index.module.css

@@ -4,6 +4,7 @@
     display: flex;
     flex-grow: 1;
     justify-content: center;
+    min-height: 0;
     background-color: var(--color-static-neutral-0-inverted);
 
     /* swiper/swiper.css; */
@@ -69,48 +70,82 @@
         z-index: -1000;
     }
 
-    .swiper {
+    .swiperFrame {
         display: flex;
         width: 100%;
         height: 100%;
+        min-height: 0;
 
         /* 168px - высота хэдера и футера */
         max-height: calc(100vh - 168px);
+        max-height: calc(100dvh - 168px);
         padding: var(--gap-32) var(--gap-16);
         box-sizing: border-box;
 
         &.mobile {
             max-height: calc(100vh - 210px);
+            max-height: calc(100dvh - 210px);
         }
 
         &.mobileVideo {
             max-height: 100vh;
+            max-height: 100dvh;
         }
     }
 
+    .fullScreenFrame {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        max-height: none;
+        min-height: 0;
+        padding: var(--gap-0);
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+
+    .hiddenFrame {
+        flex: 0 0 0;
+        width: 0;
+        height: 0;
+        padding: var(--gap-0);
+        overflow: hidden;
+    }
+
+    .swiper {
+        width: 100%;
+        height: 100%;
+    }
+
+    .hidden {
+        display: none;
+    }
+
     .singleSlideContainer {
         display: flex;
         width: 100%;
         height: 100%;
+        min-height: 0;
 
         max-height: calc(100vh - 80px);
+        max-height: calc(100dvh - 80px);
         padding: var(--gap-32);
         box-sizing: border-box;
 
         &.mobile {
             max-height: calc(100vh - 174px);
+            max-height: calc(100dvh - 174px);
             padding: 0;
         }
 
         &.mobileVideo {
             max-height: 100vh;
+            max-height: 100dvh;
         }
     }
 
-    .hidden {
-        display: none;
-    }
-
     .slide {
         position: relative;
         display: flex;
@@ -131,8 +166,11 @@
     }
 
     .image {
-        width: 0;
-        height: 0;
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
         user-select: none;
         border-radius: var(--border-radius-8);
 
@@ -145,6 +183,9 @@
         position: relative;
         width: auto;
         height: auto;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
         user-select: none;
     }
 
@@ -158,6 +199,15 @@
         height: auto;
     }
 
+    .fullScreenMedia {
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        border-radius: var(--border-radius-0);
+    }
+
     .arrow {
         display: flex;
         flex-direction: column;
@@ -209,14 +259,9 @@
         margin-bottom: var(--gap-4);
     }
 
-    .fullScreenImage {
-        width: 100%;
-        height: auto;
-        background-color: var(--color-light-base-bg-primary);
-    }
-
     .fullScreenVideo {
-        width: calc(100% - 192px);
-        max-height: calc(100vh - 82px);
+        width: 100%;
+        height: 100%;
+        max-height: none;
     }
 }

packages/gallery/src/components/image-viewer/single.tsx

@@ -2,7 +2,7 @@ import React, { type FC, useContext, useRef } from 'react';
 import cn from 'classnames';
 
 import { GalleryContext } from '../../context';
-import { getImageAlt, isVideo } from '../../utils';
+import { isVideo } from '../../utils';
 
 import { useHandleImageViewer } from './hooks';
 import { Slide } from './slide';
@@ -35,11 +35,19 @@ export const Single: FC = () => {
         /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
         <div className={styles.component} onClick={handleWrapperClick}>
             {fullScreen && !isVideo(currentImage?.src) ? (
-                <img
-                    src={currentImage?.src}
-                    alt={currentImage ? getImageAlt(currentImage, currentSlideIndex) : ''}
-                    className={styles.fullScreenImage}
-                />
+                <div className={styles.fullScreenFrame}>
+                    <Slide
+                        isActive={true}
+                        containerAspectRatio={wrapperAspectRatio}
+                        image={currentImage}
+                        containerHeight={wrapperRect?.height || 0}
+                        meta={currentImageMeta}
+                        index={currentSlideIndex}
+                        imageAspectRatio={imageAspectRatio}
+                        slideVisible={false}
+                        fullScreen={true}
+                    />
+                </div>
             ) : (
                 <div
                     className={cn(styles.singleSlideContainer, {