@gravity-ui/page-constructor 1.26.2 → 1.27.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.27.0](https://github.com/gravity-ui/page-constructor/compare/v1.26.3...v1.27.0) (2023-08-31)
+
+
+### Features
+
+* adding new media component custom controls type ([#532](https://github.com/gravity-ui/page-constructor/issues/532)) ([6ccb56e](https://github.com/gravity-ui/page-constructor/commit/6ccb56ea052da2b94894e68ad3f17acac3f27cdf))
+
+## [1.26.3](https://github.com/gravity-ui/page-constructor/compare/v1.26.2...v1.26.3) (2023-04-03)
+
+
+### Bug Fixes
+
+* **validator:** add FilterBlock to schema validators ([#270](https://github.com/gravity-ui/page-constructor/issues/270)) ([#273](https://github.com/gravity-ui/page-constructor/issues/273)) ([badf4e5](https://github.com/gravity-ui/page-constructor/commit/badf4e5f94bbe087d5f1a197f4f08eb13f7eeef6))
+
 ## [1.26.2](https://github.com/gravity-ui/page-constructor/compare/v1.26.1...v1.26.2) (2023-03-30)
 
 

package/build/cjs/blocks/FilterBlock/schema.js

@@ -25,7 +25,7 @@ exports.FilterItemProps = {
                 type: 'string',
             },
         },
-        card: { $ref: 'self#/definitions/card' },
+        card: { $ref: 'self#/definitions/cards' },
     },
 };
 exports.FilterProps = {

package/build/cjs/components/Media/Video/Video.d.ts

@@ -10,6 +10,6 @@ interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;
     hasVideoFallback: boolean;
 }
-type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
 declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;

package/build/cjs/components/Media/Video/Video.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const models_1 = require("../../../models");
+const utils_1 = require("../../../utils");
 const ReactPlayer_1 = tslib_1.__importDefault(require("../../ReactPlayer/ReactPlayer"));
-const utils_1 = require("./utils");
-const utils_2 = require("../../../utils");
-const b = (0, utils_2.block)('media-component-video');
+const utils_2 = require("./utils");
+const b = (0, utils_1.block)('media-component-video');
 const Video = (props) => {
     const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
     const ref = (0, react_1.useRef)(null);
@@ -22,7 +22,7 @@ const Video = (props) => {
                         videoRef.currentTime = start;
                         videoRef.play().catch(() => setHasVideoFallback(true));
                     }
-                });
+                }, { passive: true });
             }
             if (playVideo) {
                 ref.current.play().catch(() => setHasVideoFallback(true));
@@ -30,8 +30,8 @@ const Video = (props) => {
         }
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = (0, react_1.useMemo)(() => {
-        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
-        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 }));
+        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
+        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, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions }));
     }, [
         video,
         height,
@@ -47,7 +47,8 @@ const Video = (props) => {
         return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height } },
             react_1.default.createElement("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
-                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true }, (0, utils_1.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type })))))) : null;
+                // eslint-disable-next-line react/no-unknown-property
+                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true, "aria-label": video.ariaLabel }, (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type })))))) : null;
     }, [video, videoClassName, hasVideoFallback, height]);
     switch (video.type) {
         case models_1.MediaVideoType.Player:

package/build/cjs/components/ReactPlayer/CustomBarControls.css

@@ -4,6 +4,10 @@ unpredictable css rules order in build */
   position: absolute;
   bottom: 0;
 }
