@alfalab/core-components 47.12.1-beta.1 → 47.13.0-beta.0

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

@@ -1,13 +1,10 @@
 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 { BackArrow, Download } from '../buttons/index.js';
 import '../../../../icon-button/modern';
 import '../../../../tooltip/modern/desktop';
 import '@alfalab/icons-glyph/ArrowLeftMIcon';
@@ -19,27 +16,15 @@ 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 { onClose, images, currentSlideIndex, getCurrentImage, getCurrentImageMeta, hideNavigation, } = useContext(GalleryContext);
     const currentImage = getCurrentImage();
     const meta = getCurrentImageMeta();
-    const description = singleSlide || !images.length ? '' : `${currentSlideIndex + 1} из ${images.length}`;
+    const description = images.length > 1 && `${currentSlideIndex + 1} из ${images.length}`;
     const canDownload = currentImage?.canDownload ?? true;
     const showDownloadButton = !meta?.broken && canDownload;
     return (React.createElement("div", { className: cn(styles.headerMobile, {

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

@@ -1 +1 @@
-export {};
+export { HeaderMobile } from "./Component";

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

@@ -1 +1,19 @@
-
+export { HeaderMobile } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../../../typography/modern';
+import '../../context.js';
+import '../../utils/utils.js';
+import '../../utils/constants.js';
+import '../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';

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

@@ -3,6 +3,7 @@ import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
 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';
 
 const styles = {"component":"gallery__component_1917k","image":"gallery__image_1917k","mobile":"gallery__mobile_1917k","active":"gallery__active_1917k","preview":"gallery__preview_1917k","loading":"gallery__loading_1917k","brokenImageWrapper":"gallery__brokenImageWrapper_1917k","brokenIcon":"gallery__brokenIcon_1917k","focused":"gallery__focused_1917k","canvasPreview":"gallery__canvasPreview_1917k"};
@@ -11,8 +12,8 @@ require('./index.css');
 const ImagePreview = ({ image, active = false, index, onSelect, className }) => {
     const { imagesMeta, view } = useContext(GalleryContext);
     const isMobile = view === 'mobile';
-    const previewWidth = isMobile ? 36 : 56;
-    const previewHeight = isMobile ? 46 : 56;
+    const previewWidth = isMobile ? PREVIEW_WIDTH_MOBILE : PREVIEW_WIDTH_DESKTOP;
+    const previewHeight = isMobile ? PREVIEW_HEIGHT_MOBILE : PREVIEW_HEIGHT_DESKTOP;
     const ref = useRef(null);
     const canvasRef = useRef(null);
     useEffect(() => {
@@ -21,7 +22,7 @@ const ImagePreview = ({ image, active = false, index, onSelect, className }) =>
         const context = canvas?.getContext('2d');
         const drawPreview = () => {
             if (video) {
-                context?.drawImage(video, 0, 0, video.videoWidth / 12, video.videoHeight / 12);
+                context?.drawImage(video, 0, 0, video.videoWidth / PREVIEW_VIDEO_MULTIPLIER, video.videoHeight / PREVIEW_VIDEO_MULTIPLIER);
             }
         };
         drawPreview();
@@ -45,17 +46,42 @@ const ImagePreview = ({ image, active = false, index, onSelect, className }) =>
     const [focused] = useFocus(ref, 'keyboard');
     const meta = imagesMeta[index];
     const isBroken = Boolean(meta?.broken);
-    return (React.createElement("div", { className: cn(styles.component, { [styles.active]: active, [styles.focused]: focused, [styles.mobile]: isMobile }, className), onClick: handleClick, role: 'button', onKeyDown: handleKeyDown, tabIndex: 0, ref: ref, "aria-label": `Перейти к ${index + 1} элементу` }, isBroken ? (React.createElement("div", { className: cn(styles.preview, { [styles.mobile]: isMobile, [styles.active]: active }, styles.brokenImageWrapper) },
-        React.createElement("div", { className: cn(styles.brokenIcon) },
-            React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: previewWidth, height: previewHeight, viewBox: `${isMobile ? -6 : 0} ${isMobile ? -12 : 0} ${previewWidth} ${previewHeight}`, fill: 'none' },
-                React.createElement("rect", { fill: 'none' }),
-                React.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: isMobile ? NoImagePaths.mobileImage : NoImagePaths.baseImage, fill: '#89898A' }),
-                React.createElement("path", { d: isMobile
-                        ? NoImagePaths.mobileTriangle
-                        : NoImagePaths.triangleImage, fill: '#89898A' }))))) : (React.createElement("div", { className: cn(styles.preview, styles.image, {
-            [styles.loading]: !meta,
+    const renderPreview = () => {
+        if (isBroken) {
+            return (React.createElement("div", { className: cn(styles.preview, { [styles.mobile]: isMobile, [styles.active]: active }, styles.brokenImageWrapper) },
+                React.createElement("div", { className: cn(styles.brokenIcon) },
+                    React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: previewWidth, height: previewHeight, viewBox: `${isMobile ? -6 : 0} ${isMobile ? -12 : 0} ${previewWidth} ${previewHeight}`, fill: 'none' },
+                        React.createElement("rect", { fill: 'none' }),
+                        React.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: isMobile ? NoImagePaths.mobileImage : NoImagePaths.baseImage, fill: '#89898A' }),
+                        React.createElement("path", { d: isMobile
+                                ? NoImagePaths.mobileTriangle
+                                : NoImagePaths.triangleImage, fill: '#89898A' })))));
+        }
+        if (image.previewSrc) {
+            return (React.createElement("div", { className: cn(styles.preview, styles.image, {
+                    [styles.loading]: !meta,
+                    [styles.mobile]: isMobile,
+                }) },
+                React.createElement("img", { src: image.previewSrc, alt: getImageAlt(image, index) })));
+        }
+        if (isVideo(image.src)) {
+            return (React.createElement("div", { className: cn(styles.preview, styles.image, {
+                    [styles.loading]: !meta,
+                    [styles.mobile]: isMobile,
+                }) },
+                React.createElement("canvas", { className: cn(styles.canvasPreview, { [styles.mobile]: isMobile }), "data-testid": 'canvas', width: previewWidth, height: previewHeight, ref: canvasRef })));
+        }
+        return (React.createElement("div", { className: cn(styles.preview, styles.image, {
+                [styles.loading]: !meta,
+                [styles.mobile]: isMobile,
+            }) },
+            React.createElement("img", { src: image.src, alt: getImageAlt(image, index) })));
+    };
+    return (React.createElement("div", { className: cn(styles.component, {
+            [styles.active]: active,
+            [styles.focused]: focused,
             [styles.mobile]: isMobile,
-        }) }, isVideo(image.src) ? (React.createElement("canvas", { className: cn(styles.canvasPreview, { [styles.mobile]: isMobile }), "data-testid": 'canvas', width: previewWidth, height: previewHeight, ref: canvasRef })) : (React.createElement("img", { src: image.src, alt: getImageAlt(image, index) }))))));
+        }, className), onClick: handleClick, role: 'button', onKeyDown: handleKeyDown, tabIndex: 0, ref: ref, "aria-label": `Перейти к ${index + 1} элементу` }, renderPreview()));
 };
 
 export { ImagePreview };

