@gxpl/sdk 0.0.36-0 → 0.0.37

package/lib/sdk/schemas/project/Project.schema.d.ts

@@ -401,7 +401,16 @@ export declare const ProjectSchema: z.ZodObject<{
         google: string;
         adobe: string;
     }>;
-    scenesAssets: z.ZodArray<z.ZodString, "many">;
+    scenesAssets: z.ZodArray<z.ZodObject<{
+        url: z.ZodString;
+        id: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        url: string;
+        id: string;
+    }, {
+        url: string;
+        id: string;
+    }>, "many">;
     relations: z.ZodArray<z.ZodObject<{
         from: z.ZodString;
         to: z.ZodString;
@@ -1039,7 +1048,10 @@ export declare const ProjectSchema: z.ZodObject<{
         google: string;
         adobe: string;
     };
-    scenesAssets: string[];
+    scenesAssets: {
+        url: string;
+        id: string;
+    }[];
     relations: {
         type: "slide" | "fade";
         direction: "north" | "east" | "south" | "west";
@@ -1187,7 +1199,10 @@ export declare const ProjectSchema: z.ZodObject<{
         google: string;
         adobe: string;
     };
-    scenesAssets: string[];
+    scenesAssets: {
+        url: string;
+        id: string;
+    }[];
     relations: {
         type: "slide" | "fade";
         direction: "north" | "east" | "south" | "west";

package/lib/sdk/schemas/project/Project.schema.js

@@ -59,7 +59,10 @@ exports.ProjectSchema = zod_1.z.object({
             }))
         }))
     }),
-    scenesAssets: zod_1.z.array(zod_1.z.string()),
+    scenesAssets: zod_1.z.array(zod_1.z.object({
+        url: zod_1.z.string(),
+        id: zod_1.z.string()
+    })),
     relations: zod_1.z.array(zod_1.z.object({
         from: zod_1.z.string().min(1),
         to: zod_1.z.string().min(1),

package/lib/sdk/types/project/Project.d.ts

@@ -16,7 +16,10 @@ export interface Project {
     pages: Page[];
     fonts: Fonts;
     relations: Relation[];
-    scenesAssets: string[];
+    scenesAssets: {
+        url: string;
+        id: string;
+    }[];
     foreground: TFixedLayer;
     background: TFixedLayer;
 }

package/lib/sdk-nextjs/assets/AssetsCacheProvider.d.ts

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

package/lib/sdk-nextjs/{components/Section/SectionVideoCacheContext.js → assets/AssetsCacheProvider.js}

@@ -1,29 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionVideoCacheProvider = exports.SectionVideoCacheContext = void 0;
+exports.AssetsCacheProvider = exports.AssetsCacheContext = 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 getCacheAssetKey_1 = require("./getCacheAssetKey");
+exports.AssetsCacheContext = (0, react_1.createContext)({ videoCache: new Map(), imageCache: new Map() });
+const AssetsCacheProvider = ({ 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));
+        assets.forEach(({ url, id }) => {
+            if (isVideoAsset(url)) {
+                const video = getVideo(url);
+                setVideoCache(prev => prev.set((0, getCacheAssetKey_1.getCacheAssetKey)(url, id), video));
             }
-            if (isImageAsset(asset)) {
+            if (isImageAsset(url)) {
                 const img = new Image();
-                img.src = asset;
-                setImageCache(prev => prev.set(asset, img));
+                img.src = url;
+                setImageCache(prev => prev.set((0, getCacheAssetKey_1.getCacheAssetKey)(url, id), img));
             }
         });
     }, [assets]);
-    return (0, jsx_runtime_1.jsx)(exports.SectionVideoCacheContext.Provider, { value: { videoCache, imageCache }, children: children });
+    return (0, jsx_runtime_1.jsx)(exports.AssetsCacheContext.Provider, { value: { videoCache, imageCache }, children: children });
 };
-exports.SectionVideoCacheProvider = SectionVideoCacheProvider;
-function getSectionVideo(url) {
+exports.AssetsCacheProvider = AssetsCacheProvider;
+function getVideo(url) {
     const video = document.createElement('video');
     video.src = url;
     video.preload = 'auto';

package/lib/sdk-nextjs/assets/getCacheAssetKey.d.ts

@@ -0,0 +1 @@
+export declare function getCacheAssetKey(url: string, id: string): string;

package/lib/sdk-nextjs/assets/getCacheAssetKey.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCacheAssetKey = getCacheAssetKey;
+function getCacheAssetKey(url, id) {
+    return `${url}-${id}`;
+}

package/lib/sdk-nextjs/assets/useCacheImage.d.ts

@@ -0,0 +1,2 @@
+import { CSSProperties } from 'react';
+export declare const useCacheImage: (key: string | null, renderImage: boolean, style: CSSProperties, container: HTMLElement | null, className?: string, onMouseEnter?: () => void, onClick?: () => void) => void;

package/lib/sdk-nextjs/assets/useCacheImage.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCacheImage = void 0;
+const react_1 = require("react");
+const AssetsCacheProvider_1 = require("./AssetsCacheProvider");
+const useCacheImage = (key, renderImage, style, container, className = '', onMouseEnter, onClick) => {
+    const { imageCache } = (0, react_1.useContext)(AssetsCacheProvider_1.AssetsCacheContext);
+    const [image, setImage] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!container || !key)
+            return;
+        const image = imageCache.get(key);
+        if (!image)
+            return;
+        if (!renderImage && container.contains(image)) {
+            container.removeChild(image);
+            return;
+        }
+        if (!renderImage)
+            return;
+        image.className = className;
+        if (!container.contains(image)) {
+            container.appendChild(image);
+        }
+        setImage(image);
+    }, [container, imageCache, key, renderImage]);
+    (0, react_1.useEffect)(() => {
+        if (!image)
+            return;
+        if (onClick) {
+            image.addEventListener('click', onClick);
+        }
+        if (onMouseEnter) {
+            image.addEventListener('mouseenter', onMouseEnter);
+        }
+        return () => {
+            if (onMouseEnter) {
+                image.removeEventListener('mouseenter', onMouseEnter);
+            }
+            if (onClick) {
+                image.removeEventListener('click', onClick);
+            }
+        };
+    }, [onMouseEnter, onClick, image]);
+    if (image) {
+        Object.assign(image.style, style);
+    }
+};
+exports.useCacheImage = useCacheImage;

