@alfalab/core-components 48.23.0 → 48.24.0

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

@@ -0,0 +1,27 @@
+import React, { useRef, useState, useContext, useEffect } from 'react';
+import cn from 'classnames';
+import { Button } from '../../../../button/moderncssm';
+import { Typography } from '../../../../typography/moderncssm';
+import { GalleryContext } from '../../context.js';
+import styles from './index.module.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/moderncssm/components/bottom-button/index.d.ts

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

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

@@ -0,0 +1,7 @@
+export { BottomButton } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../../../button/moderncssm';
+import '../../../../typography/moderncssm';
+import '../../context.js';
+import './index.module.css';

package/gallery/moderncssm/components/bottom-button/index.module.css

@@ -0,0 +1,23 @@
+/* */
+
+.component {
+    background-color: var(--color-static-neutral-translucent-500-inverted);
+}
+
+.component:hover {
+        background-color: var(--color-static-neutral-translucent-500-inverted-hover);
+    }
+
+.component:active {
+        background-color: var(--color-static-neutral-translucent-500-inverted-press);
+    }
+
+.component {
+
+    transition: transform 1s ease-in-out;
+    will-change: transform;
+}
+
+.notVisible {
+    transform: translateY(250%);
+}

package/gallery/moderncssm/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/moderncssm/components/buttons/index.js

@@ -9,6 +9,7 @@ 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';
 import styles from './index.module.css';
@@ -26,6 +27,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/moderncssm/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 styles from './index.module.css';
@@ -15,6 +15,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 '../buttons/index.module.css';
@@ -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/moderncssm/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 '../buttons/index.module.css';

package/gallery/moderncssm/components/header/index.module.css

@@ -5,6 +5,6 @@
     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/moderncssm/components/header-mobile/Component.js

@@ -4,7 +4,7 @@ import { Text } from '../../../../typography/moderncssm';
 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 styles from './index.module.css';
 import '../../../../icon-button/moderncssm';
 import '../../../../tooltip/moderncssm/desktop';
@@ -15,6 +15,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 '../buttons/index.module.css';
@@ -26,13 +27,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 };

package/gallery/moderncssm/components/header-mobile/index.js

@@ -15,6 +15,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 '../buttons/index.module.css';

package/gallery/moderncssm/components/header-mobile/index.module.css

@@ -4,7 +4,7 @@
     position: relative;
     height: 72px;
     z-index: 3;
-    padding: var(--gap-12) var(--gap-8);
+    padding: 0;
     display: flex;
     justify-content: space-between;
     align-items: center
@@ -13,7 +13,6 @@
 .headerMobile.video {
         position: absolute;
         width: 100%;
-        padding: 0;
         background-color: var(--color-static-neutral-0-inverted);
         transition: transform 0.3s ease-in-out;
     }

package/gallery/moderncssm/components/image-preview/Component.js

@@ -1,9 +1,9 @@
 import React, { useContext, useRef, useEffect } from 'react';
 import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
+import { PREVIEW_VIDEO_MULTIPLIER, PREVIEW_WIDTH_MOBILE, PREVIEW_WIDTH_DESKTOP, PREVIEW_HEIGHT_MOBILE, PREVIEW_HEIGHT_DESKTOP } from '../../constants.js';
 import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt } from '../../utils/utils.js';
-import { PREVIEW_VIDEO_MULTIPLIER, PREVIEW_WIDTH_MOBILE, PREVIEW_WIDTH_DESKTOP, PREVIEW_HEIGHT_MOBILE, PREVIEW_HEIGHT_DESKTOP } from '../../utils/constants.js';
 import { NoImagePaths } from './paths.js';
 import styles from './index.module.css';
 
@@ -41,6 +41,9 @@ const ImagePreview = ({ image, active = false, index, onSelect, className }) =>
             onSelect(index);
         }
     };
