@inappstory/slide-api 0.1.25 → 0.1.26

package/dist/index.js

@@ -1133,6 +1133,9 @@ class EsModuleSdkApi {
     getCardSessionValue(element, key) {
         return this.sdkBinding.getCardSessionValue(key);
     }
+    isSdkSupportUpdateTimeline() {
+        return true;
+    }
     updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
         this.sdkBinding.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
     }
@@ -1177,12 +1180,75 @@ class EsModuleSdkApi {
         this.sdkBinding.onEvent(name, event);
     }
     onCardLoadingStateChange(state, reason) {
-        console.log("onCardLoadingStateChange", { state });
+        // console.log("onCardLoadingStateChange", { state });
         this.sdkBinding.onCardLoadingStateChange(state, reason);
     }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`SDKInterface`]; }
 }
 
+class CardLoadingStateController {
+    onCardLoadingStateChange;
+    constructor(onCardLoadingStateChange) {
+        this.onCardLoadingStateChange = onCardLoadingStateChange;
+    }
+    timeout = 300;
+    onSetLoadStartState() {
+        this.onBeforeStateChanged();
+        // prevent micro loaders in UI
+        if (this.currentState === 1 /* CARD_LOADING_STATE.LOADED */) {
+            this.deferredDataWaitingStateTimerId = window.setTimeout(() => {
+                this.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+                this.dataWaitingStartedAt = Date.now();
+            }, this.timeout);
+        }
+        else {
+            this.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+            this.dataWaitingStartedAt = Date.now();
+        }
+        this.currentState = 0 /* CARD_LOADING_STATE.LOADING */;
+    }
+    onSetLoadEndState() {
+        this.onBeforeStateChanged();
+        // prevent micro loaders in UI
+        const delay = this.timeout;
+        let dataWaitingLoaderSpent = delay;
+        if (this.dataWaitingStartedAt != null) {
+            dataWaitingLoaderSpent = Date.now() - this.dataWaitingStartedAt;
+        }
+        if (dataWaitingLoaderSpent < delay) {
+            this.deferredResumeStateTimerId = window.setTimeout(() => this.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */), dataWaitingLoaderSpent - delay);
+        }
+        else {
+            this.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */);
+        }
+        this.currentState = 1 /* CARD_LOADING_STATE.LOADED */;
+    }
+    onSetLoadErrorState(reason) {
+        this.onBeforeStateChanged();
+        this.onCardLoadingStateChange(2 /* CARD_LOADING_STATE.LOADING_ERROR */, reason);
+        this.currentState = 2 /* CARD_LOADING_STATE.LOADING_ERROR */;
+    }
+    currentState = 0 /* CARD_LOADING_STATE.LOADING */;
+    deferredDataWaitingStateTimerId = null;
+    deferredResumeStateTimerId = null;
+    dataWaitingStartedAt = null;
+    clearDeferredDataWaitingStateTimerId() {
+        if (this.deferredDataWaitingStateTimerId != null) {
+            window.clearTimeout(this.deferredDataWaitingStateTimerId);
+        }
+    }
+    clearDeferredResumeStateTimerId() {
+        if (this.deferredResumeStateTimerId != null) {
+            window.clearTimeout(this.deferredResumeStateTimerId);
+        }
+    }
+    onBeforeStateChanged() {
+        this.clearDeferredDataWaitingStateTimerId();
+        this.clearDeferredResumeStateTimerId();
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`(state: CARD_LOADING_STATE, reason?: string) => void`]; }
+}
+
 const DEFAULT_SLIDE_DURATION = 10000;
 
 class DataInput {
@@ -3301,19 +3367,7 @@ class SlideTimeline {
         return SlideTimeline.layoutService;
     }
     get isSDKSupportUpdateTimeline() {
-        if (this.slideApiDeps.isAndroid) {
-            return Boolean(SlideTimeline.layoutService.env.Android && "updateTimeline" in SlideTimeline.layoutService.env.Android);
-        }
-        else if (this.slideApiDeps.isIOS) {
-            const mh = SlideTimeline.layoutService.env?.webkit?.messageHandlers ?? {};
-            return "updateTimeline" in mh;
-        }
-        else if (this.slideApiDeps.isWeb) {
-            return true;
-        }
-        else {
-            return false;
-        }
+        return this.slideApiDeps.isSdkSupportUpdateTimeline();
     }
     get isSdkSupportTimelineOnBeforeStart() {
         return this.slideApiDeps.isSdkSupportTimelineOnBeforeStart();
@@ -3458,6 +3512,7 @@ class SlideTimeline {
         this.onBeforeStateChanged();
         if (this.isSDKSupportUpdateTimeline) {
             this.updateTimeline("stop" /* TIMELINE_ACTION.STOP */);
+            // console.log(`TIMELINE_ACTION -> slideStopped, index: ${this.slideIndex}`);
         }
     }
     /**
@@ -4689,7 +4744,9 @@ let SlideApi$1 = class SlideApi {
         this._state = 5 /* STATE.RESUMED */;
     }
     async slideStop(options) {
-        if (!(this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */ || this._state === 9 /* STATE.USER_PAUSED */)) {
+        // console.log(`TIMELINE_ACTION -> STOP, index: ${this.slide.slideIndex}, state: ${this._state}`);
+        // из состояния START (слайд (например с видео) еще не стартовал) тоже позволяем прерывать - чтобы был правильный LC при быстром пролистывании слайдера
+        if (!(this._state === 2 /* STATE.START */ || this._state === 3 /* STATE.STARTED */ || this._state === 5 /* STATE.RESUMED */ || this._state === 9 /* STATE.USER_PAUSED */)) {
             return;
         }
         this._state = 11 /* STATE.STOP */;
@@ -5528,7 +5585,9 @@ class SlideApiDepsMultiSlideMode {
         return this.sdkApi.isExistsShowNextCard;
     }
     cardShowNext() {
-        this.sdkApi.cardShowNext();
+        return;
+        // skip action in multislide mode (business logic)
+        // this.sdkApi.cardShowNext();
     }
     /** @deprecated, used only in native sdk **/
     cardPausedCallback(currentTime) {
@@ -5560,6 +5619,9 @@ class SlideApiDepsMultiSlideMode {
     showCardSlide(index) {
         this.slider.showByIndex(index);
     }
+    isSdkSupportUpdateTimeline() {
+        return true;
+    }
     updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
         this.slider.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
     }
@@ -5710,6 +5772,9 @@ class SlideApiDepsSingleSlideMode {
     showCardSlide(index) {
         this.sdkApi.showCardSlide(index);
     }
+    isSdkSupportUpdateTimeline() {
+        return this.sdkApi.isSdkSupportUpdateTimeline();
+    }
     updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
         this.sdkApi.updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
     }
@@ -5766,12 +5831,16 @@ class SlideTimer {
             this.timerId = null;
         }
     }
-    resume(duration = 0) {
+    resume(currentTime = undefined, duration = 0) {
         this._pause = false;
         if (!this._started) {
             this.start(duration);
         }
         else {
+            if (currentTime != null) {
+                // timeLeft correction
+                this.timeLeft = this.duration - currentTime;
+            }
             this.tick();
         }
     }
@@ -5787,12 +5856,12 @@ class SlideTimer {
             }
             const dtDiff = new Date().getTime() - rafStartTime;
             this.timeLeft -= dtDiff;
-            let progress = Math.round(((this.duration - this.timeLeft) / this.duration) * 100 * 10000) / 10000;
-            if (progress > 100) {
-                progress = 100;
+            let progressPercent = Math.round(((this.duration - this.timeLeft) / this.duration) * 100 * 10000) / 10000;
+            if (progressPercent > 100) {
+                progressPercent = 100;
             }
-            this.updateCb(progress);
-            if (progress < 100) {
+            this.updateCb(progressPercent);
+            if (progressPercent < 100) {
                 if (this._pause !== true) {
                     this.tick();
                 }
@@ -5802,7 +5871,43 @@ class SlideTimer {
             }
         });
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`(callback: () => void) => number`, `(timerId: number) => void`, `(progress: number) => void`, `() => void`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`(callback: () => void) => number`, `(timerId: number) => void`, `(progressPercent: number) => void`, `() => void`]; }
+}
+
+/**
+ * usage TS interface with ctor
+ * https://blog.logrocket.com/writing-constructor-typescript/
+ *
+ * @param ctor
+ * @param slides
+ * @param getLayoutDirection
+ */
+function createTimelineController(ctor, slides, getLayoutDirection) {
+    return new ctor(slides, getLayoutDirection);
+}
+class TimelineController {
+    slides;
+    getLayoutDirection;
+    constructor(slides, getLayoutDirection) {
+        this.slides = slides;
+        this.getLayoutDirection = getLayoutDirection;
+    }
+    onSlideTimerUpdate(index, progressPercent) {
+        this.slides[index]?.updateTimelineProgress(progressPercent, true);
+    }
+    onSlideBeforeStart(index) {
+        // fill to 100% all previous slides
+        for (let i = 0; i < index; ++i) {
+            this.slides[i]?.updateTimelineProgress(100, false);
+        }
+        // fill to 0% all next slides (for user revert direction)
+        for (let i = index + 1; i < this.slides.length; ++i) {
+            this.slides[i]?.updateTimelineProgress(0, false);
+        }
+        // activate current slide
+        this.slides[index]?.updateTimelineProgress(0, true);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`Array`, `GetLayoutDirection`]; }
 }
 
 class Slider {
@@ -5824,9 +5929,11 @@ class Slider {
             slides: config.slides,
             nonce: config.nonce,
             slideRender: config.slideRender,
+            navbarAppearance: config.navbarAppearance,
         });
         config.root.appendChild(slideWrapper);
         this.slideWrapperElement = slideWrapper;
+        this.timelineController = createTimelineController(TimelineController, this.slides, this.config.getLayoutDirection.bind(this));
         // cardMounted: (card: HTMLElement) => Promise<void>
         requestAnimationFrame(async () => {
             await Promise.all(this.slides.map((slide, index) => config.onSlideMounted(slide.element, index)));
@@ -5842,44 +5949,109 @@ class Slider {
     bulletsContainer = null;
     slidesFirstRenders = [];
     slideWrapperElement;
-    updateBulletActiveIndex;
-    updateTimelineProgress;
-    createSliderElement = ({ slides, nonce, slideRender }) => {
+    timelineController;
+    assembleNavbarCssVariables(navbarAppearance) {
+        let css = "";
+        if (navbarAppearance.edge_offset != null) {
+            css += `--navbar-edge-offset: ${navbarAppearance.edge_offset};`;
+        }
+        if (navbarAppearance.active_timeline_width != null) {
+            css += `--navbar-active-timeline_width: ${navbarAppearance.active_timeline_width};`;
+        }
+        if (navbarAppearance.background_color != null) {
+            css += `--navbar-background-color: ${navbarAppearance.background_color};`;
+        }
+        if (navbarAppearance.border_radius != null) {
+            css += `--navbar-border-radius: ${navbarAppearance.border_radius};`;
+        }
+        if (navbarAppearance.drop_shadow_blur != null) {
+            css += `--navbar-drop-shadow-blur: ${navbarAppearance.drop_shadow_blur};`;
+        }
+        if (navbarAppearance.drop_shadow_color != null) {
+            css += `--navbar-drop-shadow-color: ${navbarAppearance.drop_shadow_color};`;
+        }
+        if (navbarAppearance.drop_shadow_x_offset != null) {
+            css += `--navbar-drop-shadow-x-offset: ${navbarAppearance.drop_shadow_x_offset};`;
+        }
+        if (navbarAppearance.drop_shadow_y_offset != null) {
+            css += `--navbar-drop-shadow-y-offset: ${navbarAppearance.drop_shadow_y_offset};`;
+        }
+        if (navbarAppearance.timeline_background_color != null) {
+            css += `--navbar-timeline-background-color: ${navbarAppearance.timeline_background_color};`;
+        }
+        if (navbarAppearance.timeline_fill_color != null) {
+            css += `--navbar-timeline-fill-color: ${navbarAppearance.timeline_fill_color};`;
+        }
+        if (navbarAppearance.timeline_size != null) {
+            css += `--navbar-timeline-size: ${navbarAppearance.timeline_size};`;
+        }
+        if (navbarAppearance.timelines_gap != null) {
+            css += `--navbar-timelines-gap: ${navbarAppearance.timelines_gap};`;
+        }
+        if (navbarAppearance.vertical_padding != null) {
+            css += `--navbar-vertical-padding: ${navbarAppearance.vertical_padding};`;
+        }
+        if (navbarAppearance.horizontal_padding != null) {
+            css += `--navbar-horizontal-padding: ${navbarAppearance.horizontal_padding};`;
+        }
+        return `.cards-slider {${css}`;
+    }
+    createSliderElement = ({ slides, nonce, slideRender, navbarAppearance, }) => {
         const style = document.createElement("style");
         if (nonce != null) {
             style.nonce = nonce;
         }
+        style.innerText = this.assembleNavbarCssVariables(navbarAppearance);
         const slider = document.createElement("div");
         slider.classList.add("cards-slider");
         const track = document.createElement("div");
         track.classList.add("cards-slider__track");
         this.sliderTrack = track;
-        for (let i = 0; i < slides.length; ++i) {
-            const slide = document.createElement("div");
-            slide.classList.add("cards-slider__slide");
-            slide.setAttribute("data-index", String(i));
-            this.slides[i] = {
-                element: slideRender(slides[i], i, this.slidesFirstRenders[i].firstRenderCallPromise),
-                timer: new SlideTimer(cb => window.requestAnimationFrame(cb), handle => window.cancelAnimationFrame(handle), this.onSlideTimerUpdate.bind(this), this.onSlideTimerEnd.bind(this)),
-            };
-            slide.appendChild(this.slides[i].element);
-            track.appendChild(slide);
-        }
-        const [bullets, updateBulletActiveIndex, updateTimelineProgress] = this.createBulletPoints(slides.length);
+        const [bullets, updateTimelineProgress] = this.createBulletPoints(slides.length, this.config.getLayoutDirection.bind(this), navbarAppearance.position);
         this.bulletsContainer = bullets;
-        this.updateBulletActiveIndex = updateBulletActiveIndex.bind(this);
-        this.updateTimelineProgress = updateTimelineProgress.bind(this);
+        this.slides = slides.map((slide, i) => ({
+            element: slideRender(slide, i, this.slidesFirstRenders[i].firstRenderCallPromise),
+            timer: new SlideTimer(cb => window.requestAnimationFrame(cb), handle => window.cancelAnimationFrame(handle), progressPercent => this.timelineController.onSlideTimerUpdate(i, progressPercent), this.onSlideTimerEnd.bind(this)),
+            updateTimelineProgress: (progressPercent, isActive) => updateTimelineProgress(i, progressPercent, isActive),
+        }));
+        for (let i = 0; i < this.slides.length; ++i) {
+            const slideElement = document.createElement("div");
+            slideElement.classList.add("cards-slider__slide");
+            slideElement.setAttribute("data-index", String(i));
+            slideElement.appendChild(this.slides[i].element);
+            track.appendChild(slideElement);
+        }
         slider.appendChild(track);
-        slider.appendChild(bullets);
+        const safeAreaView = document.createElement("div");
+        safeAreaView.classList.add("safe-area-view", "inset-0", "non-touchable");
+        const safeAreaRelativeZoneView = document.createElement("div");
+        safeAreaRelativeZoneView.classList.add("safe-area-relative-zone-view");
+        safeAreaRelativeZoneView.appendChild(bullets);
+        safeAreaView.appendChild(safeAreaRelativeZoneView);
+        slider.appendChild(safeAreaView);
         slider.appendChild(style);
         return slider;
     };
-    createBulletPoints(count) {
+    createBulletPoints(count, getLayoutDirection, position) {
         const bullets = document.createElement("div");
-        bullets.classList.toggle("cards-slider__bullets");
+        bullets.classList.add("cards-slider__navbar");
+        if (position === 0) {
+            bullets.classList.add("cards-slider__navbar--position-none");
+        }
+        else if (position === 1) {
+            bullets.classList.add("cards-slider__navbar--position-top");
+        }
+        else if (position === 2) {
+            bullets.classList.add("cards-slider__navbar--position-bottom");
+        }
+        else {
+            // default
+            bullets.classList.add("cards-slider__navbar--position-bottom");
+        }
+        bullets.dir = getLayoutDirection();
         for (let i = 0; i < count; ++i) {
             const bullet = document.createElement("div");
-            bullet.classList.add("cards-slider__bullet");
+            bullet.classList.add("cards-slider__timeline", "touchable");
             bullet.setAttribute("data-index", String(i));
             bullet.onclick = (e) => {
                 e.stopPropagation();
@@ -5893,56 +6065,57 @@ class Slider {
                 }
             };
             const bulletFill = document.createElement("div");
-            bulletFill.classList.add("cards-slider__bullet-fill");
+            bulletFill.classList.add("cards-slider__timeline-fill");
             bullet.append(bulletFill);
             bullets.appendChild(bullet);
         }
-        const onUpdateActiveIndex = (activeIndex) => {
-            if (activeIndex >= 0 && activeIndex < count) {
-                for (const bullet of bullets.querySelectorAll(".cards-slider__bullet--active")) {
-                    bullet.classList.toggle("cards-slider__bullet--active");
-                }
-                bullets.querySelector(`.cards-slider__bullet[data-index="${activeIndex}"]`)?.classList.toggle("cards-slider__bullet--active");
-            }
-        };
-        const onUpdateTimelineProgress = (index, progress) => {
+        // const onUpdateActiveIndex = (activeIndex: number) => {
+        //     if (activeIndex >= 0 && activeIndex < count) {
+        //         for (const bullet of bullets.querySelectorAll(".cards-slider__bullet--active")) {
+        //             bullet.classList.toggle("cards-slider__bullet--active");
+        //         }
+        //         bullets.querySelector(`.cards-slider__bullet[data-index="${activeIndex}"]`)?.classList.toggle("cards-slider__bullet--active");
+        //     }
+        // };
+        const onUpdateTimelineProgress = (index, progress, isActive) => {
             if (index >= 0 && index < count) {
-                const bullet = bullets.querySelector(`.cards-slider__bullet:nth-child(${index + 1}) .cards-slider__bullet-fill`);
-                if (bullet != null) {
-                    // todo RTL
-                    //need (in css) right: 100% instead of left -100%;
+                const bullet = bullets.querySelector(`.cards-slider__timeline:nth-child(${index + 1})`);
+                const bulletFill = bullet?.querySelector(".cards-slider__timeline-fill");
+                bullet?.classList[isActive ? "add" : "remove"]("cards-slider__timeline--active");
+                if (bulletFill != null) {
                     // todo remove progress after slide changed?
-                    bullet.style.setProperty("transform", `translateX(${progress}%)`);
-                    // transform: `translateZ(0) translateX(${
-                    //     index < this.$props.index
-                    //         ? "100%"
-                    //         : index === this.$props.index
-                    //             ? `${this.$props.timePercent}%`
-                    //             : "0%"
-                    // })`,
+                    if (this.config.getLayoutDirection() === "rtl") {
+                        progress = -1 * progress;
+                    }
+                    bulletFill.style.setProperty("transform", `translateX(${progress}%)`);
                 }
             }
         };
-        return [bullets, onUpdateActiveIndex, onUpdateTimelineProgress];
+        return [bullets, onUpdateTimelineProgress];
     }
     async showByIndex(newIndex) {
         const prevIndex = this.activeIndex;
         if (this.isAnimating)
             return prevIndex;
+        if (newIndex === prevIndex)
+            return prevIndex;
         if (prevIndex !== -1) {
             // skip for slider start
             this.config.onSlideLeft(this.slides[prevIndex].element, prevIndex);
-            this.config.onSlideStop();
+            await this.config.onSlideStop();
         }
         const { index, loadingError } = await this.initAndRenderSlide(newIndex);
         if (loadingError) {
             // todo via updateTimeline ????
             this.config.onSlideLoadingError(index, loadingError);
         }
-        await this.slideTo(index);
         if (!loadingError) {
             this.onShowSlide(index);
         }
+        await this.slideTo(index);
+        if (!loadingError) {
+            this.config.onSlideStart();
+        }
         return newIndex;
     }
     async showNextSlide() {
@@ -5956,17 +6129,20 @@ class Slider {
         if (prevIndex !== -1) {
             // skip for slider start
             this.config.onSlideLeft(this.slides[prevIndex].element, prevIndex);
-            this.config.onSlideStop();
+            await this.config.onSlideStop();
         }
         const { index, loadingError } = await this.initAndRenderSlide(newIndex);
         if (loadingError) {
             // todo via updateTimeline ????
             this.config.onSlideLoadingError(index, loadingError);
         }
-        await this.slideTo(index);
         if (!loadingError) {
             this.onShowSlide(index);
         }
+        await this.slideTo(index);
+        if (!loadingError) {
+            this.config.onSlideStart();
+        }
         return newIndex;
     }
     async initAndRenderSlide(index) {
@@ -6001,9 +6177,9 @@ class Slider {
         }
     }
     onShowSlide(index) {
-        this.updateBulletActiveIndex(index);
+        // this.updateBulletActiveIndex(index);
         this.config.onShowSlide(this.slides[index].element, index);
-        this.config.onSlideStart();
+        // this.config.onSlideStart();
     }
     onUpdateSizeMetrics(metrics) {
         // this.slideTo(this.activeIndex, 0);
@@ -6063,19 +6239,32 @@ class Slider {
         switch (action) {
             case "before_start" /* TIMELINE_ACTION.BEFORE_START */: {
                 // switch timeline to active slide and wait for start (wait VOD loading)
-                console.log("TIMELINE_ACTION.BEFORE_START", { activeSlide: this.activeSlide, duration });
+                // console.log("TIMELINE_ACTION.BEFORE_START", { activeSlide: this.activeSlide, duration });
+                this.timelineController.onSlideBeforeStart(slideIndex);
                 break;
             }
             case "start" /* TIMELINE_ACTION.START */: {
                 this.config.onSlideDataResume();
                 // also start after data waiting or pause
-                // window.setTimeout(() => {
-                //     this.config.onSlideStop();
-                //     this.config.onSlideTimerEnd();
-                // }, 10000);
                 // destroy on IAM closing
-                console.log("TIMELINE_ACTION.START", { activeSlide: this.activeSlide, index: this.activeIndex, duration });
-                this.activeSlide?.timer.resume(duration);
+                // console.log("TIMELINE_ACTION.START", {
+                //     activeSlide: this.activeSlide,
+                //     index: this.activeIndex,
+                //     duration,
+                // });
+                let resumeTimer = false;
+                if (duration > 0) {
+                    // skip timer start for slide/layer with disabled timeline
+                    resumeTimer = true;
+                }
+                if (currentTime === duration) {
+                    // skip timer start for already ended layer timeline
+                    // skip timer start for already ended layer timeline
+                    resumeTimer = false;
+                }
+                if (resumeTimer) {
+                    this.activeSlide?.timer.resume(currentTime, duration);
+                }
                 break;
             }
             case "pause" /* TIMELINE_ACTION.PAUSE */: {
@@ -6083,7 +6272,7 @@ class Slider {
                     this.config.onSlideDataWaiting();
                 }
                 this.activeSlide?.timer.pause();
-                console.log("TIMELINE_ACTION.PAUSE", { activeSlide: this.activeSlide, duration });
+                // console.log("TIMELINE_ACTION.PAUSE", { activeSlide: this.activeSlide, duration });
                 break;
             }
             case "stop" /* TIMELINE_ACTION.STOP */: {
@@ -6093,27 +6282,23 @@ class Slider {
                 }
                 this.activeSlide?.timer.stop();
                 // todo нужен STOP когда вручную переключаем слайд на другой
-                console.log("TIMELINE_ACTION.STOP", { activeSlide: this.activeSlide, duration });
+                // console.log("TIMELINE_ACTION.STOP", { activeSlide: this.activeSlide, duration });
                 break;
             }
         }
     }
-    onSlideTimerUpdate(progress) {
-        this.updateTimelineProgress(this.activeIndex, progress);
-    }
-    onSlideTimerEnd() {
-        this.config.onSlideStop();
+    // private onSlideTimerUpdate(progress: number) {
+    // this.updateTimelineProgress(this.activeIndex, progress);
+    // }
+    async onSlideTimerEnd() {
+        await this.config.onSlideStop();
         this.config.onSlideTimerEnd();
     }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`{
             slides: Array<T>;
             root: HTMLElement;
-            // isFullscreen: boolean;
             nonce?: string;
-            // viewport: Window;
-            // userResizeHandler?: (data: { viewportWidth: number; viewportHeight: number; fontSize: number }) => void;
-            // VODPlayer?: typeof VODPlayer;
-            // overlappingActionBarHeight?: number;
+            navbarAppearance: NavbarAppearance;
             slideRender: SlideRender<T>;
             onSlideMounted: OnSlideMounted;
             onBeforeShowSlide: OnBeforeShowSlide;
@@ -6150,6 +6335,7 @@ class CardApi {
     activeSlide = null;
     slides = [];
     slidesMode = 0 /* SLIDES_MODE.SINGLE */;
+    cardLoadingStateController = null;
     sizeMetrics = {
         fontSize: "0px",
         isFullscreen: false,
@@ -6325,7 +6511,10 @@ class CardApi {
     slider = null;
     async showSlides(slides, cardAppearance, index = 0) {
         this.slidesMode = 1 /* SLIDES_MODE.MULTIPLE */;
-        this.sdkApi.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+        if (this.cardLoadingStateController === null) {
+            this.cardLoadingStateController = new CardLoadingStateController(this.sdkApi.onCardLoadingStateChange.bind(this.sdkApi));
+        }
+        this.cardLoadingStateController.onSetLoadStartState();
         slides.forEach((content, index) => {
             if (this.slides[index] == null) {
                 const item = { content, resourcesReadyPromise: null };
@@ -6378,6 +6567,15 @@ class CardApi {
                 this.activeSlide = this.slides[index].slide;
                 return this.slides[index].slide.showSlide().then(_ => ({ moveToIndex: index }));
             }
+            else {
+                // quot -                 // TODO для виджета квест нужно при каждом показе слайда инициализировать виджет???
+                //                 // пока вызов убран из за того что init жестко завязан на single slide mode
+                // из-за того что перед показом нет приватного вызова SlideApi::_init пока что нужно руками вызывать
+                // slide.activeLayer.timeline.triggerSlideLoadState();
+                // для того чтобы запустить TIMELINE_ACTION.BEFORE_START что нужно для таймлайна слайдера
+                // todo убрать в случае если будем вызывать new SlideApi перед каждым показом слайда
+                this.slides[index].slide.activeLayer.timeline.triggerSlideLoadState();
+            }
             this.activeSlide = this.slides[index].slide;
             // TODO handle moveToIndex
             // return resolve or reject with reason
@@ -6391,13 +6589,13 @@ class CardApi {
             // внутри слайдера - обрабатываем moveToIndex
         };
         const onBeforeLoadSlide = index => {
-            this.sdkApi.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */);
+            this.cardLoadingStateController.onSetLoadStartState();
         };
         const onSlideLoadingError = (index, reason) => {
-            this.sdkApi.onCardLoadingStateChange(2 /* CARD_LOADING_STATE.LOADING_ERROR */, reason);
+            this.cardLoadingStateController.onSetLoadErrorState(reason);
         };
         const onShowSlide = (slide, index) => {
-            this.sdkApi.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */);
+            this.cardLoadingStateController.onSetLoadEndState();
             this.sdkApi.emitEvent("showSlide", { cardId: this.slides[index]?.slide?.slide.cardId ?? 0, index });
             // if (index === 0) {
             //     this.activeSlide = slideApi;
@@ -6489,6 +6687,7 @@ class CardApi {
                 canMediaMount: resourcesReadyPromise,
             })),
             nonce: this.config.nonce,
+            navbarAppearance: cardAppearance.navbar ?? {},
             slideRender,
             onSlideMounted,
             onBeforeShowSlide,
@@ -6499,13 +6698,14 @@ class CardApi {
             getLayoutDirection: () => this.layoutDirection,
             onSlideTimerEnd: () => this.activeSlide.slideTimerEnd(),
             onSlideStart: () => {
-                this.sdkApi.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */);
+                // return Promise.resolve({currentTime: 0});
+                this.cardLoadingStateController.onSetLoadEndState();
                 return this.activeSlide.slideStart({ muted: true });
             },
             onSlideStop: () => this.activeSlide.slideStop({ prepareForRestart: 1 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.PREPARE */ }),
-            onSlideDataWaiting: () => this.sdkApi.onCardLoadingStateChange(0 /* CARD_LOADING_STATE.LOADING */),
-            onSlideDataResume: () => this.sdkApi.onCardLoadingStateChange(1 /* CARD_LOADING_STATE.LOADED */),
-            onSlideDataError: () => this.sdkApi.onCardLoadingStateChange(2 /* CARD_LOADING_STATE.LOADING_ERROR */),
+            onSlideDataWaiting: () => this.cardLoadingStateController.onSetLoadStartState(),
+            onSlideDataResume: () => this.cardLoadingStateController.onSetLoadEndState(),
+            onSlideDataError: () => this.cardLoadingStateController.onSetLoadEndState(),
         });
         await this.slider.showByIndex(index);
         // return await onShowActiveCard;
@@ -6579,6 +6779,15 @@ class CardApi {
         if (this.slidesMode === 1 /* SLIDES_MODE.MULTIPLE */ && result.canClickNext) {
             result.canClickNext = false; // handle nav click via CardsSlider, not via SDK
             const currentIndex = this.activeSlide.index;
+            /**
+             * business logic - avoid action on side slides click
+             */
+            if (currentIndex === 0 && navigationDirection === "backward") {
+                return result;
+            }
+            if (currentIndex === this.slides.length - 1 && navigationDirection === "forward") {
+                return result;
+            }
             let index = navigationDirection === "forward" ? currentIndex + 1 : currentIndex - 1;
             if (index >= this.slides.length) {
                 index = 0;