@inappstory/slide-api 0.1.44 → 0.1.46

package/dist/index.cjs

@@ -1069,10 +1069,10 @@ class EsModuleSdkApi {
     onWidgetRequireResumeUI() {
         return this.sdkBinding.onWidgetRequireResumeUI();
     }
-    getCardServerData(cardId) {
-        return this.sdkBinding.getCardServerData(cardId);
+    getCardServerData() {
+        return this.sdkBinding.getCardServerData();
     }
-    updateCardServerDataLocally(cardId, data) {
+    updateCardServerDataLocally(data) {
         return this.sdkBinding.updateCardServerDataLocally(data);
     }
     showNextSlide(duration) {
@@ -1111,8 +1111,8 @@ class EsModuleSdkApi {
     setCardLocalData(keyValue, sendToServer) {
         this.sdkBinding.setCardLocalData(keyValue, sendToServer);
     }
-    getWidgetsSharedData(cardId, widget) {
-        return this.sdkBinding.getWidgetsSharedData(cardId, widget);
+    getWidgetsSharedData(widget) {
+        return this.sdkBinding.getWidgetsSharedData(widget);
     }
     vibrate(pattern) {
         navigator.vibrate(pattern);
@@ -1224,6 +1224,9 @@ class EsModuleSdkApi {
     productCartClicked() {
         this.sdkBinding.productCartClicked();
     }
+    onVerticalScrollChange(data) {
+        this.sdkBinding.onVerticalScrollChange(data);
+    }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKInterface`]; }
 }
 
@@ -1466,7 +1469,7 @@ class PromocodeLocalRepository {
         this.sdkApi = sdkApi;
     }
     init({ localData, cardId }) {
-        const savedData = this.sdkApi.getCardServerData(cardId) ?? {};
+        const savedData = this.sdkApi.getCardServerData() ?? {};
         this.localData = extend({}, savedData, localData ?? {});
     }
     getPromocode() {
@@ -2632,9 +2635,15 @@ const waitForImageHtmlElementLoad = async (nodeRef) => {
                 }));
             }
             nodeRef.removeEventListener("load", onLoad);
+            nodeRef.removeEventListener("error", onError);
+        };
+        const onError = () => {
+            nodeRef.removeEventListener("load", onLoad);
+            nodeRef.removeEventListener("error", onError);
+            reject(new Error(`Could not load (Network error) Image from URL: ${nodeRef.src}`));
         };
         nodeRef.addEventListener("load", onLoad);
-        nodeRef.addEventListener("error", _ => reject(new Error(`Could not load (Network error) Image from URL: ${nodeRef.src}`)));
+        nodeRef.addEventListener("error", onError);
         if (nodeRef.complete && nodeRef.naturalHeight !== 0) {
             if (nodeRef.decode != null) {
                 nodeRef.decode().then(() => resolve(nodeRef), reason => reject(reason));
@@ -3046,11 +3055,12 @@ class Video {
         return false;
     }
     start(muted = true, getIsLooped) {
-        this._videoStartedPromise = new Promise(async (resolve) => {
+        this._videoStartedPromise = new Promise(async (resolve, reject) => {
             // invariant - always wait for mediaElementsLoadingPromises
             // else call of _initVOD can start and onAllMediaLoaded failed
             // TODO - add for all Elements state invariant protection
-            Promise.all(this.mediaElementsLoadingPromises).finally(async () => {
+            Promise.all(this.mediaElementsLoadingPromises)
+                .then(async () => {
                 if (this._video) {
                     if (this._isVOD && this._vodPlayerInstance === null) {
                         // console.log("_initVOD 5.1");
@@ -3097,7 +3107,8 @@ class Video {
                         getVideoCurrentTime: () => 0,
                     });
                 }
-            });
+            })
+                .catch(reject);
         });
         return this._videoStartedPromise;
     }
@@ -3603,6 +3614,64 @@ const tryCreateFromHtmlElement = (nodeRef, layer, widgetCallbacks, widgetDeps) =
     return null;
 };
 
+class LayerVerticalScrollNotifier {
+    scrollable;
+    cardId;
+    slideIndex;
+    layerIndex;
+    scrollView;
+    onVerticalScrollChange;
+    constructor(scrollable, cardId, slideIndex, layerIndex, scrollView, onVerticalScrollChange) {
+        this.scrollable = scrollable;
+        this.cardId = cardId;
+        this.slideIndex = slideIndex;
+        this.layerIndex = layerIndex;
+        this.scrollView = scrollView;
+        this.onVerticalScrollChange = onVerticalScrollChange;
+        // Store context
+        this.onScroll = this.onScroll.bind(this);
+        this.onUpdateSizeMetrics();
+    }
+    scrollViewHeight = 0;
+    scrollHeight = 0;
+    start() {
+        // emit event with actual scrollPercent at layer start - for SDK synchronization
+        this.onScroll();
+        if (this.scrollable && this.scrollView != null) {
+            this.scrollView.addEventListener("scroll", this.onScroll);
+        }
+    }
+    onUpdateSizeMetrics(metrics) {
+        if (this.scrollView != null) {
+            this.scrollViewHeight = this.scrollView.getBoundingClientRect().height;
+            this.scrollHeight = this.scrollView.scrollHeight;
+        }
+    }
+    onScroll(event) {
+        this.emitEvent(this.scrollView?.scrollTop);
+    }
+    emitEvent(scrollY = 0) {
+        const height = this.scrollHeight - this.scrollViewHeight;
+        // scroll / (full scroll height - viewport height)
+        let scrollPercent = (scrollY / (height > 0 ? height : 1)) * 100;
+        scrollPercent = Math.min(100, Math.round(scrollPercent));
+        this.onVerticalScrollChange({
+            scrollY,
+            scrollPercent,
+            isScrollableLayer: this.scrollable,
+            cardId: this.cardId,
+            slideIndex: this.slideIndex,
+            layerIndex: this.layerIndex,
+        });
+    }
+    destroy() {
+        if (this.scrollable && this.scrollView != null) {
+            this.scrollView.removeEventListener("scroll", this.onScroll);
+        }
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`boolean`, `number`, `number`, `number`, `HTMLElement | null`, `SDKApi["onVerticalScrollChange"]`]; }
+}
+
 var TimelineDisabledState;
 (function (TimelineDisabledState) {
     TimelineDisabledState[TimelineDisabledState["disabled"] = 0] = "disabled";
@@ -3871,6 +3940,7 @@ class SlideTimeline {
 class Layer {
     _nodeRef;
     _slide;
+    _layerIndex;
     _slideReadyPromise;
     _afterAppResumeQueuePush;
     _afterStartInitQueuePush;
@@ -3887,12 +3957,16 @@ class Layer {
     _duration;
     _disabledTimer;
     _disabledNavigation;
+    _scrollable;
+    _scrollView;
+    _layerVerticalScrollNotifier;
     _elements = [];
     _timeline;
     _widgetDeps;
-    constructor(_nodeRef, _slide, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, slideApiDeps, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI, _getSdkClientVariables) {
+    constructor(_nodeRef, _slide, _layerIndex, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, slideApiDeps, _slideRoot, _getLayoutDirection, _slidePauseUI, _slideResumeUI, _getSdkClientVariables) {
         this._nodeRef = _nodeRef;
         this._slide = _slide;
+        this._layerIndex = _layerIndex;
         this._slideReadyPromise = _slideReadyPromise;
         this._afterAppResumeQueuePush = _afterAppResumeQueuePush;
         this._afterStartInitQueuePush = _afterStartInitQueuePush;
@@ -3909,6 +3983,9 @@ class Layer {
         this._duration = parseInt(this._nodeRef.getAttribute("data-duration") ?? "") || DEFAULT_SLIDE_DURATION;
         this._disabledTimer = this._nodeRef.getAttribute("data-disable-timer") === "1";
         this._disabledNavigation = this._nodeRef.getAttribute("data-disable-navigation") === "1";
+        this._scrollable = this._nodeRef.getAttribute("data-scrollable") === "1";
+        this._scrollView = _nodeRef.querySelector(".narrative-layer-scroll-view");
+        this._layerVerticalScrollNotifier = new LayerVerticalScrollNotifier(this._scrollable, this._cardId, this._slideIndex, this._layerIndex, this._scrollView, this.slideApiDeps.onVerticalScrollChange.bind(this.slideApiDeps));
         this._timeline = new SlideTimeline(this._slideIndex, this._duration, this._disabledTimer, this._slideReadyPromise, this._afterAppResumeQueuePush, this.slideApiDeps);
         this._widgetDeps = {
             slideApiDeps: this.slideApiDeps,
@@ -3940,7 +4017,7 @@ class Layer {
                 this._slideResumeUI();
             }
         };
-        const _elementsNodes = this._nodeRef.querySelectorAll(".narrative-slide-elements .narrative-element:not(.narrative-element-child-element)");
+        const _elementsNodes = this._nodeRef.querySelectorAll(".narrative-slide-elements .narrative-element:not(.narrative-element-child-element), .narrative-slide-background .narrative-element:not(.narrative-element-child-element)");
         let layerWithWidgetQuest = false;
         _elementsNodes.forEach(item => {
             let element = tryCreateFromHtmlElement(item, this, {
@@ -3957,7 +4034,7 @@ class Layer {
         });
         // console.log({ _elementsNodes }, this._elements);
         /**
-         * Special behaviour for widget Quest
+         * Special behavior for widget Quest
          * if current slide/layer without WidgetQuest element explicit but story has type Quest
          * - then init WidgetQuest with layer instead of WidgetQuest element (required for WidgetQuest slides navigation)
          */
@@ -3979,6 +4056,9 @@ class Layer {
         const promises = this._elements.map(element => element.init(localData));
         return promises;
     }
+    onUpdateSizeMetrics(metrics) {
+        this._layerVerticalScrollNotifier?.onUpdateSizeMetrics(metrics);
+    }
     onAfterAllMediaResourcesLoaded() {
         if (this.slideApiDeps.isIOS) ;
         this._initTextFit();
@@ -4034,6 +4114,9 @@ class Layer {
     get disabledNavigation() {
         return this._disabledNavigation;
     }
+    get scrollable() {
+        return this._scrollable;
+    }
     get videoElement() {
         for (const element of this._elements) {
             if (Video.isTypeOf(element)) {
@@ -4163,6 +4246,15 @@ class Layer {
     _animationPauseCb;
     _animationResumeCb;
     async start(muted = true) {
+        if (this._layerVerticalScrollNotifier === null) {
+            this._layerVerticalScrollNotifier = new LayerVerticalScrollNotifier(this._scrollable, this._cardId, this._slideIndex, this._layerIndex, this._scrollView, this.slideApiDeps.onVerticalScrollChange.bind(this.slideApiDeps));
+        }
+        // push _layerVerticalScrollNotifier?.start to EventLoop queue
+        // complete story_slide_start, after that - call _layerVerticalScrollNotifier
+        // prevent call _layerVerticalScrollNotifier before storyStarted SDK callback
+        setTimeout(() => {
+            this._layerVerticalScrollNotifier?.start();
+        });
         const videoElement = this.videoElement;
         let currentTime = 0;
         if (videoElement != null) {
@@ -4193,6 +4285,8 @@ class Layer {
         return { currentTime };
     }
     async stop(options) {
+        this._layerVerticalScrollNotifier?.destroy();
+        this._layerVerticalScrollNotifier = null;
         this.videoElement?.stop(options);
         this.slideApiDeps.cardAnimation?.stop(this._nodeRef);
         for (const element of this._elements) {
@@ -4283,7 +4377,7 @@ class Layer {
     get isLayerForcePaused() {
         return this.elements.some(element => element.isLayerForcePaused);
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Slide`, `Promise`, `(cb: () => void) => void`, `(cb: () => void) => void`, `ISlideApiDeps`, `HTMLElement`, `() => "ltr" | "rtl"`, `() => Promise<void>`, `() => Promise<void>`, `GetSdkClientVariables`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Slide`, `number`, `Promise`, `(cb: () => void) => void`, `(cb: () => void) => void`, `ISlideApiDeps`, `HTMLElement`, `() => "ltr" | "rtl"`, `() => Promise<void>`, `() => Promise<void>`, `GetSdkClientVariables`]; }
 }
 const TextFit = (function () {
     const defaultSettings = {
@@ -4497,9 +4591,12 @@ class Slide {
         if (!this._slidesNodesRefs.length) {
             throw new Error("No slides found.");
         }
-        this._layers = this._slidesNodesRefs.map(item => new Layer(item, this, this._slideReadyPromise, this._afterAppResumeQueuePush, this._afterStartInitQueuePush, this.slideApiDeps, this._slideRoot, this._getLayoutDirection, this._slidePauseUI, this._slideResumeUI, this._getSdkClientVariables));
+        this._layers = this._slidesNodesRefs.map((item, layerIndex) => new Layer(item, this, layerIndex, this._slideReadyPromise, this._afterAppResumeQueuePush, this._afterStartInitQueuePush, this.slideApiDeps, this._slideRoot, this._getLayoutDirection, this._slidePauseUI, this._slideResumeUI, this._getSdkClientVariables));
         this._activeLayer = this._layers[0];
     }
+    onUpdateSizeMetrics(metrics) {
+        this.layers.forEach(layer => layer.onUpdateSizeMetrics(metrics));
+    }
     _activeLayer;
     get activeLayer() {
         return this._activeLayer;
@@ -4662,6 +4759,7 @@ let SlideApi$1 = class SlideApi {
             }
             this.slideOffsetElement.style.margin = slideOffsetMargin;
         }
+        this.slide?.onUpdateSizeMetrics({ fontSize, xOffset, yOffset, isFullscreen, slideOffsetMargin });
     }
     get slideWrapperElement() {
         return this._slideWrapper;
@@ -5520,7 +5618,7 @@ let SlideApi$1 = class SlideApi {
         if (element) {
             propagation = false;
             this.slideApiDeps.setCardLocalData({}, true);
-            this.slideApiDeps.updateCardServerDataLocally(this.slide.cardId, {});
+            this.slideApiDeps.updateCardServerDataLocally({});
             // window._resetTimers();
             // сделать async в ios
             let slideIndex = this.slide.slideIndex;
@@ -5818,8 +5916,8 @@ class SlideApiDepsMultiSlideMode {
     onWidgetRequireResumeUI() {
         return this.sdkApi.onWidgetRequireResumeUI();
     }
-    getWidgetsSharedData(cardId, widget) {
-        return this.sdkApi.getWidgetsSharedData(cardId, widget);
+    getWidgetsSharedData(widget) {
+        return this.sdkApi.getWidgetsSharedData(widget);
     }
     showToast(text) {
         return this.sdkApi.showToast(text);
@@ -5907,14 +6005,14 @@ class SlideApiDepsMultiSlideMode {
     getCardLocalData() {
         return this.sdkApi.getCardLocalData();
     }
-    getCardServerData(cardId) {
-        return this.sdkApi.getCardServerData(cardId);
+    getCardServerData() {
+        return this.sdkApi.getCardServerData();
     }
     get cardAnimation() {
         return this.sdkApi.cardAnimation;
     }
-    updateCardServerDataLocally(cardId, data) {
-        this.sdkApi.updateCardServerDataLocally(cardId, data);
+    updateCardServerDataLocally(data) {
+        this.sdkApi.updateCardServerDataLocally(data);
     }
     get isExistsShowNextCard() {
         return this.sdkApi.isExistsShowNextCard;
@@ -5956,6 +6054,9 @@ class SlideApiDepsMultiSlideMode {
     productCartClicked() {
         this.sdkApi.productCartClicked();
     }
+    onVerticalScrollChange(data) {
+        this.sdkApi.onVerticalScrollChange(data);
+    }
     /**
      * For single slide mode - proxy these methods via SDKApi
      * =================================================================================================================
@@ -5995,8 +6096,8 @@ class SlideApiDepsSingleSlideMode {
     onWidgetRequireResumeUI() {
         return this.sdkApi.onWidgetRequireResumeUI();
     }
-    getWidgetsSharedData(cardId, widget) {
-        return this.sdkApi.getWidgetsSharedData(cardId, widget);
+    getWidgetsSharedData(widget) {
+        return this.sdkApi.getWidgetsSharedData(widget);
     }
     showToast(text) {
         return this.sdkApi.showToast(text);
@@ -6084,14 +6185,14 @@ class SlideApiDepsSingleSlideMode {
     getCardLocalData() {
         return this.sdkApi.getCardLocalData();
     }
-    getCardServerData(cardId) {
-        return this.sdkApi.getCardServerData(cardId);
+    getCardServerData() {
+        return this.sdkApi.getCardServerData();
     }
     get cardAnimation() {
         return this.sdkApi.cardAnimation;
     }
-    updateCardServerDataLocally(cardId, data) {
-        this.sdkApi.updateCardServerDataLocally(cardId, data);
+    updateCardServerDataLocally(data) {
+        this.sdkApi.updateCardServerDataLocally(data);
     }
     get isExistsShowNextCard() {
         return this.sdkApi.isExistsShowNextCard;
@@ -6155,6 +6256,9 @@ class SlideApiDepsSingleSlideMode {
     showNextSlide(duration) {
         this.sdkApi.showNextSlide(duration);
     }
+    onVerticalScrollChange(data) {
+        this.sdkApi.onVerticalScrollChange(data);
+    }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKApi`]; }
 }
 
@@ -7524,7 +7628,7 @@ class WidgetBase {
                 this.submitButtonView = this.submitButtonAnimatedView.querySelector(".submit-button-view");
             }
         }
-        this.savedData = this.widgetDeps.slideApiDeps.getCardServerData(this.cardId);
+        this.savedData = this.widgetDeps.slideApiDeps.getCardServerData();
         this.localData = extend({}, this.savedData ?? {}, this.options.localData ?? {});
         this.id = `w_${this.elementId}_${WidgetBase.widgetIndex}`;
         ++WidgetBase.widgetIndex;
@@ -7546,7 +7650,7 @@ class WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.widgetDeps.slideApiDeps.getCardServerData(this.cardId);
+        this.savedData = this.widgetDeps.slideApiDeps.getCardServerData();
         this.localData = extend({}, this.savedData ?? {}, localData);
     }
     onStart() {
@@ -18978,7 +19082,7 @@ class WidgetPoll extends WidgetBase {
     displayPercents(selectedVariantIndex, filled = false) {
         let pollAllocation = [0, 0];
         let pollAllocationTs = undefined;
-        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData(this.cardId, "poll" /* Widgets.Poll */);
+        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData("poll" /* Widgets.Poll */);
         if (sharedData && sharedData[this.elementId] != null && (isObject$1(sharedData[this.elementId]) || isArray(sharedData[this.elementId]))) {
             pollAllocation = sharedData[this.elementId];
             if (isObject$1(sharedData[this.elementId])) {
@@ -23186,7 +23290,7 @@ class WidgetRangeSlider extends WidgetBase {
             total_user: 0,
         };
         let answerAllocationTs = undefined;
-        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData(this.cardId, "rangeSlider" /* Widgets.RangeSlider */);
+        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData("rangeSlider" /* Widgets.RangeSlider */);
         if (sharedData && sharedData[this.elementId] != null && (isObject$1(sharedData[this.elementId]) || isArray(sharedData[this.elementId]))) {
             answerAllocation = sharedData[this.elementId];
             answerAllocationTs = sharedData.ts;
@@ -24883,7 +24987,7 @@ class WidgetVote extends WidgetBase {
         // voteAllocation[7]
         let voteAllocation = [];
         let voteAllocationTs = undefined;
-        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData(this.cardId, "vote" /* Widgets.Vote */);
+        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData("vote" /* Widgets.Vote */);
         if (sharedData && sharedData[this.elementId] != null && (isObject$1(sharedData[this.elementId]) || isArray(sharedData[this.elementId]))) {
             voteAllocation = sharedData[this.elementId];
             if (isObject$1(sharedData[this.elementId])) {
@@ -25287,7 +25391,7 @@ class WidgetReactions extends WidgetBase {
         this.element.classList.add("narrative-element-reactions--done");
     }
     getReactionsSummary() {
-        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData(this.cardId, "reactions" /* Widgets.Reactions */);
+        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData("reactions" /* Widgets.Reactions */);
         let allocation = [];
         let timestamp = null;
         if (this.hasValidSharedData(sharedData)) {