package/lib/sdk-nextjs/assets/useCacheVideo.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+export declare const useCacheVideo: (key: string, container: HTMLElement | null, isVideoVisible: boolean, params: {
+    play: "on-hover" | "on-click" | "auto";
+    muted: boolean;
+    controls: boolean;
+}, style: CSSProperties, video: HTMLVideoElement | null, setVideo: (video: HTMLVideoElement) => void, className?: string) => void;

package/lib/sdk-nextjs/assets/useCacheVideo.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCacheVideo = void 0;
+const react_1 = require("react");
+const AssetsCacheProvider_1 = require("./AssetsCacheProvider");
+const useCacheVideo = (key, container, isVideoVisible, params, style, video, setVideo, className = '') => {
+    const { videoCache } = (0, react_1.useContext)(AssetsCacheProvider_1.AssetsCacheContext);
+    (0, react_1.useEffect)(() => {
+        if (!container || !isVideoVisible)
+            return;
+        const { play, muted, controls } = params;
+        const video = videoCache.get(key);
+        if (!video)
+            return;
+        video.controls = controls;
+        video.muted = play === "auto" || muted;
+        video.autoplay = play === "auto";
+        video.playsInline = true;
+        video.loop = true;
+        video.className = className;
+        if (!container.contains(video)) {
+            container.appendChild(video);
+        }
+        setVideo(video);
+        if (play === "auto") {
+            video.play().catch(() => { });
+        }
+        return () => {
+            video.pause();
+        };
+    }, [key, params, container, videoCache, className, isVideoVisible]);
+    if (video) {
+        Object.assign(video.style, style);
+    }
+};
+exports.useCacheVideo = useCacheVideo;

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

