@cntrl-site/sdk-nextjs 1.0.7 → 1.0.9

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.
@@ -0,0 +1,5 @@
1
+ <component name="ProjectCodeStyleConfiguration">
2
+ <state>
3
+ <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
4
+ </state>
5
+ </component>
@@ -18,7 +18,7 @@ const useRegisterResize_1 = require("../../common/useRegisterResize");
18
18
  const useLayoutContext_1 = require("../useLayoutContext");
19
19
  const ScrollPlaybackVideo_1 = require("../ScrollPlaybackVideo");
20
20
  const VideoItem = ({ item, sectionId, onResize }) => {
21
- var _a, _b;
21
+ var _a, _b, _c;
22
22
  const id = (0, react_1.useId)();
23
23
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
24
24
  const { radius, strokeWidth, strokeColor, opacity, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
@@ -32,7 +32,7 @@ const VideoItem = ({ item, sectionId, onResize }) => {
32
32
  const hasScrollPlayback = scrollPlayback !== null;
33
33
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
34
34
  const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {}));
35
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), 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}` })) : ((0, jsx_runtime_1.jsx)("video", { 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: `
35
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), 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}` })) : ((0, jsx_runtime_1.jsx)("video", { poster: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', 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: `
36
36
  .video-wrapper-${item.id} {
37
37
  position: absolute;
38
38
  overflow: hidden;
@@ -50,6 +50,7 @@ const VideoItem = ({ item, sectionId, onResize }) => {
50
50
  pointer-events: none;
51
51
  overflow: hidden;
52
52
  border-style: solid;
53
+ pointer-events: auto;
53
54
  }
54
55
  .video-${item.id} {
55
56
  border-color: ${strokeColor};
@@ -16,7 +16,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
16
16
  const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
17
17
  const useRegisterResize_1 = require("../../common/useRegisterResize");
18
18
  const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
19
- var _a, _b;
19
+ var _a, _b, _c;
20
20
  const id = (0, react_1.useId)();
21
21
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
22
22
  const { radius, blur, opacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
@@ -25,6 +25,8 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
25
25
  const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
26
26
  const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
27
27
  const [ref, setRef] = (0, react_1.useState)(null);
28
+ const [imgRef, setImgRef] = (0, react_1.useState)(null);
29
+ const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
28
30
  const layoutValues = [item.area, item.layoutParams, item.state.hover];
29
31
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
30
32
  const getValidVimeoUrl = (url) => {
@@ -41,7 +43,22 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
41
43
  return validURL.href;
42
44
  };
43
45
  const validUrl = getValidVimeoUrl(url);
44
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
46
+ (0, react_1.useEffect)(() => {
47
+ if (!vimeoPlayer || !imgRef)
48
+ return;
49
+ vimeoPlayer.on('pause', (e) => {
50
+ if (e.seconds === 0) {
51
+ setIsCoverVisible(true);
52
+ }
53
+ });
54
+ }, [vimeoPlayer, imgRef]);
55
+ const onCoverClick = () => {
56
+ if (!vimeoPlayer || !imgRef)
57
+ return;
58
+ vimeoPlayer.play();
59
+ setIsCoverVisible(false);
60
+ };
61
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
45
62
  if (!vimeoPlayer || play !== 'on-hover')
46
63
  return;
47
64
  vimeoPlayer.play();
@@ -49,7 +66,16 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
49
66
  if (!vimeoPlayer || play !== 'on-hover')
50
67
  return;
51
68
  vimeoPlayer.pause();
52
- }, children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
69
+ }, children: [(0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', style: {
70
+ display: isCoverVisible ? 'block' : 'none',
71
+ cursor: 'pointer',
72
+ position: 'absolute',
73
+ objectFit: 'cover',
74
+ height: '100%',
75
+ width: '100%',
76
+ top: '0',
77
+ left: '0'
78
+ }, alt: "Cover img" }), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
53
79
  .embed-video-wrapper-${item.id} {
54
80
  position: absolute;
55
81
  width: 100%;
@@ -17,7 +17,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
17
17
  const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
18
18
  const useRegisterResize_1 = require("../../common/useRegisterResize");
19
19
  const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
20
- var _a, _b;
20
+ var _a, _b, _c;
21
21
  const id = (0, react_1.useId)();
22
22
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
23
23
  const { play, controls, url } = item.commonParams;
@@ -26,6 +26,8 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
26
26
  const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
27
27
  const [div, setDiv] = (0, react_1.useState)(null);
28
28
  const [player, setPlayer] = (0, react_1.useState)(undefined);
29
+ const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
30
+ const [imgRef, setImgRef] = (0, react_1.useState)(null);
29
31
  const layoutValues = [item.area, item.layoutParams, item.state.hover];
30
32
  (0, useRegisterResize_1.useRegisterResize)(div, onResize);
31
33
  (0, react_1.useEffect)(() => {
@@ -42,6 +44,16 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
42
44
  controls: controls ? '1' : '0'
43
45
  },
44
46
  events: {
47
+ onStateChange: (event) => {
48
+ if (play !== 'auto')
49
+ return;
50
+ if (event.data === 1) {
51
+ setIsCoverVisible(false);
52
+ }
53
+ if (event.data === 2 || event.data === -1) {
54
+ setIsCoverVisible(true);
55
+ }
56
+ },
45
57
  onReady: (event) => {
46
58
  setPlayer(event.target);
47
59
  if (play !== 'on-click') {
@@ -57,7 +69,13 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
57
69
  (_a = placeholder.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(placeholder);
58
70
  };
59
71
  }, [YT, div]);
60
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
72
+ const onCoverClick = () => {
73
+ if (!player || !imgRef)
74
+ return;
75
+ player.playVideo();
76
+ setIsCoverVisible(false);
77
+ };
78
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
61
79
  if (!player || play !== 'on-hover')
62
80
  return;
63
81
  player.playVideo();
@@ -65,7 +83,17 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
65
83
  if (!player || play !== 'on-hover')
66
84
  return;
67
85
  player.pauseVideo();
68
- }, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
86
+ }, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: [(0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', style: {
87
+ display: isCoverVisible ? 'block' : 'none',
88
+ cursor: 'pointer',
89
+ position: 'absolute',
90
+ objectFit: 'cover',
91
+ height: '100%',
92
+ width: '100%',
93
+ top: '0',
94
+ left: '0',
95
+ zIndex: 1
96
+ }, alt: "Cover img" }), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
69
97
  .embed-youtube-video-wrapper-${item.id},
