pro-gallery 4.0.15-beta.2 → 4.0.15-beta.202

package/README.md

@@ -30,11 +30,11 @@ import { ProGallery } from 'pro-gallery';
 import 'pro-gallery/dist/statics/main.css';
 
 <ProGallery
-  domId={domId}
+  id={id}
   items={items}
   options={options}
   container={container}
-  scrollingElement={() => document.getElementById('gallery') || window}
+  scrollingElement={document.getElementById('gallery') || window}
   eventsListener={(eName, eData) => console.log({eName, eData})}
 />
 ```
@@ -111,8 +111,8 @@ const container = {
 ```
 The `width` and `height` values represent the size in which the gallery should be. The gallery will size the items to fit exactly in that box. Notice that when infiniteScroll is enabled, vertical galleries will ignore the `height` parameter and horizontal galleries will ignore the `width` parameter.
 
-### domId
-A unique Id for the gallery. Use for multiple galleries in the same page, or when using SSR - to make sure the gallery does not flickr in the hydrate phase.
+### id
+A unique id for the gallery. Use for multiple galleries in the same page, or when using SSR - to make sure the gallery does not flickr in the hydrate phase.
 
 ### Scrolling Element
 The DOM element inside which the gallery is scrolled (defaults to `window`). If the gallery is scrolled inside a different element, pass its dom reference in this property. You can also pass a function that returns that dom element.
