@gravity-ui/page-constructor 1.8.2-alpha.0 → 1.8.2-alpha.1

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

@@ -31,15 +31,16 @@ 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 }));
+        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 }));
     }, [
         video,
-        metrika,
+        height,
+        videoClassName,
         previewImg,
         playVideo,
-        videoClassName,
         commonPlayButton,
         customBarControlsClassName,
+        metrika,
     ]);
     const defaultVideoBlock = (0, react_1.useMemo)(() => {
         return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height } },

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

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

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

@@ -19,7 +19,7 @@ const FPS = 60;
 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, } = props;
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, 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 autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -28,7 +28,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [playerRef, setPlayerRef] = (0, react_1.useState)();
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(autoPlay);
     const [playedPercent, setPlayedPercent] = (0, react_1.useState)(0);
-    const [height, setHeight] = (0, react_1.useState)(0);
+    const [currentHeight, setCurrentHeight] = (0, react_1.useState)(height);
     const [width, setWidth] = (0, react_1.useState)(0);
     const [muted, setMuted] = (0, react_1.useState)(mute);
     const [started, setStarted] = (0, react_1.useState)(autoPlay);
@@ -73,7 +73,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                     parseFloat(paddingLeft) -
                     parseFloat(paddingRight);
                 setWidth(newWidth);
-                setHeight(Math.floor(getHeight(newWidth)));
+                setCurrentHeight(Math.floor(getHeight(newWidth)));
             }
         }, 200);
         updateSize();
@@ -179,8 +179,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 },
             }, elapsedTimePercent: elapsedTimePercent }));
     }, [controls, isPlaying, customBarControlsClassName, changeMute]);
-    return (react_1.default.createElement("div", { className: b({ wrapper: !height }, className), ref: ref, onClick: handleClick },
-        react_1.default.createElement(react_player_1.default, { className: b('player'), url: src, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: height || '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 }),
+    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: 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 }),
         renderCustomBarControls(muted, playedPercent)));
 });
 function getHeight(width) {

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

@@ -29,15 +29,16 @@ 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 }));
+        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, height: height }));
     }, [
         video,
-        metrika,
+        height,
+        videoClassName,
         previewImg,
         playVideo,
-        videoClassName,
         commonPlayButton,
         customBarControlsClassName,
+        metrika,
     ]);
     const defaultVideoBlock = useMemo(() => {
         return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height } },

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

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

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

@@ -16,7 +16,7 @@ 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, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, 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 autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -25,7 +25,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [playerRef, setPlayerRef] = useState();
     const [isPlaying, setIsPlaying] = useState(autoPlay);
     const [playedPercent, setPlayedPercent] = useState(0);
-    const [height, setHeight] = useState(0);
+    const [currentHeight, setCurrentHeight] = useState(height);
     const [width, setWidth] = useState(0);
     const [muted, setMuted] = useState(mute);
     const [started, setStarted] = useState(autoPlay);
@@ -70,7 +70,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                     parseFloat(paddingLeft) -
                     parseFloat(paddingRight);
                 setWidth(newWidth);
-                setHeight(Math.floor(getHeight(newWidth)));
+                setCurrentHeight(Math.floor(getHeight(newWidth)));
             }
         }, 200);
         updateSize();
@@ -176,8 +176,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 },
             }, elapsedTimePercent: elapsedTimePercent }));
     }, [controls, isPlaying, customBarControlsClassName, changeMute]);
-    return (React.createElement("div", { className: b({ wrapper: !height }, className), ref: ref, onClick: handleClick },
-        React.createElement(ReactPlayer, { className: b('player'), url: src, muted: muted, controls: controls === MediaVideoControlsType.Default, height: height || '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 }),
+    return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
+        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 }),
         renderCustomBarControls(muted, playedPercent)));
 });
 function getHeight(width) {

package/package.json

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