@cntrl-site/sdk-nextjs 1.0.10 → 1.0.12

package/lib/components/Item.js

@@ -102,14 +102,18 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
         isInitialRef.current = false;
     }, []);
     const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: Object.assign({ opacity: (keyframes.length !== 0 && !layout) ? 0 : 1, top: `${stickyTop * 100}vw`, height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset' }, (scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, 'WebkitTransform': `scale(${scale}) translateZ(0)` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({}, (dimensions ? {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
+                    opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
+                    top: `${stickyTop * 100}vw`,
+                    height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
+                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign(Object.assign({}, (dimensions ? {
                             width: `${sizingAxis.x === 'manual'
                                 ? isRichText
                                     ? `${dimensions.width * exemplary}px`
                                     : `${dimensions.width * 100}vw`
                                 : 'max-content'}`,
                             height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}`
-                        } : {})), children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        } : {})), (scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, 'WebkitTransform': `scale(${scale}) translateZ(0)` } : {})), children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams], exemplary) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
@@ -122,8 +126,6 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
               transition: opacity 0.2s linear 0.1s;
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
-              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
-              transform: scale(${area.scale});
             }
             .item-${item.id}-inner {
               transition: ${(0, HoverStyles_1.getTransitions)(['width', 'height', 'scale'], hoverParams)};
@@ -131,6 +133,8 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
                         ? `${area.width * 100}vw`
                         : 'max-content'};
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
             }
             .item-wrapper-${item.id} {
               position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};

package/lib/components/items/VimeoEmbed.js

@@ -46,6 +46,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     (0, react_1.useEffect)(() => {
         if (!vimeoPlayer || !imgRef)
             return;
+        if (play === 'on-click' && !controls) {
+            setIsCoverVisible(true);
+        }
         vimeoPlayer.on('pause', (e) => {
             if (e.seconds === 0) {
                 setIsCoverVisible(true);

package/lib/components/items/YoutubeEmbed.js

@@ -75,6 +75,11 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
         player.playVideo();
         setIsCoverVisible(false);
     };
+    (0, react_1.useEffect)(() => {
+        if (play === 'on-click' && !controls) {
+            setIsCoverVisible(true);
+        }
+    }, []);
     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: () => {
                     if (!player || play !== 'on-hover')
                         return;

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -28,7 +28,7 @@ class RichTextConverter {
         }, {});
         for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
             const block = blocks[blockIndex];
-            const content = text.slice(block.start, block.end);
+            const content = text.slice(block.start, block.end + 1);
             const entities = (_a = block.entities.sort((a, b) => a.start - b.start)) !== null && _a !== void 0 ? _a : [];
             if (content.length === 0) {
                 const id = `rt_${richText.id}_br_${blockIndex}`;
@@ -96,6 +96,7 @@ class RichTextConverter {
                     }
                     kids.push(...entityKids);
                 }
+                // sliceSymbols(content, style.start, style.end).forEach(c => console.log(c.charCodeAt(0)))
                 if (offset < getSymbolsCount(content)) {
                     kids.push(sliceSymbols(content, offset));
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/components/Item.tsx

@@ -148,7 +148,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
           opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
           top: `${stickyTop * 100}vw`,
           height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
-          ...(scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, 'WebkitTransform': `scale(${scale}) translateZ(0)` } : {}),
         }}
       >
         <RichTextWrapper isRichText={isRichText}>
@@ -161,7 +160,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
                     ? `${dimensions.width * exemplary}px`
                     : `${dimensions.width * 100}vw`
                   : 'max-content'}`,
-                height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}` } : {})
+                height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}` } : {}),
+              ...(scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, 'WebkitTransform': `scale(${scale}) translateZ(0)` } : {}),
             }}
           >
             <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} articleHeight={articleHeight} />
@@ -181,8 +181,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               transition: opacity 0.2s linear 0.1s;
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
-              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
-              transform: scale(${area.scale});
             }
             .item-${item.id}-inner {
               transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
@@ -190,6 +188,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
                 ? `${area.width * 100}vw`
                 : 'max-content'};
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
+              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
             }
             .item-wrapper-${item.id} {
               position: ${area.positionType === PositionType.ScreenBased ? 'fixed': 'absolute'};

package/src/components/items/VimeoEmbed.tsx

@@ -41,6 +41,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
 
   useEffect(() => {
     if (!vimeoPlayer || !imgRef) return;
+    if (play === 'on-click' && !controls) {
+      setIsCoverVisible(true);
+    }
     vimeoPlayer.on('pause', (e) => {
       if (e.seconds === 0) {
         setIsCoverVisible(true);

package/src/components/items/YoutubeEmbed.tsx

@@ -69,6 +69,12 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
     setIsCoverVisible(false);
   };
 
+  useEffect(() => {
+    if (play === 'on-click' && !controls) {
+      setIsCoverVisible(true);
+    }
+  }, []);
+
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -56,7 +56,7 @@ export class RichTextConverter {
 
     for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
       const block = blocks[blockIndex];
-      const content = text.slice(block.start, block.end);
+      const content = text.slice(block.start, block.end + 1);
       const entities = block.entities!.sort((a, b) => a.start - b.start) ?? [];
       if (content.length === 0) {
         const id = `rt_${richText.id}_br_${blockIndex}`;
@@ -127,6 +127,7 @@ export class RichTextConverter {
           }
           kids.push(...entityKids);
         }
+        // sliceSymbols(content, style.start, style.end).forEach(c => console.log(c.charCodeAt(0)))
         if (offset < getSymbolsCount(content)) {
           kids.push(sliceSymbols(content, offset));
         }

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>