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

package/gallery/cssm/components/info-bar/index.module.css

@@ -12,17 +12,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 {
 } .description {
     text-align: center;
-    margin-bottom: var(--gap-xs);
+    margin-bottom: var(--gap-8);
 } .videoButtons {
-    padding: 0 var(--gap-xs);
+    padding: 0 var(--gap-8);
     position: relative;
     height: 48px;
 } .center {

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

@@ -1,7 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var cn = require('classnames');
 var context = require('../../context.js');
 var utils_utils = require('../../utils/utils.js');
 var utils_constants = require('../../utils/constants.js');
@@ -11,17 +10,17 @@ var styles = require('./index.module.css');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var MIN_SCROLL_STEP = 24;
 var NavigationBar = function () {
     var containerRef = React.useRef(null);
-    var _a = React.useContext(context.GalleryContext), images = _a.images, currentSlideIndex = _a.currentSlideIndex, setCurrentSlideIndex = _a.setCurrentSlideIndex, getSwiper = _a.getSwiper;
+    var _a = React.useContext(context.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);
         }
     };
@@ -63,7 +62,7 @@ var NavigationBar = function () {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default.default.createElement("div", { className: styles__default.default.component, ref: containerRef, onKeyDown: handleKeyDown, "data-test-id": utils_constants.TestIds.NAVIGATION_BAR }, images.map(function (image, index) {
         var active = index === currentSlideIndex;
-        return (React__default.default.createElement(components_imagePreview_Component.ImagePreview, { key: utils_utils.getImageKey(image, index), image: image, active: active, index: index, onSelect: handlePreviewSelect, className: cn__default.default(styles__default.default.preview) }));
+        return (React__default.default.createElement(components_imagePreview_Component.ImagePreview, { key: utils_utils.getImageKey(image, index), image: image, active: active, index: index, onSelect: handlePreviewSelect, className: styles__default.default.preview }));
     })));
 };
 

package/gallery/cssm/index.d.ts

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

package/gallery/cssm/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/cssm/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/cssm/utils/constants.js

@@ -12,5 +12,22 @@ 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',
+};
 
+exports.GALLERY_EVENTS = GALLERY_EVENTS;
+exports.PREVIEW_HEIGHT_DESKTOP = PREVIEW_HEIGHT_DESKTOP;
+exports.PREVIEW_HEIGHT_MOBILE = PREVIEW_HEIGHT_MOBILE;
+exports.PREVIEW_VIDEO_MULTIPLIER = PREVIEW_VIDEO_MULTIPLIER;
+exports.PREVIEW_WIDTH_DESKTOP = PREVIEW_WIDTH_DESKTOP;
+exports.PREVIEW_WIDTH_MOBILE = PREVIEW_WIDTH_MOBILE;
 exports.TestIds = TestIds;

package/gallery/cssm/utils/index.js

@@ -13,4 +13,10 @@ 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.PREVIEW_HEIGHT_DESKTOP = utils_constants.PREVIEW_HEIGHT_DESKTOP;
+exports.PREVIEW_HEIGHT_MOBILE = utils_constants.PREVIEW_HEIGHT_MOBILE;
+exports.PREVIEW_VIDEO_MULTIPLIER = utils_constants.PREVIEW_VIDEO_MULTIPLIER;
+exports.PREVIEW_WIDTH_DESKTOP = utils_constants.PREVIEW_WIDTH_DESKTOP;
+exports.PREVIEW_WIDTH_MOBILE = utils_constants.PREVIEW_WIDTH_MOBILE;
 exports.TestIds = utils_constants.TestIds;

package/gallery/esm/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/esm';
 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/esm';
+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 'tslib';
 import '../../icon-button/esm';
@@ -22,23 +25,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/esm';
 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-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';
 
 var styles = {"container":"gallery__container_1ukr0","modal":"gallery__modal_1ukr0","navigationVideo":"gallery__navigationVideo_1ukr0","hideNavigation":"gallery__hideNavigation_1ukr0"};
