@gxpl/sdk 0.0.10 → 0.0.12
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/lib/sdk-nextjs/components/Section/SectionImage.js +2 -2
- package/lib/sdk-nextjs/components/items/FileItem/ImageItem.js +20 -46
- package/lib/sdk-nextjs/components/items/FileItem/VideoItem.js +27 -35
- package/lib/sdk-nextjs/components/items/RectangleItem/RectangleItem.js +22 -45
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const SectionImage = ({ media, sectionId }) => {
|
|
6
6
|
const { url, size, position, offsetX } = media;
|
|
7
7
|
const isContainHeight = size === 'contain-height';
|
|
8
|
-
const hasOffsetX = offsetX !== null
|
|
8
|
+
const hasOffsetX = offsetX !== null;
|
|
9
9
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: `section-image-wrapper-${sectionId}`, style: {
|
|
10
10
|
position: position === 'fixed' ? 'sticky' : 'relative',
|
|
11
11
|
height: position === 'fixed' ? '100vh' : '100%',
|
|
@@ -14,7 +14,7 @@ const SectionImage = ({ media, sectionId }) => {
|
|
|
14
14
|
overflow: 'hidden'
|
|
15
15
|
}, children: (0, jsx_runtime_1.jsx)("img", { src: url, className: `image-background-${sectionId}`, style: {
|
|
16
16
|
objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
|
|
17
|
-
width: isContainHeight
|
|
17
|
+
width: isContainHeight ? 'auto' : '100%',
|
|
18
18
|
transform: isContainHeight ? 'translateX(-50%)' : 'none',
|
|
19
19
|
position: 'relative',
|
|
20
20
|
left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
|
|
@@ -18,7 +18,7 @@ const useItemFXData_1 = require("../../../common/useItemFXData");
|
|
|
18
18
|
const getFill_1 = require("../../../utils/getFill");
|
|
19
19
|
const useExemplary_1 = require("../../../common/useExemplary");
|
|
20
20
|
const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
|
|
21
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
21
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
22
22
|
const id = (0, react_1.useId)();
|
|
23
23
|
const { radius: itemRadius, strokeWidth: itemStrokeWidth, opacity: itemOpacity, strokeFill: itemStrokeFill, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
|
|
24
24
|
const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
|
|
@@ -34,10 +34,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
34
34
|
const height = area.height * exemplary;
|
|
35
35
|
const params = item.params;
|
|
36
36
|
const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
|
|
37
|
-
const imgStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius']);
|
|
38
|
-
const stateStrokeFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeFill']);
|
|
39
|
-
const stateStrokeFillLayers = (_a = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _a === void 0 ? void 0 : _a.strokeFill;
|
|
40
|
-
const strokeSolidTransition = (_b = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _b !== void 0 ? _b : 'none';
|
|
37
|
+
const imgStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius', 'strokeFill']);
|
|
41
38
|
(0, react_1.useEffect)(() => {
|
|
42
39
|
isInitialRef.current = false;
|
|
43
40
|
}, []);
|
|
@@ -47,41 +44,30 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
47
44
|
controlsValues
|
|
48
45
|
}, width, height);
|
|
49
46
|
const rect = (0, useElementRect_1.useElementRect)(wrapperRef);
|
|
50
|
-
const rectWidth = Math.floor((
|
|
51
|
-
const rectHeight = Math.floor((
|
|
52
|
-
const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((
|
|
53
|
-
const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((
|
|
54
|
-
const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((
|
|
55
|
-
const
|
|
56
|
-
const
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
const stroke = strokeValue
|
|
61
|
-
? (_k = (0, getFill_1.getFill)(strokeValue)) !== null && _k !== void 0 ? _k : 'transparent'
|
|
47
|
+
const rectWidth = Math.floor((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
|
|
48
|
+
const rectHeight = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0);
|
|
49
|
+
const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _c === void 0 ? void 0 : _c.radius, itemRadius);
|
|
50
|
+
const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _d === void 0 ? void 0 : _d.strokeWidth, itemStrokeWidth);
|
|
51
|
+
const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _e === void 0 ? void 0 : _e.angle, itemAngle);
|
|
52
|
+
const strokeFill = (_h = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = (_f = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _f === void 0 ? void 0 : _f.strokeFill) === null || _g === void 0 ? void 0 : _g[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _h !== void 0 ? _h : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
|
|
53
|
+
const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.opacity, itemOpacity);
|
|
54
|
+
const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_k = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _k === void 0 ? void 0 : _k.blur, itemBlur);
|
|
55
|
+
const stroke = strokeFill
|
|
56
|
+
? (_l = (0, getFill_1.getFill)(strokeFill)) !== null && _l !== void 0 ? _l : 'transparent'
|
|
62
57
|
: 'transparent';
|
|
63
|
-
const inlineStyles = {
|
|
64
|
-
|
|
58
|
+
const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? {
|
|
59
|
+
borderColor: stroke,
|
|
65
60
|
borderWidth: `${strokeWidth * 100}vw`,
|
|
66
|
-
|
|
67
|
-
|
|
61
|
+
borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
|
|
62
|
+
borderStyle: 'solid',
|
|
63
|
+
} : {})), { transition: (_m = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
|
|
68
64
|
const isInteractive = opacity !== 0;
|
|
69
65
|
(0, react_1.useEffect)(() => {
|
|
70
66
|
onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
|
|
71
67
|
}, [isInteractive, onVisibilityChange]);
|
|
72
|
-
return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
'--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
|
|
76
|
-
} : {})) : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_p = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _p !== void 0 ? _p : 'none' }), children: [hasGLEffect && isFXAllowed
|
|
77
|
-
? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
|
|
78
|
-
: ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.params.url })), (0, jsx_runtime_1.jsx)("div", { className: `image-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
|
|
79
|
-
backgroundPosition: 'center',
|
|
80
|
-
backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
|
|
81
|
-
backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
|
|
82
|
-
} : {
|
|
83
|
-
background: stroke,
|
|
84
|
-
})) : { background: stroke })) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
68
|
+
return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_o = item.link) === null || _o === void 0 ? void 0 : _o.url, target: (_p = item.link) === null || _p === void 0 ? void 0 : _p.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none' }), children: hasGLEffect && isFXAllowed
|
|
69
|
+
? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
|
|
70
|
+
: ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.params.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
85
71
|
.image-wrapper-${item.id} {
|
|
86
72
|
position: absolute;
|
|
87
73
|
width: 100%;
|
|
@@ -111,18 +97,6 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
111
97
|
border-width: 0;
|
|
112
98
|
box-sizing: border-box;
|
|
113
99
|
}
|
|
114
|
-
.image-border-${item.id} {
|
|
115
|
-
position: absolute;
|
|
116
|
-
inset: 0;
|
|
117
|
-
border-radius: inherit;
|
|
118
|
-
pointer-events: none;
|
|
119
|
-
z-index: 2;
|
|
120
|
-
-webkit-mask:
|
|
121
|
-
linear-gradient(#fff 0 0) content-box,
|
|
122
|
-
linear-gradient(#fff 0 0);
|
|
123
|
-
-webkit-mask-composite: xor;
|
|
124
|
-
mask-composite: exclude;
|
|
125
|
-
}
|
|
126
100
|
.image-${item.id} {
|
|
127
101
|
border: solid;
|
|
128
102
|
border-color: transparent;
|
|
@@ -19,7 +19,7 @@ const useItemFXData_1 = require("../../../common/useItemFXData");
|
|
|
19
19
|
const getFill_1 = require("../../../utils/getFill");
|
|
20
20
|
const useExemplary_1 = require("../../../common/useExemplary");
|
|
21
21
|
const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
|
|
22
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
22
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
23
23
|
const id = (0, react_1.useId)();
|
|
24
24
|
const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
|
|
25
25
|
const [isVideoPlaying, setIsVideoPlaying] = (0, react_1.useState)(false);
|
|
@@ -44,20 +44,15 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
44
44
|
const scrollPlayback = params.scrollPlayback;
|
|
45
45
|
const hasScrollPlayback = scrollPlayback !== null;
|
|
46
46
|
const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
|
|
47
|
-
const videoStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius']);
|
|
48
|
-
const
|
|
49
|
-
const
|
|
50
|
-
const
|
|
51
|
-
const
|
|
52
|
-
const
|
|
53
|
-
const
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
const strokeValue = stateStrokeFillLayers
|
|
57
|
-
? (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStrokeFillLayers[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])
|
|
58
|
-
: itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
|
|
59
|
-
const stroke = strokeValue
|
|
60
|
-
? (_k = (0, getFill_1.getFill)(strokeValue)) !== null && _k !== void 0 ? _k : 'transparent'
|
|
47
|
+
const videoStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius', 'strokeFill']);
|
|
48
|
+
const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _c === void 0 ? void 0 : _c.angle, itemAngle);
|
|
49
|
+
const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _d === void 0 ? void 0 : _d.opacity, itemOpacity);
|
|
50
|
+
const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _e === void 0 ? void 0 : _e.blur, itemBlur);
|
|
51
|
+
const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.strokeWidth, itemStrokeWidth);
|
|
52
|
+
const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _g === void 0 ? void 0 : _g.radius, itemRadius);
|
|
53
|
+
const strokeFill = (_k = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = (_h = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.styles) === null || _h === void 0 ? void 0 : _h.strokeFill) === null || _j === void 0 ? void 0 : _j[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _k !== void 0 ? _k : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
|
|
54
|
+
const stroke = strokeFill
|
|
55
|
+
? (_l = (0, getFill_1.getFill)(strokeFill)) !== null && _l !== void 0 ? _l : 'transparent'
|
|
61
56
|
: 'transparent';
|
|
62
57
|
(0, react_1.useEffect)(() => {
|
|
63
58
|
isInitialRef.current = false;
|
|
@@ -68,11 +63,12 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
68
63
|
controls: controlsValues
|
|
69
64
|
}, width, height);
|
|
70
65
|
(0, useRegisterResize_1.useRegisterResize)(ref, onResize);
|
|
71
|
-
const inlineStyles = {
|
|
72
|
-
borderRadius: `${radius * 100}vw`,
|
|
66
|
+
const inlineStyles = Object.assign(Object.assign({ borderRadius: `${radius * 100}vw` }, (strokeWidth !== undefined ? {
|
|
73
67
|
borderWidth: `${strokeWidth * 100}vw`,
|
|
74
|
-
|
|
75
|
-
|
|
68
|
+
borderColor: stroke,
|
|
69
|
+
borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
|
|
70
|
+
borderStyle: 'solid'
|
|
71
|
+
} : {})), { transition: (_m = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
|
|
76
72
|
const isInteractive = opacity !== 0;
|
|
77
73
|
(0, react_1.useEffect)(() => {
|
|
78
74
|
onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
|
|
@@ -95,11 +91,13 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
95
91
|
observer.observe(ref);
|
|
96
92
|
return () => observer.disconnect();
|
|
97
93
|
}, [videoRef, ref, userPaused, isVideoInteracted]);
|
|
98
|
-
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
94
|
+
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_o = item.link) === null || _o === void 0 ? void 0 : _o.url, target: (_p = item.link) === null || _p === void 0 ? void 0 : _p.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
|
|
95
|
+
opacity,
|
|
96
|
+
transform: `rotate(${angle}deg)`,
|
|
97
|
+
filter: `blur(${blur * 100}vw)`,
|
|
98
|
+
willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
|
|
99
|
+
transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none'
|
|
100
|
+
}, children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.params.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_r = item.params.coverUrl) !== null && _r !== void 0 ? _r : '', ref: setVideoRef, autoPlay: params.play === 'auto', preload: "auto", onClick: () => {
|
|
103
101
|
setIsVideoInteracted(true);
|
|
104
102
|
}, muted: params.muted, onPlay: () => {
|
|
105
103
|
setIsVideoPlaying(true);
|
|
@@ -122,7 +120,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
122
120
|
return;
|
|
123
121
|
setIsVideoInteracted(true);
|
|
124
122
|
videoRef.play();
|
|
125
|
-
}, src: (
|
|
123
|
+
}, src: (_s = item.params.coverUrl) !== null && _s !== void 0 ? _s : '', className: `video-cover-${item.id}`, onClick: () => {
|
|
126
124
|
if (!videoRef)
|
|
127
125
|
return;
|
|
128
126
|
setIsVideoInteracted(true);
|
|
@@ -137,13 +135,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
137
135
|
else {
|
|
138
136
|
videoRef.play();
|
|
139
137
|
}
|
|
140
|
-
} })))] })), (0, jsx_runtime_1.jsx)(
|
|
141
|
-
backgroundPosition: 'center',
|
|
142
|
-
backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
|
|
143
|
-
backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
|
|
144
|
-
} : {
|
|
145
|
-
background: stroke,
|
|
146
|
-
})) : { background: stroke })) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
138
|
+
} })))] }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
147
139
|
.video-wrapper-${item.id} {
|
|
148
140
|
position: absolute;
|
|
149
141
|
overflow: hidden;
|
|
@@ -195,9 +187,9 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
195
187
|
}
|
|
196
188
|
.video-${item.id} {
|
|
197
189
|
border: solid;
|
|
198
|
-
border-color:
|
|
199
|
-
border-
|
|
200
|
-
border-
|
|
190
|
+
border-color: ${stroke};
|
|
191
|
+
border-radius: ${radius * 100}vw;
|
|
192
|
+
border-width: ${strokeWidth * 100}vw;
|
|
201
193
|
}
|
|
202
194
|
.video-playback-wrapper {
|
|
203
195
|
display: flex;
|
|
@@ -19,55 +19,44 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
|
|
|
19
19
|
const id = (0, react_1.useId)();
|
|
20
20
|
const { fill: itemFill, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
|
|
21
21
|
const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
|
|
22
|
-
const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur']);
|
|
22
|
+
const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur', 'strokeFill']);
|
|
23
23
|
const stateFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['fill']);
|
|
24
24
|
const stateFillLayers = (_a = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.styles) === null || _a === void 0 ? void 0 : _a.fill;
|
|
25
25
|
const solidTransition = (_b = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.transition) !== null && _b !== void 0 ? _b : 'none';
|
|
26
|
-
const
|
|
27
|
-
const stateStrokeFillLayers = (_c = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _c === void 0 ? void 0 : _c.strokeFill;
|
|
28
|
-
const strokeSolidTransition = (_d = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _d !== void 0 ? _d : 'none';
|
|
29
|
-
const styles = (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _e !== void 0 ? _e : {};
|
|
26
|
+
const styles = (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _c !== void 0 ? _c : {};
|
|
30
27
|
const [ref, setRef] = (0, react_1.useState)(null);
|
|
31
28
|
(0, useRegisterResize_1.useRegisterResize)(ref, onResize);
|
|
32
29
|
const backdropBlur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.backdropBlur, itemBackdropBlur);
|
|
33
30
|
const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.radius, itemRadius);
|
|
34
31
|
const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.strokeWidth, itemStrokeWidth);
|
|
32
|
+
const strokeFill = (_e = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = styles === null || styles === void 0 ? void 0 : styles.strokeFill) === null || _d === void 0 ? void 0 : _d[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _e !== void 0 ? _e : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
|
|
35
33
|
const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.angle, itemAngle);
|
|
36
34
|
const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.blur, itemBlur);
|
|
37
35
|
const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
|
|
38
|
-
const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_f = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _f !== void 0 ? _f : []) || (strokeWidth !== 0 && (0, areFillsVisible_1.areFillsVisible)((_g =
|
|
36
|
+
const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_f = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _f !== void 0 ? _f : []) || (strokeWidth !== 0 && (0, areFillsVisible_1.areFillsVisible)((_g = strokeFill !== null && strokeFill !== void 0 ? strokeFill : itemStrokeFill) !== null && _g !== void 0 ? _g : []));
|
|
39
37
|
(0, react_1.useEffect)(() => {
|
|
40
38
|
onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
|
|
41
39
|
}, [isInteractive, onVisibilityChange]);
|
|
42
|
-
const
|
|
43
|
-
? (0,
|
|
44
|
-
: itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
|
|
45
|
-
const stroke = strokeValue
|
|
46
|
-
? (_h = (0, getFill_1.getFill)(strokeValue)) !== null && _h !== void 0 ? _h : 'transparent'
|
|
40
|
+
const stroke = strokeFill
|
|
41
|
+
? (_h = (0, getFill_1.getFill)(strokeFill)) !== null && _h !== void 0 ? _h : 'transparent'
|
|
47
42
|
: 'transparent';
|
|
48
|
-
return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_j = item.link) === null || _j === void 0 ? void 0 : _j.url, target: (_k = item.link) === null || _k === void 0 ? void 0 : _k.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_j = item.link) === null || _j === void 0 ? void 0 : _j.url, target: (_k = item.link) === null || _k === void 0 ? void 0 : _k.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeFill ? Object.assign({ borderColor: stroke, borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0, borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit', borderStyle: 'solid' }, (strokeFill.type === 'image' ? {
|
|
49
44
|
backgroundPosition: 'center',
|
|
50
|
-
backgroundSize:
|
|
51
|
-
backgroundRepeat:
|
|
45
|
+
backgroundSize: strokeFill.behavior === 'repeat' ? `${strokeFill.backgroundSize}%` : strokeFill.behavior,
|
|
46
|
+
backgroundRepeat: strokeFill.behavior === 'repeat' ? 'repeat' : 'no-repeat'
|
|
52
47
|
} : {})) : {})), { borderRadius: `${radius * 100}vw` }), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
|
|
53
48
|
? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
|
|
54
|
-
: {})), { transition: (_l = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _l !== void 0 ? _l : 'none' }), children:
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
: fill;
|
|
66
|
-
const background = value
|
|
67
|
-
? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
|
|
68
|
-
: 'transparent';
|
|
69
|
-
return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition }));
|
|
70
|
-
})] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
49
|
+
: {})), { transition: (_l = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _l !== void 0 ? _l : 'none' }), children: itemFill && itemFill.map((fill, i) => {
|
|
50
|
+
var _a, _b;
|
|
51
|
+
const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
|
|
52
|
+
const value = stateFillLayer
|
|
53
|
+
? ((_a = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateFillLayer, fill)) !== null && _a !== void 0 ? _a : fill)
|
|
54
|
+
: fill;
|
|
55
|
+
const background = value
|
|
56
|
+
? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
|
|
57
|
+
: 'transparent';
|
|
58
|
+
return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition, radius: radius, strokeWidth: strokeWidth }, `fill-${i}-${fill.id}`));
|
|
59
|
+
}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
71
60
|
.rectangle-${item.id} {
|
|
72
61
|
position: absolute;
|
|
73
62
|
width: 100%;
|
|
@@ -90,22 +79,10 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
|
|
|
90
79
|
z-index: 1;
|
|
91
80
|
background-position: center;
|
|
92
81
|
},
|
|
93
|
-
.rectangle-border-${item.id} {
|
|
94
|
-
position: absolute;
|
|
95
|
-
inset: 0;
|
|
96
|
-
border-radius: inherit;
|
|
97
|
-
pointer-events: none;
|
|
98
|
-
z-index: 2;
|
|
99
|
-
-webkit-mask:
|
|
100
|
-
linear-gradient(#fff 0 0) content-box,
|
|
101
|
-
linear-gradient(#fff 0 0);
|
|
102
|
-
-webkit-mask-composite: xor;
|
|
103
|
-
mask-composite: exclude;
|
|
104
|
-
}
|
|
105
82
|
` })] }) }));
|
|
106
83
|
};
|
|
107
84
|
exports.RectangleItem = RectangleItem;
|
|
108
|
-
function Fill({ fill, itemId, background, solidTransition }) {
|
|
85
|
+
function Fill({ fill, itemId, background, solidTransition, radius, strokeWidth, key }) {
|
|
109
86
|
const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
|
|
110
87
|
return ((0, jsx_runtime_1.jsx)("div", { className: fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (fill.type === 'solid' ? { background, transition: solidTransition } : {})), (fill.type === 'image'
|
|
111
88
|
? {
|
|
@@ -115,6 +92,6 @@ function Fill({ fill, itemId, background, solidTransition }) {
|
|
|
115
92
|
backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
|
|
116
93
|
opacity: fill.opacity
|
|
117
94
|
}
|
|
118
|
-
: { background })), { position: 'absolute',
|
|
95
|
+
: { background })), { position: 'absolute', mixBlendMode: fill.blendMode, top: 0, left: 0, borderRadius: `calc(${radius * 100}vw - ${strokeWidth * 100}vw)`, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, key));
|
|
119
96
|
}
|
|
120
97
|
;
|