@cntrl-site/sdk-nextjs 1.9.51 → 1.9.53
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.
|
@@ -13,12 +13,14 @@ const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className
|
|
|
13
13
|
(0, react_1.useEffect)(() => {
|
|
14
14
|
if (!playbackParams || !articleRectObserver)
|
|
15
15
|
return;
|
|
16
|
+
const from = playbackParams.from;
|
|
17
|
+
const to = playbackParams.to;
|
|
16
18
|
return articleRectObserver.on('scroll', () => {
|
|
17
19
|
const scrollPos = articleRectObserver.getSectionScroll(sectionId);
|
|
18
|
-
const
|
|
19
|
-
setTime(toFixed(
|
|
20
|
+
const nextTime = (0, rangeMap_1.rangeMap)(scrollPos, from, to, 0, 1, true);
|
|
21
|
+
setTime(toFixed(nextTime));
|
|
20
22
|
});
|
|
21
|
-
}, [playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.from, playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.to,
|
|
23
|
+
}, [sectionId, playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.from, playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.to, articleRectObserver]);
|
|
22
24
|
const scrollVideoManager = (0, react_1.useMemo)(() => {
|
|
23
25
|
if (!containerElement)
|
|
24
26
|
return null;
|
|
@@ -22,7 +22,7 @@ const useItemFXData_1 = require("../../../common/useItemFXData");
|
|
|
22
22
|
const getFill_1 = require("../../../utils/getFill");
|
|
23
23
|
const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
|
|
24
24
|
const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
|
|
25
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
25
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
26
26
|
const id = (0, react_1.useId)();
|
|
27
27
|
const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
|
|
28
28
|
const layoutId = (0, useLayoutContext_1.useLayoutContext)();
|
|
@@ -48,17 +48,18 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
48
48
|
const rectHeight = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0);
|
|
49
49
|
const scrollPlayback = layoutParams ? layoutParams.scrollPlayback : null;
|
|
50
50
|
const layoutValues = [item.area, item.layoutParams];
|
|
51
|
-
const
|
|
51
|
+
const isHiddenOnLayout = layoutId ? ((_d = item.hidden[layoutId]) !== null && _d !== void 0 ? _d : false) : false;
|
|
52
|
+
const hasScrollPlayback = scrollPlayback !== null && !isHiddenOnLayout;
|
|
52
53
|
const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
|
|
53
54
|
const videoStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius', 'strokeFill']);
|
|
54
|
-
const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((
|
|
55
|
-
const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((
|
|
56
|
-
const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((
|
|
57
|
-
const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((
|
|
58
|
-
const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((
|
|
59
|
-
const strokeFill = (
|
|
55
|
+
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);
|
|
56
|
+
const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.opacity, itemOpacity);
|
|
57
|
+
const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _g === void 0 ? void 0 : _g.blur, itemBlur);
|
|
58
|
+
const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.strokeWidth, itemStrokeWidth);
|
|
59
|
+
const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.radius, itemRadius);
|
|
60
|
+
const strokeFill = (_m = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_l = (_k = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.styles) === null || _k === void 0 ? void 0 : _k.strokeFill) === null || _l === void 0 ? void 0 : _l[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _m !== void 0 ? _m : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
|
|
60
61
|
const stroke = strokeFill
|
|
61
|
-
? (
|
|
62
|
+
? (_o = (0, getFill_1.getFill)(strokeFill)) !== null && _o !== void 0 ? _o : 'transparent'
|
|
62
63
|
: 'transparent';
|
|
63
64
|
(0, react_1.useEffect)(() => {
|
|
64
65
|
isInitialRef.current = false;
|
|
@@ -75,7 +76,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
75
76
|
borderColor: stroke,
|
|
76
77
|
borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
|
|
77
78
|
borderStyle: 'solid'
|
|
78
|
-
} : {})), { transition: (
|
|
79
|
+
} : {})), { transition: (_p = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _p !== void 0 ? _p : 'none' });
|
|
79
80
|
const isInteractive = opacity !== 0;
|
|
80
81
|
(0, react_1.useEffect)(() => {
|
|
81
82
|
onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
|
|
@@ -98,7 +99,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
98
99
|
observer.observe(ref);
|
|
99
100
|
return () => observer.disconnect();
|
|
100
101
|
}, [layoutParams, videoRef, ref, userPaused, isVideoInteracted]);
|
|
101
|
-
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (
|
|
102
|
+
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_q = item.link) === null || _q === void 0 ? void 0 : _q.url, target: (_r = item.link) === null || _r === void 0 ? void 0 : _r.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_s = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _s !== void 0 ? _s : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.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 && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_t = item.commonParams.coverUrl) !== null && _t !== void 0 ? _t : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
|
|
102
103
|
setIsVideoInteracted(true);
|
|
103
104
|
}, muted: layoutParams.muted, onPlay: () => {
|
|
104
105
|
setIsVideoPlaying(true);
|
|
@@ -121,7 +122,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
121
122
|
return;
|
|
122
123
|
setIsVideoInteracted(true);
|
|
123
124
|
videoRef.play();
|
|
124
|
-
}, src: (
|
|
125
|
+
}, src: (_u = item.commonParams.coverUrl) !== null && _u !== void 0 ? _u : '', className: `video-cover-${item.id}`, onClick: () => {
|
|
125
126
|
if (!videoRef)
|
|
126
127
|
return;
|
|
127
128
|
setIsVideoInteracted(true);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cntrl-site/sdk-nextjs",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.53",
|
|
4
4
|
"description": "SDK for Next.js",
|
|
5
5
|
"author": "arsen@momdesign.nyc",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
"test": "jest",
|
|
19
19
|
"prebuild": "rimraf ./lib",
|
|
20
20
|
"build": "tsc --project tsconfig.build.json",
|
|
21
|
+
"build:watch": "tsc --watch --project tsconfig.build.json",
|
|
21
22
|
"prepublishOnly": "cross-env NODE_ENV=production npm run build"
|
|
22
23
|
},
|
|
23
24
|
"peerDependencies": {
|
|
@@ -30,9 +31,9 @@
|
|
|
30
31
|
"dependencies": {
|
|
31
32
|
"@antfu/eslint-config": "^3.8.0",
|
|
32
33
|
"@cntrl-site/color": "^1.0.0",
|
|
33
|
-
"@cntrl-site/components": "^0.1.
|
|
34
|
+
"@cntrl-site/components": "^0.1.34",
|
|
34
35
|
"@cntrl-site/effects": "^1.4.0",
|
|
35
|
-
"@cntrl-site/sdk": "^1.25.
|
|
36
|
+
"@cntrl-site/sdk": "^1.25.11",
|
|
36
37
|
"@types/vimeo__player": "^2.18.0",
|
|
37
38
|
"@vimeo/player": "^2.25.0",
|
|
38
39
|
"html-react-parser": "^3.0.1",
|
|
@@ -20,12 +20,14 @@ export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams,
|
|
|
20
20
|
|
|
21
21
|
useEffect(() => {
|
|
22
22
|
if (!playbackParams || !articleRectObserver) return;
|
|
23
|
+
const from = playbackParams.from;
|
|
24
|
+
const to = playbackParams.to;
|
|
23
25
|
return articleRectObserver.on('scroll', () => {
|
|
24
26
|
const scrollPos = articleRectObserver.getSectionScroll(sectionId);
|
|
25
|
-
const
|
|
26
|
-
setTime(toFixed(
|
|
27
|
+
const nextTime = rangeMap(scrollPos, from, to, 0, 1, true);
|
|
28
|
+
setTime(toFixed(nextTime));
|
|
27
29
|
});
|
|
28
|
-
}, [playbackParams?.from, playbackParams?.to,
|
|
30
|
+
}, [sectionId, playbackParams?.from, playbackParams?.to, articleRectObserver]);
|
|
29
31
|
|
|
30
32
|
const scrollVideoManager = useMemo<ScrollPlaybackVideoManager | null>(() => {
|
|
31
33
|
if (!containerElement) return null;
|
|
@@ -48,7 +48,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
|
|
|
48
48
|
const rectHeight = Math.floor(rect?.height ?? 0);
|
|
49
49
|
const scrollPlayback = layoutParams ? layoutParams.scrollPlayback : null;
|
|
50
50
|
const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
|
|
51
|
-
const
|
|
51
|
+
const isHiddenOnLayout = layoutId ? (item.hidden[layoutId] ?? false) : false;
|
|
52
|
+
const hasScrollPlayback = scrollPlayback !== null && !isHiddenOnLayout;
|
|
52
53
|
const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'opacity', 'blur']);
|
|
53
54
|
const videoStateParams = interactionCtrl?.getState<any>(['strokeWidth', 'radius', 'strokeFill']);
|
|
54
55
|
const angle = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.angle, itemAngle);
|
|
Binary file
|