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

package/lib/components/Section/Section.js

@@ -12,22 +12,19 @@ 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 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 layoutMedia = layout && section.media && section.media[layout] ? section.media[layout] : undefined;
     const getSectionVisibilityStyles = () => {
         return layouts
             .sort((a, b) => a.startsWith - b.startsWith)
@@ -42,34 +39,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: [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: `
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color, media]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};
             position: relative;
@@ -87,24 +60,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,28 @@
+"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)("img", { src: url, className: `image-background-${sectionId}` }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+         .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')};
+          ${offsetX ? 'max-width: 100vw;' : ''}
+         }
+      ` })] }));
+};
+exports.SectionImage = SectionImage;

package/lib/components/Section/SectionVideo.js

@@ -0,0 +1,80 @@
+"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 handleCoverClick = () => {
+        if (!video || play !== 'on-click')
+            return;
+        if (isPlaying) {
+            video.pause();
+        }
+        else {
+            video.play();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!video || play !== 'auto')
+            return;
+        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(container);
+        return () => observer.disconnect();
+    }, [container, play]);
+    (0, react_1.useEffect)(() => {
+        if (!video || play !== 'on-click')
+            return;
+        video.currentTime = 0.01;
+        video.pause();
+    }, [play]);
+    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, 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: `
+        .video-background-${sectionId}-cover-container {
+          position: ${position === 'fixed' ? 'sticky' : 'absolute'};
+          pointer-events: ${play === 'on-click' ? 'auto' : 'none'};
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          top: ${position === 'fixed' ? '100vh' : '0'};
+        }
+        .video-background-${sectionId}-cover {
+          width: 100%;
+          transition: opacity 0.1s ease-in-out;
+          height: 100%;
+          object-fit: cover;
+        }
+        .video-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')};
+          ${offsetX ? 'max-width: 100vw;' : ''}
+        }
+      ` })] }));
+};
+exports.SectionVideo = SectionVideo;

package/lib/interactions/InteractionsRegistry.js

@@ -29,6 +29,7 @@ class InteractionsRegistry {
             }
             return map;
         }, {});
