@alfalab/core-components 47.12.0 → 47.12.1-beta.1

package/gallery/modern/Component.js

@@ -1,35 +1,46 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import cn from 'classnames';
 import { BaseModal } from '../../base-modal/modern';
+import { useMedia } from '@alfalab/hooks';
+import { HeaderMobile } from './components/header-mobile/Component.js';
+import { InfoBar } from './components/info-bar/Component.js';
 import { NavigationBar } from './components/navigation-bar/Component.js';
 import { Header } from './components/header/Component.js';
-import 'classnames';
-import '@alfalab/hooks';
 import { GalleryContext } from './context.js';
 import { ImageViewer } from './components/image-viewer/component.js';
-import './utils/utils.js';
-import './utils/constants.js';
-import './components/image-preview/Component.js';
 import '../../typography/modern';
+import './components/buttons/index.js';
 import '../../icon-button/modern';
 import '../../tooltip/modern/desktop';
+import '@alfalab/icons-glyph/ArrowLeftMIcon';
 import '@alfalab/icons-glyph/ArrowsInwardMIcon';
 import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
+import '@alfalab/icons-glyph/PauseCompactMIcon';
+import '@alfalab/icons-glyph/PlayCompactMIcon';
 import '@alfalab/icons-glyph/PointerDownMIcon';
+import '@alfalab/icons-glyph/SoundCrossMIcon';
+import '@alfalab/icons-glyph/SoundMIcon';
+import './utils/utils.js';
+import './utils/constants.js';
+import './components/image-preview/Component.js';
 import './components/image-preview/paths.js';
 import './components/header-info-block/Component.js';
 import './utils/split-filename.js';
-import './buttons-07b28b2a.js';
 import 'element-closest';
 import 'swiper';
 import 'swiper/react';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import './slide-e4e192ba.js';
+import './slide-e2bd02f9.js';
 import './components/image-viewer/paths.js';
+import './components/image-viewer/video/index.js';
+import 'hls.js';
+import '@alfalab/core-components/icon-view/circle';
+import '../../button/modern';
 import 'swiper/swiper.min.css';
 
-const styles = {"container":"gallery__container_9sbpb","modal":"gallery__modal_9sbpb"};
+const styles = {"container":"gallery__container_1ukr0","modal":"gallery__modal_1ukr0","navigationVideo":"gallery__navigationVideo_1ukr0","hideNavigation":"gallery__hideNavigation_1ukr0"};
 require('./index.css');
 
 const Backdrop = () => null;
@@ -42,6 +53,15 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
     const [swiper, setSwiper] = useState();
     const [imagesMeta, setImagesMeta] = useState([]);
     const [fullScreen, setFullScreen] = useState(false);
+    const [mutedVideo, setMutedVideo] = useState(false);
+    const [playingVideo, setPlayingVideo] = useState(false);
+    const [hideNavigation, setHideNavigation] = useState(false);
+    const timer = useRef();
+    const [view] = useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop');
+    const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;
     const slideTo = useCallback((index) => {
         if (images[index]) {
             setCurrentSlideIndex?.(index);
@@ -98,6 +118,24 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
                 break;
         }
     }, [fullScreen, open, slideNext, slidePrev]);
