@cntrl-site/sdk-nextjs 1.0.19-alpha.2 → 1.0.19-alpha.4

package/lib/components/items/VideoItem.js

@@ -16,29 +16,34 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const useLayoutContext_1 = require("../useLayoutContext");
 const ScrollPlaybackVideo_1 = require("../ScrollPlaybackVideo");
-const useStatesClassNames_1 = require("../useStatesClassNames");
-const getStatesCSS_1 = require("../../utils/getStatesCSS");
-const useStatesTransitions_1 = require("../useStatesTransitions");
-const VideoItem = ({ item, sectionId, onResize }) => {
-    var _a, _b, _c;
+const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const VideoItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+    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];
-    const statesWrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'video-wrapper');
-    const statesVideoClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'video');
+    const layoutValues = [item.area, item.layoutParams];
     const hasScrollPlayback = scrollPlayback !== null;
-    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['angle', 'opacity', 'blur']);
-    (0, useStatesTransitions_1.useStatesTransitions)(videoRef.current, item.state, ['strokeWidth', 'radius', 'strokeColor']);
+    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} ${statesWrapperClassNames}`, 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} ${statesWrapperClassNames}` })) : ((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} ${statesVideoClassNames}`, 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' });
+    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;
@@ -59,30 +64,24 @@ 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, stateParams]) => {
-                    const wrapperStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'video-wrapper', ['angle', 'opacity', 'blur'], stateParams);
-                    const videoStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'video', ['strokeWidth', 'radius', 'strokeColor'], stateParams);
+        ${(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: all 0.2s ease;
             }
             .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: all 0.2s ease;
             }
-            ${wrapperStatesCSS}
-            ${videoStatesCSS}
           `);
                 })}
     ` })] }));

package/lib/components/items/VimeoEmbed.js

@@ -14,27 +14,27 @@ const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
-const useStatesClassNames_1 = require("../useStatesClassNames");
-const getStatesCSS_1 = require("../../utils/getStatesCSS");
-const useStatesTransitions_1 = require("../useStatesTransitions");
-const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
-    var _a, _b, _c;
+const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+    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];
-    const wrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-video-wrapper');
-    const videoClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-video');
+    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);
-    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['angle', 'blur', 'opacity']);
-    (0, useStatesTransitions_1.useStatesTransitions)(iframeRef, item.state, ['radius']);
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
         validURL.searchParams.append('controls', String(controls));
@@ -67,7 +67,7 @@ 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} ${wrapperClassNames}`, 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: () => {
+    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();
@@ -75,7 +75,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',
@@ -84,7 +84,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
                             width: '100%',
                             top: '0',
                             left: '0'
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: `embed-video ${videoClassNames}`, 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%;
@@ -97,22 +97,16 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
         border: none;
         overflow: hidden;
       }
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
-                    const wrapperStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
-                    const videoStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-video', ['radius'], stateParams);
+      ${(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: all 0.2s ease;
           }
           .embed-video-wrapper-${item.id} .embed-video {
             border-radius: ${layoutParams.radius * 100}vw;
-            transition: all 0.2s ease;
           }
-          ${wrapperStatesCSS}
-          ${videoStatesCSS}
         `);
                 })}
     ` })] }));

package/lib/components/items/YoutubeEmbed.js

@@ -15,28 +15,27 @@ const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
-const useStatesClassNames_1 = require("../useStatesClassNames");
-const getStatesCSS_1 = require("../../utils/getStatesCSS");
-const useStatesTransitions_1 = require("../useStatesTransitions");
-const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
-    var _a, _b, _c;
+const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
+const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+    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 [wrapperRef, setWrapperRef] = (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];
-    const wrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-youtube-video-wrapper');
-    const embedClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed');
+    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)(div, onResize);
-    (0, useStatesTransitions_1.useStatesTransitions)(wrapperRef, item.state, ['angle', 'blur', 'opacity']);
-    (0, useStatesTransitions_1.useStatesTransitions)(div, item.state, ['radius']);
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
         const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
