@cntrl-site/sdk-nextjs 1.0.9 → 1.0.11

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 (7) hide show
  1. package/cntrl-site-sdk-nextjs-1.0.11.tgz +0 -0
  2. package/cntrl-site-sdk-nextjs-1.0.12.tgz +0 -0
  3. package/lib/components/items/VimeoEmbed.js +5 -2
  4. package/lib/components/items/YoutubeEmbed.js +7 -2
  5. package/package.json +1 -1
  6. package/src/components/items/VimeoEmbed.tsx +21 -16
  7. package/src/components/items/YoutubeEmbed.tsx +25 -17
package/cntrl-site-sdk-nextjs-1.0.11.tgz ADDED
Binary file
package/cntrl-site-sdk-nextjs-1.0.12.tgz ADDED
Binary file
package/lib/components/items/VimeoEmbed.js CHANGED
@@ -46,6 +46,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
46
46
  (0, react_1.useEffect)(() => {
47
47
  if (!vimeoPlayer || !imgRef)
48
48
  return;
49
+ if (play === 'on-click' && !controls) {
50
+ setIsCoverVisible(true);
51
+ }
49
52
  vimeoPlayer.on('pause', (e) => {
50
53
  if (e.seconds === 0) {
51
54
  setIsCoverVisible(true);
@@ -66,7 +69,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
66
69
  if (!vimeoPlayer || play !== 'on-hover')
67
70
  return;
68
71
  vimeoPlayer.pause();
69
- }, children: [(0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', style: {
72
+ }, children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', style: {
70
73
  display: isCoverVisible ? 'block' : 'none',
71
74
  cursor: 'pointer',
72
75
  position: 'absolute',
@@ -75,7 +78,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
75
78
  width: '100%',
76
79
  top: '0',
77
80
  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: `
81
+ }, 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: `
79
82
  .embed-video-wrapper-${item.id} {
80
83
  position: absolute;
81
84
  width: 100%;
package/lib/components/items/YoutubeEmbed.js CHANGED
@@ -75,6 +75,11 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
75
75
  player.playVideo();
76
76
  setIsCoverVisible(false);
77
77
  };
78
+ (0, react_1.useEffect)(() => {
79
+ if (play === 'on-click' && !controls) {
80
+ setIsCoverVisible(true);
81
+ }
82
+ }, []);
78
83
  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: () => {
79
84
  if (!player || play !== 'on-hover')
80
85
  return;
@@ -83,7 +88,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
83
88
  if (!player || play !== 'on-hover')
84
89
  return;
85
90
  player.pauseVideo();
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: {
91
+ }, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', style: {
87
92
  display: isCoverVisible ? 'block' : 'none',
88
93
  cursor: 'pointer',
89
94
  position: 'absolute',
@@ -93,7 +98,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
93
98
  top: '0',
94
99
  left: '0',
95
100
  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: `
101
+ }, 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: `
97
102
  .embed-youtube-video-wrapper-${item.id},
98
103
  .embed-${item.id} {
99
104
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.0.9",
3
+ "version": "1.0.11",
4
4
  "description": "SDK for Next.js",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/index.ts",
package/src/components/items/VimeoEmbed.tsx CHANGED
@@ -41,6 +41,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
41
41
 
42
42
  useEffect(() => {
43
43
  if (!vimeoPlayer || !imgRef) return;
44
+ if (play === 'on-click' && !controls) {
45
+ setIsCoverVisible(true);
46
+ }
44
47
  vimeoPlayer.on('pause', (e) => {
45
48
  if (e.seconds === 0) {
46
49
  setIsCoverVisible(true);
@@ -73,22 +76,24 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
73
76
  vimeoPlayer.pause();
74
77
  }}
75
78
  >
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
- />
79
+ {item.commonParams.coverUrl && (
80
+ <img
81
+ ref={setImgRef}
82
+ onClick={() => onCoverClick()}
83
+ src={item.commonParams.coverUrl ?? ''}
84
+ style={{
85
+ display: isCoverVisible ? 'block' : 'none',
86
+ cursor: 'pointer',
87
+ position: 'absolute',
88
+ objectFit: 'cover',
89
+ height: '100%',
90
+ width: '100%',
91
+ top: '0',
92
+ left: '0'
93
+ }}
94
+ alt="Cover img"
95
+ />
96
+ )}
92
97
  <iframe
93
98
  ref={setIframeRef}
94
99
  className="embedVideo"
package/src/components/items/YoutubeEmbed.tsx CHANGED
@@ -69,6 +69,12 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
69
69
  setIsCoverVisible(false);
70
70
  };
71
71
 
72
+ useEffect(() => {
73
+ if (play === 'on-click' && !controls) {
74
+ setIsCoverVisible(true);
75
+ }
76
+ }, []);
77
+
72
78
  return (
73
79
  <LinkWrapper url={item.link?.url} target={item.link?.target}>
74
80
  <div
@@ -87,23 +93,25 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
87
93
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
88
94
  }}
89
95
  >
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
- />
96
+ {item.commonParams.coverUrl && (
97
+ <img
98
+ ref={setImgRef}
99
+ onClick={() => onCoverClick()}
100
+ src={item.commonParams.coverUrl ?? ''}
101
+ style={{
102
+ display: isCoverVisible ? 'block' : 'none',
103
+ cursor: 'pointer',
104
+ position: 'absolute',
105
+ objectFit: 'cover',
106
+ height: '100%',
107
+ width: '100%',
108
+ top: '0',
109
+ left: '0',
110
+ zIndex: 1
111
+ }}
112
+ alt="Cover img"
113
+ />
114
+ )}
107
115
  <div
108
116
  className={`embed-${item.id}`}
109
117
  ref={setDiv}