@cntrl-site/sdk-nextjs 0.25.0 → 0.26.1

package/lib/components/Article.js

@@ -24,14 +24,14 @@ const Article = ({ article, sectionData }) => {
             setArticleHeight(rect.height / rect.width);
         });
     }, [articleRectObserver]);
-    return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, Object.assign({ value: articleRectObserver }, { children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "article", ref: articleRef }, { children: article.sections.map((section, i) => {
+    return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => {
                         const data = section.name ? sectionData[section.name] : {};
-                        return ((0, jsx_runtime_1.jsx)(Section_1.Section, Object.assign({ section: section, data: data }, { children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }), section.id));
-                    }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+                        return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
+                    }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
             position: relative;
             overflow: clip;
           }
-      ` }))] })));
+      ` })] }));
 };
 exports.Article = Article;

package/lib/components/ArticleWrapper.js

@@ -26,11 +26,11 @@ const ArticleWrapper = ({ children }) => {
         }
     }, []);
     const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
-    return ((0, jsx_runtime_1.jsxs)(LayoutContext_1.LayoutContext.Provider, Object.assign({ value: layoutId }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "article-wrapper", style: Object.assign({ opacity: layoutId && isPageLoaded ? 1 : 0 }, layoutDeviationStyle) }, { children: children })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+    return ((0, jsx_runtime_1.jsxs)(LayoutContext_1.LayoutContext.Provider, { value: layoutId, children: [(0, jsx_runtime_1.jsx)("div", { className: "article-wrapper", style: Object.assign({ opacity: layoutId && isPageLoaded ? 1 : 0 }, layoutDeviationStyle), children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .article-wrapper {
           opacity: 1;
           transition: opacity 0.2s ease; 
         }
-      ` }))] })));
+      ` })] }));
 };
 exports.ArticleWrapper = ArticleWrapper;

package/lib/components/Item.js

@@ -42,7 +42,7 @@ const itemsMap = {
 const RichTextWrapper = ({ isRichText, children }) => {
     if (!isRichText)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' } }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("div", { style: { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }, children: children }));
 };
 const noop = () => null;
 const Item = ({ item, sectionId, articleHeight }) => {
@@ -55,7 +55,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
-    const { top, left } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
+    const { top, left, bottom } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
     const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionHeight, sectionId);
     const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
@@ -99,7 +99,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
         top: `${stickyTop * 100}vw`,
         height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)(RichTextWrapper, Object.assign({ isRichText: isRichText }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left, bottom }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: {
                             width: `${sizingAxis.x === 'manual'
                                 ? isRichText
                                     ? `${width * exemplary}px`
@@ -108,15 +108,15 @@ const Item = ({ item, sectionId, articleHeight }) => {
                             height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`,
                             transform: `scale(${scale})`,
                             transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]
-                        } }, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) })) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+                        }, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
+                    const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
                     return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
               top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
               pointer-events: auto;
-              cursor: ${hoverParams ? 'pointer' : 'default'};
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
             }