70
98
  .embed-${item.id} {
71
99
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
4
4
  "description": "SDK for Next.js",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/index.ts",
@@ -23,7 +23,7 @@
23
23
  "dependencies": {
24
24
  "@cntrl-site/color": "^1.0.0",
25
25
  "@cntrl-site/effects": "^1.2.0",
26
- "@cntrl-site/sdk": "^1.12.2",
26
+ "@cntrl-site/sdk": "^1.12.3",
27
27
  "@types/vimeo__player": "^2.18.0",
28
28
  "@vimeo/player": "^2.20.1",
29
29
  "html-react-parser": "^3.0.1",
@@ -39,7 +39,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
39
39
  style={{
40
40
  ...(opacity !== undefined ? { opacity } : {}),
41
41
  ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
42
- ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
42
+ ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})
43
43
  }}
44
44
  >
45
45
  {hasScrollPlayback ? (
@@ -52,6 +52,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
52
52
  />
53
53
  ) : (
54
54
  <video
55
+ poster={item.commonParams.coverUrl ?? ''}
55
56
  ref={videoRef}
56
57
  autoPlay
57
58
  muted
@@ -82,6 +83,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
82
83
  pointer-events: none;
83
84
  overflow: hidden;
84
85
  border-style: solid;
86
+ pointer-events: auto;
85
87
  }
86
88
  .video-${item.id} {
87
89
  border-color: ${strokeColor};
@@ -1,4 +1,4 @@
1
- import { FC, useId, useMemo, useState } from 'react';
1
+ import { FC, useEffect, useId, useMemo, useState } from 'react';
2
2
  import Player from '@vimeo/player';
3
3
  import JSXStyle from 'styled-jsx/style';
4
4
  import { ItemProps } from '../Item';
@@ -19,6 +19,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
19
19
  const angle = useItemAngle(item, sectionId);
20
20
  const { play, controls, loop, muted, pictureInPicture, url } = item.commonParams;
21
21
  const [ref, setRef] = useState<HTMLDivElement | null>(null);
22
+ const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
23
+ const [isCoverVisible, setIsCoverVisible] = useState(false);
22
24
  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
23
25
  useRegisterResize(ref, onResize);
24
26
  const getValidVimeoUrl = (url: string): string => {
@@ -37,6 +39,21 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
37
39
  }
38
40
  const validUrl = getValidVimeoUrl(url);
39
41
 
42
+ useEffect(() => {
43
+ if (!vimeoPlayer || !imgRef) return;
44
+ vimeoPlayer.on('pause', (e) => {
45
+ if (e.seconds === 0) {
46
+ setIsCoverVisible(true);
47
+ }
48
+ });
49
+ }, [vimeoPlayer, imgRef]);
50
+
51
+ const onCoverClick = () => {
52
+ if (!vimeoPlayer || !imgRef) return;
53
+ vimeoPlayer!.play();
54
+ setIsCoverVisible(false);
55
+ };
56
+
40
57
  return (
41
58
  <LinkWrapper url={item.link?.url} target={item.link?.target}>
42
59
  <div
@@ -56,6 +73,22 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
56
73
  vimeoPlayer.pause();
57
74
  }}
58
75
  >
76
+ <img
77
+ ref={setImgRef}
78
+ onClick={() => onCoverClick()}
79
+ src={item.commonParams.coverUrl ?? ''}
80
+ style={{
81
+ display: isCoverVisible ? 'block' : 'none',
82
+ cursor: 'pointer',
83
+ position: 'absolute',
84
+ objectFit: 'cover',
85
+ height: '100%',
86
+ width: '100%',
87
+ top: '0',
88
+ left: '0'
89
+ }}
90
+ alt="Cover img"
91
+ />
59
92
  <iframe
60
93
  ref={setIframeRef}
61
94
  className="embedVideo"
@@ -21,6 +21,8 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
21
21
  const YT = useYouTubeIframeApi();
22
22
  const [div, setDiv] = useState<HTMLDivElement | null>(null);
23
23
  const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
24
+ const [isCoverVisible, setIsCoverVisible] = useState(false);
25
+ const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
24
26
  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
25
27
  useRegisterResize(div, onResize);
26
28
 
@@ -37,6 +39,15 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
37
39
  controls: controls ? '1' : '0'
38
40
  },
