@cntrl-site/sdk-nextjs 0.16.6 → 0.16.7

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/ImageItem.js +36 -28
  2. package/lib/components/items/VideoItem.js +19 -9
  3. package/lib/components/items/VimeoEmbed.js +12 -4
  4. package/lib/components/items/YoutubeEmbed.js +16 -7
  5. package/package.json +1 -1
  6. package/src/components/items/ImageItem.tsx +42 -30
  7. package/src/components/items/VideoItem.tsx +26 -9
  8. package/src/components/items/VimeoEmbed.tsx +12 -3
  9. package/src/components/items/YoutubeEmbed.tsx +24 -10
package/lib/components/items/ImageItem.js CHANGED
@@ -24,42 +24,50 @@ const ImageItem = ({ item, sectionId, onResize }) => {
24
24
  const [ref, setRef] = (0, react_1.useState)(null);
25
25
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
26
26
  return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, ref: setRef, style: {
27
- borderRadius: `${radius * 100}vw`,
28
- borderWidth: `${strokeWidth * 100}vw`,
29
27
  opacity: `${opacity}`,
30
- borderColor: `${borderColor.toCss()}`,
31
28
  transform: `rotate(${angle}deg)`,
32
29
  filter: `blur(${blur * 100}vw)`
33
- } }, { children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
30
+ } }, { children: (0, jsx_runtime_1.jsx)("img", { className: `image image-${item.id}`, style: {
31
+ borderRadius: `${radius * 100}vw`,
32
+ borderWidth: `${strokeWidth * 100}vw`,
33
+ borderColor: `${borderColor.toCss()}`
34
+ }, src: item.commonParams.url }) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
34
35
  @supports not (color: oklch(42% 0.3 90 / 1)) {
35
- .image-wrapper-${item.id} {
36
+ .image-${item.id} {
36
37
  border-color: ${borderColor.fmt('rgba')};
37
38
  }
38
39
  }
39
- .image-wrapper-${item.id} {
40
- position: absolute;
41
- width: 100%;
42
- height: 100%;
43
- border-style: solid;
44
- box-sizing: border-box;
45
- display: flex;
46
- }
47
- .image {
48
- width: 100%;
49
- height: 100%;
50
- opacity: 1;
51
- object-fit: cover;
52
- pointer-events: none;
53
- }
54
- ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
40
+ .image-wrapper-${item.id} {
41
+ position: absolute;
42
+ width: 100%;
43
+ height: 100%;
44
+ box-sizing: border-box;
45
+ display: flex;
46
+ }
47
+ .image {
48
+ width: 100%;
49
+ height: 100%;
50
+ opacity: 1;
51
+ object-fit: cover;
52
+ pointer-events: none;
53
+ border-style: solid;
54
+ overflow: hidden;
55
+ }
56
+ ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
55
57
  return (`
56
- .image-wrapper-${item.id} {
57
- transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)};
58
- }
59
- .image-wrapper-${item.id}:hover {
60
- ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)}
61
- }
62
- `);
58
+ .image-wrapper-${item.id} {
59
+ transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'opacity', 'blur'], hoverParams)};
60
+ }
61
+ .image-wrapper-${item.id}:hover {
62
+ ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)}
63
+ }
64
+ .image-${item.id} {
65
+ transition: ${(0, HoverStyles_1.getTransitions)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
66
+ }
67
+ .image-wrapper-${item.id}:hover .image {
68
+ ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)}
69
+ }
70
+ `);
63
71
  })}
64
72
  ` }))] }) })));
65
73
  };
