@gxpl/sdk 0.0.35 → 0.0.36-0

package/lib/sdk-nextjs/components/Page.js

@@ -11,6 +11,7 @@ const TransitionMachineContext_1 = require("../provider/TransitionMachineContext
 const Scenes_1 = require("./Scenes/Scenes");
 const FixedLayer_1 = require("./fixedLayers/FixedLayer");
 const usePrelaodAssets_1 = require("../utils/usePrelaodAssets");
+const SectionVideoCacheContext_1 = require("./Section/SectionVideoCacheContext");
 const Page = ({ project, articlesData }) => {
     var _a, _b;
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
@@ -19,12 +20,12 @@ const Page = ({ project, articlesData }) => {
     const scenes = Object.values(articlesData).map(({ article }) => ({ id: article.id }));
     const { relations, scenesAssets } = project;
     (0, usePrelaodAssets_1.usePreloadAssets)(scenesAssets);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project }), afterBodyOpen, (0, jsx_runtime_1.jsxs)(TransitionMachineContext_1.TransitionMachineContext.Provider, { options: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project }), afterBodyOpen, (0, jsx_runtime_1.jsx)(TransitionMachineContext_1.TransitionMachineContext.Provider, { options: {
                     input: {
                         startScene,
                         relations,
                         scenes,
                     }
-                }, children: [project.foreground && !project.foreground.hidden && (0, jsx_runtime_1.jsx)(FixedLayer_1.FixedLayer, { layer: project.foreground, type: "foreground" }), (0, jsx_runtime_1.jsx)(Scenes_1.Scenes, { articlesData: articlesData }), project.background && !project.background.hidden && (0, jsx_runtime_1.jsx)(FixedLayer_1.FixedLayer, { layer: project.background, type: "background" })] }), beforeBodyClose] }));
+                }, children: (0, jsx_runtime_1.jsxs)(SectionVideoCacheContext_1.SectionVideoCacheProvider, { assets: scenesAssets, children: [project.foreground && !project.foreground.hidden && (0, jsx_runtime_1.jsx)(FixedLayer_1.FixedLayer, { layer: project.foreground, type: "foreground" }), (0, jsx_runtime_1.jsx)(Scenes_1.Scenes, { articlesData: articlesData }), project.background && !project.background.hidden && (0, jsx_runtime_1.jsx)(FixedLayer_1.FixedLayer, { layer: project.background, type: "background" })] }) }), beforeBodyClose] }));
 };
 exports.Page = Page;

package/lib/sdk-nextjs/components/Section/SectionVideo.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionVideo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const SectionVideoCacheContext_1 = require("./SectionVideoCacheContext");
 const SectionVideo = ({ container, sectionId, media }) => {
     const [video, setVideo] = (0, react_1.useState)(null);
+    const { videoCache } = (0, react_1.useContext)(SectionVideoCacheContext_1.SectionVideoCacheContext);
     const [videoWrapper, setVideoWrapper] = (0, react_1.useState)(null);
     const [isVideoWidthOverflow, setIsVideoWidthOverflow] = (0, react_1.useState)(false);
     const { url, size, position, offsetX, coverUrl, play } = media;
@@ -24,6 +26,42 @@ const SectionVideo = ({ container, sectionId, media }) => {
             setUserPaused(false);
         }
     };
