@cntrl-site/sdk-nextjs 1.1.1 → 1.1.3

package/lib/components/Item.js

@@ -53,7 +53,7 @@ const RichTextWrapper = ({ isRichText, children }) => {
 };
 const noop = () => null;
 const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const itemWrapperRef = (0, react_1.useRef)(null);
     const itemInnerRef = (0, react_1.useRef)(null);
     const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
@@ -119,11 +119,12 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const width = ((_d = (_c = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : dimensions === null || dimensions === void 0 ? void 0 : dimensions.width);
     const height = ((_f = (_e = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : dimensions === null || dimensions === void 0 ? void 0 : dimensions.height);
     const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
+    const hasClickTriggers = (_j = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _j !== void 0 ? _j : 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({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (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: {
+        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : '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',
@@ -140,8 +141,8 @@ 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: (_k = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _k !== void 0 ? _k : 'none', pointerEvents: allowPointerEvents ? 'auto' : 'none' }), 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], exemplary) => {
+                        } : {})), (scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {})), { transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }), 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 = parseSizing(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
                     const scaleAnchor = area.scaleAnchor;

package/lib/components/items/VimeoEmbed.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -61,6 +70,18 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
             }
         });
     }, [vimeoPlayer, imgRef]);
+    const handleClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!vimeoPlayer)
+            return;
+        const isPaused = yield vimeoPlayer.getPaused();
+        if (isPaused) {
+            vimeoPlayer.play();
+            setIsCoverVisible(false);
+        }
+        else {
+            vimeoPlayer.pause();
+        }
+    });
     const onCoverClick = () => {
         if (!vimeoPlayer || !imgRef)
             return;
@@ -88,7 +109,13 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                             width: '100%',
                             top: '0',
                             left: '0'
-                        }, 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: `
+                        }, alt: "Cover img" })), (!item.commonParams.controls && play === 'on-click') && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
+                            position: 'absolute',
+                            height: '100%',
+                            width: '100%',
+                            top: '0',
+                            left: '0'
+                        } })), (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%;

package/lib/interactions/InteractionsRegistry.js

@@ -93,6 +93,21 @@ class InteractionsRegistry {
         }
         return itemStyles;
     }
+    getItemAvailableTriggers(itemId) {
+        const available = new Set();
+        const activeStates = Object.values(this.interactionStateMap);
+        for (const interaction of this.interactions) {
+            const { triggers } = interaction;
+            for (const trigger of triggers) {
+                if (trigger.itemId !== itemId)
+                    continue;
+                if (activeStates.some((stateId) => trigger.from === stateId)) {
+                    available.add(trigger.type);
+                }
+            }
+        }
+        return available;
+    }
     notifyTrigger(itemId, triggerType) {
         var _a;
         const timestamp = Date.now();
@@ -120,7 +135,11 @@ class InteractionsRegistry {
                     updated: timestamp
                 };
             });
-            this.notifyItemCtrlsChange(transitioningItems);
+            const itemsToNotify = new Set(transitioningItems);
+            for (const trigger of interaction.triggers) {
+                itemsToNotify.add(trigger.itemId);
+            }
+            this.notifyItemCtrlsChange(Array.from(itemsToNotify));
             this.notifyTransitionStartForItems(transitioningItems, activeStateId);
         }
     }

package/lib/interactions/ItemInteractionCtrl.js

@@ -51,6 +51,10 @@ class ItemInteractionController {
             transition
         };
     }
+    getHasTrigger(itemId, triggerType) {
+        const triggers = this.registry.getItemAvailableTriggers(itemId);
+        return triggers.has(triggerType);
+    }
     sendTrigger(type) {
         this.registry.notifyTrigger(this.itemId, type);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/components/Item.tsx

@@ -161,6 +161,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const width = (innerStateProps?.styles?.width ?? dimensions?.width) as number | undefined;
   const height = (innerStateProps?.styles?.height ?? dimensions?.height) as number | undefined;
   const scale = innerStateProps?.styles?.scale ?? itemScale;
+  const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
   return (
     <div
       className={`item-wrapper-${item.id}`}
@@ -209,6 +210,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
                 height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}` } : {}),
               ...(scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {}),
               transition: innerStateProps?.transition ?? 'none',
+              cursor: hasClickTriggers ? 'pointer' : 'unset',
               pointerEvents: allowPointerEvents ? 'auto' : 'none'
             }}
           >
