@expressms/smartapp-ui 1.0.7 → 1.1.0

package/build/main//321/201omponents/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
 import { IAvatarProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Avatar: ({ username, onClick, widthHeight }: IAvatarProps) => import("react/jsx-runtime").JSX.Element;
+declare const Avatar: ({ username, avatar, onClick, size }: IAvatarProps) => import("react/jsx-runtime").JSX.Element;
 export default Avatar;

package/build/main//321/201omponents/Avatar/Avatar.js

@@ -14,26 +14,26 @@ import { AvatarFontSizes } from './types';
 import '../../styles/stories.module.scss';
 var Avatar = function (_a) {
     var _b, _c, _d;
-    var username = _a.username, _e = _a.onClick, onClick = _e === void 0 ? function () { return undefined; } : _e, _f = _a.widthHeight, widthHeight = _f === void 0 ? 44 : _f;
-    var initials = (username === null || username === void 0 ? void 0 : username.split(' ').length) <= 2
-        ? (_d = (_c = (_b = username === null || username === void 0 ? void 0 : username.split(' ')) === null || _b === void 0 ? void 0 : _b.map(function (n) { return n[0]; })) === null || _c === void 0 ? void 0 : _c.join('.')) === null || _d === void 0 ? void 0 : _d.toUpperCase()
+    var username = _a.username, avatar = _a.avatar, _e = _a.onClick, onClick = _e === void 0 ? function () { return undefined; } : _e, _f = _a.size, size = _f === void 0 ? 44 : _f;
+    var initials = username.split(' ').length <= 2
+        ? (_d = (_c = (_b = username === null || username === void 0 ? void 0 : username.split(' ')) === null || _b === void 0 ? void 0 : _b.map(function (n) { return n[0]; })) === null || _c === void 0 ? void 0 : _c.join('')) === null || _d === void 0 ? void 0 : _d.toUpperCase()
         : username[0].toUpperCase();
     var getFontSizeAvatar = function () {
-        if (typeof widthHeight === 'number') {
-            switch (widthHeight) {
-                case (widthHeight = 24): {
-                    return AvatarFontSizes.small;
-                }
-                case (widthHeight = 32): {
-                    return AvatarFontSizes.average;
-                }
-                case (widthHeight = 44): {
-                    return AvatarFontSizes.high;
-                }
+        switch (size) {
+            case (size = 24): {
+                return AvatarFontSizes.small;
+            }
+            case (size = 32): {
+                return AvatarFontSizes.average;
+            }
+            case (size = 44): {
+                return AvatarFontSizes.high;
+            }
+            case (size = 100): {
+                return AvatarFontSizes.greatest;
             }
         }
-        return AvatarFontSizes.high;
     };
-    return (_jsx("div", __assign({ style: { width: "".concat(widthHeight, "px"), height: "".concat(widthHeight, "px"), fontSize: getFontSizeAvatar() }, onClick: onClick, className: "smartapp-avatar" }, { children: initials })));
+    return (_jsx("div", __assign({ style: { width: "".concat(size, "px"), height: "".concat(size, "px"), fontSize: getFontSizeAvatar() }, onClick: onClick, className: "smartapp-avatar" }, { children: avatar ? _jsx("img", { src: avatar, alt: "avatar" }) : initials })));
 };
 export default Avatar;

package/build/main//321/201omponents/Avatar/types.d.ts

@@ -1,10 +1,12 @@
 export interface IAvatarProps {
     username: string;
+    avatar?: string;
     onClick?: () => void;
-    widthHeight?: 24 | 32 | 44;
+    size?: 24 | 32 | 44 | 100;
 }
 export declare enum AvatarFontSizes {
     small = "12px",
     average = "14px",
-    high = "18px"
+    high = "18px",
+    greatest = "42px"
 }

package/build/main//321/201omponents/Avatar/types.js

@@ -3,4 +3,5 @@ export var AvatarFontSizes;
     AvatarFontSizes["small"] = "12px";
     AvatarFontSizes["average"] = "14px";
     AvatarFontSizes["high"] = "18px";
+    AvatarFontSizes["greatest"] = "42px";
 })(AvatarFontSizes || (AvatarFontSizes = {}));

package/build/main//321/201omponents/Chips/Chips.js

@@ -17,6 +17,6 @@ import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var Chips = function (_a) {
     var name = _a.name, iconColor = _a.iconColor, _b = _a.onCancelFunction, onCancelFunction = _b === void 0 ? function () { return undefined; } : _b;
-    return (_jsxs("div", __assign({ className: "smartapp-chips" }, { children: [_jsxs("div", __assign({ className: "smartapp-chips__info" }, { children: [_jsx(Avatar, { username: name, widthHeight: 24 }), _jsx("p", __assign({ className: "smartapp-chips__info--name" }, { children: name }))] })), _jsx("div", __assign({ onClick: function () { return onCancelFunction(name); }, className: "smartapp-chips__cancel-icon" }, { children: _jsx(CancelIcon, { style: { color: getIconColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) }))] })));
+    return (_jsxs("div", __assign({ className: "smartapp-chips" }, { children: [_jsxs("div", __assign({ className: "smartapp-chips__info" }, { children: [_jsx(Avatar, { username: name, size: 24 }), _jsx("p", __assign({ className: "smartapp-chips__info--name" }, { children: name }))] })), _jsx("div", __assign({ onClick: function () { return onCancelFunction(name); }, className: "smartapp-chips__cancel-icon" }, { children: _jsx(CancelIcon, { style: { color: getIconColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) }))] })));
 };
 export default Chips;

package/build/main//321/201omponents/CustomSelectProfiles/CustomSelectProfiles.js

@@ -27,14 +27,14 @@ import '../../styles/stories.module.scss';
 var Control = function (_a) {
     var _b, _c, _d;
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (_jsxs(components.Control, __assign({}, props, { children: [((_b = props.selectProps) === null || _b === void 0 ? void 0 : _b.value) && (_jsx("div", __assign({ className: "smartapp-custom-select__control" }, { children: _jsx("span", { children: _jsx(Avatar, { widthHeight: 32, username: (_d = (_c = props === null || props === void 0 ? void 0 : props.selectProps) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.username }) }) }))), children] })));
+    return (_jsxs(components.Control, __assign({}, props, { children: [((_b = props.selectProps) === null || _b === void 0 ? void 0 : _b.value) && (_jsx("div", __assign({ className: "smartapp-custom-select__control" }, { children: _jsx("span", { children: _jsx(Avatar, { size: 32, username: (_d = (_c = props === null || props === void 0 ? void 0 : props.selectProps) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.username }) }) }))), children] })));
 };
 var Option = function (_a) {
     var _b, _c, _d;
     var props = __rest(_a, []);
-    return (_jsx(components.Option, __assign({}, props, { children: _jsxs("div", __assign({ className: "smartapp-custom-select__option" }, { children: [_jsx("div", __assign({ className: "smartapp-custom-select__option--avatar" }, { children: _jsx(Avatar, { widthHeight: 32, username: (_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.username }) })), _jsxs("div", __assign({ className: "smartapp-custom-select__option--info" }, { children: [_jsxs("p", __assign({ className: "smartapp-custom-select__option--info__title" }, { children: [(_c = props === null || props === void 0 ? void 0 : props.data) === null || _c === void 0 ? void 0 : _c.username, " "] })), _jsxs("p", __assign({ className: "smartapp-custom-select__option--info__email" }, { children: [(_d = props === null || props === void 0 ? void 0 : props.data) === null || _d === void 0 ? void 0 : _d.email, " "] }))] }))] })) })));
+    return (_jsx(components.Option, __assign({}, props, { children: _jsxs("div", __assign({ className: "smartapp-custom-select__option" }, { children: [_jsx("div", __assign({ className: "smartapp-custom-select__option--avatar" }, { children: _jsx(Avatar, { size: 32, username: (_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.username }) })), _jsxs("div", __assign({ className: "smartapp-custom-select__option--info" }, { children: [_jsxs("p", __assign({ className: "smartapp-custom-select__option--info__title" }, { children: [(_c = props === null || props === void 0 ? void 0 : props.data) === null || _c === void 0 ? void 0 : _c.username, " "] })), _jsxs("p", __assign({ className: "smartapp-custom-select__option--info__email" }, { children: [(_d = props === null || props === void 0 ? void 0 : props.data) === null || _d === void 0 ? void 0 : _d.email, " "] }))] }))] })) })));
 };
-var DropdownIndicator = function (props) { return (_jsx(components.DropdownIndicator, __assign({}, props))); };
+var DropdownIndicator = function (props) { return _jsx(components.DropdownIndicator, __assign({}, props)); };
 var IndicatorSeparator = function () { return null; };
 var CustomSelectPriority = function (_a) {
     var options = _a.options, defaultValue = _a.defaultValue, placeholder = _a.placeholder, onChange = _a.onChange, _b = _a.width, width = _b === void 0 ? 100 : _b;

package/build/main//321/201omponents/Header/Header.d.ts

@@ -1,4 +1,4 @@
 import { IHeaderProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Header: ({ title, isBack, isRemove, onClickBack, onClickRemove, arrowColor, trashColor, }: IHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ title, isBack, isRemove, refreshIcon, onClickBack, onClickRemove, arrowColor, trashColor, platform, headerHeight, textSize, textColor, backgroundColor, }: IHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/build/main//321/201omponents/Header/Header.js

@@ -10,13 +10,27 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
 import { ReactComponent as ArrowBackIcon } from '../../assets/icons/arrow-back.svg';
 import { ReactComponent as TrashIcon } from '../../assets/icons/trash.svg';
+import { ReactComponent as RefreshIcon } from '../../assets/icons/refresh.svg';
 import { getIconColor } from '../../helpers';
-import { DEFAULT_BLACK_ICON_COLOR, DEFAULT_RED_ICON_COLOR } from '../../constants';
+import { DEFAULT_BLACK_ICON_COLOR, DEFAULT_HEADER_BACKGROUND_COLOR, DEFAULT_HEADER_TEXT_COLOR, DEFAULT_RED_ICON_COLOR, FONT_SIZE, LINE_HEIGHT, PLATFORM, } from '../../constants';
 import '../../styles/stories.module.scss';
 var Header = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.isBack, isBack = _c === void 0 ? false : _c, _d = _a.isRemove, isRemove = _d === void 0 ? false : _d, _e = _a.onClickBack, onClickBack = _e === void 0 ? function () { return undefined; } : _e, _f = _a.onClickRemove, onClickRemove = _f === void 0 ? function () { return undefined; } : _f, arrowColor = _a.arrowColor, trashColor = _a.trashColor;
-    return (_jsxs("div", __assign({ className: "smartapp-header" }, { children: [_jsxs("div", __assign({ className: "smartapp-header__info" }, { children: [isBack && (_jsx(ArrowBackIcon, { style: { color: getIconColor(arrowColor, DEFAULT_BLACK_ICON_COLOR) }, onClick: onClickBack, className: "smartapp-header__info--arrow-back" })), title && _jsx("p", __assign({ className: "smartapp-header__info--title" }, { children: title }))] })), isRemove && (_jsx("div", __assign({ onClick: onClickRemove, className: "smartapp-header__trash" }, { children: _jsx(TrashIcon, { style: { color: getIconColor(trashColor, DEFAULT_RED_ICON_COLOR) } }) })))] })));
+    var _b;
+    var _c = _a.title, title = _c === void 0 ? '' : _c, _d = _a.isBack, isBack = _d === void 0 ? false : _d, _e = _a.isRemove, isRemove = _e === void 0 ? false : _e, refreshIcon = _a.refreshIcon, _f = _a.onClickBack, onClickBack = _f === void 0 ? function () { return undefined; } : _f, _g = _a.onClickRemove, onClickRemove = _g === void 0 ? function () { return undefined; } : _g, arrowColor = _a.arrowColor, trashColor = _a.trashColor, _h = _a.platform, platform = _h === void 0 ? PLATFORM.web : _h, headerHeight = _a.headerHeight, _j = _a.textSize, textSize = _j === void 0 ? 'default' : _j, textColor = _a.textColor, backgroundColor = _a.backgroundColor;
+    var getHeaderStyles = function () { return ({
+        height: headerHeight && "".concat(headerHeight - 29, "px"),
+        fontSize: FONT_SIZE[textSize],
+        lineHeight: LINE_HEIGHT[textSize],
+        color: getIconColor(textColor, DEFAULT_HEADER_TEXT_COLOR),
+        background: getIconColor(backgroundColor, DEFAULT_HEADER_BACKGROUND_COLOR),
+    }); };
+    var renderRefreshIcon = function (_a) {
+        var isEnabled = _a.isEnabled, onClick = _a.onClick;
+        return (_jsx(RefreshIcon, { className: classNames({ 'smartapp-header__icons--refresh': isEnabled }), onClick: !isEnabled ? onClick : function () { } }));
+    };
+    return (_jsxs("div", __assign({ className: classNames((_b = { 'smartapp-header': true }, _b["smartapp-header__".concat(platform)] = true, _b)), style: getHeaderStyles() }, { children: [_jsxs("div", __assign({ className: "smartapp-header__info" }, { children: [isBack && (_jsx(ArrowBackIcon, { style: { color: getIconColor(arrowColor, DEFAULT_BLACK_ICON_COLOR) }, onClick: onClickBack, className: "smartapp-header__info--arrow-back" })), title && _jsx("p", __assign({ className: "smartapp-header__info--title" }, { children: title }))] })), _jsxs("div", __assign({ className: "smartapp-header__icons" }, { children: [isRemove && (_jsx("div", __assign({ onClick: onClickRemove, className: "smartapp-header__icons--trash" }, { children: _jsx(TrashIcon, { style: { color: getIconColor(trashColor, DEFAULT_RED_ICON_COLOR) } }) }))), refreshIcon && renderRefreshIcon(refreshIcon)] }))] })));
 };
 export default Header;

package/build/main//321/201omponents/Header/types.d.ts

@@ -1,9 +1,20 @@
+import { PLATFORM } from '../../constants';
+export type TRefreshIcon = {
+    isEnabled: boolean;
+    onClick: () => void;
+};
 export interface IHeaderProps {
     title?: string;
     isBack?: boolean;
     isRemove?: boolean;
+    refreshIcon?: TRefreshIcon;
     onClickBack?: () => void;
     onClickRemove?: () => void;
     arrowColor?: string;
     trashColor?: string;
+    platform?: PLATFORM;
+    headerHeight?: number;
+    textSize?: 'small' | 'default' | 'large';
+    textColor?: string;
+    backgroundColor?: string;
 }

package/build/main//321/201omponents/Loader/Loader.d.ts

@@ -1,4 +1,4 @@
 import { ILoaderProps } from './types';
 import '../../styles/stories.module.scss';
-declare const Loader: ({ isLoader, title }: ILoaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Loader: ({ isLoader, isFullScreen, isTextItalic, title, textSize, width, iconSize, backgroundColor, }: ILoaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Loader;

package/build/main//321/201omponents/Loader/Loader.js

@@ -11,9 +11,24 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ColorRing } from 'react-loader-spinner';
+import classNames from 'classnames';
+import { DEFAULT_GRAY_LOADER_BACKGROUND_COLOR, DEFAULT_WHITE_LOADER_BACKGROUND_COLOR, FONT_SIZE, LINE_HEIGHT, } from '../../constants';
+import { getIconColor } from '../../helpers';
 import '../../styles/stories.module.scss';
 var Loader = function (_a) {
-    var _b = _a.isLoader, isLoader = _b === void 0 ? false : _b, title = _a.title;
-    return (_jsx("div", __assign({ className: "smartapp-loader-wrapper" }, { children: _jsxs("div", __assign({ className: "smartapp-loader" }, { children: [_jsx(ColorRing, { visible: isLoader, height: "32", width: "32", ariaLabel: "blocks-loading", wrapperStyle: {}, wrapperClass: "blocks-wrapper", colors: ['#4799E3', '#4799E3', '#4799E3', '#4799E3', '#4799E3'] }), title && _jsx("p", __assign({ className: "smartapp-loader__title" }, { children: title }))] })) })));
+    var _b = _a.isLoader, isLoader = _b === void 0 ? false : _b, _c = _a.isFullScreen, isFullScreen = _c === void 0 ? true : _c, _d = _a.isTextItalic, isTextItalic = _d === void 0 ? false : _d, title = _a.title, _e = _a.textSize, textSize = _e === void 0 ? 'small' : _e, _f = _a.width, width = _f === void 0 ? 150 : _f, _g = _a.iconSize, iconSize = _g === void 0 ? 32 : _g, backgroundColor = _a.backgroundColor;
+    var getTextStyles = function () { return ({
+        fontSize: FONT_SIZE[textSize],
+        fontStyle: isTextItalic ? 'italic' : 'normal',
+        lineHeight: LINE_HEIGHT[textSize],
+    }); };
+    var getBackgroundColor = function () {
+        var defaultColor = isFullScreen ? DEFAULT_GRAY_LOADER_BACKGROUND_COLOR : DEFAULT_WHITE_LOADER_BACKGROUND_COLOR;
+        return getIconColor(backgroundColor, defaultColor);
+    };
+    return (_jsx("div", __assign({ className: classNames({
+            'smartapp-loader-wrapper': true,
+            'smartapp-loader-wrapper__full-screen': isFullScreen,
+        }), style: { background: getBackgroundColor() } }, { children: _jsxs("div", __assign({ className: "smartapp-loader", style: { width: "".concat(width, "px") } }, { children: [_jsx(ColorRing, { visible: isLoader, height: iconSize, width: iconSize, ariaLabel: "blocks-loading", wrapperStyle: {}, wrapperClass: "blocks-wrapper", colors: ['#4799E3', '#4799E3', '#4799E3', '#4799E3', '#4799E3'] }), title && _jsx("p", __assign({ className: "smartapp-loader__title", style: getTextStyles() }, { children: title }))] })) })));
 };
 export default Loader;

package/build/main//321/201omponents/Loader/types.d.ts

@@ -1,4 +1,10 @@
 export interface ILoaderProps {
     isLoader: boolean;
+    isFullScreen?: boolean;
+    isTextItalic?: boolean;
     title?: string;
+    textSize?: 'small' | 'default' | 'large';
+    width?: number;
+    iconSize?: number;
+    backgroundColor?: string;
 }

package/build/main//321/201omponents/Stories/Stories.js

@@ -16,9 +16,11 @@ import { isNull, sortBy } from 'lodash';
 import Stories from 'react-insta-stories';
 import Popup from 'reactjs-popup';
 import { useSwipeable } from 'react-swipeable';
+import { isEmpty } from 'lodash';
 import { ReactComponent as CloseStoriesIcon } from '../../assets/icons/close-stories.svg';
-import { STORY_BACKGROUND_TYPES } from './types';
-import { BUTTON_PADDING, DEFAULT_FONT_FAMILY, MAX_PADDING_FOR_IMAGE, PLATFORM, } from '../../constants';
+import { STORY_BACKGROUND_TYPES, STORY_TYPE, } from './types';
+import { BUTTON_PADDING, DEFAULT_BACKGROUND_BUTTON_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_BUTTON_COLOR, MAX_PADDING_FOR_IMAGE, PLATFORM, } from '../../constants';
+import { getIconColor, isAndroidPlatform, isIosPlatform, isWebPlatform } from '../../helpers';
 import '../../styles/stories.module.scss';
 var storyItemBaseStyles = {
     height: '100%',
@@ -27,9 +29,9 @@ var storyItemBaseStyles = {
 var progressContainerStyles = function (platform) { return ({
     gap: '12px',
     width: '100%',
-    maxWidth: platform === PLATFORM.ios || platform === PLATFORM.android ? '139px' : '198px',
+    maxWidth: isIosPlatform(platform) || isAndroidPlatform(platform) ? '139px' : '198px',
     filter: 'none',
-    paddingTop: platform === PLATFORM.web ? '22px' : platform === PLATFORM.ios ? '21px' : '26px',
+    paddingTop: isWebPlatform(platform) ? '22px' : isIosPlatform(platform) ? '21px' : '26px',
     paddingLeft: '0',
     paddingRight: '0',
     paddingBottom: '0',
@@ -63,12 +65,10 @@ var StoriesComponent = function (_a) {
         var id = _a.id;
         return id === activeStoryId;
     });
-    var getStoryStyles = function (story) {
-        var _a, _b;
-        if (((_a = story === null || story === void 0 ? void 0 : story.backgroundSource) === null || _a === void 0 ? void 0 : _a.type) === STORY_BACKGROUND_TYPES.color) {
-            return __assign(__assign({}, storyItemBaseStyles), { background: story.backgroundSource.value });
-        }
-        return __assign(__assign({}, storyItemBaseStyles), { backgroundImage: "url(".concat((_b = story === null || story === void 0 ? void 0 : story.backgroundSource) === null || _b === void 0 ? void 0 : _b.value, ")"), backgroundSize: 'cover' });
+    var getStoryStyles = function (_a) {
+        var type = _a.type, value = _a.value;
+        return type === STORY_BACKGROUND_TYPES.color
+            ? __assign(__assign({}, storyItemBaseStyles), { background: value }) : __assign(__assign({}, storyItemBaseStyles), { backgroundImage: "url(".concat(value, ")"), backgroundSize: 'cover' });
     };
     var changeActiveGroupStories = function (groupStoriesItem) {
         setActiveGroupStories(groupStoriesItem);
@@ -99,10 +99,12 @@ var StoriesComponent = function (_a) {
         }
     };
     var onPrevious = function () { return activeStoryId === stories[0].id && handlePrevious(); };
-    var onStoryStart = function () {
+    var onStoryStart = function (storyIndex) {
+        var isVideoStory = stories[storyIndex].type === STORY_TYPE.video;
+        isVideoStory && setActiveStoryId(stories[storyIndex].id);
         var story = stories.find(function (_a) {
             var id = _a.id;
-            return id === activeStoryId;
+            return id === stories[storyIndex].id;
         });
         var isLastStory = stories.at(-1).id === story.id;
         if (!story.viewed && changeStoryToViewed) {
@@ -112,44 +114,94 @@ var StoriesComponent = function (_a) {
             changeGroupStoriesToViewed(activeGroupStories);
         }
     };
-    var getStories = function () { return stories.map(function (story) { return ({
-        content: function () {
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            useEffect(function () {
-                setActiveStoryId(story.id);
-                var storyWrapper = document.querySelector('.smartapp-stories');
-                var storyWrapperHeight = (storyWrapper === null || storyWrapper === void 0 ? void 0 : storyWrapper.getBoundingClientRect().height) || 0;
-                var storyContent = document.querySelector('.smartapp-stories__story');
-                var storyContentHeight = (storyContent === null || storyContent === void 0 ? void 0 : storyContent.getBoundingClientRect().height) || 0;
-                var buttonElement = document.querySelector('.smartapp-stories__story--button');
-                var buttonElementHeight = buttonElement ? (buttonElement.getBoundingClientRect().height + BUTTON_PADDING) : 0;
-                var padding = (storyWrapperHeight - storyContentHeight - buttonElementHeight) / 2;
-                var paddingTop = (padding > MAX_PADDING_FOR_IMAGE && story.image) ? "".concat(MAX_PADDING_FOR_IMAGE, "px") : "".concat(padding, "px");
-                storyContent === null || storyContent === void 0 ? void 0 : storyContent.style.setProperty('--padding', paddingTop);
-            }, []);
-            return (_jsx("div", __assign({ style: getStoryStyles(story) }, { children: _jsxs("div", __assign({ style: { fontFamily: "".concat(fontFamily, ", sans-serif") }, className: "smartapp-stories__story" }, { children: [story.image && _jsx("div", __assign({ className: "smartapp-stories__story--image" }, { children: _jsx("img", { src: story.image, alt: "" }) })), story.title && _jsx("div", __assign({ className: "smartapp-stories__story--title" }, { children: story.title })), story.body && _jsx("div", __assign({ className: "smartapp-stories__story--body" }, { children: story.body })), story.button && (_jsx("div", __assign({ className: classNames('smartapp-stories__story--button', "smartapp-stories__story--button__".concat(platform)), onClick: story.button.action }, { children: story.button.text })))] })) }), story.id));
-        },
-    }); }); };
+    var getImageContent = function (_a) {
+        var id = _a.id, title = _a.title, body = _a.body, backgroundSource = _a.backgroundSource, button = _a.button, image = _a.image;
+        return ({
+            content: function () {
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                useEffect(function () {
+                    setActiveStoryId(id);
+                    var storyWrapper = document.querySelector('.smartapp-stories');
+                    var storyWrapperHeight = (storyWrapper === null || storyWrapper === void 0 ? void 0 : storyWrapper.getBoundingClientRect().height) || 0;
+                    var storyContent = document.querySelector('.smartapp-stories__story');
+                    var storyContentHeight = (storyContent === null || storyContent === void 0 ? void 0 : storyContent.getBoundingClientRect().height) || 0;
+                    var buttonElement = document.querySelector('.smartapp-stories__story--button');
+                    var buttonElementHeight = buttonElement ? (buttonElement.getBoundingClientRect().height + BUTTON_PADDING) : 0;
+                    var padding = (storyWrapperHeight - storyContentHeight - buttonElementHeight) / 2;
+                    var paddingTop = (padding > MAX_PADDING_FOR_IMAGE && image) ? "".concat(MAX_PADDING_FOR_IMAGE, "px") : "".concat(padding, "px");
+                    storyContent === null || storyContent === void 0 ? void 0 : storyContent.style.setProperty('--padding', paddingTop);
+                }, []);
+                return (_jsx("div", __assign({ style: getStoryStyles(backgroundSource) }, { children: _jsxs("div", __assign({ style: { fontFamily: "".concat(fontFamily, ", sans-serif") }, className: "smartapp-stories__story" }, { children: [image && _jsx("div", __assign({ className: "smartapp-stories__story--image" }, { children: _jsx("img", { src: image, alt: "" }) })), title && _jsx("div", __assign({ className: "smartapp-stories__story--title" }, { children: title })), body && _jsx("div", __assign({ className: "smartapp-stories__story--body" }, { children: body })), button && (_jsx("div", __assign({ style: {
+                                    color: getIconColor(button.textColor, DEFAULT_TEXT_BUTTON_COLOR),
+                                    background: getIconColor(button.backgroundColor, DEFAULT_BACKGROUND_BUTTON_COLOR),
+                                }, className: classNames('smartapp-stories__story--button', "smartapp-stories__story--button__".concat(platform)), onClick: button.action }, { children: button.text })))] })) }), id));
+            },
+        });
+    };
+    var getVideoContent = function (_a) {
+        var url = _a.url;
+        return ({
+            type: STORY_TYPE.video,
+            url: url,
+        });
+    };
+    var getStories = function () { return stories.map(function (story) { return story.type === STORY_TYPE.image ? getImageContent(story) : getVideoContent(story); }); };
     var swipeableHandlers = useSwipeable({
         trackMouse: true,
         onSwipedLeft: function () { return handleNext(); },
         onSwipedRight: function () { return handlePrevious(); },
     });
     useEffect(function () {
-        var _a;
         var sortedStories = sortStoriesByOrder((groupStories === null || groupStories === void 0 ? void 0 : groupStories.stories) || []);
         setActiveGroupStories(groupStories);
         setStories(sortedStories);
-        setActiveStoryId((groupStories === null || groupStories === void 0 ? void 0 : groupStories.stories) ? (_a = sortedStories[0]) === null || _a === void 0 ? void 0 : _a.id : null);
     }, [groupStories]);
     useEffect(function () {
-        var _a, _b;
+        var video = document.querySelector('video');
+        var pauseVideosOnBackground = function () {
+            var backgroundVideos = document.querySelectorAll("#background_video_".concat(activeStoryId));
+            backgroundVideos.forEach(function (video) { return video.pause(); });
+        };
+        var playVideosOnBackground = function () {
+            var backgroundVideos = document.querySelectorAll("#background_video_".concat(activeStoryId));
+            backgroundVideos.forEach(function (video) { return video.play(); });
+        };
+        video === null || video === void 0 ? void 0 : video.addEventListener("play", playVideosOnBackground);
+        video === null || video === void 0 ? void 0 : video.addEventListener("pause", pauseVideosOnBackground);
+        return function () {
+            video === null || video === void 0 ? void 0 : video.removeEventListener("play", playVideosOnBackground);
+            video === null || video === void 0 ? void 0 : video.removeEventListener("pause", pauseVideosOnBackground);
+        };
+    }, [activeStoryId]);
+    useEffect(function () {
         var popupElement = document.querySelector('.smartapp-stories-content');
-        var background = ((_a = activeStory === null || activeStory === void 0 ? void 0 : activeStory.backgroundSource) === null || _a === void 0 ? void 0 : _a.type) === STORY_BACKGROUND_TYPES.color
-            ? activeStory.backgroundSource.value
-            : "url(".concat((_b = activeStory === null || activeStory === void 0 ? void 0 : activeStory.backgroundSource) === null || _b === void 0 ? void 0 : _b.value, ")");
-        popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.setProperty('--background', background);
-    }, [activeStory]);
+        var videoWrapper = document.querySelector('.smartapp-stories-content > div > div > div:nth-child(2) > div');
+        if (activeStory) {
+            if (activeStory.type === STORY_TYPE.image) {
+                var _a = activeStory.backgroundSource, type = _a.type, value = _a.value;
+                var prevBackgroundVideos = document.querySelectorAll(".smartapp-stories-content__background-video");
+                var background = type === STORY_BACKGROUND_TYPES.color ? value : "url(".concat(value, ")");
+                !isEmpty(prevBackgroundVideos) && prevBackgroundVideos.forEach(function (video) { return video.remove(); });
+                isWebPlatform(platform) && (popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.setProperty('--background', background));
+            }
+            else {
+                var prevBackgroundVideos = document.querySelectorAll(".smartapp-stories-content__background-video");
+                !isEmpty(prevBackgroundVideos) && prevBackgroundVideos.forEach(function (video) { return video.remove(); });
+                var video = document.createElement('video');
+                video.id = "background_video_".concat(activeStory.id);
+                video.src = activeStory.url;
+                video.playsInline = true;
+                video.autoplay = true;
+                video.muted = true;
+                video.classList.add('smartapp-stories-content__background-video');
+                if (isWebPlatform(platform)) {
+                    popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.removeProperty('--background');
+                    popupElement === null || popupElement === void 0 ? void 0 : popupElement.appendChild(video);
+                }
+                videoWrapper === null || videoWrapper === void 0 ? void 0 : videoWrapper.appendChild(video.cloneNode(true));
+            }
+        }
+    }, [platform, activeStory]);
     if (isNull(activeGroupStories)) {
         return null;
     }
@@ -157,6 +209,7 @@ var StoriesComponent = function (_a) {
                         'smartapp-stories': true
                     },
                     _b["smartapp-stories__".concat(platform)] = true,
+                    _b['smartapp-stories__video'] = (activeStory === null || activeStory === void 0 ? void 0 : activeStory.type) === STORY_TYPE.video,
                     _b['smartapp-stories__animate-right'] = isAnimateToRight,
                     _b['smartapp-stories__animate-left'] = isAnimateToLeft,
                     _b)) }, swipeableHandlers, { children: _jsx(Stories, { defaultInterval: 6000, width: "100%", height: "100%", stories: getStories(), onStoryStart: onStoryStart, onPrevious: onPrevious, onAllStoriesEnd: handleNext, progressContainerStyles: progressContainerStyles(platform), progressWrapperStyles: progressWrapperStyles, progressStyles: progressStyles }, activeGroupStories.id) })), _jsx(CloseStoriesIcon, { className: classNames((_c = {

package/build/main//321/201omponents/Stories/types.d.ts

@@ -1,30 +1,46 @@
+import { PLATFORM } from '../../constants';
 export declare enum STORY_BACKGROUND_TYPES {
     color = "color",
     image = "image"
 }
-export type TStoryItem = {
+export declare enum STORY_TYPE {
+    image = "image",
+    video = "video"
+}
+export type TBackgroundSource = {
+    type: 'color' | 'image';
+    value: string;
+};
+type TCommonStoryItem = {
     id: number;
     order: number;
     viewed?: boolean;
+};
+export interface TImageStoryItem extends TCommonStoryItem {
+    type: 'image';
     title: string | null;
     body: string | null;
-    backgroundSource: {
-        type: STORY_BACKGROUND_TYPES;
-        value: string;
-    };
+    backgroundSource: TBackgroundSource;
     button: {
         text: string;
+        textColor?: string;
+        backgroundColor?: string;
         action: () => void;
     } | null;
     image: string | null;
-};
+}
+export interface TVideoStoryItem extends TCommonStoryItem {
+    type: 'video';
+    url: string;
+}
+export type TStoryItem = TImageStoryItem | TVideoStoryItem;
 export type TGroupStories = {
     id: number;
     viewed: boolean;
     stories: TStoryItem[];
 };
 export interface IStoriesProps {
-    platform?: string;
+    platform?: PLATFORM;
     fontFamily?: string;
     groupStories: TGroupStories | null;
     allGroupsStories: TGroupStories[];
@@ -32,3 +48,4 @@ export interface IStoriesProps {
     changeGroupStoriesToViewed?: (groupStories: TGroupStories) => void;
     handleCloseGroupStories: () => void;
 }
+export {};

package/build/main//321/201omponents/Stories/types.js

@@ -3,3 +3,8 @@ export var STORY_BACKGROUND_TYPES;
     STORY_BACKGROUND_TYPES["color"] = "color";
     STORY_BACKGROUND_TYPES["image"] = "image";
 })(STORY_BACKGROUND_TYPES || (STORY_BACKGROUND_TYPES = {}));
+export var STORY_TYPE;
+(function (STORY_TYPE) {
+    STORY_TYPE["image"] = "image";
+    STORY_TYPE["video"] = "video";
+})(STORY_TYPE || (STORY_TYPE = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressms/smartapp-ui",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "SmartApp UI library",
   "license": "MIT",
   "main": "build/main/index.js",