package/gallery/modern/components/image-preview/index.css

@@ -1,7 +1,6 @@
 /* hash: 182cu */
 :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-light-base-bg-primary: #fff;
     --color-light-status-info: #2288fa;
     --color-static-neutral-100-inverted: #1c1c1e;
     --color-static-neutral-300-inverted: #29292c; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -56,7 +55,6 @@
     transition: opacity 0.15s ease-in-out
 } .gallery__image_1917k > img {
         display: block;
-        background-color: var(--color-light-base-bg-primary);
         width: 100%;
         height: 100%;
         border-radius: inherit;

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

@@ -4,4 +4,5 @@ import 'classnames';
 import '@alfalab/hooks';
 import '../../context.js';
 import '../../utils/utils.js';
+import '../../utils/constants.js';
 import './paths.js';

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

@@ -9,15 +9,13 @@ import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHea
 import { GalleryContext } from '../../context.js';
 import { isVideo, getImageAlt, getImageKey } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
-import { s as styles, S as Slide } from '../../slide-e2bd02f9.js';
+import { s as styles, S as Slide } from '../../slide-dac6462d.js';
 import 'swiper/swiper.min.css';
 import '../../../../typography/modern';
 import './paths.js';
 import './video/index.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
-import '../../../../button/modern';
-import '@alfalab/icons-glyph/PauseCompactMIcon';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 
 SwiperCore.use([EffectFade, A11y, Controller]);
@@ -78,7 +76,7 @@ const ImageViewer = () => {
         },
         className: cn(styles.swiper, {
             [styles.hidden]: fullScreen && !isVideo(currentImage?.src),
-            [styles.fullScreenVideo]: fullScreen && isVideo(currentImage?.src),
+            [styles.fullScreenVideo]: fullScreen && !singleSlide && isVideo(currentImage?.src),
             [styles.mobile]: isMobile,
             [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
         }),
@@ -93,6 +91,7 @@ const ImageViewer = () => {
     }), [
         fullScreen,
         currentImage?.src,
+        singleSlide,
         isMobile,
         swiper,
         initialSlide,

package/gallery/modern/components/image-viewer/index.css

@@ -74,7 +74,6 @@
     height: 0;
     -webkit-user-select: none;
             user-select: none;
-    background-color: var(--color-light-base-bg-primary);
     border-radius: var(--border-radius-m)
 } .gallery__image_1rc6z.gallery__mobile_1rc6z {
         border-radius: 0;
@@ -84,7 +83,6 @@
     height: auto;
     -webkit-user-select: none;
             user-select: none;
-    background-color: var(--color-light-base-bg-primary);
 } .gallery__verticalImageFit_1rc6z {
     width: auto;
     height: 100%;

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

@@ -10,13 +10,11 @@ import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import '../../context.js';
 import '../../utils/utils.js';
 import '../../utils/constants.js';
-import '../../slide-e2bd02f9.js';
+import '../../slide-dac6462d.js';
 import '../../../../typography/modern';
 import './paths.js';
 import './video/index.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
-import '../../../../button/modern';
-import '@alfalab/icons-glyph/PauseCompactMIcon';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 import 'swiper/swiper.min.css';

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

@@ -3,12 +3,10 @@ import 'classnames';
 import '../../../../typography/modern';
 import '../../context.js';
 import './video/index.js';
-export { S as Slide } from '../../slide-e2bd02f9.js';
+export { S as Slide } from '../../slide-dac6462d.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
-import '../../../../button/modern';
-import '@alfalab/icons-glyph/PauseCompactMIcon';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
-import '../../utils/utils.js';
 import '../../utils/constants.js';
+import '../../utils/utils.js';
 import './paths.js';

package/gallery/modern/components/image-viewer/video/index.css

@@ -10,10 +10,10 @@
     /* Up */
 
     /* Hard up */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
-    --border-radius-3xl: 24px; /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --border-radius-24: 24px;
 } :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 */
 
     /* новые значения, используйте их */
@@ -28,14 +28,14 @@
 } .gallery__video_1kmz9 {
     max-width: 100%;
     max-height: 100%;
-    border-radius: var(--border-radius-3xl);
+    border-radius: var(--border-radius-24);
 } .gallery__mobile_1kmz9 {
     border-radius: 0;
 } .gallery__videoButton_1kmz9 {
+
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1;
-} .gallery__videoButtonIcon_1kmz9 {
 }

