@cntrl-site/sdk-nextjs 0.29.1 → 0.29.3

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/cntrl-site-sdk-nextjs-0.29.1.tgz +0 -0
  2. package/lib/components/items/VimeoEmbed.js +4 -3
  3. package/lib/components/items/YoutubeEmbed.js +4 -3
  4. package/lib/components/items/useEmbedVideoItem.js +7 -1
  5. package/package.json +2 -2
  6. package/src/components/items/VimeoEmbed.tsx +4 -3
  7. package/src/components/items/YoutubeEmbed.tsx +4 -3
  8. package/src/components/items/useEmbedVideoItem.ts +13 -1
  9. package/.idea/inspectionProfiles/Project_Default.xml +0 -15
package/cntrl-site-sdk-nextjs-0.29.1.tgz ADDED
Binary file
package/lib/components/items/VimeoEmbed.js CHANGED
@@ -19,7 +19,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
19
19
  var _a, _b;
20
20
  const id = (0, react_1.useId)();
21
21
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
22
- const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
22
+ const { radius, blur, opacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
23
23
  const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
24
24
  const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
25
25
  const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -41,6 +41,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
41
41
  };
42
42
  const validUrl = getValidVimeoUrl(url);
43
43
  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: {
44
+ opacity: `${opacity}`,
44
45
  transform: `rotate(${angle}deg)`,
45
46
  filter: `blur(${blur * 100}vw)`
46
47
  }, onMouseEnter: () => {
@@ -69,10 +70,10 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
69
70
  ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
70
71
  return (`
71
72
  .embed-video-wrapper-${item.id} {
72
- transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur'], hoverParams)};
73
+ transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
73
74
  }
74
75
  .embed-video-wrapper-${item.id}:hover {
75
- ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur'], hoverParams)}
76
+ ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
76
77
  }
77
78
  .embed-video-wrapper-${item.id} .embedVideo {
78
79
  transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
package/lib/components/items/YoutubeEmbed.js CHANGED
@@ -21,7 +21,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
21
21
  const id = (0, react_1.useId)();
22
22
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
23
23
  const { play, controls, url } = item.commonParams;
24
- const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
24
+ const { radius, blur, opacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
25
25
  const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
26
26
  const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
27
27
  const [div, setDiv] = (0, react_1.useState)(null);
@@ -65,6 +65,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
65
65
  return;
66
66
  player.pauseVideo();
67
67
  }, style: {
68
+ opacity: `${opacity}`,
68
69
  transform: `rotate(${angle}deg)`,
69
70
  filter: `blur(${blur * 100}vw)`
70
71
  }, 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, { id: id, children: `
@@ -86,13 +87,13 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
86
87
  ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
87
88
  return (`
88
89
  .embed-youtube-video-wrapper-${item.id} {
89
- transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur'], hoverParams)};
90
+ transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
90
91
  }
91
92
  .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
92
93
  transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
93
94
  }
94
95
  .embed-youtube-video-wrapper-${item.id}:hover {
95
- ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur'], hoverParams)}
96
+ ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
96
97
  }
97
98
  .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
98
99
  ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)}
package/lib/components/items/useEmbedVideoItem.js CHANGED
@@ -17,6 +17,12 @@ const useEmbedVideoItem = (item, sectionId) => {
17
17
  const layoutParams = item.layoutParams[layoutId];
18
18
  return 'blur' in layoutParams ? layoutParams.blur : 0;
19
19
  }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
20
- return { radius, blur };
20
+ const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
21
+ if (!layoutId)
22
+ return 1;
23
+ const layoutParams = item.layoutParams[layoutId];
24
+ return 'opacity' in layoutParams ? layoutParams.opacity : 1;
25
+ }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
26
+ return { radius, blur, opacity };
21
27
  };
22
28
  exports.useEmbedVideoItem = useEmbedVideoItem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "0.29.1",
3
+ "version": "0.29.3",
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.10.0",
26
+ "@cntrl-site/sdk": "^1.11.0",
27
27
  "@types/vimeo__player": "^2.18.0",
28
28
  "@vimeo/player": "^2.20.1",
29
29
  "html-react-parser": "^3.0.1",
package/src/components/items/VimeoEmbed.tsx CHANGED
@@ -13,7 +13,7 @@ import { useRegisterResize } from "../../common/useRegisterResize";
13
13
  export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize }) => {
14
14
  const id = useId();
15
15
  const { layouts } = useCntrlContext();
16
- const { radius, blur } = useEmbedVideoItem(item, sectionId);
16
+ const { radius, blur, opacity } = useEmbedVideoItem(item, sectionId);
17
17
  const [iframeRef, setIframeRef] = useState<HTMLIFrameElement | null>(null);
18
18
  const vimeoPlayer = useMemo(() => iframeRef ? new Player(iframeRef) : undefined, [iframeRef]);
19
19
  const angle = useItemAngle(item, sectionId);
@@ -42,6 +42,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
42
42
  className={`embed-video-wrapper-${item.id}`}
43
43
  ref={setRef}
44
44
  style={{
45
+ opacity: `${opacity}`,
45
46
  transform: `rotate(${angle}deg)`,
46
47
  filter: `blur(${blur * 100}vw)`
47
48
  }}
@@ -81,10 +82,10 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
81
82
  ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
82
83
  return (`
83
84
  .embed-video-wrapper-${item.id} {
84
- transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['angle', 'blur'], hoverParams)};
85
+ transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
85
86
  }
86
87
  .embed-video-wrapper-${item.id}:hover {
87
- ${getHoverStyles<ArticleItemType.VimeoEmbed>(['angle', 'blur'], hoverParams)}
88
+ ${getHoverStyles<ArticleItemType.VimeoEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
88
89
  }
89
90
  .embed-video-wrapper-${item.id} .embedVideo {
90
91
  transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['radius'], hoverParams)};
package/src/components/items/YoutubeEmbed.tsx CHANGED
@@ -16,7 +16,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
16
16
  const id = useId();
17
17
  const { layouts } = useCntrlContext();
18
18
  const { play, controls, url } = item.commonParams;
19
- const { radius, blur } = useEmbedVideoItem(item, sectionId);
19
+ const { radius, blur, opacity } = useEmbedVideoItem(item, sectionId);
20
20
  const angle = useItemAngle(item, sectionId);
21
21
  const YT = useYouTubeIframeApi();
22
22
  const [div, setDiv] = useState<HTMLDivElement | null>(null);
@@ -64,6 +64,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
64
64
  player.pauseVideo();
65
65
  }}
