@cntrl-site/sdk-nextjs 0.12.8 → 0.13.0

package/lib/components/Item.js

@@ -22,6 +22,8 @@ const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const useItemScale_1 = require("./useItemScale");
 const ScaleAnchorMap_1 = require("../utils/ScaleAnchorMap");
 const useSectionHeightMap_1 = require("./useSectionHeightMap");
+const HoverStyles_1 = require("../utils/HoverStyles/HoverStyles");
+const getItemTopStyle_1 = require("../utils/getItemTopStyle");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -41,7 +43,7 @@ const Item = ({ item, sectionId }) => {
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
     const layout = (0, useCurrentLayout_1.useCurrentLayout)();
     const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
-    const layoutValues = [item.area, item.hidden];
+    const layoutValues = [item.area, item.hidden, item.state.hover];
     const isInitialRef = (0, react_1.useRef)(true);
     layoutValues.push(item.sticky);
     layoutValues.push(sectionHeight);
@@ -72,11 +74,11 @@ const Item = ({ item, sectionId }) => {
         height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, style: { top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }, children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     return (`
             .item-${item.id} {
-              position: ${sticky ? 'sticky' : 'absolute'};xw
+              position: ${sticky ? 'sticky' : 'absolute'};
               width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
               height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `w${area.height * 100}vw` : 'unset'};
               transform: scale(${scale});
@@ -84,7 +86,9 @@ const Item = ({ item, sectionId }) => {
               transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
               pointer-events: auto;
               --webkit-backface-visibility: hidden;
+              cursor: ${hoverParams ? 'pointer' : 'default'};
               visibility: ${hidden ? 'hidden' : 'visible'};
+              transition: ${(0, HoverStyles_1.getTransitions)(['width', 'height', 'scale'], hoverParams)};
             }
             .item-wrapper-${item.id} {
               position: absolute;
@@ -92,9 +96,16 @@ const Item = ({ item, sectionId }) => {
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
               pointer-events: none;
-              top: ${(0, useItemPosition_1.getItemTopStyle)(area.top, area.anchorSide)};
+              top: ${(0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height) * 100}vw` : 'unset'};
+              transition: ${(0, HoverStyles_1.getTransitions)(['left', 'top'], hoverParams)};
+            }
+            .item-${item.id}:hover {
+              ${(0, HoverStyles_1.getHoverStyles)(['width', 'height', 'scale'], hoverParams)}
+            }
+            .item-wrapper-${item.id}:hover {
+              ${(0, HoverStyles_1.getHoverStyles)(['left', 'top'], hoverParams, area.anchorSide)}
             }
           `);
                 })}

package/lib/components/Section.js

@@ -35,7 +35,7 @@ const Section = ({ section, data, children }) => {
     if (SectionComponent)
         return (0, jsx_runtime_1.jsx)("div", { ref: sectionRef, children: (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children }) });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, style: {
-                    backgroundColor: backgroundColor
+                    backgroundColor: backgroundColor.toCss()
                 }, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
@@ -43,6 +43,11 @@ const Section = ({ section, data, children }) => {
             position: relative;
          }`))}
       ${getSectionVisibilityStyles()}
+      @supports not (color: oklch(42% 0.3 90 / 1)) {
+        .section-${section.id} {
+          background-color: ${backgroundColor.fmt('rgba')};
+        }
+      }
     ` })] }));
 };
 exports.Section = Section;

package/lib/components/items/CustomItem.js

@@ -1,12 +1,29 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
+const style_1 = __importDefault(require("styled-jsx/style"));
 const CustomItem = ({ item }) => {
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const component = sdk.customItems.get(item.commonParams.name);
     if (!component)
         return null;
-    return component({});
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                    return (`
+            .custom-component-${item.id} {
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle'], hoverParams)};
+            }
+            .custom-component-${item.id}:hover {
+              ${(0, HoverStyles_1.getHoverStyles)(['angle'], hoverParams)}
+            }
+          `);
+                })}` })] }));
 };
 exports.CustomItem = CustomItem;

package/lib/components/items/ImageItem.js

