@gxpl/sdk 0.0.36 → 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/assets/AssetsCacheProvider.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetsCacheProvider = exports.AssetsCacheContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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(({ url, id }) => {
+            if (isVideoAsset(url)) {
+                const video = getVideo(url);
+                setVideoCache(prev => prev.set((0, getCacheAssetKey_1.getCacheAssetKey)(url, id), video));
+            }
+            if (isImageAsset(url)) {
+                const img = new Image();
+                img.src = url;
+                setImageCache(prev => prev.set((0, getCacheAssetKey_1.getCacheAssetKey)(url, id), img));
+            }
+        });
+    }, [assets]);
+    return (0, jsx_runtime_1.jsx)(exports.AssetsCacheContext.Provider, { value: { videoCache, imageCache }, children: children });
+};
+exports.AssetsCacheProvider = AssetsCacheProvider;
+function getVideo(url) {
+    const video = document.createElement('video');
+    video.src = url;
+    video.preload = 'auto';
+    video.playsInline = true;
+    video.load();
+    return video;
+}
+function isVideoAsset(url) {
+    const videoExtensions = ['.mp4', '.mov', '.webm'];
+    const lowerUrl = url.toLowerCase();
+    return videoExtensions.some(ext => lowerUrl.endsWith(ext));
+}
+function isImageAsset(url) {
+    const imageExtensions = ['.gif', '.png', '.jpg', '.jpeg', '.webp', '.avif', '.svg'];
+    const lowerUrl = url.toLowerCase();
+    return imageExtensions.some(ext => lowerUrl.endsWith(ext));
+}

package/lib/sdk-nextjs/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,9 +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 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);
@@ -20,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)(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] }));
+                    }, 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/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,11 +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 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 [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);
@@ -24,22 +30,39 @@ 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 (!video || play !== 'on-click')
+        if (!video)
             return;
-        const observer = new IntersectionObserver(([entry]) => {
-            if (userPaused || !isClickedOnCover)
-                return;
-            if (entry.isIntersecting) {
-                video.play();
-            }
-            else {
-                video.pause();
-            }
-        });
-        observer.observe(container);
-        return () => observer.disconnect();
-    }, [container, play, userPaused, isClickedOnCover]);
+        const onPlay = () => {
+            setIsPlaying(true);
+        };
+        const onPause = () => {
+            setIsPlaying(false);
+        };
+        video.addEventListener('play', onPlay);
+        video.addEventListener('pause', onPause);
+        return () => {
+            video.removeEventListener('play', onPlay);
+            video.removeEventListener('pause', onPause);
+        };
+    }, [video]);
     (0, react_1.useEffect)(() => {
         if (!video || !videoWrapper)
             return;
@@ -55,37 +78,49 @@ const SectionVideo = ({ container, sectionId, media }) => {
             }
         });
     }, [video, videoWrapper]);
-    const isContainHeight = size === 'contain-height';
-    const hasOffsetX = offsetX !== null && size === 'contain';
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { ref: setVideoWrapper, className: `section-video-wrapper-${sectionId}`, style: {
+    (0, react_1.useEffect)(() => {
+        if (!video || play !== 'on-click')
+            return;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (userPaused || !isClickedOnCover)
+                return;
+            if (entry.isIntersecting) {
+                video.play();
+            }
+            else {
+                video.pause();
+            }
+        });
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [container, play, userPaused, isClickedOnCover]);
+    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',
                 width: '100%'
-            }, children: [(0, jsx_runtime_1.jsx)("video", { ref: setVideo, autoPlay: play === 'auto', loop: true, style: {
-                        opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
-                        objectFit: isContainHeight ? 'cover' : (size !== null && size !== void 0 ? size : 'cover'),
-                        width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
-                        transform: isContainHeight ? 'translateX(-50%)' : 'none',
-                        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%',
-                        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'
-                        } })) }))] }) }));
+            }, 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, ref: setCoverImageWrapper })) }) }));
 };
 exports.SectionVideo = SectionVideo;

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