@@ -87,7 +86,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", { ref: setWrapperRef, className: `embed-youtube-video-wrapper-${item.id} ${wrapperClassNames}`, 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();
@@ -95,7 +94,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',
@@ -105,7 +104,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} ${embedClassNames}`, 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;
@@ -121,22 +120,16 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
           z-index: 1;
           border: none;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
-                    const wrapperStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-youtube-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
-                    const embedStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed', ['radius'], stateParams);
+        ${(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: all 0.2s ease;
             }
             .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
               border-radius: ${layoutParams.radius * 100}vw;
-              transition: all 0.2s ease;
             }
-            ${wrapperStatesCSS}
-            ${embedStatesCSS}
           `);
                 })}
       ` })] }));

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,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractionsRegistry = void 0;
+class InteractionsRegistry {
+    constructor(article, layoutId) {
+        this.layoutId = layoutId;
+        this.ctrls = new Map();
+        const { interactions } = article;
+        const items = article.sections.flatMap((section) => section.items);
+        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;
+        }, {});
+        const itemStageMap = items.reduce((map, item) => {
+            map[item.id] = { type: 'active', isStartState: true };
+            return map;
+        }, {});
+        const stateItemsIdsMap = activeStatesIds.reduce((map, stateId) => {
+            map[stateId] = 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.items = items;
+        this.interactions = interactions;
+        this.itemStageMap = itemStageMap;
+        this.stateItemsIdsMap = stateItemsIdsMap;
+        this.interactionStateMap = interactionStateMap;
+    }
+    register(itemId, ctrl) {
+        this.ctrls.set(itemId, ctrl);
+    }
+    getStatePropsForItem(itemId) {
+        var _a, _b;
+        const { items, layoutId } = this;
+        const item = items.find((item) => item.id === itemId);
+        const stage = this.itemStageMap[itemId];
+        if (!stage)
+            return {};
+        // handle "active" stage
+        if (stage.type === 'active') {
+            if (stage.isStartState)
+                return {};
+            const params = (_a = item.state[layoutId]) === null || _a === void 0 ? void 0 : _a[stage.stateId];
+            const stateProps = Object.entries(params).reduce((map, [key, stateDetails]) => {
+                const style = key;
+                map[style] = {
+                    value: stateDetails.value
+                };
+                return map;
+            }, {});
+            return stateProps;
+        }
+        // handle "transitioning" stage
+        const activeStateId = stage.direction === 'in' ? stage.to : stage.from;
+        const params = (_b = item.state[layoutId]) === null || _b === void 0 ? void 0 : _b[activeStateId];
+        return Object.entries(params).reduce((map, [key, stateDetails]) => {
+            const style = key;
+            const details = stateDetails;
+            map[style] = {
+                value: stage.direction === 'in' ? details.value : undefined,
+                transition: {
+                    timing: details[stage.direction].timing,
+                    duration: details[stage.direction].duration,
+                    delay: details[stage.direction].delay
+                }
+            };
+            return map;
+        }, {});
+    }
+    notifyTrigger(itemId, triggerType) {
+        var _a;
+        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 : [];
+            for (const [itemId, stage] of Object.entries(this.itemStageMap)) {
+                if (!transitioningItems.includes(itemId))
+                    continue;
+                this.itemStageMap[itemId] = {
+                    type: 'transitioning',
+                    from: stage.type === 'transitioning' ? stage.to : stage.stateId,
+                    to: matchingTrigger.to,
+                    direction: isNewStateActive ? 'in' : 'out'
+                };
+            }
+            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 prevState = this.itemStageMap[itemId];
+        if (prevState.type !== 'transitioning')
+            return; // throw?
+        this.itemStageMap[itemId] = {
+            type: 'active',
+            stateId: prevState.to,
+            isStartState: prevState.direction === 'out'
+        };
+        (_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();
+        }
+    }
+}
+exports.InteractionsRegistry = InteractionsRegistry;

package/lib/interactions/ItemInteractionCtrl.js

@@ -0,0 +1,55 @@
+"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) => {
+            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;

package/lib/interactions/getTransition.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTransition = void 0;
+const CSSPropertyNameMap_1 = require("./CSSPropertyNameMap");
+function getTransition(state, keys) {
+    if (Object.keys(state).length === 0)
+        return 'none';
+    const transitions = [];
+    for (const [key, params] of Object.entries(state)) {
+        if (!keys.includes(key) || !params.transition)
+            continue;
+        const { transition: { duration, delay, timing } } = params;
+        const cssKey = CSSPropertyNameMap_1.CSSPropertyNameMap[key];
+        const nonZeroDuration = Math.max(duration, 0.01);
+        transitions.push(`${cssKey} ${nonZeroDuration}ms ${timing} ${delay}ms`);
+    }
+    return transitions.length > 0
+        ? transitions.join(', ')
+        : 'none';
+}
+exports.getTransition = getTransition;

package/lib/interactions/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/interactions/useItemInteractionCtrl.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemInteractionCtrl = void 0;
+const react_1 = require("react");
+const ItemInteractionCtrl_1 = require("./ItemInteractionCtrl");
+const InteractionsContext_1 = require("../provider/InteractionsContext");
+function useItemInteractionCtrl(itemId) {
+    const [_, triggerRender] = (0, react_1.useState)(0);
+    const registry = (0, InteractionsContext_1.useInteractionsRegistry)();
+    const ctrl = (0, react_1.useMemo)(() => {
+        if (!registry)
+            return;
+        return new ItemInteractionCtrl_1.ItemInteractionController(itemId, registry, () => triggerRender(prev => prev + 1));
+    }, [itemId, registry]);
+    return ctrl;
+}
+exports.useItemInteractionCtrl = useItemInteractionCtrl;