@cntrl-site/sdk-nextjs 0.29.1 → 0.29.2

package/lib/components/items/VimeoEmbed.js

@@ -19,7 +19,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     var _a, _b;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const { radius, blur, opacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
     const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -41,6 +41,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     };
     const validUrl = getValidVimeoUrl(url);
     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: {
+                    opacity: `${opacity}`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
                 }, onMouseEnter: () => {

package/lib/components/items/YoutubeEmbed.js

@@ -21,7 +21,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { play, controls, url } = item.commonParams;
-    const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const { radius, blur, opacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
@@ -65,6 +65,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
                         return;
                     player.pauseVideo();
                 }, style: {
+                    opacity: `${opacity}`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
                 }, 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: `

package/lib/components/items/useEmbedVideoItem.js

@@ -17,6 +17,12 @@ const useEmbedVideoItem = (item, sectionId) => {
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
     }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
-    return { radius, blur };
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 1;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, sectionId, [layoutId]);
+    return { radius, blur, opacity };
 };
 exports.useEmbedVideoItem = useEmbedVideoItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.29.1",
+  "version": "0.29.2",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
-    "@cntrl-site/sdk": "^1.10.0",
+    "@cntrl-site/sdk": "^1.11.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/components/items/VimeoEmbed.tsx

@@ -13,7 +13,7 @@ import { useRegisterResize } from "../../common/useRegisterResize";
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
-  const { radius, blur } = useEmbedVideoItem(item, sectionId);
+  const { radius, blur, opacity } = useEmbedVideoItem(item, sectionId);
   const [iframeRef, setIframeRef] = useState<HTMLIFrameElement | null>(null);
   const vimeoPlayer = useMemo(() => iframeRef ? new Player(iframeRef) : undefined, [iframeRef]);
   const angle = useItemAngle(item, sectionId);
@@ -42,6 +42,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         className={`embed-video-wrapper-${item.id}`}
         ref={setRef}
         style={{
+          opacity: `${opacity}`,
           transform: `rotate(${angle}deg)`,
           filter: `blur(${blur * 100}vw)`
         }}

package/src/components/items/YoutubeEmbed.tsx

@@ -16,7 +16,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const id = useId();
   const { layouts } = useCntrlContext();
   const { play, controls, url } = item.commonParams;
-  const { radius, blur } = useEmbedVideoItem(item, sectionId);
+  const { radius, blur, opacity } = useEmbedVideoItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const YT = useYouTubeIframeApi();
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
@@ -64,6 +64,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
           player.pauseVideo();
         }}
         style={{
+          opacity: `${opacity}`,
           transform: `rotate(${angle}deg)`,
           filter: `blur(${blur * 100}vw)`
         }}

package/src/components/items/useEmbedVideoItem.ts

@@ -27,5 +27,17 @@ export const useEmbedVideoItem = (item: VimeoEmbedItem | YoutubeEmbedItem, secti
     [layoutId]
   );
 
-  return { radius, blur };
+  const opacity = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 1;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    },
+    (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
+    sectionId,
+    [layoutId]
+  );
+
+  return { radius, blur, opacity };
 };

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="jsx" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>