package/lib/components/items/VideoItem.js CHANGED
@@ -24,15 +24,16 @@ const VideoItem = ({ item, sectionId, onResize }) => {
24
24
  const [ref, setRef] = (0, react_1.useState)(null);
25
25
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
26
26
  return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `video-wrapper-${item.id}`, ref: setRef, style: {
27
- borderRadius: `${radius * 100}vw`,
28
- borderWidth: `${strokeWidth * 100}vw`,
29
27
  opacity: `${opacity}`,
30
- borderColor: `${borderColor.toCss()}`,
31
28
  transform: `rotate(${angle}deg)`,
32
29
  filter: `blur(${blur * 100}vw)`
33
- } }, { children: (0, jsx_runtime_1.jsx)("video", Object.assign({ autoPlay: true, muted: true, loop: true, playsInline: true, className: "video" }, { children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
30
+ } }, { children: (0, jsx_runtime_1.jsx)("video", Object.assign({ autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: {
31
+ borderRadius: `${radius * 100}vw`,
32
+ borderWidth: `${strokeWidth * 100}vw`,
33
+ borderColor: `${borderColor.toCss()}`
34
+ } }, { children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
34
35
  @supports not (color: oklch(42% 0.3 90 / 1)) {
35
- .video-wrapper-${item.id} {
36
+ .video-${item.id} {
36
37
  border-color: ${borderColor.fmt('rgba')};
37
38
  }
38
39
  }
@@ -40,9 +41,7 @@ const VideoItem = ({ item, sectionId, onResize }) => {
40
41
  position: absolute;
41
42
  width: 100%;
42
43
  height: 100%;
43
- border-style: solid;
44
44
  box-sizing: border-box;
45
- border-color: ${strokeColor};
46
45
  opacity: ${opacity};
47
46
  }
48
47
  .video {
@@ -51,14 +50,25 @@ const VideoItem = ({ item, sectionId, onResize }) => {
51
50
  opacity: 1;
52
51
  object-fit: cover;
53
52
  pointer-events: none;
53
+ overflow: hidden;
54
+ border-style: solid;
55
+ }
56
+ .video-${item.id} {
57
+ border-color: ${strokeColor};
54
58
  }
55
59
  ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
56
60
  return (`
57
61
  .video-wrapper-${item.id} {
58
- transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)};
62
+ transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'opacity', 'blur'], hoverParams)};
59
63
  }
60
64
  .video-wrapper-${item.id}:hover {
61
- ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)}
65
+ ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)}
66
+ }
67
+ .video-${item.id} {
68
+ transition: ${(0, HoverStyles_1.getTransitions)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
69
+ }
70
+ .video-wrapper-${item.id}:hover .video {
71
+ ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)}
62
72
  }
63
73
  `);
64
74
  })}
package/lib/components/items/VimeoEmbed.js CHANGED
@@ -41,7 +41,6 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
41
41
  };
42
42
  const validUrl = getValidVimeoUrl(url);
43
43
  return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-video-wrapper-${item.id}`, ref: setRef, style: {
44
- borderRadius: `${radius * 100}vw`,
45
44
  transform: `rotate(${angle}deg)`,
46
45
  filter: `blur(${blur * 100}vw)`
47
46
  }, onMouseEnter: () => {
@@ -52,7 +51,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
52
51
  if (!vimeoPlayer || play !== 'on-hover')
53
52
  return;
54
53
  vimeoPlayer.pause();
55
- } }, { children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
54
+ } }, { children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: {
55
+ borderRadius: `${radius * 100}vw`
56
+ } }) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
56
57
  .embed-video-wrapper-${item.id} {
57
58
  position: absolute;
58
59
  width: 100%;
@@ -63,14 +64,21 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
63
64
  height: 100%;
64
65
  z-index: 1;
65
66
  border: none;
67
+ overflow: hidden;
66
68
  }
67
69
  ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
68
70
  return (`
69
71
  .embed-video-wrapper-${item.id} {
70
- transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius', 'blur'], hoverParams)};
72
+ transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur'], hoverParams)};
71
73
  }
72
74
  .embed-video-wrapper-${item.id}:hover {
73
- ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius', 'blur'], hoverParams)}
75
+ ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur'], hoverParams)}
76
+ }
77
+ .embed-video-wrapper-${item.id} .embedVideo {
78
+ transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
79
+ }
80
+ .embed-video-wrapper-${item.id}:hover .embedVideo {
81
+ ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)}
74
82
  }
75
83
  `);
76
84
  })}
package/lib/components/items/YoutubeEmbed.js CHANGED
@@ -56,7 +56,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
56
56
  (_a = placeholder.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(placeholder);
57
57
  };
58
58
  }, [YT, div]);
59
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
59
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
60
60
  if (!player || play !== 'on-hover')
61
61
  return;
62
62
  player.playVideo();
@@ -64,16 +64,19 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
64
64
  if (!player || play !== 'on-hover')
65
65
  return;
66
66
  player.pauseVideo();
67
- }, ref: setDiv, style: {
68
- borderRadius: `${radius * 100}vw`,
67
+ }, style: {
69
68
  transform: `rotate(${angle}deg)`,
70
69
  filter: `blur(${blur * 100}vw)`
71
- } }), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
72
- .embed-youtube-video-wrapper-${item.id} {
70
+ } }, { children: (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: { borderRadius: `${radius * 100}vw` } }) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
71
+ .embed-youtube-video-wrapper-${item.id},
72
+ .embed-${item.id} {
73
73
  position: absolute;
74
74
  width: 100%;
75
75
  height: 100%;
76
76
  }
77
+ .embed-${item.id} {
78
+ overflow: hidden;
79
+ }
77
80
  .embed-youtube-video-wrapper-${item.id} iframe {
78
81
  width: 100%;
79
82
  height: 100%;
@@ -83,10 +86,16 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
83
86
  ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
84
87
  return (`
85
88
  .embed-youtube-video-wrapper-${item.id} {
86
- transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius', 'blur'], hoverParams)};
89
+ transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur'], hoverParams)};
90
+ }
91
+ .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
92
+ transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
87
93
  }
88
94
  .embed-youtube-video-wrapper-${item.id}:hover {
89
- ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius', 'blur'], hoverParams)}
95
+ ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur'], hoverParams)}
96
+ }
97
+ .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
98
+ ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)}
90
99
  }
