@gravity-ui/page-constructor 3.17.2 → 3.18.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 (15) hide show
  1. package/build/cjs/components/MetaInfo/MetaInfo.css +0 -2
  2. package/build/cjs/components/MetaInfo/MetaInfo.js +2 -1
  3. package/build/cjs/components/ReactPlayer/ReactPlayer.js +4 -2
  4. package/build/cjs/containers/PageConstructor/PageConstructor.css +4 -0
  5. package/build/cjs/text-transform/config.js +1 -1
  6. package/build/esm/components/MetaInfo/MetaInfo.css +0 -2
  7. package/build/esm/components/MetaInfo/MetaInfo.js +2 -1
  8. package/build/esm/components/ReactPlayer/ReactPlayer.js +6 -4
  9. package/build/esm/containers/PageConstructor/PageConstructor.css +4 -0
  10. package/build/esm/text-transform/config.js +1 -1
  11. package/package.json +1 -1
  12. package/server/text-transform/config.js +1 -1
  13. package/styles/styles.css +4 -0
  14. package/styles/yfm.scss +7 -0
  15. package/widget/index.js +1 -1
package/build/cjs/components/MetaInfo/MetaInfo.css CHANGED
@@ -5,8 +5,6 @@ unpredictable css rules order in build */
5
5
  line-height: var(--yc-text-body-2-line-height);
6
6
  display: flex;
7
7
  align-items: center;
8
- font-weight: 500;
9
- color: var(--pc-media-card-meta-info-color);
10
8
  }
11
9
  .pc-meta-info__item:not(:first-child) {
12
10
  margin-left: 16px;
package/build/cjs/components/MetaInfo/MetaInfo.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importDefault(require("react"));
5
5
  const utils_1 = require("../../utils");
6
+ const index_1 = require("../index");
6
7
  const b = (0, utils_1.block)('meta-info');
7
- const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
8
+ const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement(index_1.YFMWrapper, { content: metaInfoItem, key: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
8
9
  exports.default = MetaInfo;
package/build/cjs/components/ReactPlayer/ReactPlayer.js CHANGED
@@ -36,6 +36,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
36
36
  const [started, setStarted] = (0, react_1.useState)(autoPlay);
37
37
  const [paused, setPaused] = (0, react_1.useState)(false);
38
38
  const [ended, setEnded] = (0, react_1.useState)(false);
39
+ const [isMounted, setIsMounted] = react_1.default.useState(false);
40
+ (0, hooks_1.useMount)(() => setIsMounted(true));
39
41
  const videoSrc = (0, react_1.useMemo)(() => (0, utils_2.checkYoutubeVideos)(src), [src]);
40
42
  const eventsArray = (0, react_1.useMemo)(() => {
41
43
  if (analyticsEvents) {
@@ -194,9 +196,9 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
194
196
  },
195
197
  }, elapsedTimePercent: elapsedTimePercent }));
196
198
  }, [controls, isPlaying, customBarControlsClassName, changeMute]);
197
- return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
199
+ return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
198
200
  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 }),
199
- renderCustomBarControls(muted, playedPercent)));
201
+ renderCustomBarControls(muted, playedPercent))) : null));
200
202
  });
