@inappstory/slide-api 0.1.38 → 0.1.40

package/dist/index.js

@@ -6381,7 +6381,7 @@ class Slider {
             timer.classList.add("cards-slider__timer--reverse-direction");
         }
         const timeline = document.createElement("div");
-        timeline.classList.add("cards-slider__timer_timeline", "touchable");
+        timeline.classList.add("cards-slider__timer_timeline");
         const timelineFill = document.createElement("div");
         timelineFill.classList.add("cards-slider__timer_timeline-fill");
         timeline.append(timelineFill);
@@ -6547,6 +6547,8 @@ class Slider {
         }
     }
     async updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+        // Don't use <activeSlide> and <activeIndex>, as <slideIndex> may differ from <activeIndex>
+        const slide = this.slides[slideIndex];
         switch (action) {
             case "before_start" /* TIMELINE_ACTION.BEFORE_START */: {
                 // switch timeline to active slide and wait for start (wait VOD loading)
@@ -6578,7 +6580,7 @@ class Slider {
                     // we must resume timer - for trigger done callback and hide Card (SingleSlideTimer business logic)
                 }
                 if (resumeTimer) {
-                    this.activeSlide?.timer.resume(currentTime, duration);
+                    slide?.timer.resume(currentTime, duration);
                 }
                 break;
             }
@@ -6586,7 +6588,7 @@ class Slider {
                 if (showLoader) {
                     this.config.onSlideDataWaiting();
                 }
-                this.activeSlide?.timer.pause();
+                slide?.timer.pause();
                 if (this.isSingleSlideTimerActive) {
                     this.pausedAt = new Date().getTime();
                 }
@@ -6598,7 +6600,7 @@ class Slider {
                 if (showError) {
                     this.config.onSlideDataError();
                 }
-                this.activeSlide?.timer.stop();
+                slide?.timer.stop();
                 // todo нужен STOP когда вручную переключаем слайд на другой
                 // console.log("TIMELINE_ACTION.STOP", { activeSlide: this.activeSlide, duration });
                 break;
@@ -6673,6 +6675,22 @@ class CardApi {
         this._overlappingActionBarHeight = config.overlappingActionBarHeight ?? 0;
         this._separateUserAndAppPause = config.separateUserAndAppPause;
         this._useSdkCacheForMultislideMode = config.useSdkCacheForMultislideMode;
+        let isSafari = false;
+        if (this.config.sdkApi.isIOS) {
+            isSafari = true;
+        }
+        else {
+            if (navigator.vendor &&
+                navigator.vendor.indexOf("Apple") > -1 &&
+                navigator.userAgent &&
+                navigator.userAgent.indexOf("CriOS") == -1 &&
+                navigator.userAgent.indexOf("FxiOS") == -1) {
+                isSafari = true;
+            }
+        }
+        if (isSafari) {
+            this.config.root.classList.add("_isSafari");
+        }
         this.refreshSizes = proxy(this.refreshSizes, this);
         this.getSdkClientVariables = proxy(this.getSdkClientVariables, this);
         this.refreshSizes();
@@ -17799,8 +17817,19 @@ class WidgetCopy extends WidgetBase {
     }
     onStart() {
         super.onStart();
-        // add active class for enable animation
-        this.resultLayer?.classList.add("active");
+        /**
+         * Prevent showing resultLayer on SlideStart when widget has animation
+         * Clean up all possible animation classes (.narrative-element-animation-fade-in-up, etc.)
+         */
+        // TODO this is temporal workaround, in future - move animation on separated layer, prevent intersection with widget css properties
+        this.resultLayer?.classList.remove("narrative-element-animation", "active", "animated");
+        const toDelete = [];
+        this.resultLayer?.classList.forEach(item => {
+            if (item.includes("narrative-element-animation-")) {
+                toDelete.push(item);
+            }
+        });
+        this.resultLayer?.classList.remove(...toDelete);
         if (this.isPromotionalCode) {
             this.fetchPromoCode();
         }
@@ -24333,7 +24362,7 @@ class WidgetReactions extends WidgetBase {
     createReactionsModel() {
         return {
             icons: getTagData(this.element, "icons")?.split(",") ?? [],
-            showAnimationAfterSelection: Boolean(getTagData(this.element, "showAnimationAfterSelection")),
+            showAnimationAfterSelection: getTagData(this.element, "showAnimationAfterSelection") === "true",
             resultDisplayMode: getTagData(this.element, "resultDisplayMode"),
             resultDisplayFormat: getTagData(this.element, "resultDisplayFormat"),
         };