@cntrl-site/sdk-nextjs 1.8.19 → 1.8.20

package/lib/components/Section/Section.js

@@ -12,22 +12,27 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useSectionRegistry_1 = require("../../utils/ArticleRectManager/useSectionRegistry");
 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)';
-function isVideoUrl(url) {
-    const videoExtensions = ['.mp4', '.webm', '.ogg'];
-    return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
-}
 const Section = ({ section, data, children }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a;
     const id = (0, react_1.useId)();
     const sectionRef = (0, react_1.useRef)(null);
     const { layouts, customSections } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
     const layoutValues = [section.height, section.color, (_a = section.media) !== null && _a !== void 0 ? _a : {}];
     const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
-    const isVideo = layout && ((_c = (_b = section.media) === null || _b === void 0 ? void 0 : _b[layout]) === null || _c === void 0 ? void 0 : _c.url) ? isVideoUrl(String((_e = (_d = section.media) === null || _d === void 0 ? void 0 : _d[layout]) === null || _e === void 0 ? void 0 : _e.url)) : false;
-    const videoRef = (0, react_1.useRef)(null);
     (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)
@@ -42,34 +47,10 @@ const Section = ({ section, data, children }) => {
           }`;
         }, '');
     };
-    (0, react_1.useEffect)(() => {
-        if (!isVideo || !sectionRef.current || !videoRef.current)
-            return;
-        const video = videoRef.current;
-        const section = sectionRef.current;
-        const observer = new IntersectionObserver(([entry]) => {
-            if (entry.isIntersecting) {
-                video.style.display = 'block';
-                video.play().catch(() => { });
-            }
-            else {
-                video.style.display = 'none';
-                video.pause();
-            }
-        }, {
-            root: null,
-            rootMargin: '50px',
-            threshold: 0
-        });
-        observer.observe(section);
-        return () => observer.disconnect();
-    }, [isVideo]);
     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: [layout && ((_g = (_f = section.media) === null || _f === void 0 ? void 0 : _f[layout]) === null || _g === void 0 ? void 0 : _g.url) && ((_j = (_h = section.media) === null || _h === void 0 ? void 0 : _h[layout]) === null || _j === void 0 ? void 0 : _j.size) !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsx)("div", { className: `section-background-wrapper-${section.id}`, children: isVideo ? ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, preload: "auto", className: `video-background-${section.id}`, children: (0, jsx_runtime_1.jsx)("source", { src: (_m = (_l = (_k = section.media) === null || _k === void 0 ? void 0 : _k[layout]) === null || _l === void 0 ? void 0 : _l.url) !== null && _m !== void 0 ? _m : '' }) })) : ((0, jsx_runtime_1.jsx)("img", { src: (_q = (_p = (_o = section.media) === null || _o === void 0 ? void 0 : _o[layout]) === null || _p === void 0 ? void 0 : _p.url) !== null && _q !== void 0 ? _q : '', className: `image-background-${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]) => {
-                    var _a;
-                    return (`
+    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)};
             position: relative;
@@ -87,24 +68,7 @@ const Section = ({ section, data, children }) => {
             height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
             width: 100%;
          }
-         .video-background-${section.id} {
-            object-fit: ${(_a = media === null || media === void 0 ? void 0 : media.size) !== null && _a !== void 0 ? _a : 'cover'};
-            width: ${(media === null || media === void 0 ? void 0 : media.offsetX) === null || (media === null || media === void 0 ? void 0 : media.size) === 'cover' ? '100%' : 'auto'};
-            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
-            position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
-            top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
-            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
-         }
-         .image-background-${section.id} {
-            object-fit: ${media === null || media === void 0 ? void 0 : media.size};
-            width: ${(media === null || media === void 0 ? void 0 : media.offsetX) === null ? '100%' : 'auto'};
-            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : '100%'};
-            position: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'sticky' : 'relative'};
-            top: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? '100vh' : 'unset'};
-            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
-         }
-        `);
-                })}
+        `))}
       ${getSectionVisibilityStyles()}
     ` })] }));
 };

