@gxpl/sdk 0.0.28 → 0.0.30

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

@@ -401,6 +401,7 @@ export declare const ProjectSchema: z.ZodObject<{
         google: string;
         adobe: string;
     }>;
+    scenesAssets: z.ZodArray<z.ZodString, "many">;
     relations: z.ZodArray<z.ZodObject<{
         from: z.ZodString;
         to: z.ZodString;
@@ -1038,6 +1039,7 @@ export declare const ProjectSchema: z.ZodObject<{
         google: string;
         adobe: string;
     };
+    scenesAssets: string[];
     relations: {
         type: "slide" | "fade";
         direction: "north" | "east" | "south" | "west";
@@ -1185,6 +1187,7 @@ export declare const ProjectSchema: z.ZodObject<{
         google: string;
         adobe: string;
     };
+    scenesAssets: string[];
     relations: {
         type: "slide" | "fade";
         direction: "north" | "east" | "south" | "west";

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

@@ -59,6 +59,7 @@ exports.ProjectSchema = zod_1.z.object({
             }))
         }))
     }),
+    scenesAssets: zod_1.z.array(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,6 +16,7 @@ export interface Project {
     pages: Page[];
     fonts: Fonts;
     relations: Relation[];
+    scenesAssets: string[];
     foreground: TFixedLayer;
     background: TFixedLayer;
 }

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

@@ -18,8 +18,8 @@ const effects_1 = require("@cntrl-site/effects");
 const KeyframesContext_1 = require("../provider/KeyframesContext");
 const Keyframes_1 = require("../provider/Keyframes");
 const Article = ({ article, styles, keyframes }) => {
-    const articleRef = (0, react_1.useRef)(null);
-    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
+    const sceneRef = (0, react_1.useRef)(null);
+    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(sceneRef.current);
     const id = (0, react_1.useId)();
     const [articleHeight, setArticleHeight] = (0, react_1.useState)(1);
     const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
@@ -31,10 +31,10 @@ const Article = ({ article, styles, keyframes }) => {
         });
     }, [articleRectObserver]);
     const webglContextManager = (0, react_1.useMemo)(() => new effects_1.WebGLContextManager(), []);
-    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Scene_1.Scene, { id: article.id, styles: styles, children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
-                                    const data = {};
-                                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
-                                }) }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Scene_1.Scene, { id: article.id, styles: styles, elRef: sceneRef, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
+                                const data = {};
+                                return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
+                            }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
          position: relative;
          overflow: clip;

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

@@ -10,13 +10,15 @@ 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 Page = ({ project, articlesData }) => {
     var _a, _b;
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
     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 } = project;
+    const { relations, scenesAssets } = project;
+    (0, usePrelaodAssets_1.usePreloadAssets)(scenesAssets);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project }), afterBodyOpen, (0, jsx_runtime_1.jsxs)(TransitionMachineContext_1.TransitionMachineContext.Provider, { options: {
                     input: {
                         startScene,

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

@@ -1,6 +1,7 @@
 import { FC, PropsWithChildren } from 'react';
 interface Props {
     id: string;
+    elRef: React.RefObject<HTMLDivElement>;
     styles: {
         x: number;
         y: number;

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

@@ -5,11 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const useLayoutDeviation_1 = require("../common/useLayoutDeviation");
 const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
-const Scene = ({ children, id, styles: sceneStyles }) => {
+const Scene = ({ children, id, styles: sceneStyles, elRef }) => {
     var _a;
     const { layoutDeviation } = (0, useLayoutDeviation_1.useLayoutDeviation)();
     const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
-    const sceneRef = (0, react_1.useRef)(null);
     const actorRef = TransitionMachineContext_1.TransitionMachineContext.useActorRef();
     const { isControlledTransitioning, isSettling, isInstantTransitioning } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => ({
         isControlledTransitioning: state.matches('transitioning'),
@@ -42,7 +41,7 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
         const touch = e.touches[0];
         const { context } = actorRef.getSnapshot();
         const { transition, transitionReady } = context;
-        const el = sceneRef.current;
+        const el = elRef.current;
         if (!el || !transition || !('startX' in transition) || !('startY' in transition))
             return;
         const deltaX = touch.clientX - transition.startX;
@@ -85,7 +84,7 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
         });
     }, [actorRef]);
     (0, react_1.useEffect)(() => {
-        const el = sceneRef.current;
+        const el = elRef.current;
         if (!el)
             return;
         el.addEventListener('touchstart', handleTouchStart, { passive: true });
@@ -98,7 +97,7 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
         };
     }, [handleTouchStart, handleTouchMove, handleTouchEnd]);
     (0, react_1.useEffect)(() => {
-        const el = sceneRef.current;
+        const el = elRef.current;
         if (!isSettling || !el)
             return;
         const handleTransitionEnd = (e) => {
@@ -121,7 +120,7 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
         };
     }, [actorRef, isSettling]);
     (0, react_1.useEffect)(() => {
-        const scene = sceneRef.current;
+        const scene = elRef.current;
         if (!isTransitioning || isTransitioningRef.current || !scene)
             return;
         isTransitioningRef.current = true;
@@ -136,7 +135,7 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
     }, [isTransitioning, actorRef, id]);
     const isFixed = isControlledTransitioning || isSettling || isInstantTransitioning;
     const transitionStyle = type === 'slide' ? 'transform' : 'opacity';
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: sceneRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: sceneStyles && (sceneStyles.x !== 0 || sceneStyles.y !== 0) ? `translate(${sceneStyles.x}px, ${sceneStyles.y}px)` : 'none', transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1, 'WebkitOverflowScrolling': 'touch' // prevent glitch on Safari (fast scroll to top/bottom sides)
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: elRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: sceneStyles && (sceneStyles.x !== 0 || sceneStyles.y !== 0) ? `translate(${sceneStyles.x}px, ${sceneStyles.y}px)` : 'none', transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1, 'WebkitOverflowScrolling': 'touch' // prevent glitch on Safari (fast scroll to top/bottom sides)
              }), children: children }) }));
 };
 exports.Scene = Scene;

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

@@ -59,7 +59,7 @@ exports.Section = Section;
 function getSectionHeight(heightData) {
     const { units, vhUnits, mode } = heightData;
     if (mode === Section_1.SectionHeightMode.ViewportHeightUnits)
-        return `${vhUnits}vh`;
+        return `${vhUnits}%`;
     if (mode === Section_1.SectionHeightMode.ControlUnits)
         return `${units * 100}vw`;
     return '0';

package/lib/sdk-nextjs/utils/ArticleRectManager/ArticleRectObserver.js

@@ -43,17 +43,13 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
     }
     init(parent) {
         this.parent = parent;
-        const scrollableParent = parent.parentElement;
         const parentBoundary = parent.getBoundingClientRect();
-        if (!scrollableParent) {
-            throw new Error('Scrollable parent not found');
-        }
         const articleWidth = parentBoundary.width;
         this.articleWidth = articleWidth;
         this.previousParentWidth = articleWidth;
-        this.setScroll(scrollableParent.scrollTop / articleWidth);
+        this.setScroll(parent.scrollTop / articleWidth);
         const onScroll = () => {
-            this.handleScroll(scrollableParent.scrollTop);
+            this.handleScroll(parent.scrollTop);
             if (!isNaN(this.animationFrame))
                 return;
             this.animationFrame = window.requestAnimationFrame(() => {
@@ -61,7 +57,7 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
                 this.emit('scroll', undefined);
             });
         };
-        scrollableParent.addEventListener('scroll', onScroll);
+        parent.addEventListener('scroll', onScroll);
         for (const sectionId of this.registry.keys()) {
             const el = this.registry.get(sectionId);
             if (!el)
@@ -75,7 +71,7 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
             this.parent = undefined;
             this.isInitialized = false;
             this.previousParentWidth = null;
-            scrollableParent.removeEventListener('scroll', onScroll);
+            parent.removeEventListener('scroll', onScroll);
             if (!isNaN(this.animationFrame)) {
                 window.cancelAnimationFrame(this.animationFrame);
                 this.animationFrame = NaN;

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

@@ -0,0 +1 @@
+export declare function usePreloadAssets(assets: string[]): void;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePreloadAssets = usePreloadAssets;
+const react_1 = require("react");
+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));
+}
+function usePreloadAssets(assets) {
+    (0, react_1.useEffect)(() => {
+        assets.forEach(asset => {
+            if (isVideoAsset(asset)) {
+                const video = document.createElement('video');
+                video.src = asset;
+                video.preload = 'auto';
+                video.style.display = 'none';
+                document.body.appendChild(video);
+                video.addEventListener('loadeddata', () => {
+                    setTimeout(() => {
+                        if (video.parentNode) {
+                            video.parentNode.removeChild(video);
+                        }
+                    }, 1000);
+                });
+            }
+            if (isImageAsset(asset)) {
+                const img = new Image();
+                img.src = asset;
+            }
+        });
+    }, [assets]);
+}

package/package.json

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