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

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

@@ -246,7 +246,7 @@ unpredictable css rules order in build */
   z-index: 5;
 }
 @media (max-width: 769px) {
-  .pc-header-block_has-background .pc-header-block__background.pc-header-block__background_unicorn, .pc-header-block_has-background .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_unicorn {
+  .pc-header-block_has-background .pc-header-block__background.pc-header-block__background_unicorn:not(.pc-header-block__background_unicorn-fallback), .pc-header-block_has-background .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_unicorn:not(.pc-header-block__background_unicorn-fallback) {
     display: none;
   }
 }
@@ -263,6 +263,23 @@ unpredictable css rules order in build */
   width: 100%;
   background-color: var(--g-color-base-background);
 }
+.pc-header-block__fallback {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.pc-header-block__fallback_visible {
+  opacity: 1;
+}
+.pc-header-block__fallback-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 .pc-header-block__overtitle {
   font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
   line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));

package/build/cjs/blocks/Header/Header.js

@@ -20,6 +20,7 @@ const HeaderStock_1 = tslib_1.__importDefault(require("./HeaderStock/HeaderStock
 const HeaderTag_1 = tslib_1.__importDefault(require("./HeaderTag/HeaderTag"));
 const HeaderTags_1 = tslib_1.__importDefault(require("./HeaderTags/HeaderTags"));
 const SwitchingTtitle_1 = tslib_1.__importDefault(require("./SwitchingTitle/SwitchingTtitle"));
+const useAdaptiveUnicornBackground_1 = require("./useAdaptiveUnicornBackground");
 const utils_3 = require("./utils");
 const b = (0, utils_2.block)('header-block');
 const Background = ({ background, isMobile }) => {
@@ -31,7 +32,7 @@ const Background = ({ background, isMobile }) => {
 const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 // eslint-disable-next-line complexity
 const HeaderBlock = (props) => {
-    const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, unicorn, unicornSdkUrl, } = props;
+    const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, unicorn, unicornSdkUrl, unicornFallbackImage, unicornFallbackImageMobile, forceMobileImage = true, } = props;
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { backButton, blockTag } = (0, react_1.useContext)(headerContext_1.HeaderContext);
     const theme = (0, theme_1.useTheme)();
@@ -43,6 +44,17 @@ const HeaderBlock = (props) => {
     const imageThemed = (0, react_1.useMemo)(() => image && (0, utils_2.getThemedValue)(image, theme), [image, theme]);
     const videoThemed = (0, react_1.useMemo)(() => video && (0, utils_2.getThemedValue)(video, theme), [theme, video]);
     const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
+    const fallbackImage = isMobile
+        ? unicornFallbackImageMobile || unicornFallbackImage
+        : unicornFallbackImage || unicornFallbackImageMobile;
+    const forceFallbackOnMobile = isMobile && forceMobileImage && Boolean(fallbackImage);
+    const { backgroundRef, handleFallbackImageLoad, handleFallbackTransitionEnd, handleSceneLoad, isFallbackVisible, shouldMountScene, shouldPlayScene, showFallback, } = (0, useAdaptiveUnicornBackground_1.useAdaptiveUnicornBackground)({
+        enabled: Boolean(unicorn) && !forceFallbackOnMobile,
+        fallbackAvailable: Boolean(fallbackImage),
+    });
+    const showFallbackImage = forceFallbackOnMobile || showFallback;
+    const isFallbackImageVisible = forceFallbackOnMobile || isFallbackVisible;
+    const shouldRenderScene = !forceFallbackOnMobile && shouldMountScene;
     const titleId = (0, uikit_1.useUniqId)();
     const headerRef = (0, react_1.useRef)(null);
     const hasBackground = Boolean(backgroundThemed || backgroundEffect);
@@ -72,8 +84,14 @@ const HeaderBlock = (props) => {
         backgroundThemed && fullWidth && react_1.default.createElement(FullWidthBackground, { background: backgroundThemed }),
         backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
         backgroundEffect && backgroundEffect.firstSrc && backgroundEffect.secondSrc && (react_1.default.createElement(components_1.BackgroundEffect, Object.assign({}, backgroundEffect, { attachRef: headerRef }))),
-        unicorn && (react_1.default.createElement("div", { className: b('background', { unicorn: true }) },
-            react_1.default.createElement(components_1.UnicornScene, { jsonFilePath: unicorn, sdkUrl: unicornSdkUrl }))),
+        unicorn && (react_1.default.createElement("div", { ref: backgroundRef, className: b('background', {
+                unicorn: true,
+                'unicorn-fallback': showFallbackImage,
+            }) },
+            showFallbackImage && fallbackImage && (react_1.default.createElement("picture", { className: b('fallback', { visible: isFallbackImageVisible }), onTransitionEnd: handleFallbackTransitionEnd },
+                unicornFallbackImageMobile && (react_1.default.createElement("source", { media: "(max-width: 768px)", srcSet: unicornFallbackImageMobile })),
+                react_1.default.createElement("img", { alt: "", "aria-hidden": "true", className: b('fallback-image'), onLoad: handleFallbackImageLoad, src: fallbackImage }))),
+            shouldRenderScene && (react_1.default.createElement(components_1.UnicornScene, { jsonFilePath: unicorn, onLoad: handleSceneLoad, play: shouldPlayScene, sdkUrl: unicornSdkUrl })))),
         react_1.default.createElement(grid_1.Grid, { containerClass: b('container-fluid') },
             react_1.default.createElement(Breadcrumbs_1.default, { breadcrumbs: breadcrumbs, theme: textTheme }),
             react_1.default.createElement(BackButton_1.default, { backButton: backButtonItem, theme: textTheme }),

package/build/cjs/blocks/Header/schema.d.ts

@@ -1078,6 +1078,15 @@ export declare const HeaderProperties: {
     unicornSdkUrl: {
         type: string;
     };
+    unicornFallbackImage: {
+        type: string;
+    };
+    unicornFallbackImageMobile: {
+        type: string;
+    };
+    forceMobileImage: {
+        type: string;
+    };
     breadcrumbs: {
         type: string;
         additionalProperties: boolean;
@@ -1948,6 +1957,15 @@ export declare const HeaderBlock: {
             unicornSdkUrl: {
                 type: string;
             };
+            unicornFallbackImage: {
+                type: string;
+            };
+            unicornFallbackImageMobile: {
+                type: string;
+            };
+            forceMobileImage: {
+                type: string;
+            };
             breadcrumbs: {
                 type: string;
                 additionalProperties: boolean;

package/build/cjs/blocks/Header/schema.js

@@ -148,6 +148,9 @@ exports.HeaderProperties = {
     },
     unicorn: { type: 'string' },
     unicornSdkUrl: { type: 'string' },
+    unicornFallbackImage: { type: 'string' },
+    unicornFallbackImageMobile: { type: 'string' },
+    forceMobileImage: { type: 'boolean' },
     breadcrumbs: {
         type: 'object',
         additionalProperties: false,

package/build/cjs/blocks/Header/useAdaptiveUnicornBackground.d.ts

@@ -0,0 +1,13 @@
+export declare function useAdaptiveUnicornBackground({ enabled, fallbackAvailable, }: {
+    enabled: boolean;
+    fallbackAvailable: boolean;
+}): {
+    backgroundRef: import("react").RefObject<HTMLDivElement>;
+    handleFallbackImageLoad: () => void;
+    handleFallbackTransitionEnd: () => void;
+    handleSceneLoad: () => void;
+    isFallbackVisible: boolean;
+    shouldMountScene: boolean;
+    shouldPlayScene: boolean;
+    showFallback: boolean;
+};

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

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAdaptiveUnicornBackground = void 0;
+const react_1 = require("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'));
+}
+function useAdaptiveUnicornBackground({ enabled, fallbackAvailable, }) {
+    const backgroundRef = (0, react_1.useRef)(null);
+    const [mode, setMode] = (0, react_1.useState)('checking');
+    const [isNearViewport, setIsNearViewport] = (0, react_1.useState)(false);
+    const [fallbackFadeStarted, setFallbackFadeStarted] = (0, react_1.useState)(false);
+    const [fallbackImageLoaded, setFallbackImageLoaded] = (0, react_1.useState)(false);
+    const [sceneLoaded, setSceneLoaded] = (0, react_1.useState)(false);
+    const degradeBackground = (0, react_1.useCallback)(() => {
+        setMode((currentMode) => {
+            if (!fallbackAvailable) {
+                return 'paused';
+            }
+            return currentMode === 'animation' && isNearViewport ? 'fallback-fading' : 'fallback';
+        });
+    }, [fallbackAvailable, isNearViewport]);
+    const finishFallbackFade = (0, react_1.useCallback)(() => {
+        setMode((currentMode) => (currentMode === 'fallback-fading' ? 'fallback' : currentMode));
+    }, []);
+    const handleFallbackImageLoad = (0, react_1.useCallback)(() => {
+        if (mode === 'fallback-fading') {
+            setFallbackImageLoaded(true);
+        }
+    }, [mode]);
+    const handleSceneLoad = (0, react_1.useCallback)(() => {
+        setSceneLoaded(true);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setSceneLoaded(false);
+        setIsNearViewport(false);
+        if (!enabled) {
+            setMode('paused');
+            return;
+        }
+        if (prefersStaticBackground()) {
+            setMode(fallbackAvailable ? 'fallback' : 'paused');
+            return;
+        }
+        setMode('animation');
+    }, [enabled, fallbackAvailable]);
+    (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+        if (mode !== 'fallback-fading') {
+            setFallbackFadeStarted(false);
+            setFallbackImageLoaded(false);
+        }
+        return undefined;
+    }, [mode]);
+    (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+        if (mode !== 'fallback-fading' || !fallbackFadeStarted) {
+            return undefined;
+        }
+        const fallbackTimer = setTimeout(finishFallbackFade, FALLBACK_FADE_TIMEOUT_MS);
+        return () => clearTimeout(fallbackTimer);
+    }, [fallbackFadeStarted, finishFallbackFade, mode]);
+    (0, react_1.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]);
+    (0, react_1.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,
+    };
+}
+exports.useAdaptiveUnicornBackground = useAdaptiveUnicornBackground;

package/build/cjs/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/cjs/components/Media/Media.js

@@ -14,7 +14,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 { 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] = (0, react_1.useState)(false);
     const { microdata } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
@@ -46,7 +46,7 @@ const Media = (props) => {
             }
         }
         if (youtube || videoIframe) {
-            result = (react_1.default.createElement(VideoBlock_1.default, { 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_1.default.createElement(VideoBlock_1.default, { 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_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
@@ -83,6 +83,7 @@ const Media = (props) => {
         ratio,
         youtubeClassName,
         playButtonCorner,
+        playButtonText,
         autoplay,
         margins,
     ]);

package/build/cjs/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/cjs/components/TextNode/TextNode.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+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/cjs/components/TextNode/TextNode.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('tag');
+const TextNode = ({ children, tag = 'div' }) => {
+    if (!children) {
+        return null;
+    }
+    return react_1.default.createElement(tag, {
+        dangerouslySetInnerHTML: { __html: children },
+        className: b(),
+    });
+};
+exports.default = TextNode;

package/build/cjs/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/cjs/components/VideoBlock/VideoBlock.d.ts

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

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

@@ -49,7 +49,7 @@ function getHeight(width, ratio) {
 }
 exports.getHeight = getHeight;
 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 = (0, useAnalytics_1.useAnalytics)(common_1.DefaultEventNames.VideoPreview);
     const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
@@ -110,7 +110,9 @@ const VideoBlock = (props) => {
         iframeContent,
         previewImg && !hidePreview && !fullscreen && (react_1.default.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_1.default.createElement("video", { src: previewVideo, className: b('video'), autoPlay: true, muted: true, loop: true, playsInline: true })) : (react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad })),
-            playButton || (react_1.default.createElement("button", { title: "Play", id: buttonId, className: b('button', { corner: playButtonCorner }) },
-                react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: playButtonCorner ? 16 : 24 })))))));
+            playButton || (react_1.default.createElement("button", { title: "Play", id: buttonId, className: b('button', {
+                    corner: playButtonCorner,
+                    text: Boolean(playButtonText),
+                }) }, playButtonText ? (react_1.default.createElement("div", { className: b('button-text') }, playButtonText)) : (react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: playButtonCorner ? 16 : 24 }))))))));
 };
 exports.default = VideoBlock;

