@gravity-ui/page-constructor 4.18.1 → 4.18.2-alpha.1

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

@@ -1,42 +1,54 @@
 import React, { useMemo } from 'react';
+import { Pause, Play, VolumeLow, VolumeXmark } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { Mute } from '../../icons/Mute';
-import { MuteSmall } from '../../icons/MuteSmall';
 import { Unmute } from '../../icons/Unmute';
-import { UnmuteSmall } from '../../icons/UnmuteSmall';
-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 playIconsMap = {
+    [CustomControlsType.WithMuteButton]: null,
+    [CustomControlsType.WithPlayPauseButton]: Play,
+};
+const pauseIconsMap = {
+    [CustomControlsType.WithMuteButton]: null,
+    [CustomControlsType.WithPlayPauseButton]: Pause,
+};
+const muteIconsMap = {
+    [CustomControlsType.WithMuteButton]: Mute,
+    [CustomControlsType.WithPlayPauseButton]: VolumeLow,
+};
+const unmuteIconsMap = {
+    [CustomControlsType.WithMuteButton]: Unmute,
+    [CustomControlsType.WithPlayPauseButton]: VolumeXmark,
+};
 const CustomBarControls = (props) => {
-    const { mute, elapsedTimePercent = 0, className, type = CustomControlsType.WithMuteButton, isPaused, onPlayClick, } = props;
-    const muteIcon = useMemo(() => {
-        return type === CustomControlsType.WithMuteButton ? Mute : MuteSmall;
-    }, [type]);
-    const unmuteIcon = useMemo(() => {
-        return type === CustomControlsType.WithMuteButton ? Unmute : UnmuteSmall;
-    }, [type]);
+    const { mute, elapsedTimePercent = 0, className, type = CustomControlsType.WithMuteButton, isPaused, onPlayClick, muteButtonShown: isMuteButtonShown = true, shown, positioning, } = props;
+    const muteIcon = muteIconsMap[type];
+    const unmuteIcon = unmuteIconsMap[type];
+    const playIcon = playIconsMap[type];
+    const pauseIcon = pauseIconsMap[type];
     const muteButton = useMemo(() => {
-        if (!mute) {
+        if (!mute || !isMuteButtonShown) {
             return null;
         }
         const { isMuted, changeMute } = mute;
         return (React.createElement("button", { className: b('button', { type }), onClick: changeMute, "aria-label": i18n(isMuted ? 'unmute' : 'mute') },
             React.createElement(Icon, { data: isMuted ? unmuteIcon : muteIcon, className: b('mute-icon', { type }) }),
             type === CustomControlsType.WithMuteButton && !isMuted && (React.createElement(CircleProgress, { elapsedTime: elapsedTimePercent, strokeWidth: 5 }))));
-    }, [elapsedTimePercent, mute, muteIcon, type, unmuteIcon]);
+    }, [elapsedTimePercent, isMuteButtonShown, mute, muteIcon, type, unmuteIcon]);
     const playPauseButton = useMemo(() => {
-        if (type !== CustomControlsType.WithPlayPauseButton) {
+        const icon = isPaused ? playIcon : pauseIcon;
+        if (type === CustomControlsType.WithMuteButton || !icon) {
             return null;
         }
         return (React.createElement("button", { onClick: onPlayClick, className: b('button', { type }), "aria-label": i18n(isPaused ? 'play' : 'pause') },
-            React.createElement(Icon, { data: isPaused ? VideoControlPlay : VideoControlPause, className: b('play-icon') })));
-    }, [isPaused, onPlayClick, type]);
-    return (React.createElement("div", { className: b('wrapper', { type }, className) },
+            React.createElement(Icon, { data: icon, className: b('play-icon', { type }) })));
+    }, [isPaused, onPlayClick, type, playIcon, pauseIcon]);
+    return (React.createElement("div", { className: b('wrapper', { type, shown, positioning }, className) },
         playPauseButton,
         muteButton));
 };

package/build/esm/components/ReactPlayer/ReactPlayer.css

@@ -46,14 +46,8 @@ unpredictable css rules order in build */
 .pc-ReactPlayer__icon {
   margin-left: 6px;
 }
