@cntrl-site/sdk-nextjs 0.29.0 → 0.29.2

package/lib/components/Item.js

@@ -39,13 +39,17 @@ const itemsMap = {
     [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem,
     [sdk_1.ArticleItemType.Group]: GroupItem_1.GroupItem
 };
+const stickyFix = `
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+`;
 const RichTextWrapper = ({ isRichText, children }) => {
     if (!isRichText)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
     return ((0, jsx_runtime_1.jsx)("div", { style: { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }, children: children }));
 };
 const noop = () => null;
-const Item = ({ item, sectionId, articleHeight }) => {
+const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
     const itemWrapperRef = (0, react_1.useRef)(null);
     const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const id = (0, react_1.useId)();
@@ -131,8 +135,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
             .item-wrapper-${item.id} {
               position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
               z-index: ${area.zIndex};
-              -webkit-transform: translate3d(0, 0, 0);
-              transform: translate3d(0, 0, 0);
+              ${!isInGroup && stickyFix}
               pointer-events: none;
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
               top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};

package/lib/components/items/GroupItem.js

@@ -27,7 +27,7 @@ const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
     return ((0, jsx_runtime_1.jsx)(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)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: {
                         opacity,
                         transform: `rotate(${angle}deg)`,
-                    }, children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                    }, children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;
           width: 100%;

package/lib/components/items/VimeoEmbed.js

@@ -19,7 +19,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     var _a, _b;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const { radius, blur, opacity } = (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);
@@ -41,6 +41,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     };
     const validUrl = getValidVimeoUrl(url);
     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: `embed-video-wrapper-${item.id}`, ref: setRef, style: {
+                    opacity: `${opacity}`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
                 }, onMouseEnter: () => {

package/lib/components/items/YoutubeEmbed.js

@@ -21,7 +21,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { play, controls, url } = item.commonParams;
-    const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const { radius, blur, opacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
@@ -65,6 +65,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
                         return;
                     player.pauseVideo();
                 }, style: {
+                    opacity: `${opacity}`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
                 }, children: (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: { borderRadius: `${radius * 100}vw` } }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `

package/lib/components/items/useEmbedVideoItem.js

@@ -17,6 +17,12 @@ const useEmbedVideoItem = (item, sectionId) => {
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
     }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
-    return { radius, blur };
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 1;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
+    return { radius, blur, opacity };
 };
 exports.useEmbedVideoItem = useEmbedVideoItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.29.0",
+  "version": "0.29.2",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
-    "@cntrl-site/sdk": "^1.10.0",
+    "@cntrl-site/sdk": "^1.11.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/components/Item.tsx

@@ -39,6 +39,7 @@ export interface ItemProps<I extends ItemAny> {
 
 export interface ItemWrapperProps extends ItemProps<ItemAny> {
   articleHeight: number;
+  isInGroup?: boolean;
 }
 
 const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
@@ -56,6 +57,11 @@ interface RTWrapperProps {
   isRichText: boolean;
 }
 
+const stickyFix = `
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+`;
+
 const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, children }) => {
   if (!isRichText) return <>{children}</>;
   return (
@@ -67,7 +73,7 @@ const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, ch
 
 const noop = () => null;
 
-export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) => {
+export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isInGroup = false }) => {
   const itemWrapperRef = useRef<HTMLDivElement | null>(null);
   const rectObserver = useContext(ArticleRectContext);
   const id = useId();
@@ -177,8 +183,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
             .item-wrapper-${item.id} {
               position: ${area.positionType === PositionType.ScreenBased ? 'fixed': 'absolute'};
               z-index: ${area.zIndex};
-              -webkit-transform: translate3d(0, 0, 0);
-              transform: translate3d(0, 0, 0);
+              ${!isInGroup && stickyFix}
               pointer-events: none;
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
               top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};

package/src/components/items/GroupItem.tsx

@@ -35,6 +35,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
               key={item.id}
               sectionId={sectionId}
               articleHeight={articleHeight}
+              isInGroup
             />
           ))}
         </div>

package/src/components/items/VimeoEmbed.tsx

@@ -13,7 +13,7 @@ import { useRegisterResize } from "../../common/useRegisterResize";
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
-  const { radius, blur } = useEmbedVideoItem(item, sectionId);
+  const { radius, blur, opacity } = useEmbedVideoItem(item, sectionId);
   const [iframeRef, setIframeRef] = useState<HTMLIFrameElement | null>(null);
   const vimeoPlayer = useMemo(() => iframeRef ? new Player(iframeRef) : undefined, [iframeRef]);
   const angle = useItemAngle(item, sectionId);
@@ -42,6 +42,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         className={`embed-video-wrapper-${item.id}`}
         ref={setRef}
         style={{
+          opacity: `${opacity}`,
           transform: `rotate(${angle}deg)`,
           filter: `blur(${blur * 100}vw)`
         }}

package/src/components/items/YoutubeEmbed.tsx

@@ -16,7 +16,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const id = useId();
   const { layouts } = useCntrlContext();
   const { play, controls, url } = item.commonParams;
-  const { radius, blur } = useEmbedVideoItem(item, sectionId);
+  const { radius, blur, opacity } = useEmbedVideoItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const YT = useYouTubeIframeApi();
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
@@ -64,6 +64,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
           player.pauseVideo();
         }}
         style={{
+          opacity: `${opacity}`,
           transform: `rotate(${angle}deg)`,
           filter: `blur(${blur * 100}vw)`
         }}

package/src/components/items/useEmbedVideoItem.ts

@@ -27,5 +27,17 @@ export const useEmbedVideoItem = (item: VimeoEmbedItem | YoutubeEmbedItem, secti
     [layoutId]
   );
 
-  return { radius, blur };
+  const opacity = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 1;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    },
+    (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
+    sectionId,
+    [layoutId]
+  );
+
+  return { radius, blur, opacity };
 };