@doyourjob/gravity-ui-page-constructor 5.31.234 → 5.31.236

package/build/cjs/blocks/UnicornCards/Item/Item.css

@@ -4,7 +4,7 @@ unpredictable css rules order in build */
   position: relative;
   padding: 20px 24px;
   border-radius: 20px;
-  min-height: 410px;
+  min-height: 360px;
 }
 .pc-unicorn-cards-item__title {
   font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
@@ -31,4 +31,12 @@ unpredictable css rules order in build */
 }
 .pc-unicorn-cards-item__background-item {
   height: 100%;
+}
+.pc-unicorn-cards-item__background .pc-unicorn-cards-item__preview-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }

package/build/cjs/blocks/UnicornCards/Item/Item.d.ts

@@ -1,3 +1,3 @@
 import { UnicornCardsItemProps } from '../../../models';
-export declare const Item: ({ title, text, unicorn, unicornSdkUrl }: UnicornCardsItemProps) => JSX.Element;
+export declare const Item: ({ title, text, unicorn, unicornSdkUrl, previewImage, }: UnicornCardsItemProps) => JSX.Element;
 export default Item;

package/build/cjs/blocks/UnicornCards/Item/Item.js

@@ -2,16 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const components_1 = require("../../../components");
+const constants_1 = require("../../../constants");
+const useWindowBreakpoint_1 = tslib_1.__importDefault(require("../../../hooks/useWindowBreakpoint"));
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('unicorn-cards-item');
-const Item = ({ title, text, unicorn, unicornSdkUrl }) => {
-    return (react_1.default.createElement("div", { className: b() },
+const Item = ({ title, text, unicorn, unicornSdkUrl, previewImage, }) => {
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const breakpoint = (0, useWindowBreakpoint_1.default)();
+    const isMobile = breakpoint < constants_1.BREAKPOINTS.md;
+    const showPreview = isMobile && previewImage;
+    const showUnicorn = !isMobile && unicorn;
+    return (react_1.default.createElement("div", { className: b(), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
         title && react_1.default.createElement("div", { className: b('title') }, title),
         text && react_1.default.createElement("div", { className: b('text') }, text),
-        unicorn && (react_1.default.createElement("div", { className: b('background') },
-            react_1.default.createElement(components_1.UnicornScene, { className: b('background-item'), jsonFilePath: unicorn, sdkUrl: unicornSdkUrl, width: "100%" })))));
+        react_1.default.createElement("div", { className: b('background') },
+            showPreview && (react_1.default.createElement("img", { src: previewImage, className: b('preview-image'), alt: title })),
+            showUnicorn && (react_1.default.createElement(components_1.UnicornScene, { className: b('background-item'), jsonFilePath: unicorn, sdkUrl: unicornSdkUrl, width: "100%", play: isHovered })))));
 };
 exports.Item = Item;
 exports.default = exports.Item;

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

@@ -181,6 +181,9 @@ export declare const UnicornCardsBlock: {
                         unicornSdkUrl: {
                             type: string;
                         };
+                        previewImage: {
+                            type: string;
+                        };
                     };
                 };
             };

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

@@ -26,6 +26,7 @@ exports.UnicornCardsBlock = {
                         text: { type: 'string' },
                         unicorn: { type: 'string' },
                         unicornSdkUrl: { type: 'string' },
+                        previewImage: { type: 'string' },
                     },
                 },
             } }),

package/build/cjs/components/BackgroundUnicorn/BackgroundUnicorn.js

@@ -11,6 +11,6 @@ const BackgroundUnicorn = (props) => {
         return null;
     }
     return (react_1.default.createElement("div", { className: b() },
-        react_1.default.createElement(__1.UnicornScene, { className: b('item'), jsonFilePath: blockUnicorn, sdkUrl: blockUnicornSdkUrl, width: "100%" })));
+        react_1.default.createElement(__1.UnicornScene, { className: b('item'), jsonFilePath: blockUnicorn, sdkUrl: blockUnicornSdkUrl, width: "100%", play: true })));
 };
 exports.default = BackgroundUnicorn;

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

@@ -1,5 +1,7 @@
 import type { UnicornSceneProps } from 'unicornstudio-react';
 export declare const UNICORN_STUDIO_SDK_URL = "https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.2.0/dist/unicornStudio.umd.js";
-declare const UnicornScene: (props: UnicornSceneProps) => JSX.Element;
+declare const UnicornScene: (props: UnicornSceneProps & {
+    play?: boolean;
+}) => JSX.Element;
 export type { UnicornSceneProps };
 export default UnicornScene;