@@ -10,8 +10,9 @@ const Head_1 = require("./Head");
 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 AssetsCacheProvider_1 = require("../assets/AssetsCacheProvider");
 const Page = ({ project, articlesData }) => {
     var _a, _b;
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
@@ -19,13 +20,12 @@ const Page = ({ project, articlesData }) => {
     const startScene = (_b = (_a = project.pages.find(page => page.isStartScene)) === null || _a === void 0 ? void 0 : _a.articleId) !== null && _b !== void 0 ? _b : Object.keys(articlesData)[0];
     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, {}), (0, jsx_runtime_1.jsxs)(AssetsCacheProvider_1.AssetsCacheProvider, { 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/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/SectionImage.js

@@ -2,23 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionImage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useCacheImage_1 = require("../../assets/useCacheImage");
+const getCacheAssetKey_1 = require("../../assets/getCacheAssetKey");
 const SectionImage = ({ media, sectionId }) => {
     const { url, size, position, offsetX } = media;
+    const key = (0, getCacheAssetKey_1.getCacheAssetKey)(url, sectionId);
+    const [container, setContainer] = (0, react_1.useState)(null);
     const isContainHeight = size === 'contain-height';
     const hasOffsetX = offsetX !== null;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: `section-image-wrapper-${sectionId}`, style: {
-                position: position === 'fixed' ? 'sticky' : 'relative',
-                height: position === 'fixed' ? '100vh' : '100%',
-                top: position === 'fixed' ? '100vh' : '0',
-                width: '100%',
-                overflow: 'hidden'
-            }, children: (0, jsx_runtime_1.jsx)("img", { src: url, className: `image-background-${sectionId}`, style: {
-                    objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
-                    width: isContainHeight ? 'auto' : '100%',
-                    transform: isContainHeight ? 'translateX(-50%)' : 'none',
-                    position: 'relative',
-                    left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
-                    height: '100%'
-                } }) }) }));
+    const styles = {
+        objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
+        width: isContainHeight ? 'auto' : '100%',
+        transform: isContainHeight ? 'translateX(-50%)' : 'none',
+        position: 'relative',
+        left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
+        height: '100%'
+    };
+    (0, useCacheImage_1.useCacheImage)(key, true, styles, container, `image-background-${sectionId}`);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: setContainer, className: `section-image-wrapper-${sectionId}`, style: {
+            position: position === 'fixed' ? 'sticky' : 'relative',
+            height: position === 'fixed' ? '100vh' : '100%',
+            top: position === 'fixed' ? '100vh' : '0',
+            width: '100%',
+            overflow: 'hidden'
+        } }));
 };
 exports.SectionImage = SectionImage;

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

@@ -3,13 +3,17 @@ 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 useCacheVideo_1 = require("../../assets/useCacheVideo");
+const useCacheImage_1 = require("../../assets/useCacheImage");
+const getCacheAssetKey_1 = require("../../assets/getCacheAssetKey");
 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 [coverImageWrapper, setCoverImageWrapper] = (0, react_1.useState)(null);
     const [isVideoWidthOverflow, setIsVideoWidthOverflow] = (0, react_1.useState)(false);
     const { url, size, position, offsetX, coverUrl, play } = media;
+    const key = (0, getCacheAssetKey_1.getCacheAssetKey)(url, sectionId);
+    const coverKey = coverUrl ? (0, getCacheAssetKey_1.getCacheAssetKey)(coverUrl, sectionId) : null;
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
     const [userPaused, setUserPaused] = (0, react_1.useState)(false);
     const [isClickedOnCover, setIsClickedOnCover] = (0, react_1.useState)(false);
@@ -26,42 +30,54 @@ const SectionVideo = ({ container, sectionId, media }) => {
             setUserPaused(false);
         }
     };
