@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.
Files changed (312) hide show
  1. package/CHANGELOG.md +4043 -0
  2. package/dist/es/components/AccordionBox/AccordionBox.css +15 -1
  3. package/dist/es/components/AccordionBox/AccordionBox.d.ts +2 -2
  4. package/dist/es/components/AccordionBox/AccordionBox.js +49 -6
  5. package/dist/es/components/AudioPlayer/AudioPlayer.d.ts +2 -2
  6. package/dist/es/components/AudioPlayer/AudioPlayer.js +27 -11
  7. package/dist/es/components/AudioPlayer/AudioProgress.d.ts +1 -1
  8. package/dist/es/components/AudioPlayer/AudioProgress.js +22 -10
  9. package/dist/es/components/AudioPlayer/AudioRange.d.ts +1 -1
  10. package/dist/es/components/AudioPlayer/AudioRange.js +10 -8
  11. package/dist/es/components/AudioPlayer/AudioVolume.d.ts +1 -1
  12. package/dist/es/components/AudioPlayer/AudioVolume.js +12 -3
  13. package/dist/es/components/AudioPlayer/hooks/useTrackDuration.js +10 -4
  14. package/dist/es/components/AudioPlayer/style/AudioPlayer.css +58 -1
  15. package/dist/es/components/AudioPlayer/style/AudioProgress.css +35 -1
  16. package/dist/es/components/AudioPlayer/style/AudioRange.css +68 -1
  17. package/dist/es/components/AudioPlayer/style/AudioVolume.css +34 -1
  18. package/dist/es/components/AudioPlayer/timerFormatUtil.js +9 -1
  19. package/dist/es/components/BannerBox/BannerBox.d.ts +1 -1
  20. package/dist/es/components/BannerBox/BannerBox.js +12 -3
  21. package/dist/es/components/BenefitsIcons/BenefitsIcons.d.ts +1 -1
  22. package/dist/es/components/BenefitsIcons/BenefitsIcons.js +64 -23
  23. package/dist/es/components/BenefitsIcons/BenefitsIconsTile.d.ts +1 -1
  24. package/dist/es/components/BenefitsIcons/BenefitsIconsTile.js +36 -9
  25. package/dist/es/components/BenefitsIcons/helpers.d.ts +3 -3
  26. package/dist/es/components/BenefitsIcons/helpers.js +20 -6
  27. package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css +38 -1
  28. package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css +90 -1
  29. package/dist/es/components/BenefitsIcons/types.d.ts +5 -5
  30. package/dist/es/components/BenefitsPictures/BenefitsPictures.d.ts +1 -1
  31. package/dist/es/components/BenefitsPictures/BenefitsPictures.js +49 -19
  32. package/dist/es/components/BenefitsPictures/BenfitsPictures.css +43 -1
  33. package/dist/es/components/BenefitsPictures/helpers.d.ts +2 -2
  34. package/dist/es/components/BenefitsPictures/helpers.js +14 -0
  35. package/dist/es/components/BenefitsPictures/types.d.ts +3 -3
  36. package/dist/es/components/BenefitsPictures/types.js +0 -1
  37. package/dist/es/components/BlogBox/BlogBox.css +92 -0
  38. package/dist/es/components/BlogBox/BlogBox.d.ts +28 -0
  39. package/dist/es/components/BlogBox/BlogBox.js +101 -0
  40. package/dist/es/components/BlogBox/components/BlogBoxTile.css +197 -0
  41. package/dist/es/components/BlogBox/components/BlogBoxTile.d.ts +9 -0
  42. package/dist/es/components/BlogBox/components/BlogBoxTile.js +67 -0
  43. package/dist/es/components/BlogBox/types.d.ts +37 -0
  44. package/dist/es/components/BlogBox/types.js +0 -0
  45. package/dist/es/components/Breadcrumbs/Breadcrumbs.css +43 -1
  46. package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +6 -6
  47. package/dist/es/components/Breadcrumbs/Breadcrumbs.js +39 -10
  48. package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.css +16 -1
  49. package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.d.ts +4 -4
  50. package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.js +36 -11
  51. package/dist/es/components/ButtonBanner/ButtonBanner.css +122 -1
  52. package/dist/es/components/ButtonBanner/ButtonBanner.d.ts +7 -7
  53. package/dist/es/components/ButtonBanner/ButtonBanner.js +53 -22
  54. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.css +19 -1
  55. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.d.ts +3 -3
  56. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js +51 -20
  57. package/dist/es/components/Card/Card.css +354 -1
  58. package/dist/es/components/Card/Card.d.ts +4 -4
  59. package/dist/es/components/Card/Card.js +115 -25
  60. package/dist/es/components/Card/types.d.ts +10 -10
  61. package/dist/es/components/Card/types.js +0 -1
  62. package/dist/es/components/CardsBox/CardsBox.js +14 -3
  63. package/dist/es/components/CardsBox/helpers.d.ts +2 -2
  64. package/dist/es/components/CardsBox/helpers.js +4 -0
  65. package/dist/es/components/CarouselBox/CarouselBox.d.ts +2 -2
  66. package/dist/es/components/CarouselBox/CarouselBox.js +24 -11
  67. package/dist/es/components/Container/Container.css +3287 -1
  68. package/dist/es/components/Container/Container.d.ts +5 -7
  69. package/dist/es/components/Container/Container.js +25 -10
  70. package/dist/es/components/DownloadLinks/DownloadLink.css +37 -1
  71. package/dist/es/components/DownloadLinks/DownloadLink.d.ts +1 -1
  72. package/dist/es/components/DownloadLinks/DownloadLink.js +44 -13
  73. package/dist/es/components/DownloadLinks/DownloadLinks.css +36 -1
  74. package/dist/es/components/DownloadLinks/DownloadLinks.d.ts +3 -3
  75. package/dist/es/components/DownloadLinks/DownloadLinks.js +13 -2
  76. package/dist/es/components/FaqWrapper/FaqWrapper.d.ts +2 -5
  77. package/dist/es/components/FaqWrapper/FaqWrapper.js +3 -1
  78. package/dist/es/components/ImageBanner/ImageBanner.css +252 -1
  79. package/dist/es/components/ImageBanner/ImageBanner.d.ts +7 -8
  80. package/dist/es/components/ImageBanner/ImageBanner.js +88 -37
  81. package/dist/es/components/Instructions/Instructions.css +827 -1
  82. package/dist/es/components/Instructions/Instructions.d.ts +13 -11
  83. package/dist/es/components/Instructions/Instructions.js +101 -44
  84. package/dist/es/components/NotificationBox/NotificationBox.d.ts +4 -4
  85. package/dist/es/components/NotificationBox/NotificationBox.js +19 -5
  86. package/dist/es/components/NotificationBox/style/NotificationBox.css +28 -0
  87. package/dist/es/components/PageTitle/PageTitle.css +80 -1
  88. package/dist/es/components/PageTitle/PageTitle.d.ts +2 -2
  89. package/dist/es/components/PageTitle/PageTitle.js +37 -12
  90. package/dist/es/components/Partners/Partners.css +53 -1
  91. package/dist/es/components/Partners/Partners.d.ts +2 -2
  92. package/dist/es/components/Partners/Partners.js +48 -17
  93. package/dist/es/components/PictureWithDescription/PictureWithDescription.css +80 -1
  94. package/dist/es/components/PictureWithDescription/PictureWithDescription.d.ts +2 -4
  95. package/dist/es/components/PictureWithDescription/PictureWithDescription.js +28 -10
  96. package/dist/es/components/Property/Property.css +156 -1
  97. package/dist/es/components/Property/Property.d.ts +4 -4
  98. package/dist/es/components/Property/Property.js +81 -37
  99. package/dist/es/components/Property/PropertyDescription.css +17 -1
  100. package/dist/es/components/Property/PropertyDescription.d.ts +3 -3
  101. package/dist/es/components/Property/PropertyDescription.js +28 -8
  102. package/dist/es/components/Property/types.d.ts +5 -7
  103. package/dist/es/components/Property/types.js +0 -1
  104. package/dist/es/components/Steps/Steps.css +41 -1
  105. package/dist/es/components/Steps/Steps.d.ts +1 -2
  106. package/dist/es/components/Steps/Steps.js +19 -4
  107. package/dist/es/components/Steps/StepsItem.css +42 -1
  108. package/dist/es/components/Steps/StepsItem.d.ts +2 -2
  109. package/dist/es/components/Steps/StepsItem.js +9 -2
  110. package/dist/es/components/StoreBanner/StoreBanner.css +346 -1
  111. package/dist/es/components/StoreBanner/StoreBanner.d.ts +5 -5
  112. package/dist/es/components/StoreBanner/StoreBanner.js +97 -41
  113. package/dist/es/components/StoreBanner/doc/img/android-screen.png +0 -0
  114. package/dist/es/components/StoreBanner/doc/img/qr-code.png +0 -0
  115. package/dist/es/components/StoreBanner/doc/img/screen.png +0 -0
  116. package/dist/es/components/StoreButton/StoreButton.css +327 -1
  117. package/dist/es/components/StoreButton/StoreButton.d.ts +3 -3
  118. package/dist/es/components/StoreButton/StoreButton.js +44 -13
  119. package/dist/es/components/Table/Table.css +157 -1
  120. package/dist/es/components/Table/Table.d.ts +1 -1
  121. package/dist/es/components/Table/Table.js +51 -31
  122. package/dist/es/components/Table/TableCell.js +6 -0
  123. package/dist/es/components/Table/TableRow.js +10 -1
  124. package/dist/es/components/TabsBox/TabsBox.d.ts +1 -1
  125. package/dist/es/components/TabsBox/TabsBox.js +13 -4
  126. package/dist/es/components/TextBox/TextBox.css +25 -1
  127. package/dist/es/components/TextBox/TextBox.d.ts +1 -2
  128. package/dist/es/components/TextBox/TextBox.js +23 -8
  129. package/dist/es/components/TextBox/TextBoxPicture.css +27 -1
  130. package/dist/es/components/TextBox/TextBoxPicture.d.ts +2 -2
  131. package/dist/es/components/TextBox/TextBoxPicture.js +14 -5
  132. package/dist/es/components/TextWithIcon/TextWithIcon.css +10 -1
  133. package/dist/es/components/TextWithIcon/TextWithIcon.d.ts +1 -1
  134. package/dist/es/components/TextWithIcon/TextWithIcon.js +24 -6
  135. package/dist/es/components/TextWithIcon/TextWithIconItem.css +29 -1
  136. package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +1 -1
  137. package/dist/es/components/TextWithIcon/TextWithIconItem.js +21 -6
  138. package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css +31 -1
  139. package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +1 -1
  140. package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js +23 -6
  141. package/dist/es/components/VideoBanner/VideoBanner.css +225 -1
  142. package/dist/es/components/VideoBanner/VideoBanner.d.ts +7 -7
  143. package/dist/es/components/VideoBanner/VideoBanner.js +110 -47
  144. package/dist/es/components/VideoBlock/VideoBlock.css +106 -1
  145. package/dist/es/components/VideoBlock/VideoBlock.d.ts +4 -4
  146. package/dist/es/components/VideoBlock/VideoBlock.js +75 -35
  147. package/dist/es/helpers/getColumnConfig.d.ts +1 -5
  148. package/dist/es/helpers/setRelAttribute.d.ts +1 -0
  149. package/dist/es/helpers/setRelAttribute.js +11 -0
  150. package/dist/es/hooks/useResolutions.d.ts +7 -0
  151. package/dist/es/hooks/useResolutions.js +60 -0
  152. package/dist/es/index.d.ts +2 -0
  153. package/dist/es/index.js +2 -0
  154. package/dist/lib/components/AccordionBox/AccordionBox.css +15 -1
  155. package/dist/lib/components/AccordionBox/AccordionBox.d.ts +2 -2
  156. package/dist/lib/components/AccordionBox/AccordionBox.js +66 -10
  157. package/dist/lib/components/AudioPlayer/AudioPlayer.d.ts +2 -2
  158. package/dist/lib/components/AudioPlayer/AudioPlayer.js +56 -32
  159. package/dist/lib/components/AudioPlayer/AudioProgress.d.ts +1 -1
  160. package/dist/lib/components/AudioPlayer/AudioProgress.js +43 -12
  161. package/dist/lib/components/AudioPlayer/AudioRange.d.ts +1 -1
  162. package/dist/lib/components/AudioPlayer/AudioRange.js +17 -9
  163. package/dist/lib/components/AudioPlayer/AudioVolume.d.ts +1 -1
  164. package/dist/lib/components/AudioPlayer/AudioVolume.js +23 -4
  165. package/dist/lib/components/AudioPlayer/hooks/useTrackDuration.js +16 -5
  166. package/dist/lib/components/AudioPlayer/style/AudioPlayer.css +58 -1
  167. package/dist/lib/components/AudioPlayer/style/AudioProgress.css +35 -1
  168. package/dist/lib/components/AudioPlayer/style/AudioRange.css +68 -1
  169. package/dist/lib/components/AudioPlayer/style/AudioVolume.css +34 -1
  170. package/dist/lib/components/AudioPlayer/timerFormatUtil.js +13 -2
  171. package/dist/lib/components/BannerBox/BannerBox.d.ts +1 -1
  172. package/dist/lib/components/BannerBox/BannerBox.js +25 -7
  173. package/dist/lib/components/BenefitsIcons/BenefitsIcons.d.ts +1 -1
  174. package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +86 -26
  175. package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.d.ts +1 -1
  176. package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.js +53 -13
  177. package/dist/lib/components/BenefitsIcons/helpers.d.ts +3 -3
  178. package/dist/lib/components/BenefitsIcons/helpers.js +37 -10
  179. package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css +38 -1
  180. package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css +90 -1
  181. package/dist/lib/components/BenefitsIcons/types.d.ts +5 -5
  182. package/dist/lib/components/BenefitsIcons/types.js +8 -5
  183. package/dist/lib/components/BenefitsPictures/BenefitsPictures.d.ts +1 -1
  184. package/dist/lib/components/BenefitsPictures/BenefitsPictures.js +71 -24
  185. package/dist/lib/components/BenefitsPictures/BenfitsPictures.css +43 -1
  186. package/dist/lib/components/BenefitsPictures/helpers.d.ts +2 -2
  187. package/dist/lib/components/BenefitsPictures/helpers.js +40 -9
  188. package/dist/lib/components/BenefitsPictures/types.d.ts +3 -3
  189. package/dist/lib/components/BenefitsPictures/types.js +1 -5
  190. package/dist/lib/components/BlogBox/BlogBox.css +92 -0
  191. package/dist/lib/components/BlogBox/BlogBox.d.ts +28 -0
  192. package/dist/lib/components/BlogBox/BlogBox.js +120 -0
  193. package/dist/lib/components/BlogBox/components/BlogBoxTile.css +197 -0
  194. package/dist/lib/components/BlogBox/components/BlogBoxTile.d.ts +9 -0
  195. package/dist/lib/components/BlogBox/components/BlogBoxTile.js +80 -0
  196. package/dist/lib/components/BlogBox/types.d.ts +37 -0
  197. package/dist/lib/components/BlogBox/types.js +1 -0
  198. package/dist/lib/components/Breadcrumbs/Breadcrumbs.css +43 -1
  199. package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +6 -6
  200. package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +60 -18
  201. package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.css +16 -1
  202. package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.d.ts +4 -4
  203. package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.js +55 -22
  204. package/dist/lib/components/ButtonBanner/ButtonBanner.css +122 -1
  205. package/dist/lib/components/ButtonBanner/ButtonBanner.d.ts +7 -7
  206. package/dist/lib/components/ButtonBanner/ButtonBanner.js +89 -40
  207. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.css +19 -1
  208. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.d.ts +3 -3
  209. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js +72 -29
  210. package/dist/lib/components/Card/Card.css +354 -1
  211. package/dist/lib/components/Card/Card.d.ts +4 -4
  212. package/dist/lib/components/Card/Card.js +164 -67
  213. package/dist/lib/components/Card/types.d.ts +10 -10
  214. package/dist/lib/components/Card/types.js +1 -5
  215. package/dist/lib/components/CardsBox/CardsBox.js +31 -7
  216. package/dist/lib/components/CardsBox/helpers.d.ts +2 -2
  217. package/dist/lib/components/CardsBox/helpers.js +8 -1
  218. package/dist/lib/components/CarouselBox/CarouselBox.d.ts +2 -2
  219. package/dist/lib/components/CarouselBox/CarouselBox.js +39 -15
  220. package/dist/lib/components/Container/Container.css +3287 -1
  221. package/dist/lib/components/Container/Container.d.ts +5 -7
  222. package/dist/lib/components/Container/Container.js +40 -18
  223. package/dist/lib/components/DownloadLinks/DownloadLink.css +37 -1
  224. package/dist/lib/components/DownloadLinks/DownloadLink.d.ts +1 -1
  225. package/dist/lib/components/DownloadLinks/DownloadLink.js +60 -17
  226. package/dist/lib/components/DownloadLinks/DownloadLinks.css +36 -1
  227. package/dist/lib/components/DownloadLinks/DownloadLinks.d.ts +3 -3
  228. package/dist/lib/components/DownloadLinks/DownloadLinks.js +33 -8
  229. package/dist/lib/components/FaqWrapper/FaqWrapper.d.ts +2 -5
  230. package/dist/lib/components/FaqWrapper/FaqWrapper.js +9 -6
  231. package/dist/lib/components/ImageBanner/ImageBanner.css +252 -1
  232. package/dist/lib/components/ImageBanner/ImageBanner.d.ts +7 -8
  233. package/dist/lib/components/ImageBanner/ImageBanner.js +138 -61
  234. package/dist/lib/components/Instructions/Instructions.css +827 -1
  235. package/dist/lib/components/Instructions/Instructions.d.ts +13 -11
  236. package/dist/lib/components/Instructions/Instructions.js +193 -106
  237. package/dist/lib/components/NotificationBox/NotificationBox.d.ts +4 -4
  238. package/dist/lib/components/NotificationBox/NotificationBox.js +37 -9
  239. package/dist/lib/components/NotificationBox/style/NotificationBox.css +28 -0
  240. package/dist/lib/components/PageTitle/PageTitle.css +80 -1
  241. package/dist/lib/components/PageTitle/PageTitle.d.ts +2 -2
  242. package/dist/lib/components/PageTitle/PageTitle.js +52 -15
  243. package/dist/lib/components/Partners/Partners.css +53 -1
  244. package/dist/lib/components/Partners/Partners.d.ts +2 -2
  245. package/dist/lib/components/Partners/Partners.js +65 -21
  246. package/dist/lib/components/PictureWithDescription/PictureWithDescription.css +80 -1
  247. package/dist/lib/components/PictureWithDescription/PictureWithDescription.d.ts +2 -4
  248. package/dist/lib/components/PictureWithDescription/PictureWithDescription.js +46 -16
  249. package/dist/lib/components/Property/Property.css +156 -1
  250. package/dist/lib/components/Property/Property.d.ts +4 -4
  251. package/dist/lib/components/Property/Property.js +120 -60
  252. package/dist/lib/components/Property/PropertyDescription.css +17 -1
  253. package/dist/lib/components/Property/PropertyDescription.d.ts +3 -3
  254. package/dist/lib/components/Property/PropertyDescription.js +46 -15
  255. package/dist/lib/components/Property/types.d.ts +5 -7
  256. package/dist/lib/components/Property/types.js +1 -5
  257. package/dist/lib/components/Steps/Steps.css +41 -1
  258. package/dist/lib/components/Steps/Steps.d.ts +1 -2
  259. package/dist/lib/components/Steps/Steps.js +35 -8
  260. package/dist/lib/components/Steps/StepsItem.css +42 -1
  261. package/dist/lib/components/Steps/StepsItem.d.ts +2 -2
  262. package/dist/lib/components/Steps/StepsItem.js +23 -11
  263. package/dist/lib/components/StoreBanner/StoreBanner.css +346 -1
  264. package/dist/lib/components/StoreBanner/StoreBanner.d.ts +5 -5
  265. package/dist/lib/components/StoreBanner/StoreBanner.js +118 -47
  266. package/dist/lib/components/StoreBanner/doc/img/android-screen.png +0 -0
  267. package/dist/lib/components/StoreBanner/doc/img/qr-code.png +0 -0
  268. package/dist/lib/components/StoreBanner/doc/img/screen.png +0 -0
  269. package/dist/lib/components/StoreButton/StoreButton.css +327 -1
  270. package/dist/lib/components/StoreButton/StoreButton.d.ts +3 -3
  271. package/dist/lib/components/StoreButton/StoreButton.js +63 -17
  272. package/dist/lib/components/Table/Table.css +157 -1
  273. package/dist/lib/components/Table/Table.d.ts +1 -1
  274. package/dist/lib/components/Table/Table.js +68 -35
  275. package/dist/lib/components/Table/TableCell.js +16 -4
  276. package/dist/lib/components/Table/TableRow.js +19 -5
  277. package/dist/lib/components/TabsBox/TabBox.js +4 -1
  278. package/dist/lib/components/TabsBox/TabsBox.d.ts +1 -1
  279. package/dist/lib/components/TabsBox/TabsBox.js +26 -8
  280. package/dist/lib/components/TextBox/TextBox.css +25 -1
  281. package/dist/lib/components/TextBox/TextBox.d.ts +1 -2
  282. package/dist/lib/components/TextBox/TextBox.js +36 -12
  283. package/dist/lib/components/TextBox/TextBoxPicture.css +27 -1
  284. package/dist/lib/components/TextBox/TextBoxPicture.d.ts +2 -2
  285. package/dist/lib/components/TextBox/TextBoxPicture.js +29 -11
  286. package/dist/lib/components/TextWithIcon/TextWithIcon.css +10 -1
  287. package/dist/lib/components/TextWithIcon/TextWithIcon.d.ts +1 -1
  288. package/dist/lib/components/TextWithIcon/TextWithIcon.js +39 -10
  289. package/dist/lib/components/TextWithIcon/TextWithIconItem.css +29 -1
  290. package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +1 -1
  291. package/dist/lib/components/TextWithIcon/TextWithIconItem.js +37 -10
  292. package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css +31 -1
  293. package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +1 -1
  294. package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js +40 -10
  295. package/dist/lib/components/VideoBanner/VideoBanner.css +225 -1
  296. package/dist/lib/components/VideoBanner/VideoBanner.d.ts +7 -7
  297. package/dist/lib/components/VideoBanner/VideoBanner.js +176 -83
  298. package/dist/lib/components/VideoBlock/VideoBlock.css +106 -1
  299. package/dist/lib/components/VideoBlock/VideoBlock.d.ts +4 -4
  300. package/dist/lib/components/VideoBlock/VideoBlock.js +114 -58
  301. package/dist/lib/constants/throttleTime.js +3 -2
  302. package/dist/lib/helpers/getColumnConfig.d.ts +1 -5
  303. package/dist/lib/helpers/getColumnConfig.js +5 -2
  304. package/dist/lib/helpers/setRelAttribute.d.ts +1 -0
  305. package/dist/lib/helpers/setRelAttribute.js +20 -0
  306. package/dist/lib/hooks/useResolutions.d.ts +7 -0
  307. package/dist/lib/hooks/useResolutions.js +75 -0
  308. package/dist/lib/index.d.ts +2 -0
  309. package/dist/lib/index.js +73 -10
  310. package/package.json +92 -87
  311. package/dist/es/components/NotificationBox/NotificationBox.css +0 -1
  312. 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
