@cntrl-site/sdk-nextjs 1.5.0 → 1.5.2

package/lib/components/items/GroupItem/GroupItem.js

@@ -16,23 +16,24 @@ const useItemAngle_1 = require("../useItemAngle");
 const useGroupItem_1 = require("./useGroupItem");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const id = (0, react_1.useId)();
     const { items } = item;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { opacity: itemOpacity } = (0, useGroupItem_1.useGroupItem)(item, sectionId);
+    const { opacity: itemOpacity, blur: itemBlur } = (0, useGroupItem_1.useGroupItem)(item, sectionId);
     const layoutValues = [item.area, item.layoutParams];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle']);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle', 'blur']);
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.blur, itemBlur);
     const isInteractive = opacity !== 0 && opacity !== undefined;
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;
           width: 100%;

package/lib/components/items/GroupItem/useGroupItem.js

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

package/lib/utils/getValidYoutubeUrl.js

@@ -8,18 +8,27 @@ var Allowed;
 })(Allowed || (Allowed = {}));
 function getYoutubeId({ hostname, pathname, search }) {
     if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
-        throw new Error(`Cannot get valid youtube ID from "${hostname}" - address is not whitelisted`);
+        throw new Error(`Cannot get valid YouTube ID from "${hostname}" - address is not whitelisted`);
     }
     switch (hostname) {
         case Allowed.Tiny:
             return pathname.replace('/', '');
         case Allowed.Full:
-            const searchParams = new URLSearchParams(search);
-            const id = searchParams.get('v');
-            if (!id) {
-                throw new Error("Cannot get valid youtube ID from search params.");
+            if (pathname.startsWith('/shorts/')) {
+                const shortsId = pathname.split('/shorts/')[1];
+                if (!shortsId) {
+                    throw new Error('Cannot get valid YouTube Shorts ID from the pathname.');
+                }
+                return shortsId;
+            }
+            else {
+                const searchParams = new URLSearchParams(search);
+                const id = searchParams.get('v');
+                if (!id) {
+                    throw new Error('Cannot get valid YouTube ID from search params.');
+                }
+                return id;
             }
-            return id;
     }
 }
 exports.getYoutubeId = getYoutubeId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.3.2",
-    "@cntrl-site/sdk": "^1.17.0",
+    "@cntrl-site/sdk": "^1.19.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/items/GroupItem/GroupItem.tsx

@@ -14,13 +14,14 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
   const { items } = item;
   const itemAngle = useItemAngle(item, sectionId);
   const { layouts } = useCntrlContext();
-  const { opacity: itemOpacity } = useGroupItem(item, sectionId);
+  const { opacity: itemOpacity, blur: itemBlur } = useGroupItem(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState(['opacity', 'angle']);
+  const stateParams = interactionCtrl?.getState(['opacity', 'angle', 'blur']);
   const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
+  const blur = getStyleFromItemStateAndParams(stateParams?.styles?.blur, itemBlur);
   const isInteractive = opacity !== 0 && opacity !== undefined;
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
@@ -34,6 +35,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
           style={{
             ...(opacity !== undefined ? { opacity } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+            ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
             transition: stateParams?.transition ?? 'none'
           }}
         >

package/src/components/items/GroupItem/useGroupItem.ts

@@ -17,5 +17,18 @@ export function useGroupItem(item: GroupItem, sectionId: string) {
     [layoutId]
   );
 
-  return { opacity };
+  const blur = useKeyframeValue(
+    item,
+    KeyframeType.Blur,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  return { opacity, blur };
 }

package/src/utils/getValidYoutubeUrl.ts

@@ -5,17 +5,25 @@ enum Allowed {
 
 export function getYoutubeId({ hostname, pathname, search }: URL): string {
   if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
-    throw new Error(`Cannot get valid youtube ID from "${hostname}" - address is not whitelisted`);
+    throw new Error(`Cannot get valid YouTube ID from "${hostname}" - address is not whitelisted`);
   }
   switch (hostname) {
     case Allowed.Tiny:
       return pathname.replace('/', '');
     case Allowed.Full:
-      const searchParams = new URLSearchParams(search);
-      const id = searchParams.get('v');
-      if (!id) {
-        throw new Error("Cannot get valid youtube ID from search params.");
+      if (pathname.startsWith('/shorts/')) {
+        const shortsId = pathname.split('/shorts/')[1];
+        if (!shortsId) {
+          throw new Error('Cannot get valid YouTube Shorts ID from the pathname.');
+        }
+        return shortsId;
+      } else {
+        const searchParams = new URLSearchParams(search);
+        const id = searchParams.get('v');
+        if (!id) {
+          throw new Error('Cannot get valid YouTube ID from search params.');
+        }
+        return id;
       }
-      return id;
   }
 }