+.pc-CustomBarControls__wrapper_type_with-play-pause-button {
+  width: 100%;
+  padding: 20px;
+}
 .pc-CustomBarControls__button {
   margin: 12px;
   border-radius: 50%;
@@ -18,6 +22,23 @@ unpredictable css rules order in build */
 .pc-CustomBarControls__button:hover {
   background: #eff2f8;
 }
+.pc-CustomBarControls__play-button {
+  opacity: 0.9;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: opacity 300ms ease 3s;
+}
+.pc-CustomBarControls__play-button:hover, .pc-CustomBarControls__play-button:focus {
+  opacity: 1;
+}
+.pc-CustomBarControls__play-button:focus {
+  outline: 1px solid var(--g-color-line-light);
+  border-radius: 4px;
+}
+.pc-CustomBarControls__play-button:focus:not(:focus-visible) {
+  outline: none;
+}
 .pc-CustomBarControls__icon {
   margin: auto;
 }

package/build/cjs/components/ReactPlayer/CustomBarControls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClassNameProps } from '../../models';
+import { ClassNameProps, CustomControlsType } from '../../models';
 interface MuteConfigProps {
     isMuted: boolean;
     changeMute: (event: React.MouseEvent) => void;
@@ -7,6 +7,10 @@ interface MuteConfigProps {
 export interface CustomBarControlsProps extends ClassNameProps {
     mute?: MuteConfigProps;
     elapsedTimePercent?: number;
+    type?: CustomControlsType;
+    isPaused?: boolean;
+    onPlayClick?: () => void;
+    isStarted?: boolean;
 }
 declare const CustomBarControls: (props: CustomBarControlsProps) => JSX.Element;
 export default CustomBarControls;

package/build/cjs/components/ReactPlayer/CustomBarControls.js

@@ -2,20 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const VideoControlPause_1 = require("../../icons/VideoControlPause");
+const VideoControlPlay_1 = require("../../icons/VideoControlPlay");
+const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const CircleProgress_1 = tslib_1.__importDefault(require("./CircleProgress"));
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, utils_1.block)('CustomBarControls');
+const PLAY_PAUSE_ICON_SIZE = 24;
 const CustomBarControls = (props) => {
-    const { mute, elapsedTimePercent = 0, className } = props;
-    const renderMute = (0, react_1.useCallback)((elapsedTime, muteConfig) => {
-        if (!muteConfig) {
+    const { mute, elapsedTimePercent = 0, className, type = models_1.CustomControlsType.WithMuteButton, isPaused, onPlayClick, isStarted = false, } = props;
+    const muteButton = (0, react_1.useMemo)(() => {
+        if (!mute || type === models_1.CustomControlsType.WithPlayPauseButton) {
+            // mute button is not provided for with-play-pause-button
             return null;
         }
-        const { isMuted, changeMute } = muteConfig;
+        const { isMuted, changeMute } = mute;
         return (react_1.default.createElement("div", { className: b('button'), onClick: changeMute },
             react_1.default.createElement("div", { className: b('mute-button', { muted: isMuted }) }),
-            !isMuted && react_1.default.createElement(CircleProgress_1.default, { elapsedTime: elapsedTime, strokeWidth: 5 })));
-    }, []);
-    return react_1.default.createElement("div", { className: b('wrapper', className) }, renderMute(elapsedTimePercent, mute));
+            !isMuted && react_1.default.createElement(CircleProgress_1.default, { elapsedTime: elapsedTimePercent, strokeWidth: 5 })));
+    }, [elapsedTimePercent, mute, type]);
+    const playPauseButton = (0, react_1.useMemo)(() => {
+        if (type !== models_1.CustomControlsType.WithPlayPauseButton || !isStarted) {
+            return null;
+        }
+        return (react_1.default.createElement("button", { onClick: onPlayClick, className: b('play-button'), "aria-label": (0, i18n_1.default)(isPaused ? 'play' : 'pause') }, isPaused ? (react_1.default.createElement(uikit_1.Icon, { data: VideoControlPlay_1.VideoControlPlay, size: PLAY_PAUSE_ICON_SIZE })) : (react_1.default.createElement(uikit_1.Icon, { data: VideoControlPause_1.VideoControlPause, size: PLAY_PAUSE_ICON_SIZE }))));
+    }, [isPaused, isStarted, onPlayClick, type]);
+    return (react_1.default.createElement("div", { className: b('wrapper', { type }, className) },
+        muteButton,
+        playPauseButton));
 };
 exports.default = CustomBarControls;

package/build/cjs/components/ReactPlayer/ReactPlayer.css

@@ -50,6 +50,18 @@ unpredictable css rules order in build */
   opacity: 1;
   transition: opacity 300ms ease 0s;
 }