- var React = _interopRequireWildcard(require("react"));
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
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
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__*/React.createElement("svg", (0, _extends2["default"])({
25
+ return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
20
26
  viewBox: "0 0 32 32"
21
- }, props), /*#__PURE__*/React.createElement("path", {
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__*/React.createElement("svg", (0, _extends2["default"])({
33
+ return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
27
34
  viewBox: "0 0 32 32"
28
- }, props), /*#__PURE__*/React.createElement("path", {
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
- audioTitle = _ref.audioTitle,
36
- _ref$position = _ref.position,
37
- position = _ref$position === void 0 ? 'center' : _ref$position,
38
- isFullWidth = _ref.isFullWidth;
39
- var audioRef = React.useRef(null);
40
- var _React$useState = React.useState(false),
41
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
42
- isPlaying = _React$useState2[0],
43
- setIsPlaying = _React$useState2[1];
44
- var _React$useState3 = React.useState(false),
45
- _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
46
- isPause = _React$useState4[0],
47
- setIsPause = _React$useState4[1];
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
- var playingIconHandleClick = React.useMemo(function () {
93
+
94
+ var playingIconHandleClick = _react["default"].useMemo(function () {
74
95
  return isPlaying ? handlePause : handlePLay;
75
96
  }, [isPlaying]);
76
- return /*#__PURE__*/React.createElement("div", {
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__*/React.createElement("div", {
104
+ }, /*#__PURE__*/_react["default"].createElement("div", {
83
105
  className: cn('player')
84
- }, /*#__PURE__*/React.createElement("audio", {
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__*/React.createElement("source", {
111
+ }, /*#__PURE__*/_react["default"].createElement("source", {
90
112
  src: audioSrc,
91
113
  type: "audio/mpeg"
92
- })), /*#__PURE__*/React.createElement("div", {
114
+ })), /*#__PURE__*/_react["default"].createElement("div", {
93
115
  className: cn('playing-controls')
94
- }, /*#__PURE__*/React.createElement(_uiCore.Button, {
95
- icon: isPlaying ? /*#__PURE__*/React.createElement(IconPause, null) : /*#__PURE__*/React.createElement(IconPlay, null),
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__*/React.createElement(_AudioProgress["default"], {
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__*/React.createElement(_AudioVolume["default"], {
134
+ }), /*#__PURE__*/_react["default"].createElement(_AudioVolume["default"], {
113
135
  onChangeAudioVolume: handleChangeAudioVolume
114
136
  })));
115
137
  };
116
- var _default = exports["default"] = AudioPlayer;
138
+
139
+ var _default = AudioPlayer;
140
+ exports["default"] = _default;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import './style/AudioProgress.scss';
2
+ import './style/AudioProgress.less';
3
3
  export declare const INTERVAL_DELAY = 1000;
4
4
  export interface IAudioProgressProps {
5
5
  audioRef: React.MutableRefObject<HTMLAudioElement | null>;
@@ -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
- require("core-js/modules/es.number.constructor.js");
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
- var INTERVAL_DELAY = exports.INTERVAL_DELAY = 1000;
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
- audioTitle = _ref.audioTitle,
21
- isPlaying = _ref.isPlaying,
22
- isPause = _ref.isPause,
23
- onChangeAudioCurrentTime = _ref.onChangeAudioCurrentTime,
24
- onPlay = _ref.onPlay,
25
- onSetIsPlaying = _ref.onSetIsPlaying;
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
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
29
- trackProgress = _React$useState2[0],
30
- setTrackProgress = _React$useState2[1];
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
- var _default = exports["default"] = AudioProgress;
131
+
132
+ var _default = AudioProgress;
133
+ exports["default"] = _default;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import './style/AudioRange.scss';
2
+ import './style/AudioRange.less';
3
3
  export interface IAudioRangeProps {
4
4
  className?: string;
5
5
  maxValue: number | string;
@@ -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
- maxValue = _ref.maxValue,
15
- value = _ref.value,
16
- step = _ref.step,
17
- colorPercent = _ref.colorPercent,
18
- onChange = _ref.onChange,
19
- onMouseUp = _ref.onMouseUp,
20
- onTouchEnd = _ref.onTouchEnd,
21
- dataAttrs = _ref.dataAttrs;
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
- var _default = exports["default"] = AudioRange;
43
+
44
+ var _default = AudioRange;
45
+ exports["default"] = _default;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import './style/AudioVolume.scss';
2
+ import './style/AudioVolume.less';
3
3
  export interface IAudioVolumeProps {
4
4
  onChangeAudioVolume?: (volume: number) => void;
5
5
  }
@@ -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
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
39
- trackVolume = _React$useState2[0],
40
- setTrackVolume = _React$useState2[1];
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
- var _default = exports["default"] = AudioVolume;
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
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
13
- trackDuration = _React$useState2[0],
14
- setTrackDuration = _React$useState2[1];
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
- duration = audioNode.duration;
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
- var _default = exports["default"] = useTrackDuration;
42
+
43
+ var _default = useTrackDuration;
44
+ exports["default"] = _default;
@@ -1 +1,58 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-audio-player{margin-top:24px}.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;background:var(--spbSky0);border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:space-between;padding:16px}@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%}}
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,h2,h3,h4,h5{margin:0}.mfui-audio-progress{margin-right:16px;width:100%}.mfui-audio-progress__info{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}.mfui-audio-progress__value{color:var(-spbSky3);font-size:12px;line-height:18px}.mfui-audio-progress__range-wrapper{margin-top:-2px}.mfui-audio-progress__title{color:var(--stcBlack);font-size:12px;line-height:18px}
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,h2,h3,h4,h5{margin:0}.mfui-audio-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--spbSky2);background-image:-webkit-gradient(linear,left top,left bottom,from(#00b956),to(#00b956));background-image:linear-gradient(#00b956,#00b956);background-repeat:no-repeat;border-radius:2px;cursor:pointer;height:4px;width:100%}.mfui-audio-range:focus{outline:none}.mfui-audio-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 9px fade(#000,15%);box-shadow:0 2px 9px fade(#000,15%);height:16px;width:16px}.mfui-audio-range::-moz-range-thumb{-webkit-appearance:none;background:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 9px fade(#000,15%);height:16px;width:16px}.mfui-audio-range::-ms-thumb{-webkit-appearance:none;background:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 9px fade(#000,15%);height:16px;width:16px}.mfui-audio-range::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-audio-range::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-audio-range::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}
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
+ }