+    (0, react_1.useEffect)(() => {
+        if (!videoWrapper)
+            return;
+        const video = videoCache.get(url);
+        if (!video)
+            return;
+        video.controls = play === "on-click";
+        video.muted = play === "auto";
+        video.autoplay = play === "auto";
+        video.loop = true;
+        const style = {
+            objectFit: isContainHeight ? 'cover' : (size !== null && size !== void 0 ? size : 'cover'),
+            width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
+            transform: isContainHeight ? 'translateX(-50%)' : 'none',
+            left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
+            height: '100%',
+            position: 'relative'
+        };
+        Object.assign(video.style, style);
+        if (!videoWrapper.contains(video)) {
+            videoWrapper.appendChild(video);
+        }
+        setVideo(video);
+        video.addEventListener('play', () => {
+            setIsPlaying(true);
+        });
+        video.addEventListener('pause', () => {
+            setIsPlaying(false);
+        });
+        if (play === "auto") {
+            video.play().catch(() => { });
+        }
+        return () => {
+            video.pause();
+        };
+    }, [url, play, videoWrapper, videoCache, sectionId, video, isVideoWidthOverflow]);
     (0, react_1.useEffect)(() => {
         if (!video || play !== 'on-click')
             return;
@@ -44,6 +82,7 @@ const SectionVideo = ({ container, sectionId, media }) => {
         if (!video || !videoWrapper)
             return;
         video.addEventListener('loadedmetadata', () => {
+            console.log('loadedmetadata', video.videoHeight, video.videoWidth);
             const h = video.videoHeight;
             const w = video.videoWidth;
             const width = (videoWrapper.clientHeight / h) * w;
@@ -57,35 +96,28 @@ const SectionVideo = ({ container, sectionId, media }) => {
     }, [video, videoWrapper]);
     const isContainHeight = size === 'contain-height';
     const hasOffsetX = offsetX !== null && size === 'contain';
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { ref: setVideoWrapper, className: `section-video-wrapper-${sectionId}`, style: {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: setVideoWrapper, className: `section-video-wrapper-${sectionId}`, style: {
                 position: position === 'fixed' ? 'sticky' : 'relative',
                 height: position === 'fixed' ? '100vh' : '100%',
                 top: position === 'fixed' ? '100vh' : '0',
                 overflow: 'hidden',
+                opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
                 width: '100%'
-            }, children: [(0, jsx_runtime_1.jsx)("video", { ref: setVideo, autoPlay: play === 'auto', loop: true, style: {
-                        opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
-                        objectFit: isContainHeight ? 'cover' : (size !== null && size !== void 0 ? size : 'cover'),
-                        width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
-                        transform: isContainHeight ? 'translateX(-50%)' : 'none',
+            }, children: play === 'on-click' && !isClickedOnCover && ((0, jsx_runtime_1.jsx)("div", { className: `video-background-${sectionId}-cover-container`, style: {
+                    position: 'absolute',
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    top: 0
+                }, onClick: handleCoverClick, children: coverUrl && play === 'on-click' && ((0, jsx_runtime_1.jsx)("img", { src: coverUrl, alt: "Video cover", className: `video-background-${sectionId}-cover`, style: {
+                        opacity: isPlaying ? 0 : 1,
                         left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
+                        width: isContainHeight ? 'auto' : '100%',
+                        objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
+                        transform: isContainHeight ? 'translateX(-50%)' : 'none',
+                        position: 'relative',
                         height: '100%',
-                        position: 'relative'
-                    }, controls: play === 'on-click', 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}` }) }), play === 'on-click' && !isClickedOnCover && ((0, jsx_runtime_1.jsx)("div", { className: `video-background-${sectionId}-cover-container`, style: {
-                        position: 'absolute',
-                        left: 0,
-                        width: '100%',
-                        height: '100%',
-                        top: 0
-                    }, onClick: handleCoverClick, children: coverUrl && play === 'on-click' && ((0, jsx_runtime_1.jsx)("img", { src: coverUrl, alt: "Video cover", className: `video-background-${sectionId}-cover`, style: {
-                            opacity: isPlaying ? 0 : 1,
-                            left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
-                            width: isContainHeight ? 'auto' : '100%',
-                            objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
-                            transform: isContainHeight ? 'translateX(-50%)' : 'none',
-                            position: 'relative',
-                            height: '100%',
-                            transition: 'opacity 0.1s ease-in-out'
-                        } })) }))] }) }));
+                        transition: 'opacity 0.1s ease-in-out'
+                    } })) })) }) }));
 };
 exports.SectionVideo = SectionVideo;

package/lib/sdk-nextjs/components/Section/SectionVideoCacheContext.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const SectionVideoCacheContext: import("react").Context<{
+    videoCache: Map<string, HTMLVideoElement>;
+    imageCache: Map<string, HTMLImageElement>;
+}>;
+interface Props {
+    assets: string[];
+}
+export declare const SectionVideoCacheProvider: FC<PropsWithChildren<Props>>;
+export {};

package/lib/sdk-nextjs/components/Section/SectionVideoCacheContext.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionVideoCacheProvider = exports.SectionVideoCacheContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.SectionVideoCacheContext = (0, react_1.createContext)({ videoCache: new Map(), imageCache: new Map() });
+const SectionVideoCacheProvider = ({ children, assets }) => {
+    const [videoCache, setVideoCache] = (0, react_1.useState)(new Map());
+    const [imageCache, setImageCache] = (0, react_1.useState)(new Map());
+    (0, react_1.useEffect)(() => {
+        assets.forEach(asset => {
+            if (isVideoAsset(asset)) {
+                const video = getSectionVideo(asset);
+                setVideoCache(prev => prev.set(asset, video));
+            }
+            if (isImageAsset(asset)) {
+                const img = new Image();
+                img.src = asset;
+                setImageCache(prev => prev.set(asset, img));
+            }
+        });
+    }, [assets]);
+    return (0, jsx_runtime_1.jsx)(exports.SectionVideoCacheContext.Provider, { value: { videoCache, imageCache }, children: children });
+};
+exports.SectionVideoCacheProvider = SectionVideoCacheProvider;
+function getSectionVideo(url) {
+    const video = document.createElement('video');
+    video.src = url;
+    video.preload = 'auto';
+    video.playsInline = true;
+    video.load();
+    return video;
+}
+function isVideoAsset(url) {
+    const videoExtensions = ['.mp4', '.mov', '.webm'];
+    const lowerUrl = url.toLowerCase();
+    return videoExtensions.some(ext => lowerUrl.endsWith(ext));
+}
+function isImageAsset(url) {
+    const imageExtensions = ['.gif', '.png', '.jpg', '.jpeg', '.webp', '.avif', '.svg'];
+    const lowerUrl = url.toLowerCase();
+    return imageExtensions.some(ext => lowerUrl.endsWith(ext));
+}

package/lib/sdk-nextjs/components/items/FileItem/ImageItem.js

@@ -17,10 +17,12 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const useItemFXData_1 = require("../../../common/useItemFXData");
 const getFill_1 = require("../../../utils/getFill");
 const useExemplary_1 = require("../../../common/useExemplary");
+const SectionVideoCacheContext_1 = require("../../Section/SectionVideoCacheContext");
 const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const id = (0, react_1.useId)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, opacity: itemOpacity, strokeFill: itemStrokeFill, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const { imageCache } = (0, react_1.useContext)(SectionVideoCacheContext_1.SectionVideoCacheContext);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(wrapperRef, onResize);
@@ -65,9 +67,19 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: hasGLEffect && isFXAllowed
-                        ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
-                        : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.params.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    (0, react_1.useEffect)(() => {
+        if (!wrapperRef)
+            return;
+        const image = imageCache.get(url);
+        if (!image)
+            return;
+        image.className = `image image-${item.id}`;
+        Object.assign(image.style, inlineStyles);
+        if (!wrapperRef.contains(image)) {
+            wrapperRef.appendChild(image);
+        }
+    }, [wrapperRef, imageCache, url, angle, blur, inlineStyles]);
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: [hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight })), !(hasGLEffect && isFXAllowed) && !imageCache.has(url) && ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.params.url }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .image-wrapper-${item.id} {
           position: absolute;
           width: 100%;

package/lib/sdk-nextjs/components/items/FileItem/VideoItem.js

@@ -18,16 +18,18 @@ const useElementRect_1 = require("../../../utils/useElementRect");
 const useItemFXData_1 = require("../../../common/useItemFXData");
 const getFill_1 = require("../../../utils/getFill");
 const useExemplary_1 = require("../../../common/useExemplary");
+const SectionVideoCacheContext_1 = require("../../Section/SectionVideoCacheContext");
 const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const id = (0, react_1.useId)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const { videoCache } = (0, react_1.useContext)(SectionVideoCacheContext_1.SectionVideoCacheContext);
     const [isVideoPlaying, setIsVideoPlaying] = (0, react_1.useState)(false);
     const isScrollPausedRef = (0, react_1.useRef)(false);
     const [userPaused, setUserPaused] = (0, react_1.useState)(false);
     const [isVideoInteracted, setIsVideoInteracted] = (0, react_1.useState)(false);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const [ref, setRef] = (0, react_1.useState)(null);
+    const [videoWrapper, setVideoWrapper] = (0, react_1.useState)(null);
     const [videoRef, setVideoRef] = (0, react_1.useState)(null);
     const fxCanvas = (0, react_1.useRef)(null);
     const { url, hasGLEffect } = item.params;
@@ -38,7 +40,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const width = area && exemplary ? area.width * exemplary : 0;
     const height = area && exemplary ? area.height * exemplary : 0;
     const { controlsValues, fragmentShader } = (0, useItemFXData_1.useItemFXData)(item, sectionId);
-    const rect = (0, useElementRect_1.useElementRect)(ref);
+    const rect = (0, useElementRect_1.useElementRect)(videoWrapper);
     const rectWidth = Math.floor((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
     const rectHeight = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0);
     const scrollPlayback = params.scrollPlayback;
@@ -62,7 +64,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         fragmentShader,
         controls: controlsValues
     }, width, height);
-    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useRegisterResize_1.useRegisterResize)(videoWrapper, onResize);
     const inlineStyles = Object.assign(Object.assign({ borderRadius: `${radius * 100}vw` }, (strokeWidth !== undefined ? {
         borderWidth: `${strokeWidth * 100}vw`,
         borderColor: stroke,
@@ -74,53 +76,53 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
     (0, react_1.useEffect)(() => {
-        if (!videoRef || params.play !== 'on-click' || !ref)
+        var _a;
+        if (!videoWrapper || hasScrollPlayback || hasGLEffect)
             return;
-        const observer = new IntersectionObserver(([entry]) => {
-            if (userPaused || !isVideoInteracted)
-                return;
-            if (entry.isIntersecting) {
-                isScrollPausedRef.current = false;
-                videoRef.play();
-            }
-            else {
-                isScrollPausedRef.current = true;
-                videoRef.pause();
+        const { play } = params;
+        const video = videoCache.get(url);
+        if (!video)
+            return;
+        video.controls = play === "on-click";
+        video.muted = play === "auto";
+        video.autoplay = play === "auto";
+        video.loop = true;
+        video.poster = (_a = item.params.coverUrl) !== null && _a !== void 0 ? _a : '';
+        video.style.transform = `translateZ(0)`;
+        video.className = `video video-${item.id}`;
+        if (!videoWrapper.contains(video)) {
+            videoWrapper.appendChild(video);
+        }
+        setVideoRef(video);
+        video.addEventListener('play', () => {
+            setIsVideoPlaying(true);
+            setUserPaused(false);
+        });
+        video.addEventListener('pause', () => {
+            if (!isScrollPausedRef.current) {
+                setUserPaused(true);
             }
+            setIsVideoPlaying(false);
         });
-        observer.observe(ref);
-        return () => observer.disconnect();
-    }, [videoRef, ref, userPaused, isVideoInteracted]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { link: item.link, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
+        if (play === "auto") {
+            video.play().catch(() => { });
+        }
+        return () => {
+            video.pause();
+        };
+    }, [params, videoWrapper, videoCache]);
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { link: item.link, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setVideoWrapper, style: {
                     opacity,
-                    transform: `rotate(${angle}deg)`,
+                    transform: `rotate(${angle}deg) translateZ(0)`,
                     filter: `blur(${blur * 100}vw)`,
                     willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
                     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.params.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_p = item.params.coverUrl) !== null && _p !== void 0 ? _p : '', ref: setVideoRef, autoPlay: params.play === 'auto', preload: "auto", onClick: () => {
-                                    setIsVideoInteracted(true);
-                                }, muted: params.muted, onPlay: () => {
-                                    setIsVideoPlaying(true);
-                                    setUserPaused(false);
-                                }, onPause: () => {
-                                    if (!isScrollPausedRef.current) {
-                                        setUserPaused(true);
-                                    }
-                                    setIsVideoPlaying(false);
-                                }, onMouseEnter: () => {
-                                    if (!videoRef || params.play !== 'on-hover')
-                                        return;
-                                    videoRef.play();
-                                }, onMouseLeave: () => {
-                                    if (!videoRef || params.play !== 'on-hover')
-                                        return;
-                                    videoRef.pause();
-                                }, loop: true, controls: params.controls, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.params.url }) }), (params.play === 'on-click' || params.play === 'on-hover') && item.params.coverUrl && !isVideoInteracted && ((0, jsx_runtime_1.jsx)("img", { onMouseEnter: () => {
+                }, children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.params.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(params.play === 'on-click' || params.play === 'on-hover') && item.params.coverUrl && !isVideoInteracted && ((0, jsx_runtime_1.jsx)("img", { onMouseEnter: () => {
                                     if (!videoRef || params.play !== 'on-hover')
                                         return;
                                     setIsVideoInteracted(true);
                                     videoRef.play();
-                                }, src: (_q = item.params.coverUrl) !== null && _q !== void 0 ? _q : '', className: `video-cover-${item.id}`, onClick: () => {
+                                }, src: (_p = item.params.coverUrl) !== null && _p !== void 0 ? _p : '', className: `video-cover-${item.id}`, onClick: () => {
                                     if (!videoRef)
                                         return;
                                     setIsVideoInteracted(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxpl/sdk",
-  "version": "0.0.35",
+  "version": "0.0.36-0",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",