@gravity-ui/page-constructor 1.14.0 → 1.15.0-alpha.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 (73) hide show
  1. package/build/cjs/blocks/Banner/schema.d.ts +234 -0
  2. package/build/cjs/blocks/Media/schema.d.ts +78 -0
  3. package/build/cjs/components/Button/Button.js +5 -2
  4. package/build/cjs/components/CardBase/CardBase.d.ts +2 -0
  5. package/build/cjs/components/CardBase/CardBase.js +4 -1
  6. package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js +4 -1
  7. package/build/cjs/components/Link/Link.js +4 -1
  8. package/build/cjs/components/Media/Media.js +3 -2
  9. package/build/cjs/components/Media/Video/Video.js +4 -3
  10. package/build/cjs/components/ReactPlayer/ReactPlayer.js +27 -3
  11. package/build/cjs/components/YandexForm/YandexForm.d.ts +2 -0
  12. package/build/cjs/components/YandexForm/YandexForm.js +13 -2
  13. package/build/cjs/containers/PageConstructor/Provider.d.ts +2 -0
  14. package/build/cjs/containers/PageConstructor/Provider.js +3 -1
  15. package/build/cjs/context/analyticsContext/analyticsContext.d.ts +6 -0
  16. package/build/cjs/context/analyticsContext/analyticsContext.js +6 -0
  17. package/build/cjs/context/analyticsContext/index.d.ts +1 -0
  18. package/build/cjs/context/analyticsContext/index.js +4 -0
  19. package/build/cjs/context/metrikaContext/metrikaContext.d.ts +6 -0
  20. package/build/cjs/hooks/index.d.ts +1 -0
  21. package/build/cjs/hooks/index.js +1 -0
  22. package/build/cjs/hooks/useAnalytics.d.ts +2 -0
  23. package/build/cjs/hooks/useAnalytics.js +18 -0
  24. package/build/cjs/hooks/useMetrika.d.ts +6 -0
  25. package/build/cjs/hooks/useMetrika.js +8 -0
  26. package/build/cjs/models/common.d.ts +36 -0
  27. package/build/cjs/models/common.js +3 -0
  28. package/build/cjs/models/constructor-items/common.d.ts +6 -1
  29. package/build/cjs/models/constructor-items/sub-blocks.d.ts +2 -1
  30. package/build/cjs/schema/validators/common.d.ts +168 -0
  31. package/build/cjs/schema/validators/common.js +10 -0
  32. package/build/cjs/schema/validators/event.d.ts +91 -0
  33. package/build/cjs/schema/validators/event.js +90 -0
  34. package/build/cjs/sub-blocks/HubspotForm/index.js +13 -2
  35. package/build/esm/blocks/Banner/schema.d.ts +234 -0
  36. package/build/esm/blocks/Media/schema.d.ts +78 -0
  37. package/build/esm/components/Button/Button.js +5 -2
  38. package/build/esm/components/CardBase/CardBase.d.ts +2 -0
  39. package/build/esm/components/CardBase/CardBase.js +4 -1
  40. package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js +4 -1
  41. package/build/esm/components/Link/Link.js +4 -1
  42. package/build/esm/components/Media/Media.js +3 -2
  43. package/build/esm/components/Media/Video/Video.js +4 -3
  44. package/build/esm/components/ReactPlayer/ReactPlayer.js +27 -3
  45. package/build/esm/components/YandexForm/YandexForm.d.ts +2 -0
  46. package/build/esm/components/YandexForm/YandexForm.js +13 -2
  47. package/build/esm/containers/PageConstructor/Provider.d.ts +2 -0
  48. package/build/esm/containers/PageConstructor/Provider.js +3 -1
  49. package/build/esm/context/analyticsContext/analyticsContext.d.ts +6 -0
  50. package/build/esm/context/analyticsContext/analyticsContext.js +2 -0
  51. package/build/esm/context/analyticsContext/index.d.ts +1 -0
  52. package/build/esm/context/analyticsContext/index.js +1 -0
  53. package/build/esm/context/metrikaContext/metrikaContext.d.ts +6 -0
  54. package/build/esm/hooks/index.d.ts +1 -0
  55. package/build/esm/hooks/index.js +1 -0
  56. package/build/esm/hooks/useAnalytics.d.ts +2 -0
  57. package/build/esm/hooks/useAnalytics.js +14 -0
  58. package/build/esm/hooks/useMetrika.d.ts +6 -0
  59. package/build/esm/hooks/useMetrika.js +8 -0
  60. package/build/esm/models/common.d.ts +36 -0
  61. package/build/esm/models/common.js +3 -0
  62. package/build/esm/models/constructor-items/common.d.ts +6 -1
  63. package/build/esm/models/constructor-items/sub-blocks.d.ts +2 -1
  64. package/build/esm/schema/validators/common.d.ts +168 -0
  65. package/build/esm/schema/validators/common.js +10 -0
  66. package/build/esm/schema/validators/event.d.ts +91 -0
  67. package/build/esm/schema/validators/event.js +87 -0
  68. package/build/esm/sub-blocks/HubspotForm/index.js +14 -3
  69. package/package.json +4 -1
  70. package/server/models/common.d.ts +36 -0
  71. package/server/models/common.js +3 -0
  72. package/server/models/constructor-items/common.d.ts +6 -1
  73. package/server/models/constructor-items/sub-blocks.d.ts +2 -1
