@cntrl-site/sdk-nextjs 1.8.27-alpha.1 → 1.8.28

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.
Files changed (9) hide show
  1. package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js +4 -4
  2. package/lib/components/items/EmbedVideoItem/VimeoEmbed.js +14 -18
  3. package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js +7 -11
  4. package/lib/components/items/FileItem/VideoItem.js +8 -77
  5. package/package.json +2 -2
  6. package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx +4 -4
  7. package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx +17 -19
  8. package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx +14 -18
  9. package/src/components/items/FileItem/VideoItem.tsx +39 -122
package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js CHANGED
@@ -33,7 +33,7 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
33
33
  const fontCustomTags = new sdk_1.FontFaceGenerator((_a = fonts === null || fonts === void 0 ? void 0 : fonts.custom) !== null && _a !== void 0 ? _a : []).generate();
34
34
  const { anchor, blur: itemBlur, opacity: itemOpacity } = (0, useCodeEmbedItem_1.useCodeEmbedItem)(item, sectionId);
35
35
  const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
36
- const { html } = item.commonParams;
36
+ const html = atob(item.commonParams.html);
37
37
  const [ref, setRef] = (0, react_1.useState)(null);
38
38
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
39
39
  const pos = stylesMap[anchor];
@@ -55,7 +55,7 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
55
55
  script.parentNode.removeChild(script);
56
56
  ref.appendChild(newScript);
57
57
  }
