@alfalab/core-components-gallery 7.2.3 → 7.3.0

package/cssm/components/header-info-block/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/header-info-block/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\n\nimport { TypographyText, TypographyTitle } from '@alfalab/core-components-typography';\n\nimport { splitFilename } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport type HeaderInfoBlockProps = {\n    filename: string;\n    description?: string;\n};\n\nexport const HeaderInfoBlock: FC<HeaderInfoBlockProps> = ({ filename, description }) => {\n    const [head, tail] = splitFilename(filename);\n\n    return (\n        <div className={styles.info}>\n            <div className={styles.filenameContainer}>\n                <TypographyTitle\n                    tag='h1'\n                    className={styles.filenameHead}\n                    view='xsmall'\n                    font='system'\n                    color='static-primary-light'\n                >\n                    {head}\n                </TypographyTitle>\n\n                <TypographyTitle tag='h1' view='xsmall' font='system' color='static-primary-light'>\n                    {tail}\n                </TypographyTitle>\n            </div>\n\n            {description ? (\n                <TypographyText\n                    className={styles.description}\n                    tag='div'\n                    view='primary-medium'\n                    color='static-secondary-light'\n                >\n                    {description}\n                </TypographyText>\n            ) : null}\n        </div>\n    );\n};\n"],"names":["splitFilename","React","styles","TypographyTitle","TypographyText"],"mappings":";;;;;;;;;;;;;;AAaO,IAAM,eAAe,GAA6B,UAAC,EAAyB,EAAA;QAAvB,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,WAAW,GAAA,EAAA,CAAA,WAAA;IACvE,IAAA,EAAA,GAAeA,2BAAa,CAAC,QAAQ,CAAC,EAArC,IAAI,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,IAAI,GAAA,EAAA,CAAA,CAAA,CAA2B;AAE5C,IAAA,QACIC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,uBAAM,CAAC,IAAI,EAAA;AACvB,QAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,uBAAM,CAAC,iBAAiB,EAAA;YACpCD,sBAAC,CAAA,aAAA,CAAAE,oBAAe,EACZ,EAAA,GAAG,EAAC,IAAI,EACR,SAAS,EAAED,uBAAM,CAAC,YAAY,EAC9B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,sBAAsB,EAE3B,EAAA,IAAI,CACS;YAElBD,sBAAC,CAAA,aAAA,CAAAE,oBAAe,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAC7E,EAAA,IAAI,CACS,CAChB;AAEL,QAAA,WAAW,IACRF,qCAACG,mBAAc,EAAA,EACX,SAAS,EAAEF,uBAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,wBAAwB,EAE7B,EAAA,WAAW,CACC,IACjB,IAAI,CACN;AAEd;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/header-info-block/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\n\nimport { TypographyText, TypographyTitle } from '@alfalab/core-components-typography';\n\nimport { splitFilename } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport type HeaderInfoBlockProps = {\n    filename: string;\n    description?: string;\n};\n\nexport const HeaderInfoBlock: FC<HeaderInfoBlockProps> = ({ filename, description }) => {\n    const [head, tail] = splitFilename(filename);\n\n    return (\n        <div className={styles.info}>\n            <div className={styles.filenameContainer}>\n                <TypographyTitle\n                    tag='h2'\n                    className={styles.filenameHead}\n                    view='small'\n                    font='system'\n                    color='static-primary-light'\n                >\n                    {head}\n                </TypographyTitle>\n\n                <TypographyTitle tag='h1' view='xsmall' font='system' color='static-primary-light'>\n                    {tail}\n                </TypographyTitle>\n            </div>\n\n            {description ? (\n                <TypographyText\n                    className={styles.description}\n                    tag='div'\n                    view='primary-medium'\n                    color='static-secondary-light'\n                >\n                    {description}\n                </TypographyText>\n            ) : null}\n        </div>\n    );\n};\n"],"names":["splitFilename","React","styles","TypographyTitle","TypographyText"],"mappings":";;;;;;;;;;;;;;;AAaO,IAAM,eAAe,GAA6B,UAAC,EAAyB,EAAA;QAAvB,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,WAAW,GAAA,EAAA,CAAA,WAAA;IACvE,IAAA,EAAA,GAAeA,2BAAa,CAAC,QAAQ,CAAC,EAArC,IAAI,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,IAAI,GAAA,EAAA,CAAA,CAAA,CAA2B;AAE5C,IAAA,QACIC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,uBAAM,CAAC,IAAI,EAAA;AACvB,QAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,uBAAM,CAAC,iBAAiB,EAAA;YACpCD,sBAAC,CAAA,aAAA,CAAAE,oBAAe,EACZ,EAAA,GAAG,EAAC,IAAI,EACR,SAAS,EAAED,uBAAM,CAAC,YAAY,EAC9B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,sBAAsB,EAE3B,EAAA,IAAI,CACS;YAElBD,sBAAC,CAAA,aAAA,CAAAE,oBAAe,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAC7E,EAAA,IAAI,CACS,CAChB;AAEL,QAAA,WAAW,IACRF,qCAACG,mBAAc,EAAA,EACX,SAAS,EAAEF,uBAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,wBAAwB,EAE7B,EAAA,WAAW,CACC,IACjB,IAAI,CACN;AAEd;;;;"}

package/cssm/components/image-preview/Component.js

@@ -8,6 +8,7 @@ var hooks = require('@alfalab/hooks');
 var constants = require('../../constants.js');
 var context = require('../../context.js');
 var utils = require('../../utils/utils.js');
+require('tslib');
 var paths = require('./paths.js');
 var styles = require('./index.module.css');
 
@@ -81,7 +82,7 @@ var ImagePreview = function (_a) {
         }
         if (utils.isVideo(image.src)) {
             return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.preview, styles__default.default.image, (_c = {},
-                    _c[styles__default.default.loading] = !meta,
+                    _c[styles__default.default.loading] = !(meta === null || meta === void 0 ? void 0 : meta.loaded),
                     _c[styles__default.default.mobile] = isMobile,
                     _c)) },
                 React__default.default.createElement("canvas", { className: cn__default.default(styles__default.default.canvasPreview, (_d = {}, _d[styles__default.default.mobile] = isMobile, _d)), "data-testid": 'canvas', width: previewWidth, height: previewHeight, ref: canvasRef })));

