@alfalab/core-components-gallery 5.7.4 → 5.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Component.js +47 -12
- package/components/buttons/index.css +35 -0
- package/{buttons-ec113bb4.d.ts → components/buttons/index.d.ts} +6 -1
- package/components/buttons/index.js +72 -0
- package/components/header/Component.js +33 -12
- package/components/header/index.css +5 -19
- package/components/header-info-block/Component.js +1 -1
- package/components/header-info-block/index.css +5 -5
- package/components/header-mobile/Component.d.ts +4 -0
- package/components/header-mobile/Component.js +39 -0
- package/components/header-mobile/index.css +50 -0
- package/components/header-mobile/index.d.ts +1 -0
- package/components/header-mobile/index.js +9 -0
- package/components/image-preview/Component.js +67 -24
- package/components/image-preview/index.css +35 -28
- package/components/image-preview/paths.d.ts +2 -0
- package/components/image-preview/paths.js +2 -0
- package/components/image-viewer/component.js +30 -10
- package/components/image-viewer/index.css +37 -25
- package/components/image-viewer/slide.js +3 -1
- package/components/image-viewer/video/index.css +48 -0
- package/components/image-viewer/video/index.d.ts +10 -0
- package/components/image-viewer/video/index.js +130 -0
- package/components/index.d.ts +2 -0
- package/components/index.js +4 -0
- package/components/info-bar/Component.d.ts +4 -0
- package/components/info-bar/Component.js +47 -0
- package/components/info-bar/index.css +37 -0
- package/components/info-bar/index.d.ts +1 -0
- package/components/info-bar/index.js +9 -0
- package/components/navigation-bar/Component.js +3 -2
- package/components/navigation-bar/index.css +8 -6
- package/context.d.ts +7 -0
- package/context.js +7 -0
- package/cssm/Component.js +46 -11
- package/cssm/components/{header/buttons.d.ts → buttons/index.d.ts} +6 -1
- package/cssm/components/buttons/index.js +71 -0
- package/cssm/components/buttons/index.module.css +34 -0
- package/cssm/components/header/Component.js +28 -10
- package/cssm/components/header/index.module.css +3 -17
- package/cssm/components/header-mobile/Component.d.ts +4 -0
- package/cssm/components/header-mobile/Component.js +38 -0
- package/cssm/components/header-mobile/index.d.ts +1 -0
- package/cssm/components/header-mobile/index.js +9 -0
- package/cssm/components/header-mobile/index.module.css +49 -0
- package/cssm/components/image-preview/Component.js +66 -27
- package/cssm/components/image-preview/index.module.css +25 -18
- package/cssm/components/image-preview/paths.d.ts +2 -0
- package/cssm/components/image-preview/paths.js +2 -0
- package/cssm/components/image-viewer/component.js +29 -9
- package/cssm/components/image-viewer/index.module.css +21 -9
- package/cssm/components/image-viewer/slide.js +12 -2
- package/cssm/components/image-viewer/video/index.d.ts +10 -0
- package/cssm/components/image-viewer/video/index.js +129 -0
- package/cssm/components/image-viewer/video/index.module.css +47 -0
- package/cssm/components/index.d.ts +2 -0
- package/cssm/components/index.js +4 -0
- package/cssm/components/info-bar/Component.d.ts +4 -0
- package/cssm/components/info-bar/Component.js +46 -0
- package/cssm/components/info-bar/index.d.ts +1 -0
- package/cssm/components/info-bar/index.js +9 -0
- package/cssm/components/info-bar/index.module.css +36 -0
- package/cssm/components/navigation-bar/Component.js +2 -1
- package/cssm/components/navigation-bar/index.module.css +3 -1
- package/cssm/context.d.ts +7 -0
- package/cssm/context.js +7 -0
- package/cssm/index.d.ts +1 -1
- package/cssm/index.js +1 -8
- package/cssm/index.module.css +14 -2
- package/cssm/types.d.ts +7 -0
- package/cssm/utils/constants.d.ts +14 -1
- package/cssm/utils/constants.js +19 -0
- package/cssm/utils/index.js +7 -0
- package/cssm/utils/utils.d.ts +2 -1
- package/cssm/utils/utils.js +5 -3
- package/esm/Component.js +46 -12
- package/esm/components/buttons/index.css +35 -0
- package/esm/{buttons-791da71e.d.ts → components/buttons/index.d.ts} +6 -1
- package/esm/components/buttons/index.js +55 -0
- package/esm/components/header/Component.js +30 -9
- package/esm/components/header/index.css +5 -19
- package/esm/components/header-info-block/Component.js +1 -1
- package/esm/components/header-info-block/index.css +5 -5
- package/esm/components/header-mobile/Component.d.ts +4 -0
- package/esm/components/header-mobile/Component.js +30 -0
- package/esm/components/header-mobile/index.css +50 -0
- package/esm/components/header-mobile/index.d.ts +1 -0
- package/esm/components/header-mobile/index.js +1 -0
- package/esm/components/image-preview/Component.js +69 -26
- package/esm/components/image-preview/index.css +35 -28
- package/esm/components/image-preview/paths.d.ts +2 -0
- package/esm/components/image-preview/paths.js +2 -0
- package/esm/components/image-viewer/component.js +31 -11
- package/esm/components/image-viewer/index.css +37 -25
- package/esm/components/image-viewer/slide.js +3 -1
- package/esm/components/image-viewer/video/index.css +48 -0
- package/esm/components/image-viewer/video/index.d.ts +10 -0
- package/esm/components/image-viewer/video/index.js +119 -0
- package/esm/components/index.d.ts +2 -0
- package/esm/components/index.js +2 -0
- package/esm/components/info-bar/Component.d.ts +4 -0
- package/esm/components/info-bar/Component.js +39 -0
- package/esm/components/info-bar/index.css +37 -0
- package/esm/components/info-bar/index.d.ts +1 -0
- package/esm/components/info-bar/index.js +1 -0
- package/esm/components/navigation-bar/Component.js +3 -2
- package/esm/components/navigation-bar/index.css +8 -6
- package/esm/context.d.ts +7 -0
- package/esm/context.js +7 -0
- package/esm/index.css +17 -5
- package/esm/index.d.ts +1 -1
- package/esm/index.js +1 -3
- package/esm/{slide-7d5a41d1.js → slide-3be75078.js} +15 -5
- package/esm/types.d.ts +7 -0
- package/esm/utils/constants.d.ts +14 -1
- package/esm/utils/constants.js +14 -1
- package/esm/utils/index.js +2 -2
- package/esm/utils/utils.d.ts +2 -1
- package/esm/utils/utils.js +5 -4
- package/index.css +17 -5
- package/index.d.ts +1 -1
- package/index.js +1 -8
- package/modern/Component.js +39 -7
- package/modern/components/buttons/index.css +35 -0
- package/modern/{buttons-1859cb8e.d.ts → components/buttons/index.d.ts} +6 -1
- package/modern/components/buttons/index.js +33 -0
- package/modern/components/header/Component.js +27 -9
- package/modern/components/header/index.css +5 -19
- package/modern/components/header-info-block/Component.js +1 -1
- package/modern/components/header-info-block/index.css +5 -5
- package/modern/components/header-mobile/Component.d.ts +4 -0
- package/modern/components/header-mobile/Component.js +28 -0
- package/modern/components/header-mobile/index.css +50 -0
- package/modern/components/header-mobile/index.d.ts +1 -0
- package/modern/components/header-mobile/index.js +1 -0
- package/modern/components/image-preview/Component.js +65 -23
- package/modern/components/image-preview/index.css +35 -28
- package/modern/components/image-preview/paths.d.ts +2 -0
- package/modern/components/image-preview/paths.js +2 -0
- package/modern/components/image-viewer/component.js +31 -11
- package/modern/components/image-viewer/index.css +37 -25
- package/modern/components/image-viewer/slide.js +3 -1
- package/modern/components/image-viewer/video/index.css +48 -0
- package/modern/components/image-viewer/video/index.d.ts +10 -0
- package/modern/components/image-viewer/video/index.js +117 -0
- package/modern/components/index.d.ts +2 -0
- package/modern/components/index.js +2 -0
- package/modern/components/info-bar/Component.d.ts +4 -0
- package/modern/components/info-bar/Component.js +38 -0
- package/modern/components/info-bar/index.css +37 -0
- package/modern/components/info-bar/index.d.ts +1 -0
- package/modern/components/info-bar/index.js +1 -0
- package/modern/components/navigation-bar/Component.js +3 -2
- package/modern/components/navigation-bar/index.css +8 -6
- package/modern/context.d.ts +7 -0
- package/modern/context.js +7 -0
- package/modern/index.css +17 -5
- package/modern/index.d.ts +1 -1
- package/modern/index.js +1 -3
- package/modern/{slide-c47386c3.js → slide-df1baab8.js} +15 -5
- package/modern/types.d.ts +7 -0
- package/modern/utils/constants.d.ts +14 -1
- package/modern/utils/constants.js +14 -1
- package/modern/utils/index.js +2 -2
- package/modern/utils/utils.d.ts +2 -1
- package/modern/utils/utils.js +5 -4
- package/moderncssm/Component.js +38 -6
- package/moderncssm/components/buttons/index.d.ts +16 -0
- package/moderncssm/components/buttons/index.js +31 -0
- package/moderncssm/components/buttons/index.module.css +20 -0
- package/moderncssm/components/header/Component.js +24 -9
- package/moderncssm/components/header/index.module.css +0 -19
- package/moderncssm/components/header-mobile/Component.d.ts +4 -0
- package/moderncssm/components/header-mobile/Component.js +26 -0
- package/moderncssm/components/header-mobile/index.d.ts +1 -0
- package/moderncssm/components/header-mobile/index.js +1 -0
- package/moderncssm/components/header-mobile/index.module.css +35 -0
- package/moderncssm/components/image-preview/Component.js +64 -26
- package/moderncssm/components/image-preview/index.module.css +30 -13
- package/moderncssm/components/image-preview/paths.d.ts +2 -0
- package/moderncssm/components/image-preview/paths.js +2 -0
- package/moderncssm/components/image-viewer/component.js +30 -10
- package/moderncssm/components/image-viewer/index.module.css +29 -6
- package/moderncssm/components/image-viewer/slide.js +14 -4
- package/moderncssm/components/image-viewer/video/index.d.ts +10 -0
- package/moderncssm/components/image-viewer/video/index.js +115 -0
- package/moderncssm/components/image-viewer/video/index.module.css +36 -0
- package/moderncssm/components/index.d.ts +2 -0
- package/moderncssm/components/index.js +2 -0
- package/moderncssm/components/info-bar/Component.d.ts +4 -0
- package/moderncssm/components/info-bar/Component.js +36 -0
- package/moderncssm/components/info-bar/index.d.ts +1 -0
- package/moderncssm/components/info-bar/index.js +1 -0
- package/moderncssm/components/info-bar/index.module.css +23 -0
- package/moderncssm/components/navigation-bar/Component.js +2 -1
- package/moderncssm/components/navigation-bar/index.module.css +4 -0
- package/moderncssm/context.d.ts +7 -0
- package/moderncssm/context.js +7 -0
- package/moderncssm/index.d.ts +1 -1
- package/moderncssm/index.js +1 -3
- package/moderncssm/index.module.css +18 -2
- package/moderncssm/types.d.ts +7 -0
- package/moderncssm/utils/constants.d.ts +14 -1
- package/moderncssm/utils/constants.js +14 -1
- package/moderncssm/utils/index.js +2 -2
- package/moderncssm/utils/utils.d.ts +2 -1
- package/moderncssm/utils/utils.js +5 -4
- package/package.json +4 -3
- package/{slide-12155967.js → slide-2cbb0733.js} +13 -3
- package/src/Component.tsx +48 -6
- package/src/components/buttons/index.module.css +21 -0
- package/src/components/{header/buttons.tsx → buttons/index.tsx} +77 -0
- package/src/components/header/Component.tsx +33 -10
- package/src/components/header/index.module.css +0 -20
- package/src/components/header-mobile/Component.tsx +57 -0
- package/src/components/header-mobile/index.module.css +35 -0
- package/src/components/header-mobile/index.ts +1 -0
- package/src/components/image-preview/Component.tsx +131 -28
- package/src/components/image-preview/index.module.css +28 -9
- package/src/components/image-preview/paths.ts +3 -0
- package/src/components/image-viewer/component.tsx +32 -11
- package/src/components/image-viewer/index.module.css +26 -3
- package/src/components/image-viewer/slide.tsx +30 -4
- package/src/components/image-viewer/video/index.module.css +36 -0
- package/src/components/image-viewer/video/index.tsx +159 -0
- package/src/components/index.ts +2 -0
- package/src/components/info-bar/Component.tsx +68 -0
- package/src/components/info-bar/index.module.css +23 -0
- package/src/components/info-bar/index.ts +1 -0
- package/src/components/navigation-bar/Component.tsx +2 -1
- package/src/components/navigation-bar/index.module.css +4 -0
- package/src/context.ts +14 -0
- package/src/index.module.css +18 -2
- package/src/index.ts +1 -1
- package/src/types.ts +15 -5
- package/src/utils/constants.ts +17 -0
- package/src/utils/utils.ts +5 -3
- package/types.d.ts +7 -0
- package/utils/constants.d.ts +14 -1
- package/utils/constants.js +19 -0
- package/utils/index.js +7 -0
- package/utils/utils.d.ts +2 -1
- package/utils/utils.js +5 -3
- package/buttons-ec113bb4.js +0 -37
- package/components/header/buttons.d.ts +0 -0
- package/components/header/buttons.js +0 -20
- package/cssm/components/header/buttons.js +0 -37
- package/esm/buttons-791da71e.js +0 -27
- package/esm/components/header/buttons.d.ts +0 -0
- package/esm/components/header/buttons.js +0 -9
- package/modern/buttons-1859cb8e.js +0 -20
- package/modern/components/header/buttons.d.ts +0 -0
- package/modern/components/header/buttons.js +0 -8
- package/moderncssm/components/header/buttons.d.ts +0 -11
- package/moderncssm/components/header/buttons.js +0 -18
- /package/esm/{slide-7d5a41d1.d.ts → slide-3be75078.d.ts} +0 -0
- /package/modern/{slide-c47386c3.d.ts → slide-df1baab8.d.ts} +0 -0
- /package/{slide-12155967.d.ts → slide-2cbb0733.d.ts} +0 -0
package/cssm/utils/index.js
CHANGED
|
@@ -14,4 +14,11 @@ exports.PLACEHOLDER_WIDTH = utils_utils.PLACEHOLDER_WIDTH;
|
|
|
14
14
|
exports.getImageAlt = utils_utils.getImageAlt;
|
|
15
15
|
exports.getImageKey = utils_utils.getImageKey;
|
|
16
16
|
exports.isSmallImage = utils_utils.isSmallImage;
|
|
17
|
+
exports.isVideo = utils_utils.isVideo;
|
|
18
|
+
exports.GALLERY_EVENTS = utils_constants.GALLERY_EVENTS;
|
|
19
|
+
exports.PREVIEW_HEIGHT_DESKTOP = utils_constants.PREVIEW_HEIGHT_DESKTOP;
|
|
20
|
+
exports.PREVIEW_HEIGHT_MOBILE = utils_constants.PREVIEW_HEIGHT_MOBILE;
|
|
21
|
+
exports.PREVIEW_VIDEO_MULTIPLIER = utils_constants.PREVIEW_VIDEO_MULTIPLIER;
|
|
22
|
+
exports.PREVIEW_WIDTH_DESKTOP = utils_constants.PREVIEW_WIDTH_DESKTOP;
|
|
23
|
+
exports.PREVIEW_WIDTH_MOBILE = utils_constants.PREVIEW_WIDTH_MOBILE;
|
|
17
24
|
exports.TestIds = utils_constants.TestIds;
|
package/cssm/utils/utils.d.ts
CHANGED
|
@@ -4,4 +4,5 @@ declare const PLACEHOLDER_HEIGHT = 300;
|
|
|
4
4
|
declare const getImageKey: ({ name, src }: GalleryImage, index: number) => string;
|
|
5
5
|
declare const getImageAlt: ({ alt, name }: GalleryImage, index: number) => string;
|
|
6
6
|
declare const isSmallImage: (meta?: ImageMeta) => boolean;
|
|
7
|
-
|
|
7
|
+
declare const isVideo: (url: string | undefined) => boolean;
|
|
8
|
+
export { PLACEHOLDER_WIDTH, PLACEHOLDER_HEIGHT, getImageKey, getImageAlt, isSmallImage, isVideo };
|
package/cssm/utils/utils.js
CHANGED
|
@@ -13,14 +13,16 @@ var getImageAlt = function (_a, index) {
|
|
|
13
13
|
return alt || name || "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 ".concat(index + 1);
|
|
14
14
|
};
|
|
15
15
|
var isSmallImage = function (meta) {
|
|
16
|
-
if (
|
|
17
|
-
return
|
|
16
|
+
if (meta && meta.width && meta.height) {
|
|
17
|
+
return meta.width < PLACEHOLDER_WIDTH && meta.height < PLACEHOLDER_HEIGHT;
|
|
18
18
|
}
|
|
19
|
-
return
|
|
19
|
+
return false;
|
|
20
20
|
};
|
|
21
|
+
var isVideo = function (url) { return /(.*?)(\.webm|\.mp4|\.m3u8)$/.test(url !== null && url !== void 0 ? url : ''); };
|
|
21
22
|
|
|
22
23
|
exports.PLACEHOLDER_HEIGHT = PLACEHOLDER_HEIGHT;
|
|
23
24
|
exports.PLACEHOLDER_WIDTH = PLACEHOLDER_WIDTH;
|
|
24
25
|
exports.getImageAlt = getImageAlt;
|
|
25
26
|
exports.getImageKey = getImageKey;
|
|
26
27
|
exports.isSmallImage = isSmallImage;
|
|
28
|
+
exports.isVideo = isVideo;
|
package/esm/Component.js
CHANGED
|
@@ -1,30 +1,48 @@
|
|
|
1
1
|
import React, { useState, useCallback, useEffect } from 'react';
|
|
2
|
+
import cn from 'classnames';
|
|
2
3
|
import { BaseModal } from '@alfalab/core-components-base-modal/esm';
|
|
4
|
+
import { useMedia } from '@alfalab/hooks';
|
|
3
5
|
import { NavigationBar } from './components/navigation-bar/Component.js';
|
|
4
6
|
import { Header } from './components/header/Component.js';
|
|
5
|
-
import 'classnames';
|
|
6
|
-
import '@alfalab/hooks';
|
|
7
7
|
import { GalleryContext } from './context.js';
|
|
8
8
|
import { ImageViewer } from './components/image-viewer/component.js';
|
|
9
|
+
import { InfoBar } from './components/info-bar/Component.js';
|
|
10
|
+
import { HeaderMobile } from './components/header-mobile/Component.js';
|
|
9
11
|
|
|
10
|
-
var styles = {"container":"
|
|
12
|
+
var styles = {"container":"gallery__container_qch4g","modal":"gallery__modal_qch4g","navigationVideo":"gallery__navigationVideo_qch4g","hideNavigation":"gallery__hideNavigation_qch4g"};
|
|
11
13
|
require('./index.css')
|
|
12
14
|
|
|
15
|
+
var DEFAULT_FULL_SCREEN = false;
|
|
16
|
+
var DEFAULT_MUTED_VIDEO = true;
|
|
17
|
+
var DEFAULT_PLAYING_VIDEO = true;
|
|
18
|
+
var DEFAULT_HIDE_NAVIGATION = false;
|
|
13
19
|
var Backdrop = function () { return null; };
|
|
14
20
|
var Gallery = function (_a) {
|
|
15
|
-
var
|
|
21
|
+
var _b;
|
|
22
|
+
var _c, _d;
|
|
23
|
+
var open = _a.open, images = _a.images, slideIndex = _a.slideIndex, _e = _a.initialSlide, initialSlide = _e === void 0 ? 0 : _e, _f = _a.loop, loop = _f === void 0 ? true : _f, onClose = _a.onClose, onSlideIndexChange = _a.onSlideIndexChange;
|
|
16
24
|
var currentSlideIndexState = useState(initialSlide);
|
|
17
25
|
var uncontrolled = slideIndex === undefined;
|
|
18
|
-
var
|
|
26
|
+
var _g = uncontrolled
|
|
19
27
|
? currentSlideIndexState
|
|
20
|
-
: [slideIndex, onSlideIndexChange], currentSlideIndex =
|
|
21
|
-
var
|
|
22
|
-
var
|
|
23
|
-
var
|
|
28
|
+
: [slideIndex, onSlideIndexChange], currentSlideIndex = _g[0], setCurrentSlideIndex = _g[1];
|
|
29
|
+
var _h = useState(), swiper = _h[0], setSwiper = _h[1];
|
|
30
|
+
var _j = useState([]), imagesMeta = _j[0], setImagesMeta = _j[1];
|
|
31
|
+
var _k = useState(DEFAULT_FULL_SCREEN), fullScreen = _k[0], setFullScreen = _k[1];
|
|
32
|
+
var _l = useState(DEFAULT_MUTED_VIDEO), mutedVideo = _l[0], setMutedVideo = _l[1];
|
|
33
|
+
var _m = useState(DEFAULT_PLAYING_VIDEO), playingVideo = _m[0], setPlayingVideo = _m[1];
|
|
34
|
+
var _o = useState(DEFAULT_HIDE_NAVIGATION), hideNavigation = _o[0], setHideNavigation = _o[1];
|
|
35
|
+
var view = useMedia([
|
|
36
|
+
['mobile', '(max-width: 1023px)'],
|
|
37
|
+
['desktop', '(min-width: 1024px)'],
|
|
38
|
+
], 'desktop')[0];
|
|
39
|
+
var isMobile = view === 'mobile';
|
|
40
|
+
var isCurrentVideo = !!((_d = (_c = imagesMeta[currentSlideIndex]) === null || _c === void 0 ? void 0 : _c.player) === null || _d === void 0 ? void 0 : _d.current);
|
|
24
41
|
var slideTo = useCallback(function (index) {
|
|
25
42
|
if (images[index]) {
|
|
26
43
|
setCurrentSlideIndex === null || setCurrentSlideIndex === void 0 ? void 0 : setCurrentSlideIndex(index);
|
|
27
44
|
if (swiper) {
|
|
45
|
+
setPlayingVideo(true);
|
|
28
46
|
swiper.slideTo(index);
|
|
29
47
|
}
|
|
30
48
|
}
|
|
@@ -77,6 +95,10 @@ var Gallery = function (_a) {
|
|
|
77
95
|
break;
|
|
78
96
|
}
|
|
79
97
|
}, [fullScreen, open, slideNext, slidePrev]);
|
|
98
|
+
var onUnmount = useCallback(function () {
|
|
99
|
+
setPlayingVideo(DEFAULT_PLAYING_VIDEO);
|
|
100
|
+
setMutedVideo(DEFAULT_MUTED_VIDEO);
|
|
101
|
+
}, [setPlayingVideo]);
|
|
80
102
|
useEffect(function () {
|
|
81
103
|
if (!uncontrolled && !(swiper === null || swiper === void 0 ? void 0 : swiper.destroyed)) {
|
|
82
104
|
swiper === null || swiper === void 0 ? void 0 : swiper.slideTo(currentSlideIndex);
|
|
@@ -92,6 +114,7 @@ var Gallery = function (_a) {
|
|
|
92
114
|
var showNavigationBar = !singleSlide && !fullScreen;
|
|
93
115
|
// eslint-disable-next-line react/jsx-no-constructed-context-values
|
|
94
116
|
var galleryContext = {
|
|
117
|
+
view: view,
|
|
95
118
|
singleSlide: singleSlide,
|
|
96
119
|
currentSlideIndex: currentSlideIndex,
|
|
97
120
|
images: images,
|
|
@@ -99,6 +122,12 @@ var Gallery = function (_a) {
|
|
|
99
122
|
fullScreen: fullScreen,
|
|
100
123
|
initialSlide: uncontrolled ? initialSlide : currentSlideIndex,
|
|
101
124
|
setFullScreen: setFullScreen,
|
|
125
|
+
playingVideo: playingVideo,
|
|
126
|
+
setPlayingVideo: setPlayingVideo,
|
|
127
|
+
mutedVideo: mutedVideo,
|
|
128
|
+
setMutedVideo: setMutedVideo,
|
|
129
|
+
hideNavigation: hideNavigation,
|
|
130
|
+
setHideNavigation: setHideNavigation,
|
|
102
131
|
setImageMeta: setImageMeta,
|
|
103
132
|
slideNext: slideNext,
|
|
104
133
|
slidePrev: slidePrev,
|
|
@@ -111,11 +140,16 @@ var Gallery = function (_a) {
|
|
|
111
140
|
getCurrentImageMeta: function () { return imagesMeta[currentSlideIndex]; },
|
|
112
141
|
};
|
|
113
142
|
return (React.createElement(GalleryContext.Provider, { value: galleryContext },
|
|
114
|
-
React.createElement(BaseModal, { open: open, className: styles.modal, onEscapeKeyDown: handleEscapeKeyDown, Backdrop: Backdrop },
|
|
143
|
+
React.createElement(BaseModal, { open: open, className: styles.modal, onEscapeKeyDown: handleEscapeKeyDown, Backdrop: Backdrop, onUnmount: onUnmount },
|
|
115
144
|
React.createElement("div", { className: styles.container },
|
|
116
|
-
React.createElement(Header, null),
|
|
145
|
+
view === 'desktop' ? React.createElement(Header, null) : React.createElement(HeaderMobile, null),
|
|
117
146
|
React.createElement(ImageViewer, null),
|
|
118
|
-
|
|
147
|
+
React.createElement("nav", { className: cn((_b = {},
|
|
148
|
+
_b[styles.navigationVideo] = isCurrentVideo && isMobile,
|
|
149
|
+
_b[styles.hideNavigation] = hideNavigation && isMobile,
|
|
150
|
+
_b)) },
|
|
151
|
+
showNavigationBar && React.createElement(NavigationBar, null),
|
|
152
|
+
view === 'mobile' && React.createElement(InfoBar, null))))));
|
|
119
153
|
};
|
|
120
154
|
|
|
121
155
|
export { Gallery };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* hash: 1iwiz */
|
|
2
|
+
: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 */
|
|
3
|
+
} /* deprecated */ :root {
|
|
4
|
+
--color-static-neutral-100-hover: #e7e8eb;
|
|
5
|
+
--color-static-neutral-100-press: #dcdde1;
|
|
6
|
+
--color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
7
|
+
} :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
8
|
+
} :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 */
|
|
9
|
+
} :root {
|
|
10
|
+
|
|
11
|
+
/* Hard */
|
|
12
|
+
|
|
13
|
+
/* Up */
|
|
14
|
+
|
|
15
|
+
/* Hard up */
|
|
16
|
+
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
17
|
+
|
|
18
|
+
/* новые значения, используйте их */
|
|
19
|
+
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
|
+
--gap-2xl: 32px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
21
|
+
|
|
22
|
+
/* новые значения, используйте их */
|
|
23
|
+
--gap-32: var(--gap-2xl);
|
|
24
|
+
} :root {
|
|
25
|
+
} :root {
|
|
26
|
+
} /* сбрасывает синюю подсветку при нажатии */ .gallery__buttons_1q8k1 {
|
|
27
|
+
display: flex;
|
|
28
|
+
padding-left: var(--gap-32)
|
|
29
|
+
} .gallery__buttons_1q8k1 path {
|
|
30
|
+
color: var(--color-static-neutral-translucent-1300-inverted);
|
|
31
|
+
} /* TODO: применять static цвет через prop IconButton'а */ .gallery__iconButton_1q8k1:hover path {
|
|
32
|
+
color: var(--color-static-neutral-100-hover);
|
|
33
|
+
} .gallery__iconButton_1q8k1:active path {
|
|
34
|
+
color: var(--color-static-neutral-100-press);
|
|
35
|
+
}
|
|
@@ -5,7 +5,12 @@ type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
|
|
|
5
5
|
download?: string | boolean;
|
|
6
6
|
};
|
|
7
7
|
declare const Fullscreen: FC<Props>;
|
|
8
|
+
declare const BackArrow: FC<Props>;
|
|
9
|
+
declare const Play: FC<Props>;
|
|
10
|
+
declare const Pause: FC<Props>;
|
|
8
11
|
declare const ExitFullscreen: FC<Props>;
|
|
12
|
+
declare const MuteVideo: FC<Props>;
|
|
13
|
+
declare const UnmuteVideo: FC<Props>;
|
|
9
14
|
declare const Download: FC<Props>;
|
|
10
15
|
declare const Exit: FC<Props>;
|
|
11
|
-
export { Fullscreen, ExitFullscreen, Download, Exit };
|
|
16
|
+
export { Fullscreen, BackArrow, Play, Pause, ExitFullscreen, MuteVideo, UnmuteVideo, Download, Exit };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { __rest, __assign } from 'tslib';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import cn from 'classnames';
|
|
4
|
+
import { IconButton } from '@alfalab/core-components-icon-button/esm';
|
|
5
|
+
import { TooltipDesktop } from '@alfalab/core-components-tooltip/esm/desktop';
|
|
6
|
+
import { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';
|
|
7
|
+
import { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';
|
|
8
|
+
import { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';
|
|
9
|
+
import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
|
|
10
|
+
import { PauseCompactMIcon } from '@alfalab/icons-glyph/PauseCompactMIcon';
|
|
11
|
+
import { PlayCompactMIcon } from '@alfalab/icons-glyph/PlayCompactMIcon';
|
|
12
|
+
import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
|
|
13
|
+
import { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';
|
|
14
|
+
import { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';
|
|
15
|
+
|
|
16
|
+
var styles = {"buttons":"gallery__buttons_1q8k1","iconButton":"gallery__iconButton_1q8k1"};
|
|
17
|
+
require('./index.css')
|
|
18
|
+
|
|
19
|
+
var Fullscreen = function (_a) {
|
|
20
|
+
var buttonRef = _a.buttonRef, restProps = __rest(_a, ["buttonRef"]);
|
|
21
|
+
return (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
|
|
22
|
+
React.createElement(IconButton, __assign({}, restProps, { ref: buttonRef, icon: ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton }))));
|
|
23
|
+
};
|
|
24
|
+
var BackArrow = function (_a) {
|
|
25
|
+
var buttonRef = _a.buttonRef, restProps = __rest(_a, ["buttonRef"]);
|
|
26
|
+
return (React.createElement(IconButton, __assign({}, restProps, { ref: buttonRef, icon: ArrowLeftMIcon, colors: 'inverted', "aria-label": '\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434', className: styles.iconButton })));
|
|
27
|
+
};
|
|
28
|
+
var Play = function (_a) {
|
|
29
|
+
var buttonRef = _a.buttonRef, className = _a.className, restProps = __rest(_a, ["buttonRef", "className"]);
|
|
30
|
+
return (React.createElement(IconButton, __assign({}, restProps, { ref: buttonRef, icon: PlayCompactMIcon, colors: 'inverted', "aria-label": '\u041F\u0440\u043E\u0438\u0433\u0440\u0430\u0442\u044C \u0432\u0438\u0434\u0435\u043E', className: cn(styles.iconButton, className) })));
|
|
31
|
+
};
|
|
32
|
+
var Pause = function (_a) {
|
|
33
|
+
var buttonRef = _a.buttonRef, className = _a.className, restProps = __rest(_a, ["buttonRef", "className"]);
|
|
34
|
+
return (React.createElement(IconButton, __assign({}, restProps, { ref: buttonRef, icon: PauseCompactMIcon, colors: 'inverted', "aria-label": '\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043F\u0430\u0443\u0437\u0443 \u043D\u0430 \u0432\u0438\u0434\u0435\u043E', className: cn(styles.iconButton, className) })));
|
|
35
|
+
};
|
|
36
|
+
var ExitFullscreen = function (_a) {
|
|
37
|
+
var buttonRef = _a.buttonRef, restProps = __rest(_a, ["buttonRef"]);
|
|
38
|
+
return (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
|
|
39
|
+
React.createElement(IconButton, __assign({}, restProps, { ref: buttonRef, icon: ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton }))));
|
|
40
|
+
};
|
|
41
|
+
var MuteVideo = function (_a) {
|
|
42
|
+
var buttonRef = _a.buttonRef, className = _a.className, restProps = __rest(_a, ["buttonRef", "className"]);
|
|
43
|
+
return (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', fallbackPlacements: ['bottom-end'], targetClassName: className },
|
|
44
|
+
React.createElement(IconButton, __assign({}, restProps, { ref: buttonRef, icon: SoundMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton }))));
|
|
45
|
+
};
|
|
46
|
+
var UnmuteVideo = function (_a) {
|
|
47
|
+
var buttonRef = _a.buttonRef, className = _a.className, restProps = __rest(_a, ["buttonRef", "className"]);
|
|
48
|
+
return (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', fallbackPlacements: ['bottom-end'], targetClassName: className },
|
|
49
|
+
React.createElement(IconButton, __assign({}, restProps, { ref: buttonRef, icon: SoundCrossMIcon, colors: 'inverted', "aria-label": '\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton }))));
|
|
50
|
+
};
|
|
51
|
+
var Download = function (props) { return (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
|
|
52
|
+
React.createElement(IconButton, __assign({}, props, { icon: PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })))); };
|
|
53
|
+
var Exit = function (props) { return (React.createElement(IconButton, __assign({}, props, { icon: CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }))); };
|
|
54
|
+
|
|
55
|
+
export { BackArrow, Download, Exit, ExitFullscreen, Fullscreen, MuteVideo, Pause, Play, UnmuteVideo };
|
|
@@ -1,14 +1,35 @@
|
|
|
1
1
|
import React, { useContext, useRef, useEffect } from 'react';
|
|
2
2
|
import { GalleryContext } from '../../context.js';
|
|
3
|
-
import { isSmallImage } from '../../utils/utils.js';
|
|
4
|
-
import { TestIds } from '../../utils/constants.js';
|
|
3
|
+
import { isSmallImage, isVideo } from '../../utils/utils.js';
|
|
4
|
+
import { TestIds, GALLERY_EVENTS } from '../../utils/constants.js';
|
|
5
|
+
import { Download, Exit, ExitFullscreen, Fullscreen, UnmuteVideo, MuteVideo } from '../buttons/index.js';
|
|
5
6
|
import { HeaderInfoBlock } from '../header-info-block/Component.js';
|
|
6
|
-
|
|
7
|
+
|
|
8
|
+
var styles = {"header":"gallery__header_354rh"};
|
|
9
|
+
require('./index.css')
|
|
7
10
|
|
|
8
11
|
var Header = function () {
|
|
9
12
|
var _a;
|
|
10
|
-
var _b = useContext(GalleryContext), currentSlideIndex = _b.currentSlideIndex, singleSlide = _b.singleSlide, images = _b.images, fullScreen = _b.fullScreen, getCurrentImageMeta = _b.getCurrentImageMeta, getCurrentImage = _b.getCurrentImage, setFullScreen = _b.setFullScreen, onClose = _b.onClose;
|
|
13
|
+
var _b = useContext(GalleryContext), currentSlideIndex = _b.currentSlideIndex, singleSlide = _b.singleSlide, images = _b.images, fullScreen = _b.fullScreen, getCurrentImageMeta = _b.getCurrentImageMeta, getCurrentImage = _b.getCurrentImage, setFullScreen = _b.setFullScreen, onClose = _b.onClose, mutedVideo = _b.mutedVideo, setMutedVideo = _b.setMutedVideo;
|
|
14
|
+
var currentImage = getCurrentImage();
|
|
15
|
+
var meta = getCurrentImageMeta();
|
|
11
16
|
var toggleFullScreenButton = useRef(null);
|
|
17
|
+
var onMuteButtonClick = function () {
|
|
18
|
+
var _a, _b;
|
|
19
|
+
if (mutedVideo) {
|
|
20
|
+
var customEvent = new CustomEvent(GALLERY_EVENTS.ON_UNMUTE, {
|
|
21
|
+
detail: { player: (_a = meta === null || meta === void 0 ? void 0 : meta.player) === null || _a === void 0 ? void 0 : _a.current },
|
|
22
|
+
});
|
|
23
|
+
dispatchEvent(customEvent);
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
var customEvent = new CustomEvent(GALLERY_EVENTS.ON_MUTE, {
|
|
27
|
+
detail: { player: (_b = meta === null || meta === void 0 ? void 0 : meta.player) === null || _b === void 0 ? void 0 : _b.current },
|
|
28
|
+
});
|
|
29
|
+
dispatchEvent(customEvent);
|
|
30
|
+
}
|
|
31
|
+
setMutedVideo(!mutedVideo);
|
|
32
|
+
};
|
|
12
33
|
var closeFullScreen = function () {
|
|
13
34
|
setFullScreen(false);
|
|
14
35
|
};
|
|
@@ -20,21 +41,21 @@ var Header = function () {
|
|
|
20
41
|
toggleFullScreenButton.current.focus();
|
|
21
42
|
}
|
|
22
43
|
}, [fullScreen]);
|
|
23
|
-
var currentImage = getCurrentImage();
|
|
24
44
|
var canDownload = (_a = currentImage === null || currentImage === void 0 ? void 0 : currentImage.canDownload) !== null && _a !== void 0 ? _a : true;
|
|
25
45
|
var filename = (currentImage === null || currentImage === void 0 ? void 0 : currentImage.name) || '';
|
|
26
|
-
var description = singleSlide || !images.length
|
|
27
|
-
? ''
|
|
28
|
-
: "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 ".concat(currentSlideIndex + 1, " \u0438\u0437 ").concat(images.length);
|
|
29
|
-
var meta = getCurrentImageMeta();
|
|
46
|
+
var description = singleSlide || !images.length ? '' : "".concat(currentSlideIndex + 1, " \u0438\u0437 ").concat(images.length);
|
|
30
47
|
var showFullScreenButton = !isSmallImage(meta) && !(meta === null || meta === void 0 ? void 0 : meta.broken);
|
|
31
48
|
var showDownloadButton = !(meta === null || meta === void 0 ? void 0 : meta.broken) && canDownload;
|
|
32
49
|
var renderToggleFullScreenButton = function () {
|
|
33
50
|
return fullScreen ? (React.createElement(ExitFullscreen, { onClick: closeFullScreen, buttonRef: toggleFullScreenButton, dataTestId: TestIds.EXIT_FULLSCREEN_BUTTON })) : (React.createElement(Fullscreen, { onClick: openFullScreen, buttonRef: toggleFullScreenButton, dataTestId: TestIds.FULLSCREEN_BUTTON }));
|
|
34
51
|
};
|
|
52
|
+
var renderToggleMuteVideo = function () {
|
|
53
|
+
return mutedVideo ? (React.createElement(UnmuteVideo, { onClick: onMuteButtonClick, dataTestId: TestIds.UNMUTE_BUTTON })) : (React.createElement(MuteVideo, { onClick: onMuteButtonClick, dataTestId: TestIds.MUTE_BUTTON }));
|
|
54
|
+
};
|
|
35
55
|
return (React.createElement("div", { className: styles.header },
|
|
36
56
|
React.createElement(HeaderInfoBlock, { filename: filename, description: description }),
|
|
37
57
|
React.createElement("div", { className: styles.buttons },
|
|
58
|
+
isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src) && renderToggleMuteVideo(),
|
|
38
59
|
showFullScreenButton && renderToggleFullScreenButton(),
|
|
39
60
|
showDownloadButton && (React.createElement(Download, { href: currentImage === null || currentImage === void 0 ? void 0 : currentImage.src, download: currentImage === null || currentImage === void 0 ? void 0 : currentImage.name, dataTestId: TestIds.DOWNLOAD_BUTTON })),
|
|
40
61
|
React.createElement(Exit, { onClick: onClose, dataTestId: TestIds.CLOSE_BUTTON }))));
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 11b38 */
|
|
2
2
|
: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 */
|
|
3
|
-
} /* deprecated */ :root {
|
|
4
|
-
--color-static-neutral-100-hover: #e7e8eb;
|
|
5
|
-
--color-static-neutral-100-press: #dcdde1;
|
|
6
|
-
--color-static-neutral-translucent-1300-inverted: rgba(255, 255, 255, 0.94); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
|
+
} /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
7
4
|
} :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
8
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 */
|
|
9
6
|
} :root {
|
|
@@ -18,29 +15,18 @@
|
|
|
18
15
|
/* новые значения, используйте их */
|
|
19
16
|
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
17
|
--gap-m: 16px; /* deprecated */ /* deprecated */
|
|
21
|
-
--gap-xl: 24px; /* deprecated */
|
|
22
|
-
--gap-2xl: 32px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
18
|
+
--gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
23
19
|
|
|
24
20
|
/* новые значения, используйте их */
|
|
25
21
|
--gap-16: var(--gap-m);
|
|
26
22
|
--gap-24: var(--gap-xl);
|
|
27
|
-
--gap-32: var(--gap-2xl);
|
|
28
23
|
} :root {
|
|
29
24
|
} :root {
|
|
30
|
-
} /* сбрасывает синюю подсветку при нажатии */ .
|
|
25
|
+
} /* сбрасывает синюю подсветку при нажатии */ .gallery__header_354rh {
|
|
31
26
|
display: flex;
|
|
32
27
|
justify-content: space-between;
|
|
33
28
|
flex-shrink: 0;
|
|
34
29
|
width: 100%;
|
|
35
30
|
padding: var(--gap-16) var(--gap-24);
|
|
36
31
|
box-sizing: border-box;
|
|
37
|
-
}
|
|
38
|
-
display: flex;
|
|
39
|
-
padding-left: var(--gap-32)
|
|
40
|
-
} .gallery__buttons_1eyvr path {
|
|
41
|
-
color: var(--color-static-neutral-translucent-1300-inverted);
|
|
42
|
-
} /* TODO: применять static цвет через prop IconButton'а */ .gallery__iconButton_1eyvr:hover path {
|
|
43
|
-
color: var(--color-static-neutral-100-hover);
|
|
44
|
-
} .gallery__iconButton_1eyvr:active path {
|
|
45
|
-
color: var(--color-static-neutral-100-press);
|
|
46
|
-
}
|
|
32
|
+
}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { Typography } from '@alfalab/core-components-typography/esm';
|
|
3
3
|
import { splitFilename } from '../../utils/split-filename.js';
|
|
4
4
|
|
|
5
|
-
var styles = {"info":"
|
|
5
|
+
var styles = {"info":"gallery__info_1ioku","filenameHead":"gallery__filenameHead_1ioku","filenameContainer":"gallery__filenameContainer_1ioku","description":"gallery__description_1ioku"};
|
|
6
6
|
require('./index.css')
|
|
7
7
|
|
|
8
8
|
var HeaderInfoBlock = function (_a) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1i0p0 */
|
|
2
2
|
: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 */
|
|
3
3
|
} /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
4
|
} :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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -20,21 +20,21 @@
|
|
|
20
20
|
--gap-4: var(--gap-2xs);
|
|
21
21
|
} :root {
|
|
22
22
|
} :root {
|
|
23
|
-
} /* сбрасывает синюю подсветку при нажатии */ .
|
|
23
|
+
} /* сбрасывает синюю подсветку при нажатии */ .gallery__info_1ioku {
|
|
24
24
|
height: 100%;
|
|
25
25
|
display: flex;
|
|
26
26
|
flex-direction: column;
|
|
27
27
|
justify-content: center;
|
|
28
28
|
overflow: hidden;
|
|
29
|
-
} .
|
|
29
|
+
} .gallery__filenameHead_1ioku {
|
|
30
30
|
display: inline;
|
|
31
31
|
text-overflow: ellipsis;
|
|
32
32
|
overflow: hidden;
|
|
33
33
|
white-space: nowrap;
|
|
34
|
-
} .
|
|
34
|
+
} .gallery__filenameContainer_1ioku {
|
|
35
35
|
overflow: hidden;
|
|
36
36
|
display: inline-flex;
|
|
37
|
-
} .
|
|
37
|
+
} .gallery__description_1ioku {
|
|
38
38
|
display: inline;
|
|
39
39
|
text-overflow: ellipsis;
|
|
40
40
|
overflow: hidden;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React, { useContext } from 'react';
|
|
2
|
+
import cn from 'classnames';
|
|
3
|
+
import { Typography } from '@alfalab/core-components-typography/esm';
|
|
4
|
+
import { GalleryContext } from '../../context.js';
|
|
5
|
+
import { isVideo } from '../../utils/utils.js';
|
|
6
|
+
import { TestIds } from '../../utils/constants.js';
|
|
7
|
+
import { BackArrow, Download } from '../buttons/index.js';
|
|
8
|
+
|
|
9
|
+
var styles = {"headerMobile":"gallery__headerMobile_6cw7u","video":"gallery__video_6cw7u","hide":"gallery__hide_6cw7u","leftButton":"gallery__leftButton_6cw7u","rightButtons":"gallery__rightButtons_6cw7u","description":"gallery__description_6cw7u"};
|
|
10
|
+
require('./index.css')
|
|
11
|
+
|
|
12
|
+
var HeaderMobile = function () {
|
|
13
|
+
var _a;
|
|
14
|
+
var _b;
|
|
15
|
+
var _c = useContext(GalleryContext), onClose = _c.onClose, images = _c.images, currentSlideIndex = _c.currentSlideIndex, getCurrentImage = _c.getCurrentImage, getCurrentImageMeta = _c.getCurrentImageMeta, hideNavigation = _c.hideNavigation;
|
|
16
|
+
var currentImage = getCurrentImage();
|
|
17
|
+
var meta = getCurrentImageMeta();
|
|
18
|
+
var description = images.length > 1 && "".concat(currentSlideIndex + 1, " \u0438\u0437 ").concat(images.length);
|
|
19
|
+
var canDownload = (_b = currentImage === null || currentImage === void 0 ? void 0 : currentImage.canDownload) !== null && _b !== void 0 ? _b : true;
|
|
20
|
+
var showDownloadButton = !(meta === null || meta === void 0 ? void 0 : meta.broken) && canDownload;
|
|
21
|
+
return (React.createElement("div", { className: cn(styles.headerMobile, (_a = {},
|
|
22
|
+
_a[styles.video] = isVideo(currentImage === null || currentImage === void 0 ? void 0 : currentImage.src),
|
|
23
|
+
_a[styles.hide] = hideNavigation,
|
|
24
|
+
_a)) },
|
|
25
|
+
React.createElement(BackArrow, { onClick: onClose }),
|
|
26
|
+
React.createElement(Typography.Text, { className: styles.description, tag: 'div', view: 'component-primary', color: 'static-primary-light' }, description),
|
|
27
|
+
React.createElement("div", { className: styles.rightButtons }, showDownloadButton && (React.createElement(Download, { href: currentImage === null || currentImage === void 0 ? void 0 : currentImage.src, download: currentImage === null || currentImage === void 0 ? void 0 : currentImage.name, dataTestId: TestIds.DOWNLOAD_BUTTON })))));
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export { HeaderMobile };
|