+.pc-ReactPlayer_started.pc-ReactPlayer_controls_custom.pc-ReactPlayer_hovered::before {
+  opacity: 1;
+}
+.pc-ReactPlayer_started.pc-ReactPlayer_controls_custom::before {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 65.36%, rgba(0, 0, 0, 0.35) 100%);
+  opacity: 0;
+  transition: opacity 300ms;
+}
 .pc-ReactPlayer__custom-bar-controls {
   opacity: 0;
   transition: opacity 300ms ease 3s;

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -12,17 +12,16 @@ const CustomBarControls_1 = tslib_1.__importDefault(require("./CustomBarControls
 const videoContext_1 = require("../../context/videoContext");
 const metrikaContext_1 = require("../../context/metrikaContext");
 const mobileContext_1 = require("../../context/mobileContext");
-const hooks_1 = require("../../hooks");
 const icons_1 = require("../../icons");
-const utils_2 = require("./utils");
 const b = (0, utils_1.block)('ReactPlayer');
 const FPS = 60;
 // eslint-disable-next-line react/display-name
 exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { metrika } = (0, react_1.useContext)(metrikaContext_1.MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, height, } = props;
     const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
+    const { type: customControlsType = models_1.CustomControlsType.WithMuteButton } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
     const { playingVideoRef, setProps } = (0, react_1.useContext)(videoContext_1.VideoContext);
@@ -34,16 +33,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [width, setWidth] = (0, react_1.useState)(0);
     const [muted, setMuted] = (0, react_1.useState)(mute);
     const [started, setStarted] = (0, react_1.useState)(autoPlay);
-    const [paused, setPaused] = (0, react_1.useState)(false);
     const [ended, setEnded] = (0, react_1.useState)(false);
-    const videoSrc = (0, react_1.useMemo)(() => (0, utils_2.checkYoutubeVideos)(src), [src]);
-    const eventsArray = (0, react_1.useMemo)(() => {
-        if (analyticsEvents) {
-            return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];
-        }
-        return [];
-    }, [analyticsEvents]);
-    const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.ReactPlayerControls);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
     (0, react_1.useImperativeHandle)(originRef, () => ({
         pause: () => setIsPlaying(false),
     }));
@@ -51,14 +42,14 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
             setMuted(true);
         }
-    }, [playingVideoRef]);
+    }, [playingVideoRef, ref]);
     (0, react_1.useEffect)(() => {
         if (showPreview) {
             playerRef === null || playerRef === void 0 ? void 0 : playerRef.showPreview();
         }
     }, [showPreview, playerRef]);
     (0, react_1.useEffect)(() => {
-        if (playerRef) {
+        if (playerRef && autoPlay) {
             setIsPlaying(autoPlay);
         }
     }, [autoPlay, playerRef]);
@@ -92,8 +83,6 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, []);
-    const playEvents = (0, react_1.useMemo)(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [eventsArray]);
-    const stopEvents = (0, react_1.useMemo)(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [eventsArray]);
     const playIcon = (0, react_1.useMemo)(() => {
         let playButtonContent;
         switch (type) {
@@ -108,10 +97,6 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName) }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = (0, react_1.useCallback)((isMuted) => {
-        if (isMuted && playerRef) {
-            playerRef.seekTo(0);
-            setPlayedPercent(0);
-        }
         if (metrika && videoMetrika) {
             const { play, stop, counterName } = videoMetrika;
             const goal = isMuted ? play : stop;
@@ -119,15 +104,12 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 metrika.reachGoals(goal, counterName);
             }
         }
-        const events = isMuted ? playEvents : stopEvents;
-        handleAnalytics(events);
         if (isMuted) {
             setProps({ playingVideoRef: ref.current });
         }
         // In order to the progress bar to update (equals 0) before displaying
         setTimeout(() => setMuted(!isMuted), 0);
-    }, [playerRef, metrika, videoMetrika, handleAnalytics, playEvents, stopEvents, setProps]);
-    const handleClick = (0, react_1.useCallback)(() => changeMute(muted), [changeMute, muted]);
+    }, [metrika, videoMetrika, setProps]);
     const handleClickPreview = (0, react_1.useCallback)(() => {
         setIsPlaying(true);
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
@@ -137,16 +119,10 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 metrika.reachGoals(play, counterName);
             }
         }
-        handleAnalytics(playEvents);
-    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents]);
+    }, [onClickPreview, setIsPlaying, videoMetrika, metrika]);
     const onPause = (0, react_1.useCallback)(() => {
-        // For support correct state for youtube
         setIsPlaying(false);
-        if (controls === models_1.MediaVideoControlsType.Custom) {
-            setPaused(true);
-            setIsPlaying(true);
-        }
-    }, [controls, setIsPlaying, setPaused]);
+    }, []);
     const onStart = (0, react_1.useCallback)(() => {
         if (!autoPlay && !initiallyMuted) {
             setMuted(false);
@@ -155,21 +131,17 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const onPlay = (0, react_1.useCallback)(() => {
         setIsPlaying(true);
         if (controls === models_1.MediaVideoControlsType.Custom) {
-            if (ended) {
-                changeMute(false);
-            }
-            else if (paused) {
-                changeMute(muted);
-            }
-            setEnded(false);
-            setPaused(false);
+            changeMute(true);
         }
-    }, [changeMute, controls, ended, muted, paused]);
+    }, [changeMute, controls]);
     const onProgress = (0, react_1.useCallback)((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
             setMuted(true);
         }
+        else {
+            setEnded(false);
+        }
     }, []);
     const onEnded = (0, react_1.useCallback)(() => {
         // Youtube videos not muted after finishing playing and start again.
@@ -182,21 +154,37 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         }
         setEnded(true);
     }, [loop, playerRef]);
