@cntrl-site/sdk-nextjs 0.8.5 → 0.8.7

package/lib/components/Item.js

@@ -12,12 +12,13 @@ const VimeoEmbed_1 = require("./items/VimeoEmbed");
 const YoutubeEmbed_1 = require("./items/YoutubeEmbed");
 const CustomItem_1 = require("./items/CustomItem");
 const useCntrlContext_1 = require("../provider/useCntrlContext");
-const useItemAngle_1 = require("./useItemAngle");
 const useItemPosition_1 = require("./useItemPosition");
 const useItemDimensions_1 = require("./useItemDimensions");
 const useItemSticky_1 = require("./items/useItemSticky");
 const castObject_1 = require("../utils/castObject");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
+const useItemScale_1 = require("./useItemScale");
+const ScaleAnchorMap_1 = require("../utils/ScaleAnchorMap");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -30,7 +31,7 @@ const itemsMap = {
 const noop = () => null;
 const Item = ({ item }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const angle = (0, useItemAngle_1.useItemAngle)(item);
+    const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item);
     const position = (0, useItemPosition_1.useItemPosition)(item);
     const layout = (0, useCurrentLayout_1.useCurrentLayout)();
     const [ref, setRef] = (0, react_1.useState)(null);
@@ -57,7 +58,8 @@ const Item = ({ item }) => {
         setParentOffsetTop(offsetParent.offsetTop / window.innerWidth);
     }, [ref]);
     const styles = {
-        transform: `rotate(${angle}deg)`,
+        transform: `scale(${scale})`,
+        transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor],
         left: `${position.left * 100}vw`,
         width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
         height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
@@ -75,7 +77,8 @@ const Item = ({ item }) => {
               width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
               height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'unset'};
               z-index: ${area.zIndex};
-              transform: rotate(${area.angle}deg);
+              transform: scale(${scale});
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
             }
           `);
                 })}

package/lib/components/items/ImageItem.js

@@ -6,14 +6,17 @@ const react_1 = require("react");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
+const useItemAngle_1 = require("../useItemAngle");
 const ImageItem = ({ item }) => {
     const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item);
+    const angle = (0, useItemAngle_1.useItemAngle)(item);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [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}`,
+                        transform: `rotate(${angle}deg)`
                     }, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
          .image-wrapper-${item.id} {
             position: absolute;

package/lib/components/items/RectangleItem.js

@@ -6,15 +6,18 @@ const react_1 = require("react");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useRectangleItem_1 = require("./useRectangleItem");
+const useItemAngle_1 = require("../useItemAngle");
 const RectangleItem = ({ item }) => {
     const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item);
+    const angle = (0, useItemAngle_1.useItemAngle)(item);
     const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor).toCss(), [fillColor]);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [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: `rectangle-${item.id}`, style: {
                         backgroundColor: `${backgroundColor}`,
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
-                        borderColor: `${borderColor}`
+                        borderColor: `${borderColor}`,
+                        transform: `rotate(${angle}deg)`
                     } }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
          .rectangle-${item.id} {
             position: absolute;

package/lib/components/items/RichTextItem.js

@@ -8,9 +8,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 //@ts-ignore
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRichTextItem_1 = require("./useRichTextItem");
+const useItemAngle_1 = require("../useItemAngle");
 const RichTextItem = ({ item }) => {
     const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
+    const angle = (0, useItemAngle_1.useItemAngle)(item);
     const className = preset ? `cntrl-preset-${preset.id}` : undefined;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: className, children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: className, style: {
+                    transform: `rotate(${angle}deg)`
+                }, children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
 };
 exports.RichTextItem = RichTextItem;

package/lib/components/items/VideoItem.js

@@ -6,14 +6,17 @@ const react_1 = require("react");
 const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
+const useItemAngle_1 = require("../useItemAngle");
 const VideoItem = ({ item }) => {
     const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item);
+    const angle = (0, useItemAngle_1.useItemAngle)(item);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [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}`,
+                    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", { jsx: true, children: `
        .video-wrapper-${item.id} {
           position: absolute;

package/lib/components/items/VimeoEmbed.js

@@ -4,8 +4,10 @@ exports.VimeoEmbedItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
+const useItemAngle_1 = require("../useItemAngle");
 const VimeoEmbedItem = ({ item }) => {
     const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item);
+    const angle = (0, useItemAngle_1.useItemAngle)(item);
     const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
@@ -22,16 +24,14 @@ const VimeoEmbedItem = ({ item }) => {
     };
     const validUrl = getValidVimeoUrl(url);
     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`
+                    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", { jsx: true, children: `
         .embed-video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
           width: 100%;
           height: 100%;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
         }
         .embedVideo {
           width: 100%;

package/lib/components/items/YoutubeEmbed.js

@@ -5,9 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const LinkWrapper_1 = require("../LinkWrapper");
 const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
+const useItemAngle_1 = require("../useItemAngle");
 const YoutubeEmbedItem = ({ item }) => {
     const { autoplay, controls, url } = item.commonParams;
     const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item);
+    const angle = (0, useItemAngle_1.useItemAngle)(item);
     const getValidYoutubeUrl = (url) => {
         const newUrl = new URL(url);
         const id = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
@@ -19,16 +21,14 @@ const YoutubeEmbedItem = ({ item }) => {
     };
     const validUrl = getValidYoutubeUrl(url);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-youtube-video-wrapper-${item.id}`, style: {
-                    borderRadius: `${radius * 100}vw`
+                    borderRadius: `${radius * 100}vw`,
+                    transform: `rotate(${angle}deg)`
                 }, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedYoutubeVideo", src: validUrl || '', allow: "accelerometer; autoplay; allowfullscreen;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
         .embed-youtube-video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
           width: 100%;
           height: 100%;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
         }
         .embedYoutubeVideo {
           width: 100%;

package/lib/components/items/useItemSticky.js

@@ -11,7 +11,7 @@ const useItemSticky = (top, parentOffsetTop, item) => {
     const [adjustedTop, setAdjustedTop] = (0, react_1.useState)(top);
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
-    const sticky = (0, react_1.useMemo)(() => item.layoutParams[layoutId].sticky, [layoutId]);
+    const sticky = (0, react_1.useMemo)(() => item.sticky[layoutId], [layoutId]);
     const stickyManager = (0, react_1.useMemo)(() => new StickyManager_1.StickyManager(sticky), [sticky]);
     const handleSticky = (0, react_1.useCallback)((scroll) => {
         setIsFixed(stickyManager.getIsSticky(scroll));

package/lib/components/useItemScale.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemScale = void 0;
+const useKeyframeValue_1 = require("../common/useKeyframeValue");
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
+const useItemScale = (item) => {
+    const layout = (0, useCurrentLayout_1.useCurrentLayout)();
+    const { scale } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }), (animator, scroll, value) => animator.getScale(value, scroll));
+    const scaleAnchor = item.area[layout].scaleAnchor;
+    return { scale, scaleAnchor };
+};
+exports.useItemScale = useItemScale;

package/lib/utils/Animator/Animator.js

@@ -138,6 +138,21 @@ class Animator {
             opacity: rangeMap(pos, start.position, end.position, start.value.opacity, end.value.opacity, true)
         };
     }
+    getScale(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Scale];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                scale: keyframe.value.scale
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            scale: rangeMap(pos, start.position, end.position, start.value.scale, end.value.scale, true)
+        };
+    }
     getStartEnd(position, keyframes) {
         const index = (0, binSearchInsertAt_1.binSearchInsertAt)(keyframes, { position }, compare);
         const end = index === keyframes.length ? index - 1 : index;
@@ -168,7 +183,8 @@ function createKeyframesMap() {
         [sdk_1.KeyframeType.Color]: [],
         [sdk_1.KeyframeType.Rotation]: [],
         [sdk_1.KeyframeType.BorderColor]: [],
-        [sdk_1.KeyframeType.Opacity]: []
+        [sdk_1.KeyframeType.Opacity]: [],
+        [sdk_1.KeyframeType.Scale]: []
     };
 }
 function rangeMap(n, start1, stop1, start2, stop2, withinBounds = false) {

package/lib/utils/ScaleAnchorMap.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScaleAnchorMap = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+exports.ScaleAnchorMap = {
+    [sdk_1.ScaleAnchor.TopLeft]: 'top left',
+    [sdk_1.ScaleAnchor.TopCenter]: 'top center',
+    [sdk_1.ScaleAnchor.TopRight]: 'top right',
+    [sdk_1.ScaleAnchor.MiddleLeft]: 'center left',
+    [sdk_1.ScaleAnchor.MiddleCenter]: 'center',
+    [sdk_1.ScaleAnchor.MiddleRight]: 'center right',
+    [sdk_1.ScaleAnchor.BottomLeft]: 'bottom left',
+    [sdk_1.ScaleAnchor.BottomCenter]: 'bottom center',
+    [sdk_1.ScaleAnchor.BottomRight]: 'bottom right'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^0.7.0",
+    "@cntrl-site/sdk": "^0.7.2",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },

package/src/components/Item.tsx

@@ -14,12 +14,13 @@ import { VimeoEmbedItem } from './items/VimeoEmbed';
 import { YoutubeEmbedItem } from './items/YoutubeEmbed';
 import { CustomItem } from './items/CustomItem';
 import { useCntrlContext } from '../provider/useCntrlContext';
-import { useItemAngle } from './useItemAngle';
 import { useItemPosition } from './useItemPosition';
 import { useItemDimensions } from './useItemDimensions';
 import { getItemTopStyle, useItemSticky } from './items/useItemSticky';
 import { castObject } from '../utils/castObject';
 import { useCurrentLayout } from '../common/useCurrentLayout';
+import { useItemScale } from './useItemScale';
+import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
@@ -39,7 +40,7 @@ const noop = () => null;
 
 export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
   const { layouts } = useCntrlContext();
-  const angle = useItemAngle(item);
+  const { scale, scaleAnchor } = useItemScale(item);
   const position = useItemPosition(item);
   const layout = useCurrentLayout();
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
@@ -69,7 +70,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
   }, [ref]);
 
   const styles = {
-    transform: `rotate(${angle}deg)`,
+    transform: `scale(${scale})`,
+    transformOrigin: ScaleAnchorMap[scaleAnchor],
     left: `${position.left * 100}vw`,
     width: `${sizingAxis.x === SizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
     height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
@@ -96,7 +98,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
               width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
               height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'unset'};
               z-index: ${area.zIndex};
-              transform: rotate(${area.angle}deg);
+              transform: scale(${scale});
+              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
             }
           `);
         })}

package/src/components/items/ImageItem.tsx

@@ -3,9 +3,11 @@ import { CntrlColor, TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
+import { useItemAngle } from '../useItemAngle';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
   const { radius, strokeWidth, opacity, strokeColor } = useFileItem(item);
+  const angle = useItemAngle(item);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
   return (
     <LinkWrapper url={item.link?.url}>
@@ -15,7 +17,8 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,
             opacity: `${opacity}`,
-            borderColor: `${borderColor}`
+            borderColor: `${borderColor}`,
+            transform: `rotate(${angle}deg)`
           }}
         >
           <img className="image" src={item.commonParams.url} />

package/src/components/items/RectangleItem.tsx

@@ -3,9 +3,11 @@ import { TRectangleItem, CntrlColor } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useRectangleItem } from './useRectangleItem';
+import { useItemAngle } from '../useItemAngle';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
   const { fillColor, radius, strokeWidth, strokeColor } = useRectangleItem(item);
+  const angle = useItemAngle(item);
   const backgroundColor = useMemo(() => CntrlColor.parse(fillColor).toCss(), [fillColor]);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
 
@@ -17,7 +19,8 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
             backgroundColor: `${backgroundColor}`,
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,
-            borderColor: `${borderColor}`
+            borderColor: `${borderColor}`,
+            transform: `rotate(${angle}deg)`
           }}
         />
         <style jsx>{`

package/src/components/items/RichTextItem.tsx

@@ -4,13 +4,22 @@ import { TRichTextItem } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';
+import { useItemAngle } from '../useItemAngle';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item }) => {
   const [content, styles, preset] = useRichTextItem(item);
+  const angle = useItemAngle(item);
   const className = preset ? `cntrl-preset-${preset.id}` : undefined;
   return (
     <>
-      <div className={className}>{content}</div>
+      <div
+        className={className}
+        style={{
+          transform: `rotate(${angle}deg)`
+        }}
+      >
+        {content}
+      </div>
       <JSXStyle id={item.id}>
         {styles}
       </JSXStyle>

package/src/components/items/VideoItem.tsx

@@ -3,9 +3,11 @@ import { CntrlColor, TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
+import { useItemAngle } from '../useItemAngle';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
   const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item);
+  const angle = useItemAngle(item);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
   return (
     <LinkWrapper url={item.link?.url}>
@@ -14,7 +16,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
            borderRadius: `${radius * 100}vw`,
            borderWidth: `${strokeWidth * 100}vw`,
            opacity: `${opacity}`,
-           borderColor: `${borderColor}`
+           borderColor: `${borderColor}`,
+           transform: `rotate(${angle}deg)`
          }}
       >
         <video autoPlay muted loop playsInline className="video">

package/src/components/items/VimeoEmbed.tsx

@@ -3,9 +3,11 @@ import { TVimeoEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
+import { useItemAngle } from '../useItemAngle';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
   const { radius } = useEmbedVideoItem(item);
+  const angle = useItemAngle(item);
   const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
@@ -27,7 +29,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
     <LinkWrapper url={item.link?.url}>
         <div className={`embed-video-wrapper-${item.id}`}
           style={{
-            borderRadius: `${radius * 100}vw`
+            borderRadius: `${radius * 100}vw`,
+            transform: `rotate(${angle}deg)`
           }}
         >
           <iframe
@@ -43,9 +46,6 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
           overflow: hidden;
           width: 100%;
           height: 100%;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
         }
         .embedVideo {
           width: 100%;

package/src/components/items/YoutubeEmbed.tsx

@@ -4,10 +4,12 @@ import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
+import { useItemAngle } from '../useItemAngle';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) => {
   const { autoplay, controls, url } = item.commonParams;
   const { radius } = useEmbedVideoItem(item);
+  const angle = useItemAngle(item);
 
   const getValidYoutubeUrl = (url: string): string => {
     const newUrl = new URL(url);
@@ -25,7 +27,8 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) =>
     <LinkWrapper url={item.link?.url}>
       <div className={`embed-youtube-video-wrapper-${item.id}`}
          style={{
-           borderRadius: `${radius * 100}vw`
+           borderRadius: `${radius * 100}vw`,
+           transform: `rotate(${angle}deg)`
          }}
       >
         <iframe
@@ -41,9 +44,6 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) =>
           overflow: hidden;
           width: 100%;
           height: 100%;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
         }
         .embedYoutubeVideo {
           width: 100%;

package/src/components/items/useItemSticky.ts

@@ -9,7 +9,7 @@ export const useItemSticky = (top: number, parentOffsetTop: number, item: TArtic
   const [adjustedTop, setAdjustedTop] = useState(top);
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutId = useCurrentLayout();
-  const sticky = useMemo(() => item.layoutParams[layoutId].sticky, [layoutId]);
+  const sticky = useMemo(() => item.sticky[layoutId], [layoutId]);
   const stickyManager = useMemo(() => new StickyManager(sticky), [sticky]);
 
   const handleSticky = useCallback((scroll: number) => {

package/src/components/useItemScale.ts

@@ -0,0 +1,15 @@
+import { TArticleItemAny } from '@cntrl-site/sdk';
+import { useKeyframeValue } from '../common/useKeyframeValue';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+
+export const useItemScale = (item: TArticleItemAny) => {
+  const layout = useCurrentLayout();
+  const { scale } = useKeyframeValue(
+    item,
+    (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }),
+    (animator, scroll, value) => animator.getScale(value, scroll)
+  );
+  const scaleAnchor = item.area[layout].scaleAnchor;
+
+  return { scale, scaleAnchor };
+};

package/src/utils/Animator/Animator.ts

@@ -178,6 +178,24 @@ export class Animator {
     };
   }
 
+  getScale(
+    values: TKeyframeValueMap[KeyframeType.Scale],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Scale] {
+    const keyframes = this.keyframesMap[KeyframeType.Scale];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        scale: keyframe.value.scale
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Scale>(pos, keyframes);
+    return {
+      scale: rangeMap(pos, start.position, end.position, start.value.scale, end.value.scale, true)
+    };
+  }
+
   getStartEnd<T extends KeyframeType>(position: number, keyframes: AnimationData<T>[]): PositionKeyframes<T> {
     const index = binSearchInsertAt(keyframes, { position }, compare);
     const end = index === keyframes.length ? index - 1 : index;
@@ -215,7 +233,8 @@ function createKeyframesMap(): KeyframesMap {
     [KeyframeType.Color]: [],
     [KeyframeType.Rotation]: [],
     [KeyframeType.BorderColor]: [],
-    [KeyframeType.Opacity]: []
+    [KeyframeType.Opacity]: [],
+    [KeyframeType.Scale]: []
   };
 }
 

package/src/utils/ScaleAnchorMap.ts

@@ -0,0 +1,13 @@
+import { ScaleAnchor } from '@cntrl-site/sdk';
+
+export const ScaleAnchorMap = {
+  [ScaleAnchor.TopLeft]: 'top left',
+  [ScaleAnchor.TopCenter]: 'top center',
+  [ScaleAnchor.TopRight]: 'top right',
+  [ScaleAnchor.MiddleLeft]: 'center left',
+  [ScaleAnchor.MiddleCenter]: 'center',
+  [ScaleAnchor.MiddleRight]: 'center right',
+  [ScaleAnchor.BottomLeft]: 'bottom left',
+  [ScaleAnchor.BottomCenter]: 'bottom center',
+  [ScaleAnchor.BottomRight]: 'bottom right'
+};

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="jsx" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>