@cntrl-site/sdk-nextjs 0.16.2 → 0.16.4

package/lib/common/useRegisterResize.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRegisterResize = void 0;
+const react_1 = require("react");
+const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+const useRegisterResize = (ref, onResize) => {
+    (0, react_1.useEffect)(() => {
+        if (!ref || !onResize)
+            return;
+        const observer = new resize_observer_polyfill_1.default((entries) => {
+            const [entry] = entries;
+            onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+        });
+        observer.observe(ref);
+        return () => {
+            observer.unobserve(ref);
+        };
+    }, [ref, onResize]);
+};
+exports.useRegisterResize = useRegisterResize;

package/lib/components/Item.js

@@ -80,7 +80,12 @@ const Item = ({ item, sectionId, articleHeight }) => {
             setWrapperHeight(undefined);
             return;
         }
-        const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleHeight, (sectionTop + itemSectionTop) / window.innerWidth);
+        const itemArticleOffset = (sectionTop + itemSectionTop) / window.innerWidth;
+        const maxStickyTo = articleHeight - itemArticleOffset - height;
+        const end = sticky.to
+            ? Math.min(maxStickyTo, sticky.to)
+            : articleHeight - itemArticleOffset - height;
+        const wrapperHeight = end - sticky.from + height;
         setItemHeight(height);
         setWrapperHeight(wrapperHeight);
     };
