@megafon/ui-shared 4.14.0 → 4.15.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.15.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.15.0...@megafon/ui-shared@4.15.1) (2023-03-27)
+
+
+### Bug Fixes
+
+* **audioplayer:** fix loading of audio metadata ([d3a496d](https://github.com/MegafonWebLab/megafon-ui/commit/d3a496d6b3be86627f41d001376f6e20df0275b5))
+
+
+
+
+
+# [4.15.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.14.0...@megafon/ui-shared@4.15.0) (2023-03-20)
+
+
+### Features
+
+* **storebanner:** add new theme ([908aa58](https://github.com/MegafonWebLab/megafon-ui/commit/908aa588067c8e450ef17b10a9c9025bfae9d3c1))
+
+
+
+
+
 # [4.14.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.13.2...@megafon/ui-shared@4.14.0) (2023-03-15)
 
 

package/dist/es/components/AudioPlayer/AudioPlayer.js

@@ -83,13 +83,15 @@ var AudioPlayer = function AudioPlayer(_ref) {
     className: cn({
       'full-width': isFullWidth,
       position: position
-    })
+    }),
+    "data-testid": "AudioPlayer"
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('player')
   }, /*#__PURE__*/React.createElement("audio", {
     className: cn('audio'),
     ref: audioRef,
-    controls: false
+    controls: false,
+    "data-testid": "AudioPlayer-audio"
   }, /*#__PURE__*/React.createElement("source", {
     src: audioSrc,
     type: "audio/mpeg"
@@ -99,14 +101,19 @@ var AudioPlayer = function AudioPlayer(_ref) {
     icon: isPlaying ? /*#__PURE__*/React.createElement(IconPause, null) : /*#__PURE__*/React.createElement(IconPlay, null),
     onClick: playingIconHandleClick,
     sizeAll: "small",
-    className: cn('button')
+    className: cn('button'),
+    dataAttrs: {
+      root: {
+        'data-testid': 'AudioPlayer-btn'
+      }
+    }
   })), /*#__PURE__*/React.createElement(AudioProgress, {
     audioRef: audioRef,
     audioTitle: audioTitle,
     isPlaying: isPlaying,
     isPause: isPause,
     onChangeAudioCurrentTime: handleChangeAudioCurrentTime,
-    onPLay: handlePLay,
+    onPlay: handlePLay,
     onSetIsPlaying: setIsPlaying
   }), /*#__PURE__*/React.createElement(AudioVolume, {
     onChangeAudioVolume: handleChangeAudioVolume

package/dist/es/components/AudioPlayer/AudioProgress.d.ts

@@ -6,9 +6,9 @@ export interface IAudioProgressProps {
     audioTitle: string;
     isPlaying: boolean;
     isPause: boolean;
-    onChangeAudioCurrentTime: (currentTime: number) => void;
-    onPLay: () => void;
-    onSetIsPlaying: (value: boolean) => void;
+    onChangeAudioCurrentTime?: (currentTime: number) => void;
+    onPlay?: () => void;
+    onSetIsPlaying?: (value: boolean) => void;
 }
 declare const AudioProgress: React.FC<IAudioProgressProps>;
 export default AudioProgress;

package/dist/es/components/AudioPlayer/AudioProgress.js

@@ -4,6 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { cnCreate } from '@megafon/ui-helpers';
 import AudioRange from "./AudioRange";
+import useTrackDuration from "./hooks/useTrackDuration";
 import timerFormat from "./timerFormatUtil";
 import "./style/AudioProgress.css";
 export var INTERVAL_DELAY = 1000;
@@ -15,20 +16,16 @@ var AudioProgress = function AudioProgress(_ref) {
       isPlaying = _ref.isPlaying,
       isPause = _ref.isPause,
       onChangeAudioCurrentTime = _ref.onChangeAudioCurrentTime,
-      onPLay = _ref.onPLay,
+      onPlay = _ref.onPlay,
       onSetIsPlaying = _ref.onSetIsPlaying;
   var intervalId = React.useRef(null);
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      trackDuration = _React$useState2[0],
-      setTrackDuration = _React$useState2[1];
-
-  var _React$useState3 = React.useState(0),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      trackProgress = _React$useState4[0],
-      setTrackProgress = _React$useState4[1];
+      trackProgress = _React$useState2[0],
+      setTrackProgress = _React$useState2[1];
 
+  var trackDuration = useTrackDuration(audioRef);
   var progressColorPercent = React.useMemo(function () {
     return trackProgress / trackDuration * 100;
   }, [trackDuration, trackProgress]);
@@ -41,7 +38,7 @@ var AudioProgress = function AudioProgress(_ref) {
       var _a, _b, _c;
 
       if ((_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.ended) {
-        onSetIsPlaying(false);
+        onSetIsPlaying === null || onSetIsPlaying === void 0 ? void 0 : onSetIsPlaying(false);
         setTrackProgress(Math.floor(((_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.duration) || 0));
         return;
       }
@@ -53,12 +50,12 @@ var AudioProgress = function AudioProgress(_ref) {
   var handleScrubProgress = function handleScrubProgress(e) {
     var currentTime = Number(e.target.value);
     setTrackProgress(currentTime);
-    onChangeAudioCurrentTime(currentTime);
+    onChangeAudioCurrentTime === null || onChangeAudioCurrentTime === void 0 ? void 0 : onChangeAudioCurrentTime(currentTime);
   };
 
   var handleScrubEndProgress = function handleScrubEndProgress() {
     if (!isPlaying) {
-      onPLay();
+      onPlay === null || onPlay === void 0 ? void 0 : onPlay();
     }
 
     handleStartTimer();
@@ -69,15 +66,6 @@ var AudioProgress = function AudioProgress(_ref) {
 
     setTrackProgress(Math.floor(((_a = audioRef === null || audioRef === void 0 ? void 0 : audioRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) || 0));
   }, [audioRef]);
-  React.useEffect(function () {
-    var audioNode = audioRef.current;
-
-    if (audioNode) {
-      audioNode.onloadedmetadata = function () {
-        setTrackDuration(Math.round(audioNode.duration));
-      };
-    }
-  }, [audioRef]);
   React.useEffect(function () {
     if (isPlaying) {
       handleStartTimer();
@@ -110,7 +98,10 @@ var AudioProgress = function AudioProgress(_ref) {
     colorPercent: progressColorPercent || 0,
     onChange: handleScrubProgress,
     onMouseUp: handleScrubEndProgress,
-    onTouchEnd: handleScrubEndProgress
+    onTouchEnd: handleScrubEndProgress,
+    dataAttrs: {
+      'data-testid': 'AudioTimeRange'
+    }
   })));
 };
 

package/dist/es/components/AudioPlayer/AudioRange.d.ts

@@ -6,9 +6,10 @@ export interface IAudioRangeProps {
     value: number;
     step: string;
     colorPercent: number;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onMouseUp?: () => void;
     onTouchEnd?: () => void;
+    dataAttrs?: Record<string, string>;
 }
 declare const AudioRange: React.FC<IAudioRangeProps>;
 export default AudioRange;

package/dist/es/components/AudioPlayer/AudioRange.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import "./style/AudioRange.css";
 var cn = cnCreate('mfui-audio-range');
 
@@ -11,8 +12,9 @@ var AudioRange = function AudioRange(_ref) {
       colorPercent = _ref.colorPercent,
       onChange = _ref.onChange,
       onMouseUp = _ref.onMouseUp,
-      onTouchEnd = _ref.onTouchEnd;
-  return /*#__PURE__*/React.createElement("input", {
+      onTouchEnd = _ref.onTouchEnd,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("input", _extends({
     className: cn([className]),
     style: {
       backgroundSize: "".concat(colorPercent, "% 100%")
@@ -25,7 +27,7 @@ var AudioRange = function AudioRange(_ref) {
     onChange: onChange,
     onMouseUp: onMouseUp,
     onTouchEnd: onTouchEnd
-  });
+  }, filterDataAttrs(dataAttrs)));
 };
 
 export default AudioRange;

package/dist/es/components/AudioPlayer/AudioVolume.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './style/AudioVolume.less';
 export interface IAudioVolumeProps {
-    onChangeAudioVolume: (volume: number) => void;
+    onChangeAudioVolume?: (volume: number) => void;
 }
 declare const AudioVolume: React.FC<IAudioVolumeProps>;
 export default AudioVolume;

package/dist/es/components/AudioPlayer/AudioVolume.js

@@ -45,7 +45,7 @@ var AudioVolume = function AudioVolume(_ref) {
   var handleScrubVolume = function handleScrubVolume(e) {
     var currentVolume = Number(e.target.value);
     setTrackVolume(currentVolume);
-    onChangeAudioVolume(currentVolume);
+    onChangeAudioVolume === null || onChangeAudioVolume === void 0 ? void 0 : onChangeAudioVolume(currentVolume);
   };
 
   return /*#__PURE__*/React.createElement("div", {
@@ -76,7 +76,10 @@ var AudioVolume = function AudioVolume(_ref) {
     value: trackVolume,
     step: "0.01",
     colorPercent: volumeColorPercent || 0,
-    onChange: handleScrubVolume
+    onChange: handleScrubVolume,
+    dataAttrs: {
+      'data-testid': 'AudioVolumeRange'
+    }
   })));
 };
 

package/dist/es/components/AudioPlayer/hooks/useTrackDuration.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const useTrackDuration: (audioRef: React.RefObject<HTMLAudioElement>) => number;
+export default useTrackDuration;

package/dist/es/components/AudioPlayer/hooks/useTrackDuration.js

@@ -0,0 +1,32 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+
+var useTrackDuration = function useTrackDuration(audioRef) {
+  var _React$useState = React.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      trackDuration = _React$useState2[0],
+      setTrackDuration = _React$useState2[1];
+
+  React.useEffect(function () {
+    var audioNode = audioRef.current;
+
+    if (!audioNode) {
+      return;
+    }
+
+    var readyState = audioNode.readyState,
+        duration = audioNode.duration;
+
+    if (readyState > 0) {
+      setTrackDuration(Math.round(duration));
+    } else {
+      audioNode.onloadedmetadata = function (e) {
+        var el = e.target;
+        setTrackDuration(Math.round(el.duration));
+      };
+    }
+  }, [audioRef]);
+  return trackDuration;
+};
+
+export default useTrackDuration;

package/dist/es/components/ButtonBanner/ButtonBanner.css

@@ -9,11 +9,11 @@ h5 {
   position: relative;
   border: 1px solid var(--spbSky2);
   background-color: var(--base);
-  border-radius: 0 8px 8px 0;
+  border-radius: 0 12px 12px 0;
 }
 @media screen and (max-width: 767px) {
   .mfui-button-banner {
-    border-radius: 0 0 8px 8px;
+    border-radius: 0 0 12px 12px;
   }
 }
 .mfui-button-banner:before {
@@ -79,11 +79,11 @@ h5 {
   overflow: hidden;
   background-repeat: no-repeat;
   background-position: center;
-  border-radius: 0 8px 8px 0;
+  border-radius: 0 12px 12px 0;
 }
 @media screen and (max-width: 767px) {
   .mfui-button-banner__media {
-    border-radius: 0 0 8px 8px;
+    border-radius: 0 0 12px 12px;
   }
 }
 @media screen and (max-width: 767px) {

package/dist/es/components/Card/Card.css

@@ -9,11 +9,11 @@ h5 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  border-radius: 8px;
+  border-radius: 12px;
   overflow: hidden;
   background-color: var(--base);
-  -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
-          box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 .mfui-card__inner {
   display: -webkit-box;

package/dist/es/components/StoreBanner/StoreBanner.css

@@ -12,17 +12,26 @@ h5 {
   color: var(--content);
 }
 .mfui-store-banner_theme_green .mfui-store-banner__grid {
+  border-color: transparent;
   background-color: var(--brandGreen);
 }
 .mfui-store-banner_theme_green .mfui-store-banner__content {
   color: var(--stcWhite);
 }
 .mfui-store-banner_theme_spbSky1 .mfui-store-banner__grid {
+  border-color: transparent;
   background-color: var(--spbSky1);
 }
 .mfui-store-banner_theme_spbSky1 .mfui-store-banner__content {
   color: var(--content);
 }
+.mfui-store-banner_theme_spbSky0 .mfui-store-banner__grid {
+  border-color: transparent;
+  background-color: var(--spbSky0);
+}
+.mfui-store-banner_theme_spbSky0 .mfui-store-banner__content {
+  color: var(--content);
+}
 .mfui-store-banner_mask_new-iphone .mfui-store-banner__device-mask {
   position: relative;
   z-index: 2;
@@ -92,7 +101,7 @@ h5 {
   padding-top: 32px;
   padding-bottom: 32px;
   border: 1px solid var(--spbSky2);
-  border-radius: 8px;
+  border-radius: 12px;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__grid {

package/dist/es/components/StoreBanner/StoreBanner.d.ts

@@ -5,6 +5,7 @@ export declare const Theme: {
     readonly DEFAULT: "default";
     readonly GREEN: "green";
     readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_0: "spbSky0";
 };
 declare type ThemeType = typeof Theme[keyof typeof Theme];
 export declare const DeviceMask: {

package/dist/es/components/StoreBanner/StoreBanner.js

@@ -9,7 +9,8 @@ import "./StoreBanner.css";
 export var Theme = {
   DEFAULT: 'default',
   GREEN: 'green',
-  SPB_SKY_1: 'spbSky1'
+  SPB_SKY_1: 'spbSky1',
+  SPB_SKY_0: 'spbSky0'
 };
 export var DeviceMask = {
   ANDROID: 'android',

package/dist/es/index.d.ts

@@ -39,5 +39,6 @@ export { default as TextWithIcon } from './components/TextWithIcon/TextWithIcon'
 export { default as TextWithIconItem } from './components/TextWithIcon/TextWithIconItem';
 export { default as timerFormatUtil } from './components/AudioPlayer/timerFormatUtil';
 export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
+export { default as useTrackDuration } from './components/AudioPlayer/hooks/useTrackDuration';
 export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
 export { default as VideoBlock } from './components/VideoBlock/VideoBlock';

package/dist/es/index.js

@@ -39,5 +39,6 @@ export { default as TextWithIcon } from "./components/TextWithIcon/TextWithIcon"
 export { default as TextWithIconItem } from "./components/TextWithIcon/TextWithIconItem";
 export { default as timerFormatUtil } from "./components/AudioPlayer/timerFormatUtil";
 export { default as TitleDescriptionBox } from "./components/TitleDescriptionBox/TitleDescriptionBox";
+export { default as useTrackDuration } from "./components/AudioPlayer/hooks/useTrackDuration";
 export { default as VideoBanner } from "./components/VideoBanner/VideoBanner";
 export { default as VideoBlock } from "./components/VideoBlock/VideoBlock";

package/dist/lib/components/AudioPlayer/AudioPlayer.js

@@ -99,13 +99,15 @@ var AudioPlayer = function AudioPlayer(_ref) {
     className: cn({
       'full-width': isFullWidth,
       position: position
-    })
+    }),
+    "data-testid": "AudioPlayer"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('player')
   }, /*#__PURE__*/_react["default"].createElement("audio", {
     className: cn('audio'),
     ref: audioRef,
-    controls: false
+    controls: false,
+    "data-testid": "AudioPlayer-audio"
   }, /*#__PURE__*/_react["default"].createElement("source", {
     src: audioSrc,
     type: "audio/mpeg"
@@ -115,14 +117,19 @@ var AudioPlayer = function AudioPlayer(_ref) {
     icon: isPlaying ? /*#__PURE__*/_react["default"].createElement(IconPause, null) : /*#__PURE__*/_react["default"].createElement(IconPlay, null),
     onClick: playingIconHandleClick,
     sizeAll: "small",
-    className: cn('button')
+    className: cn('button'),
+    dataAttrs: {
+      root: {
+        'data-testid': 'AudioPlayer-btn'
+      }
+    }
   })), /*#__PURE__*/_react["default"].createElement(_AudioProgress["default"], {
     audioRef: audioRef,
     audioTitle: audioTitle,
     isPlaying: isPlaying,
     isPause: isPause,
     onChangeAudioCurrentTime: handleChangeAudioCurrentTime,
-    onPLay: handlePLay,
+    onPlay: handlePLay,
     onSetIsPlaying: setIsPlaying
   }), /*#__PURE__*/_react["default"].createElement(_AudioVolume["default"], {
     onChangeAudioVolume: handleChangeAudioVolume

package/dist/lib/components/AudioPlayer/AudioProgress.d.ts

@@ -6,9 +6,9 @@ export interface IAudioProgressProps {
     audioTitle: string;
     isPlaying: boolean;
     isPause: boolean;
-    onChangeAudioCurrentTime: (currentTime: number) => void;
-    onPLay: () => void;
-    onSetIsPlaying: (value: boolean) => void;
+    onChangeAudioCurrentTime?: (currentTime: number) => void;
+    onPlay?: () => void;
+    onSetIsPlaying?: (value: boolean) => void;
 }
 declare const AudioProgress: React.FC<IAudioProgressProps>;
 export default AudioProgress;

package/dist/lib/components/AudioPlayer/AudioProgress.js

@@ -17,6 +17,8 @@ var _uiHelpers = require("@megafon/ui-helpers");
 
 var _AudioRange = _interopRequireDefault(require("./AudioRange"));
 
+var _useTrackDuration = _interopRequireDefault(require("./hooks/useTrackDuration"));
+
 var _timerFormatUtil = _interopRequireDefault(require("./timerFormatUtil"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -31,20 +33,17 @@ var AudioProgress = function AudioProgress(_ref) {
       isPlaying = _ref.isPlaying,
       isPause = _ref.isPause,
       onChangeAudioCurrentTime = _ref.onChangeAudioCurrentTime,
-      onPLay = _ref.onPLay,
+      onPlay = _ref.onPlay,
       onSetIsPlaying = _ref.onSetIsPlaying;
 
   var intervalId = _react["default"].useRef(null);
 
   var _React$useState = _react["default"].useState(0),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      trackDuration = _React$useState2[0],
-      setTrackDuration = _React$useState2[1];
+      trackProgress = _React$useState2[0],
+      setTrackProgress = _React$useState2[1];
 
-  var _React$useState3 = _react["default"].useState(0),
-      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-      trackProgress = _React$useState4[0],
-      setTrackProgress = _React$useState4[1];
+  var trackDuration = (0, _useTrackDuration["default"])(audioRef);
 
   var progressColorPercent = _react["default"].useMemo(function () {
     return trackProgress / trackDuration * 100;
@@ -60,7 +59,7 @@ var AudioProgress = function AudioProgress(_ref) {
       var _a, _b, _c;
 
       if ((_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.ended) {
-        onSetIsPlaying(false);
+        onSetIsPlaying === null || onSetIsPlaying === void 0 ? void 0 : onSetIsPlaying(false);
         setTrackProgress(Math.floor(((_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.duration) || 0));
         return;
       }
@@ -72,12 +71,12 @@ var AudioProgress = function AudioProgress(_ref) {
   var handleScrubProgress = function handleScrubProgress(e) {
     var currentTime = Number(e.target.value);
     setTrackProgress(currentTime);
-    onChangeAudioCurrentTime(currentTime);
+    onChangeAudioCurrentTime === null || onChangeAudioCurrentTime === void 0 ? void 0 : onChangeAudioCurrentTime(currentTime);
   };
 
   var handleScrubEndProgress = function handleScrubEndProgress() {
     if (!isPlaying) {
-      onPLay();
+      onPlay === null || onPlay === void 0 ? void 0 : onPlay();
     }
 
     handleStartTimer();
@@ -89,16 +88,6 @@ var AudioProgress = function AudioProgress(_ref) {
     setTrackProgress(Math.floor(((_a = audioRef === null || audioRef === void 0 ? void 0 : audioRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) || 0));
   }, [audioRef]);
 
-  _react["default"].useEffect(function () {
-    var audioNode = audioRef.current;
-
-    if (audioNode) {
-      audioNode.onloadedmetadata = function () {
-        setTrackDuration(Math.round(audioNode.duration));
-      };
-    }
-  }, [audioRef]);
-
   _react["default"].useEffect(function () {
     if (isPlaying) {
       handleStartTimer();
@@ -133,7 +122,10 @@ var AudioProgress = function AudioProgress(_ref) {
     colorPercent: progressColorPercent || 0,
     onChange: handleScrubProgress,
     onMouseUp: handleScrubEndProgress,
-    onTouchEnd: handleScrubEndProgress
+    onTouchEnd: handleScrubEndProgress,
+    dataAttrs: {
+      'data-testid': 'AudioTimeRange'
+    }
   })));
 };
 

package/dist/lib/components/AudioPlayer/AudioRange.d.ts

@@ -6,9 +6,10 @@ export interface IAudioRangeProps {
     value: number;
     step: string;
     colorPercent: number;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onMouseUp?: () => void;
     onTouchEnd?: () => void;
+    dataAttrs?: Record<string, string>;
 }
 declare const AudioRange: React.FC<IAudioRangeProps>;
 export default AudioRange;

package/dist/lib/components/AudioPlayer/AudioRange.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -21,8 +23,9 @@ var AudioRange = function AudioRange(_ref) {
       colorPercent = _ref.colorPercent,
       onChange = _ref.onChange,
       onMouseUp = _ref.onMouseUp,
-      onTouchEnd = _ref.onTouchEnd;
-  return /*#__PURE__*/_react["default"].createElement("input", {
+      onTouchEnd = _ref.onTouchEnd,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
     className: cn([className]),
     style: {
       backgroundSize: "".concat(colorPercent, "% 100%")
@@ -35,7 +38,7 @@ var AudioRange = function AudioRange(_ref) {
     onChange: onChange,
     onMouseUp: onMouseUp,
     onTouchEnd: onTouchEnd
-  });
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)));
 };
 
 var _default = AudioRange;

package/dist/lib/components/AudioPlayer/AudioVolume.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './style/AudioVolume.less';
 export interface IAudioVolumeProps {
-    onChangeAudioVolume: (volume: number) => void;
+    onChangeAudioVolume?: (volume: number) => void;
 }
 declare const AudioVolume: React.FC<IAudioVolumeProps>;
 export default AudioVolume;

package/dist/lib/components/AudioPlayer/AudioVolume.js

@@ -60,7 +60,7 @@ var AudioVolume = function AudioVolume(_ref) {
   var handleScrubVolume = function handleScrubVolume(e) {
     var currentVolume = Number(e.target.value);
     setTrackVolume(currentVolume);
-    onChangeAudioVolume(currentVolume);
+    onChangeAudioVolume === null || onChangeAudioVolume === void 0 ? void 0 : onChangeAudioVolume(currentVolume);
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -91,7 +91,10 @@ var AudioVolume = function AudioVolume(_ref) {
     value: trackVolume,
     step: "0.01",
     colorPercent: volumeColorPercent || 0,
-    onChange: handleScrubVolume
+    onChange: handleScrubVolume,
+    dataAttrs: {
+      'data-testid': 'AudioVolumeRange'
+    }
   })));
 };
 

package/dist/lib/components/AudioPlayer/hooks/useTrackDuration.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const useTrackDuration: (audioRef: React.RefObject<HTMLAudioElement>) => number;
+export default useTrackDuration;

package/dist/lib/components/AudioPlayer/hooks/useTrackDuration.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var useTrackDuration = function useTrackDuration(audioRef) {
+  var _React$useState = _react["default"].useState(0),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      trackDuration = _React$useState2[0],
+      setTrackDuration = _React$useState2[1];
+
+  _react["default"].useEffect(function () {
+    var audioNode = audioRef.current;
+
+    if (!audioNode) {
+      return;
+    }
+
+    var readyState = audioNode.readyState,
+        duration = audioNode.duration;
+
+    if (readyState > 0) {
+      setTrackDuration(Math.round(duration));
+    } else {
+      audioNode.onloadedmetadata = function (e) {
+        var el = e.target;
+        setTrackDuration(Math.round(el.duration));
+      };
+    }
+  }, [audioRef]);
+
+  return trackDuration;
+};
+
+var _default = useTrackDuration;
+exports["default"] = _default;

package/dist/lib/components/ButtonBanner/ButtonBanner.css

@@ -9,11 +9,11 @@ h5 {
   position: relative;
   border: 1px solid var(--spbSky2);
   background-color: var(--base);
-  border-radius: 0 8px 8px 0;
+  border-radius: 0 12px 12px 0;
 }
 @media screen and (max-width: 767px) {
   .mfui-button-banner {
-    border-radius: 0 0 8px 8px;
+    border-radius: 0 0 12px 12px;
   }
 }
 .mfui-button-banner:before {
@@ -79,11 +79,11 @@ h5 {
   overflow: hidden;
   background-repeat: no-repeat;
   background-position: center;
-  border-radius: 0 8px 8px 0;
+  border-radius: 0 12px 12px 0;
 }
 @media screen and (max-width: 767px) {
   .mfui-button-banner__media {
-    border-radius: 0 0 8px 8px;
+    border-radius: 0 0 12px 12px;
   }
 }
 @media screen and (max-width: 767px) {

package/dist/lib/components/Card/Card.css

@@ -9,11 +9,11 @@ h5 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  border-radius: 8px;
+  border-radius: 12px;
   overflow: hidden;
   background-color: var(--base);
-  -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
-          box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 .mfui-card__inner {
   display: -webkit-box;

package/dist/lib/components/StoreBanner/StoreBanner.css

@@ -12,17 +12,26 @@ h5 {
   color: var(--content);
 }
 .mfui-store-banner_theme_green .mfui-store-banner__grid {
+  border-color: transparent;
   background-color: var(--brandGreen);
 }
 .mfui-store-banner_theme_green .mfui-store-banner__content {
   color: var(--stcWhite);
 }
 .mfui-store-banner_theme_spbSky1 .mfui-store-banner__grid {
+  border-color: transparent;
   background-color: var(--spbSky1);
 }
 .mfui-store-banner_theme_spbSky1 .mfui-store-banner__content {
   color: var(--content);
 }
+.mfui-store-banner_theme_spbSky0 .mfui-store-banner__grid {
+  border-color: transparent;
+  background-color: var(--spbSky0);
+}
+.mfui-store-banner_theme_spbSky0 .mfui-store-banner__content {
+  color: var(--content);
+}
 .mfui-store-banner_mask_new-iphone .mfui-store-banner__device-mask {
   position: relative;
   z-index: 2;
@@ -92,7 +101,7 @@ h5 {
   padding-top: 32px;
   padding-bottom: 32px;
   border: 1px solid var(--spbSky2);
-  border-radius: 8px;
+  border-radius: 12px;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__grid {

package/dist/lib/components/StoreBanner/StoreBanner.d.ts

@@ -5,6 +5,7 @@ export declare const Theme: {
     readonly DEFAULT: "default";
     readonly GREEN: "green";
     readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_0: "spbSky0";
 };
 declare type ThemeType = typeof Theme[keyof typeof Theme];
 export declare const DeviceMask: {

package/dist/lib/components/StoreBanner/StoreBanner.js

@@ -30,7 +30,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var Theme = {
   DEFAULT: 'default',
   GREEN: 'green',
-  SPB_SKY_1: 'spbSky1'
+  SPB_SKY_1: 'spbSky1',
+  SPB_SKY_0: 'spbSky0'
 };
 exports.Theme = Theme;
 var DeviceMask = {

package/dist/lib/index.d.ts

@@ -39,5 +39,6 @@ export { default as TextWithIcon } from './components/TextWithIcon/TextWithIcon'
 export { default as TextWithIconItem } from './components/TextWithIcon/TextWithIconItem';
 export { default as timerFormatUtil } from './components/AudioPlayer/timerFormatUtil';
 export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
+export { default as useTrackDuration } from './components/AudioPlayer/hooks/useTrackDuration';
 export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
 export { default as VideoBlock } from './components/VideoBlock/VideoBlock';

package/dist/lib/index.js

@@ -249,6 +249,12 @@ Object.defineProperty(exports, "TitleDescriptionBox", {
     return _TitleDescriptionBox["default"];
   }
 });
+Object.defineProperty(exports, "useTrackDuration", {
+  enumerable: true,
+  get: function get() {
+    return _useTrackDuration["default"];
+  }
+});
 Object.defineProperty(exports, "VideoBanner", {
   enumerable: true,
   get: function get() {
@@ -344,6 +350,8 @@ var _timerFormatUtil = _interopRequireDefault(require("./components/AudioPlayer/
 
 var _TitleDescriptionBox = _interopRequireDefault(require("./components/TitleDescriptionBox/TitleDescriptionBox"));
 
+var _useTrackDuration = _interopRequireDefault(require("./components/AudioPlayer/hooks/useTrackDuration"));
+
 var _VideoBanner = _interopRequireDefault(require("./components/VideoBanner/VideoBanner"));
 
 var _VideoBlock = _interopRequireDefault(require("./components/VideoBlock/VideoBlock"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "4.14.0",
+  "version": "4.15.1",
   "files": [
     "dist"
   ],
@@ -52,10 +52,11 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.8.0",
+    "@megafon/ui-icons": "^2.8.1",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "13.5.0",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
@@ -85,7 +86,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^4.14.1",
+    "@megafon/ui-core": "^4.15.0",
     "@megafon/ui-helpers": "^2.4.0",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
@@ -93,5 +94,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "f4e8d7fc125d61575ec4fb4ce4d111c94a87c18f"
+  "gitHead": "2b3c9ee6628b04ef8cf0105476716cac5558db02"
 }