@cntrl-site/sdk-nextjs 1.9.8 → 1.9.9

package/.idea/codeStyles/codeStyleConfig.xml

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

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/sdk-nextjs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/lib/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -38,7 +38,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
     const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
     const [ref, setRef] = (0, react_1.useState)(null);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
-    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
+    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(item.commonParams.coverUrl !== null);
     const layoutValues = [item.area, item.layoutParams];
     const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
     const frameStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['radius']);
@@ -68,6 +68,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
         if (layoutParams.play === 'on-click') {
             setIsCoverVisible(true);
         }
+        if (layoutParams.play === 'auto') {
+            setIsCoverVisible(false);
+        }
         vimeoPlayer.on('pause', (e) => {
             if (e.seconds === 0) {
                 setIsCoverVisible(true);
@@ -117,14 +120,19 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
         });
     }, [interactionCtrl, vimeoPlayer]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${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)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
-                    if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
+                    if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible)
                         return;
                     vimeoPlayer.play();
                 }, onMouseLeave: () => {
                     if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
                         return;
                     vimeoPlayer.pause();
-                }, children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
+                }, children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", Object.assign({ ref: setImgRef }, ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-click' ? { onClick: () => onCoverClick() } : {}), ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover' ? { onMouseEnter: () => {
+                            if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
+                                return;
+                            setIsCoverVisible(false);
+                            vimeoPlayer.play();
+                        } } : {}), { src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -133,7 +141,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                             width: '100%',
                             top: '0',
                             left: '0'
-                        }, alt: "Cover img" })), layoutParams && (!layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
+                        }, alt: "Cover img" }))), layoutParams && (!layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
                             position: 'absolute',
                             height: '100%',
                             width: '100%',

package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -29,7 +29,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
     const [player, setPlayer] = (0, react_1.useState)(undefined);
-    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
+    const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(item.commonParams.coverUrl !== null);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
     const layoutValues = [item.area, item.layoutParams];
     const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
@@ -115,14 +115,19 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
         });
     }, [interactionCtrl, player]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
-                    if (!player || !layoutParams || layoutParams.play !== 'on-hover')
+                    if (!player || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible)
                         return;
                     player.playVideo();
                 }, onMouseLeave: () => {
                     if (!player || !layoutParams || layoutParams.play !== 'on-hover')
                         return;
                     player.pauseVideo();
-                }, 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)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
+                }, 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)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", Object.assign({ ref: setImgRef }, ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-click' ? { onClick: () => onCoverClick() } : {}), ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover' ? { onMouseEnter: () => {
+                            if (!player || !layoutParams || layoutParams.play !== 'on-hover')
+                                return;
+                            setIsCoverVisible(false);
+                            player.playVideo();
+                        } } : {}), { src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -132,7 +137,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
                             top: '0',
                             left: '0',
                             zIndex: 1
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" }))), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.8",
+  "version": "1.9.9",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx

@@ -29,7 +29,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
-  const [isCoverVisible, setIsCoverVisible] = useState(false);
+  const [isCoverVisible, setIsCoverVisible] = useState(item.commonParams.coverUrl !== null);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);
   const frameStateParams = interactionCtrl?.getState<number>(['radius']);
@@ -58,6 +58,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     if (layoutParams.play === 'on-click') {
       setIsCoverVisible(true);
     }
+    if (layoutParams.play === 'auto') {
+      setIsCoverVisible(false);
+    }
     vimeoPlayer.on('pause', (e) => {
       if (e.seconds === 0) {
         setIsCoverVisible(true);
@@ -121,7 +124,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
           transition: wrapperStateParams?.transition ?? 'none'
         }}
         onMouseEnter={() => {
-          if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover') return;
+          if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible) return;
           vimeoPlayer.play();
         }}
         onMouseLeave={() => {
@@ -132,7 +135,12 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         {item.commonParams.coverUrl && (
           <img
             ref={setImgRef}
-            onClick={() => onCoverClick()}
+            {...(layoutParams?.play === 'on-click' ? { onClick: () => onCoverClick() } : {})}
+            {...(layoutParams?.play === 'on-hover' ? { onMouseEnter: () => {
+              if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover') return;
+              setIsCoverVisible(false);
+              vimeoPlayer.play();
+            } } : {})}
             src={item.commonParams.coverUrl ?? ''}
             style={{
               display: isCoverVisible ? 'block' : 'none',

package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx

@@ -24,7 +24,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const YT = useYouTubeIframeApi();
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
   const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
-  const [isCoverVisible, setIsCoverVisible] = useState(false);
+  const [isCoverVisible, setIsCoverVisible] = useState(item.commonParams.coverUrl !== null);
   const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);
@@ -114,7 +114,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
       <div
         className={`embed-youtube-video-wrapper-${item.id}`}
         onMouseEnter={() => {
-          if (!player || !layoutParams || layoutParams.play !== 'on-hover') return;
+          if (!player || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible) return;
           player.playVideo();
         }}
         onMouseLeave={() => {
@@ -132,7 +132,12 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
         {item.commonParams.coverUrl && (
           <img
             ref={setImgRef}
-            onClick={() => onCoverClick()}
+            {...(layoutParams?.play === 'on-click' ? { onClick: () => onCoverClick() } : {})}
+            {...(layoutParams?.play === 'on-hover' ? { onMouseEnter: () => {
+              if (!player || !layoutParams || layoutParams.play !== 'on-hover') return;
+              setIsCoverVisible(false);
+              player.playVideo();
+            } } : {})}
             src={item.commonParams.coverUrl ?? ''}
             style={{
               display: isCoverVisible ? 'block' : 'none',

package/src/components/items/Item.tsx

@@ -163,7 +163,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
         className={`item-${item.id}`}
         style={{
           opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
-          top: sticky ?getAnchoredItemTop(stickyTop, sectionHeight, anchorSide) : 0,
+          top: sticky ? getAnchoredItemTop(stickyTop, sectionHeight, anchorSide) : 0,
           height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
         }}
       >