@alfalab/core-components 48.23.0 → 48.24.0

package/gallery/modern/Component.js

@@ -2,26 +2,32 @@ import React, { useState, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '../../base-modal/modern';
 import { useIsDesktop } from '../../mq/modern';
+import { BottomButton } from './components/bottom-button/Component.js';
 import { Single } from './components/image-viewer/single.js';
+import { Subtitles } from './components/subtitles/index.js';
 import { NavigationBar } from './components/navigation-bar/Component.js';
 import { Header } from './components/header/Component.js';
 import '@alfalab/hooks';
+import { SWIPE_THRESHOLD } from './constants.js';
 import { GalleryContext } from './context.js';
 import { ImageViewer } from './components/image-viewer/component.js';
 import { InfoBar } from './components/info-bar/Component.js';
 import { HeaderMobile } from './components/header-mobile/Component.js';
+import '../../button/modern';
+import '../../typography/modern';
 import './utils/utils.js';
-import './hooks-4af7cd73.js';
+import './hooks-5314791c.js';
 import 'element-closest';
 import './components/image-viewer/slide.js';
 import '../../spinner/modern';
-import '../../typography/modern';
 import './utils/constants.js';
 import './components/image-viewer/paths.js';
 import './components/image-viewer/video/index.js';
 import 'hls.js';
 import '../../icon-view/modern/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
+import './hooks/use-custom-subtitles.js';
+import 'lodash/throttle';
 import './components/image-preview/Component.js';
 import './components/image-preview/paths.js';
 import './components/buttons/index.js';
@@ -33,6 +39,7 @@ import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
 import '@alfalab/icons-glyph/PauseCompactMIcon';
 import '@alfalab/icons-glyph/PointerDownMIcon';
+import '@alfalab/icons-glyph/ShareMIcon';
 import '@alfalab/icons-glyph/SoundCrossMIcon';
 import '@alfalab/icons-glyph/SoundMIcon';
 import './components/header-info-block/Component.js';
@@ -43,7 +50,7 @@ import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import 'swiper/swiper.min.css';
 
-const styles = {"container":"gallery__container_1d7h6","mobile":"gallery__mobile_1d7h6","modal":"gallery__modal_1d7h6","navigationVideo":"gallery__navigationVideo_1d7h6","hideNavigation":"gallery__hideNavigation_1d7h6"};
+const styles = {"container":"gallery__container_1gnfu","mobile":"gallery__mobile_1gnfu","modal":"gallery__modal_1gnfu","navigationVideo":"gallery__navigationVideo_1gnfu","hide":"gallery__hide_1gnfu","hideInfo":"gallery__hideInfo_1gnfu","bottomButton":"gallery__bottomButton_1gnfu","subtitles":"gallery__subtitles_1gnfu","hideSubtitles":"gallery__hideSubtitles_1gnfu"};
 require('./index.css');
 
 const DEFAULT_FULL_SCREEN = false;
@@ -65,6 +72,7 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
     const [hideNavigation, setHideNavigation] = useState(DEFAULT_HIDE_NAVIGATION);
     const isDesktop = useIsDesktop();
     const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;
+    const bottomButton = images[currentSlideIndex]?.bottomButton;
     const slideTo = useCallback((index) => {
         if (images[index]) {
             setCurrentSlideIndex?.(index);
@@ -94,6 +102,12 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
         imagesMeta[index] = meta;
         setImagesMeta(imagesMeta.slice());
     }, [imagesMeta]);
+    const handleBottomButtonClick = useCallback((e) => {
+        e.stopPropagation();
+        if (bottomButton?.onClick) {
+            bottomButton.onClick(e);
+        }
+    }, [bottomButton]);
     const handleClose = useCallback(() => {
         onClose();
         if (uncontrolled) {
@@ -137,6 +151,25 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [handleKeyDown]);
+    useEffect(() => {
+        let startY;
+        const abortController = new AbortController();
+        const { signal } = abortController;
+        document.addEventListener('touchstart', (e) => {
+            startY = e.touches[0].clientY;
+        }, { signal });
+        document.addEventListener('touchmove', (e) => {
+            const endY = e.changedTouches[0].clientY;
+            const deltaY = startY - endY;
+            // Если свайп вниз, закрываем галерею
+            if (deltaY < SWIPE_THRESHOLD) {
+                onClose();
+            }
+        }, { signal });
+        return () => {
+            abortController.abort();
+        };
+    }, [onClose]);
     const singleSlide = images.length === 1;
     const showNavigationBar = !singleSlide && !fullScreen;
     // eslint-disable-next-line react/jsx-no-constructed-context-values
@@ -175,8 +208,11 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
                 images.length === 1 ? React.createElement(Single, null) : React.createElement(ImageViewer, null),
                 React.createElement("nav", { className: cn({
                         [styles.navigationVideo]: isCurrentVideo && !isDesktop,
-                        [styles.hideNavigation]: hideNavigation && !isDesktop,
+                        [styles.hide]: showNavigationBar && hideNavigation && !isDesktop,
+                        [styles.hideInfo]: !showNavigationBar && hideNavigation && !isDesktop,
                     }) },
+                    !isDesktop && React.createElement(Subtitles, null),
+                    isCurrentVideo && !isDesktop && bottomButton && (React.createElement(BottomButton, { bottomButton: bottomButton, onClick: handleBottomButtonClick, className: styles.bottomButton })),
                     showNavigationBar && React.createElement(NavigationBar, null),
                     !isDesktop && React.createElement(InfoBar, null))))));
 };

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import React from 'react';
+import { MouseEvent } from "react";
+import { TBottomButton } from "../../types";
+type Props = {
+    onClick: (e: MouseEvent) => void;
+    className?: string;
+    bottomButton: TBottomButton;
+};
+declare const BottomButton: ({ onClick, className, bottomButton }: Props) => React.JSX.Element;
+export { BottomButton };

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