@@ -11,18 +11,26 @@ const sdk_1 = require("@cntrl-site/sdk");
 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 ImageItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, style: {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         opacity: `${opacity}`,
-                        borderColor: `${borderColor}`,
+                        borderColor: `${borderColor.toCss()}`,
                         transform: `rotate(${angle}deg)`
                     }, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        @supports not (color: oklch(42% 0.3 90 / 1)) {
+          .image-wrapper-${item.id} {
+            border-color: ${borderColor.fmt('rgba')};
+          }
+        }
          .image-wrapper-${item.id} {
             position: absolute;
             overflow: hidden;
@@ -39,6 +47,16 @@ const ImageItem = ({ item, sectionId }) => {
             object-fit: cover;
             pointer-events: none;
           }
+          ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                        return (`
+              .image-wrapper-${item.id} {
+                transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)};
+              }
+              .image-wrapper-${item.id}:hover {
+                ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)}
+              }
+            `);
+                    })}
       ` })] }) }));
 };
 exports.ImageItem = ImageItem;

package/lib/components/items/RectangleItem.js

@@ -11,8 +11,11 @@ const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useRectangleItem_1 = require("./useRectangleItem");
 const useItemAngle_1 = require("../useItemAngle");
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const RectangleItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor), [fillColor]);
@@ -24,12 +27,6 @@ const RectangleItem = ({ item, sectionId }) => {
                         borderColor: `${borderColor.toCss()}`,
                         transform: `rotate(${angle}deg)`
                     } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        @supports (color: oklch(42% 0.3 90 / 1)) {
-          .rectangle-${item.id} {
-            background-color: ${backgroundColor.fmt('oklch')};
-            border-color: ${borderColor.fmt('oklch')};
-          }
-        }
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .rectangle-${item.id} {
             background-color: ${backgroundColor.fmt('rgba')};
@@ -43,6 +40,16 @@ const RectangleItem = ({ item, sectionId }) => {
           border-style: solid;
           box-sizing: border-box;
         }
+        ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                        return (`
+            .rectangle-${item.id} {
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor'], hoverParams)};
+            }
+            .rectangle-${item.id}:hover {
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor'], hoverParams)}
+            }
+          `);
+                    })}
       ` })] }) }));
 };
 exports.RectangleItem = RectangleItem;

package/lib/components/items/RichTextItem.js

@@ -6,13 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const sdk_1 = require("@cntrl-site/sdk");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRichTextItem_1 = require("./useRichTextItem");
 const useItemAngle_1 = require("../useItemAngle");
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const RichTextItem = ({ item, sectionId, onResize }) => {
     const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
+    const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const className = preset ? `cntrl-preset-${preset.id}` : undefined;
     (0, react_1.useEffect)(() => {
         if (!ref || !onResize)
@@ -26,8 +31,17 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
             observer.unobserve(ref);
         };
     }, [ref, onResize]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: className, style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `${className} rich-text-wrapper-${item.id}`, style: {
                     transform: `rotate(${angle}deg)`
-                }, children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
+                }, children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                        return (`
+            .rich-text-wrapper-${item.id} {
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle'], hoverParams)};
+            }
+            .rich-text-wrapper-${item.id}:hover {
+              ${(0, HoverStyles_1.getHoverStyles)(['angle'], hoverParams)}
+            }
+          `);
+                    })}`] })] }));
 };
 exports.RichTextItem = RichTextItem;

package/lib/components/items/VideoItem.js

@@ -11,19 +11,27 @@ const sdk_1 = require("@cntrl-site/sdk");
 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 VideoItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,
                     borderWidth: `${strokeWidth * 100}vw`,
                     opacity: `${opacity}`,
-                    borderColor: `${borderColor}`,
+                    borderColor: `${borderColor.toCss()}`,
                     transform: `rotate(${angle}deg)`
                 }, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", 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} {
+        @supports not (color: oklch(42% 0.3 90 / 1)) {
+          .video-wrapper-${item.id} {
+            border-color: ${borderColor.fmt('rgba')};
+          }
+        }
+        .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
           width: 100%;
@@ -40,6 +48,16 @@ const VideoItem = ({ item, sectionId }) => {
           object-fit: cover;
           pointer-events: none;
         }
+        ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                    return (`
+            .video-wrapper-${item.id} {
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)};
+            }
+            .video-wrapper-${item.id}:hover {
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)}
+            }
+          `);
+                })}
     ` })] }));
 };
 exports.VideoItem = VideoItem;

package/lib/components/items/VimeoEmbed.js

