@gravity-ui/page-constructor 1.26.2 → 1.27.0

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

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { MediaVideoType } from '../../../models';
+import { block } from '../../../utils';
 import ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';
 import { getVideoTypesWithPriority } from './utils';
-import { block } from '../../../utils';
 import './Video.css';
 const b = block('media-component-video');
 const Video = (props) => {
@@ -20,7 +20,7 @@ const Video = (props) => {
                         videoRef.currentTime = start;
                         videoRef.play().catch(() => setHasVideoFallback(true));
                     }
-                });
+                }, { passive: true });
             }
             if (playVideo) {
                 ref.current.play().catch(() => setHasVideoFallback(true));
@@ -28,8 +28,8 @@ const Video = (props) => {
         }
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = useMemo(() => {
-        const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
-        return (React.createElement(ReactPlayerBlock, { 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.createElement(ReactPlayerBlock, { 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,
@@ -45,7 +45,8 @@ const Video = (props) => {
         return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height } },
             React.createElement("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
-                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.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 }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))) : null;
     }, [video, videoClassName, hasVideoFallback, height]);
     switch (video.type) {
         case MediaVideoType.Player:

package/build/esm/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/esm/components/ReactPlayer/CustomBarControls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClassNameProps } from '../../models';
+import { ClassNameProps, CustomControlsType } from '../../models';
 import './CustomBarControls.css';
 interface MuteConfigProps {
     isMuted: boolean;
@@ -8,6 +8,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/esm/components/ReactPlayer/CustomBarControls.js

@@ -1,19 +1,34 @@
-import React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { VideoControlPause } from '../../icons/VideoControlPause';
+import { VideoControlPlay } from '../../icons/VideoControlPlay';
+import { CustomControlsType } from '../../models';
 import { block } from '../../utils';
 import CircleProgress from './CircleProgress';
+import i18n from './i18n';
 import './CustomBarControls.css';
 const b = block('CustomBarControls');
+const PLAY_PAUSE_ICON_SIZE = 24;
 const CustomBarControls = (props) => {
-    const { mute, elapsedTimePercent = 0, className } = props;
-    const renderMute = useCallback((elapsedTime, muteConfig) => {
-        if (!muteConfig) {
+    const { mute, elapsedTimePercent = 0, className, type = CustomControlsType.WithMuteButton, isPaused, onPlayClick, isStarted = false, } = props;
+    const muteButton = useMemo(() => {
+        if (!mute || type === CustomControlsType.WithPlayPauseButton) {
+            // mute button is not provided for with-play-pause-button
             return null;
         }
-        const { isMuted, changeMute } = muteConfig;
+        const { isMuted, changeMute } = mute;
         return (React.createElement("div", { className: b('button'), onClick: changeMute },
             React.createElement("div", { className: b('mute-button', { muted: isMuted }) }),
-            !isMuted && React.createElement(CircleProgress, { elapsedTime: elapsedTime, strokeWidth: 5 })));
-    }, []);
-    return React.createElement("div", { className: b('wrapper', className) }, renderMute(elapsedTimePercent, mute));
+            !isMuted && React.createElement(CircleProgress, { elapsedTime: elapsedTimePercent, strokeWidth: 5 })));
+    }, [elapsedTimePercent, mute, type]);
+    const playPauseButton = useMemo(() => {
+        if (type !== CustomControlsType.WithPlayPauseButton || !isStarted) {
+            return null;
+        }
+        return (React.createElement("button", { onClick: onPlayClick, className: b('play-button'), "aria-label": i18n(isPaused ? 'play' : 'pause') }, isPaused ? (React.createElement(Icon, { data: VideoControlPlay, size: PLAY_PAUSE_ICON_SIZE })) : (React.createElement(Icon, { data: VideoControlPause, size: PLAY_PAUSE_ICON_SIZE }))));
+    }, [isPaused, isStarted, onPlayClick, type]);
+    return (React.createElement("div", { className: b('wrapper', { type }, className) },
+        muteButton,
+        playPauseButton));
 };
 export default CustomBarControls;

package/build/esm/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/esm/components/ReactPlayer/ReactPlayer.js

@@ -3,14 +3,12 @@ import ReactPlayer from 'react-player';
 import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../utils';
-import { PlayButtonThemes, PlayButtonType, MediaVideoControlsType, PredefinedEventTypes, DefaultEventNames, } from '../../models';
+import { CustomControlsType, PlayButtonThemes, PlayButtonType, MediaVideoControlsType, } from '../../models';
 import CustomBarControls from './CustomBarControls';
 import { VideoContext } from '../../context/videoContext';
 import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
-import { useAnalytics } from '../../hooks';
 import { PlayVideo } from '../../icons';
-import { checkYoutubeVideos } from './utils';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
 const FPS = 60;
@@ -18,8 +16,9 @@ const FPS = 60;
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = useContext(MobileContext);
     const { metrika } = useContext(MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, height, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
+    const { type: customControlsType = CustomControlsType.WithMuteButton } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
     const { playingVideoRef, setProps } = useContext(VideoContext);
@@ -31,16 +30,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [width, setWidth] = useState(0);
     const [muted, setMuted] = useState(mute);
     const [started, setStarted] = useState(autoPlay);
-    const [paused, setPaused] = useState(false);
     const [ended, setEnded] = useState(false);
-    const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
-    const eventsArray = useMemo(() => {
-        if (analyticsEvents) {
-            return Array.isArray(analyticsEvents) ? analyticsEvents : [analyticsEvents];
-        }
-        return [];
-    }, [analyticsEvents]);
-    const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);
+    const [hovered, setHovered] = useState(false);
     useImperativeHandle(originRef, () => ({
         pause: () => setIsPlaying(false),
     }));
@@ -48,14 +39,14 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
             setMuted(true);
         }
-    }, [playingVideoRef]);
+    }, [playingVideoRef, ref]);
     useEffect(() => {
         if (showPreview) {
             playerRef === null || playerRef === void 0 ? void 0 : playerRef.showPreview();
         }
     }, [showPreview, playerRef]);
     useEffect(() => {
-        if (playerRef) {
+        if (playerRef && autoPlay) {
             setIsPlaying(autoPlay);
         }
     }, [autoPlay, playerRef]);
@@ -89,8 +80,6 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, []);
-    const playEvents = useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Play), [eventsArray]);
-    const stopEvents = useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === PredefinedEventTypes.Stop), [eventsArray]);
     const playIcon = useMemo(() => {
         let playButtonContent;
         switch (type) {
@@ -105,10 +94,6 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         return (React.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName) }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = useCallback((isMuted) => {
-        if (isMuted && playerRef) {
-            playerRef.seekTo(0);
-            setPlayedPercent(0);
-        }
         if (metrika && videoMetrika) {
             const { play, stop, counterName } = videoMetrika;
             const goal = isMuted ? play : stop;
@@ -116,15 +101,12 @@ export const ReactPlayerBlock = React.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 = useCallback(() => changeMute(muted), [changeMute, muted]);
+    }, [metrika, videoMetrika, setProps]);
     const handleClickPreview = useCallback(() => {
         setIsPlaying(true);
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
@@ -134,16 +116,10 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 metrika.reachGoals(play, counterName);
             }
         }
-        handleAnalytics(playEvents);
-    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents]);
+    }, [onClickPreview, setIsPlaying, videoMetrika, metrika]);
     const onPause = useCallback(() => {
-        // For support correct state for youtube
         setIsPlaying(false);
-        if (controls === MediaVideoControlsType.Custom) {
-            setPaused(true);
-            setIsPlaying(true);
-        }
-    }, [controls, setIsPlaying, setPaused]);
+    }, []);
     const onStart = useCallback(() => {
         if (!autoPlay && !initiallyMuted) {
             setMuted(false);
@@ -152,21 +128,17 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const onPlay = useCallback(() => {
         setIsPlaying(true);
         if (controls === 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 = useCallback((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
             setMuted(true);
         }
+        else {
+            setEnded(false);
+        }
     }, []);
     const onEnded = useCallback(() => {
         // Youtube videos not muted after finishing playing and start again.
@@ -179,21 +151,37 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         setEnded(true);
     }, [loop, playerRef]);
-    const renderCustomBarControls = useCallback((isMuted, elapsedTimePercent) => {
-        if (controls !== MediaVideoControlsType.Custom || !isPlaying) {
-            return null;
+    const onPlayClick = useCallback(() => {
+        if (isPlaying) {
+            onPause();
+        }
+        else {
+            onPlay();
         }
-        return (React.createElement(CustomBarControls, { className: b('custom-bar-controls', { muted: isMuted }, customBarControlsClassName), mute: {
-                isMuted,
+    }, [isPlaying, onPause, onPlay]);
+    const handleClick = useCallback(() => {
+        if (customControlsType === 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 = useCallback(() => setHovered(true), []);
+    const onFocusOut = useCallback(() => setHovered(false), []);
+    return (React.createElement("div", { className: b({ wrapper: !currentHeight, controls, started, hovered }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut },
+        React.createElement(ReactPlayer, { className: b('player'), url: src, 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 }),
+        controls === MediaVideoControlsType.Custom && (React.createElement(CustomBarControls, { 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.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
-        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 }),
-        renderCustomBarControls(muted, playedPercent)));
+            }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick, isStarted: started }))));
 });
 function getHeight(width) {
     return (width / 16) * 9;

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

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

package/build/esm/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/esm/components/ReactPlayer/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ReactPlayer';
+export default registerKeyset({ en, ru }, COMPONENT);

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

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

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

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

package/build/esm/icons/VideoControlPause.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../utils/svg';
+export const VideoControlPause = (props) => {
+    return (React.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, a11yHiddenSvgProps, props),
+        React.createElement("g", { opacity: "0.9" },
+            React.createElement("mask", { id: "path-1-outside-1_1237_523", maskUnits: "userSpaceOnUse", x: "1", y: "0", width: "22", height: "24", fill: "black" },
+                React.createElement("rect", { fill: "white", x: "1", width: "22", height: "24" }),
+                React.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.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.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)" }))));
+};

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

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

package/build/esm/icons/VideoControlPlay.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../utils/svg';
+export const VideoControlPlay = (props) => {
+    return (React.createElement("svg", Object.assign({ width: "24", height: "26", viewBox: "0 0 24 26", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, a11yHiddenSvgProps, props),
+        React.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.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" })));
+};

package/build/esm/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/esm/models/constructor-items/common.js

@@ -32,6 +32,11 @@ export var PlayButtonThemes;
     PlayButtonThemes["Blue"] = "blue";
     PlayButtonThemes["Grey"] = "grey";
 })(PlayButtonThemes || (PlayButtonThemes = {}));
+export var CustomControlsType;
+(function (CustomControlsType) {
+    CustomControlsType["WithMuteButton"] = "with-mute-button";
+    CustomControlsType["WithPlayPauseButton"] = "with-play-pause-button";
+})(CustomControlsType || (CustomControlsType = {}));
 export var MediaVideoType;
 (function (MediaVideoType) {
     MediaVideoType["Default"] = "default";

package/build/esm/schema/index.js

@@ -1,5 +1,5 @@
 export { validators } from './validators';
-import { TabsBlock, BannerCard, SliderBlock, ExtendedFeaturesBlock, HeaderBlock, BannerBlock, CompaniesBlock, MediaBlock, InfoBlock, QuestionsBlock, SecurityBlock, TableBlock, SimpleBlock, LinkTableBlock, PromoFeaturesBlock, PreviewBlock, ContentLayoutBlock, HeaderSliderBlock, IconsBlock, CardLayoutBlock, ShareBlock, MapBlock, } from './validators/blocks';
+import { TabsBlock, BannerCard, SliderBlock, ExtendedFeaturesBlock, HeaderBlock, BannerBlock, CompaniesBlock, MediaBlock, InfoBlock, QuestionsBlock, SecurityBlock, TableBlock, SimpleBlock, LinkTableBlock, PromoFeaturesBlock, PreviewBlock, ContentLayoutBlock, HeaderSliderBlock, IconsBlock, CardLayoutBlock, ShareBlock, MapBlock, FilterBlock, } from './validators/blocks';
 import { PartnerBlock, MediaCardBlock, TutorialCard, BackgroundCard, NewsCard, CardWithImage, PriceDetailedBlock, Quote, Divider, BasicCard, } from './validators/sub-blocks';
 import { AnimatableProps, BackgroundProps, MenuProps, withTheme } from './validators/common';
 import { filteredItem } from './validators/utils';
@@ -9,7 +9,7 @@ export const getBlocksCases = (blocks) => {
 };
 export 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({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), MapBlock), InfoBlock), SecurityBlock), TableBlock), TabsBlock), SimpleBlock), LinkTableBlock), PreviewBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), 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({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), MapBlock), InfoBlock), SecurityBlock), TableBlock), TabsBlock), SimpleBlock), LinkTableBlock), PreviewBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), ShareBlock), FilterBlock);
     const cardValidators = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, PartnerBlock), MediaCardBlock), BannerCard), PriceDetailedBlock), TutorialCard), BackgroundCard), NewsCard), CardWithImage), Quote), BasicCard);
     const constructorBlockSchemaNames = [
         'divider',
@@ -39,6 +39,7 @@ export function generateDefaultSchema(config) {
         'card-layout-block',
         'content-layout-block',
         'share-block',
+        'filter-block',
     ];
     const constructorCardSchemaNames = [
         'partner',

package/build/esm/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/esm/schema/validators/blocks.js

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.26.2",
+  "version": "1.27.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/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/server/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";