diff --git a/.changeset/gentle-clocks-rest.md b/.changeset/gentle-clocks-rest.md new file mode 100644 index 0000000000..40e5af702d --- /dev/null +++ b/.changeset/gentle-clocks-rest.md @@ -0,0 +1,6 @@ +--- +'@alfalab/core-components-gallery': minor +--- + +- Исправлены паддинги у swiper +- Переработано отображение в full screen режиме diff --git a/packages/gallery/src/Component.tsx b/packages/gallery/src/Component.tsx index e17fc77761..c99b65ef7c 100644 --- a/packages/gallery/src/Component.tsx +++ b/packages/gallery/src/Component.tsx @@ -133,14 +133,15 @@ export const Gallery: FC = ({ 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) => { diff --git a/packages/gallery/src/components/image-viewer/component.tsx b/packages/gallery/src/components/image-viewer/component.tsx index d684c66dd1..f7a5ec54a0 100644 --- a/packages/gallery/src/components/image-viewer/component.tsx +++ b/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 = () => { )} - {fullScreen && !isVideo(currentImage?.src) && ( - {currentImage + {fullScreen && currentImage && !isVideo(currentImage.src) && ( +
+ +
)} - - {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 ( - - {({ isActive }) => ( - - )} - - ); +
+ > + + {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 ( + + {({ isActive }) => ( + + )} + + ); + })} + +
{showControls && (
{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
{fullScreen && !isVideo(currentImage?.src) ? ( - {currentImage +
+ +
) : (
= ({ @@ -80,6 +81,7 @@ export const Slide: FC = ({ index, containerHeight, slideVisible, + fullScreen, }) => { const { view } = useContext(GalleryContext); const { handleLoad, handleLoadError } = useHandleImageViewer(); @@ -89,10 +91,27 @@ export const Slide: FC = ({ const verticalImageFit = !small && containerAspectRatio > imageAspectRatio; const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio; + const handleImageRef = useCallback( + (node: HTMLImageElement | null) => { + if (node?.complete && node.naturalWidth > 0 && !meta) { + handleLoad( + { currentTarget: node } as React.SyntheticEvent, + index, + ); + } + }, + [handleLoad, index, meta], + ); + if (isVideo(image.src)) { return ( - ); } @@ -100,20 +119,20 @@ export const Slide: FC = ({ return ( {getImageAlt(image, handleLoad(event, index)} onError={() => handleLoadError(index)} - style={{ - maxHeight: `${containerHeight}px`, - }} + style={fullScreen ? undefined : { maxHeight: `${containerHeight}px` }} data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined} /> diff --git a/packages/gallery/src/components/image-viewer/video/index.module.css b/packages/gallery/src/components/image-viewer/video/index.module.css index 52872ab664..768110ab2f 100644 --- a/packages/gallery/src/components/image-viewer/video/index.module.css +++ b/packages/gallery/src/components/image-viewer/video/index.module.css @@ -2,15 +2,19 @@ .videoWrapper { display: flex; + align-items: center; justify-content: center; height: 100%; - width: auto; + width: 100%; + min-width: 0; + min-height: 0; position: relative; } .video { max-width: 100%; max-height: 100%; + object-fit: contain; border-radius: var(--border-radius-24); } diff --git a/packages/gallery/src/index.module.css b/packages/gallery/src/index.module.css index 0678f4fab8..51286b0af6 100644 --- a/packages/gallery/src/index.module.css +++ b/packages/gallery/src/index.module.css @@ -9,6 +9,7 @@ flex-direction: column; justify-content: space-between; height: 100%; + height: 100dvh; width: 100%; background-color: var(--color-static-neutral-0-inverted); padding-top: var(--sat); @@ -23,6 +24,7 @@ flex-grow: 1; width: 100vw; height: 100vh; + height: 100dvh; background: transparent; }