@megafon/ui-shared 4.5.2 → 4.5.3
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 +11 -0
- package/dist/es/components/VideoBlock/VideoBlock.css +10 -51
- package/dist/es/components/VideoBlock/VideoBlock.d.ts +2 -0
- package/dist/es/components/VideoBlock/VideoBlock.js +24 -12
- package/dist/lib/components/VideoBlock/VideoBlock.css +10 -51
- package/dist/lib/components/VideoBlock/VideoBlock.d.ts +2 -0
- package/dist/lib/components/VideoBlock/VideoBlock.js +24 -12
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.5.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.5.2...@megafon/ui-shared@4.5.3) (2022-11-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **videoblock:** fix defects ([697f450](https://github.com/MegafonWebLab/megafon-ui/commit/697f450187f01fa99639b8ebcd487c85b32b0568))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [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
18
|
|
|
8
19
|
**Note:** Version bump only for package @megafon/ui-shared
|
|
@@ -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,6 +45,8 @@ export interface IVideoBlockProps {
|
|
|
45
45
|
isMuted?: boolean;
|
|
46
46
|
/** Автоматическое проигрывание видео */
|
|
47
47
|
isAutoplay?: boolean;
|
|
48
|
+
/** Ссылка на изображение для превью к HTML5 видео */
|
|
49
|
+
poster?: string;
|
|
48
50
|
/** Расположение контента справа от видео. Только для десктопа */
|
|
49
51
|
contentPositionRight?: boolean;
|
|
50
52
|
}
|
|
@@ -29,20 +29,34 @@ 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;
|
|
33
34
|
var renderVideo = React.useCallback(function () {
|
|
34
35
|
switch (videoType) {
|
|
35
36
|
case VideoTypes.YOUTUBE:
|
|
36
37
|
{
|
|
37
|
-
var
|
|
38
|
-
|
|
38
|
+
var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
|
|
39
|
+
var autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
|
|
40
|
+
var mute = "&mute=".concat(isMuted ? 1 : 0);
|
|
41
|
+
var loop = "&loop=1";
|
|
42
|
+
var rel = "&rel=0";
|
|
43
|
+
var controls = "&controls=".concat(isAutoplay ? 0 : 1);
|
|
44
|
+
var showinfo = "&showinfo=0";
|
|
45
|
+
var ivLoadPolicy = "&iv_load_policy=3";
|
|
46
|
+
var playlist = "&playlist=".concat(videoSrc);
|
|
47
|
+
var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(showinfo).concat(ivLoadPolicy).concat(playlist);
|
|
48
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
49
|
+
className: cn('youtube')
|
|
50
|
+
}, /*#__PURE__*/React.createElement("iframe", {
|
|
51
|
+
className: cn('iframe'),
|
|
39
52
|
src: src,
|
|
40
53
|
width: "100%",
|
|
41
54
|
height: "100%",
|
|
42
55
|
frameBorder: "0",
|
|
43
56
|
allow: "autoplay",
|
|
44
|
-
title: "iframe"
|
|
45
|
-
|
|
57
|
+
title: "iframe",
|
|
58
|
+
allowFullScreen: true
|
|
59
|
+
}));
|
|
46
60
|
}
|
|
47
61
|
|
|
48
62
|
case VideoTypes.VIDEO:
|
|
@@ -55,7 +69,8 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
55
69
|
autoPlay: isAutoplay,
|
|
56
70
|
muted: isMuted,
|
|
57
71
|
controls: !isAutoplay,
|
|
58
|
-
loop: true
|
|
72
|
+
loop: true,
|
|
73
|
+
poster: poster
|
|
59
74
|
}, /*#__PURE__*/React.createElement("source", {
|
|
60
75
|
src: videoSrc,
|
|
61
76
|
type: "video/mp4"
|
|
@@ -68,7 +83,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
68
83
|
return null;
|
|
69
84
|
}
|
|
70
85
|
}
|
|
71
|
-
}, [isAutoplay, isMuted,
|
|
86
|
+
}, [videoType, videoSrc, isAutoplay, isMuted, poster]);
|
|
72
87
|
var renderContent = React.useCallback(function (_ref2) {
|
|
73
88
|
var title = _ref2.title,
|
|
74
89
|
description = _ref2.description,
|
|
@@ -121,11 +136,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
121
136
|
className: cn('video-column', {
|
|
122
137
|
'position-left': contentPositionRight
|
|
123
138
|
})
|
|
124
|
-
},
|
|
125
|
-
className: cn('video-wrapper', {
|
|
126
|
-
'with-content': !!content
|
|
127
|
-
})
|
|
128
|
-
}, renderVideo())));
|
|
139
|
+
}, renderVideo()));
|
|
129
140
|
return columns;
|
|
130
141
|
}, [renderContent, renderVideo, content, contentPositionRight]);
|
|
131
142
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
@@ -163,6 +174,7 @@ VideoBlock.propTypes = {
|
|
|
163
174
|
videoSrc: PropTypes.string.isRequired,
|
|
164
175
|
isMuted: PropTypes.bool,
|
|
165
176
|
isAutoplay: PropTypes.bool,
|
|
177
|
+
poster: PropTypes.string,
|
|
166
178
|
contentPositionRight: PropTypes.bool
|
|
167
179
|
};
|
|
168
180
|
export default VideoBlock;
|
|
@@ -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,6 +45,8 @@ export interface IVideoBlockProps {
|
|
|
45
45
|
isMuted?: boolean;
|
|
46
46
|
/** Автоматическое проигрывание видео */
|
|
47
47
|
isAutoplay?: boolean;
|
|
48
|
+
/** Ссылка на изображение для превью к HTML5 видео */
|
|
49
|
+
poster?: string;
|
|
48
50
|
/** Расположение контента справа от видео. Только для десктопа */
|
|
49
51
|
contentPositionRight?: boolean;
|
|
50
52
|
}
|
|
@@ -47,21 +47,35 @@ 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;
|
|
51
52
|
|
|
52
53
|
var renderVideo = _react["default"].useCallback(function () {
|
|
53
54
|
switch (videoType) {
|
|
54
55
|
case VideoTypes.YOUTUBE:
|
|
55
56
|
{
|
|
56
|
-
var
|
|
57
|
-
|
|
57
|
+
var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
|
|
58
|
+
var autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
|
|
59
|
+
var mute = "&mute=".concat(isMuted ? 1 : 0);
|
|
60
|
+
var loop = "&loop=1";
|
|
61
|
+
var rel = "&rel=0";
|
|
62
|
+
var controls = "&controls=".concat(isAutoplay ? 0 : 1);
|
|
63
|
+
var showinfo = "&showinfo=0";
|
|
64
|
+
var ivLoadPolicy = "&iv_load_policy=3";
|
|
65
|
+
var playlist = "&playlist=".concat(videoSrc);
|
|
66
|
+
var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(showinfo).concat(ivLoadPolicy).concat(playlist);
|
|
67
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
68
|
+
className: cn('youtube')
|
|
69
|
+
}, /*#__PURE__*/_react["default"].createElement("iframe", {
|
|
70
|
+
className: cn('iframe'),
|
|
58
71
|
src: src,
|
|
59
72
|
width: "100%",
|
|
60
73
|
height: "100%",
|
|
61
74
|
frameBorder: "0",
|
|
62
75
|
allow: "autoplay",
|
|
63
|
-
title: "iframe"
|
|
64
|
-
|
|
76
|
+
title: "iframe",
|
|
77
|
+
allowFullScreen: true
|
|
78
|
+
}));
|
|
65
79
|
}
|
|
66
80
|
|
|
67
81
|
case VideoTypes.VIDEO:
|
|
@@ -74,7 +88,8 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
74
88
|
autoPlay: isAutoplay,
|
|
75
89
|
muted: isMuted,
|
|
76
90
|
controls: !isAutoplay,
|
|
77
|
-
loop: true
|
|
91
|
+
loop: true,
|
|
92
|
+
poster: poster
|
|
78
93
|
}, /*#__PURE__*/_react["default"].createElement("source", {
|
|
79
94
|
src: videoSrc,
|
|
80
95
|
type: "video/mp4"
|
|
@@ -87,7 +102,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
87
102
|
return null;
|
|
88
103
|
}
|
|
89
104
|
}
|
|
90
|
-
}, [isAutoplay, isMuted,
|
|
105
|
+
}, [videoType, videoSrc, isAutoplay, isMuted, poster]);
|
|
91
106
|
|
|
92
107
|
var renderContent = _react["default"].useCallback(function (_ref2) {
|
|
93
108
|
var title = _ref2.title,
|
|
@@ -142,11 +157,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
|
142
157
|
className: cn('video-column', {
|
|
143
158
|
'position-left': contentPositionRight
|
|
144
159
|
})
|
|
145
|
-
},
|
|
146
|
-
className: cn('video-wrapper', {
|
|
147
|
-
'with-content': !!content
|
|
148
|
-
})
|
|
149
|
-
}, renderVideo())));
|
|
160
|
+
}, renderVideo()));
|
|
150
161
|
return columns;
|
|
151
162
|
}, [renderContent, renderVideo, content, contentPositionRight]);
|
|
152
163
|
|
|
@@ -185,6 +196,7 @@ VideoBlock.propTypes = {
|
|
|
185
196
|
videoSrc: _propTypes["default"].string.isRequired,
|
|
186
197
|
isMuted: _propTypes["default"].bool,
|
|
187
198
|
isAutoplay: _propTypes["default"].bool,
|
|
199
|
+
poster: _propTypes["default"].string,
|
|
188
200
|
contentPositionRight: _propTypes["default"].bool
|
|
189
201
|
};
|
|
190
202
|
var _default = VideoBlock;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-shared",
|
|
3
|
-
"version": "4.5.
|
|
3
|
+
"version": "4.5.3",
|
|
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.0",
|
|
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": "ab9cb505dca6ae5f4e3db5d4a21add24d10a1be1"
|
|
97
97
|
}
|