package/gallery/modern/components/image-viewer/video/index.d.ts

@@ -3,7 +3,8 @@ import React from 'react';
 type Props = {
     url: string;
     index: number;
+    isActive: boolean;
     className?: string;
 };
-declare const Video: ({ url, index, className }: Props) => React.JSX.Element;
+declare const Video: ({ url, index, className, isActive }: Props) => React.JSX.Element;
 export { Video };

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

@@ -2,22 +2,16 @@ import React, { useRef, useContext, useEffect } from 'react';
 import cn from 'classnames';
 import Hls from 'hls.js';
 import { Circle } from '@alfalab/core-components/icon-view/circle';
-import { Button } from '../../../../../button/modern';
-import PauseCompactMIcon from '@alfalab/icons-glyph/PauseCompactMIcon';
 import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';
 import { GalleryContext } from '../../../context.js';
+import { GALLERY_EVENTS } from '../../../utils/constants.js';
 
-const styles = {"videoWrapper":"gallery__videoWrapper_1kmz9","video":"gallery__video_1kmz9","mobile":"gallery__mobile_1kmz9","videoButton":"gallery__videoButton_1kmz9","videoButtonIcon":"gallery__videoButtonIcon_1kmz9"};
+const styles = {"videoWrapper":"gallery__videoWrapper_1kmz9","video":"gallery__video_1kmz9","mobile":"gallery__mobile_1kmz9","videoButton":"gallery__videoButton_1kmz9"};
 require('./index.css');
 