-    const renderCustomBarControls = (0, react_1.useCallback)((isMuted, elapsedTimePercent) => {
-        if (controls !== models_1.MediaVideoControlsType.Custom || !isPlaying) {
-            return null;
+    const onPlayClick = (0, react_1.useCallback)(() => {
+        if (isPlaying) {
+            onPause();
+        }
+        else {
+            onPlay();
         }
-        return (react_1.default.createElement(CustomBarControls_1.default, { className: b('custom-bar-controls', { muted: isMuted }, customBarControlsClassName), mute: {
-                isMuted,
+    }, [isPlaying, onPause, onPlay]);
+    const handleClick = (0, react_1.useCallback)(() => {
+        if (customControlsType === models_1.CustomControlsType.WithMuteButton) {
+            changeMute(muted);
+        }
+        else {
+            onPlayClick();
+        }
+        if (ended) {
+            playerRef === null || playerRef === void 0 ? void 0 : playerRef.seekTo(0);
+            onPlay();
+        }
+    }, [changeMute, customControlsType, ended, muted, onPlay, onPlayClick, playerRef]);
+    const onFocusIn = (0, react_1.useCallback)(() => setHovered(true), []);
+    const onFocusOut = (0, react_1.useCallback)(() => setHovered(false), []);
+    return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight, controls, started, hovered }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut },
+        react_1.default.createElement(react_player_1.default, { className: b('player'), url: src, 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 }),
+        controls === models_1.MediaVideoControlsType.Custom && (react_1.default.createElement(CustomBarControls_1.default, { className: b('custom-bar-controls', { muted }, customBarControlsClassName), mute: {
+                isMuted: muted,
                 changeMute: (event) => {
                     event.stopPropagation();
-                    changeMute(isMuted);
+                    changeMute(muted);
                 },
-            }, elapsedTimePercent: elapsedTimePercent }));
-    }, [controls, isPlaying, customBarControlsClassName, changeMute]);
-    return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
-        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 }),
-        renderCustomBarControls(muted, playedPercent)));
+            }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick, isStarted: started }))));
 });
 function getHeight(width) {
     return (width / 16) * 9;

package/build/cjs/components/ReactPlayer/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "play": "Play",
+  "pause": "Pause"
+}

package/build/cjs/components/ReactPlayer/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/components/ReactPlayer/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'ReactPlayer';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/components/ReactPlayer/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "play": "Воспроизвести",
+  "pause": "Остановить"
+}