+    const isContainHeight = size === 'contain-height';
+    const hasOffsetX = offsetX !== null && size === 'contain';
+    const styles = {
+        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'),
+        opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
+        height: '100%',
+        position: 'relative'
+    };
+    const videoParams = (0, react_1.useMemo)(() => ({
+        play,
+        muted: play === 'auto',
+        controls: play === 'on-click'
+    }), [play]);
+    (0, useCacheVideo_1.useCacheVideo)(key, videoWrapper, true, videoParams, styles, video, setVideo, `section-video-${sectionId}`);
     (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', () => {
+        const onPlay = () => {
             setIsPlaying(true);
-        });
-        video.addEventListener('pause', () => {
+        };
+        const onPause = () => {
             setIsPlaying(false);
-        });
-        if (play === "auto") {
-            video.play().catch(() => { });
-        }
+        };
+        video.addEventListener('play', onPlay);
+        video.addEventListener('pause', onPause);
         return () => {
-            video.pause();
+            video.removeEventListener('play', onPlay);
+            video.removeEventListener('pause', onPause);
         };
-    }, [url, play, videoWrapper, videoCache, sectionId, video, isVideoWidthOverflow]);
+    }, [video]);
+    (0, react_1.useEffect)(() => {
+        if (!video || !videoWrapper)
+            return;
+        video.addEventListener('loadedmetadata', () => {
+            const h = video.videoHeight;
+            const w = video.videoWidth;
+            const width = (videoWrapper.clientHeight / h) * w;
+            if (width > videoWrapper.clientWidth) {
+                setIsVideoWidthOverflow(true);
+            }
+            else {
+                setIsVideoWidthOverflow(false);
+            }
+        });
+    }, [video, videoWrapper]);
     (0, react_1.useEffect)(() => {
         if (!video || play !== 'on-click')
             return;
@@ -78,46 +94,33 @@ const SectionVideo = ({ container, sectionId, media }) => {
         observer.observe(container);
         return () => observer.disconnect();
     }, [container, play, userPaused, isClickedOnCover]);
-    (0, react_1.useEffect)(() => {
-        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;
-            if (width > videoWrapper.clientWidth) {
-                setIsVideoWidthOverflow(true);
-            }
-            else {
-                setIsVideoWidthOverflow(false);
-            }
-        });
-    }, [video, videoWrapper]);
-    const isContainHeight = size === 'contain-height';
-    const hasOffsetX = offsetX !== null && size === 'contain';
+    const coverStyles = {
+        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',
+        height: '100%',
+        position: 'relative',
+        pointerEvents: 'none',
+        transition: 'opacity 0.1s ease-in-out'
+    };
+    const renderCover = coverUrl && play === 'on-click' && !isClickedOnCover;
+    (0, useCacheImage_1.useCacheImage)(coverKey, !!renderCover, coverStyles, coverImageWrapper, `video-background-${sectionId}-cover`);
     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: play === 'on-click' && !isClickedOnCover && ((0, jsx_runtime_1.jsx)("div", { className: `video-background-${sectionId}-cover-container`, style: {
                     position: 'absolute',
+                    pointerEvents: 'all',
                     left: 0,
                     width: '100%',
+                    zIndex: 1,
                     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'
-                    } })) })) }) }));
+                }, onClick: handleCoverClick, ref: setCoverImageWrapper })) }) }));
 };
 exports.SectionVideo = SectionVideo;

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

@@ -17,16 +17,19 @@ 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 AssetsCacheProvider_1 = require("../../../assets/AssetsCacheProvider");
+const useCacheImage_1 = require("../../../assets/useCacheImage");
+const getCacheAssetKey_1 = require("../../../assets/getCacheAssetKey");
 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 { imageCache } = (0, react_1.useContext)(AssetsCacheProvider_1.AssetsCacheContext);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(wrapperRef, onResize);
     const { url, hasGLEffect } = item.params;
+    const cacheKey = (0, getCacheAssetKey_1.getCacheAssetKey)(url, item.id);
     const fxCanvas = (0, react_1.useRef)(null);
     const isInitialRef = (0, react_1.useRef)(true);
     const { controlsValues, fragmentShader } = (0, useItemFXData_1.useItemFXData)(item, sectionId);