39
41
  events: {
42
+ onStateChange: (event) => {
43
+ if (play !== 'auto') return;
44
+ if (event.data === 1) {
45
+ setIsCoverVisible(false);
46
+ }
47
+ if (event.data === 2 || event.data === -1 ) {
48
+ setIsCoverVisible(true);
49
+ }
50
+ },
40
51
  onReady: (event) => {
41
52
  setPlayer(event.target);
42
53
  if (play !== 'on-click') {
@@ -52,6 +63,12 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
52
63
  };
53
64
  }, [YT, div]);
54
65
 
66
+ const onCoverClick = () => {
67
+ if (!player || !imgRef) return;
68
+ player.playVideo();
69
+ setIsCoverVisible(false);
70
+ };
71
+
55
72
  return (
56
73
  <LinkWrapper url={item.link?.url} target={item.link?.target}>
57
74
  <div
@@ -70,11 +87,29 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
70
87
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
71
88
  }}
72
89
  >
90
+ <img
91
+ ref={setImgRef}
92
+ onClick={() => onCoverClick()}
93
+ src={item.commonParams.coverUrl ?? ''}
94
+ style={{
95
+ display: isCoverVisible ? 'block' : 'none',
96
+ cursor: 'pointer',
97
+ position: 'absolute',
98
+ objectFit: 'cover',
99
+ height: '100%',
100
+ width: '100%',
101
+ top: '0',
102
+ left: '0',
103
+ zIndex: 1
104
+ }}
105
+ alt="Cover img"
106
+ />
73
107
  <div
74
108
  className={`embed-${item.id}`}
75
109
  ref={setDiv}
76
110
  style={{
77
- ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})
111
+ ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
112
+
78
113
  }}
79
114
  />
80
115
  </div>
Binary file