package/lib/components/Section/SectionImage.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const SectionImage = ({ media, sectionId }) => {
+    const id = (0, react_1.useId)();
+    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)("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%'};
+          transform: ${isContainHeight ? 'translateX(-50%)' : 'none'};
+          position: relative;
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          height: 100%;
+          ${offsetX ? 'max-width: 100vw;' : ''}
+         }
+      ` })] }));
+};
+exports.SectionImage = SectionImage;

package/lib/components/Section/SectionVideo.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const SectionVideo = ({ container, sectionId, media }) => {
+    const [video, setVideo] = (0, react_1.useState)(null);
+    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 !== 'on-click')
+            return;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (userPaused || !isClickedOnCover)
+                return;
+            if (entry.isIntersecting) {
+                video.play();
+            }
+            else {
+                video.pause();
+            }
+        });
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [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.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'};
+          left: 0;
+          width: 100%;
+          height: 100%;
+          top: 0;
+        }
+        .video-background-${sectionId}-cover {
+          position: relative;
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          width: ${isContainHeight ? 'auto' : '100%'};
+          height: 100%;
+          object-fit: ${isContainHeight ? 'unset' : size !== null && size !== void 0 ? size : 'cover'};
+          transition: opacity 0.1s ease-in-out;
+          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: 100%;
+          position: relative;
+          transform: ${isContainHeight ? 'translateX(-50%)' : 'none'};
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+        }
+      ` })] }));
+};
+exports.SectionVideo = SectionVideo;

package/lib/components/items/FileItem/VideoItem.js

@@ -20,7 +20,6 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const useVideoFx_1 = require("../../../utils/effects/useVideoFx");
 const useElementRect_1 = require("../../../utils/useElementRect");
 const useItemFXData_1 = require("../../../common/useItemFXData");
-const PlayIcon_1 = require("./PlayIcon");
 const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const id = (0, react_1.useId)();
@@ -31,8 +30,6 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const [ref, setRef] = (0, react_1.useState)(null);
     const videoRef = (0, react_1.useRef)(null);
     const fxCanvas = (0, react_1.useRef)(null);
-    const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
-    const [isEventTriggered, setIsEventTriggered] = (0, react_1.useState)(false);
     const { url, hasGLEffect } = item.commonParams;
     const isInitialRef = (0, react_1.useRef)(true);
     const area = layoutId ? item.area[layoutId] : null;
@@ -72,45 +69,11 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    const playVideo = () => {
-        if (videoRef.current) {
-            videoRef.current.play();
-            setIsEventTriggered(true);
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        if (!isEventTriggered || !ref)
-            return;
-        const intersectionObserver = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (!videoRef.current)
-                    return;
-                if (entry.isIntersecting) {
-                    videoRef.current.play();
-                }
-                else {
-                    videoRef.current.pause();
-                }
-            });
-        });
-        intersectionObserver.observe(ref);
-        return () => {
-            intersectionObserver.disconnect();
-        };
-    }, [isEventTriggered, ref]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: [!isPlaying && ((0, jsx_runtime_1.jsx)("div", { className: `play-btn-wrapper-${item.id}`, children: (0, jsx_runtime_1.jsx)(PlayIcon_1.PlayIcon, { className: `play-btn-${item.id}`, onClick: playVideo }) })), hasScrollPlayback
-                        ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` }))
-                        : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: hasGLEffect && isFXAllowed
-                                ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight }))
-                                : ((0, jsx_runtime_1.jsx)("video", { poster: (_p = item.commonParams.coverUrl) !== null && _p !== void 0 ? _p : '', ref: videoRef, controls: true, onPlay: () => {
-                                        setIsPlaying(true);
-                                        console.log('play');
-                                    }, onPause: () => {
-                                        setIsPlaying(false);
-                                        console.log('pause');
-                                    }, onEnded: () => {
-                                        console.log('ended');
-                                    }, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: hasScrollPlayback
+                    ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` }))
+                    : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: hasGLEffect && isFXAllowed
+                            ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight }))
+                            : ((0, jsx_runtime_1.jsx)("video", { poster: (_p = item.commonParams.coverUrl) !== null && _p !== void 0 ? _p : '', ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
@@ -119,23 +82,6 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
           box-sizing: border-box;
           opacity: ${opacity};
         }
-        .play-btn-wrapper-${item.id} {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          height: 100%;
-        }
-        .play-btn-${item.id} {
-          width: 100px;
-          position: relative;
-          z-index: 1;
-          pointer-events: auto;
-          height: 100px;
-        }
         .video {
           width: 100%;
           height: 100%;

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",
+  "version": "1.8.20",
   "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.4.0",
-    "@cntrl-site/sdk": "^1.22.16",
+    "@cntrl-site/sdk": "^1.22.18",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

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, useEffect, useId, useRef, useState, useContext } from 'react';
+import React, { FC, ReactElement, useId, useRef, useMemo } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   getLayoutMediaQuery,
@@ -11,6 +11,9 @@ import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useSectionRegistry } from '../../utils/ArticleRectManager/useSectionRegistry';
 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)';