@@ -64,22 +67,12 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         borderStyle: 'solid',
     } : {})), { transition: (_m = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
     const isInteractive = opacity !== 0;
+    const renderImage = !(hasGLEffect && isFXAllowed);
+    (0, useCacheImage_1.useCacheImage)(cacheKey, renderImage, inlineStyles, wrapperRef, `image image-${item.id}`);
     (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.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 })), renderImage && !imageCache.has(cacheKey) && ((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,19 +18,24 @@ 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 AssetsCacheProvider_1 = require("../../../assets/AssetsCacheProvider");
+const useCacheVideo_1 = require("../../../assets/useCacheVideo");
+const useCacheImage_1 = require("../../../assets/useCacheImage");
+const getCacheAssetKey_1 = require("../../../assets/getCacheAssetKey");
 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 { videoCache, imageCache } = (0, react_1.useContext)(AssetsCacheProvider_1.AssetsCacheContext);
     const [isVideoPlaying, setIsVideoPlaying] = (0, react_1.useState)(false);
+    const videoCacheKey = (0, getCacheAssetKey_1.getCacheAssetKey)(item.params.url, item.id);
+    const coverCacheKey = item.params.coverUrl ? (0, getCacheAssetKey_1.getCacheAssetKey)(item.params.coverUrl, item.id) : null;
     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 [videoRef, setVideoRef] = (0, react_1.useState)(null);
+    const [video, setVideo] = (0, react_1.useState)(null);
     const fxCanvas = (0, react_1.useRef)(null);
     const { url, hasGLEffect } = item.params;
     const isInitialRef = (0, react_1.useRef)(true);
@@ -65,77 +70,127 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         controls: controlsValues
     }, width, height);
     (0, useRegisterResize_1.useRegisterResize)(videoWrapper, onResize);
