@doyourjob/gravity-ui-page-constructor 5.31.112 → 5.31.113-background-effect-for-header-1

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

@@ -0,0 +1,30 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-background-effect {
+  position: absolute;
+  inset: 0;
+  display: flex;
+}
+.pc-background-effect__left {
+  position: absolute;
+  inset: 0;
+  clip-path: inset(0 0.01% 0 0);
+  transition: clip-path 1.5s ease;
+}
+.pc-background-effect__right {
+  position: absolute;
+  inset: 0;
+  clip-path: inset(0 0 0 99.99%);
+  transition: clip-path 1.5s ease;
+}
+.pc-header-block:hover .pc-background-effect__left {
+  clip-path: inset(0 99.99% 0 0);
+}
+.pc-header-block:hover .pc-background-effect__right {
+  clip-path: inset(0 0 0 0.01%);
+}
+.pc-background-effect__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

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

@@ -0,0 +1,6 @@
+type BackgroundEffectProps = {
+    firstSrc?: string;
+    secondSrc?: string;
+};
+export declare const BackgroundEffect: ({ firstSrc, secondSrc }: BackgroundEffectProps) => JSX.Element | null;
+export default BackgroundEffect;

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundEffect = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../components/Media/Video/utils");
+const utils_2 = require("../../../utils");
+const b = (0, utils_2.block)('background-effect');
+const SYNC_THRESHOLD = 0.03;
+const MAX_DESYNC = 0.5;
+const FAST_RATE = 1.05;
+const SLOW_RATE = 0.95;
+const BackgroundEffect = ({ firstSrc, secondSrc }) => {
+    const master = (0, react_1.useRef)(null);
+    const slave = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const m = master.current;
+        const s = slave.current;
+        let rafId;
+        if (m && s) {
+            const syncMaster = (_, metadata) => {
+                if (m.paused) {
+                    m.play().catch(() => { });
+                }
+                const targetTime = metadata.mediaTime;
+                const delta = targetTime - s.currentTime;
+                if (s.paused) {
+                    s.play().catch(() => { });
+                }
+                if (Math.abs(delta) > MAX_DESYNC) {
+                    s.currentTime = targetTime;
+                }
+                else if (Math.abs(delta) > SYNC_THRESHOLD) {
+                    s.playbackRate = delta > 0 ? FAST_RATE : SLOW_RATE;
+                }
+                else {
+                    s.playbackRate = 1;
+                }
+                rafId = m.requestVideoFrameCallback(syncMaster);
+            };
+            rafId = m.requestVideoFrameCallback(syncMaster);
+        }
+        const handleVisibility = () => {
+            if (!document.hidden && m && s) {
+                m.play().catch(() => { });
+                s.play().catch(() => { });
+            }
+        };
+        document.addEventListener('visibilitychange', handleVisibility);
+        return () => {
+            var _a;
+            document.removeEventListener('visibilitychange', handleVisibility);
+            if (rafId && m) {
+                (_a = m.cancelVideoFrameCallback) === null || _a === void 0 ? void 0 : _a.call(m, rafId);
+            }
+        };
+    }, []);
+    if (!firstSrc || !secondSrc) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('left') },
+            react_1.default.createElement("video", { ref: master, disablePictureInPicture: true, playsInline: true, 
+                // @ts-ignore
+                // eslint-disable-next-line react/no-unknown-property
+                pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
+                react_1.default.createElement("source", { src: firstSrc, type: (0, utils_1.parseVideoType)(firstSrc) }))),
+        react_1.default.createElement("div", { className: b('right') },
+            react_1.default.createElement("video", { ref: slave, disablePictureInPicture: true, playsInline: true, 
+                // @ts-ignore
+                // eslint-disable-next-line react/no-unknown-property
+                pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
+                react_1.default.createElement("source", { src: secondSrc, type: (0, utils_1.parseVideoType)(secondSrc) })))));
+};
+exports.BackgroundEffect = BackgroundEffect;
+exports.default = exports.BackgroundEffect;

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

@@ -12,6 +12,7 @@ const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const utils_2 = require("../../utils");
 const BackButton_1 = tslib_1.__importDefault(require("./BackButton/BackButton"));
+const BackgroundEffect_1 = tslib_1.__importDefault(require("./BackgroundEffect/BackgroundEffect"));
 const Breadcrumbs_1 = tslib_1.__importDefault(require("./Breadcrumbs/Breadcrumbs"));
 const HeaderButtons_1 = tslib_1.__importDefault(require("./HeaderButtons/HeaderButtons"));
 const HeaderDescription_1 = tslib_1.__importDefault(require("./HeaderDescription/HeaderDescription"));
