@cntrl-site/sdk-nextjs 1.8.19-alpha.2 → 1.8.19-alpha.4

package/lib/components/Section/Section.js

@@ -14,6 +14,7 @@ const color_1 = require("@cntrl-site/color");
 const useLayoutContext_1 = require("../useLayoutContext");
 const SectionVideo_1 = require("./SectionVideo");
 const SectionImage_1 = require("./SectionImage");
+const checkOverflowClipSupport_1 = require("../../utils/checkOverflowClipSupport");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 const Section = ({ section, data, children }) => {
     var _a;
@@ -24,7 +25,14 @@ const Section = ({ section, data, children }) => {
     const layoutValues = [section.height, section.color, (_a = section.media) !== null && _a !== void 0 ? _a : {}];
     const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
     (0, useSectionRegistry_1.useSectionRegistry)(section.id, sectionRef.current);
+    const sectionHeight = layout && section.height[layout] ? section.height[layout] : undefined;
     const layoutMedia = layout && section.media && section.media[layout] ? section.media[layout] : undefined;
+    const media = (0, react_1.useMemo)(() => {
+        if (layoutMedia && !(0, checkOverflowClipSupport_1.isOverflowClipSupported)()) {
+            return Object.assign(Object.assign({}, layoutMedia), { position: 'local' });
+        }
+        return layoutMedia;
+    }, [layoutMedia]);
     const getSectionVisibilityStyles = () => {
         return layouts
             .sort((a, b) => a.startsWith - b.startsWith)
@@ -41,7 +49,7 @@ const Section = ({ section, data, children }) => {
     };
     if (SectionComponent)
         return (0, jsx_runtime_1.jsx)("div", { ref: sectionRef, children: (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children }) });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, children: [layoutMedia && layoutMedia.size !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `section-background-wrapper-${section.id}`, children: [layoutMedia.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: layoutMedia })), layoutMedia.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: layoutMedia, sectionId: section.id }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, children: [media && media.size !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `section-background-wrapper-${section.id}`, style: Object.assign({ transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset' }, (sectionHeight && { height: media.position === 'fixed' ? `calc(${getSectionHeight(sectionHeight)} + 200vh)` : getSectionHeight(sectionHeight) })), children: [media.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: media })), media.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: media, sectionId: section.id }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color, media]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};

package/lib/components/Section/SectionImage.js

@@ -12,15 +12,21 @@ const SectionImage = ({ media, sectionId }) => {
     const { url, size, position, offsetX } = media;
     const isContainHeight = size === 'contain-height';
     const hasOffsetX = offsetX !== null && size === 'contain';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: url, className: `image-background-${sectionId}` }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-image-wrapper-${sectionId}`, children: (0, jsx_runtime_1.jsx)("img", { src: url, className: `image-background-${sectionId}` }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .section-image-wrapper-${sectionId} {
+          position: ${position === 'fixed' ? 'sticky' : 'relative'};
+          height: ${position === 'fixed' ? '100vh' : '100%'};
+          top: ${position === 'fixed' ? '100vh' : '0'};
+          width: 100%;
+          overflow: hidden;
+        }
          .image-background-${sectionId} {
           object-fit: ${isContainHeight ? 'unset' : size !== null && size !== void 0 ? size : 'cover'};
           width: ${isContainHeight || hasOffsetX ? 'auto' : '100%'};
-          height: ${position === 'fixed' ? '100vh' : '100%'};
           transform: ${isContainHeight ? 'translateX(-50%)' : 'none'};
-          position: ${position === 'fixed' ? 'sticky' : 'relative'};
-          top: ${position === 'fixed' ? '100vh' : 'unset'};
-          margin-left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          position: relative;
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          height: 100%;
           ${offsetX ? 'max-width: 100vw;' : ''}
          }
       ` })] }));

package/lib/components/Section/SectionVideo.js