-    const inlineStyles = Object.assign(Object.assign({ borderRadius: `${radius * 100}vw` }, (strokeWidth !== undefined ? {
+    const inlineStyles = Object.assign(Object.assign({ transform: `translateZ(0)`, borderRadius: `${radius * 100}vw` }, (strokeWidth !== undefined ? {
         borderWidth: `${strokeWidth * 100}vw`,
         borderColor: stroke,
         borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
-        borderStyle: 'solid'
+        borderStyle: 'solid',
     } : {})), { transition: (_m = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
     const isInteractive = opacity !== 0;
-    (0, react_1.useEffect)(() => {
-        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
-    }, [isInteractive, onVisibilityChange]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (!videoWrapper || hasScrollPlayback || hasGLEffect)
+    const isVideoVisible = !hasScrollPlayback && !hasGLEffect;
+    (0, useCacheVideo_1.useCacheVideo)(videoCacheKey, videoWrapper, isVideoVisible, params, inlineStyles, video, setVideo, `video video-${item.id}`);
+    const onCoverMouseEnter = (0, react_1.useCallback)(() => {
+        if (!video || params.play !== 'on-hover')
             return;
-        const { play } = params;
-        const video = videoCache.get(url);
+        setIsVideoInteracted(true);
+        video.play();
+    }, [video, params]);
+    const onCoverClick = (0, react_1.useCallback)(() => {
         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', () => {
+        setIsVideoInteracted(true);
+        video.play();
+    }, [video, params]);
+    const renderCover = isVideoVisible && ((params.play === 'on-click' || params.play === 'on-hover') && item.params.coverUrl && !isVideoInteracted);
+    (0, useCacheImage_1.useCacheImage)(coverCacheKey, !!renderCover, {}, videoWrapper, `video-cover-${item.id}`, onCoverMouseEnter, onCoverClick);
+    (0, react_1.useEffect)(() => {
+        if (!video || !videoCache.has(url))
+            return;
+        const onPlay = () => {
             setIsVideoPlaying(true);
             setUserPaused(false);
-        });
-        video.addEventListener('pause', () => {
+        };
+        const onPause = () => {
             if (!isScrollPausedRef.current) {
                 setUserPaused(true);
             }
             setIsVideoPlaying(false);
-        });
-        if (play === "auto") {
-            video.play().catch(() => { });
-        }
-        return () => {
+        };
+        const onMouseEnter = () => {
+            if (!video || params.play !== 'on-hover')
+                return;
+            video.play();
+        };
+        const onMouseLeave = () => {
+            if (!video || params.play !== 'on-hover')
+                return;
             video.pause();
         };
-    }, [params, videoWrapper, videoCache]);
+        video.addEventListener('play', onPlay);
+        video.addEventListener('pause', onPause);
+        video.addEventListener('mouseenter', onMouseEnter);
+        video.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            video.removeEventListener('play', onPlay);
+            video.removeEventListener('pause', onPause);
+            video.removeEventListener('mouseenter', onMouseEnter);
+            video.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [video, videoCache, params]);
+    (0, react_1.useEffect)(() => {
+        if (!params || !video || params.play !== 'on-click' || !videoWrapper)
+            return;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (userPaused || !isVideoInteracted)
+                return;
+            if (entry.isIntersecting) {
+                isScrollPausedRef.current = false;
+                video.play();
+            }
+            else {
+                isScrollPausedRef.current = true;
+                video.pause();
+            }
+        });
+        observer.observe(videoWrapper);
+        return () => observer.disconnect();
+    }, [params, video, videoWrapper, userPaused, isVideoInteracted]);
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
     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) 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: [(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')
+                }, 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: [isVideoVisible && !videoCache.has(videoCacheKey) && ((0, jsx_runtime_1.jsx)("video", { poster: (_p = item.params.coverUrl) !== null && _p !== void 0 ? _p : '', ref: setVideo, 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 (!video || params.play !== 'on-hover')
+                                        return;
+                                    video.play();
+                                }, onMouseLeave: () => {
+                                    if (!video || params.play !== 'on-hover')
+                                        return;
+                                    video.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 }) })), renderCover && coverCacheKey && !imageCache.has(coverCacheKey) && ((0, jsx_runtime_1.jsx)("img", { onMouseEnter: () => {
+                                    if (!video || 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: () => {
-                                    if (!videoRef)
+                                    video.play();
+                                }, src: (_q = item.params.coverUrl) !== null && _q !== void 0 ? _q : '', className: `video-cover-${item.id}`, onClick: () => {
+                                    if (!video)
                                         return;
                                     setIsVideoInteracted(true);
-                                    videoRef.play();
+                                    video.play();
                                 } })), (params.play === 'on-click' && !params.controls && ((0, jsx_runtime_1.jsx)("div", { className: `video-overlay-${item.id}`, onClick: () => {
-                                    if (!videoRef)
+                                    if (!video)
                                         return;
                                     setIsVideoInteracted(true);
                                     if (isVideoPlaying) {
-                                        videoRef.pause();
+                                        video.pause();
                                     }
                                     else {
-                                        videoRef.play();
+                                        video.play();
                                     }
                                 } })))] }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .video-wrapper-${item.id} {

package/lib/sdk-nextjs/utils/usePrelaodAssets.d.ts

@@ -1 +1,4 @@
-export declare function usePreloadAssets(assets: string[]): void;
+export declare function usePreloadAssets(assets: {
+    url: string;
+    id: string;
+}[]): void;

package/lib/sdk-nextjs/utils/usePrelaodAssets.js

@@ -14,10 +14,10 @@ function isImageAsset(url) {
 }
 function usePreloadAssets(assets) {
     (0, react_1.useEffect)(() => {
-        assets.forEach(asset => {
-            if (isVideoAsset(asset)) {
+        assets.forEach(({ url, id }) => {
+            if (isVideoAsset(url)) {
                 const video = document.createElement('video');
-                video.src = asset;
+                video.src = url;
                 video.preload = 'auto';
                 video.style.display = 'none';
                 document.body.appendChild(video);
@@ -29,9 +29,9 @@ function usePreloadAssets(assets) {
                     }, 1000);
                 });
             }
-            if (isImageAsset(asset)) {
+            if (isImageAsset(url)) {
                 const img = new Image();
-                img.src = asset;
+                img.src = url;
             }
         });
     }, [assets]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxpl/sdk",
-  "version": "0.0.36-0",
+  "version": "0.0.37",
   "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 {};