@@ -21,11 +24,6 @@ interface Props {
   data?: any;
 }
 
-function isVideoUrl(url: string): boolean {
-  const videoExtensions = ['.mp4', '.webm', '.ogg'];
-  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
-}
-
 export const Section: FC<Props> = ({ section, data, children }) => {
   const id = useId();
   const sectionRef = useRef<HTMLDivElement | null>(null);
@@ -33,9 +31,19 @@ export const Section: FC<Props> = ({ section, data, children }) => {
   const layout = useLayoutContext();
   const layoutValues: Record<string, any>[] = [section.height, section.color, section.media ?? {}];
   const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
-  const isVideo = layout && section.media?.[layout]?.url ? isVideoUrl(String(section.media?.[layout]?.url)) : false;
-  const videoRef = useRef<HTMLVideoElement | null>(null);
   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
@@ -52,30 +60,6 @@ export const Section: FC<Props> = ({ section, data, children }) => {
       }, '');
   };
 
-  useEffect(() => {
-    if (!isVideo || !sectionRef.current || !videoRef.current) return;
-    const video = videoRef.current;
-    const section = sectionRef.current;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          video.style.display = 'block';
-          video.play().catch(() => {});
-        } else {
-          video.style.display = 'none';
-          video.pause();
-        }
-      },
-      {
-        root: null,
-        rootMargin: '50px',
-        threshold: 0
-      }
-    );
-    observer.observe(section);
-    return () => observer.disconnect();
-  }, [isVideo]);
-
   if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
 
   return (
@@ -85,26 +69,21 @@ export const Section: FC<Props> = ({ section, data, children }) => {
         id={section.name}
         ref={sectionRef}
       >
-        {layout && section.media?.[layout]?.url && section.media?.[layout]?.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) })
+              }}
             >