@@ -0,0 +1,29 @@
+import React, { useRef, useState, useContext, useEffect } from 'react';
+import cn from 'classnames';
+import { Button } from '../../../../button/modern';
+import { Typography } from '../../../../typography/modern';
+import { GalleryContext } from '../../context.js';
+
+const styles = {"component":"gallery__component_r7wnf","notVisible":"gallery__notVisible_r7wnf"};
+require('./index.css');
+
+const BottomButton = ({ onClick, className, bottomButton }) => {
+    const timer = useRef();
+    const [visible, setVisible] = useState(false);
+    const { currentSlideIndex, getSwiper, singleSlide } = useContext(GalleryContext);
+    useEffect(() => {
+        const swiper = getSwiper();
+        if ((currentSlideIndex === swiper?.activeIndex || singleSlide) && bottomButton.timeout) {
+            if (timer.current) {
+                clearTimeout(timer.current);
+            }
+            setVisible(false);
+            timer.current = setTimeout(() => setVisible(true), bottomButton.timeout * 1000);
+        }
+        /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    }, [bottomButton.timeout, currentSlideIndex, singleSlide]);
+    return (React.createElement(Button, { size: 56, className: cn(styles.component, { [styles.notVisible]: !visible && bottomButton.timeout }, className), onClick: onClick },
+        React.createElement(Typography.Text, { color: 'static-primary-light' }, bottomButton.text)));
+};
+
+export { BottomButton };

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

@@ -0,0 +1,39 @@
+/* hash: 1log9 */
+: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-translucent-500-inverted: rgba(228, 228, 251, 0.28);
+    --color-static-neutral-translucent-500-inverted-hover: rgba(233, 233, 250, 0.37);
+    --color-static-neutral-translucent-500-inverted-press: rgba(238, 238, 254, 0.46); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
+} :root {
+} /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
+} /* сбрасывает синюю подсветку при нажатии */ .gallery__component_r7wnf {
+    background-color: var(--color-static-neutral-translucent-500-inverted);
+} .gallery__component_r7wnf:hover {
+        background-color: var(--color-static-neutral-translucent-500-inverted-hover);
+    } .gallery__component_r7wnf:active {
+        background-color: var(--color-static-neutral-translucent-500-inverted-press);
+    } .gallery__component_r7wnf {
+
+    transition: transform 1s ease-in-out;
+    will-change: transform;
+} .gallery__notVisible_r7wnf {
+    transform: translateY(250%);
+}