+        const itemStages = this.getDefaultItemStages();
         const stateItemsIdsMap = activeStatesIds.reduce((map, stateId) => {
             map[stateId] = this.items
                 .filter((item) => {
@@ -41,10 +42,9 @@ class InteractionsRegistry {
             return map;
         }, {});
         this.interactions = interactions;
+        this.itemsStages = itemStages;
         this.stateItemsIdsMap = stateItemsIdsMap;
         this.interactionStateMap = interactionStateMap;
-        const itemStages = this.getDefaultItemStages();
-        this.itemsStages = itemStages;
     }
     register(itemId, ctrl) {
         this.ctrls.set(itemId, ctrl);
@@ -93,8 +93,6 @@ class InteractionsRegistry {
         for (const interaction of this.interactions) {
             const { triggers } = interaction;
             for (const trigger of triggers) {
-                if (!('itemId' in trigger))
-                    continue;
                 if (trigger.itemId !== itemId)
                     continue;
                 if (activeStates.includes(trigger.from)) {
@@ -104,112 +102,12 @@ class InteractionsRegistry {
         }
         return available;
     }
-    notifyLoad() {
-        var _a, _b;
-        const timestamp = Date.now();
-        for (const interaction of this.interactions) {
-            const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-            const matchingTrigger = interaction.triggers.find(trigger => 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId);
-            if (!matchingTrigger)
-                continue;
-            const activeStateId = this.getActiveInteractionState(interaction.id);
-            const isNewStateActive = matchingTrigger.to === activeStateId;
-            this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
-            const transitioningItems = (_a = this.stateItemsIdsMap[activeStateId]) !== null && _a !== void 0 ? _a : [];
-            const state = interaction.states.find((state) => state.id === matchingTrigger.to);
-            const actions = (_b = state === null || state === void 0 ? void 0 : state.actions) !== null && _b !== void 0 ? _b : [];
-            for (const action of actions) {
-                const ctrl = this.ctrls.get(action.itemId);
-                if (!ctrl)
-                    continue;
-                ctrl.receiveAction(action.type);
-            }
-            this.itemsStages = this.itemsStages.map((stage) => {
-                if (stage.interactionId !== interaction.id)
-                    return stage;
-                return {
-                    itemId: stage.itemId,
-                    interactionId: stage.interactionId,
-                    type: 'transitioning',
-                    from: stage.type === 'transitioning' ? stage.to : stage.stateId,
-                    to: matchingTrigger.to,
-                    direction: isNewStateActive ? 'in' : 'out',
-                    updated: timestamp
-                };
-            });
-            const itemsToNotify = new Set(transitioningItems);
-            for (const trigger of interaction.triggers) {
-                if (!('itemId' in trigger))
-                    continue;
-                itemsToNotify.add(trigger.itemId);
-            }
-            this.notifyItemCtrlsChange(Array.from(itemsToNotify));
-            this.notifyTransitionStartForItems(transitioningItems, activeStateId);
-        }
-    }
-    notifyScroll(position) {
-        var _a, _b, _c;
-        const timestamp = Date.now();
-        for (const interaction of this.interactions) {
-            const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-            const activeStateId = (_a = interaction.states.find((state) => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
-            const matchingTrigger = interaction.triggers.find((trigger) => {
-                if (!('position' in trigger) || trigger.position === 0)
-                    return false;
-                const triggerPosition = trigger.position * window.innerWidth;
-                const isScrolledPastTrigger = triggerPosition < position;
-                if (!isScrolledPastTrigger && !trigger.isReverse)
-                    return false;
-                const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
-                return stateId === currentStateId;
-            });
-            if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId)
-                continue;
-            const triggerPosition = matchingTrigger.position * window.innerWidth;
-            const isScrolledPastTrigger = triggerPosition < position;
-            const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
-            this.setCurrentStateForInteraction(interaction.id, targetStateId);
-            const transitioningItems = (_b = this.stateItemsIdsMap[activeStateId]) !== null && _b !== void 0 ? _b : [];
-            const state = interaction.states.find((state) => state.id === targetStateId);
-            const actions = (_c = state === null || state === void 0 ? void 0 : state.actions) !== null && _c !== void 0 ? _c : [];
-            for (const action of actions) {
-                const ctrl = this.ctrls.get(action.itemId);
-                if (!ctrl)
-                    continue;
-                ctrl.receiveAction(action.type);
-            }
-            const itemsStages = this.itemsStages.map((stage) => {
-                if (stage.interactionId !== interaction.id)
-                    return stage;
-                const newStage = {
-                    itemId: stage.itemId,
-                    interactionId: stage.interactionId,
-                    type: 'transitioning',
-                    from: stage.type === 'transitioning' ? stage.to : stage.stateId,
-                    to: targetStateId,
-                    direction: targetStateId === activeStateId ? 'in' : 'out',
-                    updated: timestamp
-                };
-                return newStage;
-            });
-            this.itemsStages = itemsStages;
-            const itemsToNotify = new Set(transitioningItems);
-            for (const trigger of interaction.triggers) {
-                if (!('itemId' in trigger))
-                    continue;
-                itemsToNotify.add(trigger.itemId);
-            }
-            this.notifyItemCtrlsChange(Array.from(itemsToNotify));
-            this.notifyTransitionStartForItems(transitioningItems, activeStateId);
-        }
-    }
-    notifyItemTrigger(itemId, triggerType) {
+    notifyTrigger(itemId, triggerType) {
         var _a, _b;
         const timestamp = Date.now();
         for (const interaction of this.interactions) {
             const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-            const matchingTrigger = interaction.triggers.find((trigger) => 'itemId' in trigger
-                && trigger.itemId === itemId
+            const matchingTrigger = interaction.triggers.find((trigger) => trigger.itemId === itemId
                 && trigger.from === currentStateId
                 && trigger.type === triggerType);
             if (!matchingTrigger)
@@ -241,8 +139,6 @@ class InteractionsRegistry {
             });
             const itemsToNotify = new Set(transitioningItems);
             for (const trigger of interaction.triggers) {
-                if (!('itemId' in trigger))
-                    continue;
                 itemsToNotify.add(trigger.itemId);
             }
             this.notifyItemCtrlsChange(Array.from(itemsToNotify));
@@ -327,7 +223,6 @@ class InteractionsRegistry {
         return allItems;
     }
     getDefaultItemStages() {
-        var _a;
         const timestamp = Date.now();
         const { items } = this;
         const stages = [];
@@ -344,8 +239,7 @@ class InteractionsRegistry {
                     interactionId,
                     type: 'active',
                     isStartState: true,
-                    updated: timestamp,
-                    stateId: (_a = this.interactions.find((interaction) => interaction.id === interactionId)) === null || _a === void 0 ? void 0 : _a.startStateId
+                    updated: timestamp
                 });
             }
         }

package/lib/interactions/ItemInteractionCtrl.js

@@ -56,7 +56,7 @@ class ItemInteractionController {
         return triggers.has(triggerType);
     }
     sendTrigger(type) {
-        this.registry.notifyItemTrigger(this.itemId, type);
+        this.registry.notifyTrigger(this.itemId, type);
     }
     receiveAction(type) {
         var _a;

package/lib/provider/InteractionsContext.js

@@ -5,50 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InteractionsRegistry_1 = require("../interactions/InteractionsRegistry");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
-const ArticleRectContext_1 = require("./ArticleRectContext");
 exports.InteractionsContext = (0, react_1.createContext)(undefined);
 const InteractionsProvider = ({ article, children }) => {
     const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
-    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const registry = (0, react_1.useMemo)(() => {
         if (!layoutId)
             return;
         return new InteractionsRegistry_1.InteractionsRegistry(article, layoutId);
     }, [layoutId]);
-    (0, react_1.useEffect)(() => {
-        if (!registry || !articleRectObserver)
-            return;
-        const handleScroll = () => {
-            const scrollY = window.scrollY;
-            registry.notifyScroll(scrollY);
-        };
-        return articleRectObserver.on('scroll', handleScroll);
-    }, [registry, articleRectObserver]);
-    const notifyLoad = (0, react_1.useCallback)(() => {
-        if (!registry)
-            return;
-        requestAnimationFrame(() => {
-            setTimeout(() => {
-                registry.notifyLoad();
-            }, 0);
-        });
-    }, [registry]);
-    (0, react_1.useEffect)(() => {
-        if (document.readyState === 'complete') {
-            notifyLoad();
-        }
-        else {
-            window.addEventListener('load', notifyLoad);
-        }
-        return () => window.removeEventListener('load', notifyLoad);
-    }, [notifyLoad]);
-    (0, react_1.useEffect)(() => {
-        const log = () => {
-            console.log('load');
-        };
-        window.addEventListener('load', log);
-        return () => window.removeEventListener('load', log);
-    }, []);
     return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: registry, children: children }));
 };
 exports.InteractionsProvider = InteractionsProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.8.18-alpha.2",
+  "version": "1.8.19-alpha.0",
   "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.17-alpha.0",
+    "@cntrl-site/sdk": "^1.22.18-alpha.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/ScrollPlaybackVideo.tsx

@@ -24,7 +24,7 @@ export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams,
       const scrollPos = articleRectObserver.getSectionScroll(sectionId);
       const time = rangeMap(scrollPos, playbackParams.from, playbackParams.to, 0, 1, true);
       setTime(toFixed(time));
-    });
+    })
   }, [playbackParams?.from, playbackParams?.to, time]);
 
   const scrollVideoManager = useMemo<ScrollPlaybackVideoManager | null>(() => {

package/src/components/Section/Section.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, useEffect, useId, useRef, useState, useContext } from 'react';
+import { FC, ReactElement, useId, useRef } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   getLayoutMediaQuery,
@@ -11,6 +11,8 @@ 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';
 
 type SectionChild = ReactElement<any, any>;
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
@@ -21,11 +23,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 +30,8 @@ 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 layoutMedia = layout && section.media && section.media[layout] ? section.media[layout] : undefined;
 
   const getSectionVisibilityStyles = () => {
     return layouts
@@ -52,30 +48,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 +57,17 @@ 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 && (
+        {layoutMedia && layoutMedia.size !== 'none' && sectionRef.current && (
           <div className={`section-background-overlay-${section.id}`}>
             <div
               key={`section-background-wrapper-${section.id}`}
               className={`section-background-wrapper-${section.id}`}
             >
-              {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}`} />
+              {layoutMedia.type === 'video' && (
+                <SectionVideo container={sectionRef.current} sectionId={section.id} media={layoutMedia} />
+              )}
+              {layoutMedia.type === 'image' && (
+                <SectionImage media={layoutMedia} sectionId={section.id} />
               )}
             </div>
           </div>
@@ -131,22 +94,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,40 @@
+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 (
+    <>
+      <img src={url} className={`image-background-${sectionId}`} />
+      <JSXStyle id={id}>{`
+         .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')};
+          ${offsetX ? 'max-width: 100vw;' : ''}
+         }
+      `}
+      </JSXStyle>
+    </>
+  );
+};

package/src/components/Section/SectionVideo.tsx

@@ -0,0 +1,116 @@
+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 handleCoverClick = () => {
+    if (!video || play !== 'on-click') return;
+    if (isPlaying) {
+      video.pause();
+    } else {
+      video.play();
+    }
+  };
+
+  useEffect(() => {
+    if (!video || play !== 'auto') return;
+    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(container);
+    return () => observer.disconnect();
+  }, [container, play]);
+
+  useEffect(() => {
+    if (!video || play !== 'on-click') return;
+    video.currentTime = 0.01;
+    video.pause();
+  }, [play]);
+
+  const isContainHeight = size === 'contain-height';
+  const hasOffsetX = offsetX !== null && size === 'contain';
+
+  return (
+    <>
+      <video
+        ref={setVideo}
+        autoPlay={play === 'auto'}
+        loop
+        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>
+      <JSXStyle id={id}>{`
+        .video-background-${sectionId}-cover-container {
+          position: ${position === 'fixed' ? 'sticky' : 'absolute'};
+          pointer-events: ${play === 'on-click' ? 'auto' : 'none'};
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          top: ${position === 'fixed' ? '100vh' : '0'};
+        }
+        .video-background-${sectionId}-cover {
+          width: 100%;
+          transition: opacity 0.1s ease-in-out;
+          height: 100%;
+          object-fit: cover;
+        }
+        .video-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')};
+          ${offsetX ? 'max-width: 100vw;' : ''}
+        }
+      `}
+      </JSXStyle>
+    </>
+  );
+};

package/src/interactions/InteractionsRegistry.ts

@@ -3,7 +3,7 @@ import {
   Article,
   ArticleItemType,
   Interaction,
-  InteractionItemTrigger,
+  InteractionTrigger,
   ItemAny,
 } from '@cntrl-site/sdk';
 import { isItemType } from '../utils/isItemType';
@@ -39,6 +39,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       }
       return map;
     }, {});
+    const itemStages = this.getDefaultItemStages();
     const stateItemsIdsMap = activeStatesIds.reduce<StateItemsIdsMap>((map, stateId) => {
       map[stateId] = this.items
         .filter((item) => {
@@ -50,10 +51,9 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       return map;
     }, {});
     this.interactions = interactions;
+    this.itemsStages = itemStages;
     this.stateItemsIdsMap = stateItemsIdsMap;
     this.interactionStateMap = interactionStateMap;
-    const itemStages = this.getDefaultItemStages();
-    this.itemsStages = itemStages;
   }
 
   register(itemId: ItemId, ctrl: ItemInteractionCtrl) {
@@ -96,13 +96,12 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     return itemStyles;
   }
 
-  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']> {
-    const available = new Set<InteractionItemTrigger['type']>();
+  getItemAvailableTriggers(itemId: string): Set<InteractionTrigger['type']> {
+    const available = new Set<InteractionTrigger['type']>();
     const activeStates = Object.values(this.interactionStateMap);
     for (const interaction of this.interactions) {
       const { triggers } = interaction;
       for (const trigger of triggers) {
-        if (!('itemId' in trigger)) continue;
         if (trigger.itemId !== itemId) continue;
         if (activeStates.includes(trigger.from)) {
           available.add(trigger.type);
@@ -112,106 +111,12 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     return available;
   }
 
-  notifyLoad() {
-    const timestamp = Date.now();
-    for (const interaction of this.interactions) {
-      const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-      const matchingTrigger = interaction.triggers.find(trigger =>
-        'position' in trigger && trigger.position === 0 && trigger.from === currentStateId
-      );
-      if (!matchingTrigger) continue;
-      const activeStateId = this.getActiveInteractionState(interaction.id);
-      const isNewStateActive = matchingTrigger.to === activeStateId;
-      this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
-      const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
-      const state = interaction.states.find((state) => state.id === matchingTrigger.to);
-      const actions = state?.actions ?? [];
-      for (const action of actions) {
-        const ctrl = this.ctrls.get(action.itemId);
-        if (!ctrl) continue;
-        ctrl.receiveAction(action.type);
-      }
-
-      this.itemsStages = this.itemsStages.map((stage) => {
-        if (stage.interactionId !== interaction.id) return stage;
-        return {
-          itemId: stage.itemId,
-          interactionId: stage.interactionId,
-          type: 'transitioning',
-          from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
-          to: matchingTrigger.to,
-          direction: isNewStateActive ? 'in' : 'out',
-          updated: timestamp
-        };
-      });
-
-      const itemsToNotify = new Set<ItemId>(transitioningItems);
-      for (const trigger of interaction.triggers) {
-        if (!('itemId' in trigger)) continue;
-        itemsToNotify.add(trigger.itemId);
-      }
-      this.notifyItemCtrlsChange(Array.from(itemsToNotify));
-      this.notifyTransitionStartForItems(transitioningItems, activeStateId);
-    }
-  }
-
-  notifyScroll(position: number) {
-    const timestamp = Date.now();
-    for (const interaction of this.interactions) {
-      const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-      const activeStateId = interaction.states.find((state) => state.id !== interaction.startStateId)?.id;
-      const matchingTrigger = interaction.triggers.find((trigger) => {
-        if (!('position' in trigger) || trigger.position === 0) return false;
-        const triggerPosition = trigger.position * window.innerWidth;
-        const isScrolledPastTrigger = triggerPosition < position;
-        if (!isScrolledPastTrigger && !trigger.isReverse) return false;
-        const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
-        return stateId === currentStateId;
-      });
-      if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId) continue;
-      const triggerPosition = matchingTrigger.position * window.innerWidth;
-      const isScrolledPastTrigger = triggerPosition < position;
-      const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
-      this.setCurrentStateForInteraction(interaction.id, targetStateId);
-      const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
-      const state = interaction.states.find((state) => state.id === targetStateId);
-      const actions = state?.actions ?? [];
-      for (const action of actions) {
-        const ctrl = this.ctrls.get(action.itemId);
-        if (!ctrl) continue;
-        ctrl.receiveAction(action.type);
-      }
-      const itemsStages = this.itemsStages.map((stage) => {
-        if (stage.interactionId !== interaction.id) return stage;
-        const newStage = {
-          itemId: stage.itemId,
-          interactionId: stage.interactionId,
-          type: 'transitioning' as const,
-          from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
-          to: targetStateId,
-          direction: targetStateId === activeStateId ? 'in' as const : 'out' as const,
-          updated: timestamp
-        };
-        return newStage;
-      });
-      this.itemsStages = itemsStages;
-      const itemsToNotify = new Set<ItemId>(transitioningItems);
-      for (const trigger of interaction.triggers) {
-        if (!('itemId' in trigger)) continue;
-        itemsToNotify.add(trigger.itemId);
-      }
-      this.notifyItemCtrlsChange(Array.from(itemsToNotify));
-      this.notifyTransitionStartForItems(transitioningItems, activeStateId);
-    }
-  }
-
-  notifyItemTrigger(itemId: string, triggerType: TriggerType): void {
+  notifyTrigger(itemId: string, triggerType: TriggerType): void {
     const timestamp = Date.now();
     for (const interaction of this.interactions) {
       const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
       const matchingTrigger = interaction.triggers.find((trigger) =>
-        'itemId' in trigger
-        && trigger.itemId === itemId
+        trigger.itemId === itemId
         && trigger.from === currentStateId
         && trigger.type === triggerType
       );
@@ -241,7 +146,6 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       });
       const itemsToNotify = new Set<ItemId>(transitioningItems);
       for (const trigger of interaction.triggers) {
-        if (!('itemId' in trigger)) continue;
         itemsToNotify.add(trigger.itemId);
       }
       this.notifyItemCtrlsChange(Array.from(itemsToNotify));
@@ -344,8 +248,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
           interactionId,
           type: 'active',
           isStartState: true,
-          updated: timestamp,
-          stateId: this.interactions.find((interaction) => interaction.id === interactionId)?.startStateId
+          updated: timestamp
         });
       }
     }
@@ -366,7 +269,7 @@ type TransitioningStage = {
 type ActiveStage = { type: 'active'; itemId: string; interactionId: string; stateId?: string; isStartState: boolean; updated: number; };
 type InteractionStateMap = Record<InteractionId, StateId>;
 type StateItemsIdsMap = Record<StateId, ItemId[]>;
-type TriggerType = InteractionItemTrigger['type'];
+type TriggerType = InteractionTrigger['type'];
 type InteractionId = string;
 type StateId = string;
 type ItemId = string;

package/src/interactions/ItemInteractionCtrl.ts

@@ -1,12 +1,11 @@
 import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
 import { getTransition } from './getTransition';
 import { getStyleKeysFromCSSProperty } from './CSSPropertyNameMap';
-import { InteractionItemTrigger } from '@cntrl-site/sdk';
+import { InteractionTrigger } from '@cntrl-site/sdk';
 
 export class ItemInteractionController implements ItemInteractionCtrl {
   private transitionsInProgress: Set<string> = new Set();
   private actionReceiver: ((type: 'play' | 'pause') => void) | undefined;
-
   constructor(
     private itemId: string,
     private registry: InteractionsRegistryPort,
@@ -30,13 +29,13 @@ export class ItemInteractionController implements ItemInteractionCtrl {
     };
   }
 
-  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean {
+  getHasTrigger(itemId: string, triggerType: InteractionTrigger['type']): boolean {
     const triggers = this.registry.getItemAvailableTriggers(itemId);
     return triggers.has(triggerType);
   }
 
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out') {
-    this.registry.notifyItemTrigger(this.itemId, type);
+    this.registry.notifyTrigger(this.itemId, type);
   }
 
   receiveAction(type: 'play' | 'pause') {

package/src/interactions/types.ts

@@ -1,8 +1,8 @@
-import { ArticleItemType, InteractionItemTrigger, ItemState } from '@cntrl-site/sdk';
+import { ArticleItemType, InteractionTrigger, ItemState } from '@cntrl-site/sdk';
 
 export interface ItemInteractionCtrl {
   getState(keys: string[]): StateCSSInfo;
-  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean;
+  getHasTrigger(itemId: string, triggerType: InteractionTrigger['type']): boolean;
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
   handleTransitionEnd?: (styleKey: string) => void;
   handleTransitionStart?: (styleKeys: string[]) => void;
@@ -14,8 +14,8 @@ export interface ItemInteractionCtrl {
 export interface InteractionsRegistryPort {
   register(itemId: string, ctrl: ItemInteractionCtrl): void;
   getStatePropsForItem(itemId: string): StateProps;
-  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;
-  notifyItemTrigger(itemId: string, type: TriggerType): void;
+  getItemAvailableTriggers(itemId: string): Set<InteractionTrigger['type']>;
+  notifyTrigger(itemId: string, type: TriggerType): void;
   notifyTransitionEnd(itemId: string): void;
 }
 

package/src/provider/InteractionsContext.tsx

@@ -1,8 +1,7 @@
-import { createContext, FC, PropsWithChildren, useCallback, useContext, useEffect, useMemo } from 'react';
+import { createContext, FC, PropsWithChildren, useContext, useMemo } from 'react';
 import { InteractionsRegistry } from '../interactions/InteractionsRegistry';
 import { Article } from '@cntrl-site/sdk';
 import { useCurrentLayout } from '../common/useCurrentLayout';
-import { ArticleRectContext } from './ArticleRectContext';
 
 export const InteractionsContext = createContext<InteractionsRegistry | undefined>(undefined);
 
@@ -12,48 +11,10 @@ interface Props {
 
 export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, children }) => {
   const { layoutId } = useCurrentLayout();
-  const articleRectObserver = useContext(ArticleRectContext);
   const registry = useMemo(() => {
     if (!layoutId) return;
     return new InteractionsRegistry(article, layoutId);
   }, [layoutId]);
-
-  useEffect(() => {
-    if (!registry || !articleRectObserver) return;
-    const handleScroll = () => {
-      const scrollY = window.scrollY;
-      registry.notifyScroll(scrollY);
-    };
-    return articleRectObserver.on('scroll', handleScroll);
-  }, [registry, articleRectObserver]);
-
-  const notifyLoad = useCallback(() => {
-    if (!registry) return;
-    requestAnimationFrame(() => {
-      setTimeout(() => {
-        registry.notifyLoad();
-      }, 0);
-    });
-  }, [registry]);
-
-  useEffect(() => {
-    if (document.readyState === 'complete') {
-      notifyLoad();
-    } else {
-      window.addEventListener('load', notifyLoad);
-    }
-
-    return () => window.removeEventListener('load', notifyLoad);
-  }, [notifyLoad]);
-
-  useEffect(() => {
-    const log = () => {
-      console.log('load');
-    };
-    window.addEventListener('load', log);
-    return () => window.removeEventListener('load', log);
-  }, []);
-
   return (
     <InteractionsContext.Provider value={registry}>
       {children}