-const Video = ({ url, index, className }) => {
+const Video = ({ url, index, className, isActive }) => {
     const playerRef = useRef(null);
     const { setImageMeta, mutedVideo, view, playingVideo, setPlayingVideo, setHideNavigation } = useContext(GalleryContext);
-    useEffect(() => {
-        if (playerRef.current) {
-            playerRef.current.muted = mutedVideo;
-        }
-    }, [mutedVideo]);
     useEffect(() => {
         setImageMeta({ player: playerRef }, index);
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
@@ -33,9 +27,6 @@ const Video = ({ url, index, className }) => {
                 hls.attachMedia(playerRef.current);
             }
         }
-        else if (playerRef.current) {
-            playerRef.current.src = url;
-        }
         return () => {
             if (hls) {
                 hls.destroy();
@@ -43,15 +34,13 @@ const Video = ({ url, index, className }) => {
         };
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [url, index]);
-    const handleClick = (event) => {
-        event.stopPropagation();
-        setPlayingVideo(!playingVideo);
-    };
-    const handleWrapperClick = () => {
+    const handleWrapperClick = (e) => {
+        e.stopPropagation();
         setHideNavigation(false);
+        setPlayingVideo(!playingVideo);
     };
     useEffect(() => {
-        if (playerRef.current) {
+        if (playerRef.current && isActive) {
             if (playingVideo) {
                 playerRef.current.play();
             }
@@ -59,14 +48,31 @@ const Video = ({ url, index, className }) => {
                 playerRef.current.pause();
             }
         }
-    }, [playingVideo]);
+        if (playerRef.current && !isActive) {
+            playerRef.current.pause();
+            playerRef.current.currentTime = 0;
+        }
+    }, [isActive, playingVideo]);
+    const onPlay = (e) => {
+        const customEvent = new CustomEvent(GALLERY_EVENTS.ON_PLAY, {
+            detail: { player: e.target },
+        });
+        dispatchEvent(customEvent);
+    };
+    const onPause = (e) => {
+        const customEvent = new CustomEvent(GALLERY_EVENTS.ON_PAUSE, {
+            detail: { player: e.target },
+        });
+        dispatchEvent(customEvent);
+    };
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React.createElement("div", { onClick: handleWrapperClick, className: styles.videoWrapper },
-        React.createElement("video", { ref: playerRef, className: cn(styles.video, { [styles.mobile]: view === 'mobile' }, className) },
+        React.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, src: Hls.isSupported() ? undefined : url, className: cn(styles.video, { [styles.mobile]: view === 'mobile' }, className) },
             React.createElement("track", { kind: 'captions' })),
-        view === 'desktop' && (React.createElement(Button, { className: styles.videoButton, view: 'text', onClick: handleClick },
-            React.createElement(Circle, { className: styles.videoButtonIcon, size: 64 }, playingVideo ? React.createElement(PauseCompactMIcon, null) : React.createElement(PlayCompactMIcon, null))))));
+        view === 'desktop' && !playingVideo && (React.createElement("div", { className: styles.videoButton },
+            React.createElement(Circle, { size: 64 },
+                React.createElement(PlayCompactMIcon, null))))));
 };
 
 export { Video };

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

@@ -2,3 +2,5 @@ export * from "./navigation-bar/index";
 export * from "./header/index";
 export * from "./image-preview/index";
 export * from "./image-viewer/index";
+export * from "./info-bar/index";
+export * from "./header-mobile/index";

package/gallery/modern/components/index.js

@@ -2,11 +2,13 @@ export { NavigationBar } from './navigation-bar/Component.js';
 export { Header } from './header/Component.js';
 export { ImagePreview } from './image-preview/Component.js';
 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 '../context.js';
 import '../utils/utils.js';
 import '../utils/constants.js';
+import 'classnames';
 import '@alfalab/hooks';
 import './image-preview/paths.js';
 import './buttons/index.js';
@@ -29,10 +31,9 @@ import 'swiper';
 import 'swiper/react';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import '../slide-e2bd02f9.js';
+import '../slide-dac6462d.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';

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

@@ -1,12 +1,10 @@
 import React, { useContext, useCallback } from 'react';
-import 'classnames';
-import '../../../../base-modal/modern';
-import '@alfalab/hooks';
 import { Typography } from '../../../../typography/modern';
 import { GalleryContext } from '../../context.js';
-import { Pause, Play, UnmuteVideo, MuteVideo } from '../buttons/index.js';
 import { isVideo } from '../../utils/utils.js';