package/build/cjs/components/UnicornScene/UnicornScene.js

@@ -2,11 +2,45 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UNICORN_STUDIO_SDK_URL = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const unicornstudio_react_1 = tslib_1.__importDefault(require("unicornstudio-react"));
 exports.UNICORN_STUDIO_SDK_URL = 'https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.2.0/dist/unicornStudio.umd.js';
 const UnicornScene = (props) => {
-    const { sdkUrl = exports.UNICORN_STUDIO_SDK_URL } = props, rest = tslib_1.__rest(props, ["sdkUrl"]);
-    return react_1.default.createElement(unicornstudio_react_1.default, Object.assign({ sdkUrl: sdkUrl }, rest));
+    const { sdkUrl = exports.UNICORN_STUDIO_SDK_URL, play = true } = props, rest = tslib_1.__rest(props, ["sdkUrl", "play"]);
+    const [inView, setInView] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
+    const sceneRef = (0, react_1.useRef)(null);
+    const syncPausedState = (0, react_1.useCallback)(() => {
+        if (sceneRef.current) {
+            sceneRef.current.paused = !play || !inView;
+        }
+    }, [play, inView]);
+    (0, react_1.useEffect)(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            setInView(entry.isIntersecting);
+        }, { threshold: 0 });
+        const currentContainer = containerRef.current;
+        if (currentContainer) {
+            observer.observe(currentContainer);
+        }
+        return () => {
+            if (currentContainer) {
+                observer.unobserve(currentContainer);
+            }
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        syncPausedState();
+        const timer = setTimeout(syncPausedState, 100);
+        return () => clearTimeout(timer);
+    }, [syncPausedState]);
+    const handleLoad = () => {
+        syncPausedState();
+        if (rest.onLoad) {
+            rest.onLoad();
+        }
+    };
+    return (react_1.default.createElement("div", { ref: containerRef, style: { width: '100%', height: '100%' } },
+        react_1.default.createElement(unicornstudio_react_1.default, Object.assign({}, rest, { sdkUrl: sdkUrl, paused: !play || !inView, lazyLoad: false, sceneRef: sceneRef, onLoad: handleLoad }))));
 };
 exports.default = UnicornScene;

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

@@ -312,6 +312,7 @@ export type UnicornCardsItemProps = {
     text: string;
     unicorn?: string;
     unicornSdkUrl?: string;
+    previewImage?: string;
 };
 export interface UnicornCardsBlockProps extends Animatable {
     title?: TitleItemBaseProps | string;

package/build/esm/blocks/UnicornCards/Item/Item.css

@@ -4,7 +4,7 @@ unpredictable css rules order in build */
   position: relative;
   padding: 20px 24px;
   border-radius: 20px;
-  min-height: 410px;
+  min-height: 360px;
 }
 .pc-unicorn-cards-item__title {
   font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
@@ -31,4 +31,12 @@ unpredictable css rules order in build */
 }
 .pc-unicorn-cards-item__background-item {
   height: 100%;
+}
+.pc-unicorn-cards-item__background .pc-unicorn-cards-item__preview-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }

package/build/esm/blocks/UnicornCards/Item/Item.d.ts

@@ -1,4 +1,4 @@
 import { UnicornCardsItemProps } from '../../../models';
 import './Item.css';
-export declare const Item: ({ title, text, unicorn, unicornSdkUrl }: UnicornCardsItemProps) => JSX.Element;
+export declare const Item: ({ title, text, unicorn, unicornSdkUrl, previewImage, }: UnicornCardsItemProps) => JSX.Element;
 export default Item;

package/build/esm/blocks/UnicornCards/Item/Item.js

@@ -1,13 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { UnicornScene } from '../../../components';
+import { BREAKPOINTS } from '../../../constants';
+import useWindowBreakpoint from '../../../hooks/useWindowBreakpoint';
 import { block } from '../../../utils';
 import './Item.css';
 const b = block('unicorn-cards-item');
