@gravity-ui/page-constructor 4.5.0 → 4.5.2

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 (12) hide show
  1. package/build/cjs/blocks/Icons/Icons.js +2 -1
  2. package/build/cjs/components/ReactPlayer/ReactPlayer.js +4 -2
  3. package/build/cjs/components/VideoBlock/VideoBlock.js +1 -1
  4. package/build/cjs/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js +1 -1
  5. package/build/cjs/navigation/components/SocialIcon/SocialIcon.js +2 -1
  6. package/build/esm/blocks/Icons/Icons.js +2 -1
  7. package/build/esm/components/ReactPlayer/ReactPlayer.js +6 -4
  8. package/build/esm/components/VideoBlock/VideoBlock.js +1 -1
  9. package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js +1 -1
  10. package/build/esm/navigation/components/SocialIcon/SocialIcon.js +2 -1
  11. package/package.json +1 -1
  12. package/widget/index.js +1 -1
package/build/cjs/blocks/Icons/Icons.js CHANGED
@@ -15,7 +15,8 @@ const Icons = ({ title, size = 's', items }) => {
15
15
  title && react_1.default.createElement(components_1.Title, { className: b('header'), title: title, colSizes: { all: 12 } }),
16
16
  items.map((item) => {
17
17
  const itemContent = getItemContent(item);
18
- return item.url ? (react_1.default.createElement("a", Object.assign({ className: b('item'), key: item.url, href: item.url }, (0, utils_1.getLinkProps)(item.url, hostname)), itemContent)) : (react_1.default.createElement("div", { className: b('item'), key: item.url }, itemContent));
18
+ const { url, text } = item;
19
+ return url ? (react_1.default.createElement("a", Object.assign({ className: b('item'), key: url, href: url, "aria-label": text, title: text }, (0, utils_1.getLinkProps)(url, hostname)), itemContent)) : (react_1.default.createElement("div", { className: b('item'), key: url }, itemContent));
19
20
  })));
20
21
  };
21
22
  exports.default = Icons;
package/build/cjs/components/ReactPlayer/ReactPlayer.js CHANGED
@@ -37,6 +37,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
37
37
  const [started, setStarted] = (0, react_1.useState)(autoPlay);
38
38
  const [paused, setPaused] = (0, react_1.useState)(false);
39
39
  const [ended, setEnded] = (0, react_1.useState)(false);
40
+ const [isMounted, setIsMounted] = react_1.default.useState(false);
41
+ (0, hooks_1.useMount)(() => setIsMounted(true));
40
42
  const videoSrc = (0, react_1.useMemo)(() => (0, utils_2.checkYoutubeVideos)(src), [src]);
41
43
  const eventsArray = (0, react_1.useMemo)(() => {
42
44
  if (analyticsEvents) {
@@ -195,9 +197,9 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
195
197
  },
196
198
  }, elapsedTimePercent: elapsedTimePercent }));
197
199
  }, [controls, isPlaying, customBarControlsClassName, changeMute]);
198
- return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
200
+ return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
199
201
  react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
200
- renderCustomBarControls(muted, playedPercent)));
202
+ renderCustomBarControls(muted, playedPercent))) : null));
201
203
  });
202
204
  function getHeight(width) {
203
205
  return (width / 16) * 9;
package/build/cjs/components/VideoBlock/VideoBlock.js CHANGED
@@ -95,7 +95,7 @@ const VideoBlock = (props) => {
95
95
  }
96
96
  return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
97
97
  react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
98
- playButton || (react_1.default.createElement("button", { className: b('button') },
98
+ playButton || (react_1.default.createElement("button", { title: "Play", className: b('button') },
99
99
  react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 })))))));
100
100
  };
101
101
  exports.default = VideoBlock;
package/build/cjs/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js CHANGED
@@ -24,7 +24,7 @@ const NavigationLink = (props) => {
24
24
  }
25
25
  else {
26
26
  return (react_1.default.createElement(components_1.RouterLink, { href: url, passHref: true },
27
- react_1.default.createElement("a", Object.assign({}, rest, { className: classes }), content)));
27
+ react_1.default.createElement("a", Object.assign({ title: text }, rest, { className: classes }), content)));
28
28
  }
29
29
  };
30
30
  exports.NavigationLink = NavigationLink;
package/build/cjs/navigation/components/SocialIcon/SocialIcon.js CHANGED
@@ -8,7 +8,8 @@ const utils_2 = require("../../../utils");
8
8
  const b = (0, utils_2.block)('social-icon');
