@gravity-ui/page-constructor 2.22.0-alpha.0 → 2.22.0

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/build/cjs/components/FullscreenMedia/FullscreenMedia.js +3 -1
  3. package/build/cjs/components/Media/Image/Image.js +3 -3
  4. package/build/cjs/components/Media/Media.js +5 -3
  5. package/build/esm/components/FullscreenMedia/FullscreenMedia.js +3 -1
  6. package/build/esm/components/Media/Image/Image.js +3 -3
  7. package/build/esm/components/Media/Media.js +5 -3
  8. package/package.json +1 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.22.0](https://github.com/gravity-ui/page-constructor/compare/v2.21.0...v2.22.0) (2023-05-31)
4
+
5
+
6
+ ### Features
7
+
8
+ * **Media:** add fullscreen video ([#345](https://github.com/gravity-ui/page-constructor/issues/345)) ([516a9a8](https://github.com/gravity-ui/page-constructor/commit/516a9a8423d710b6ecad33046121c489fa876e30))
9
+
3
10
  ## [2.21.0](https://github.com/gravity-ui/page-constructor/compare/v2.20.1...v2.21.0) (2023-05-29)
4
11
 
5
12
 
package/build/cjs/components/FullscreenMedia/FullscreenMedia.js CHANGED
@@ -10,6 +10,8 @@ const b = (0, utils_1.block)('full-screen-media');
10
10
  const FULL_SCREEN_ICON_SIZE = 18;
11
11
  const CLOSE_ICON_SIZE = 30;
12
12
  const getMediaClass = (type) => b('modal-media', { type });
13
+ // TODO delete along with showFullScreenIcon props
14
+ const getShowFullscreenIcon = ({ showFullScreenIcon = true, showFullscreenIcon = true }) => showFullScreenIcon && showFullscreenIcon;
13
15
  const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIcon = true, }) => {
14
16
  const [isOpened, setIsOpened] = (0, react_1.useState)(false);
15
17
  const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
@@ -24,7 +26,7 @@ const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIc
24
26
  return (react_1.default.createElement("div", { className: b() },
25
27
  react_1.default.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
26
28
  children({ className: b('inline-media') }),
27
- showFullScreenIcon && showFullscreenIcon && (react_1.default.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
29
+ getShowFullscreenIcon({ showFullScreenIcon, showFullscreenIcon }) && (react_1.default.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
28
30
  react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
29
31
  isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
30
32
  react_1.default.createElement("div", { className: b('modal-content') },
package/build/cjs/components/Media/Image/Image.js CHANGED
@@ -34,7 +34,7 @@ const Image = (props) => {
34
34
  parallaxInterpolate = springScrollY.interpolate((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
35
35
  }
36
36
  const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
37
- const fullscreenImage = (item) => {
37
+ const renderFullscreenImage = (item) => {
38
38
  const itemData = (0, utils_2.getMediaImage)(item);
39
39
  return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
40
40
  };
@@ -49,13 +49,13 @@ const Image = (props) => {
49
49
  };
50
50
  const imageSlider = (imageArray) => {
51
51
  const fullscreenItem = fullscreen === undefined || fullscreen;
52
- return (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? fullscreenImage(item) : imageOnly(item))));
52
+ return (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))));
53
53
  };
54
54
  if (Array.isArray(image)) {
55
55
  return imageSlider(image);
56
56
  }
57
57
  if (fullscreen) {
58
- return fullscreenImage(image);
58
+ return renderFullscreenImage(image);
59
59
  }
60
60
  return isBackground ? imageBackground(image) : imageOnly(image);
61
61
  };
package/build/cjs/components/Media/Media.js CHANGED
@@ -10,6 +10,8 @@ const FullscreenVideo_1 = tslib_1.__importDefault(require("./FullscreenVideo/Ful
10
10
  const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
11
11
  const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
12
12
  const b = (0, utils_1.block)('Media');
13
+ // TODO delete along with fullScreen props
14
+ const getFullscreen = ({ fullScreen, fullscreen }) => fullScreen || fullscreen;
13
15
  const Media = (props) => {
14
16
  const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, fullscreen, analyticsEvents, } = props;
15
17
  const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
@@ -17,7 +19,7 @@ const Media = (props) => {
17
19
  const content = (0, react_1.useMemo)(() => {
18
20
  let result = [];
19
21
  if (image) {
20
- result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullScreen || fullscreen }));
22
+ result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: getFullscreen({ fullScreen, fullscreen }) }));
21
23
  }
22
24
  if (video) {
23
25
  const videoProps = {
@@ -34,7 +36,7 @@ const Media = (props) => {
34
36
  hasVideoFallback,
35
37
  setHasVideoFallback,
36
38
  };
37
- if (fullScreen || fullscreen) {
39
+ if (getFullscreen({ fullScreen, fullscreen })) {
38
40
  result.push(react_1.default.createElement(FullscreenVideo_1.default, Object.assign({}, videoProps)));
39
41
  }
40
42
  else {
@@ -42,7 +44,7 @@ const Media = (props) => {
42
44
  }
43
45
  }
44
46
  if (youtube) {
45
- result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullScreen || fullscreen }));
47
+ result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: getFullscreen({ fullScreen, fullscreen }) }));
46
48
  }
