@cntrl-site/sdk-nextjs 1.4.3 → 1.5.0

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

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

@@ -98,6 +98,20 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
             vimeoPlayer.pause();
         }
     }, [isInteractive, onVisibilityChange, vimeoPlayer]);
+    (0, react_1.useEffect)(() => {
+        if (!vimeoPlayer || !interactionCtrl)
+            return;
+        interactionCtrl.setActionReceiver((type) => {
+            switch (type) {
+                case 'play':
+                    vimeoPlayer.play();
+                    break;
+                case 'pause':
+                    vimeoPlayer.pause();
+                    break;
+            }
+        });
+    }, [interactionCtrl, vimeoPlayer]);
     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-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;

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

@@ -96,6 +96,20 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
             player.pauseVideo();
         }
     }, [isInteractive, onVisibilityChange, player]);
+    (0, react_1.useEffect)(() => {
+        if (!player || !interactionCtrl)
+            return;
+        interactionCtrl.setActionReceiver((type) => {
+            switch (type) {
+                case 'play':
+                    player.playVideo();
+                    break;
+                case 'pause':
+                    player.pauseVideo();
+                    break;
+            }
+        });
+    }, [interactionCtrl, 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

@@ -78,7 +78,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
         }
         const itemArticleOffset = sectionTop / window.innerWidth + stickyTop;
         const maxStickyTo = articleHeight - itemArticleOffset - height;
-        const end = sticky.to
+        const end = sticky.to !== undefined
             ? Math.min(maxStickyTo, sticky.to)
             : articleHeight - itemArticleOffset - height;
         const wrapperHeight = end - sticky.from + height;

package/lib/interactions/InteractionsRegistry.js

@@ -109,7 +109,7 @@ class InteractionsRegistry {
         return available;
     }
     notifyTrigger(itemId, triggerType) {
-        var _a;
+        var _a, _b;
         const timestamp = Date.now();
         for (const interaction of this.interactions) {
             const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
@@ -122,6 +122,14 @@ class InteractionsRegistry {
             const isNewStateActive = matchingTrigger.to === activeStateId;
             this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
             const transitioningItems = (_a = this.stateItemsIdsMap[activeStateId]) !== null && _a !== void 0 ? _a : [];
+            const state = interaction.states.find((state) => state.id === matchingTrigger.to);
+            const actions = (_b = state === null || state === void 0 ? void 0 : state.actions) !== null && _b !== void 0 ? _b : [];
+            for (const action of actions) {
+                const ctrl = this.ctrls.get(action.itemId);
+                if (!ctrl)
+                    continue;
+                ctrl.receiveAction(action.type);
+            }
             this.itemsStages = this.itemsStages.map((stage) => {
                 if (stage.interactionId !== interaction.id)
                     return stage;

package/lib/interactions/ItemInteractionCtrl.js

@@ -58,6 +58,13 @@ class ItemInteractionController {
     sendTrigger(type) {
         this.registry.notifyTrigger(this.itemId, type);
     }
+    receiveAction(type) {
+        var _a;
+        (_a = this.actionReceiver) === null || _a === void 0 ? void 0 : _a.call(this, type);
+    }
+    setActionReceiver(action) {
+        this.actionReceiver = action;
+    }
     receiveChange() {
         this.onChange();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.3.2",
-    "@cntrl-site/sdk": "^1.16.1",
+    "@cntrl-site/sdk": "^1.17.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

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

@@ -92,6 +92,20 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     }
   }, [isInteractive, onVisibilityChange, vimeoPlayer]);
 
+  useEffect(() => {
+    if (!vimeoPlayer || !interactionCtrl) return;
+    interactionCtrl.setActionReceiver((type) => {
+      switch(type) {
+        case 'play':
+          vimeoPlayer.play();
+          break;
+        case 'pause':
+          vimeoPlayer.pause();
+          break;
+      }
+    });
+  }, [interactionCtrl, vimeoPlayer]);
+
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div

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

@@ -91,6 +91,20 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
     }
   }, [isInteractive, onVisibilityChange, player]);
 
+  useEffect(() => {
+    if (!player || !interactionCtrl) return;
+    interactionCtrl.setActionReceiver((type) => {
+      switch(type) {
+        case 'play':
+          player.playVideo();
+          break;
+        case 'pause':
+          player.pauseVideo();
+          break;
+      }
+    });
+  }, [interactionCtrl, player]);
+
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div

package/src/components/items/Item.tsx

@@ -107,7 +107,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
     }
     const itemArticleOffset = sectionTop / window.innerWidth + stickyTop;
     const maxStickyTo = articleHeight - itemArticleOffset - height;
-    const end = sticky.to
+    const end = sticky.to !== undefined
       ? Math.min(maxStickyTo, sticky.to)
       : articleHeight - itemArticleOffset - height;
     const wrapperHeight = end - sticky.from + height;

package/src/interactions/InteractionsRegistry.ts

@@ -121,6 +121,13 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       const isNewStateActive = matchingTrigger.to === activeStateId;
       this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
       const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
+      const state = interaction.states.find((state) => state.id === matchingTrigger.to);
+      const actions = state?.actions ?? [];
+      for (const action of actions) {
+        const ctrl = this.ctrls.get(action.itemId);
+        if (!ctrl) continue;
+        ctrl.receiveAction(action.type);
+      }
       this.itemsStages = this.itemsStages.map((stage) => {
         if (stage.interactionId !== interaction.id) return stage;
         return {
@@ -166,8 +173,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     });
     this.ctrls.get(itemId)?.receiveChange();
   }
-
-
+  
   private getCurrentStateByInteractionId(id: InteractionId): string {
     let state;
     for (const interactionId of Object.keys(this.interactionStateMap)) {

package/src/interactions/ItemInteractionCtrl.ts

@@ -5,10 +5,11 @@ import { InteractionTrigger } from '@cntrl-site/sdk';
 
 export class ItemInteractionController implements ItemInteractionCtrl {
   private transitionsInProgress: Set<string> = new Set();
+  private actionReceiver: ((type: 'play' | 'pause') => void) | undefined;
   constructor(
     private itemId: string,
     private registry: InteractionsRegistryPort,
-    private onChange: () => void
+    private onChange: () => void,
   ) {
     this.registry.register(itemId, this);
   }
@@ -37,6 +38,14 @@ export class ItemInteractionController implements ItemInteractionCtrl {
     this.registry.notifyTrigger(this.itemId, type);
   }
 
+  receiveAction(type: 'play' | 'pause') {
+    this.actionReceiver?.(type);
+  }
+
+  setActionReceiver(action: (type: 'play' | 'pause') => void) {
+    this.actionReceiver = action;
+  }
+
   handleTransitionStart = (types: string[]) => {
     this.transitionsInProgress.clear();
     for (const type of types) {

package/src/interactions/types.ts

@@ -7,6 +7,8 @@ export interface ItemInteractionCtrl {
   handleTransitionEnd?: (styleKey: string) => void;
   handleTransitionStart?: (styleKeys: string[]) => void;
   receiveChange: () => void;
+  receiveAction: (type: 'play' | 'pause') => void;
+  setActionReceiver: (action: (type: 'play' | 'pause') => void) => void;
 }
 
 export interface InteractionsRegistryPort {