+    const handleDragStart = (e) => {
+        e.preventDefault();
+    };
     const [focused] = useFocus(ref, 'keyboard');
     const meta = imagesMeta[index];
     const isBroken = Boolean(meta?.broken);
@@ -79,7 +82,7 @@ const ImagePreview = ({ image, active = false, index, onSelect, className }) =>
             [styles.active]: active,
             [styles.focused]: focused,
             [styles.mobile]: isMobile,
-        }, className), onClick: handleClick, role: 'button', onKeyDown: handleKeyDown, tabIndex: 0, ref: ref, "aria-label": `Перейти к ${index + 1} элементу` }, renderPreview()));
+        }, className), onClick: handleClick, role: 'button', onKeyDown: handleKeyDown, onMouseDown: handleDragStart, tabIndex: 0, ref: ref, "aria-label": `Перейти к ${index + 1} элементу` }, renderPreview()));
 };
 
 export { ImagePreview };

package/gallery/moderncssm/components/image-preview/index.js

@@ -2,8 +2,8 @@ export { ImagePreview } from './Component.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
+import '../../constants.js';
 import '../../context.js';
 import '../../utils/utils.js';
-import '../../utils/constants.js';
 import './paths.js';
 import './index.module.css';

package/gallery/moderncssm/components/image-preview/index.module.css

@@ -2,7 +2,6 @@
 
 .component {
     display: flex;
-    padding: var(--gap-4);
     z-index: 3;
     overflow: hidden;
     transition: border 0.15s ease-in-out;

package/gallery/moderncssm/components/image-viewer/component.js

@@ -20,6 +20,12 @@ import './video/index.js';
 import 'hls.js';
 import '../../../../icon-view/moderncssm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
+import '../bottom-button/Component.js';
+import '../../../../button/moderncssm';
+import '../bottom-button/index.module.css';
+import '../subtitles/index.js';
+import '../../hooks/use-custom-subtitles.js';
+import '../subtitles/index.module.css';
 import './video/index.module.css';
 
 SwiperCore.use([EffectFade, A11y, Controller]);
@@ -51,10 +57,7 @@ const ImageViewer = () => {
     };
     const swiperProps = useMemo(() => ({
         slidesPerView: 1,
-        effect: 'fade',
-        fadeEffect: {
-            crossFade: true,
-        },
+        effect: 'slide',
         className: cn(styles.swiper, {
             [styles.hidden]: fullScreen && !isVideo(currentImage?.src),
             [styles.fullScreenVideo]: fullScreen && isVideo(currentImage?.src),
@@ -67,9 +70,10 @@ const ImageViewer = () => {
         },
         initialSlide,
         simulateTouch: false,
-        zoom: { maxRatio: 4 },
+        zoom: { maxRatio: 4, minRatio: 1, toggle: true },
         onSwiper: setSwiper,
         onSlideChange: handleSlideChange,
+        lazy: { loadPrevNext: true },
     }), [
         fullScreen,
         currentImage?.src,

package/gallery/moderncssm/components/image-viewer/index.js

@@ -20,5 +20,11 @@ import './video/index.js';
 import 'hls.js';
 import '../../../../icon-view/moderncssm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
+import '../bottom-button/Component.js';
+import '../../../../button/moderncssm';
+import '../bottom-button/index.module.css';
+import '../subtitles/index.js';
+import '../../hooks/use-custom-subtitles.js';
+import '../subtitles/index.module.css';
 import './video/index.module.css';
 import 'swiper/swiper.min.css';

package/gallery/moderncssm/components/image-viewer/single.js

@@ -14,6 +14,12 @@ import './video/index.js';
 import 'hls.js';
 import '../../../../icon-view/moderncssm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
+import '../bottom-button/Component.js';
+import '../../../../button/moderncssm';
+import '../bottom-button/index.module.css';
+import '../subtitles/index.js';
+import '../../hooks/use-custom-subtitles.js';
+import '../subtitles/index.module.css';
 import './video/index.module.css';
 
 const Single = () => {
@@ -35,7 +41,7 @@ const Single = () => {
             [styles.mobile]: isMobile,
             [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
         }), ref: wrapperRef },
-        React.createElement(Slide, { isActive: true, containerAspectRatio: wrapperAspectRatio, image: currentImage, containerHeight: wrapperRect?.height || 0, meta: currentImageMeta, index: 0, imageAspectRatio: imageAspectRatio, slideVisible: true })))));
+        React.createElement(Slide, { isActive: true, containerAspectRatio: wrapperAspectRatio, image: currentImage, containerHeight: wrapperRect?.height || 0, meta: currentImageMeta, index: currentSlideIndex, imageAspectRatio: imageAspectRatio, slideVisible: true })))));
 };
 
 export { Single };