-              {isVideo ? (
-                <video
-                  ref={videoRef}
-                  autoPlay
-                  loop
-                  muted
-                  playsInline
-                  preload="auto"
-                  className={`video-background-${section.id}`}
-                >
-                  <source src={section.media?.[layout]?.url ?? ''} />
-                </video>
-              ) : (
-                <img src={section.media?.[layout]?.url ?? ''} className={`image-background-${section.id}`} />
+              {media.type === 'video' && (
+                <SectionVideo container={sectionRef.current} sectionId={section.id} media={media} />
+              )}
+              {media.type === 'image' && (
+                <SectionImage media={media} sectionId={section.id} />
               )}
             </div>
           </div>
@@ -131,22 +110,6 @@ export const Section: FC<Props> = ({ section, data, children }) => {
             height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
             width: 100%;
          }
-         .video-background-${section.id} {
-            object-fit: ${media?.size ?? 'cover'};
-            width: ${media?.offsetX === null || media?.size === 'cover' ? '100%' : 'auto'};
-            height: ${media?.position === 'fixed' ? '100vh' : '100%'};
-            position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
-            top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
-            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
-         }
-         .image-background-${section.id} {
-            object-fit: ${media?.size};
-            width: ${media?.offsetX === null ? '100%' : 'auto'};
-            height: ${media?.position === 'fixed' ? '100vh' : '100%'};
-            position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
-            top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
-            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
-         }
         `
     ))
     }

package/src/components/Section/SectionImage.tsx

@@ -0,0 +1,48 @@
+import { FC, useId } from 'react';
+import JSXStyle from 'styled-jsx/style';
+
+export type TSectionImage = {
+  url: string;
+  type: 'image';
+  size: string;
+  position: string;
+  offsetX: number | null;
+};
+
+interface Props {
+  media: TSectionImage;
+  sectionId: string;
+}
+
+export const SectionImage: FC<Props> = ({ media, sectionId }) => {
+  const id = useId();
+  const { url, size, position, offsetX } = media;
+  const isContainHeight = size === 'contain-height';
+  const hasOffsetX = offsetX !== null && size === 'contain';
+  return (
+    <>
+      <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%'};
+          transform: ${isContainHeight ? 'translateX(-50%)' : 'none'};
+          position: relative;
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          height: 100%;
+          ${offsetX ? 'max-width: 100vw;' : ''}
+         }
+      `}
+      </JSXStyle>
+    </>
+  );
+};

package/src/components/Section/SectionVideo.tsx

