@gxpl/sdk 0.0.35 → 0.0.36

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

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