@cntrl-site/sdk-nextjs 1.0.20 → 1.1.0

package/lib/components/items/RichTextItem.js

@@ -11,24 +11,49 @@ const sdk_1 = require("@cntrl-site/sdk");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRichTextItem_1 = require("./useRichTextItem");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRichTextItemValues_1 = require("./useRichTextItemValues");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const getFontFamilyValue_1 = require("../../utils/getFontFamilyValue");
 const useExemplary_1 = require("../../common/useExemplary");
 const useItemAngle_1 = require("../useItemAngle");
-const RichTextItem = ({ item, sectionId, onResize }) => {
-    const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
+const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d;
     const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const { blur, wordSpacing, letterSpacing, color, fontSize, lineHeight } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
-    const textColor = (0, react_1.useMemo)(() => color ? color_1.CntrlColor.parse(color) : undefined, [color]);
-    const layoutValues = [item.area, item.layoutParams, item.state.hover];
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { blur: itemBlur, wordSpacing: itemWordSpacing, letterSpacing: itemLetterSpacing, color: itemColor, fontSize, lineHeight } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
+    const layoutValues = [item.area, item.layoutParams];
     const exemplary = (0, useExemplary_1.useExemplary)();
+    const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
+    const stateStyles = (_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _a !== void 0 ? _a : {};
+    const transition = (_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _b !== void 0 ? _b : 'none';
+    const textColor = (0, react_1.useMemo)(() => {
+        var _a;
+        const color = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.color, itemColor);
+        return color ? color_1.CntrlColor.parse(color) : undefined;
+    }, [itemColor, stateStyles.color]);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.angle, itemAngle);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.blur, itemBlur);
+    const letterSpacing = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.letterSpacing, itemLetterSpacing);
+    const wordSpacing = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStyles.wordSpacing, itemWordSpacing);
+    const colorAlpha = textColor === null || textColor === void 0 ? void 0 : textColor.getAlpha();
+    const rangeStyles = layoutId ? (_d = (_c = item.layoutParams[layoutId]) === null || _c === void 0 ? void 0 : _c.rangeStyles) !== null && _d !== void 0 ? _d : [] : [];
+    const rangeColors = rangeStyles.filter((style) => style.style === 'COLOR');
+    const hasVisibleRangeColors = rangeColors.some((color) => {
+        const alpha = color_1.CntrlColor.parse(color.value).getAlpha();
+        return alpha > 0;
+    });
+    const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
+    const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                         const color = color_1.CntrlColor.parse(layoutParams.color);
                         return (`
             .rich-text-wrapper-${item.id} {
@@ -45,10 +70,6 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               text-transform: ${layoutParams.textTransform};
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
-            }
-            .rich-text-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
             }
             @supports not (color: oklch(42% 0.3 90 / 1)) {
               .rich-text-wrapper-${item.id} {

package/lib/components/items/VideoItem.js

@@ -13,26 +13,41 @@ const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const useLayoutContext_1 = require("../useLayoutContext");
 const ScrollPlaybackVideo_1 = require("../ScrollPlaybackVideo");
-const VideoItem = ({ item, sectionId, onResize }) => {
-    var _a, _b, _c;
+const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     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)(() => strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
+    const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeColor: itemStrokeColor, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const [ref, setRef] = (0, react_1.useState)(null);
     const videoRef = (0, react_1.useRef)(null);
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const scrollPlayback = layoutId ? item.layoutParams[layoutId].scrollPlayback : null;
-    const layoutValues = [item.area, item.layoutParams, item.state.hover];
+    const layoutValues = [item.area, item.layoutParams];
     const hasScrollPlayback = scrollPlayback !== null;
+    const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
+    const videoStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius', 'strokeColor']);
+    const borderColor = (0, react_1.useMemo)(() => {
+        var _a;
+        const strokeColor = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.styles) === null || _a === void 0 ? void 0 : _a.color, itemStrokeColor);
+        return strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined;
+    }, [(_a = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.styles) === null || _a === void 0 ? void 0 : _a.color, itemStrokeColor]);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _b === void 0 ? void 0 : _b.angle, itemAngle);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _c === void 0 ? void 0 : _c.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _d === void 0 ? void 0 : _d.blur, itemBlur);
+    const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _e === void 0 ? void 0 : _e.strokeWidth, itemStrokeWidth);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.radius, itemRadius);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {}));
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })) : ((0, jsx_runtime_1.jsx)("video", { poster: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    const inlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {})), { transition: (_g = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _g !== void 0 ? _g : 'none' });
+    const isInteractive = opacity !== 0;
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_k = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })) : ((0, jsx_runtime_1.jsx)("video", { poster: (_l = item.commonParams.coverUrl) !== null && _l !== void 0 ? _l : '', ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
@@ -53,31 +68,23 @@ const VideoItem = ({ item, sectionId, onResize }) => {
           pointer-events: auto;
         }
         .video-${item.id} {
-          border-color: ${strokeColor};
+          border-color: ${itemStrokeColor};
         }
         .video-playback-wrapper {
           display: flex;
           justify-content: center;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                     return (`
             .video-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'opacity', 'blur'], hoverParams)};