@@ -12,39 +12,47 @@ const SectionVideo = ({ container, sectionId, media }) => {
     const { url, size, position, offsetX, coverUrl, play } = media;
     const id = (0, react_1.useId)();
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
+    const [userPaused, setUserPaused] = (0, react_1.useState)(false);
+    const [isClickedOnCover, setIsClickedOnCover] = (0, react_1.useState)(false);
     const handleCoverClick = () => {
         if (!video || play !== 'on-click')
             return;
+        setIsClickedOnCover(true);
         if (isPlaying) {
             video.pause();
+            setUserPaused(true);
         }
         else {
             video.play();
+            setUserPaused(false);
         }
     };
     (0, react_1.useEffect)(() => {
-        if (!video || play !== 'auto')
+        if (!video || play !== 'on-click')
             return;
         const observer = new IntersectionObserver(([entry]) => {
+            if (userPaused || !isClickedOnCover)
+                return;
             if (entry.isIntersecting) {
-                video.style.display = 'block';
-                video.play().catch(() => { });
+                video.play();
             }
             else {
-                video.style.display = 'none';
                 video.pause();
             }
-        }, {
-            root: null,
-            rootMargin: '50px',
-            threshold: 0
         });
         observer.observe(container);
         return () => observer.disconnect();
-    }, [container, play]);
+    }, [container, play, userPaused, isClickedOnCover]);
     const isContainHeight = size === 'contain-height';
     const hasOffsetX = offsetX !== null && size === 'contain';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { ref: setVideo, autoPlay: play === 'auto', loop: true, style: { opacity: !isPlaying && play === 'on-click' && coverUrl ? 0 : 1 }, controls: false, muted: play === 'auto', playsInline: true, preload: "auto", className: `video-background-${sectionId}`, onPlay: () => setIsPlaying(true), onPause: () => setIsPlaying(false), children: (0, jsx_runtime_1.jsx)("source", { src: `${url}#t=0.001` }) }), (0, jsx_runtime_1.jsx)("div", { className: `video-background-${sectionId}-cover-container`, 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 } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-video-wrapper-${sectionId}`, children: [(0, jsx_runtime_1.jsx)("video", { ref: setVideo, autoPlay: play === 'auto', loop: true, style: { opacity: !isPlaying && play === 'on-click' && coverUrl ? 0 : 1 }, controls: false, muted: play === 'auto', playsInline: true, preload: "auto", className: `video-background-${sectionId}`, onPlay: () => setIsPlaying(true), onPause: () => setIsPlaying(false), children: (0, jsx_runtime_1.jsx)("source", { src: `${url}#t=0.001` }) }), (0, jsx_runtime_1.jsx)("div", { className: `video-background-${sectionId}-cover-container`, 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 } })) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        .section-video-wrapper-${sectionId} {
+          position: ${position === 'fixed' ? 'sticky' : 'relative'};
+          height: ${position === 'fixed' ? '100vh' : '100%'};
+          top: ${position === 'fixed' ? '100vh' : '0'};
+          width: 100%;
+          overflow: hidden;
+        }
         .video-background-${sectionId}-cover-container {
           position: absolute;
           pointer-events: ${play === 'on-click' ? 'auto' : 'none'};
@@ -54,24 +62,22 @@ const SectionVideo = ({ container, sectionId, media }) => {
           top: 0;
         }
         .video-background-${sectionId}-cover {
-          position: ${position === 'fixed' ? 'sticky' : 'relative'};
-          margin-left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          position: relative;
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
           width: ${isContainHeight ? 'auto' : '100%'};
-          height: ${position === 'fixed' ? '100vh' : '100%'};
+          height: 100%;
           object-fit: ${isContainHeight ? 'unset' : size !== null && size !== void 0 ? size : 'cover'};
           transition: opacity 0.1s ease-in-out;
-          top: ${position === 'fixed' ? '100vh' : '0'};
           transform: ${isContainHeight ? 'translateX(-50%)' : 'none'};
           ${hasOffsetX ? 'max-width: 100vw;' : ''}
         }
         .video-background-${sectionId} {
           object-fit: ${isContainHeight ? 'unset' : size !== null && size !== void 0 ? size : 'cover'};
           width: ${isContainHeight ? 'auto' : '100%'};
-          height: ${position === 'fixed' ? '100vh' : '100%'};
+          height: 100%;
+          position: relative;
           transform: ${isContainHeight ? 'translateX(-50%)' : 'none'};
-          position: ${position === 'fixed' ? 'sticky' : 'relative'};
-          top: ${position === 'fixed' ? '100vh' : 'unset'};
-          margin-left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
         }
       ` })] }));
 };

package/lib/utils/checkOverflowClipSupport.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOverflowClipSupported = void 0;
+function isOverflowClipSupported() {
+    if (typeof window === 'undefined')
+        return false;
+    if (typeof CSS !== 'undefined' && CSS.supports) {
+        return CSS.supports('overflow', 'clip');
+    }
+    try {
+        const testElement = document.createElement('div');
+        testElement.style.overflow = 'clip';
+        return testElement.style.overflow === 'clip';
+    }
+    catch (_a) {
+        return false;
+    }
+}
+exports.isOverflowClipSupported = isOverflowClipSupported;

package/package.json

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

package/src/components/ArticleWrapper.tsx

@@ -4,7 +4,7 @@ import { LayoutContext } from '../provider/LayoutContext';
 
 export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
   const { layoutId, layoutDeviation } = useCurrentLayout();
-  const layoutDeviationStyle = {'--layout-deviation': layoutDeviation} as CSSProperties;
+  const layoutDeviationStyle = { '--layout-deviation': layoutDeviation } as CSSProperties;
 
   return (
     <LayoutContext.Provider value={layoutId}>

package/src/components/Section/Section.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, useId, useRef } from 'react';
+import React, { FC, ReactElement, useId, useRef, useMemo } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   getLayoutMediaQuery,
@@ -13,6 +13,7 @@ import { CntrlColor } from '@cntrl-site/color';
 import { useLayoutContext } from '../useLayoutContext';
 import { SectionVideo } from './SectionVideo';
 import { SectionImage } from './SectionImage';
+import { isOverflowClipSupported } from '../../utils/checkOverflowClipSupport';
 
 type SectionChild = ReactElement<any, any>;
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
@@ -31,8 +32,19 @@ export const Section: FC<Props> = ({ section, data, children }) => {
   const layoutValues: Record<string, any>[] = [section.height, section.color, section.media ?? {}];
   const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
   useSectionRegistry(section.id, sectionRef.current);
+  const sectionHeight = layout && section.height[layout] ? section.height[layout] : undefined;
   const layoutMedia = layout && section.media && section.media[layout] ? section.media[layout] : undefined;
 
+  const media = useMemo(() => {
+    if (layoutMedia && !isOverflowClipSupported()) {
+      return {
+        ...layoutMedia,
+        position: 'local'
+      };
+    }
+    return layoutMedia;
+  }, [layoutMedia]);
+
   const getSectionVisibilityStyles = () => {
     return layouts
       .sort((a, b) => a.startsWith - b.startsWith)
@@ -57,17 +69,21 @@ export const Section: FC<Props> = ({ section, data, children }) => {
         id={section.name}
         ref={sectionRef}
       >
-        {layoutMedia && layoutMedia.size !== 'none' && sectionRef.current && (
+        {media && media.size !== 'none' && sectionRef.current && (
           <div className={`section-background-overlay-${section.id}`}>
             <div
               key={`section-background-wrapper-${section.id}`}
               className={`section-background-wrapper-${section.id}`}
+              style={{
+                transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset',
+                ...(sectionHeight && { height: media.position === 'fixed' ? `calc(${getSectionHeight(sectionHeight)} + 200vh)` : getSectionHeight(sectionHeight) })
+              }}
             >
-              {layoutMedia.type === 'video' && (
-                <SectionVideo container={sectionRef.current} sectionId={section.id} media={layoutMedia} />
+              {media.type === 'video' && (
+                <SectionVideo container={sectionRef.current} sectionId={section.id} media={media} />
               )}
-              {layoutMedia.type === 'image' && (
-                <SectionImage media={layoutMedia} sectionId={section.id} />
+              {media.type === 'image' && (
+                <SectionImage media={media} sectionId={section.id} />
               )}
             </div>
           </div>

package/src/components/Section/SectionImage.tsx

@@ -21,16 +21,24 @@ export const SectionImage: FC<Props> = ({ media, sectionId }) => {
   const hasOffsetX = offsetX !== null && size === 'contain';
   return (
     <>
-      <img src={url} className={`image-background-${sectionId}`} />
+      <div className={`section-image-wrapper-${sectionId}`}>
+        <img src={url} className={`image-background-${sectionId}`} />
+      </div>
       <JSXStyle id={id}>{`
+        .section-image-wrapper-${sectionId} {
+          position: ${position === 'fixed' ? 'sticky' : 'relative'};
+          height: ${position === 'fixed' ? '100vh' : '100%'};
+          top: ${position === 'fixed' ? '100vh' : '0'};
+          width: 100%;
+          overflow: hidden;
+        }
          .image-background-${sectionId} {
           object-fit: ${isContainHeight ? 'unset' : size ?? 'cover'};
           width: ${isContainHeight || hasOffsetX ? 'auto' : '100%'};
-          height: ${position === 'fixed' ? '100vh' : '100%'};
           transform: ${isContainHeight ? 'translateX(-50%)' : 'none'};
-          position: ${position === 'fixed' ? 'sticky' : 'relative'};
-          top: ${position === 'fixed' ? '100vh' : 'unset'};
-          margin-left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          position: relative;
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          height: 100%;
           ${offsetX ? 'max-width: 100vw;' : ''}
          }
       `}

package/src/components/Section/SectionVideo.tsx

@@ -22,64 +22,72 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
   const { url, size, position, offsetX, coverUrl, play } = media;
   const id = useId();
   const [isPlaying, setIsPlaying] = useState(false);
+  const [userPaused, setUserPaused] = useState(false);
+  const [isClickedOnCover, setIsClickedOnCover] = useState(false);
 
   const handleCoverClick = () => {
     if (!video || play !== 'on-click') return;
+    setIsClickedOnCover(true);
     if (isPlaying) {
       video.pause();
+      setUserPaused(true);
     } else {
       video.play();
+      setUserPaused(false);
     }
   };
 
   useEffect(() => {
-    if (!video || play !== 'auto') return;
+    if (!video || play !== 'on-click') return;
     const observer = new IntersectionObserver(
       ([entry]) => {
+        if (userPaused || !isClickedOnCover) return;
         if (entry.isIntersecting) {
-          video.style.display = 'block';
-          video.play().catch(() => {});
+          video.play();
         } else {
-          video.style.display = 'none';
           video.pause();
         }
-      },
-      {
-        root: null,
-        rootMargin: '50px',
-        threshold: 0
       }
     );
     observer.observe(container);
     return () => observer.disconnect();
-  }, [container, play]);
+  }, [container, play, userPaused, isClickedOnCover]);
 
   const isContainHeight = size === 'contain-height';
   const hasOffsetX = offsetX !== null && size === 'contain';
 
   return (
     <>
-      <video
-        ref={setVideo}
-        autoPlay={play === 'auto'}
-        loop
-        style={{ opacity: !isPlaying && play === 'on-click' && coverUrl ? 0 : 1 }}
-        controls={false}
-        muted={play === 'auto'}
-        playsInline
-        preload="auto"
-        className={`video-background-${sectionId}`}
-        onPlay={() => setIsPlaying(true)}
-        onPause={() => setIsPlaying(false)}
-      >
-        <source src={`${url}#t=0.001`} />
-      </video>
-      <div className={`video-background-${sectionId}-cover-container`} onClick={handleCoverClick}>
-        {coverUrl && play === 'on-click' && (
-          <img src={coverUrl} alt="Video cover" className={`video-background-${sectionId}-cover`} style={{ opacity: isPlaying ? 0 : 1 }} />
-        )}
+      <div className={`section-video-wrapper-${sectionId}`}>
+        <video
+          ref={setVideo}
+          autoPlay={play === 'auto'}
+          loop
+          style={{ opacity: !isPlaying && play === 'on-click' && coverUrl ? 0 : 1 }}
+          controls={false}
+          muted={play === 'auto'}
+          playsInline
+          preload="auto"
+          className={`video-background-${sectionId}`}
+          onPlay={() => setIsPlaying(true)}
+          onPause={() => setIsPlaying(false)}
+        >
+          <source src={`${url}#t=0.001`} />
+        </video>
+        <div className={`video-background-${sectionId}-cover-container`} onClick={handleCoverClick}>
+          {coverUrl && play === 'on-click' && (
+            <img src={coverUrl} alt="Video cover" className={`video-background-${sectionId}-cover`} style={{ opacity: isPlaying ? 0 : 1 }} />
+          )}
+        </div>
       </div>
       <JSXStyle id={id}>{`
+        .section-video-wrapper-${sectionId} {
+          position: ${position === 'fixed' ? 'sticky' : 'relative'};
+          height: ${position === 'fixed' ? '100vh' : '100%'};
+          top: ${position === 'fixed' ? '100vh' : '0'};
+          width: 100%;
+          overflow: hidden;
+        }
         .video-background-${sectionId}-cover-container {
           position: absolute;
           pointer-events: ${play === 'on-click' ? 'auto' : 'none'};
@@ -89,24 +97,22 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
           top: 0;
         }
         .video-background-${sectionId}-cover {
-          position: ${position === 'fixed' ? 'sticky' : 'relative'};
-          margin-left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          position: relative;
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
           width: ${isContainHeight ? 'auto' : '100%'};
-          height: ${position === 'fixed' ? '100vh' : '100%'};
+          height: 100%;
           object-fit: ${isContainHeight ? 'unset' : size ?? 'cover'};
           transition: opacity 0.1s ease-in-out;
-          top: ${position === 'fixed' ? '100vh' : '0'};
           transform: ${isContainHeight ? 'translateX(-50%)' : 'none'};
           ${hasOffsetX ? 'max-width: 100vw;' : ''}
         }
         .video-background-${sectionId} {
           object-fit: ${isContainHeight ? 'unset' : size ?? 'cover'};
           width: ${isContainHeight ? 'auto' : '100%'};
-          height: ${position === 'fixed' ? '100vh' : '100%'};
+          height: 100%;
+          position: relative;
           transform: ${isContainHeight ? 'translateX(-50%)' : 'none'};
-          position: ${position === 'fixed' ? 'sticky' : 'relative'};
-          top: ${position === 'fixed' ? '100vh' : 'unset'};
-          margin-left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
         }
       `}
       </JSXStyle>

package/src/utils/checkOverflowClipSupport.ts

@@ -0,0 +1,13 @@
+export function isOverflowClipSupported(): boolean {
+  if (typeof window === 'undefined') return false;
+  if (typeof CSS !== 'undefined' && CSS.supports) {
+    return CSS.supports('overflow', 'clip');
+  }
+  try {
+    const testElement = document.createElement('div');
+    testElement.style.overflow = 'clip';
+    return testElement.style.overflow === 'clip';
+  } catch {
+    return false;
+  }
+}