package/cssm/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":["useContext","GalleryContext","PREVIEW_WIDTH_MOBILE","PREVIEW_WIDTH_DESKTOP","PREVIEW_HEIGHT_MOBILE","PREVIEW_HEIGHT_DESKTOP","useRef","useEffect","PREVIEW_VIDEO_MULTIPLIER","isVideo","useFocus","React","cn","styles","NoImagePaths","getImageAlt"],"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":["useContext","GalleryContext","PREVIEW_WIDTH_MOBILE","PREVIEW_WIDTH_DESKTOP","PREVIEW_HEIGHT_MOBILE","PREVIEW_HEIGHT_DESKTOP","useRef","useEffect","PREVIEW_VIDEO_MULTIPLIER","isVideo","useFocus","React","cn","styles","NoImagePaths","getImageAlt"],"mappings":"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"}

package/cssm/components/image-preview/index.module.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;
@@ -61,13 +61,13 @@
     background-color: var(--color-static-neutral-100-inverted);
 }
 .loading .active {
-        background-color: var(--color-static-neutral-300-inverted);
+        background-color: var(--color-static-neutral-translucent-100-inverted);
     }
 .brokenImageWrapper {
     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;
 }
 .brokenImageWrapper.active {

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

@@ -31,8 +31,9 @@ var useHandleImageViewer = function () {
         var isArrow = ((_a = leftArrowRef.current) === null || _a === void 0 ? void 0 : _a.contains(eventTarget)) ||
             ((_b = rightArrowRef.current) === null || _b === void 0 ? void 0 : _b.contains(eventTarget));
         var isPlaceholder = Boolean(eventTarget.closest(".".concat(styles__default.default.placeholder)));
-        var isImg = eventTarget.tagName === 'IMG';
-        if (!isImg && !isPlaceholder && !isArrow && !isMobile) {
+        var isContentArea = Boolean(eventTarget.closest('[data-content-area]'));
+        // Закрываем галерею только при клике вне элементов контента и только на desktop
+        if (!isPlaceholder && !isArrow && !isContentArea && !isMobile) {
             onClose();
         }
     }, [isMobile, onClose]);

package/cssm/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":["useContext","GalleryContext","useRef","useCallback","styles","useEffect","elementClosest"],"mappings":";;;;;;;;;;;;;;AAca,IAAA,oBAAoB,GAAG,YAAA;AAC1B,IAAA,IAAA,EAAkC,GAAAA,gBAAU,CAACC,sBAAc,CAAC,EAA1D,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,YAAY,kBAA+B;AAElE,IAAA,IAAM,YAAY,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,IAAM,aAAa,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,IAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,IAAM,UAAU,GAAG,UAAC,KAAuC,EAAE,KAAa,EAAA;AACtE,QAAA,IAAM,MAAM,GAAG,KAAK,CAAC,aAAa;QAE1B,IAAA,YAAY,GAAoB,MAAM,CAAA,YAA1B,EAAE,aAAa,GAAK,MAAM,CAAA,aAAX;AAEnC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC;AACvE,KAAC;IAED,IAAM,eAAe,GAAG,UAAC,KAAa,EAAA;AAClC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;AAC9D,KAAC;AAED,IAAA,IAAM,kBAAkB,GAAGC,iBAAW,CAClC,UAAC,KAAK,EAAA;;AACF,QAAA,IAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAE/C,IAAM,OAAO,GACT,CAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,CAAC,WAAW,CAAC;aAC3C,CAAA,EAAA,GAAA,aAAa,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,WAAW,CAAC,CAAA;AAEhD,QAAA,IAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,GAAA,CAAA,MAAA,CAAIC,uBAAM,CAAC,WAAW,CAAE,CAAC,CAAC;AAE5E,QAAA,IAAM,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;AAED,IAAAC,eAAS,CAAC,YAAA;QACNC,+BAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,OAAO;AACH,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,eAAe,EAAA,eAAA;AACf,QAAA,kBAAkB,EAAA,kBAAA;AAClB,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAA,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":["useContext","GalleryContext","useRef","useCallback","styles","useEffect","elementClosest"],"mappings":";;;;;;;;;;;;;;AAca,IAAA,oBAAoB,GAAG,YAAA;AAC1B,IAAA,IAAA,EAAkC,GAAAA,gBAAU,CAACC,sBAAc,CAAC,EAA1D,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,YAAY,kBAA+B;AAElE,IAAA,IAAM,YAAY,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,IAAM,aAAa,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,IAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,IAAM,UAAU,GAAG,UAAC,KAAuC,EAAE,KAAa,EAAA;AACtE,QAAA,IAAM,MAAM,GAAG,KAAK,CAAC,aAAa;QAE1B,IAAA,YAAY,GAAoB,MAAM,CAAA,YAA1B,EAAE,aAAa,GAAK,MAAM,CAAA,aAAX;AAEnC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC;AACvE,KAAC;IAED,IAAM,eAAe,GAAG,UAAC,KAAa,EAAA;AAClC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;AAC9D,KAAC;AAED,IAAA,IAAM,kBAAkB,GAAGC,iBAAW,CAClC,UAAC,KAAK,EAAA;;AACF,QAAA,IAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAE/C,IAAM,OAAO,GACT,CAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,CAAC,WAAW,CAAC;aAC3C,CAAA,EAAA,GAAA,aAAa,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,WAAW,CAAC,CAAA;AAEhD,QAAA,IAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,GAAA,CAAA,MAAA,CAAIC,uBAAM,CAAC,WAAW,CAAE,CAAC,CAAC;QAE5E,IAAM,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;AAED,IAAAC,eAAS,CAAC,YAAA;QACNC,+BAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,OAAO;AACH,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,eAAe,EAAA,eAAA;AACf,QAAA,kBAAkB,EAAA,kBAAA;AAClB,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAA,aAAA;KAChB;AACL;;;;"}

package/cssm/components/image-viewer/index.module.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);
 }
