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

package/gallery/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');
@@ -10,7 +9,6 @@ var components_imagePreview_Component = require('../image-preview/Component.js')
 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 = {"component":"gallery__component_13b8t","previews":"gallery__previews_13b8t","preview":"gallery__preview_13b8t"};
 require('./index.css');
@@ -18,11 +16,12 @@ require('./index.css');
 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);
         }
     };
@@ -64,7 +63,7 @@ var NavigationBar = function () {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default.default.createElement("div", { className: styles.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.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.preview }));
     })));
 };
 

package/gallery/cssm/Component.js

@@ -4,13 +4,13 @@ var React = require('react');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('../../base-modal/cssm');
 var hooks = require('@alfalab/hooks');
-var components_headerMobile_Component = require('./components/header-mobile/Component.js');
-var components_infoBar_Component = require('./components/info-bar/Component.js');
 var components_navigationBar_Component = require('./components/navigation-bar/Component.js');
 var components_header_Component = require('./components/header/Component.js');
 var context = require('./context.js');
 require('./components/image-preview/index.module.css');
 var components_imageViewer_component = require('./components/image-viewer/component.js');
+var components_infoBar_Component = require('./components/info-bar/Component.js');
+var components_headerMobile_Component = require('./components/header-mobile/Component.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -33,18 +33,20 @@ var Gallery = function (_a) {
     var _j = React.useState([]), imagesMeta = _j[0], setImagesMeta = _j[1];
     var _k = React.useState(false), fullScreen = _k[0], setFullScreen = _k[1];
     var _l = React.useState(false), mutedVideo = _l[0], setMutedVideo = _l[1];
-    var _m = React.useState(false), playingVideo = _m[0], setPlayingVideo = _m[1];
+    var _m = React.useState(true), playingVideo = _m[0], setPlayingVideo = _m[1];
     var _o = React.useState(false), hideNavigation = _o[0], setHideNavigation = _o[1];
     var timer = React.useRef();
     var view = hooks.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 = React.useCallback(function (index) {
         if (images[index]) {
             setCurrentSlideIndex === null || setCurrentSlideIndex === void 0 ? void 0 : setCurrentSlideIndex(index);
             if (swiper) {
+                setPlayingVideo(true);
                 swiper.slideTo(index);
             }
         }
@@ -98,10 +100,9 @@ var Gallery = function (_a) {
         }
     }, [fullScreen, open, slideNext, slidePrev]);
     React.useEffect(function () {
-        if (timer.current) {
-            clearTimeout(timer.current);
-        }
         if (isCurrentVideo && !hideNavigation) {
+            if (timer.current)
+                clearTimeout(timer.current);
             timer.current = setTimeout(function () {
                 setHideNavigation(true);
             }, 2000);
@@ -128,7 +129,8 @@ var Gallery = function (_a) {
     }, [handleKeyDown]);
     var singleSlide = images.length === 1;
     var showNavigationBar = !singleSlide && !fullScreen;
-    var galleryContext = React.useMemo(function () { return ({
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    var galleryContext = {
         view: view,
         singleSlide: singleSlide,
         currentSlideIndex: currentSlideIndex,
@@ -153,34 +155,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__default.default.createElement(context.GalleryContext.Provider, { value: galleryContext },
         React__default.default.createElement(coreComponentsBaseModal.BaseModal, { open: open, className: styles__default.default.modal, onEscapeKeyDown: handleEscapeKeyDown, Backdrop: Backdrop },
             React__default.default.createElement("div", { className: styles__default.default.container },
                 view === 'desktop' ? React__default.default.createElement(components_header_Component.Header, null) : React__default.default.createElement(components_headerMobile_Component.HeaderMobile, null),
                 React__default.default.createElement(components_imageViewer_component.ImageViewer, null),
                 React__default.default.createElement("nav", { className: cn__default.default((_b = {},
-                        _b[styles__default.default.navigationVideo] = isCurrentVideo && view === 'mobile',
-                        _b[styles__default.default.hideNavigation] = hideNavigation && view === 'mobile',
+                        _b[styles__default.default.navigationVideo] = isCurrentVideo && isMobile,
+                        _b[styles__default.default.hideNavigation] = hideNavigation && isMobile,
                         _b)) },
                     showNavigationBar && React__default.default.createElement(components_navigationBar_Component.NavigationBar, null),
                     view === 'mobile' && React__default.default.createElement(components_infoBar_Component.InfoBar, null))))));

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

@@ -20,6 +20,19 @@ var Header = function () {
     var meta = getCurrentImageMeta();
     var toggleFullScreenButton = React.useRef(null);
     var onMuteButtonClick = function () {
+        var _a, _b;
+        if (mutedVideo) {
+            var customEvent = new CustomEvent(utils_constants.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(utils_constants.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/cssm/components/header-mobile/Component.js

@@ -2,20 +2,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-require('../../../../base-modal/cssm');
-require('@alfalab/hooks');
 var coreComponentsTypography = require('../../../../typography/cssm');
 var context = require('../../context.js');
-var components_buttons_index = require('../buttons/index.js');
-require('../info-bar/index.module.css');
 var utils_utils = require('../../utils/utils.js');
 var utils_constants = require('../../utils/constants.js');
-require('../image-preview/index.module.css');
-require('../navigation-bar/index.module.css');
-require('../header-info-block/index.module.css');
-require('../header/index.module.css');
-require('../image-viewer/component.js');
-require('../../index.module.css');
+var components_buttons_index = require('../buttons/index.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -27,10 +18,10 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 var HeaderMobile = function () {
     var _a;
     var _b;
-    var _c = React.useContext(context.GalleryContext), onClose = _c.onClose, singleSlide = _c.singleSlide, images = _c.images, currentSlideIndex = _c.currentSlideIndex, getCurrentImage = _c.getCurrentImage, getCurrentImageMeta = _c.getCurrentImageMeta, hideNavigation = _c.hideNavigation;
+    var _c = React.useContext(context.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__default.default.createElement("div", { className: cn__default.default(styles__default.default.headerMobile, (_a = {},

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

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

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

@@ -1 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
 
+var components_headerMobile_Component = require('./Component.js');
+
+
+
+exports.HeaderMobile = components_headerMobile_Component.HeaderMobile;

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

@@ -5,6 +5,7 @@ var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 var context = require('../../context.js');
 var utils_utils = require('../../utils/utils.js');
+var utils_constants = require('../../utils/constants.js');
 var components_imagePreview_paths = require('./paths.js');
 var styles = require('./index.module.css');
 
@@ -15,12 +16,12 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 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 = React.useContext(context.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 = React.useContext(context.GalleryContext), imagesMeta = _d.imagesMeta, view = _d.view;
     var isMobile = view === 'mobile';
-    var previewWidth = isMobile ? 36 : 56;
-    var previewHeight = isMobile ? 46 : 56;
+    var previewWidth = isMobile ? utils_constants.PREVIEW_WIDTH_MOBILE : utils_constants.PREVIEW_WIDTH_DESKTOP;
+    var previewHeight = isMobile ? utils_constants.PREVIEW_HEIGHT_MOBILE : utils_constants.PREVIEW_HEIGHT_DESKTOP;
     var ref = React.useRef(null);
     var canvasRef = React.useRef(null);
     React.useEffect(function () {
@@ -30,7 +31,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 / utils_constants.PREVIEW_VIDEO_MULTIPLIER, video.videoHeight / utils_constants.PREVIEW_VIDEO_MULTIPLIER);
             }
         };
         drawPreview();
@@ -54,17 +55,43 @@ var ImagePreview = function (_a) {
     var focused = hooks.useFocus(ref, 'keyboard')[0];
     var meta = imagesMeta[index];
     var isBroken = Boolean(meta === null || meta === void 0 ? void 0 : meta.broken);
-    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_b = {}, _b[styles__default.default.active] = active, _b[styles__default.default.focused] = focused, _b[styles__default.default.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__default.default.createElement("div", { className: cn__default.default(styles__default.default.preview, (_c = {}, _c[styles__default.default.mobile] = isMobile, _c[styles__default.default.active] = active, _c), styles__default.default.brokenImageWrapper) },
-        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.brokenIcon) },
-            React__default.default.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__default.default.createElement("rect", { fill: 'none' }),
-                React__default.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: isMobile ? components_imagePreview_paths.NoImagePaths.mobileImage : components_imagePreview_paths.NoImagePaths.baseImage, fill: '#89898A' }),
-                React__default.default.createElement("path", { d: isMobile
-                        ? components_imagePreview_paths.NoImagePaths.mobileTriangle
-                        : components_imagePreview_paths.NoImagePaths.triangleImage, fill: '#89898A' }))))) : (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.preview, styles__default.default.image, (_d = {},
-            _d[styles__default.default.loading] = !meta,
-            _d[styles__default.default.mobile] = isMobile,
-            _d)) }, utils_utils.isVideo(image.src) ? (React__default.default.createElement("canvas", { className: cn__default.default(styles__default.default.canvasPreview, (_e = {}, _e[styles__default.default.mobile] = isMobile, _e)), "data-testid": 'canvas', width: previewWidth, height: previewHeight, ref: canvasRef })) : (React__default.default.createElement("img", { src: image.src, alt: utils_utils.getImageAlt(image, index) }))))));
+    var renderPreview = function () {
+        var _a, _b, _c, _d, _e;
+        if (isBroken) {
+            return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.preview, (_a = {}, _a[styles__default.default.mobile] = isMobile, _a[styles__default.default.active] = active, _a), styles__default.default.brokenImageWrapper) },
+                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.brokenIcon) },
+                    React__default.default.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__default.default.createElement("rect", { fill: 'none' }),
+                        React__default.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: isMobile ? components_imagePreview_paths.NoImagePaths.mobileImage : components_imagePreview_paths.NoImagePaths.baseImage, fill: '#89898A' }),
+                        React__default.default.createElement("path", { d: isMobile
+                                ? components_imagePreview_paths.NoImagePaths.mobileTriangle
+                                : components_imagePreview_paths.NoImagePaths.triangleImage, fill: '#89898A' })))));
+        }
+        if (image.previewSrc) {
+            return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.preview, styles__default.default.image, (_b = {},
+                    _b[styles__default.default.loading] = !meta,
+                    _b[styles__default.default.mobile] = isMobile,
+                    _b)) },
+                React__default.default.createElement("img", { src: image.previewSrc, alt: utils_utils.getImageAlt(image, index) })));
+        }
+        if (utils_utils.isVideo(image.src)) {
+            return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.preview, styles__default.default.image, (_c = {},
+                    _c[styles__default.default.loading] = !meta,
+                    _c[styles__default.default.mobile] = isMobile,
+                    _c)) },
+                React__default.default.createElement("canvas", { className: cn__default.default(styles__default.default.canvasPreview, (_d = {}, _d[styles__default.default.mobile] = isMobile, _d)), "data-testid": 'canvas', width: previewWidth, height: previewHeight, ref: canvasRef })));
+        }
+        return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.preview, styles__default.default.image, (_e = {},
+                _e[styles__default.default.loading] = !meta,
+                _e[styles__default.default.mobile] = isMobile,
+                _e)) },
+            React__default.default.createElement("img", { src: image.src, alt: utils_utils.getImageAlt(image, index) })));
+    };
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_b = {},
+            _b[styles__default.default.active] = active,
+            _b[styles__default.default.focused] = focused,
+            _b[styles__default.default.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()));
 };
 
 exports.ImagePreview = ImagePreview;

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