@@ -142,11 +147,6 @@ const Item = ({ item, sectionId, articleHeight }) => {
       ` }))] })));
 };
 exports.Item = Item;
-function getStickyItemWrapperHeight(sticky, itemHeight, articleHeight, itemArticleOffset) {
-    var _a;
-    const end = (_a = sticky.to) !== null && _a !== void 0 ? _a : articleHeight - itemArticleOffset - itemHeight;
-    return end - sticky.from + itemHeight;
-}
 function parseSizing(sizing = 'manual') {
     const axisSizing = sizing.split(' ');
     return {

package/lib/components/items/CustomItem.js

@@ -6,16 +6,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
+const react_1 = require("react");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const style_1 = __importDefault(require("styled-jsx/style"));
-const CustomItem = ({ item }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const CustomItem = ({ item, onResize }) => {
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const component = sdk.customItems.get(item.commonParams.name);
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     if (!component)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `custom-component-${item.id}` }, { children: component({}) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: item.id }, { children: `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `custom-component-${item.id}`, ref: setRef }, { children: component({}) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: item.id }, { children: `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                     return (`
             .custom-component-${item.id} {
               transition: ${(0, HoverStyles_1.getTransitions)(['angle'], hoverParams)};

package/lib/components/items/ImageItem.js

@@ -13,14 +13,17 @@ const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
-const ImageItem = ({ item, sectionId }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const ImageItem = ({ item, sectionId, onResize }) => {
     var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, opacity, strokeColor, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, style: {
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, ref: setRef, style: {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         opacity: `${opacity}`,

package/lib/components/items/RectangleItem.js

@@ -13,7 +13,8 @@ const useRectangleItem_1 = require("./useRectangleItem");
 const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
-const RectangleItem = ({ item, sectionId }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const RectangleItem = ({ item, sectionId, onResize }) => {
     var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -21,16 +22,19 @@ const RectangleItem = ({ item, sectionId }) => {
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor), [fillColor]);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, style: {
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const backdropFilterValue = backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset';
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: {
                         backgroundColor: `${backgroundColor.toCss()}`,
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         borderColor: `${borderColor.toCss()}`,
                         transform: `rotate(${angle}deg)`,
                         filter: blur !== 0 ? `blur(${blur * 100}vw)` : 'unset',
-                        backdropFilter: backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset',
+                        backdropFilter: backdropFilterValue,
                         // @ts-ignore
-                        '-webkit-backdrop-filter': backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset',
+                        '-webkit-backdrop-filter': backdropFilterValue,
                     } }), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .rectangle-${item.id} {

package/lib/components/items/RichTextItem.js

@@ -12,25 +12,14 @@ const useRichTextItem_1 = require("./useRichTextItem");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRichTextItemValues_1 = require("./useRichTextItemValues");
-const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+const useRegisterResize_1 = require("../../common/useRegisterResize");
 const RichTextItem = ({ item, sectionId, onResize }) => {
     const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
     const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { angle, blur } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
-    (0, react_1.useEffect)(() => {
-        if (!ref || !onResize)
-            return;
-        const observer = new resize_observer_polyfill_1.default((entries) => {
-            const [entry] = entries;
-            onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
-        });
-        observer.observe(ref);
-        return () => {
-            observer.unobserve(ref);
-        };
-    }, [ref, onResize]);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `rich-text-wrapper-${item.id}`, style: {
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`

package/lib/components/items/VideoItem.js

@@ -13,14 +13,17 @@ const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
-const VideoItem = ({ item, sectionId }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const VideoItem = ({ item, sectionId, onResize }) => {
     var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, strokeColor, opacity, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `video-wrapper-${item.id}`, style: {
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `video-wrapper-${item.id}`, ref: setRef, style: {
                     borderRadius: `${radius * 100}vw`,
                     borderWidth: `${strokeWidth * 100}vw`,
                     opacity: `${opacity}`,

package/lib/components/items/VimeoEmbed.js

@@ -14,7 +14,8 @@ const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
-const VimeoEmbedItem = ({ item, sectionId }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -23,6 +24,8 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
     const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
         validURL.searchParams.append('controls', String(controls));
@@ -37,7 +40,7 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
         return validURL.href;
     };
     const validUrl = getValidVimeoUrl(url);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-video-wrapper-${item.id}`, style: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-video-wrapper-${item.id}`, ref: setRef, style: {
                     borderRadius: `${radius * 100}vw`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`

package/lib/components/items/YoutubeEmbed.js

@@ -15,7 +15,8 @@ const sdk_1 = require("@cntrl-site/sdk");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
-const YoutubeEmbedItem = ({ item, sectionId }) => {
+const useRegisterResize_1 = require("../../common/useRegisterResize");
+const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     var _a;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -25,12 +26,12 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
     const [player, setPlayer] = (0, react_1.useState)(undefined);
+    (0, useRegisterResize_1.useRegisterResize)(div, onResize);
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
         const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
         if (!YT || !videoId || !div)
             return;
-        const divRect = div.getBoundingClientRect();
         const placeholder = document.createElement('div');
         div.appendChild(placeholder);
         const player = new YT.Player(placeholder, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.16.2",
+  "version": "0.16.4",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/common/useRegisterResize.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export const useRegisterResize = (ref: HTMLElement | null, onResize?: (height: number) => void) => {
+  useEffect(() => {
+    if (!ref || !onResize) return;
+    const observer = new ResizeObserver((entries) => {
+      const [entry] = entries;
+      onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+    });
+    observer.observe(ref);
+    return () => {
+      observer.unobserve(ref);
+    };
+  }, [ref, onResize]);
+};
+

package/src/components/Item.tsx

@@ -101,7 +101,12 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
       setWrapperHeight(undefined);
       return;
     }
-    const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleHeight, (sectionTop + itemSectionTop) / window.innerWidth);
+    const itemArticleOffset = (sectionTop + itemSectionTop) / window.innerWidth;
+    const maxStickyTo = articleHeight - itemArticleOffset - height;
+    const end = sticky.to
+      ? Math.min(maxStickyTo, sticky.to)
+      : articleHeight - itemArticleOffset - height;
+    const wrapperHeight = end - sticky.from + height;
     setItemHeight(height);
     setWrapperHeight(wrapperHeight);
   };
@@ -189,16 +194,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
   );
 };
 
-function getStickyItemWrapperHeight(
-  sticky: TStickyParams,
-  itemHeight: number,
-  articleHeight: number,
-  itemArticleOffset: number,
-) {
-  const end = sticky.to ?? articleHeight - itemArticleOffset - itemHeight;
-  return end - sticky.from + itemHeight;
-}
-
 function parseSizing(sizing: string = 'manual'): Axis {
   const axisSizing = sizing.split(' ');
   return {

package/src/components/items/CustomItem.tsx

@@ -1,18 +1,21 @@
 import { ArticleItemType, getLayoutStyles, TCustomItem } from '@cntrl-site/sdk';
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import JSXStyle from 'styled-jsx/style';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item }) => {
+export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize }) => {
   const sdk = useCntrlContext();
   const { layouts } = useCntrlContext();
   const component = sdk.customItems.get(item.commonParams.name);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
   if (!component) return null;
   return (
     <>
-      <div className={`custom-component-${item.id}`}>{component({})}</div>
+      <div className={`custom-component-${item.id}`} ref={setRef}>{component({})}</div>
       <JSXStyle id={item.id}>
         {`${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
           return (`

package/src/components/items/ImageItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo } from 'react';
+import { FC, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { ArticleItemType, CntrlColor, getLayoutStyles, TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
@@ -7,18 +7,22 @@ import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
+export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { radius, strokeWidth, opacity, strokeColor, blur } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
   return (
     <LinkWrapper url={item.link?.url}>
       <>
         <div
           className={`image-wrapper-${item.id}`}
+          ref={setRef}
           style={{
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,

package/src/components/items/RectangleItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo } from 'react';
+import { FC, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { TRectangleItem, CntrlColor, getLayoutStyles, ArticleItemType } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
@@ -7,19 +7,25 @@ import { useRectangleItem } from './useRectangleItem';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }) => {
+export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { fillColor, radius, strokeWidth, strokeColor, blur, backdropBlur } = useRectangleItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const backgroundColor = useMemo(() => CntrlColor.parse(fillColor), [fillColor]);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
+  const backdropFilterValue = backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)`: 'unset';
 
   return (
     <LinkWrapper url={item.link?.url}>
       <>
-        <div className={`rectangle-${item.id}`}
+        <div
+          className={`rectangle-${item.id}`}
+          ref={setRef}
           style={{
             backgroundColor: `${backgroundColor.toCss()}`,
             borderRadius: `${radius * 100}vw`,
@@ -27,9 +33,9 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
             borderColor: `${borderColor.toCss()}`,
             transform: `rotate(${angle}deg)`,
             filter: blur !== 0 ? `blur(${blur * 100}vw)` : 'unset',
-            backdropFilter: backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)`: 'unset',
+            backdropFilter: backdropFilterValue,
             // @ts-ignore
-            '-webkit-backdrop-filter': backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)`: 'unset',
+            '-webkit-backdrop-filter': backdropFilterValue,
           }}
         />
         <JSXStyle id={id}>{`

package/src/components/items/RichTextItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useId, useState } from 'react';
+import { FC, useId, useState } from 'react';
 import { ArticleItemType, CntrlColor, getLayoutStyles, TRichTextItem } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
@@ -6,7 +6,7 @@ import { useRichTextItem } from './useRichTextItem';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRichTextItemValues } from './useRichTextItemValues';
-import ResizeObserver from 'resize-observer-polyfill';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
   const [content, styles] = useRichTextItem(item);
@@ -14,18 +14,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { layouts } = useCntrlContext();
   const { angle, blur } = useRichTextItemValues(item, sectionId);
-
-  useEffect(() => {
-    if (!ref || !onResize) return;
-    const observer = new ResizeObserver((entries) => {
-      const [entry] = entries;
-      onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
-    });
-    observer.observe(ref);
-    return () => {
-      observer.unobserve(ref);
-    };
-  }, [ref, onResize]);
+  useRegisterResize(ref, onResize);
 
   return (
     <>

package/src/components/items/VideoItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo } from 'react';
+import { FC, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { ArticleItemType, CntrlColor, getLayoutStyles, TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
@@ -7,17 +7,21 @@ import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId }) => {
+export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { radius, strokeWidth, strokeColor, opacity, blur } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
   return (
     <LinkWrapper url={item.link?.url}>
       <div
         className={`video-wrapper-${item.id}`}
+        ref={setRef}
         style={{
           borderRadius: `${radius * 100}vw`,
           borderWidth: `${strokeWidth * 100}vw`,

package/src/components/items/VimeoEmbed.tsx

@@ -9,8 +9,9 @@ import { useItemAngle } from '../useItemAngle';
 import { ArticleItemType, getLayoutStyles } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId }) => {
+export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { radius, blur } = useEmbedVideoItem(item, sectionId);
@@ -18,6 +19,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const vimeoPlayer = useMemo(() => iframeRef ? new Player(iframeRef) : undefined, [iframeRef]);
   const angle = useItemAngle(item, sectionId);
   const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
     validURL.searchParams.append('controls', String(controls));
@@ -36,7 +39,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
 
   return (
     <LinkWrapper url={item.link?.url}>
-      <div className={`embed-video-wrapper-${item.id}`}
+      <div
+        className={`embed-video-wrapper-${item.id}`}
+        ref={setRef}
         style={{
           borderRadius: `${radius * 100}vw`,
           transform: `rotate(${angle}deg)`,

package/src/components/items/YoutubeEmbed.tsx

@@ -11,8 +11,9 @@ import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverSty
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useYouTubeIframeApi } from '../../utils/Youtube/useYouTubeIframeApi';
 import { YTPlayer } from '../../utils/Youtube/YoutubeIframeApi';
+import { useRegisterResize } from "../../common/useRegisterResize";
 
-export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId }) => {
+export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { play, controls, url } = item.commonParams;
@@ -21,12 +22,12 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const YT = useYouTubeIframeApi();
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
   const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
+  useRegisterResize(div, onResize);
 
   useEffect(() => {
     const newUrl = new URL(url);
     const videoId = getYoutubeId(newUrl);
     if (!YT || !videoId || !div) return;
-    const divRect = div.getBoundingClientRect();
     const placeholder = document.createElement('div');
     div.appendChild(placeholder);
     const player = new YT.Player(placeholder, {
@@ -53,15 +54,16 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
 
   return (
     <LinkWrapper url={item.link?.url}>
-      <div className={`embed-youtube-video-wrapper-${item.id}`}
-         onMouseEnter={() => {
-           if (!player || play !== 'on-hover') return;
-           player.playVideo();
-         }}
-         onMouseLeave={() => {
-           if (!player || play !== 'on-hover') return;
-           player.pauseVideo();
-         }}
+      <div
+        className={`embed-youtube-video-wrapper-${item.id}`}
+        onMouseEnter={() => {
+          if (!player || play !== 'on-hover') return;
+          player.playVideo();
+        }}
+        onMouseLeave={() => {
+          if (!player || play !== 'on-hover') return;
+          player.pauseVideo();
+        }}
          ref={setDiv}
          style={{
            borderRadius: `${radius * 100}vw`,