package/gallery/moderncssm/components/image-viewer/slide.js

@@ -13,6 +13,12 @@ import 'element-closest';
 import 'hls.js';
 import '../../../../icon-view/moderncssm/circle';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
+import '../bottom-button/Component.js';
+import '../../../../button/moderncssm';
+import '../bottom-button/index.module.css';
+import '../subtitles/index.js';
+import '../../hooks/use-custom-subtitles.js';
+import '../subtitles/index.module.css';
 import './video/index.module.css';
 
 const SlideInner = ({ children, broken, loading, isVideoView }) => {

package/gallery/moderncssm/components/image-viewer/video/index.js

@@ -1,17 +1,25 @@
-import React, { useRef, useContext, useEffect } from 'react';
+import React, { useRef, useContext, useEffect, useCallback } from 'react';
 import cn from 'classnames';
 import Hls from 'hls.js';
 import { Circle } from '../../../../../icon-view/moderncssm/circle';
 import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';
 import { GalleryContext } from '../../../context.js';
-import { GALLERY_EVENTS } from '../../../utils/constants.js';
+import { BottomButton } from '../../bottom-button/Component.js';
+import { Subtitles } from '../../subtitles/index.js';
 import styles from './index.module.css';
+import '../../../../../button/moderncssm';
+import '../../../../../typography/moderncssm';
+import '../../bottom-button/index.module.css';
+import '../../../hooks/use-custom-subtitles.js';
+import '../../subtitles/index.module.css';
 
 const Video = ({ url, index, className, isActive }) => {
     const playerRef = useRef(null);
     const timer = useRef();
-    const { setImageMeta, mutedVideo, view, playingVideo, setPlayingVideo, setHideNavigation } = useContext(GalleryContext);
+    const { setImageMeta, mutedVideo, view, playingVideo, setPlayingVideo, setHideNavigation, getCurrentImage, } = useContext(GalleryContext);
     const isMobile = view === 'mobile';
+    const isDesktop = view === 'desktop';
+    const image = getCurrentImage();
     useEffect(() => {
         setImageMeta({ player: playerRef }, index);
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
@@ -37,6 +45,7 @@ const Video = ({ url, index, className, isActive }) => {
             hls.loadSource(url);
             if (playerRef.current) {
                 hls.attachMedia(playerRef.current);
+                hls.subtitleDisplay = false;
             }
         }
         return () => {
@@ -49,6 +58,36 @@ const Video = ({ url, index, className, isActive }) => {
         };
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [url, index]);
+    useEffect(() => {
+        if (playerRef.current && isActive) {
+            if (playingVideo) {
+                playerRef.current.play();
+            }
+            else {
+                playerRef.current.pause();
+            }
+        }
+        if (playerRef.current && !isActive) {
+            playerRef.current.pause();
+            playerRef.current.currentTime = 0;
+        }
+    }, [isActive, playingVideo]);
+    useEffect(() => {
+        const handleSpacePress = (e) => {
+            if ((e.key === ' ' || e.code === 'Space') && isActive) {
+                if (playingVideo) {
+                    setPlayingVideo(false);
+                }
+                else {
+                    setPlayingVideo(true);
+                }
+            }
+        };
+        document.addEventListener('keyup', handleSpacePress);
+        return () => {
+            document.removeEventListener('keyup', handleSpacePress);
+        };
+    }, [isActive, playingVideo, setPlayingVideo]);
     const handleWrapperClick = (e) => {
         e.stopPropagation();
         if (isMobile) {
@@ -65,25 +104,16 @@ const Video = ({ url, index, className, isActive }) => {
         }
         setPlayingVideo(!playingVideo);
     };
-    useEffect(() => {
-        if (playerRef.current && isActive) {
-            if (playingVideo) {
-                playerRef.current.play();
-            }
-            else {
-                playerRef.current.pause();
-            }
+    const handleBottomButtonClick = useCallback((e) => {
+        e.stopPropagation();
+        if (image?.bottomButton) {
+            image.bottomButton.onClick(e);
         }
-        if (playerRef.current && !isActive) {
-            playerRef.current.pause();
-            playerRef.current.currentTime = 0;
+    }, [image?.bottomButton]);
+    const onPlay = () => {
+        if (image && image.onPlay) {
+            image.onPlay();
         }
-    }, [isActive, playingVideo]);
-    const onPlay = (e) => {
-        const customEvent = new CustomEvent(GALLERY_EVENTS.ON_PLAY, {
-            detail: { player: e.target },
-        });
-        dispatchEvent(customEvent);
         if (timer.current) {
             clearTimeout(timer.current);
         }
@@ -91,11 +121,10 @@ const Video = ({ url, index, className, isActive }) => {
             setHideNavigation(true);
         }, 3000);
     };
-    const onPause = (e) => {
-        const customEvent = new CustomEvent(GALLERY_EVENTS.ON_PAUSE, {
-            detail: { player: e.target },
-        });
-        dispatchEvent(customEvent);
+    const onPause = () => {
+        if (image && image.onPause) {
+            image.onPause();
+        }
         if (timer.current) {
             clearTimeout(timer.current);
             timer.current = undefined;
@@ -107,9 +136,11 @@ const Video = ({ url, index, className, isActive }) => {
     React.createElement("div", { onClick: handleWrapperClick, className: styles.videoWrapper },
         React.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, loop: true, src: Hls.isSupported() ? undefined : url, className: cn(styles.video, { [styles.mobile]: view === 'mobile' }, className) },
             React.createElement("track", { kind: 'captions' })),
-        view === 'desktop' && !playingVideo && (React.createElement("div", { className: styles.videoButton },
+        isDesktop && !playingVideo && (React.createElement("div", { className: styles.videoButton },
             React.createElement(Circle, { size: 64, shapeClassName: styles.iconShape },
-                React.createElement(PlayCompactMIcon, { className: styles.icon }))))));
+                React.createElement(PlayCompactMIcon, { className: styles.icon })))),
+        isDesktop && React.createElement(Subtitles, null),
+        isDesktop && image?.bottomButton && (React.createElement(BottomButton, { bottomButton: image.bottomButton, onClick: handleBottomButtonClick, className: styles.bottomButton }))));
 };
 
 export { Video };

package/gallery/moderncssm/components/image-viewer/video/index.module.css

@@ -4,7 +4,7 @@
     display: flex;
     justify-content: center;
     height: 100%;
-    width: 100%;
+    width: auto;
     position: relative;
 }
 
@@ -34,3 +34,10 @@
 .iconShape {
     fill: var(--color-static-neutral-translucent-700);
 }
+
+.bottomButton {
+    position: absolute;
+    bottom: 48px;
+    left: 32px;
+    right: 32px;
+}

package/gallery/moderncssm/components/index.js

@@ -5,12 +5,14 @@ export { ImageViewer } from './image-viewer/component.js';
 export { InfoBar } from './info-bar/Component.js';
 export { HeaderMobile } from './header-mobile/Component.js';
 import 'react';
+import 'classnames';
+import 'lodash/throttle';
 import '../context.js';
 import '../utils/utils.js';
 import '../utils/constants.js';
 import './navigation-bar/index.module.css';
-import 'classnames';
 import '@alfalab/hooks';
+import '../constants.js';
 import './image-preview/paths.js';
 import './image-preview/index.module.css';
 import './buttons/index.js';
@@ -23,6 +25,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 './buttons/index.module.css';
@@ -44,6 +47,12 @@ import './image-viewer/paths.js';
 import './image-viewer/video/index.js';
 import 'hls.js';
 import '../../../icon-view/moderncssm/circle';
+import './bottom-button/Component.js';
+import '../../../button/moderncssm';
+import './bottom-button/index.module.css';
+import './subtitles/index.js';
+import '../hooks/use-custom-subtitles.js';
+import './subtitles/index.module.css';
 import './image-viewer/video/index.module.css';
 import 'swiper/swiper.min.css';
 import './info-bar/index.module.css';

package/gallery/moderncssm/components/info-bar/Component.js

@@ -1,11 +1,10 @@
 import React, { useContext, useCallback } from 'react';
+import cn from 'classnames';
 import { Text } from '../../../../typography/moderncssm';
 import { GalleryContext } from '../../context.js';
 import { isVideo } from '../../utils/utils.js';
-import { GALLERY_EVENTS } from '../../utils/constants.js';
 import { Pause, Play, UnmuteVideo, MuteVideo } from '../buttons/index.js';
 import styles from './index.module.css';
-import 'classnames';
 import '../../../../icon-button/moderncssm';
 import '../../../../tooltip/moderncssm/desktop';
 import '@alfalab/icons-glyph/ArrowLeftMIcon';
@@ -15,35 +14,33 @@ 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 '../buttons/index.module.css';
 
 const InfoBar = () => {
-    const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo, getCurrentImageMeta, } = useContext(GalleryContext);
+    const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo } = useContext(GalleryContext);
     const image = getCurrentImage();
-    const meta = getCurrentImageMeta();
     const handleMuteVideo = useCallback(() => {
-        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 (image) {
+            if (mutedVideo && image.onUnmute) {
+                image.onUnmute();
+            }
+            else if (image.onMute) {
+                image.onMute();
+            }
         }
         setMutedVideo(!mutedVideo);
-    }, [meta?.player, mutedVideo, setMutedVideo]);
+    }, [image, mutedVideo, setMutedVideo]);
     const handlePlayVideo = useCallback(() => {
         setPlayingVideo(!playingVideo);
     }, [playingVideo, setPlayingVideo]);