@@ -134,7 +134,8 @@ const Item = ({ item, sectionId, articleHeight }) => {
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
               pointer-events: none;
-              top: ${(0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
+              bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
+              top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               transition: ${(0, HoverStyles_1.getTransitions)(['left', 'top'], hoverParams)};
             }
@@ -146,7 +147,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
             }
           `);
                 })}
-      ` }))] })));
+      ` })] }));
 };
 exports.Item = Item;
 function parseSizing(sizing = 'manual') {

package/lib/components/LayoutStyle.js

@@ -9,10 +9,10 @@ const sdk_1 = require("@cntrl-site/sdk");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const LayoutStyle = ({ id, layouts, layoutId, children }) => {
     const layout = layouts.find(l => l.id === layoutId);
-    return ((0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+    return ((0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       ${(0, sdk_1.getLayoutMediaQuery)(layoutId, layouts)} {
         ${children === null || children === void 0 ? void 0 : children(layout)}
       }
-    ` })));
+    ` }));
 };
 exports.LayoutStyle = LayoutStyle;

package/lib/components/LinkWrapper.js

@@ -4,7 +4,7 @@ exports.LinkWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const LinkWrapper = ({ url, children, target }) => {
     const validUrl = url && buildValidUrl(url);
-    return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl, target: target, rel: "noreferrer" }, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+    return url ? ((0, jsx_runtime_1.jsx)("a", { href: validUrl, target: target, rel: "noreferrer", children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
 };
 exports.LinkWrapper = LinkWrapper;
 function buildValidUrl(url) {

package/lib/components/Page.js

@@ -15,6 +15,6 @@ const Page = ({ article, project, meta, keyframes, sectionData }) => {
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
     const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, Object.assign({ value: keyframesRepo }, { children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) })), beforeBodyClose] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) }), beforeBodyClose] }));
 };
 exports.Page = Page;

package/lib/components/ScrollPlaybackVideo.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollPlaybackVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ScrollPlaybackVideoManager_1 = require("../utils/PlaybackVideoConverter/ScrollPlaybackVideoManager");
+const rangeMap_1 = require("../utils/rangeMap");
+const ArticleRectContext_1 = require("../provider/ArticleRectContext");
+const ScrollPlaybackVideo = ({ sectionId, src, playbackParams, style, className }) => {
+    const [containerElement, setContainerElement] = (0, react_1.useState)(null);
+    const [time, setTime] = (0, react_1.useState)(0);
+    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    (0, react_1.useEffect)(() => {
+        if (!playbackParams || !articleRectObserver)
+            return;
+        return articleRectObserver.on('scroll', () => {
+            const scrollPos = articleRectObserver.getSectionScroll(sectionId);
+            const time = (0, rangeMap_1.rangeMap)(scrollPos, playbackParams.from, playbackParams.to, 0, 1, true);
+            setTime(toFixed(time));
+        });
+    }, [playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.from, playbackParams === null || playbackParams === void 0 ? void 0 : playbackParams.to, time]);
+    const scrollVideoManager = (0, react_1.useMemo)(() => {
+        if (!containerElement)
+            return null;
+        const manager = new ScrollPlaybackVideoManager_1.ScrollPlaybackVideoManager({
+            src,
+            videoContainer: containerElement
+        });
+        return manager;
+    }, [containerElement, src]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            scrollVideoManager === null || scrollVideoManager === void 0 ? void 0 : scrollVideoManager.destroy();
+        };
+    }, [scrollVideoManager]);
+    (0, react_1.useEffect)(() => {
+        if (scrollVideoManager && time >= 0 && time <= 1) {
+            scrollVideoManager.setTargetTimePercent(time);
+        }
+    }, [time, scrollVideoManager]);
+    return (0, jsx_runtime_1.jsx)("div", { className: className, style: style, ref: setContainerElement });
+};
+exports.ScrollPlaybackVideo = ScrollPlaybackVideo;
+function toFixed(num) {
+    return Number(num.toFixed(3));
+}

package/lib/components/Section.js

@@ -33,10 +33,10 @@ const Section = ({ section, data, children }) => {
         }, '');
     };
     if (SectionComponent)
-        return (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: sectionRef }, { children: (0, jsx_runtime_1.jsx)(SectionComponent, Object.assign({ data: data }, { children: children })) }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `section-${section.id}`, id: section.name, style: {
+        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.jsx)("div", { className: `section-${section.id}`, id: section.name, style: {
                     backgroundColor: backgroundColor.toCss()
-                }, ref: sectionRef }, { children: children })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+                }, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};
@@ -48,7 +48,7 @@ const Section = ({ section, data, children }) => {
           background-color: ${backgroundColor.fmt('rgba')};
         }
       }
-    ` }))] }));
+    ` })] }));
 };
 exports.Section = Section;
 function getSectionHeight(heightData) {

package/lib/components/items/CustomItem.js

@@ -19,7 +19,7 @@ const CustomItem = ({ item, onResize }) => {
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     if (!component)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `custom-component-${item.id}`, ref: setRef }, { children: component({}) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: item.id }, { children: `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, children: component({}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                     return (`
             .custom-component-${item.id} {
               transition: ${(0, HoverStyles_1.getTransitions)(['angle'], hoverParams)};
@@ -33,6 +33,6 @@ const CustomItem = ({ item, onResize }) => {
               ${(0, HoverStyles_1.getHoverStyles)(['angle'], hoverParams)};
             }
           `);
-                })}` }))] }));
+                })}` })] }));
 };
 exports.CustomItem = CustomItem;

package/lib/components/items/GroupItem.js

@@ -24,10 +24,10 @@ const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
     const { opacity } = (0, useGroupItem_1.useGroupItem)(item, sectionId);
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `group-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: {
                         opacity,
                         transform: `rotate(${angle}deg)`,
-                    } }, { children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight }, item.id))) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+                    }, children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;
           width: 100%;
@@ -44,6 +44,6 @@ const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
             }
           `);
                     })}
