@alfalab/core-components-gallery 7.0.6 → 7.1.0-alfasans

package/index.css

@@ -13,7 +13,7 @@
     --sat: env(safe-area-inset-top, var(--gap-0));
     --sab: env(safe-area-inset-bottom, var(--gap-0));
 }
-.gallery__container_j5zem {
+.gallery__container_1rkkm {
     position: relative;
     overflow-x: hidden;
     overflow-y: auto;
@@ -26,16 +26,16 @@
     padding-top: var(--sat);
     padding-bottom: var(--sab);
 }
-.gallery__container_j5zem.gallery__mobile_j5zem {
+.gallery__container_1rkkm.gallery__mobile_1rkkm {
         overflow: hidden;
     }
-.gallery__modal_j5zem {
+.gallery__modal_1rkkm {
     flex-grow: 1;
     width: 100vw;
     height: 100vh;
     background: transparent;
 }
-.gallery__navigationVideo_j5zem {
+.gallery__navigationVideo_1rkkm {
     z-index: 3;
     width: 100%;
     position: absolute;
@@ -44,18 +44,18 @@
     transition: transform 0.3s ease-in-out;
     text-align: center;
 }
-.gallery__hide_j5zem {
+.gallery__hide_1rkkm {
     transform: translateY(114px);
 }
-.gallery__hideInfo_j5zem {
+.gallery__hideInfo_1rkkm {
     transform: translateY(48px);
 }
-.gallery__bottomButton_j5zem {
+.gallery__bottomButton_1rkkm {
     width: calc(100% - var(--gap-32));
     margin: var(--gap-16);
     background-color: var(--color-static-neutral-translucent-500-inverted);
 }
-.gallery__subtitles_j5zem {
+.gallery__subtitles_1rkkm {
     padding: var(--gap-0) var(--gap-32);
     margin-bottom: var(--gap-16);
     width: 100%;
@@ -66,6 +66,6 @@
         opacity 500ms ease-in-out,
         margin-bottom 270ms ease-in-out;
 }
-.gallery__hideSubtitles_j5zem {
+.gallery__hideSubtitles_1rkkm {
     opacity: 0;
 }

package/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"container":"gallery__container_j5zem","mobile":"gallery__mobile_j5zem","modal":"gallery__modal_j5zem","navigationVideo":"gallery__navigationVideo_j5zem","hide":"gallery__hide_j5zem","hideInfo":"gallery__hideInfo_j5zem","bottomButton":"gallery__bottomButton_j5zem"};
+var styles = {"container":"gallery__container_1rkkm","mobile":"gallery__mobile_1rkkm","modal":"gallery__modal_1rkkm","navigationVideo":"gallery__navigationVideo_1rkkm","hide":"gallery__hide_1rkkm","hideInfo":"gallery__hideInfo_1rkkm","bottomButton":"gallery__bottomButton_1rkkm"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/modern/Component.d.ts

@@ -1,6 +1,6 @@
 import { type FC } from 'react';
 import { type GalleryImage } from './types';
-export declare type GalleryProps = {
+export type GalleryProps = {
     /**
      * Управление видимостью
      */

package/modern/Component.js.map

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

package/modern/components/bottom-button/Component.d.ts

@@ -1,6 +1,6 @@
 import React, { type MouseEvent } from 'react';
 import { type TBottomButton } from '../../types';
-declare type Props = {
+type Props = {
     onClick: (e: MouseEvent) => void;
     className?: string;
     bottomButton: TBottomButton;

package/modern/components/bottom-button/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/bottom-button/Component.tsx"],"sourcesContent":["import React, { type MouseEvent, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Typography } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type TBottomButton } from '../../types';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    onClick: (e: MouseEvent) => void;\n    className?: string;\n    bottomButton: TBottomButton;\n};\n\nexport const BottomButton = ({ onClick, className, bottomButton }: Props) => {\n    const timer = useRef<ReturnType<typeof setTimeout>>();\n\n    const [visible, setVisible] = useState<boolean>(false);\n    const { currentSlideIndex, getSwiper, singleSlide } = useContext(GalleryContext);\n\n    useEffect(() => {\n        const swiper = getSwiper();\n\n        if ((currentSlideIndex === swiper?.activeIndex || singleSlide) && bottomButton.timeout) {\n            if (timer.current) {\n                clearTimeout(timer.current);\n            }\n            setVisible(false);\n            timer.current = setTimeout(() => setVisible(true), bottomButton.timeout * 1000);\n        }\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [bottomButton.timeout, currentSlideIndex, singleSlide]);\n\n    return (\n        <Button\n            size={56}\n            className={cn(\n                styles.component,\n                { [styles.notVisible]: !visible && bottomButton.timeout },\n                className,\n            )}\n            onClick={onClick}\n        >\n            <Typography.Text color='static-primary-light'>{bottomButton.text}</Typography.Text>\n        </Button>\n    );\n};\n"],"names":[],"mappings":";;;;;;;AAiBO,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAS,KAAI;AACxE,IAAA,MAAM,KAAK,GAAG,MAAM,EAAiC;IAErD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;AACtD,IAAA,MAAM,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;IAEhF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,MAAM,GAAG,SAAS,EAAE;AAE1B,QAAA,IAAI,CAAC,iBAAiB,KAAK,MAAM,EAAE,WAAW,IAAI,WAAW,KAAK,YAAY,CAAC,OAAO,EAAE;YACpF,IAAI,KAAK,CAAC,OAAO,EAAE;AACf,gBAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;AAC9B;YACD,UAAU,CAAC,KAAK,CAAC;AACjB,YAAA,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,UAAU,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;AAClF;;KAEJ,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAE1D,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,EAAE,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE,EACzD,SAAS,CACZ,EACD,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,sBAAsB,EAAE,EAAA,YAAY,CAAC,IAAI,CAAmB,CAC9E;AAEjB;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/bottom-button/Component.tsx"],"sourcesContent":["import React, { type MouseEvent, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Typography } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type TBottomButton } from '../../types';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    onClick: (e: MouseEvent) => void;\n    className?: string;\n    bottomButton: TBottomButton;\n};\n\nexport const BottomButton = ({ onClick, className, bottomButton }: Props) => {\n    const timer = useRef<ReturnType<typeof setTimeout>>();\n\n    const [visible, setVisible] = useState<boolean>(false);\n    const { currentSlideIndex, getSwiper, singleSlide } = useContext(GalleryContext);\n\n    useEffect(() => {\n        const swiper = getSwiper();\n\n        if ((currentSlideIndex === swiper?.activeIndex || singleSlide) && bottomButton.timeout) {\n            if (timer.current) {\n                clearTimeout(timer.current);\n            }\n            setVisible(false);\n            timer.current = setTimeout(() => setVisible(true), bottomButton.timeout * 1000);\n        }\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [bottomButton.timeout, currentSlideIndex, singleSlide]);\n\n    return (\n        <Button\n            size={56}\n            className={cn(\n                styles.component,\n                { [styles.notVisible]: !visible && bottomButton.timeout },\n                className,\n            )}\n            onClick={onClick}\n        >\n            <Typography.Text color='static-primary-light'>{bottomButton.text}</Typography.Text>\n        </Button>\n    );\n};\n"],"names":[],"mappings":";;;;;;;AAiBO,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAS,KAAI;AACxE,IAAA,MAAM,KAAK,GAAG,MAAM,EAAiC;IAErD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;AACtD,IAAA,MAAM,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;IAEhF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,MAAM,GAAG,SAAS,EAAE;AAE1B,QAAA,IAAI,CAAC,iBAAiB,KAAK,MAAM,EAAE,WAAW,IAAI,WAAW,KAAK,YAAY,CAAC,OAAO,EAAE;AACpF,YAAA,IAAI,KAAK,CAAC,OAAO,EAAE;AACf,gBAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;;YAE/B,UAAU,CAAC,KAAK,CAAC;AACjB,YAAA,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,UAAU,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;;;KAGtF,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAE1D,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,SAAS,EAChB,EAAE,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE,EACzD,SAAS,CACZ,EACD,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,sBAAsB,EAAE,EAAA,YAAY,CAAC,IAAI,CAAmB,CAC9E;AAEjB;;;;"}

package/modern/components/bottom-button/index.css

@@ -3,20 +3,20 @@
     --color-static-neutral-translucent-500-inverted-hover: rgba(233, 233, 250, 0.37);
     --color-static-neutral-translucent-500-inverted-press: rgba(238, 238, 254, 0.46);
 }
-.gallery__component_1miu3 {
+.gallery__component_gbgcv {
     background-color: var(--color-static-neutral-translucent-500-inverted);
 }
-.gallery__component_1miu3:hover {
+.gallery__component_gbgcv:hover {
         background-color: var(--color-static-neutral-translucent-500-inverted-hover);
     }
-.gallery__component_1miu3:active {
+.gallery__component_gbgcv:active {
         background-color: var(--color-static-neutral-translucent-500-inverted-press);
     }
-.gallery__component_1miu3 {
+.gallery__component_gbgcv {
 
     transition: transform 1s ease-in-out;
     will-change: transform;
 }
-.gallery__notVisible_1miu3 {
+.gallery__notVisible_gbgcv {
     transform: translateY(250%);
 }

package/modern/components/bottom-button/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"gallery__component_1miu3","notVisible":"gallery__notVisible_1miu3"};
+const styles = {"component":"gallery__component_gbgcv","notVisible":"gallery__notVisible_gbgcv"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/buttons/index.css

@@ -8,19 +8,19 @@
     --gap-2xl: 32px;
     --gap-32: var(--gap-2xl);
 }
-.gallery__buttons_1icms {
+.gallery__buttons_evax6 {
     display: flex;
     padding-left: var(--gap-32);
 }
-.gallery__buttons_1icms path {
+.gallery__buttons_evax6 path {
         color: var(--color-static-neutral-translucent-1300-inverted);
     }
-.gallery__iconButton_1icms path {
+.gallery__iconButton_evax6 path {
         color: var(--color-static-neutral-100);
     }
-.gallery__iconButton_1icms:hover path {
+.gallery__iconButton_evax6:hover path {
         color: var(--color-static-neutral-100-hover);
     }
-.gallery__iconButton_1icms:active path {
+.gallery__iconButton_evax6:active path {
         color: var(--color-static-neutral-100-press);
     }

package/modern/components/buttons/index.d.ts

@@ -1,6 +1,6 @@
 import { type FC, type MutableRefObject } from 'react';
 import { type IconButtonProps } from '@alfalab/core-components-icon-button/modern';
-declare type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
+type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
     buttonRef?: MutableRefObject<HTMLButtonElement | null>;
     download?: string | boolean;
 };

package/modern/components/buttons/index.js

@@ -28,7 +28,7 @@ const UnmuteVideo = ({ buttonRef, className, ...restProps }) => (React.createEle
 const Download = (props) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
     React.createElement(IconButton, { ...props, icon: PointerDownMIcon, "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })));
 const Share = (props) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...props, icon: ShareMIcon, "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })));
+    React.createElement(IconButton, { ...props, icon: ShareMIcon, "aria-label": '\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F', className: styles.iconButton })));
 const Exit = (props) => (React.createElement(IconButton, { ...props, icon: CrossMIcon, "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }));
 
 export { BackArrow, Download, Exit, ExitFullscreen, Fullscreen, MuteVideo, Pause, Play, Share, UnmuteVideo };

package/modern/components/buttons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/buttons/index.tsx"],"sourcesContent":["import React, { type FC, type MutableRefObject } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, type IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { TooltipDesktop } from '@alfalab/core-components-tooltip/desktop';\nimport { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';\nimport { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';\nimport { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\nimport { PauseCompactMIcon } from '@alfalab/icons-glyph/PauseCompactMIcon';\nimport { PlayCompactMIcon } from '@alfalab/icons-glyph/PlayCompactMIcon';\nimport { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';\nimport { ShareMIcon } from '@alfalab/icons-glyph/ShareMIcon';\nimport { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';\nimport { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';\n\nimport styles from './index.module.css';\n\ntype Props = Omit<IconButtonProps, 'icon' | 'colors'> & {\n    buttonRef?: MutableRefObject<HTMLButtonElement | null>;\n    download?: string | boolean;\n};\n\nexport const Fullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Открыть в полноэкранном режиме'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={ArrowsOutwardMIcon}\n            aria-label='Открыть в полноэкранном режиме'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const BackArrow: FC<Props> = ({ buttonRef, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={ArrowLeftMIcon}\n        aria-label='Вернуться назад'\n        className={styles.iconButton}\n    />\n);\n\nexport const Play: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={PlayCompactMIcon}\n        aria-label='Проиграть видео'\n        className={cn(styles.iconButton, className)}\n    />\n);\n\nexport const Pause: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={PauseCompactMIcon}\n        aria-label='Поставить паузу на видео'\n        className={cn(styles.iconButton, className)}\n    />\n);\n\nexport const ExitFullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Выйти из полноэкранного режима'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={ArrowsInwardMIcon}\n            aria-label='Выйти из полноэкранного режима'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const MuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Выключить звук'\n        fallbackPlacements={['bottom-end']}\n        targetClassName={className}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={SoundMIcon}\n            aria-label='Выключить звук'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const UnmuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Включить звук'\n        fallbackPlacements={['bottom-end']}\n        targetClassName={className}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={SoundCrossMIcon}\n            aria-label='Включить звук'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const Download: FC<Props> = (props) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Скачать'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...props}\n            icon={PointerDownMIcon}\n            aria-label='Скачать'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const Share: FC<Props> = (props) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Поделиться'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...props}\n            icon={ShareMIcon}\n            aria-label='Скачать'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const Exit: FC<Props> = (props) => (\n    <IconButton {...props} icon={CrossMIcon} aria-label='Закрыть' className={styles.iconButton} />\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/buttons/index.tsx"],"sourcesContent":["import React, { type FC, type MutableRefObject } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, type IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { TooltipDesktop } from '@alfalab/core-components-tooltip/desktop';\nimport { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';\nimport { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';\nimport { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\nimport { PauseCompactMIcon } from '@alfalab/icons-glyph/PauseCompactMIcon';\nimport { PlayCompactMIcon } from '@alfalab/icons-glyph/PlayCompactMIcon';\nimport { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';\nimport { ShareMIcon } from '@alfalab/icons-glyph/ShareMIcon';\nimport { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';\nimport { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';\n\nimport styles from './index.module.css';\n\ntype Props = Omit<IconButtonProps, 'icon' | 'colors'> & {\n    buttonRef?: MutableRefObject<HTMLButtonElement | null>;\n    download?: string | boolean;\n};\n\nexport const Fullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Открыть в полноэкранном режиме'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={ArrowsOutwardMIcon}\n            aria-label='Открыть в полноэкранном режиме'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const BackArrow: FC<Props> = ({ buttonRef, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={ArrowLeftMIcon}\n        aria-label='Вернуться назад'\n        className={styles.iconButton}\n    />\n);\n\nexport const Play: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={PlayCompactMIcon}\n        aria-label='Проиграть видео'\n        className={cn(styles.iconButton, className)}\n    />\n);\n\nexport const Pause: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={PauseCompactMIcon}\n        aria-label='Поставить паузу на видео'\n        className={cn(styles.iconButton, className)}\n    />\n);\n\nexport const ExitFullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Выйти из полноэкранного режима'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={ArrowsInwardMIcon}\n            aria-label='Выйти из полноэкранного режима'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const MuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Выключить звук'\n        fallbackPlacements={['bottom-end']}\n        targetClassName={className}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={SoundMIcon}\n            aria-label='Выключить звук'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const UnmuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Включить звук'\n        fallbackPlacements={['bottom-end']}\n        targetClassName={className}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={SoundCrossMIcon}\n            aria-label='Включить звук'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const Download: FC<Props> = (props) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Скачать'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...props}\n            icon={PointerDownMIcon}\n            aria-label='Скачать'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const Share: FC<Props> = (props) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Поделиться'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...props}\n            icon={ShareMIcon}\n            aria-label='Поделиться'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const Exit: FC<Props> = (props) => (\n    <IconButton {...props} icon={CrossMIcon} aria-label='Закрыть' className={styles.iconButton} />\n);\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"iconButton":"gallery__iconButton_1icms"};
+const styles = {"iconButton":"gallery__iconButton_evax6"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/header/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/header/Component.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect, useRef } from 'react';\n\nimport { GalleryContext } from '../../context';\nimport { isSmallImage, isVideo, TestIds } from '../../utils';\nimport * as Buttons from '../buttons';\nimport { HeaderInfoBlock } from '../header-info-block';\n\nimport styles from './index.module.css';\n\nexport const Header: FC = () => {\n    const {\n        currentSlideIndex,\n        singleSlide,\n        images,\n        fullScreen,\n        getCurrentImageMeta,\n        getCurrentImage,\n        setFullScreen,\n        onClose,\n        mutedVideo,\n        setMutedVideo,\n    } = useContext(GalleryContext);\n\n    const currentImage = getCurrentImage();\n    const meta = getCurrentImageMeta();\n\n    const toggleFullScreenButton = useRef<HTMLButtonElement>(null);\n\n    const onMuteButtonClick = () => {\n        if (currentImage) {\n            if (mutedVideo && currentImage.onUnmute) {\n                currentImage.onUnmute();\n            } else if (currentImage.onMute) {\n                currentImage.onMute();\n            }\n        }\n        setMutedVideo(!mutedVideo);\n    };\n\n    const closeFullScreen = () => {\n        setFullScreen(false);\n    };\n\n    const openFullScreen = () => {\n        setFullScreen(true);\n    };\n\n    useEffect(() => {\n        if (toggleFullScreenButton.current) {\n            toggleFullScreenButton.current.focus();\n        }\n    }, [fullScreen]);\n\n    const canDownload = currentImage?.canDownload ?? true;\n    const filename = currentImage?.name || '';\n    const description =\n        singleSlide || !images.length ? '' : `${currentSlideIndex + 1} из ${images.length}`;\n\n    const showFullScreenButton = !isSmallImage(meta) && !meta?.broken;\n    const showDownloadButton = !meta?.broken && canDownload;\n\n    const renderToggleFullScreenButton = () =>\n        fullScreen ? (\n            <Buttons.ExitFullscreen\n                onClick={closeFullScreen}\n                buttonRef={toggleFullScreenButton}\n                dataTestId={TestIds.EXIT_FULLSCREEN_BUTTON}\n            />\n        ) : (\n            <Buttons.Fullscreen\n                onClick={openFullScreen}\n                buttonRef={toggleFullScreenButton}\n                dataTestId={TestIds.FULLSCREEN_BUTTON}\n            />\n        );\n\n    const renderToggleMuteVideo = () =>\n        mutedVideo ? (\n            <Buttons.UnmuteVideo onClick={onMuteButtonClick} dataTestId={TestIds.UNMUTE_BUTTON} />\n        ) : (\n            <Buttons.MuteVideo onClick={onMuteButtonClick} dataTestId={TestIds.MUTE_BUTTON} />\n        );\n\n    return (\n        <div className={styles.header}>\n            <HeaderInfoBlock filename={filename} description={description} />\n\n            <div className={styles.buttons}>\n                {isVideo(currentImage?.src) && renderToggleMuteVideo()}\n                {showFullScreenButton && renderToggleFullScreenButton()}\n\n                {showDownloadButton && (\n                    <Buttons.Download\n                        href={currentImage?.src}\n                        download={currentImage?.name}\n                        dataTestId={TestIds.DOWNLOAD_BUTTON}\n                    />\n                )}\n\n                <Buttons.Exit onClick={onClose} dataTestId={TestIds.CLOSE_BUTTON} />\n            </div>\n        </div>\n    );\n};\n"],"names":["Buttons.ExitFullscreen","Buttons.Fullscreen","Buttons.UnmuteVideo","Buttons.MuteVideo","Buttons.Download","Buttons.Exit"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/header/Component.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect, useRef } from 'react';\n\nimport { GalleryContext } from '../../context';\nimport { isSmallImage, isVideo, TestIds } from '../../utils';\nimport * as Buttons from '../buttons';\nimport { HeaderInfoBlock } from '../header-info-block';\n\nimport styles from './index.module.css';\n\nexport const Header: FC = () => {\n    const {\n        currentSlideIndex,\n        singleSlide,\n        images,\n        fullScreen,\n        getCurrentImageMeta,\n        getCurrentImage,\n        setFullScreen,\n        onClose,\n        mutedVideo,\n        setMutedVideo,\n    } = useContext(GalleryContext);\n\n    const currentImage = getCurrentImage();\n    const meta = getCurrentImageMeta();\n\n    const toggleFullScreenButton = useRef<HTMLButtonElement>(null);\n\n    const onMuteButtonClick = () => {\n        if (currentImage) {\n            if (mutedVideo && currentImage.onUnmute) {\n                currentImage.onUnmute();\n            } else if (currentImage.onMute) {\n                currentImage.onMute();\n            }\n        }\n        setMutedVideo(!mutedVideo);\n    };\n\n    const closeFullScreen = () => {\n        setFullScreen(false);\n    };\n\n    const openFullScreen = () => {\n        setFullScreen(true);\n    };\n\n    useEffect(() => {\n        if (toggleFullScreenButton.current) {\n            toggleFullScreenButton.current.focus();\n        }\n    }, [fullScreen]);\n\n    const canDownload = currentImage?.canDownload ?? true;\n    const filename = currentImage?.name || '';\n    const description =\n        singleSlide || !images.length ? '' : `${currentSlideIndex + 1} из ${images.length}`;\n\n    const showFullScreenButton = !isSmallImage(meta) && !meta?.broken;\n    const showDownloadButton = !meta?.broken && canDownload;\n\n    const renderToggleFullScreenButton = () =>\n        fullScreen ? (\n            <Buttons.ExitFullscreen\n                onClick={closeFullScreen}\n                buttonRef={toggleFullScreenButton}\n                dataTestId={TestIds.EXIT_FULLSCREEN_BUTTON}\n            />\n        ) : (\n            <Buttons.Fullscreen\n                onClick={openFullScreen}\n                buttonRef={toggleFullScreenButton}\n                dataTestId={TestIds.FULLSCREEN_BUTTON}\n            />\n        );\n\n    const renderToggleMuteVideo = () =>\n        mutedVideo ? (\n            <Buttons.UnmuteVideo onClick={onMuteButtonClick} dataTestId={TestIds.UNMUTE_BUTTON} />\n        ) : (\n            <Buttons.MuteVideo onClick={onMuteButtonClick} dataTestId={TestIds.MUTE_BUTTON} />\n        );\n\n    return (\n        <div className={styles.header}>\n            <HeaderInfoBlock filename={filename} description={description} />\n\n            <div className={styles.buttons}>\n                {isVideo(currentImage?.src) && renderToggleMuteVideo()}\n                {showFullScreenButton && renderToggleFullScreenButton()}\n\n                {showDownloadButton && (\n                    <Buttons.Download\n                        href={currentImage?.src}\n                        download={currentImage?.name}\n                        dataTestId={TestIds.DOWNLOAD_BUTTON}\n                    />\n                )}\n\n                <Buttons.Exit onClick={onClose} dataTestId={TestIds.CLOSE_BUTTON} />\n            </div>\n        </div>\n    );\n};\n"],"names":["Buttons.ExitFullscreen","Buttons.Fullscreen","Buttons.UnmuteVideo","Buttons.MuteVideo","Buttons.Download","Buttons.Exit"],"mappings":";;;;;;;;AASO,MAAM,MAAM,GAAO,MAAK;IAC3B,MAAM,EACF,iBAAiB,EACjB,WAAW,EACX,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,eAAe,EACf,aAAa,EACb,OAAO,EACP,UAAU,EACV,aAAa,GAChB,GAAG,UAAU,CAAC,cAAc,CAAC;AAE9B,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,MAAM,IAAI,GAAG,mBAAmB,EAAE;AAElC,IAAA,MAAM,sBAAsB,GAAG,MAAM,CAAoB,IAAI,CAAC;IAE9D,MAAM,iBAAiB,GAAG,MAAK;QAC3B,IAAI,YAAY,EAAE;AACd,YAAA,IAAI,UAAU,IAAI,YAAY,CAAC,QAAQ,EAAE;gBACrC,YAAY,CAAC,QAAQ,EAAE;;AACpB,iBAAA,IAAI,YAAY,CAAC,MAAM,EAAE;gBAC5B,YAAY,CAAC,MAAM,EAAE;;;AAG7B,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;AAC9B,KAAC;IAED,MAAM,eAAe,GAAG,MAAK;QACzB,aAAa,CAAC,KAAK,CAAC;AACxB,KAAC;IAED,MAAM,cAAc,GAAG,MAAK;QACxB,aAAa,CAAC,IAAI,CAAC;AACvB,KAAC;IAED,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,sBAAsB,CAAC,OAAO,EAAE;AAChC,YAAA,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE;;AAE9C,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,MAAM,WAAW,GAAG,YAAY,EAAE,WAAW,IAAI,IAAI;AACrD,IAAA,MAAM,QAAQ,GAAG,YAAY,EAAE,IAAI,IAAI,EAAE;IACzC,MAAM,WAAW,GACb,WAAW,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,EAAE,GAAG,CAAG,EAAA,iBAAiB,GAAG,CAAC,OAAO,MAAM,CAAC,MAAM,CAAA,CAAE;AAEvF,IAAA,MAAM,oBAAoB,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM;IACjE,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,MAAM,IAAI,WAAW;IAEvD,MAAM,4BAA4B,GAAG,MACjC,UAAU,IACN,KAAC,CAAA,aAAA,CAAAA,cAAsB,EAAA,EACnB,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,sBAAsB,EACjC,UAAU,EAAE,OAAO,CAAC,sBAAsB,EAC5C,CAAA,KAEF,oBAACC,UAAkB,EAAA,EACf,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,sBAAsB,EACjC,UAAU,EAAE,OAAO,CAAC,iBAAiB,EACvC,CAAA,CACL;IAEL,MAAM,qBAAqB,GAAG,MAC1B,UAAU,IACN,oBAACC,WAAmB,EAAC,EAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,OAAO,CAAC,aAAa,EAAI,CAAA,KAEtF,KAAC,CAAA,aAAA,CAAAC,SAAiB,EAAA,EAAC,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,OAAO,CAAC,WAAW,EAAI,CAAA,CACrF;AAEL,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA;QACzB,KAAC,CAAA,aAAA,CAAA,eAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAI,CAAA;AAEjE,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA;AACzB,YAAA,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,IAAI,qBAAqB,EAAE;YACrD,oBAAoB,IAAI,4BAA4B,EAAE;YAEtD,kBAAkB,KACf,KAAA,CAAA,aAAA,CAACC,QAAgB,EACb,EAAA,IAAI,EAAE,YAAY,EAAE,GAAG,EACvB,QAAQ,EAAE,YAAY,EAAE,IAAI,EAC5B,UAAU,EAAE,OAAO,CAAC,eAAe,EAAA,CACrC,CACL;AAED,YAAA,KAAA,CAAA,aAAA,CAACC,IAAY,EAAC,EAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,CAAC,YAAY,GAAI,CAClE,CACJ;AAEd;;;;"}

package/modern/components/header/index.css

@@ -4,7 +4,7 @@
     --gap-16: var(--gap-m);
     --gap-32: var(--gap-2xl);
 }
-.gallery__header_hvcja {
+.gallery__header_9rhcf {
     display: flex;
     justify-content: space-between;
     flex-shrink: 0;

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"header":"gallery__header_hvcja"};
+const styles = {"header":"gallery__header_9rhcf"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/header-info-block/Component.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-export declare type HeaderInfoBlockProps = {
+export type HeaderInfoBlockProps = {
     filename: string;
     description?: string;
 };

package/modern/components/header-info-block/index.css

@@ -2,24 +2,24 @@
     --gap-2xs: 4px;
     --gap-4: var(--gap-2xs);
 }
-.gallery__info_1bp7m {
+.gallery__info_1nw4k {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     overflow: hidden;
 }
-.gallery__filenameHead_1bp7m {
+.gallery__filenameHead_1nw4k {
     display: inline;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }
-.gallery__filenameContainer_1bp7m {
+.gallery__filenameContainer_1nw4k {
     overflow: hidden;
     display: inline-flex;
 }
-.gallery__description_1bp7m {
+.gallery__description_1nw4k {
     display: inline;
     text-overflow: ellipsis;
     overflow: hidden;

package/modern/components/header-info-block/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"info":"gallery__info_1bp7m","filenameHead":"gallery__filenameHead_1bp7m","filenameContainer":"gallery__filenameContainer_1bp7m","description":"gallery__description_1bp7m"};
+const styles = {"info":"gallery__info_1nw4k","filenameHead":"gallery__filenameHead_1nw4k","filenameContainer":"gallery__filenameContainer_1nw4k","description":"gallery__description_1nw4k"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/header-mobile/Component.js

@@ -14,6 +14,8 @@ const HeaderMobile = () => {
     const description = images.length > 1 && `${currentSlideIndex + 1} из ${images.length}`;
     const canDownload = currentImage?.canDownload ?? true;
     const showDownloadButton = !meta?.broken && canDownload;
+    const canShare = currentImage?.canShare ?? true;
+    const showShareButton = !meta?.broken && canShare;
     const handleShareClick = async () => {
         if (!currentImage || !navigator.share) {
             return;
@@ -70,7 +72,7 @@ const HeaderMobile = () => {
         React.createElement(TypographyText, { className: styles.description, tag: 'div', view: 'component-primary', color: 'static-primary-light' }, description),
         React.createElement("div", { className: styles.rightButtons },
             showDownloadButton && (React.createElement(Download, { href: currentImage?.src, download: currentImage?.name, dataTestId: TestIds.DOWNLOAD_BUTTON })),
-            !meta?.broken && React.createElement(Share, { onClick: handleShareClick }))));
+            showShareButton && React.createElement(Share, { onClick: handleShareClick }))));
 };
 
 export { HeaderMobile };

package/modern/components/header-mobile/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/header-mobile/Component.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo, TestIds } from '../../utils';\nimport * as Buttons from '../buttons';\n\nimport styles from './index.module.css';\n\nexport const HeaderMobile = () => {\n    const {\n        onClose,\n        images,\n        currentSlideIndex,\n        getCurrentImage,\n        getCurrentImageMeta,\n        hideNavigation,\n    } = useContext(GalleryContext);\n\n    const currentImage = getCurrentImage();\n    const meta = getCurrentImageMeta();\n\n    const description = images.length > 1 && `${currentSlideIndex + 1} из ${images.length}`;\n\n    const canDownload = currentImage?.canDownload ?? true;\n    const showDownloadButton = !meta?.broken && canDownload;\n\n    const handleShareClick = async () => {\n        if (!currentImage || !navigator.share) {\n            return;\n        }\n\n        const title = currentImage.name ?? new Date().toISOString().split('T')[0];\n        const url = currentImage.src;\n\n        try {\n            if (isVideo(url)) {\n                // Если видео — всегда делим ссылку\n                await navigator.share({\n                    title,\n                    url,\n                    text: 'Видео',\n                });\n\n                return;\n            }\n\n            // Попробуем скачать изображение\n            const response = await fetch(url, { mode: 'cors' });\n            const blob = await response.blob();\n\n            const file = new File([blob], `${title}.png`, {\n                type: blob.type,\n                lastModified: Date.now(),\n            });\n\n            const shareData: ShareData = {\n                files: [file],\n                title,\n                text: 'Картинка',\n            };\n\n            // Попробуем поделиться файлом\n            if (navigator.canShare?.(shareData) && response.ok) {\n                await navigator.share(shareData);\n            } else {\n                // Fallback: делимся только ссылкой\n                await navigator.share({\n                    title,\n                    text: 'Картинка',\n                    url,\n                });\n            }\n        } catch {\n            await navigator.share({\n                title,\n                url,\n            });\n        }\n    };\n\n    return (\n        <div\n            className={cn(styles.headerMobile, {\n                [styles.video]: isVideo(currentImage?.src),\n                [styles.hide]: hideNavigation,\n            })}\n        >\n            <Buttons.BackArrow onClick={onClose} />\n            <TypographyText\n                className={styles.description}\n                tag='div'\n                view='component-primary'\n                color='static-primary-light'\n            >\n                {description}\n            </TypographyText>\n            <div className={styles.rightButtons}>\n                {showDownloadButton && (\n                    <Buttons.Download\n                        href={currentImage?.src}\n                        download={currentImage?.name}\n                        dataTestId={TestIds.DOWNLOAD_BUTTON}\n                    />\n                )}\n                {!meta?.broken && <Buttons.Share onClick={handleShareClick} />}\n            </div>\n        </div>\n    );\n};\n"],"names":["Buttons.BackArrow","Buttons.Download","Buttons.Share"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/header-mobile/Component.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo, TestIds } from '../../utils';\nimport * as Buttons from '../buttons';\n\nimport styles from './index.module.css';\n\nexport const HeaderMobile = () => {\n    const {\n        onClose,\n        images,\n        currentSlideIndex,\n        getCurrentImage,\n        getCurrentImageMeta,\n        hideNavigation,\n    } = useContext(GalleryContext);\n\n    const currentImage = getCurrentImage();\n    const meta = getCurrentImageMeta();\n\n    const description = images.length > 1 && `${currentSlideIndex + 1} из ${images.length}`;\n\n    const canDownload = currentImage?.canDownload ?? true;\n    const showDownloadButton = !meta?.broken && canDownload;\n    const canShare = currentImage?.canShare ?? true;\n    const showShareButton = !meta?.broken && canShare;\n\n    const handleShareClick = async () => {\n        if (!currentImage || !navigator.share) {\n            return;\n        }\n\n        const title = currentImage.name ?? new Date().toISOString().split('T')[0];\n        const url = currentImage.src;\n\n        try {\n            if (isVideo(url)) {\n                // Если видео — всегда делим ссылку\n                await navigator.share({\n                    title,\n                    url,\n                    text: 'Видео',\n                });\n\n                return;\n            }\n\n            // Попробуем скачать изображение\n            const response = await fetch(url, { mode: 'cors' });\n            const blob = await response.blob();\n\n            const file = new File([blob], `${title}.png`, {\n                type: blob.type,\n                lastModified: Date.now(),\n            });\n\n            const shareData: ShareData = {\n                files: [file],\n                title,\n                text: 'Картинка',\n            };\n\n            // Попробуем поделиться файлом\n            if (navigator.canShare?.(shareData) && response.ok) {\n                await navigator.share(shareData);\n            } else {\n                // Fallback: делимся только ссылкой\n                await navigator.share({\n                    title,\n                    text: 'Картинка',\n                    url,\n                });\n            }\n        } catch {\n            await navigator.share({\n                title,\n                url,\n            });\n        }\n    };\n\n    return (\n        <div\n            className={cn(styles.headerMobile, {\n                [styles.video]: isVideo(currentImage?.src),\n                [styles.hide]: hideNavigation,\n            })}\n        >\n            <Buttons.BackArrow onClick={onClose} />\n            <TypographyText\n                className={styles.description}\n                tag='div'\n                view='component-primary'\n                color='static-primary-light'\n            >\n                {description}\n            </TypographyText>\n            <div className={styles.rightButtons}>\n                {showDownloadButton && (\n                    <Buttons.Download\n                        href={currentImage?.src}\n                        download={currentImage?.name}\n                        dataTestId={TestIds.DOWNLOAD_BUTTON}\n                    />\n                )}\n                {showShareButton && <Buttons.Share onClick={handleShareClick} />}\n            </div>\n        </div>\n    );\n};\n"],"names":["Buttons.BackArrow","Buttons.Download","Buttons.Share"],"mappings":"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"}

package/modern/components/header-mobile/index.css

@@ -1,7 +1,7 @@
 :root {
     --color-static-neutral-0-inverted: #262629;
 }
-.gallery__headerMobile_7jo6q {
+.gallery__headerMobile_1bb7u {
     position: relative;
     height: 72px;
     z-index: 3;
@@ -10,21 +10,21 @@
     justify-content: space-between;
     align-items: center;
 }
-.gallery__headerMobile_7jo6q.gallery__video_7jo6q {
+.gallery__headerMobile_1bb7u.gallery__video_1bb7u {
         position: absolute;
         width: 100%;
         background-color: var(--color-static-neutral-0-inverted);
         transition: transform 0.3s ease-in-out;
     }
-.gallery__hide_7jo6q {
+.gallery__hide_1bb7u {
     transform: translateY(-96px);
 }
-.gallery__leftButton_7jo6q,
-.gallery__rightButtons_7jo6q {
+.gallery__leftButton_1bb7u,
+.gallery__rightButtons_1bb7u {
     display: flex;
     align-items: center;
 }
-.gallery__description_7jo6q {
+.gallery__description_1bb7u {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);

package/modern/components/header-mobile/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"headerMobile":"gallery__headerMobile_7jo6q","video":"gallery__video_7jo6q","hide":"gallery__hide_7jo6q","rightButtons":"gallery__rightButtons_7jo6q","description":"gallery__description_7jo6q"};
+const styles = {"headerMobile":"gallery__headerMobile_1bb7u","video":"gallery__video_1bb7u","hide":"gallery__hide_1bb7u","rightButtons":"gallery__rightButtons_1bb7u","description":"gallery__description_1bb7u"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/image-preview/Component.d.ts

@@ -1,6 +1,6 @@
 import { type FC } from 'react';
 import { type GalleryImage } from '../../types';
-declare type Props = {
+type Props = {
     image: GalleryImage;
     index: number;
     active?: boolean;

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,\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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"}