@@ -148,7 +147,7 @@
 
         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;
     }
 
@@ -266,7 +265,7 @@
         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);
     }
 
     .brokenImgWrapper {

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

@@ -6,6 +6,7 @@ var React = require('react');
 var cn = require('classnames');
 var context = require('../../context.js');
 var utils = require('../../utils/utils.js');
+require('tslib');
 var hooks = require('./hooks.js');
 var slide = require('./slide.js');
 var styles = require('./index.module.css');

package/cssm/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 { 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":["useContext","GalleryContext","useHandleImageViewer","useRef","React","styles","isVideo","Slide","cn"],"mappings":";;;;;;;;;;;;;;;;;;AAWa,IAAA,MAAM,GAAO,YAAA;;;AAChB,IAAA,IAAA,KACFA,gBAAU,CAACC,sBAAc,CAAC,EADtB,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,iBAAiB,uBAAA,EAAE,eAAe,qBAAA,EAAE,mBAAmB,yBAC7C;IAExB,IAAA,EAAA,GAAmCC,0BAAoB,EAAE,EAAvD,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAA2B;AAE/D,IAAA,IAAM,UAAU,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAE/C,IAAA,IAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,IAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAE9C,IAAA,IAAI,CAAC,YAAY;AAAE,QAAA,OAAO,IAAI;AAE9B,IAAA,IAAM,UAAU,GAAG,CAAA,gBAAgB,KAAhB,IAAA,IAAA,gBAAgB,KAAhB,MAAA,GAAA,MAAA,GAAA,gBAAgB,CAAE,KAAK,KAAI,CAAC;AAC/C,IAAA,IAAM,WAAW,GAAG,CAAA,gBAAgB,KAAhB,IAAA,IAAA,gBAAgB,KAAhB,MAAA,GAAA,MAAA,GAAA,gBAAgB,CAAE,MAAM,KAAI,CAAC;AAEjD,IAAA,IAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW;IAEjD,IAAM,WAAW,GAAG,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;IAE/D,IAAM,kBAAkB,GAAG,CAAC,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,MAAA,GAAA,MAAA,GAAA,WAAW,CAAE,KAAK,KAAI,CAAC,KAAK,CAAA,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,MAAM,KAAI,CAAC,CAAC;IAEjF;;AAEI,IAAAC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,uBAAM,CAAC,SAAS,EAAE,OAAO,EAAE,kBAAkB,EACxD,EAAA,UAAU,IAAI,CAACC,aAAO,CAAC,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,MAAA,GAAA,MAAA,GAAA,YAAY,CAAE,GAAG,CAAC,IACtCF,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,uBAAM,CAAC,eAAe,EAAA;AAClC,QAAAD,sBAAA,CAAA,aAAA,CAACG,WAAK,EAAA,EACF,QAAQ,EAAE,IAAI,EACd,oBAAoB,EAAE,kBAAkB,EACxC,KAAK,EAAE,YAAY,EACnB,eAAe,EAAE,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,MAAA,GAAA,MAAA,GAAA,WAAW,CAAE,MAAM,KAAI,CAAC,EACzC,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,iBAAiB,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,KAAK,EACnB,UAAU,EAAE,IAAI,EAClB,CAAA,CACA,KAENH,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEI,mBAAE,CAACH,uBAAM,CAAC,oBAAoB,GAAA,EAAA,GAAA,EAAA;AACrC,YAAA,EAAA,CAACA,uBAAM,CAAC,MAAM,CAAA,GAAG,QAAQ;AACzB,YAAA,EAAA,CAACA,uBAAM,CAAC,WAAW,CAAA,GAAG,QAAQ,IAAIC,aAAO,CAAC,YAAY,aAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,CAAC;gBAC9D,EACF,GAAG,EAAE,UAAU,EAAA;QAEfF,sBAAC,CAAA,aAAA,CAAAG,WAAK,IACF,QAAQ,EAAE,IAAI,EACd,oBAAoB,EAAE,kBAAkB,EACxC,KAAK,EAAE,YAAY,EACnB,eAAe,EAAE,CAAA,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,MAAM,KAAI,CAAC,EACzC,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,iBAAiB,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,IAAI,GACpB,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":["useContext","GalleryContext","useHandleImageViewer","useRef","React","styles","isVideo","Slide","cn"],"mappings":"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"}

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

@@ -9,6 +9,7 @@ var cssm = require('@alfalab/core-components-typography/cssm');
 var context = require('../../context.js');
 var utils = require('../../utils/utils.js');
 var constants = require('../../utils/constants.js');
+require('tslib');
 var hooks = require('./hooks.js');
 var paths = require('./paths.js');
 var index = require('./video/index.js');
@@ -32,7 +33,7 @@ var SlideInner = function (_a) {
         React__default.default.createElement(cssm.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__default.default.createElement("div", { className: cn__default.default(styles__default.default.slide, (_b = {}, _b[styles__default.default.slideLoading] = loading, _b)) },
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.slide, (_b = {}, _b[styles__default.default.slideLoading] = loading && !isVideoView, _b)) },
         broken ? React__default.default.createElement("div", { className: styles__default.default.placeholder }, content) : content,
         React__default.default.createElement(cssm$1.Spinner, { className: styles__default.default.spinner, preset: 48, visible: loading })));
 };
@@ -63,7 +64,7 @@ var Slide = function (_a) {
                 _c[styles__default.default.fullScreenMedia] = fullScreen,
                 _c[styles__default.default.verticalImageFit] = verticalImageFit,
                 _c[styles__default.default.horizontalImageFit] = horizontalImageFit,
-                _c)), onLoad: function (event) { return handleLoad(event, index$1); }, onError: function () { return handleLoadError(index$1); }, style: imageStyle, "data-test-id": slideVisible ? constants.TestIds.ACTIVE_IMAGE : undefined })));
+                _c)), onLoad: function (event) { return handleLoad(event, index$1); }, onError: function () { return handleLoadError(index$1); }, style: imageStyle, "data-content-area": 'true', "data-test-id": slideVisible ? constants.TestIds.ACTIVE_IMAGE : undefined })));
 };
 
 exports.Slide = Slide;

