@gxpl/sdk 0.0.36-0 → 0.0.36

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

@@ -11,7 +11,8 @@ 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 PreviewWrapper_1 = require("./Preview/PreviewWrapper");
+const PreviewListener_1 = require("./Preview/PreviewListener");
 const Page = ({ project, articlesData }) => {
     var _a, _b;
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
@@ -20,12 +21,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.jsx)(TransitionMachineContext_1.TransitionMachineContext.Provider, { options: {
-                    input: {
-                        startScene,
-                        relations,
-                        scenes,
-                    }
-                }, 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] }));
+    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)(PreviewWrapper_1.PreviewWrapper, { relations: relations, startScene: startScene, children: (0, jsx_runtime_1.jsxs)(TransitionMachineContext_1.TransitionMachineContext.Provider, { options: {
+                        input: {
+                            startScene,
+                            relations,
+                            scenes,
+                        }
+                    }, children: [(0, jsx_runtime_1.jsx)(PreviewListener_1.PreviewListener, {}), 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/Preview/ChevronIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const ChevronIcon: ({ className }: {
+    className?: string;
+}) => JSX.Element;

package/lib/sdk-nextjs/components/Preview/ChevronIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChevronIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ChevronIcon = ({ className }) => {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "44px", height: "44px", viewBox: "0 0 44 44", version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("circle", { id: "path-1", cx: "21.5", cy: "21.5", r: "21" }) }), (0, jsx_runtime_1.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: (0, jsx_runtime_1.jsxs)("g", { id: "arrow", children: [(0, jsx_runtime_1.jsxs)("g", { id: "Oval", opacity: "0.2", children: [(0, jsx_runtime_1.jsx)("use", { fill: "#000000", xlinkHref: "#path-1" }), (0, jsx_runtime_1.jsx)("use", { fill: "#64686A", xlinkHref: "#path-1" })] }), (0, jsx_runtime_1.jsx)("polyline", { id: "Path", stroke: "#FFFFFF", strokeWidth: "2", points: "20 16.5 25 21.5 20 26.5" })] }) })] }));
+};
+exports.ChevronIcon = ChevronIcon;

package/lib/sdk-nextjs/components/Preview/IframePreviewWindowContext.d.ts

@@ -0,0 +1,2 @@
+export declare const IframePreviewWindowContext: import("react").Context<Window | null>;
+export declare const useIframePreviewWindow: () => Window | null;

package/lib/sdk-nextjs/components/Preview/IframePreviewWindowContext.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIframePreviewWindow = exports.IframePreviewWindowContext = void 0;
+const react_1 = require("react");
+const react_2 = require("react");
+exports.IframePreviewWindowContext = (0, react_2.createContext)(null);
+const useIframePreviewWindow = () => (0, react_1.useContext)(exports.IframePreviewWindowContext);
+exports.useIframePreviewWindow = useIframePreviewWindow;

package/lib/sdk-nextjs/components/Preview/Preview.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+import { Relation } from '../../../sdk/types/project/Relation';
+interface Props {
+    relations: Relation[];
+    startScene: string;
+}
+export declare const Preview: FC<PropsWithChildren<Props>>;
+export {};

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