@@ -130,14 +130,16 @@ The most important events are:
 
 The full list gallery events is [here](https://github.com/wix/pro-gallery/blob/master/packages/lib/src/common/constants/events.js)
 
-### Custom Renderers
+### Custom Components
 The Gallery supports custom renderers both for the Hover Element (appears when hoveing over an item) and the Info Element (appears below / above the item).
 To replace the default rendering of these element, pass a function that will receive the item's props and should return a JSX element.
 for example:
 ```
 <ProGallery
   {...otherProps}
-  customHoverRenderer={itemProps => <div>Hover #{itemProps.idx}</div>}
-  customInfoRenderer={itemProps => <div>Info #{itemProps.idx}</div>}
+  customComponents: {
+    customHoverRenderer={itemProps => <div>Hover #{itemProps.idx}</div>}
+    customInfoRenderer={itemProps => <div>Info #{itemProps.idx}</div>}
+  }
 />
 ```

package/dist/cjs/components/gallery/index.js

@@ -3,16 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var pro_gallery_lib_1 = require("pro-gallery-lib");
+var pro_gallery_blueprints_1 = require("pro-gallery-blueprints");
 var proGallery_1 = tslib_1.__importDefault(require("./proGallery/proGallery"));
 var shouldValidate_1 = tslib_1.__importDefault(require("./typeValidator/shouldValidate"));
-var BaseGallery = /** @class */ (function (_super) {
-    tslib_1.__extends(BaseGallery, _super);
-    function BaseGallery(props) {
+var Gallery = /** @class */ (function (_super) {
+    tslib_1.__extends(Gallery, _super);
+    function Gallery(props) {
         var _this = _super.call(this, props) || this;
         _this.isUsingCustomInfoElements = _this.isUsingCustomInfoElements.bind(_this);
-        _this.blueprintsManager = new pro_gallery_lib_1.BlueprintsManager({ id: 'layoutingGallery' });
+        _this.blueprintsManager = new pro_gallery_blueprints_1.BlueprintsManager({ id: 'layoutingGallery' });
         _this.blueprintsManager.init({
-            formFactor: props.formFactor,
+            deviceType: props.deviceType,
             api: {
                 isUsingCustomInfoElements: _this.isUsingCustomInfoElements,
                 fetchMoreItems: function (from) {
@@ -38,7 +39,7 @@ var BaseGallery = /** @class */ (function (_super) {
         };
         return _this;
     }
-    BaseGallery.prototype.setBlueprint = function (blueprint, initialBlueprint) {
+    Gallery.prototype.setBlueprint = function (blueprint, initialBlueprint) {
         if (initialBlueprint) {
             // the blueprint from the initial blueprint flow will be set in the constructor
         }
@@ -46,28 +47,24 @@ var BaseGallery = /** @class */ (function (_super) {
             this.setState({ blueprint: blueprint });
         }
     };
-    BaseGallery.prototype.isUsingCustomInfoElements = function () {
-        return (!!this.galleryProps.customHoverRenderer ||
-            !!this.galleryProps.customInfoRenderer ||
-            !!this.galleryProps.customSlideshowInfoRenderer);
+    Gallery.prototype.isUsingCustomInfoElements = function () {
+        return (!!this.galleryProps.customComponents.customHoverRenderer ||
+            !!this.galleryProps.customComponents.customInfoRenderer ||
+            !!this.galleryProps.customComponents.customSlideshowInfoRenderer);
     };
-    BaseGallery.prototype.onNewProps = function (props, calledByConstructor) {
+    Gallery.prototype.onNewProps = function (props, calledByConstructor) {
         var _this = this;
         var eventsListener = props.eventsListener, otherProps = tslib_1.__rest(props, ["eventsListener"]);
-        var _eventsListener = function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            var eventName = args[0], value = args[1];
+        var _eventsListener = function (eventName, eventData) {
             if (eventName === pro_gallery_lib_1.GALLERY_CONSTS.events.NEED_MORE_ITEMS) {
-                _this.blueprintsManager.getMoreItems(value);
+                _this.blueprintsManager.getMoreItems(eventData);
             }
             else {
-                typeof eventsListener === 'function' && eventsListener.apply(void 0, args);
+                typeof eventsListener === 'function' &&
+                    eventsListener(eventName, eventData);
             }
         };
-        this.galleryProps = tslib_1.__assign(tslib_1.__assign({}, otherProps), { eventsListener: _eventsListener, domId: props.domId || 'default-dom-id' });
+        this.galleryProps = tslib_1.__assign(tslib_1.__assign({}, otherProps), { eventsListener: _eventsListener, id: props.id || 'default-dom-id', customComponents: props.customComponents || {} });
         if (calledByConstructor) {
             // the blueprint will be initiated with the state
         }
@@ -78,11 +75,10 @@ var BaseGallery = /** @class */ (function (_super) {
             });
         }
     };
-    BaseGallery.prototype.UNSAFE_componentWillReceiveProps = function (newProps) {
+    Gallery.prototype.UNSAFE_componentWillReceiveProps = function (newProps) {
         this.onNewProps(newProps, false);
     };
-    BaseGallery.prototype.render = function () {
-        console.log('Change production code18');
+    Gallery.prototype.render = function () {
         var _a = this.state, blueprint = _a.blueprint, typeErrors = _a.typeErrors;
         if (typeErrors) {
             return typeErrors;
@@ -94,7 +90,7 @@ var BaseGallery = /** @class */ (function (_super) {
             return null;
         }
     };
-    BaseGallery.prototype.componentDidMount = function () {
+    Gallery.prototype.componentDidMount = function () {
         return tslib_1.__awaiter(this, void 0, void 0, function () {
             var validateTypesModule, validate, typeErrorsUI, typeErrors;
             return tslib_1.__generator(this, function (_a) {
@@ -108,7 +104,7 @@ var BaseGallery = /** @class */ (function (_super) {
                     case 1:
                         validateTypesModule = _a.sent();
                         validate = validateTypesModule.validate, typeErrorsUI = validateTypesModule.typeErrorsUI;
-                        typeErrors = validate(this.props.options || this.props.styles || this.props.styleParams);
+                        typeErrors = validate(this.state.blueprint.options);
                         if (typeErrors.length > 0) {
                             this.setState({ typeErrors: typeErrorsUI(typeErrors) });
                         }
@@ -117,7 +113,7 @@ var BaseGallery = /** @class */ (function (_super) {
             });
         });
     };
-    return BaseGallery;
+    return Gallery;
 }(react_1.default.Component));
-exports.default = BaseGallery;
+exports.default = Gallery;
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/gallery/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/gallery/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/gallery/index.tsx"],"names":[],"mappings":"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"}

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

@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
 /* eslint-disable prettier/prettier */
 var react_1 = tslib_1.__importDefault(require("react"));
 var pro_gallery_lib_1 = require("pro-gallery-lib");
+var pro_layouts_1 = require("pro-layouts");
 var galleryView_1 = tslib_1.__importDefault(require("./galleryView"));
 var slideshowView_1 = tslib_1.__importDefault(require("./slideshowView"));
 var scrollHelper_1 = require("../../helpers/scrollHelper");
@@ -46,11 +47,10 @@ var GalleryContainer = /** @class */ (function (_super) {
             showMoreClickedAtLeastOnce: false,
             initialGalleryHeight: undefined,
             needToHandleShowMoreClick: false,
-            gotFirstScrollEvent: false,
+            gotFirstScrollEvent: (props.activeIndex >= 0),
             playingVideoIdx: -1,
             viewComponent: null,
             firstUserInteractionExecuted: false,
-            isScrollLessGallery: _this.getIsScrollLessGallery(_this.props.styles),
             isInHover: false,
         };
         _this.state = initialState;
@@ -69,8 +69,15 @@ var GalleryContainer = /** @class */ (function (_super) {
         return _this;
         //not sure if there needs to be a handleNEwGalleryStructure here with the intial state. currently looks like not
     }
+    GalleryContainer.prototype.initializeScrollPosition = function () {
+        if (this.props.activeIndex > 0) {
+            this.scrollToItem(this.props.activeIndex, false, true, 0);
+            var currentItem = this.galleryStructure.items[this.props.activeIndex];
+            this.onGalleryScroll(currentItem.offset);
+        }
+    };
     GalleryContainer.prototype.componentDidMount = function () {
-        this.scrollToItem(this.props.currentIdx, false, true, 0);
+        this.initializeScrollPosition();
         this.handleNewGalleryStructure();
         this.eventsListener(pro_gallery_lib_1.GALLERY_CONSTS.events.APP_LOADED, {});
         this.videoScrollHelper.initializePlayState();
@@ -88,18 +95,18 @@ var GalleryContainer = /** @class */ (function (_super) {
         catch (e) {
             console.error("could not create 'current_hover_change' customEvent. Error =", e);
         }
-        if (this.props.domId) {
-            this.currentHoverChangeEvent.domId = this.props.domId;
+        if (this.props.id) {
+            this.currentHoverChangeEvent.galleryId = this.props.id;
         }
     };
     GalleryContainer.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
         var _this = this;
-        if (!this.currentHoverChangeEvent.domId && nextProps.domId) {
-            this.currentHoverChangeEvent.domId = nextProps.domId;
+        if (!this.currentHoverChangeEvent.galleryId && nextProps.id) {
+            this.currentHoverChangeEvent.galleryId = nextProps.id;
         }
-        if (this.props.currentIdx !== nextProps.currentIdx &&
-            nextProps.currentIdx !== this.currentSlideshowViewIdx) {
-            this.scrollToItem(nextProps.currentIdx, false, true, 0);
+        if (this.props.activeIndex !== nextProps.activeIndex &&
+            nextProps.activeIndex !== this.currentSlideshowViewIdx) {
+            this.scrollToItem(nextProps.activeIndex, false, true, 0);
         }
         var reCreateGallery = function () {
             var galleryState = _this.propsToState(nextProps);
@@ -108,21 +115,21 @@ var GalleryContainer = /** @class */ (function (_super) {
             }
         };
         var getSignificantProps = function (props) {
-            var domId = props.domId, styles = props.styles, container = props.container, items = props.items, watermark = props.watermark, isInDisplay = props.isInDisplay;
-            return { domId: domId, styles: styles, container: container, items: items, watermark: watermark, isInDisplay: isInDisplay };
+            var id = props.id, options = props.options, container = props.container, items = props.items, isInDisplay = props.isInDisplay;
+            return { id: id, options: options, container: container, items: items, isInDisplay: isInDisplay };
         };
         if (this.reCreateGalleryTimer) {
             clearTimeout(this.reCreateGalleryTimer);
         }
         var hasPropsChanged = true;
         try {
-            var currentSignificatProps = getSignificantProps(this.props);
-            var nextSignificatProps = getSignificantProps(nextProps);
+            var currentSignificantProps = getSignificantProps(this.props);
+            var nextSignificantProps = getSignificantProps(nextProps);
             hasPropsChanged =
-                JSON.stringify(currentSignificatProps) !==
-                    JSON.stringify(nextSignificatProps);
+                JSON.stringify(currentSignificantProps) !==
+                    JSON.stringify(nextSignificantProps);
             if (pro_gallery_lib_1.utils.isVerbose() && hasPropsChanged) {
-                console.log('New props arrived', pro_gallery_lib_1.utils.printableObjectsDiff(currentSignificatProps, nextSignificatProps));
+                console.log('New props arrived', pro_gallery_lib_1.utils.printableObjectsDiff(currentSignificantProps, nextSignificantProps));
             }
         }
         catch (e) {
@@ -130,9 +137,6 @@ var GalleryContainer = /** @class */ (function (_super) {
         }
         if (hasPropsChanged) {
             reCreateGallery();
-            if (!!nextProps.currentIdx && nextProps.currentIdx > 0) {
-                this.scrollToItem(nextProps.currentIdx, false, true, 0);
-            }
             if (this.props.isInDisplay !== nextProps.isInDisplay) {
                 this.handleNavigation(nextProps.isInDisplay);
             }
@@ -153,7 +157,7 @@ var GalleryContainer = /** @class */ (function (_super) {
     GalleryContainer.prototype.handleNewGalleryStructure = function () {
         //should be called AFTER new state is set
         var _a = this.state, container = _a.container, needToHandleShowMoreClick = _a.needToHandleShowMoreClick, initialGalleryHeight = _a.initialGalleryHeight;
-        var styleParams = this.props.styles;
+        var options = this.props.options;
         var numOfItems = this.state.items.length;
         var layoutHeight = this.props.structure.height;
         var layoutItems = this.props.structure.items;
@@ -168,7 +172,7 @@ var GalleryContainer = /** @class */ (function (_super) {
         var onGalleryChangeData = {
             numOfItems: numOfItems,
             container: container,
-            styleParams: styleParams,
+            options: options,
             layoutHeight: layoutHeight,
             layoutItems: layoutItems,
             isInfinite: isInfinite,
@@ -183,11 +187,11 @@ var GalleryContainer = /** @class */ (function (_super) {
         }
     };
     GalleryContainer.prototype.isVerticalGallery = function () {
-        return (this.state.styles.scrollDirection ===
+        return (this.state.options.scrollDirection ===
             pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.VERTICAL);
     };
-    GalleryContainer.prototype.getIsScrollLessGallery = function (styles) {
-        var scrollDirection = styles.scrollDirection, slideAnimation = styles.slideAnimation;
+    GalleryContainer.prototype.getIsScrollLessGallery = function (options) {
+        var scrollDirection = options.scrollDirection, slideAnimation = options.slideAnimation;
         return (scrollDirection === pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL &&
             slideAnimation !== pro_gallery_lib_1.GALLERY_CONSTS.slideAnimations.SCROLL);
     };
@@ -200,7 +204,7 @@ var GalleryContainer = /** @class */ (function (_super) {
             pro_gallery_lib_1.isEditMode() ||
             gotFirstScrollEvent ||
             scrollY > 0 ||
-            this.props.currentIdx > 0) {
+            this.props.activeIndex > 0) {
             return items;
         }
         var visibleItems = items;
@@ -233,21 +237,21 @@ var GalleryContainer = /** @class */ (function (_super) {
         return visibleItems;
     };
     GalleryContainer.prototype.propsToState = function (_a) {
-        var items = _a.items, styles = _a.styles, structure = _a.structure, container = _a.container, domId = _a.domId, resizeMediaUrl = _a.resizeMediaUrl, isPrerenderMode = _a.isPrerenderMode, customImageRenderer = _a.customImageRenderer;
+        var items = _a.items, options = _a.options, structure = _a.structure, container = _a.container, id = _a.id, createMediaUrl = _a.createMediaUrl, isPrerenderMode = _a.isPrerenderMode, customComponents = _a.customComponents;
         items = items || this.props.items;
-        styles = styles || this.props.styles;
+        options = options || this.props.options;
         container = container || this.props.container;
         structure = structure || this.props.structure;
-        domId = domId || this.props.domId;
-        resizeMediaUrl = resizeMediaUrl || this.props.resizeMediaUrl;
-        if (typeof customImageRenderer === 'function') {
-            imageRenderer_1.default.customImageRenderer = customImageRenderer;
+        id = id || this.props.id;
+        createMediaUrl = createMediaUrl || this.props.createMediaUrl;
+        if (typeof customComponents.customImageRenderer === 'function') {
+            imageRenderer_1.default.customImageRenderer = customComponents.customImageRenderer;
         }
-        this.galleryStructure = pro_gallery_lib_1.ItemsHelper.convertToGalleryItems(structure, {
+        this.galleryStructure = pro_layouts_1.ItemsHelper.convertToGalleryItems(structure, {
             // TODO use same objects in the memory when the galleryItems are changed
-            thumbnailSize: styles.thumbnailSize,
-            sharpParams: styles.sharpParams,
-            resizeMediaUrl: resizeMediaUrl,
+            thumbnailSize: options.thumbnailSize,
+            sharpParams: options.sharpParams,
+            createMediaUrl: createMediaUrl,
         });
         // // ------------ TODO. This is using GalleryItem and I am leaving it here for now ---------- //
         var shouldUseScrollCss = !pro_gallery_lib_1.isSEOMode() &&
@@ -256,26 +260,27 @@ var GalleryContainer = /** @class */ (function (_super) {
                 this.state.showMoreClickedAtLeastOnce);
         if (shouldUseScrollCss) {
             this.getScrollCss({
-                domId: domId,
+                id: id,
                 items: this.galleryStructure.galleryItems,
-                styleParams: styles,
+                options: options,
                 container: container,
             });
         }
         var scrollHelperNewGalleryStructure = {
             galleryStructure: this.galleryStructure,
+            galleryWidth: container.galleryWidth,
             scrollBase: container.scrollBase,
-            videoPlay: styles.videoPlay,
-            videoLoop: styles.videoLoop,
-            itemClick: styles.itemClick,
-            scrollDirection: styles.scrollDirection,
+            videoPlay: options.videoPlay,
+            videoLoop: options.videoLoop,
+            itemClick: options.itemClick,
+            scrollDirection: options.scrollDirection,
             cb: this.setPlayingIdxState,
         };
         this.videoScrollHelper.updateGalleryStructure(scrollHelperNewGalleryStructure, !pro_gallery_lib_1.utils.isSSR(), items);
         var layoutParams = {
             items: items,
             container: container,
-            styleParams: styles,
+            styleParams: options,
             gotScrollEvent: true,
             options: {
                 showAllItems: true,
@@ -285,38 +290,44 @@ var GalleryContainer = /** @class */ (function (_super) {
             },
         };
         this.createCssLayoutsIfNeeded(layoutParams);
-        this.createDynamicStyles(styles, isPrerenderMode);
+        this.createDynamicStyles(options, isPrerenderMode);
         var newState = {
             items: items,
-            styles: styles,
+            options: options,
             container: container,
             structure: structure,
-            isScrollLessGallery: this.getIsScrollLessGallery(styles),
         };
         return newState;
     };
     GalleryContainer.prototype.getScrollingElement = function () {
         var _this = this;
         var horizontal = function () {
-            return pro_gallery_lib_1.window.document.querySelector("#pro-gallery-" + _this.props.domId + " #gallery-horizontal-scroll");
+            return pro_gallery_lib_1.window.document.querySelector("#pro-gallery-" + _this.props.id + " #gallery-horizontal-scroll");
         };
         var vertical = this.props.scrollingElement
-            ? typeof this.props.scrollingElement === 'function'
-                ? this.props.scrollingElement
-                : function () { return _this.props.scrollingElement; }
+            ? function () { return _this.props.scrollingElement; }
             : function () { return pro_gallery_lib_1.window; };
         return { vertical: vertical, horizontal: horizontal };
     };
-    GalleryContainer.prototype.scrollToItem = function (itemIdx, fixedScroll, isManual, durationInMS, scrollMarginCorrection) {
+    GalleryContainer.prototype.scrollToItem = function (itemIdx, fixedScroll, isManual, durationInMS, scrollMarginCorrection, isContinuousScrolling) {
         if (durationInMS === void 0) { durationInMS = 0; }
+        if (isContinuousScrolling === void 0) { isContinuousScrolling = false; }
         if (itemIdx >= 0) {
+            if (!this.state.gotFirstScrollEvent) {
+                this.setState({
+                    gotFirstScrollEvent: true,
+                });
+            }
+            if (this.getIsScrollLessGallery(this.state.options)) {
+                return;
+            }
             var scrollingElement = this._scrollingElement;
             var horizontalElement = scrollingElement.horizontal();
             try {
                 var scrollParams = {
                     scrollMarginCorrection: scrollMarginCorrection,
-                    isRTL: this.state.styles.isRTL,
-                    scrollDirection: this.state.styles.scrollDirection,
+                    isRTL: this.state.options.isRTL,
+                    scrollDirection: this.state.options.scrollDirection,
                     galleryWidth: this.state.container.galleryWidth,
                     galleryHeight: this.state.container.galleryHeight,
                     top: 0,
@@ -328,26 +339,30 @@ var GalleryContainer = /** @class */ (function (_super) {
                     scrollingElement: scrollingElement,
                     horizontalElement: horizontalElement,
                     durationInMS: durationInMS,
-                    slideTransition: this.state.styles.slideTransition,
+                    slideTransition: this.state.options.slideTransition,
+                    isContinuousScrolling: isContinuousScrolling,
+                    autoSlideshowContinuousSpeed: this.state.options.autoSlideshowContinuousSpeed,
+                    imageMargin: this.state.options.imageMargin,
                 };
                 return scrollHelper_1.scrollToItemImp(scrollParams);
             }
             catch (e) {
                 //added console.error to debug sentry error 'Cannot read property 'isRTL' of undefined in pro-gallery-statics'
-                console.error('error:', e, ' pro-gallery, scrollToItem, cannot get scrollParams, ', 'isEditMode =', pro_gallery_lib_1.isEditMode(), ' isPreviewMode =', pro_gallery_lib_1.isPreviewMode(), ' isSiteMode =', pro_gallery_lib_1.isSiteMode(), ' this.state.styles =', this.state.styles, ' this.state.container =', this.state.container, ' this.galleryStructure =', this.galleryStructure);
+                console.error('error:', e, ' pro-gallery, scrollToItem, cannot get scrollParams, ', 'isEditMode =', pro_gallery_lib_1.isEditMode(), ' isPreviewMode =', pro_gallery_lib_1.isPreviewMode(), ' isSiteMode =', pro_gallery_lib_1.isSiteMode(), ' this.state.options =', this.state.options, ' this.state.container =', this.state.container, ' this.galleryStructure =', this.galleryStructure);
             }
         }
     };
-    GalleryContainer.prototype.scrollToGroup = function (groupIdx, fixedScroll, isManual, durationInMS, scrollMarginCorrection) {
+    GalleryContainer.prototype.scrollToGroup = function (groupIdx, fixedScroll, isManual, durationInMS, scrollMarginCorrection, isContinuousScrolling) {
         if (durationInMS === void 0) { durationInMS = 0; }
+        if (isContinuousScrolling === void 0) { isContinuousScrolling = false; }
         if (groupIdx >= 0) {
             var scrollingElement = this._scrollingElement;
             var horizontalElement = scrollingElement.horizontal();
             try {
                 var scrollParams = {
                     scrollMarginCorrection: scrollMarginCorrection,
-                    isRTL: this.state.styles.isRTL,
-                    scrollDirection: this.state.styles.scrollDirection,
+                    isRTL: this.state.options.isRTL,
+                    scrollDirection: this.state.options.scrollDirection,
                     galleryWidth: this.state.container.galleryWidth,
                     galleryHeight: this.state.container.galleryHeight,
                     top: 0,
@@ -359,23 +374,26 @@ var GalleryContainer = /** @class */ (function (_super) {
                     scrollingElement: scrollingElement,
                     horizontalElement: horizontalElement,
                     durationInMS: durationInMS,
-                    slideTransition: this.state.styles.slideTransition,
+                    slideTransition: this.state.options.slideTransition,
+                    isContinuousScrolling: isContinuousScrolling,
+                    autoSlideshowContinuousSpeed: this.state.options.autoSlideshowContinuousSpeed,
+                    imageMargin: this.state.options.imageMargin,
                 };
                 return scrollHelper_1.scrollToGroupImp(scrollParams);
             }
             catch (e) {
                 //added console.error to debug sentry error 'Cannot read property 'isRTL' of undefined in pro-gallery-statics'
-                console.error('error:', e, ' pro-gallery, scrollToGroup, cannot get scrollParams, ', 'isEditMode =', pro_gallery_lib_1.isEditMode(), ' isPreviewMode =', pro_gallery_lib_1.isPreviewMode(), ' isSiteMode =', pro_gallery_lib_1.isSiteMode(), ' this.state.styles =', this.state.styles, ' this.state.container =', this.state.container, ' this.galleryStructure =', this.galleryStructure);
+                console.error('error:', e, ' pro-gallery, scrollToGroup, cannot get scrollParams, ', 'isEditMode =', pro_gallery_lib_1.isEditMode(), ' isPreviewMode =', pro_gallery_lib_1.isPreviewMode(), ' isSiteMode =', pro_gallery_lib_1.isSiteMode(), ' this.state.options =', this.state.options, ' this.state.container =', this.state.container, ' this.galleryStructure =', this.galleryStructure);
             }
         }
     };
-    GalleryContainer.prototype.containerInfiniteGrowthDirection = function (styles) {
-        if (styles === void 0) { styles = false; }
-        var _styles = styles || this.props.styles;
+    GalleryContainer.prototype.containerInfiniteGrowthDirection = function (options) {
+        if (options === void 0) { options = false; }
+        var _options = options || this.props.options;
         // return the direction in which the gallery can grow on it's own (aka infinite scroll)
-        var enableInfiniteScroll = this.props.styles.enableInfiniteScroll; //TODO - props or "raw" styles
+        var enableInfiniteScroll = this.props.options.enableInfiniteScroll; //TODO - props or "raw" options
         var showMoreClickedAtLeastOnce = this.state.showMoreClickedAtLeastOnce;
-        var scrollDirection = _styles.scrollDirection, loadMoreAmount = _styles.loadMoreAmount;
+        var scrollDirection = _options.scrollDirection, loadMoreAmount = _options.loadMoreAmount;
         if (scrollDirection === pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL) {
             return 'horizontal';
         }
@@ -410,9 +428,9 @@ var GalleryContainer = /** @class */ (function (_super) {
         var useSSROpacity = isPrerenderMode && !this.props.settings.disableSSROpacity;
         this.dynamicStyles = ("\n      " + (!useSSROpacity
             ? ''
-            : "#pro-gallery-" + this.props.domId + " .gallery-item-container { opacity: 0 }") + "\n      " + (!overlayBackground
+            : "#pro-gallery-" + this.props.id + " .gallery-item-container { opacity: 0 }") + "\n      " + (!overlayBackground
             ? ''
-            : "#pro-gallery-" + this.props.domId + " .gallery-item-hover::before { background: " + overlayBackground + " !important}") + "\n    ").trim();
+            : "#pro-gallery-" + this.props.id + " .gallery-item-hover::before { background: " + overlayBackground + " !important}") + "\n    ").trim();
     };
     GalleryContainer.prototype.createCssLayoutsIfNeeded = function (layoutParams) {
         var _a = this.props.settings, settings = _a === void 0 ? {} : _a;
@@ -421,17 +439,17 @@ var GalleryContainer = /** @class */ (function (_super) {
             this.layoutCss = cssLayoutsHelper_js_1.createCssLayouts({
                 layoutParams: layoutParams,
                 isMobile: pro_gallery_lib_1.utils.isMobile(),
-                domId: this.props.domId,
+                id: this.props.id,
                 galleryItems: this.galleryStructure.galleryItems,
             });
         }
     };
     GalleryContainer.prototype.getScrollCss = function (_a) {
-        var domId = _a.domId, items = _a.items, styleParams = _a.styleParams, container = _a.container;
+        var id = _a.id, items = _a.items, options = _a.options, container = _a.container;
         this.scrollCss = cssScrollHelper_js_1.cssScrollHelper.calcScrollCss({
             items: items,
-            styleParams: styleParams,
-            domId: domId,
+            options: options,
+            id: id,
             container: container,
         });
     };
@@ -443,9 +461,9 @@ var GalleryContainer = /** @class */ (function (_super) {
         //before clicking "load more" at the first time
         if (!this.state.showMoreClickedAtLeastOnce) {
             this.getScrollCss({
-                domId: this.props.domId,
+                id: this.props.id,
                 items: this.galleryStructure.galleryItems,
-                styleParams: this.state.styles,
+                options: this.state.options,
                 container: this.state.container,
             });
             var initialGalleryHeight = this.state.container.height; //container.height before clicking "load more" at the first time
@@ -469,9 +487,9 @@ var GalleryContainer = /** @class */ (function (_super) {
     GalleryContainer.prototype.setGotFirstScrollIfNeeded = function () {
         if (!this.state.gotFirstScrollEvent) {
             this.getScrollCss({
-                domId: this.props.domId,
+                id: this.props.id,
                 items: this.galleryStructure.galleryItems,
-                styleParams: this.state.styles,
+                options: this.state.options,
                 container: this.state.container,
             });
             this.setState({
@@ -496,7 +514,7 @@ var GalleryContainer = /** @class */ (function (_super) {
         }
         if (eventName === pro_gallery_lib_1.GALLERY_CONSTS.events.CURRENT_ITEM_CHANGED) {
             this.setCurrentSlideshowViewIdx(eventData.idx);
-            if (this.state.isScrollLessGallery) {
+            if (this.getIsScrollLessGallery(this.state.options)) {
                 this.simulateScrollToItem(this.galleryStructure.items[eventData.idx]);
             }
         }
@@ -520,11 +538,11 @@ var GalleryContainer = /** @class */ (function (_super) {
             this.galleryStructure.galleryItems.length > 0 &&
             !this.gettingMoreItems &&
             this.state.items &&
-            this.state.styles &&
+            this.state.options &&
             this.state.container) {
             //more items can be fetched from the server
             //TODO - add support for horizontal galleries
-            var _a = this.state.styles, scrollDirection = _a.scrollDirection, isRTL = _a.isRTL;
+            var _a = this.state.options, scrollDirection = _a.scrollDirection, isRTL = _a.isRTL;
             var galleryEnd = this.galleryStructure[scrollDirection === pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL
                 ? 'width'
                 : 'height'] +
@@ -550,9 +568,9 @@ var GalleryContainer = /** @class */ (function (_super) {
         }
     };
     GalleryContainer.prototype.canRender = function () {
-        var can = this.props.container && this.props.styles && this.state.items;
+        var can = this.props.container && this.props.options && this.state.items;
         if (!can && pro_gallery_lib_1.utils.isVerbose()) {
-            console.log('PROGALLERY [CAN_RENDER] GalleryContainer', can, this.props.container, this.props.styles, this.state.items);
+            console.log('PROGALLERY [CAN_RENDER] GalleryContainer', can, this.props.container, this.props.options, this.state.items);
         }
         return can;
     };
@@ -568,7 +586,7 @@ var GalleryContainer = /** @class */ (function (_super) {
         if (!this.canRender()) {
             return null;
         }
-        var ViewComponent = this.props.styles.scrollDirection ===
+        var ViewComponent = this.props.options.scrollDirection ===
             pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL
             ? slideshowView_1.default
             : galleryView_1.default;
@@ -578,8 +596,8 @@ var GalleryContainer = /** @class */ (function (_super) {
         }
         var displayShowMore = this.containerInfiniteGrowthDirection() === 'none';
         return (react_1.default.createElement("div", { "data-key": "pro-gallery-inner-container", key: "pro-gallery-inner-container", className: this.props.isPrerenderMode ? 'pro-gallery-prerender' : '', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, ref: function (e) { return _this.galleryContainerRef = e; }, tabIndex: -1 },
-            react_1.default.createElement(galleryScrollIndicator_1.default, { domId: this.props.domId, scrollDirection: this.props.styles.scrollDirection, isRTL: this.props.styles.isRTL, totalWidth: this.galleryStructure.width, scrollBase: this.props.container.scrollBase, scrollingElement: this._scrollingElement, getMoreItemsIfNeeded: this.getMoreItemsIfNeeded, setGotFirstScrollIfNeeded: this.setGotFirstScrollIfNeeded, onScroll: this.onGalleryScroll }),
-            react_1.default.createElement(ViewComponent, tslib_1.__assign({ isInDisplay: this.props.isInDisplay, isPrerenderMode: this.props.isPrerenderMode, scrollingElement: this._scrollingElement, totalItemsCount: this.props.totalItemsCount, renderedItemsCount: this.props.renderedItemsCount, getMoreItemsIfNeeded: this.getMoreItemsIfNeeded, gotFirstScrollEvent: this.state.gotFirstScrollEvent, setGotFirstScrollIfNeeded: this.setGotFirstScrollIfNeeded, items: this.state.items, getVisibleItems: this.getVisibleItems, itemsLoveData: this.props.itemsLoveData, galleryStructure: this.galleryStructure, styleParams: this.props.styles, container: this.props.container, watermark: this.props.watermark, settings: this.props.settings, displayShowMore: displayShowMore, domId: this.props.domId, currentIdx: this.props.currentIdx || 0, customHoverRenderer: this.props.customHoverRenderer, customInfoRenderer: this.props.customInfoRenderer, customSlideshowInfoRenderer: this.props.customSlideshowInfoRenderer, customLoadMoreRenderer: this.props.customLoadMoreRenderer, customNavArrowsRenderer: this.props.customNavArrowsRenderer, playingVideoIdx: this.state.playingVideoIdx, noFollowForSEO: this.props.noFollowForSEO, proGalleryRegionLabel: this.props.proGalleryRegionLabel, proGalleryRole: this.props.proGalleryRole, firstUserInteractionExecuted: this.state.firstUserInteractionExecuted, isGalleryInHover: this.state.isInHover, enableExperimentalFeatures: this.props.enableExperimentalFeatures, galleryContainerRef: this.galleryContainerRef, outOfViewComponent: this.outOfViewComponent, actions: tslib_1.__assign(tslib_1.__assign({}, this.props.actions), { findNeighborItem: this.findNeighborItem, toggleLoadMoreItems: this.toggleLoadMoreItems, eventsListener: this.eventsListener, setWixHeight: function () { }, scrollToItem: this.scrollToItem, scrollToGroup: this.scrollToGroup }) }, this.props.gallery)),
+            react_1.default.createElement(galleryScrollIndicator_1.default, { id: this.props.id, scrollDirection: this.props.options.scrollDirection, isRTL: this.props.options.isRTL, totalWidth: this.galleryStructure.width, scrollBase: this.props.container.scrollBase, scrollingElement: this._scrollingElement, getMoreItemsIfNeeded: this.getMoreItemsIfNeeded, setGotFirstScrollIfNeeded: this.setGotFirstScrollIfNeeded, onScroll: this.onGalleryScroll }),
+            react_1.default.createElement(ViewComponent, tslib_1.__assign({ isInDisplay: this.props.isInDisplay, isPrerenderMode: this.props.isPrerenderMode, scrollingElement: this._scrollingElement, totalItemsCount: this.props.totalItemsCount, renderedItemsCount: this.props.renderedItemsCount, getMoreItemsIfNeeded: this.getMoreItemsIfNeeded, gotFirstScrollEvent: this.state.gotFirstScrollEvent, setGotFirstScrollIfNeeded: this.setGotFirstScrollIfNeeded, items: this.state.items, getVisibleItems: this.getVisibleItems, galleryStructure: this.galleryStructure, options: this.props.options, container: this.props.container, settings: this.props.settings, displayShowMore: displayShowMore, id: this.props.id, activeIndex: this.props.activeIndex || 0, customComponents: this.props.customComponents, playingVideoIdx: this.state.playingVideoIdx, noFollowForSEO: this.props.noFollowForSEO, proGalleryRegionLabel: this.props.proGalleryRegionLabel, proGalleryRole: this.props.proGalleryRole, firstUserInteractionExecuted: this.state.firstUserInteractionExecuted, isGalleryInHover: this.state.isInHover, enableExperimentalFeatures: this.props.enableExperimentalFeatures, galleryContainerRef: this.galleryContainerRef, outOfViewComponent: this.outOfViewComponent, galleryContainerId: "pro-gallery-container-" + this.props.id, actions: tslib_1.__assign(tslib_1.__assign({}, this.props.actions), { findNeighborItem: this.findNeighborItem, toggleLoadMoreItems: this.toggleLoadMoreItems, eventsListener: this.eventsListener, setWixHeight: function () { }, scrollToItem: this.scrollToItem, scrollToGroup: this.scrollToGroup }) }, this.props.gallery)),
             react_1.default.createElement("div", { "data-key": "items-styles", key: "items-styles", style: { display: 'none' } },
                 (this.layoutCss || []).filter(Boolean).map(function (css, idx) { return (react_1.default.createElement("style", { id: "layoutCss-" + idx, key: "layoutCss-" + idx, dangerouslySetInnerHTML: { __html: css } })); }),
                 (this.scrollCss || []).filter(Boolean).map(function (css, idx) { return (react_1.default.createElement("style", { id: "scrollCss_" + idx, key: "scrollCss_" + idx, dangerouslySetInnerHTML: { __html: css } })); }),