@inappstory/slide-api 0.1.13 → 0.1.15

package/dist/index.cjs

@@ -1211,7 +1211,9 @@ class DataInput {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1259,7 +1261,9 @@ class Barcode {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1297,7 +1301,9 @@ class Button extends ClickableBase {
     onResume() { }
     onStart() { }
     onStop() { }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1342,7 +1348,9 @@ class Copy {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1393,7 +1401,9 @@ class DateCountdown {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1441,7 +1451,9 @@ class Poll {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1494,7 +1506,9 @@ class PollLayers {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1542,7 +1556,9 @@ class Products {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1593,7 +1609,9 @@ class Quest {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1645,7 +1663,9 @@ class Quiz {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1696,7 +1716,9 @@ class QuizGrouped {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1747,7 +1769,9 @@ class RangeSlider {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     get isClickCapturedBySlider() {
         return this._widgetApi.isClickCapturedBySlider(this._elementNodeRef);
     }
@@ -1798,7 +1822,9 @@ class Rate {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1852,7 +1878,9 @@ class Share {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1887,7 +1915,9 @@ class SwipeUpItems {
     onResume() { }
     onStart() { }
     onStop() { }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1938,7 +1968,9 @@ class Test {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -1989,7 +2021,9 @@ class Vote {
     onStop() {
         this._widgetApi.onStop(this._elementNodeRef);
     }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -2018,7 +2052,9 @@ class Text {
     onResume() { }
     onStart() { }
     onStop() { }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -2139,7 +2175,9 @@ class Image extends ClickableBase {
     onResume() { }
     onStart() { }
     onStop() { }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -2171,7 +2209,9 @@ class SwipeUp {
     onResume() { }
     onStart() { }
     onStop() { }
-    onBeforeUnmount() { }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
     handleClick() {
         return false;
     }
@@ -2270,12 +2310,12 @@ class Video {
     }
     onStart() { }
     onStop() { }
-    onBeforeUnmount() {
+    async onBeforeUnmount() {
         // clean up memory and cpu processes
         // @ts-ignore
         // _log("onBeforeUnmount", true)
         // console.log("onBeforeUnmount")
-        this._destroyVODPlayer();
+        return await this._destroyVODPlayer();
     }
     _initVOD(vodData) {
         const onWaiting = () => {
@@ -3398,10 +3438,8 @@ class Layer {
     disableAudio() {
         this.videoElement?.disableAudio();
     }
-    onBeforeUnmount() {
-        for (const element of this._elements) {
-            element.onBeforeUnmount();
-        }
+    async onBeforeUnmount() {
+        return Promise.all(this._elements.map(element => element.onBeforeUnmount())).then();
     }
     get isLayerForcePaused() {
         return this.elements.some(element => element.isLayerForcePaused);
@@ -3683,10 +3721,8 @@ class Slide {
             }
         });
     }
-    onBeforeUnmount() {
-        for (const layer of this._layers) {
-            layer.onBeforeUnmount();
-        }
+    async onBeforeUnmount() {
+        return Promise.all(this._layers.map(layer => layer.onBeforeUnmount())).then();
     }
     get layoutService() {
         return container.get({ identifier: "LayoutService" });
@@ -3749,9 +3785,9 @@ let SlideApi$1 = class SlideApi {
             });
         }
     }
-    destroy() {
+    async destroy() {
         if (this.slide != null) {
-            this.slide.onBeforeUnmount();
+            await this.slide.onBeforeUnmount();
         }
         this.destroyListeners();
         this._state = 13 /* STATE.DESTROYED */;
@@ -3783,22 +3819,30 @@ let SlideApi$1 = class SlideApi {
         let xOffset = "0px";
         // for elements with bottom anchor (absolute position)
         let yOffset = "0px";
-        // alert(viewportHeight);
-        if (viewportRatio > _ratio) {
-            // disable _isFullscreen if viewport small
-            _isFullscreen = false;
-        }
         if (_isFullscreen) {
-            // fit by width, top and bottom - to offscreen or fill with bg image
-            slideWidth = viewportWidth;
-            slideHeight = Math.ceil(viewportWidth / _ratio);
-            offset = Math.ceil(slideHeight - viewportHeight) / 2;
-            if (slideOffset != null) {
-                slideOffset.style.margin = -1 * offset + "px" + " 0 ";
+            // более квадратное чем надо (desktop)
+            if (viewportRatio > _ratio) {
+                // fit by height
+                slideHeight = viewportHeight;
+                slideWidth = Math.ceil(slideHeight * _ratio);
+                offset = Math.ceil(slideWidth - viewportWidth) / 2;
+                if (slideOffset != null) {
+                    slideOffset.style.margin = "0 " + -offset + "px"; // -8.5
+                }
+                xOffset = offset + "px";
+            }
+            else {
+                // fit by width, top and bottom - to offscreen or fill with bg image
+                slideWidth = viewportWidth;
+                slideHeight = Math.ceil(viewportWidth / _ratio);
+                offset = Math.ceil(slideHeight - viewportHeight) / 2;
+                if (slideOffset != null) {
+                    slideOffset.style.margin = -1 * offset + "px" + " 0 ";
+                }
+                // offset from viewport bottom to StoryBottom plus safe area offset bottom
+                yOffset = `calc(${offset + this._overlappingActionBarHeight}px + env(safe-area-inset-bottom))`;
+                // detect safe area offset
             }
-            // offset from viewport bottom to StoryBottom plus safe area offset bottom
-            yOffset = `calc(${offset + this._overlappingActionBarHeight}px + env(safe-area-inset-bottom))`;
-            // detect safe area offset
         }
         else {
             // более квадратное чем надо
@@ -3846,7 +3890,7 @@ let SlideApi$1 = class SlideApi {
         if (slideBox && slideBoxPrerender) {
             if (this._slideInRender) {
                 this._slideInRender = false;
-                this._slideBoxRenderComplete(null);
+                await this._slideBoxRenderComplete(null);
             }
             this._slideInInit = null;
             this._slideInRender = true;
@@ -4009,7 +4053,7 @@ let SlideApi$1 = class SlideApi {
                 this._state = 1 /* STATE.INITED */;
                 await mediaResourcesWithTimeoutPromise;
                 result.result = true;
-                slideBoxCb();
+                await slideBoxCb();
             }
             else {
                 this._state = 12 /* STATE.STOPPED */;
@@ -4021,7 +4065,7 @@ let SlideApi$1 = class SlideApi {
         }
         catch (reason) {
             console.log("SlideInit, onAllMediaLoaded reject", reason);
-            slideBoxCb();
+            await slideBoxCb();
             this.layoutService.env.setTimeout(() => {
                 slideReadyResolve();
             });
@@ -4031,31 +4075,48 @@ let SlideApi$1 = class SlideApi {
         return result;
     }
     _slideInRender = false;
-    _slideBoxRenderComplete(prevSlide) {
+    async _slideBoxRenderComplete(prevSlide) {
         if (!this._slideInRender) {
             this._slideInRender = true;
             return;
         }
-        const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
-        const slideBoxPrerender = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName}`);
-        if (slideBox && slideBoxPrerender) {
-            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(() => {
-                    prevSlide?.onBeforeUnmount();
-                    // @ts-ignore
-                    // _log("clear innerHTML", true);
-                    slideBox.innerHTML = "";
-                });
-            });
-            slideBoxPrerender.classList.add(SlideApi.renderedBoxClassName);
-        }
-        this._slideInRender = false;
+        return new Promise(resolve => {
+            const slideBox = this._slideWrapper.querySelector(`.${SlideApi.renderedBoxClassName}`);
+            const slideBoxPrerender = this._slideWrapper.querySelector(`.${SlideApi.prerenderBoxClassName}`);
+            if (slideBox && slideBoxPrerender) {
+                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.)
+                if (prevSlide) {
+                    this.layoutService.env.requestAnimationFrame(() => {
+                        this.layoutService.env.requestAnimationFrame(() => {
+                            if (prevSlide) {
+                                prevSlide.onBeforeUnmount().then(_ => {
+                                    // @ts-ignore
+                                    // _log("clear innerHTML", true);
+                                    slideBox.innerHTML = "";
+                                    resolve();
+                                });
+                            }
+                            else {
+                                resolve();
+                            }
+                        });
+                    });
+                }
+                else {
+                    resolve();
+                }
+                slideBoxPrerender.classList.add(SlideApi.renderedBoxClassName);
+            }
+            else {
+                resolve();
+            }
+            this._slideInRender = false;
+        });
     }
     _slideConfig = {};
     async slideStart(config) {