@@ -173,6 +173,84 @@ export declare const BannerCardProps: {
173
173
  };
174
174
  };
175
175
  };
176
+ analyticsEvents: {
177
+ anyOf: ({
178
+ type: string;
179
+ propertyNames: {
180
+ type: string;
181
+ };
182
+ additionalProperty: {
183
+ type: string;
184
+ };
185
+ required: string[];
186
+ properties: {
187
+ name: {
188
+ type: string;
189
+ };
190
+ type: {
191
+ type: string;
192
+ };
193
+ counters: {
194
+ type: string;
195
+ additionalProperties: boolean;
196
+ required: never[];
197
+ properties: {
198
+ include: {
199
+ type: string;
200
+ items: {
201
+ type: string;
202
+ };
203
+ };
204
+ exclude: {
205
+ type: string;
206
+ items: {
207
+ type: string;
208
+ };
209
+ };
210
+ };
211
+ };
212
+ };
213
+ } | {
214
+ type: string;
215
+ items: {
216
+ type: string;
217
+ propertyNames: {
218
+ type: string;
219
+ };
220
+ additionalProperty: {
221
+ type: string;
222
+ };
223
+ required: string[];
224
+ properties: {
225
+ name: {
226
+ type: string;
227
+ };
228
+ type: {
229
+ type: string;
230
+ };
231
+ counters: {
232
+ type: string;
233
+ additionalProperties: boolean;
234
+ required: never[];
235
+ properties: {
236
+ include: {
237
+ type: string;
238
+ items: {
239
+ type: string;
240
+ };
241
+ };
242
+ exclude: {
243
+ type: string;
244
+ items: {
245
+ type: string;
246
+ };
247
+ };
248
+ };
249
+ };
250
+ };
251
+ };
252
+ })[];
253
+ };
176
254
  target: {
177
255
  type: string;
178
256
  enum: string[];
@@ -375,6 +453,84 @@ export declare const BannerBlock: {
375
453
  };
376
454
  };
377
455
  };