58
- }, [item.commonParams.html]);
58
+ }, [html]);
59
59
  (0, react_1.useEffect)(() => {
60
60
  if (!ref)
61
61
  return;
@@ -73,10 +73,10 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
73
73
  padding: 0 !important;
74
74
  }
75
75
  </style>
76
- ${item.commonParams.html}
76
+ ${html}
77
77
  `;
78
78
  iframe.srcdoc = htmlWithStyles;
79
- }, [item.commonParams.html, item.commonParams.iframe, ref]);
79
+ }, [html, item.commonParams.iframe, ref]);
80
80
  const isInteractive = opacity !== 0;
81
81
  (0, react_1.useEffect)(() => {
82
82
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
package/lib/components/items/EmbedVideoItem/VimeoEmbed.js CHANGED
@@ -24,18 +24,15 @@ const useRegisterResize_1 = require("../../../common/useRegisterResize");
24
24
  const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
25
25
  const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
26
26
  const LinkWrapper_1 = require("../LinkWrapper");
27
- const useLayoutContext_1 = require("../../useLayoutContext");
28
27
  const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
29
28
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
30
29
  const id = (0, react_1.useId)();
31
30
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
32
31
  const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
33
- const layoutId = (0, useLayoutContext_1.useLayoutContext)();
34
32
  const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
35
33
  const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
36
34
  const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
37
- const { url } = item.commonParams;
38
- const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
35
+ const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
39
36
  const [ref, setRef] = (0, react_1.useState)(null);
40
37
  const [imgRef, setImgRef] = (0, react_1.useState)(null);
41
38
  const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
@@ -47,25 +44,24 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
47
44
  const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _c === void 0 ? void 0 : _c.opacity, itemOpacity);
48
45
  const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
49
46
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
50
- const validUrl = (0, react_1.useMemo)(() => {
51
- if (!layoutParams)
52
- return url;
47
+ const getValidVimeoUrl = (url) => {
53
48
  const validURL = new URL(url);
54
- validURL.searchParams.append('controls', String(layoutParams.controls));
55
- validURL.searchParams.append('autoplay', String(layoutParams.play === 'auto'));
56
- validURL.searchParams.append('muted', String(layoutParams.muted));
57
- validURL.searchParams.append('loop', String(layoutParams.loop));
58
- validURL.searchParams.append('pip', String(layoutParams.pictureInPicture));
49
+ validURL.searchParams.append('controls', String(controls));
50
+ validURL.searchParams.append('autoplay', String(play === 'auto'));
51
+ validURL.searchParams.append('muted', String(muted));
52
+ validURL.searchParams.append('loop', String(loop));
53
+ validURL.searchParams.append('pip', String(pictureInPicture));
59
54
  validURL.searchParams.append('title', '0');
60
55
  validURL.searchParams.append('byline', '0');
61
56
  validURL.searchParams.append('portrait', '0');
62
57
  validURL.searchParams.append('autopause', 'false');
63
58
  return validURL.href;
64
- }, [url, layoutParams]);
59
+ };
60
+ const validUrl = getValidVimeoUrl(url);
65
61
  (0, react_1.useEffect)(() => {
66
- if (!vimeoPlayer || !imgRef || !layoutParams)
62
+ if (!vimeoPlayer || !imgRef)
67
63
  return;
68
- if (layoutParams.play === 'on-click') {
64
+ if (play === 'on-click') {
69
65
  setIsCoverVisible(true);
70
66
  }
71
67
  vimeoPlayer.on('pause', (e) => {
@@ -117,11 +113,11 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
117
113
  });
118
114
  }, [interactionCtrl, vimeoPlayer]);
119
115
  return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
120
- if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
116
+ if (!vimeoPlayer || play !== 'on-hover')
121
117
  return;
122
118
  vimeoPlayer.play();
123
119
  }, onMouseLeave: () => {
124
- if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
120
+ if (!vimeoPlayer || play !== 'on-hover')
125
121
  return;
126
122
  vimeoPlayer.pause();
127
123
  }, children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
@@ -133,7 +129,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
133
129
  width: '100%',
134
130
  top: '0',
135
131
  left: '0'
136
- }, alt: "Cover img" })), layoutParams && (!layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
132
+ }, alt: "Cover img" })), (!item.commonParams.controls && (play === 'on-click' || play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
137
133
  position: 'absolute',
138
134
  height: '100%',
139
135
  width: '100%',
package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js CHANGED
@@ -16,14 +16,11 @@ const useCntrlContext_1 = require("../../../provider/useCntrlContext");
16
16
  const useYouTubeIframeApi_1 = require("../../../utils/Youtube/useYouTubeIframeApi");
17
17
  const useRegisterResize_1 = require("../../../common/useRegisterResize");
18
18
  const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
19
- const useLayoutContext_1 = require("../../useLayoutContext");
20
19
  const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
21
20
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
22
21
  const id = (0, react_1.useId)();
23
22
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
24
- const { url } = item.commonParams;
25
- const layoutId = (0, useLayoutContext_1.useLayoutContext)();
26
- const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
23
+ const { play, controls, url } = item.commonParams;
27
24
  const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
28
25
  const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
29
26
  const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
@@ -46,9 +43,8 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
46
43
  (0, react_1.useEffect)(() => {
47
44
  const newUrl = new URL(url);
48
45
  const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
49
- if (!YT || !videoId || !div || !layoutParams)
46
+ if (!YT || !videoId || !div)
50
47
  return;
51
- const { play, controls } = layoutParams;
52
48
  const placeholder = document.createElement('div');
53
49
  div.appendChild(placeholder);
54
50
  const player = new YT.Player(placeholder, {
@@ -82,7 +78,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
82
78
  player.destroy();
83
79
  (_a = placeholder.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(placeholder);
84
80
  };
85
- }, [YT, div, layoutParams]);
81
+ }, [YT, div]);
86
82
  const onCoverClick = () => {
87
83
  if (!player || !imgRef)
88
84
  return;
@@ -90,10 +86,10 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
90
86
  setIsCoverVisible(false);
91
87
  };
92
88
  (0, react_1.useEffect)(() => {
93
- if (layoutParams && layoutParams.play === 'on-click' && !layoutParams.controls) {
89
+ if (play === 'on-click' && !controls) {
94
90
  setIsCoverVisible(true);
95
91
  }
96
- }, [layoutParams]);
92
+ }, []);
97
93
  (0, react_1.useEffect)(() => {
98
94
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
99
95
  if (!isInteractive && player) {
@@ -115,11 +111,11 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
115
111
  });
116
112
  }, [interactionCtrl, player]);
117
113
  return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
118
- if (!player || !layoutParams || layoutParams.play !== 'on-hover')
114
+ if (!player || play !== 'on-hover')
119
115
  return;
120
116
  player.playVideo();
121
117
  }, onMouseLeave: () => {
122
- if (!player || !layoutParams || layoutParams.play !== 'on-hover')
118
+ if (!player || play !== 'on-hover')
123
119
  return;
124
120
  player.pauseVideo();
125
121
  }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
package/lib/components/items/FileItem/VideoItem.js CHANGED
@@ -21,23 +21,18 @@ const useVideoFx_1 = require("../../../utils/effects/useVideoFx");
21
21
  const useElementRect_1 = require("../../../utils/useElementRect");
22
22
  const useItemFXData_1 = require("../../../common/useItemFXData");
23
23
  const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
24
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
24
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
25
25
  const id = (0, react_1.useId)();
26
26
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
27
27
  const layoutId = (0, useLayoutContext_1.useLayoutContext)();
28
28
  const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeColor: itemStrokeColor, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
29
- const [isVideoPlaying, setIsVideoPlaying] = (0, react_1.useState)(false);
30
- const isScrollPausedRef = (0, react_1.useRef)(false);
31
- const [userPaused, setUserPaused] = (0, react_1.useState)(false);
32
- const [isVideoInteracted, setIsVideoInteracted] = (0, react_1.useState)(false);
33
29
  const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
34
30
  const [ref, setRef] = (0, react_1.useState)(null);
35
- const [videoRef, setVideoRef] = (0, react_1.useState)(null);
31
+ const videoRef = (0, react_1.useRef)(null);
36
32
  const fxCanvas = (0, react_1.useRef)(null);
37
33
  const { url, hasGLEffect } = item.commonParams;
38
34
  const isInitialRef = (0, react_1.useRef)(true);
39
35
  const area = layoutId ? item.area[layoutId] : null;
40
- const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
41
36
  const exemplary = (_a = layouts === null || layouts === void 0 ? void 0 : layouts.find(l => l.id === layoutId)) === null || _a === void 0 ? void 0 : _a.exemplary;
42
37
  const width = area && exemplary ? area.width * exemplary : 0;
43
38
  const height = area && exemplary ? area.height * exemplary : 0;
@@ -45,7 +40,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
45
40
  const rect = (0, useElementRect_1.useElementRect)(ref);
46
41
  const rectWidth = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0);
47
42
  const rectHeight = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0);
48
- const scrollPlayback = layoutParams ? layoutParams.scrollPlayback : null;
43
+ const scrollPlayback = layoutId ? item.layoutParams[layoutId].scrollPlayback : null;
49
44
  const layoutValues = [item.area, item.layoutParams];
50
45
  const hasScrollPlayback = scrollPlayback !== null;
51
46
  const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
@@ -74,58 +69,11 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
74
69
  (0, react_1.useEffect)(() => {
75
70
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
76
71
  }, [isInteractive, onVisibilityChange]);
77
- (0, react_1.useEffect)(() => {
78
- if (!layoutParams || !videoRef || layoutParams.play !== 'on-click' || !ref)
79
- return;
80
- const observer = new IntersectionObserver(([entry]) => {
81
- if (userPaused || !isVideoInteracted)
82
- return;
83
- if (entry.isIntersecting) {
84
- isScrollPausedRef.current = false;
85
- videoRef.play();
86
- }
87
- else {
88
- isScrollPausedRef.current = true;
89
- videoRef.pause();
90
- }
91
- });
92
- observer.observe(ref);
93
- return () => observer.disconnect();
94
- }, [layoutParams, videoRef, ref, userPaused, isVideoInteracted]);
95
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.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) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : '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: (_p = item.commonParams.coverUrl) !== null && _p !== void 0 ? _p : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
96
- setIsVideoInteracted(true);
97
- }, muted: layoutParams.muted, onPlay: () => {
98
- setIsVideoPlaying(true);
99
- setUserPaused(false);
100
- }, onPause: () => {
101
- if (!isScrollPausedRef.current) {
102
- setUserPaused(true);
103
- }
104
- setIsVideoPlaying(false);
105
- }, onMouseEnter: () => {
106
- if (!videoRef || layoutParams.play !== 'on-hover')
107
- return;
108
- videoRef.play();
109
- }, onMouseLeave: () => {
110
- if (!videoRef || layoutParams.play !== 'on-hover')
111
- return;
112
- videoRef.pause();
113
- }, loop: true, controls: layoutParams.controls, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }), (layoutParams.play === 'on-click' || layoutParams.play === 'on-hover') && item.commonParams.coverUrl && !isVideoInteracted && ((0, jsx_runtime_1.jsx)("img", { src: (_q = item.commonParams.coverUrl) !== null && _q !== void 0 ? _q : '', className: `video-cover-${item.id}`, onClick: () => {
114
- if (!videoRef)
115
- return;
116
- setIsVideoInteracted(true);
117
- videoRef.play();
118
- } })), (layoutParams.play === 'on-click' && !layoutParams.controls && ((0, jsx_runtime_1.jsx)("div", { className: `video-overlay-${item.id}`, onClick: () => {
119
- if (!videoRef)
120
- return;
121
- setIsVideoInteracted(true);
122
- if (isVideoPlaying) {
123
- videoRef.pause();
124
- }
125
- else {
126
- videoRef.play();
127
- }
128
- } })))] }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
72
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, children: [(0, jsx_runtime_1.jsx)("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) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: hasScrollPlayback
73
+ ? ((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}` }))
74
+ : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: hasGLEffect && isFXAllowed
75
+ ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight }))
76
+ : ((0, jsx_runtime_1.jsx)("video", { poster: (_p = item.commonParams.coverUrl) !== null && _p !== void 0 ? _p : '', ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
129
77
  .video-wrapper-${item.id} {
130
78
  position: absolute;
131
79
  overflow: hidden;
@@ -134,23 +82,6 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
134
82
  box-sizing: border-box;
135
83
  opacity: ${opacity};
136
84
  }
137
- .video-overlay-${item.id} {
138
- position: absolute;
139
- top: 0;
140
- left: 0;
141
- cursor: pointer;
142
- width: 100%;
143
- height: 100%;
144
- }
145
- .video-cover-${item.id} {
146
- position: absolute;
147
- top: 0;
148
- left: 0;
149
- cursor: pointer;
150
- width: 100%;
151
- height: 100%;
152
- object-fit: cover;
153
- }
154
85
  .video {
155
86
  width: 100%;
156
87
  height: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.8.27-alpha.1",
3
+ "version": "1.8.28",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -31,7 +31,7 @@
31
31
  "@antfu/eslint-config": "^3.8.0",
32
32
  "@cntrl-site/color": "^1.0.0",
33
33
  "@cntrl-site/effects": "^1.4.0",
34
- "@cntrl-site/sdk": "^1.22.19-alpha.1",
34
+ "@cntrl-site/sdk": "^1.22.18",
35
35
  "@types/vimeo__player": "^2.18.0",
36
36
  "@vimeo/player": "^2.25.0",
37
37
  "html-react-parser": "^3.0.1",
package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx CHANGED
@@ -28,7 +28,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
28
28
  const fontCustomTags = new FontFaceGenerator(fonts?.custom ?? []).generate();
29
29
  const { anchor, blur: itemBlur, opacity: itemOpacity } = useCodeEmbedItem(item, sectionId);
30
30
  const itemAngle = useItemAngle(item, sectionId);
31
- const { html } = item.commonParams;
31
+ const html = atob(item.commonParams.html);
32
32
  const [ref, setRef] = useState<HTMLDivElement | null>(null);
33
33
  useRegisterResize(ref, onResize);
34
34
  const pos = stylesMap[anchor];
@@ -50,7 +50,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
50
50
  script.parentNode!.removeChild(script);
51
51
  ref.appendChild(newScript);
52
52
  }
53
- }, [item.commonParams.html]);
53
+ }, [html]);
54
54
 