+    useEffect(() => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+        if (isCurrentVideo && !hideNavigation) {
+            timer.current = setTimeout(() => {
+                setHideNavigation(true);
+            }, 2000);
+        }
+        if (!isCurrentVideo) {
+            setHideNavigation(false);
+        }
+        return () => {
+            if (timer.current) {
+                clearTimeout(timer.current);
+            }
+        };
+    }, [hideNavigation, isCurrentVideo]);
     useEffect(() => {
         if (!uncontrolled && !swiper?.destroyed) {
             swiper?.slideTo(currentSlideIndex);
@@ -111,8 +149,8 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
     }, [handleKeyDown]);
     const singleSlide = images.length === 1;
     const showNavigationBar = !singleSlide && !fullScreen;
-    // eslint-disable-next-line react/jsx-no-constructed-context-values
-    const galleryContext = {
+    const galleryContext = useMemo(() => ({
+        view,
         singleSlide,
         currentSlideIndex,
         images,
@@ -120,6 +158,12 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
         fullScreen,
         initialSlide: uncontrolled ? initialSlide : currentSlideIndex,
         setFullScreen,
+        playingVideo,
+        setPlayingVideo,
+        mutedVideo,
+        setMutedVideo,
+        hideNavigation,
+        setHideNavigation,
         setImageMeta,
         slideNext,
         slidePrev,
@@ -130,13 +174,37 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
         setCurrentSlideIndex,
         getCurrentImage: () => images[currentSlideIndex],
         getCurrentImageMeta: () => imagesMeta[currentSlideIndex],
-    };
+    }), [
+        currentSlideIndex,
+        fullScreen,
+        handleClose,
+        hideNavigation,
+        images,
+        imagesMeta,
+        initialSlide,
+        mutedVideo,
+        playingVideo,
+        setCurrentSlideIndex,
+        setImageMeta,
+        singleSlide,
+        slideNext,
+        slidePrev,
+        slideTo,
+        swiper,
+        uncontrolled,
+        view,
+    ]);
     return (React.createElement(GalleryContext.Provider, { value: galleryContext },
         React.createElement(BaseModal, { open: open, className: styles.modal, onEscapeKeyDown: handleEscapeKeyDown, Backdrop: Backdrop },
             React.createElement("div", { className: styles.container },
-                React.createElement(Header, null),
+                view === 'desktop' ? React.createElement(Header, null) : React.createElement(HeaderMobile, null),
                 React.createElement(ImageViewer, null),
-                showNavigationBar && React.createElement(NavigationBar, null)))));
+                React.createElement("nav", { className: cn({
+                        [styles.navigationVideo]: isCurrentVideo && view === 'mobile',
+                        [styles.hideNavigation]: hideNavigation && view === 'mobile',
+                    }) },
+                    showNavigationBar && React.createElement(NavigationBar, null),
+                    view === 'mobile' && React.createElement(InfoBar, null))))));
 };
 
 export { Gallery };

package/gallery/modern/components/buttons/index.css

@@ -0,0 +1,34 @@
+/* hash: k6pvz */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-static-neutral-100-hover: #e7e8eb;
+    --color-static-neutral-100-press: #dcdde1;
+    --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-2xl: 32px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+} :root {
+} :root {
+} .gallery__buttons_vbl2n {
+    display: flex;
+    padding-left: var(--gap-2xl)
+} .gallery__buttons_vbl2n path {
+        color: var(--color-static-neutral-translucent-1300-inverted);
+    } /* TODO: применять static цвет через prop IconButton'а */ .gallery__iconButton_vbl2n:hover path {
+        color: var(--color-static-neutral-100-hover);
+    } .gallery__iconButton_vbl2n:active path {
+        color: var(--color-static-neutral-100-press);
+    }

package/gallery/modern/{buttons-07b28b2a.d.ts → components/buttons/index.d.ts}

@@ -1,11 +1,16 @@
 import { FC, MutableRefObject } from 'react';
-import { IconButtonProps } from "../../icon-button";
+import { IconButtonProps } from "../../../../icon-button";
 type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
     buttonRef?: MutableRefObject<HTMLButtonElement | null>;
     download?: string | boolean;
 };
 declare const Fullscreen: FC<Props>;
+declare const BackArrow: FC<Props>;
+declare const Play: FC<Props>;
+declare const Pause: FC<Props>;
 declare const ExitFullscreen: FC<Props>;
+declare const MuteVideo: FC<Props>;
+declare const UnmuteVideo: FC<Props>;
 declare const Download: FC<Props>;
 declare const Exit: FC<Props>;
