@gxpl/sdk 0.0.49 → 0.0.51

package/lib/sdk/transitions/transitionMachine.js

@@ -12,7 +12,8 @@ const getScenesOnEnd_1 = require("./utils/getScenesOnEnd");
 const getScenesOnInstantTransition_1 = require("./utils/getScenesOnInstantTransition");
 const isActiveSwipeTransition_1 = require("./utils/isActiveSwipeTransition");
 const getDeltaAndProgress_1 = require("./utils/getDeltaAndProgress");
-const SWIPE_SUCCESS_THRESHOLD = 130;
+const SWIPE_SLIDE_SUCCESS_THRESHOLD = 130;
+const SWIPE_FADE_SUCCESS_THRESHOLD = 20;
 exports.transitionMachine = (0, xstate_1.setup)({
     types: {
         input: {},
@@ -171,7 +172,8 @@ exports.transitionMachine = (0, xstate_1.setup)({
                             const { transition } = context;
                             if (!(0, isActiveSwipeTransition_1.isActiveSwipeTransition)(transition))
                                 return null;
-                            const transitionSuccess = (0, isTransitionSuccess_1.isTransitionSuccess)(transition, SWIPE_SUCCESS_THRESHOLD);
+                            const threshold = transition.type === 'slide' ? SWIPE_SLIDE_SUCCESS_THRESHOLD : SWIPE_FADE_SUCCESS_THRESHOLD;
+                            const transitionSuccess = (0, isTransitionSuccess_1.isTransitionSuccess)(transition, threshold);
                             return {
                                 stage: 'settling',
                                 success: transitionSuccess,
@@ -185,7 +187,8 @@ exports.transitionMachine = (0, xstate_1.setup)({
                             if (!(0, isActiveSwipeTransition_1.isActiveSwipeTransition)(transition))
                                 return scenes;
                             const { type } = transition;
-                            const transitionSuccess = (0, isTransitionSuccess_1.isTransitionSuccess)(transition, SWIPE_SUCCESS_THRESHOLD);
+                            const threshold = transition.type === 'slide' ? SWIPE_SLIDE_SUCCESS_THRESHOLD : SWIPE_FADE_SUCCESS_THRESHOLD;
+                            const transitionSuccess = (0, isTransitionSuccess_1.isTransitionSuccess)(transition, threshold);
                             const newScenes = type === 'slide'
                                 ? (0, getScenesOnEnd_1.getScenesOnSlideEnd)(scenes, transition, transitionSuccess)
                                 : (0, getScenesOnEnd_1.getScenesOnFadeEnd)(scenes);

package/lib/sdk-nextjs/interactions/InteractionsRegistry.d.ts

@@ -4,6 +4,7 @@ import { Article } from '../../sdk/types/article/Article';
 export declare class InteractionsRegistry implements InteractionsRegistryPort {
     private ctrls;
     private items;
+    private articleWidth;
     private interactions;
     private stateItemsIdsMap;
     private interactionStateMap;
@@ -14,6 +15,7 @@ export declare class InteractionsRegistry implements InteractionsRegistryPort {
     private activeStateIdInteractionIdMap;
     constructor(article: Article, isStartSceneInitialized: boolean);
     register(itemId: ItemId, ctrl: ItemInteractionCtrl): void;
+    setArticleWidth(width: number): void;
     getStatePropsForItem(itemId: string): StateProps;
     getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;
     notifySceneInTransition(): void;

package/lib/sdk-nextjs/interactions/InteractionsRegistry.js

@@ -7,6 +7,7 @@ const ulid_1 = require("ulid");
 class InteractionsRegistry {
     constructor(article, isStartSceneInitialized) {
         this.ctrls = new Map();
+        this.articleWidth = 1;
         this.inTransitionDefaultStateId = (0, ulid_1.ulid)();
         this.outTransitionStartStateId = (0, ulid_1.ulid)();
         this.isStartSceneInitialized = isStartSceneInitialized;
@@ -52,6 +53,9 @@ class InteractionsRegistry {
     register(itemId, ctrl) {
         this.ctrls.set(itemId, ctrl);
     }
+    setArticleWidth(width) {
+        this.articleWidth = width;
+    }
     getStatePropsForItem(itemId) {
         var _a, _b, _c;
         const { items } = this;
@@ -225,7 +229,7 @@ class InteractionsRegistry {
             const matchingTrigger = interaction.triggers.find((trigger) => {
                 if (!('position' in trigger) || trigger.position === 0)
                     return false;
-                const triggerPosition = trigger.position * window.innerWidth;
+                const triggerPosition = trigger.position * this.articleWidth;
                 const isScrolledPastTrigger = triggerPosition < position;
                 if (!isScrolledPastTrigger && !trigger.isReverse)
                     return false;
@@ -234,7 +238,7 @@ class InteractionsRegistry {
             });
             if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId)
                 continue;
-            const triggerPosition = matchingTrigger.position * window.innerWidth;
+            const triggerPosition = matchingTrigger.position * this.articleWidth;
             const isScrolledPastTrigger = triggerPosition < position;
             const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
             this.setCurrentStateForInteraction(interaction.id, targetStateId);

package/lib/sdk-nextjs/provider/InteractionsContext.js

@@ -25,6 +25,15 @@ const InteractionsProvider = ({ article, children }) => {
         };
         return articleRectObserver.on('scroll', handleScroll);
     }, [registry, articleRectObserver]);
+    (0, react_1.useEffect)(() => {
+        if (!registry || !articleRectObserver)
+            return;
+        registry.setArticleWidth(articleRectObserver.width);
+        const handleResize = () => {
+            registry.setArticleWidth(articleRectObserver.width);
+        };
+        return articleRectObserver.on('resize', handleResize);
+    }, [registry, articleRectObserver]);
     const notifyLoad = (0, react_1.useCallback)(() => {
         if (startScene === article.id) {
             setIsStartSceneInitialized(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxpl/sdk",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",