@inappstory/slide-api 0.1.7 → 0.1.9

package/dist/index.js

@@ -1149,6 +1149,12 @@ class EsModuleSdkApi {
     enableVerticalSwipeGesture() {
         this.sdkBinding.enableVerticalSwipeGesture();
     }
+    disableHorizontalSwipeGesture() {
+        this.sdkBinding.disableHorizontalSwipeGesture();
+    }
+    enableHorizontalSwipeGesture() {
+        this.sdkBinding.enableHorizontalSwipeGesture();
+    }
     disableBackpress() { }
     enableBackpress() { }
     closeCard(reason) {
@@ -2239,6 +2245,15 @@ class Video {
         this._isVOD = Boolean(this._vodData != null && this._VideoPlayer != null);
         if (this._isVOD) ;
         else {
+            if (this._vodData != null && Array.isArray(this._vodData.formats)) {
+                this._vodData.formats.forEach(format => {
+                    const videoSource = window.document.createElement("source");
+                    videoSource.type = format.mimeType;
+                    videoSource.src = format.url;
+                    videoSource.dataset.remoteSrc = format.url;
+                    this._video.appendChild(videoSource);
+                });
+            }
             this.mediaElementsLoadingPromises.push(waitForVideoHtmlElementLoad(this._video));
         }
         // console.log({mediaElementsLoadingPromises: this.mediaElementsLoadingPromises})
@@ -2263,12 +2278,13 @@ class Video {
         // clean up memory and cpu processes
         // @ts-ignore
         // _log("onBeforeUnmount", true)
+        // console.log("onBeforeUnmount")
         this._destroyVODPlayer();
     }
     _initVOD(vodData) {
         const onWaiting = () => {
             /**
-             * When screen on pause - ignore onWaiting
+             * When screen on pause - ignore onWaiting (or when SlideApi is destroyed)
              * (triggered when video paused, not only when canplay = false)
              */
             if (this._isScreenOnPause) {
@@ -2811,14 +2827,14 @@ class SlideTimeline {
     slideDuration;
     slideDisabledTimer;
     slideReady;
-    _afterResumeQueuePush;
+    _afterAppResumeQueuePush;
     sdkApi;
-    constructor(slideIndex, slideDuration, slideDisabledTimer, slideReady, _afterResumeQueuePush, sdkApi) {
+    constructor(slideIndex, slideDuration, slideDisabledTimer, slideReady, _afterAppResumeQueuePush, sdkApi) {
         this.slideIndex = slideIndex;
         this.slideDuration = slideDuration;
         this.slideDisabledTimer = slideDisabledTimer;
         this.slideReady = slideReady;
-        this._afterResumeQueuePush = _afterResumeQueuePush;
+        this._afterAppResumeQueuePush = _afterAppResumeQueuePush;
         this.sdkApi = sdkApi;
         this.timelineDisabledState = this.slideDisabledTimer ? TimelineDisabledState.disabled : TimelineDisabledState.enabled;
     }
@@ -2975,7 +2991,7 @@ class SlideTimeline {
         // if app is paused (in background) - don't call start timeline (Android issues)
         // @ts-ignore
         // window._log(`Push startDisabledTimeline to queue at state: ${window.slideApi.state}, time: ${new Date().getTime()}`, true);
-        this._afterResumeQueuePush(() => {
+        this._afterAppResumeQueuePush(() => {
             // @ts-ignore
             // window._log(`Call startDisabledTimeline at state: ${window.slideApi.state}, time: ${new Date().getTime()}`, true);
             if (this.isSDKSupportUpdateTimeline) {
@@ -3022,7 +3038,7 @@ class Layer {
     _nodeRef;
     _slide;
     _slideReadyPromise;
-    _afterResumeQueuePush;
+    _afterAppResumeQueuePush;
     _afterStartInitQueuePush;
     _showNextSlide;
     sdkApi;
@@ -3035,11 +3051,11 @@ class Layer {
     _disabledNavigation;
     _elements = [];
     _timeline;
-    constructor(_nodeRef, _slide, _slideReadyPromise, _afterResumeQueuePush, _afterStartInitQueuePush, _showNextSlide, sdkApi) {
+    constructor(_nodeRef, _slide, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, _showNextSlide, sdkApi) {
         this._nodeRef = _nodeRef;
         this._slide = _slide;
         this._slideReadyPromise = _slideReadyPromise;
-        this._afterResumeQueuePush = _afterResumeQueuePush;
+        this._afterAppResumeQueuePush = _afterAppResumeQueuePush;
         this._afterStartInitQueuePush = _afterStartInitQueuePush;
         this._showNextSlide = _showNextSlide;
         this.sdkApi = sdkApi;
@@ -3050,7 +3066,7 @@ 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._timeline = new SlideTimeline(this._slideIndex, this._duration, this._disabledTimer, this._slideReadyPromise, this._afterResumeQueuePush, this.sdkApi);
+        this._timeline = new SlideTimeline(this._slideIndex, this._duration, this._disabledTimer, this._slideReadyPromise, this._afterAppResumeQueuePush, this.sdkApi);
         const onWidgetComplete = (cardId, slideIndex) => {
             // todo if nothing more widgets with disabled timers - we can start layer timeline
             const fallback = () => this._showNextSlide(DEFAULT_SLIDE_DURATION);
@@ -3302,7 +3318,7 @@ class Layer {
             element.onStop();
         }
     }
-    async pause(resetVideoTime = false, stopAnimation = false) {
+    async pause(resetVideoTime = false, stopAnimation = false, updateTimeline = true) {
         return new Promise(resolve => {
             const cb = () => {
                 let currentTime = this.videoElement?.pause(resetVideoTime) ?? null;
@@ -3320,7 +3336,9 @@ class Layer {
                 for (const element of this._elements) {
                     element.onPause();
                 }
-                this.timeline.slidePaused(currentTime);
+                if (updateTimeline) {
+                    this.timeline.slidePaused(currentTime);
+                }
                 resolve({ currentTime });
             };
             const videoStartedPromise = this.videoElement?.videoStartedPromise;
@@ -3544,16 +3562,16 @@ class TextElementAutoWidthCorrection {
 class Slide {
     _slidesNodesRefs;
     _slideReadyPromise;
-    _afterResumeQueuePush;
+    _afterAppResumeQueuePush;
     _afterStartInitQueuePush;
     _showNextSlide;
     sdkApi;
     _layers;
     _start;
-    constructor(_slidesNodesRefs, _slideReadyPromise, _afterResumeQueuePush, _afterStartInitQueuePush, _showNextSlide, sdkApi) {
+    constructor(_slidesNodesRefs, _slideReadyPromise, _afterAppResumeQueuePush, _afterStartInitQueuePush, _showNextSlide, sdkApi) {
         this._slidesNodesRefs = _slidesNodesRefs;
         this._slideReadyPromise = _slideReadyPromise;
-        this._afterResumeQueuePush = _afterResumeQueuePush;
+        this._afterAppResumeQueuePush = _afterAppResumeQueuePush;
         this._afterStartInitQueuePush = _afterStartInitQueuePush;
         this._showNextSlide = _showNextSlide;
         this.sdkApi = sdkApi;
@@ -3561,7 +3579,7 @@ 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._afterResumeQueuePush, this._afterStartInitQueuePush, this._showNextSlide, this.sdkApi));
+        this._layers = this._slidesNodesRefs.map(item => new Layer(item, this, this._slideReadyPromise, this._afterAppResumeQueuePush, this._afterStartInitQueuePush, this._showNextSlide, this.sdkApi));
         this._activeLayer = this._layers[0];
     }
     _activeLayer;
@@ -3668,6 +3686,7 @@ let SlideApi$1 = class SlideApi {
     _getViewportWidth;
     _getViewportHeight;
     _overlappingActionBarHeight;
+    _separateUserAndAppPause;
     sdkApi;
     constructor(config) {
         this.config = config;
@@ -3677,6 +3696,7 @@ let SlideApi$1 = class SlideApi {
         this._getViewportWidth = config.getViewportWidth;
         this._getViewportHeight = config.getViewportHeight;
         this._overlappingActionBarHeight = config.overlappingActionBarHeight ?? 0;
+        this._separateUserAndAppPause = config.separateUserAndAppPause;
         this.refreshSizes = proxy(this.refreshSizes, this);
         this.initListeners();
         this.refreshSizes();
@@ -3685,10 +3705,10 @@ let SlideApi$1 = class SlideApi {
         if (slideBox && slideBox.innerText.trim() !== "{%content}".replace("{", "{{").replace("}", "}}")) {
             this._slideInInit = null;
             this._slideInRender = true;
-            this._init(() => this._slideBoxRenderComplete(null), () => this._slideBoxRenderError(null)).then(({ slide, result, reason }) => {
+            this._init(() => this._slideBoxRenderComplete(null)).then(({ slide, result, reason }) => {
                 this._slide = slide;
                 if (config.slideLoadedCb != null) {
-                    config.slideLoadedCb({ slide, result, reason });
+                    config.slideLoadedCb({ cardId: slide.cardId, slideIndex: slide.slideIndex, result, reason });
                 }
             });
         }
@@ -3698,6 +3718,7 @@ let SlideApi$1 = class SlideApi {
             this.slide.onBeforeUnmount();
         }
         this.destroyListeners();
+        this._state = 13 /* STATE.DESTROYED */;
     }
     initListeners() {
         this._viewport.addEventListener("resize", this.refreshSizes);
@@ -3778,7 +3799,7 @@ let SlideApi$1 = class SlideApi {
     async showSlide(html) {
         const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
         const slideBoxPrerender = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName}`);
-        const _result = { slide: this.slide, result: false, reason: "" };
+        const _result = { cardId: this.slide?.cardId ?? 0, slideIndex: this.slide?.slideIndex ?? 0, result: false, reason: "" };
         if (slideBox && slideBoxPrerender) {
             if (this._slideInRender) {
                 this._slideInRender = false;
@@ -3788,12 +3809,17 @@ let SlideApi$1 = class SlideApi {
             this._slideInRender = true;
             slideBoxPrerender.innerHTML = html;
             const prevSlide = this.slide ? Object.assign(Object.create(Object.getPrototypeOf(this.slide)), this.slide) : null;
-            const { slide, result, reason } = await this._init(() => this._slideBoxRenderComplete(prevSlide), () => this._slideBoxRenderError(prevSlide));
+            const { slide, result, reason } = await this._init(() => this._slideBoxRenderComplete(prevSlide));
             this._slide = slide;
             _result.result = result;
             _result.reason = reason;
         }
-        _result.slide = this.slide;
+        else {
+            _result.result = false;
+            _result.reason = `Element .${SlideApi.renderedBoxClassName} or .${SlideApi.prerenderBoxClassName} does not found in DOM`;
+        }
+        _result.cardId = this.slide.cardId;
+        _result.slideIndex = this.slide.slideIndex;
         return _result;
     }
     handleBackpress() {
@@ -3847,44 +3873,50 @@ let SlideApi$1 = class SlideApi {
             }
         });
     }
+    // todo nullable
     _slide;
     _slideInInit;
     _state;
     _afterStartInitQueue = [];
-    _afterResumeQueue = [];
+    _afterAppResumeQueue = [];
     get state() {
         return this._state;
     }
     async _onAllMediaLoaded(slide) {
-        return new Promise((resolve, reject) => {
-            const promises = slide.layers.flatMap(layer => layer.elements.flatMap(element => element.mediaElementsLoadingPromises));
-            console.log({ promises });
-            let checkerTimerId = undefined;
-            let timeOutFired = false;
-            if (promises.length > 0) {
-                checkerTimerId = this.layoutService.env.setTimeout(() => {
-                    timeOutFired = true;
-                    reject("onAllMediaLoaded timeout");
-                }, 3000);
-            }
-            else {
-                resolve();
-                return;
-            }
-            Promise.all(promises).then(_ => {
-                checkerTimerId && this.layoutService.env.clearTimeout(checkerTimerId);
-                if (!timeOutFired) {
-                    resolve();
-                }
-            }, reason => {
-                checkerTimerId && this.layoutService.env.clearTimeout(checkerTimerId);
-                if (!timeOutFired) {
-                    reject(reason);
-                }
-            });
-        });
-    }
-    async _init(slideBoxCb, slideBoxFailedCb) {
+        return Promise.all(slide.layers.flatMap(layer => layer.elements.flatMap(element => element.mediaElementsLoadingPromises))).then(_ => { });
+        // return new Promise((resolve, reject) => {
+        //     const promises = slide.layers.flatMap(layer => layer.elements.flatMap(element => element.mediaElementsLoadingPromises));
+        //
+        //     // console.log({ promises });
+        //
+        //     let checkerTimerId: number | undefined = undefined;
+        //     let timeOutFired = false;
+        //     if (promises.length > 0) {
+        //         checkerTimerId = this.layoutService.env.setTimeout(() => {
+        //             timeOutFired = true;
+        //             reject("onAllMediaLoaded timeout");
+        //         }, 3000);
+        //     } else {
+        //         resolve();
+        //         return;
+        //     }
+        //     Promise.all(promises).then(
+        //         _ => {
+        //             checkerTimerId && this.layoutService.env.clearTimeout(checkerTimerId);
+        //             if (!timeOutFired) {
+        //                 resolve();
+        //             }
+        //         },
+        //         reason => {
+        //             checkerTimerId && this.layoutService.env.clearTimeout(checkerTimerId);
+        //             if (!timeOutFired) {
+        //                 reject(reason);
+        //             }
+        //         },
+        //     );
+        // });
+    }
+    async _init(slideBoxCb) {
         this._state = 0 /* STATE.INIT */;
         const slideNodeRef = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName} .narrative-slide`);
         const slidesNodesRefs = Array.prototype.slice.call(this._slideWrapper.querySelectorAll(`.${SlideApi.prerenderBoxClassName} .narrative-slide.narrative-multi-slide`));
@@ -3895,53 +3927,59 @@ let SlideApi$1 = class SlideApi {
             throw new Error("No slides found.");
         }
         let slideReadyResolve = null;
-        let slideReadyReject = null;
-        const slideReadyPromise = new Promise((resolve, reject) => {
+        const slideReadyPromise = new Promise(resolve => {
             slideReadyResolve = resolve;
-            slideReadyReject = reject;
         });
-        const slide = new Slide(slidesNodesRefs, slideReadyPromise, this.afterResumeQueuePush.bind(this), this.afterStartInitQueuePush.bind(this), this.sdkApi.showNextSlide.bind(this), this.sdkApi);
+        const slide = new Slide(slidesNodesRefs, slideReadyPromise, this.afterAppResumeQueuePush.bind(this), this.afterStartInitQueuePush.bind(this), this.sdkApi.showNextSlide.bind(this), this.sdkApi);
         this._slideInInit = slide;
         slide.activeLayer.timeline.triggerSlideLoadState();
-        const onAllMediaLoaded = this._onAllMediaLoaded(slide);
         if (this.sdkApi.isAndroid) {
             this._afterStartInitQueue = [];
         }
-        this._afterResumeQueue = [];
+        this._afterAppResumeQueue = [];
         const result = { slide, result: false, reason: "" };
-        await this._initAndLoadFonts(this.sdkApi.getCardFonts());
-        const localData = await this.getLocalData();
-        const finishRender = await slide.init(localData);
-        /**
-         * если есть виджеты, которых надо ждать - то не завершаем рендеринг текущего слайда
-         * пример - квест, если зашли в сторис а виджету нужно показать другой слайд вместо первого
-         */
-        if (finishRender) {
-            this._state = 1 /* STATE.INITED */;
-            try {
-                await onAllMediaLoaded;
+        try {
+            const onAllMediaLoaded = this._onAllMediaLoaded(slide);
+            const fontsPromise = this._initAndLoadFonts(this.sdkApi.getCardFonts());
+            const mediaAndFontsPromise = Promise.all([onAllMediaLoaded, fontsPromise]).then(() => {
+                this.layoutService.env.clearTimeout(mediaResourcesTimeoutId);
+            });
+            let mediaResourcesTimeoutId = null;
+            const mediaResourcesTimeoutPromise = new Promise((resolve, reject) => {
+                mediaResourcesTimeoutId = this.layoutService.env.setTimeout(() => {
+                    // todo add detailed info about pending media resources
+                    reject("MediaResources loading timed out (5 sec).");
+                }, 5000);
+            });
+            const mediaResourcesWithTimeoutPromise = Promise.race([mediaAndFontsPromise, mediaResourcesTimeoutPromise]);
+            const elementsPromise = slide.init(await this.getLocalData());
+            const finishRender = await elementsPromise;
+            /**
+             * если есть виджеты, которых надо ждать - то не завершаем рендеринг текущего слайда
+             * пример - квест, если зашли в сторис а виджету нужно показать другой слайд вместо первого
+             */
+            if (finishRender) {
+                this._state = 1 /* STATE.INITED */;
+                await mediaResourcesWithTimeoutPromise;
                 result.result = true;
                 slideBoxCb();
-                this.layoutService.env.setTimeout(() => {
-                    slideReadyResolve();
-                });
             }
-            catch (reason) {
-                console.log("SlideInit, onAllMediaLoaded reject", reason);
-                slideBoxFailedCb();
-                this.layoutService.env.setTimeout(() => {
-                    slideReadyReject();
-                });
-                result.result = false;
-                result.reason = String(reason);
+            else {
+                this._state = 12 /* STATE.STOPPED */;
+                result.result = true;
             }
+            this.layoutService.env.setTimeout(() => {
+                slideReadyResolve();
+            });
         }
-        else {
-            this._state = 10 /* STATE.STOPPED */;
+        catch (reason) {
+            console.log("SlideInit, onAllMediaLoaded reject", reason);
+            slideBoxCb();
             this.layoutService.env.setTimeout(() => {
                 slideReadyResolve();
             });
-            result.result = true;
+            result.result = false;
+            result.reason = String(reason);
         }
         return result;
     }
@@ -3957,6 +3995,8 @@ let SlideApi$1 = class SlideApi {
             slideBoxPrerender.classList.remove(SlideApi.prerenderBoxClassName);
             slideBox.classList.remove(SlideApi.renderedBoxClassName);
             slideBox.classList.add(SlideApi.prerenderBoxClassName);
+            // pause Video - prevent triggering onDataWaiting from VODPlayer
+            prevSlide?.activeLayer.pause(false, true, false);
             // 2 RAF - wait for browser render complete (CSS changes, etc.)
             this.layoutService.env.requestAnimationFrame(() => {
                 this.layoutService.env.requestAnimationFrame(() => {
@@ -3970,34 +4010,10 @@ let SlideApi$1 = class SlideApi {
         }
         this._slideInRender = false;
     }
-    _slideBoxRenderError(prevSlide) {
-        // if (!slideInRender) {
-        //     slideInRender = true;
-        //     return;
-        // }
-        const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
-        const slideBoxPrerender = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName}`);
-        if (slideBox && slideBoxPrerender) {
-            const slides = Array.prototype.slice.call(slideBoxPrerender.querySelectorAll(".narrative-slide"));
-            for (let i = 0; i < slides.length; ++i) {
-                const slide = slides[i];
-                if (slide) {
-                    slide.innerHTML = "";
-                }
-            }
-            slideBoxPrerender.classList.remove(SlideApi.prerenderBoxClassName);
-            slideBox.classList.remove(SlideApi.renderedBoxClassName);
-            slideBox.classList.add(SlideApi.prerenderBoxClassName);
-            prevSlide?.onBeforeUnmount();
-            slideBox.innerHTML = "";
-            slideBoxPrerender.classList.add(SlideApi.renderedBoxClassName);
-        }
-        // slideInRender = false;
-    }
     _slideConfig = {};
     async slideStart(config) {
         // console.log(`slideStart slideIdx: ${this.activeLayer.slideIndex} state: ${this._state}`);
-        if (!(this._state === 10 /* STATE.STOPPED */ || this._state === 1 /* STATE.INITED */)) {
+        if (!(this._state === 12 /* STATE.STOPPED */ || this._state === 1 /* STATE.INITED */)) {
             return { currentTime: 0 };
         }
         this._state = 2 /* STATE.START */;
@@ -4012,30 +4028,32 @@ let SlideApi$1 = class SlideApi {
             }
             this._afterStartInitQueue = [];
         }
-        if (this._afterResumeQueue && Array.isArray(this._afterResumeQueue)) {
-            for (const job of this._afterResumeQueue) {
+        if (this._afterAppResumeQueue && Array.isArray(this._afterAppResumeQueue)) {
+            for (const job of this._afterAppResumeQueue) {
                 if (isFunction(job)) {
                     job();
                 }
             }
-            this._afterResumeQueue = [];
+            this._afterAppResumeQueue = [];
         }
         const { currentTime } = await this.slide.activeLayer.start(this._slideConfig.muted);
         this._state = 3 /* STATE.STARTED */;
         if (this.slide.activeLayer.isLayerForcePaused) {
-            this._state = 7 /* STATE.PAUSED */;
+            this._state = 9 /* STATE.USER_PAUSED */;
         }
         return { currentTime };
     }
     async slideRestart(config) {
-        this._state = 10 /* STATE.STOPPED */;
+        this._state = 12 /* STATE.STOPPED */;
         return this.slideStart(config);
     }
     _pauseCbTimer = null;
-    async slidePause() {
+    async slideUserPause() {
+        // apply user pause only if state is started or resumed
         if (!(this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */)) {
             return;
         }
+        // TODO - move to Android SlideApi adapter
         // обход бага на андроиде (вызывает pause/resume при любом нажатии на экран, даже если это клик - для перехода по слайдам)
         // поэтому делаем отложенный вызов (300мс) а если следом приходит stop - то отменяем таймер
         const pauseCb = () => {
@@ -4046,15 +4064,16 @@ let SlideApi$1 = class SlideApi {
                 // stop pause event (from sdk) if _narrative_range_slider is active
                 return;
             }
-            this._state = 6 /* STATE.PAUSE */;
+            this._state = 8 /* STATE.USER_PAUSE */;
             // _log("pause: " + (performance.now() - window.start));
             this.slide.activeLayer.pause(false, false);
             // clean up
             if (this._pauseCbTimer != null) {
                 clearTimeout(this._pauseCbTimer);
             }
-            this._state = 7 /* STATE.PAUSED */;
+            this._state = 9 /* STATE.USER_PAUSED */;
         };
+        // todo move to Android adapter
         if (this.sdkApi.isAndroid) {
             this._pauseCbTimer = this.layoutService.env.setTimeout(pauseCb, 300);
         }
@@ -4062,38 +4081,68 @@ let SlideApi$1 = class SlideApi {
             pauseCb();
         }
     }
-    async slideResume() {
+    async slideUserResume() {
         if (this._pauseCbTimer != null) {
             // отменяем pause если есть (баг андроида - шлет pause/resume на простой клик)
             clearTimeout(this._pauseCbTimer);
         }
-        if (this._state !== 7 /* STATE.PAUSED */) {
+        if (this._state !== 9 /* STATE.USER_PAUSED */) {
             return;
         }
         this._state = 4 /* STATE.RESUME */;
         // _log("resume: " + (performance.now() - window.start));
-        if (this._afterResumeQueue && Array.isArray(this._afterResumeQueue)) {
-            for (const job of this._afterResumeQueue) {
+        // fallback for native sdk without user and app pause event
+        if (!this._separateUserAndAppPause) {
+            if (this._afterAppResumeQueue && Array.isArray(this._afterAppResumeQueue)) {
+                for (const job of this._afterAppResumeQueue) {
+                    if (isFunction(job)) {
+                        job();
+                    }
+                }
+                this._afterAppResumeQueue = [];
+            }
+        }
+        this.slide.activeLayer.resume();
+        this._state = 5 /* STATE.RESUMED */;
+    }
+    /**
+     * Call on app gone background
+     */
+    async slideAppPause() {
+        this._state = 6 /* STATE.APP_PAUSE */;
+        this.slide.activeLayer.pause(false, false);
+        this._state = 7 /* STATE.APP_PAUSED */;
+    }
+    /**
+     * Call on app gone foreground after a background
+     */
+    async slideAppResume() {
+        if (this._state !== 7 /* STATE.APP_PAUSED */) {
+            return;
+        }
+        this._state = 4 /* STATE.RESUME */;
+        if (this._afterAppResumeQueue && Array.isArray(this._afterAppResumeQueue)) {
+            for (const job of this._afterAppResumeQueue) {
                 if (isFunction(job)) {
                     job();
                 }
             }
-            this._afterResumeQueue = [];
+            this._afterAppResumeQueue = [];
         }
         this.slide.activeLayer.resume();
         this._state = 5 /* STATE.RESUMED */;
     }
     async slideStop(options) {
-        if (!(this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */ || this._state === 7 /* STATE.PAUSED */)) {
+        if (!(this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */ || this._state === 9 /* STATE.USER_PAUSED */)) {
             return;
         }
-        this._state = 9 /* STATE.STOP */;
+        this._state = 11 /* STATE.STOP */;
         if (this._pauseCbTimer != null) {
             // отменяем pause если есть (баг андроида - шлет pause/resume на простой клик)
             clearTimeout(this._pauseCbTimer);
         }
         await this.slide.activeLayer.stop(options);
-        this._state = 10 /* STATE.STOPPED */;
+        this._state = 12 /* STATE.STOPPED */;
     }
     slideTimerEnd() {
         const defaultAction = () => {
@@ -4126,7 +4175,7 @@ let SlideApi$1 = class SlideApi {
     // skip state checking and sdk issues
     async slidePauseUI() {
         await this.slide.activeLayer.pause(false, false);
-        this._state = 8 /* STATE.FORCE_PAUSED */;
+        this._state = 10 /* STATE.FORCE_PAUSED */;
     }
     // for call from SlideApi internals (from widgets)
     // skip state checking and sdk issues
@@ -4143,7 +4192,7 @@ let SlideApi$1 = class SlideApi {
         this._slideConfig.muted = true;
     }
     get isStopped() {
-        return this._state === 10 /* STATE.STOPPED */;
+        return this._state === 12 /* STATE.STOPPED */;
     }
     afterStartInitQueuePush(cb) {
         if (!isFunction(cb)) {
@@ -4156,15 +4205,20 @@ let SlideApi$1 = class SlideApi {
             cb();
         }
     }
-    afterResumeQueuePush(cb) {
+    afterAppResumeQueuePush(cb) {
         if (!isFunction(cb)) {
             return false;
         }
-        if ([4 /* STATE.RESUME */, 5 /* STATE.RESUMED */, 1 /* STATE.INITED */, 2 /* STATE.START */, 3 /* STATE.STARTED */].includes(this._state)) {
+        let states = [4 /* STATE.RESUME */, 5 /* STATE.RESUMED */, 1 /* STATE.INITED */, 2 /* STATE.START */, 3 /* STATE.STARTED */, 8 /* STATE.USER_PAUSE */, 9 /* STATE.USER_PAUSED */];
+        // fallback for native sdk without user and app pause event
+        if (!this._separateUserAndAppPause) {
+            states = [4 /* STATE.RESUME */, 5 /* STATE.RESUMED */, 1 /* STATE.INITED */, 2 /* STATE.START */, 3 /* STATE.STARTED */];
+        }
+        if (states.includes(this._state)) {
             cb();
         }
         else {
-            this._afterResumeQueue.push(cb);
+            this._afterAppResumeQueue.push(cb);
         }
     }
     get activeLayer() {
@@ -4743,7 +4797,7 @@ let SlideApi$1 = class SlideApi {
             }
         }
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{\n            sdkApi: SDKApi;\n            slideWrapper: HTMLElement;\n            viewport: Window;\n            userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;\n            slideRatio: number;\n            isFullscreen: boolean;\n            slideLoadedCb?: (data: { slide: Slide; result: boolean; reason?: string }) => void;\n            getViewportWidth: () => number;\n            getViewportHeight: () => number;\n            overlappingActionBarHeight?: number;\n        }`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`{\n            sdkApi: SDKApi;\n            slideWrapper: HTMLElement;\n            viewport: Window;\n            userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;\n            slideRatio: number;\n            isFullscreen: boolean;\n            slideLoadedCb?: (data: { cardId: number; slideIndex: number; result: boolean; reason?: string }) => void;\n            getViewportWidth: () => number;\n            getViewportHeight: () => number;\n            overlappingActionBarHeight?: number;\n            separateUserAndAppPause: boolean;\n        }`]; }
 };
 
 const slideApiPeerDeps = {};
@@ -4792,6 +4846,7 @@ class SlideApi extends SlideApi$1 {
             getViewportWidth: () => slideWrapper.clientWidth,
             getViewportHeight: () => slideWrapper.clientHeight,
             overlappingActionBarHeight: config.overlappingActionBarHeight,
+            separateUserAndAppPause: true,
         });
     }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKInterface`, `{\n            root: HTMLElement;\n            slideRatio: number;\n            isFullscreen: boolean;\n            nonce?: string;\n            viewport: Window;\n            userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;\n            VODPlayer?: typeof VODPlayer;\n            overlappingActionBarHeight?: number;\n        }`]; }
@@ -17097,6 +17152,7 @@ class WidgetProducts extends WidgetBase {
             this.isOpen = true;
             // prevent next slide navigation gesture
             this.isClickCapturedByWidget = true;
+            this.sdkApi.disableHorizontalSwipeGesture();
             this.sdkApi.disableVerticalSwipeGesture();
             this.sdkApi.disableBackpress();
             this._statEventWidgetOpen(this.currentModels);
@@ -17116,6 +17172,7 @@ class WidgetProducts extends WidgetBase {
         this.productsView?.classList.add("ias-products-container-view--hidden");
         this.element.classList.remove("hidden");
         this.isClickCapturedByWidget = false;
+        this.sdkApi.enableHorizontalSwipeGesture();
         if (this.swipeGestureDetector != null) {
             this.swipeGestureDetector.destroy();
             this.swipeGestureDetector = null;
@@ -18575,6 +18632,7 @@ class WidgetRangeSlider extends WidgetBase {
         }
         e.preventDefault();
         this.isClickCapturedBySlider = true;
+        this.sdkApi.disableHorizontalSwipeGesture();
         if (!this.maxHandlePos) {
             this.update(true, false);
         }
@@ -18604,6 +18662,7 @@ class WidgetRangeSlider extends WidgetBase {
     handleEnd(e) {
         this.env.requestAnimationFrame(() => {
             this.isClickCapturedBySlider = false;
+            this.sdkApi.enableHorizontalSwipeGesture();
         });
         // e.preventDefault();
         this.env.document.removeEventListener("touchmove", this.handleMove);