@@ -58,18 +57,20 @@ var Gallery = function (_a) {
     var _j = useState([]), imagesMeta = _j[0], setImagesMeta = _j[1];
     var _k = useState(false), fullScreen = _k[0], setFullScreen = _k[1];
     var _l = useState(false), mutedVideo = _l[0], setMutedVideo = _l[1];
-    var _m = useState(false), playingVideo = _m[0], setPlayingVideo = _m[1];
+    var _m = useState(true), playingVideo = _m[0], setPlayingVideo = _m[1];
     var _o = useState(false), hideNavigation = _o[0], setHideNavigation = _o[1];
     var timer = useRef();
     var view = useMedia([
         ['mobile', '(max-width: 1023px)'],
         ['desktop', '(min-width: 1024px)'],
     ], 'desktop')[0];
+    var isMobile = view === 'mobile';
     var isCurrentVideo = !!((_d = (_c = imagesMeta[currentSlideIndex]) === null || _c === void 0 ? void 0 : _c.player) === null || _d === void 0 ? void 0 : _d.current);
     var slideTo = useCallback(function (index) {
         if (images[index]) {
             setCurrentSlideIndex === null || setCurrentSlideIndex === void 0 ? void 0 : setCurrentSlideIndex(index);
             if (swiper) {
+                setPlayingVideo(true);
                 swiper.slideTo(index);
             }
         }
@@ -123,10 +124,9 @@ var Gallery = function (_a) {
         }
     }, [fullScreen, open, slideNext, slidePrev]);
     useEffect(function () {
-        if (timer.current) {
-            clearTimeout(timer.current);
-        }
         if (isCurrentVideo && !hideNavigation) {
+            if (timer.current)
+                clearTimeout(timer.current);
             timer.current = setTimeout(function () {
                 setHideNavigation(true);
             }, 2000);
@@ -153,7 +153,8 @@ var Gallery = function (_a) {
     }, [handleKeyDown]);
     var singleSlide = images.length === 1;
     var showNavigationBar = !singleSlide && !fullScreen;
-    var galleryContext = useMemo(function () { return ({
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    var galleryContext = {
         view: view,
         singleSlide: singleSlide,
         currentSlideIndex: currentSlideIndex,
@@ -178,34 +179,15 @@ var Gallery = function (_a) {
         setCurrentSlideIndex: setCurrentSlideIndex,
         getCurrentImage: function () { return images[currentSlideIndex]; },
         getCurrentImageMeta: function () { return 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((_b = {},
-                        _b[styles.navigationVideo] = isCurrentVideo && view === 'mobile',
-                        _b[styles.hideNavigation] = hideNavigation && view === 'mobile',
+                        _b[styles.navigationVideo] = isCurrentVideo && isMobile,
+                        _b[styles.hideNavigation] = hideNavigation && isMobile,
                         _b)) },
                     showNavigationBar && React.createElement(NavigationBar, null),
                     view === 'mobile' && React.createElement(InfoBar, null))))));

package/gallery/esm/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 'tslib';
@@ -30,6 +30,19 @@ var Header = function () {
     var meta = getCurrentImageMeta();
     var toggleFullScreenButton = useRef(null);
     var onMuteButtonClick = 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);
     };
     var closeFullScreen = function () {

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

@@ -1,13 +1,10 @@
 import React, { useContext } from 'react';
 import cn from 'classnames';
-import '../../../../base-modal/esm';
-import '@alfalab/hooks';
 import { Typography } from '../../../../typography/esm';
 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 'tslib';
 import '../../../../icon-button/esm';
 import '../../../../tooltip/esm/desktop';
@@ -20,18 +17,6 @@ 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-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 = {"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');
@@ -39,10 +24,10 @@ require('./index.css');
 var HeaderMobile = function () {
     var _a;
     var _b;
-    var _c = useContext(GalleryContext), onClose = _c.onClose, singleSlide = _c.singleSlide, images = _c.images, currentSlideIndex = _c.currentSlideIndex, getCurrentImage = _c.getCurrentImage, getCurrentImageMeta = _c.getCurrentImageMeta, hideNavigation = _c.hideNavigation;
+    var _c = useContext(GalleryContext), onClose = _c.onClose, images = _c.images, currentSlideIndex = _c.currentSlideIndex, getCurrentImage = _c.getCurrentImage, getCurrentImageMeta = _c.getCurrentImageMeta, hideNavigation = _c.hideNavigation;
     var currentImage = getCurrentImage();
     var meta = getCurrentImageMeta();
-    var description = singleSlide || !images.length ? '' : "".concat(currentSlideIndex + 1, " \u0438\u0437 ").concat(images.length);
+    var description = images.length > 1 && "".concat(currentSlideIndex + 1, " \u0438\u0437 ").concat(images.length);
     var canDownload = (_b = currentImage === null || currentImage === void 0 ? void 0 : currentImage.canDownload) !== null && _b !== void 0 ? _b : true;
     var showDownloadButton = !(meta === null || meta === void 0 ? void 0 : meta.broken) && canDownload;
     return (React.createElement("div", { className: cn(styles.headerMobile, (_a = {},

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

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

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

@@ -1 +1,20 @@
-
+export { HeaderMobile } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../../../typography/esm';
+import '../../context.js';
+import '../../utils/utils.js';
+import '../../utils/constants.js';
+import '../buttons/index.js';
+import 'tslib';
+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/image-preview/Component.js

@@ -3,18 +3,19 @@ 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';
 
 var 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"};
 require('./index.css');
 
 var ImagePreview = function (_a) {
-    var _b, _c, _d, _e;
-    var image = _a.image, _f = _a.active, active = _f === void 0 ? false : _f, index = _a.index, onSelect = _a.onSelect, className = _a.className;
-    var _g = useContext(GalleryContext), imagesMeta = _g.imagesMeta, view = _g.view;
+    var _b;
+    var image = _a.image, _c = _a.active, active = _c === void 0 ? false : _c, index = _a.index, onSelect = _a.onSelect, className = _a.className;
+    var _d = useContext(GalleryContext), imagesMeta = _d.imagesMeta, view = _d.view;
     var isMobile = view === 'mobile';
-    var previewWidth = isMobile ? 36 : 56;
-    var previewHeight = isMobile ? 46 : 56;
+    var previewWidth = isMobile ? PREVIEW_WIDTH_MOBILE : PREVIEW_WIDTH_DESKTOP;
+    var previewHeight = isMobile ? PREVIEW_HEIGHT_MOBILE : PREVIEW_HEIGHT_DESKTOP;
     var ref = useRef(null);
     var canvasRef = useRef(null);
     useEffect(function () {
@@ -24,7 +25,7 @@ var ImagePreview = function (_a) {
         var context = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
         var drawPreview = function () {
             if (video) {
-                context === null || context === void 0 ? void 0 : context.drawImage(video, 0, 0, video.videoWidth / 12, video.videoHeight / 12);
+                context === null || context === void 0 ? void 0 : context.drawImage(video, 0, 0, video.videoWidth / PREVIEW_VIDEO_MULTIPLIER, video.videoHeight / PREVIEW_VIDEO_MULTIPLIER);
             }
         };
         drawPreview();
@@ -48,17 +49,43 @@ var ImagePreview = function (_a) {
     var focused = useFocus(ref, 'keyboard')[0];
     var meta = imagesMeta[index];
     var isBroken = Boolean(meta === null || meta === void 0 ? void 0 : meta.broken);
-    return (React.createElement("div", { className: cn(styles.component, (_b = {}, _b[styles.active] = active, _b[styles.focused] = focused, _b[styles.mobile] = isMobile, _b), className), onClick: handleClick, role: 'button', onKeyDown: handleKeyDown, tabIndex: 0, ref: ref, "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A ".concat(index + 1, " \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0443") }, isBroken ? (React.createElement("div", { className: cn(styles.preview, (_c = {}, _c[styles.mobile] = isMobile, _c[styles.active] = active, _c), styles.brokenImageWrapper) },
-        React.createElement("div", { className: cn(styles.brokenIcon) },
-            React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: previewWidth, height: previewHeight, viewBox: "".concat(isMobile ? -6 : 0, " ").concat(isMobile ? -12 : 0, " ").concat(previewWidth, " ").concat(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, (_d = {},
-            _d[styles.loading] = !meta,
-            _d[styles.mobile] = isMobile,
-            _d)) }, isVideo(image.src) ? (React.createElement("canvas", { className: cn(styles.canvasPreview, (_e = {}, _e[styles.mobile] = isMobile, _e)), "data-testid": 'canvas', width: previewWidth, height: previewHeight, ref: canvasRef })) : (React.createElement("img", { src: image.src, alt: getImageAlt(image, index) }))))));
+    var renderPreview = function () {
+        var _a, _b, _c, _d, _e;
+        if (isBroken) {
+            return (React.createElement("div", { className: cn(styles.preview, (_a = {}, _a[styles.mobile] = isMobile, _a[styles.active] = active, _a), styles.brokenImageWrapper) },
+                React.createElement("div", { className: cn(styles.brokenIcon) },
+                    React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: previewWidth, height: previewHeight, viewBox: "".concat(isMobile ? -6 : 0, " ").concat(isMobile ? -12 : 0, " ").concat(previewWidth, " ").concat(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, (_b = {},
+                    _b[styles.loading] = !meta,
+                    _b[styles.mobile] = isMobile,
+                    _b)) },
+                React.createElement("img", { src: image.previewSrc, alt: getImageAlt(image, index) })));
+        }
+        if (isVideo(image.src)) {
+            return (React.createElement("div", { className: cn(styles.preview, styles.image, (_c = {},
+                    _c[styles.loading] = !meta,
+                    _c[styles.mobile] = isMobile,
+                    _c)) },
+                React.createElement("canvas", { className: cn(styles.canvasPreview, (_d = {}, _d[styles.mobile] = isMobile, _d)), "data-testid": 'canvas', width: previewWidth, height: previewHeight, ref: canvasRef })));
+        }
+        return (React.createElement("div", { className: cn(styles.preview, styles.image, (_e = {},
+                _e[styles.loading] = !meta,
+                _e[styles.mobile] = isMobile,
+                _e)) },
+            React.createElement("img", { src: image.src, alt: getImageAlt(image, index) })));
+    };
+    return (React.createElement("div", { className: cn(styles.component, (_b = {},
+            _b[styles.active] = active,
+            _b[styles.focused] = focused,
+            _b[styles.mobile] = isMobile,
+            _b), className), onClick: handleClick, role: 'button', onKeyDown: handleKeyDown, tabIndex: 0, ref: ref, "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A ".concat(index + 1, " \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0443") }, renderPreview()));
 };
 
 export { ImagePreview };

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

@@ -10,15 +10,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-ca7119fa.js';
+import { s as styles, S as Slide } from '../../slide-da05984b.js';
 import 'swiper/swiper.min.css';
 import '../../../../typography/esm';
 import './paths.js';
 import './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';
 
 SwiperCore.use([EffectFade, A11y, Controller]);
@@ -84,7 +82,7 @@ var ImageViewer = function () {
             },
             className: cn(styles.swiper, (_a = {},
                 _a[styles.hidden] = fullScreen && !isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
-                _a[styles.fullScreenVideo] = fullScreen && isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
+                _a[styles.fullScreenVideo] = fullScreen && !singleSlide && isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
                 _a[styles.mobile] = isMobile,
                 _a[styles.mobileVideo] = isMobile && isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
                 _a)),
@@ -100,6 +98,7 @@ var ImageViewer = function () {
     }, [
         fullScreen,
         currentImage === null || currentImage === void 0 ? void 0 : currentImage.src,
+        singleSlide,
         isMobile,
         swiper,
         initialSlide,

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

@@ -11,13 +11,11 @@ import '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 import '../../context.js';
 import '../../utils/utils.js';
 import '../../utils/constants.js';
-import '../../slide-ca7119fa.js';
+import '../../slide-da05984b.js';
 import '../../../../typography/esm';
 import './paths.js';
 import './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';
 import 'swiper/swiper.min.css';

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

@@ -3,12 +3,10 @@ import 'classnames';
 import '../../../../typography/esm';
 import '../../context.js';
 import './video/index.js';
-export { S as Slide } from '../../slide-ca7119fa.js';
+export { S as Slide } from '../../slide-da05984b.js';
 import 'hls.js';
 import '@alfalab/core-components/icon-view/circle';
-import '../../../../button/esm';
-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';