55
55
  useEffect(() => {
56
56
  if (!ref) return;
@@ -67,10 +67,10 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
67
67
  padding: 0 !important;
68
68
  }
69
69
  </style>
70
- ${item.commonParams.html}
70
+ ${html}
71
71
  `;
72
72
  iframe.srcdoc = htmlWithStyles;
73
- }, [item.commonParams.html, item.commonParams.iframe, ref]);
73
+ }, [html, item.commonParams.iframe, ref]);
74
74
 
75
75
  const isInteractive = opacity !== 0;
76
76
  useEffect(() => {
package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx CHANGED
@@ -7,11 +7,10 @@ import { useEffect, useId, useMemo, useState } from 'react';
7
7
  import JSXStyle from 'styled-jsx/style';
8
8
  import { useItemAngle } from '../useItemAngle';
9
9
  import { useCntrlContext } from '../../../provider/useCntrlContext';
10
- import { useRegisterResize } from '../../../common/useRegisterResize';
10
+ import { useRegisterResize } from "../../../common/useRegisterResize";
11
11
  import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
12
12
  import { useEmbedVideoItem } from './useEmbedVideoItem';
13
13
  import { LinkWrapper } from '../LinkWrapper';
14
- import { useLayoutContext } from '../../useLayoutContext';
15
14
 
16
15
  export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
17
16
  const id = useId();
@@ -21,12 +20,10 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
21
20
  blur: itemBlur,
22
21
  opacity: itemOpacity
23
22
  } = useEmbedVideoItem(item, sectionId);
24
- const layoutId = useLayoutContext();
25
23
  const [iframeRef, setIframeRef] = useState<HTMLIFrameElement | null>(null);
26
24
  const vimeoPlayer = useMemo(() => iframeRef ? new Player(iframeRef) : undefined, [iframeRef]);
27
25
  const itemAngle = useItemAngle(item, sectionId);
28
- const { url } = item.commonParams;
29
- const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
26
+ const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
30
27
  const [ref, setRef] = useState<HTMLDivElement | null>(null);
31
28
  const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
32
29
  const [isCoverVisible, setIsCoverVisible] = useState(false);
@@ -38,24 +35,25 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
38
35
  const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);
39
36
  const radius = getStyleFromItemStateAndParams(frameStateParams?.styles?.radius, itemRadius);
40
37
  useRegisterResize(ref, onResize);
41
- const validUrl = useMemo(() => {
42
- if (!layoutParams) return url;
38
+ const getValidVimeoUrl = (url: string): string => {
43
39
  const validURL = new URL(url);
44
- validURL.searchParams.append('controls', String(layoutParams.controls));
45
- validURL.searchParams.append('autoplay', String(layoutParams.play === 'auto'));
46
- validURL.searchParams.append('muted', String(layoutParams.muted));
47
- validURL.searchParams.append('loop', String(layoutParams.loop));
48
- validURL.searchParams.append('pip', String(layoutParams.pictureInPicture));
40
+ validURL.searchParams.append('controls', String(controls));
41
+ validURL.searchParams.append('autoplay', String(play === 'auto'));
42
+ validURL.searchParams.append('muted', String(muted));
43
+ validURL.searchParams.append('loop', String(loop));
44
+ validURL.searchParams.append('pip', String(pictureInPicture));
49
45
  validURL.searchParams.append('title', '0');
50
46
  validURL.searchParams.append('byline', '0');
51
47
  validURL.searchParams.append('portrait', '0');
52
48
  validURL.searchParams.append('autopause', 'false');
49
+
53
50
  return validURL.href;
54
- }, [url, layoutParams]);
51
+ };
52
+ const validUrl = getValidVimeoUrl(url);
55
53
 
56
54
  useEffect(() => {
57
- if (!vimeoPlayer || !imgRef || !layoutParams) return;
58
- if (layoutParams.play === 'on-click') {
55
+ if (!vimeoPlayer || !imgRef) return;
56
+ if (play === 'on-click') {
59
57
  setIsCoverVisible(true);
60
58
  }
61
59
  vimeoPlayer.on('pause', (e) => {
@@ -97,7 +95,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
97
95
  useEffect(() => {
98
96
  if (!vimeoPlayer || !interactionCtrl) return;
99
97
  interactionCtrl.setActionReceiver((type) => {
100
- switch (type) {
98
+ switch(type) {
101
99
  case 'play':
102
100
  vimeoPlayer.play();
103
101
  break;
@@ -120,11 +118,11 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
120
118
  transition: wrapperStateParams?.transition ?? 'none'
121
119
  }}
122
120
  onMouseEnter={() => {
123
- if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover') return;
121
+ if (!vimeoPlayer || play !== 'on-hover') return;
124
122
  vimeoPlayer.play();
125
123
  }}
126
124
  onMouseLeave={() => {
127
- if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover') return;
125
+ if (!vimeoPlayer || play !== 'on-hover') return;
128
126
  vimeoPlayer.pause();
129
127
  }}
130
128
  >
@@ -147,7 +145,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
147
145
  />
148
146
  )}
149
147
  {/* ↓ This is necessary to track clicks on an iframe. */}
150
- {layoutParams && (!layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto')) && (
148
+ {(!item.commonParams.controls && (play === 'on-click' || play === 'auto')) && (
151
149
  <div
152
150
  onClick={handleClick}
153
151
  style={{
package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx CHANGED
@@ -9,16 +9,13 @@ import { getLayoutStyles, YoutubeEmbedItem as TYoutubeEmbedItem } from '@cntrl-s
9
9
  import { useCntrlContext } from '../../../provider/useCntrlContext';
10
10
  import { useYouTubeIframeApi } from '../../../utils/Youtube/useYouTubeIframeApi';
11
11
  import { YTPlayer } from '../../../utils/Youtube/YoutubeIframeApi';
12
- import { useRegisterResize } from '../../../common/useRegisterResize';
12
+ import { useRegisterResize } from "../../../common/useRegisterResize";
13
13
  import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
14
- import { useLayoutContext } from '../../useLayoutContext';
15
14
 
16
15
  export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
17
16
  const id = useId();
18
17
  const { layouts } = useCntrlContext();
19
- const { url } = item.commonParams;
20
- const layoutId = useLayoutContext();
21
- const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
18
+ const { play, controls, url } = item.commonParams;
22
19
  const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = useEmbedVideoItem(item, sectionId);
23
20
  const itemAngle = useItemAngle(item, sectionId);
24
21
  const YT = useYouTubeIframeApi();
@@ -41,8 +38,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
41
38
  useEffect(() => {
42
39
  const newUrl = new URL(url);
43
40
  const videoId = getYoutubeId(newUrl);
44
- if (!YT || !videoId || !div || !layoutParams) return;
45
- const { play, controls } = layoutParams;
41
+ if (!YT || !videoId || !div) return;
46
42
  const placeholder = document.createElement('div');
47
43
  div.appendChild(placeholder);
48
44
  const player = new YT.Player(placeholder, {
@@ -57,7 +53,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
57
53
  if (event.data === 1) {
58
54
  setIsCoverVisible(false);
59
55
  }
60
- if (event.data === 2 || event.data === -1) {
56
+ if (event.data === 2 || event.data === -1 ) {
61
57
  setIsCoverVisible(true);
62
58
  }
63
59
  },
@@ -74,7 +70,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
74
70
  player.destroy();
75
71
  placeholder.parentElement?.removeChild(placeholder);
76
72
  };
77
- }, [YT, div, layoutParams]);
73
+ }, [YT, div]);
78
74
 
79
75
  const onCoverClick = () => {
80
76
  if (!player || !imgRef) return;
@@ -83,10 +79,10 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
83
79
  };
84
80
 
85
81
  useEffect(() => {
86
- if (layoutParams && layoutParams.play === 'on-click' && !layoutParams.controls) {
82
+ if (play === 'on-click' && !controls) {
87
83
  setIsCoverVisible(true);
88
84
  }
89
- }, [layoutParams]);
85
+ }, []);
90
86
 
91
87
  useEffect(() => {
92
88
  onVisibilityChange?.(isInteractive);
@@ -98,7 +94,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
98
94
  useEffect(() => {
99
95
  if (!player || !interactionCtrl) return;
100
96
  interactionCtrl.setActionReceiver((type) => {
101
- switch (type) {
97
+ switch(type) {
102
98
  case 'play':
103
99
  player.playVideo();
104
100
  break;
@@ -114,11 +110,11 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
114
110
  <div
115
111
  className={`embed-youtube-video-wrapper-${item.id}`}
116
112
  onMouseEnter={() => {
117
- if (!player || !layoutParams || layoutParams.play !== 'on-hover') return;
113
+ if (!player || play !== 'on-hover') return;
118
114
  player.playVideo();
119
115
  }}
120
116
  onMouseLeave={() => {
121
- if (!player || !layoutParams || layoutParams.play !== 'on-hover') return;
117
+ if (!player || play !== 'on-hover') return;
122
118
  player.pauseVideo();
123
119
  }}
124
120
  style={{
@@ -183,9 +179,9 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
183
179
  border-radius: ${layoutParams.radius * 100}vw;
184
180
  }
185
181
  `);
