@alfalab/core-components-gallery 6.0.2 → 6.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Component.d.ts +2 -2
- package/Component.js.map +1 -1
- package/components/bottom-button/Component.d.ts +1 -1
- package/components/bottom-button/Component.js.map +1 -1
- package/components/bottom-button/index.css +5 -5
- package/components/bottom-button/index.module.css.js +1 -1
- package/components/bottom-button/index.module.css.js.map +1 -1
- package/components/buttons/index.css +6 -6
- package/components/buttons/index.d.ts +2 -2
- package/components/buttons/index.js.map +1 -1
- package/components/buttons/index.module.css.js +1 -1
- package/components/buttons/index.module.css.js.map +1 -1
- package/components/header/Component.d.ts +1 -1
- package/components/header/Component.js.map +1 -1
- package/components/header/index.css +1 -1
- package/components/header/index.module.css.js +1 -1
- package/components/header/index.module.css.js.map +1 -1
- package/components/header-info-block/Component.d.ts +1 -1
- package/components/header-info-block/Component.js.map +1 -1
- package/components/header-info-block/index.css +4 -4
- package/components/header-info-block/index.module.css.js +1 -1
- package/components/header-info-block/index.module.css.js.map +1 -1
- package/components/header-mobile/index.css +7 -7
- package/components/header-mobile/index.module.css.js +1 -1
- package/components/header-mobile/index.module.css.js.map +1 -1
- package/components/image-preview/Component.d.ts +2 -2
- package/components/image-preview/Component.js.map +1 -1
- package/components/image-preview/index.css +23 -23
- package/components/image-preview/index.module.css.js +1 -1
- package/components/image-preview/index.module.css.js.map +1 -1
- package/components/image-viewer/component.d.ts +1 -1
- package/components/image-viewer/component.js.map +1 -1
- package/components/image-viewer/hooks.d.ts +1 -1
- package/components/image-viewer/hooks.js.map +1 -1
- package/components/image-viewer/index.css +31 -30
- package/components/image-viewer/index.module.css.js +1 -1
- package/components/image-viewer/index.module.css.js.map +1 -1
- package/components/image-viewer/single.d.ts +1 -1
- package/components/image-viewer/single.js.map +1 -1
- package/components/image-viewer/slide.d.ts +2 -2
- package/components/image-viewer/slide.js.map +1 -1
- package/components/image-viewer/video/index.css +9 -8
- package/components/image-viewer/video/index.js +4 -6
- package/components/image-viewer/video/index.js.map +1 -1
- package/components/image-viewer/video/index.module.css.js +1 -1
- package/components/image-viewer/video/index.module.css.js.map +1 -1
- package/components/info-bar/index.css +4 -4
- package/components/info-bar/index.module.css.js +1 -1
- package/components/info-bar/index.module.css.js.map +1 -1
- package/components/navigation-bar/Component.d.ts +1 -1
- package/components/navigation-bar/Component.js.map +1 -1
- package/components/navigation-bar/index.css +10 -10
- package/components/navigation-bar/index.module.css.js +1 -1
- package/components/navigation-bar/index.module.css.js.map +1 -1
- package/components/subtitles/index.css +8 -5
- package/components/subtitles/index.module.css.js +1 -1
- package/components/subtitles/index.module.css.js.map +1 -1
- package/context.d.ts +2 -2
- package/context.js.map +1 -1
- package/cssm/Component.d.ts +2 -2
- package/cssm/Component.js.map +1 -1
- package/cssm/components/bottom-button/Component.d.ts +1 -1
- package/cssm/components/bottom-button/Component.js.map +1 -1
- package/cssm/components/buttons/index.d.ts +2 -2
- package/cssm/components/buttons/index.js.map +1 -1
- package/cssm/components/buttons/index.module.css +1 -1
- package/cssm/components/header/Component.d.ts +1 -1
- package/cssm/components/header/Component.js.map +1 -1
- package/cssm/components/header-info-block/Component.d.ts +1 -1
- package/cssm/components/header-info-block/Component.js.map +1 -1
- package/cssm/components/header-mobile/index.module.css +1 -1
- package/cssm/components/image-preview/Component.d.ts +2 -2
- package/cssm/components/image-preview/Component.js.map +1 -1
- package/cssm/components/image-preview/index.module.css +6 -6
- package/cssm/components/image-viewer/component.d.ts +1 -1
- package/cssm/components/image-viewer/component.js.map +1 -1
- package/cssm/components/image-viewer/hooks.d.ts +1 -1
- package/cssm/components/image-viewer/hooks.js.map +1 -1
- package/cssm/components/image-viewer/index.module.css +6 -5
- package/cssm/components/image-viewer/single.d.ts +1 -1
- package/cssm/components/image-viewer/single.js.map +1 -1
- package/cssm/components/image-viewer/slide.d.ts +2 -2
- package/cssm/components/image-viewer/slide.js.map +1 -1
- package/cssm/components/image-viewer/video/index.js +4 -6
- package/cssm/components/image-viewer/video/index.js.map +1 -1
- package/cssm/components/image-viewer/video/index.module.css +2 -1
- package/cssm/components/info-bar/index.module.css +1 -1
- package/cssm/components/navigation-bar/Component.d.ts +1 -1
- package/cssm/components/navigation-bar/Component.js.map +1 -1
- package/cssm/components/navigation-bar/index.module.css +2 -2
- package/cssm/components/subtitles/index.module.css +5 -2
- package/cssm/context.d.ts +2 -2
- package/cssm/context.js.map +1 -1
- package/cssm/index.module.css +4 -2
- package/cssm/types.d.ts +1 -1
- package/cssm/utils/utils.d.ts +1 -1
- package/cssm/utils/utils.js +1 -1
- package/cssm/utils/utils.js.map +1 -1
- package/esm/Component.d.ts +2 -2
- package/esm/Component.js.map +1 -1
- package/esm/components/bottom-button/Component.d.ts +1 -1
- package/esm/components/bottom-button/Component.js.map +1 -1
- package/esm/components/bottom-button/index.css +5 -5
- package/esm/components/bottom-button/index.module.css.js +1 -1
- package/esm/components/bottom-button/index.module.css.js.map +1 -1
- package/esm/components/buttons/index.css +6 -6
- package/esm/components/buttons/index.d.ts +2 -2
- package/esm/components/buttons/index.js.map +1 -1
- package/esm/components/buttons/index.module.css.js +1 -1
- package/esm/components/buttons/index.module.css.js.map +1 -1
- package/esm/components/header/Component.d.ts +1 -1
- package/esm/components/header/Component.js.map +1 -1
- package/esm/components/header/index.css +1 -1
- package/esm/components/header/index.module.css.js +1 -1
- package/esm/components/header/index.module.css.js.map +1 -1
- package/esm/components/header-info-block/Component.d.ts +1 -1
- package/esm/components/header-info-block/Component.js.map +1 -1
- package/esm/components/header-info-block/index.css +4 -4
- package/esm/components/header-info-block/index.module.css.js +1 -1
- package/esm/components/header-info-block/index.module.css.js.map +1 -1
- package/esm/components/header-mobile/index.css +7 -7
- package/esm/components/header-mobile/index.module.css.js +1 -1
- package/esm/components/header-mobile/index.module.css.js.map +1 -1
- package/esm/components/image-preview/Component.d.ts +2 -2
- package/esm/components/image-preview/Component.js.map +1 -1
- package/esm/components/image-preview/index.css +23 -23
- package/esm/components/image-preview/index.module.css.js +1 -1
- package/esm/components/image-preview/index.module.css.js.map +1 -1
- package/esm/components/image-viewer/component.d.ts +1 -1
- package/esm/components/image-viewer/component.js.map +1 -1
- package/esm/components/image-viewer/hooks.d.ts +1 -1
- package/esm/components/image-viewer/hooks.js.map +1 -1
- package/esm/components/image-viewer/index.css +31 -30
- package/esm/components/image-viewer/index.module.css.js +1 -1
- package/esm/components/image-viewer/index.module.css.js.map +1 -1
- package/esm/components/image-viewer/single.d.ts +1 -1
- package/esm/components/image-viewer/single.js.map +1 -1
- package/esm/components/image-viewer/slide.d.ts +2 -2
- package/esm/components/image-viewer/slide.js.map +1 -1
- package/esm/components/image-viewer/video/index.css +9 -8
- package/esm/components/image-viewer/video/index.js +4 -6
- package/esm/components/image-viewer/video/index.js.map +1 -1
- package/esm/components/image-viewer/video/index.module.css.js +1 -1
- package/esm/components/image-viewer/video/index.module.css.js.map +1 -1
- package/esm/components/info-bar/index.css +4 -4
- package/esm/components/info-bar/index.module.css.js +1 -1
- package/esm/components/info-bar/index.module.css.js.map +1 -1
- package/esm/components/navigation-bar/Component.d.ts +1 -1
- package/esm/components/navigation-bar/Component.js.map +1 -1
- package/esm/components/navigation-bar/index.css +10 -10
- package/esm/components/navigation-bar/index.module.css.js +1 -1
- package/esm/components/navigation-bar/index.module.css.js.map +1 -1
- package/esm/components/subtitles/index.css +8 -5
- package/esm/components/subtitles/index.module.css.js +1 -1
- package/esm/components/subtitles/index.module.css.js.map +1 -1
- package/esm/context.d.ts +2 -2
- package/esm/context.js.map +1 -1
- package/esm/index.css +13 -11
- package/esm/index.module.css.js +1 -1
- package/esm/index.module.css.js.map +1 -1
- package/esm/types.d.ts +1 -1
- package/esm/utils/utils.d.ts +1 -1
- package/esm/utils/utils.js +1 -1
- package/esm/utils/utils.js.map +1 -1
- package/index.css +13 -11
- package/index.module.css.js +1 -1
- package/index.module.css.js.map +1 -1
- package/modern/Component.d.ts +2 -2
- package/modern/Component.js.map +1 -1
- package/modern/components/bottom-button/Component.d.ts +1 -1
- package/modern/components/bottom-button/Component.js.map +1 -1
- package/modern/components/bottom-button/index.css +5 -5
- package/modern/components/bottom-button/index.module.css.js +1 -1
- package/modern/components/bottom-button/index.module.css.js.map +1 -1
- package/modern/components/buttons/index.css +6 -6
- package/modern/components/buttons/index.d.ts +2 -2
- package/modern/components/buttons/index.js.map +1 -1
- package/modern/components/buttons/index.module.css.js +1 -1
- package/modern/components/buttons/index.module.css.js.map +1 -1
- package/modern/components/header/Component.d.ts +1 -1
- package/modern/components/header/Component.js.map +1 -1
- package/modern/components/header/index.css +1 -1
- package/modern/components/header/index.module.css.js +1 -1
- package/modern/components/header/index.module.css.js.map +1 -1
- package/modern/components/header-info-block/Component.d.ts +1 -1
- package/modern/components/header-info-block/Component.js.map +1 -1
- package/modern/components/header-info-block/index.css +4 -4
- package/modern/components/header-info-block/index.module.css.js +1 -1
- package/modern/components/header-info-block/index.module.css.js.map +1 -1
- package/modern/components/header-mobile/index.css +7 -7
- package/modern/components/header-mobile/index.module.css.js +1 -1
- package/modern/components/header-mobile/index.module.css.js.map +1 -1
- package/modern/components/image-preview/Component.d.ts +2 -2
- package/modern/components/image-preview/Component.js.map +1 -1
- package/modern/components/image-preview/index.css +23 -23
- package/modern/components/image-preview/index.module.css.js +1 -1
- package/modern/components/image-preview/index.module.css.js.map +1 -1
- package/modern/components/image-viewer/component.d.ts +1 -1
- package/modern/components/image-viewer/component.js.map +1 -1
- package/modern/components/image-viewer/hooks.d.ts +1 -1
- package/modern/components/image-viewer/hooks.js.map +1 -1
- package/modern/components/image-viewer/index.css +31 -30
- package/modern/components/image-viewer/index.module.css.js +1 -1
- package/modern/components/image-viewer/index.module.css.js.map +1 -1
- package/modern/components/image-viewer/single.d.ts +1 -1
- package/modern/components/image-viewer/single.js.map +1 -1
- package/modern/components/image-viewer/slide.d.ts +2 -2
- package/modern/components/image-viewer/slide.js.map +1 -1
- package/modern/components/image-viewer/video/index.css +9 -8
- package/modern/components/image-viewer/video/index.js +2 -6
- package/modern/components/image-viewer/video/index.js.map +1 -1
- package/modern/components/image-viewer/video/index.module.css.js +1 -1
- package/modern/components/image-viewer/video/index.module.css.js.map +1 -1
- package/modern/components/info-bar/index.css +4 -4
- package/modern/components/info-bar/index.module.css.js +1 -1
- package/modern/components/info-bar/index.module.css.js.map +1 -1
- package/modern/components/navigation-bar/Component.d.ts +1 -1
- package/modern/components/navigation-bar/Component.js.map +1 -1
- package/modern/components/navigation-bar/index.css +10 -10
- package/modern/components/navigation-bar/index.module.css.js +1 -1
- package/modern/components/navigation-bar/index.module.css.js.map +1 -1
- package/modern/components/subtitles/index.css +8 -5
- package/modern/components/subtitles/index.module.css.js +1 -1
- package/modern/components/subtitles/index.module.css.js.map +1 -1
- package/modern/context.d.ts +2 -2
- package/modern/context.js.map +1 -1
- package/modern/index.css +13 -11
- package/modern/index.module.css.js +1 -1
- package/modern/index.module.css.js.map +1 -1
- package/modern/types.d.ts +1 -1
- package/modern/utils/utils.d.ts +1 -1
- package/modern/utils/utils.js +1 -1
- package/modern/utils/utils.js.map +1 -1
- package/moderncssm/Component.d.ts +2 -2
- package/moderncssm/Component.js.map +1 -1
- package/moderncssm/components/bottom-button/Component.d.ts +1 -1
- package/moderncssm/components/bottom-button/Component.js.map +1 -1
- package/moderncssm/components/bottom-button/index.module.css +2 -0
- package/moderncssm/components/buttons/index.d.ts +2 -2
- package/moderncssm/components/buttons/index.js.map +1 -1
- package/moderncssm/components/buttons/index.module.css +3 -1
- package/moderncssm/components/header/Component.d.ts +1 -1
- package/moderncssm/components/header/Component.js.map +1 -1
- package/moderncssm/components/header/index.module.css +2 -0
- package/moderncssm/components/header-info-block/Component.d.ts +1 -1
- package/moderncssm/components/header-info-block/Component.js.map +1 -1
- package/moderncssm/components/header-info-block/index.module.css +2 -0
- package/moderncssm/components/header-mobile/index.module.css +3 -1
- package/moderncssm/components/image-preview/Component.d.ts +2 -2
- package/moderncssm/components/image-preview/Component.js.map +1 -1
- package/moderncssm/components/image-preview/index.module.css +8 -6
- package/moderncssm/components/image-viewer/component.d.ts +1 -1
- package/moderncssm/components/image-viewer/component.js.map +1 -1
- package/moderncssm/components/image-viewer/hooks.d.ts +1 -1
- package/moderncssm/components/image-viewer/hooks.js.map +1 -1
- package/moderncssm/components/image-viewer/index.module.css +7 -5
- package/moderncssm/components/image-viewer/single.d.ts +1 -1
- package/moderncssm/components/image-viewer/single.js.map +1 -1
- package/moderncssm/components/image-viewer/slide.d.ts +2 -2
- package/moderncssm/components/image-viewer/slide.js.map +1 -1
- package/moderncssm/components/image-viewer/video/index.js +2 -6
- package/moderncssm/components/image-viewer/video/index.js.map +1 -1
- package/moderncssm/components/image-viewer/video/index.module.css +3 -1
- package/moderncssm/components/info-bar/index.module.css +3 -1
- package/moderncssm/components/navigation-bar/Component.d.ts +1 -1
- package/moderncssm/components/navigation-bar/Component.js.map +1 -1
- package/moderncssm/components/navigation-bar/index.module.css +4 -2
- package/moderncssm/components/subtitles/index.module.css +7 -2
- package/moderncssm/context.d.ts +2 -2
- package/moderncssm/context.js.map +1 -1
- package/moderncssm/index.module.css +13 -2
- package/moderncssm/types.d.ts +1 -1
- package/moderncssm/utils/utils.d.ts +1 -1
- package/moderncssm/utils/utils.js +1 -1
- package/moderncssm/utils/utils.js.map +1 -1
- package/package.json +4 -4
- package/src/Component.tsx +3 -3
- package/src/components/bottom-button/Component.tsx +1 -1
- package/src/components/bottom-button/index.module.css +1 -1
- package/src/components/buttons/index.module.css +1 -1
- package/src/components/buttons/index.tsx +2 -2
- package/src/components/header/Component.tsx +1 -1
- package/src/components/header/index.module.css +1 -1
- package/src/components/header-info-block/Component.tsx +1 -1
- package/src/components/header-info-block/index.module.css +1 -1
- package/src/components/header-mobile/index.module.css +1 -1
- package/src/components/image-preview/Component.tsx +4 -4
- package/src/components/image-preview/index.module.css +1 -1
- package/src/components/image-viewer/component.tsx +1 -1
- package/src/components/image-viewer/hooks.ts +2 -2
- package/src/components/image-viewer/index.module.css +2 -2
- package/src/components/image-viewer/single.tsx +1 -1
- package/src/components/image-viewer/slide.tsx +2 -2
- package/src/components/image-viewer/video/index.module.css +2 -2
- package/src/components/image-viewer/video/index.tsx +4 -8
- package/src/components/info-bar/index.module.css +1 -1
- package/src/components/navigation-bar/Component.tsx +1 -1
- package/src/components/navigation-bar/index.module.css +1 -1
- package/src/components/subtitles/index.module.css +4 -2
- package/src/context.ts +2 -2
- package/src/index.module.css +4 -2
- package/src/types.ts +1 -1
- package/src/utils/utils.ts +2 -2
- package/types.d.ts +1 -1
- package/utils/utils.d.ts +1 -1
- package/utils/utils.js +1 -1
- package/utils/utils.js.map +1 -1
- /package/src/components/bottom-button/{index.tsx → index.ts} +0 -0
- /package/src/components/header/{index.tsx → index.ts} +0 -0
- /package/src/components/image-preview/{index.tsx → index.ts} +0 -0
package/Component.d.ts
CHANGED
package/Component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport 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 { GalleryImage, 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":["useState","useIsDesktop","useCallback","useEffect","SWIPE_THRESHOLD","React","GalleryContext","BaseModal","cn","styles","Header","HeaderMobile","Single","ImageViewer","Subtitles","BottomButton","NavigationBar","InfoBar"],"mappings":"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"}
|
|
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":["useState","useIsDesktop","useCallback","useEffect","SWIPE_THRESHOLD","React","GalleryContext","BaseModal","cn","styles","Header","HeaderMobile","Single","ImageViewer","Subtitles","BottomButton","NavigationBar","InfoBar"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/components/bottom-button/Component.tsx"],"sourcesContent":["import React, { 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":["useRef","useState","useContext","GalleryContext","useEffect","React","Button","cn","styles","Typography"],"mappings":";;;;;;;;;;;;;;;;AAiBO,IAAM,YAAY,GAAG,UAAC,EAA2C,EAAA;;AAAzC,IAAA,IAAA,OAAO,aAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAA;AAC3D,IAAA,IAAM,KAAK,GAAGA,YAAM,EAAiC;IAE/C,IAAA,EAAA,GAAwBC,cAAQ,CAAU,KAAK,CAAC,EAA/C,OAAO,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,GAAA,EAAA,CAAA,CAAA,CAA4B;AAChD,IAAA,IAAA,EAAgD,GAAAC,gBAAU,CAACC,sBAAc,CAAC,EAAxE,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,WAAW,iBAA+B;AAEhF,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,IAAM,MAAM,GAAG,SAAS,EAAE;AAE1B,QAAA,IAAI,CAAC,iBAAiB,MAAK,MAAM,KAAN,IAAA,IAAA,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAA,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;YACjB,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,YAAM,EAAA,OAAA,UAAU,CAAC,IAAI,CAAC,CAAhB,EAAgB,EAAE,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;AAClF;;KAEJ,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAE1D,IAAA,QACIC,sBAAA,CAAA,aAAA,CAACC,2BAAM,EAAA,EACH,IAAI,EAAE,EAAE,EACR,SAAS,EAAEC,mBAAE,CACTC,YAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA,EACd,EAAC,CAAAA,YAAM,CAAC,UAAU,CAAG,GAAA,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,OACvD,SAAS,CACZ,EACD,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAAH,sBAAA,CAAA,aAAA,CAACI,mCAAU,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,sBAAsB,EAAE,EAAA,YAAY,CAAC,IAAI,CAAmB,CAC9E;AAEjB;;;;"}
|
|
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":["useRef","useState","useContext","GalleryContext","useEffect","React","Button","cn","styles","Typography"],"mappings":";;;;;;;;;;;;;;;;AAiBO,IAAM,YAAY,GAAG,UAAC,EAA2C,EAAA;;AAAzC,IAAA,IAAA,OAAO,aAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAA;AAC3D,IAAA,IAAM,KAAK,GAAGA,YAAM,EAAiC;IAE/C,IAAA,EAAA,GAAwBC,cAAQ,CAAU,KAAK,CAAC,EAA/C,OAAO,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,GAAA,EAAA,CAAA,CAAA,CAA4B;AAChD,IAAA,IAAA,EAAgD,GAAAC,gBAAU,CAACC,sBAAc,CAAC,EAAxE,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,WAAW,iBAA+B;AAEhF,IAAAC,eAAS,CAAC,YAAA;AACN,QAAA,IAAM,MAAM,GAAG,SAAS,EAAE;AAE1B,QAAA,IAAI,CAAC,iBAAiB,MAAK,MAAM,KAAN,IAAA,IAAA,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAA,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;YACjB,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,YAAM,EAAA,OAAA,UAAU,CAAC,IAAI,CAAC,CAAhB,EAAgB,EAAE,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;AAClF;;KAEJ,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAE1D,IAAA,QACIC,sBAAA,CAAA,aAAA,CAACC,2BAAM,EAAA,EACH,IAAI,EAAE,EAAE,EACR,SAAS,EAAEC,mBAAE,CACTC,YAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA,EACd,EAAC,CAAAA,YAAM,CAAC,UAAU,CAAG,GAAA,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,OACvD,SAAS,CACZ,EACD,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAAH,sBAAA,CAAA,aAAA,CAACI,mCAAU,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,sBAAsB,EAAE,EAAA,YAAY,CAAC,IAAI,CAAmB,CAC9E;AAEjB;;;;"}
|
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
--color-static-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
|
|
3
3
|
--color-static-neutral-translucent-500-inverted-hover: rgba(233, 233, 250, 0.37);
|
|
4
4
|
--color-static-neutral-translucent-500-inverted-press: rgba(238, 238, 254, 0.46);
|
|
5
|
-
} .
|
|
5
|
+
} .gallery__component_1ix35 {
|
|
6
6
|
background-color: var(--color-static-neutral-translucent-500-inverted);
|
|
7
|
-
} .
|
|
7
|
+
} .gallery__component_1ix35:hover {
|
|
8
8
|
background-color: var(--color-static-neutral-translucent-500-inverted-hover);
|
|
9
|
-
} .
|
|
9
|
+
} .gallery__component_1ix35:active {
|
|
10
10
|
background-color: var(--color-static-neutral-translucent-500-inverted-press);
|
|
11
|
-
} .
|
|
11
|
+
} .gallery__component_1ix35 {
|
|
12
12
|
|
|
13
13
|
transition: transform 1s ease-in-out;
|
|
14
14
|
will-change: transform;
|
|
15
|
-
} .
|
|
15
|
+
} .gallery__notVisible_1ix35 {
|
|
16
16
|
transform: translateY(250%);
|
|
17
17
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"
|
|
5
|
+
var styles = {"component":"gallery__component_1ix35","notVisible":"gallery__notVisible_1ix35"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/bottom-button/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n background-color: var(--color-static-neutral-translucent-500-inverted);\n &:hover {\n background-color: var(--color-static-neutral-translucent-500-inverted-hover);\n }\n &:active {\n background-color: var(--color-static-neutral-translucent-500-inverted-press);\n }\n\n transition: transform 1s ease-in-out;\n will-change: transform;\n}\n\n.notVisible {\n transform: translateY(250%);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/bottom-button/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.component {\n background-color: var(--color-static-neutral-translucent-500-inverted);\n &:hover {\n background-color: var(--color-static-neutral-translucent-500-inverted-hover);\n }\n &:active {\n background-color: var(--color-static-neutral-translucent-500-inverted-press);\n }\n\n transition: transform 1s ease-in-out;\n will-change: transform;\n}\n\n.notVisible {\n transform: translateY(250%);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
} :root {
|
|
7
7
|
--gap-2xl: 32px;
|
|
8
8
|
--gap-32: var(--gap-2xl);
|
|
9
|
-
} .
|
|
9
|
+
} .gallery__buttons_19pu0 {
|
|
10
10
|
display: flex;
|
|
11
|
-
padding-left: var(--gap-32)
|
|
12
|
-
} .
|
|
11
|
+
padding-left: var(--gap-32);
|
|
12
|
+
} .gallery__buttons_19pu0 path {
|
|
13
13
|
color: var(--color-static-neutral-translucent-1300-inverted);
|
|
14
|
-
} .
|
|
14
|
+
} .gallery__iconButton_19pu0 path {
|
|
15
15
|
color: var(--color-static-neutral-100);
|
|
16
|
-
} .
|
|
16
|
+
} .gallery__iconButton_19pu0:hover path {
|
|
17
17
|
color: var(--color-static-neutral-100-hover);
|
|
18
|
-
} .
|
|
18
|
+
} .gallery__iconButton_19pu0:active path {
|
|
19
19
|
color: var(--color-static-neutral-100-press);
|
|
20
20
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FC, MutableRefObject } from 'react';
|
|
2
|
-
import { IconButtonProps } from '@alfalab/core-components-icon-button';
|
|
1
|
+
import { type FC, type MutableRefObject } from 'react';
|
|
2
|
+
import { type IconButtonProps } from '@alfalab/core-components-icon-button';
|
|
3
3
|
declare type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
|
|
4
4
|
buttonRef?: MutableRefObject<HTMLButtonElement | null>;
|
|
5
5
|
download?: string | boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/components/buttons/index.tsx"],"sourcesContent":["import React, { FC, MutableRefObject } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, 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":["__rest","React","TooltipDesktop","IconButton","ArrowsOutwardMIcon","styles","__assign","ArrowLeftMIcon","PlayCompactMIcon","cn","PauseCompactMIcon","ArrowsInwardMIcon","SoundMIcon","SoundCrossMIcon","PointerDownMIcon","ShareMIcon","CrossMIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,IAAM,UAAU,GAAc,UAAC,EAA2B,EAAA;AAAzB,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EAAK,SAAS,GAAAA,YAAA,CAAA,EAAA,EAAzB,aAA2B,CAAF;IAAO,QAClEC,qCAACC,sBAAc,EAAA,EACX,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,uKAAgC,EACxC,kBAAkB,EAAE,CAAC,YAAY,CAAC,EAAA;QAElCD,sBAAC,CAAA,aAAA,CAAAE,mCAAU,qBACH,SAAS,EAAA,EACb,GAAG,EAAE,SAAS,EACd,IAAI,EAAEC,qCAAkB,gBACb,uKAAgC,EAC3C,SAAS,EAAEC,YAAM,CAAC,UAAU,EAAA,CAAA,CAC9B,CACW;;AAGd,IAAM,SAAS,GAAc,UAAC,EAA2B,EAAA;AAAzB,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EAAK,SAAS,GAAAL,YAAA,CAAA,EAAA,EAAzB,aAA2B,CAAF;IAAO,QACjEC,qCAACE,mCAAU,EAAAG,cAAA,CAAA,EAAA,EACH,SAAS,EACb,EAAA,GAAG,EAAE,SAAS,EACd,IAAI,EAAEC,6BAAc,EAAA,YAAA,EACT,uFAAiB,EAC5B,SAAS,EAAEF,YAAM,CAAC,UAAU,EAC9B,CAAA,CAAA;;AAGC,IAAM,IAAI,GAAc,UAAC,EAAsC,EAAA;IAApC,IAAA,SAAS,eAAA,EAAE,SAAS,eAAA,EAAK,SAAS,GAApCL,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAsC,CAAF;AAAO,IAAA,QACvEC,sBAAA,CAAA,aAAA,CAACE,mCAAU,EAAAG,cAAA,CAAA,EAAA,EACH,SAAS,EAAA,EACb,GAAG,EAAE,SAAS,EACd,IAAI,EAAEE,iCAAgB,EAAA,YAAA,EACX,uFAAiB,EAC5B,SAAS,EAAEC,mBAAE,CAACJ,YAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC7C,CAAA,CAAA;;AAGC,IAAM,KAAK,GAAc,UAAC,EAAsC,EAAA;IAApC,IAAA,SAAS,eAAA,EAAE,SAAS,eAAA,EAAK,SAAS,GAApCL,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAsC,CAAF;AAAO,IAAA,QACxEC,sBAAA,CAAA,aAAA,CAACE,mCAAU,EAAAG,cAAA,CAAA,EAAA,EACH,SAAS,EAAA,EACb,GAAG,EAAE,SAAS,EACd,IAAI,EAAEI,mCAAiB,EAAA,YAAA,EACZ,mIAA0B,EACrC,SAAS,EAAED,mBAAE,CAACJ,YAAM,CAAC,UAAU,EAAE,SAAS,CAAC,EAC7C,CAAA,CAAA;;AAGC,IAAM,cAAc,GAAc,UAAC,EAA2B,EAAA;AAAzB,IAAA,IAAA,SAAS,GAAA,EAAA,CAAA,SAAA,EAAK,SAAS,GAAAL,YAAA,CAAA,EAAA,EAAzB,aAA2B,CAAF;IAAO,QACtEC,qCAACC,sBAAc,EAAA,EACX,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,uKAAgC,EACxC,kBAAkB,EAAE,CAAC,YAAY,CAAC,EAAA;QAElCD,sBAAC,CAAA,aAAA,CAAAE,mCAAU,qBACH,SAAS,EAAA,EACb,GAAG,EAAE,SAAS,EACd,IAAI,EAAEQ,mCAAiB,gBACZ,uKAAgC,EAC3C,SAAS,EAAEN,YAAM,CAAC,UAAU,EAAA,CAAA,CAC9B,CACW;;AAGd,IAAM,SAAS,GAAc,UAAC,EAAsC,EAAA;IAApC,IAAA,SAAS,eAAA,EAAE,SAAS,eAAA,EAAK,SAAS,GAApCL,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAsC,CAAF;IAAO,QAC5EC,sBAAC,CAAA,aAAA,CAAAC,sBAAc,EACX,EAAA,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,iFAAgB,EACxB,kBAAkB,EAAE,CAAC,YAAY,CAAC,EAClC,eAAe,EAAE,SAAS,EAAA;QAE1BD,sBAAC,CAAA,aAAA,CAAAE,mCAAU,qBACH,SAAS,EAAA,EACb,GAAG,EAAE,SAAS,EACd,IAAI,EAAES,qBAAU,gBACL,iFAAgB,EAC3B,SAAS,EAAEP,YAAM,CAAC,UAAU,EAAA,CAAA,CAC9B,CACW;;AAGd,IAAM,WAAW,GAAc,UAAC,EAAsC,EAAA;IAApC,IAAA,SAAS,eAAA,EAAE,SAAS,eAAA,EAAK,SAAS,GAApCL,YAAA,CAAA,EAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAsC,CAAF;IAAO,QAC9EC,sBAAC,CAAA,aAAA,CAAAC,sBAAc,EACX,EAAA,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,2EAAe,EACvB,kBAAkB,EAAE,CAAC,YAAY,CAAC,EAClC,eAAe,EAAE,SAAS,EAAA;QAE1BD,sBAAC,CAAA,aAAA,CAAAE,mCAAU,qBACH,SAAS,EAAA,EACb,GAAG,EAAE,SAAS,EACd,IAAI,EAAEU,+BAAe,gBACV,2EAAe,EAC1B,SAAS,EAAER,YAAM,CAAC,UAAU,EAAA,CAAA,CAC9B,CACW;;AAGd,IAAM,QAAQ,GAAc,UAAC,KAAK,EAAK,EAAA,QAC1CJ,sBAAA,CAAA,aAAA,CAACC,sBAAc,EAAA,EACX,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,4CAAS,EACjB,kBAAkB,EAAE,CAAC,YAAY,CAAC,EAAA;IAElCD,sBAAC,CAAA,aAAA,CAAAE,mCAAU,qBACH,KAAK,EAAA,EACT,IAAI,EAAEW,iCAAgB,gBACX,4CAAS,EACpB,SAAS,EAAET,YAAM,CAAC,UAAU,EAAA,CAAA,CAC9B,CACW,EACpB;AAEM,IAAM,KAAK,GAAc,UAAC,KAAK,EAAK,EAAA,QACvCJ,sBAAA,CAAA,aAAA,CAACC,sBAAc,EAAA,EACX,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAC,8DAAY,EACpB,kBAAkB,EAAE,CAAC,YAAY,CAAC,EAAA;IAElCD,sBAAC,CAAA,aAAA,CAAAE,mCAAU,qBACH,KAAK,EAAA,EACT,IAAI,EAAEY,qBAAU,gBACL,4CAAS,EACpB,SAAS,EAAEV,YAAM,CAAC,UAAU,EAAA,CAAA,CAC9B,CACW,EACpB;AAEM,IAAM,IAAI,GAAc,UAAC,KAAK,EAAK,EAAA,QACtCJ,sBAAA,CAAA,aAAA,CAACE,mCAAU,EAAAG,cAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,IAAI,EAAEU,qBAAU,EAAA,YAAA,EAAa,4CAAS,EAAC,SAAS,EAAEX,YAAM,CAAC,UAAU,EAAA,CAAA,CAAI,EACjG;;;;;;;;;;;;;"}
|
|
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":["__rest","React","TooltipDesktop","IconButton","ArrowsOutwardMIcon","styles","__assign","ArrowLeftMIcon","PlayCompactMIcon","cn","PauseCompactMIcon","ArrowsInwardMIcon","SoundMIcon","SoundCrossMIcon","PointerDownMIcon","ShareMIcon","CrossMIcon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/buttons/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.buttons {\n display: flex;\n padding-left: var(--gap-32);\n\n & path {\n color: var(--color-static-neutral-translucent-1300-inverted);\n }\n}\n\n.iconButton {\n & path {\n color: var(--color-static-neutral-100);\n }\n\n &:hover path {\n color: var(--color-static-neutral-100-hover);\n }\n\n &:active path {\n color: var(--color-static-neutral-100-press);\n }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAoC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/buttons/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.buttons {\n display: flex;\n padding-left: var(--gap-32);\n\n & path {\n color: var(--color-static-neutral-translucent-1300-inverted);\n }\n}\n\n.iconButton {\n & path {\n color: var(--color-static-neutral-100);\n }\n\n &:hover path {\n color: var(--color-static-neutral-100-hover);\n }\n\n &:active path {\n color: var(--color-static-neutral-100-press);\n }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAoC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { type FC } from 'react';
|
|
2
2
|
export declare const Header: FC;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/components/header/Component.tsx"],"sourcesContent":["import React, { 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":["useContext","GalleryContext","useRef","useEffect","isSmallImage","React","Buttons.ExitFullscreen","TestIds","Buttons.Fullscreen","Buttons.UnmuteVideo","Buttons.MuteVideo","styles","HeaderInfoBlock","isVideo","Buttons.Download","Buttons.Exit"],"mappings":";;;;;;;;;;;;;;;;AASa,IAAA,MAAM,GAAO,YAAA;;AAChB,IAAA,IAAA,EAWF,GAAAA,gBAAU,CAACC,sBAAc,CAAC,EAV1B,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,mBAAmB,yBAAA,EACnB,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,aAAa,mBACa;AAE9B,IAAA,IAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,IAAM,IAAI,GAAG,mBAAmB,EAAE;AAElC,IAAA,IAAM,sBAAsB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAE9D,IAAA,IAAM,iBAAiB,GAAG,YAAA;AACtB,QAAA,IAAI,YAAY,EAAE;AACd,YAAA,IAAI,UAAU,IAAI,YAAY,CAAC,QAAQ,EAAE;gBACrC,YAAY,CAAC,QAAQ,EAAE;AAC1B;iBAAM,IAAI,YAAY,CAAC,MAAM,EAAE;gBAC5B,YAAY,CAAC,MAAM,EAAE;AACxB;AACJ;AACD,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;AAC9B,KAAC;AAED,IAAA,IAAM,eAAe,GAAG,YAAA;QACpB,aAAa,CAAC,KAAK,CAAC;AACxB,KAAC;AAED,IAAA,IAAM,cAAc,GAAG,YAAA;QACnB,aAAa,CAAC,IAAI,CAAC;AACvB,KAAC;AAED,IAAAC,eAAS,CAAC,YAAA;QACN,IAAI,sBAAsB,CAAC,OAAO,EAAE;AAChC,YAAA,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE;AACzC;AACL,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,IAAM,WAAW,GAAG,CAAA,EAAA,GAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,MAAA,GAAA,MAAA,GAAA,YAAY,CAAE,WAAW,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI;AACrD,IAAA,IAAM,QAAQ,GAAG,CAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,MAAA,GAAA,MAAA,GAAA,YAAY,CAAE,IAAI,KAAI,EAAE;IACzC,IAAM,WAAW,GACb,WAAW,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,EAAE,GAAG,EAAG,CAAA,MAAA,CAAA,iBAAiB,GAAG,CAAC,2BAAO,MAAM,CAAC,MAAM,CAAE;AAEvF,IAAA,IAAM,oBAAoB,GAAG,CAACC,kBAAY,CAAC,IAAI,CAAC,IAAI,EAAC,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,MAAM,CAAA;AACjE,IAAA,IAAM,kBAAkB,GAAG,EAAC,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,MAAM,CAAA,IAAI,WAAW;AAEvD,IAAA,IAAM,4BAA4B,GAAG,YAAA;QACjC,OAAA,UAAU,IACNC,sBAAC,CAAA,aAAA,CAAAC,oBAAsB,EACnB,EAAA,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,sBAAsB,EACjC,UAAU,EAAEC,iBAAO,CAAC,sBAAsB,EAAA,CAC5C,KAEFF,sBAAA,CAAA,aAAA,CAACG,gBAAkB,EACf,EAAA,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,sBAAsB,EACjC,UAAU,EAAED,iBAAO,CAAC,iBAAiB,EAAA,CACvC,CACL;AAZD,KAYC;AAEL,IAAA,IAAM,qBAAqB,GAAG,YAAA;AAC1B,QAAA,OAAA,UAAU,IACNF,sBAAA,CAAA,aAAA,CAACI,iBAAmB,EAAC,EAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAEF,iBAAO,CAAC,aAAa,EAAA,CAAI,KAEtFF,qCAACK,eAAiB,EAAC,EAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAEH,iBAAO,CAAC,WAAW,GAAI,CACrF;AAJD,KAIC;AAEL,IAAA,QACIF,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEM,YAAM,CAAC,MAAM,EAAA;QACzBN,sBAAC,CAAA,aAAA,CAAAO,yBAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAI,CAAA;AAEjE,QAAAP,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEM,YAAM,CAAC,OAAO,EAAA;YACzBE,aAAO,CAAC,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,CAAC,IAAI,qBAAqB,EAAE;YACrD,oBAAoB,IAAI,4BAA4B,EAAE;AAEtD,YAAA,kBAAkB,KACfR,sBAAC,CAAA,aAAA,CAAAS,cAAgB,EAAA,EACb,IAAI,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,EACvB,QAAQ,EAAE,YAAY,KAAZ,IAAA,IAAA,YAAY,uBAAZ,YAAY,CAAE,IAAI,EAC5B,UAAU,EAAEP,iBAAO,CAAC,eAAe,GACrC,CACL;AAED,YAAAF,sBAAA,CAAA,aAAA,CAACU,UAAY,EAAC,EAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAER,iBAAO,CAAC,YAAY,GAAI,CAClE,CACJ;AAEd;;;;"}
|
|
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":["useContext","GalleryContext","useRef","useEffect","isSmallImage","React","Buttons.ExitFullscreen","TestIds","Buttons.Fullscreen","Buttons.UnmuteVideo","Buttons.MuteVideo","styles","HeaderInfoBlock","isVideo","Buttons.Download","Buttons.Exit"],"mappings":";;;;;;;;;;;;;;;;AASa,IAAA,MAAM,GAAO,YAAA;;AAChB,IAAA,IAAA,EAWF,GAAAA,gBAAU,CAACC,sBAAc,CAAC,EAV1B,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,mBAAmB,yBAAA,EACnB,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,aAAa,mBACa;AAE9B,IAAA,IAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,IAAM,IAAI,GAAG,mBAAmB,EAAE;AAElC,IAAA,IAAM,sBAAsB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAE9D,IAAA,IAAM,iBAAiB,GAAG,YAAA;AACtB,QAAA,IAAI,YAAY,EAAE;AACd,YAAA,IAAI,UAAU,IAAI,YAAY,CAAC,QAAQ,EAAE;gBACrC,YAAY,CAAC,QAAQ,EAAE;AAC1B;iBAAM,IAAI,YAAY,CAAC,MAAM,EAAE;gBAC5B,YAAY,CAAC,MAAM,EAAE;AACxB;AACJ;AACD,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;AAC9B,KAAC;AAED,IAAA,IAAM,eAAe,GAAG,YAAA;QACpB,aAAa,CAAC,KAAK,CAAC;AACxB,KAAC;AAED,IAAA,IAAM,cAAc,GAAG,YAAA;QACnB,aAAa,CAAC,IAAI,CAAC;AACvB,KAAC;AAED,IAAAC,eAAS,CAAC,YAAA;QACN,IAAI,sBAAsB,CAAC,OAAO,EAAE;AAChC,YAAA,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE;AACzC;AACL,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,IAAM,WAAW,GAAG,CAAA,EAAA,GAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,MAAA,GAAA,MAAA,GAAA,YAAY,CAAE,WAAW,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,IAAI;AACrD,IAAA,IAAM,QAAQ,GAAG,CAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,MAAA,GAAA,MAAA,GAAA,YAAY,CAAE,IAAI,KAAI,EAAE;IACzC,IAAM,WAAW,GACb,WAAW,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,EAAE,GAAG,EAAG,CAAA,MAAA,CAAA,iBAAiB,GAAG,CAAC,2BAAO,MAAM,CAAC,MAAM,CAAE;AAEvF,IAAA,IAAM,oBAAoB,GAAG,CAACC,kBAAY,CAAC,IAAI,CAAC,IAAI,EAAC,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,MAAM,CAAA;AACjE,IAAA,IAAM,kBAAkB,GAAG,EAAC,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,MAAM,CAAA,IAAI,WAAW;AAEvD,IAAA,IAAM,4BAA4B,GAAG,YAAA;QACjC,OAAA,UAAU,IACNC,sBAAC,CAAA,aAAA,CAAAC,oBAAsB,EACnB,EAAA,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,sBAAsB,EACjC,UAAU,EAAEC,iBAAO,CAAC,sBAAsB,EAAA,CAC5C,KAEFF,sBAAA,CAAA,aAAA,CAACG,gBAAkB,EACf,EAAA,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,sBAAsB,EACjC,UAAU,EAAED,iBAAO,CAAC,iBAAiB,EAAA,CACvC,CACL;AAZD,KAYC;AAEL,IAAA,IAAM,qBAAqB,GAAG,YAAA;AAC1B,QAAA,OAAA,UAAU,IACNF,sBAAA,CAAA,aAAA,CAACI,iBAAmB,EAAC,EAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAEF,iBAAO,CAAC,aAAa,EAAA,CAAI,KAEtFF,qCAACK,eAAiB,EAAC,EAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAEH,iBAAO,CAAC,WAAW,GAAI,CACrF;AAJD,KAIC;AAEL,IAAA,QACIF,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEM,YAAM,CAAC,MAAM,EAAA;QACzBN,sBAAC,CAAA,aAAA,CAAAO,yBAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAI,CAAA;AAEjE,QAAAP,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEM,YAAM,CAAC,OAAO,EAAA;YACzBE,aAAO,CAAC,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,CAAC,IAAI,qBAAqB,EAAE;YACrD,oBAAoB,IAAI,4BAA4B,EAAE;AAEtD,YAAA,kBAAkB,KACfR,sBAAC,CAAA,aAAA,CAAAS,cAAgB,EAAA,EACb,IAAI,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,EACvB,QAAQ,EAAE,YAAY,KAAZ,IAAA,IAAA,YAAY,uBAAZ,YAAY,CAAE,IAAI,EAC5B,UAAU,EAAEP,iBAAO,CAAC,eAAe,GACrC,CACL;AAED,YAAAF,sBAAA,CAAA,aAAA,CAACU,UAAY,EAAC,EAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAER,iBAAO,CAAC,YAAY,GAAI,CAClE,CACJ;AAEd;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.header {\n display: flex;\n justify-content: space-between;\n flex-shrink: 0;\n width: 100%;\n padding: var(--gap-16) var(--gap-32);\n box-sizing: border-box;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,uBAAuB,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.header {\n display: flex;\n justify-content: space-between;\n flex-shrink: 0;\n width: 100%;\n padding: var(--gap-16) var(--gap-32);\n box-sizing: border-box;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,uBAAuB,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/components/header-info-block/Component.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Text, TitleDesktop } 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 <TitleDesktop\n tag='h1'\n className={styles.filenameHead}\n view='xsmall'\n font='system'\n color='static-primary-light'\n >\n {head}\n </TitleDesktop>\n\n <TitleDesktop tag='h1' view='xsmall' font='system' color='static-primary-light'>\n {tail}\n </TitleDesktop>\n </div>\n\n {description ? (\n <Text\n className={styles.description}\n tag='div'\n view='primary-medium'\n color='static-secondary-light'\n >\n {description}\n </Text>\n ) : null}\n </div>\n );\n};\n"],"names":["splitFilename","React","styles","TitleDesktop","Text"],"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,YAAM,CAAC,IAAI,EAAA;AACvB,QAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,YAAM,CAAC,iBAAiB,EAAA;YACpCD,sBAAC,CAAA,aAAA,CAAAE,qCAAY,EACT,EAAA,GAAG,EAAC,IAAI,EACR,SAAS,EAAED,YAAM,CAAC,YAAY,EAC9B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,sBAAsB,EAE3B,EAAA,IAAI,CACM;YAEfD,sBAAC,CAAA,aAAA,CAAAE,qCAAY,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAC1E,EAAA,IAAI,CACM,CACb;AAEL,QAAA,WAAW,IACRF,qCAACG,6BAAI,EAAA,EACD,SAAS,EAAEF,YAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,wBAAwB,EAE7B,EAAA,WAAW,CACT,IACP,IAAI,CACN;AAEd;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/components/header-info-block/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\n\nimport { Text, TitleDesktop } 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 <TitleDesktop\n tag='h1'\n className={styles.filenameHead}\n view='xsmall'\n font='system'\n color='static-primary-light'\n >\n {head}\n </TitleDesktop>\n\n <TitleDesktop tag='h1' view='xsmall' font='system' color='static-primary-light'>\n {tail}\n </TitleDesktop>\n </div>\n\n {description ? (\n <Text\n className={styles.description}\n tag='div'\n view='primary-medium'\n color='static-secondary-light'\n >\n {description}\n </Text>\n ) : null}\n </div>\n );\n};\n"],"names":["splitFilename","React","styles","TitleDesktop","Text"],"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,YAAM,CAAC,IAAI,EAAA;AACvB,QAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,YAAM,CAAC,iBAAiB,EAAA;YACpCD,sBAAC,CAAA,aAAA,CAAAE,qCAAY,EACT,EAAA,GAAG,EAAC,IAAI,EACR,SAAS,EAAED,YAAM,CAAC,YAAY,EAC9B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,sBAAsB,EAE3B,EAAA,IAAI,CACM;YAEfD,sBAAC,CAAA,aAAA,CAAAE,qCAAY,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAC1E,EAAA,IAAI,CACM,CACb;AAEL,QAAA,WAAW,IACRF,qCAACG,6BAAI,EAAA,EACD,SAAS,EAAEF,YAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,wBAAwB,EAE7B,EAAA,WAAW,CACT,IACP,IAAI,CACN;AAEd;;;;"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--gap-2xs: 4px;
|
|
3
3
|
--gap-4: var(--gap-2xs);
|
|
4
|
-
} .
|
|
4
|
+
} .gallery__info_d1u6m {
|
|
5
5
|
height: 100%;
|
|
6
6
|
display: flex;
|
|
7
7
|
flex-direction: column;
|
|
8
8
|
justify-content: center;
|
|
9
9
|
overflow: hidden;
|
|
10
|
-
} .
|
|
10
|
+
} .gallery__filenameHead_d1u6m {
|
|
11
11
|
display: inline;
|
|
12
12
|
text-overflow: ellipsis;
|
|
13
13
|
overflow: hidden;
|
|
14
14
|
white-space: nowrap;
|
|
15
|
-
} .
|
|
15
|
+
} .gallery__filenameContainer_d1u6m {
|
|
16
16
|
overflow: hidden;
|
|
17
17
|
display: inline-flex;
|
|
18
|
-
} .
|
|
18
|
+
} .gallery__description_d1u6m {
|
|
19
19
|
display: inline;
|
|
20
20
|
text-overflow: ellipsis;
|
|
21
21
|
overflow: hidden;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"info":"
|
|
5
|
+
var styles = {"info":"gallery__info_d1u6m","filenameHead":"gallery__filenameHead_d1u6m","filenameContainer":"gallery__filenameContainer_d1u6m","description":"gallery__description_d1u6m"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header-info-block/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.info {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n}\n\n.filenameHead {\n display: inline;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.filenameContainer {\n overflow: hidden;\n display: inline-flex;\n}\n\n.description {\n display: inline;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-top: var(--gap-4);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,MAAM,CAAC,qBAAqB,CAAC,cAAc,CAAC,6BAA6B,CAAC,mBAAmB,CAAC,kCAAkC,CAAC,aAAa,CAAC,4BAA4B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header-info-block/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.info {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n}\n\n.filenameHead {\n display: inline;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.filenameContainer {\n overflow: hidden;\n display: inline-flex;\n}\n\n.description {\n display: inline;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-top: var(--gap-4);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,MAAM,CAAC,qBAAqB,CAAC,cAAc,CAAC,6BAA6B,CAAC,mBAAmB,CAAC,kCAAkC,CAAC,aAAa,CAAC,4BAA4B,CAAC;;;;"}
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--color-static-neutral-0-inverted: #262629;
|
|
3
|
-
} .
|
|
3
|
+
} .gallery__headerMobile_g6gye {
|
|
4
4
|
position: relative;
|
|
5
5
|
height: 72px;
|
|
6
6
|
z-index: 3;
|
|
7
7
|
padding: 0;
|
|
8
8
|
display: flex;
|
|
9
9
|
justify-content: space-between;
|
|
10
|
-
align-items: center
|
|
11
|
-
} .
|
|
10
|
+
align-items: center;
|
|
11
|
+
} .gallery__headerMobile_g6gye.gallery__video_g6gye {
|
|
12
12
|
position: absolute;
|
|
13
13
|
width: 100%;
|
|
14
14
|
background-color: var(--color-static-neutral-0-inverted);
|
|
15
15
|
transition: transform 0.3s ease-in-out;
|
|
16
|
-
} .
|
|
16
|
+
} .gallery__hide_g6gye {
|
|
17
17
|
transform: translateY(-96px);
|
|
18
|
-
} .
|
|
19
|
-
.
|
|
18
|
+
} .gallery__leftButton_g6gye,
|
|
19
|
+
.gallery__rightButtons_g6gye {
|
|
20
20
|
display: flex;
|
|
21
21
|
align-items: center;
|
|
22
|
-
} .
|
|
22
|
+
} .gallery__description_g6gye {
|
|
23
23
|
position: absolute;
|
|
24
24
|
left: 50%;
|
|
25
25
|
transform: translateX(-50%);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"headerMobile":"
|
|
5
|
+
var styles = {"headerMobile":"gallery__headerMobile_g6gye","video":"gallery__video_g6gye","hide":"gallery__hide_g6gye","rightButtons":"gallery__rightButtons_g6gye","description":"gallery__description_g6gye"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header-mobile/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.headerMobile {\n position: relative;\n height: 72px;\n z-index: 3;\n padding: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n &.video {\n position: absolute;\n width: 100%;\n background-color: var(--color-static-neutral-0-inverted);\n transition: transform 0.3s ease-in-out;\n }\n}\n\n.hide {\n transform: translateY(-96px);\n}\n\n.leftButton,\n.rightButtons {\n display: flex;\n align-items: center;\n}\n\n.description {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,cAAc,CAAC,6BAA6B,CAAC,OAAO,CAAC,sBAAsB,CAAC,MAAM,CAAC,qBAAqB,CAA0C,cAAc,CAAC,6BAA6B,CAAC,aAAa,CAAC,4BAA4B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/header-mobile/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.headerMobile {\n position: relative;\n height: 72px;\n z-index: 3;\n padding: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n &.video {\n position: absolute;\n width: 100%;\n background-color: var(--color-static-neutral-0-inverted);\n transition: transform 0.3s ease-in-out;\n }\n}\n\n.hide {\n transform: translateY(-96px);\n}\n\n.leftButton,\n.rightButtons {\n display: flex;\n align-items: center;\n}\n\n.description {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,cAAc,CAAC,6BAA6B,CAAC,OAAO,CAAC,sBAAsB,CAAC,MAAM,CAAC,qBAAqB,CAA0C,cAAc,CAAC,6BAA6B,CAAC,aAAa,CAAC,4BAA4B,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/components/image-preview/Component.tsx"],"sourcesContent":["import React, {\n FC,\n KeyboardEventHandler,\n 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 { 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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"}
|
|
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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"}
|