@@ -6,19 +6,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VimeoEmbedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const player_1 = __importDefault(require("@vimeo/player"));
 const style_1 = __importDefault(require("styled-jsx/style"));
 const LinkWrapper_1 = require("../LinkWrapper");
 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 useCurrentLayout_1 = require("../../common/useCurrentLayout");
 const VimeoEmbedItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layout = (0, useCurrentLayout_1.useCurrentLayout)();
     const { radius } = (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 isAutoPlayOnHover = (0, react_1.useMemo)(() => {
+        const layoutHoverStates = item.state.hover[layout];
+        if (!layoutHoverStates)
+            return false;
+        return layoutHoverStates.autoplay === true;
+    }, [layout, item]);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
         validURL.searchParams.append('controls', String(controls));
-        validURL.searchParams.append('autoplay', !controls ? 'true' : String(autoplay));
+        validURL.searchParams.append('autoplay', String(autoplay));
         validURL.searchParams.append('muted', String(muted));
         validURL.searchParams.append('loop', String(loop));
         validURL.searchParams.append('pip', String(pictureInPicture));
@@ -32,19 +47,37 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,
                     transform: `rotate(${angle}deg)`
-                }, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .embed-video-wrapper-${item.id} {
-          position: absolute;
-          overflow: hidden;
-          width: 100%;
-          height: 100%;
-        }
-        .embedVideo {
-          width: 100%;
-          height: 100%;
-          z-index: 1;
-          border: none;
-        }
-      ` })] }));
+                }, onMouseEnter: () => {
+                    if (!vimeoPlayer || !isAutoPlayOnHover)
+                        return;
+                    vimeoPlayer.play();
+                }, onMouseLeave: () => {
+                    if (!vimeoPlayer || !isAutoPlayOnHover)
+                        return;
+                    vimeoPlayer.pause();
+                }, children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+      .embed-video-wrapper-${item.id} {
+        position: absolute;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+      }
+      .embedVideo {
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        border: none;
+      }
+      ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                    return (`
+          .embed-video-wrapper-${item.id} {
+            transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius'], hoverParams)};
+          }
+          .embed-video-wrapper-${item.id}:hover {
+            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius'], hoverParams)}
+          }
+        `);
+                })}
+    ` })] }));
 };
 exports.VimeoEmbedItem = VimeoEmbedItem;

package/lib/components/items/YoutubeEmbed.js

@@ -11,8 +11,12 @@ const LinkWrapper_1 = require("../LinkWrapper");
 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 YoutubeEmbedItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { autoplay, controls, url } = item.commonParams;
     const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -21,7 +25,7 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
         const id = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
         const validUrl = new URL(`https://www.youtube.com/embed/${id}`);
         validUrl.searchParams.append('controls', `${Number(controls)}`);
-        validUrl.searchParams.append('autoplay', !controls ? 'true' : `${Number(autoplay)}`);
+        validUrl.searchParams.append('autoplay', `${Number(autoplay)}`);
         validUrl.searchParams.append('mute', `${Number(autoplay)}`);
         return validUrl.href;
     };
@@ -42,6 +46,16 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
           z-index: 1;
           border: none;
         }