-export const Item = ({ title, text, unicorn, unicornSdkUrl }) => {
-    return (React.createElement("div", { className: b() },
+export const Item = ({ title, text, unicorn, unicornSdkUrl, previewImage, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const breakpoint = useWindowBreakpoint();
+    const isMobile = breakpoint < BREAKPOINTS.md;
+    const showPreview = isMobile && previewImage;
+    const showUnicorn = !isMobile && unicorn;
+    return (React.createElement("div", { className: b(), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
         title && React.createElement("div", { className: b('title') }, title),
         text && React.createElement("div", { className: b('text') }, text),
-        unicorn && (React.createElement("div", { className: b('background') },
-            React.createElement(UnicornScene, { className: b('background-item'), jsonFilePath: unicorn, sdkUrl: unicornSdkUrl, width: "100%" })))));
+        React.createElement("div", { className: b('background') },
+            showPreview && (React.createElement("img", { src: previewImage, className: b('preview-image'), alt: title })),
+            showUnicorn && (React.createElement(UnicornScene, { className: b('background-item'), jsonFilePath: unicorn, sdkUrl: unicornSdkUrl, width: "100%", play: isHovered })))));
 };
 export default Item;

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

@@ -181,6 +181,9 @@ export declare const UnicornCardsBlock: {
                         unicornSdkUrl: {
                             type: string;
                         };
+                        previewImage: {
+                            type: string;
+                        };
                     };
                 };
             };

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

@@ -23,6 +23,7 @@ export const UnicornCardsBlock = {
                         text: { type: 'string' },
                         unicorn: { type: 'string' },
                         unicornSdkUrl: { type: 'string' },
+                        previewImage: { type: 'string' },
                     },
                 },
             } }),

package/build/esm/components/BackgroundUnicorn/BackgroundUnicorn.js

@@ -9,6 +9,6 @@ const BackgroundUnicorn = (props) => {
         return null;
     }
     return (React.createElement("div", { className: b() },
-        React.createElement(UnicornScene, { className: b('item'), jsonFilePath: blockUnicorn, sdkUrl: blockUnicornSdkUrl, width: "100%" })));
+        React.createElement(UnicornScene, { className: b('item'), jsonFilePath: blockUnicorn, sdkUrl: blockUnicornSdkUrl, width: "100%", play: true })));
 };
 export default BackgroundUnicorn;

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

@@ -1,5 +1,7 @@
 import type { UnicornSceneProps } from 'unicornstudio-react';
 export declare const UNICORN_STUDIO_SDK_URL = "https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.2.0/dist/unicornStudio.umd.js";
-declare const UnicornScene: (props: UnicornSceneProps) => JSX.Element;
+declare const UnicornScene: (props: UnicornSceneProps & {
+    play?: boolean;
+}) => JSX.Element;
 export type { UnicornSceneProps };
 export default UnicornScene;

package/build/esm/components/UnicornScene/UnicornScene.js

@@ -1,9 +1,43 @@
 import { __rest } from "tslib";
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import UnicornSceneLib from 'unicornstudio-react';
 export const UNICORN_STUDIO_SDK_URL = 'https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.2.0/dist/unicornStudio.umd.js';
 const UnicornScene = (props) => {
-    const { sdkUrl = UNICORN_STUDIO_SDK_URL } = props, rest = __rest(props, ["sdkUrl"]);
-    return React.createElement(UnicornSceneLib, Object.assign({ sdkUrl: sdkUrl }, rest));
+    const { sdkUrl = UNICORN_STUDIO_SDK_URL, play = true } = props, rest = __rest(props, ["sdkUrl", "play"]);
+    const [inView, setInView] = useState(false);
+    const containerRef = useRef(null);
+    const sceneRef = useRef(null);
+    const syncPausedState = useCallback(() => {
+        if (sceneRef.current) {
+            sceneRef.current.paused = !play || !inView;
+        }
+    }, [play, inView]);
+    useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            setInView(entry.isIntersecting);
+        }, { threshold: 0 });
+        const currentContainer = containerRef.current;
+        if (currentContainer) {
+            observer.observe(currentContainer);
+        }
+        return () => {
+            if (currentContainer) {
+                observer.unobserve(currentContainer);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        syncPausedState();
+        const timer = setTimeout(syncPausedState, 100);
+        return () => clearTimeout(timer);
+    }, [syncPausedState]);
+    const handleLoad = () => {
+        syncPausedState();
+        if (rest.onLoad) {
+            rest.onLoad();
+        }
+    };
+    return (React.createElement("div", { ref: containerRef, style: { width: '100%', height: '100%' } },
+        React.createElement(UnicornSceneLib, Object.assign({}, rest, { sdkUrl: sdkUrl, paused: !play || !inView, lazyLoad: false, sceneRef: sceneRef, onLoad: handleLoad }))));
 };
 export default UnicornScene;

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

@@ -312,6 +312,7 @@ export type UnicornCardsItemProps = {
     text: string;
     unicorn?: string;
     unicornSdkUrl?: string;
+    previewImage?: string;
 };
 export interface UnicornCardsBlockProps extends Animatable {
     title?: TitleItemBaseProps | string;

package/package.json

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