package/cssm/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":["React","styles","NoImagePaths","TypographyText","cn","Spinner","index","useContext","GalleryContext","useHandleImageViewer","isSmallImage","useCallback","isVideo","Video","getImageAlt","TestIds"],"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":["React","styles","NoImagePaths","TypographyText","cn","Spinner","index","useContext","GalleryContext","useHandleImageViewer","isSmallImage","useCallback","isVideo","Video","getImageAlt","TestIds"],"mappings":"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"}

package/cssm/components/image-viewer/video/index.js

@@ -38,12 +38,15 @@ var PlayCompactMIcon__default = /*#__PURE__*/_interopDefaultCompat(PlayCompactMI
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var Video = function (_a) {
-    var _b;
+    var _b, _c;
     var url = _a.url, index$1 = _a.index, className = _a.className, isActive = _a.isActive;
+    var _d = React.useState(false), videoLoaded = _d[0], setVideoLoaded = _d[1];
     var playerRef = React.useRef(null);
     var timer = React.useRef();
-    var _c = React.useState(true), hlsSupported = _c[0], setHlsSupported = _c[1];
-    var _d = React.useContext(context.GalleryContext), setImageMeta = _d.setImageMeta, mutedVideo = _d.mutedVideo, view = _d.view, playingVideo = _d.playingVideo, setPlayingVideo = _d.setPlayingVideo, setHideNavigation = _d.setHideNavigation, getCurrentImage = _d.getCurrentImage;
+    var _e = React.useState(true), hlsSupported = _e[0], setHlsSupported = _e[1];
+    var abortController = React.useRef(new AbortController());
+    var _f = React.useState(false), videoError = _f[0], setVideoError = _f[1];
+    var _g = React.useContext(context.GalleryContext), setImageMeta = _g.setImageMeta, mutedVideo = _g.mutedVideo, view = _g.view, playingVideo = _g.playingVideo, setPlayingVideo = _g.setPlayingVideo, setHideNavigation = _g.setHideNavigation, getCurrentImage = _g.getCurrentImage;
     var isMobile = view === 'mobile';
     var isDesktop = view === 'desktop';
     var image = getCurrentImage();
@@ -91,6 +94,36 @@ var Video = function (_a) {
             });
         });
     }, [setImageMeta, index$1]);
+    React.useEffect(function () { return function () { return abortController.current.abort(); }; }, []);
+    React.useEffect(function () {
+        var video = playerRef.current;
+        if (!video) {
+            return;
+        }
+        var signal = abortController.current.signal;
+        var handleCanPlay = function () {
+            setVideoLoaded(true);
+            setVideoError(false);
+            setImageMeta({
+                player: playerRef,
+                width: video.videoWidth || 1920,
+                height: video.videoHeight || 1080,
+                loaded: true,
+            }, index$1);
+        };
+        var handleError = function () {
+            setVideoError(true);
+            setVideoLoaded(false);
+            setImageMeta({ player: { current: null }, broken: true, loaded: true }, index$1);
+        };
+        var handleLoadStart = function () {
+            setVideoLoaded(false);
+            setVideoError(false);
+        };
+        video.addEventListener('canplay', handleCanPlay, { signal: signal });
+        video.addEventListener('error', handleError, { signal: signal });
+        video.addEventListener('loadstart', handleLoadStart, { signal: signal });
+    }, [setImageMeta, index$1]);
     React.useEffect(function () {
         var hls = null;
         var initHls = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
@@ -166,8 +199,11 @@ var Video = function (_a) {
         }
     }, [isActive, playingVideo]);
     React.useEffect(function () {
+        var signal = abortController.current.signal;
         var handleSpacePress = function (e) {
             if ((e.key === ' ' || e.code === 'Space') && isActive) {
+                e.preventDefault();
+                e.stopPropagation();
                 if (playingVideo) {
                     setPlayingVideo(false);
                 }
@@ -176,10 +212,7 @@ var Video = function (_a) {
                 }
             }
         };
-        document.addEventListener('keyup', handleSpacePress);
-        return function () {
-            document.removeEventListener('keyup', handleSpacePress);
-        };
+        document.addEventListener('keydown', handleSpacePress, { signal: signal });
     }, [isActive, playingVideo, setPlayingVideo]);
     var handleWrapperClick = function (e) {
         e.stopPropagation();
@@ -193,9 +226,10 @@ var Video = function (_a) {
                     setHideNavigation(true);
                 }, 3000);
             }
-            return;
         }
-        setPlayingVideo(!playingVideo);
+        else {
+            setPlayingVideo(!playingVideo);
+        }
     };
     var handleBottomButtonClick = React.useCallback(function (e) {
         e.stopPropagation();
@@ -222,16 +256,17 @@ var Video = function (_a) {
         }
         setHideNavigation(false);
     };
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    React__default.default.createElement("div", { onClick: handleWrapperClick, className: styles__default.default.videoWrapper },
-        React__default.default.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, loop: true, src: hlsSupported ? undefined : url, className: cn__default.default(styles__default.default.video, (_b = {}, _b[styles__default.default.mobile] = view === 'mobile', _b), className) },
+    return (React__default.default.createElement("div", { "aria-hidden": true, onClick: handleWrapperClick, "data-content-area": 'true', className: cn__default.default(styles__default.default.videoWrapper, (_b = {},
+            _b[styles__default.default.loading] = !videoLoaded && !videoError,
+            _b[styles__default.default.mobileWrapper] = isMobile,
+            _b)) },
+        React__default.default.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, loop: true, src: hlsSupported ? undefined : url, className: cn__default.default(styles__default.default.video, (_c = {}, _c[styles__default.default.mobile] = view === 'mobile', _c), className) },
             React__default.default.createElement("track", { kind: 'captions' })),
-        isDesktop && !playingVideo && (React__default.default.createElement("div", { className: styles__default.default.videoButton },
+        isDesktop && !playingVideo && videoLoaded && (React__default.default.createElement("div", { className: styles__default.default.videoButton },
             React__default.default.createElement(circle.Circle, { size: 64, shapeClassName: styles__default.default.iconShape },
                 React__default.default.createElement(PlayCompactMIcon__default.default, { className: styles__default.default.icon })))),
         isDesktop && React__default.default.createElement(index.Subtitles, null),
-        isDesktop && (image === null || image === void 0 ? void 0 : image.bottomButton) && (React__default.default.createElement(Component.BottomButton, { bottomButton: image.bottomButton, onClick: handleBottomButtonClick, className: styles__default.default.bottomButton }))));
+        isDesktop && (image === null || image === void 0 ? void 0 : image.bottomButton) && videoLoaded && (React__default.default.createElement(Component.BottomButton, { bottomButton: image.bottomButton, onClick: handleBottomButtonClick, className: styles__default.default.bottomButton }))));
 };
 
 exports.Video = Video;