-            }
-            .video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .video-${item.id} {
               border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
               border-radius: ${layoutParams.radius * 100}vw;
               border-width: ${layoutParams.strokeWidth * 100}vw;
-              transition: ${(0, HoverStyles_1.getTransitions)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
-            }
-            .video-wrapper-${item.id}:hover .video {
-              ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
           `);
                 })}

package/lib/components/items/VimeoEmbed.js

@@ -13,21 +13,27 @@ const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 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 useRegisterResize_1 = require("../../common/useRegisterResize");
-const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
-    var _a, _b, _c;
+const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { radius, blur, opacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
     const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
-    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
     const [ref, setRef] = (0, react_1.useState)(null);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
     const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
-    const layoutValues = [item.area, item.layoutParams, item.state.hover];
+    const layoutValues = [item.area, item.layoutParams];
+    const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
+    const frameStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['radius']);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _b === void 0 ? void 0 : _b.blur, itemBlur);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _c === void 0 ? void 0 : _c.opacity, itemOpacity);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
@@ -61,7 +67,11 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
         vimeoPlayer.play();
         setIsCoverVisible(false);
     };
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
+    const isInteractive = opacity !== 0;
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.play();
@@ -69,7 +79,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.pause();
-                }, children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', style: {
+                }, children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -78,36 +88,28 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
                             width: '100%',
                             top: '0',
                             left: '0'
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: `embed-video`, src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-video-wrapper-${item.id} {
         position: absolute;
         width: 100%;
         height: 100%;
       }
-      .embedVideo {
+      .embed-video {
         width: 100%;
         height: 100%;
         z-index: 1;
         border: none;
         overflow: hidden;
       }
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                     return (`
           .embed-video-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
             filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
-          }
-          .embed-video-wrapper-${item.id}:hover {
-            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
           }
-          .embed-video-wrapper-${item.id} .embedVideo {
+          .embed-video-wrapper-${item.id} .embed-video {
             border-radius: ${layoutParams.radius * 100}vw;
-            transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
-          }
-          .embed-video-wrapper-${item.id}:hover .embedVideo {
-            ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
           }
         `);
                 })}

package/lib/components/items/YoutubeEmbed.js

@@ -12,23 +12,33 @@ const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
 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 useRegisterResize_1 = require("../../common/useRegisterResize");
-const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
-    var _a, _b, _c;
+const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { play, controls, url } = item.commonParams;
-    const { radius, blur, opacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
-    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
     const [player, setPlayer] = (0, react_1.useState)(undefined);
     const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
-    const layoutValues = [item.area, item.layoutParams, item.state.hover];
+    const layoutValues = [item.area, item.layoutParams];
+    const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
+    const frameStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['radius']);
+    const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _b === void 0 ? void 0 : _b.blur, itemBlur);
+    const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _c === void 0 ? void 0 : _c.opacity, itemOpacity);
+    const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
+    const isInteractive = opacity !== 0;
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
     (0, useRegisterResize_1.useRegisterResize)(div, onResize);
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
@@ -80,7 +90,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
             setIsCoverVisible(true);
         }
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
                     if (!player || play !== 'on-hover')
                         return;
                     player.playVideo();
@@ -88,7 +98,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
                     if (!player || play !== 'on-hover')
                         return;
                     player.pauseVideo();
-                }, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', style: {
+                }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -98,7 +108,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
                             top: '0',
                             left: '0',
                             zIndex: 1
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;
@@ -114,23 +124,15 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
           z-index: 1;
           border: none;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                     return (`
             .embed-youtube-video-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
               border-radius: ${layoutParams.radius * 100}vw;
-              transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
-            }
-            .embed-youtube-video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)};
-            }
-            .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
-              ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
             }
           `);
                 })}

package/lib/components/useItemPosition.js

@@ -5,7 +5,8 @@ const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
 const getItemTopStyle_1 = require("../utils/getItemTopStyle");
 const useLayoutContext_1 = require("./useLayoutContext");
-const useItemPosition = (item, sectionId) => {
+const useItemPosition = (item, sectionId, stateValues) => {
+    var _a, _b;
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const position = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Position, (item, layoutId) => {
         if (!layoutId)
@@ -14,12 +15,16 @@ const useItemPosition = (item, sectionId) => {
     }, (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined, sectionId, [layoutId]);
     const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
     const positionType = layoutId ? item.area[layoutId].positionType : sdk_1.PositionType.ScreenBased;
-    // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
+    // to prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
     const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
+    if (!position)
+        return undefined;
+    const top = (_a = stateValues === null || stateValues === void 0 ? void 0 : stateValues.top) !== null && _a !== void 0 ? _a : position.top;
+    const left = (_b = stateValues === null || stateValues === void 0 ? void 0 : stateValues.left) !== null && _b !== void 0 ? _b : position.left;
     return position ? {
-        bottom: isScreenBasedBottom ? `${-position.top * 100}vw` : 'unset',
-        top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(position.top, anchorSide),
-        left: `${position.left * 100}vw`
+        bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
+        top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
+        left: `${left * 100}vw`
     } : undefined;
 };
 exports.useItemPosition = useItemPosition;

package/lib/interactions/CSSPropertyNameMap.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyleKeysFromCSSProperty = exports.CSSPropertyNameMap = void 0;
+exports.CSSPropertyNameMap = {
+    'width': 'width',
+    'height': 'height',
+    'top': 'top',
+    'left': 'left',
+    'scale': 'transform',
+    'angle': 'transform',
+    'opacity': 'opacity',
+    'radius': 'border-radius',
+    'strokeWidth': 'border-width',
+    'strokeColor': 'border-color',
+    'fillColor': 'background-color',
+    'blur': 'filter',
+    'backdropBlur': 'backdrop-filter',
+    'letterSpacing': 'letter-spacing',
+    'wordSpacing': 'word-spacing',
+    'color': 'color'
+};
+const PropertyNameCSSMap = {
+    'transform': ['angle', 'scale'],
+    'border-radius': ['radius'],
+    'border-width': ['strokeWidth'],
+    'border-color': ['strokeColor'],
+    'background-color': ['fillColor'],
+    'filter': ['blur'],
+    'backdrop-filter': ['backdrop-blur'],
+    'letter-spacing': ['letterSpacing'],
+    'word-spacing': ['wordSpacing'],
+};
+function getStyleKeysFromCSSProperty(cssProp) {
+    var _a;
+    const key = (_a = PropertyNameCSSMap[cssProp]) !== null && _a !== void 0 ? _a : [cssProp];
+    return key;
+}
+exports.getStyleKeysFromCSSProperty = getStyleKeysFromCSSProperty;