@@ -224,7 +226,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
         </RichTextWrapper>
       </div>
       <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams], exemplary) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
           const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
           const scaleAnchor = area.scaleAnchor as AreaAnchor;

package/src/components/items/VimeoEmbed.tsx

@@ -61,6 +61,17 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     });
   }, [vimeoPlayer, imgRef]);
 
+  const handleClick = async () => {
+    if (!vimeoPlayer) return;
+    const isPaused = await vimeoPlayer.getPaused();
+    if (isPaused) {
+      vimeoPlayer.play();
+      setIsCoverVisible(false);
+    } else {
+      vimeoPlayer.pause();
+    }
+  };
+
   const onCoverClick = () => {
     if (!vimeoPlayer || !imgRef) return;
     vimeoPlayer!.play();
@@ -109,6 +120,19 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
             alt="Cover img"
           />
         )}
+        {/* ↓ This is necessary to track clicks on an iframe. */}
+        {(!item.commonParams.controls && play === 'on-click') && (
+          <div
+            onClick={handleClick}
+            style={{
+              position: 'absolute',
+              height: '100%',
+              width: '100%',
+              top: '0',
+              left: '0'
+            }}
+          />
+        )}
         <iframe
           ref={setIframeRef}
           className={`embed-video`}

package/src/interactions/InteractionsRegistry.ts

@@ -92,6 +92,21 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     return itemStyles;
   }
 
+  getItemAvailableTriggers(itemId: string): Set<InteractionTrigger['type']> {
+    const available = new Set<InteractionTrigger['type']>();
+    const activeStates = Object.values(this.interactionStateMap);
+    for (const interaction of this.interactions) {
+      const { triggers } = interaction;
+      for (const trigger of triggers) {
+        if (trigger.itemId !== itemId) continue;
+        if (activeStates.some((stateId) => trigger.from === stateId)) {
+          available.add(trigger.type);
+        }
+      }
+    }
+    return available;
+  }
+
   notifyTrigger(itemId: string, triggerType: TriggerType): void {
     const timestamp = Date.now();
     for (const interaction of this.interactions) {
@@ -118,7 +133,11 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
           updated: timestamp
         };
       });
-      this.notifyItemCtrlsChange(transitioningItems);
+      const itemsToNotify = new Set<ItemId>(transitioningItems);
+      for (const trigger of interaction.triggers) {
+        itemsToNotify.add(trigger.itemId);
+      }
+      this.notifyItemCtrlsChange(Array.from(itemsToNotify));
       this.notifyTransitionStartForItems(transitioningItems, activeStateId);
     }
   }

package/src/interactions/ItemInteractionCtrl.ts

@@ -1,6 +1,7 @@
 import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
 import { getTransition } from './getTransition';
 import { getStyleKeysFromCSSProperty } from './CSSPropertyNameMap';
+import { InteractionTrigger } from '@cntrl-site/sdk';
 
 export class ItemInteractionController implements ItemInteractionCtrl {
   private transitionsInProgress: Set<string> = new Set();
@@ -27,6 +28,11 @@ export class ItemInteractionController implements ItemInteractionCtrl {
     };
   }
 
+  getHasTrigger(itemId: string, triggerType: InteractionTrigger['type']): boolean {
+    const triggers = this.registry.getItemAvailableTriggers(itemId);
+    return triggers.has(triggerType);
+  }
+
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out') {
     this.registry.notifyTrigger(this.itemId, type);
   }

package/src/interactions/types.ts

@@ -1,7 +1,8 @@
-import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
+import { ArticleItemType, InteractionTrigger, ItemState } from '@cntrl-site/sdk';
 
 export interface ItemInteractionCtrl {
   getState(keys: string[]): StateCSSInfo;
+  getHasTrigger(itemId: string, triggerType: InteractionTrigger['type']): boolean;
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
   handleTransitionEnd?: (styleKey: string) => void;
   handleTransitionStart?: (styleKeys: string[]) => void;
@@ -11,6 +12,7 @@ export interface ItemInteractionCtrl {
 export interface InteractionsRegistryPort {
   register(itemId: string, ctrl: ItemInteractionCtrl): void;
   getStatePropsForItem(itemId: string): StateProps;
+  getItemAvailableTriggers(itemId: string): Set<InteractionTrigger['type']>;
   notifyTrigger(itemId: string, type: TriggerType): void;
   notifyTransitionEnd(itemId: string): void;
 }