186
- })}
187
- `}
188
- </JSXStyle>
182
+ })}
183
+ `}</JSXStyle>
189
184
  </LinkWrapper>
190
- );
185
+ )
191
186
  };
187
+
package/src/components/items/FileItem/VideoItem.tsx CHANGED
@@ -26,18 +26,13 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
26
26
  opacity: itemOpacity,
27
27
  blur: itemBlur
28
28
  } = useFileItem(item, sectionId);
29
- const [isVideoPlaying, setIsVideoPlaying] = useState(false);
30
- const isScrollPausedRef = useRef(false);
31
- const [userPaused, setUserPaused] = useState(false);
32
- const [isVideoInteracted, setIsVideoInteracted] = useState(false);
33
29
  const itemAngle = useItemAngle(item, sectionId);
34
30
  const [ref, setRef] = useState<HTMLDivElement | null>(null);
35
- const [videoRef, setVideoRef] = useState<HTMLVideoElement | null>(null);
31
+ const videoRef = useRef<HTMLVideoElement | null>(null);
36
32
  const fxCanvas = useRef<HTMLCanvasElement | null>(null);
37
33
  const { url, hasGLEffect } = item.commonParams;
38
34
  const isInitialRef = useRef(true);
39
35
  const area = layoutId ? item.area[layoutId] : null;