package/gallery/modern/components/bottom-button/index.d.ts

@@ -0,0 +1 @@
+export { BottomButton } from "./Component";

package/gallery/modern/components/bottom-button/index.js

@@ -0,0 +1,6 @@
+export { BottomButton } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../../../button/modern';
+import '../../../../typography/modern';
+import '../../context.js';

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

@@ -1,4 +1,4 @@
-/* hash: qh9s3 */
+/* hash: 1l4wx */
 :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: #f2f3f5;
@@ -26,16 +26,16 @@
     /* stylelint-disable-next-line length-zero-no-unit */
     --gap-32: var(--gap-2xl);
 } :root {
-} :root {
-} /* сбрасывает синюю подсветку при нажатии */ .gallery__buttons_y4arv {
+} /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
+} /* сбрасывает синюю подсветку при нажатии */ .gallery__buttons_1xz63 {
     display: flex;
     padding-left: var(--gap-32)
-} .gallery__buttons_y4arv path {
+} .gallery__buttons_1xz63 path {
         color: var(--color-static-neutral-translucent-1300-inverted);
-    } .gallery__iconButton_y4arv path {
+    } .gallery__iconButton_1xz63 path {
         color: var(--color-static-neutral-100);
-    } .gallery__iconButton_y4arv:hover path {
+    } .gallery__iconButton_1xz63:hover path {
         color: var(--color-static-neutral-100-hover);
-    } .gallery__iconButton_y4arv:active path {
+    } .gallery__iconButton_1xz63:active path {
         color: var(--color-static-neutral-100-press);
     }

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

@@ -12,5 +12,6 @@ declare const ExitFullscreen: FC<Props>;
 declare const MuteVideo: FC<Props>;
 declare const UnmuteVideo: FC<Props>;
 declare const Download: FC<Props>;
+declare const Share: FC<Props>;
 declare const Exit: FC<Props>;
-export { Fullscreen, BackArrow, Play, Pause, ExitFullscreen, MuteVideo, UnmuteVideo, Download, Exit };
+export { Fullscreen, BackArrow, Play, Pause, ExitFullscreen, MuteVideo, UnmuteVideo, Download, Share, Exit };

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

@@ -9,10 +9,11 @@ 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 { ShareMIcon } from '@alfalab/icons-glyph/ShareMIcon';
 import { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';
 import { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';
 
-const styles = {"buttons":"gallery__buttons_y4arv","iconButton":"gallery__iconButton_y4arv"};
+const styles = {"buttons":"gallery__buttons_1xz63","iconButton":"gallery__iconButton_1xz63"};
 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'] },
@@ -28,6 +29,8 @@ const UnmuteVideo = ({ buttonRef, className, ...restProps }) => (React.createEle
     React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: SoundCrossMIcon, "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, "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })));
