@cntrl-site/sdk-nextjs 1.0.20 → 1.1.1

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;

package/lib/interactions/InteractionsRegistry.js

@@ -0,0 +1,220 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractionsRegistry = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const Item_1 = require("../components/Item");
+class InteractionsRegistry {
+    constructor(article, layoutId) {
+        this.layoutId = layoutId;
+        this.ctrls = new Map();
+        const { interactions } = article;
+        this.items = this.unpackItems(article);
+        const activeStatesIds = interactions.reduce((map, inter) => {
+            var _a;
+            const activeStateId = (_a = inter.states.find((state) => state.id !== inter.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
+            map.push(activeStateId);
+            return map;
+        }, []);
+        const interactionStateMap = interactions.reduce((map, { id, startStateId }) => {
+            map[id] = startStateId;
+            return map;
+        }, {});
+        this.activeStateIdInteractionIdMap = interactions.reduce((map, interaction) => {
+            const activeState = interaction.states.find((state) => state.id !== interaction.startStateId);
+            if (activeState) {
+                map[activeState.id] = interaction.id;
+            }
+            return map;
+        }, {});
+        const itemStages = this.getDefaultItemStages();
+        const stateItemsIdsMap = activeStatesIds.reduce((map, stateId) => {
+            map[stateId] = this.items
+                .filter((item) => {
+                var _a, _b;
+                const layoutStates = (_a = item.state[layoutId]) !== null && _a !== void 0 ? _a : {};
+                const state = (_b = layoutStates === null || layoutStates === void 0 ? void 0 : layoutStates[stateId]) !== null && _b !== void 0 ? _b : {};
+                const hasKeys = Object.keys(state).length !== 0;
+                return hasKeys;
+            })
+                .map((item) => item.id);
+            return map;
+        }, {});
+        this.interactions = interactions;
+        this.itemsStages = itemStages;
+        this.stateItemsIdsMap = stateItemsIdsMap;
+        this.interactionStateMap = interactionStateMap;
+    }
+    register(itemId, ctrl) {
+        this.ctrls.set(itemId, ctrl);
+    }
+    getStatePropsForItem(itemId) {
+        var _a, _b, _c, _d, _e;
+        const { items, layoutId } = this;
+        const item = items.find((item) => item.id === itemId);
+        const itemStages = this.itemsStages.filter((stage) => stage.itemId === itemId);
+        itemStages.sort((a, b) => a.updated - b.updated);
+        const itemStyles = {};
+        for (const stage of itemStages) {
+            if (stage.type === 'active') {
+                if (stage.isStartState)
+                    continue;
+                const params = (_b = (_a = item.state[layoutId]) === null || _a === void 0 ? void 0 : _a[stage.stateId]) !== null && _b !== void 0 ? _b : {};
+                for (const [key, stateDetails] of Object.entries(params)) {
+                    itemStyles[key] = {
+                        value: stateDetails.value
+                    };
+                }
+            }
+            if (stage.type === 'transitioning') {
+                const activeStateId = stage.direction === 'in' ? stage.to : stage.from;
+                const params = (_d = (_c = item.state[layoutId]) === null || _c === void 0 ? void 0 : _c[activeStateId]) !== null && _d !== void 0 ? _d : {};
+                for (const [key, stateDetails] of Object.entries(params)) {
+                    itemStyles[key] = {
+                        value: stage.direction === 'in' ? stateDetails.value : (_e = itemStyles[key]) === null || _e === void 0 ? void 0 : _e.value,
+                        transition: {
+                            timing: stateDetails[stage.direction].timing,
+                            duration: stateDetails[stage.direction].duration,
+                            delay: stateDetails[stage.direction].delay
+                        }
+                    };
+                }
+            }
+        }
+        return itemStyles;
+    }
+    notifyTrigger(itemId, triggerType) {
+        var _a;
+        const timestamp = Date.now();
+        for (const interaction of this.interactions) {
+            const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
+            const matchingTrigger = interaction.triggers.find((trigger) => trigger.itemId === itemId
+                && trigger.from === currentStateId
+                && trigger.type === triggerType);
+            if (!matchingTrigger)
+                continue;
+            const activeStateId = this.getActiveInteractionState(interaction.id);
+            const isNewStateActive = matchingTrigger.to === activeStateId;
+            this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
+            const transitioningItems = (_a = this.stateItemsIdsMap[activeStateId]) !== null && _a !== void 0 ? _a : [];
+            this.itemsStages = this.itemsStages.map((stage) => {
+                if (stage.interactionId !== interaction.id)
+                    return stage;
+                return {
+                    itemId: stage.itemId,
+                    interactionId: stage.interactionId,
+                    type: 'transitioning',
+                    from: stage.type === 'transitioning' ? stage.to : stage.stateId,
+                    to: matchingTrigger.to,
+                    direction: isNewStateActive ? 'in' : 'out',
+                    updated: timestamp
+                };
+            });
+            this.notifyItemCtrlsChange(transitioningItems);
+            this.notifyTransitionStartForItems(transitioningItems, activeStateId);
+        }
+    }
+    notifyTransitionStartForItems(itemsIds, activeStateId) {
+        var _a, _b, _c;
+        for (const itemId of itemsIds) {
+            const ctrl = this.ctrls.get(itemId);
+            const item = this.items.find((item) => item.id === itemId);
+            const keys = Object.keys((_b = (_a = item.state[this.layoutId]) === null || _a === void 0 ? void 0 : _a[activeStateId]) !== null && _b !== void 0 ? _b : {});
+            (_c = ctrl === null || ctrl === void 0 ? void 0 : ctrl.handleTransitionStart) === null || _c === void 0 ? void 0 : _c.call(ctrl, keys);
+        }
+    }
+    notifyTransitionEnd(itemId) {
+        var _a;
+        const timestamp = Date.now();
+        this.itemsStages = this.itemsStages.map((stage) => {
+            if (stage.itemId !== itemId || stage.type !== 'transitioning')
+                return stage;
+            return {
+                itemId: itemId,
+                interactionId: stage.interactionId,
+                type: 'active',
+                stateId: stage.to,
+                isStartState: stage.direction === 'out',
+                updated: timestamp
+            };
+        });
+        (_a = this.ctrls.get(itemId)) === null || _a === void 0 ? void 0 : _a.receiveChange();
+    }
+    getCurrentStateByInteractionId(id) {
+        let state;
+        for (const interactionId of Object.keys(this.interactionStateMap)) {
+            if (id !== interactionId)
+                continue;
+            state = this.interactionStateMap[interactionId];
+        }
+        if (!state)
+            throw new Error(`Failed to find current state for interaction w/ id="${id}"`);
+        return state;
+    }
+    setCurrentStateForInteraction(interactionId, stateId) {
+        this.interactionStateMap = Object.assign(Object.assign({}, this.interactionStateMap), { [interactionId]: stateId });
+    }
+    getActiveInteractionState(interactionId) {
+        var _a;
+        const { interactions } = this;
+        const interaction = interactions.find((interaction) => interaction.id === interactionId);
+        return (_a = interaction.states.find(state => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    notifyItemCtrlsChange(itemsIds) {
+        var _a;
+        for (const itemId of itemsIds) {
+            (_a = this.ctrls.get(itemId)) === null || _a === void 0 ? void 0 : _a.receiveChange();
+        }
+    }
+    unpackItems(article) {
+        var _a;
+        const itemsArr = [];
+        for (const section of article.sections) {
+            for (const item of section.items) {
+                const { items } = item, itemWithoutChildren = __rest(item, ["items"]);
+                itemsArr.push(itemWithoutChildren);
+                if (!(0, Item_1.isItemType)(item, sdk_1.ArticleItemType.Group))
+                    continue;
+                const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
+                for (const child of groupChildren) {
+                    itemsArr.push(child);
+                }
+            }
+        }
+        return itemsArr;
+    }
+    getDefaultItemStages() {
+        const timestamp = Date.now();
+        const { items, layoutId } = this;
+        const stages = [];
+        for (const item of items) {
+            const itemStatesMap = item.state[layoutId];
+            if (!itemStatesMap)
+                continue;
+            for (const stateId of Object.keys(itemStatesMap)) {
+                const interactionId = this.activeStateIdInteractionIdMap[stateId];
+                if (!interactionId)
+                    continue;
+                stages.push({
+                    itemId: item.id,
+                    interactionId,
+                    type: 'active',
+                    isStartState: true,
+                    updated: timestamp
+                });
+            }
+        }
+        return stages;
+    }
+}
+exports.InteractionsRegistry = InteractionsRegistry;

package/lib/interactions/ItemInteractionCtrl.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemInteractionController = void 0;
+const getTransition_1 = require("./getTransition");
+const CSSPropertyNameMap_1 = require("./CSSPropertyNameMap");
+class ItemInteractionController {
+    constructor(itemId, registry, onChange) {
+        this.itemId = itemId;
+        this.registry = registry;
+        this.onChange = onChange;
+        this.transitionsInProgress = new Set();
+        this.handleTransitionStart = (types) => {
+            this.transitionsInProgress.clear();
+            for (const type of types) {
+                this.transitionsInProgress.add(type);
+            }
+        };
+        this.handleTransitionEnd = (cssPropKey) => {
+            if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-radius')) {
+                cssPropKey = 'border-radius';
+            }
+            if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-width')) {
+                cssPropKey = 'border-width';
+            }
+            const styleKeys = (0, CSSPropertyNameMap_1.getStyleKeysFromCSSProperty)(cssPropKey);
+            for (const key of styleKeys) {
+                const found = this.transitionsInProgress.has(key);
+                if (!found)
+                    continue;
+                this.transitionsInProgress.delete(key);
+                break;
+            }
+            if (this.transitionsInProgress.size !== 0)
+                return;
+            this.registry.notifyTransitionEnd(this.itemId);
+        };
+        this.registry.register(itemId, this);
+    }
+    getState(keys) {
+        const stateProps = this.registry.getStatePropsForItem(this.itemId);
+        const styles = keys.reduce((map, styleKey) => {
+            const prop = stateProps[styleKey];
+            if ((prop === null || prop === void 0 ? void 0 : prop.value) === undefined)
+                return map;
+            map[styleKey] = prop.value;
+            return map;
+        }, {});
+        const transition = (0, getTransition_1.getTransition)(stateProps, keys);
+        return {
+            styles,
+            transition
+        };
+    }
+    sendTrigger(type) {
+        this.registry.notifyTrigger(this.itemId, type);
+    }
+    receiveChange() {
+        this.onChange();
+    }
+}
+exports.ItemInteractionController = ItemInteractionController;