@cntrl-site/sdk-nextjs 1.9.111 → 1.9.113

package/lib/components/Section/SectionImage.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionImage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SectionImage = ({ media, sectionId }) => {
-    const { url, size, position, offsetX } = media;
+    const { url, size, position, offsetX, opacity, tileSize } = media;
     const isContainHeight = size === 'contain-height';
+    const isTile = size === 'tile';
     const hasOffsetX = offsetX !== null && size === 'contain';
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: `section-image-wrapper-${sectionId}`, style: {
                 position: position === 'fixed' ? 'sticky' : 'relative',
@@ -12,13 +13,25 @@ const SectionImage = ({ media, sectionId }) => {
                 top: position === 'fixed' ? '100vh' : '0',
                 width: '100%',
                 overflow: 'hidden'
-            }, children: (0, jsx_runtime_1.jsx)("img", { src: url, className: `image-background-${sectionId}`, style: {
+            }, children: isTile ? ((0, jsx_runtime_1.jsx)("div", { className: `image-background-${sectionId}`, style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    backgroundImage: `url(${url})`,
+                    backgroundSize: `${tileSize}%`,
+                    backgroundRepeat: 'repeat',
+                    backgroundPosition: '0 0',
+                    opacity
+                } })) : ((0, jsx_runtime_1.jsx)("img", { src: url, className: `image-background-${sectionId}`, style: {
                     objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
                     width: isContainHeight || hasOffsetX ? 'auto' : '100%',
                     transform: isContainHeight ? 'translateX(-50%)' : 'none',
                     position: 'relative',
                     left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
-                    height: '100%'
-                } }) }) }));
+                    height: '100%',
+                    opacity
+                } })) }) }));
 };
 exports.SectionImage = SectionImage;

package/lib/components/Section/SectionVideo.js

@@ -7,7 +7,7 @@ const SectionVideo = ({ container, sectionId, media }) => {
     const [video, setVideo] = (0, react_1.useState)(null);
     const [videoWrapper, setVideoWrapper] = (0, react_1.useState)(null);
     const [isVideoWidthOverflow, setIsVideoWidthOverflow] = (0, react_1.useState)(false);
-    const { url, size, position, offsetX, coverUrl, play } = media;
+    const { url, size, position, offsetX, coverUrl, play, opacity } = media;
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
     const [userPaused, setUserPaused] = (0, react_1.useState)(false);
     const [isClickedOnCover, setIsClickedOnCover] = (0, react_1.useState)(false);
@@ -64,7 +64,7 @@ const SectionVideo = ({ container, sectionId, media }) => {
                 overflow: 'hidden',
                 width: '100%'
             }, children: [(0, jsx_runtime_1.jsx)("video", { ref: setVideo, autoPlay: play === 'auto', loop: true, style: {
-                        opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
+                        opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : opacity,
                         objectFit: isContainHeight ? 'cover' : (size !== null && size !== void 0 ? size : 'cover'),
                         width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
                         transform: isContainHeight ? 'translateX(-50%)' : 'none',
@@ -78,7 +78,7 @@ const SectionVideo = ({ container, sectionId, media }) => {
                         height: '100%',
                         top: 0
                     }, onClick: handleCoverClick, children: coverUrl && play === 'on-click' && ((0, jsx_runtime_1.jsx)("img", { src: coverUrl, alt: "Video cover", className: `video-background-${sectionId}-cover`, style: {
-                            opacity: isPlaying ? 0 : 1,
+                            opacity: isPlaying ? 0 : opacity,
                             left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
                             width: isContainHeight ? 'auto' : '100%',
                             objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.111",
+  "version": "1.9.113",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,9 +31,9 @@
   "dependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^1.0.56",
+    "@cntrl-site/components": "^1.0.57",
     "@cntrl-site/effects": "^1.4.2",
-    "@cntrl-site/sdk": "^1.28.4",
+    "@cntrl-site/sdk": "^1.28.5",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/Section/SectionImage.tsx

@@ -7,6 +7,8 @@ export type TSectionImage = {
   size: string;
   position: string;
   offsetX: number | null;
+  opacity?: number;
+  tileSize?: number;
 };
 
 interface Props {
@@ -15,8 +17,9 @@ interface Props {
 }
 
 export const SectionImage: FC<Props> = ({ media, sectionId }) => {
-  const { url, size, position, offsetX } = media;
+  const { url, size, position, offsetX, opacity, tileSize } = media;
   const isContainHeight = size === 'contain-height';
+  const isTile = size === 'tile';
   const hasOffsetX = offsetX !== null && size === 'contain';
   return (
     <>
@@ -30,18 +33,37 @@ export const SectionImage: FC<Props> = ({ media, sectionId }) => {
           overflow: 'hidden'
         }}
       >
-        <img
-          src={url}
-          className={`image-background-${sectionId}`}
-          style={{
-            objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],
-            width: isContainHeight || hasOffsetX ? 'auto' : '100%',
-            transform: isContainHeight ? 'translateX(-50%)' : 'none',
-            position: 'relative',
-            left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
-            height: '100%'
-          }}
-        />
+        {isTile ? (
+          <div
+            className={`image-background-${sectionId}`}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              backgroundImage: `url(${url})`,
+              backgroundSize: `${tileSize}%`,
+              backgroundRepeat: 'repeat',
+              backgroundPosition: '0 0',
+              opacity
+            }}
+          />
+        ) : (
+          <img
+            src={url}
+            className={`image-background-${sectionId}`}
+            style={{
+              objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],
+              width: isContainHeight || hasOffsetX ? 'auto' : '100%',
+              transform: isContainHeight ? 'translateX(-50%)' : 'none',
+              position: 'relative',
+              left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
+              height: '100%',
+              opacity
+            }}
+          />
+        )}
       </div>
     </>
   );

package/src/components/Section/SectionVideo.tsx

@@ -9,6 +9,7 @@ export type TSectionVideo = {
   position: string;
   coverUrl: string | null;
   offsetX: number | null;
+  opacity?: number;
 };
 
 interface Props {
@@ -21,7 +22,7 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
   const [video, setVideo] = useState<HTMLVideoElement | null>(null);
   const [videoWrapper, setVideoWrapper] = useState<HTMLDivElement | null>(null);
   const [isVideoWidthOverflow, setIsVideoWidthOverflow] = useState(false);
-  const { url, size, position, offsetX, coverUrl, play } = media;
+  const { url, size, position, offsetX, coverUrl, play, opacity } = media;
   const [isPlaying, setIsPlaying] = useState(false);
   const [userPaused, setUserPaused] = useState(false);
   const [isClickedOnCover, setIsClickedOnCover] = useState(false);
@@ -89,7 +90,7 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
           autoPlay={play === 'auto'}
           loop
           style={{
-            opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
+            opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : opacity,
             objectFit: isContainHeight ? 'cover' : (size ?? 'cover') as CSSProperties['objectFit'],
             width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
             transform: isContainHeight ? 'translateX(-50%)' : 'none',
@@ -125,7 +126,7 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
                 alt="Video cover"
                 className={`video-background-${sectionId}-cover`}
                 style={{
-                  opacity: isPlaying ? 0 : 1,
+                  opacity: isPlaying ? 0 : opacity,
                   left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
                   width: isContainHeight ? 'auto' : '100%',
                   objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],