+const Share = (props) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F', fallbackPlacements: ['bottom-end'] },
+    React.createElement(IconButton, { ...props, icon: ShareMIcon, "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })));
 const Exit = (props) => (React.createElement(IconButton, { ...props, icon: CrossMIcon, "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }));
 
-export { BackArrow, Download, Exit, ExitFullscreen, Fullscreen, MuteVideo, Pause, Play, UnmuteVideo };
+export { BackArrow, Download, Exit, ExitFullscreen, Fullscreen, MuteVideo, Pause, Play, Share, UnmuteVideo };

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

@@ -1,7 +1,7 @@
 import React, { useContext, useRef, useEffect } from 'react';
 import { GalleryContext } from '../../context.js';
 import { isSmallImage, isVideo } from '../../utils/utils.js';
-import { TestIds, GALLERY_EVENTS } from '../../utils/constants.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 'classnames';
@@ -14,12 +14,13 @@ import '@alfalab/icons-glyph/CrossMIcon';
 import '@alfalab/icons-glyph/PauseCompactMIcon';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import '@alfalab/icons-glyph/PointerDownMIcon';
+import '@alfalab/icons-glyph/ShareMIcon';
 import '@alfalab/icons-glyph/SoundCrossMIcon';
 import '@alfalab/icons-glyph/SoundMIcon';
 import '../../../../typography/modern';
 import '../../utils/split-filename.js';
 
-const styles = {"header":"gallery__header_lq66n"};
+const styles = {"header":"gallery__header_1o87t"};
 require('./index.css');
 
 const Header = () => {
@@ -28,17 +29,13 @@ const Header = () => {
     const meta = getCurrentImageMeta();
     const toggleFullScreenButton = useRef(null);
     const onMuteButtonClick = () => {
-        if (mutedVideo) {
-            const customEvent = new CustomEvent(GALLERY_EVENTS.ON_UNMUTE, {
-                detail: { player: meta?.player?.current },
-            });
-            dispatchEvent(customEvent);
-        }
-        else {
-            const customEvent = new CustomEvent(GALLERY_EVENTS.ON_MUTE, {
-                detail: { player: meta?.player?.current },
-            });
-            dispatchEvent(customEvent);
+        if (currentImage) {
+            if (mutedVideo && currentImage.onUnmute) {
+                currentImage.onUnmute();
+            }
+            else if (currentImage.onMute) {
+                currentImage.onMute();
+            }
         }
         setMutedVideo(!mutedVideo);
     };

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

@@ -1,4 +1,4 @@
-/* hash: 1xz4d */
+/* hash: tmevq */
 :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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
@@ -14,22 +14,22 @@
 
     /* новые значения, используйте их */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-    --gap-m: 16px; /* 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 */
+    --gap-m: 16px; /* 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 */
 
     /* новые значения, используйте их */
 
     /* no-unit может приводить к проблемам в calc (#1559) */
     /* stylelint-disable-next-line length-zero-no-unit */
     --gap-16: var(--gap-m);
-    --gap-24: var(--gap-xl);
+    --gap-32: var(--gap-2xl);
 } :root {
-} :root {
-} /* сбрасывает синюю подсветку при нажатии */ .gallery__header_lq66n {
+} /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
+} /* сбрасывает синюю подсветку при нажатии */ .gallery__header_1o87t {
     display: flex;
     justify-content: space-between;
     flex-shrink: 0;
     width: 100%;
-    padding: var(--gap-16) var(--gap-24);
+    padding: var(--gap-16) var(--gap-32);
     box-sizing: border-box;
 }

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

@@ -14,6 +14,7 @@ import '@alfalab/icons-glyph/CrossMIcon';
 import '@alfalab/icons-glyph/PauseCompactMIcon';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import '@alfalab/icons-glyph/PointerDownMIcon';
+import '@alfalab/icons-glyph/ShareMIcon';
 import '@alfalab/icons-glyph/SoundCrossMIcon';
 import '@alfalab/icons-glyph/SoundMIcon';
 import '../header-info-block/Component.js';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { TitleDesktop, Text } from '../../../../typography/modern';
 import { splitFilename } from '../../utils/split-filename.js';
 
-const styles = {"info":"gallery__info_je4ss","filenameHead":"gallery__filenameHead_je4ss","filenameContainer":"gallery__filenameContainer_je4ss","description":"gallery__description_je4ss"};
+const styles = {"info":"gallery__info_1ikdj","filenameHead":"gallery__filenameHead_1ikdj","filenameContainer":"gallery__filenameContainer_1ikdj","description":"gallery__description_1ikdj"};
 require('./index.css');
 
 const HeaderInfoBlock = ({ filename, description }) => {

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

@@ -1,4 +1,4 @@
-/* hash: oxrba */
+/* hash: 1tb87 */
 :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 { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
@@ -22,22 +22,22 @@
     /* stylelint-disable-next-line length-zero-no-unit */
     --gap-4: var(--gap-2xs);
 } :root {
-} :root {
-} /* сбрасывает синюю подсветку при нажатии */ .gallery__info_je4ss {
+} /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
+} /* сбрасывает синюю подсветку при нажатии */ .gallery__info_1ikdj {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     overflow: hidden;
-} .gallery__filenameHead_je4ss {
+} .gallery__filenameHead_1ikdj {
     display: inline;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-} .gallery__filenameContainer_je4ss {
+} .gallery__filenameContainer_1ikdj {
     overflow: hidden;
     display: inline-flex;
-} .gallery__description_je4ss {
+} .gallery__description_1ikdj {
     display: inline;
     text-overflow: ellipsis;
     overflow: hidden;

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

@@ -4,7 +4,7 @@ import { Text } from '../../../../typography/modern';
 import { GalleryContext } from '../../context.js';
 import { isVideo } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
-import { BackArrow, Download } from '../buttons/index.js';
+import { BackArrow, Download, Share } from '../buttons/index.js';
 import '../../../../icon-button/modern';
 import '../../../../tooltip/modern/desktop';
 import '@alfalab/icons-glyph/ArrowLeftMIcon';
@@ -14,10 +14,11 @@ import '@alfalab/icons-glyph/CrossMIcon';
 import '@alfalab/icons-glyph/PauseCompactMIcon';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import '@alfalab/icons-glyph/PointerDownMIcon';
+import '@alfalab/icons-glyph/ShareMIcon';
 import '@alfalab/icons-glyph/SoundCrossMIcon';
 import '@alfalab/icons-glyph/SoundMIcon';
 
-const styles = {"headerMobile":"gallery__headerMobile_vwftw","video":"gallery__video_vwftw","hide":"gallery__hide_vwftw","leftButton":"gallery__leftButton_vwftw","rightButtons":"gallery__rightButtons_vwftw","description":"gallery__description_vwftw"};
+const styles = {"headerMobile":"gallery__headerMobile_knmay","video":"gallery__video_knmay","hide":"gallery__hide_knmay","leftButton":"gallery__leftButton_knmay","rightButtons":"gallery__rightButtons_knmay","description":"gallery__description_knmay"};
 require('./index.css');
 
 const HeaderMobile = () => {
@@ -27,13 +28,37 @@ const HeaderMobile = () => {
     const description = images.length > 1 && `${currentSlideIndex + 1} из ${images.length}`;
     const canDownload = currentImage?.canDownload ?? true;
     const showDownloadButton = !meta?.broken && canDownload;
+    const handleShareClick = async () => {
+        if (!currentImage)
+            return;
+        const title = currentImage.name ?? new Date().toISOString().split('T')[0];
+        const image = await fetch(currentImage.src);
+        const blob = await image.blob();
+        const filesArray = [
+            new File([blob], title, {
+                type: blob.type,
+                lastModified: new Date().getTime(),
+            }),
+        ];
+        const shareData = {
+            files: filesArray,
+        };
+        if (navigator.canShare(shareData) && !isVideo(currentImage.src)) {
+            await navigator.share(shareData);
+        }
+        else {
+            await navigator.share({ url: currentImage.src, title });
+        }
+    };
     return (React.createElement("div", { className: cn(styles.headerMobile, {
             [styles.video]: isVideo(currentImage?.src),
             [styles.hide]: hideNavigation,
         }) },
         React.createElement(BackArrow, { onClick: onClose }),
         React.createElement(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 })))));
+        React.createElement("div", { className: styles.rightButtons },
+            showDownloadButton && (React.createElement(Download, { href: currentImage?.src, download: currentImage?.name, dataTestId: TestIds.DOWNLOAD_BUTTON })),
+            !meta?.broken && React.createElement(Share, { onClick: handleShareClick }))));
 };
 
 export { HeaderMobile };