+        ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                    return (`
+            .embed-youtube-video-wrapper-${item.id} {
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius'], hoverParams)};
+            }
+            .embed-youtube-video-wrapper-${item.id}:hover {
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius'], hoverParams)}
+            }
+          `);
+                })}
       ` })] }));
 };
 exports.YoutubeEmbedItem = YoutubeEmbedItem;

package/lib/components/useItemPosition.js

@@ -1,29 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemTopStyle = exports.useItemPosition = void 0;
-const sdk_1 = require("@cntrl-site/sdk");
+exports.useItemPosition = void 0;
 const useKeyframeValue_1 = require("../common/useKeyframeValue");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
+const getItemTopStyle_1 = require("../utils/getItemTopStyle");
 const useItemPosition = (item, sectionId) => {
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     const { top, left } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => item.area[layoutId], (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
     return {
-        top: getItemTopStyle(top, item.area[layoutId].anchorSide),
+        top: (0, getItemTopStyle_1.getItemTopStyle)(top, item.area[layoutId].anchorSide),
         left: `${left * 100}vw`
     };
 };
 exports.useItemPosition = useItemPosition;
-function getItemTopStyle(top, anchorSide) {
-    const defaultValue = `${top * 100}vw`;
-    if (!anchorSide)
-        return defaultValue;
-    switch (anchorSide) {
-        case sdk_1.AnchorSide.Top:
-            return defaultValue;
-        case sdk_1.AnchorSide.Center:
-            return `calc(50% + ${top * 100}vw)`;
-        case sdk_1.AnchorSide.Bottom:
-            return `calc(100% + ${top * 100}vw)`;
-    }
-}
-exports.getItemTopStyle = getItemTopStyle;

package/lib/components/useSectionColor.js

@@ -4,12 +4,14 @@ exports.useSectionColor = void 0;
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const react_1 = require("react");
 const sdk_1 = require("@cntrl-site/sdk");
-const DEFAULT_COLOR = 'transparent';
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 const useSectionColor = (colorData) => {
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     return (0, react_1.useMemo)(() => {
         const layoutColor = colorData[layoutId];
-        return !layoutColor ? DEFAULT_COLOR : sdk_1.CntrlColor.parse(layoutColor).toCss();
+        return sdk_1.CntrlColor.parse(!layoutColor
+            ? DEFAULT_COLOR
+            : layoutColor);
     }, []);
 };
 exports.useSectionColor = useSectionColor;

package/lib/utils/HoverStyles/HoverStyles.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHoverStyles = exports.getTransitions = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const getItemTopStyle_1 = require("../getItemTopStyle");
+const hoverTransformationMap = {
+    'width': (width) => `width: ${width * 100}vw !important;`,
+    'height': (height) => `height: ${height * 100}vw !important;`,
+    'top': (top, anchorSide) => `top: ${(0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide)} !important;`,
+    'left': (left) => `left: ${left * 100}vw !important;`,
+    'scale': (scale) => `transform: scale(${scale}) !important;`,
+    'angle': (angle) => `transform: rotate(${angle}deg) !important;`,
+    'opacity': (opacity) => `opacity: ${opacity} !important;`,
+    'radius': (radius) => `border-radius: ${radius * 100}vw !important;`,
+    'strokeWidth': (strokeWidth) => `border-width: ${strokeWidth * 100}vw !important;`,
+    'strokeColor': (strokeColor) => `border-color: ${sdk_1.CntrlColor.parse(strokeColor).toCss()} !important;`,
+    'fillColor': (fillColor) => `background-color: ${sdk_1.CntrlColor.parse(fillColor).toCss()} !important;`,
+};
+const 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'
+};
+function getTransitions(values, hover) {
+    if (!hover)
+        return 'unset';
+    const transitionValues = values.reduce((acc, valueName) => {
+        if (valueName in hover && hover[valueName] !== undefined) {
+            const hoverProperties = hover[valueName];
+            return [
+                ...acc,
+                `${CSSPropertyNameMap[valueName]} ${hoverProperties.duration}ms ${hoverProperties.timing} ${hoverProperties.delay}ms`
+            ];
+        }
+        return acc;
+    }, []);
+    if (!transitionValues.length)
+        return 'unset';
+    return transitionValues.join(', ');
+}
+exports.getTransitions = getTransitions;
+function getHoverStyles(values, hover, anchorSide) {
+    if (!hover)
+        return '';
+    const hoverValues = values.reduce((acc, valueName) => {
+        if (valueName in hover && hover[valueName] !== undefined) {
+            const hoverProperties = hover[valueName];
+            return [
+                ...acc,
+                hoverTransformationMap[valueName](hoverProperties.value, anchorSide)
+            ];
+        }
+        return acc;
+    }, []);
+    if (!hoverValues.length)
+        return '';
+    return hoverValues.join('\n');
+}
+exports.getHoverStyles = getHoverStyles;

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -100,6 +100,7 @@ class RichTextConverter {
                             continue;
                         for (const styleGroup of entitiesGroup.stylesGroup) {
                             const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
+                            const color = styleGroup.styles.find(s => s.name === 'COLOR');
                             if (lineHeight?.value) {
                                 currentLineHeight[item.layout] = lineHeight.value;
                             }
@@ -108,6 +109,15 @@ class RichTextConverter {
                   ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
                 }
               `);
+                            if (color) {
+                                styleRules[item.layout].push(`
+                @supports not (color: oklch(42% 0.3 90 / 1)) {
+                  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                    color: ${sdk_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
+                  }
+                }
+              `);
+                            }
                         }
                     }
                 }

package/lib/utils/getItemTopStyle.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getItemTopStyle = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+function getItemTopStyle(top, anchorSide) {
+    const defaultValue = `${top * 100}vw`;
+    if (!anchorSide)
+        return defaultValue;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Top:
+            return defaultValue;
+        case sdk_1.AnchorSide.Center:
+            return `calc(50% + ${top * 100}vw)`;
+        case sdk_1.AnchorSide.Bottom:
+            return `calc(100% + ${top * 100}vw)`;
+    }
+}
+exports.getItemTopStyle = getItemTopStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.12.8",
+  "version": "0.13.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -21,7 +21,8 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^1.1.5",
+    "@cntrl-site/sdk": "^1.1.6",
+    "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },
@@ -38,6 +39,7 @@
     "@types/jest": "^29.2.5",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",
+    "@types/vimeo__player": "^2.18.0",
     "jest": "^29.3.1",
     "ts-jest": "^29.0.3",
     "typescript": "^4.9.5"