@@ -1,6 +1,5 @@
 :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 */
@@ -55,7 +54,6 @@
     transition: opacity 0.15s ease-in-out
 } .image > img {
         display: block;
-        background-color: var(--color-light-base-bg-primary);
         width: 100%;
         height: 100%;
         border-radius: inherit;

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

@@ -87,7 +87,7 @@ var ImageViewer = function () {
             },
             className: cn__default.default(styles__default.default.swiper, (_a = {},
                 _a[styles__default.default.hidden] = fullScreen && !utils_utils.isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
-                _a[styles__default.default.fullScreenVideo] = fullScreen && utils_utils.isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
+                _a[styles__default.default.fullScreenVideo] = fullScreen && !singleSlide && utils_utils.isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
                 _a[styles__default.default.mobile] = isMobile,
                 _a[styles__default.default.mobileVideo] = isMobile && utils_utils.isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
                 _a)),
@@ -103,6 +103,7 @@ var ImageViewer = function () {
     }, [
         fullScreen,
         currentImage === null || currentImage === void 0 ? void 0 : currentImage.src,
+        singleSlide,
         isMobile,
         swiper,
         initialSlide,

package/gallery/cssm/components/image-viewer/index.module.css

@@ -73,7 +73,6 @@
     height: 0;
     -webkit-user-select: none;
             user-select: none;
-    background-color: var(--color-light-base-bg-primary);
     border-radius: var(--border-radius-m)
 } .image.mobile {
         border-radius: 0;
@@ -83,7 +82,6 @@
     height: auto;
     -webkit-user-select: none;
             user-select: none;
-    background-color: var(--color-light-base-bg-primary);
 } .verticalImageFit {
     width: auto;
     height: 100%;

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

@@ -40,7 +40,7 @@ var Slide = function (_a) {
     var horizontalImageFit = !small && swiperAspectRatio <= imageAspectRatio;
     if (utils_utils.isVideo(image.src)) {
         return (React__default.default.createElement(SlideInner, { isVideoView: true, active: isActive, broken: broken, withPlaceholder: broken, loading: !meta },
-            React__default.default.createElement(components_imageViewer_video_index.Video, { url: image.src, index: index })));
+            React__default.default.createElement(components_imageViewer_video_index.Video, { url: image.src, index: index, isActive: isActive })));
     }
     return (React__default.default.createElement(SlideInner, { active: isActive, broken: broken, loading: !meta, withPlaceholder: small || broken },
         React__default.default.createElement("img", { src: image.src, alt: utils_utils.getImageAlt(image, index), className: cn__default.default((_b = {},

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

@@ -4,10 +4,9 @@ var React = require('react');
 var cn = require('classnames');
 var Hls = require('hls.js');
 var circle = require('@alfalab/core-components/icon-view/circle');
-var coreComponentsButton = require('../../../../../button/cssm');
-var PauseCompactMIcon = require('@alfalab/icons-glyph/PauseCompactMIcon');
 var PlayCompactMIcon = require('@alfalab/icons-glyph/PlayCompactMIcon');
 var context = require('../../../context.js');
+var utils_constants = require('../../../utils/constants.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -15,20 +14,14 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var Hls__default = /*#__PURE__*/_interopDefaultCompat(Hls);
-var PauseCompactMIcon__default = /*#__PURE__*/_interopDefaultCompat(PauseCompactMIcon);
 var PlayCompactMIcon__default = /*#__PURE__*/_interopDefaultCompat(PlayCompactMIcon);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 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 = React.useRef(null);
     var _c = React.useContext(context.GalleryContext), setImageMeta = _c.setImageMeta, mutedVideo = _c.mutedVideo, view = _c.view, playingVideo = _c.playingVideo, setPlayingVideo = _c.setPlayingVideo, setHideNavigation = _c.setHideNavigation;
-    React.useEffect(function () {
-        if (playerRef.current) {
-            playerRef.current.muted = mutedVideo;
-        }
-    }, [mutedVideo]);
     React.useEffect(function () {
         setImageMeta({ player: playerRef }, index);
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
@@ -44,9 +37,6 @@ var Video = function (_a) {
                 hls.attachMedia(playerRef.current);
             }
         }
-        else if (playerRef.current) {
-            playerRef.current.src = url;
-        }
         return function () {
             if (hls) {
                 hls.destroy();
@@ -54,15 +44,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);
     };
     React.useEffect(function () {
-        if (playerRef.current) {
+        if (playerRef.current && isActive) {
             if (playingVideo) {
                 playerRef.current.play();
             }
@@ -70,14 +58,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(utils_constants.GALLERY_EVENTS.ON_PLAY, {
+            detail: { player: e.target },
+        });
+        dispatchEvent(customEvent);
+    };
+    var onPause = function (e) {
+        var customEvent = new CustomEvent(utils_constants.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__default.default.createElement("div", { onClick: handleWrapperClick, className: styles__default.default.videoWrapper },
-        React__default.default.createElement("video", { ref: playerRef, className: cn__default.default(styles__default.default.video, (_b = {}, _b[styles__default.default.mobile] = view === 'mobile', _b), className) },
+        React__default.default.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, src: Hls__default.default.isSupported() ? undefined : url, className: cn__default.default(styles__default.default.video, (_b = {}, _b[styles__default.default.mobile] = view === 'mobile', _b), className) },
             React__default.default.createElement("track", { kind: 'captions' })),
-        view === 'desktop' && (React__default.default.createElement(coreComponentsButton.Button, { className: styles__default.default.videoButton, view: 'text', onClick: handleClick },
-            React__default.default.createElement(circle.Circle, { className: styles__default.default.videoButtonIcon, size: 64 }, playingVideo ? React__default.default.createElement(PauseCompactMIcon__default.default, null) : React__default.default.createElement(PlayCompactMIcon__default.default, null))))));
+        view === 'desktop' && !playingVideo && (React__default.default.createElement("div", { className: styles__default.default.videoButton },
+            React__default.default.createElement(circle.Circle, { size: 64 },
+                React__default.default.createElement(PlayCompactMIcon__default.default, null))))));
 };
 
 exports.Video = Video;

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

@@ -9,10 +9,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 */
 
     /* новые значения, используйте их */
@@ -27,14 +27,14 @@
 } .video {
     max-width: 100%;
     max-height: 100%;
-    border-radius: var(--border-radius-3xl);
+    border-radius: var(--border-radius-24);
 } .mobile {
     border-radius: 0;
 } .videoButton {
+
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1;
-} .videoButtonIcon {
 }

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

@@ -4,6 +4,8 @@ var components_navigationBar_Component = require('./navigation-bar/Component.js'
 var components_header_Component = require('./header/Component.js');
 var components_imagePreview_Component = require('./image-preview/Component.js');
 var components_imageViewer_component = require('./image-viewer/component.js');
+var components_infoBar_Component = require('./info-bar/Component.js');
+var components_headerMobile_Component = require('./header-mobile/Component.js');
 
 
 
@@ -11,3 +13,5 @@ exports.NavigationBar = components_navigationBar_Component.NavigationBar;
 exports.Header = components_header_Component.Header;
 exports.ImagePreview = components_imagePreview_Component.ImagePreview;
 exports.ImageViewer = components_imageViewer_component.ImageViewer;
+exports.InfoBar = components_infoBar_Component.InfoBar;
+exports.HeaderMobile = components_headerMobile_Component.HeaderMobile;

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

@@ -1,20 +1,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-require('classnames');
-require('../../../../base-modal/cssm');
-require('@alfalab/hooks');
 var coreComponentsTypography = require('../../../../typography/cssm');
 var context = require('../../context.js');
-var components_buttons_index = require('../buttons/index.js');
-require('../header-mobile/index.module.css');
 var utils_utils = require('../../utils/utils.js');
-require('../image-preview/index.module.css');
-require('../navigation-bar/index.module.css');
-require('../header-info-block/index.module.css');
-require('../header/index.module.css');
-require('../image-viewer/component.js');
-require('../../index.module.css');
+var utils_constants = require('../../utils/constants.js');
+var components_buttons_index = require('../buttons/index.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -23,11 +14,25 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var InfoBar = function () {
-    var _a = React.useContext(context.GalleryContext), getCurrentImage = _a.getCurrentImage, mutedVideo = _a.mutedVideo, setMutedVideo = _a.setMutedVideo, playingVideo = _a.playingVideo, setPlayingVideo = _a.setPlayingVideo;
+    var _a = React.useContext(context.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 = React.useCallback(function () {
+        var _a, _b;
+        if (mutedVideo) {
+            var customEvent = new CustomEvent(utils_constants.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(utils_constants.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 = React.useCallback(function () {
         setPlayingVideo(!playingVideo);
     }, [playingVideo, setPlayingVideo]);

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

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

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

@@ -1 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
 
+var components_infoBar_Component = require('./Component.js');
+
+
+
+exports.InfoBar = components_infoBar_Component.InfoBar;