@megafon/ui-shared 4.5.2 → 4.6.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 +25 -0
- package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +5 -0
- package/dist/es/components/TextWithIcon/TextWithIconItem.js +20 -7
- package/dist/es/components/VideoBlock/VideoBlock.css +10 -51
- package/dist/es/components/VideoBlock/VideoBlock.d.ts +4 -0
- package/dist/es/components/VideoBlock/VideoBlock.js +29 -12
- package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +5 -0
- package/dist/lib/components/TextWithIcon/TextWithIconItem.js +21 -6
- package/dist/lib/components/VideoBlock/VideoBlock.css +10 -51
- package/dist/lib/components/VideoBlock/VideoBlock.d.ts +4 -0
- package/dist/lib/components/VideoBlock/VideoBlock.js +29 -12
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,31 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [4.6.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.5.3...@megafon/ui-shared@4.6.0) (2022-12-06)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **textwithicon:** fix playground ([44c4b6a](https://github.com/MegafonWebLab/megafon-ui/commit/44c4b6ad323a88f48d3b79191e3be4c44fa2ac14))
|
|
12
|
+
* **textwithiconitem:** add example and fix text ([3db8692](https://github.com/MegafonWebLab/megafon-ui/commit/3db869242615caacf1101e4fcff1877ee43c9c95))
|
|
13
|
+
* **textwithiconitem:** add render html and classes ([74e21bc](https://github.com/MegafonWebLab/megafon-ui/commit/74e21bcb78e3f4764ceb58d8fa102b6b000c5ae2))
|
|
14
|
+
* **videoblock:** add playsinline prop ([c383928](https://github.com/MegafonWebLab/megafon-ui/commit/c383928473596bb962e68a15125fa9574bce4a64))
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
## [4.5.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.5.2...@megafon/ui-shared@4.5.3) (2022-11-29)
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### Bug Fixes
|
|
24
|
+
|
|
25
|
+
* **videoblock:** fix defects ([697f450](https://github.com/MegafonWebLab/megafon-ui/commit/697f450187f01fa99639b8ebcd487c85b32b0568))
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
6
31
|
## [4.5.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.5.1...@megafon/ui-shared@4.5.2) (2022-11-21)
|
|
7
32
|
|
|
8
33
|
**Note:** Version bump only for package @megafon/ui-shared
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import './TextWithIconItem.less';
|
|
3
3
|
export interface ITextWithIconItem {
|
|
4
|
+
/** Дополнительные классы для внутренних элементов */
|
|
5
|
+
classes?: {
|
|
6
|
+
icon?: string;
|
|
7
|
+
text?: string;
|
|
8
|
+
};
|
|
4
9
|
/** Текст */
|
|
5
10
|
text: string | string[];
|
|
6
11
|
/** Иконка */
|
|
@@ -1,28 +1,41 @@
|
|
|
1
|
+
import "core-js/modules/es.array.is-array";
|
|
2
|
+
import "core-js/modules/es.array.map";
|
|
1
3
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
4
|
import * as React from 'react';
|
|
3
|
-
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
5
|
+
import { cnCreate, convert, filterDataAttrs, textConvertConfig } from '@megafon/ui-helpers';
|
|
4
6
|
import * as PropTypes from 'prop-types';
|
|
5
7
|
import "./TextWithIconItem.css";
|
|
6
8
|
var cn = cnCreate('mfui-text-with-icon-item');
|
|
7
9
|
|
|
8
10
|
var TextWithIconItem = function TextWithIconItem(_ref) {
|
|
9
|
-
var
|
|
11
|
+
var className = _ref.className,
|
|
12
|
+
_ref$classes = _ref.classes,
|
|
13
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
|
14
|
+
text = _ref.text,
|
|
10
15
|
icon = _ref.icon,
|
|
11
16
|
rootRef = _ref.rootRef,
|
|
12
17
|
dataAttrs = _ref.dataAttrs,
|
|
13
18
|
_ref$centeringOnMobil = _ref.centeringOnMobile,
|
|
14
|
-
centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil
|
|
15
|
-
|
|
19
|
+
centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil;
|
|
20
|
+
var renderText = React.useMemo(function () {
|
|
21
|
+
if (Array.isArray(text)) {
|
|
22
|
+
return text.map(function (item) {
|
|
23
|
+
return convert(item, textConvertConfig);
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
return convert(text, textConvertConfig);
|
|
28
|
+
}, [text]);
|
|
16
29
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
17
30
|
className: cn({
|
|
18
31
|
'centering-on-mobile': centeringOnMobile
|
|
19
32
|
}, [className]),
|
|
20
33
|
ref: rootRef
|
|
21
34
|
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
|
|
22
|
-
className: cn('svg-icon')
|
|
35
|
+
className: cn('svg-icon', [classes.icon])
|
|
23
36
|
}, icon), /*#__PURE__*/React.createElement("div", {
|
|
24
|
-
className: cn('text')
|
|
25
|
-
},
|
|
37
|
+
className: cn('text', [classes.text])
|
|
38
|
+
}, renderText));
|
|
26
39
|
};
|
|
27
40
|
|
|
28
41
|
TextWithIconItem.propTypes = {
|
|
@@ -24,7 +24,6 @@ h5 {
|
|
|
24
24
|
-webkit-box-pack: center;
|
|
25
25
|
-ms-flex-pack: center;
|
|
26
26
|
justify-content: center;
|
|
27
|
-
height: 100%;
|
|
28
27
|
}
|
|
29
28
|
@media screen and (max-width: 767px) {
|
|
30
29
|
.mfui-video-block__content {
|
|
@@ -36,13 +35,14 @@ h5 {
|
|
|
36
35
|
margin-top: 32px;
|
|
37
36
|
}
|
|
38
37
|
}
|
|
39
|
-
@media screen and (min-width:
|
|
38
|
+
@media screen and (min-width: 1024px) {
|
|
40
39
|
.mfui-video-block__content {
|
|
40
|
+
height: 100%;
|
|
41
41
|
margin-right: 20px;
|
|
42
42
|
padding-right: 20px;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
@media screen and (min-width:
|
|
45
|
+
@media screen and (min-width: 1024px) {
|
|
46
46
|
.mfui-video-block__content_position-right {
|
|
47
47
|
margin: 0 0 0 20px;
|
|
48
48
|
padding: 0 0 0 20px;
|
|
@@ -75,58 +75,17 @@ h5 {
|
|
|
75
75
|
}
|
|
76
76
|
.mfui-video-block__video {
|
|
77
77
|
width: 100%;
|
|
78
|
-
height: 100%;
|
|
79
78
|
-o-object-fit: contain;
|
|
80
79
|
object-fit: contain;
|
|
81
80
|
}
|
|
82
|
-
.mfui-video-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
.mfui-video-block__youtube {
|
|
82
|
+
position: relative;
|
|
83
|
+
padding-bottom: 56.25%;
|
|
85
84
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
@media screen and (min-width: 1280px) and (max-width: 1439px) {
|
|
92
|
-
.mfui-video-block__video-wrapper {
|
|
93
|
-
height: 524px;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
|
97
|
-
.mfui-video-block__video-wrapper {
|
|
98
|
-
height: 505px;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
102
|
-
height: 468px;
|
|
103
|
-
}
|
|
104
|
-
@media screen and (min-width: 1440px) and (max-width: 1599px) {
|
|
105
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
106
|
-
height: 415px;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
@media screen and (min-width: 1280px) and (max-width: 1439px) {
|
|
110
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
111
|
-
height: 363px;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
|
115
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
116
|
-
height: 328px;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
|
120
|
-
.mfui-video-block__video-wrapper,
|
|
121
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
122
|
-
height: 379px;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
@media screen and (max-width: 767px) {
|
|
126
|
-
.mfui-video-block__video-wrapper,
|
|
127
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
128
|
-
height: 162px;
|
|
129
|
-
}
|
|
85
|
+
.mfui-video-block__iframe {
|
|
86
|
+
position: absolute;
|
|
87
|
+
top: 0;
|
|
88
|
+
left: 0;
|
|
130
89
|
}
|
|
131
90
|
.mfui-video-block__grid {
|
|
132
91
|
width: 100%;
|
|
@@ -45,8 +45,12 @@ export interface IVideoBlockProps {
|
|
|
45
45
|
isMuted?: boolean;
|
|
46
46
|
/** Автоматическое проигрывание видео */
|
|
47
47
|
isAutoplay?: boolean;
|
|
48
|
+
/** Ссылка на изображение для превью к HTML5 видео */
|
|
49
|
+
poster?: string;
|
|
48
50
|
/** Расположение контента справа от видео. Только для десктопа */
|
|
49
51
|
contentPositionRight?: boolean;
|
|
52
|
+
/** Воспроизводит видео на iOS устройствах без перехода в полноэкранный режим */
|
|
53
|
+
playsinline?: boolean;
|
|
50
54
|
}
|
|
51
55
|
declare const VideoBlock: React.FC<IVideoBlockProps>;
|
|
52
56
|
export default VideoBlock;
|
|
@@ -29,20 +29,37 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
29
29
|
_ref$isAutoplay = _ref.isAutoplay,
|
|
30
30
|
isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
|
|
31
31
|
_ref$contentPositionR = _ref.contentPositionRight,
|
|
32
|
-
contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR
|
|
32
|
+
contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR,
|
|
33
|
+
poster = _ref.poster,
|
|
34
|
+
_ref$playsinline = _ref.playsinline,
|
|
35
|
+
playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline;
|
|
33
36
|
var renderVideo = React.useCallback(function () {
|
|
34
37
|
switch (videoType) {
|
|
35
38
|
case VideoTypes.YOUTUBE:
|
|
36
39
|
{
|
|
37
|
-
var
|
|
38
|
-
|
|
40
|
+
var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
|
|
41
|
+
var autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
|
|
42
|
+
var mute = "&mute=".concat(isMuted ? 1 : 0);
|
|
43
|
+
var loop = "&loop=1";
|
|
44
|
+
var rel = "&rel=0";
|
|
45
|
+
var controls = "&controls=".concat(isAutoplay ? 0 : 1);
|
|
46
|
+
var showinfo = "&showinfo=0";
|
|
47
|
+
var ivLoadPolicy = "&iv_load_policy=3";
|
|
48
|
+
var playlist = "&playlist=".concat(videoSrc);
|
|
49
|
+
var playsinlineProp = "&playsinline=".concat(playsinline ? 1 : 0);
|
|
50
|
+
var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(showinfo).concat(ivLoadPolicy).concat(playlist).concat(playsinlineProp);
|
|
51
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
52
|
+
className: cn('youtube')
|
|
53
|
+
}, /*#__PURE__*/React.createElement("iframe", {
|
|
54
|
+
className: cn('iframe'),
|
|
39
55
|
src: src,
|
|
40
56
|
width: "100%",
|
|
41
57
|
height: "100%",
|
|
42
58
|
frameBorder: "0",
|
|
43
59
|
allow: "autoplay",
|
|
44
|
-
title: "iframe"
|
|
45
|
-
|
|
60
|
+
title: "iframe",
|
|
61
|
+
allowFullScreen: true
|
|
62
|
+
}));
|
|
46
63
|
}
|
|
47
64
|
|
|
48
65
|
case VideoTypes.VIDEO:
|
|
@@ -55,7 +72,9 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
55
72
|
autoPlay: isAutoplay,
|
|
56
73
|
muted: isMuted,
|
|
57
74
|
controls: !isAutoplay,
|
|
58
|
-
loop: true
|
|
75
|
+
loop: true,
|
|
76
|
+
poster: poster,
|
|
77
|
+
playsInline: playsinline
|
|
59
78
|
}, /*#__PURE__*/React.createElement("source", {
|
|
60
79
|
src: videoSrc,
|
|
61
80
|
type: "video/mp4"
|
|
@@ -68,7 +87,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
68
87
|
return null;
|
|
69
88
|
}
|
|
70
89
|
}
|
|
71
|
-
}, [isAutoplay, isMuted,
|
|
90
|
+
}, [videoType, videoSrc, isAutoplay, isMuted, poster, playsinline]);
|
|
72
91
|
var renderContent = React.useCallback(function (_ref2) {
|
|
73
92
|
var title = _ref2.title,
|
|
74
93
|
description = _ref2.description,
|
|
@@ -121,11 +140,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
121
140
|
className: cn('video-column', {
|
|
122
141
|
'position-left': contentPositionRight
|
|
123
142
|
})
|
|
124
|
-
},
|
|
125
|
-
className: cn('video-wrapper', {
|
|
126
|
-
'with-content': !!content
|
|
127
|
-
})
|
|
128
|
-
}, renderVideo())));
|
|
143
|
+
}, renderVideo()));
|
|
129
144
|
return columns;
|
|
130
145
|
}, [renderContent, renderVideo, content, contentPositionRight]);
|
|
131
146
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
@@ -163,6 +178,8 @@ VideoBlock.propTypes = {
|
|
|
163
178
|
videoSrc: PropTypes.string.isRequired,
|
|
164
179
|
isMuted: PropTypes.bool,
|
|
165
180
|
isAutoplay: PropTypes.bool,
|
|
181
|
+
poster: PropTypes.string,
|
|
182
|
+
playsinline: PropTypes.bool,
|
|
166
183
|
contentPositionRight: PropTypes.bool
|
|
167
184
|
};
|
|
168
185
|
export default VideoBlock;
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import './TextWithIconItem.less';
|
|
3
3
|
export interface ITextWithIconItem {
|
|
4
|
+
/** Дополнительные классы для внутренних элементов */
|
|
5
|
+
classes?: {
|
|
6
|
+
icon?: string;
|
|
7
|
+
text?: string;
|
|
8
|
+
};
|
|
4
9
|
/** Текст */
|
|
5
10
|
text: string | string[];
|
|
6
11
|
/** Иконка */
|
|
@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = void 0;
|
|
9
9
|
|
|
10
|
+
require("core-js/modules/es.array.is-array");
|
|
11
|
+
|
|
12
|
+
require("core-js/modules/es.array.map");
|
|
13
|
+
|
|
10
14
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
15
|
|
|
12
16
|
var React = _interopRequireWildcard(require("react"));
|
|
@@ -24,23 +28,34 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
24
28
|
var cn = (0, _uiHelpers.cnCreate)('mfui-text-with-icon-item');
|
|
25
29
|
|
|
26
30
|
var TextWithIconItem = function TextWithIconItem(_ref) {
|
|
27
|
-
var
|
|
31
|
+
var className = _ref.className,
|
|
32
|
+
_ref$classes = _ref.classes,
|
|
33
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
|
34
|
+
text = _ref.text,
|
|
28
35
|
icon = _ref.icon,
|
|
29
36
|
rootRef = _ref.rootRef,
|
|
30
37
|
dataAttrs = _ref.dataAttrs,
|
|
31
38
|
_ref$centeringOnMobil = _ref.centeringOnMobile,
|
|
32
|
-
centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil
|
|
33
|
-
|
|
39
|
+
centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil;
|
|
40
|
+
var renderText = React.useMemo(function () {
|
|
41
|
+
if (Array.isArray(text)) {
|
|
42
|
+
return text.map(function (item) {
|
|
43
|
+
return (0, _uiHelpers.convert)(item, _uiHelpers.textConvertConfig);
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return (0, _uiHelpers.convert)(text, _uiHelpers.textConvertConfig);
|
|
48
|
+
}, [text]);
|
|
34
49
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
35
50
|
className: cn({
|
|
36
51
|
'centering-on-mobile': centeringOnMobile
|
|
37
52
|
}, [className]),
|
|
38
53
|
ref: rootRef
|
|
39
54
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
|
|
40
|
-
className: cn('svg-icon')
|
|
55
|
+
className: cn('svg-icon', [classes.icon])
|
|
41
56
|
}, icon), /*#__PURE__*/React.createElement("div", {
|
|
42
|
-
className: cn('text')
|
|
43
|
-
},
|
|
57
|
+
className: cn('text', [classes.text])
|
|
58
|
+
}, renderText));
|
|
44
59
|
};
|
|
45
60
|
|
|
46
61
|
TextWithIconItem.propTypes = {
|
|
@@ -24,7 +24,6 @@ h5 {
|
|
|
24
24
|
-webkit-box-pack: center;
|
|
25
25
|
-ms-flex-pack: center;
|
|
26
26
|
justify-content: center;
|
|
27
|
-
height: 100%;
|
|
28
27
|
}
|
|
29
28
|
@media screen and (max-width: 767px) {
|
|
30
29
|
.mfui-video-block__content {
|
|
@@ -36,13 +35,14 @@ h5 {
|
|
|
36
35
|
margin-top: 32px;
|
|
37
36
|
}
|
|
38
37
|
}
|
|
39
|
-
@media screen and (min-width:
|
|
38
|
+
@media screen and (min-width: 1024px) {
|
|
40
39
|
.mfui-video-block__content {
|
|
40
|
+
height: 100%;
|
|
41
41
|
margin-right: 20px;
|
|
42
42
|
padding-right: 20px;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
@media screen and (min-width:
|
|
45
|
+
@media screen and (min-width: 1024px) {
|
|
46
46
|
.mfui-video-block__content_position-right {
|
|
47
47
|
margin: 0 0 0 20px;
|
|
48
48
|
padding: 0 0 0 20px;
|
|
@@ -75,58 +75,17 @@ h5 {
|
|
|
75
75
|
}
|
|
76
76
|
.mfui-video-block__video {
|
|
77
77
|
width: 100%;
|
|
78
|
-
height: 100%;
|
|
79
78
|
-o-object-fit: contain;
|
|
80
79
|
object-fit: contain;
|
|
81
80
|
}
|
|
82
|
-
.mfui-video-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
.mfui-video-block__youtube {
|
|
82
|
+
position: relative;
|
|
83
|
+
padding-bottom: 56.25%;
|
|
85
84
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
@media screen and (min-width: 1280px) and (max-width: 1439px) {
|
|
92
|
-
.mfui-video-block__video-wrapper {
|
|
93
|
-
height: 524px;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
|
97
|
-
.mfui-video-block__video-wrapper {
|
|
98
|
-
height: 505px;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
102
|
-
height: 468px;
|
|
103
|
-
}
|
|
104
|
-
@media screen and (min-width: 1440px) and (max-width: 1599px) {
|
|
105
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
106
|
-
height: 415px;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
@media screen and (min-width: 1280px) and (max-width: 1439px) {
|
|
110
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
111
|
-
height: 363px;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
|
115
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
116
|
-
height: 328px;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
|
120
|
-
.mfui-video-block__video-wrapper,
|
|
121
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
122
|
-
height: 379px;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
@media screen and (max-width: 767px) {
|
|
126
|
-
.mfui-video-block__video-wrapper,
|
|
127
|
-
.mfui-video-block__video-wrapper_with-content {
|
|
128
|
-
height: 162px;
|
|
129
|
-
}
|
|
85
|
+
.mfui-video-block__iframe {
|
|
86
|
+
position: absolute;
|
|
87
|
+
top: 0;
|
|
88
|
+
left: 0;
|
|
130
89
|
}
|
|
131
90
|
.mfui-video-block__grid {
|
|
132
91
|
width: 100%;
|
|
@@ -45,8 +45,12 @@ export interface IVideoBlockProps {
|
|
|
45
45
|
isMuted?: boolean;
|
|
46
46
|
/** Автоматическое проигрывание видео */
|
|
47
47
|
isAutoplay?: boolean;
|
|
48
|
+
/** Ссылка на изображение для превью к HTML5 видео */
|
|
49
|
+
poster?: string;
|
|
48
50
|
/** Расположение контента справа от видео. Только для десктопа */
|
|
49
51
|
contentPositionRight?: boolean;
|
|
52
|
+
/** Воспроизводит видео на iOS устройствах без перехода в полноэкранный режим */
|
|
53
|
+
playsinline?: boolean;
|
|
50
54
|
}
|
|
51
55
|
declare const VideoBlock: React.FC<IVideoBlockProps>;
|
|
52
56
|
export default VideoBlock;
|
|
@@ -47,21 +47,38 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
47
47
|
_ref$isAutoplay = _ref.isAutoplay,
|
|
48
48
|
isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
|
|
49
49
|
_ref$contentPositionR = _ref.contentPositionRight,
|
|
50
|
-
contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR
|
|
50
|
+
contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR,
|
|
51
|
+
poster = _ref.poster,
|
|
52
|
+
_ref$playsinline = _ref.playsinline,
|
|
53
|
+
playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline;
|
|
51
54
|
|
|
52
55
|
var renderVideo = _react["default"].useCallback(function () {
|
|
53
56
|
switch (videoType) {
|
|
54
57
|
case VideoTypes.YOUTUBE:
|
|
55
58
|
{
|
|
56
|
-
var
|
|
57
|
-
|
|
59
|
+
var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
|
|
60
|
+
var autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
|
|
61
|
+
var mute = "&mute=".concat(isMuted ? 1 : 0);
|
|
62
|
+
var loop = "&loop=1";
|
|
63
|
+
var rel = "&rel=0";
|
|
64
|
+
var controls = "&controls=".concat(isAutoplay ? 0 : 1);
|
|
65
|
+
var showinfo = "&showinfo=0";
|
|
66
|
+
var ivLoadPolicy = "&iv_load_policy=3";
|
|
67
|
+
var playlist = "&playlist=".concat(videoSrc);
|
|
68
|
+
var playsinlineProp = "&playsinline=".concat(playsinline ? 1 : 0);
|
|
69
|
+
var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(showinfo).concat(ivLoadPolicy).concat(playlist).concat(playsinlineProp);
|
|
70
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
71
|
+
className: cn('youtube')
|
|
72
|
+
}, /*#__PURE__*/_react["default"].createElement("iframe", {
|
|
73
|
+
className: cn('iframe'),
|
|
58
74
|
src: src,
|
|
59
75
|
width: "100%",
|
|
60
76
|
height: "100%",
|
|
61
77
|
frameBorder: "0",
|
|
62
78
|
allow: "autoplay",
|
|
63
|
-
title: "iframe"
|
|
64
|
-
|
|
79
|
+
title: "iframe",
|
|
80
|
+
allowFullScreen: true
|
|
81
|
+
}));
|
|
65
82
|
}
|
|
66
83
|
|
|
67
84
|
case VideoTypes.VIDEO:
|
|
@@ -74,7 +91,9 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
74
91
|
autoPlay: isAutoplay,
|
|
75
92
|
muted: isMuted,
|
|
76
93
|
controls: !isAutoplay,
|
|
77
|
-
loop: true
|
|
94
|
+
loop: true,
|
|
95
|
+
poster: poster,
|
|
96
|
+
playsInline: playsinline
|
|
78
97
|
}, /*#__PURE__*/_react["default"].createElement("source", {
|
|
79
98
|
src: videoSrc,
|
|
80
99
|
type: "video/mp4"
|
|
@@ -87,7 +106,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
87
106
|
return null;
|
|
88
107
|
}
|
|
89
108
|
}
|
|
90
|
-
}, [isAutoplay, isMuted,
|
|
109
|
+
}, [videoType, videoSrc, isAutoplay, isMuted, poster, playsinline]);
|
|
91
110
|
|
|
92
111
|
var renderContent = _react["default"].useCallback(function (_ref2) {
|
|
93
112
|
var title = _ref2.title,
|
|
@@ -142,11 +161,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
142
161
|
className: cn('video-column', {
|
|
143
162
|
'position-left': contentPositionRight
|
|
144
163
|
})
|
|
145
|
-
},
|
|
146
|
-
className: cn('video-wrapper', {
|
|
147
|
-
'with-content': !!content
|
|
148
|
-
})
|
|
149
|
-
}, renderVideo())));
|
|
164
|
+
}, renderVideo()));
|
|
150
165
|
return columns;
|
|
151
166
|
}, [renderContent, renderVideo, content, contentPositionRight]);
|
|
152
167
|
|
|
@@ -185,6 +200,8 @@ VideoBlock.propTypes = {
|
|
|
185
200
|
videoSrc: _propTypes["default"].string.isRequired,
|
|
186
201
|
isMuted: _propTypes["default"].bool,
|
|
187
202
|
isAutoplay: _propTypes["default"].bool,
|
|
203
|
+
poster: _propTypes["default"].string,
|
|
204
|
+
playsinline: _propTypes["default"].bool,
|
|
188
205
|
contentPositionRight: _propTypes["default"].bool
|
|
189
206
|
};
|
|
190
207
|
var _default = VideoBlock;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-shared",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.6.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
87
|
"@babel/runtime": "^7.8.4",
|
|
88
|
-
"@megafon/ui-core": "^4.
|
|
88
|
+
"@megafon/ui-core": "^4.9.1",
|
|
89
89
|
"@megafon/ui-helpers": "^2.3.0",
|
|
90
90
|
"core-js": "^3.6.4",
|
|
91
91
|
"htmr": "^0.9.2",
|
|
@@ -93,5 +93,5 @@
|
|
|
93
93
|
"prop-types": "^15.7.2",
|
|
94
94
|
"swiper": "^6.5.6"
|
|
95
95
|
},
|
|
96
|
-
"gitHead": "
|
|
96
|
+
"gitHead": "079e229d423944ab3643730e461d4d5b4342cff0"
|
|
97
97
|
}
|