package/build/cjs/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/cjs/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/build/esm/blocks/Header/Header.css

@@ -246,7 +246,7 @@ unpredictable css rules order in build */
   z-index: 5;
 }
 @media (max-width: 769px) {
-  .pc-header-block_has-background .pc-header-block__background.pc-header-block__background_unicorn, .pc-header-block_has-background .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_unicorn {
+  .pc-header-block_has-background .pc-header-block__background.pc-header-block__background_unicorn:not(.pc-header-block__background_unicorn-fallback), .pc-header-block_has-background .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_unicorn:not(.pc-header-block__background_unicorn-fallback) {
     display: none;
   }
 }
@@ -263,6 +263,23 @@ unpredictable css rules order in build */
   width: 100%;
   background-color: var(--g-color-base-background);
 }
+.pc-header-block__fallback {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.pc-header-block__fallback_visible {
+  opacity: 1;
+}
+.pc-header-block__fallback-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 .pc-header-block__overtitle {
   font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
   line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));

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

@@ -17,6 +17,7 @@ import HeaderStock from './HeaderStock/HeaderStock';
 import HeaderTag from './HeaderTag/HeaderTag';
 import HeaderTags from './HeaderTags/HeaderTags';
 import SwitchingTitle from './SwitchingTitle/SwitchingTtitle';