@@ -30,7 +31,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', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', } = 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', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect = {}, } = 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)();
@@ -51,6 +52,7 @@ const HeaderBlock = (props) => {
         }, className) },
         backgroundThemed && fullWidth && react_1.default.createElement(FullWidthBackground, { background: backgroundThemed }),
         backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
+        react_1.default.createElement(BackgroundEffect_1.default, Object.assign({}, backgroundEffect)),
         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: verticalOffset !== '0' && !breadcrumbs ? backButton : undefined, theme: textTheme }),

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

@@ -979,6 +979,19 @@ export declare const HeaderProperties: {
             };
         };
     };
+    backgroundEffect: {
+        type: string;
+        additionalProperties: boolean;
+        required: boolean;
+        properties: {
+            firstSrc: {
+                type: string;
+            };
+            secondSrc: {
+                type: string;
+            };
+        };
+    };
 };
 export declare const HeaderBlock: {
     'header-block': {
@@ -1648,6 +1661,19 @@ export declare const HeaderBlock: {
                     };
                 };
             };
+            backgroundEffect: {
+                type: string;
+                additionalProperties: boolean;
+                required: boolean;
+                properties: {
+                    firstSrc: {
+                        type: string;
+                    };
+                    secondSrc: {
+                        type: string;
+                    };
+                };
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -190,6 +190,15 @@ exports.HeaderProperties = {
             },
         },
     },
+    backgroundEffect: {
+        type: 'object',
+        additionalProperties: false,
+        required: true,
+        properties: {
+            firstSrc: { type: 'string' },
+            secondSrc: { type: 'string' },
+        },
+    },
 };
 exports.HeaderBlock = {
     'header-block': {

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

@@ -673,6 +673,19 @@ export declare const HeaderSliderBlock: {
                                 };
                             };
                         };
+                        backgroundEffect: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: boolean;
+                            properties: {
+                                firstSrc: {
+                                    type: string;
+                                };
+                                secondSrc: {
+                                    type: string;
+                                };
+                            };
+                        };
                     };
                 };
             };

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

@@ -13,4 +13,5 @@ export interface ParsedVideo {
     src: string;
     type: VideoType | undefined;
 }