@@ -17,14 +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 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)(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);
@@ -62,12 +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]);
-    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: `
+    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,17 +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 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, _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, 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 [ref, setRef] = (0, react_1.useState)(null);
-    const [videoRef, setVideoRef] = (0, react_1.useState)(null);
+    const [videoWrapper, setVideoWrapper] = (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);
@@ -38,7 +45,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const width = area && exemplary ? area.width * exemplary : 0;
     const height = area && exemplary ? area.height * exemplary : 0;
     const { controlsValues, fragmentShader } = (0, useItemFXData_1.useItemFXData)(item, sectionId);
-    const rect = (0, useElementRect_1.useElementRect)(ref);
+    const rect = (0, useElementRect_1.useElementRect)(videoWrapper);
     const rectWidth = Math.floor((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
     const rectHeight = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0);
     const scrollPlayback = params.scrollPlayback;
@@ -62,42 +69,92 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         fragmentShader,
         controls: controlsValues
     }, width, height);
-    (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    const inlineStyles = Object.assign(Object.assign({ borderRadius: `${radius * 100}vw` }, (strokeWidth !== undefined ? {
+    (0, useRegisterResize_1.useRegisterResize)(videoWrapper, onResize);
+    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;
+    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;
+        setIsVideoInteracted(true);
+        video.play();
+    }, [video, params]);
+    const onCoverClick = (0, react_1.useCallback)(() => {
+        if (!video)
+            return;
+        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)(() => {
-        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
-    }, [isInteractive, onVisibilityChange]);
+        if (!video || !videoCache.has(url))
+            return;
+        const onPlay = () => {
+            setIsVideoPlaying(true);
+            setUserPaused(false);
+        };
+        const onPause = () => {
+            if (!isScrollPausedRef.current) {
+                setUserPaused(true);
+            }
+            setIsVideoPlaying(false);
+        };
+        const onMouseEnter = () => {
+            if (!video || params.play !== 'on-hover')
+                return;
+            video.play();
+        };
+        const onMouseLeave = () => {
+            if (!video || params.play !== 'on-hover')
+                return;
+            video.pause();
+        };
+        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 (!videoRef || params.play !== 'on-click' || !ref)
+        if (!params || !video || params.play !== 'on-click' || !videoWrapper)
             return;
         const observer = new IntersectionObserver(([entry]) => {
             if (userPaused || !isVideoInteracted)
                 return;
             if (entry.isIntersecting) {
                 isScrollPausedRef.current = false;
-                videoRef.play();
+                video.play();
             }
             else {
                 isScrollPausedRef.current = true;
-                videoRef.pause();
+                video.pause();
             }
         });
-        observer.observe(ref);
+        observer.observe(videoWrapper);
         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: {
+    }, [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)`,
+                    transform: `rotate(${angle}deg) translateZ(0)`,
                     filter: `blur(${blur * 100}vw)`,
                     willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
                     transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none'
-                }, children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.params.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_p = item.params.coverUrl) !== null && _p !== void 0 ? _p : '', ref: setVideoRef, autoPlay: params.play === 'auto', preload: "auto", onClick: () => {
+                }, 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);
@@ -108,32 +165,32 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
                                     }
                                     setIsVideoPlaying(false);
                                 }, onMouseEnter: () => {
-                                    if (!videoRef || params.play !== 'on-hover')
+                                    if (!video || params.play !== 'on-hover')
                                         return;
-                                    videoRef.play();
+                                    video.play();
                                 }, onMouseLeave: () => {
-                                    if (!videoRef || params.play !== 'on-hover')
+                                    if (!video || 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')
+                                    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();
+                                    video.play();
                                 }, src: (_q = item.params.coverUrl) !== null && _q !== void 0 ? _q : '', className: `video-cover-${item.id}`, onClick: () => {
-                                    if (!videoRef)
+                                    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",
+  "version": "0.0.37",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",