package/cssm/components/image-viewer/video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/image-viewer/video/index.tsx"],"sourcesContent":["import React, {\n    type MouseEvent,\n    type ReactEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport cn from 'classnames';\nimport type Hls from 'hls.js';\n\nimport { Circle } from '@alfalab/core-components-icon-view/circle';\nimport PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';\n\nimport { GalleryContext } from '../../../context';\nimport { BottomButton } from '../../bottom-button';\nimport { Subtitles } from '../../subtitles';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    url: string;\n    index: number;\n    isActive: boolean;\n    className?: string;\n};\n\nexport const Video = ({ url, index, className, isActive }: Props) => {\n    const playerRef = useRef<HTMLVideoElement>(null);\n    const timer = useRef<ReturnType<typeof setTimeout>>();\n    const [hlsSupported, setHlsSupported] = useState<boolean>(true);\n\n    const {\n        setImageMeta,\n        mutedVideo,\n        view,\n        playingVideo,\n        setPlayingVideo,\n        setHideNavigation,\n        getCurrentImage,\n    } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n    const isDesktop = view === 'desktop';\n\n    const image = getCurrentImage();\n\n    useEffect(() => {\n        setImageMeta({ player: playerRef }, index);\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [index]);\n\n    const loadHlsLibrary = useCallback(\n        async (attempt = 1, maxAttempts = 3): Promise<typeof Hls | null> => {\n            try {\n                const { default: HlsLib } = await import(\n                    /* webpackChunkName: \"hls-js-gallery\" */ 'hls.js'\n                );\n\n                return HlsLib;\n            } catch {\n                if (attempt < maxAttempts) {\n                    /* Экспоненциальная задержка ретрая: 300ms, 600ms, 1200ms */\n                    await new Promise<void>((resolve) => {\n                        setTimeout(\n                            () => {\n                                resolve();\n                            },\n                            300 * 2 ** (attempt - 1),\n                        );\n                    });\n\n                    return loadHlsLibrary(attempt + 1, maxAttempts);\n                }\n\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n\n                return null;\n            }\n        },\n        [setImageMeta, index],\n    );\n\n    useEffect(() => {\n        let hls: Hls | null = null;\n\n        const initHls = async () => {\n            try {\n                const HlsLib = await loadHlsLibrary();\n\n                if (!HlsLib || !playerRef.current) {\n                    return;\n                }\n\n                if (!HlsLib.isSupported()) {\n                    setHlsSupported(false);\n\n                    return;\n                }\n\n                hls = new HlsLib();\n\n                hls.on(HlsLib.Events.ERROR, (_, data) => {\n                    if (data.fatal && hls) {\n                        switch (data.type) {\n                            case HlsLib.ErrorTypes.MEDIA_ERROR:\n                                hls.recoverMediaError();\n                                break;\n                            case HlsLib.ErrorTypes.NETWORK_ERROR:\n                                setImageMeta({ player: { current: null }, broken: true }, index);\n                                break;\n                            default:\n                                hls.destroy();\n                                break;\n                        }\n                    }\n                });\n\n                hls.loadSource(url);\n\n                if (playerRef.current) {\n                    hls.attachMedia(playerRef.current);\n                    hls.subtitleDisplay = false;\n                }\n            } catch {\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n            }\n        };\n\n        initHls();\n\n        return () => {\n            if (hls) {\n                hls.destroy();\n            }\n            if (timer.current) {\n                clearTimeout(timer.current);\n            }\n        };\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [url, index]);\n\n    useEffect(() => {\n        if (playerRef.current && isActive) {\n            if (playingVideo) {\n                playerRef.current.play();\n            } else {\n                playerRef.current.pause();\n            }\n        }\n        if (playerRef.current && !isActive) {\n            playerRef.current.pause();\n            playerRef.current.currentTime = 0;\n        }\n    }, [isActive, playingVideo]);\n\n    useEffect(() => {\n        const handleSpacePress = (e: KeyboardEvent) => {\n            if ((e.key === ' ' || e.code === 'Space') && isActive) {\n                if (playingVideo) {\n                    setPlayingVideo(false);\n                } else {\n                    setPlayingVideo(true);\n                }\n            }\n        };\n\n        document.addEventListener('keyup', handleSpacePress);\n\n        return () => {\n            document.removeEventListener('keyup', handleSpacePress);\n        };\n    }, [isActive, playingVideo, setPlayingVideo]);\n\n    const handleWrapperClick = (e: MouseEvent) => {\n        e.stopPropagation();\n\n        if (isMobile) {\n            setHideNavigation(false);\n\n            if (playingVideo) {\n                if (timer.current) {\n                    clearTimeout(timer.current);\n                }\n                timer.current = setTimeout(() => {\n                    setHideNavigation(true);\n                }, 3000);\n            }\n\n            return;\n        }\n\n        setPlayingVideo(!playingVideo);\n    };\n\n    const handleBottomButtonClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            if (image?.bottomButton) {\n                image.bottomButton.onClick(e);\n            }\n        },\n        [image?.bottomButton],\n    );\n\n    const onPlay: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPlay?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n        }\n\n        timer.current = setTimeout(() => {\n            setHideNavigation(true);\n        }, 3000);\n    };\n\n    const onPause: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPause?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n            timer.current = undefined;\n        }\n\n        setHideNavigation(false);\n    };\n\n    return (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n        <div onClick={handleWrapperClick} className={styles.videoWrapper}>\n            <video\n                onPlay={onPlay}\n                onPause={onPause}\n                ref={playerRef}\n                playsInline={true}\n                muted={mutedVideo}\n                loop={true}\n                src={hlsSupported ? undefined : url}\n                className={cn(styles.video, { [styles.mobile]: view === 'mobile' }, className)}\n            >\n                <track kind='captions' />\n            </video>\n            {isDesktop && !playingVideo && (\n                <div className={styles.videoButton}>\n                    <Circle size={64} shapeClassName={styles.iconShape}>\n                        <PlayCompactMIcon className={styles.icon} />\n                    </Circle>\n                </div>\n            )}\n            {isDesktop && <Subtitles />}\n            {isDesktop && image?.bottomButton && (\n                <BottomButton\n                    bottomButton={image.bottomButton}\n                    onClick={handleBottomButtonClick}\n                    className={styles.bottomButton}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["index","useRef","useState","useContext","GalleryContext","useEffect","useCallback","__awaiter","__spreadArray","React","styles","cn","Circle","PlayCompactMIcon","Subtitles","BottomButton"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/image-viewer/video/index.tsx"],"sourcesContent":["import React, {\n    type MouseEvent,\n    type ReactEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport cn from 'classnames';\nimport type Hls from 'hls.js';\n\nimport { Circle } from '@alfalab/core-components-icon-view/circle';\nimport PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';\n\nimport { GalleryContext } from '../../../context';\nimport { BottomButton } from '../../bottom-button';\nimport { Subtitles } from '../../subtitles';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    url: string;\n    index: number;\n    isActive: boolean;\n    className?: string;\n};\n\nexport const Video = ({ url, index, className, isActive }: Props) => {\n    const [videoLoaded, setVideoLoaded] = useState(false);\n    const playerRef = useRef<HTMLVideoElement>(null);\n    const timer = useRef<ReturnType<typeof setTimeout>>();\n    const [hlsSupported, setHlsSupported] = useState<boolean>(true);\n    const abortController = useRef(new AbortController());\n    const [videoError, setVideoError] = useState(false);\n\n    const {\n        setImageMeta,\n        mutedVideo,\n        view,\n        playingVideo,\n        setPlayingVideo,\n        setHideNavigation,\n        getCurrentImage,\n    } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n    const isDesktop = view === 'desktop';\n\n    const image = getCurrentImage();\n\n    useEffect(() => {\n        setImageMeta({ player: playerRef }, index);\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [index]);\n\n    const loadHlsLibrary = useCallback(\n        async (attempt = 1, maxAttempts = 3): Promise<typeof Hls | null> => {\n            try {\n                const { default: HlsLib } = await import(\n                    /* webpackChunkName: \"hls-js-gallery\" */ 'hls.js'\n                );\n\n                return HlsLib;\n            } catch {\n                if (attempt < maxAttempts) {\n                    /* Экспоненциальная задержка ретрая: 300ms, 600ms, 1200ms */\n                    await new Promise<void>((resolve) => {\n                        setTimeout(\n                            () => {\n                                resolve();\n                            },\n                            300 * 2 ** (attempt - 1),\n                        );\n                    });\n\n                    return loadHlsLibrary(attempt + 1, maxAttempts);\n                }\n\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n\n                return null;\n            }\n        },\n        [setImageMeta, index],\n    );\n\n    useEffect(() => () => abortController.current.abort(), []);\n\n    useEffect(() => {\n        const video = playerRef.current;\n\n        if (!video) {\n            return;\n        }\n\n        const { signal } = abortController.current;\n\n        const handleCanPlay = () => {\n            setVideoLoaded(true);\n            setVideoError(false);\n            setImageMeta(\n                {\n                    player: playerRef,\n                    width: video.videoWidth || 1920,\n                    height: video.videoHeight || 1080,\n                    loaded: true,\n                },\n                index,\n            );\n        };\n\n        const handleError = () => {\n            setVideoError(true);\n            setVideoLoaded(false);\n            setImageMeta({ player: { current: null }, broken: true, loaded: true }, index);\n        };\n\n        const handleLoadStart = () => {\n            setVideoLoaded(false);\n            setVideoError(false);\n        };\n\n        video.addEventListener('canplay', handleCanPlay, { signal });\n        video.addEventListener('error', handleError, { signal });\n        video.addEventListener('loadstart', handleLoadStart, { signal });\n    }, [setImageMeta, index]);\n\n    useEffect(() => {\n        let hls: Hls | null = null;\n\n        const initHls = async () => {\n            try {\n                const HlsLib = await loadHlsLibrary();\n\n                if (!HlsLib || !playerRef.current) {\n                    return;\n                }\n\n                if (!HlsLib.isSupported()) {\n                    setHlsSupported(false);\n\n                    return;\n                }\n\n                hls = new HlsLib();\n\n                hls.on(HlsLib.Events.ERROR, (_, data) => {\n                    if (data.fatal && hls) {\n                        switch (data.type) {\n                            case HlsLib.ErrorTypes.MEDIA_ERROR:\n                                hls.recoverMediaError();\n                                break;\n                            case HlsLib.ErrorTypes.NETWORK_ERROR:\n                                setImageMeta({ player: { current: null }, broken: true }, index);\n                                break;\n                            default:\n                                hls.destroy();\n                                break;\n                        }\n                    }\n                });\n\n                hls.loadSource(url);\n\n                if (playerRef.current) {\n                    hls.attachMedia(playerRef.current);\n                    hls.subtitleDisplay = false;\n                }\n            } catch {\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n            }\n        };\n\n        initHls();\n\n        return () => {\n            if (hls) {\n                hls.destroy();\n            }\n            if (timer.current) {\n                clearTimeout(timer.current);\n            }\n        };\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [url, index]);\n\n    useEffect(() => {\n        if (playerRef.current && isActive) {\n            if (playingVideo) {\n                playerRef.current.play();\n            } else {\n                playerRef.current.pause();\n            }\n        }\n        if (playerRef.current && !isActive) {\n            playerRef.current.pause();\n            playerRef.current.currentTime = 0;\n        }\n    }, [isActive, playingVideo]);\n\n    useEffect(() => {\n        const { signal } = abortController.current;\n\n        const handleSpacePress = (e: KeyboardEvent) => {\n            if ((e.key === ' ' || e.code === 'Space') && isActive) {\n                e.preventDefault();\n                e.stopPropagation();\n                if (playingVideo) {\n                    setPlayingVideo(false);\n                } else {\n                    setPlayingVideo(true);\n                }\n            }\n        };\n\n        document.addEventListener('keydown', handleSpacePress, { signal });\n    }, [isActive, playingVideo, setPlayingVideo]);\n\n    const handleWrapperClick = (e: MouseEvent) => {\n        e.stopPropagation();\n\n        if (isMobile) {\n            setHideNavigation(false);\n\n            if (playingVideo) {\n                if (timer.current) {\n                    clearTimeout(timer.current);\n                }\n                timer.current = setTimeout(() => {\n                    setHideNavigation(true);\n                }, 3000);\n            }\n        } else {\n            setPlayingVideo(!playingVideo);\n        }\n    };\n\n    const handleBottomButtonClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            if (image?.bottomButton) {\n                image.bottomButton.onClick(e);\n            }\n        },\n        [image?.bottomButton],\n    );\n\n    const onPlay: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPlay?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n        }\n\n        timer.current = setTimeout(() => {\n            setHideNavigation(true);\n        }, 3000);\n    };\n\n    const onPause: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPause?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n            timer.current = undefined;\n        }\n\n        setHideNavigation(false);\n    };\n\n    return (\n        <div\n            aria-hidden={true}\n            onClick={handleWrapperClick}\n            data-content-area='true'\n            className={cn(styles.videoWrapper, {\n                [styles.loading]: !videoLoaded && !videoError,\n                [styles.mobileWrapper]: isMobile,\n            })}\n        >\n            <video\n                onPlay={onPlay}\n                onPause={onPause}\n                ref={playerRef}\n                playsInline={true}\n                muted={mutedVideo}\n                loop={true}\n                src={hlsSupported ? undefined : url}\n                className={cn(styles.video, { [styles.mobile]: view === 'mobile' }, className)}\n            >\n                <track kind='captions' />\n            </video>\n            {isDesktop && !playingVideo && videoLoaded && (\n                <div className={styles.videoButton}>\n                    <Circle size={64} shapeClassName={styles.iconShape}>\n                        <PlayCompactMIcon className={styles.icon} />\n                    </Circle>\n                </div>\n            )}\n            {isDesktop && <Subtitles />}\n            {isDesktop && image?.bottomButton && videoLoaded && (\n                <BottomButton\n                    bottomButton={image.bottomButton}\n                    onClick={handleBottomButtonClick}\n                    className={styles.bottomButton}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["index","useState","useRef","useContext","GalleryContext","useEffect","useCallback","__awaiter","__spreadArray","React","cn","styles","Circle","PlayCompactMIcon","Subtitles","BottomButton"],"mappings":"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"}

package/cssm/components/image-viewer/video/index.module.css

@@ -1,5 +1,6 @@
 :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 {
@@ -11,10 +12,21 @@
     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;
+}
+.mobileWrapper {
+    width: 100%;
+}
+.videoWrapper.loading {
+    width: 100%;
+    aspect-ratio: 16/9;
+    background-color: var(--color-static-neutral-translucent-100-inverted);
+    border-radius: var(--border-radius-24);
+    align-items: center;
 }
 .video {
     max-width: 100%;

package/cssm/components/info-bar/Component.js

@@ -7,6 +7,7 @@ var cn = require('classnames');
 var cssm = require('@alfalab/core-components-typography/cssm');
 var context = require('../../context.js');
 var utils = require('../../utils/utils.js');
+require('tslib');
 var index = require('../buttons/index.js');
 var styles = require('./index.module.css');
 

package/cssm/components/info-bar/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/info-bar/Component.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo } from '../../utils';\nimport * as Buttons from '../buttons';\n\nimport styles from './index.module.css';\n\nexport const InfoBar = () => {\n    const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo } =\n        useContext(GalleryContext);\n\n    const image = getCurrentImage();\n\n    const handleMuteVideo = useCallback(() => {\n        if (image) {\n            if (mutedVideo && image.onUnmute) {\n                image.onUnmute();\n            } else if (image.onMute) {\n                image.onMute();\n            }\n        }\n        setMutedVideo(!mutedVideo);\n    }, [image, mutedVideo, setMutedVideo]);\n\n    const handlePlayVideo = useCallback(() => {\n        setPlayingVideo(!playingVideo);\n    }, [playingVideo, setPlayingVideo]);\n\n    return isVideo(image?.src) ? (\n        <section className={cn(styles.infoWrapper, styles.video)}>\n            {playingVideo ? (\n                <Buttons.Pause onClick={handlePlayVideo} />\n            ) : (\n                <Buttons.Play onClick={handlePlayVideo} />\n            )}\n            <TypographyText\n                className={styles.description}\n                tag='div'\n                view='component-primary'\n                color='static-primary-light'\n            >\n                {image?.name}\n            </TypographyText>\n            {mutedVideo ? (\n                <Buttons.UnmuteVideo onClick={handleMuteVideo} />\n            ) : (\n                <Buttons.MuteVideo onClick={handleMuteVideo} />\n            )}\n        </section>\n    ) : (\n        <section className={styles.infoWrapper}>\n            <TypographyText\n                className={styles.description}\n                tag='div'\n                view='component-primary'\n                color='static-primary-light'\n            >\n                {image?.name}\n            </TypographyText>\n        </section>\n    );\n};\n"],"names":["useContext","GalleryContext","useCallback","isVideo","React","cn","styles","Buttons.Pause","Buttons.Play","TypographyText","Buttons.UnmuteVideo","Buttons.MuteVideo"],"mappings":";;;;;;;;;;;;;;;;;;AAWa,IAAA,OAAO,GAAG,YAAA;IACb,IAAA,EAAA,GACFA,gBAAU,CAACC,sBAAc,CAAC,EADtB,eAAe,qBAAA,EAAE,UAAU,gBAAA,EAAE,aAAa,mBAAA,EAAE,YAAY,kBAAA,EAAE,eAAe,qBACnD;AAE9B,IAAA,IAAM,KAAK,GAAG,eAAe,EAAE;IAE/B,IAAM,eAAe,GAAGC,iBAAW,CAAC,YAAA;QAChC,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,UAAU,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAC9B,KAAK,CAAC,QAAQ,EAAE;;AACb,iBAAA,IAAI,KAAK,CAAC,MAAM,EAAE;gBACrB,KAAK,CAAC,MAAM,EAAE;;;AAGtB,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;KAC7B,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;IAEtC,IAAM,eAAe,GAAGA,iBAAW,CAAC,YAAA;AAChC,QAAA,eAAe,CAAC,CAAC,YAAY,CAAC;AAClC,KAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;IAEnC,OAAOC,aAAO,CAAC,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,GAAG,CAAC,IACtBC,sBAAS,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,WAAW,EAAEA,uBAAM,CAAC,KAAK,CAAC,EAAA;QACnD,YAAY,IACTF,sBAAA,CAAA,aAAA,CAACG,WAAa,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,KAE3CH,sBAAA,CAAA,aAAA,CAACI,UAAY,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,CAC7C;QACDJ,sBAAC,CAAA,aAAA,CAAAK,mBAAc,EACX,EAAA,SAAS,EAAEH,uBAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC;AAChB,QAAA,UAAU,IACPF,sBAAA,CAAA,aAAA,CAACM,iBAAmB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,KAEjDN,sBAAA,CAAA,aAAA,CAACO,eAAiB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,CAClD,CACK,KAEVP,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAEE,uBAAM,CAAC,WAAW,EAAA;AAClC,QAAAF,sBAAA,CAAA,aAAA,CAACK,mBAAc,EAAA,EACX,SAAS,EAAEH,uBAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC,CACX,CACb;AACL;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/info-bar/Component.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo } from '../../utils';\nimport * as Buttons from '../buttons';\n\nimport styles from './index.module.css';\n\nexport const InfoBar = () => {\n    const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo } =\n        useContext(GalleryContext);\n\n    const image = getCurrentImage();\n\n    const handleMuteVideo = useCallback(() => {\n        if (image) {\n            if (mutedVideo && image.onUnmute) {\n                image.onUnmute();\n            } else if (image.onMute) {\n                image.onMute();\n            }\n        }\n        setMutedVideo(!mutedVideo);\n    }, [image, mutedVideo, setMutedVideo]);\n\n    const handlePlayVideo = useCallback(() => {\n        setPlayingVideo(!playingVideo);\n    }, [playingVideo, setPlayingVideo]);\n\n    return isVideo(image?.src) ? (\n        <section className={cn(styles.infoWrapper, styles.video)}>\n            {playingVideo ? (\n                <Buttons.Pause onClick={handlePlayVideo} />\n            ) : (\n                <Buttons.Play onClick={handlePlayVideo} />\n            )}\n            <TypographyText\n                className={styles.description}\n                tag='div'\n                view='component-primary'\n                color='static-primary-light'\n            >\n                {image?.name}\n            </TypographyText>\n            {mutedVideo ? (\n                <Buttons.UnmuteVideo onClick={handleMuteVideo} />\n            ) : (\n                <Buttons.MuteVideo onClick={handleMuteVideo} />\n            )}\n        </section>\n    ) : (\n        <section className={styles.infoWrapper}>\n            <TypographyText\n                className={styles.description}\n                tag='div'\n                view='component-primary'\n                color='static-primary-light'\n            >\n                {image?.name}\n            </TypographyText>\n        </section>\n    );\n};\n"],"names":["useContext","GalleryContext","useCallback","isVideo","React","cn","styles","Buttons.Pause","Buttons.Play","TypographyText","Buttons.UnmuteVideo","Buttons.MuteVideo"],"mappings":";;;;;;;;;;;;;;;;;;;AAWa,IAAA,OAAO,GAAG,YAAA;IACb,IAAA,EAAA,GACFA,gBAAU,CAACC,sBAAc,CAAC,EADtB,eAAe,qBAAA,EAAE,UAAU,gBAAA,EAAE,aAAa,mBAAA,EAAE,YAAY,kBAAA,EAAE,eAAe,qBACnD;AAE9B,IAAA,IAAM,KAAK,GAAG,eAAe,EAAE;IAE/B,IAAM,eAAe,GAAGC,iBAAW,CAAC,YAAA;QAChC,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,UAAU,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAC9B,KAAK,CAAC,QAAQ,EAAE;;AACb,iBAAA,IAAI,KAAK,CAAC,MAAM,EAAE;gBACrB,KAAK,CAAC,MAAM,EAAE;;;AAGtB,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;KAC7B,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;IAEtC,IAAM,eAAe,GAAGA,iBAAW,CAAC,YAAA;AAChC,QAAA,eAAe,CAAC,CAAC,YAAY,CAAC;AAClC,KAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;IAEnC,OAAOC,aAAO,CAAC,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,GAAG,CAAC,IACtBC,sBAAS,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,WAAW,EAAEA,uBAAM,CAAC,KAAK,CAAC,EAAA;QACnD,YAAY,IACTF,sBAAA,CAAA,aAAA,CAACG,WAAa,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,KAE3CH,sBAAA,CAAA,aAAA,CAACI,UAAY,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,CAC7C;QACDJ,sBAAC,CAAA,aAAA,CAAAK,mBAAc,EACX,EAAA,SAAS,EAAEH,uBAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC;AAChB,QAAA,UAAU,IACPF,sBAAA,CAAA,aAAA,CAACM,iBAAmB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,KAEjDN,sBAAA,CAAA,aAAA,CAACO,eAAiB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,CAClD,CACK,KAEVP,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAEE,uBAAM,CAAC,WAAW,EAAA;AAClC,QAAAF,sBAAA,CAAA,aAAA,CAACK,mBAAc,EAAA,EACX,SAAS,EAAEH,uBAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC,CACX,CACb;AACL;;;;"}