@megafon/ui-shared 4.15.0 → 4.16.0

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.16.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.15.1...@megafon/ui-shared@4.16.0) (2023-04-04)
+
+
+### Features
+
+* **storebanner:** add new mask for iphone 12 and content left on mobile ([8702938](https://github.com/MegafonWebLab/megafon-ui/commit/8702938d1bf9c0b1bbdc80f045e2bc329da1c99d))
+
+
+
+
+
+## [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)
 
 

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/StoreBanner/StoreBanner.css

@@ -92,6 +92,48 @@ h5 {
     top: 63px;
   }
 }
+.mfui-store-banner_mask_iphone-12 .mfui-store-banner__device-mask {
+  position: relative;
+  z-index: 2;
+  background-image: url('./img/iphone12.png');
+}
+.mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen {
+  top: 16px;
+  z-index: 1;
+  width: 87%;
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen {
+    top: 18px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen {
+    top: 13px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen {
+    top: 35px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner_content-left-mobile .mfui-store-banner__content {
+    text-align: left;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner_content-left-mobile .mfui-store-banner__stores {
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner_content-left-mobile .mfui-store-banner__button {
+    margin: 0;
+  }
+}
 @media screen and (min-width: 1024px) {
   .mfui-store-banner__container {
     padding-top: 30px;

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

@@ -13,6 +13,7 @@ export declare const DeviceMask: {
     readonly NEW_IPHONE: "new-iphone";
     readonly BLACK_IPHONE: "black-iphone";
     readonly WHITE_IPHONE: "white-iphone";
+    readonly IPHONE_12: "iphone-12";
 };
 declare type DeviceMaskType = typeof DeviceMask[keyof typeof DeviceMask];
 declare type LinkHrefType = StoreButtonPropsType['href'];
@@ -48,6 +49,8 @@ export interface IStoreBannerProps {
     deviceMask: DeviceMaskType;
     /** Изображение на дисплее телефона */
     imageSrc: string;
+    /** Выравнивание контента слева на мобильном разрешении */
+    isContentLeftMobile?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */

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

@@ -16,7 +16,8 @@ export var DeviceMask = {
   ANDROID: 'android',
   NEW_IPHONE: 'new-iphone',
   BLACK_IPHONE: 'black-iphone',
-  WHITE_IPHONE: 'white-iphone'
+  WHITE_IPHONE: 'white-iphone',
+  IPHONE_12: 'iphone-12'
 };
 var cn = cnCreate('mfui-store-banner');
 
@@ -42,6 +43,7 @@ var StoreBanner = function StoreBanner(_ref) {
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'default' : _ref$theme,
       deviceMask = _ref.deviceMask,
+      isContentLeftMobile = _ref.isContentLeftMobile,
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
       onClickApple = _ref.onClickApple,
@@ -50,7 +52,8 @@ var StoreBanner = function StoreBanner(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       theme: theme,
-      mask: deviceMask
+      mask: deviceMask,
+      'content-left-mobile': isContentLeftMobile
     }, [className, rootClassName]),
     ref: rootRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {

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/StoreBanner/StoreBanner.css

@@ -92,6 +92,48 @@ h5 {
     top: 63px;
   }
 }
+.mfui-store-banner_mask_iphone-12 .mfui-store-banner__device-mask {
+  position: relative;
+  z-index: 2;
+  background-image: url('./img/iphone12.png');
+}
+.mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen {
+  top: 16px;
+  z-index: 1;
+  width: 87%;
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen {
+    top: 18px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen {
+    top: 13px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner_mask_iphone-12 .mfui-store-banner__screen {
+    top: 35px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner_content-left-mobile .mfui-store-banner__content {
+    text-align: left;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner_content-left-mobile .mfui-store-banner__stores {
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-store-banner_content-left-mobile .mfui-store-banner__button {
+    margin: 0;
+  }
+}
 @media screen and (min-width: 1024px) {
   .mfui-store-banner__container {
     padding-top: 30px;

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

@@ -13,6 +13,7 @@ export declare const DeviceMask: {
     readonly NEW_IPHONE: "new-iphone";
     readonly BLACK_IPHONE: "black-iphone";
     readonly WHITE_IPHONE: "white-iphone";
+    readonly IPHONE_12: "iphone-12";
 };
 declare type DeviceMaskType = typeof DeviceMask[keyof typeof DeviceMask];
 declare type LinkHrefType = StoreButtonPropsType['href'];
@@ -48,6 +49,8 @@ export interface IStoreBannerProps {
     deviceMask: DeviceMaskType;
     /** Изображение на дисплее телефона */
     imageSrc: string;
+    /** Выравнивание контента слева на мобильном разрешении */
+    isContentLeftMobile?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */

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

@@ -38,7 +38,8 @@ var DeviceMask = {
   ANDROID: 'android',
   NEW_IPHONE: 'new-iphone',
   BLACK_IPHONE: 'black-iphone',
-  WHITE_IPHONE: 'white-iphone'
+  WHITE_IPHONE: 'white-iphone',
+  IPHONE_12: 'iphone-12'
 };
 exports.DeviceMask = DeviceMask;
 var cn = (0, _uiHelpers.cnCreate)('mfui-store-banner');
@@ -65,6 +66,7 @@ var StoreBanner = function StoreBanner(_ref) {
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'default' : _ref$theme,
       deviceMask = _ref.deviceMask,
+      isContentLeftMobile = _ref.isContentLeftMobile,
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
       onClickApple = _ref.onClickApple,
@@ -73,7 +75,8 @@ var StoreBanner = function StoreBanner(_ref) {
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn({
       theme: theme,
-      mask: deviceMask
+      mask: deviceMask,
+      'content-left-mobile': isContentLeftMobile
     }, [className, rootClassName]),
     ref: rootRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {

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.15.0",
+  "version": "4.16.0",
   "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.2",
+    "@megafon/ui-core": "^4.15.1",
     "@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": "43725eddf6f23f91c95f9f7c932e9b9589a4af04"
+  "gitHead": "ff8786e64e8cc9220fc248899a2328d28bd159b0"
 }