@alfalab/core-components-gallery 7.1.10 → 7.2.0-alfasans

package/modern/components/image-viewer/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/image-viewer/component.tsx"],"sourcesContent":["import React, { type FC, type KeyboardEventHandler, useCallback, useContext, useMemo } from 'react';\nimport cn from 'classnames';\nimport { A11y, Controller } from 'swiper/modules';\nimport { Swiper, type SwiperProps, SwiperSlide } from 'swiper/react';\n\nimport { useFocus } from '@alfalab/hooks';\nimport { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIcon';\nimport { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';\n\nimport { GalleryContext } from '../../context';\nimport { getImageAlt, getImageKey, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { Slide } from './slide';\n\nimport styles from './index.module.css';\n\nexport const ImageViewer: FC = () => {\n    const {\n        images,\n        imagesMeta,\n        fullScreen,\n        currentSlideIndex,\n        initialSlide,\n        setCurrentSlideIndex,\n        getSwiper,\n        setSwiper,\n        slidePrev,\n        slideNext,\n        getCurrentImage,\n    } = useContext(GalleryContext);\n\n    const { handleWrapperClick, isMobile, rightArrowRef, leftArrowRef } = useHandleImageViewer();\n\n    const [leftArrowFocused] = useFocus(leftArrowRef, 'keyboard');\n    const [rightArrowFocused] = useFocus(rightArrowRef, 'keyboard');\n\n    const swiper = getSwiper();\n    const currentImage = getCurrentImage();\n\n    const handleSlideChange = useCallback(() => {\n        setCurrentSlideIndex?.(swiper?.activeIndex ?? initialSlide);\n    }, [setCurrentSlideIndex, swiper, initialSlide]);\n\n    const handlePrevClick = () => {\n        slidePrev();\n    };\n\n    const handleNextClick = () => {\n        slideNext();\n    };\n\n    const handleArrowLeftKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            slidePrev();\n        }\n    };\n\n    const handleArrowRightKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            slideNext();\n        }\n    };\n\n    const swiperProps = useMemo<SwiperProps>(\n        () => ({\n            slidesPerView: 1,\n            effect: 'slide',\n            className: cn(styles.swiper, {\n                [styles.hidden]: fullScreen && !isVideo(currentImage?.src),\n                [styles.fullScreenVideo]: fullScreen && isVideo(currentImage?.src),\n                [styles.mobile]: isMobile,\n                [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n            }),\n            modules: [A11y, Controller],\n            controller: { control: swiper },\n            a11y: {\n                slideRole: 'img',\n            },\n            initialSlide,\n            simulateTouch: false,\n            zoom: { maxRatio: 4, minRatio: 1, toggle: true },\n            onSwiper: setSwiper,\n            onSlideChange: handleSlideChange,\n            lazy: { loadPrevNext: true },\n        }),\n        [\n            fullScreen,\n            currentImage?.src,\n            isMobile,\n            swiper,\n            initialSlide,\n            setSwiper,\n            handleSlideChange,\n        ],\n    );\n\n    const showControls = !fullScreen && !isMobile && !!images.length;\n\n    const swiperWidth = swiper?.width || 1;\n    const swiperHeight = swiper?.height || swiper?.width || 1;\n\n    const swiperAspectRatio = swiperWidth / swiperHeight;\n\n    return (\n        <div\n            className={cn(styles.component, {\n                [styles.mobile]: isMobile,\n                [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n            })}\n            aria-hidden={true}\n            onClick={handleWrapperClick}\n        >\n            {showControls && (\n                <div\n                    className={cn(styles.arrow, {\n                        [styles.focused]: leftArrowFocused,\n                    })}\n                    onClick={handlePrevClick}\n                    role='button'\n                    onKeyDown={handleArrowLeftKeyDown}\n                    tabIndex={0}\n                    ref={leftArrowRef}\n                    aria-label='Предыдущее изображение'\n                    data-test-id={TestIds.PREV_SLIDE_BUTTON}\n                >\n                    <ChevronBackHeavyMIcon />\n                </div>\n            )}\n\n            {fullScreen && !isVideo(currentImage?.src) && (\n                <img\n                    src={currentImage?.src}\n                    alt={currentImage ? getImageAlt(currentImage, currentSlideIndex) : ''}\n                    className={styles.fullScreenImage}\n                />\n            )}\n\n            <Swiper {...swiperProps}>\n                {images.map((image, index) => {\n                    const meta = imagesMeta[index];\n\n                    const imageWidth = meta?.width || 1;\n                    const imageHeight = meta?.height || 1;\n\n                    const imageAspectRatio = imageWidth / imageHeight;\n\n                    const slideVisible = index === currentSlideIndex;\n\n                    return (\n                        <SwiperSlide\n                            key={getImageKey(image, index)}\n                            style={{\n                                pointerEvents: slideVisible ? 'auto' : 'none',\n                                transitionProperty: 'opacity',\n                            }}\n                        >\n                            {({ isActive }) => (\n                                <Slide\n                                    isActive={isActive}\n                                    containerAspectRatio={swiperAspectRatio}\n                                    image={image}\n                                    containerHeight={swiperHeight}\n                                    meta={meta}\n                                    index={index}\n                                    imageAspectRatio={imageAspectRatio}\n                                    slideVisible={slideVisible}\n                                />\n                            )}\n                        </SwiperSlide>\n                    );\n                })}\n            </Swiper>\n\n            {showControls && (\n                <div\n                    className={cn(styles.arrow, {\n                        [styles.focused]: rightArrowFocused,\n                    })}\n                    onClick={handleNextClick}\n                    role='button'\n                    onKeyDown={handleArrowRightKeyDown}\n                    tabIndex={0}\n                    ref={rightArrowRef}\n                    aria-label='Следующее изображение'\n                    data-test-id={TestIds.NEXT_SLIDE_BUTTON}\n                >\n                    <ChevronForwardHeavyMIcon />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/image-viewer/component.tsx"],"sourcesContent":["import React, { type FC, type KeyboardEventHandler, useCallback, useContext, useMemo } from 'react';\nimport cn from 'classnames';\nimport { A11y, Controller } from 'swiper/modules';\nimport { Swiper, type SwiperProps, SwiperSlide } from 'swiper/react';\n\nimport { useFocus } from '@alfalab/hooks';\nimport { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIcon';\nimport { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';\n\nimport { GalleryContext } from '../../context';\nimport { getImageKey, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { Slide } from './slide';\n\nimport styles from './index.module.css';\n\nexport const ImageViewer: FC = () => {\n    const {\n        images,\n        imagesMeta,\n        fullScreen,\n        currentSlideIndex,\n        initialSlide,\n        setCurrentSlideIndex,\n        getSwiper,\n        setSwiper,\n        slidePrev,\n        slideNext,\n        getCurrentImage,\n    } = useContext(GalleryContext);\n\n    const { handleWrapperClick, isMobile, rightArrowRef, leftArrowRef } = useHandleImageViewer();\n\n    const [leftArrowFocused] = useFocus(leftArrowRef, 'keyboard');\n    const [rightArrowFocused] = useFocus(rightArrowRef, 'keyboard');\n\n    const swiper = getSwiper();\n    const currentImage = getCurrentImage();\n\n    const handleSlideChange = useCallback(() => {\n        setCurrentSlideIndex?.(swiper?.activeIndex ?? initialSlide);\n    }, [setCurrentSlideIndex, swiper, initialSlide]);\n\n    const handlePrevClick = () => {\n        slidePrev();\n    };\n\n    const handleNextClick = () => {\n        slideNext();\n    };\n\n    const handleArrowLeftKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            slidePrev();\n        }\n    };\n\n    const handleArrowRightKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            slideNext();\n        }\n    };\n\n    const swiperProps = useMemo<SwiperProps>(\n        () => ({\n            slidesPerView: 1,\n            effect: 'slide',\n            className: cn(styles.swiper, {\n                [styles.hidden]: fullScreen && !isVideo(currentImage?.src),\n                [styles.fullScreenVideo]: fullScreen && isVideo(currentImage?.src),\n                [styles.mobile]: isMobile,\n                [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n            }),\n            modules: [A11y, Controller],\n            controller: { control: swiper },\n            a11y: {\n                slideRole: 'img',\n            },\n            initialSlide,\n            simulateTouch: false,\n            zoom: { maxRatio: 4, minRatio: 1, toggle: true },\n            onSwiper: setSwiper,\n            onSlideChange: handleSlideChange,\n            lazy: { loadPrevNext: true },\n        }),\n        [\n            fullScreen,\n            currentImage?.src,\n            isMobile,\n            swiper,\n            initialSlide,\n            setSwiper,\n            handleSlideChange,\n        ],\n    );\n\n    const showControls = !fullScreen && !isMobile && !!images.length;\n\n    const swiperWidth = swiper?.width || 1;\n    const swiperHeight = swiper?.height || swiper?.width || 1;\n\n    const swiperAspectRatio = swiperWidth / swiperHeight;\n\n    return (\n        <div\n            className={cn(styles.component, {\n                [styles.mobile]: isMobile,\n                [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n            })}\n            aria-hidden={true}\n            onClick={handleWrapperClick}\n        >\n            {showControls && (\n                <div\n                    className={cn(styles.arrow, {\n                        [styles.focused]: leftArrowFocused,\n                    })}\n                    onClick={handlePrevClick}\n                    role='button'\n                    onKeyDown={handleArrowLeftKeyDown}\n                    tabIndex={0}\n                    ref={leftArrowRef}\n                    aria-label='Предыдущее изображение'\n                    data-test-id={TestIds.PREV_SLIDE_BUTTON}\n                >\n                    <ChevronBackHeavyMIcon />\n                </div>\n            )}\n\n            {fullScreen && currentImage && !isVideo(currentImage.src) && (\n                <div className={styles.fullScreenFrame}>\n                    <Slide\n                        isActive={true}\n                        containerAspectRatio={swiperAspectRatio}\n                        image={currentImage}\n                        containerHeight={swiperHeight}\n                        meta={imagesMeta[currentSlideIndex]}\n                        index={currentSlideIndex}\n                        imageAspectRatio={\n                            (imagesMeta[currentSlideIndex]?.width || 1) /\n                            (imagesMeta[currentSlideIndex]?.height || 1)\n                        }\n                        slideVisible={false}\n                        fullScreen={true}\n                    />\n                </div>\n            )}\n\n            <div\n                className={cn(styles.swiperFrame, {\n                    [styles.mobile]: isMobile,\n                    [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n                    [styles.fullScreenFrame]: fullScreen,\n                    [styles.hiddenFrame]: fullScreen && !isVideo(currentImage?.src),\n                })}\n            >\n                <Swiper {...swiperProps}>\n                    {images.map((image, index) => {\n                        const meta = imagesMeta[index];\n\n                        const imageWidth = meta?.width || 1;\n                        const imageHeight = meta?.height || 1;\n\n                        const imageAspectRatio = imageWidth / imageHeight;\n\n                        const slideVisible = index === currentSlideIndex;\n\n                        return (\n                            <SwiperSlide\n                                key={getImageKey(image, index)}\n                                style={{\n                                    pointerEvents: slideVisible ? 'auto' : 'none',\n                                    transitionProperty: 'opacity',\n                                }}\n                            >\n                                {({ isActive }) => (\n                                    <Slide\n                                        isActive={isActive}\n                                        containerAspectRatio={swiperAspectRatio}\n                                        image={image}\n                                        containerHeight={swiperHeight}\n                                        meta={meta}\n                                        index={index}\n                                        imageAspectRatio={imageAspectRatio}\n                                        slideVisible={slideVisible}\n                                        fullScreen={fullScreen && isVideo(image.src)}\n                                    />\n                                )}\n                            </SwiperSlide>\n                        );\n                    })}\n                </Swiper>\n            </div>\n\n            {showControls && (\n                <div\n                    className={cn(styles.arrow, {\n                        [styles.focused]: rightArrowFocused,\n                    })}\n                    onClick={handleNextClick}\n                    role='button'\n                    onKeyDown={handleArrowRightKeyDown}\n                    tabIndex={0}\n                    ref={rightArrowRef}\n                    aria-label='Следующее изображение'\n                    data-test-id={TestIds.NEXT_SLIDE_BUTTON}\n                >\n                    <ChevronForwardHeavyMIcon />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/modern/components/image-viewer/index.css

@@ -1,5 +1,4 @@
 :root {
-    --color-light-base-bg-primary: #fff;
     --color-light-status-info: #2288fa;
     --color-static-neutral-0-inverted: #262629;
     --color-static-neutral-0-inverted-hover: #2f2f32;
@@ -17,6 +16,7 @@
     --gap-2xs: 4px;
     --gap-m: 16px;
     --gap-2xl: 32px;
+    --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-16: var(--gap-m);
     --gap-32: var(--gap-2xl);
@@ -24,10 +24,11 @@
 :root {
     --focus-color: var(--color-light-status-info);
 }
-.gallery__component_1gta9 {
+.gallery__component_pbjik {
     display: flex;
     flex-grow: 1;
     justify-content: center;
+    min-height: 0;
     background-color: var(--color-static-neutral-0-inverted);
     .swiper {
         margin-left: auto;
@@ -91,47 +92,81 @@
         z-index: -1000;
     }
 
-    .gallery__swiper_1gta9 {
+    .gallery__swiperFrame_pbjik {
         display: flex;
         width: 100%;
         height: 100%;
+        min-height: 0;
         max-height: calc(100vh - 168px);
+        max-height: calc(100dvh - 168px);
         padding: var(--gap-32) var(--gap-16);
         box-sizing: border-box;
     }
 
-        .gallery__swiper_1gta9.gallery__mobile_1gta9 {
+        .gallery__swiperFrame_pbjik.gallery__mobile_pbjik {
             max-height: calc(100vh - 210px);
+            max-height: calc(100dvh - 210px);
         }
 
-        .gallery__swiper_1gta9.gallery__mobileVideo_1gta9 {
+        .gallery__swiperFrame_pbjik.gallery__mobileVideo_pbjik {
             max-height: 100vh;
+            max-height: 100dvh;
         }
 
-    .gallery__singleSlideContainer_1gta9 {
+    .gallery__fullScreenFrame_pbjik {
+        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;
+    }
+
+    .gallery__hiddenFrame_pbjik {
+        flex: 0 0 0;
+        width: 0;
+        height: 0;
+        padding: var(--gap-0);
+        overflow: hidden;
+    }
+
+    .gallery__swiper_pbjik {
+        width: 100%;
+        height: 100%;
+    }
+
+    .gallery__hidden_pbjik {
+        display: none;
+    }
+
+    .gallery__singleSlideContainer_pbjik {
         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;
     }
 
-        .gallery__singleSlideContainer_1gta9.gallery__mobile_1gta9 {
+        .gallery__singleSlideContainer_pbjik.gallery__mobile_pbjik {
             max-height: calc(100vh - 174px);
+            max-height: calc(100dvh - 174px);
             padding: 0;
         }
 
-        .gallery__singleSlideContainer_1gta9.gallery__mobileVideo_1gta9 {
+        .gallery__singleSlideContainer_pbjik.gallery__mobileVideo_pbjik {
             max-height: 100vh;
+            max-height: 100dvh;
         }
 
-    .gallery__hidden_1gta9 {
-        display: none;
-    }
-
-    .gallery__slide_1gta9 {
+    .gallery__slide_pbjik {
         position: relative;
         display: flex;
         justify-content: center;
@@ -140,49 +175,67 @@
         height: 100%;
     }
 
-    .gallery__slideLoading_1gta9 {
+    .gallery__slideLoading_pbjik {
         background-color: var(--color-static-neutral-translucent-100-inverted);
         border-radius: var(--border-radius-8);
     }
 
-    .gallery__spinner_1gta9 {
+    .gallery__spinner_pbjik {
         position: absolute;
         color: var(--color-static-neutral-translucent-1300-inverted);
     }
 
-    .gallery__image_1gta9 {
-        width: 0;
-        height: 0;
+    .gallery__image_pbjik {
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        max-height: 100%;
+        -o-object-fit: contain;
+           object-fit: contain;
         -webkit-user-select: none;
            -moz-user-select: none;
                 user-select: none;
         border-radius: var(--border-radius-8);
     }
 
-        .gallery__image_1gta9.gallery__mobile_1gta9 {
+        .gallery__image_pbjik.gallery__mobile_pbjik {
             border-radius: var(--border-radius-0);
         }
 
-    .gallery__smallImage_1gta9 {
+    .gallery__smallImage_pbjik {
         position: relative;
         width: auto;
         height: auto;
+        max-width: 100%;
+        max-height: 100%;
+        -o-object-fit: contain;
+           object-fit: contain;
         -webkit-user-select: none;
            -moz-user-select: none;
                 user-select: none;
     }
 
-    .gallery__verticalImageFit_1gta9 {
+    .gallery__verticalImageFit_pbjik {
         width: auto;
         height: 100%;
     }
 
-    .gallery__horizontalImageFit_1gta9 {
+    .gallery__horizontalImageFit_pbjik {
         width: 100%;
         height: auto;
     }
 
-    .gallery__arrow_1gta9 {
+    .gallery__fullScreenMedia_pbjik {
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        -o-object-fit: contain;
+           object-fit: contain;
+        border-radius: var(--border-radius-0);
+    }
+
+    .gallery__arrow_pbjik {
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -196,20 +249,20 @@
         outline: none;
     }
 
-        .gallery__arrow_1gta9:hover {
+        .gallery__arrow_pbjik:hover {
             background-color: var(--color-static-neutral-0-inverted-hover);
         }
 
-        .gallery__arrow_1gta9:active {
+        .gallery__arrow_pbjik:active {
             background-color: var(--color-static-neutral-0-inverted-press);
         }
 
-    .gallery__focused_1gta9 {
+    .gallery__focused_pbjik {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
     }
 
-    .gallery__placeholder_1gta9 {
+    .gallery__placeholder_pbjik {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -219,7 +272,7 @@
         background-color: var(--color-static-neutral-300-inverted);
     }
 
-    .gallery__brokenImgWrapper_1gta9 {
+    .gallery__brokenImgWrapper_pbjik {
         position: relative;
         display: flex;
         flex-direction: column;
@@ -228,20 +281,15 @@
         text-align: center;
     }
 
-    .gallery__brokenImgIcon_1gta9 {
+    .gallery__brokenImgIcon_pbjik {
         width: 80px;
         height: 80px;
         margin-bottom: var(--gap-4);
     }
 
-    .gallery__fullScreenImage_1gta9 {
+    .gallery__fullScreenVideo_pbjik {
         width: 100%;
-        height: auto;
-        background-color: var(--color-light-base-bg-primary);
-    }
-
-    .gallery__fullScreenVideo_1gta9 {
-        width: calc(100% - 192px);
-        max-height: calc(100vh - 82px);
+        height: 100%;
+        max-height: none;
     }
 }

package/modern/components/image-viewer/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"gallery__component_1gta9","swiper":"gallery__swiper_1gta9","mobile":"gallery__mobile_1gta9","mobileVideo":"gallery__mobileVideo_1gta9","singleSlideContainer":"gallery__singleSlideContainer_1gta9","hidden":"gallery__hidden_1gta9","slide":"gallery__slide_1gta9","slideLoading":"gallery__slideLoading_1gta9","spinner":"gallery__spinner_1gta9","image":"gallery__image_1gta9","smallImage":"gallery__smallImage_1gta9","verticalImageFit":"gallery__verticalImageFit_1gta9","horizontalImageFit":"gallery__horizontalImageFit_1gta9","arrow":"gallery__arrow_1gta9","focused":"gallery__focused_1gta9","placeholder":"gallery__placeholder_1gta9","brokenImgWrapper":"gallery__brokenImgWrapper_1gta9","brokenImgIcon":"gallery__brokenImgIcon_1gta9","fullScreenImage":"gallery__fullScreenImage_1gta9","fullScreenVideo":"gallery__fullScreenVideo_1gta9"};
+const styles = {"component":"gallery__component_pbjik","swiperFrame":"gallery__swiperFrame_pbjik","mobile":"gallery__mobile_pbjik","mobileVideo":"gallery__mobileVideo_pbjik","fullScreenFrame":"gallery__fullScreenFrame_pbjik","hiddenFrame":"gallery__hiddenFrame_pbjik","swiper":"gallery__swiper_pbjik","hidden":"gallery__hidden_pbjik","singleSlideContainer":"gallery__singleSlideContainer_pbjik","slide":"gallery__slide_pbjik","slideLoading":"gallery__slideLoading_pbjik","spinner":"gallery__spinner_pbjik","image":"gallery__image_pbjik","smallImage":"gallery__smallImage_pbjik","verticalImageFit":"gallery__verticalImageFit_pbjik","horizontalImageFit":"gallery__horizontalImageFit_pbjik","fullScreenMedia":"gallery__fullScreenMedia_pbjik","arrow":"gallery__arrow_pbjik","focused":"gallery__focused_pbjik","placeholder":"gallery__placeholder_pbjik","brokenImgWrapper":"gallery__brokenImgWrapper_pbjik","brokenImgIcon":"gallery__brokenImgIcon_pbjik","fullScreenVideo":"gallery__fullScreenVideo_pbjik"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/image-viewer/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/image-viewer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    background-color: var(--color-static-neutral-0-inverted);\n\n    /* swiper/swiper.css; */\n    :global(.swiper) {\n        margin-left: auto;\n        margin-right: auto;\n        position: relative;\n        overflow: hidden;\n        list-style: none;\n        padding: 0;\n        z-index: 1;\n        display: block;\n    }\n    :global(.swiper-wrapper) {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        z-index: 1;\n        display: flex;\n        transition-property: transform;\n        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);\n        box-sizing: content-box;\n    }\n    :global(.swiper-android) :global(.swiper-slide),\n    :global(.swiper-ios) :global(.swiper-slide),\n    :global(.swiper-wrapper) {\n        transform: translate3d(0, 0, 0);\n    }\n    :global(.swiper-horizontal) {\n        touch-action: pan-y;\n    }\n    :global(.swiper-slide) {\n        flex-shrink: 0;\n        width: 100%;\n        height: 100%;\n        position: relative;\n        transition-property: transform;\n        display: block;\n    }\n    :global(.swiper-slide-invisible-blank) {\n        visibility: hidden;\n    }\n    :global(.swiper-autoheight),\n    :global(.swiper-autoheight) :global(.swiper-slide) {\n        height: auto;\n    }\n    :global(.swiper-autoheight) :global(.swiper-wrapper) {\n        align-items: flex-start;\n        transition-property: transform, height;\n    }\n    :global(.swiper-backface-hidden) :global(.swiper-slide) {\n        transform: translateZ(0);\n        backface-visibility: hidden;\n    }\n\n    /* swiper/modules/a11y.css */\n    :global(.swiper) :global(.swiper-notification) {\n        position: absolute;\n        left: 0;\n        top: 0;\n        pointer-events: none;\n        opacity: 0;\n        z-index: -1000;\n    }\n\n    .swiper {\n        display: flex;\n        width: 100%;\n        height: 100%;\n\n        /* 168px - высота хэдера и футера */\n        max-height: calc(100vh - 168px);\n        padding: var(--gap-32) var(--gap-16);\n        box-sizing: border-box;\n\n        &.mobile {\n            max-height: calc(100vh - 210px);\n        }\n\n        &.mobileVideo {\n            max-height: 100vh;\n        }\n    }\n\n    .singleSlideContainer {\n        display: flex;\n        width: 100%;\n        height: 100%;\n\n        max-height: calc(100vh - 80px);\n        padding: var(--gap-32);\n        box-sizing: border-box;\n\n        &.mobile {\n            max-height: calc(100vh - 174px);\n            padding: 0;\n        }\n\n        &.mobileVideo {\n            max-height: 100vh;\n        }\n    }\n\n    .hidden {\n        display: none;\n    }\n\n    .slide {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n    }\n\n    .slideLoading {\n        background-color: var(--color-static-neutral-translucent-100-inverted);\n        border-radius: var(--border-radius-8);\n    }\n\n    .spinner {\n        position: absolute;\n        color: var(--color-static-neutral-translucent-1300-inverted);\n    }\n\n    .image {\n        width: 0;\n        height: 0;\n        user-select: none;\n        border-radius: var(--border-radius-8);\n\n        &.mobile {\n            border-radius: var(--border-radius-0);\n        }\n    }\n\n    .smallImage {\n        position: relative;\n        width: auto;\n        height: auto;\n        user-select: none;\n    }\n\n    .verticalImageFit {\n        width: auto;\n        height: 100%;\n    }\n\n    .horizontalImageFit {\n        width: 100%;\n        height: auto;\n    }\n\n    .arrow {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        flex-shrink: 0;\n        width: 96px;\n        height: 100%;\n        cursor: pointer;\n        color: var(--color-static-neutral-translucent-1300-inverted);\n        transition: background-color 0.15s ease-in-out;\n        outline: none;\n\n        &:hover {\n            background-color: var(--color-static-neutral-0-inverted-hover);\n        }\n\n        &:active {\n            background-color: var(--color-static-neutral-0-inverted-press);\n        }\n    }\n\n    .focused {\n        @mixin focus-outline;\n    }\n\n    .placeholder {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n        border-radius: var(--border-radius-8);\n        background-color: var(--color-static-neutral-300-inverted);\n    }\n\n    .brokenImgWrapper {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 150px;\n        text-align: center;\n    }\n\n    .brokenImgIcon {\n        width: 80px;\n        height: 80px;\n        margin-bottom: var(--gap-4);\n    }\n\n    .fullScreenImage {\n        width: 100%;\n        height: auto;\n        background-color: var(--color-light-base-bg-primary);\n    }\n\n    .fullScreenVideo {\n        width: calc(100% - 192px);\n        max-height: calc(100vh - 82px);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,aAAa,CAAC,4BAA4B,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,QAAQ,CAAC,uBAAuB,CAAC,OAAO,CAAC,sBAAsB,CAAC,cAAc,CAAC,6BAA6B,CAAC,SAAS,CAAC,wBAAwB,CAAC,OAAO,CAAC,sBAAsB,CAAC,YAAY,CAAC,2BAA2B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,mCAAmC,CAAC,OAAO,CAAC,sBAAsB,CAAC,SAAS,CAAC,wBAAwB,CAAC,aAAa,CAAC,4BAA4B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,eAAe,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,iBAAiB,CAAC,gCAAgC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/image-viewer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    min-height: 0;\n    background-color: var(--color-static-neutral-0-inverted);\n\n    /* swiper/swiper.css; */\n    :global(.swiper) {\n        margin-left: auto;\n        margin-right: auto;\n        position: relative;\n        overflow: hidden;\n        list-style: none;\n        padding: 0;\n        z-index: 1;\n        display: block;\n    }\n    :global(.swiper-wrapper) {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        z-index: 1;\n        display: flex;\n        transition-property: transform;\n        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);\n        box-sizing: content-box;\n    }\n    :global(.swiper-android) :global(.swiper-slide),\n    :global(.swiper-ios) :global(.swiper-slide),\n    :global(.swiper-wrapper) {\n        transform: translate3d(0, 0, 0);\n    }\n    :global(.swiper-horizontal) {\n        touch-action: pan-y;\n    }\n    :global(.swiper-slide) {\n        flex-shrink: 0;\n        width: 100%;\n        height: 100%;\n        position: relative;\n        transition-property: transform;\n        display: block;\n    }\n    :global(.swiper-slide-invisible-blank) {\n        visibility: hidden;\n    }\n    :global(.swiper-autoheight),\n    :global(.swiper-autoheight) :global(.swiper-slide) {\n        height: auto;\n    }\n    :global(.swiper-autoheight) :global(.swiper-wrapper) {\n        align-items: flex-start;\n        transition-property: transform, height;\n    }\n    :global(.swiper-backface-hidden) :global(.swiper-slide) {\n        transform: translateZ(0);\n        backface-visibility: hidden;\n    }\n\n    /* swiper/modules/a11y.css */\n    :global(.swiper) :global(.swiper-notification) {\n        position: absolute;\n        left: 0;\n        top: 0;\n        pointer-events: none;\n        opacity: 0;\n        z-index: -1000;\n    }\n\n    .swiperFrame {\n        display: flex;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n\n        /* 168px - высота хэдера и футера */\n        max-height: calc(100vh - 168px);\n        max-height: calc(100dvh - 168px);\n        padding: var(--gap-32) var(--gap-16);\n        box-sizing: border-box;\n\n        &.mobile {\n            max-height: calc(100vh - 210px);\n            max-height: calc(100dvh - 210px);\n        }\n\n        &.mobileVideo {\n            max-height: 100vh;\n            max-height: 100dvh;\n        }\n    }\n\n    .fullScreenFrame {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        max-height: none;\n        min-height: 0;\n        padding: var(--gap-0);\n        box-sizing: border-box;\n        overflow: hidden;\n    }\n\n    .hiddenFrame {\n        flex: 0 0 0;\n        width: 0;\n        height: 0;\n        padding: var(--gap-0);\n        overflow: hidden;\n    }\n\n    .swiper {\n        width: 100%;\n        height: 100%;\n    }\n\n    .hidden {\n        display: none;\n    }\n\n    .singleSlideContainer {\n        display: flex;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n\n        max-height: calc(100vh - 80px);\n        max-height: calc(100dvh - 80px);\n        padding: var(--gap-32);\n        box-sizing: border-box;\n\n        &.mobile {\n            max-height: calc(100vh - 174px);\n            max-height: calc(100dvh - 174px);\n            padding: 0;\n        }\n\n        &.mobileVideo {\n            max-height: 100vh;\n            max-height: 100dvh;\n        }\n    }\n\n    .slide {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n    }\n\n    .slideLoading {\n        background-color: var(--color-static-neutral-translucent-100-inverted);\n        border-radius: var(--border-radius-8);\n    }\n\n    .spinner {\n        position: absolute;\n        color: var(--color-static-neutral-translucent-1300-inverted);\n    }\n\n    .image {\n        width: auto;\n        height: auto;\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n        user-select: none;\n        border-radius: var(--border-radius-8);\n\n        &.mobile {\n            border-radius: var(--border-radius-0);\n        }\n    }\n\n    .smallImage {\n        position: relative;\n        width: auto;\n        height: auto;\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n        user-select: none;\n    }\n\n    .verticalImageFit {\n        width: auto;\n        height: 100%;\n    }\n\n    .horizontalImageFit {\n        width: 100%;\n        height: auto;\n    }\n\n    .fullScreenMedia {\n        width: 100%;\n        height: 100%;\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n        border-radius: var(--border-radius-0);\n    }\n\n    .arrow {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        flex-shrink: 0;\n        width: 96px;\n        height: 100%;\n        cursor: pointer;\n        color: var(--color-static-neutral-translucent-1300-inverted);\n        transition: background-color 0.15s ease-in-out;\n        outline: none;\n\n        &:hover {\n            background-color: var(--color-static-neutral-0-inverted-hover);\n        }\n\n        &:active {\n            background-color: var(--color-static-neutral-0-inverted-press);\n        }\n    }\n\n    .focused {\n        @mixin focus-outline;\n    }\n\n    .placeholder {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n        border-radius: var(--border-radius-8);\n        background-color: var(--color-static-neutral-300-inverted);\n    }\n\n    .brokenImgWrapper {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 150px;\n        text-align: center;\n    }\n\n    .brokenImgIcon {\n        width: 80px;\n        height: 80px;\n        margin-bottom: var(--gap-4);\n    }\n\n    .fullScreenVideo {\n        width: 100%;\n        height: 100%;\n        max-height: none;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,aAAa,CAAC,4BAA4B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,aAAa,CAAC,4BAA4B,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,aAAa,CAAC,4BAA4B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,sBAAsB,CAAC,qCAAqC,CAAC,OAAO,CAAC,sBAAsB,CAAC,cAAc,CAAC,6BAA6B,CAAC,SAAS,CAAC,wBAAwB,CAAC,OAAO,CAAC,sBAAsB,CAAC,YAAY,CAAC,2BAA2B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,mCAAmC,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,OAAO,CAAC,sBAAsB,CAAC,SAAS,CAAC,wBAAwB,CAAC,aAAa,CAAC,4BAA4B,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,eAAe,CAAC,8BAA8B,CAAC,iBAAiB,CAAC,gCAAgC,CAAC;;;;"}

package/modern/components/image-viewer/single.js

@@ -1,7 +1,7 @@
 import React, { useContext, useRef } from 'react';
 import cn from 'classnames';
 import { GalleryContext } from '../../context.js';
-import { isVideo, getImageAlt } from '../../utils/utils.js';
+import { isVideo } from '../../utils/utils.js';
 import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
 import styles from './index.module.css.js';
@@ -21,7 +21,8 @@ const Single = () => {
     const wrapperAspectRatio = (wrapperRect?.width || 1) / (wrapperRect?.height || 1);
     return (
     /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-    React.createElement("div", { className: styles.component, onClick: handleWrapperClick }, fullScreen && !isVideo(currentImage?.src) ? (React.createElement("img", { src: currentImage?.src, alt: currentImage ? getImageAlt(currentImage, currentSlideIndex) : '', className: styles.fullScreenImage })) : (React.createElement("div", { className: cn(styles.singleSlideContainer, {
+    React.createElement("div", { className: styles.component, onClick: handleWrapperClick }, fullScreen && !isVideo(currentImage?.src) ? (React.createElement("div", { className: styles.fullScreenFrame },
+        React.createElement(Slide, { isActive: true, containerAspectRatio: wrapperAspectRatio, image: currentImage, containerHeight: wrapperRect?.height || 0, meta: currentImageMeta, index: currentSlideIndex, imageAspectRatio: imageAspectRatio, slideVisible: false, fullScreen: true }))) : (React.createElement("div", { className: cn(styles.singleSlideContainer, {
             [styles.mobile]: isMobile,
             [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
         }), ref: wrapperRef },

package/modern/components/image-viewer/single.js.map

@@ -1 +1 @@
-{"version":3,"file":"single.js","sources":["../../../src/components/image-viewer/single.tsx"],"sourcesContent":["import React, { type FC, useContext, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { GalleryContext } from '../../context';\nimport { getImageAlt, isVideo } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { Slide } from './slide';\n\nimport styles from './index.module.css';\n\nexport const Single: FC = () => {\n    const { fullScreen, currentSlideIndex, getCurrentImage, getCurrentImageMeta } =\n        useContext(GalleryContext);\n\n    const { handleWrapperClick, isMobile } = useHandleImageViewer();\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const currentImage = getCurrentImage();\n    const currentImageMeta = getCurrentImageMeta();\n\n    if (!currentImage) return null;\n\n    const imageWidth = currentImageMeta?.width || 1;\n    const imageHeight = currentImageMeta?.height || 1;\n\n    const imageAspectRatio = imageWidth / imageHeight;\n\n    const wrapperRect = wrapperRef.current?.getBoundingClientRect();\n\n    const wrapperAspectRatio = (wrapperRect?.width || 1) / (wrapperRect?.height || 1);\n\n    return (\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n        <div className={styles.component} onClick={handleWrapperClick}>\n            {fullScreen && !isVideo(currentImage?.src) ? (\n                <img\n                    src={currentImage?.src}\n                    alt={currentImage ? getImageAlt(currentImage, currentSlideIndex) : ''}\n                    className={styles.fullScreenImage}\n                />\n            ) : (\n                <div\n                    className={cn(styles.singleSlideContainer, {\n                        [styles.mobile]: isMobile,\n                        [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n                    })}\n                    ref={wrapperRef}\n                >\n                    <Slide\n                        isActive={true}\n                        containerAspectRatio={wrapperAspectRatio}\n                        image={currentImage}\n                        containerHeight={wrapperRect?.height || 0}\n                        meta={currentImageMeta}\n                        index={currentSlideIndex}\n                        imageAspectRatio={imageAspectRatio}\n                        slideVisible={true}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,MAAM,GAAO,MAAK;AAC3B,IAAA,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,eAAe,EAAE,mBAAmB,EAAE,GACzE,UAAU,CAAC,cAAc,CAAC;IAE9B,MAAM,EAAE,kBAAkB,EAAE,QAAQ,EAAE,GAAG,oBAAoB,EAAE;AAE/D,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE/C,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAE9C,IAAA,IAAI,CAAC,YAAY;AAAE,QAAA,OAAO,IAAI;AAE9B,IAAA,MAAM,UAAU,GAAG,gBAAgB,EAAE,KAAK,IAAI,CAAC;AAC/C,IAAA,MAAM,WAAW,GAAG,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAEjD,IAAA,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW;IAEjD,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,EAAE,qBAAqB,EAAE;AAE/D,IAAA,MAAM,kBAAkB,GAAG,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,KAAK,WAAW,EAAE,MAAM,IAAI,CAAC,CAAC;IAEjF;;AAEI,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,kBAAkB,EAAA,EACxD,UAAU,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,IACtC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,YAAY,EAAE,GAAG,EACtB,GAAG,EAAE,YAAY,GAAG,WAAW,CAAC,YAAY,EAAE,iBAAiB,CAAC,GAAG,EAAE,EACrE,SAAS,EAAE,MAAM,CAAC,eAAe,EACnC,CAAA,KAEF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAoB,EAAE;AACvC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ;AACzB,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,QAAQ,IAAI,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC;SAC/D,CAAC,EACF,GAAG,EAAE,UAAU,EAAA;AAEf,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EACF,EAAA,QAAQ,EAAE,IAAI,EACd,oBAAoB,EAAE,kBAAkB,EACxC,KAAK,EAAE,YAAY,EACnB,eAAe,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC,EACzC,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,iBAAiB,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,IAAI,EAAA,CACpB,CACA,CACT,CACC;AAEd;;;;"}
+{"version":3,"file":"single.js","sources":["../../../src/components/image-viewer/single.tsx"],"sourcesContent":["import React, { type FC, useContext, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { Slide } from './slide';\n\nimport styles from './index.module.css';\n\nexport const Single: FC = () => {\n    const { fullScreen, currentSlideIndex, getCurrentImage, getCurrentImageMeta } =\n        useContext(GalleryContext);\n\n    const { handleWrapperClick, isMobile } = useHandleImageViewer();\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const currentImage = getCurrentImage();\n    const currentImageMeta = getCurrentImageMeta();\n\n    if (!currentImage) return null;\n\n    const imageWidth = currentImageMeta?.width || 1;\n    const imageHeight = currentImageMeta?.height || 1;\n\n    const imageAspectRatio = imageWidth / imageHeight;\n\n    const wrapperRect = wrapperRef.current?.getBoundingClientRect();\n\n    const wrapperAspectRatio = (wrapperRect?.width || 1) / (wrapperRect?.height || 1);\n\n    return (\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n        <div className={styles.component} onClick={handleWrapperClick}>\n            {fullScreen && !isVideo(currentImage?.src) ? (\n                <div className={styles.fullScreenFrame}>\n                    <Slide\n                        isActive={true}\n                        containerAspectRatio={wrapperAspectRatio}\n                        image={currentImage}\n                        containerHeight={wrapperRect?.height || 0}\n                        meta={currentImageMeta}\n                        index={currentSlideIndex}\n                        imageAspectRatio={imageAspectRatio}\n                        slideVisible={false}\n                        fullScreen={true}\n                    />\n                </div>\n            ) : (\n                <div\n                    className={cn(styles.singleSlideContainer, {\n                        [styles.mobile]: isMobile,\n                        [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n                    })}\n                    ref={wrapperRef}\n                >\n                    <Slide\n                        isActive={true}\n                        containerAspectRatio={wrapperAspectRatio}\n                        image={currentImage}\n                        containerHeight={wrapperRect?.height || 0}\n                        meta={currentImageMeta}\n                        index={currentSlideIndex}\n                        imageAspectRatio={imageAspectRatio}\n                        slideVisible={true}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,MAAM,GAAO,MAAK;AAC3B,IAAA,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,eAAe,EAAE,mBAAmB,EAAE,GACzE,UAAU,CAAC,cAAc,CAAC;IAE9B,MAAM,EAAE,kBAAkB,EAAE,QAAQ,EAAE,GAAG,oBAAoB,EAAE;AAE/D,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE/C,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAE9C,IAAA,IAAI,CAAC,YAAY;AAAE,QAAA,OAAO,IAAI;AAE9B,IAAA,MAAM,UAAU,GAAG,gBAAgB,EAAE,KAAK,IAAI,CAAC;AAC/C,IAAA,MAAM,WAAW,GAAG,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAEjD,IAAA,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW;IAEjD,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,EAAE,qBAAqB,EAAE;AAE/D,IAAA,MAAM,kBAAkB,GAAG,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,KAAK,WAAW,EAAE,MAAM,IAAI,CAAC,CAAC;IAEjF;;AAEI,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,kBAAkB,EAAA,EACxD,UAAU,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,IACtC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,eAAe,EAAA;QAClC,KAAC,CAAA,aAAA,CAAA,KAAK,EACF,EAAA,QAAQ,EAAE,IAAI,EACd,oBAAoB,EAAE,kBAAkB,EACxC,KAAK,EAAE,YAAY,EACnB,eAAe,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC,EACzC,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,iBAAiB,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,KAAK,EACnB,UAAU,EAAE,IAAI,EAClB,CAAA,CACA,KAEN,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAoB,EAAE;AACvC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ;AACzB,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,QAAQ,IAAI,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC;SAC/D,CAAC,EACF,GAAG,EAAE,UAAU,EAAA;AAEf,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EACF,EAAA,QAAQ,EAAE,IAAI,EACd,oBAAoB,EAAE,kBAAkB,EACxC,KAAK,EAAE,YAAY,EACnB,eAAe,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC,EACzC,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,iBAAiB,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,IAAI,EAAA,CACpB,CACA,CACT,CACC;AAEd;;;;"}

package/modern/components/image-viewer/slide.d.ts

@@ -9,6 +9,7 @@ type SlideProps = {
     index: number;
     containerHeight: number;
     slideVisible: boolean;
+    fullScreen?: boolean;
 };
 export declare const Slide: FC<SlideProps>;
 export {};

package/modern/components/image-viewer/slide.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useCallback } from 'react';
 import cn from 'classnames';
 import { Spinner } from '@alfalab/core-components-spinner/modern';
 import { TypographyText } from '@alfalab/core-components-typography/modern';
@@ -24,27 +24,31 @@ const SlideInner = ({ children, broken, loading, isVideoView }) => {
         broken ? React.createElement("div", { className: styles.placeholder }, content) : content,
         React.createElement(Spinner, { className: styles.spinner, preset: 48, visible: loading })));
 };
-const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image, index, containerHeight, slideVisible, }) => {
+const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image, index, containerHeight, slideVisible, fullScreen, }) => {
     const { view } = useContext(GalleryContext);
     const { handleLoad, handleLoadError } = useHandleImageViewer();
     const broken = Boolean(meta?.broken);
     const small = isSmallImage(meta);
     const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;
     const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;
+    const handleImageRef = useCallback((node) => {
+        if (node?.complete && node.naturalWidth > 0 && !meta) {
+            handleLoad({ currentTarget: node }, index);
+        }
+    }, [handleLoad, index, meta]);
     if (isVideo(image.src)) {
         return (React.createElement(SlideInner, { isVideoView: true, active: isActive, broken: broken, loading: !meta },
-            React.createElement(Video, { url: image.src, index: index, isActive: isActive })));
+            React.createElement(Video, { url: image.src, index: index, isActive: isActive, className: cn({ [styles.fullScreenMedia]: fullScreen }) })));
     }
     return (React.createElement(SlideInner, { active: isActive, broken: broken, loading: !meta },
-        React.createElement("img", { src: image.src, alt: getImageAlt(image, index), className: cn({
+        React.createElement("img", { ref: handleImageRef, src: image.src, alt: getImageAlt(image, index), className: cn({
                 [styles.smallImage]: small,
                 [styles.image]: !small && meta,
                 [styles.mobile]: view === 'mobile',
+                [styles.fullScreenMedia]: fullScreen,
                 [styles.verticalImageFit]: verticalImageFit,
                 [styles.horizontalImageFit]: horizontalImageFit,
-            }), onLoad: (event) => handleLoad(event, index), onError: () => handleLoadError(index), style: {
-                maxHeight: `${containerHeight}px`,
-            }, "data-test-id": slideVisible ? TestIds.ACTIVE_IMAGE : undefined })));
+            }), onLoad: (event) => handleLoad(event, index), onError: () => handleLoadError(index), style: fullScreen ? undefined : { maxHeight: `${containerHeight}px` }, "data-test-id": slideVisible ? TestIds.ACTIVE_IMAGE : undefined })));
 };
 
 export { Slide };

package/modern/components/image-viewer/slide.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n    active: boolean;\n    broken: boolean;\n    loading: boolean;\n    children: ReactNode;\n    isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n    const content = broken ? (\n        <div className={styles.brokenImgWrapper}>\n            <div className={styles.brokenImgIcon}>\n                <svg\n                    xmlns='http://www.w3.org/2000/svg'\n                    width='80'\n                    height='80'\n                    viewBox='0 0 80 80'\n                    fill='none'\n                >\n                    <rect width='80' height='80' fill='none' />\n                    <path\n                        fillRule='evenodd'\n                        clipRule='evenodd'\n                        d={NoImagePaths.baseImage}\n                        fill='#89898A'\n                    />\n                    <path d={NoImagePaths.triangleImage} fill='#89898A' />\n                </svg>\n            </div>\n\n            <TypographyText view='primary-small' color='static-secondary-light'>\n                Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n            </TypographyText>\n        </div>\n    ) : (\n        children\n    );\n\n    return (\n        <div className={cn(styles.slide, { [styles.slideLoading]: loading })}>\n            {broken ? <div className={styles.placeholder}>{content}</div> : content}\n            <Spinner className={styles.spinner} preset={48} visible={loading} />\n        </div>\n    );\n};\n\ntype SlideProps = {\n    isActive: boolean;\n    image: GalleryImage;\n    meta?: ImageMeta;\n    containerAspectRatio: number;\n    imageAspectRatio: number;\n    index: number;\n    containerHeight: number;\n    slideVisible: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n    isActive,\n    meta,\n    containerAspectRatio,\n    imageAspectRatio,\n    image,\n    index,\n    containerHeight,\n    slideVisible,\n}) => {\n    const { view } = useContext(GalleryContext);\n    const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n    const broken = Boolean(meta?.broken);\n    const small = isSmallImage(meta);\n    const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n    const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n\n    if (isVideo(image.src)) {\n        return (\n            <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n                <Video url={image.src} index={index} isActive={isActive} />\n            </SlideInner>\n        );\n    }\n\n    return (\n        <SlideInner active={isActive} broken={broken} loading={!meta}>\n            <img\n                src={image.src}\n                alt={getImageAlt(image, index)}\n                className={cn({\n                    [styles.smallImage]: small,\n                    [styles.image]: !small && meta,\n                    [styles.mobile]: view === 'mobile',\n                    [styles.verticalImageFit]: verticalImageFit,\n                    [styles.horizontalImageFit]: horizontalImageFit,\n                })}\n                onLoad={(event) => handleLoad(event, index)}\n                onError={() => handleLoadError(index)}\n                style={{\n                    maxHeight: `${containerHeight}px`,\n                }}\n                data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n            />\n        </SlideInner>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAwBA,MAAM,UAAU,GAAwB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,KAAI;AACnF,IAAA,MAAM,OAAO,GAAG,MAAM,IAClB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA;AACnC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA;AAChC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EAAA;gBAEX,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAG,CAAA;AAC3C,gBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,YAAY,CAAC,SAAS,EACzB,IAAI,EAAC,SAAS,EAChB,CAAA;gBACF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,IAAI,EAAC,SAAS,EAAG,CAAA,CACpD,CACJ;QAEN,KAAC,CAAA,aAAA,CAAA,cAAc,IAAC,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,wBAAwB,EAAA;;AACzC,YAAA,WAAW,GAAG,OAAO,GAAG,aAAa,CAC9C,CACf,KAEN,QAAQ,CACX;AAED,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,GAAG,OAAO,EAAE,CAAC,EAAA;AAC/D,QAAA,MAAM,GAAG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,OAAO,CAAO,GAAG,OAAO;AACvE,QAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAI,CAAA,CAClE;AAEd,CAAC;MAaY,KAAK,GAAmB,CAAC,EAClC,QAAQ,EACR,IAAI,EACJ,oBAAoB,EACpB,gBAAgB,EAChB,KAAK,EACL,KAAK,EACL,eAAe,EACf,YAAY,GACf,KAAI;IACD,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;IAC3C,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,oBAAoB,EAAE;IAE9D,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;AACpC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC;IAChC,MAAM,gBAAgB,GAAG,CAAC,KAAK,IAAI,oBAAoB,GAAG,gBAAgB;IAC1E,MAAM,kBAAkB,GAAG,CAAC,KAAK,IAAI,oBAAoB,IAAI,gBAAgB;AAE7E,IAAA,IAAI,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AACpB,QAAA,QACI,KAAC,CAAA,aAAA,CAAA,UAAU,IAAC,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,IAAI,EAAA;AAC3E,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAC,EAAA,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAClD;;AAIrB,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,IAAI,EAAA;AACxD,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,GAAG,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,EAC9B,SAAS,EAAE,EAAE,CAAC;AACV,gBAAA,CAAC,MAAM,CAAC,UAAU,GAAG,KAAK;gBAC1B,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,KAAK,IAAI,IAAI;AAC9B,gBAAA,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ;AAClC,gBAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,gBAAgB;AAC3C,gBAAA,CAAC,MAAM,CAAC,kBAAkB,GAAG,kBAAkB;aAClD,CAAC,EACF,MAAM,EAAE,CAAC,KAAK,KAAK,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,EAC3C,OAAO,EAAE,MAAM,eAAe,CAAC,KAAK,CAAC,EACrC,KAAK,EAAE;gBACH,SAAS,EAAE,CAAG,EAAA,eAAe,CAAI,EAAA,CAAA;AACpC,aAAA,EAAA,cAAA,EACa,YAAY,GAAG,OAAO,CAAC,YAAY,GAAG,SAAS,EAC/D,CAAA,CACO;AAErB;;;;"}
+{"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n    active: boolean;\n    broken: boolean;\n    loading: boolean;\n    children: ReactNode;\n    isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n    const content = broken ? (\n        <div className={styles.brokenImgWrapper}>\n            <div className={styles.brokenImgIcon}>\n                <svg\n                    xmlns='http://www.w3.org/2000/svg'\n                    width='80'\n                    height='80'\n                    viewBox='0 0 80 80'\n                    fill='none'\n                >\n                    <rect width='80' height='80' fill='none' />\n                    <path\n                        fillRule='evenodd'\n                        clipRule='evenodd'\n                        d={NoImagePaths.baseImage}\n                        fill='#89898A'\n                    />\n                    <path d={NoImagePaths.triangleImage} fill='#89898A' />\n                </svg>\n            </div>\n\n            <TypographyText view='primary-small' color='static-secondary-light'>\n                Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n            </TypographyText>\n        </div>\n    ) : (\n        children\n    );\n\n    return (\n        <div className={cn(styles.slide, { [styles.slideLoading]: loading })}>\n            {broken ? <div className={styles.placeholder}>{content}</div> : content}\n            <Spinner className={styles.spinner} preset={48} visible={loading} />\n        </div>\n    );\n};\n\ntype SlideProps = {\n    isActive: boolean;\n    image: GalleryImage;\n    meta?: ImageMeta;\n    containerAspectRatio: number;\n    imageAspectRatio: number;\n    index: number;\n    containerHeight: number;\n    slideVisible: boolean;\n    fullScreen?: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n    isActive,\n    meta,\n    containerAspectRatio,\n    imageAspectRatio,\n    image,\n    index,\n    containerHeight,\n    slideVisible,\n    fullScreen,\n}) => {\n    const { view } = useContext(GalleryContext);\n    const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n    const broken = Boolean(meta?.broken);\n    const small = isSmallImage(meta);\n    const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n    const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n\n    const handleImageRef = useCallback(\n        (node: HTMLImageElement | null) => {\n            if (node?.complete && node.naturalWidth > 0 && !meta) {\n                handleLoad(\n                    { currentTarget: node } as React.SyntheticEvent<HTMLImageElement>,\n                    index,\n                );\n            }\n        },\n        [handleLoad, index, meta],\n    );\n\n    if (isVideo(image.src)) {\n        return (\n            <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n                <Video\n                    url={image.src}\n                    index={index}\n                    isActive={isActive}\n                    className={cn({ [styles.fullScreenMedia]: fullScreen })}\n                />\n            </SlideInner>\n        );\n    }\n\n    return (\n        <SlideInner active={isActive} broken={broken} loading={!meta}>\n            <img\n                ref={handleImageRef}\n                src={image.src}\n                alt={getImageAlt(image, index)}\n                className={cn({\n                    [styles.smallImage]: small,\n                    [styles.image]: !small && meta,\n                    [styles.mobile]: view === 'mobile',\n                    [styles.fullScreenMedia]: fullScreen,\n                    [styles.verticalImageFit]: verticalImageFit,\n                    [styles.horizontalImageFit]: horizontalImageFit,\n                })}\n                onLoad={(event) => handleLoad(event, index)}\n                onError={() => handleLoadError(index)}\n                style={fullScreen ? undefined : { maxHeight: `${containerHeight}px` }}\n                data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n            />\n        </SlideInner>\n    );\n};\n"],"names":[],"mappings":"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"}

package/modern/components/image-viewer/video/index.css

@@ -7,22 +7,27 @@
     --border-radius-0: 0;
     --border-radius-24: var(--border-radius-3xl);
 }
-.gallery__videoWrapper_15aby {
+.gallery__videoWrapper_138oj {
     display: flex;
+    align-items: center;
     justify-content: center;
     height: 100%;
-    width: auto;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
     position: relative;
 }
-.gallery__video_15aby {
+.gallery__video_138oj {
     max-width: 100%;
     max-height: 100%;
+    -o-object-fit: contain;
+       object-fit: contain;
     border-radius: var(--border-radius-24);
 }
-.gallery__mobile_15aby {
+.gallery__mobile_138oj {
     border-radius: var(--border-radius-0);
 }
-.gallery__videoButton_15aby {
+.gallery__videoButton_138oj {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -30,13 +35,13 @@
     z-index: 1;
     color: green;
 }
-.gallery__icon_15aby {
+.gallery__icon_138oj {
     color: var(--color-static-neutral-0);
 }
-.gallery__iconShape_15aby {
+.gallery__iconShape_138oj {
     fill: var(--color-static-neutral-translucent-700);
 }
-.gallery__bottomButton_15aby {
+.gallery__bottomButton_138oj {
     position: absolute;
     bottom: 48px;
     left: 32px;

package/modern/components/image-viewer/video/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"videoWrapper":"gallery__videoWrapper_15aby","video":"gallery__video_15aby","mobile":"gallery__mobile_15aby","videoButton":"gallery__videoButton_15aby","icon":"gallery__icon_15aby","iconShape":"gallery__iconShape_15aby","bottomButton":"gallery__bottomButton_15aby"};
+const styles = {"videoWrapper":"gallery__videoWrapper_138oj","video":"gallery__video_138oj","mobile":"gallery__mobile_138oj","videoButton":"gallery__videoButton_138oj","icon":"gallery__icon_138oj","iconShape":"gallery__iconShape_138oj","bottomButton":"gallery__bottomButton_138oj"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/image-viewer/video/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../../src/components/image-viewer/video/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.videoWrapper {\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    width: auto;\n    position: relative;\n}\n\n.video {\n    max-width: 100%;\n    max-height: 100%;\n    border-radius: var(--border-radius-24);\n}\n\n.mobile {\n    border-radius: var(--border-radius-0);\n}\n\n.videoButton {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 1;\n    color: green;\n}\n\n.icon {\n    color: var(--color-static-neutral-0);\n}\n\n.iconShape {\n    fill: var(--color-static-neutral-translucent-700);\n}\n\n.bottomButton {\n    position: absolute;\n    bottom: 48px;\n    left: 32px;\n    right: 32px;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,cAAc,CAAC,6BAA6B,CAAC,OAAO,CAAC,sBAAsB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,qBAAqB,CAAC,WAAW,CAAC,0BAA0B,CAAC,cAAc,CAAC,6BAA6B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../../src/components/image-viewer/video/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.videoWrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    min-width: 0;\n    min-height: 0;\n    position: relative;\n}\n\n.video {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n    border-radius: var(--border-radius-24);\n}\n\n.mobile {\n    border-radius: var(--border-radius-0);\n}\n\n.videoButton {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 1;\n    color: green;\n}\n\n.icon {\n    color: var(--color-static-neutral-0);\n}\n\n.iconShape {\n    fill: var(--color-static-neutral-translucent-700);\n}\n\n.bottomButton {\n    position: absolute;\n    bottom: 48px;\n    left: 32px;\n    right: 32px;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,cAAc,CAAC,6BAA6B,CAAC,OAAO,CAAC,sBAAsB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,qBAAqB,CAAC,WAAW,CAAC,0BAA0B,CAAC,cAAc,CAAC,6BAA6B,CAAC;;;;"}

package/modern/components/info-bar/index.css

@@ -7,10 +7,10 @@
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
 }
-.gallery__description_9txux {
+.gallery__description_56ogm {
     text-align: center;
 }
-.gallery__infoWrapper_9txux {
+.gallery__infoWrapper_56ogm {
     background-color: var(--color-static-neutral-0-inverted);
     display: flex;
     align-items: center;
@@ -19,7 +19,7 @@
     position: relative;
     height: 48px;
 }
-.gallery__infoWrapper_9txux.gallery__video_9txux {
+.gallery__infoWrapper_56ogm.gallery__video_56ogm {
         padding: 0 var(--gap-4) var(--gap-4);
         justify-content: space-between;
     }

package/modern/components/info-bar/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"description":"gallery__description_9txux","infoWrapper":"gallery__infoWrapper_9txux","video":"gallery__video_9txux"};
+const styles = {"description":"gallery__description_56ogm","infoWrapper":"gallery__infoWrapper_56ogm","video":"gallery__video_56ogm"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map