91
100
  `);
92
101
  })}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "0.16.6",
3
+ "version": "0.16.7",
4
4
  "description": "SDK for Next.js",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/index.ts",
package/src/components/items/ImageItem.tsx CHANGED
@@ -24,47 +24,59 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
24
24
  className={`image-wrapper-${item.id}`}
25
25
  ref={setRef}
26
26
  style={{
27
- borderRadius: `${radius * 100}vw`,
28
- borderWidth: `${strokeWidth * 100}vw`,
29
27
  opacity: `${opacity}`,
30
- borderColor: `${borderColor.toCss()}`,
31
28
  transform: `rotate(${angle}deg)`,
32
29
  filter: `blur(${blur * 100}vw)`
33
30
  }}
34
31
  >
35
- <img className="image" src={item.commonParams.url} />
32
+ <img
33
+ className={`image image-${item.id}`}
34
+ style={{
35
+ borderRadius: `${radius * 100}vw`,
36
+ borderWidth: `${strokeWidth * 100}vw`,
37
+ borderColor: `${borderColor.toCss()}`
38
+ }}
39
+ src={item.commonParams.url}
40
+ />
36
41
  </div>
37
42
  <JSXStyle id={id}>{`
38
43
  @supports not (color: oklch(42% 0.3 90 / 1)) {
39
- .image-wrapper-${item.id} {
44
+ .image-${item.id} {
40
45
  border-color: ${borderColor.fmt('rgba')};
41
46
  }
42
47
  }
43
- .image-wrapper-${item.id} {
44
- position: absolute;
45
- width: 100%;
46
- height: 100%;
47
- border-style: solid;
48
- box-sizing: border-box;
49
- display: flex;
50
- }
51
- .image {
52
- width: 100%;
53
- height: 100%;
54
- opacity: 1;
55
- object-fit: cover;
56
- pointer-events: none;
57
- }
58
- ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
59
- return (`
60
- .image-wrapper-${item.id} {
61
- transition: ${getTransitions<ArticleItemType.Image>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)};
62
- }
63
- .image-wrapper-${item.id}:hover {
64
- ${getHoverStyles<ArticleItemType.Image>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)}
65
- }
66
- `);
67
- })}
48
+ .image-wrapper-${item.id} {
49
+ position: absolute;
50
+ width: 100%;
51
+ height: 100%;
52
+ box-sizing: border-box;
53
+ display: flex;
54
+ }
55
+ .image {
56
+ width: 100%;
57
+ height: 100%;
58
+ opacity: 1;
59
+ object-fit: cover;
60
+ pointer-events: none;
61
+ border-style: solid;
62
+ overflow: hidden;
63
+ }
64
+ ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
65
+ return (`
66
+ .image-wrapper-${item.id} {
67
+ transition: ${getTransitions<ArticleItemType.Image>(['angle', 'opacity', 'blur'], hoverParams)};
68
+ }
69
+ .image-wrapper-${item.id}:hover {
70
+ ${getHoverStyles<ArticleItemType.Image>(['angle', 'opacity', 'blur'], hoverParams)}
71
+ }
72
+ .image-${item.id} {
73
+ transition: ${getTransitions<ArticleItemType.Image>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
74
+ }
75
+ .image-wrapper-${item.id}:hover .image {
76
+ ${getHoverStyles<ArticleItemType.Image>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)}
77
+ }
78
+ `);
79
+ })}
68
80
  `}</JSXStyle>
69
81
  </>
70
82
  </LinkWrapper>
package/src/components/items/VideoItem.tsx CHANGED
@@ -23,21 +23,29 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
23
23
  className={`video-wrapper-${item.id}`}
24
24
  ref={setRef}
25
25
  style={{
26
- borderRadius: `${radius * 100}vw`,
27
- borderWidth: `${strokeWidth * 100}vw`,
28
26
  opacity: `${opacity}`,
29
- borderColor: `${borderColor.toCss()}`,
30
27
  transform: `rotate(${angle}deg)`,
31
28
  filter: `blur(${blur * 100}vw)`
32
29
  }}
33
30
  >
34
- <video autoPlay muted loop playsInline className="video">
31
+ <video
32
+ autoPlay
33
+ muted
34
+ loop
35
+ playsInline
36
+ className={`video video-${item.id}`}
37
+ style={{
38
+ borderRadius: `${radius * 100}vw`,
39
+ borderWidth: `${strokeWidth * 100}vw`,
40
+ borderColor: `${borderColor.toCss()}`
41
+ }}
42
+ >
35
43
  <source src={item.commonParams.url} />
36
44
  </video>
37
45
  </div>
38
46
  <JSXStyle id={id}>{`