47
49
  if (dataLens) {
48
50
  result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
package/build/esm/components/FullscreenMedia/FullscreenMedia.js CHANGED
@@ -8,6 +8,8 @@ const b = block('full-screen-media');
8
8
  const FULL_SCREEN_ICON_SIZE = 18;
9
9
  const CLOSE_ICON_SIZE = 30;
10
10
  const getMediaClass = (type) => b('modal-media', { type });
11
+ // TODO delete along with showFullScreenIcon props
12
+ const getShowFullscreenIcon = ({ showFullScreenIcon = true, showFullscreenIcon = true }) => showFullScreenIcon && showFullscreenIcon;
11
13
  const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIcon = true, }) => {
12
14
  const [isOpened, setIsOpened] = useState(false);
13
15
  const isMobile = useContext(MobileContext);
@@ -22,7 +24,7 @@ const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIc
22
24
  return (React.createElement("div", { className: b() },
23
25
  React.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
24
26
  children({ className: b('inline-media') }),
25
- showFullScreenIcon && showFullscreenIcon && (React.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
27
+ getShowFullscreenIcon({ showFullScreenIcon, showFullscreenIcon }) && (React.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
26
28
  React.createElement(Icon, { data: FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
27
29
  isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
28
30
  React.createElement("div", { className: b('modal-content') },
package/build/esm/components/Media/Image/Image.js CHANGED
@@ -32,7 +32,7 @@ const Image = (props) => {
32
32
  parallaxInterpolate = springScrollY.interpolate((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
33
33
  }
34
34
  const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
35
- const fullscreenImage = (item) => {
35
+ const renderFullscreenImage = (item) => {
36
36
  const itemData = getMediaImage(item);
37
37
  return (React.createElement(FullscreenImage, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
38
38
  };
@@ -47,13 +47,13 @@ const Image = (props) => {
47
47
  };
48
48
  const imageSlider = (imageArray) => {
49
49
  const fullscreenItem = fullscreen === undefined || fullscreen;
50
- return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? fullscreenImage(item) : imageOnly(item))));
50
+ return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))));
51
51
  };
52
52
  if (Array.isArray(image)) {
53
53
  return imageSlider(image);
54
54
  }
55
55
  if (fullscreen) {
56
- return fullscreenImage(image);
56
+ return renderFullscreenImage(image);
57
57
  }
58
58
  return isBackground ? imageBackground(image) : imageOnly(image);
59
59
  };
package/build/esm/components/Media/Media.js CHANGED
@@ -7,6 +7,8 @@ import Image from './Image/Image';
7
7
  import Video from './Video/Video';
8
8
  import './Media.css';
9
9
  const b = block('Media');
10
+ // TODO delete along with fullScreen props
11
+ const getFullscreen = ({ fullScreen, fullscreen }) => fullScreen || fullscreen;
10
12
  export const Media = (props) => {
11
13
  const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, fullscreen, analyticsEvents, } = props;
12
14
  const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
@@ -14,7 +16,7 @@ export const Media = (props) => {
14
16
  const content = useMemo(() => {
15
17
  let result = [];
16
18
  if (image) {
17
- result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullScreen || fullscreen }));
19
+ result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: getFullscreen({ fullScreen, fullscreen }) }));
18
20
  }
19
21
  if (video) {
20
22
  const videoProps = {
@@ -31,7 +33,7 @@ export const Media = (props) => {
31
33
  hasVideoFallback,
32
34
  setHasVideoFallback,
33
35
  };
34
- if (fullScreen || fullscreen) {
36
+ if (getFullscreen({ fullScreen, fullscreen })) {
35
37
  result.push(React.createElement(FullscreenVideo, Object.assign({}, videoProps)));
36
38
  }
37
39
  else {
@@ -39,7 +41,7 @@ export const Media = (props) => {
39
41
  }
40
42
  }
41
43
  if (youtube) {
42
- result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullScreen || fullscreen }));
44
+ result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: getFullscreen({ fullScreen, fullscreen }) }));
43
45
  }
44
46
  if (dataLens) {
45
47
  result = React.createElement(DataLens, { dataLens: dataLens });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "2.22.0-alpha.0",
3
+ "version": "2.22.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -139,8 +139,5 @@
139
139
  "*.{json,yaml,yml,md}": [
140
140
  "prettier --write"
141
141
  ]
142
- },
143
- "publishConfig": {
144
- "tag": "alpha"
145
142
  }
146
143
  }