@@ -0,0 +1,121 @@
+import { FC, useEffect, useId, useRef, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+
+export type TSectionVideo = {
+  url: string;
+  size: string;
+  type: 'video';
+  play: 'on-click' | 'auto';
+  position: string;
+  coverUrl: string | null;
+  offsetX: number | null;
+};
+
+interface Props {
+  container: HTMLDivElement;
+  sectionId: string;
+  media: TSectionVideo;
+}
+
+export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
+  const [video, setVideo] = useState<HTMLVideoElement | null>(null);
+  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 !== 'on-click') return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (userPaused || !isClickedOnCover) return;
+        if (entry.isIntersecting) {
+          video.play();
+        } else {
+          video.pause();
+        }
+      }
+    );
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [container, play, userPaused, isClickedOnCover]);
+
+  const isContainHeight = size === 'contain-height';
+  const hasOffsetX = offsetX !== null && size === 'contain';
+
+  return (
+    <>
+      <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'};
+          left: 0;
+          width: 100%;
+          height: 100%;
+          top: 0;
+        }
+        .video-background-${sectionId}-cover {
+          position: relative;
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+          width: ${isContainHeight ? 'auto' : '100%'};
+          height: 100%;
+          object-fit: ${isContainHeight ? 'unset' : size ?? 'cover'};
+          transition: opacity 0.1s ease-in-out;
+          transform: ${isContainHeight ? 'translateX(-50%)' : 'none'};
+          ${hasOffsetX ? 'max-width: 100vw;' : ''}
+        }
+        .video-background-${sectionId} {
+          object-fit: ${isContainHeight ? 'unset' : size ?? 'cover'};
+          width: ${isContainHeight ? 'auto' : '100%'};
+          height: 100%;
+          position: relative;
+          transform: ${isContainHeight ? 'translateX(-50%)' : 'none'};
+          left: ${isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0')};
+        }
+      `}
+      </JSXStyle>
+    </>
+  );
+};

package/src/components/items/FileItem/VideoItem.tsx

@@ -14,7 +14,6 @@ import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemS
 import { useVideoFx } from '../../../utils/effects/useVideoFx';
 import { useElementRect } from '../../../utils/useElementRect';
 import { useItemFXData } from '../../../common/useItemFXData';
-import { PlayIcon } from './PlayIcon';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -31,8 +30,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isEventTriggered, setIsEventTriggered] = useState(false);
   const { url, hasGLEffect } = item.commonParams;
   const isInitialRef = useRef(true);
   const area = layoutId ? item.area[layoutId] : null;
@@ -83,31 +80,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
     onVisibilityChange?.(isInteractive);
   }, [isInteractive, onVisibilityChange]);
 
-  const playVideo = () => {
-    if (videoRef.current) {
-      videoRef.current.play();
-      setIsEventTriggered(true);
-    }
-  };
-
-  useEffect(() => {
-    if (!isEventTriggered || !ref) return;
-    const intersectionObserver = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (!videoRef.current) return;
-        if (entry.isIntersecting) {
-          videoRef.current.play();
-        } else {
-          videoRef.current.pause();
-        }
-      });
-    });
-    intersectionObserver.observe(ref);
-    return () => {
-      intersectionObserver.disconnect();
-    };
-  }, [isEventTriggered, ref]);
-
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
@@ -120,11 +92,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
           transition: wrapperStateParams?.transition ?? 'none'
         }}
       >
-        {!isPlaying && (
-          <div className={`play-btn-wrapper-${item.id}`}>
-            <PlayIcon className={`play-btn-${item.id}`} onClick={playVideo} />
-          </div>
-        )}
         {hasScrollPlayback
           ? (
               <ScrollPlaybackVideo
@@ -151,18 +118,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
                       <video
                         poster={item.commonParams.coverUrl ?? ''}
                         ref={videoRef}
-                        controls={true}
-                        onPlay={() => {
-                          setIsPlaying(true);
-                          console.log('play');
-                        }}
-                        onPause={() => {
-                          setIsPlaying(false);
-                          console.log('pause');
-                        }}
-                        onEnded={() => {
-                          console.log('ended');
-                        }}
+                        autoPlay
+                        muted
                         loop
                         playsInline
                         className={`video video-${item.id}`}
@@ -184,23 +141,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
           box-sizing: border-box;
           opacity: ${opacity};
         }
-        .play-btn-wrapper-${item.id} {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          height: 100%;
-        }
-        .play-btn-${item.id} {
-          width: 100px;
-          position: relative;
-          z-index: 1;
-          pointer-events: auto;
-          height: 100px;
-        }
         .video {
           width: 100%;
           height: 100%;

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;
+  }
+}

package/lib/components/items/FileItem/PlayIcon.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlayIcon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const PlayIcon = ({ className, onClick }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { height: "32px", version: "1.1", viewBox: "0 0 32 32", width: "32px", className: className, onClick: onClick, children: (0, jsx_runtime_1.jsx)("g", { id: "play_x5F_alt", children: (0, jsx_runtime_1.jsx)("path", { fill: "#4E4E50", d: "M16,0C7.164,0,0,7.164,0,16s7.164,16,16,16s16-7.164,16-16S24.836,0,16,0z M10,24V8l16.008,8L10,24z   " }) }) }));
-};
-exports.PlayIcon = PlayIcon;

package/src/components/items/FileItem/PlayIcon.tsx

@@ -1,17 +0,0 @@
-import { FC } from 'react';
-
-interface Props {
-  className?: string;
-  onClick?: () => void;
-}
-
-export const PlayIcon: FC<Props> = ({ className, onClick }) => {
-  return (
-    <svg height="32px" version="1.1" viewBox="0 0 32 32" width="32px" className={className} onClick={onClick}>
-      <g id="play_x5F_alt">
-        <path fill="#4E4E50" d="M16,0C7.164,0,0,7.164,0,16s7.164,16,16,16s16-7.164,16-16S24.836,0,16,0z M10,24V8l16.008,8L10,24z   " />
-      </g>
-    </svg>
-  );
-};
-