+export declare function parseVideoType(src: string): VideoType | undefined;
 export declare const getVideoTypesWithPriority: (sources: string[]) => ParsedVideo[];

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getVideoTypesWithPriority = exports.VideoType = exports.VideoExt = void 0;
+exports.getVideoTypesWithPriority = exports.parseVideoType = exports.VideoType = exports.VideoExt = void 0;
 var VideoExt;
 (function (VideoExt) {
     VideoExt["Mp4"] = "mp4";
@@ -34,6 +34,7 @@ function parseVideoType(src) {
             return undefined;
     }
 }
+exports.parseVideoType = parseVideoType;
 const getVideoTypesWithPriority = (sources) => sources
     .map((src) => ({ src, type: parseVideoType(src) }))
     .sort(({ type: typeA }, { type: typeB }) => {

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

@@ -199,6 +199,10 @@ export interface HeaderBlockProps {
     breadcrumbs?: HeaderBreadCrumbsProps;
     status?: JSX.Element;
     renderTitle?: (title: string) => React.ReactNode;
+    backgroundEffect?: {
+        firstSrc: string;
+        secondSrc: string;
+    };
 }
 export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
     title: string;

package/build/cjs/sub-blocks/CaseStudyCard/CaseStudyCard.css

@@ -27,6 +27,9 @@ unpredictable css rules order in build */
   display: flex;
   flex-direction: column;
 }
+.pc-case-study-card__image {
+  max-width: 100%;
+}
 .pc-case-study-card__title {
   font-size: var(--g-text-display-4-font-size, var(--pc-text-display-4-font-size));
   line-height: var(--g-text-display-4-line-height, var(--pc-text-display-4-line-height));

package/build/cjs/sub-blocks/CaseStudyCard/CaseStudyCard.js

@@ -9,7 +9,7 @@ const CaseStudyCard = (props) => {
     const { image, title, background, text, highlights, labels } = props;
     return (react_1.default.createElement("div", { className: b(), style: { background } },
         react_1.default.createElement("div", { className: b('info') },
-            react_1.default.createElement(components_1.Image, { src: image, alt: "", "aria-hidden": "true" }),
+            react_1.default.createElement(components_1.Image, { src: image, className: b('image'), alt: "", "aria-hidden": "true" }),
             react_1.default.createElement("h2", { className: `${b('title')} title-font-family` }, title),
             react_1.default.createElement("div", { className: b('content') },
                 react_1.default.createElement(components_1.HTML, { block: true }, text),

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

@@ -0,0 +1,30 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-background-effect {
+  position: absolute;
+  inset: 0;
+  display: flex;
+}
+.pc-background-effect__left {
+  position: absolute;
+  inset: 0;
+  clip-path: inset(0 0.01% 0 0);
+  transition: clip-path 1.5s ease;
+}
+.pc-background-effect__right {
+  position: absolute;
+  inset: 0;
+  clip-path: inset(0 0 0 99.99%);
+  transition: clip-path 1.5s ease;
+}
+.pc-header-block:hover .pc-background-effect__left {
+  clip-path: inset(0 99.99% 0 0);
+}
+.pc-header-block:hover .pc-background-effect__right {
+  clip-path: inset(0 0 0 0.01%);
+}
+.pc-background-effect__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

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

@@ -0,0 +1,7 @@
+import './BackgroundEffect.css';
+type BackgroundEffectProps = {
+    firstSrc?: string;
+    secondSrc?: string;
+};
+export declare const BackgroundEffect: ({ firstSrc, secondSrc }: BackgroundEffectProps) => JSX.Element | null;
+export default BackgroundEffect;

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

@@ -0,0 +1,72 @@
+import React, { useEffect, useRef } from 'react';
+import { parseVideoType } from '../../../components/Media/Video/utils';
+import { block } from '../../../utils';
+import './BackgroundEffect.css';
+const b = block('background-effect');
+const SYNC_THRESHOLD = 0.03;
+const MAX_DESYNC = 0.5;
+const FAST_RATE = 1.05;
+const SLOW_RATE = 0.95;
+export const BackgroundEffect = ({ firstSrc, secondSrc }) => {
+    const master = useRef(null);
+    const slave = useRef(null);
+    useEffect(() => {
+        const m = master.current;
+        const s = slave.current;
+        let rafId;
+        if (m && s) {
+            const syncMaster = (_, metadata) => {
+                if (m.paused) {
+                    m.play().catch(() => { });
+                }
+                const targetTime = metadata.mediaTime;
+                const delta = targetTime - s.currentTime;
+                if (s.paused) {
+                    s.play().catch(() => { });
+                }
+                if (Math.abs(delta) > MAX_DESYNC) {
+                    s.currentTime = targetTime;
+                }
+                else if (Math.abs(delta) > SYNC_THRESHOLD) {
+                    s.playbackRate = delta > 0 ? FAST_RATE : SLOW_RATE;
+                }
+                else {
+                    s.playbackRate = 1;
+                }
+                rafId = m.requestVideoFrameCallback(syncMaster);
+            };
+            rafId = m.requestVideoFrameCallback(syncMaster);
+        }
+        const handleVisibility = () => {
+            if (!document.hidden && m && s) {
+                m.play().catch(() => { });
+                s.play().catch(() => { });
+            }
+        };
+        document.addEventListener('visibilitychange', handleVisibility);
+        return () => {
+            var _a;
+            document.removeEventListener('visibilitychange', handleVisibility);
+            if (rafId && m) {
+                (_a = m.cancelVideoFrameCallback) === null || _a === void 0 ? void 0 : _a.call(m, rafId);
+            }
+        };
+    }, []);
+    if (!firstSrc || !secondSrc) {
+        return null;
+    }
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('left') },
+            React.createElement("video", { ref: master, disablePictureInPicture: true, playsInline: true, 
+                // @ts-ignore
+                // eslint-disable-next-line react/no-unknown-property
+                pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
+                React.createElement("source", { src: firstSrc, type: parseVideoType(firstSrc) }))),
+        React.createElement("div", { className: b('right') },
+            React.createElement("video", { ref: slave, disablePictureInPicture: true, playsInline: true, 
+                // @ts-ignore
+                // eslint-disable-next-line react/no-unknown-property
+                pip: "false", autoPlay: true, loop: true, preload: "auto", muted: true, className: b('video') },
+                React.createElement("source", { src: secondSrc, type: parseVideoType(secondSrc) })))));
+};
+export default BackgroundEffect;

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

@@ -8,6 +8,7 @@ import { useTheme } from '../../context/theme';
 import { Col, Grid, Row } from '../../grid';
 import { block, getThemedValue } from '../../utils';
 import BackButton from './BackButton/BackButton';
+import BackgroundEffect from './BackgroundEffect/BackgroundEffect';
 import Breadcrumbs from './Breadcrumbs/Breadcrumbs';
 import HeaderButtons from './HeaderButtons/HeaderButtons';
 import HeaderDescription from './HeaderDescription/HeaderDescription';
@@ -27,7 +28,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', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', } = 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', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', backgroundEffect = {}, } = props;
     const isMobile = useContext(MobileContext);
     const { backButton, blockTag } = useContext(HeaderContext);
     const theme = useTheme();
@@ -48,6 +49,7 @@ export const HeaderBlock = (props) => {
         }, className) },
         backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
         backgroundThemed && React.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
+        React.createElement(BackgroundEffect, Object.assign({}, backgroundEffect)),
         React.createElement(Grid, { containerClass: b('container-fluid') },
             React.createElement(Breadcrumbs, { breadcrumbs: breadcrumbs, theme: textTheme }),
             React.createElement(BackButton, { backButton: verticalOffset !== '0' && !breadcrumbs ? backButton : undefined, theme: textTheme }),

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

@@ -979,6 +979,19 @@ export declare const HeaderProperties: {
             };
         };
     };
