ecomlab-components-next 0.1.322 → 0.1.324
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/dist/components/ConstructorComponents/VideoBlockV3/VideoBlockV3.js +92 -0
- package/dist/components/ConstructorComponents/VideoBlockV3/VideoBlockV3.scss +186 -0
- package/dist/components/ConstructorComponents/VideoBlockV3/VideoBlockV3.stories.js +18 -0
- package/dist/components/ConstructorComponents/VideoBlockV3/img/play.png +0 -0
- package/dist/components/ConstructorComponents/VideoBlockV3/img/play.svg +4 -0
- package/dist/index.js +7 -0
- package/package.json +1 -1
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
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); }
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
require("./VideoBlockV3.scss");
|
|
11
|
+
var _ButtonBasicV = _interopRequireDefault(require("../../Buttons/ButtonBasicV2/ButtonBasicV2"));
|
|
12
|
+
var _useReveal = _interopRequireDefault(require("../../../common/hooks/useReveal"));
|
|
13
|
+
var _play = _interopRequireDefault(require("./img/play.svg"));
|
|
14
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
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 && {}.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; }
|
|
17
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
18
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
19
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
20
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
21
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
22
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
23
|
+
var VideoBlockV3 = function VideoBlockV3(_ref) {
|
|
24
|
+
var src = _ref.src,
|
|
25
|
+
hideTitle = _ref.hideTitle,
|
|
26
|
+
title = _ref.title,
|
|
27
|
+
poster = _ref.poster,
|
|
28
|
+
_ref$description = _ref.description,
|
|
29
|
+
description = _ref$description === void 0 ? 'Платформа за 2 минуты: аналитика, конкуренты и перенос контента' : _ref$description,
|
|
30
|
+
_ref$buttonText = _ref.buttonText,
|
|
31
|
+
buttonText = _ref$buttonText === void 0 ? 'Смотреть видео' : _ref$buttonText;
|
|
32
|
+
var videoRef = (0, _react.useRef)(null);
|
|
33
|
+
var _useState = (0, _react.useState)(false),
|
|
34
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
35
|
+
isPlaying = _useState2[0],
|
|
36
|
+
setIsPlaying = _useState2[1];
|
|
37
|
+
(0, _useReveal["default"])();
|
|
38
|
+
var handlePlay = function handlePlay() {
|
|
39
|
+
var video = videoRef.current;
|
|
40
|
+
if (!video) return;
|
|
41
|
+
video.play();
|
|
42
|
+
};
|
|
43
|
+
var handlePlayState = function handlePlayState() {
|
|
44
|
+
setIsPlaying(true);
|
|
45
|
+
};
|
|
46
|
+
var handlePauseState = function handlePauseState() {
|
|
47
|
+
setIsPlaying(false);
|
|
48
|
+
};
|
|
49
|
+
var handleEnded = function handleEnded() {
|
|
50
|
+
setIsPlaying(false);
|
|
51
|
+
};
|
|
52
|
+
return /*#__PURE__*/_react["default"].createElement("section", {
|
|
53
|
+
className: "video-block-v3"
|
|
54
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
55
|
+
className: "\n video-block-v3__card\n reveal\n ".concat(hideTitle ? 'video-block-v3__card--center' : '', "\n ")
|
|
56
|
+
}, !hideTitle && /*#__PURE__*/_react["default"].createElement("div", {
|
|
57
|
+
className: "video-block-v3__content"
|
|
58
|
+
}, /*#__PURE__*/_react["default"].createElement("h2", {
|
|
59
|
+
className: "video-block-v3__title"
|
|
60
|
+
}, title || 'Посмотрите видео о нас'), description && /*#__PURE__*/_react["default"].createElement("p", {
|
|
61
|
+
className: "video-block-v3__description"
|
|
62
|
+
}, description), /*#__PURE__*/_react["default"].createElement("div", {
|
|
63
|
+
className: "video-block-v3__action"
|
|
64
|
+
}, /*#__PURE__*/_react["default"].createElement(_ButtonBasicV["default"], {
|
|
65
|
+
icon: _play["default"],
|
|
66
|
+
green: true,
|
|
67
|
+
onClick: handlePlay,
|
|
68
|
+
text: buttonText,
|
|
69
|
+
size: "44px"
|
|
70
|
+
}))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
71
|
+
className: "\n video-block-v3__laptop\n ".concat(isPlaying ? 'video-block-v3__laptop--playing' : '', "\n ")
|
|
72
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
73
|
+
className: "video-block-v3__screen"
|
|
74
|
+
}, /*#__PURE__*/_react["default"].createElement("video", {
|
|
75
|
+
ref: videoRef,
|
|
76
|
+
className: "video-block-v3__video",
|
|
77
|
+
src: src,
|
|
78
|
+
poster: poster,
|
|
79
|
+
controls: true,
|
|
80
|
+
playsInline: true,
|
|
81
|
+
preload: "metadata",
|
|
82
|
+
onPlay: handlePlayState,
|
|
83
|
+
onPause: handlePauseState,
|
|
84
|
+
onEnded: handleEnded
|
|
85
|
+
}, /*#__PURE__*/_react["default"].createElement("source", {
|
|
86
|
+
src: src,
|
|
87
|
+
type: "video/mp4"
|
|
88
|
+
}))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
89
|
+
className: "video-block-v3__base"
|
|
90
|
+
}))));
|
|
91
|
+
};
|
|
92
|
+
var _default = exports["default"] = VideoBlockV3;
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
|
|
2
|
+
@import '../variables.scss';
|
|
3
|
+
|
|
4
|
+
// Ноутбук: стартовый поворот и "ровное" положение
|
|
5
|
+
$laptop-tilt: perspective(1200px) rotateY(-20deg) rotateZ(1deg);
|
|
6
|
+
$laptop-flat: perspective(1200px) rotateY(0deg) rotateZ(0deg);
|
|
7
|
+
|
|
8
|
+
// Скорость и плавность поворота (больше время — медленнее)
|
|
9
|
+
$laptop-speed: 0.7s;
|
|
10
|
+
$laptop-ease: cubic-bezier(0.45, 0, 0.2, 1);
|
|
11
|
+
|
|
12
|
+
.video-block-v3 {
|
|
13
|
+
font-family: 'Manrope', sans-serif;
|
|
14
|
+
background: $white;
|
|
15
|
+
width: 100%;
|
|
16
|
+
padding: 96px 0px;
|
|
17
|
+
|
|
18
|
+
* { font-family: 'Manrope', 'Golos Text', sans-serif !important; }
|
|
19
|
+
|
|
20
|
+
// CARD
|
|
21
|
+
&__card {
|
|
22
|
+
position: relative;
|
|
23
|
+
max-width: 1280px;
|
|
24
|
+
min-height: 360px;
|
|
25
|
+
margin: 0 auto;
|
|
26
|
+
border-radius: 24px;
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: space-between;
|
|
30
|
+
gap: 48px;
|
|
31
|
+
padding: 56px;
|
|
32
|
+
|
|
33
|
+
// Градиент только справа, рядом с ноутбуком
|
|
34
|
+
&::before {
|
|
35
|
+
content: '';
|
|
36
|
+
position: absolute;
|
|
37
|
+
width: 1000px;
|
|
38
|
+
height: 540px;
|
|
39
|
+
right: -164px;
|
|
40
|
+
top: 50%;
|
|
41
|
+
transform: translateY(-50%);
|
|
42
|
+
border-radius: 50%;
|
|
43
|
+
background: linear-gradient(120deg, rgba(125, 200, 235, 0.60), rgba(190, 225, 130, 0.55));
|
|
44
|
+
-webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
|
|
45
|
+
mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
|
|
46
|
+
z-index: 0;
|
|
47
|
+
pointer-events: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&--center { justify-content: center; }
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// CONTENT
|
|
54
|
+
&__content { position: relative; z-index: 3; flex: 1; max-width: 480px; }
|
|
55
|
+
|
|
56
|
+
&__title {
|
|
57
|
+
font-size: 30px;
|
|
58
|
+
font-weight: 800;
|
|
59
|
+
line-height: 1.2;
|
|
60
|
+
letter-spacing: -1px;
|
|
61
|
+
color: $green-dark;
|
|
62
|
+
margin: 0 0 16px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&__description {
|
|
66
|
+
font-size: 15px;
|
|
67
|
+
line-height: 1.5;
|
|
68
|
+
color: #66817a;
|
|
69
|
+
max-width: 420px;
|
|
70
|
+
margin: 0 0 28px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&__action { position: relative; z-index: 3; }
|
|
74
|
+
|
|
75
|
+
// LAPTOP
|
|
76
|
+
&__laptop {
|
|
77
|
+
position: relative;
|
|
78
|
+
z-index: 2;
|
|
79
|
+
flex-shrink: 0;
|
|
80
|
+
width: 560px;
|
|
81
|
+
transform: $laptop-tilt;
|
|
82
|
+
transform-origin: center center;
|
|
83
|
+
transition: transform $laptop-speed $laptop-ease;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&__screen {
|
|
87
|
+
position: relative;
|
|
88
|
+
z-index: 2;
|
|
89
|
+
background: #102b25;
|
|
90
|
+
border-radius: 14px 14px 0 0;
|
|
91
|
+
padding: 10px 10px 12px;
|
|
92
|
+
box-shadow: 0 24px 45px rgba(0, 0, 0, 0.18), 0 10px 20px rgba(0, 0, 0, 0.10);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&__video {
|
|
96
|
+
display: block;
|
|
97
|
+
width: 100%;
|
|
98
|
+
aspect-ratio: 16 / 10;
|
|
99
|
+
object-fit: cover;
|
|
100
|
+
border-radius: 6px;
|
|
101
|
+
background: #000;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&__base {
|
|
105
|
+
position: relative;
|
|
106
|
+
z-index: 2;
|
|
107
|
+
height: 12px;
|
|
108
|
+
width: calc(100% + 56px);
|
|
109
|
+
margin: 0 -28px;
|
|
110
|
+
background: linear-gradient(180deg, #e7f0ed 0%, #c2d5cf 100%);
|
|
111
|
+
border-radius: 0 0 16px 16px;
|
|
112
|
+
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
|
|
113
|
+
|
|
114
|
+
&::after {
|
|
115
|
+
content: '';
|
|
116
|
+
position: absolute;
|
|
117
|
+
left: 50%;
|
|
118
|
+
top: 0;
|
|
119
|
+
width: 80px;
|
|
120
|
+
height: 4px;
|
|
121
|
+
transform: translateX(-50%);
|
|
122
|
+
background: rgba(0, 0, 0, 0.10);
|
|
123
|
+
border-radius: 0 0 6px 6px;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@keyframes fadeUp {
|
|
128
|
+
from { opacity: 0; transform: translateY(24px); }
|
|
129
|
+
to { opacity: 1; transform: translateY(0); }
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// TABLET
|
|
134
|
+
@media (max-width: 1100px) {
|
|
135
|
+
.video-block-v3 {
|
|
136
|
+
padding: 72px 24px;
|
|
137
|
+
&__card { padding: 48px 40px; gap: 32px; }
|
|
138
|
+
&__title { font-size: 26px; }
|
|
139
|
+
&__laptop { width: 460px; transform: perspective(1200px) rotateY(-16deg) rotateZ(1deg); }
|
|
140
|
+
&__base { width: calc(100% + 40px); margin: 0 -20px; }
|
|
141
|
+
&__card::before { width: 820px; height: 450px; right: -135px; }
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// MOBILE
|
|
146
|
+
@media (max-width: 900px) {
|
|
147
|
+
.video-block-v3 {
|
|
148
|
+
padding: 60px 24px;
|
|
149
|
+
&__card { flex-direction: column; gap: 32px; padding: 40px 32px 48px; }
|
|
150
|
+
&__content { max-width: 100%; text-align: center; }
|
|
151
|
+
&__description { font-size: 14px; margin-left: auto; margin-right: auto; }
|
|
152
|
+
&__laptop { width: 100%; max-width: 520px; transform: $laptop-flat; }
|
|
153
|
+
&__card::before { width: 860px; height: 500px; right: 50%; top: 65%; transform: translate(50%, -50%); }
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// 600px
|
|
158
|
+
@media (max-width: 600px) {
|
|
159
|
+
.video-block-v3 {
|
|
160
|
+
&__card { border-radius: 20px; padding: 32px 24px 40px; }
|
|
161
|
+
&__title { font-size: 24px; }
|
|
162
|
+
&__description { font-size: 13px; margin-bottom: 20px; }
|
|
163
|
+
&__card::before { width: 720px; height: 420px; }
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
// 430px
|
|
168
|
+
@media (max-width: 430px) {
|
|
169
|
+
.video-block-v3 {
|
|
170
|
+
padding: 40px 20px;
|
|
171
|
+
&__card { border-radius: 16px; padding: 28px 16px 32px; }
|
|
172
|
+
&__title { font-size: 20px; }
|
|
173
|
+
&__description { font-size: 12px; }
|
|
174
|
+
&__screen { padding: 6px 6px 8px; border-radius: 10px 10px 0 0; }
|
|
175
|
+
&__base { width: calc(100% + 24px); margin: 0 -12px; }
|
|
176
|
+
&__card::before { width: 560px; height: 340px; }
|
|
177
|
+
&__action > * { max-width: 100% !important; width: 100% !important; }
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
// Ровное положение: при наведении на карточку и когда видео играет.
|
|
182
|
+
// Стоит ПОСЛЕ медиазапросов, чтобы перекрывать их на любом экране.
|
|
183
|
+
.video-block-v3__laptop--playing,
|
|
184
|
+
.video-block-v3__card:hover .video-block-v3__laptop {
|
|
185
|
+
transform: $laptop-flat;
|
|
186
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.VideoBlockV3Test = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _VideoBlockV = _interopRequireDefault(require("./VideoBlockV3"));
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var _default = exports["default"] = {
|
|
11
|
+
title: 'VideoBlockV3',
|
|
12
|
+
component: _VideoBlockV["default"]
|
|
13
|
+
};
|
|
14
|
+
var VideoBlockV3Test = exports.VideoBlockV3Test = function VideoBlockV3Test() {
|
|
15
|
+
return /*#__PURE__*/_react["default"].createElement(_VideoBlockV["default"], {
|
|
16
|
+
src: "https://dl.ecomru.ru:9001/redactor-videos/ecomru_1.mp4"
|
|
17
|
+
});
|
|
18
|
+
};
|
|
Binary file
|
package/dist/index.js
CHANGED
|
@@ -441,6 +441,12 @@ Object.defineProperty(exports, "VideoBlockV2", {
|
|
|
441
441
|
return _VideoBlockV["default"];
|
|
442
442
|
}
|
|
443
443
|
});
|
|
444
|
+
Object.defineProperty(exports, "VideoBlockV3", {
|
|
445
|
+
enumerable: true,
|
|
446
|
+
get: function get() {
|
|
447
|
+
return _VideoBlockV2["default"];
|
|
448
|
+
}
|
|
449
|
+
});
|
|
444
450
|
Object.defineProperty(exports, "ViewSwitch", {
|
|
445
451
|
enumerable: true,
|
|
446
452
|
get: function get() {
|
|
@@ -474,6 +480,7 @@ var _TariffPlan = _interopRequireDefault(require("./components/ConstructorCompon
|
|
|
474
480
|
var _TariffPlanV = _interopRequireDefault(require("./components/ConstructorComponents/TariffPlanV2/TariffPlanV2"));
|
|
475
481
|
var _VideoBlock = _interopRequireDefault(require("./components/ConstructorComponents/VideoBlock/VideoBlock"));
|
|
476
482
|
var _VideoBlockV = _interopRequireDefault(require("./components/ConstructorComponents/VideoBlockV2/VideoBlockV2"));
|
|
483
|
+
var _VideoBlockV2 = _interopRequireDefault(require("./components/ConstructorComponents/VideoBlockV3/VideoBlockV3"));
|
|
477
484
|
var _ArticlesBlock = _interopRequireDefault(require("./components/ConstructorComponents/ArticlesBlock/ArticlesBlock"));
|
|
478
485
|
var _ArticlesBlock2 = _interopRequireDefault(require("./components/ConstructorComponents/ArticlesBlock2/ArticlesBlock2"));
|
|
479
486
|
var _ArticlesBlockV = _interopRequireDefault(require("./components/ConstructorComponents/ArticlesBlockV2/ArticlesBlockV2"));
|