-.pc-ReactPlayer:hover .pc-ReactPlayer__custom-bar-controls {
-  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 {
+.pc-ReactPlayer_controls_custom::before {
+  display: none;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -62,14 +56,6 @@ unpredictable css rules order in build */
   opacity: 0;
   transition: opacity 300ms;
 }
-.pc-ReactPlayer__custom-bar-controls {
-  opacity: 0;
-  transition: opacity 300ms ease 3s;
-}
-.pc-ReactPlayer__custom-bar-controls_muted {
-  opacity: 1;
-  transition: opacity 0s ease 0s;
-}
 @media only screen and (max-width: 577px) {
   .pc-ReactPlayer__button_text {
     font-size: 20px;

package/build/esm/components/ReactPlayer/ReactPlayer.d.ts

@@ -9,6 +9,7 @@ export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 's
     showPreview?: boolean;
     onClickPreview?: () => void;
     height?: number;
+    ratio?: number;
     children?: React.ReactNode;
 }
 export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockHandler>>;

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -7,7 +7,7 @@ import { MobileContext } from '../../context/mobileContext';
 import { VideoContext } from '../../context/videoContext';
 import { useAnalytics, useMount } from '../../hooks';
 import { PlayVideo } from '../../icons';
-import { CustomControlsType, DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
+import { CustomControlsButtonPositioning, CustomControlsType, DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
 import { block } from '../../utils';
 import CustomBarControls from './CustomBarControls';
 import i18n from './i18n';
@@ -19,9 +19,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, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, ratio, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
-    const { type: customControlsType = CustomControlsType.WithMuteButton } = customControlsOptions;
+    const { type: customControlsType = CustomControlsType.WithMuteButton, muteButtonShown, positioning = CustomControlsButtonPositioning.Center, } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
     const { playingVideoRef, setProps } = useContext(VideoContext);
@@ -59,10 +59,10 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
     }, [showPreview, playerRef]);
     useEffect(() => {
-        if (playerRef) {
+        if (playerRef && !started) {
             setIsPlaying(autoPlay);
         }
-    }, [autoPlay, playerRef]);
+    }, [autoPlay, playerRef, started]);
     useEffect(() => setMuted(mute), [mute]);
     useEffect(() => {
         if (!started && isPlaying) {
@@ -84,7 +84,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                     parseFloat(paddingLeft) -
                     parseFloat(paddingRight);
                 setWidth(newWidth);
-                setCurrentHeight(Math.floor(getHeight(newWidth)));
+                setCurrentHeight(Math.floor(getHeight(newWidth, ratio)));
             }
         }, 200);
         updateSize();
@@ -92,7 +92,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         return () => {
             window.removeEventListener('resize', updateSize);
         };
-    }, []);
+    }, [ratio]);
     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(() => {
@@ -111,7 +111,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const changeMute = useCallback((isMuted) => {
         if (isMuted &&
             playerRef &&
-            customControlsType !== CustomControlsType.WithPlayPauseButton) {
+            customControlsType === CustomControlsType.WithMuteButton) {
             playerRef.seekTo(0);
             setPlayedPercent(0);
         }
@@ -153,7 +153,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const onPause = useCallback(() => {
         // For support correct state for youtube
         if (controls !== MediaVideoControlsType.Custom ||
-            customControlsType === CustomControlsType.WithPlayPauseButton) {
+            customControlsType !== CustomControlsType.WithMuteButton) {
             setIsPlaying(false);
         }
     }, [controls, customControlsType]);
@@ -210,18 +210,23 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     }, [changeMute, customControlsType, muted, onPlayClick]);
     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 }, isMounted ? (React.createElement(Fragment, null,
-        React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
-        controls === MediaVideoControlsType.Custom && started && (React.createElement(CustomBarControls, { className: b('custom-bar-controls', { muted }, customBarControlsClassName), mute: {
+    return (React.createElement("div", { className: b({
+            wrapper: !currentHeight,
+            controls,
+        }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (React.createElement(Fragment, null,
+        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: autoPlay && customControlsType !== CustomControlsType.WithMuteButton
+                ? undefined
+                : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
+        controls === MediaVideoControlsType.Custom && (React.createElement(CustomBarControls, { className: customBarControlsClassName, mute: {
                 isMuted: muted,
                 changeMute: (event) => {
                     event.stopPropagation();
                     changeMute(muted);
                 },
-            }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick })))) : null));
+            }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick, muteButtonShown: muteButtonShown, shown: hovered && ((!started && !previewImgUrl) || started), positioning: positioning })))) : null));
 });