39
47
  @supports not (color: oklch(42% 0.3 90 / 1)) {
40
- .video-wrapper-${item.id} {
48
+ .video-${item.id} {
41
49
  border-color: ${borderColor.fmt('rgba')};
42
50
  }
43
51
  }
@@ -45,9 +53,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
45
53
  position: absolute;
46
54
  width: 100%;
47
55
  height: 100%;
48
- border-style: solid;
49
56
  box-sizing: border-box;
50
- border-color: ${strokeColor};
51
57
  opacity: ${opacity};
52
58
  }
53
59
  .video {
@@ -56,14 +62,25 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
56
62
  opacity: 1;
57
63
  object-fit: cover;
58
64
  pointer-events: none;
65
+ overflow: hidden;
66
+ border-style: solid;
67
+ }
68
+ .video-${item.id} {
69
+ border-color: ${strokeColor};
59
70
  }
60
71
  ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
61
72
  return (`
62
73
  .video-wrapper-${item.id} {
63
- transition: ${getTransitions<ArticleItemType.Video>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)};
74
+ transition: ${getTransitions<ArticleItemType.Video>(['angle', 'opacity', 'blur'], hoverParams)};
64
75
  }
65
76
  .video-wrapper-${item.id}:hover {
66
- ${getHoverStyles<ArticleItemType.Video>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)}
77
+ ${getHoverStyles<ArticleItemType.Video>(['angle', 'opacity', 'blur'], hoverParams)}
78
+ }
79
+ .video-${item.id} {
80
+ transition: ${getTransitions<ArticleItemType.Video>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
81
+ }
82
+ .video-wrapper-${item.id}:hover .video {
83
+ ${getHoverStyles<ArticleItemType.Video>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)}
67
84
  }
68
85
  `);