-    return isVideo(image?.src) ? (React.createElement("section", { className: styles.videoButtons },
-        playingVideo ? (React.createElement(Pause, { onClick: handlePlayVideo, className: styles.center })) : (React.createElement(Play, { onClick: handlePlayVideo, className: styles.center })),
-        mutedVideo ? (React.createElement(UnmuteVideo, { onClick: handleMuteVideo, className: styles.right })) : (React.createElement(MuteVideo, { onClick: handleMuteVideo, className: styles.right })))) : (React.createElement(Text, { className: styles.description, tag: 'div', view: 'component', color: 'static-primary-light' }, image?.name));
+    return isVideo(image?.src) ? (React.createElement("section", { className: cn(styles.infoWrapper, styles.video) },
+        playingVideo ? (React.createElement(Pause, { onClick: handlePlayVideo })) : (React.createElement(Play, { onClick: handlePlayVideo })),
+        React.createElement(Text, { className: styles.description, tag: 'div', view: 'component', color: 'static-primary-light' }, image?.name),
+        mutedVideo ? (React.createElement(UnmuteVideo, { onClick: handleMuteVideo })) : (React.createElement(MuteVideo, { onClick: handleMuteVideo })))) : (React.createElement("section", { className: styles.infoWrapper },
+        React.createElement(Text, { className: styles.description, tag: 'div', view: 'component', color: 'static-primary-light' }, image?.name)));
 };
 
 export { InfoBar };