201
203
  function getHeight(width) {
202
204
  return (width / 16) * 9;
package/build/cjs/containers/PageConstructor/PageConstructor.css CHANGED
@@ -64,6 +64,10 @@ unpredictable css rules order in build */
64
64
  .yfm_constructor.yfm_constructor_notice p {
65
65
  color: var(--yc-color-text-secondary);
66
66
  }
67
+ .yfm_constructor.yfm_constructor_meta_info p {
68
+ color: var(--pc-media-card-meta-info-color);
69
+ font-weight: var(--g-text-accent-font-weight);
70
+ }
67
71
  .yfm_constructor.yfm_constructor ul,
68
72
  .yfm_constructor.yfm_constructor ol,
69
73
  .yfm_constructor.yfm_constructor li,
package/build/cjs/text-transform/config.js CHANGED
@@ -125,7 +125,7 @@ exports.config = {
125
125
  {
126
126
  fields: ['metaInfo'],
127
127
  parser: (0, common_1.createItemsParser)([]),
128
- transformer: common_1.typografTransformer,
128
+ transformer: common_1.yfmTransformer,
129
129
  },
130
130
  ],
131
131
  [models_1.SubBlockType.Quote]: {
package/build/esm/components/MetaInfo/MetaInfo.css CHANGED
@@ -5,8 +5,6 @@ unpredictable css rules order in build */
5
5
  line-height: var(--yc-text-body-2-line-height);
6
6
  display: flex;
7
7
  align-items: center;
8
- font-weight: 500;
9
- color: var(--pc-media-card-meta-info-color);
10
8
  }
11
9
  .pc-meta-info__item:not(:first-child) {
12
10
  margin-left: 16px;
package/build/esm/components/MetaInfo/MetaInfo.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { block } from '../../utils';
3
+ import { YFMWrapper } from '../index';
3
4
  import './MetaInfo.css';
4
5
  const b = block('meta-info');
5
- const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
6
+ const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement(YFMWrapper, { content: metaInfoItem, key: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
6
7
  export default MetaInfo;
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';
@@ -33,6 +33,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
33
33
  const [started, setStarted] = useState(autoPlay);
34
34
  const [paused, setPaused] = useState(false);
35
35
  const [ended, setEnded] = useState(false);
36
+ const [isMounted, setIsMounted] = React.useState(false);
37
+ useMount(() => setIsMounted(true));
36
38
  const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
37
39
  const eventsArray = useMemo(() => {
38
40
  if (analyticsEvents) {
@@ -191,9 +193,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
191
193
  },
192
194
  }, elapsedTimePercent: elapsedTimePercent }));
193
195
  }, [controls, isPlaying, customBarControlsClassName, changeMute]);
194
- return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
196
+ return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick }, isMounted ? (React.createElement(Fragment, null,
195
197
  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 }),
196
- renderCustomBarControls(muted, playedPercent)));
198
+ renderCustomBarControls(muted, playedPercent))) : null));
197
199
  });
198
200
  function getHeight(width) {
199
201
  return (width / 16) * 9;
package/build/esm/containers/PageConstructor/PageConstructor.css CHANGED
@@ -64,6 +64,10 @@ unpredictable css rules order in build */
64
64
  .yfm_constructor.yfm_constructor_notice p {
65
65
  color: var(--yc-color-text-secondary);
66
66
  }
67
+ .yfm_constructor.yfm_constructor_meta_info p {
68
+ color: var(--pc-media-card-meta-info-color);
69
+ font-weight: var(--g-text-accent-font-weight);
70
+ }
67
71
  .yfm_constructor.yfm_constructor ul,
68
72
  .yfm_constructor.yfm_constructor ol,
69
73
  .yfm_constructor.yfm_constructor li,
package/build/esm/text-transform/config.js CHANGED
@@ -122,7 +122,7 @@ export const config = {
122
122
  {
123
123
  fields: ['metaInfo'],
124
124
  parser: createItemsParser([]),
125
- transformer: typografTransformer,
125
+ transformer: yfmTransformer,
126
126
  },
127
127
  ],
128
128
  [SubBlockType.Quote]: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "3.17.2",
3
+ "version": "3.18.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
package/server/text-transform/config.js CHANGED
@@ -135,7 +135,7 @@ exports.config = {
135
135
  {
136
136
  fields: ['metaInfo'],
137
137
  parser: (0, common_1.createItemsParser)([]),
138
- transformer: common_1.typografTransformer,
138
+ transformer: common_1.yfmTransformer,
139
139
  },
140
140
  ],
141
141
  [models_1.SubBlockType.Quote]: {
package/styles/styles.css CHANGED
@@ -30,6 +30,10 @@ unpredictable css rules order in build */
30
30
  .yfm_constructor.yfm_constructor_notice p {
31
31
  color: var(--yc-color-text-secondary);
32
32
  }
33
+ .yfm_constructor.yfm_constructor_meta_info p {
34
+ color: var(--pc-media-card-meta-info-color);
35
+ font-weight: var(--g-text-accent-font-weight);
36
+ }
33
37
  .yfm_constructor.yfm_constructor ul,
34
38
  .yfm_constructor.yfm_constructor ol,
35
39
  .yfm_constructor.yfm_constructor li,
package/styles/yfm.scss CHANGED
@@ -34,6 +34,13 @@
34
34
  }
35
35
  }
36
36
 
37
+ &_meta_info {
38
+ p {
39
+ color: var(--pc-media-card-meta-info-color);
40
+ font-weight: var(--g-text-accent-font-weight);
41
+ }
42
+ }
43
+
37
44
  ul,
38
45
  ol,
39
46
  li,