40
- const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
41
36
  const exemplary = layouts?.find(l => l.id === layoutId)?.exemplary;
42
37
  const width = area && exemplary ? area.width * exemplary : 0;
43
38
  const height = area && exemplary ? area.height * exemplary : 0;
@@ -45,7 +40,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
45
40
  const rect = useElementRect(ref);
46
41
  const rectWidth = Math.floor(rect?.width ?? 0);
47
42
  const rectHeight = Math.floor(rect?.height ?? 0);
48
- const scrollPlayback = layoutParams ? layoutParams.scrollPlayback : null;
43
+ const scrollPlayback = layoutId ? item.layoutParams[layoutId].scrollPlayback : null;
49
44
  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
50
45
  const hasScrollPlayback = scrollPlayback !== null;
51
46
  const wrapperStateParams = interactionCtrl?.getState(['angle', 'opacity', 'blur']);
@@ -85,24 +80,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
85
80
  onVisibilityChange?.(isInteractive);
86
81
  }, [isInteractive, onVisibilityChange]);
87
82
 
88
- useEffect(() => {
89
- if (!layoutParams || !videoRef || layoutParams.play !== 'on-click' || !ref) return;
90
- const observer = new IntersectionObserver(
91
- ([entry]) => {
92
- if (userPaused || !isVideoInteracted) return;
93
- if (entry.isIntersecting) {
94
- isScrollPausedRef.current = false;
95
- videoRef.play();
96
- } else {
97
- isScrollPausedRef.current = true;
98
- videoRef.pause();
99
- }
100
- }
101
- );
102
- observer.observe(ref);
103
- return () => observer.disconnect();
104
- }, [layoutParams, videoRef, ref, userPaused, isVideoInteracted]);
105
-
106
83
  return (
107
84
  <LinkWrapper url={item.link?.url} target={item.link?.target}>
108
85
  <div
@@ -115,88 +92,45 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
115
92
  transition: wrapperStateParams?.transition ?? 'none'
116
93
  }}