-export { Fullscreen, ExitFullscreen, Download, Exit };
+export { Fullscreen, BackArrow, Play, Pause, ExitFullscreen, MuteVideo, UnmuteVideo, Download, Exit };

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import cn from 'classnames';
+import { IconButton } from '../../../../icon-button/modern';
+import { TooltipDesktop } from '../../../../tooltip/modern/desktop';
+import { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';
+import { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';
+import { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';
+import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
+import { PauseCompactMIcon } from '@alfalab/icons-glyph/PauseCompactMIcon';
+import { PlayCompactMIcon } from '@alfalab/icons-glyph/PlayCompactMIcon';
+import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
+import { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';
+import { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';
+
+const styles = {"buttons":"gallery__buttons_vbl2n","iconButton":"gallery__iconButton_vbl2n"};
+require('./index.css');
+
+const Fullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
+    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton })));
+const BackArrow = ({ buttonRef, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowLeftMIcon, colors: 'inverted', "aria-label": '\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434', className: styles.iconButton }));
+const Play = ({ buttonRef, className, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: PlayCompactMIcon, colors: 'inverted', "aria-label": '\u041F\u0440\u043E\u0438\u0433\u0440\u0430\u0442\u044C \u0432\u0438\u0434\u0435\u043E', className: cn(styles.iconButton, className) }));
+const Pause = ({ buttonRef, className, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: PauseCompactMIcon, colors: 'inverted', "aria-label": '\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043F\u0430\u0443\u0437\u0443 \u043D\u0430 \u0432\u0438\u0434\u0435\u043E', className: cn(styles.iconButton, className) }));
+const ExitFullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
+    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton })));
+const MuteVideo = ({ buttonRef, className, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', fallbackPlacements: ['bottom-end'], targetClassName: className },
+    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: SoundMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton })));
+const UnmuteVideo = ({ buttonRef, className, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', fallbackPlacements: ['bottom-end'], targetClassName: className },
+    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: SoundCrossMIcon, colors: 'inverted', "aria-label": '\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton })));
+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, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })));
+const Exit = (props) => (React.createElement(IconButton, { ...props, icon: CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }));
+
+export { BackArrow, Download, Exit, ExitFullscreen, Fullscreen, MuteVideo, Pause, Play, UnmuteVideo };

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

@@ -1,21 +1,35 @@
 import React, { useContext, useRef, useEffect } from 'react';
 import { GalleryContext } from '../../context.js';
-import { isSmallImage } from '../../utils/utils.js';
+import { isSmallImage, isVideo } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
+import { Download, Exit, ExitFullscreen, Fullscreen, UnmuteVideo, MuteVideo } from '../buttons/index.js';
 import { HeaderInfoBlock } from '../header-info-block/Component.js';
-import { s as styles, D as Download, E as Exit, a as ExitFullscreen, F as Fullscreen } from '../../buttons-07b28b2a.js';
-import '../../../../typography/modern';
-import '../../utils/split-filename.js';
+import 'classnames';
 import '../../../../icon-button/modern';
 import '../../../../tooltip/modern/desktop';
+import '@alfalab/icons-glyph/ArrowLeftMIcon';
 import '@alfalab/icons-glyph/ArrowsInwardMIcon';
 import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
+import '@alfalab/icons-glyph/PauseCompactMIcon';
+import '@alfalab/icons-glyph/PlayCompactMIcon';
 import '@alfalab/icons-glyph/PointerDownMIcon';
+import '@alfalab/icons-glyph/SoundCrossMIcon';
+import '@alfalab/icons-glyph/SoundMIcon';
+import '../../../../typography/modern';
+import '../../utils/split-filename.js';
+
+const styles = {"header":"gallery__header_1kq4w"};
+require('./index.css');
 
 const Header = () => {
-    const { currentSlideIndex, singleSlide, images, fullScreen, getCurrentImageMeta, getCurrentImage, setFullScreen, onClose, } = useContext(GalleryContext);
+    const { currentSlideIndex, singleSlide, images, fullScreen, getCurrentImageMeta, getCurrentImage, setFullScreen, onClose, mutedVideo, setMutedVideo, } = useContext(GalleryContext);
+    const currentImage = getCurrentImage();
+    const meta = getCurrentImageMeta();
     const toggleFullScreenButton = useRef(null);
+    const onMuteButtonClick = () => {
+        setMutedVideo(!mutedVideo);
+    };
     const closeFullScreen = () => {
         setFullScreen(false);
     };
@@ -27,19 +41,17 @@ const Header = () => {
             toggleFullScreenButton.current.focus();
         }
     }, [fullScreen]);