package/build/cjs/icons/VideoControlPause.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VideoControlPause: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/cjs/icons/VideoControlPause.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoControlPause = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../utils/svg");
+const VideoControlPause = (props) => {
+    return (react_1.default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, svg_1.a11yHiddenSvgProps, props),
+        react_1.default.createElement("g", { opacity: "0.9" },
+            react_1.default.createElement("mask", { id: "path-1-outside-1_1237_523", maskUnits: "userSpaceOnUse", x: "1", y: "0", width: "22", height: "24", fill: "black" },
+                react_1.default.createElement("rect", { fill: "white", x: "1", width: "22", height: "24" }),
+                react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 1C2.89543 1 2 1.89543 2 3V21C2 22.1046 2.89543 23 4 23H8C9.10457 23 10 22.1046 10 21V3C10 1.89543 9.10457 1 8 1H4ZM16 1C14.8954 1 14 1.89543 14 3V21C14 22.1046 14.8954 23 16 23H20C21.1046 23 22 22.1046 22 21V3C22 1.89543 21.1046 1 20 1H16Z" })),
+            react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 1C2.89543 1 2 1.89543 2 3V21C2 22.1046 2.89543 23 4 23H8C9.10457 23 10 22.1046 10 21V3C10 1.89543 9.10457 1 8 1H4ZM16 1C14.8954 1 14 1.89543 14 3V21C14 22.1046 14.8954 23 16 23H20C21.1046 23 22 22.1046 22 21V3C22 1.89543 21.1046 1 20 1H16Z", fill: "white" }),
+            react_1.default.createElement("path", { d: "M3 3C3 2.44772 3.44771 2 4 2V0C2.34315 0 1 1.34314 1 3H3ZM3 21V3H1V21H3ZM4 22C3.44772 22 3 21.5523 3 21H1C1 22.6569 2.34315 24 4 24V22ZM8 22H4V24H8V22ZM9 21C9 21.5523 8.55229 22 8 22V24C9.65685 24 11 22.6569 11 21H9ZM9 3V21H11V3H9ZM8 2C8.55228 2 9 2.44772 9 3H11C11 1.34315 9.65685 0 8 0V2ZM4 2H8V0H4V2ZM15 3C15 2.44772 15.4477 2 16 2V0C14.3431 0 13 1.34314 13 3H15ZM15 21V3H13V21H15ZM16 22C15.4477 22 15 21.5523 15 21H13C13 22.6569 14.3431 24 16 24V22ZM20 22H16V24H20V22ZM21 21C21 21.5523 20.5523 22 20 22V24C21.6569 24 23 22.6569 23 21H21ZM21 3V21H23V3H21ZM20 2C20.5523 2 21 2.44772 21 3H23C23 1.34315 21.6569 0 20 0V2ZM16 2H20V0H16V2Z", fill: "black", fillOpacity: "0.15", mask: "url(#path-1-outside-1_1237_523)" }))));
+};
+exports.VideoControlPause = VideoControlPause;

