@gravity-ui/page-constructor 4.27.3-alpha.0 → 4.28.0

package/build/cjs/blocks/Header/Header.css

@@ -20,9 +20,6 @@ unpredictable css rules order in build */
   position: relative;
   height: 100%;
 }
-.pc-header-block__content_theme_dark {
-  --g-color-line-focus: var(--pc-color-line-focus-dark);
-}
 .pc-header-block__content_theme_dark .pc-header-block__title,
 .pc-header-block__content_theme_dark .pc-header-block__overtitle {
   color: var(--g-color-text-light-primary);

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { MediaAllProps } from '../Media/Media';
-export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullscreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'>;
+export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullscreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className' | 'previewImg' | 'autoplay'>;
 export interface FullscreenMediaProps {
     showFullscreenIcon?: boolean;
     children: (props?: ChildMediaRenderProps) => JSX.Element;

package/build/cjs/components/FullscreenMedia/FullscreenMedia.js

@@ -35,6 +35,8 @@ const FullscreenMedia = ({ children, showFullscreenIcon = true }) => {
                     videoClassName: getMediaClass('video'),
                     youtubeClassName: getMediaClass('youtube'),
                     fullscreen: true,
+                    previewImg: undefined,
+                    autoplay: true,
                 }))))));
 };
 exports.default = FullscreenMedia;

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

@@ -4,6 +4,7 @@ import { VideoAdditionProps } from './Video/Video';
 export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
     youtubeClassName?: string;
+    autoplay?: boolean;
 }
 export declare const Media: (props: MediaAllProps) => JSX.Element;
 export default Media;

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

@@ -11,7 +11,7 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
@@ -43,7 +43,7 @@ const Media = (props) => {
             }
         }
         if (youtube) {
-            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents }));
+            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay }));
         }
         if (dataLens) {
             result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
@@ -71,6 +71,7 @@ const Media = (props) => {
         customBarControlsClassName,
         ratio,
         youtubeClassName,
+        autoplay,
     ]);
     return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
 };

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

@@ -32,7 +32,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = (0, react_1.useMemo)(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
-        return (react_1.default.createElement(ReactPlayer_1.default, { ref: ref, 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, ratio: ratio }));
+        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, ratio: ratio }));
     }, [
         video,
         height,

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

@@ -11,6 +11,5 @@ export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 's
     ratio?: number;
     children?: React.ReactNode;
 }
-type ReactPlayerBlockRefType = ReactPlayerBlockHandler | undefined;
-export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockRefType>>;
+export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockHandler>>;
 export default ReactPlayerBlock;

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

@@ -48,19 +48,9 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         return [];
     }, [analyticsEvents]);
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.ReactPlayerControls);
-    (0, react_1.useImperativeHandle)(originRef, () => {
-        if (!playerRef) {
-            return;
-        }
-        const videoInstance = playerRef.getInternalPlayer();
-        const { play, pause, addEventListener } = videoInstance;
-        // eslint-disable-next-line consistent-return
-        return {
-            play: play.bind(videoInstance),
-            pause: pause.bind(videoInstance),
-            addEventListener: addEventListener.bind(videoInstance),
-        };
-    }, [playerRef]);
+    (0, react_1.useImperativeHandle)(originRef, () => ({
+        pause: () => setIsPlaying(false),
+    }));
     (0, react_1.useEffect)(() => {
         if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
             setMuted(true);

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

@@ -15,6 +15,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     playButton?: React.ReactNode;
     height?: number;
     fullscreen?: boolean;
+    autoplay?: boolean;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -41,7 +41,7 @@ function getHeight(width) {
 }
 exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, } = props;
     const handleAnalytics = (0, useAnalytics_1.useAnalytics)(common_1.DefaultEventNames.VideoPreview);
     const src = getVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
@@ -75,7 +75,7 @@ const VideoBlock = (props) => {
             const iframe = document.createElement('iframe');
             iframe.id = fullId;
             if (!previewImg) {
-                iframe.src = `${src}?${(0, utils_1.getPageSearchParams)(attributes || {})}`;
+                iframe.src = `${src}?${(0, utils_1.getPageSearchParams)(Object.assign(Object.assign({}, (attributes || {})), (autoplay ? exports.AUTOPLAY_ATTRIBUTES : {})))}`;
             }
             iframe.width = '100%';
             iframe.height = '100%';
@@ -87,7 +87,7 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg, autoplay]);
     (0, react_1.useEffect)(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);

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

@@ -1,3 +1,4 @@
 export type ArrowDirection = 'left' | 'right';
-export interface ReactPlayerBlockHandler extends Pick<HTMLVideoElement, 'play' | 'pause' | 'addEventListener'> {
+export interface ReactPlayerBlockHandler {
+    pause: () => void;
 }

package/build/esm/blocks/Header/Header.css

@@ -20,9 +20,6 @@ unpredictable css rules order in build */
   position: relative;
   height: 100%;
 }
-.pc-header-block__content_theme_dark {
-  --g-color-line-focus: var(--pc-color-line-focus-dark);
-}
 .pc-header-block__content_theme_dark .pc-header-block__title,
 .pc-header-block__content_theme_dark .pc-header-block__overtitle {
   color: var(--g-color-text-light-primary);

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { MediaAllProps } from '../Media/Media';
 import './FullscreenMedia.css';
-export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullscreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'>;
+export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullscreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className' | 'previewImg' | 'autoplay'>;
 export interface FullscreenMediaProps {
     showFullscreenIcon?: boolean;
     children: (props?: ChildMediaRenderProps) => JSX.Element;

package/build/esm/components/FullscreenMedia/FullscreenMedia.js

@@ -33,6 +33,8 @@ const FullscreenMedia = ({ children, showFullscreenIcon = true }) => {
                     videoClassName: getMediaClass('video'),
                     youtubeClassName: getMediaClass('youtube'),
                     fullscreen: true,
+                    previewImg: undefined,
+                    autoplay: true,
                 }))))));
 };
 export default FullscreenMedia;

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

@@ -5,6 +5,7 @@ import './Media.css';
 export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
     youtubeClassName?: string;
+    autoplay?: boolean;
 }
 export declare const Media: (props: MediaAllProps) => JSX.Element;
 export default Media;

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

@@ -8,7 +8,7 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
@@ -40,7 +40,7 @@ export const Media = (props) => {
             }
         }
         if (youtube) {
-            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents }));
+            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay }));
         }
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });
@@ -68,6 +68,7 @@ export const Media = (props) => {
         customBarControlsClassName,
         ratio,
         youtubeClassName,
+        autoplay,
     ]);
     return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
 };

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

@@ -30,7 +30,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = useMemo(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
-        return (React.createElement(ReactPlayerBlock, { ref: ref, 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, ratio: ratio }));
+        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, ratio: ratio }));
     }, [
         video,
         height,

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

@@ -12,6 +12,5 @@ export interface ReactPlayerBlockProps extends Omit<MediaVideoProps, 'loop' | 's
     ratio?: number;
     children?: React.ReactNode;
 }
-type ReactPlayerBlockRefType = ReactPlayerBlockHandler | undefined;
-export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockRefType>>;
+export declare const ReactPlayerBlock: React.ForwardRefExoticComponent<ReactPlayerBlockProps & React.RefAttributes<ReactPlayerBlockHandler>>;
 export default ReactPlayerBlock;

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

@@ -45,19 +45,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         return [];
     }, [analyticsEvents]);
     const handleAnalytics = useAnalytics(DefaultEventNames.ReactPlayerControls);
-    useImperativeHandle(originRef, () => {
-        if (!playerRef) {
-            return;
-        }
-        const videoInstance = playerRef.getInternalPlayer();
-        const { play, pause, addEventListener } = videoInstance;
-        // eslint-disable-next-line consistent-return
-        return {
-            play: play.bind(videoInstance),
-            pause: pause.bind(videoInstance),
-            addEventListener: addEventListener.bind(videoInstance),
-        };
-    }, [playerRef]);
+    useImperativeHandle(originRef, () => ({
+        pause: () => setIsPlaying(false),
+    }));
     useEffect(() => {
         if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
             setMuted(true);

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

@@ -16,6 +16,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     playButton?: React.ReactNode;
     height?: number;
     fullscreen?: boolean;
+    autoplay?: boolean;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

package/build/esm/components/VideoBlock/VideoBlock.js

@@ -37,7 +37,7 @@ export function getHeight(width) {
     return (width / 16) * 9;
 }
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, } = props;
     const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
     const src = getVideoSrc(stream, record);
     const ref = useRef(null);
@@ -71,7 +71,7 @@ const VideoBlock = (props) => {
             const iframe = document.createElement('iframe');
             iframe.id = fullId;
             if (!previewImg) {
-                iframe.src = `${src}?${getPageSearchParams(attributes || {})}`;
+                iframe.src = `${src}?${getPageSearchParams(Object.assign(Object.assign({}, (attributes || {})), (autoplay ? AUTOPLAY_ATTRIBUTES : {})))}`;
             }
             iframe.width = '100%';
             iframe.height = '100%';
@@ -83,7 +83,7 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg, autoplay]);
     useEffect(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);

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

@@ -1,3 +1,4 @@
 export type ArrowDirection = 'left' | 'right';
-export interface ReactPlayerBlockHandler extends Pick<HTMLVideoElement, 'play' | 'pause' | 'addEventListener'> {
+export interface ReactPlayerBlockHandler {
+    pause: () => void;
 }

package/package.json

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

package/server/models/components.d.ts

@@ -1,3 +1,4 @@
 export type ArrowDirection = 'left' | 'right';
-export interface ReactPlayerBlockHandler extends Pick<HTMLVideoElement, 'play' | 'pause' | 'addEventListener'> {
+export interface ReactPlayerBlockHandler {
+    pause: () => void;
 }