-    const currentImage = getCurrentImage();
     const canDownload = currentImage?.canDownload ?? true;
     const filename = currentImage?.name || '';
-    const description = singleSlide || !images.length
-        ? ''
-        : `Изображение ${currentSlideIndex + 1} из ${images.length}`;
-    const meta = getCurrentImageMeta();
+    const description = singleSlide || !images.length ? '' : `${currentSlideIndex + 1} из ${images.length}`;
     const showFullScreenButton = !isSmallImage(meta) && !meta?.broken;
     const showDownloadButton = !meta?.broken && canDownload;
     const renderToggleFullScreenButton = () => fullScreen ? (React.createElement(ExitFullscreen, { onClick: closeFullScreen, buttonRef: toggleFullScreenButton, dataTestId: TestIds.EXIT_FULLSCREEN_BUTTON })) : (React.createElement(Fullscreen, { onClick: openFullScreen, buttonRef: toggleFullScreenButton, dataTestId: TestIds.FULLSCREEN_BUTTON }));
+    const renderToggleMuteVideo = () => mutedVideo ? (React.createElement(UnmuteVideo, { onClick: onMuteButtonClick, dataTestId: TestIds.UNMUTE_BUTTON })) : (React.createElement(MuteVideo, { onClick: onMuteButtonClick, dataTestId: TestIds.MUTE_BUTTON }));
     return (React.createElement("div", { className: styles.header },
         React.createElement(HeaderInfoBlock, { filename: filename, description: description }),
         React.createElement("div", { className: styles.buttons },
+            isVideo(currentImage?.src) && renderToggleMuteVideo(),
             showFullScreenButton && renderToggleFullScreenButton(),
             showDownloadButton && (React.createElement(Download, { href: currentImage?.src, download: currentImage?.name, dataTestId: TestIds.DOWNLOAD_BUTTON })),
             React.createElement(Exit, { onClick: onClose, dataTestId: TestIds.CLOSE_BUTTON }))));

package/gallery/modern/components/header/index.css

@@ -1,9 +1,6 @@
 /* hash: 1jx2u */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-} /* deprecated */ :root {
-    --color-static-neutral-100-hover: #e7e8eb;
-    --color-static-neutral-100-press: #dcdde1;
-    --color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -18,26 +15,16 @@
     /* новые значения, используйте их */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
     --gap-m: 16px; /* deprecated */ /* deprecated */
-    --gap-xl: 24px; /* deprecated */
-    --gap-2xl: 32px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .gallery__header_2cka2 {
+} .gallery__header_1kq4w {
     display: flex;
     justify-content: space-between;
     flex-shrink: 0;
     width: 100%;
     padding: var(--gap-m) var(--gap-xl);
     box-sizing: border-box;
-} .gallery__buttons_2cka2 {
-    display: flex;
-    padding-left: var(--gap-2xl)
-} .gallery__buttons_2cka2 path {
-        color: var(--color-static-neutral-translucent-1300-inverted);
-    } /* TODO: применять static цвет через prop IconButton'а */ .gallery__iconButton_2cka2:hover path {
-        color: var(--color-static-neutral-100-hover);
-    } .gallery__iconButton_2cka2:active path {
-        color: var(--color-static-neutral-100-press);
-    }
+}

package/gallery/modern/components/header/index.js

@@ -3,13 +3,19 @@ import 'react';
 import '../../context.js';
 import '../../utils/utils.js';
 import '../../utils/constants.js';
-import '../header-info-block/Component.js';
-import '../../../../typography/modern';
-import '../../utils/split-filename.js';
-import '../../buttons-07b28b2a.js';
+import '../buttons/index.js';
+import 'classnames';
 import '../../../../icon-button/modern';
 import '../../../../tooltip/modern/desktop';
+import '@alfalab/icons-glyph/ArrowLeftMIcon';
 import '@alfalab/icons-glyph/ArrowsInwardMIcon';
 import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
+import '@alfalab/icons-glyph/PauseCompactMIcon';
+import '@alfalab/icons-glyph/PlayCompactMIcon';
 import '@alfalab/icons-glyph/PointerDownMIcon';
