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

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

@@ -13,7 +13,7 @@
     --gap-12: var(--gap-s);
     --gap-24: var(--gap-xl);
 }
-.gallery__component_3ax0x {
+.gallery__component_1qpjj {
     display: flex;
     flex-wrap: nowrap;
     align-content: center;
@@ -25,25 +25,25 @@
     scrollbar-width: none;
     background-color: var(--color-static-neutral-0-inverted);
 }
-.gallery__component_3ax0x.gallery__mobile_3ax0x {
+.gallery__component_1qpjj.gallery__mobile_1qpjj {
         padding: var(--gap-8) var(--gap-24);
     }
-.gallery__component_3ax0x::-webkit-scrollbar {
+.gallery__component_1qpjj::-webkit-scrollbar {
         display: none;
     }
-.gallery__previews_3ax0x {
+.gallery__previews_1qpjj {
     display: flex;
 }
-.gallery__preview_3ax0x {
+.gallery__preview_1qpjj {
     flex-shrink: 0;
     margin-right: var(--gap-4);
 }
-.gallery__preview_3ax0x.gallery__mobile_3ax0x {
+.gallery__preview_1qpjj.gallery__mobile_1qpjj {
         margin-right: var(--gap-2);
     }
-.gallery__preview_3ax0x:first-child {
+.gallery__preview_1qpjj:first-child {
         margin-left: auto;
     }
-.gallery__preview_3ax0x:last-child {
+.gallery__preview_1qpjj:last-child {
         margin-right: auto;
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"gallery__component_3ax0x","mobile":"gallery__mobile_3ax0x","preview":"gallery__preview_3ax0x"};
+const styles = {"component":"gallery__component_1qpjj","mobile":"gallery__mobile_1qpjj","preview":"gallery__preview_1qpjj"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/subtitles/index.css

@@ -5,7 +5,7 @@
     --gap-16: var(--gap-m);
     --gap-32: var(--gap-2xl);
 }
-.gallery__subtitles_k5m0k {
+.gallery__subtitles_1lymx {
     position: absolute;
     align-self: flex-end;
     padding: var(--gap-0) var(--gap-32);
@@ -18,10 +18,10 @@
         opacity 500ms ease-in-out,
         margin-bottom 270ms ease-in-out;
 }
-.gallery__subtitles_k5m0k.gallery__mobile_k5m0k {
+.gallery__subtitles_1lymx.gallery__mobile_1lymx {
         position: static;
         position: initial;
     }
-.gallery__hideSubtitles_k5m0k {
+.gallery__hideSubtitles_1lymx {
     opacity: 0;
 }

package/modern/components/subtitles/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"subtitles":"gallery__subtitles_k5m0k","mobile":"gallery__mobile_k5m0k","hideSubtitles":"gallery__hideSubtitles_k5m0k"};
+const styles = {"subtitles":"gallery__subtitles_1lymx","mobile":"gallery__mobile_1lymx","hideSubtitles":"gallery__hideSubtitles_1lymx"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/index.css

@@ -13,7 +13,7 @@
     --sat: env(safe-area-inset-top, var(--gap-0));
     --sab: env(safe-area-inset-bottom, var(--gap-0));
 }
-.gallery__container_1bs89 {
+.gallery__container_41lre {
     position: relative;
     overflow-x: hidden;
     overflow-y: auto;
@@ -21,21 +21,23 @@
     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);
     padding-bottom: var(--sab);
 }
-.gallery__container_1bs89.gallery__mobile_1bs89 {
+.gallery__container_41lre.gallery__mobile_41lre {
         overflow: hidden;
     }
-.gallery__modal_1bs89 {
+.gallery__modal_41lre {
     flex-grow: 1;
     width: 100vw;
     height: 100vh;
+    height: 100dvh;
     background: transparent;
 }
-.gallery__navigationVideo_1bs89 {
+.gallery__navigationVideo_41lre {
     z-index: 3;
     width: 100%;
     position: absolute;
@@ -44,18 +46,18 @@
     transition: transform 0.3s ease-in-out;
     text-align: center;
 }
-.gallery__hide_1bs89 {
+.gallery__hide_41lre {
     transform: translateY(114px);
 }
-.gallery__hideInfo_1bs89 {
+.gallery__hideInfo_41lre {
     transform: translateY(48px);
 }
-.gallery__bottomButton_1bs89 {
+.gallery__bottomButton_41lre {
     width: calc(100% - var(--gap-32));
     margin: var(--gap-16);
     background-color: var(--color-static-neutral-translucent-500-inverted);
 }
-.gallery__subtitles_1bs89 {
+.gallery__subtitles_41lre {
     padding: var(--gap-0) var(--gap-32);
     margin-bottom: var(--gap-16);
     width: 100%;
@@ -66,6 +68,6 @@
         opacity 500ms ease-in-out,
         margin-bottom 270ms ease-in-out;
 }
-.gallery__hideSubtitles_1bs89 {
+.gallery__hideSubtitles_41lre {
     opacity: 0;
 }

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"container":"gallery__container_1bs89","mobile":"gallery__mobile_1bs89","modal":"gallery__modal_1bs89","navigationVideo":"gallery__navigationVideo_1bs89","hide":"gallery__hide_1bs89","hideInfo":"gallery__hideInfo_1bs89","bottomButton":"gallery__bottomButton_1bs89"};
+const styles = {"container":"gallery__container_41lre","mobile":"gallery__mobile_41lre","modal":"gallery__modal_41lre","navigationVideo":"gallery__navigationVideo_41lre","hide":"gallery__hide_41lre","hideInfo":"gallery__hideInfo_41lre","bottomButton":"gallery__bottomButton_41lre"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.container {\n    position: relative;\n    overflow-x: hidden;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: 100%;\n    width: 100%;\n    background-color: var(--color-static-neutral-0-inverted);\n    padding-top: var(--sat);\n    padding-bottom: var(--sab);\n\n    &.mobile {\n        overflow: hidden;\n    }\n}\n\n.modal {\n    flex-grow: 1;\n    width: 100vw;\n    height: 100vh;\n    background: transparent;\n}\n\n.navigationVideo {\n    z-index: 3;\n    width: 100%;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    transition: transform 0.3s ease-in-out;\n    text-align: center;\n}\n\n.hide {\n    transform: translateY(114px);\n}\n\n.hideInfo {\n    transform: translateY(48px);\n}\n\n.bottomButton {\n    width: calc(100% - var(--gap-32));\n    margin: var(--gap-16);\n    background-color: var(--color-static-neutral-translucent-500-inverted);\n}\n\n.subtitles {\n    padding: var(--gap-0) var(--gap-32);\n    margin-bottom: var(--gap-16);\n    width: 100%;\n    text-align: center;\n    opacity: 1;\n    z-index: 1;\n    transition:\n        opacity 500ms ease-in-out,\n        margin-bottom 270ms ease-in-out;\n}\n\n.hideSubtitles {\n    opacity: 0;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,OAAO,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,MAAM,CAAC,qBAAqB,CAAC,UAAU,CAAC,yBAAyB,CAAC,cAAc,CAAC,6BAAmH,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/safe-area.css';\n\n.container {\n    position: relative;\n    overflow-x: hidden;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: 100%;\n    height: 100dvh;\n    width: 100%;\n    background-color: var(--color-static-neutral-0-inverted);\n    padding-top: var(--sat);\n    padding-bottom: var(--sab);\n\n    &.mobile {\n        overflow: hidden;\n    }\n}\n\n.modal {\n    flex-grow: 1;\n    width: 100vw;\n    height: 100vh;\n    height: 100dvh;\n    background: transparent;\n}\n\n.navigationVideo {\n    z-index: 3;\n    width: 100%;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    transition: transform 0.3s ease-in-out;\n    text-align: center;\n}\n\n.hide {\n    transform: translateY(114px);\n}\n\n.hideInfo {\n    transform: translateY(48px);\n}\n\n.bottomButton {\n    width: calc(100% - var(--gap-32));\n    margin: var(--gap-16);\n    background-color: var(--color-static-neutral-translucent-500-inverted);\n}\n\n.subtitles {\n    padding: var(--gap-0) var(--gap-32);\n    margin-bottom: var(--gap-16);\n    width: 100%;\n    text-align: center;\n    opacity: 1;\n    z-index: 1;\n    transition:\n        opacity 500ms ease-in-out,\n        margin-bottom 270ms ease-in-out;\n}\n\n.hideSubtitles {\n    opacity: 0;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,OAAO,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,gCAAgC,CAAC,MAAM,CAAC,qBAAqB,CAAC,UAAU,CAAC,yBAAyB,CAAC,cAAc,CAAC,6BAAmH,CAAC;;;;"}

package/moderncssm/Component.js

@@ -62,9 +62,12 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
         slideTo(nextIndex);
     }, [images.length, loop, currentSlideIndex, slideTo]);
     const setImageMeta = useCallback((meta, index) => {
-        imagesMeta[index] = meta;
-        setImagesMeta(imagesMeta.slice());
-    }, [imagesMeta]);
+        setImagesMeta((prevImagesMeta) => {
+            const nextImagesMeta = prevImagesMeta.slice();
+            nextImagesMeta[index] = meta;
+            return nextImagesMeta;
+        });
+    }, []);
     const handleBottomButtonClick = useCallback((e) => {
         e.stopPropagation();
         if (bottomButton?.onClick) {

package/moderncssm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { type FC, type MouseEvent, useCallback, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport type SwiperCore from 'swiper';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { BottomButton } from './components/bottom-button';\nimport { Single } from './components/image-viewer/single';\nimport { Subtitles } from './components/subtitles';\nimport { Header, HeaderMobile, ImageViewer, InfoBar, NavigationBar } from './components';\nimport { SWIPE_THRESHOLD } from './constants';\nimport { GalleryContext } from './context';\nimport { type GalleryImage, type ImageMeta } from './types';\n\nimport styles from './index.module.css';\n\nexport type GalleryProps = {\n    /**\n     * Управление видимостью\n     */\n    open: boolean;\n\n    /**\n     * Массив изображений\n     */\n    images: GalleryImage[];\n\n    /**\n     * Зациклить галерею\n     * @default true\n     */\n    loop?: boolean;\n\n    /**\n     * Индекс открытого изображение\n     * @default 0\n     */\n    initialSlide?: number;\n\n    /**\n     * Обработчик закрытия\n     */\n    onClose: () => void;\n\n    /**\n     * Индекс текущего изображения\n     */\n    slideIndex?: number;\n\n    /**\n     * Обработчик изменения текущего изображения\n     */\n    onSlideIndexChange?: (index: number) => void;\n\n    /**\n     * Дополнительный класс для попапа\n     */\n    popupClassName?: string;\n};\n\nconst DEFAULT_FULL_SCREEN = false;\nconst DEFAULT_MUTED_VIDEO = true;\nconst DEFAULT_PLAYING_VIDEO = true;\nconst DEFAULT_HIDE_NAVIGATION = false;\n\nconst Backdrop = () => null;\n\nexport const Gallery: FC<GalleryProps> = ({\n    open,\n    images,\n    slideIndex,\n    initialSlide = 0,\n    loop = true,\n    onClose,\n    onSlideIndexChange,\n    popupClassName,\n}) => {\n    const currentSlideIndexState = useState(initialSlide);\n    const uncontrolled = slideIndex === undefined;\n    const [currentSlideIndex, setCurrentSlideIndex] = uncontrolled\n        ? currentSlideIndexState\n        : [slideIndex, onSlideIndexChange];\n\n    const [swiper, setSwiper] = useState<SwiperCore>();\n    const [imagesMeta, setImagesMeta] = useState<ImageMeta[]>([]);\n    const [fullScreen, setFullScreen] = useState<boolean>(DEFAULT_FULL_SCREEN);\n    const [mutedVideo, setMutedVideo] = useState<boolean>(DEFAULT_MUTED_VIDEO);\n    const [playingVideo, setPlayingVideo] = useState<boolean>(DEFAULT_PLAYING_VIDEO);\n    const [hideNavigation, setHideNavigation] = useState<boolean>(DEFAULT_HIDE_NAVIGATION);\n\n    const isDesktop = useIsDesktop();\n\n    const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;\n\n    const bottomButton = images[currentSlideIndex]?.bottomButton;\n\n    const slideTo = useCallback(\n        (index: number) => {\n            if (images[index]) {\n                setCurrentSlideIndex?.(index);\n\n                if (swiper) {\n                    setPlayingVideo(true);\n                    swiper.slideTo(index);\n                }\n            }\n        },\n        [images, setCurrentSlideIndex, swiper],\n    );\n\n    const slideNext = useCallback(() => {\n        const lastIndex = images.length - 1;\n\n        let nextIndex = currentSlideIndex + 1;\n\n        if (nextIndex >= images.length) {\n            nextIndex = loop ? 0 : lastIndex;\n        }\n\n        slideTo(nextIndex);\n    }, [images.length, loop, currentSlideIndex, slideTo]);\n\n    const slidePrev = useCallback(() => {\n        const lastIndex = images.length - 1;\n\n        let nextIndex = currentSlideIndex - 1;\n\n        if (nextIndex < 0) {\n            nextIndex = loop ? lastIndex : 0;\n        }\n\n        slideTo(nextIndex);\n    }, [images.length, loop, currentSlideIndex, slideTo]);\n\n    const setImageMeta = useCallback(\n        (meta: ImageMeta, index: number) => {\n            imagesMeta[index] = meta;\n\n            setImagesMeta(imagesMeta.slice());\n        },\n        [imagesMeta],\n    );\n\n    const handleBottomButtonClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            if (bottomButton?.onClick) {\n                bottomButton.onClick(e);\n            }\n        },\n        [bottomButton],\n    );\n\n    const handleClose = useCallback(() => {\n        onClose();\n\n        if (uncontrolled) {\n            setCurrentSlideIndex?.(initialSlide);\n        }\n\n        setFullScreen(false);\n    }, [initialSlide, onClose, setCurrentSlideIndex, uncontrolled]);\n\n    const handleEscapeKeyDown = () => {\n        if (fullScreen) {\n            setFullScreen(false);\n        } else {\n            handleClose();\n        }\n    };\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (!open || fullScreen) {\n                return;\n            }\n\n            switch (event.key) {\n                case 'ArrowLeft':\n                    slidePrev();\n                    break;\n                case 'ArrowRight':\n                    slideNext();\n                    break;\n            }\n        },\n        [fullScreen, open, slideNext, slidePrev],\n    );\n\n    const onUnmount = useCallback(() => {\n        setPlayingVideo(DEFAULT_PLAYING_VIDEO);\n        setMutedVideo(DEFAULT_MUTED_VIDEO);\n    }, [setPlayingVideo]);\n\n    useEffect(() => {\n        if (!uncontrolled && !swiper?.destroyed) {\n            swiper?.slideTo(currentSlideIndex);\n        }\n    }, [uncontrolled, currentSlideIndex, swiper]);\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [handleKeyDown]);\n\n    useEffect(() => {\n        let startY: number;\n        const abortController = new AbortController();\n        const { signal } = abortController;\n\n        document.addEventListener(\n            'touchstart',\n            (e) => {\n                startY = e.touches[0].clientY;\n            },\n            { signal },\n        );\n\n        document.addEventListener(\n            'touchmove',\n            (e) => {\n                const endY = e.changedTouches[0].clientY;\n                const deltaY = startY - endY;\n\n                // Если свайп вниз, закрываем галерею\n                if (deltaY < SWIPE_THRESHOLD) {\n                    onClose();\n                }\n            },\n            { signal },\n        );\n\n        return () => {\n            abortController.abort();\n        };\n    }, [onClose]);\n\n    const singleSlide = images.length === 1;\n\n    const showNavigationBar = !singleSlide && !fullScreen;\n\n    // eslint-disable-next-line react/jsx-no-constructed-context-values\n    const galleryContext: GalleryContext = {\n        view: isDesktop ? 'desktop' : 'mobile',\n        singleSlide,\n        currentSlideIndex,\n        images,\n        imagesMeta,\n        fullScreen,\n        initialSlide: uncontrolled ? initialSlide : currentSlideIndex,\n        setFullScreen,\n        playingVideo,\n        setPlayingVideo,\n        mutedVideo,\n        setMutedVideo,\n        hideNavigation,\n        setHideNavigation,\n        setImageMeta,\n        slideNext,\n        slidePrev,\n        slideTo,\n        getSwiper: () => swiper,\n        setSwiper,\n        onClose: handleClose,\n        setCurrentSlideIndex,\n        getCurrentImage: () => images[currentSlideIndex],\n        getCurrentImageMeta: () => imagesMeta[currentSlideIndex],\n    };\n\n    return (\n        <GalleryContext.Provider value={galleryContext}>\n            <BaseModal\n                open={open}\n                className={cn(styles.modal, popupClassName)}\n                onEscapeKeyDown={handleEscapeKeyDown}\n                Backdrop={Backdrop}\n                onUnmount={onUnmount}\n            >\n                <div\n                    className={cn(styles.container, {\n                        [styles.mobile]: !isDesktop,\n                    })}\n                >\n                    {isDesktop ? <Header /> : <HeaderMobile />}\n                    {images.length === 1 ? <Single /> : <ImageViewer />}\n                    <nav\n                        className={cn({\n                            [styles.navigationVideo]: isCurrentVideo && !isDesktop,\n                            [styles.hide]: showNavigationBar && hideNavigation && !isDesktop,\n                            [styles.hideInfo]: !showNavigationBar && hideNavigation && !isDesktop,\n                        })}\n                    >\n                        {!isDesktop && <Subtitles />}\n                        {isCurrentVideo && !isDesktop && bottomButton && (\n                            <BottomButton\n                                bottomButton={bottomButton}\n                                onClick={handleBottomButtonClick}\n                                className={styles.bottomButton}\n                            />\n                        )}\n\n                        {showNavigationBar && <NavigationBar />}\n                        {!isDesktop && <InfoBar />}\n                    </nav>\n                </div>\n            </BaseModal>\n        </GalleryContext.Provider>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { type FC, type MouseEvent, useCallback, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport type SwiperCore from 'swiper';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { BottomButton } from './components/bottom-button';\nimport { Single } from './components/image-viewer/single';\nimport { Subtitles } from './components/subtitles';\nimport { Header, HeaderMobile, ImageViewer, InfoBar, NavigationBar } from './components';\nimport { SWIPE_THRESHOLD } from './constants';\nimport { GalleryContext } from './context';\nimport { type GalleryImage, type ImageMeta } from './types';\n\nimport styles from './index.module.css';\n\nexport type GalleryProps = {\n    /**\n     * Управление видимостью\n     */\n    open: boolean;\n\n    /**\n     * Массив изображений\n     */\n    images: GalleryImage[];\n\n    /**\n     * Зациклить галерею\n     * @default true\n     */\n    loop?: boolean;\n\n    /**\n     * Индекс открытого изображение\n     * @default 0\n     */\n    initialSlide?: number;\n\n    /**\n     * Обработчик закрытия\n     */\n    onClose: () => void;\n\n    /**\n     * Индекс текущего изображения\n     */\n    slideIndex?: number;\n\n    /**\n     * Обработчик изменения текущего изображения\n     */\n    onSlideIndexChange?: (index: number) => void;\n\n    /**\n     * Дополнительный класс для попапа\n     */\n    popupClassName?: string;\n};\n\nconst DEFAULT_FULL_SCREEN = false;\nconst DEFAULT_MUTED_VIDEO = true;\nconst DEFAULT_PLAYING_VIDEO = true;\nconst DEFAULT_HIDE_NAVIGATION = false;\n\nconst Backdrop = () => null;\n\nexport const Gallery: FC<GalleryProps> = ({\n    open,\n    images,\n    slideIndex,\n    initialSlide = 0,\n    loop = true,\n    onClose,\n    onSlideIndexChange,\n    popupClassName,\n}) => {\n    const currentSlideIndexState = useState(initialSlide);\n    const uncontrolled = slideIndex === undefined;\n    const [currentSlideIndex, setCurrentSlideIndex] = uncontrolled\n        ? currentSlideIndexState\n        : [slideIndex, onSlideIndexChange];\n\n    const [swiper, setSwiper] = useState<SwiperCore>();\n    const [imagesMeta, setImagesMeta] = useState<ImageMeta[]>([]);\n    const [fullScreen, setFullScreen] = useState<boolean>(DEFAULT_FULL_SCREEN);\n    const [mutedVideo, setMutedVideo] = useState<boolean>(DEFAULT_MUTED_VIDEO);\n    const [playingVideo, setPlayingVideo] = useState<boolean>(DEFAULT_PLAYING_VIDEO);\n    const [hideNavigation, setHideNavigation] = useState<boolean>(DEFAULT_HIDE_NAVIGATION);\n\n    const isDesktop = useIsDesktop();\n\n    const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;\n\n    const bottomButton = images[currentSlideIndex]?.bottomButton;\n\n    const slideTo = useCallback(\n        (index: number) => {\n            if (images[index]) {\n                setCurrentSlideIndex?.(index);\n\n                if (swiper) {\n                    setPlayingVideo(true);\n                    swiper.slideTo(index);\n                }\n            }\n        },\n        [images, setCurrentSlideIndex, swiper],\n    );\n\n    const slideNext = useCallback(() => {\n        const lastIndex = images.length - 1;\n\n        let nextIndex = currentSlideIndex + 1;\n\n        if (nextIndex >= images.length) {\n            nextIndex = loop ? 0 : lastIndex;\n        }\n\n        slideTo(nextIndex);\n    }, [images.length, loop, currentSlideIndex, slideTo]);\n\n    const slidePrev = useCallback(() => {\n        const lastIndex = images.length - 1;\n\n        let nextIndex = currentSlideIndex - 1;\n\n        if (nextIndex < 0) {\n            nextIndex = loop ? lastIndex : 0;\n        }\n\n        slideTo(nextIndex);\n    }, [images.length, loop, currentSlideIndex, slideTo]);\n\n    const setImageMeta = useCallback((meta: ImageMeta, index: number) => {\n        setImagesMeta((prevImagesMeta) => {\n            const nextImagesMeta = prevImagesMeta.slice();\n\n            nextImagesMeta[index] = meta;\n\n            return nextImagesMeta;\n        });\n    }, []);\n\n    const handleBottomButtonClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            if (bottomButton?.onClick) {\n                bottomButton.onClick(e);\n            }\n        },\n        [bottomButton],\n    );\n\n    const handleClose = useCallback(() => {\n        onClose();\n\n        if (uncontrolled) {\n            setCurrentSlideIndex?.(initialSlide);\n        }\n\n        setFullScreen(false);\n    }, [initialSlide, onClose, setCurrentSlideIndex, uncontrolled]);\n\n    const handleEscapeKeyDown = () => {\n        if (fullScreen) {\n            setFullScreen(false);\n        } else {\n            handleClose();\n        }\n    };\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (!open || fullScreen) {\n                return;\n            }\n\n            switch (event.key) {\n                case 'ArrowLeft':\n                    slidePrev();\n                    break;\n                case 'ArrowRight':\n                    slideNext();\n                    break;\n            }\n        },\n        [fullScreen, open, slideNext, slidePrev],\n    );\n\n    const onUnmount = useCallback(() => {\n        setPlayingVideo(DEFAULT_PLAYING_VIDEO);\n        setMutedVideo(DEFAULT_MUTED_VIDEO);\n    }, [setPlayingVideo]);\n\n    useEffect(() => {\n        if (!uncontrolled && !swiper?.destroyed) {\n            swiper?.slideTo(currentSlideIndex);\n        }\n    }, [uncontrolled, currentSlideIndex, swiper]);\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [handleKeyDown]);\n\n    useEffect(() => {\n        let startY: number;\n        const abortController = new AbortController();\n        const { signal } = abortController;\n\n        document.addEventListener(\n            'touchstart',\n            (e) => {\n                startY = e.touches[0].clientY;\n            },\n            { signal },\n        );\n\n        document.addEventListener(\n            'touchmove',\n            (e) => {\n                const endY = e.changedTouches[0].clientY;\n                const deltaY = startY - endY;\n\n                // Если свайп вниз, закрываем галерею\n                if (deltaY < SWIPE_THRESHOLD) {\n                    onClose();\n                }\n            },\n            { signal },\n        );\n\n        return () => {\n            abortController.abort();\n        };\n    }, [onClose]);\n\n    const singleSlide = images.length === 1;\n\n    const showNavigationBar = !singleSlide && !fullScreen;\n\n    // eslint-disable-next-line react/jsx-no-constructed-context-values\n    const galleryContext: GalleryContext = {\n        view: isDesktop ? 'desktop' : 'mobile',\n        singleSlide,\n        currentSlideIndex,\n        images,\n        imagesMeta,\n        fullScreen,\n        initialSlide: uncontrolled ? initialSlide : currentSlideIndex,\n        setFullScreen,\n        playingVideo,\n        setPlayingVideo,\n        mutedVideo,\n        setMutedVideo,\n        hideNavigation,\n        setHideNavigation,\n        setImageMeta,\n        slideNext,\n        slidePrev,\n        slideTo,\n        getSwiper: () => swiper,\n        setSwiper,\n        onClose: handleClose,\n        setCurrentSlideIndex,\n        getCurrentImage: () => images[currentSlideIndex],\n        getCurrentImageMeta: () => imagesMeta[currentSlideIndex],\n    };\n\n    return (\n        <GalleryContext.Provider value={galleryContext}>\n            <BaseModal\n                open={open}\n                className={cn(styles.modal, popupClassName)}\n                onEscapeKeyDown={handleEscapeKeyDown}\n                Backdrop={Backdrop}\n                onUnmount={onUnmount}\n            >\n                <div\n                    className={cn(styles.container, {\n                        [styles.mobile]: !isDesktop,\n                    })}\n                >\n                    {isDesktop ? <Header /> : <HeaderMobile />}\n                    {images.length === 1 ? <Single /> : <ImageViewer />}\n                    <nav\n                        className={cn({\n                            [styles.navigationVideo]: isCurrentVideo && !isDesktop,\n                            [styles.hide]: showNavigationBar && hideNavigation && !isDesktop,\n                            [styles.hideInfo]: !showNavigationBar && hideNavigation && !isDesktop,\n                        })}\n                    >\n                        {!isDesktop && <Subtitles />}\n                        {isCurrentVideo && !isDesktop && bottomButton && (\n                            <BottomButton\n                                bottomButton={bottomButton}\n                                onClick={handleBottomButtonClick}\n                                className={styles.bottomButton}\n                            />\n                        )}\n\n                        {showNavigationBar && <NavigationBar />}\n                        {!isDesktop && <InfoBar />}\n                    </nav>\n                </div>\n            </BaseModal>\n        </GalleryContext.Provider>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/components/image-viewer/component.js

@@ -6,7 +6,7 @@ import { useFocus } from '@alfalab/hooks';
 import { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import { GalleryContext } from '../../context.js';
-import { isVideo, getImageAlt, getImageKey } from '../../utils/utils.js';
+import { isVideo, getImageKey } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
 import { useHandleImageViewer } from './hooks.js';
 import { Slide } from './slide.js';
@@ -79,18 +79,26 @@ const ImageViewer = () => {
                 [styles.focused]: leftArrowFocused,
             }), onClick: handlePrevClick, role: 'button', onKeyDown: handleArrowLeftKeyDown, tabIndex: 0, ref: leftArrowRef, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0435\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435', "data-test-id": TestIds.PREV_SLIDE_BUTTON },
             React.createElement(ChevronBackHeavyMIcon, null))),
-        fullScreen && !isVideo(currentImage?.src) && (React.createElement("img", { src: currentImage?.src, alt: currentImage ? getImageAlt(currentImage, currentSlideIndex) : '', className: styles.fullScreenImage })),
-        React.createElement(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 (React.createElement(SwiperSlide, { key: getImageKey(image, index), style: {
-                    pointerEvents: slideVisible ? 'auto' : 'none',
-                    transitionProperty: 'opacity',
-                } }, ({ isActive }) => (React.createElement(Slide, { isActive: isActive, containerAspectRatio: swiperAspectRatio, image: image, containerHeight: swiperHeight, meta: meta, index: index, imageAspectRatio: imageAspectRatio, slideVisible: slideVisible }))));
-        })),
+        fullScreen && currentImage && !isVideo(currentImage.src) && (React.createElement("div", { className: styles.fullScreenFrame },
+            React.createElement(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 }))),
+        React.createElement("div", { className: cn(styles.swiperFrame, {
+                [styles.mobile]: isMobile,
+                [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
+                [styles.fullScreenFrame]: fullScreen,
+                [styles.hiddenFrame]: fullScreen && !isVideo(currentImage?.src),
+            }) },
+            React.createElement(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 (React.createElement(SwiperSlide, { key: getImageKey(image, index), style: {
+                        pointerEvents: slideVisible ? 'auto' : 'none',
+                        transitionProperty: 'opacity',
+                    } }, ({ isActive }) => (React.createElement(Slide, { isActive: isActive, containerAspectRatio: swiperAspectRatio, image: image, containerHeight: swiperHeight, meta: meta, index: index, imageAspectRatio: imageAspectRatio, slideVisible: slideVisible, fullScreen: fullScreen && isVideo(image.src) }))));
+            }))),
         showControls && (React.createElement("div", { className: cn(styles.arrow, {
                 [styles.focused]: rightArrowFocused,
             }), onClick: handleNextClick, role: 'button', onKeyDown: handleArrowRightKeyDown, tabIndex: 0, ref: rightArrowRef, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435', "data-test-id": TestIds.NEXT_SLIDE_BUTTON },

package/moderncssm/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/moderncssm/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);
     :global(.swiper) {
         margin-left: auto;
@@ -67,46 +68,80 @@
         z-index: -1000;
     }
 
-    .swiper {
+    .swiperFrame {
         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;
     }
 
-        .swiper.mobile {
+        .swiperFrame.mobile {
             max-height: calc(100vh - 210px);
+            max-height: calc(100dvh - 210px);
         }
 
-        .swiper.mobileVideo {
+        .swiperFrame.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;
     }
 
         .singleSlideContainer.mobile {
             max-height: calc(100vh - 174px);
+            max-height: calc(100dvh - 174px);
             padding: 0;
         }
 
         .singleSlideContainer.mobileVideo {
             max-height: 100vh;
+            max-height: 100dvh;
         }
 
-    .hidden {
-        display: none;
-    }
-
     .slide {
         position: relative;
         display: flex;
@@ -127,8 +162,12 @@
     }
 
     .image {
-        width: 0;
-        height: 0;
+        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;
@@ -143,6 +182,10 @@
         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;
@@ -158,6 +201,16 @@
         height: auto;
     }
 
+    .fullScreenMedia {
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        -o-object-fit: contain;
+           object-fit: contain;
+        border-radius: var(--border-radius-0);
+    }
+
     .arrow {
         display: flex;
         flex-direction: column;
@@ -210,14 +263,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;
     }
 }

package/moderncssm/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';
@@ -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/moderncssm/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/moderncssm/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/moderncssm/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/moderncssm';
 import { TypographyText } from '@alfalab/core-components-typography/moderncssm';
@@ -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 };