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

package/gallery/esm/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/esm/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/esm/components/image-viewer/video/index.js

@@ -2,24 +2,18 @@ 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/esm';
-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';
 
-var styles = {"videoWrapper":"gallery__videoWrapper_1kmz9","video":"gallery__video_1kmz9","mobile":"gallery__mobile_1kmz9","videoButton":"gallery__videoButton_1kmz9","videoButtonIcon":"gallery__videoButtonIcon_1kmz9"};
+var styles = {"videoWrapper":"gallery__videoWrapper_1kmz9","video":"gallery__video_1kmz9","mobile":"gallery__mobile_1kmz9","videoButton":"gallery__videoButton_1kmz9"};
 require('./index.css');
 
 var Video = function (_a) {
     var _b;
-    var url = _a.url, index = _a.index, className = _a.className;
+    var url = _a.url, index = _a.index, className = _a.className, isActive = _a.isActive;
     var playerRef = useRef(null);
     var _c = useContext(GalleryContext), setImageMeta = _c.setImageMeta, mutedVideo = _c.mutedVideo, view = _c.view, playingVideo = _c.playingVideo, setPlayingVideo = _c.setPlayingVideo, setHideNavigation = _c.setHideNavigation;
-    useEffect(function () {
-        if (playerRef.current) {
-            playerRef.current.muted = mutedVideo;
-        }
-    }, [mutedVideo]);
     useEffect(function () {
         setImageMeta({ player: playerRef }, index);
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
@@ -35,9 +29,6 @@ var Video = function (_a) {
                 hls.attachMedia(playerRef.current);
             }
         }
-        else if (playerRef.current) {
-            playerRef.current.src = url;
-        }
         return function () {
             if (hls) {
                 hls.destroy();
@@ -45,15 +36,13 @@ var Video = function (_a) {
         };
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [url, index]);
-    var handleClick = function (event) {
-        event.stopPropagation();
-        setPlayingVideo(!playingVideo);
-    };
-    var handleWrapperClick = function () {
+    var handleWrapperClick = function (e) {
+        e.stopPropagation();
         setHideNavigation(false);
+        setPlayingVideo(!playingVideo);
     };
     useEffect(function () {
-        if (playerRef.current) {
+        if (playerRef.current && isActive) {
             if (playingVideo) {
                 playerRef.current.play();
             }
@@ -61,14 +50,31 @@ var Video = function (_a) {
                 playerRef.current.pause();
             }
         }
-    }, [playingVideo]);
+        if (playerRef.current && !isActive) {
+            playerRef.current.pause();
+            playerRef.current.currentTime = 0;
+        }
+    }, [isActive, playingVideo]);
+    var onPlay = function (e) {
+        var customEvent = new CustomEvent(GALLERY_EVENTS.ON_PLAY, {
+            detail: { player: e.target },
+        });
+        dispatchEvent(customEvent);
+    };
+    var onPause = function (e) {
+        var 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, (_b = {}, _b[styles.mobile] = view === 'mobile', _b), className) },
+        React.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, src: Hls.isSupported() ? undefined : url, className: cn(styles.video, (_b = {}, _b[styles.mobile] = view === 'mobile', _b), 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/esm/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/esm/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';
@@ -30,10 +32,9 @@ import 'swiper';
 import 'swiper/react';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import '../slide-ca7119fa.js';
+import '../slide-da05984b.js';
 import './image-viewer/paths.js';
 import './image-viewer/video/index.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
-import '../../../button/esm';
 import 'swiper/swiper.min.css';

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

@@ -1,13 +1,11 @@
 import React, { useContext, useCallback } from 'react';
-import 'classnames';
-import '../../../../base-modal/esm';
-import '@alfalab/hooks';
 import { Typography } from '../../../../typography/esm';
 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 'tslib';
+import 'classnames';
 import '../../../../icon-button/esm';
 import '../../../../tooltip/esm/desktop';
 import '@alfalab/icons-glyph/ArrowLeftMIcon';
@@ -19,29 +17,30 @@ 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-ca7119fa.js';
-import '../image-viewer/paths.js';
-import '../image-viewer/video/index.js';
-import 'hls.js';
-import '@alfalab/core-components/icon-view/circle';
-import '../../../../button/esm';
-import 'swiper/swiper.min.css';
 
 var styles = {"description":"gallery__description_elo98","videoButtons":"gallery__videoButtons_elo98","center":"gallery__center_elo98","right":"gallery__right_elo98"};
 require('./index.css');
 
 var InfoBar = function () {
-    var _a = useContext(GalleryContext), getCurrentImage = _a.getCurrentImage, mutedVideo = _a.mutedVideo, setMutedVideo = _a.setMutedVideo, playingVideo = _a.playingVideo, setPlayingVideo = _a.setPlayingVideo;
+    var _a = useContext(GalleryContext), getCurrentImage = _a.getCurrentImage, mutedVideo = _a.mutedVideo, setMutedVideo = _a.setMutedVideo, playingVideo = _a.playingVideo, setPlayingVideo = _a.setPlayingVideo, getCurrentImageMeta = _a.getCurrentImageMeta;
     var image = getCurrentImage();
+    var meta = getCurrentImageMeta();
     var handleMuteVideo = useCallback(function () {
+        var _a, _b;
+        if (mutedVideo) {
+            var customEvent = new CustomEvent(GALLERY_EVENTS.ON_UNMUTE, {
+                detail: { player: (_a = meta === null || meta === void 0 ? void 0 : meta.player) === null || _a === void 0 ? void 0 : _a.current },
+            });
+            dispatchEvent(customEvent);
+        }
+        else {
+            var customEvent = new CustomEvent(GALLERY_EVENTS.ON_MUTE, {
+                detail: { player: (_b = meta === null || meta === void 0 ? void 0 : meta.player) === null || _b === void 0 ? void 0 : _b.current },
+            });
+            dispatchEvent(customEvent);
+        }
         setMutedVideo(!mutedVideo);
-    }, [mutedVideo, setMutedVideo]);
+    }, [meta === null || meta === void 0 ? void 0 : meta.player, mutedVideo, setMutedVideo]);
     var handlePlayVideo = useCallback(function () {
         setPlayingVideo(!playingVideo);
     }, [playingVideo, setPlayingVideo]);

package/gallery/esm/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/esm/components/info-bar/index.d.ts

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

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

@@ -1 +1,20 @@
-
+export { InfoBar } from './Component.js';
+import 'react';
+import '../../../../typography/esm';
+import '../../context.js';
+import '../../utils/utils.js';
+import '../../utils/constants.js';
+import '../buttons/index.js';
+import 'tslib';
+import 'classnames';
+import '../../../../icon-button/esm';
+import '../../../../tooltip/esm/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/esm/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');
 var MIN_SCROLL_STEP = 24;
 var NavigationBar = function () {
     var containerRef = useRef(null);
-    var _a = useContext(GalleryContext), images = _a.images, currentSlideIndex = _a.currentSlideIndex, setCurrentSlideIndex = _a.setCurrentSlideIndex, getSwiper = _a.getSwiper;
+    var _a = useContext(GalleryContext), images = _a.images, currentSlideIndex = _a.currentSlideIndex, setCurrentSlideIndex = _a.setCurrentSlideIndex, getSwiper = _a.getSwiper, setPlayingVideo = _a.setPlayingVideo;
     var swiper = getSwiper();
     var handlePreviewSelect = function (index) {
         setCurrentSlideIndex === null || setCurrentSlideIndex === void 0 ? void 0 : setCurrentSlideIndex(index);
         if (swiper) {
+            setPlayingVideo(true);
             swiper.slideTo(index);
         }
     };
@@ -59,7 +60,7 @@ var NavigationBar = function () {
     // 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(function (image, index) {
         var 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/esm/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/esm/index.d.ts

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

package/gallery/esm/index.js

@@ -1,14 +1,15 @@
 export { Gallery } from './Component.js';
-export { splitFilename } from './utils/split-filename.js';
-export { PLACEHOLDER_HEIGHT, PLACEHOLDER_WIDTH, getImageAlt, getImageKey, isSmallImage, isVideo } from './utils/utils.js';
-export { TestIds } from './utils/constants.js';
+export { GALLERY_EVENTS, TestIds } from './utils/constants.js';
 import 'react';
 import 'classnames';
 import '../../base-modal/esm';
 import '@alfalab/hooks';
-import './components/header-mobile/Component.js';
-import '../../typography/esm';
+import './components/navigation-bar/Component.js';
 import './context.js';
+import './utils/utils.js';
+import './components/image-preview/Component.js';
+import './components/image-preview/paths.js';
+import './components/header/Component.js';
 import './components/buttons/index.js';
 import 'tslib';
 import '../../icon-button/esm';
@@ -22,22 +23,20 @@ import '@alfalab/icons-glyph/PlayCompactMIcon';
 import '@alfalab/icons-glyph/PointerDownMIcon';
 import '@alfalab/icons-glyph/SoundCrossMIcon';
 import '@alfalab/icons-glyph/SoundMIcon';
+import './components/header-info-block/Component.js';
+import '../../typography/esm';
+import './utils/split-filename.js';
 import './components/image-viewer/component.js';
 import 'element-closest';
 import 'swiper';
 import 'swiper/react';
 import '@alfalab/icons-glyph/ChevronBackHeavyMIcon';
 import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
-import './slide-ca7119fa.js';
+import './slide-da05984b.js';
 import './components/image-viewer/paths.js';
 import './components/image-viewer/video/index.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
-import '../../button/esm';
 import 'swiper/swiper.min.css';
 import './components/info-bar/Component.js';
-import './components/navigation-bar/Component.js';
-import './components/image-preview/Component.js';
-import './components/image-preview/paths.js';
-import './components/header/Component.js';
-import './components/header-info-block/Component.js';
+import './components/header-mobile/Component.js';

package/gallery/esm/{slide-ca7119fa.js → slide-da05984b.js}

@@ -8,8 +8,6 @@ import { NoImagePaths } from './components/image-viewer/paths.js';
 import { Video } from './components/image-viewer/video/index.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
-import '../../button/esm';
-import '@alfalab/icons-glyph/PauseCompactMIcon';
 import '@alfalab/icons-glyph/PlayCompactMIcon';
 
 var styles = {"component":"gallery__component_1rc6z","swiper":"gallery__swiper_1rc6z","mobile":"gallery__mobile_1rc6z","mobileVideo":"gallery__mobileVideo_1rc6z","singleSlide":"gallery__singleSlide_1rc6z","hidden":"gallery__hidden_1rc6z","slide":"gallery__slide_1rc6z","slideLoading":"gallery__slideLoading_1rc6z","image":"gallery__image_1rc6z","smallImage":"gallery__smallImage_1rc6z","verticalImageFit":"gallery__verticalImageFit_1rc6z","horizontalImageFit":"gallery__horizontalImageFit_1rc6z","arrow":"gallery__arrow_1rc6z","focused":"gallery__focused_1rc6z","placeholder":"gallery__placeholder_1rc6z","brokenImgWrapper":"gallery__brokenImgWrapper_1rc6z","brokenImgIcon":"gallery__brokenImgIcon_1rc6z","fullScreenImage":"gallery__fullScreenImage_1rc6z","fullScreenVideo":"gallery__fullScreenVideo_1rc6z"};
@@ -39,7 +37,7 @@ var Slide = function (_a) {
     var horizontalImageFit = !small && swiperAspectRatio <= imageAspectRatio;
     if (isVideo(image.src)) {
         return (React.createElement(SlideInner, { isVideoView: true, active: isActive, broken: broken, withPlaceholder: broken, loading: !meta },
-            React.createElement(Video, { url: image.src, index: index })));
+            React.createElement(Video, { url: image.src, index: index, isActive: isActive })));
     }
     return (React.createElement(SlideInner, { active: isActive, broken: broken, loading: !meta, withPlaceholder: small || broken },
         React.createElement("img", { src: image.src, alt: getImageAlt(image, index), className: cn((_b = {},

package/gallery/esm/utils/constants.d.ts

@@ -10,4 +10,15 @@ declare const TestIds: {
     MUTE_BUTTON: string;
     UNMUTE_BUTTON: string;
 };
-export { TestIds };
+declare const PREVIEW_WIDTH_MOBILE = 36;
+declare const PREVIEW_HEIGHT_MOBILE = 46;
+declare const PREVIEW_WIDTH_DESKTOP = 56;
+declare const PREVIEW_HEIGHT_DESKTOP = 56;
+declare const PREVIEW_VIDEO_MULTIPLIER = 12;
+declare const GALLERY_EVENTS: {
+    ON_PLAY: string;
+    ON_PAUSE: string;
+    ON_MUTE: string;
+    ON_UNMUTE: string;
+};
+export { TestIds, PREVIEW_WIDTH_MOBILE, PREVIEW_HEIGHT_MOBILE, PREVIEW_WIDTH_DESKTOP, PREVIEW_HEIGHT_DESKTOP, PREVIEW_VIDEO_MULTIPLIER, GALLERY_EVENTS };

package/gallery/esm/utils/constants.js

@@ -10,5 +10,16 @@ var TestIds = {
     MUTE_BUTTON: 'mute-button',
     UNMUTE_BUTTON: 'unmute-button',
 };
+var PREVIEW_WIDTH_MOBILE = 36;
+var PREVIEW_HEIGHT_MOBILE = 46;
+var PREVIEW_WIDTH_DESKTOP = 56;
+var PREVIEW_HEIGHT_DESKTOP = 56;
+var PREVIEW_VIDEO_MULTIPLIER = 12;
+var GALLERY_EVENTS = {
+    ON_PLAY: 'Gallery:OnPlay',
+    ON_PAUSE: 'Gallery:OnPause',
+    ON_MUTE: 'Gallery:OnMute',
+    ON_UNMUTE: 'Gallery:OnUnmute',
+};
 
-export { TestIds };
+export { GALLERY_EVENTS, PREVIEW_HEIGHT_DESKTOP, PREVIEW_HEIGHT_MOBILE, PREVIEW_VIDEO_MULTIPLIER, PREVIEW_WIDTH_DESKTOP, PREVIEW_WIDTH_MOBILE, TestIds };

package/gallery/esm/utils/index.js

@@ -1,3 +1,3 @@
 export { splitFilename } from './split-filename.js';
 export { PLACEHOLDER_HEIGHT, PLACEHOLDER_WIDTH, getImageAlt, getImageKey, isSmallImage, isVideo } from './utils.js';
-export { TestIds } from './constants.js';
+export { GALLERY_EVENTS, PREVIEW_HEIGHT_DESKTOP, PREVIEW_HEIGHT_MOBILE, PREVIEW_VIDEO_MULTIPLIER, PREVIEW_WIDTH_DESKTOP, PREVIEW_WIDTH_MOBILE, TestIds } from './constants.js';

package/gallery/index.d.ts

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

package/gallery/index.js

@@ -1,18 +1,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
-var utils_splitFilename = require('./utils/split-filename.js');
-var utils_utils = require('./utils/utils.js');
 var utils_constants = require('./utils/constants.js');
 
 
 
 exports.Gallery = Component.Gallery;
-exports.splitFilename = utils_splitFilename.splitFilename;
-exports.PLACEHOLDER_HEIGHT = utils_utils.PLACEHOLDER_HEIGHT;
-exports.PLACEHOLDER_WIDTH = utils_utils.PLACEHOLDER_WIDTH;
-exports.getImageAlt = utils_utils.getImageAlt;
-exports.getImageKey = utils_utils.getImageKey;
-exports.isSmallImage = utils_utils.isSmallImage;
-exports.isVideo = utils_utils.isVideo;
+exports.GALLERY_EVENTS = utils_constants.GALLERY_EVENTS;
 exports.TestIds = utils_constants.TestIds;

package/gallery/modern/Component.js

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

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 } from '../../utils/constants.js';
+import { TestIds, GALLERY_EVENTS } 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';
@@ -28,6 +28,18 @@ 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);
+        }
         setMutedVideo(!mutedVideo);
     };
     const closeFullScreen = () => {