@cntrl-site/sdk-nextjs 1.8.9-alpha.2 → 1.8.9-alpha.4

package/lib/interactions/InteractionsRegistry.js

@@ -104,13 +104,61 @@ class InteractionsRegistry {
         }
         return available;
     }
+    notifyLoad() {
+        var _a, _b;
+        const timestamp = Date.now();
+        for (const interaction of this.interactions) {
+            const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
+            const matchingTrigger = interaction.triggers.find(trigger => 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId);
+            if (!matchingTrigger)
+                continue;
+            const activeStateId = this.getActiveInteractionState(interaction.id);
+            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;
+                return {
+                    itemId: stage.itemId,
+                    interactionId: stage.interactionId,
+                    type: 'transitioning',
+                    from: stage.type === 'transitioning' ? stage.to : stage.stateId,
+                    to: matchingTrigger.to,
+                    direction: isNewStateActive ? 'in' : 'out',
+                    updated: timestamp
+                };
+            });
+            const itemsToNotify = new Set(transitioningItems);
+            for (const trigger of interaction.triggers) {
+                if (!('itemId' in trigger))
+                    continue;
+                itemsToNotify.add(trigger.itemId);
+            }
+            this.notifyItemCtrlsChange(Array.from(itemsToNotify));
+            this.notifyTransitionStartForItems(transitioningItems, activeStateId);
+        }
+    }
     notifyScrollTrigger(position) {
         var _a, _b;
         const timestamp = Date.now();
         for (const interaction of this.interactions) {
             const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-            const matchingTrigger = interaction.triggers.find((trigger) => 'position' in trigger && (trigger.position < position ? trigger.from : trigger.to) === currentStateId // refactor
-            );
+            const matchingTrigger = interaction.triggers.find((trigger) => {
+                if (!('position' in trigger) || trigger.position === 0)
+                    return false;
+                const isScrollingDown = trigger.position < position;
+                const relevantState = isScrollingDown ? trigger.from : trigger.to;
+                return relevantState === currentStateId;
+            });
             if (!matchingTrigger || !('position' in matchingTrigger))
                 continue;
             const activeStateId = this.getActiveInteractionState(interaction.id);

package/lib/provider/InteractionsContext.js

@@ -19,11 +19,21 @@ const InteractionsProvider = ({ article, children }) => {
         if (!registry || !articleRectObserver)
             return;
         const handleScroll = () => {
-            registry.notifyScrollTrigger(window.scrollY);
+            const scrollY = window.scrollY;
+            registry.notifyScrollTrigger(scrollY);
         };
-        articleRectObserver.on('scroll', handleScroll);
-        return () => articleRectObserver.off('scroll', handleScroll);
+        return articleRectObserver.on('scroll', handleScroll);
     }, [registry, articleRectObserver]);
+    (0, react_1.useEffect)(() => {
+        if (!registry)
+            return;
+        registry.notifyLoad();
+        const handleLoad = () => {
+            registry.notifyLoad();
+        };
+        window.addEventListener('load', handleLoad);
+        return () => window.removeEventListener('load', handleLoad);
+    }, [registry]);
     return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: registry, children: children }));
 };
 exports.InteractionsProvider = InteractionsProvider;

package/package.json

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

package/src/components/ScrollPlaybackVideo.tsx

@@ -24,7 +24,7 @@ export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams,
       const scrollPos = articleRectObserver.getSectionScroll(sectionId);
       const time = rangeMap(scrollPos, playbackParams.from, playbackParams.to, 0, 1, true);
       setTime(toFixed(time));
-    })
+    });
   }, [playbackParams?.from, playbackParams?.to, time]);
 
   const scrollVideoManager = useMemo<ScrollPlaybackVideoManager | null>(() => {

package/src/interactions/InteractionsRegistry.ts

@@ -112,13 +112,59 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     return available;
   }
 
-  notifyScrollTrigger(position: number) {
+  notifyLoad() {
     const timestamp = Date.now();
     for (const interaction of this.interactions) {
       const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-      const matchingTrigger = interaction.triggers.find((trigger) =>
-        'position' in trigger && (trigger.position < position ? trigger.from : trigger.to) === currentStateId // refactor
+      const matchingTrigger = interaction.triggers.find(trigger =>
+        'position' in trigger && trigger.position === 0 && trigger.from === currentStateId
       );
+      if (!matchingTrigger) continue;
+      const activeStateId = this.getActiveInteractionState(interaction.id);
+      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 {
+          itemId: stage.itemId,
+          interactionId: stage.interactionId,
+          type: 'transitioning',
+          from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
+          to: matchingTrigger.to,
+          direction: isNewStateActive ? 'in' : 'out',
+          updated: timestamp
+        };
+      });
+
+      const itemsToNotify = new Set<ItemId>(transitioningItems);
+      for (const trigger of interaction.triggers) {
+        if (!('itemId' in trigger)) continue;
+        itemsToNotify.add(trigger.itemId);
+      }
+      this.notifyItemCtrlsChange(Array.from(itemsToNotify));
+      this.notifyTransitionStartForItems(transitioningItems, activeStateId);
+    }
+  }
+
+  notifyScrollTrigger(position: number) {
+    const timestamp = Date.now();
+    for (const interaction of this.interactions) {
+      const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
+      const matchingTrigger = interaction.triggers.find((trigger) => {
+        if (!('position' in trigger) || trigger.position === 0) return false;
+        const isScrollingDown = trigger.position < position;
+        const relevantState = isScrollingDown ? trigger.from : trigger.to;
+        return relevantState === currentStateId;
+      });
       if (!matchingTrigger || !('position' in matchingTrigger)) continue;
       const activeStateId = this.getActiveInteractionState(interaction.id);
       const targetStateId = matchingTrigger.position > position ? matchingTrigger.from : matchingTrigger.to;

package/src/provider/InteractionsContext.tsx

@@ -21,12 +21,23 @@ export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, ch
   useEffect(() => {
     if (!registry || !articleRectObserver) return;
     const handleScroll = () => {
-      registry.notifyScrollTrigger(window.scrollY);
+      const scrollY = window.scrollY;
+      registry.notifyScrollTrigger(scrollY);
     };
-    articleRectObserver.on('scroll', handleScroll);
-    return () => articleRectObserver.off('scroll', handleScroll);
+    return articleRectObserver.on('scroll', handleScroll);
   }, [registry, articleRectObserver]);
 
+  useEffect(() => {
+    if (!registry) return;
+    registry.notifyLoad();
+
+    const handleLoad = () => {
+      registry.notifyLoad();
+    };
+    window.addEventListener('load', handleLoad);
+    return () => window.removeEventListener('load', handleLoad);
+  }, [registry]);
+
   return (
     <InteractionsContext.Provider value={registry}>
       {children}