@megafon/ui-shared 4.7.0 → 4.9.0

package/dist/es/components/Instructions/Instructions.js

@@ -7,8 +7,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
 import { Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import convert from 'htmr';
+import { cnCreate, filterDataAttrs, titleConvertConfig, convert, textConvertConfig } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import "./Instructions.css";
@@ -123,13 +122,13 @@ var Instructions = function Instructions(_ref) {
         resolution: resolution
       }),
       as: "h2"
-    }, title);
+    }, convert(title, titleConvertConfig));
   }, [title]);
   var renderText = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(Paragraph, {
       className: cn('text', [additionalText]),
       hasMargin: false
-    }, convert(text));
+    }, convert(text, textConvertConfig));
   }, [text, additionalText]);
   var renderPicture = React.useCallback(function () {
     if (pictureMask === pictureMaskTypes.NONE) {

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import './Steps.less';
 export interface ISteps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */

package/dist/es/components/Steps/Steps.js

@@ -1,23 +1,24 @@
 import "core-js/modules/es.array.map";
 import * as React from 'react';
 import { Header } from '@megafon/ui-core';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, convert, titleConvertConfig } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import "./Steps.css";
 var cn = cnCreate('mfui-steps');
 
 var Steps = function Steps(_ref) {
-  var title = _ref.title,
+  var className = _ref.className,
+      title = _ref.title,
       rootRef = _ref.rootRef,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: cn(),
+    className: cn([className]),
     ref: rootRef
   }, /*#__PURE__*/React.createElement(Header, {
     as: "h2",
     align: "center",
     className: cn('title')
-  }, title), /*#__PURE__*/React.createElement("ul", {
+  }, convert(title, titleConvertConfig)), /*#__PURE__*/React.createElement("ul", {
     className: cn('list')
   }, React.Children.map(children, function (child) {
     return /*#__PURE__*/React.createElement("li", {
@@ -27,6 +28,7 @@ var Steps = function Steps(_ref) {
 };
 
 Steps.propTypes = {
+  className: PropTypes.string,
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),

package/dist/es/components/Steps/StepsItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Paragraph } from '@megafon/ui-core';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, convert, textConvertConfig } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import "./StepsItem.css";
 var cn = cnCreate('mfui-steps-item');
@@ -16,7 +16,7 @@ var StepsItem = function StepsItem(_ref) {
     className: cn('text-wrapper')
   }, /*#__PURE__*/React.createElement(Paragraph, {
     hasMargin: false
-  }, text)));
+  }, typeof text === 'string' ? convert(text, textConvertConfig) : text)));
 };
 
 StepsItem.propTypes = {

package/dist/es/index.d.ts

@@ -1,4 +1,8 @@
 export { default as AccordionBox } from './components/AccordionBox/AccordionBox';
+export { default as AudioPlayer } from './components/AudioPlayer/AudioPlayer';
+export { default as AudioProgress } from './components/AudioPlayer/AudioProgress';
+export { default as AudioRange } from './components/AudioPlayer/AudioRange';
+export { default as AudioVolume } from './components/AudioPlayer/AudioVolume';
 export { default as BannerBox } from './components/BannerBox/BannerBox';
 export { default as BenefitsIcons } from './components/BenefitsIcons/BenefitsIcons';
 export { default as BenefitsIconsTile } from './components/BenefitsIcons/BenefitsIconsTile';
@@ -33,6 +37,7 @@ export { default as TextBox } from './components/TextBox/TextBox';
 export { default as TextBoxPicture } from './components/TextBox/TextBoxPicture';
 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 VideoBanner } from './components/VideoBanner/VideoBanner';
 export { default as VideoBlock } from './components/VideoBlock/VideoBlock';

package/dist/es/index.js

@@ -1,4 +1,8 @@
 export { default as AccordionBox } from "./components/AccordionBox/AccordionBox";
+export { default as AudioPlayer } from "./components/AudioPlayer/AudioPlayer";
+export { default as AudioProgress } from "./components/AudioPlayer/AudioProgress";
+export { default as AudioRange } from "./components/AudioPlayer/AudioRange";
+export { default as AudioVolume } from "./components/AudioPlayer/AudioVolume";
 export { default as BannerBox } from "./components/BannerBox/BannerBox";
 export { default as BenefitsIcons } from "./components/BenefitsIcons/BenefitsIcons";
 export { default as BenefitsIconsTile } from "./components/BenefitsIcons/BenefitsIconsTile";