-      ` }))] }) })));
+      ` })] }) }));
 };
 exports.GroupItem = GroupItem;

package/lib/components/items/ImageItem.js

@@ -58,11 +58,11 @@ const ImageItem = ({ item, sectionId, onResize }) => {
         borderWidth: `${strokeWidth * 100}vw`,
         borderColor: `${borderColor.toCss()}`
     };
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setRef, style: {
                         opacity: `${opacity}`,
                         transform: `rotate(${angle}deg)`,
                         filter: `blur(${blur * 100}vw)`
-                    } }, { children: item.commonParams.hasGLEffect ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: "img-canvas", width: rectWidth, height: rectHeight })) : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+                    }, children: item.commonParams.hasGLEffect ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: "img-canvas", width: rectWidth, height: rectHeight })) : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .image-${item.id} {
             border-color: ${borderColor.fmt('rgba')};
@@ -109,6 +109,6 @@ const ImageItem = ({ item, sectionId, onResize }) => {
             }
           `);
                     })}
-      ` }))] }) })));
+      ` })] }) }));
 };
 exports.ImageItem = ImageItem;

package/lib/components/items/RectangleItem.js

@@ -26,7 +26,7 @@ const RectangleItem = ({ item, sectionId, onResize }) => {
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const backdropFilterValue = backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : 'unset';
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: {
                         backgroundColor: `${backgroundColor.toCss()}`,
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
@@ -35,7 +35,7 @@ const RectangleItem = ({ item, sectionId, onResize }) => {
                         filter: blur !== 0 ? `blur(${blur * 100}vw)` : 'unset',
                         backdropFilter: backdropFilterValue,
                         WebkitBackdropFilter: backdropFilterValue,
-                    } }), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+                    } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .rectangle-${item.id} {
             background-color: ${backgroundColor.fmt('rgba')};
@@ -59,6 +59,6 @@ const RectangleItem = ({ item, sectionId, onResize }) => {
             }
           `);
                     })}
-      ` }))] }) })));
+      ` })] }) }));
 };
 exports.RectangleItem = RectangleItem;

package/lib/components/items/RichTextItem.js

@@ -25,13 +25,13 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
     const textColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(color), [color]);
     const exemplary = (0, useExemplary_1.useExemplary)();
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `rich-text-wrapper-${item.id}`, style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: {
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * exemplary}px)`,
                     letterSpacing: `${letterSpacing * exemplary}px`,
                     wordSpacing: `${wordSpacing * exemplary}px`,
                     color: `${textColor.toCss()}`
-                } }, { children: content })), (0, jsx_runtime_1.jsxs)(style_1.default, Object.assign({ id: id }, { children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
+                }, children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                         return (`
             .rich-text-wrapper-${item.id} {
               transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
@@ -62,6 +62,6 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
               }
             }
             `);
-                    })}`] }))] }));
+                    })}`] })] }));
 };
 exports.RichTextItem = RichTextItem;

package/lib/components/items/VideoItem.js

@@ -15,12 +15,8 @@ const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
-const rangeMap_1 = require("../../utils/rangeMap");
-const ArticleRectContext_1 = require("../../provider/ArticleRectContext");
 const useLayoutContext_1 = require("../useLayoutContext");
-// To prevent video behaviour that drops to the first frame
-// when close to the end
-const SCROLL_TIME_SHIFT = 0.1;
+const ScrollPlaybackVideo_1 = require("../ScrollPlaybackVideo");
 const VideoItem = ({ item, sectionId, onResize }) => {
     var _a, _b;
     const id = (0, react_1.useId)();
@@ -30,49 +26,24 @@ const VideoItem = ({ item, sectionId, onResize }) => {
     const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
     const videoRef = (0, react_1.useRef)(null);
-    const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
-    const rafId = (0, react_1.useRef)();
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const scrollPlayback = item.layoutParams[layoutId].scrollPlayback;
-    (0, react_1.useEffect)(() => {
-        const video = videoRef.current;
-        if (!video || !scrollPlayback) {
-            video === null || video === void 0 ? void 0 : video.play();
-            return;
-        }
-        video === null || video === void 0 ? void 0 : video.pause();
-        const scrollVideo = () => {
-            rafId.current = window.requestAnimationFrame(scrollVideo);
-            if (!articleRectObserver)
-                return;
-            const scrollPos = articleRectObserver.getSectionScroll(sectionId);
-            if (!video.duration)
-                return;
-            const time = (0, rangeMap_1.rangeMap)(scrollPos, scrollPlayback.from, scrollPlayback.to, 0, video.duration, true);
-            if (scrollPos > scrollPlayback.from && scrollPos < scrollPlayback.to) {
-                if (toFixed(video.currentTime) === toFixed(time - SCROLL_TIME_SHIFT))
-                    return;
-                video.currentTime = Math.max(0, time - SCROLL_TIME_SHIFT);
-            }
-        };
-        rafId.current = window.requestAnimationFrame(scrollVideo);
-        return () => {
-            if (rafId.current) {
-                window.cancelAnimationFrame(rafId.current);
-                rafId.current = undefined;
-            }
-        };
-    }, [scrollPlayback]);
+    const hasScrollPlayback = scrollPlayback !== null;
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `video-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
                     opacity: `${opacity}`,
                     transform: `rotate(${angle}deg)`,
