@alfalab/core-components-gallery 7.2.3 → 7.3.0

package/modern/components/image-preview/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/image-preview/Component.tsx"],"sourcesContent":["import React, {\n    type FC,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport cn from 'classnames';\n\nimport { useFocus } from '@alfalab/hooks';\n\nimport {\n    PREVIEW_HEIGHT_DESKTOP,\n    PREVIEW_HEIGHT_MOBILE,\n    PREVIEW_VIDEO_MULTIPLIER,\n    PREVIEW_WIDTH_DESKTOP,\n    PREVIEW_WIDTH_MOBILE,\n} from '../../constants';\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage } from '../../types';\nimport { getImageAlt, isVideo } from '../../utils';\n\nimport { NoImagePaths } from './paths';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    image: GalleryImage;\n    index: number;\n    active?: boolean;\n    onSelect: (index: number) => void;\n    className: string;\n};\n\nexport const ImagePreview: FC<Props> = ({ image, active = false, index, onSelect, className }) => {\n    const { imagesMeta, view } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n\n    const previewWidth = isMobile ? PREVIEW_WIDTH_MOBILE : PREVIEW_WIDTH_DESKTOP;\n    const previewHeight = isMobile ? PREVIEW_HEIGHT_MOBILE : PREVIEW_HEIGHT_DESKTOP;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n        const video = imagesMeta[index]?.player?.current;\n        const context = canvas?.getContext('2d');\n        const drawPreview = () => {\n            if (video) {\n                context?.drawImage(\n                    video,\n                    0,\n                    0,\n                    video.videoWidth / PREVIEW_VIDEO_MULTIPLIER,\n                    video.videoHeight / PREVIEW_VIDEO_MULTIPLIER,\n                );\n            }\n        };\n\n        drawPreview();\n\n        if (isVideo(image.src)) {\n            video?.addEventListener('canplay', drawPreview);\n        }\n\n        return () => {\n            if (isVideo(image.src)) {\n                video?.removeEventListener('canplay', drawPreview);\n            }\n        };\n    }, [image.src, imagesMeta, index]);\n\n    const handleClick = () => {\n        onSelect(index);\n    };\n\n    const handleKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            onSelect(index);\n        }\n    };\n\n    const handleDragStart: MouseEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n    };\n\n    const [focused] = useFocus(ref, 'keyboard');\n\n    const meta = imagesMeta[index];\n\n    const isBroken = Boolean(meta?.broken);\n\n    const renderPreview = () => {\n        if (isBroken) {\n            return (\n                <div\n                    className={cn(\n                        styles.preview,\n                        { [styles.mobile]: isMobile, [styles.active]: active },\n                        styles.brokenImageWrapper,\n                    )}\n                >\n                    <div className={cn(styles.brokenIcon)}>\n                        <svg\n                            xmlns='http://www.w3.org/2000/svg'\n                            width={previewWidth}\n                            height={previewHeight}\n                            viewBox={`${isMobile ? -6 : 0} ${\n                                isMobile ? -12 : 0\n                            } ${previewWidth} ${previewHeight}`}\n                            fill='none'\n                        >\n                            <rect fill='none' />\n                            <path\n                                fillRule='evenodd'\n                                clipRule='evenodd'\n                                d={isMobile ? NoImagePaths.mobileImage : NoImagePaths.baseImage}\n                                fill='#89898A'\n                            />\n                            <path\n                                d={\n                                    isMobile\n                                        ? NoImagePaths.mobileTriangle\n                                        : NoImagePaths.triangleImage\n                                }\n                                fill='#89898A'\n                            />\n                        </svg>\n                    </div>\n                </div>\n            );\n        }\n\n        if (image.previewSrc) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <img src={image.previewSrc} alt={getImageAlt(image, index)} />\n                </div>\n            );\n        }\n\n        if (isVideo(image.src)) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <canvas\n                        className={cn(styles.canvasPreview, { [styles.mobile]: isMobile })}\n                        data-testid='canvas'\n                        width={previewWidth}\n                        height={previewHeight}\n                        ref={canvasRef}\n                    />\n                </div>\n            );\n        }\n\n        return (\n            <div\n                className={cn(styles.preview, styles.image, {\n                    [styles.loading]: !meta,\n                    [styles.mobile]: isMobile,\n                })}\n            >\n                <img src={image.src} alt={getImageAlt(image, index)} />\n            </div>\n        );\n    };\n\n    return (\n        <div\n            className={cn(\n                styles.component,\n                {\n                    [styles.active]: active,\n                    [styles.focused]: focused,\n                    [styles.mobile]: isMobile,\n                },\n                className,\n            )}\n            onClick={handleClick}\n            role='button'\n            onKeyDown={handleKeyDown}\n            onMouseDown={handleDragStart}\n            tabIndex={0}\n            ref={ref}\n            aria-label={`Перейти к ${index + 1} элементу`}\n        >\n            {renderPreview()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/image-preview/Component.tsx"],"sourcesContent":["import React, {\n    type FC,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport cn from 'classnames';\n\nimport { useFocus } from '@alfalab/hooks';\n\nimport {\n    PREVIEW_HEIGHT_DESKTOP,\n    PREVIEW_HEIGHT_MOBILE,\n    PREVIEW_VIDEO_MULTIPLIER,\n    PREVIEW_WIDTH_DESKTOP,\n    PREVIEW_WIDTH_MOBILE,\n} from '../../constants';\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage } from '../../types';\nimport { getImageAlt, isVideo } from '../../utils';\n\nimport { NoImagePaths } from './paths';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    image: GalleryImage;\n    index: number;\n    active?: boolean;\n    onSelect: (index: number) => void;\n    className: string;\n};\n\nexport const ImagePreview: FC<Props> = ({ image, active = false, index, onSelect, className }) => {\n    const { imagesMeta, view } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n\n    const previewWidth = isMobile ? PREVIEW_WIDTH_MOBILE : PREVIEW_WIDTH_DESKTOP;\n    const previewHeight = isMobile ? PREVIEW_HEIGHT_MOBILE : PREVIEW_HEIGHT_DESKTOP;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n        const video = imagesMeta[index]?.player?.current;\n        const context = canvas?.getContext('2d');\n        const drawPreview = () => {\n            if (video) {\n                context?.drawImage(\n                    video,\n                    0,\n                    0,\n                    video.videoWidth / PREVIEW_VIDEO_MULTIPLIER,\n                    video.videoHeight / PREVIEW_VIDEO_MULTIPLIER,\n                );\n            }\n        };\n\n        drawPreview();\n\n        if (isVideo(image.src)) {\n            video?.addEventListener('canplay', drawPreview);\n        }\n\n        return () => {\n            if (isVideo(image.src)) {\n                video?.removeEventListener('canplay', drawPreview);\n            }\n        };\n    }, [image.src, imagesMeta, index]);\n\n    const handleClick = () => {\n        onSelect(index);\n    };\n\n    const handleKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            onSelect(index);\n        }\n    };\n\n    const handleDragStart: MouseEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n    };\n\n    const [focused] = useFocus(ref, 'keyboard');\n\n    const meta = imagesMeta[index];\n\n    const isBroken = Boolean(meta?.broken);\n\n    const renderPreview = () => {\n        if (isBroken) {\n            return (\n                <div\n                    className={cn(\n                        styles.preview,\n                        { [styles.mobile]: isMobile, [styles.active]: active },\n                        styles.brokenImageWrapper,\n                    )}\n                >\n                    <div className={cn(styles.brokenIcon)}>\n                        <svg\n                            xmlns='http://www.w3.org/2000/svg'\n                            width={previewWidth}\n                            height={previewHeight}\n                            viewBox={`${isMobile ? -6 : 0} ${\n                                isMobile ? -12 : 0\n                            } ${previewWidth} ${previewHeight}`}\n                            fill='none'\n                        >\n                            <rect fill='none' />\n                            <path\n                                fillRule='evenodd'\n                                clipRule='evenodd'\n                                d={isMobile ? NoImagePaths.mobileImage : NoImagePaths.baseImage}\n                                fill='#89898A'\n                            />\n                            <path\n                                d={\n                                    isMobile\n                                        ? NoImagePaths.mobileTriangle\n                                        : NoImagePaths.triangleImage\n                                }\n                                fill='#89898A'\n                            />\n                        </svg>\n                    </div>\n                </div>\n            );\n        }\n\n        if (image.previewSrc) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <img src={image.previewSrc} alt={getImageAlt(image, index)} />\n                </div>\n            );\n        }\n\n        if (isVideo(image.src)) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta?.loaded,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <canvas\n                        className={cn(styles.canvasPreview, { [styles.mobile]: isMobile })}\n                        data-testid='canvas'\n                        width={previewWidth}\n                        height={previewHeight}\n                        ref={canvasRef}\n                    />\n                </div>\n            );\n        }\n\n        return (\n            <div\n                className={cn(styles.preview, styles.image, {\n                    [styles.loading]: !meta,\n                    [styles.mobile]: isMobile,\n                })}\n            >\n                <img src={image.src} alt={getImageAlt(image, index)} />\n            </div>\n        );\n    };\n\n    return (\n        <div\n            className={cn(\n                styles.component,\n                {\n                    [styles.active]: active,\n                    [styles.focused]: focused,\n                    [styles.mobile]: isMobile,\n                },\n                className,\n            )}\n            onClick={handleClick}\n            role='button'\n            onKeyDown={handleKeyDown}\n            onMouseDown={handleDragStart}\n            tabIndex={0}\n            ref={ref}\n            aria-label={`Перейти к ${index + 1} элементу`}\n        >\n            {renderPreview()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 :root {
     --color-light-status-info: #2288fa;
     --color-static-neutral-100-inverted: #1c1c1e;
-    --color-static-neutral-300-inverted: #29292c;
+    --color-static-neutral-translucent-100-inverted: rgba(214, 214, 229, 0.07);
 }
 :root {
     --border-radius-8: 8px;
@@ -10,23 +10,23 @@
 :root {
     --focus-color: var(--color-light-status-info);
 }
-.gallery__component_8gxye {
+.gallery__component_1p08d {
     display: flex;
     z-index: 3;
     overflow: hidden;
     transition: border 0.15s ease-in-out;
     outline: none;
 }
-.gallery__component_8gxye .gallery__image_8gxye {
+.gallery__component_1p08d .gallery__image_1p08d {
         opacity: 0.3;
     }
-.gallery__component_8gxye.gallery__mobile_8gxye {
+.gallery__component_1p08d.gallery__mobile_1p08d {
         padding: 0;
     }
-.gallery__active_8gxye > .gallery__image_8gxye {
+.gallery__active_1p08d > .gallery__image_1p08d {
         opacity: 1;
     }
-.gallery__preview_8gxye {
+.gallery__preview_1p08d {
     width: 56px;
     height: 56px;
     flex-shrink: 0;
@@ -36,15 +36,15 @@
        -moz-user-select: none;
             user-select: none;
 }
-.gallery__preview_8gxye.gallery__mobile_8gxye {
+.gallery__preview_1p08d.gallery__mobile_1p08d {
         width: 46px;
         height: 46px;
         border-radius: var(--border-radius-8);
     }
-.gallery__image_8gxye {
+.gallery__image_1p08d {
     transition: opacity 0.15s ease-in-out;
 }
-.gallery__image_8gxye > img {
+.gallery__image_1p08d > img {
         display: block;
         width: 100%;
         height: 100%;
@@ -54,36 +54,36 @@
         overflow: clip;
         overflow-clip-margin: border-box;
     }
-.gallery__image_8gxye:hover {
+.gallery__image_1p08d:hover {
         opacity: 0.7;
     }
-.gallery__loading_8gxye {
+.gallery__loading_1p08d {
     background-color: var(--color-static-neutral-100-inverted);
 }
-.gallery__loading_8gxye .gallery__active_8gxye {
-        background-color: var(--color-static-neutral-300-inverted);
+.gallery__loading_1p08d .gallery__active_1p08d {
+        background-color: var(--color-static-neutral-translucent-100-inverted);
     }
-.gallery__brokenImageWrapper_8gxye {
+.gallery__brokenImageWrapper_1p08d {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--color-static-neutral-300-inverted);
+    background-color: var(--color-static-neutral-translucent-100-inverted);
     opacity: 0.3;
 }
-.gallery__brokenImageWrapper_8gxye.gallery__active_8gxye {
+.gallery__brokenImageWrapper_1p08d.gallery__active_1p08d {
         opacity: 1;
     }
-.gallery__brokenIcon_8gxye {
+.gallery__brokenIcon_1p08d {
     width: 40px;
     height: 40px;
 }
-.gallery__focused_8gxye {
+.gallery__focused_1p08d {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.gallery__canvasPreview_8gxye {
+.gallery__canvasPreview_1p08d {
     border-radius: var(--border-radius-12);
 }
-.gallery__canvasPreview_8gxye.gallery__mobile_8gxye {
+.gallery__canvasPreview_1p08d.gallery__mobile_1p08d {
         border-radius: var(--border-radius-8);
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"gallery__component_8gxye","image":"gallery__image_8gxye","mobile":"gallery__mobile_8gxye","active":"gallery__active_8gxye","preview":"gallery__preview_8gxye","loading":"gallery__loading_8gxye","brokenImageWrapper":"gallery__brokenImageWrapper_8gxye","brokenIcon":"gallery__brokenIcon_8gxye","focused":"gallery__focused_8gxye","canvasPreview":"gallery__canvasPreview_8gxye"};
+const styles = {"component":"gallery__component_1p08d","image":"gallery__image_1p08d","mobile":"gallery__mobile_1p08d","active":"gallery__active_1p08d","preview":"gallery__preview_1p08d","loading":"gallery__loading_1p08d","brokenImageWrapper":"gallery__brokenImageWrapper_1p08d","brokenIcon":"gallery__brokenIcon_1p08d","focused":"gallery__focused_1p08d","canvasPreview":"gallery__canvasPreview_1p08d"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/image-preview/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    z-index: 3;\n    overflow: hidden;\n    transition: border 0.15s ease-in-out;\n    outline: none;\n\n    & .image {\n        opacity: 0.3;\n    }\n\n    &.mobile {\n        padding: 0;\n    }\n}\n\n.active {\n    & > .image {\n        opacity: 1;\n    }\n}\n\n.preview {\n    width: 56px;\n    height: 56px;\n    flex-shrink: 0;\n    border-radius: var(--border-radius-12);\n    cursor: pointer;\n    user-select: none;\n\n    &.mobile {\n        width: 46px;\n        height: 46px;\n        border-radius: var(--border-radius-8);\n    }\n}\n\n.image {\n    transition: opacity 0.15s ease-in-out;\n\n    & > img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n        object-fit: cover;\n        overflow: clip;\n        overflow-clip-margin: border-box;\n    }\n\n    &:hover {\n        opacity: 0.7;\n    }\n}\n\n.loading {\n    background-color: var(--color-static-neutral-100-inverted);\n\n    & .active {\n        background-color: var(--color-static-neutral-300-inverted);\n    }\n}\n\n.brokenImageWrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: var(--color-static-neutral-300-inverted);\n    opacity: 0.3;\n\n    &.active {\n        opacity: 1;\n    }\n}\n\n.brokenIcon {\n    width: 40px;\n    height: 40px;\n}\n\n.focused {\n    @mixin focus-outline;\n}\n\n.canvasPreview {\n    border-radius: var(--border-radius-12);\n\n    &.mobile {\n        border-radius: var(--border-radius-8);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,SAAS,CAAC,wBAAwB,CAAC,SAAS,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,mCAAmC,CAAC,YAAY,CAAC,2BAA2B,CAAC,SAAS,CAAC,wBAAwB,CAAC,eAAe,CAAC,8BAA8B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/image-preview/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    z-index: 3;\n    overflow: hidden;\n    transition: border 0.15s ease-in-out;\n    outline: none;\n\n    & .image {\n        opacity: 0.3;\n    }\n\n    &.mobile {\n        padding: 0;\n    }\n}\n\n.active {\n    & > .image {\n        opacity: 1;\n    }\n}\n\n.preview {\n    width: 56px;\n    height: 56px;\n    flex-shrink: 0;\n    border-radius: var(--border-radius-12);\n    cursor: pointer;\n    user-select: none;\n\n    &.mobile {\n        width: 46px;\n        height: 46px;\n        border-radius: var(--border-radius-8);\n    }\n}\n\n.image {\n    transition: opacity 0.15s ease-in-out;\n\n    & > img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n        object-fit: cover;\n        overflow: clip;\n        overflow-clip-margin: border-box;\n    }\n\n    &:hover {\n        opacity: 0.7;\n    }\n}\n\n.loading {\n    background-color: var(--color-static-neutral-100-inverted);\n\n    & .active {\n        background-color: var(--color-static-neutral-translucent-100-inverted);\n    }\n}\n\n.brokenImageWrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: var(--color-static-neutral-translucent-100-inverted);\n    opacity: 0.3;\n\n    &.active {\n        opacity: 1;\n    }\n}\n\n.brokenIcon {\n    width: 40px;\n    height: 40px;\n}\n\n.focused {\n    @mixin focus-outline;\n}\n\n.canvasPreview {\n    border-radius: var(--border-radius-12);\n\n    &.mobile {\n        border-radius: var(--border-radius-8);\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,SAAS,CAAC,wBAAwB,CAAC,SAAS,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,mCAAmC,CAAC,YAAY,CAAC,2BAA2B,CAAC,SAAS,CAAC,wBAAwB,CAAC,eAAe,CAAC,8BAA8B,CAAC;;;;"}

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

@@ -21,8 +21,9 @@ const useHandleImageViewer = () => {
         const isArrow = leftArrowRef.current?.contains(eventTarget) ||
             rightArrowRef.current?.contains(eventTarget);
         const isPlaceholder = Boolean(eventTarget.closest(`.${styles.placeholder}`));
-        const isImg = eventTarget.tagName === 'IMG';
-        if (!isImg && !isPlaceholder && !isArrow && !isMobile) {
+        const isContentArea = Boolean(eventTarget.closest('[data-content-area]'));
+        // Закрываем галерею только при клике вне элементов контента и только на desktop
+        if (!isPlaceholder && !isArrow && !isContentArea && !isMobile) {
             onClose();
         }
     }, [isMobile, onClose]);

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../src/components/image-viewer/hooks.ts"],"sourcesContent":["import {\n    type MouseEventHandler,\n    type SyntheticEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport elementClosest from 'element-closest';\n\nimport { GalleryContext } from '../../context';\n\nimport styles from './index.module.css';\n\nexport const useHandleImageViewer = () => {\n    const { view, onClose, setImageMeta } = useContext(GalleryContext);\n\n    const leftArrowRef = useRef<HTMLDivElement>(null);\n    const rightArrowRef = useRef<HTMLDivElement>(null);\n\n    const isMobile = view === 'mobile';\n\n    const handleLoad = (event: SyntheticEvent<HTMLImageElement>, index: number) => {\n        const target = event.currentTarget;\n\n        const { naturalWidth, naturalHeight } = target;\n\n        setImageMeta({ width: naturalWidth, height: naturalHeight }, index);\n    };\n\n    const handleLoadError = (index: number) => {\n        setImageMeta({ width: 0, height: 0, broken: true }, index);\n    };\n\n    const handleWrapperClick = useCallback<MouseEventHandler>(\n        (event) => {\n            const eventTarget = event.target as HTMLElement;\n\n            const isArrow =\n                leftArrowRef.current?.contains(eventTarget) ||\n                rightArrowRef.current?.contains(eventTarget);\n\n            const isPlaceholder = Boolean(eventTarget.closest(`.${styles.placeholder}`));\n\n            const isImg = eventTarget.tagName === 'IMG';\n\n            if (!isImg && !isPlaceholder && !isArrow && !isMobile) {\n                onClose();\n            }\n        },\n        [isMobile, onClose],\n    );\n\n    useEffect(() => {\n        elementClosest(window);\n    }, []);\n\n    return {\n        handleLoad,\n        handleLoadError,\n        handleWrapperClick,\n        isMobile,\n        leftArrowRef,\n        rightArrowRef,\n    };\n};\n"],"names":[],"mappings":";;;;;AAcO,MAAM,oBAAoB,GAAG,MAAK;AACrC,IAAA,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;AAElE,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,MAAM,UAAU,GAAG,CAAC,KAAuC,EAAE,KAAa,KAAI;AAC1E,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa;AAElC,QAAA,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,MAAM;AAE9C,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC;AACvE,KAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,KAAa,KAAI;AACtC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;AAC9D,KAAC;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,KAAK,KAAI;AACN,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAE/C,MAAM,OAAO,GACT,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC;AAC3C,YAAA,aAAa,CAAC,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC;AAEhD,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,MAAM,CAAC,WAAW,CAAE,CAAA,CAAC,CAAC;AAE5E,QAAA,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,KAAK,KAAK;AAE3C,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACnD,YAAA,OAAO,EAAE;;AAEjB,KAAC,EACD,CAAC,QAAQ,EAAE,OAAO,CAAC,CACtB;IAED,SAAS,CAAC,MAAK;QACX,cAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,OAAO;QACH,UAAU;QACV,eAAe;QACf,kBAAkB;QAClB,QAAQ;QACR,YAAY;QACZ,aAAa;KAChB;AACL;;;;"}
+{"version":3,"file":"hooks.js","sources":["../../../src/components/image-viewer/hooks.ts"],"sourcesContent":["import {\n    type MouseEventHandler,\n    type SyntheticEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport elementClosest from 'element-closest';\n\nimport { GalleryContext } from '../../context';\n\nimport styles from './index.module.css';\n\nexport const useHandleImageViewer = () => {\n    const { view, onClose, setImageMeta } = useContext(GalleryContext);\n\n    const leftArrowRef = useRef<HTMLDivElement>(null);\n    const rightArrowRef = useRef<HTMLDivElement>(null);\n\n    const isMobile = view === 'mobile';\n\n    const handleLoad = (event: SyntheticEvent<HTMLImageElement>, index: number) => {\n        const target = event.currentTarget;\n\n        const { naturalWidth, naturalHeight } = target;\n\n        setImageMeta({ width: naturalWidth, height: naturalHeight }, index);\n    };\n\n    const handleLoadError = (index: number) => {\n        setImageMeta({ width: 0, height: 0, broken: true }, index);\n    };\n\n    const handleWrapperClick = useCallback<MouseEventHandler>(\n        (event) => {\n            const eventTarget = event.target as HTMLElement;\n\n            const isArrow =\n                leftArrowRef.current?.contains(eventTarget) ||\n                rightArrowRef.current?.contains(eventTarget);\n\n            const isPlaceholder = Boolean(eventTarget.closest(`.${styles.placeholder}`));\n\n            const isContentArea = Boolean(eventTarget.closest('[data-content-area]'));\n\n            // Закрываем галерею только при клике вне элементов контента и только на desktop\n            if (!isPlaceholder && !isArrow && !isContentArea && !isMobile) {\n                onClose();\n            }\n        },\n        [isMobile, onClose],\n    );\n\n    useEffect(() => {\n        elementClosest(window);\n    }, []);\n\n    return {\n        handleLoad,\n        handleLoadError,\n        handleWrapperClick,\n        isMobile,\n        leftArrowRef,\n        rightArrowRef,\n    };\n};\n"],"names":[],"mappings":";;;;;AAcO,MAAM,oBAAoB,GAAG,MAAK;AACrC,IAAA,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;AAElE,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,MAAM,UAAU,GAAG,CAAC,KAAuC,EAAE,KAAa,KAAI;AAC1E,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa;AAElC,QAAA,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,MAAM;AAE9C,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC;AACvE,KAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,KAAa,KAAI;AACtC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;AAC9D,KAAC;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,KAAK,KAAI;AACN,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAE/C,MAAM,OAAO,GACT,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC;AAC3C,YAAA,aAAa,CAAC,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC;AAEhD,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,MAAM,CAAC,WAAW,CAAE,CAAA,CAAC,CAAC;QAE5E,MAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;;AAGzE,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,EAAE;AAC3D,YAAA,OAAO,EAAE;;AAEjB,KAAC,EACD,CAAC,QAAQ,EAAE,OAAO,CAAC,CACtB;IAED,SAAS,CAAC,MAAK;QACX,cAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,OAAO;QACH,UAAU;QACV,eAAe;QACf,kBAAkB;QAClB,QAAQ;QACR,YAAY;QACZ,aAAa;KAChB;AACL;;;;"}

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

@@ -3,7 +3,6 @@
     --color-static-neutral-0-inverted: #262629;
     --color-static-neutral-0-inverted-hover: #2f2f32;
     --color-static-neutral-0-inverted-press: #353539;
-    --color-static-neutral-300-inverted: #29292c;
     --color-static-neutral-translucent-100-inverted: rgba(214, 214, 229, 0.07);
     --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94);
 }
@@ -20,7 +19,7 @@
 :root {
     --focus-color: var(--color-light-status-info);
 }
-.gallery__component_j553i {
+.gallery__component_15cn9 {
     display: flex;
     flex-grow: 1;
     justify-content: center;
@@ -88,7 +87,7 @@
         z-index: -1000;
     }
 
-    .gallery__swiperFrame_j553i {
+    .gallery__swiperFrame_15cn9 {
         display: flex;
         flex: 1 1 0;
         min-width: 0;
@@ -100,17 +99,17 @@
         box-sizing: border-box;
     }
 
-        .gallery__swiperFrame_j553i.gallery__mobile_j553i {
+        .gallery__swiperFrame_15cn9.gallery__mobile_15cn9 {
             max-height: calc(100vh - 210px);
             max-height: calc(100dvh - 210px);
         }
 
-        .gallery__swiperFrame_j553i.gallery__mobileVideo_j553i {
+        .gallery__swiperFrame_15cn9.gallery__mobileVideo_15cn9 {
             max-height: 100vh;
             max-height: 100dvh;
         }
 
-    .gallery__fullScreenFrame_j553i {
+    .gallery__fullScreenFrame_15cn9 {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -123,7 +122,7 @@
         overflow: hidden;
     }
 
-    .gallery__hiddenFrame_j553i {
+    .gallery__hiddenFrame_15cn9 {
         flex: 0 0 0;
         width: 0;
         height: 0;
@@ -131,16 +130,16 @@
         overflow: hidden;
     }
 
-    .gallery__swiper_j553i {
+    .gallery__swiper_15cn9 {
         width: 100%;
         height: 100%;
     }
 
-    .gallery__hidden_j553i {
+    .gallery__hidden_15cn9 {
         display: none;
     }
 
-    .gallery__singleSlideContainer_j553i {
+    .gallery__singleSlideContainer_15cn9 {
         display: flex;
         width: 100%;
         height: 100%;
@@ -148,22 +147,22 @@
 
         max-height: calc(100vh - 80px);
         max-height: calc(100dvh - 80px);
-        padding: var(--gap-32);
+        padding: var(--gap-0) var(--gap-32) var(--gap-32);
         box-sizing: border-box;
     }
 
-        .gallery__singleSlideContainer_j553i.gallery__mobile_j553i {
+        .gallery__singleSlideContainer_15cn9.gallery__mobile_15cn9 {
             max-height: calc(100vh - 174px);
             max-height: calc(100dvh - 174px);
             padding: 0;
         }
 
-        .gallery__singleSlideContainer_j553i.gallery__mobileVideo_j553i {
+        .gallery__singleSlideContainer_15cn9.gallery__mobileVideo_15cn9 {
             max-height: 100vh;
             max-height: 100dvh;
         }
 
-    .gallery__slide_j553i {
+    .gallery__slide_15cn9 {
         position: relative;
         display: flex;
         justify-content: center;
@@ -172,17 +171,17 @@
         height: 100%;
     }
 
-    .gallery__slideLoading_j553i {
+    .gallery__slideLoading_15cn9 {
         background-color: var(--color-static-neutral-translucent-100-inverted);
         border-radius: var(--border-radius-8);
     }
 
-    .gallery__spinner_j553i {
+    .gallery__spinner_15cn9 {
         position: absolute;
         color: var(--color-static-neutral-translucent-1300-inverted);
     }
 
-    .gallery__image_j553i {
+    .gallery__image_15cn9 {
         width: auto;
         height: auto;
         max-width: 100%;
@@ -195,11 +194,11 @@
         border-radius: var(--border-radius-8);
     }
 
-        .gallery__image_j553i.gallery__mobile_j553i {
+        .gallery__image_15cn9.gallery__mobile_15cn9 {
             border-radius: var(--border-radius-0);
         }
 
-    .gallery__smallImage_j553i {
+    .gallery__smallImage_15cn9 {
         position: relative;
         width: auto;
         height: auto;
@@ -212,17 +211,17 @@
                 user-select: none;
     }
 
-    .gallery__verticalImageFit_j553i {
+    .gallery__verticalImageFit_15cn9 {
         width: auto;
         height: 100%;
     }
 
-    .gallery__horizontalImageFit_j553i {
+    .gallery__horizontalImageFit_15cn9 {
         width: 100%;
         height: auto;
     }
 
-    .gallery__fullScreenMedia_j553i {
+    .gallery__fullScreenMedia_15cn9 {
         width: 100%;
         height: 100%;
         max-width: 100%;
@@ -232,7 +231,7 @@
         border-radius: var(--border-radius-0);
     }
 
-    .gallery__arrow_j553i {
+    .gallery__arrow_15cn9 {
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -246,30 +245,30 @@
         outline: none;
     }
 
-        .gallery__arrow_j553i:hover {
+        .gallery__arrow_15cn9:hover {
             background-color: var(--color-static-neutral-0-inverted-hover);
         }
 
-        .gallery__arrow_j553i:active {
+        .gallery__arrow_15cn9:active {
             background-color: var(--color-static-neutral-0-inverted-press);
         }
 
-    .gallery__focused_j553i {
+    .gallery__focused_15cn9 {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
     }
 
-    .gallery__placeholder_j553i {
+    .gallery__placeholder_15cn9 {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 100%;
         height: 100%;
         border-radius: var(--border-radius-8);
-        background-color: var(--color-static-neutral-300-inverted);
+        background-color: var(--color-static-neutral-translucent-100-inverted);
     }
 
-    .gallery__brokenImgWrapper_j553i {
+    .gallery__brokenImgWrapper_15cn9 {
         position: relative;
         display: flex;
         flex-direction: column;
@@ -278,13 +277,13 @@
         text-align: center;
     }
 
-    .gallery__brokenImgIcon_j553i {
+    .gallery__brokenImgIcon_15cn9 {
         width: 80px;
         height: 80px;
         margin-bottom: var(--gap-4);
     }
 
-    .gallery__fullScreenVideo_j553i {
+    .gallery__fullScreenVideo_15cn9 {
         width: 100%;
         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_j553i","swiperFrame":"gallery__swiperFrame_j553i","mobile":"gallery__mobile_j553i","mobileVideo":"gallery__mobileVideo_j553i","fullScreenFrame":"gallery__fullScreenFrame_j553i","hiddenFrame":"gallery__hiddenFrame_j553i","swiper":"gallery__swiper_j553i","hidden":"gallery__hidden_j553i","singleSlideContainer":"gallery__singleSlideContainer_j553i","slide":"gallery__slide_j553i","slideLoading":"gallery__slideLoading_j553i","spinner":"gallery__spinner_j553i","image":"gallery__image_j553i","smallImage":"gallery__smallImage_j553i","verticalImageFit":"gallery__verticalImageFit_j553i","horizontalImageFit":"gallery__horizontalImageFit_j553i","fullScreenMedia":"gallery__fullScreenMedia_j553i","arrow":"gallery__arrow_j553i","focused":"gallery__focused_j553i","placeholder":"gallery__placeholder_j553i","brokenImgWrapper":"gallery__brokenImgWrapper_j553i","brokenImgIcon":"gallery__brokenImgIcon_j553i","fullScreenVideo":"gallery__fullScreenVideo_j553i"};
+const styles = {"component":"gallery__component_15cn9","swiperFrame":"gallery__swiperFrame_15cn9","mobile":"gallery__mobile_15cn9","mobileVideo":"gallery__mobileVideo_15cn9","fullScreenFrame":"gallery__fullScreenFrame_15cn9","hiddenFrame":"gallery__hiddenFrame_15cn9","swiper":"gallery__swiper_15cn9","hidden":"gallery__hidden_15cn9","singleSlideContainer":"gallery__singleSlideContainer_15cn9","slide":"gallery__slide_15cn9","slideLoading":"gallery__slideLoading_15cn9","spinner":"gallery__spinner_15cn9","image":"gallery__image_15cn9","smallImage":"gallery__smallImage_15cn9","verticalImageFit":"gallery__verticalImageFit_15cn9","horizontalImageFit":"gallery__horizontalImageFit_15cn9","fullScreenMedia":"gallery__fullScreenMedia_15cn9","arrow":"gallery__arrow_15cn9","focused":"gallery__focused_15cn9","placeholder":"gallery__placeholder_15cn9","brokenImgWrapper":"gallery__brokenImgWrapper_15cn9","brokenImgIcon":"gallery__brokenImgIcon_15cn9","fullScreenVideo":"gallery__fullScreenVideo_15cn9"};
 
 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    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        flex: 1 1 0;\n        min-width: 0;\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;;;;"}
+{"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        flex: 1 1 0;\n        min-width: 0;\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-0) var(--gap-32) 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-translucent-100-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/slide.js

@@ -20,7 +20,7 @@ const SlideInner = ({ children, broken, loading, isVideoView }) => {
         React.createElement(TypographyText, { view: 'primary-small', color: 'static-secondary-light' },
             "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C ",
             isVideoView ? 'видео' : 'изображение'))) : (children);
-    return (React.createElement("div", { className: cn(styles.slide, { [styles.slideLoading]: loading }) },
+    return (React.createElement("div", { className: cn(styles.slide, { [styles.slideLoading]: loading && !isVideoView }) },
         broken ? React.createElement("div", { className: styles.placeholder }, content) : content,
         React.createElement(Spinner, { className: styles.spinner, preset: 48, visible: loading })));
 };
@@ -49,7 +49,7 @@ const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image,
                 [styles.fullScreenMedia]: fullScreen,
                 [styles.verticalImageFit]: verticalImageFit,
                 [styles.horizontalImageFit]: horizontalImageFit,
-            }), onLoad: (event) => handleLoad(event, index), onError: () => handleLoadError(index), style: imageStyle, "data-test-id": slideVisible ? TestIds.ACTIVE_IMAGE : undefined })));
+            }), onLoad: (event) => handleLoad(event, index), onError: () => handleLoadError(index), style: imageStyle, "data-content-area": 'true', "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, 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    const imageStyle =\n        fullScreen || !containerHeight ? undefined : { maxHeight: `${containerHeight}px` };\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={imageStyle}\n                data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n            />\n        </SlideInner>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"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 && !isVideoView })}>\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    const imageStyle =\n        fullScreen || !containerHeight ? undefined : { maxHeight: `${containerHeight}px` };\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={imageStyle}\n                data-content-area='true'\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;IAED,QACI,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,GAAG,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA;AAC/E,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;AAcY,MAAA,KAAK,GAAmB,CAAC,EAClC,QAAQ,EACR,IAAI,EACJ,oBAAoB,EACpB,gBAAgB,EAChB,KAAK,EACL,KAAK,EACL,eAAe,EACf,YAAY,EACZ,UAAU,GACb,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;IAC7E,MAAM,UAAU,GACZ,UAAU,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,SAAS,EAAE,GAAG,eAAe,CAAA,EAAA,CAAI,EAAE;AAEtF,IAAA,MAAM,cAAc,GAAG,WAAW,CAC9B,CAAC,IAA6B,KAAI;AAC9B,QAAA,IAAI,IAAI,EAAE,QAAQ,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE;YAClD,UAAU,CACN,EAAE,aAAa,EAAE,IAAI,EAA4C,EACjE,KAAK,CACR;;KAER,EACD,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,CAC5B;AAED,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,EAAA,EACF,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,UAAU,EAAE,CAAC,EACzD,CAAA,CACO;;AAIrB,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,IAAI,EAAA;QACxD,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,cAAc,EACnB,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,eAAe,GAAG,UAAU;AACpC,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,UAAU,uBACC,MAAM,EAAA,cAAA,EACV,YAAY,GAAG,OAAO,CAAC,YAAY,GAAG,SAAS,EAAA,CAC/D,CACO;AAErB;;;;"}

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

@@ -1,32 +1,44 @@
 :root {
     --color-static-neutral-0: #fff;
+    --color-static-neutral-translucent-100-inverted: rgba(214, 214, 229, 0.07);
     --color-static-neutral-translucent-700: rgba(4, 4, 21, 0.47);
 }
 :root {
     --border-radius-0: 0;
     --border-radius-24: 24px;
 }
-.gallery__videoWrapper_gnw2e {
+.gallery__videoWrapper_yf8l7 {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
-    width: 100%;
-    min-width: 0;
-    min-height: 0;
+    width: auto;
+    max-width: 100%;
     position: relative;
+    min-width: 300px;
+    min-height: 200px;
+}
+.gallery__mobileWrapper_yf8l7 {
+    width: 100%;
+}
+.gallery__videoWrapper_yf8l7.gallery__loading_yf8l7 {
+    width: 100%;
+    aspect-ratio: 16/9;
+    background-color: var(--color-static-neutral-translucent-100-inverted);
+    border-radius: var(--border-radius-24);
+    align-items: center;
 }
-.gallery__video_gnw2e {
+.gallery__video_yf8l7 {
     max-width: 100%;
     max-height: 100%;
     -o-object-fit: contain;
        object-fit: contain;
     border-radius: var(--border-radius-24);
 }
-.gallery__mobile_gnw2e {
+.gallery__mobile_yf8l7 {
     border-radius: var(--border-radius-0);
 }
-.gallery__videoButton_gnw2e {
+.gallery__videoButton_yf8l7 {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -34,13 +46,13 @@
     z-index: 1;
     color: green;
 }
-.gallery__icon_gnw2e {
+.gallery__icon_yf8l7 {
     color: var(--color-static-neutral-0);
 }
-.gallery__iconShape_gnw2e {
+.gallery__iconShape_yf8l7 {
     fill: var(--color-static-neutral-translucent-700);
 }
-.gallery__bottomButton_gnw2e {
+.gallery__bottomButton_yf8l7 {
     position: absolute;
     bottom: 48px;
     left: 32px;