66
66
  style={{
67
+ opacity: `${opacity}`,
67
68
  transform: `rotate(${angle}deg)`,
68
69
  filter: `blur(${blur * 100}vw)`
69
70
  }}
@@ -93,13 +94,13 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
93
94
  ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
94
95
  return (`
95
96
  .embed-youtube-video-wrapper-${item.id} {
96
- transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['angle', 'blur'], hoverParams)};
97
+ transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
97
98
  }
98
99
  .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
99
100
  transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['radius'], hoverParams)};
100
101
  }
101
102
  .embed-youtube-video-wrapper-${item.id}:hover {
102
- ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['angle', 'blur'], hoverParams)}
103
+ ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
103
104
  }
104
105
  .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
105
106
  ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['radius'], hoverParams)}
package/src/components/items/useEmbedVideoItem.ts CHANGED
@@ -27,5 +27,17 @@ export const useEmbedVideoItem = (item: VimeoEmbedItem | YoutubeEmbedItem, secti
27
27
  [layoutId]
28
28
  );
29
29
 
30
- return { radius, blur };
30
+ const opacity = useKeyframeValue(
31
+ item,
32
+ (item, layoutId) => {
33
+ if (!layoutId) return 1;
34
+ const layoutParams = item.layoutParams[layoutId];
35
+ return 'opacity' in layoutParams ? layoutParams.opacity : 1;
36
+ },
37
+ (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
38
+ sectionId,
39
+ [layoutId]
40
+ );
41
+
42
+ return { radius, blur, opacity };
31
43
  };
package/.idea/inspectionProfiles/Project_Default.xml DELETED
@@ -1,15 +0,0 @@
1
- <component name="InspectionProjectProfileManager">
2
- <profile version="1.0">
3
- <option name="myName" value="Project Default" />
4
- <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
5
- <option name="myValues">
6
- <value>
7
- <list size="1">
8
- <item index="0" class="java.lang.String" itemvalue="jsx" />
9
- </list>
10
- </value>
11
- </option>
12
- <option name="myCustomValuesEnabled" value="true" />
13
- </inspection_tool>
14
- </profile>
15
- </component>