+import '@alfalab/icons-glyph/SoundCrossMIcon';
+import '@alfalab/icons-glyph/SoundMIcon';
+import '../header-info-block/Component.js';
+import '../../../../typography/modern';
+import '../../utils/split-filename.js';

package/gallery/modern/components/header-info-block/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Typography } from '../../../../typography/modern';
 import { splitFilename } from '../../utils/split-filename.js';
 
-const styles = {"info":"gallery__info_1wotu","filenameHead":"gallery__filenameHead_1wotu","filenameContainer":"gallery__filenameContainer_1wotu","description":"gallery__description_1wotu"};
+const styles = {"info":"gallery__info_eb984","filenameHead":"gallery__filenameHead_eb984","filenameContainer":"gallery__filenameContainer_eb984","description":"gallery__description_eb984"};
 require('./index.css');
 
 const HeaderInfoBlock = ({ filename, description }) => {

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

@@ -19,21 +19,21 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .gallery__info_1wotu {
+} .gallery__info_eb984 {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     overflow: hidden;
-} .gallery__filenameHead_1wotu {
+} .gallery__filenameHead_eb984 {
     display: inline;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-} .gallery__filenameContainer_1wotu {
+} .gallery__filenameContainer_eb984 {
     overflow: hidden;
     display: inline-flex;
-} .gallery__description_1wotu {
+} .gallery__description_eb984 {
     display: inline;
     text-overflow: ellipsis;
     overflow: hidden;

package/gallery/modern/components/header-mobile/Component.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const HeaderMobile: () => React.JSX.Element;
+export { HeaderMobile };

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

@@ -0,0 +1,54 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import '../../../../base-modal/modern';
+import '@alfalab/hooks';
+import { Typography } from '../../../../typography/modern';
+import { GalleryContext } from '../../context.js';
+import { BackArrow, Download } from '../buttons/index.js';
+import { isVideo } from '../../utils/utils.js';
+import { TestIds } from '../../utils/constants.js';
+import '../image-viewer/component.js';
+import '../../../../icon-button/modern';
+import '../../../../tooltip/modern/desktop';
+import '@alfalab/icons-glyph/ArrowLeftMIcon';
+import '@alfalab/icons-glyph/ArrowsInwardMIcon';
+import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
+import '@alfalab/icons-glyph/CrossMIcon';
+import '@alfalab/icons-glyph/PauseCompactMIcon';
+import '@alfalab/icons-glyph/PlayCompactMIcon';
+import '@alfalab/icons-glyph/PointerDownMIcon';
+import '@alfalab/icons-glyph/SoundCrossMIcon';
+import '@alfalab/icons-glyph/SoundMIcon';
+import 'element-closest';
+import 'swiper';
+import 'swiper/react';
+import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
+import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
+import '../../slide-e2bd02f9.js';
+import '../image-viewer/paths.js';
+import '../image-viewer/video/index.js';
+import 'hls.js';
+import '@alfalab/core-components/icon-view/circle';
+import '../../../../button/modern';
+import 'swiper/swiper.min.css';
+
+const styles = {"headerMobile":"gallery__headerMobile_1h3yn","video":"gallery__video_1h3yn","hide":"gallery__hide_1h3yn","leftButton":"gallery__leftButton_1h3yn","rightButtons":"gallery__rightButtons_1h3yn","description":"gallery__description_1h3yn"};
+require('./index.css');
+
+const HeaderMobile = () => {
+    const { onClose, singleSlide, images, currentSlideIndex, getCurrentImage, getCurrentImageMeta, hideNavigation, } = useContext(GalleryContext);
+    const currentImage = getCurrentImage();
+    const meta = getCurrentImageMeta();
+    const description = singleSlide || !images.length ? '' : `${currentSlideIndex + 1} из ${images.length}`;
+    const canDownload = currentImage?.canDownload ?? true;
+    const showDownloadButton = !meta?.broken && canDownload;
+    return (React.createElement("div", { className: cn(styles.headerMobile, {
+            [styles.video]: isVideo(currentImage?.src),
+            [styles.hide]: hideNavigation,
+        }) },
+        React.createElement(BackArrow, { onClick: onClose }),
+        React.createElement(Typography.Text, { 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 })))));
+};
+
+export { HeaderMobile };