+import { useAdaptiveUnicornBackground } from './useAdaptiveUnicornBackground';
 import { getImageSize, getTitleSizes, titleWithImageSizes } from './utils';
 import './Header.css';
 const b = block('header-block');
@@ -29,7 +30,7 @@ const Background = ({ background, isMobile }) => {
 const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 // eslint-disable-next-line complexity
 export const HeaderBlock = (props) => {
-    const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, unicorn, unicornSdkUrl, } = props;
+    const { title, switchingTitle, topTags, bottomTags, overtitle, description, buttons, stock, stockPrice, stockShares, image, video, width = 's', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', verticalOffsetTop, verticalOffsetBottom, className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect, headerSpace, backLink, unicorn, unicornSdkUrl, unicornFallbackImage, unicornFallbackImageMobile, forceMobileImage = true, } = props;
     const isMobile = useContext(MobileContext);
     const { backButton, blockTag } = useContext(HeaderContext);
     const theme = useTheme();
@@ -41,6 +42,17 @@ export const HeaderBlock = (props) => {
     const imageThemed = useMemo(() => image && getThemedValue(image, theme), [image, theme]);
     const videoThemed = useMemo(() => video && getThemedValue(video, theme), [theme, video]);
     const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
+    const fallbackImage = isMobile
+        ? unicornFallbackImageMobile || unicornFallbackImage
+        : unicornFallbackImage || unicornFallbackImageMobile;
+    const forceFallbackOnMobile = isMobile && forceMobileImage && Boolean(fallbackImage);
+    const { backgroundRef, handleFallbackImageLoad, handleFallbackTransitionEnd, handleSceneLoad, isFallbackVisible, shouldMountScene, shouldPlayScene, showFallback, } = useAdaptiveUnicornBackground({
+        enabled: Boolean(unicorn) && !forceFallbackOnMobile,
+        fallbackAvailable: Boolean(fallbackImage),
+    });
+    const showFallbackImage = forceFallbackOnMobile || showFallback;
+    const isFallbackImageVisible = forceFallbackOnMobile || isFallbackVisible;
+    const shouldRenderScene = !forceFallbackOnMobile && shouldMountScene;
     const titleId = useUniqId();
     const headerRef = useRef(null);
     const hasBackground = Boolean(backgroundThemed || backgroundEffect);
@@ -70,8 +82,14 @@ export const HeaderBlock = (props) => {
         backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
         backgroundThemed && React.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
         backgroundEffect && backgroundEffect.firstSrc && backgroundEffect.secondSrc && (React.createElement(BackgroundEffect, Object.assign({}, backgroundEffect, { attachRef: headerRef }))),
-        unicorn && (React.createElement("div", { className: b('background', { unicorn: true }) },
-            React.createElement(UnicornScene, { jsonFilePath: unicorn, sdkUrl: unicornSdkUrl }))),
+        unicorn && (React.createElement("div", { ref: backgroundRef, className: b('background', {
+                unicorn: true,
+                'unicorn-fallback': showFallbackImage,
+            }) },
+            showFallbackImage && fallbackImage && (React.createElement("picture", { className: b('fallback', { visible: isFallbackImageVisible }), onTransitionEnd: handleFallbackTransitionEnd },
+                unicornFallbackImageMobile && (React.createElement("source", { media: "(max-width: 768px)", srcSet: unicornFallbackImageMobile })),
+                React.createElement("img", { alt: "", "aria-hidden": "true", className: b('fallback-image'), onLoad: handleFallbackImageLoad, src: fallbackImage }))),
+            shouldRenderScene && (React.createElement(UnicornScene, { jsonFilePath: unicorn, onLoad: handleSceneLoad, play: shouldPlayScene, sdkUrl: unicornSdkUrl })))),
         React.createElement(Grid, { containerClass: b('container-fluid') },
             React.createElement(Breadcrumbs, { breadcrumbs: breadcrumbs, theme: textTheme }),
             React.createElement(BackButton, { backButton: backButtonItem, theme: textTheme }),

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

@@ -1078,6 +1078,15 @@ export declare const HeaderProperties: {
     unicornSdkUrl: {
         type: string;
     };
+    unicornFallbackImage: {
+        type: string;
+    };
+    unicornFallbackImageMobile: {
+        type: string;
+    };
+    forceMobileImage: {
+        type: string;
+    };
     breadcrumbs: {
         type: string;
         additionalProperties: boolean;
@@ -1948,6 +1957,15 @@ export declare const HeaderBlock: {
             unicornSdkUrl: {
                 type: string;
             };
+            unicornFallbackImage: {
+                type: string;
+            };
+            unicornFallbackImageMobile: {
+                type: string;
+            };
+            forceMobileImage: {
+                type: string;
+            };
             breadcrumbs: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -145,6 +145,9 @@ export const HeaderProperties = {
     },
     unicorn: { type: 'string' },
     unicornSdkUrl: { type: 'string' },
+    unicornFallbackImage: { type: 'string' },
+    unicornFallbackImageMobile: { type: 'string' },
+    forceMobileImage: { type: 'boolean' },
     breadcrumbs: {
         type: 'object',
         additionalProperties: false,

package/build/esm/blocks/Header/useAdaptiveUnicornBackground.d.ts

@@ -0,0 +1,13 @@
+export declare function useAdaptiveUnicornBackground({ enabled, fallbackAvailable, }: {
+    enabled: boolean;
+    fallbackAvailable: boolean;
+}): {
+    backgroundRef: import("react").RefObject<HTMLDivElement>;
+    handleFallbackImageLoad: () => void;
+    handleFallbackTransitionEnd: () => void;
+    handleSceneLoad: () => void;
+    isFallbackVisible: boolean;
+    shouldMountScene: boolean;
+    shouldPlayScene: boolean;
+    showFallback: boolean;
+};