456
+ analyticsEvents: {
457
+ anyOf: ({
458
+ type: string;
459
+ propertyNames: {
460
+ type: string;
461
+ };
462
+ additionalProperty: {
463
+ type: string;
464
+ };
465
+ required: string[];
466
+ properties: {
467
+ name: {
468
+ type: string;
469
+ };
470
+ type: {
471
+ type: string;
472
+ };
473
+ counters: {
474
+ type: string;
475
+ additionalProperties: boolean;
476
+ required: never[];
477
+ properties: {
478
+ include: {
479
+ type: string;
480
+ items: {
481
+ type: string;
482
+ };
483
+ };
484
+ exclude: {
485
+ type: string;
486
+ items: {
487
+ type: string;
488
+ };
489
+ };
490
+ };
491
+ };
492
+ };
493
+ } | {
494
+ type: string;
495
+ items: {
496
+ type: string;
497
+ propertyNames: {
498
+ type: string;
499
+ };
500
+ additionalProperty: {
501
+ type: string;
502
+ };
503
+ required: string[];
504
+ properties: {
505
+ name: {
506
+ type: string;
507
+ };
508
+ type: {
509
+ type: string;
510
+ };
511
+ counters: {
512
+ type: string;
513
+ additionalProperties: boolean;
514
+ required: never[];
515
+ properties: {
516
+ include: {
517
+ type: string;
518
+ items: {
519
+ type: string;
520
+ };
521
+ };
522
+ exclude: {
523
+ type: string;
524
+ items: {
525
+ type: string;
526
+ };
527
+ };
528
+ };
529
+ };
530
+ };
531
+ };
532
+ })[];
533
+ };
378
534
  target: {
379
535
  type: string;
380
536
  enum: string[];
@@ -578,6 +734,84 @@ export declare const BannerCard: {
578
734
  };
579
735
  };
580
736
  };
737
+ analyticsEvents: {
738
+ anyOf: ({
739
+ type: string;
740
+ propertyNames: {
741
+ type: string;
742
+ };
743
+ additionalProperty: {
744
+ type: string;
745
+ };
746
+ required: string[];
747
+ properties: {
748
+ name: {
749
+ type: string;
750
+ };
751
+ type: {
752
+ type: string;
753
+ };
754
+ counters: {
755
+ type: string;
756
+ additionalProperties: boolean;
757
+ required: never[];
758
+ properties: {
759
+ include: {
760
+ type: string;
761
+ items: {
762
+ type: string;
763
+ };
764
+ };
765
+ exclude: {
766
+ type: string;
767
+ items: {
768
+ type: string;
769
+ };
770
+ };
771
+ };
772
+ };
773
+ };
774
+ } | {
775
+ type: string;
776
+ items: {
777
+ type: string;
778
+ propertyNames: {
779
+ type: string;
780
+ };
781
+ additionalProperty: {
782
+ type: string;
783
+ };
784
+ required: string[];
785
+ properties: {
786
+ name: {
787
+ type: string;
788
+ };
789
+ type: {
790
+ type: string;
791
+ };
792
+ counters: {
793
+ type: string;
794
+ additionalProperties: boolean;
795
+ required: never[];
796
+ properties: {
797
+ include: {
798
+ type: string;
799
+ items: {
800
+ type: string;
801
+ };
802
+ };
803
+ exclude: {
804
+ type: string;
805
+ items: {
806
+ type: string;
807
+ };
808
+ };
809
+ };
810
+ };
811
+ };
812
+ };
813
+ })[];
814
+ };
581
815
  target: {
582
816
  type: string;
583
817
  enum: string[];
@@ -426,6 +426,84 @@ export declare const MediaBlock: {
426
426
  };
427
427
  };
428
428
  };