-import '../image-viewer/component.js';
+import { GALLERY_EVENTS } from '../../utils/constants.js';
+import { Pause, Play, UnmuteVideo, MuteVideo } from '../buttons/index.js';
+import 'classnames';
 import '../../../../icon-button/modern';
 import '../../../../tooltip/modern/desktop';
 import '@alfalab/icons-glyph/ArrowLeftMIcon';
@@ -18,29 +16,29 @@ 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 '../../utils/constants.js';
-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 = {"description":"gallery__description_elo98","videoButtons":"gallery__videoButtons_elo98","center":"gallery__center_elo98","right":"gallery__right_elo98"};
 require('./index.css');
 
 const InfoBar = () => {
-    const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo } = useContext(GalleryContext);
+    const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo, getCurrentImageMeta, } = 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);
+        }
         setMutedVideo(!mutedVideo);
-    }, [mutedVideo, setMutedVideo]);
+    }, [meta?.player, mutedVideo, setMutedVideo]);
     const handlePlayVideo = useCallback(() => {
         setPlayingVideo(!playingVideo);
     }, [playingVideo, setPlayingVideo]);

package/gallery/modern/components/info-bar/index.css

@@ -13,17 +13,17 @@
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
-} :root { /* deprecated */ /* deprecated */
-    --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
 
     /* новые значения, используйте их */
+    --gap-8: 8px;
 } :root {
 } :root {
 } .gallery__description_elo98 {
     text-align: center;
-    margin-bottom: var(--gap-xs);
+    margin-bottom: var(--gap-8);
 } .gallery__videoButtons_elo98 {
-    padding: 0 var(--gap-xs);
+    padding: 0 var(--gap-8);
     position: relative;
     height: 48px;
 } .gallery__center_elo98 {

package/gallery/modern/components/info-bar/index.d.ts

@@ -1 +1 @@
-export {};
+export { InfoBar } from "./Component";

package/gallery/modern/components/info-bar/index.js

@@ -1 +1,19 @@
-
+export { InfoBar } from './Component.js';
+import 'react';
+import '../../../../typography/modern';
+import '../../context.js';
+import '../../utils/utils.js';
+import '../../utils/constants.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';

package/gallery/modern/components/navigation-bar/Component.js

@@ -1,9 +1,9 @@
 import React, { useRef, useContext, useCallback, useEffect } from 'react';
-import cn from 'classnames';
 import { GalleryContext } from '../../context.js';
 import { getImageKey } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
 import { ImagePreview } from '../image-preview/Component.js';
+import 'classnames';
 import '@alfalab/hooks';
 import '../image-preview/paths.js';
 
@@ -13,11 +13,12 @@ require('./index.css');
 const MIN_SCROLL_STEP = 24;
 const NavigationBar = () => {
     const containerRef = useRef(null);
-    const { images, currentSlideIndex, setCurrentSlideIndex, getSwiper } = useContext(GalleryContext);
+    const { images, currentSlideIndex, setCurrentSlideIndex, getSwiper, setPlayingVideo } = useContext(GalleryContext);
     const swiper = getSwiper();
     const handlePreviewSelect = (index) => {
         setCurrentSlideIndex?.(index);
         if (swiper) {
+            setPlayingVideo(true);
             swiper.slideTo(index);
         }
     };
@@ -59,7 +60,7 @@ const NavigationBar = () => {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React.createElement("div", { className: styles.component, ref: containerRef, onKeyDown: handleKeyDown, "data-test-id": TestIds.NAVIGATION_BAR }, images.map((image, index) => {
         const active = index === currentSlideIndex;
-        return (React.createElement(ImagePreview, { key: getImageKey(image, index), image: image, active: active, index: index, onSelect: handlePreviewSelect, className: cn(styles.preview) }));
+        return (React.createElement(ImagePreview, { key: getImageKey(image, index), image: image, active: active, index: index, onSelect: handlePreviewSelect, className: styles.preview }));
     })));
 };
 

package/gallery/modern/components/navigation-bar/index.js

@@ -1,9 +1,9 @@
 export { NavigationBar } from './Component.js';
 import 'react';
-import 'classnames';
 import '../../context.js';
 import '../../utils/utils.js';
 import '../../utils/constants.js';
 import '../image-preview/Component.js';
+import 'classnames';
 import '@alfalab/hooks';
 import '../image-preview/paths.js';

package/gallery/modern/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./Component";
-export * from "./utils/index";
+export { GALLERY_EVENTS, TestIds } from "./utils/index";