@@ -33,6 +37,7 @@ export { default as TextBox } from "./components/TextBox/TextBox";
 export { default as TextBoxPicture } from "./components/TextBox/TextBoxPicture";
 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 VideoBanner } from "./components/VideoBanner/VideoBanner";
 export { default as VideoBlock } from "./components/VideoBlock/VideoBlock";

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import './style/AudioPlayer.less';
+export interface IAudioPlayerProps {
+    audioSrc: string;
+    audioTitle: string;
+    position?: 'left' | 'center' | 'right';
+    isFullWidth?: boolean;
+}
+declare const AudioPlayer: React.FC<IAudioPlayerProps>;
+export default AudioPlayer;

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

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _AudioProgress = _interopRequireDefault(require("./AudioProgress"));
+
+var _AudioVolume = _interopRequireDefault(require("./AudioVolume"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var IconPause = function IconPause(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M11 10.5v11a.5.5 0 00.5.5h2a.5.5 0 00.5-.5v-11a.5.5 0 00-.5-.5h-2a.5.5 0 00-.5.5zm7 0v11a.5.5 0 00.5.5h2a.5.5 0 00.5-.5v-11a.5.5 0 00-.5-.5h-2a.5.5 0 00-.5.5z"
+  }));
+};
+
+var IconPlay = function IconPlay(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M11.5 22.13V9.87a.5.5 0 01.752-.431l10.508 6.13a.5.5 0 010 .863l-10.508 6.13a.5.5 0 01-.752-.433z"
+  }));
+};
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-audio-player');
+
+var AudioPlayer = function AudioPlayer(_ref) {
+  var audioSrc = _ref.audioSrc,
+      audioTitle = _ref.audioTitle,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? 'center' : _ref$position,
+      isFullWidth = _ref.isFullWidth;
+
+  var audioRef = _react["default"].useRef(null);
+
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isPlaying = _React$useState2[0],
+      setIsPlaying = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(false),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      isPause = _React$useState4[0],
+      setIsPause = _React$useState4[1];
+
+  var handlePLay = function handlePLay() {
+    var _a;
+
+    setIsPlaying(true);
+    setIsPause(false);
+    (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play();
+  };
+
+  var handlePause = function handlePause() {
+    var _a;
+
+    setIsPlaying(false);
+    setIsPause(true);
+    (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+  };
+
+  var handleChangeAudioCurrentTime = function handleChangeAudioCurrentTime(currentTime) {
+    if (!audioRef || !audioRef.current) {
+      return;
+    }
+
+    audioRef.current.currentTime = currentTime;
+  };
+
+  var handleChangeAudioVolume = function handleChangeAudioVolume(volume) {
+    if (!audioRef || !audioRef.current) {
+      return;
+    }
+
+    audioRef.current.volume = volume;
+    audioRef.current.muted = !volume;
+  };
+
+  var playingIconHandleClick = _react["default"].useMemo(function () {
+    return isPlaying ? handlePause : handlePLay;
+  }, [isPlaying]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn({
+      'full-width': isFullWidth,
+      position: position
+    })
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('player')
+  }, /*#__PURE__*/_react["default"].createElement("audio", {
+    className: cn('audio'),
+    ref: audioRef,
+    controls: false
+  }, /*#__PURE__*/_react["default"].createElement("source", {
+    src: audioSrc,
+    type: "audio/mpeg"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('playing-controls')
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    icon: isPlaying ? /*#__PURE__*/_react["default"].createElement(IconPause, null) : /*#__PURE__*/_react["default"].createElement(IconPlay, null),
+    onClick: playingIconHandleClick,
+    sizeAll: "small",
+    className: cn('button')
+  })), /*#__PURE__*/_react["default"].createElement(_AudioProgress["default"], {
+    audioRef: audioRef,
+    audioTitle: audioTitle,
+    isPlaying: isPlaying,
+    isPause: isPause,
+    onChangeAudioCurrentTime: handleChangeAudioCurrentTime,
+    onPLay: handlePLay,
+    onSetIsPlaying: setIsPlaying
+  }), /*#__PURE__*/_react["default"].createElement(_AudioVolume["default"], {
+    onChangeAudioVolume: handleChangeAudioVolume
+  })));
+};
+
+var _default = AudioPlayer;
+exports["default"] = _default;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './style/AudioProgress.less';
+export declare const INTERVAL_DELAY = 1000;
+export interface IAudioProgressProps {
+    audioRef: React.MutableRefObject<HTMLAudioElement | null>;
+    audioTitle: string;
+    isPlaying: boolean;
+    isPause: boolean;
+    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

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.INTERVAL_DELAY = void 0;
+
+require("core-js/modules/es.number.constructor");
+
+require("core-js/modules/web.timers");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _AudioRange = _interopRequireDefault(require("./AudioRange"));
+
+var _timerFormatUtil = _interopRequireDefault(require("./timerFormatUtil"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var INTERVAL_DELAY = 1000;
+exports.INTERVAL_DELAY = INTERVAL_DELAY;
+var cn = (0, _uiHelpers.cnCreate)('mfui-audio-progress');
+
+var AudioProgress = function AudioProgress(_ref) {
+  var audioRef = _ref.audioRef,
+      audioTitle = _ref.audioTitle,
+      isPlaying = _ref.isPlaying,
+      isPause = _ref.isPause,
+      onChangeAudioCurrentTime = _ref.onChangeAudioCurrentTime,
+      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];
+
+  var _React$useState3 = _react["default"].useState(0),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      trackProgress = _React$useState4[0],
+      setTrackProgress = _React$useState4[1];
+
+  var progressColorPercent = _react["default"].useMemo(function () {
+    return trackProgress / trackDuration * 100;
+  }, [trackDuration, trackProgress]);
+
+  var progressValue = _react["default"].useMemo(function () {
+    return isPlaying || isPause ? trackProgress : trackDuration;
+  }, [isPause, isPlaying, trackDuration, trackProgress]);
+
+  var handleStartTimer = _react["default"].useCallback(function () {
+    intervalId.current && clearInterval(intervalId.current);
+    intervalId.current = setInterval(function () {
+      var _a, _b, _c;
+
+      if ((_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.ended) {
+        onSetIsPlaying(false);
+        setTrackProgress(Math.floor(((_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.duration) || 0));
+        return;
+      }
+
+      setTrackProgress(Math.floor(((_c = audioRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) || 0));
+    }, INTERVAL_DELAY);
+  }, [audioRef, onSetIsPlaying]);
+
+  var handleScrubProgress = function handleScrubProgress(e) {
+    var currentTime = Number(e.target.value);
+    setTrackProgress(currentTime);
+    onChangeAudioCurrentTime(currentTime);
+  };
+
+  var handleScrubEndProgress = function handleScrubEndProgress() {
+    if (!isPlaying) {
+      onPLay();
+    }
+
+    handleStartTimer();
+  };
+
+  _react["default"].useEffect(function () {
+    var _a;
+
+    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();
+    }
+
+    if (isPause) {
+      intervalId.current && clearInterval(intervalId.current);
+    }
+  }, [handleStartTimer, isPause, isPlaying]);
+
+  _react["default"].useEffect(function () {
+    return function () {
+      intervalId.current && clearInterval(intervalId.current);
+    };
+  }, []);
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('info')
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: cn('title')
+  }, audioTitle), /*#__PURE__*/_react["default"].createElement("span", {
+    className: cn('value')
+  }, (0, _timerFormatUtil["default"])(progressValue))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('range-wrapper')
+  }, /*#__PURE__*/_react["default"].createElement(_AudioRange["default"], {
+    className: cn('range'),
+    maxValue: trackDuration,
+    value: trackProgress,
+    step: "1",
+    colorPercent: progressColorPercent || 0,
+    onChange: handleScrubProgress,
+    onMouseUp: handleScrubEndProgress,
+    onTouchEnd: handleScrubEndProgress
+  })));
+};
+
+var _default = AudioProgress;
+exports["default"] = _default;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './style/AudioRange.less';
+export interface IAudioRangeProps {
+    className?: string;
+    maxValue: number | string;
+    value: number;
+    step: string;
+    colorPercent: number;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onMouseUp?: () => void;
+    onTouchEnd?: () => void;
+}
+declare const AudioRange: React.FC<IAudioRangeProps>;
+export default AudioRange;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-audio-range');
+
+var AudioRange = function AudioRange(_ref) {
+  var className = _ref.className,
+      maxValue = _ref.maxValue,
+      value = _ref.value,
+      step = _ref.step,
+      colorPercent = _ref.colorPercent,
+      onChange = _ref.onChange,
+      onMouseUp = _ref.onMouseUp,
+      onTouchEnd = _ref.onTouchEnd;
+  return /*#__PURE__*/_react["default"].createElement("input", {
+    className: cn([className]),
+    style: {
+      backgroundSize: "".concat(colorPercent, "% 100%")
+    },
+    type: "range",
+    min: "0",
+    max: maxValue,
+    step: step,
+    value: value,
+    onChange: onChange,
+    onMouseUp: onMouseUp,
+    onTouchEnd: onTouchEnd
+  });
+};
+
+var _default = AudioRange;
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("core-js/modules/es.number.constructor");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _AudioRange = _interopRequireDefault(require("./AudioRange"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var NoVolumeIcon = function NoVolumeIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M14 20.15c0 .322.299.56.606.467a9.004 9.004 0 004.96-13.493l-1.525 1.34a7.002 7.002 0 01-3.687 10.13.525.525 0 00-.354.488v1.069z"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M16.094 10.174c.261.56.406 1.177.406 1.826 0 1.426-.7 2.701-1.8 3.548-.3.23-.7-.004-.7-.382v-3.152l2.094-1.84zm-1.225-1.586L14 9.35v-.517c0-.378.4-.613.7-.382.058.044.114.09.169.136zm1.923-1.69a6.998 6.998 0 00-2.438-1.491.525.525 0 01-.354-.489V3.849c0-.32.299-.559.606-.466a8.994 8.994 0 013.694 2.19l-1.508 1.325zM12 11.108V5.36a.5.5 0 00-.342-.474l-.822-.274a.5.5 0 00-.553.167L7.15 8.807A.5.5 0 016.756 9H3.707a.5.5 0 00-.353.146l-.207.208A.5.5 0 003 9.707v4.586a.5.5 0 00.147.353l.207.208a.5.5 0 00.353.146h3.049a.5.5 0 01.394.193l.082.105L12 11.108zM8.462 16.88l1.82 2.34a.5.5 0 00.554.168l.822-.274A.5.5 0 0012 18.64v-4.87l-3.538 3.11zm-5.488 3.563a.5.5 0 01.046-.705L21.497 3.503a.5.5 0 11.66.751L3.68 20.49a.5.5 0 01-.706-.046z"
+  }));
+};
+
+var VolumeIcon = function VolumeIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M14 20.15c0 .322.299.56.606.467a9.004 9.004 0 000-17.234.475.475 0 00-.606.466v1.069c0 .221.146.414.354.489a7.002 7.002 0 010 13.186.525.525 0 00-.354.489v1.069zM3.146 14.646A.5.5 0 013 14.293V9.707a.5.5 0 01.146-.353l.208-.208A.5.5 0 013.707 9h3.048a.5.5 0 00.395-.193l3.133-4.028a.5.5 0 01.553-.167l.822.274A.5.5 0 0112 5.36v13.28a.5.5 0 01-.342.474l-.822.274a.5.5 0 01-.553-.167L7.15 15.193A.5.5 0 006.755 15H3.707a.5.5 0 01-.353-.146l-.208-.208z"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M16.5 12c0 1.426-.7 2.701-1.8 3.548-.3.23-.7-.004-.7-.382V8.834c0-.378.4-.613.7-.382 1.1.847 1.8 2.122 1.8 3.548z"
+  }));
+};
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-audio-volume');
+
+var AudioVolume = function AudioVolume(_ref) {
+  var onChangeAudioVolume = _ref.onChangeAudioVolume;
+
+  var tooltipTrigger = _react["default"].useRef(null);
+
+  var _React$useState = _react["default"].useState(0.3),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      trackVolume = _React$useState2[0],
+      setTrackVolume = _React$useState2[1];
+
+  var volumeColorPercent = _react["default"].useMemo(function () {
+    return trackVolume * 100;
+  }, [trackVolume]);
+
+  var handleScrubVolume = function handleScrubVolume(e) {
+    var currentVolume = Number(e.target.value);
+    setTrackVolume(currentVolume);
+    onChangeAudioVolume(currentVolume);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('icon-area'),
+    ref: tooltipTrigger
+  }, /*#__PURE__*/_react["default"].createElement(VolumeIcon, {
+    className: cn('icon', {
+      visible: !!trackVolume
+    })
+  }), /*#__PURE__*/_react["default"].createElement(NoVolumeIcon, {
+    className: cn('icon', {
+      visible: !trackVolume
+    })
+  })), /*#__PURE__*/_react["default"].createElement(_uiCore.Tooltip, {
+    classes: {
+      content: "".concat(cn('tooltip-content')),
+      contentShadow: "".concat(cn('tooltip-content-shadow'))
+    },
+    triggerElement: tooltipTrigger,
+    triggerEvent: "click",
+    placement: "top",
+    paddings: "none"
+  }, /*#__PURE__*/_react["default"].createElement(_AudioRange["default"], {
+    className: cn('range'),
+    maxValue: "1",
+    value: trackVolume,
+    step: "0.01",
+    colorPercent: volumeColorPercent || 0,
+    onChange: handleScrubVolume
+  })));
+};
+
+var _default = AudioVolume;
+exports["default"] = _default;

package/dist/lib/components/AudioPlayer/style/AudioPlayer.css

@@ -0,0 +1,58 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-audio-player {
+  margin-top: 32px;
+}
+.mfui-audio-player__player {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--spbSky0);
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-audio-player__player {
+    max-width: 530px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-audio-player__player {
+    max-width: 550px;
+  }
+}
+.mfui-audio-player__playing-controls {
+  margin-right: 16px;
+}
+.mfui-audio-player_position_center .mfui-audio-player__player {
+  margin: 0 auto;
+}
+.mfui-audio-player_position_left .mfui-audio-player__player {
+  margin-right: auto;
+}
+.mfui-audio-player_position_right .mfui-audio-player__player {
+  margin-left: auto;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-audio-player_full-width .mfui-audio-player__player {
+    max-width: 100%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-audio-player_full-width .mfui-audio-player__player {
+    max-width: 100%;
+  }
+}