429
+ analyticsEvents: {
430
+ anyOf: ({
431
+ type: string;
432
+ propertyNames: {
433
+ type: string;
434
+ };
435
+ additionalProperty: {
436
+ type: string;
437
+ };
438
+ required: string[];
439
+ properties: {
440
+ name: {
441
+ type: string;
442
+ };
443
+ type: {
444
+ type: string;
445
+ };
446
+ counters: {
447
+ type: string;
448
+ additionalProperties: boolean;
449
+ required: never[];
450
+ properties: {
451
+ include: {
452
+ type: string;
453
+ items: {
454
+ type: string;
455
+ };
456
+ };
457
+ exclude: {
458
+ type: string;
459
+ items: {
460
+ type: string;
461
+ };
462
+ };
463
+ };
464
+ };
465
+ };
466
+ } | {
467
+ type: string;
468
+ items: {
469
+ type: string;
470
+ propertyNames: {
471
+ type: string;
472
+ };
473
+ additionalProperty: {
474
+ type: string;
475
+ };
476
+ required: string[];
477
+ properties: {
478
+ name: {
479
+ type: string;
480
+ };
481
+ type: {
482
+ type: string;
483
+ };
484
+ counters: {
485
+ type: string;
486
+ additionalProperties: boolean;
487
+ required: never[];
488
+ properties: {
489
+ include: {
490
+ type: string;
491
+ items: {
492
+ type: string;
493
+ };
494
+ };
495
+ exclude: {
496
+ type: string;
497
+ items: {
498
+ type: string;
499
+ };
500
+ };
501
+ };
502
+ };
503
+ };
504
+ };
505
+ })[];
506
+ };
429
507
  target: {
430
508
  type: string;
431
509
  enum: string[];
@@ -7,19 +7,22 @@ const utils_1 = require("../../utils");
7
7
  const utils_2 = require("./utils");
8
8
  const localeContext_1 = require("../../context/localeContext/localeContext");
9
9
  const useMetrika_1 = require("../../hooks/useMetrika");
10
+ const hooks_1 = require("../../hooks");
10
11
  const icons_1 = require("../../icons");
11
12
  const b = (0, utils_1.block)('button-block');
12
13
  const Button = (props) => {
13
14
  const handleMetrika = (0, useMetrika_1.useMetrika)();
15
+ const handleAnalytics = (0, hooks_1.useAnalytics)();
14
16
  const { lang, tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
15
- const { className, metrikaGoals, pixelEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "size", "theme", "url", "img", "onClick", "text"]);
17
+ const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
16
18
  const defaultImgPosition = 'left';
17
19
  const onClick = (0, react_1.useCallback)(() => {
18
20
  handleMetrika({ metrikaGoals, pixelEvents });
21
+ handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
19
22
  if (onClickOrigin) {
20
23
  onClickOrigin();
21
24
  }
22
- }, [handleMetrika, metrikaGoals, pixelEvents, onClickOrigin]);
25
+ }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
23
26
  const buttonImg = img instanceof Object
24
27
  ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
25
28
  : { url: img, position: defaultImgPosition };
@@ -1,5 +1,6 @@
1
1
  import React, { ReactElement, HTMLAttributeAnchorTarget } from 'react';
2
2
  import { ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
3
+ import { AnalyticsEventV2 } from '../../models/common';
3
4
  export interface CardBaseProps extends CardBaseParams {
4
5
  className?: string;
5
6
  bodyClassName?: string;
@@ -9,6 +10,7 @@ export interface CardBaseProps extends CardBaseParams {
9
10
  target?: HTMLAttributeAnchorTarget;
10
11
  metrikaGoals?: MetrikaGoal;
11
12
  pixelEvents?: ButtonPixel;
13
+ analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
12
14
  }
13
15
  export interface CardHeaderBaseProps {
14
16
  className?: string;
@@ -7,13 +7,15 @@ const utils_1 = require("../../utils");
7
7
  const BackgroundImage_1 = tslib_1.__importDefault(require("../BackgroundImage/BackgroundImage"));
8
8
  const RouterLink_1 = tslib_1.__importDefault(require("../RouterLink/RouterLink"));
9
9
  const useMetrika_1 = require("../../hooks/useMetrika");
10
+ const hooks_1 = require("../../hooks");
10
11
  const b = (0, utils_1.block)('card-base-block');
11
12
  const Header = () => null;
12
13
  const Content = () => null;
13
14
  const Footer = () => null;
14
15
  const Layout = (props) => {
15
- const { className, bodyClassName, metrikaGoals, pixelEvents, contentClassName, children, url, target, border = 'shadow', } = props;
16
+ const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', } = props;
16
17
  const handleMetrika = (0, useMetrika_1.useMetrika)();
18
+ const handleAnalytics = (0, hooks_1.useAnalytics)();
17
19
  let header, content, footer, image, headerClass, footerClass;
18
20
  function handleChild(child) {
19
21
  switch (child.type) {
@@ -46,6 +48,7 @@ const Layout = (props) => {
46
48
  const fullClassName = b({ border }, className);
47
49
  const onClick = () => {
48
50
  handleMetrika({ metrikaGoals, pixelEvents });
51
+ handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
49
52
  };
50
53
  return url ? (react_1.default.createElement(RouterLink_1.default, { href: url },
51
54
  react_1.default.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName }, cardContent));
@@ -4,12 +4,15 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importDefault(require("react"));
5
5
  const utils_1 = require("../../utils");
6
6
  const useMetrika_1 = require("../../hooks/useMetrika");
7
+ const hooks_1 = require("../../hooks");
7
8
  const b = (0, utils_1.block)('header-breadcrumbs');
8
9
  function HeaderBreadcrumbs(props) {
9
- const { items, metrikaGoals, pixelEvents, theme = 'light', className } = props;
10
+ const { items, metrikaGoals, pixelEvents, analyticsEvents, theme = 'light', className } = props;
10
11
  const handleMetrika = (0, useMetrika_1.useMetrika)();
12
+ const handleAnalytics = (0, hooks_1.useAnalytics)();
11
13
  const onClick = () => {
12
14
  handleMetrika({ metrikaGoals, pixelEvents });
15
+ handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
13
16
  };
14
17
  return (react_1.default.createElement("div", { className: b({ theme }, className) }, items.map((item) => (react_1.default.createElement("div", { className: b('item'), key: item.url },
15
18
  react_1.default.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));
@@ -10,6 +10,7 @@ const BackLink_1 = tslib_1.__importDefault(require("../BackLink/BackLink"));
10
10
  const localeContext_1 = require("../../context/localeContext/localeContext");
11
11
  const locationContext_1 = require("../../context/locationContext/locationContext");
12
12
  const useMetrika_1 = require("../../hooks/useMetrika");
13
+ const hooks_1 = require("../../hooks");
13
14
  const b = (0, utils_1.block)('link-block');
14
15
  const WORD_JOINER_SYM = '\u200b';
15
16
  function getArrowSize(size) {
@@ -25,14 +26,16 @@ function getArrowSize(size) {
25
26
  }
26
27
  }
27
28
  const LinkBlock = (props) => {
28
- const { text, url, arrow, metrikaGoals, pixelEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
29
+ const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
29
30
  const handleMetrika = (0, useMetrika_1.useMetrika)();
31
+ const handleAnalytics = (0, hooks_1.useAnalytics)();
30
32
  const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
31
33
  const { tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
32
34
  const href = (0, utils_1.setUrlTld)(props.url, tld);
33
35
  const defaultTextSize = theme === 'back' ? 'l' : 'm';
34
36
  const onClick = () => {
35
37
  handleMetrika({ metrikaGoals, pixelEvents });
38
+ handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
36
39
  };
37
40
  const getLinkByType = () => {
38
41
  switch (theme) {
@@ -10,7 +10,7 @@ const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
10
10
  const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
11
11
  const b = (0, utils_1.block)('Media');
12
12
  const Media = (props) => {
13
- const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, } = props;
13
+ const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, analyticsEvents, } = props;
14
14
  const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
15
15
  const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
16
16
  const content = (0, react_1.useMemo)(() => {
@@ -19,7 +19,7 @@ const Media = (props) => {
19
19
  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 }));
20
20
  }
21
21
  if (video) {
22
- result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
22
+ result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, analyticsEvents: analyticsEvents, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
23
23
  }
24
24
  if (youtube) {
25
25
  result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height }));
@@ -40,6 +40,7 @@ const Media = (props) => {
40
40
  hasVideoFallback,
41
41
  videoClassName,
42
42
  metrika,
43
+ analyticsEvents,
43
44
  playVideo,
44
45
  previewImg,
45
46
  playButton,
@@ -8,7 +8,7 @@ const utils_1 = require("./utils");
8
8
  const utils_2 = require("../../../utils");
9
9
  const b = (0, utils_2.block)('media-component-video');
10
10
  const Video = (props) => {
11
- const { video, height, metrika, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
11
+ const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
12
12
  const ref = (0, react_1.useRef)(null);
13
13
  (0, react_1.useEffect)(() => {
14
14
  if (ref && ref.current) {
@@ -31,16 +31,17 @@ const Video = (props) => {
31
31
  }, [playVideo, video, setHasVideoFallback]);
32
32
  const reactPlayerBlock = (0, react_1.useMemo)(() => {
33
33
  const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
34
- return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, height: height }));
34
+ return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height }));
35
35
  }, [
36
36
  video,
37
- height,
38
37
  videoClassName,
39
38
  previewImg,
40
39
  playVideo,
41
40
  commonPlayButton,
42
41
  customBarControlsClassName,
43
42
  metrika,
43
+ analyticsEvents,
44
+ height,
44
45
  ]);
45
46
  const defaultVideoBlock = (0, react_1.useMemo)(() => {
46
47
  return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height } },
@@ -13,13 +13,14 @@ const videoContext_1 = require("../../context/videoContext");
13
13
  const metrikaContext_1 = require("../../context/metrikaContext");
14
14
  const mobileContext_1 = require("../../context/mobileContext");
15
15
  const icons_1 = require("../../icons");
16
+ const hooks_1 = require("../../hooks");
16
17
  const b = (0, utils_1.block)('ReactPlayer');
17
18
  const FPS = 60;
18
19
  // eslint-disable-next-line react/display-name
19
20
  exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
20
21
  const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
21
22
  const { metrika } = (0, react_1.useContext)(metrikaContext_1.MetrikaContext);
22
- const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, height, } = props;
23
+ const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
23
24
  const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
24
25
  const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
25
26
  const mute = initiallyMuted || autoPlay;
@@ -34,6 +35,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
34
35
  const [started, setStarted] = (0, react_1.useState)(autoPlay);
35
36
  const [paused, setPaused] = (0, react_1.useState)(false);
36
37
  const [ended, setEnded] = (0, react_1.useState)(false);
38
+ const handleAnalytics = (0, hooks_1.useAnalytics)();
37
39
  (0, react_1.useImperativeHandle)(originRef, () => ({
38
40
  pause: () => setIsPlaying(false),
39
41
  }));
@@ -82,6 +84,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
82
84
  window.removeEventListener('resize', updateSize);
83
85
  };
84
86
  }, []);
87
+ const playEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'play'), [analyticsEvents]);
88
+ const stopEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'stop'), [analyticsEvents]);
85
89
  const playIcon = (0, react_1.useMemo)(() => {
86
90
  let playButtonContent;
87
91
  switch (type) {
@@ -107,12 +111,27 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
107
111
  metrika.reachGoals(goal, counterName);
108
112
  }
109
113
  }
114
+ if (handleAnalytics && analyticsEvents) {
115
+ const events = isMuted ? playEvents : stopEvents;
116
+ if (events) {
117
+ handleAnalytics(events);
118
+ }
119
+ }
110
120
  if (isMuted) {
111
121
  setProps({ playingVideoRef: ref.current });
112
122
  }
113
123
  // In order to the progress bar to update (equals 0) before displaying
114
124
  setTimeout(() => setMuted(!isMuted), 0);
115
- }, [playerRef, setProps, videoMetrika, metrika]);
125
+ }, [
126
+ playerRef,
127
+ metrika,
128
+ videoMetrika,
129
+ handleAnalytics,
130
+ analyticsEvents,
131
+ playEvents,
132
+ stopEvents,
133
+ setProps,
134
+ ]);
116
135
  const handleClick = (0, react_1.useCallback)(() => changeMute(muted), [changeMute, muted]);
