pro-gallery 4.0.15-beta.21 → 4.0.15-beta.210

package/dist/cjs/components/gallery/proGallery/slideshowView.js

@@ -9,8 +9,8 @@ var galleryDebugMessage_js_1 = tslib_1.__importDefault(require("./galleryDebugMe
 var galleryHelpers_js_1 = require("./galleryHelpers.js");
 var play_1 = tslib_1.__importDefault(require("../../svgs/components/play"));
 var pause_1 = tslib_1.__importDefault(require("../../svgs/components/pause"));
-var galleryComponent_1 = require("../../galleryComponent");
 var textItem_js_1 = tslib_1.__importDefault(require("../../item/textItem.js"));
+var navigationArrowUtils_1 = require("../../helpers/navigationArrowUtils");
 var SKIP_SLIDES_MULTIPLIER = 1.5;
 function getDirection(code) {
     var reverse = [33, 37, 38];
@@ -28,12 +28,26 @@ var SlideshowView = /** @class */ (function (_super) {
         _this.autoScrollToNextItem = function () {
             if (!pro_gallery_lib_1.isEditMode() &&
                 (galleryHelpers_js_1.isGalleryInViewport(_this.props.container) || pro_gallery_lib_1.isPreviewMode())) {
-                var direction = _this.props.styleParams.isRTL ? -1 : 1;
-                _this._next({ direction: direction, isAutoTrigger: true, scrollDuration: 800 });
+                var options = _this.props.options;
+                var direction = options.isRTL ? -1 : 1;
+                if (options.autoSlideshowType ===
+                    pro_gallery_lib_1.GALLERY_CONSTS.autoSlideshowTypes.CONTINUOUS) {
+                    _this._next({
+                        direction: direction,
+                        isAutoTrigger: true,
+                        isContinuousScrolling: true,
+                    });
+                }
+                else if (options.autoSlideshowType ===
+                    pro_gallery_lib_1.GALLERY_CONSTS.autoSlideshowTypes.INTERVAL) {
+                    _this._next({
+                        direction: direction,
+                        isAutoTrigger: true,
+                        scrollDuration: 800,
+                    });
+                }
             }
         };
-        _this.navigationOutHandler = _this.navigationOutHandler.bind(_this);
-        _this.navigationInHandler = _this.navigationInHandler.bind(_this);
         _this.scrollToThumbnail = _this.scrollToThumbnail.bind(_this);
         _this.clearAutoSlideshowInterval = _this.clearAutoSlideshowInterval.bind(_this);
         _this.onFocus = _this.onFocus.bind(_this);
@@ -42,8 +56,8 @@ var SlideshowView = /** @class */ (function (_super) {
             _this.onAutoSlideShowButtonClick.bind(_this);
         _this.startAutoSlideshowIfNeeded =
             _this.startAutoSlideshowIfNeeded.bind(_this);
-        _this.blockAutoSlideshowIfNeeded =
-            _this.blockAutoSlideshowIfNeeded.bind(_this);
+        _this.updateAutoSlideShowState =
+            _this.updateAutoSlideShowState.bind(_this);
         _this.canStartAutoSlideshow = _this.canStartAutoSlideshow.bind(_this);
         _this.handleSlideshowKeyPress = _this.handleSlideshowKeyPress.bind(_this);
         _this.onAutoSlideshowAutoPlayKeyPress =
@@ -64,7 +78,6 @@ var SlideshowView = /** @class */ (function (_super) {
         };
         _this.lastCurrentItem = undefined;
         _this.shouldCreateSlideShowPlayButton = false;
-        _this.shouldCreateSlideShowNumbers = false;
         _this.skipFromSlide = Math.round(_this.props.totalItemsCount * SKIP_SLIDES_MULTIPLIER); // Used in infinite loop
         return _this;
     }
@@ -72,41 +85,47 @@ var SlideshowView = /** @class */ (function (_super) {
         return this.state.activeIndex === 0;
     };
     SlideshowView.prototype.isScrollStart = function () {
-        var slideAnimation = this.props.styleParams.slideAnimation;
+        var slideAnimation = this.props.options.slideAnimation;
         if (slideAnimation !== pro_gallery_lib_1.GALLERY_CONSTS.slideAnimations.SCROLL || !this.scrollElement) {
             return false;
         }
         return this.scrollPosition() <= 1;
     };
     SlideshowView.prototype.isScrollEnd = function () {
-        var _a = this.props, totalItemsCount = _a.totalItemsCount, getVisibleItems = _a.getVisibleItems, galleryStructure = _a.galleryStructure, container = _a.container;
-        var _b = this.props.styleParams, slideshowLoop = _b.slideshowLoop, slideAnimation = _b.slideAnimation, imageMargin = _b.imageMargin;
+        var _a = this.props.options, slideshowLoop = _a.slideshowLoop, slideAnimation = _a.slideAnimation;
         if (slideshowLoop ||
             slideAnimation === pro_gallery_lib_1.GALLERY_CONSTS.slideAnimations.FADE ||
             slideAnimation === pro_gallery_lib_1.GALLERY_CONSTS.slideAnimations.DECK) {
             return false;
         }
-        var galleryStructureWidth = galleryStructure.width;
+        return (this.isAllItemsLoaded() &&
+            this.scrollPositionAtTheAndOfTheGallery() >= Math.floor(this.getScrollElementWidth()));
+    };
+    SlideshowView.prototype.isAllItemsLoaded = function () {
+        var _a = this.props, totalItemsCount = _a.totalItemsCount, getVisibleItems = _a.getVisibleItems, galleryStructure = _a.galleryStructure, container = _a.container;
         var visibleItemsCount = getVisibleItems(galleryStructure.galleryItems, container).length;
-        var allItemsLoaded = visibleItemsCount >= totalItemsCount;
-        var scrollElementWidth = galleryStructureWidth - imageMargin / 2;
-        return allItemsLoaded && this.scrollPositionAtTheAndOfTheGallery() >= scrollElementWidth;
+        return visibleItemsCount >= totalItemsCount;
+    };
+    SlideshowView.prototype.getScrollElementWidth = function () {
+        var galleryStructure = this.props.galleryStructure;
+        var imageMargin = this.props.options.imageMargin;
+        return galleryStructure.width - imageMargin / 2;
     };
     SlideshowView.prototype.isFirstItemFullyVisible = function () {
-        return !this.props.styleParams.slideshowLoop && this.isScrollStart();
+        return !this.props.options.slideshowLoop && this.isScrollStart();
     };
     SlideshowView.prototype.isLastItemFullyVisible = function () {
-        return !this.props.styleParams.slideshowLoop && this.isScrollEnd();
+        return !this.props.options.slideshowLoop && this.isScrollEnd();
     };
     SlideshowView.prototype.isLastItem = function () {
-        return (!this.props.styleParams.slideshowLoop &&
+        return (!this.props.options.slideshowLoop &&
             this.state.activeIndex >= this.props.totalItemsCount - 1);
     };
     //__________________________________Slide show loop functions_____________________________________________
     SlideshowView.prototype.createNewItemsForSlideshowLoopThumbnails = function () {
         var items = this.props.items;
         var biasedItems = [];
-        var numOfThumbnails = Math.ceil(this.props.container.galleryWidth / this.props.styleParams.thumbnailSize);
+        var numOfThumbnails = Math.ceil(this.props.container.galleryWidth / this.props.options.thumbnailSize);
         // need to create new item ! not just to copy the last once - the react view refferce one of them
         Object.keys(items).forEach(function (idx) {
             var _idx = Number(idx);
@@ -132,33 +151,46 @@ var SlideshowView = /** @class */ (function (_super) {
         this.numOfThumbnails = numOfThumbnails;
     };
     //__________________________________end of slide show loop functions__________________________
+    SlideshowView.prototype.shouldBlockNext = function (_a) {
+        var scrollingUpTheGallery = _a.scrollingUpTheGallery;
+        return ((scrollingUpTheGallery && this.isLastItem()) ||
+            (!scrollingUpTheGallery && this.isFirstItem()));
+    };
+    SlideshowView.prototype.shouldNotAllowScroll = function (_a) {
+        var scrollingUpTheGallery = _a.scrollingUpTheGallery;
+        return ((scrollingUpTheGallery && this.isLastItemFullyVisible()) ||
+            (!scrollingUpTheGallery && this.isFirstItemFullyVisible()));
+    };
     SlideshowView.prototype.next = function (_a) {
-        var direction = _a.direction, isAutoTrigger = _a.isAutoTrigger, scrollDuration = _a.scrollDuration, _b = _a.isKeyboardNavigation, isKeyboardNavigation = _b === void 0 ? false : _b;
-        direction *= this.props.styleParams.isRTL ? -1 : 1;
-        if (this.isLastItem() &&
-            this.state.activeIndex + direction >= this.props.totalItemsCount) {
+        var _b;
+        var direction = _a.direction, isAutoTrigger = _a.isAutoTrigger, scrollDuration = _a.scrollDuration, _c = _a.isKeyboardNavigation, isKeyboardNavigation = _c === void 0 ? false : _c, _d = _a.isContinuousScrolling, isContinuousScrolling = _d === void 0 ? false : _d;
+        var scrollingUpTheGallery = this.props.options.isRTL
+            ? direction <= -1
+            : direction >= 1;
+        if (this.shouldBlockNext({ scrollingUpTheGallery: scrollingUpTheGallery })) {
             this.clearAutoSlideshowInterval();
             return;
         }
+        direction *= this.props.options.isRTL ? -1 : 1;
         var activeElement = document.activeElement;
         var galleryItemIsFocused = activeElement.className &&
             activeElement.className.includes('gallery-item-container');
         var avoidIndividualNavigation = !isKeyboardNavigation ||
-            !(this.props.styleParams.isAccessible && galleryItemIsFocused);
+            !(((_b = this.props.settings) === null || _b === void 0 ? void 0 : _b.isAccessible) && galleryItemIsFocused);
         var ignoreScrollPosition = false;
-        if (this.props.styleParams.slideAnimation !==
+        if (this.props.options.slideAnimation !==
             pro_gallery_lib_1.GALLERY_CONSTS.slideAnimations.SCROLL) {
             scrollDuration = 0;
             ignoreScrollPosition = true;
         }
-        if (avoidIndividualNavigation && this.props.styleParams.groupSize > 1) {
-            this.nextGroup({ direction: direction, isAutoTrigger: isAutoTrigger, scrollDuration: scrollDuration }); //if its not in accessibility that requieres individual nav and we are in a horizontal(this file) collage(layout 0) - use group navigation
+        if (avoidIndividualNavigation && this.props.options.groupSize > 1) {
+            this.nextGroup({ direction: direction, scrollDuration: scrollDuration, isContinuousScrolling: isContinuousScrolling, scrollingUpTheGallery: scrollingUpTheGallery }); //if its not in accessibility that requieres individual nav and we are in a horizontal(this file) collage(layout 0) - use group navigation
         }
         else {
             if (avoidIndividualNavigation &&
-                this.props.styleParams.isGrid &&
-                this.props.styleParams.numberOfImagesPerCol) {
-                direction *= this.props.styleParams.numberOfImagesPerCol;
+                pro_gallery_lib_1.GALLERY_CONSTS.isLayout('GRID')(this.props.options) &&
+                this.props.options.numberOfImagesPerCol) {
+                direction *= this.props.options.numberOfImagesPerCol;
             }
             this.nextItem({
                 direction: direction,
@@ -166,168 +198,154 @@ var SlideshowView = /** @class */ (function (_super) {
                 scrollDuration: scrollDuration,
                 avoidIndividualNavigation: avoidIndividualNavigation,
                 ignoreScrollPosition: ignoreScrollPosition,
+                isContinuousScrolling: isContinuousScrolling,
+                scrollingUpTheGallery: scrollingUpTheGallery,
             });
         }
         this.removeArrowsIfNeeded();
     };
+    SlideshowView.prototype.getNextItemOrGroupToScrollTo = function (initiator, direction, ignoreScrollPosition, avoidIndividualNavigation, isAutoTrigger) {
+        this.isSliding = true;
+        var nextIndex;
+        if (initiator === 'nextGroup' ||
+            (initiator === 'nextItem' &&
+                !ignoreScrollPosition &&
+                avoidIndividualNavigation &&
+                !(this.props.options.groupSize > 1))) {
+            var key = initiator === 'nextGroup' ? 'groups' : 'galleryItems';
+            nextIndex =
+                this.getCenteredItemOrGroupIdxByScroll(key) + direction;
+        }
+        else if (initiator === 'nextItem') {
+            if (ignoreScrollPosition || !isAutoTrigger) {
+                nextIndex = this.state.activeIndex;
+            }
+            else {
+                nextIndex = this.setCurrentItemByScroll();
+            }
+            nextIndex += direction;
+            if (!this.props.options.slideshowLoop) {
+                nextIndex = Math.min(this.props.galleryStructure.items.length - 1, nextIndex);
+                nextIndex = Math.max(0, nextIndex);
+            }
+        }
+        this.isAutoScrolling = true;
+        return nextIndex;
+    };
     SlideshowView.prototype.nextItem = function (_a) {
-        var direction = _a.direction, isAutoTrigger = _a.isAutoTrigger, scrollDuration = _a.scrollDuration, avoidIndividualNavigation = _a.avoidIndividualNavigation, ignoreScrollPosition = _a.ignoreScrollPosition;
+        var direction = _a.direction, isAutoTrigger = _a.isAutoTrigger, scrollDuration = _a.scrollDuration, avoidIndividualNavigation = _a.avoidIndividualNavigation, ignoreScrollPosition = _a.ignoreScrollPosition, isContinuousScrolling = _a.isContinuousScrolling, scrollingUpTheGallery = _a.scrollingUpTheGallery;
         return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var activeIndex, nextItem, scrollToItem, scrollingPastLastItem, isScrollingPastEdge, scrollMarginCorrection, _scrollDuration, itemToScroll, _b, skipToSlide, e_1;
-            var _this = this;
-            return tslib_1.__generator(this, function (_c) {
-                switch (_c.label) {
+            var nextItem, itemToScroll, skipToSlide, e_1;
+            return tslib_1.__generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         if (this.isSliding) {
                             return [2 /*return*/];
                         }
-                        this.isSliding = true;
-                        if (ignoreScrollPosition) {
-                            activeIndex = this.state.activeIndex;
-                        }
-                        else {
-                            if (avoidIndividualNavigation &&
-                                !(this.props.styleParams.groupSize > 1)) {
-                                activeIndex = this.getCenteredItemIdxByScroll();
-                            }
-                            else {
-                                activeIndex = isAutoTrigger
-                                    ? this.setCurrentItemByScroll()
-                                    : this.state.activeIndex;
-                            }
-                        }
-                        nextItem = activeIndex + direction;
-                        if (!this.props.styleParams.slideshowLoop) {
-                            nextItem = Math.min(this.props.galleryStructure.items.length - 1, nextItem);
-                            nextItem = Math.max(0, nextItem);
-                        }
-                        scrollToItem = this.props.actions.scrollToItem;
-                        this.isAutoScrolling = true;
-                        if (isAutoTrigger) {
-                            // ---- Called by the Auto Slideshow ---- //
-                        }
-                        else {
-                            // ---- Called by the user (arrows, keys etc.) ---- //
-                            this.startAutoSlideshowIfNeeded(this.props.styleParams);
-                            scrollingPastLastItem = (direction >= 1 && this.isLastItem()) ||
-                                (direction <= -1 && this.isFirstItem());
-                            if (scrollingPastLastItem) {
-                                this.isSliding = false;
-                                return [2 /*return*/];
-                            }
-                        }
-                        _c.label = 1;
+                        nextItem = this.getNextItemOrGroupToScrollTo('nextItem', direction, ignoreScrollPosition, avoidIndividualNavigation, isAutoTrigger);
+                        _b.label = 1;
                     case 1:
-                        _c.trys.push([1, 6, , 7]);
-                        isScrollingPastEdge = !isAutoTrigger &&
-                            ((direction >= 1 && this.isLastItemFullyVisible()) ||
-                                (direction <= -1 && this.isFirstItemFullyVisible()));
-                        scrollMarginCorrection = this.getStyles().margin || 0;
-                        _scrollDuration = scrollDuration || this.props.styleParams.scrollDuration || 400;
+                        _b.trys.push([1, 5, , 6]);
                         itemToScroll = ignoreScrollPosition ? 0 : nextItem;
-                        _b = !isScrollingPastEdge;
-                        if (!_b) return [3 /*break*/, 3];
-                        return [4 /*yield*/, scrollToItem(itemToScroll, false, true, _scrollDuration, scrollMarginCorrection)];
+                        return [4 /*yield*/, this.scrollToItemOrGroup(this.props.actions.scrollToItem, itemToScroll, isContinuousScrolling, scrollDuration, scrollingUpTheGallery)];
                     case 2:
-                        _b = (_c.sent());
-                        _c.label = 3;
-                    case 3:
-                        _b;
-                        if (!(this.props.styleParams.groupSize === 1)) return [3 /*break*/, 5];
+                        _b.sent();
+                        if (!(this.props.options.groupSize === 1)) return [3 /*break*/, 4];
                         skipToSlide = this.skipFromSlide - this.props.totalItemsCount;
-                        if (!(nextItem >= this.skipFromSlide)) return [3 /*break*/, 5];
+                        if (!(nextItem >= this.skipFromSlide)) return [3 /*break*/, 4];
                         nextItem = skipToSlide;
-                        return [4 /*yield*/, scrollToItem(nextItem)];
+                        return [4 /*yield*/, this.props.actions.scrollToItem(nextItem)];
+                    case 3:
+                        _b.sent();
+                        _b.label = 4;
                     case 4:
-                        _c.sent();
-                        _c.label = 5;
-                    case 5:
-                        pro_gallery_lib_1.utils.setStateAndLog(this, 'Next Item', {
-                            activeIndex: nextItem,
-                        }, function () {
-                            _this.onCurrentItemChanged();
-                            _this.isSliding = false;
-                        });
+                        this.onScrollToItemOrGroup(nextItem, isContinuousScrolling);
                         if (ignoreScrollPosition) {
                             this.props.getMoreItemsIfNeeded(this.props.galleryStructure.galleryItems[nextItem].offset.left);
                             this.props.setGotFirstScrollIfNeeded();
                         }
-                        return [3 /*break*/, 7];
-                    case 6:
-                        e_1 = _c.sent();
-                        console.error('Cannot proceed to the next Item', e_1);
-                        this.clearAutoSlideshowInterval();
-                        return [2 /*return*/];
-                    case 7: return [2 /*return*/];
+                        return [3 /*break*/, 6];
+                    case 5:
+                        e_1 = _b.sent();
+                        this.onThrowScrollError('Cannot proceed to the next Item', e_1);
+                        return [3 /*break*/, 6];
+                    case 6: return [2 /*return*/];
                 }
             });
         });
     };
     SlideshowView.prototype.nextGroup = function (_a) {
-        var direction = _a.direction, isAutoTrigger = _a.isAutoTrigger, scrollDuration = _a.scrollDuration;
+        var direction = _a.direction, scrollDuration = _a.scrollDuration, _b = _a.isContinuousScrolling, isContinuousScrolling = _b === void 0 ? false : _b, scrollingUpTheGallery = _a.scrollingUpTheGallery;
         return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var currentGroupIdx, currentGroup, scrollToGroup, scrollingPastLastItem, isScrollingPastEdge, scrollMarginCorrection, _scrollDuration, _b, e_2;
-            var _this = this;
+            var nextGroup, nextItem, e_2;
             return tslib_1.__generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
                         if (this.isSliding) {
                             return [2 /*return*/];
                         }
-                        this.isSliding = true;
-                        currentGroupIdx = this.getCenteredGroupIdxByScroll();
-                        currentGroup = currentGroupIdx + direction;
-                        scrollToGroup = this.props.actions.scrollToGroup;
-                        this.isAutoScrolling = true;
-                        if (isAutoTrigger) {
-                            // ---- Called by the Auto Slideshow ---- //
-                            if (this.isLastItem()) {
-                                // maybe this should be isLastItemFullyVisible now that we have both. product- do we allow autoSlideshow in other layouts ( those that could have more than one item displayed in the galleryWidth)
-                                currentGroup = 0;
-                                scrollDuration = 0;
-                            }
-                        }
-                        else {
-                            scrollingPastLastItem = (direction >= 1 && this.isLastItem()) ||
-                                (direction <= -1 && this.isFirstItem());
-                            if (scrollingPastLastItem) {
-                                this.isSliding = false;
-                                return [2 /*return*/];
-                            }
-                        }
+                        nextGroup = this.getNextItemOrGroupToScrollTo('nextGroup', direction);
                         _c.label = 1;
                     case 1:
-                        _c.trys.push([1, 4, , 5]);
-                        isScrollingPastEdge = !isAutoTrigger &&
-                            ((direction >= 1 && this.isLastItemFullyVisible()) ||
-                                (direction <= -1 && this.isFirstItemFullyVisible()));
-                        scrollMarginCorrection = this.getStyles().margin || 0;
-                        _scrollDuration = scrollDuration || this.props.styleParams.scrollDuration || 400;
-                        _b = !isScrollingPastEdge;
-                        if (!_b) return [3 /*break*/, 3];
-                        return [4 /*yield*/, scrollToGroup(currentGroup, false, true, _scrollDuration, scrollMarginCorrection)];
+                        _c.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this.scrollToItemOrGroup(this.props.actions.scrollToGroup, nextGroup, isContinuousScrolling, scrollDuration, scrollingUpTheGallery)];
                     case 2:
-                        _b = (_c.sent());
-                        _c.label = 3;
+                        _c.sent();
+                        nextItem = this.getCenteredItemOrGroupIdxByScroll('galleryItems') + direction;
+                        this.onScrollToItemOrGroup(nextItem, isContinuousScrolling);
+                        return [3 /*break*/, 4];
                     case 3:
-                        _b;
-                        pro_gallery_lib_1.utils.setStateAndLog(this, 'Next Item', {
-                            activeIndex: this.getCenteredItemIdxByScroll() + direction,
-                        }, function () {
-                            _this.onCurrentItemChanged();
-                            _this.isSliding = false;
-                        });
-                        return [3 /*break*/, 5];
-                    case 4:
                         e_2 = _c.sent();
-                        console.error('Cannot proceed to the next Group', e_2);
-                        this.clearAutoSlideshowInterval();
+                        this.onThrowScrollError('Cannot proceed to the next Group', e_2);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    SlideshowView.prototype.scrollToItemOrGroup = function (func, indexToScroll, isContinuousScrolling, scrollDuration, scrollingUpTheGallery) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var shouldAllowScroll, _a, scrollMarginCorrection, _scrollDuration, _b;
+            return tslib_1.__generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        shouldAllowScroll = !this.shouldNotAllowScroll({ scrollingUpTheGallery: scrollingUpTheGallery });
+                        _a = this.getScrollParameters(scrollDuration), scrollMarginCorrection = _a.scrollMarginCorrection, _scrollDuration = _a._scrollDuration;
+                        _b = shouldAllowScroll;
+                        if (!_b) return [3 /*break*/, 2];
+                        return [4 /*yield*/, func(indexToScroll, false, true, _scrollDuration, scrollMarginCorrection, isContinuousScrolling)];
+                    case 1:
+                        _b = (_c.sent());
+                        _c.label = 2;
+                    case 2:
+                        _b;
                         return [2 /*return*/];
-                    case 5: return [2 /*return*/];
                 }
             });
         });
     };
+    SlideshowView.prototype.onThrowScrollError = function (massage, e) {
+        console.error(massage, e);
+        this.clearAutoSlideshowInterval();
+    };
+    SlideshowView.prototype.onScrollToItemOrGroup = function (nextItem, isContinuousScrolling) {
+        var _this = this;
+        pro_gallery_lib_1.utils.setStateAndLog(this, 'Next Item', {
+            activeIndex: nextItem,
+        }, function () {
+            _this.onCurrentItemChanged();
+            _this.isSliding = false;
+            if (isContinuousScrolling) {
+                _this.startAutoSlideshowIfNeeded(_this.props.options);
+            }
+        });
+    };
+    SlideshowView.prototype.getScrollParameters = function (scrollDuration) {
+        return {
+            scrollMarginCorrection: this.getStyles().margin || 0,
+            _scrollDuration: scrollDuration || this.props.options.scrollDuration || 400,
+        };
+    };
     SlideshowView.prototype.onCurrentItemChanged = function () {
         if (this.lastCurrentItem !== this.state.activeIndex) {
             this.lastCurrentItem = this.state.activeIndex;
@@ -345,16 +363,23 @@ var SlideshowView = /** @class */ (function (_super) {
     SlideshowView.prototype.clearAutoSlideshowInterval = function () {
         clearInterval(this.autoSlideshowInterval);
     };
-    SlideshowView.prototype.canStartAutoSlideshow = function (styleParams) {
-        var isAutoSlideshow = styleParams.isAutoSlideshow, autoSlideshowInterval = styleParams.autoSlideshowInterval;
-        return (isAutoSlideshow &&
-            autoSlideshowInterval > 0 &&
+    SlideshowView.prototype.canStartAutoSlideshow = function (options) {
+        return (options.isAutoSlideshow &&
             !this.state.shouldBlockAutoSlideshow);
     };
-    SlideshowView.prototype.startAutoSlideshowIfNeeded = function (styleParams) {
+    SlideshowView.prototype.startAutoSlideshowIfNeeded = function (options) {
         this.clearAutoSlideshowInterval();
-        if (this.canStartAutoSlideshow(styleParams)) {
-            this.autoSlideshowInterval = setInterval(this.autoScrollToNextItem.bind(this), styleParams.autoSlideshowInterval * 1000);
+        if (this.canStartAutoSlideshow(options)) {
+            if (options.autoSlideshowType ===
+                pro_gallery_lib_1.GALLERY_CONSTS.autoSlideshowTypes.CONTINUOUS &&
+                options.autoSlideshowContinuousSpeed > 0) {
+                this.autoScrollToNextItem();
+            }
+            else if (options.autoSlideshowType ===
+                pro_gallery_lib_1.GALLERY_CONSTS.autoSlideshowTypes.INTERVAL &&
+                options.autoSlideshowInterval > 0) {
+                this.autoSlideshowInterval = setInterval(this.autoScrollToNextItem, options.autoSlideshowInterval * 1000);
+            }
         }
     };
     SlideshowView.prototype.scrollToThumbnail = function (itemIdx, scrollDuration) {
@@ -395,9 +420,10 @@ var SlideshowView = /** @class */ (function (_super) {
     };
     SlideshowView.prototype.createThumbnails = function (thumbnailPosition) {
         var _this = this;
+        var _a;
         var items = this.props.items;
         var activeIndex = this.state.activeIndex;
-        if (this.props.styleParams.slideshowLoop) {
+        if (this.props.options.slideshowLoop) {
             if (!this.ItemsForSlideshowLoopThumbnails) {
                 this.createNewItemsForSlideshowLoopThumbnails();
             }
@@ -407,8 +433,8 @@ var SlideshowView = /** @class */ (function (_super) {
         if (pro_gallery_lib_1.utils.isVerbose()) {
             console.log('creating thumbnails for idx', activeIndex);
         }
-        var width = this.props.styleParams.thumbnailSize;
-        var height = this.props.styleParams.thumbnailSize;
+        var width = this.props.options.thumbnailSize;
+        var height = this.props.options.thumbnailSize;
         var horizontalThumbnails;
         var numOfThumbnails;
         var numOfWholeThumbnails;
@@ -417,29 +443,29 @@ var SlideshowView = /** @class */ (function (_super) {
             case 'bottom':
                 width =
                     this.props.container.galleryWidth +
-                        this.props.styleParams.thumbnailSpacings;
+                        this.props.options.thumbnailSpacings;
                 height =
-                    this.props.styleParams.thumbnailSize +
-                        this.props.styleParams.thumbnailSpacings;
+                    this.props.options.thumbnailSize +
+                        this.props.options.thumbnailSpacings;
                 horizontalThumbnails = true;
-                numOfThumbnails = Math.ceil(width / this.props.styleParams.thumbnailSize);
-                numOfWholeThumbnails = Math.floor((width + this.props.styleParams.thumbnailSpacings) /
-                    (this.props.styleParams.thumbnailSize +
-                        this.props.styleParams.thumbnailSpacings * 2));
+                numOfThumbnails = Math.ceil(width / this.props.options.thumbnailSize);
+                numOfWholeThumbnails = Math.floor((width + this.props.options.thumbnailSpacings) /
+                    (this.props.options.thumbnailSize +
+                        this.props.options.thumbnailSpacings * 2));
                 break;
             case 'left':
             case 'right':
                 height =
                     this.props.container.galleryHeight +
-                        2 * this.props.styleParams.thumbnailSpacings;
+                        2 * this.props.options.thumbnailSpacings;
                 width =
-                    this.props.styleParams.thumbnailSize +
-                        2 * this.props.styleParams.thumbnailSpacings;
+                    this.props.options.thumbnailSize +
+                        2 * this.props.options.thumbnailSpacings;
                 horizontalThumbnails = false;
-                numOfThumbnails = Math.ceil(height / this.props.styleParams.thumbnailSize);
+                numOfThumbnails = Math.ceil(height / this.props.options.thumbnailSize);
                 numOfWholeThumbnails = Math.floor(height /
-                    (this.props.styleParams.thumbnailSize +
-                        this.props.styleParams.thumbnailSpacings * 2));
+                    (this.props.options.thumbnailSize +
+                        this.props.options.thumbnailSpacings * 2));
                 break;
         }
         this.firstItemIdx = activeIndex - Math.floor(numOfThumbnails / 2) - 1;
@@ -463,9 +489,9 @@ var SlideshowView = /** @class */ (function (_super) {
             numOfThumbnails += 1;
             this.lastItemIdx += 1;
         }
-        var thumbnailsContainerSize = numOfThumbnails * this.props.styleParams.thumbnailSize +
+        var thumbnailsContainerSize = numOfThumbnails * this.props.options.thumbnailSize +
             ((numOfThumbnails - 1) * 2 + 1) *
-                this.props.styleParams.thumbnailSpacings;
+                this.props.options.thumbnailSpacings;
         var thumbnailsStyle = { width: width, height: height };
         if (items.length <= numOfWholeThumbnails ||
             activeIndex < numOfThumbnails / 2 - 1) {
@@ -515,13 +541,13 @@ var SlideshowView = /** @class */ (function (_super) {
                     break;
             }
         }
-        if (this.props.styleParams.isRTL) {
+        if (this.props.options.isRTL) {
             thumbnailsStyle.right = thumbnailsStyle.left;
             delete thumbnailsStyle.left;
         }
         var thumbnailsMargin;
-        var thumbnailSpacings = this.props.styleParams.thumbnailSpacings;
-        switch (this.props.styleParams.galleryThumbnailsAlignment) {
+        var thumbnailSpacings = this.props.options.thumbnailSpacings;
+        switch (this.props.options.galleryThumbnailsAlignment) {
             case 'bottom':
                 thumbnailsMargin = thumbnailSpacings + "px -" + thumbnailSpacings + "px 0 -" + thumbnailSpacings + "px";
                 break;
@@ -540,27 +566,27 @@ var SlideshowView = /** @class */ (function (_super) {
         };
         var highlighledIdxForSlideshowLoop = Math.floor(numOfThumbnails / 2);
         var thumbnailItems;
-        if (this.props.styleParams.slideshowLoop) {
+        if (this.props.options.slideshowLoop) {
             thumbnailItems = items.slice(this.firstItemIdx, this.lastItemIdx + 1);
         }
         else {
             thumbnailItems = this.props.galleryStructure.galleryItems.slice(this.firstItemIdx, this.lastItemIdx + 1);
         }
-        var thumbnailSize = this.props.styleParams.thumbnailSize;
+        var thumbnailSize = this.props.options.thumbnailSize;
         return (react_1.default.createElement("div", { className: 'pro-gallery inline-styles thumbnails-gallery ' +
                 (horizontalThumbnails ? ' one-row hide-scrollbars ' : '') +
-                (this.props.styleParams.isRTL ? ' rtl ' : ' ltr ') +
-                (this.props.styleParams.isAccessible ? ' accessible ' : ''), style: {
+                (this.props.options.isRTL ? ' rtl ' : ' ltr ') +
+                (((_a = this.props.settings) === null || _a === void 0 ? void 0 : _a.isAccessible) ? ' accessible ' : ''), style: {
                 width: width,
                 height: height,
                 margin: thumbnailsMargin,
             }, "data-hook": "gallery-thumbnails" },
             react_1.default.createElement("div", { "data-hook": "gallery-thumbnails-column", className: 'galleryColumn', key: 'thumbnails-column', style: Object.assign(thumbnailsStyle, { width: width, height: height }) }, thumbnailItems.map(function (item, idx) {
                 var _a;
-                var thumbnailItem = _this.props.styleParams.slideshowLoop
+                var thumbnailItem = _this.props.options.slideshowLoop
                     ? getThumbnailItemForSlideshowLoop(item.itemId || item.photoId)
                     : item;
-                var highlighted = _this.props.styleParams.slideshowLoop
+                var highlighted = _this.props.options.slideshowLoop
                     ? idx === highlighledIdxForSlideshowLoop
                     : thumbnailItem.idx === activeIndex;
                 var itemStyle = {
@@ -573,61 +599,39 @@ var SlideshowView = /** @class */ (function (_super) {
                 };
                 var thumbnailOffset = horizontalThumbnails
                     ? (_a = {},
-                        _a[_this.props.styleParams.isRTL ? 'right' : 'left'] = thumbnailSize * idx + 2 * idx * thumbnailSpacings,
+                        _a[_this.props.options.isRTL ? 'right' : 'left'] = thumbnailSize * idx + 2 * idx * thumbnailSpacings,
                         _a) : { top: thumbnailSize * idx + 2 * idx * thumbnailSpacings };
                 Object.assign(itemStyle, thumbnailOffset);
                 return (react_1.default.createElement("div", { key: 'thumbnail-' +
                         thumbnailItem.id +
                         (Number.isInteger(item.loopIndex) ? '-' + item.loopIndex : ''), className: 'thumbnailItem' +
                         (highlighted
-                            ? ' pro-gallery-thumbnails-highlighted gallery-item-container highlight' +
+                            ? ' pro-gallery-thumbnails-highlighted highlight' +
                                 (pro_gallery_lib_1.utils.isMobile() ? ' pro-gallery-mobile-indicator' : '')
-                            : ''), "data-key": thumbnailItem.id, style: itemStyle, onClick: function () { return _this.scrollToThumbnail(thumbnailItem.idx); } }, item.type === 'text' ? (react_1.default.createElement(textItem_js_1.default, tslib_1.__assign({}, _this.props, thumbnailItem.renderProps(), { styleParams: tslib_1.__assign(tslib_1.__assign({}, _this.props.styleParams), { cubeType: 'fill', cubeImages: true }), actions: {}, imageDimensions: tslib_1.__assign(tslib_1.__assign({}, itemStyle), { marginTop: 0, marginLeft: 0 }), style: tslib_1.__assign(tslib_1.__assign({}, thumbnailItem.renderProps().style), itemStyle) }))) : null));
+                            : ''), "data-key": thumbnailItem.id, style: itemStyle, onClick: function () { return _this.scrollToThumbnail(thumbnailItem.idx); } }, item.type === 'text' ? (react_1.default.createElement(textItem_js_1.default, tslib_1.__assign({}, _this.props, thumbnailItem.renderProps(), { options: tslib_1.__assign(tslib_1.__assign({}, _this.props.options), { cubeType: 'fill', cubeImages: true }), actions: {}, imageDimensions: tslib_1.__assign(tslib_1.__assign({}, itemStyle), { marginTop: 0, marginLeft: 0 }), style: tslib_1.__assign(tslib_1.__assign({}, thumbnailItem.renderProps().style), itemStyle) }))) : null));
             }))));
     };
-    SlideshowView.prototype.getCenteredItemIdxByScroll = function () {
-        // console.log('[RTL SCROLL] setCurrentItemByScroll: ', scrollLeft);
-        var items = this.props.galleryStructure.galleryItems;
-        var centeredIdx;
-        // const scrollPos = this.props.styleParams.isRTL ?
-        // this.props.galleryStructure.width - scrollLeft - this.props.container.galleryWidth / 2 :
+    SlideshowView.prototype.getCenteredItemOrGroupIdxByScroll = function (key) {
+        var itemsOrGroups = this.props.galleryStructure[key];
+        var centeredItemOrGroupIdx;
         var scrollPositionAtTheMiddleOfTheGallery = this.scrollPositionAtTheMiddleOfTheGallery();
         if (scrollPositionAtTheMiddleOfTheGallery === 0) {
-            centeredIdx = 0;
+            centeredItemOrGroupIdx = 0;
         }
         else {
-            for (var item = void 0, i = 0; (item = items[i]); i++) {
-                if (item.offset.left > scrollPositionAtTheMiddleOfTheGallery) {
-                    centeredIdx = i - 1;
+            for (var itemOrGroup = void 0, i = 0; (itemOrGroup = itemsOrGroups[i]); i++) {
+                var itemOrGroupLeft = key === 'galleryItems' ?
+                    itemOrGroup.offset.left : itemOrGroup.left;
+                if (itemOrGroupLeft > scrollPositionAtTheMiddleOfTheGallery) {
+                    centeredItemOrGroupIdx = i - 1;
                     break;
                 }
             }
         }
-        if (!(centeredIdx >= 0)) {
-            centeredIdx = items.length - 1;
+        if (!(centeredItemOrGroupIdx >= 0)) {
+            centeredItemOrGroupIdx = itemsOrGroups.length - 1;
         }
-        return centeredIdx;
-    };
-    SlideshowView.prototype.getCenteredGroupIdxByScroll = function () {
-        // console.log('[RTL SCROLL] setCurrentItemByScroll: ', scrollLeft);
-        var groups = this.props.galleryStructure.groups;
-        var centeredGroupIdx;
-        var scrollPositionAtTheMiddleOfTheGallery = this.scrollPositionAtTheMiddleOfTheGallery();
-        if (scrollPositionAtTheMiddleOfTheGallery === 0) {
-            centeredGroupIdx = 0;
-        }
-        else {
-            for (var group = void 0, i = 0; (group = groups[i]); i++) {
-                if (group.left > scrollPositionAtTheMiddleOfTheGallery) {
-                    centeredGroupIdx = i - 1;
-                    break;
-                }
-            }
-        }
-        if (!(centeredGroupIdx >= 0)) {
-            centeredGroupIdx = groups.length - 1;
-        }
-        return centeredGroupIdx;
+        return centeredItemOrGroupIdx;
     };
     SlideshowView.prototype.setCurrentItemByScroll = function () {
         var _this = this;
@@ -646,8 +650,8 @@ var SlideshowView = /** @class */ (function (_super) {
             //while the scroll is animating, prevent the reaction to this event
             return;
         }
-        this.startAutoSlideshowIfNeeded(this.props.styleParams);
-        var activeIndex = this.getCenteredItemIdxByScroll();
+        this.startAutoSlideshowIfNeeded(this.props.options);
+        var activeIndex = this.getCenteredItemOrGroupIdxByScroll('galleryItems');
         if (!pro_gallery_lib_1.utils.isUndefined(activeIndex)) {
             pro_gallery_lib_1.utils.setStateAndLog(this, 'Set Current Item', {
                 activeIndex: activeIndex,
@@ -660,77 +664,48 @@ var SlideshowView = /** @class */ (function (_super) {
     SlideshowView.prototype.createDebugMsg = function () {
         return react_1.default.createElement(galleryDebugMessage_js_1.default, tslib_1.__assign({}, this.props.debug));
     };
-    SlideshowView.prototype.getArrowsRenderData = function () {
-        var customNavArrowsRenderer = this.props.customNavArrowsRenderer;
-        var arrowsSize = this.props.styleParams.arrowsSize;
-        if (customNavArrowsRenderer) {
-            return {
-                arrowRenderer: customNavArrowsRenderer,
-                navArrowsContainerWidth: arrowsSize,
-                navArrowsContainerHeight: arrowsSize
-            };
-        }
-        var arrowOrigWidth = 23; //arrow-right svg and arrow-left svg width
-        var arrowOrigHeight = 39; //arrow-right svg and arrow-left svg height
-        var scalePercentage = arrowsSize / arrowOrigWidth;
-        var svgStyle = { transform: "scale(" + scalePercentage + ")" };
-        var navArrowsContainerWidth = arrowsSize; // === arrowOrigWidth * scalePercentage
-        var navArrowsContainerHeight = arrowOrigHeight * scalePercentage;
-        var arrowsColor = this.props.styleParams.arrowsColor;
-        var svgInternalStyle = pro_gallery_lib_1.utils.isMobile() && (arrowsColor === null || arrowsColor === void 0 ? void 0 : arrowsColor.value) ? { fill: arrowsColor.value } : {};
-        var arrowRenderer = function (position) {
-            var _a = position === 'right' ?
-                {
-                    d: "M857.005,231.479L858.5,230l18.124,18-18.127,18-1.49-1.48L873.638,248Z",
-                    transform: "translate(-855 -230)"
-                }
-                :
-                    {
-                        d: "M154.994,259.522L153.477,261l-18.471-18,18.473-18,1.519,1.48L138.044,243Z",
-                        transform: "translate(-133 -225)"
-                    }, d = _a.d, transform = _a.transform;
-            return (react_1.default.createElement("svg", { width: arrowOrigWidth, height: arrowOrigHeight, viewBox: "0 0 " + arrowOrigWidth + " " + arrowOrigHeight, style: svgStyle },
-                react_1.default.createElement("path", { className: "slideshow-arrow", style: svgInternalStyle, d: d, transform: transform })));
-        };
-        return { arrowRenderer: arrowRenderer, navArrowsContainerWidth: navArrowsContainerWidth, navArrowsContainerHeight: navArrowsContainerHeight };
-    };
     SlideshowView.prototype.createNavArrows = function () {
         var _a;
         var _this = this;
-        var _b = this.props.styleParams, isRTL = _b.isRTL, scrollDirection = _b.scrollDirection, isSlideshow = _b.isSlideshow, slideshowInfoSize = _b.slideshowInfoSize, imageMargin = _b.imageMargin, arrowsPadding = _b.arrowsPadding, arrowsPosition = _b.arrowsPosition, arrowsVerticalPosition = _b.arrowsVerticalPosition, titlePlacement = _b.titlePlacement, textBoxHeight = _b.textBoxHeight, showArrows = _b.showArrows;
-        var _c = this.state, hideLeftArrow = _c.hideLeftArrow, hideRightArrow = _c.hideRightArrow;
-        var shouldNotRenderNavArrows = this.props.isPrerenderMode ||
-            !showArrows ||
-            this.props.galleryStructure.columns.some(function (column) {
-                var allRenderedGroups = column.groups.filter(function (group) { return group.rendered; }) || [];
-                var allGroupsWidth = allRenderedGroups.reduce(function (sum, group) { return sum + Math.max(0, group.width); }, 0);
-                var isAllItemsFitsGalleryWidth = scrollDirection === pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL &&
-                    _this.props.container.galleryWidth >= allGroupsWidth;
-                return isAllItemsFitsGalleryWidth;
-            });
-        //remove navBars if no scroll is needed and is column layout
-        if (shouldNotRenderNavArrows) {
-            return null;
-        }
-        var _d = this.getArrowsRenderData(), arrowRenderer = _d.arrowRenderer, navArrowsContainerWidth = _d.navArrowsContainerWidth, navArrowsContainerHeight = _d.navArrowsContainerHeight;
+        var _b = this.props.options, isRTL = _b.isRTL, scrollDirection = _b.scrollDirection, slideshowInfoSize = _b.slideshowInfoSize, imageMargin = _b.imageMargin, arrowsPadding = _b.arrowsPadding, arrowsPosition = _b.arrowsPosition, arrowsVerticalPosition = _b.arrowsVerticalPosition, layoutParams = _b.layoutParams, titlePlacement = _b.titlePlacement, textBoxHeight = _b.textBoxHeight;
+        var _c = layoutParams.navigationArrows.container, type = _c.type, backgroundColor = _c.backgroundColor, borderRadius = _c.borderRadius;
+        var isSlideshow = pro_gallery_lib_1.GALLERY_CONSTS.isLayout('SLIDESHOW')(this.props.options);
+        var _d = this.state, hideLeftArrow = _d.hideLeftArrow, hideRightArrow = _d.hideRightArrow;
+        var _e = navigationArrowUtils_1.getArrowsRenderData({
+            customNavArrowsRenderer: this.props.customComponents.customNavArrowsRenderer,
+            arrowsColor: this.props.options.arrowsColor,
+            arrowsSize: this.props.options.arrowsSize,
+            arrowsType: layoutParams.navigationArrows.type,
+            containerStyleType: type
+        }), arrowRenderer = _e.arrowRenderer, navArrowsContainerWidth = _e.navArrowsContainerWidth, navArrowsContainerHeight = _e.navArrowsContainerHeight;
         var galleryHeight = this.props.container.galleryHeight;
         var infoHeight = isSlideshow ? slideshowInfoSize : textBoxHeight;
         var imageHeight = isSlideshow
             ? galleryHeight
             : galleryHeight - infoHeight;
-        var infoSpace = isSlideshow || pro_gallery_lib_1.GALLERY_CONSTS.hasVerticalPlacement(titlePlacement)
-            ? (_a = {},
-                _a[pro_gallery_lib_1.GALLERY_CONSTS.arrowsVerticalPosition.ITEM_CENTER] = 0,
-                _a[pro_gallery_lib_1.GALLERY_CONSTS.arrowsVerticalPosition.IMAGE_CENTER] = infoHeight,
-                _a[pro_gallery_lib_1.GALLERY_CONSTS.arrowsVerticalPosition.INFO_CENTER] = -imageHeight,
-                _a)[arrowsVerticalPosition]
-            : 0;
-        var containerStyle = {
-            width: navArrowsContainerWidth + "px",
-            height: navArrowsContainerHeight + "px",
-            padding: 0,
-            top: "calc(50% - " + navArrowsContainerHeight / 2 + "px + " + imageMargin / 4 + "px - " + infoSpace / 2 + "px)",
-        };
+        // the nav arrows parent container top edge is imageMargin/2 ABOVE the actual view, that calculates the middle point of gallery
+        var galleryVerticalCenter = "50% + " + imageMargin / 4 + "px";
+        // Determines the direction fix, the direction in which we move the nav arrows 'vertical position fix' pixels 
+        var directionFix;
+        if (pro_gallery_lib_1.GALLERY_CONSTS.hasExternalAbovePlacement(titlePlacement)) {
+            directionFix = -1;
+        }
+        else if (isSlideshow || pro_gallery_lib_1.GALLERY_CONSTS.hasExternalBelowPlacement(titlePlacement)) {
+            directionFix = 1;
+        }
+        else {
+            // if we got here, we should be ITEM_CENTER, taken care of in layoutHelper.js
+        }
+        var verticalPositionFix = (_a = {},
+            _a[pro_gallery_lib_1.GALLERY_CONSTS.arrowsVerticalPosition.ITEM_CENTER] = 0,
+            _a[pro_gallery_lib_1.GALLERY_CONSTS.arrowsVerticalPosition.IMAGE_CENTER] = infoHeight * directionFix,
+            _a[pro_gallery_lib_1.GALLERY_CONSTS.arrowsVerticalPosition.INFO_CENTER] = -imageHeight * directionFix,
+            _a)[arrowsVerticalPosition];
+        var containerStyle = tslib_1.__assign({ width: navArrowsContainerWidth + "px", height: navArrowsContainerHeight + "px", padding: 0, top: "calc(" + galleryVerticalCenter + " - " + navArrowsContainerHeight / 2 + "px - \n        " + verticalPositionFix / 2 + "px)" }, navigationArrowUtils_1.getArrowBoxStyle({
+            type: type,
+            backgroundColor: backgroundColor,
+            borderRadius: borderRadius,
+        }));
         var arrowsPos = scrollDirection === pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL &&
             arrowsPosition === pro_gallery_lib_1.GALLERY_CONSTS.arrowsPosition.OUTSIDE_GALLERY
             ? "-" + (20 + navArrowsContainerWidth) + "px"
@@ -743,27 +718,29 @@ var SlideshowView = /** @class */ (function (_super) {
         var nextContainerStyle = {
             right: arrowsPos,
         };
+        var useDropShadow = type === pro_gallery_lib_1.GALLERY_CONSTS.arrowsContainerStyleType.SHADOW;
+        var arrowsBaseClasses = [
+            'nav-arrows-container',
+            useDropShadow ? 'drop-shadow' : ''
+        ];
         return [
-            hideLeftArrow ? null : (react_1.default.createElement("button", { className: 'nav-arrows-container' +
+            hideLeftArrow ? null : (react_1.default.createElement("button", { className: arrowsBaseClasses.join(' ') +
                     (pro_gallery_lib_1.utils.isMobile() ? ' pro-gallery-mobile-indicator' : ''), onClick: function () { return _this._next({ direction: -1 }); }, "aria-label": (isRTL ? 'Next' : 'Previous') + " Item", tabIndex: pro_gallery_lib_1.utils.getTabIndex('slideshowPrev'), key: "nav-arrow-back", "data-hook": "nav-arrow-back", style: tslib_1.__assign(tslib_1.__assign({}, containerStyle), prevContainerStyle) }, arrowRenderer('left'))),
-            hideRightArrow ? null : (react_1.default.createElement("button", { className: 'nav-arrows-container', onClick: function () { return _this._next({ direction: 1 }); }, "aria-label": (!isRTL ? 'Next' : 'Previous') + " Item", tabIndex: pro_gallery_lib_1.utils.getTabIndex('slideshowNext'), key: "nav-arrow-next", "data-hook": "nav-arrow-next", style: tslib_1.__assign(tslib_1.__assign({}, containerStyle), nextContainerStyle) }, arrowRenderer('right'))),
+            hideRightArrow ? null : (react_1.default.createElement("button", { className: arrowsBaseClasses.join(' '), onClick: function () { return _this._next({ direction: 1 }); }, "aria-label": (!isRTL ? 'Next' : 'Previous') + " Item", tabIndex: pro_gallery_lib_1.utils.getTabIndex('slideshowNext'), key: "nav-arrow-next", "data-hook": "nav-arrow-next", style: tslib_1.__assign(tslib_1.__assign({}, containerStyle), nextContainerStyle) }, arrowRenderer('right'))),
         ];
     };
     SlideshowView.prototype.createLayout = function () {
         var _this = this;
-        var _a = this.props, itemsLoveData = _a.itemsLoveData, getVisibleItems = _a.getVisibleItems, galleryStructure = _a.galleryStructure, container = _a.container;
+        var _a = this.props, getVisibleItems = _a.getVisibleItems, galleryStructure = _a.galleryStructure, container = _a.container;
         var galleryConfig = {
             scrollingElement: this.props.scrollingElement,
             totalItemsCount: this.props.totalItemsCount,
             scroll: this.props.scroll,
-            styleParams: this.props.styleParams,
+            options: this.props.options,
             container: this.props.container,
-            watermark: this.props.watermark,
             settings: this.props.settings,
             activeIndex: this.state.activeIndex,
-            customHoverRenderer: this.props.customHoverRenderer,
-            customInfoRenderer: this.props.customInfoRenderer,
-            customSlideshowInfoRenderer: this.props.customSlideshowInfoRenderer,
+            customComponents: this.props.customComponents,
             noFollowForSEO: this.props.noFollowForSEO,
             galleryId: this.props.id,
             gotFirstScrollEvent: this.props.gotFirstScrollEvent,
@@ -782,60 +759,63 @@ var SlideshowView = /** @class */ (function (_super) {
             return (layoutGroupView &&
                 layoutGroupView.map(function (group) {
                     return group.rendered
-                        ? react_1.default.createElement(groupView_js_1.default, tslib_1.__assign(tslib_1.__assign({ allowLoop: _this.props.styleParams.slideshowLoop &&
+                        ? react_1.default.createElement(groupView_js_1.default, tslib_1.__assign(tslib_1.__assign({ allowLoop: _this.props.options.slideshowLoop &&
                                 _this.props.galleryStructure.width >
-                                    _this.props.container.width, itemsLoveData: itemsLoveData }, group.renderProps(galleryConfig)), { ariaHidden: group.idx > _this.skipFromSlide }))
+                                    _this.props.container.width }, group.renderProps(galleryConfig)), { ariaHidden: group.idx > _this.skipFromSlide }))
                         : false;
                 }));
         };
         return galleryStructure.columns.map(function (column, c) {
             var columnStyle = {
                 width: _this.props.isPrerenderMode ? '100%' : column.width,
-                height: container.galleryHeight,
+                height: _this.getDimensions().height
             };
-            if (_this.props.styleParams.isSlideshow) {
-                Object.assign(columnStyle, {
-                    paddingBottom: _this.props.styleParams.slideshowInfoSize,
-                });
-            }
-            return (react_1.default.createElement("div", { "data-hook": "gallery-column", id: "gallery-horizontal-scroll", className: "gallery-horizontal-scroll gallery-column hide-scrollbars " + (_this.props.styleParams.isRTL ? ' rtl ' : ' ltr ') + " " + (_this.props.styleParams.scrollSnap ? ' scroll-snap ' : '') + " ", key: 'column' + c, style: columnStyle },
+            return (react_1.default.createElement("div", { "data-hook": "gallery-column", id: "gallery-horizontal-scroll", className: "gallery-horizontal-scroll gallery-column hide-scrollbars " + (_this.props.options.isRTL ? ' rtl ' : ' ltr ') + " " + (_this.props.options.scrollSnap ? ' scroll-snap ' : '') + " ", key: 'column' + c, style: columnStyle },
                 react_1.default.createElement("div", { className: "gallery-horizontal-scroll-inner" }, renderGroups(column))));
         });
     };
+    SlideshowView.prototype.getDimensions = function () {
+        var isSlideshow = pro_gallery_lib_1.GALLERY_CONSTS.isLayout('SLIDESHOW')(this.props.options);
+        var addition = isSlideshow ? this.props.options.slideshowInfoSize : 0;
+        var height = this.props.container.galleryHeight + addition;
+        return this.props.isPrerenderMode
+            ? {
+                width: '100%',
+                height: height,
+            }
+            : {
+                height: height,
+                width: this.props.container.galleryWidth,
+            };
+    };
     SlideshowView.prototype.createGallery = function () {
+        var _a;
         // When arrows are set outside of the gallery, gallery is resized (in dimensionsHelper -> getGalleryWidth) and needs to be positioned accordingly
-        var galleryStyleForExternalArrows = this.props.styleParams.scrollDirection ===
+        var galleryStyleForExternalArrows = this.props.options.scrollDirection ===
             pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL &&
-            this.props.styleParams.arrowsPosition ===
+            this.props.options.arrowsPosition ===
                 pro_gallery_lib_1.GALLERY_CONSTS.arrowsPosition.OUTSIDE_GALLERY
             ? {
                 overflow: 'visible',
-                left: this.props.styleParams.arrowsSize +
+                left: this.props.options.arrowsSize +
                     40 +
-                    this.props.styleParams.imageMargin / 2,
+                    this.props.options.imageMargin / 2,
             }
             : {};
-        var galleryDimensions = this.props.isPrerenderMode
-            ? {
-                width: '100%',
-                height: this.props.container.galleryHeight,
-            }
-            : {
-                height: this.props.container.galleryHeight,
-                width: this.props.container.galleryWidth,
-            };
+        var galleryDimensions = this.getDimensions();
         var galleryStyle = tslib_1.__assign(tslib_1.__assign({}, galleryDimensions), galleryStyleForExternalArrows);
-        if (this.props.styleParams.isSlideshow) {
-            Object.assign(galleryStyle, {
-                paddingBottom: this.props.styleParams.slideshowInfoSize,
-            });
-        }
-        return (react_1.default.createElement("div", { id: "pro-gallery-container", className: 'pro-gallery inline-styles one-row hide-scrollbars ' +
-                (this.props.styleParams.enableScroll ? ' slider ' : '') +
-                (this.props.styleParams.isAccessible ? ' accessible ' : '') +
-                (this.props.styleParams.isRTL ? ' rtl ' : ' ltr '), style: galleryStyle },
+        return (react_1.default.createElement("div", { id: this.props.galleryContainerId, className: 'pro-gallery inline-styles one-row hide-scrollbars ' +
+                (this.props.options.enableScroll ? ' slider ' : '') +
+                (((_a = this.props.settings) === null || _a === void 0 ? void 0 : _a.isAccessible) ? ' accessible ' : '') +
+                (this.props.options.isRTL ? ' rtl ' : ' ltr '), style: galleryStyle },
             this.createDebugMsg(),
-            this.createNavArrows(),
+            navigationArrowUtils_1.shouldRenderNavArrows({
+                options: this.props.options,
+                container: this.props.container,
+                isPrerenderMode: this.props.isPrerenderMode,
+                galleryStructure: this.props.galleryStructure,
+                customNavArrowsRenderer: this.props.customComponents.customNavArrowsRenderer,
+            }) && this.createNavArrows(),
             this.createLayout(),
             this.createAutoSlideShowPlayButton(),
             this.createSlideShowNumbers()));
@@ -843,7 +823,7 @@ var SlideshowView = /** @class */ (function (_super) {
     SlideshowView.prototype.onAutoSlideShowButtonClick = function () {
         var _this = this;
         this.setState({ pauseAutoSlideshowClicked: !this.state.pauseAutoSlideshowClicked }, function () {
-            _this.blockAutoSlideshowIfNeeded(_this.props);
+            _this.updateAutoSlideShowState(_this.props);
         });
     };
     SlideshowView.prototype.isFullWidthGallery = function () {
@@ -885,14 +865,14 @@ var SlideshowView = /** @class */ (function (_super) {
         if (!this.shouldCreateSlideShowPlayButton) {
             return false;
         }
-        var _a = this.props.styleParams, galleryTextAlign = _a.galleryTextAlign, slideshowInfoSize = _a.slideshowInfoSize;
-        var imageMargin = this.props.styleParams.imageMargin / 2 +
+        var _a = this.props.options, galleryTextAlign = _a.galleryTextAlign, slideshowInfoSize = _a.slideshowInfoSize;
+        var imageMargin = this.props.options.imageMargin / 2 +
             (this.isFullWidthGallery() ? 50 : 0);
         var side = galleryTextAlign === 'right'
             ? { left: imageMargin / 2 + "px" }
             : {
                 right: imageMargin / 2 +
-                    (this.shouldCreateSlideShowNumbers
+                    (this.props.options.allowSlideshowCounter
                         ? this.calcSlideshowCounterWidth()
                         : 0) + "px",
             };
@@ -901,11 +881,11 @@ var SlideshowView = /** @class */ (function (_super) {
             }, onKeyDown: this.onAutoSlideshowAutoPlayKeyPress, "data-hook": "auto-slideshow-button", title: 'slideshow auto play', "aria-pressed": this.state.pauseAutoSlideshowClicked, tabIndex: 0, style: tslib_1.__assign({ top: "calc(100% - " + slideshowInfoSize + "px + 3px)" }, side) }, this.state.pauseAutoSlideshowClicked ? (react_1.default.createElement(play_1.default, { width: "10px", height: "100%" })) : (react_1.default.createElement(pause_1.default, { width: "10px", height: "100%" }))));
     };
     SlideshowView.prototype.createSlideShowNumbers = function () {
-        if (!this.shouldCreateSlideShowNumbers) {
+        if (!this.props.options.allowSlideshowCounter) {
             return false;
         }
-        var _a = this.props, totalItemsCount = _a.totalItemsCount, _b = _a.styleParams, galleryTextAlign = _b.galleryTextAlign, slideshowInfoSize = _b.slideshowInfoSize;
-        var imageMargin = this.props.styleParams.imageMargin / 2 +
+        var _a = this.props, totalItemsCount = _a.totalItemsCount, _b = _a.options, galleryTextAlign = _b.galleryTextAlign, slideshowInfoSize = _b.slideshowInfoSize;
+        var imageMargin = this.props.options.imageMargin / 2 +
             (this.isFullWidthGallery() ? 50 : 0);
         var leftMargin = this.shouldCreateSlideShowPlayButton
             ? imageMargin / 2 + 25
@@ -920,8 +900,8 @@ var SlideshowView = /** @class */ (function (_super) {
                 totalItemsCount)));
     };
     SlideshowView.prototype.getThumbnails = function () {
-        var hasThumbnails = this.props.styleParams.hasThumbnails;
-        var thumbnailsPosition = this.props.styleParams.galleryThumbnailsAlignment;
+        var hasThumbnails = this.props.options.hasThumbnails;
+        var thumbnailsPosition = this.props.options.galleryThumbnailsAlignment;
         var thumbnailsGallery = hasThumbnails
             ? this.createThumbnails(thumbnailsPosition)
             : false;
@@ -941,17 +921,18 @@ var SlideshowView = /** @class */ (function (_super) {
         return thumbnails;
     };
     SlideshowView.prototype.getClassNames = function () {
+        pro_gallery_lib_1.GALLERY_CONSTS.isLayout('SLIDESHOW')(this.props.options);
         var classNames = 'pro-gallery-parent-container';
-        if (this.props.styleParams.isSlideshow) {
+        if (pro_gallery_lib_1.GALLERY_CONSTS.isLayout('SLIDESHOW')(this.props.options)) {
             classNames += ' gallery-slideshow';
         }
-        else if (this.props.styleParams.isSlider) {
+        else if (pro_gallery_lib_1.GALLERY_CONSTS.isLayout('SLIDER')(this.props.options)) {
             classNames += ' gallery-slider';
         }
-        else if (this.props.styleParams.hasThumbnails) {
+        else if (this.props.options.hasThumbnails) {
             classNames += ' gallery-thumbnails';
         }
-        else if (this.props.styleParams.isColumns) {
+        else if (pro_gallery_lib_1.GALLERY_CONSTS.isLayout('COLUMN')(this.props.options)) {
             classNames += ' gallery-columns';
         }
         if (this.isFullWidthGallery()) {
@@ -962,8 +943,8 @@ var SlideshowView = /** @class */ (function (_super) {
     SlideshowView.prototype.getStyles = function () {
         return {
             margin: -1 *
-                (this.props.styleParams.imageMargin / 2 -
-                    this.props.styleParams.galleryMargin),
+                (this.props.options.imageMargin / 2 -
+                    this.props.options.layoutParams.gallerySpacing),
         };
     };
     SlideshowView.prototype.getScrollPosition = function () {
@@ -978,59 +959,58 @@ var SlideshowView = /** @class */ (function (_super) {
         return this.getScrollPosition() + this.props.container.galleryWidth;
     };
     SlideshowView.prototype.scrollPosition = function () {
-        return (this.props.styleParams.isRTL ? -1 : 1) * this.scrollElement.scrollLeft;
+        return (this.props.options.isRTL ? -1 : 1) * this.scrollElement.scrollLeft;
     };
     //-----------------------------------------| REACT |--------------------------------------------//
-    SlideshowView.prototype.blockAutoSlideshowIfNeeded = function (props) {
+    SlideshowView.prototype.updateAutoSlideShowState = function (props) {
         var _this = this;
         if (props === void 0) { props = this.props; }
-        var isGalleryInHover = props.isGalleryInHover, styleParams = props.styleParams;
+        var isGalleryInHover = props.isGalleryInHover, options = props.options, settings = props.settings;
         var _a = this.state, pauseAutoSlideshowClicked = _a.pauseAutoSlideshowClicked, shouldBlockAutoSlideshow = _a.shouldBlockAutoSlideshow, isInView = _a.isInView, isInFocus = _a.isInFocus;
-        var should = false;
-        if (!isInView || pauseAutoSlideshowClicked) {
-            should = true;
-        }
-        else if (isGalleryInHover &&
-            styleParams.pauseAutoSlideshowOnHover) {
-            should = true;
-        }
-        else if (isInFocus &&
-            styleParams.isAccessible) {
-            should = true;
-        }
-        if (shouldBlockAutoSlideshow !== should) {
-            this.setState({ shouldBlockAutoSlideshow: should }, function () {
-                _this.startAutoSlideshowIfNeeded(styleParams);
+        var shouldPauseDueToHover = isGalleryInHover && options.pauseAutoSlideshowOnHover;
+        var shouldPauseDueToFocus = isInFocus && (settings === null || settings === void 0 ? void 0 : settings.isAccessible);
+        var shouldBlock = !isInView ||
+            pauseAutoSlideshowClicked ||
+            shouldPauseDueToFocus ||
+            shouldPauseDueToHover;
+        if (shouldBlockAutoSlideshow !== shouldBlock) {
+            this.setState({ shouldBlockAutoSlideshow: shouldBlock }, function () {
+                _this.startAutoSlideshowIfNeeded(options);
             });
         }
-        else {
-            return;
-        }
     };
     SlideshowView.prototype.onFocus = function () {
         var _this = this;
         this.setState({ isInFocus: true }, function () {
-            _this.blockAutoSlideshowIfNeeded(_this.props);
+            _this.updateAutoSlideShowState(_this.props);
         });
     };
     SlideshowView.prototype.onBlur = function () {
         var _this = this;
         this.setState({ isInFocus: false }, function () {
-            _this.blockAutoSlideshowIfNeeded(_this.props);
+            _this.updateAutoSlideShowState(_this.props);
         });
     };
     SlideshowView.prototype.UNSAFE_componentWillReceiveProps = function (props) {
         var _this = this;
+        var _a, _b;
         if (props.items) {
             this.ItemsForSlideshowLoopThumbnails = false;
         }
-        if (this.props.isInDisplay !== props.isInDisplay) {
-            this.setState({ isInView: props.isInDisplay }, function () {
-                return _this.blockAutoSlideshowIfNeeded(props);
+        var isInView = props.isInViewport && ((_a = props.isInDisplay) !== null && _a !== void 0 ? _a : true);
+        var oldIsInView = this.props.isInViewport && ((_b = this.props.isInDisplay) !== null && _b !== void 0 ? _b : true);
+        if (isInView !== oldIsInView) {
+            this.setState({ isInView: isInView }, function () {
+                _this.updateAutoSlideShowState(props);
             });
         }
-        if (this.props.isGalleryInHover !== props.isGalleryInHover) {
-            this.blockAutoSlideshowIfNeeded(props);
+        else if (this.props.isGalleryInHover !== props.isGalleryInHover) {
+            this.updateAutoSlideShowState(props);
+        }
+        else if (this.props.container.scrollBase != props.container.scrollBase) {
+            this.forceUpdate(function () {
+                _this.startAutoSlideshowIfNeeded(props.options);
+            });
         }
         if (this.props.activeIndex !== props.activeIndex) {
             pro_gallery_lib_1.utils.setStateAndLog(this, 'Next Item', {
@@ -1045,23 +1025,18 @@ var SlideshowView = /** @class */ (function (_super) {
         if (pro_gallery_lib_1.isEditMode() || pro_gallery_lib_1.isPreviewMode()) {
             if (
             //check that the change is related to the slideshow settings
-            this.props.styleParams.isAutoSlideshow !==
-                props.styleParams.isAutoSlideshow ||
-                this.props.styleParams.autoSlideshowInterval !==
-                    props.styleParams.autoSlideshowInterval) {
-                this.startAutoSlideshowIfNeeded(props.styleParams);
+            this.props.options.isAutoSlideshow !==
+                props.options.isAutoSlideshow ||
+                this.props.options.autoSlideshowInterval !==
+                    props.options.autoSlideshowInterval) {
+                this.startAutoSlideshowIfNeeded(props.options);
             }
         }
-        var isAutoSlideShow = props.styleParams.galleryLayout === 5 &&
-            props.styleParams.isSlideshow &&
-            props.styleParams.isAutoSlideshow;
         this.shouldCreateSlideShowPlayButton =
-            isAutoSlideShow && props.styleParams.playButtonForAutoSlideShow;
-        this.shouldCreateSlideShowNumbers =
-            isAutoSlideShow && props.styleParams.allowSlideshowCounter;
+            props.options.isAutoSlideshow && props.options.playButtonForAutoSlideShow;
     };
     SlideshowView.prototype.removeArrowsIfNeeded = function () {
-        var isRTL = this.props.styleParams.isRTL;
+        var isRTL = this.props.options.isRTL;
         var _a = this.state, hideLeftArrow = _a.hideLeftArrow, hideRightArrow = _a.hideRightArrow;
         var isScrollStart = this.isScrollStart();
         var isFirstItem = this.isFirstItem();
@@ -1080,23 +1055,7 @@ var SlideshowView = /** @class */ (function (_super) {
             });
         }
     };
-    SlideshowView.prototype.navigationOutHandler = function () {
-        //TODO remove after full refactor release
-        pro_gallery_lib_1.utils.setStateAndLog(this, 'Next Item', {
-            isInView: false,
-        });
-        this.clearAutoSlideshowInterval();
-    };
-    SlideshowView.prototype.navigationInHandler = function () {
-        //TODO remove after full refactor release
-        pro_gallery_lib_1.utils.setStateAndLog(this, 'Next Item', {
-            isInView: true,
-        });
-        this.startAutoSlideshowIfNeeded(this.props.styleParams);
-    };
     SlideshowView.prototype.componentDidMount = function () {
-        pro_gallery_lib_1.window.addEventListener('gallery_navigation_out', this.navigationOutHandler);
-        pro_gallery_lib_1.window.addEventListener('gallery_navigation_in', this.navigationInHandler);
         this.scrollElement = pro_gallery_lib_1.window.document.querySelector("#pro-gallery-" + this.props.id + " #gallery-horizontal-scroll");
         if (this.scrollElement) {
             this.scrollElement.addEventListener('scroll', this._setCurrentItemByScroll);
@@ -1108,11 +1067,9 @@ var SlideshowView = /** @class */ (function (_super) {
         else {
             this.setCurrentItemByScroll();
         }
-        this.startAutoSlideshowIfNeeded(this.props.styleParams);
+        this.startAutoSlideshowIfNeeded(this.props.options);
     };
     SlideshowView.prototype.componentWillUnmount = function () {
-        pro_gallery_lib_1.window.removeEventListener('gallery_navigation_out', this.navigationOutHandler);
-        pro_gallery_lib_1.window.removeEventListener('gallery_navigation_in', this.navigationInHandler);
         if (this.scrollElement) {
             this.scrollElement.removeEventListener('scroll', this._setCurrentItemByScroll);
         }
@@ -1129,13 +1086,16 @@ var SlideshowView = /** @class */ (function (_super) {
         if (pro_gallery_lib_1.utils.isVerbose()) {
             console.timeEnd('Rendering Gallery took ');
         }
-        return (react_1.default.createElement("div", tslib_1.__assign({ className: this.getClassNames(), style: this.getStyles(), onKeyDown: this.handleSlideshowKeyPress }, pro_gallery_lib_1.utils.getAriaAttributes(this.props), { onFocus: this.onFocus, onBlur: this.onBlur }),
+        return (react_1.default.createElement("div", tslib_1.__assign({ className: this.getClassNames(), style: this.getStyles(), onKeyDown: this.handleSlideshowKeyPress }, pro_gallery_lib_1.utils.getAriaAttributes({
+            proGalleryRole: this.props.proGalleryRole,
+            proGalleryRegionLabel: this.props.proGalleryRegionLabel
+        }), { onFocus: this.onFocus, onBlur: this.onBlur }),
             thumbnails[0],
             gallery,
             thumbnails[1]));
     };
     return SlideshowView;
-}(galleryComponent_1.GalleryComponent));
+}(react_1.default.Component));
 exports.default = SlideshowView;
 /* eslint-enable prettier/prettier */
 //# sourceMappingURL=slideshowView.js.map