@megafon/ui-shared 6.0.0-beta.5 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4043 -0
- package/dist/es/components/AccordionBox/AccordionBox.css +15 -1
- package/dist/es/components/AccordionBox/AccordionBox.d.ts +2 -2
- package/dist/es/components/AccordionBox/AccordionBox.js +49 -6
- package/dist/es/components/AudioPlayer/AudioPlayer.d.ts +2 -2
- package/dist/es/components/AudioPlayer/AudioPlayer.js +27 -11
- package/dist/es/components/AudioPlayer/AudioProgress.d.ts +1 -1
- package/dist/es/components/AudioPlayer/AudioProgress.js +22 -10
- package/dist/es/components/AudioPlayer/AudioRange.d.ts +1 -1
- package/dist/es/components/AudioPlayer/AudioRange.js +10 -8
- package/dist/es/components/AudioPlayer/AudioVolume.d.ts +1 -1
- package/dist/es/components/AudioPlayer/AudioVolume.js +12 -3
- package/dist/es/components/AudioPlayer/hooks/useTrackDuration.js +10 -4
- package/dist/es/components/AudioPlayer/style/AudioPlayer.css +58 -1
- package/dist/es/components/AudioPlayer/style/AudioProgress.css +35 -1
- package/dist/es/components/AudioPlayer/style/AudioRange.css +68 -1
- package/dist/es/components/AudioPlayer/style/AudioVolume.css +34 -1
- package/dist/es/components/AudioPlayer/timerFormatUtil.js +9 -1
- package/dist/es/components/BannerBox/BannerBox.d.ts +1 -1
- package/dist/es/components/BannerBox/BannerBox.js +12 -3
- package/dist/es/components/BenefitsIcons/BenefitsIcons.d.ts +1 -1
- package/dist/es/components/BenefitsIcons/BenefitsIcons.js +64 -23
- package/dist/es/components/BenefitsIcons/BenefitsIconsTile.d.ts +1 -1
- package/dist/es/components/BenefitsIcons/BenefitsIconsTile.js +36 -9
- package/dist/es/components/BenefitsIcons/helpers.d.ts +3 -3
- package/dist/es/components/BenefitsIcons/helpers.js +20 -6
- package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css +38 -1
- package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css +90 -1
- package/dist/es/components/BenefitsIcons/types.d.ts +5 -5
- package/dist/es/components/BenefitsPictures/BenefitsPictures.d.ts +1 -1
- package/dist/es/components/BenefitsPictures/BenefitsPictures.js +49 -19
- package/dist/es/components/BenefitsPictures/BenfitsPictures.css +43 -1
- package/dist/es/components/BenefitsPictures/helpers.d.ts +2 -2
- package/dist/es/components/BenefitsPictures/helpers.js +14 -0
- package/dist/es/components/BenefitsPictures/types.d.ts +3 -3
- package/dist/es/components/BenefitsPictures/types.js +0 -1
- package/dist/es/components/BlogBox/BlogBox.css +92 -0
- package/dist/es/components/BlogBox/BlogBox.d.ts +28 -0
- package/dist/es/components/BlogBox/BlogBox.js +101 -0
- package/dist/es/components/BlogBox/components/BlogBoxTile.css +197 -0
- package/dist/es/components/BlogBox/components/BlogBoxTile.d.ts +9 -0
- package/dist/es/components/BlogBox/components/BlogBoxTile.js +67 -0
- package/dist/es/components/BlogBox/types.d.ts +37 -0
- package/dist/es/components/BlogBox/types.js +0 -0
- package/dist/es/components/Breadcrumbs/Breadcrumbs.css +43 -1
- package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +6 -6
- package/dist/es/components/Breadcrumbs/Breadcrumbs.js +39 -10
- package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.css +16 -1
- package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.d.ts +4 -4
- package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.js +36 -11
- package/dist/es/components/ButtonBanner/ButtonBanner.css +122 -1
- package/dist/es/components/ButtonBanner/ButtonBanner.d.ts +7 -7
- package/dist/es/components/ButtonBanner/ButtonBanner.js +53 -22
- package/dist/es/components/ButtonLinkBox/ButtonLinkBox.css +19 -1
- package/dist/es/components/ButtonLinkBox/ButtonLinkBox.d.ts +3 -3
- package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js +51 -20
- package/dist/es/components/Card/Card.css +354 -1
- package/dist/es/components/Card/Card.d.ts +4 -4
- package/dist/es/components/Card/Card.js +115 -25
- package/dist/es/components/Card/types.d.ts +10 -10
- package/dist/es/components/Card/types.js +0 -1
- package/dist/es/components/CardsBox/CardsBox.js +14 -3
- package/dist/es/components/CardsBox/helpers.d.ts +2 -2
- package/dist/es/components/CardsBox/helpers.js +4 -0
- package/dist/es/components/CarouselBox/CarouselBox.d.ts +2 -2
- package/dist/es/components/CarouselBox/CarouselBox.js +24 -11
- package/dist/es/components/Container/Container.css +3287 -1
- package/dist/es/components/Container/Container.d.ts +5 -7
- package/dist/es/components/Container/Container.js +25 -10
- package/dist/es/components/DownloadLinks/DownloadLink.css +37 -1
- package/dist/es/components/DownloadLinks/DownloadLink.d.ts +1 -1
- package/dist/es/components/DownloadLinks/DownloadLink.js +44 -13
- package/dist/es/components/DownloadLinks/DownloadLinks.css +36 -1
- package/dist/es/components/DownloadLinks/DownloadLinks.d.ts +3 -3
- package/dist/es/components/DownloadLinks/DownloadLinks.js +13 -2
- package/dist/es/components/FaqWrapper/FaqWrapper.d.ts +2 -5
- package/dist/es/components/FaqWrapper/FaqWrapper.js +3 -1
- package/dist/es/components/ImageBanner/ImageBanner.css +252 -1
- package/dist/es/components/ImageBanner/ImageBanner.d.ts +7 -8
- package/dist/es/components/ImageBanner/ImageBanner.js +88 -37
- package/dist/es/components/Instructions/Instructions.css +827 -1
- package/dist/es/components/Instructions/Instructions.d.ts +13 -11
- package/dist/es/components/Instructions/Instructions.js +101 -44
- package/dist/es/components/NotificationBox/NotificationBox.d.ts +4 -4
- package/dist/es/components/NotificationBox/NotificationBox.js +19 -5
- package/dist/es/components/NotificationBox/style/NotificationBox.css +28 -0
- package/dist/es/components/PageTitle/PageTitle.css +80 -1
- package/dist/es/components/PageTitle/PageTitle.d.ts +2 -2
- package/dist/es/components/PageTitle/PageTitle.js +37 -12
- package/dist/es/components/Partners/Partners.css +53 -1
- package/dist/es/components/Partners/Partners.d.ts +2 -2
- package/dist/es/components/Partners/Partners.js +48 -17
- package/dist/es/components/PictureWithDescription/PictureWithDescription.css +80 -1
- package/dist/es/components/PictureWithDescription/PictureWithDescription.d.ts +2 -4
- package/dist/es/components/PictureWithDescription/PictureWithDescription.js +28 -10
- package/dist/es/components/Property/Property.css +156 -1
- package/dist/es/components/Property/Property.d.ts +4 -4
- package/dist/es/components/Property/Property.js +81 -37
- package/dist/es/components/Property/PropertyDescription.css +17 -1
- package/dist/es/components/Property/PropertyDescription.d.ts +3 -3
- package/dist/es/components/Property/PropertyDescription.js +28 -8
- package/dist/es/components/Property/types.d.ts +5 -7
- package/dist/es/components/Property/types.js +0 -1
- package/dist/es/components/Steps/Steps.css +41 -1
- package/dist/es/components/Steps/Steps.d.ts +1 -2
- package/dist/es/components/Steps/Steps.js +19 -4
- package/dist/es/components/Steps/StepsItem.css +42 -1
- package/dist/es/components/Steps/StepsItem.d.ts +2 -2
- package/dist/es/components/Steps/StepsItem.js +9 -2
- package/dist/es/components/StoreBanner/StoreBanner.css +346 -1
- package/dist/es/components/StoreBanner/StoreBanner.d.ts +5 -5
- package/dist/es/components/StoreBanner/StoreBanner.js +97 -41
- package/dist/es/components/StoreBanner/doc/img/android-screen.png +0 -0
- package/dist/es/components/StoreBanner/doc/img/qr-code.png +0 -0
- package/dist/es/components/StoreBanner/doc/img/screen.png +0 -0
- package/dist/es/components/StoreButton/StoreButton.css +327 -1
- package/dist/es/components/StoreButton/StoreButton.d.ts +3 -3
- package/dist/es/components/StoreButton/StoreButton.js +44 -13
- package/dist/es/components/Table/Table.css +157 -1
- package/dist/es/components/Table/Table.d.ts +1 -1
- package/dist/es/components/Table/Table.js +51 -31
- package/dist/es/components/Table/TableCell.js +6 -0
- package/dist/es/components/Table/TableRow.js +10 -1
- package/dist/es/components/TabsBox/TabsBox.d.ts +1 -1
- package/dist/es/components/TabsBox/TabsBox.js +13 -4
- package/dist/es/components/TextBox/TextBox.css +25 -1
- package/dist/es/components/TextBox/TextBox.d.ts +1 -2
- package/dist/es/components/TextBox/TextBox.js +23 -8
- package/dist/es/components/TextBox/TextBoxPicture.css +27 -1
- package/dist/es/components/TextBox/TextBoxPicture.d.ts +2 -2
- package/dist/es/components/TextBox/TextBoxPicture.js +14 -5
- package/dist/es/components/TextWithIcon/TextWithIcon.css +10 -1
- package/dist/es/components/TextWithIcon/TextWithIcon.d.ts +1 -1
- package/dist/es/components/TextWithIcon/TextWithIcon.js +24 -6
- package/dist/es/components/TextWithIcon/TextWithIconItem.css +29 -1
- package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +1 -1
- package/dist/es/components/TextWithIcon/TextWithIconItem.js +21 -6
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css +31 -1
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +1 -1
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js +23 -6
- package/dist/es/components/VideoBanner/VideoBanner.css +225 -1
- package/dist/es/components/VideoBanner/VideoBanner.d.ts +7 -7
- package/dist/es/components/VideoBanner/VideoBanner.js +110 -47
- package/dist/es/components/VideoBlock/VideoBlock.css +106 -1
- package/dist/es/components/VideoBlock/VideoBlock.d.ts +4 -4
- package/dist/es/components/VideoBlock/VideoBlock.js +75 -35
- package/dist/es/helpers/getColumnConfig.d.ts +1 -5
- package/dist/es/helpers/setRelAttribute.d.ts +1 -0
- package/dist/es/helpers/setRelAttribute.js +11 -0
- package/dist/es/hooks/useResolutions.d.ts +7 -0
- package/dist/es/hooks/useResolutions.js +60 -0
- package/dist/es/index.d.ts +2 -0
- package/dist/es/index.js +2 -0
- package/dist/lib/components/AccordionBox/AccordionBox.css +15 -1
- package/dist/lib/components/AccordionBox/AccordionBox.d.ts +2 -2
- package/dist/lib/components/AccordionBox/AccordionBox.js +66 -10
- package/dist/lib/components/AudioPlayer/AudioPlayer.d.ts +2 -2
- package/dist/lib/components/AudioPlayer/AudioPlayer.js +56 -32
- package/dist/lib/components/AudioPlayer/AudioProgress.d.ts +1 -1
- package/dist/lib/components/AudioPlayer/AudioProgress.js +43 -12
- package/dist/lib/components/AudioPlayer/AudioRange.d.ts +1 -1
- package/dist/lib/components/AudioPlayer/AudioRange.js +17 -9
- package/dist/lib/components/AudioPlayer/AudioVolume.d.ts +1 -1
- package/dist/lib/components/AudioPlayer/AudioVolume.js +23 -4
- package/dist/lib/components/AudioPlayer/hooks/useTrackDuration.js +16 -5
- package/dist/lib/components/AudioPlayer/style/AudioPlayer.css +58 -1
- package/dist/lib/components/AudioPlayer/style/AudioProgress.css +35 -1
- package/dist/lib/components/AudioPlayer/style/AudioRange.css +68 -1
- package/dist/lib/components/AudioPlayer/style/AudioVolume.css +34 -1
- package/dist/lib/components/AudioPlayer/timerFormatUtil.js +13 -2
- package/dist/lib/components/BannerBox/BannerBox.d.ts +1 -1
- package/dist/lib/components/BannerBox/BannerBox.js +25 -7
- package/dist/lib/components/BenefitsIcons/BenefitsIcons.d.ts +1 -1
- package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +86 -26
- package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.d.ts +1 -1
- package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.js +53 -13
- package/dist/lib/components/BenefitsIcons/helpers.d.ts +3 -3
- package/dist/lib/components/BenefitsIcons/helpers.js +37 -10
- package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css +38 -1
- package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css +90 -1
- package/dist/lib/components/BenefitsIcons/types.d.ts +5 -5
- package/dist/lib/components/BenefitsIcons/types.js +8 -5
- package/dist/lib/components/BenefitsPictures/BenefitsPictures.d.ts +1 -1
- package/dist/lib/components/BenefitsPictures/BenefitsPictures.js +71 -24
- package/dist/lib/components/BenefitsPictures/BenfitsPictures.css +43 -1
- package/dist/lib/components/BenefitsPictures/helpers.d.ts +2 -2
- package/dist/lib/components/BenefitsPictures/helpers.js +40 -9
- package/dist/lib/components/BenefitsPictures/types.d.ts +3 -3
- package/dist/lib/components/BenefitsPictures/types.js +1 -5
- package/dist/lib/components/BlogBox/BlogBox.css +92 -0
- package/dist/lib/components/BlogBox/BlogBox.d.ts +28 -0
- package/dist/lib/components/BlogBox/BlogBox.js +120 -0
- package/dist/lib/components/BlogBox/components/BlogBoxTile.css +197 -0
- package/dist/lib/components/BlogBox/components/BlogBoxTile.d.ts +9 -0
- package/dist/lib/components/BlogBox/components/BlogBoxTile.js +80 -0
- package/dist/lib/components/BlogBox/types.d.ts +37 -0
- package/dist/lib/components/BlogBox/types.js +1 -0
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.css +43 -1
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +6 -6
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +60 -18
- package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.css +16 -1
- package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.d.ts +4 -4
- package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.js +55 -22
- package/dist/lib/components/ButtonBanner/ButtonBanner.css +122 -1
- package/dist/lib/components/ButtonBanner/ButtonBanner.d.ts +7 -7
- package/dist/lib/components/ButtonBanner/ButtonBanner.js +89 -40
- package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.css +19 -1
- package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.d.ts +3 -3
- package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js +72 -29
- package/dist/lib/components/Card/Card.css +354 -1
- package/dist/lib/components/Card/Card.d.ts +4 -4
- package/dist/lib/components/Card/Card.js +164 -67
- package/dist/lib/components/Card/types.d.ts +10 -10
- package/dist/lib/components/Card/types.js +1 -5
- package/dist/lib/components/CardsBox/CardsBox.js +31 -7
- package/dist/lib/components/CardsBox/helpers.d.ts +2 -2
- package/dist/lib/components/CardsBox/helpers.js +8 -1
- package/dist/lib/components/CarouselBox/CarouselBox.d.ts +2 -2
- package/dist/lib/components/CarouselBox/CarouselBox.js +39 -15
- package/dist/lib/components/Container/Container.css +3287 -1
- package/dist/lib/components/Container/Container.d.ts +5 -7
- package/dist/lib/components/Container/Container.js +40 -18
- package/dist/lib/components/DownloadLinks/DownloadLink.css +37 -1
- package/dist/lib/components/DownloadLinks/DownloadLink.d.ts +1 -1
- package/dist/lib/components/DownloadLinks/DownloadLink.js +60 -17
- package/dist/lib/components/DownloadLinks/DownloadLinks.css +36 -1
- package/dist/lib/components/DownloadLinks/DownloadLinks.d.ts +3 -3
- package/dist/lib/components/DownloadLinks/DownloadLinks.js +33 -8
- package/dist/lib/components/FaqWrapper/FaqWrapper.d.ts +2 -5
- package/dist/lib/components/FaqWrapper/FaqWrapper.js +9 -6
- package/dist/lib/components/ImageBanner/ImageBanner.css +252 -1
- package/dist/lib/components/ImageBanner/ImageBanner.d.ts +7 -8
- package/dist/lib/components/ImageBanner/ImageBanner.js +138 -61
- package/dist/lib/components/Instructions/Instructions.css +827 -1
- package/dist/lib/components/Instructions/Instructions.d.ts +13 -11
- package/dist/lib/components/Instructions/Instructions.js +193 -106
- package/dist/lib/components/NotificationBox/NotificationBox.d.ts +4 -4
- package/dist/lib/components/NotificationBox/NotificationBox.js +37 -9
- package/dist/lib/components/NotificationBox/style/NotificationBox.css +28 -0
- package/dist/lib/components/PageTitle/PageTitle.css +80 -1
- package/dist/lib/components/PageTitle/PageTitle.d.ts +2 -2
- package/dist/lib/components/PageTitle/PageTitle.js +52 -15
- package/dist/lib/components/Partners/Partners.css +53 -1
- package/dist/lib/components/Partners/Partners.d.ts +2 -2
- package/dist/lib/components/Partners/Partners.js +65 -21
- package/dist/lib/components/PictureWithDescription/PictureWithDescription.css +80 -1
- package/dist/lib/components/PictureWithDescription/PictureWithDescription.d.ts +2 -4
- package/dist/lib/components/PictureWithDescription/PictureWithDescription.js +46 -16
- package/dist/lib/components/Property/Property.css +156 -1
- package/dist/lib/components/Property/Property.d.ts +4 -4
- package/dist/lib/components/Property/Property.js +120 -60
- package/dist/lib/components/Property/PropertyDescription.css +17 -1
- package/dist/lib/components/Property/PropertyDescription.d.ts +3 -3
- package/dist/lib/components/Property/PropertyDescription.js +46 -15
- package/dist/lib/components/Property/types.d.ts +5 -7
- package/dist/lib/components/Property/types.js +1 -5
- package/dist/lib/components/Steps/Steps.css +41 -1
- package/dist/lib/components/Steps/Steps.d.ts +1 -2
- package/dist/lib/components/Steps/Steps.js +35 -8
- package/dist/lib/components/Steps/StepsItem.css +42 -1
- package/dist/lib/components/Steps/StepsItem.d.ts +2 -2
- package/dist/lib/components/Steps/StepsItem.js +23 -11
- package/dist/lib/components/StoreBanner/StoreBanner.css +346 -1
- package/dist/lib/components/StoreBanner/StoreBanner.d.ts +5 -5
- package/dist/lib/components/StoreBanner/StoreBanner.js +118 -47
- package/dist/lib/components/StoreBanner/doc/img/android-screen.png +0 -0
- package/dist/lib/components/StoreBanner/doc/img/qr-code.png +0 -0
- package/dist/lib/components/StoreBanner/doc/img/screen.png +0 -0
- package/dist/lib/components/StoreButton/StoreButton.css +327 -1
- package/dist/lib/components/StoreButton/StoreButton.d.ts +3 -3
- package/dist/lib/components/StoreButton/StoreButton.js +63 -17
- package/dist/lib/components/Table/Table.css +157 -1
- package/dist/lib/components/Table/Table.d.ts +1 -1
- package/dist/lib/components/Table/Table.js +68 -35
- package/dist/lib/components/Table/TableCell.js +16 -4
- package/dist/lib/components/Table/TableRow.js +19 -5
- package/dist/lib/components/TabsBox/TabBox.js +4 -1
- package/dist/lib/components/TabsBox/TabsBox.d.ts +1 -1
- package/dist/lib/components/TabsBox/TabsBox.js +26 -8
- package/dist/lib/components/TextBox/TextBox.css +25 -1
- package/dist/lib/components/TextBox/TextBox.d.ts +1 -2
- package/dist/lib/components/TextBox/TextBox.js +36 -12
- package/dist/lib/components/TextBox/TextBoxPicture.css +27 -1
- package/dist/lib/components/TextBox/TextBoxPicture.d.ts +2 -2
- package/dist/lib/components/TextBox/TextBoxPicture.js +29 -11
- package/dist/lib/components/TextWithIcon/TextWithIcon.css +10 -1
- package/dist/lib/components/TextWithIcon/TextWithIcon.d.ts +1 -1
- package/dist/lib/components/TextWithIcon/TextWithIcon.js +39 -10
- package/dist/lib/components/TextWithIcon/TextWithIconItem.css +29 -1
- package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +1 -1
- package/dist/lib/components/TextWithIcon/TextWithIconItem.js +37 -10
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css +31 -1
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +1 -1
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js +40 -10
- package/dist/lib/components/VideoBanner/VideoBanner.css +225 -1
- package/dist/lib/components/VideoBanner/VideoBanner.d.ts +7 -7
- package/dist/lib/components/VideoBanner/VideoBanner.js +176 -83
- package/dist/lib/components/VideoBlock/VideoBlock.css +106 -1
- package/dist/lib/components/VideoBlock/VideoBlock.d.ts +4 -4
- package/dist/lib/components/VideoBlock/VideoBlock.js +114 -58
- package/dist/lib/constants/throttleTime.js +3 -2
- package/dist/lib/helpers/getColumnConfig.d.ts +1 -5
- package/dist/lib/helpers/getColumnConfig.js +5 -2
- package/dist/lib/helpers/setRelAttribute.d.ts +1 -0
- package/dist/lib/helpers/setRelAttribute.js +20 -0
- package/dist/lib/hooks/useResolutions.d.ts +7 -0
- package/dist/lib/hooks/useResolutions.js +75 -0
- package/dist/lib/index.d.ts +2 -0
- package/dist/lib/index.js +73 -10
- package/package.json +92 -87
- package/dist/es/components/NotificationBox/NotificationBox.css +0 -1
- package/dist/lib/components/NotificationBox/NotificationBox.css +0 -1
@@ -1,98 +1,120 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
5
4
|
value: true
|
6
5
|
});
|
7
6
|
exports["default"] = void 0;
|
7
|
+
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
|
+
|
9
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
10
|
-
|
11
|
+
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
13
|
+
|
11
14
|
var _uiCore = require("@megafon/ui-core");
|
15
|
+
|
12
16
|
var _uiHelpers = require("@megafon/ui-helpers");
|
17
|
+
|
13
18
|
var _AudioProgress = _interopRequireDefault(require("./AudioProgress"));
|
19
|
+
|
14
20
|
var _AudioVolume = _interopRequireDefault(require("./AudioVolume"));
|
15
|
-
|
16
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
21
|
+
|
17
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
23
|
+
|
18
24
|
var IconPause = function IconPause(props) {
|
19
|
-
return /*#__PURE__*/
|
25
|
+
return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
|
20
26
|
viewBox: "0 0 32 32"
|
21
|
-
}, props), /*#__PURE__*/
|
27
|
+
}, props), /*#__PURE__*/_react["default"].createElement("path", {
|
22
28
|
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"
|
23
29
|
}));
|
24
30
|
};
|
31
|
+
|
25
32
|
var IconPlay = function IconPlay(props) {
|
26
|
-
return /*#__PURE__*/
|
33
|
+
return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
|
27
34
|
viewBox: "0 0 32 32"
|
28
|
-
}, props), /*#__PURE__*/
|
35
|
+
}, props), /*#__PURE__*/_react["default"].createElement("path", {
|
29
36
|
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"
|
30
37
|
}));
|
31
38
|
};
|
39
|
+
|
32
40
|
var cn = (0, _uiHelpers.cnCreate)('mfui-audio-player');
|
41
|
+
|
33
42
|
var AudioPlayer = function AudioPlayer(_ref) {
|
34
43
|
var audioSrc = _ref.audioSrc,
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
var
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
44
|
+
audioTitle = _ref.audioTitle,
|
45
|
+
_ref$position = _ref.position,
|
46
|
+
position = _ref$position === void 0 ? 'center' : _ref$position,
|
47
|
+
isFullWidth = _ref.isFullWidth;
|
48
|
+
|
49
|
+
var audioRef = _react["default"].useRef(null);
|
50
|
+
|
51
|
+
var _React$useState = _react["default"].useState(false),
|
52
|
+
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
53
|
+
isPlaying = _React$useState2[0],
|
54
|
+
setIsPlaying = _React$useState2[1];
|
55
|
+
|
56
|
+
var _React$useState3 = _react["default"].useState(false),
|
57
|
+
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
|
58
|
+
isPause = _React$useState4[0],
|
59
|
+
setIsPause = _React$useState4[1];
|
60
|
+
|
48
61
|
var handlePLay = function handlePLay() {
|
49
62
|
var _a;
|
63
|
+
|
50
64
|
setIsPlaying(true);
|
51
65
|
setIsPause(false);
|
52
66
|
(_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
53
67
|
};
|
68
|
+
|
54
69
|
var handlePause = function handlePause() {
|
55
70
|
var _a;
|
71
|
+
|
56
72
|
setIsPlaying(false);
|
57
73
|
setIsPause(true);
|
58
74
|
(_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
59
75
|
};
|
76
|
+
|
60
77
|
var handleChangeAudioCurrentTime = function handleChangeAudioCurrentTime(currentTime) {
|
61
78
|
if (!audioRef || !audioRef.current) {
|
62
79
|
return;
|
63
80
|
}
|
81
|
+
|
64
82
|
audioRef.current.currentTime = currentTime;
|
65
83
|
};
|
84
|
+
|
66
85
|
var handleChangeAudioVolume = function handleChangeAudioVolume(volume) {
|
67
86
|
if (!audioRef || !audioRef.current) {
|
68
87
|
return;
|
69
88
|
}
|
89
|
+
|
70
90
|
audioRef.current.volume = volume;
|
71
91
|
audioRef.current.muted = !volume;
|
72
92
|
};
|
73
|
-
|
93
|
+
|
94
|
+
var playingIconHandleClick = _react["default"].useMemo(function () {
|
74
95
|
return isPlaying ? handlePause : handlePLay;
|
75
96
|
}, [isPlaying]);
|
76
|
-
|
97
|
+
|
98
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
77
99
|
className: cn({
|
78
100
|
'full-width': isFullWidth,
|
79
101
|
position: position
|
80
102
|
}),
|
81
103
|
"data-testid": "AudioPlayer"
|
82
|
-
}, /*#__PURE__*/
|
104
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
83
105
|
className: cn('player')
|
84
|
-
}, /*#__PURE__*/
|
106
|
+
}, /*#__PURE__*/_react["default"].createElement("audio", {
|
85
107
|
className: cn('audio'),
|
86
108
|
ref: audioRef,
|
87
109
|
controls: false,
|
88
110
|
"data-testid": "AudioPlayer-audio"
|
89
|
-
}, /*#__PURE__*/
|
111
|
+
}, /*#__PURE__*/_react["default"].createElement("source", {
|
90
112
|
src: audioSrc,
|
91
113
|
type: "audio/mpeg"
|
92
|
-
})), /*#__PURE__*/
|
114
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
93
115
|
className: cn('playing-controls')
|
94
|
-
}, /*#__PURE__*/
|
95
|
-
icon: isPlaying ? /*#__PURE__*/
|
116
|
+
}, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
|
117
|
+
icon: isPlaying ? /*#__PURE__*/_react["default"].createElement(IconPause, null) : /*#__PURE__*/_react["default"].createElement(IconPlay, null),
|
96
118
|
onClick: playingIconHandleClick,
|
97
119
|
sizeAll: "small",
|
98
120
|
className: cn('button'),
|
@@ -101,7 +123,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
|
|
101
123
|
'data-testid': 'AudioPlayer-btn'
|
102
124
|
}
|
103
125
|
}
|
104
|
-
})), /*#__PURE__*/
|
126
|
+
})), /*#__PURE__*/_react["default"].createElement(_AudioProgress["default"], {
|
105
127
|
audioRef: audioRef,
|
106
128
|
audioTitle: audioTitle,
|
107
129
|
isPlaying: isPlaying,
|
@@ -109,8 +131,10 @@ var AudioPlayer = function AudioPlayer(_ref) {
|
|
109
131
|
onChangeAudioCurrentTime: handleChangeAudioCurrentTime,
|
110
132
|
onPlay: handlePLay,
|
111
133
|
onSetIsPlaying: setIsPlaying
|
112
|
-
}), /*#__PURE__*/
|
134
|
+
}), /*#__PURE__*/_react["default"].createElement(_AudioVolume["default"], {
|
113
135
|
onChangeAudioVolume: handleChangeAudioVolume
|
114
136
|
})));
|
115
137
|
};
|
116
|
-
|
138
|
+
|
139
|
+
var _default = AudioPlayer;
|
140
|
+
exports["default"] = _default;
|
@@ -4,77 +4,106 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports["default"] = exports.INTERVAL_DELAY = void 0;
|
7
|
+
|
7
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
8
|
-
|
9
|
+
|
9
10
|
require("core-js/modules/web.timers.js");
|
11
|
+
|
12
|
+
require("core-js/modules/es.number.constructor.js");
|
13
|
+
|
10
14
|
var _react = _interopRequireDefault(require("react"));
|
15
|
+
|
11
16
|
var _uiHelpers = require("@megafon/ui-helpers");
|
17
|
+
|
12
18
|
var _AudioRange = _interopRequireDefault(require("./AudioRange"));
|
19
|
+
|
13
20
|
var _useTrackDuration = _interopRequireDefault(require("./hooks/useTrackDuration"));
|
21
|
+
|
14
22
|
var _timerFormatUtil = _interopRequireDefault(require("./timerFormatUtil"));
|
23
|
+
|
15
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
16
|
-
|
25
|
+
|
26
|
+
var INTERVAL_DELAY = 1000;
|
27
|
+
exports.INTERVAL_DELAY = INTERVAL_DELAY;
|
17
28
|
var cn = (0, _uiHelpers.cnCreate)('mfui-audio-progress');
|
29
|
+
|
18
30
|
var AudioProgress = function AudioProgress(_ref) {
|
19
31
|
var audioRef = _ref.audioRef,
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
32
|
+
audioTitle = _ref.audioTitle,
|
33
|
+
isPlaying = _ref.isPlaying,
|
34
|
+
isPause = _ref.isPause,
|
35
|
+
onChangeAudioCurrentTime = _ref.onChangeAudioCurrentTime,
|
36
|
+
onPlay = _ref.onPlay,
|
37
|
+
onSetIsPlaying = _ref.onSetIsPlaying;
|
38
|
+
|
26
39
|
var intervalId = _react["default"].useRef(null);
|
40
|
+
|
27
41
|
var _React$useState = _react["default"].useState(0),
|
28
|
-
|
29
|
-
|
30
|
-
|
42
|
+
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
43
|
+
trackProgress = _React$useState2[0],
|
44
|
+
setTrackProgress = _React$useState2[1];
|
45
|
+
|
31
46
|
var trackDuration = (0, _useTrackDuration["default"])(audioRef);
|
47
|
+
|
32
48
|
var progressColorPercent = _react["default"].useMemo(function () {
|
33
49
|
return trackProgress / trackDuration * 100;
|
34
50
|
}, [trackDuration, trackProgress]);
|
51
|
+
|
35
52
|
var progressValue = _react["default"].useMemo(function () {
|
36
53
|
return isPlaying || isPause ? trackProgress : trackDuration;
|
37
54
|
}, [isPause, isPlaying, trackDuration, trackProgress]);
|
55
|
+
|
38
56
|
var handleStartTimer = _react["default"].useCallback(function () {
|
39
57
|
intervalId.current && clearInterval(intervalId.current);
|
40
58
|
intervalId.current = setInterval(function () {
|
41
59
|
var _a, _b, _c;
|
60
|
+
|
42
61
|
if ((_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.ended) {
|
43
62
|
onSetIsPlaying === null || onSetIsPlaying === void 0 ? void 0 : onSetIsPlaying(false);
|
44
63
|
setTrackProgress(Math.floor(((_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.duration) || 0));
|
45
64
|
return;
|
46
65
|
}
|
66
|
+
|
47
67
|
setTrackProgress(Math.floor(((_c = audioRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) || 0));
|
48
68
|
}, INTERVAL_DELAY);
|
49
69
|
}, [audioRef, onSetIsPlaying]);
|
70
|
+
|
50
71
|
var handleScrubProgress = function handleScrubProgress(e) {
|
51
72
|
var currentTime = Number(e.target.value);
|
52
73
|
setTrackProgress(currentTime);
|
53
74
|
onChangeAudioCurrentTime === null || onChangeAudioCurrentTime === void 0 ? void 0 : onChangeAudioCurrentTime(currentTime);
|
54
75
|
};
|
76
|
+
|
55
77
|
var handleScrubEndProgress = function handleScrubEndProgress() {
|
56
78
|
if (!isPlaying) {
|
57
79
|
onPlay === null || onPlay === void 0 ? void 0 : onPlay();
|
58
80
|
}
|
81
|
+
|
59
82
|
handleStartTimer();
|
60
83
|
};
|
84
|
+
|
61
85
|
_react["default"].useEffect(function () {
|
62
86
|
var _a;
|
87
|
+
|
63
88
|
setTrackProgress(Math.floor(((_a = audioRef === null || audioRef === void 0 ? void 0 : audioRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) || 0));
|
64
89
|
}, [audioRef]);
|
90
|
+
|
65
91
|
_react["default"].useEffect(function () {
|
66
92
|
if (isPlaying) {
|
67
93
|
handleStartTimer();
|
68
94
|
}
|
95
|
+
|
69
96
|
if (isPause) {
|
70
97
|
intervalId.current && clearInterval(intervalId.current);
|
71
98
|
}
|
72
99
|
}, [handleStartTimer, isPause, isPlaying]);
|
100
|
+
|
73
101
|
_react["default"].useEffect(function () {
|
74
102
|
return function () {
|
75
103
|
intervalId.current && clearInterval(intervalId.current);
|
76
104
|
};
|
77
105
|
}, []);
|
106
|
+
|
78
107
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
79
108
|
className: cn()
|
80
109
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
@@ -99,4 +128,6 @@ var AudioProgress = function AudioProgress(_ref) {
|
|
99
128
|
}
|
100
129
|
})));
|
101
130
|
};
|
102
|
-
|
131
|
+
|
132
|
+
var _default = AudioProgress;
|
133
|
+
exports["default"] = _default;
|
@@ -4,21 +4,27 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports["default"] = void 0;
|
7
|
+
|
7
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
|
+
|
8
10
|
var _react = _interopRequireDefault(require("react"));
|
11
|
+
|
9
12
|
var _uiHelpers = require("@megafon/ui-helpers");
|
13
|
+
|
10
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
15
|
+
|
11
16
|
var cn = (0, _uiHelpers.cnCreate)('mfui-audio-range');
|
17
|
+
|
12
18
|
var AudioRange = function AudioRange(_ref) {
|
13
19
|
var className = _ref.className,
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
20
|
+
maxValue = _ref.maxValue,
|
21
|
+
value = _ref.value,
|
22
|
+
step = _ref.step,
|
23
|
+
colorPercent = _ref.colorPercent,
|
24
|
+
onChange = _ref.onChange,
|
25
|
+
onMouseUp = _ref.onMouseUp,
|
26
|
+
onTouchEnd = _ref.onTouchEnd,
|
27
|
+
dataAttrs = _ref.dataAttrs;
|
22
28
|
return /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
|
23
29
|
className: cn([className]),
|
24
30
|
style: {
|
@@ -34,4 +40,6 @@ var AudioRange = function AudioRange(_ref) {
|
|
34
40
|
onTouchEnd: onTouchEnd
|
35
41
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs)));
|
36
42
|
};
|
37
|
-
|
43
|
+
|
44
|
+
var _default = AudioRange;
|
45
|
+
exports["default"] = _default;
|
@@ -4,14 +4,23 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports["default"] = void 0;
|
7
|
+
|
7
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
|
+
|
8
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
|
+
|
9
12
|
require("core-js/modules/es.number.constructor.js");
|
13
|
+
|
10
14
|
var _react = _interopRequireDefault(require("react"));
|
15
|
+
|
11
16
|
var _uiCore = require("@megafon/ui-core");
|
17
|
+
|
12
18
|
var _uiHelpers = require("@megafon/ui-helpers");
|
19
|
+
|
13
20
|
var _AudioRange = _interopRequireDefault(require("./AudioRange"));
|
21
|
+
|
14
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
23
|
+
|
15
24
|
var NoVolumeIcon = function NoVolumeIcon(props) {
|
16
25
|
return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
|
17
26
|
viewBox: "0 0 24 24"
|
@@ -21,6 +30,7 @@ var NoVolumeIcon = function NoVolumeIcon(props) {
|
|
21
30
|
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"
|
22
31
|
}));
|
23
32
|
};
|
33
|
+
|
24
34
|
var VolumeIcon = function VolumeIcon(props) {
|
25
35
|
return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
|
26
36
|
viewBox: "0 0 24 24"
|
@@ -30,22 +40,29 @@ var VolumeIcon = function VolumeIcon(props) {
|
|
30
40
|
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"
|
31
41
|
}));
|
32
42
|
};
|
43
|
+
|
33
44
|
var cn = (0, _uiHelpers.cnCreate)('mfui-audio-volume');
|
45
|
+
|
34
46
|
var AudioVolume = function AudioVolume(_ref) {
|
35
47
|
var onChangeAudioVolume = _ref.onChangeAudioVolume;
|
48
|
+
|
36
49
|
var tooltipTrigger = _react["default"].useRef(null);
|
50
|
+
|
37
51
|
var _React$useState = _react["default"].useState(0.3),
|
38
|
-
|
39
|
-
|
40
|
-
|
52
|
+
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
53
|
+
trackVolume = _React$useState2[0],
|
54
|
+
setTrackVolume = _React$useState2[1];
|
55
|
+
|
41
56
|
var volumeColorPercent = _react["default"].useMemo(function () {
|
42
57
|
return trackVolume * 100;
|
43
58
|
}, [trackVolume]);
|
59
|
+
|
44
60
|
var handleScrubVolume = function handleScrubVolume(e) {
|
45
61
|
var currentVolume = Number(e.target.value);
|
46
62
|
setTrackVolume(currentVolume);
|
47
63
|
onChangeAudioVolume === null || onChangeAudioVolume === void 0 ? void 0 : onChangeAudioVolume(currentVolume);
|
48
64
|
};
|
65
|
+
|
49
66
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
50
67
|
className: cn()
|
51
68
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
@@ -80,4 +97,6 @@ var AudioVolume = function AudioVolume(_ref) {
|
|
80
97
|
}
|
81
98
|
})));
|
82
99
|
};
|
83
|
-
|
100
|
+
|
101
|
+
var _default = AudioVolume;
|
102
|
+
exports["default"] = _default;
|
@@ -4,21 +4,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports["default"] = void 0;
|
7
|
+
|
7
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
|
+
|
8
10
|
var _react = _interopRequireDefault(require("react"));
|
11
|
+
|
9
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
13
|
+
|
10
14
|
var useTrackDuration = function useTrackDuration(audioRef) {
|
11
15
|
var _React$useState = _react["default"].useState(0),
|
12
|
-
|
13
|
-
|
14
|
-
|
16
|
+
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
17
|
+
trackDuration = _React$useState2[0],
|
18
|
+
setTrackDuration = _React$useState2[1];
|
19
|
+
|
15
20
|
_react["default"].useEffect(function () {
|
16
21
|
var audioNode = audioRef.current;
|
22
|
+
|
17
23
|
if (!audioNode) {
|
18
24
|
return;
|
19
25
|
}
|
26
|
+
|
20
27
|
var readyState = audioNode.readyState,
|
21
|
-
|
28
|
+
duration = audioNode.duration;
|
29
|
+
|
22
30
|
if (readyState > 0) {
|
23
31
|
setTrackDuration(Math.round(duration));
|
24
32
|
} else {
|
@@ -28,6 +36,9 @@ var useTrackDuration = function useTrackDuration(audioRef) {
|
|
28
36
|
};
|
29
37
|
}
|
30
38
|
}, [audioRef]);
|
39
|
+
|
31
40
|
return trackDuration;
|
32
41
|
};
|
33
|
-
|
42
|
+
|
43
|
+
var _default = useTrackDuration;
|
44
|
+
exports["default"] = _default;
|
@@ -1 +1,58 @@
|
|
1
|
-
h1,
|
1
|
+
h1,
|
2
|
+
h2,
|
3
|
+
h3,
|
4
|
+
h4,
|
5
|
+
h5 {
|
6
|
+
margin: 0;
|
7
|
+
}
|
8
|
+
.mfui-audio-player {
|
9
|
+
margin-top: 24px;
|
10
|
+
}
|
11
|
+
.mfui-audio-player__player {
|
12
|
+
display: -webkit-box;
|
13
|
+
display: -ms-flexbox;
|
14
|
+
display: flex;
|
15
|
+
-webkit-box-align: center;
|
16
|
+
-ms-flex-align: center;
|
17
|
+
align-items: center;
|
18
|
+
-webkit-box-pack: justify;
|
19
|
+
-ms-flex-pack: justify;
|
20
|
+
justify-content: space-between;
|
21
|
+
-webkit-box-sizing: border-box;
|
22
|
+
box-sizing: border-box;
|
23
|
+
padding: 16px;
|
24
|
+
border-radius: 12px;
|
25
|
+
background: var(--spbSky0);
|
26
|
+
}
|
27
|
+
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
28
|
+
.mfui-audio-player__player {
|
29
|
+
max-width: 530px;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
@media screen and (min-width: 1024px) {
|
33
|
+
.mfui-audio-player__player {
|
34
|
+
max-width: 550px;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
.mfui-audio-player__playing-controls {
|
38
|
+
margin-right: 16px;
|
39
|
+
}
|
40
|
+
.mfui-audio-player_position_center .mfui-audio-player__player {
|
41
|
+
margin: 0 auto;
|
42
|
+
}
|
43
|
+
.mfui-audio-player_position_left .mfui-audio-player__player {
|
44
|
+
margin-right: auto;
|
45
|
+
}
|
46
|
+
.mfui-audio-player_position_right .mfui-audio-player__player {
|
47
|
+
margin-left: auto;
|
48
|
+
}
|
49
|
+
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
50
|
+
.mfui-audio-player_full-width .mfui-audio-player__player {
|
51
|
+
max-width: 100%;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
@media screen and (min-width: 1024px) {
|
55
|
+
.mfui-audio-player_full-width .mfui-audio-player__player {
|
56
|
+
max-width: 100%;
|
57
|
+
}
|
58
|
+
}
|
@@ -1 +1,35 @@
|
|
1
|
-
h1,
|
1
|
+
h1,
|
2
|
+
h2,
|
3
|
+
h3,
|
4
|
+
h4,
|
5
|
+
h5 {
|
6
|
+
margin: 0;
|
7
|
+
}
|
8
|
+
.mfui-audio-progress {
|
9
|
+
width: 100%;
|
10
|
+
margin-right: 16px;
|
11
|
+
}
|
12
|
+
.mfui-audio-progress__info {
|
13
|
+
display: -webkit-box;
|
14
|
+
display: -ms-flexbox;
|
15
|
+
display: flex;
|
16
|
+
-webkit-box-align: center;
|
17
|
+
-ms-flex-align: center;
|
18
|
+
align-items: center;
|
19
|
+
-webkit-box-pack: justify;
|
20
|
+
-ms-flex-pack: justify;
|
21
|
+
justify-content: space-between;
|
22
|
+
}
|
23
|
+
.mfui-audio-progress__value {
|
24
|
+
color: var(-spbSky3);
|
25
|
+
font-size: 12px;
|
26
|
+
line-height: 18px;
|
27
|
+
}
|
28
|
+
.mfui-audio-progress__range-wrapper {
|
29
|
+
margin-top: -2px;
|
30
|
+
}
|
31
|
+
.mfui-audio-progress__title {
|
32
|
+
color: var(--stcBlack);
|
33
|
+
font-size: 12px;
|
34
|
+
line-height: 18px;
|
35
|
+
}
|
@@ -1 +1,68 @@
|
|
1
|
-
h1,
|
1
|
+
h1,
|
2
|
+
h2,
|
3
|
+
h3,
|
4
|
+
h4,
|
5
|
+
h5 {
|
6
|
+
margin: 0;
|
7
|
+
}
|
8
|
+
.mfui-audio-range {
|
9
|
+
width: 100%;
|
10
|
+
height: 4px;
|
11
|
+
border-radius: 2px;
|
12
|
+
background: var(--spbSky2);
|
13
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(#00B956), to(#00B956));
|
14
|
+
background-image: linear-gradient(#00B956, #00B956);
|
15
|
+
background-repeat: no-repeat;
|
16
|
+
cursor: pointer;
|
17
|
+
-webkit-appearance: none;
|
18
|
+
}
|
19
|
+
.mfui-audio-range:focus {
|
20
|
+
outline: none;
|
21
|
+
}
|
22
|
+
.mfui-audio-range::-webkit-slider-thumb {
|
23
|
+
width: 16px;
|
24
|
+
height: 16px;
|
25
|
+
border: none;
|
26
|
+
border-radius: 50%;
|
27
|
+
background: var(--stcWhite);
|
28
|
+
-webkit-box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
|
29
|
+
box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
|
30
|
+
-webkit-appearance: none;
|
31
|
+
}
|
32
|
+
.mfui-audio-range::-moz-range-thumb {
|
33
|
+
width: 16px;
|
34
|
+
height: 16px;
|
35
|
+
border: none;
|
36
|
+
border-radius: 50%;
|
37
|
+
background: var(--stcWhite);
|
38
|
+
box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
|
39
|
+
-webkit-appearance: none;
|
40
|
+
}
|
41
|
+
.mfui-audio-range::-ms-thumb {
|
42
|
+
width: 16px;
|
43
|
+
height: 16px;
|
44
|
+
border: none;
|
45
|
+
border-radius: 50%;
|
46
|
+
background: var(--stcWhite);
|
47
|
+
box-shadow: 0 2px 9px rgba(0, 0, 0, 0.15);
|
48
|
+
-webkit-appearance: none;
|
49
|
+
}
|
50
|
+
.mfui-audio-range::-webkit-slider-runnable-track {
|
51
|
+
border: none;
|
52
|
+
background: transparent;
|
53
|
+
-webkit-box-shadow: none;
|
54
|
+
box-shadow: none;
|
55
|
+
-webkit-appearance: none;
|
56
|
+
}
|
57
|
+
.mfui-audio-range::-moz-range-track {
|
58
|
+
border: none;
|
59
|
+
background: transparent;
|
60
|
+
box-shadow: none;
|
61
|
+
-webkit-appearance: none;
|
62
|
+
}
|
63
|
+
.mfui-audio-range::-ms-track {
|
64
|
+
border: none;
|
65
|
+
background: transparent;
|
66
|
+
box-shadow: none;
|
67
|
+
-webkit-appearance: none;
|
68
|
+
}
|