117
136
  const handleClickPreview = (0, react_1.useCallback)(() => {
118
137
  setIsPlaying(true);
@@ -123,7 +142,12 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
123
142
  metrika.reachGoals(play, counterName);
124
143
  }
125
144
  }
126
- }, [onClickPreview, setIsPlaying, videoMetrika, metrika]);
145
+ if (handleAnalytics && analyticsEvents) {
146
+ if (playEvents) {
147
+ handleAnalytics(playEvents);
148
+ }
149
+ }
150
+ }, [onClickPreview, metrika, videoMetrika, handleAnalytics, analyticsEvents, playEvents]);
127
151
  const onPause = (0, react_1.useCallback)(() => {
128
152
  // For support correct state for youtube
129
153
  setIsPlaying(false);
@@ -1,4 +1,5 @@
1
1
  import { PixelEvent } from '../../models';
2
+ import { AnalyticsEventV2 } from '../../models/common';
2
3
  export declare const YANDEX_FORM_ORIGIN = "https://forms.yandex.ru";
3
4
  export interface YandexFormProps {
4
5
  id: number | string;
@@ -14,6 +15,7 @@ export interface YandexFormProps {
14
15
  onLoad?: () => void;
15
16
  metrikaGoals?: string | string[];
16
17
  pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
18
+ analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
17
19
  }
18
20
  declare const YandexForm: (props: YandexFormProps) => JSX.Element;
19
21
  export default YandexForm;
@@ -8,15 +8,17 @@ const localeContext_1 = require("../../context/localeContext");
8
8
  const mobileContext_1 = require("../../context/mobileContext");
9
9
  const utils_1 = require("../../utils");
10
10
  const useMetrika_1 = require("../../hooks/useMetrika");
11
+ const hooks_1 = require("../..//hooks");
11
12
  exports.YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
12
13
  const CONTAINER_ID = 'pc-yandex-form-container';
13
14
  const b = (0, utils_1.block)('yandex-form');
14
15
  const YandexForm = (props) => {
15
- const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, customFormOrigin, } = props;
16
+ const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, } = props;
16
17
  const formContainerRef = (0, react_1.useRef)(null);
17
18
  const iframeRef = (0, react_1.useRef)();
18
19
  const yaFormOrigin = customFormOrigin || exports.YANDEX_FORM_ORIGIN;
19
20
  const handleMetrika = (0, useMetrika_1.useMetrika)();
21
+ const handleAnalytics = (0, hooks_1.useAnalytics)();
20
22
  const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
21
23
  const locale = (0, react_1.useContext)(localeContext_1.LocaleContext);
22
24
  const updateFormIframe = (0, react_1.useCallback)((container) => {
@@ -57,10 +59,19 @@ const YandexForm = (props) => {
57
59
  window.scrollBy(0, top - headerHeight);
58
60
  }
59
61
  handleMetrika({ metrikaGoals, pixelEvents });
62
+ handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
60
63
  if (onSubmit) {
61
64
  onSubmit();
62
65
  }
63
- }, [handleMetrika, metrikaGoals, pixelEvents, onSubmit, headerHeight]);
66
+ }, [
67
+ handleMetrika,
68
+ metrikaGoals,
69
+ pixelEvents,
70
+ handleAnalytics,
71
+ analyticsEvents,
72
+ onSubmit,
73
+ headerHeight,
74
+ ]);
64
75
  const handleMessage = (0, react_1.useCallback)(({ origin, data }) => {
65
76
  if (origin !== yaFormOrigin) {
66
77
  return;
@@ -1,4 +1,5 @@
1
1
  import { MetrikaContextProps } from '../../context/metrikaContext';
2
+ import { AnalyticsContextProps } from '../../context/analyticsContext';
2
3
  import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
3
4
  import { SSRContextProps } from '../../context/ssrContext';
4
5
  import { LocaleContextProps } from '../../context/localeContext';
@@ -13,5 +14,6 @@ export interface PageConstructorProviderProps {
13
14
  ssrConfig?: SSRContextProps;
14
15
  theme?: ConstructorTheme;
15
16
  projectSettings?: ProjectSettingsContextProps;
17
+ analytics?: AnalyticsContextProps;
16
18
  }
17
19
  export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;