69
86
  })}
package/src/components/items/VimeoEmbed.tsx CHANGED
@@ -43,7 +43,6 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
43
43
  className={`embed-video-wrapper-${item.id}`}
44
44
  ref={setRef}
45
45
  style={{
46
- borderRadius: `${radius * 100}vw`,
47
46
  transform: `rotate(${angle}deg)`,
48
47
  filter: `blur(${blur * 100}vw)`
49
48
  }}
@@ -62,6 +61,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
62
61
  src={validUrl || ''}
63
62
  allow="autoplay; fullscreen; picture-in-picture;"
64
63
  allowFullScreen
64
+ style={{
65
+ borderRadius: `${radius * 100}vw`
66
+ }}
65
67
  />
66
68
  </div>
67
69
  <JSXStyle id={id}>{`
@@ -75,14 +77,21 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
75
77
  height: 100%;
76
78
  z-index: 1;
77
79
  border: none;
80
+ overflow: hidden;
78
81
  }
79
82
  ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
80
83
  return (`
81
84
  .embed-video-wrapper-${item.id} {
82
- transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['angle', 'radius', 'blur'], hoverParams)};
85
+ transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['angle', 'blur'], hoverParams)};
83
86
  }
84
87
  .embed-video-wrapper-${item.id}:hover {
85
- ${getHoverStyles<ArticleItemType.VimeoEmbed>(['angle', 'radius', 'blur'], hoverParams)}
88
+ ${getHoverStyles<ArticleItemType.VimeoEmbed>(['angle', 'blur'], hoverParams)}
89
+ }
90
+ .embed-video-wrapper-${item.id} .embedVideo {
91
+ transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['radius'], hoverParams)};
92
+ }
93
+ .embed-video-wrapper-${item.id}:hover .embedVideo {
94
+ ${getHoverStyles<ArticleItemType.VimeoEmbed>(['radius'], hoverParams)}
86
95
  }
87
96
  `);
88
97
  })}
package/src/components/items/YoutubeEmbed.tsx CHANGED
@@ -64,19 +64,27 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
64
64
  if (!player || play !== 'on-hover') return;
65
65
  player.pauseVideo();
66
66
  }}
67
- ref={setDiv}
68
- style={{
69
- borderRadius: `${radius * 100}vw`,
70
- transform: `rotate(${angle}deg)`,
71
- filter: `blur(${blur * 100}vw)`
72
- }}
73
- ></div>
67
+ style={{
68
+ transform: `rotate(${angle}deg)`,
69
+ filter: `blur(${blur * 100}vw)`
70
+ }}
71
+ >
72
+ <div
73
+ className={`embed-${item.id}`}
74
+ ref={setDiv}
75
+ style={{ borderRadius: `${radius * 100}vw` }}
76
+ />
77
+ </div>
74
78
  <JSXStyle id={id}>{`
75
- .embed-youtube-video-wrapper-${item.id} {
79
+ .embed-youtube-video-wrapper-${item.id},
80
+ .embed-${item.id} {
76
81
  position: absolute;
77
82
  width: 100%;
78
83
  height: 100%;
79
84
  }
85
+ .embed-${item.id} {
86
+ overflow: hidden;
87
+ }
80
88
  .embed-youtube-video-wrapper-${item.id} iframe {
81
89
  width: 100%;
82
90
  height: 100%;
@@ -86,10 +94,16 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
86
94
  ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
87
95
  return (`
88
96
  .embed-youtube-video-wrapper-${item.id} {
89
- transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['angle', 'radius', 'blur'], hoverParams)};
97
+ transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['angle', 'blur'], hoverParams)};
98
+ }
99
+ .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
100
+ transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['radius'], hoverParams)};
90
101
  }
91
102
  .embed-youtube-video-wrapper-${item.id}:hover {
92
- ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['angle', 'radius', 'blur'], hoverParams)}
103
+ ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['angle', 'blur'], hoverParams)}
104
+ }
105
+ .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
106
+ ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['radius'], hoverParams)}
93
107
  }
94
108
  `);
95
109
  })}