@@ -0,0 +1,186 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Preview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_1 = require("react-dom/client");
+const findRelation_1 = require("../../../sdk/transitions/utils/findRelation");
+const getAvailableTransitions_1 = require("../../../sdk/transitions/utils/getAvailableTransitions");
+const style_1 = __importDefault(require("styled-jsx/style"));
+const ChevronIcon_1 = require("./ChevronIcon");
+const IframePreviewWindowContext_1 = require("./IframePreviewWindowContext");
+const Preview = ({ children, relations, startScene }) => {
+    const id = (0, react_1.useId)();
+    const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
+    const [isTransitioning, setIsTransitioning] = (0, react_1.useState)(false);
+    const [activeScene, setActiveScene] = (0, react_1.useState)(startScene);
+    const [activeSides, setActiveSides] = (0, react_1.useState)((0, getAvailableTransitions_1.getAvailableTransitions)(startScene, relations));
+    const handleSwipeToScene = (direction) => {
+        if (!iframeRef || !iframeRef.contentWindow || !iframeRef.contentDocument)
+            return;
+        setIsTransitioning(true);
+        const transition = (0, findRelation_1.findRelation)(relations, activeScene, direction);
+        const targetWindow = iframeRef.contentWindow;
+        const message = {
+            type: "TRANSITION_TRIGGER",
+            direction,
+            to: transition.to,
+            transitionType: transition.type,
+        };
+        targetWindow.postMessage(message, "*");
+    };
+    (0, react_1.useEffect)(() => {
+        if (!iframeRef)
+            return;
+        const handleMessage = (e) => {
+            var _a;
+            if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) === "ACTIVE_SCENE_CHANGE") {
+                const activeScene = e.data.activeScene;
+                if (activeScene) {
+                    const availableTransitions = (0, getAvailableTransitions_1.getAvailableTransitions)(activeScene, relations);
+                    setActiveSides(availableTransitions);
+                    setActiveScene(activeScene);
+                    setIsTransitioning(false);
+                }
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, [iframeRef, relations]);
+    (0, react_1.useEffect)(() => {
+        if (!iframeRef)
+            return;
+        const iframeDocument = iframeRef.contentDocument;
+        if (!iframeDocument)
+            return;
+        const iframeWindow = iframeRef.contentWindow;
+        if (!iframeWindow)
+            return;
+        const iframeHead = iframeDocument.head;
+        if (!iframeHead)
+            return;
+        const copyStyleNode = (node) => {
+            if (node instanceof HTMLStyleElement) {
+                const cloned = node.cloneNode(true);
+                iframeHead.appendChild(cloned);
+            }
+            else if (node instanceof HTMLLinkElement && node.rel === 'stylesheet') {
+                const cloned = node.cloneNode(true);
+                iframeHead.appendChild(cloned);
+            }
+        };
+        const copyAllStyles = () => {
+            const style = iframeDocument.createElement("style");
+            style.innerHTML = `
+        html, body {
+          height: 100%;
+          margin: 0 !important;
+          padding: 0 !important;
+        }
+      `;
+            iframeHead.appendChild(style);
+            const parentHead = document.head;
+            if (!parentHead)
+                return;
+            Array.from(parentHead.querySelectorAll('style, link[rel="stylesheet"]')).forEach((node) => {
+                const href = node instanceof HTMLLinkElement ? node.href : null;
+                const existing = href
+                    ? iframeHead.querySelector(`link[href="${href}"]`)
+                    : null;
+                if (!existing) {
+                    copyStyleNode(node);
+                }
+            });
+        };
+        copyAllStyles();
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if ((node instanceof HTMLStyleElement) ||
+                        (node instanceof HTMLLinkElement && node.rel === 'stylesheet')) {
+                        copyStyleNode(node);
+                    }
+                });
+            });
+        });
+        observer.observe(document.head, {
+            childList: true,
+            subtree: true,
+        });
+        const mountNode = iframeDocument.createElement('div');
+        mountNode.id = 'react-root';
+        iframeDocument.body.appendChild(mountNode);
+        const root = (0, client_1.createRoot)(mountNode);
+        root.render((0, jsx_runtime_1.jsx)(IframePreviewWindowContext_1.IframePreviewWindowContext.Provider, { value: iframeWindow, children: children }));
+        return () => {
+            observer.disconnect();
+        };
+    }, [iframeRef, children]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "preview-wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: "preview-inner", children: [Object.entries(activeSides).map(([direction, isActive]) => (isActive ? ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleSwipeToScene(direction), disabled: isTransitioning, className: `chevron-button chevron-button-${direction}`, children: (0, jsx_runtime_1.jsx)(ChevronIcon_1.ChevronIcon, { className: "chevron-icon" }) }, direction)) : null)), (0, jsx_runtime_1.jsx)("iframe", { className: "iframe-preview", ref: setIframeRef, style: {} })] }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+          .preview-wrapper {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            padding: 66px;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #000000;
+          }
+          .preview-inner {
+            width: 100%;
+            max-height: 844px;
+            height: 100%;
+            position: relative;
+            display: flex;
+            width: 390px;
+            align-items: center;
+            justify-content: center;
+          }
+          .iframe-preview {
+            width: 390px;
+            max-height: 844px;
+            height: 100%;
+            border: none;
+            z-index: 1000;
+            background-color: #FFFFFF;
+          }
+          .chevron-icon {
+            width: 44px;
+            height: 44px;
+          }
+          .chevron-button {
+            border: none;
+            background: none;
+            padding: 0;
+            margin: 0;
+            cursor: pointer;
+            position: absolute;
+          }
+          .chevron-button-north {
+            top: 0;
+            left: 50%;
+            transform: translate(-50%, -125%) rotate(-90deg);
+          }
+          .chevron-button-south {
+            bottom: 0;
+            left: 50%;
+            transform: translate(-50%, 125%) rotate(90deg);
+          }
+          .chevron-button-east {
+            right: 0;
+            top: 50%;
+            transform: translate(125%, -50%);
+          }
+          .chevron-button-west {
+            left: 0;
+            top: 50%;
+            transform: translate(-125%, -50%) rotate(180deg);
+          }
+        ` })] }));
+};
+exports.Preview = Preview;

package/lib/sdk-nextjs/components/Preview/PreviewListener.d.ts

@@ -0,0 +1 @@
+export declare const PreviewListener: () => null;

package/lib/sdk-nextjs/components/Preview/PreviewListener.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewListener = void 0;
+const react_1 = require("react");
+const TransitionMachineContext_1 = require("../../provider/TransitionMachineContext");
+const IframePreviewWindowContext_1 = require("./IframePreviewWindowContext");
+const PreviewListener = () => {
+    const actorRef = TransitionMachineContext_1.TransitionMachineContext.useActorRef();
+    const { isActive } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => ({
+        isActive: state.matches('active'),
+    }));
+    const iframePreviewWindow = (0, IframePreviewWindowContext_1.useIframePreviewWindow)();
+    (0, react_1.useEffect)(() => {
+        if (!iframePreviewWindow)
+            return;
+        const handleMessage = (e) => {
+            var _a;
+            if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) === "TRANSITION_TRIGGER") {
+                const { direction, to, transitionType } = e.data;
+                actorRef.send({
+                    type: 'TRANSITION_TRIGGER',
+                    transition: transitionType,
+                    to,
+                    direction
+                });
+            }
+        };
+        iframePreviewWindow.addEventListener("message", handleMessage);
+        return () => {
+            if (iframePreviewWindow) {
+                iframePreviewWindow.removeEventListener("message", handleMessage);
+            }
+        };
+    }, [iframePreviewWindow]);
+    (0, react_1.useEffect)(() => {
+        if (isActive && actorRef && iframePreviewWindow) {
+            const { context } = actorRef.getSnapshot();
+            const { scenes } = context;
+            const [activeScene] = scenes;
+            iframePreviewWindow.parent.postMessage({
+                type: "ACTIVE_SCENE_CHANGE",
+                activeScene: activeScene.id,
+            }, "*");
+        }
+    }, [isActive, actorRef, iframePreviewWindow]);
+    return null;
+};
+exports.PreviewListener = PreviewListener;

package/lib/sdk-nextjs/components/Preview/PreviewWrapper.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+import { Relation } from '../../../sdk/types/project/Relation';
+interface Props {
+    relations: Relation[];
+    startScene: string;
+}
+export declare const PreviewWrapper: FC<PropsWithChildren<Props>>;
+export {};

package/lib/sdk-nextjs/components/Preview/PreviewWrapper.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Preview_1 = require("./Preview");
+const PreviewWrapper = ({ children, relations, startScene }) => {
+    const [isDesktop, setIsDesktop] = (0, react_1.useState)(false);
+    const handleResize = () => {
+        if (window.innerWidth < 768) {
+            setIsDesktop(false);
+        }
+        else {
+            setIsDesktop(true);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    if (isDesktop) {
+        return (0, jsx_runtime_1.jsx)(Preview_1.Preview, { relations: relations, startScene: startScene, children: children });
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.PreviewWrapper = PreviewWrapper;

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

@@ -3,10 +3,8 @@ 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;
@@ -26,42 +24,6 @@ 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;
@@ -82,7 +44,6 @@ 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;
@@ -96,28 +57,35 @@ 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.jsx)("div", { ref: setVideoWrapper, className: `section-video-wrapper-${sectionId}`, style: {
+    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: {
                 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: 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'),
+            }, 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',
-                        position: 'relative',
+                        left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
+                        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%',
-                        transition: 'opacity 0.1s ease-in-out'
-                    } })) })) }) }));
+                        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'
+                        } })) }))] }) }));
 };
 exports.SectionVideo = SectionVideo;

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

@@ -17,12 +17,10 @@ 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);
@@ -67,19 +65,9 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    (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: `
+    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: `
         .image-wrapper-${item.id} {
           position: absolute;
           width: 100%;

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

@@ -18,18 +18,16 @@ 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     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 [videoWrapper, setVideoWrapper] = (0, react_1.useState)(null);
+    const [ref, setRef] = (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;
@@ -40,7 +38,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)(videoWrapper);
+    const rect = (0, useElementRect_1.useElementRect)(ref);
     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;
@@ -64,7 +62,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         fragmentShader,
         controls: controlsValues
     }, width, height);
-    (0, useRegisterResize_1.useRegisterResize)(videoWrapper, onResize);
+    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const inlineStyles = Object.assign(Object.assign({ borderRadius: `${radius * 100}vw` }, (strokeWidth !== undefined ? {
         borderWidth: `${strokeWidth * 100}vw`,
         borderColor: stroke,
@@ -76,53 +74,53 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
     (0, react_1.useEffect)(() => {
-        var _a;
-        if (!videoWrapper || hasScrollPlayback || hasGLEffect)
+        if (!videoRef || params.play !== 'on-click' || !ref)
             return;
-        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);
+        const observer = new IntersectionObserver(([entry]) => {
+            if (userPaused || !isVideoInteracted)
+                return;
+            if (entry.isIntersecting) {
+                isScrollPausedRef.current = false;
+                videoRef.play();
+            }
+            else {
+                isScrollPausedRef.current = true;
+                videoRef.pause();
             }
-            setIsVideoPlaying(false);
         });
-        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: {
+        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: {
                     opacity,
-                    transform: `rotate(${angle}deg) translateZ(0)`,
+                    transform: `rotate(${angle}deg)`,
                     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: [(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: [(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: () => {
                                     if (!videoRef || params.play !== 'on-hover')
                                         return;
                                     setIsVideoInteracted(true);
                                     videoRef.play();
-                                }, src: (_p = item.params.coverUrl) !== null && _p !== void 0 ? _p : '', className: `video-cover-${item.id}`, onClick: () => {
+                                }, src: (_q = item.params.coverUrl) !== null && _q !== void 0 ? _q : '', className: `video-cover-${item.id}`, onClick: () => {
                                     if (!videoRef)
                                         return;
                                     setIsVideoInteracted(true);

package/package.json

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,43 +0,0 @@
-"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));
-}