-function getHeight(width) {
-    return (width / 16) * 9;
+function getHeight(width, ratio = 9 / 16) {
+    return width * ratio;
 }
 function getParentElement(element) {
     const parentElement = element.parentElement;

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

@@ -29,6 +29,11 @@ export declare enum CustomControlsType {
     WithMuteButton = "with-mute-button",
     WithPlayPauseButton = "with-play-pause-button"
 }
+export declare enum CustomControlsButtonPositioning {
+    Left = "left",
+    Right = "right",
+    Center = "center"
+}
 export declare enum MediaVideoType {
     Default = "default",
     Player = "player"
@@ -158,6 +163,8 @@ export interface ButtonImageProps {
 }
 export interface CustomControlsOptions {
     type?: CustomControlsType;
+    muteButtonShown?: boolean;
+    positioning?: CustomControlsButtonPositioning;
 }
 export interface PlayButtonProps extends ClassNameProps {
     type?: PlayButtonType;
@@ -168,6 +175,7 @@ export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
+    ratio?: number;
     metrika?: MetrikaVideo;
     previewImg?: string;
 }

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

@@ -32,6 +32,12 @@ export var CustomControlsType;
     CustomControlsType["WithMuteButton"] = "with-mute-button";
     CustomControlsType["WithPlayPauseButton"] = "with-play-pause-button";
 })(CustomControlsType || (CustomControlsType = {}));
+export var CustomControlsButtonPositioning;
+(function (CustomControlsButtonPositioning) {
+    CustomControlsButtonPositioning["Left"] = "left";
+    CustomControlsButtonPositioning["Right"] = "right";
+    CustomControlsButtonPositioning["Center"] = "center";
+})(CustomControlsButtonPositioning || (CustomControlsButtonPositioning = {}));
 export var MediaVideoType;
 (function (MediaVideoType) {
     MediaVideoType["Default"] = "default";

package/package.json

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

package/server/models/constructor-items/common.d.ts

@@ -29,6 +29,11 @@ export declare enum CustomControlsType {
     WithMuteButton = "with-mute-button",
     WithPlayPauseButton = "with-play-pause-button"
 }
+export declare enum CustomControlsButtonPositioning {
+    Left = "left",
+    Right = "right",
+    Center = "center"
+}
 export declare enum MediaVideoType {
     Default = "default",
     Player = "player"
@@ -158,6 +163,8 @@ export interface ButtonImageProps {
 }
 export interface CustomControlsOptions {
     type?: CustomControlsType;
+    muteButtonShown?: boolean;
+    positioning?: CustomControlsButtonPositioning;
 }
 export interface PlayButtonProps extends ClassNameProps {
     type?: PlayButtonType;
@@ -168,6 +175,7 @@ export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
+    ratio?: number;
     metrika?: MetrikaVideo;
     previewImg?: 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.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
+exports.MediaVideoControlsType = exports.MediaVideoType = exports.CustomControlsButtonPositioning = exports.CustomControlsType = exports.PlayButtonThemes = exports.PlayButtonType = exports.PriceLabelColor = exports.PriceDetailsType = exports.AuthorType = void 0;
 // enums
 var AuthorType;
 (function (AuthorType) {
@@ -35,6 +35,12 @@ var CustomControlsType;
     CustomControlsType["WithMuteButton"] = "with-mute-button";
     CustomControlsType["WithPlayPauseButton"] = "with-play-pause-button";
 })(CustomControlsType = exports.CustomControlsType || (exports.CustomControlsType = {}));
+var CustomControlsButtonPositioning;
+(function (CustomControlsButtonPositioning) {
+    CustomControlsButtonPositioning["Left"] = "left";
+    CustomControlsButtonPositioning["Right"] = "right";
+    CustomControlsButtonPositioning["Center"] = "center";
+})(CustomControlsButtonPositioning = exports.CustomControlsButtonPositioning || (exports.CustomControlsButtonPositioning = {}));
 var MediaVideoType;
 (function (MediaVideoType) {
     MediaVideoType["Default"] = "default";