-                    filter: `blur(${blur * 100}vw)`
-                } }, { children: (0, jsx_runtime_1.jsx)("video", Object.assign({ ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: {
+                    filter: `blur(${blur * 100}vw)`,
+                    overflow: hasScrollPlayback ? 'hidden' : 'auto'
+                }, children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         borderColor: `${borderColor.toCss()}`
-                    } }, { children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+                    }, className: `video video-playback-wrapper video-${item.id}` })) : ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: {
+                        borderRadius: `${radius * 100}vw`,
+                        borderWidth: `${strokeWidth * 100}vw`,
+                        borderColor: `${borderColor.toCss()}`
+                    }, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .video-${item.id} {
             border-color: ${borderColor.fmt('rgba')};
@@ -97,6 +68,10 @@ const VideoItem = ({ item, sectionId, onResize }) => {
         .video-${item.id} {
           border-color: ${strokeColor};
         }
+        .video-playback-wrapper {
+          display: flex;
+          justify-content: center;
+        }
         ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                     return (`
             .video-wrapper-${item.id} {
@@ -113,9 +88,6 @@ const VideoItem = ({ item, sectionId, onResize }) => {
             }
           `);
                 })}
-    ` }))] })));
+    ` })] }));
 };
 exports.VideoItem = VideoItem;
-function toFixed(num) {
-    return Number(num.toFixed(5));
-}

package/lib/components/items/VimeoEmbed.js

@@ -40,7 +40,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
         return validURL.href;
     };
     const validUrl = getValidVimeoUrl(url);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-video-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: {
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
                 }, onMouseEnter: () => {
@@ -51,9 +51,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.pause();
-                } }, { children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: {
+                }, children: (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: {
                         borderRadius: `${radius * 100}vw`
-                    } }) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+                    } }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-video-wrapper-${item.id} {
         position: absolute;
         width: 100%;
@@ -82,6 +82,6 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
           }
         `);
                 })}
-    ` }))] })));
+    ` })] }));
 };
 exports.VimeoEmbedItem = VimeoEmbedItem;

package/lib/components/items/YoutubeEmbed.js

@@ -56,7 +56,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
             (_a = placeholder.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(placeholder);
         };
     }, [YT, div]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
                     if (!player || play !== 'on-hover')
                         return;
                     player.playVideo();
@@ -67,7 +67,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
                 }, style: {
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
-                } }, { children: (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: { borderRadius: `${radius * 100}vw` } }) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: { borderRadius: `${radius * 100}vw` } }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;
@@ -99,6 +99,6 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
             }
           `);
                 })}
-      ` }))] })));
+      ` })] }));
 };
 exports.YoutubeEmbedItem = YoutubeEmbedItem;

package/lib/components/useItemPosition.js

@@ -13,8 +13,12 @@ const useItemPosition = (item, sectionId) => {
         return item.area[layoutId];
     }, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
     const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
+    const positionType = layoutId ? item.area[layoutId].positionType : sdk_1.PositionType.ScreenBased;
+    // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
+    const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
     return {
-        top: (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
+        bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
+        top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
         left: `${left * 100}vw`
     };
 };

package/lib/provider/CntrlProvider.js

@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const CntrlContext_1 = require("./CntrlContext");
 const defaultContext_1 = require("./defaultContext");
 const CntrlProvider = ({ children }) => {
-    return ((0, jsx_runtime_1.jsx)(CntrlContext_1.CntrlContext.Provider, Object.assign({ value: defaultContext_1.cntrlSdkContext }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(CntrlContext_1.CntrlContext.Provider, { value: defaultContext_1.cntrlSdkContext, children: children }));
 };
 exports.CntrlProvider = CntrlProvider;