package/build/cjs/icons/VideoControlPlay.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VideoControlPlay: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/cjs/icons/VideoControlPlay.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoControlPlay = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../utils/svg");
+const VideoControlPlay = (props) => {
+    return (react_1.default.createElement("svg", Object.assign({ width: "24", height: "26", viewBox: "0 0 24 26", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, svg_1.a11yHiddenSvgProps, props),
+        react_1.default.createElement("path", { d: "M20.5028 15.6408C22.4991 14.4663 22.4991 11.5337 20.5028 10.3592L6.99778 2.41411C4.99944 1.23846 2.5 2.70595 2.5 5.05488L2.5 20.9451C2.5 23.2941 4.99943 24.7615 6.99777 23.5859L20.5028 15.6408Z", fill: "white" }),
+        react_1.default.createElement("path", { d: "M20.7563 16.0717C23.0812 14.7039 23.0812 11.2961 20.7563 9.92827L7.25131 1.98315C4.90651 0.603685 2 2.33458 2 5.05488L2 20.9451C2 23.6654 4.90651 25.3963 7.25131 24.0168L20.7563 16.0717Z", stroke: "black", strokeOpacity: "0.15" })));
+};
+exports.VideoControlPlay = VideoControlPlay;

package/build/cjs/models/constructor-items/common.d.ts

@@ -29,6 +29,10 @@ export declare enum PlayButtonThemes {
     Blue = "blue",
     Grey = "grey"
 }
+export declare enum CustomControlsType {
+    WithMuteButton = "with-mute-button",
+    WithPlayPauseButton = "with-play-pause-button"
+}
 export declare enum MediaVideoType {
     Default = "default",
     Player = "player"
@@ -109,7 +113,9 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     elapsedTime?: number;
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
+    customControlsOptions?: CustomControlsOptions;
     metrika?: MetrikaVideo;
+    ariaLabel?: string;
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable {
     url: string;
@@ -146,22 +152,14 @@ export interface ButtonImageProps {
     position?: 'left' | 'right';
     alt?: string;
 }
+export interface CustomControlsOptions {
+    type?: CustomControlsType;
+}
 export interface PlayButtonProps extends ClassNameProps {
     type?: PlayButtonType;
     theme?: PlayButtonThemes;
     text?: string;
 }
-export interface MediaVideoProps {
-    src: string[];
-    type?: MediaVideoType;
-    loop?: LoopProps | boolean;
-    muted?: boolean;
-    autoplay?: boolean;
-    elapsedTime?: number;
-    playButton?: PlayButtonProps;
-    controls?: MediaVideoControlsType;
-    metrika?: MetrikaVideo;
-}
 export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
@@ -318,24 +316,6 @@ export interface PriceDetailedProps extends CardBaseProps {
     foldable?: PriceFoldableDetailsProps;
     labelsDefaultText?: Record<PriceLabelColor, string>;
 }
-export interface PriceDetailedProps extends CardBaseProps {
-    items: PriceItemProps[];
-    description?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-        titleColor?: PriceDescriptionColor;
-    };
-    details?: {
-        titleSize?: TextSize;
-        descriptionSize?: TextSize;
-    };
-    priceType?: PriceDetailsType;
-    numberGroupItems?: 3 | 4 | 5;
-    isCombined?: boolean;
-    useMixedView?: boolean;
-    foldable?: PriceFoldableDetailsProps;
-    labelsDefaultText?: Record<PriceLabelColor, string>;
-}
 export interface AuthorProps {
     author: AuthorItem;
     className?: string;

package/build/cjs/models/constructor-items/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaVideoControlsType = exports.MediaVideoType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PreviewItemType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
+exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PreviewItemType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
 // enums
 var AuthorType;
 (function (AuthorType) {
@@ -35,6 +35,11 @@ var PlayButtonThemes;
     PlayButtonThemes["Blue"] = "blue";
     PlayButtonThemes["Grey"] = "grey";
 })(PlayButtonThemes = exports.PlayButtonThemes || (exports.PlayButtonThemes = {}));
+var CustomControlsType;
+(function (CustomControlsType) {
+    CustomControlsType["WithMuteButton"] = "with-mute-button";
+    CustomControlsType["WithPlayPauseButton"] = "with-play-pause-button";
+})(CustomControlsType = exports.CustomControlsType || (exports.CustomControlsType = {}));
 var MediaVideoType;
 (function (MediaVideoType) {
     MediaVideoType["Default"] = "default";

package/build/cjs/schema/index.js

@@ -14,7 +14,7 @@ const getBlocksCases = (blocks) => {
 exports.getBlocksCases = getBlocksCases;
 function generateDefaultSchema(config) {
     const { cards = {}, blocks = {}, extensions = {} } = config !== null && config !== void 0 ? config : {};
-    const blockValidators = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.BannerBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.MapBlock), blocks_1.InfoBlock), blocks_1.SecurityBlock), blocks_1.TableBlock), blocks_1.TabsBlock), blocks_1.SimpleBlock), blocks_1.LinkTableBlock), blocks_1.PreviewBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), blocks_1.ShareBlock);
+    const blockValidators = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.BannerBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.MapBlock), blocks_1.InfoBlock), blocks_1.SecurityBlock), blocks_1.TableBlock), blocks_1.TabsBlock), blocks_1.SimpleBlock), blocks_1.LinkTableBlock), blocks_1.PreviewBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), blocks_1.ShareBlock), blocks_1.FilterBlock);
     const cardValidators = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.PartnerBlock), sub_blocks_1.MediaCardBlock), blocks_1.BannerCard), sub_blocks_1.PriceDetailedBlock), sub_blocks_1.TutorialCard), sub_blocks_1.BackgroundCard), sub_blocks_1.NewsCard), sub_blocks_1.CardWithImage), sub_blocks_1.Quote), sub_blocks_1.BasicCard);
     const constructorBlockSchemaNames = [
         'divider',
@@ -44,6 +44,7 @@ function generateDefaultSchema(config) {
         'card-layout-block',
         'content-layout-block',
         'share-block',
+        'filter-block',
     ];
     const constructorCardSchemaNames = [
         'partner',

package/build/cjs/schema/validators/blocks.d.ts

@@ -19,3 +19,4 @@ export * from '../../blocks/Icons/schema';
 export * from '../../blocks/CardLayout/schema';
 export * from '../../blocks/ContentLayout/schema';
 export * from '../../blocks/Share/schema';
+export * from '../../blocks/FilterBlock/schema';

package/build/cjs/schema/validators/blocks.js

@@ -22,3 +22,4 @@ tslib_1.__exportStar(require("../../blocks/Icons/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/CardLayout/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/ContentLayout/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/Share/schema"), exports);
+tslib_1.__exportStar(require("../../blocks/FilterBlock/schema"), exports);

package/build/esm/blocks/FilterBlock/schema.js

@@ -22,7 +22,7 @@ export const FilterItemProps = {
                 type: 'string',
             },
         },
-        card: { $ref: 'self#/definitions/card' },
+        card: { $ref: 'self#/definitions/cards' },
     },
 };
 export const FilterProps = {

package/build/esm/components/Media/Video/Video.d.ts

@@ -11,6 +11,6 @@ interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;
     hasVideoFallback: boolean;
 }
-type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
 declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;