9
9
  const SocialIcon = ({ icon, url, className }) => {
10
10
  const iconData = (0, utils_1.getMediaImage)(icon);
11
- return (react_1.default.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
11
+ const { alt } = iconData;
12
+ return (react_1.default.createElement("a", { href: url, "aria-label": alt, title: alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
12
13
  react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, iconData))));
13
14
  };
14
15
  exports.default = SocialIcon;
package/build/esm/blocks/Icons/Icons.js CHANGED
@@ -13,7 +13,8 @@ const Icons = ({ title, size = 's', items }) => {
13
13
  title && React.createElement(Title, { className: b('header'), title: title, colSizes: { all: 12 } }),
14
14
  items.map((item) => {
15
15
  const itemContent = getItemContent(item);
16
- return item.url ? (React.createElement("a", Object.assign({ className: b('item'), key: item.url, href: item.url }, getLinkProps(item.url, hostname)), itemContent)) : (React.createElement("div", { className: b('item'), key: item.url }, itemContent));
16
+ const { url, text } = item;
17
+ return url ? (React.createElement("a", Object.assign({ className: b('item'), key: url, href: url, "aria-label": text, title: text }, getLinkProps(url, hostname)), itemContent)) : (React.createElement("div", { className: b('item'), key: url }, itemContent));
17
18
  })));
18
19
  };
19
20
  export default Icons;
package/build/esm/components/ReactPlayer/ReactPlayer.js CHANGED
@@ -1,11 +1,11 @@
1
- import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
1
+ import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
2
2
  import { Icon } from '@gravity-ui/uikit';
3
3
  import _ from 'lodash';
4
4
  import ReactPlayer from 'react-player';
5
5
  import { MetrikaContext } from '../../context/metrikaContext';
6
6
  import { MobileContext } from '../../context/mobileContext';
7
7
  import { VideoContext } from '../../context/videoContext';
8
- import { useAnalytics } from '../../hooks';
8
+ import { useAnalytics, useMount } from '../../hooks';
9
9
  import { PlayVideo } from '../../icons';
10
10
  import { DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
11
11
  import { block } from '../../utils';
@@ -34,6 +34,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
34
34
  const [started, setStarted] = useState(autoPlay);
35
35
  const [paused, setPaused] = useState(false);
36
36
  const [ended, setEnded] = useState(false);
37
+ const [isMounted, setIsMounted] = React.useState(false);
38
+ useMount(() => setIsMounted(true));
37
39
  const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
38
40
  const eventsArray = useMemo(() => {
39
41
  if (analyticsEvents) {
@@ -192,9 +194,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
192
194
  },
193
195
  }, elapsedTimePercent: elapsedTimePercent }));
194
196
  }, [controls, isPlaying, customBarControlsClassName, changeMute]);
195
- return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
197
+ return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick }, isMounted ? (React.createElement(Fragment, null,
196
198
  React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
197
- renderCustomBarControls(muted, playedPercent)));
199
+ renderCustomBarControls(muted, playedPercent))) : null));
198
200
  });
199
201
  function getHeight(width) {
200
202
  return (width / 16) * 9;
package/build/esm/components/VideoBlock/VideoBlock.js CHANGED
@@ -91,7 +91,7 @@ const VideoBlock = (props) => {
91
91
  }
92
92
  return (React.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
93
93
  React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
94
- playButton || (React.createElement("button", { className: b('button') },
94
+ playButton || (React.createElement("button", { title: "Play", className: b('button') },
95
95
  React.createElement(Icon, { className: b('icon'), data: PlayVideo, size: 24 })))))));
96
96
  };
97
97
  export default VideoBlock;
package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.js CHANGED
@@ -22,6 +22,6 @@ export const NavigationLink = (props) => {
22
22
  }
23
23
  else {
24
24
  return (React.createElement(RouterLink, { href: url, passHref: true },
25
- React.createElement("a", Object.assign({}, rest, { className: classes }), content)));
25
+ React.createElement("a", Object.assign({ title: text }, rest, { className: classes }), content)));
26
26
  }
27
27
  };
package/build/esm/navigation/components/SocialIcon/SocialIcon.js CHANGED
@@ -6,7 +6,8 @@ import './SocialIcon.css';
6
6
  const b = block('social-icon');
7
7
  const SocialIcon = ({ icon, url, className }) => {
8
8
  const iconData = getMediaImage(icon);
9
- return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
9
+ const { alt } = iconData;
10
+ return (React.createElement("a", { href: url, "aria-label": alt, title: alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
10
11
  React.createElement(Image, Object.assign({ className: b('icon') }, iconData))));
11
12
  };
12
13
  export default SocialIcon;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "4.5.0",
3
+ "version": "4.5.2",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {