@cntrl-site/sdk-nextjs 1.3.2 → 1.3.4

package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -90,6 +90,12 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
             setIsCoverVisible(true);
         }
     }, []);
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+        if (!isInteractive && player) {
+            player.pauseVideo();
+        }
+    }, [isInteractive, onVisibilityChange, player]);
     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;

package/lib/components/items/Item.js

@@ -33,7 +33,7 @@ const stickyFix = `
 `;
 const noop = () => null;
 const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const itemWrapperRef = (0, react_1.useRef)(null);
     const itemInnerRef = (0, react_1.useRef)(null);
     const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
@@ -58,7 +58,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
         height: (_d = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _d === void 0 ? void 0 : _d.height
     });
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
-    const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionHeight, sectionId);
+    const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionId, (_e = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _e === void 0 ? void 0 : _e.top);
     const layoutValues = [item.area, item.hidden];
     layoutValues.push(item.sticky);
     layoutValues.push(sectionHeight);
@@ -89,13 +89,13 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const anchorSide = layout ? item.area[layout].anchorSide : sdk_1.AnchorSide.Top;
     const positionType = layout ? item.area[layout].positionType : sdk_1.PositionType.ScreenBased;
     const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
-    const scale = (_f = (_e = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _e === void 0 ? void 0 : _e.scale) !== null && _f !== void 0 ? _f : itemScale;
-    const hasClickTriggers = (_g = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _g !== void 0 ? _g : false;
+    const scale = (_g = (_f = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _f === void 0 ? void 0 : _f.scale) !== null && _g !== void 0 ? _g : itemScale;
+    const hasClickTriggers = (_h = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _h !== void 0 ? _h : false;
     return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, onTransitionEnd: (e) => {
             var _a;
             e.stopPropagation();
             (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
-        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left ? { left: `${left * 100}vw` } : {})), (top ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_h = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _h !== void 0 ? _h : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
+        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left ? { left: `${left * 100}vw` } : {})), (top ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_j = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _j !== void 0 ? _j : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
                     opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
                     top: `${stickyTop * 100}vw`,
                     height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
@@ -106,7 +106,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                                     : `${width * 100}vw`
                                 : 'max-content'}`,
                             height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
-                        } : {})), (scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {})), { transition: (_j = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _j !== void 0 ? _j : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        } : {})), (scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {})), { transition: (_k = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;

package/lib/components/items/useStickyItemTop.js

@@ -4,7 +4,7 @@ exports.useStickyItemTop = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useLayoutContext_1 = require("../useLayoutContext");
-function useStickyItemTop(item, sectionHeightMap, sectionId) {
+function useStickyItemTop(item, sectionId, stateTop) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const data = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Position, (item, layoutId) => {
         if (!layoutId)
@@ -13,6 +13,6 @@ function useStickyItemTop(item, sectionHeightMap, sectionId) {
     }, (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined, sectionId, [layoutId]);
     const top = data ? data.top : layoutId ? item.area[layoutId].top : 0;
     const sticky = layoutId ? item.sticky[layoutId] : undefined;
-    return sticky ? top - sticky.from : 0;
+    return sticky ? (stateTop !== null && stateTop !== void 0 ? stateTop : top) - sticky.from : 0;
 }
 exports.useStickyItemTop = useStickyItemTop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx

@@ -84,6 +84,13 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
     }
   }, []);
 
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+    if (!isInteractive && player) {
+      player.pauseVideo();
+    }
+  }, [isInteractive, onVisibilityChange, player]);
+
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div

package/src/components/items/Item.tsx

@@ -84,7 +84,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
     height: innerStateProps?.styles?.height as number
   });
   const sectionHeight = useSectionHeightData(sectionId);
-  const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
+  const stickyTop = useStickyItemTop(item, sectionId, wrapperStateProps?.styles?.top as number);
   const layoutValues: Record<string, any>[] = [item.area, item.hidden];
   layoutValues.push(item.sticky);
   layoutValues.push(sectionHeight);

package/src/components/items/useStickyItemTop.ts

@@ -2,7 +2,7 @@ import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useLayoutContext } from '../useLayoutContext';
 
-export function useStickyItemTop(item: ItemAny, sectionHeightMap: Record<string, string>, sectionId: string) {
+  export function useStickyItemTop(item: ItemAny, sectionId: string, stateTop?: number) {
   const layoutId = useLayoutContext();
   const data = useKeyframeValue<{ top: number; left: number } | undefined>(
     item,
@@ -17,5 +17,5 @@ export function useStickyItemTop(item: ItemAny, sectionHeightMap: Record<string,
   );
   const top = data ? data.top : layoutId ? item.area[layoutId].top : 0;
   const sticky = layoutId ? item.sticky[layoutId] : undefined;
-  return sticky ? top - sticky.from : 0;
+  return sticky ? (stateTop ?? top) - sticky.from : 0;
 }

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>