@doyourjob/gravity-ui-page-constructor 5.31.281 → 5.31.283

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/HeaderMinify/Button/Button.css

@@ -6,7 +6,7 @@ unpredictable css rules order in build */
   justify-content: center;
   padding: 0 24px;
   border-radius: 12px;
-  background: #001a2b;
+  background: var(--g-color-base-brand);
   color: #ffffff;
   height: 44px;
   font-size: 15px;
@@ -23,7 +23,7 @@ unpredictable css rules order in build */
 }
 .pc-header-minify-button_outline {
   background: rgba(5, 43, 66, 0.05);
-  color: #001a2b;
+  color: var(--g-color-base-brand);
 }
 @media (hover: hover) and (pointer: fine) {
   .pc-header-minify-button:hover {

package/build/esm/blocks/HeaderMinify/HeaderMinify.css

@@ -3,7 +3,7 @@ unpredictable css rules order in build */
 .pc-header-minify-block {
   position: relative;
   z-index: 1;
-  color: #001a2b;
+  color: var(--g-color-base-brand);
 }
 .pc-header-minify-block_header-space {
   padding-top: var(--header-height);

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/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/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/package.json

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