+    backgroundEffect: {
+        type: string;
+        additionalProperties: boolean;
+        required: boolean;
+        properties: {
+            firstSrc: {
+                type: string;
+            };
+            secondSrc: {
+                type: string;
+            };
+        };
+    };
 };
 export declare const HeaderBlock: {
     'header-block': {
@@ -1648,6 +1661,19 @@ export declare const HeaderBlock: {
                     };
                 };
             };
+            backgroundEffect: {
+                type: string;
+                additionalProperties: boolean;
+                required: boolean;
+                properties: {
+                    firstSrc: {
+                        type: string;
+                    };
+                    secondSrc: {
+                        type: string;
+                    };
+                };
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -187,6 +187,15 @@ export const HeaderProperties = {
             },
         },
     },
+    backgroundEffect: {
+        type: 'object',
+        additionalProperties: false,
+        required: true,
+        properties: {
+            firstSrc: { type: 'string' },
+            secondSrc: { type: 'string' },
+        },
+    },
 };
 export const HeaderBlock = {
     'header-block': {

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

@@ -673,6 +673,19 @@ export declare const HeaderSliderBlock: {
                                 };
                             };
                         };
+                        backgroundEffect: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: boolean;
+                            properties: {
+                                firstSrc: {
+                                    type: string;
+                                };
+                                secondSrc: {
+                                    type: string;
+                                };
+                            };
+                        };
                     };
                 };
             };

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

@@ -13,4 +13,5 @@ export interface ParsedVideo {
     src: string;
     type: VideoType | undefined;
 }
+export declare function parseVideoType(src: string): VideoType | undefined;
 export declare const getVideoTypesWithPriority: (sources: string[]) => ParsedVideo[];

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

@@ -16,7 +16,7 @@ const VideoTypePriority = {
     [VideoType.Ogg]: 2,
     [VideoType.Mp4]: 3,
 };
-function parseVideoType(src) {
+export function parseVideoType(src) {
     const [path] = src.split('?');
     const fileExt = path.split('.').pop();
     switch (fileExt) {

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

@@ -199,6 +199,10 @@ export interface HeaderBlockProps {
     breadcrumbs?: HeaderBreadCrumbsProps;
     status?: JSX.Element;
     renderTitle?: (title: string) => React.ReactNode;
+    backgroundEffect?: {
+        firstSrc: string;
+        secondSrc: string;
+    };
 }
 export interface ExtendedFeaturesItem extends Omit<ContentBlockProps, 'theme' | 'centered' | 'colSizes' | 'size' | 'title'> {
     title: string;

package/build/esm/sub-blocks/CaseStudyCard/CaseStudyCard.css

@@ -27,6 +27,9 @@ unpredictable css rules order in build */
   display: flex;
   flex-direction: column;
 }
+.pc-case-study-card__image {
+  max-width: 100%;
+}
 .pc-case-study-card__title {
   font-size: var(--g-text-display-4-font-size, var(--pc-text-display-4-font-size));
   line-height: var(--g-text-display-4-line-height, var(--pc-text-display-4-line-height));

package/build/esm/sub-blocks/CaseStudyCard/CaseStudyCard.js

@@ -7,7 +7,7 @@ const CaseStudyCard = (props) => {
     const { image, title, background, text, highlights, labels } = props;
     return (React.createElement("div", { className: b(), style: { background } },
         React.createElement("div", { className: b('info') },
-            React.createElement(Image, { src: image, alt: "", "aria-hidden": "true" }),
+            React.createElement(Image, { src: image, className: b('image'), alt: "", "aria-hidden": "true" }),
             React.createElement("h2", { className: `${b('title')} title-font-family` }, title),
             React.createElement("div", { className: b('content') },
                 React.createElement(HTML, { block: true }, text),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor",
-  "version": "5.31.112",
+  "version": "5.31.113-background-effect-for-header-1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {