@doyourjob/gravity-ui-page-constructor 5.31.282 → 5.31.284

package/build/esm/blocks/Header/useAdaptiveUnicornBackground.js

@@ -0,0 +1,202 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+const LOW_DEVICE_MEMORY_GB = 4;
+const LOW_HARDWARE_CONCURRENCY = 4;
+const SLOW_EFFECTIVE_TYPES = new Set(['slow-2g', '2g']);
+const FRAME_WARMUP_COUNT = 5;
+const SLOW_FRAME_MS = 50;
+const SLOW_FRAME_LIMIT = 8;
+const LONG_TASK_MS = 100;
+const LONG_TASK_LIMIT = 2;
+const FALLBACK_FADE_TIMEOUT_MS = 500;
+function prefersStaticBackground() {
+    var _a;
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const navigatorWithSignals = navigator;
+    const connection = navigatorWithSignals.connection;
+    return (((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, REDUCED_MOTION_QUERY).matches) ||
+        (connection === null || connection === void 0 ? void 0 : connection.saveData) === true ||
+        ((connection === null || connection === void 0 ? void 0 : connection.effectiveType) ? SLOW_EFFECTIVE_TYPES.has(connection.effectiveType) : false) ||
+        (navigatorWithSignals.deviceMemory
+            ? navigatorWithSignals.deviceMemory <= LOW_DEVICE_MEMORY_GB
+            : false) ||
+        (navigator.hardwareConcurrency
+            ? navigator.hardwareConcurrency <= LOW_HARDWARE_CONCURRENCY
+            : false));
+}
+function supportsLongTaskObserver() {
+    var _a;
+    return (typeof PerformanceObserver !== 'undefined' &&
+        ((_a = PerformanceObserver.supportedEntryTypes) === null || _a === void 0 ? void 0 : _a.includes('longtask')));
+}
+function isFallbackShortcut(event) {
+    return (event.altKey && event.shiftKey && (event.code === 'KeyU' || event.key.toLowerCase() === 'u'));
+}
+export function useAdaptiveUnicornBackground({ enabled, fallbackAvailable, }) {
+    const backgroundRef = useRef(null);
+    const [mode, setMode] = useState('checking');
+    const [isNearViewport, setIsNearViewport] = useState(false);
+    const [fallbackFadeStarted, setFallbackFadeStarted] = useState(false);
+    const [fallbackImageLoaded, setFallbackImageLoaded] = useState(false);
+    const [sceneLoaded, setSceneLoaded] = useState(false);
+    const degradeBackground = useCallback(() => {
+        setMode((currentMode) => {
+            if (!fallbackAvailable) {
+                return 'paused';
+            }
+            return currentMode === 'animation' && isNearViewport ? 'fallback-fading' : 'fallback';
+        });
+    }, [fallbackAvailable, isNearViewport]);
+    const finishFallbackFade = useCallback(() => {
+        setMode((currentMode) => (currentMode === 'fallback-fading' ? 'fallback' : currentMode));
+    }, []);
+    const handleFallbackImageLoad = useCallback(() => {
+        if (mode === 'fallback-fading') {
+            setFallbackImageLoaded(true);
+        }
+    }, [mode]);
+    const handleSceneLoad = useCallback(() => {
+        setSceneLoaded(true);
+    }, []);
+    useEffect(() => {
+        setSceneLoaded(false);
+        setIsNearViewport(false);
+        if (!enabled) {
+            setMode('paused');
+            return;
+        }
+        if (prefersStaticBackground()) {
+            setMode(fallbackAvailable ? 'fallback' : 'paused');
+            return;
+        }
+        setMode('animation');
+    }, [enabled, fallbackAvailable]);
+    useEffect(() => {
+        if (!enabled) {
+            return undefined;
+        }
+        const handleKeyDown = (event) => {
+            if (isFallbackShortcut(event)) {
+                event.preventDefault();
+                degradeBackground();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [degradeBackground, enabled]);
+    useEffect(() => {
+        if (mode !== 'fallback-fading') {
+            setFallbackFadeStarted(false);
+            setFallbackImageLoaded(false);
+        }
+        return undefined;
+    }, [mode]);
+    useEffect(() => {
+        if (mode !== 'fallback-fading' || !fallbackImageLoaded) {
+            return undefined;
+        }
+        if (typeof window === 'undefined' || !window.requestAnimationFrame) {
+            setFallbackFadeStarted(true);
+            return undefined;
+        }
+        const frameId = window.requestAnimationFrame(() => setFallbackFadeStarted(true));
+        return () => { var _a; return (_a = window.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(window, frameId); };
+    }, [fallbackImageLoaded, mode]);
+    useEffect(() => {
+        if (mode !== 'fallback-fading' || !fallbackFadeStarted) {
+            return undefined;
+        }
+        const fallbackTimer = setTimeout(finishFallbackFade, FALLBACK_FADE_TIMEOUT_MS);
+        return () => clearTimeout(fallbackTimer);
+    }, [fallbackFadeStarted, finishFallbackFade, mode]);
+    useEffect(() => {
+        if (!enabled || mode !== 'animation') {
+            return undefined;
+        }
+        const target = backgroundRef.current;
+        if (!target || typeof IntersectionObserver === 'undefined') {
+            setIsNearViewport(true);
+            return undefined;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            setIsNearViewport(entry.isIntersecting);
+            if (!entry.isIntersecting) {
+                setSceneLoaded(false);
+            }
+        }, { rootMargin: '300px 0px', threshold: 0 });
+        observer.observe(target);
+        return () => observer.disconnect();
+    }, [enabled, mode]);
+    useEffect(() => {
+        if (mode !== 'animation' ||
+            !isNearViewport ||
+            !sceneLoaded ||
+            typeof window === 'undefined' ||
+            !window.requestAnimationFrame ||
+            !window.cancelAnimationFrame) {
+            return undefined;
+        }
+        let frameId = 0;
+        let previousTime;
+        let measuredFrames = 0;
+        let slowFrames = 0;
+        let longTasks = 0;
+        let stopped = false;
+        let observer;
+        const degradeOnce = () => {
+            if (stopped) {
+                return;
+            }
+            stopped = true;
+            degradeBackground();
+        };
+        const tick = (time) => {
+            if (stopped) {
+                return;
+            }
+            if (previousTime !== undefined) {
+                measuredFrames += 1;
+                if (measuredFrames > FRAME_WARMUP_COUNT && time - previousTime > SLOW_FRAME_MS) {
+                    slowFrames += 1;
+                    if (slowFrames >= SLOW_FRAME_LIMIT) {
+                        degradeOnce();
+                        return;
+                    }
+                }
+            }
+            previousTime = time;
+            frameId = window.requestAnimationFrame(tick);
+        };
+        frameId = window.requestAnimationFrame(tick);
+        if (supportsLongTaskObserver()) {
+            observer = new PerformanceObserver((entries) => {
+                entries.getEntries().forEach((entry) => {
+                    if (entry.duration >= LONG_TASK_MS) {
+                        longTasks += 1;
+                    }
+                });
+                if (longTasks >= LONG_TASK_LIMIT) {
+                    degradeOnce();
+                }
+            });
+            observer.observe({ entryTypes: ['longtask'] });
+        }
+        return () => {
+            stopped = true;
+            window.cancelAnimationFrame(frameId);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [degradeBackground, isNearViewport, mode, sceneLoaded]);
+    return {
+        backgroundRef,
+        handleFallbackImageLoad,
+        handleFallbackTransitionEnd: finishFallbackFade,
+        handleSceneLoad,
+        isFallbackVisible: mode === 'fallback' || (mode === 'fallback-fading' && fallbackFadeStarted),
+        shouldMountScene: (mode === 'animation' && isNearViewport) || mode === 'fallback-fading',
+        shouldPlayScene: (mode === 'animation' && isNearViewport) || mode === 'fallback-fading',
+        showFallback: (mode === 'fallback-fading' || mode === 'fallback') && fallbackAvailable,
+    };
+}

package/build/esm/blocks/HeaderSlider/schema.d.ts

@@ -769,6 +769,15 @@ export declare const HeaderSliderBlock: {
                         unicornSdkUrl: {
                             type: string;
                         };
+                        unicornFallbackImage: {
+                            type: string;
+                        };
+                        unicornFallbackImageMobile: {
+                            type: string;
+                        };
+                        forceMobileImage: {
+                            type: string;
+                        };
                         breadcrumbs: {
                             type: string;
                             additionalProperties: boolean;

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

@@ -11,7 +11,7 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { animated, image, video, youtube, videoIframe, dataLens, color, height, previewImg, previewVideo, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, playButtonCorner, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
+    const { animated, image, video, youtube, videoIframe, dataLens, color, height, previewImg, previewVideo, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, playButtonCorner, playButtonText, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const { microdata } = useContext(InnerContext);
     const qaAttributes = getQaAttrubutes(qa, 'video');
@@ -43,7 +43,7 @@ export const Media = (props) => {
             }
         }
         if (youtube || videoIframe) {
-            result = (React.createElement(IframeVideoBlock, { className: b('youtube', youtubeClassName), record: youtube, videoIframe: videoIframe, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, previewVideo: previewVideo, playButtonCorner: playButtonCorner, height: height, ratio: ratio, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay, onImageLoad: onImageLoad }));
+            result = (React.createElement(IframeVideoBlock, { className: b('youtube', youtubeClassName), record: youtube, videoIframe: videoIframe, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, previewVideo: previewVideo, playButtonCorner: playButtonCorner, playButtonText: playButtonText, height: height, ratio: ratio, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay, onImageLoad: onImageLoad }));
         }
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });
@@ -80,6 +80,7 @@ export const Media = (props) => {
         ratio,
         youtubeClassName,
         playButtonCorner,
+        playButtonText,
         autoplay,
         margins,
     ]);

package/build/esm/components/TextNode/TextNode.css

@@ -0,0 +1,2 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './TextNode.css';
+export interface TextNodeProps {
+    children?: string;
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+}
+declare const TextNode: ({ children, tag }: TextNodeProps) => React.DetailedReactHTMLElement<{
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+    className: string;
+}, HTMLElement> | null;
+export default TextNode;

package/build/esm/components/TextNode/TextNode.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { block } from '../../utils';
+import './TextNode.css';
+const b = block('tag');
+const TextNode = ({ children, tag = 'div' }) => {
+    if (!children) {
+        return null;
+    }
+    return React.createElement(tag, {
+        dangerouslySetInnerHTML: { __html: children },
+        className: b(),
+    });
+};
+export default TextNode;

package/build/esm/components/VideoBlock/VideoBlock.css

@@ -57,6 +57,14 @@ unpredictable css rules order in build */
   width: 44px;
   height: 44px;
 }
+.pc-VideoBlock__button_text {
+  height: 61px;
+  width: auto;
+  border-radius: 16px;
+  font-size: 24px;
+  line-height: 35px;
+  padding: 0 28px;
+}
 .pc-VideoBlock__icon {
   margin-left: 1px;
 }

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

@@ -17,6 +17,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     previewVideo?: string;
     playButton?: React.ReactNode;
     playButtonCorner?: boolean;
+    playButtonText?: string;
     playButtonId?: string;
     height?: number;
     ratio?: number | 'auto';

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

@@ -45,7 +45,7 @@ export function getHeight(width, ratio) {
     return (width / 16) * 9;
 }
 const VideoBlock = (props) => {
-    const { stream, record, videoIframe, attributes, className, id, previewImg, previewVideo, playButton, playButtonCorner, playButtonId, height, ratio, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
+    const { stream, record, videoIframe, attributes, className, id, previewImg, previewVideo, playButton, playButtonCorner, playButtonText, playButtonId, height, ratio, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
     const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
     const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
     const ref = useRef(null);
@@ -106,7 +106,9 @@ const VideoBlock = (props) => {
         iframeContent,
         previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId },
             isHovered && previewVideo ? (React.createElement("video", { src: previewVideo, className: b('video'), autoPlay: true, muted: true, loop: true, playsInline: true })) : (React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad })),
-            playButton || (React.createElement("button", { title: "Play", id: buttonId, className: b('button', { corner: playButtonCorner }) },
-                React.createElement(Icon, { className: b('icon'), data: PlayFill, size: playButtonCorner ? 16 : 24 })))))));
+            playButton || (React.createElement("button", { title: "Play", id: buttonId, className: b('button', {
+                    corner: playButtonCorner,
+                    text: Boolean(playButtonText),
+                }) }, playButtonText ? (React.createElement("div", { className: b('button-text') }, playButtonText)) : (React.createElement(Icon, { className: b('icon'), data: PlayFill, size: playButtonCorner ? 16 : 24 }))))))));
 };
 export default VideoBlock;

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

@@ -228,6 +228,9 @@ export interface HeaderBlockProps {
     theme?: 'light' | 'dark';
     unicorn?: string;
     unicornSdkUrl?: string;
+    unicornFallbackImage?: string;
+    unicornFallbackImageMobile?: string;
+    forceMobileImage?: boolean;
     verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';
     verticalOffsetTop?: 's' | 'm' | 'l' | 'xl';
     verticalOffsetBottom?: 's' | 'm' | 'l' | 'xl';

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

@@ -196,6 +196,7 @@ export interface MediaComponentYoutubeProps {
     previewImg?: string;
     previewVideo?: string;
     playButtonCorner?: boolean;
+    playButtonText?: string;
     fullscreen?: boolean;
 }
 export interface MediaComponentImageProps {

package/package.json

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