117
94
  >
118
- {hasScrollPlayback && (
119
- <ScrollPlaybackVideo
120
- sectionId={sectionId}
121
- src={item.commonParams.url}
122
- playbackParams={scrollPlayback}
123
- style={inlineStyles}
124
- className={`video video-playback-wrapper video-${item.id}`}
125
- />
126
- )}
127
- {hasGLEffect && isFXAllowed && (
128
- <canvas
129
- style={inlineStyles}
130
- ref={fxCanvas}
131
- className={`video-canvas video-${item.id}`}
132
- width={rectWidth}
133
- height={rectHeight}
134
- />
135
- )}
136
- {!hasScrollPlayback && !hasGLEffect && layoutParams && (
137
- <>
138
- <video
139
- poster={item.commonParams.coverUrl ?? ''}
140
- ref={setVideoRef}
141
- autoPlay={layoutParams.play === 'auto'}
142
- preload="auto"
143
- onClick={() => {
144
- setIsVideoInteracted(true);
145
- }}
146
- muted={layoutParams.muted}
147
- onPlay={() => {
148
- setIsVideoPlaying(true);
149
- setUserPaused(false);
150
- }}
151
- onPause={() => {
152
- if (!isScrollPausedRef.current) {
153
- setUserPaused(true);
154
- }
155
- setIsVideoPlaying(false);
156
- }}
157
- onMouseEnter={() => {
158
- if (!videoRef || layoutParams.play !== 'on-hover') return;
159
- videoRef.play();
160
- }}
161
- onMouseLeave={() => {
162
- if (!videoRef || layoutParams.play !== 'on-hover') return;
163
- videoRef.pause();
164
- }}
165
- loop
166
- controls={layoutParams.controls}
167
- playsInline
168
- className={`video video-${item.id}`}
169
- style={inlineStyles}
170
- >
171
- <source src={item.commonParams.url} />
172
- </video>
173
- {(layoutParams.play === 'on-click' || layoutParams.play === 'on-hover') && item.commonParams.coverUrl && !isVideoInteracted && (
174
- <img
175
- src={item.commonParams.coverUrl ?? ''}
176
- className={`video-cover-${item.id}`}
177
- onClick={() => {
178
- if (!videoRef) return;
179
- setIsVideoInteracted(true);
180
- videoRef.play();
181
- }}
95
+ {hasScrollPlayback
96
+ ? (
97
+ <ScrollPlaybackVideo
98
+ sectionId={sectionId}
99
+ src={item.commonParams.url}
100
+ playbackParams={scrollPlayback}
101
+ style={inlineStyles}
102
+ className={`video video-playback-wrapper video-${item.id}`}
182
103
  />
104
+ )
105
+ : (
106
+ <>
107
+ {hasGLEffect && isFXAllowed
108
+ ? (
109
+ <canvas
110
+ style={inlineStyles}
111
+ ref={fxCanvas}
112
+ className={`video-canvas video-${item.id}`}
113
+ width={rectWidth}
114
+ height={rectHeight}
115
+ />
116
+ )
117
+ : (
118
+ <video
119
+ poster={item.commonParams.coverUrl ?? ''}
120
+ ref={videoRef}
121
+ autoPlay
122
+ muted
123
+ loop
124
+ playsInline
125
+ className={`video video-${item.id}`}
126
+ style={inlineStyles}
127
+ >
128
+ <source src={item.commonParams.url} />
129
+ </video>
130
+ )}
131
+
132
+ </>
183
133
  )}
184
- {(layoutParams.play === 'on-click' && !layoutParams.controls && (
185
- <div
186
- className={`video-overlay-${item.id}`}
187
- onClick={() => {
188
- if (!videoRef) return;
189
- setIsVideoInteracted(true);
190
- if (isVideoPlaying) {
191
- videoRef.pause();
192
- } else {
193
- videoRef.play();
194
- }
195
- }}
196
- />
197
- ))}
198
- </>
199
- )}
200
134
  </div>
201
135
  <JSXStyle id={id}>{`
202
136
  .video-wrapper-${item.id} {
@@ -207,23 +141,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
207
141
  box-sizing: border-box;
208
142
  opacity: ${opacity};
209
143
  }
210
- .video-overlay-${item.id} {
211
- position: absolute;
212
- top: 0;
213
- left: 0;
214
- cursor: pointer;
215
- width: 100%;
216
- height: 100%;
217
- }
218
- .video-cover-${item.id} {
219
- position: absolute;
220
- top: 0;
221
- left: 0;
222
- cursor: pointer;
223
- width: 100%;
224
- height: 100%;
225
- object-fit: cover;
226
- }
227
144
  .video {
228
145
  width: 100%;
229
146
  height: 100%;