@gxpl/sdk 0.0.6 → 0.0.8

package/lib/sdk-nextjs/utils/effects/useVideoFx.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVideoFx = useVideoFx;
+const react_1 = require("react");
+const effects_1 = require("@cntrl-site/effects");
+const rangeMap_1 = require("../rangeMap");
+const WebGLContextManagerContext_1 = require("../../provider/WebGLContextManagerContext");
+const PATTERN_URL = 'https://cdn.cntrl.site/client-app-files/texture2.png';
+const PATTERN_2_URL = 'https://cdn.cntrl.site/client-app-files/bayer16.png';
+function useVideoFx(canvas, enabled, { videoUrl, fragmentShader, controls }, width, height) {
+    const [isFXAllowed, setIsFXAllowed] = (0, react_1.useState)(true);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const active = enabled && isReady;
+    const webGLContextManager = (0, react_1.useContext)(WebGLContextManagerContext_1.WebglContextManagerContext);
+    const glRef = (0, react_1.useRef)(null);
+    const isRenderingRef = (0, react_1.useRef)(false);
+    const frameRef = (0, react_1.useRef)();
+    const videoTextureManager = (0, react_1.useMemo)(() => {
+        if (!videoUrl || !enabled)
+            return;
+        const handlePlayError = () => {
+            setIsFXAllowed(false);
+        };
+        return new effects_1.VideoTextureManager(videoUrl, handlePlayError);
+    }, [videoUrl, enabled]);
+    const videoFx = (0, react_1.useMemo)(() => {
+        if (!videoTextureManager)
+            return;
+        return new effects_1.MediaEffect(videoTextureManager, PATTERN_URL, PATTERN_2_URL, fragmentShader, Object.assign({ time: 0, cursor: [0, 0] }, controls), width, height);
+    }, [videoTextureManager, fragmentShader, width, height]);
+    (0, react_1.useEffect)(() => {
+        if (!videoTextureManager)
+            return;
+        videoTextureManager.onReadyStatusChange(setIsReady);
+    }, [videoTextureManager]);
+    (0, react_1.useEffect)(() => {
+        if (!canvas || !videoFx)
+            return;
+        const handleMouseMove = (evt) => {
+            const rect = canvas.getBoundingClientRect();
+            const x = (0, rangeMap_1.rangeMap)(evt.clientX, rect.left, rect.left + rect.width, 0, 1, true);
+            const y = (0, rangeMap_1.rangeMap)(evt.clientY, rect.top, rect.top + rect.height, 0, 1, true);
+            videoFx.setParam('cursor', [x, y]);
+        };
+        window.addEventListener('mousemove', handleMouseMove, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+        };
+    }, [canvas, videoFx]);
+    (0, react_1.useEffect)(() => {
+        if (!active || !canvas || !videoFx)
+            return;
+        let time = 0;
+        const startRendering = () => {
+            if (isRenderingRef.current)
+                return;
+            const gl = webGLContextManager.getContext(canvas);
+            if (!gl) {
+                return;
+            }
+            glRef.current = gl;
+            isRenderingRef.current = true;
+            videoFx.prepare(gl);
+            const renderFrame = () => {
+                if (!isRenderingRef.current || !glRef.current)
+                    return;
+                time += 0.1;
+                webGLContextManager.updateContextSize(glRef.current, canvas.width, canvas.height);
+                videoFx.setViewport(Math.floor(canvas.width), Math.floor(canvas.height));
+                videoFx.setParam('time', time);
+                try {
+                    videoFx.render(glRef.current);
+                }
+                catch (_a) {
+                    setIsFXAllowed(false);
+                }
+                webGLContextManager.renderToCanvas(glRef.current, canvas);
+                frameRef.current = requestAnimationFrame(renderFrame);
+            };
+            frameRef.current = requestAnimationFrame(renderFrame);
+        };
+        const stopRendering = () => {
+            if (!isRenderingRef.current)
+                return;
+            if (frameRef.current) {
+                cancelAnimationFrame(frameRef.current);
+                frameRef.current = undefined;
+            }
+            if (glRef.current) {
+                webGLContextManager.releaseContext(canvas);
+                glRef.current = null;
+            }
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            }
+            isRenderingRef.current = false;
+        };
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                startRendering();
+            }
+            else {
+                stopRendering();
+            }
+        }, {
+            threshold: 0,
+            rootMargin: '75px'
+        });
+        observer.observe(canvas);
+        return () => {
+            stopRendering();
+            observer.disconnect();
+        };
+    }, [canvas, videoFx, active]);
+    return isFXAllowed;
+}

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAnchoredItemTop = getAnchoredItemTop;
+const ItemArea_1 = require("../../sdk/types/article/ItemArea");
+function getAnchoredItemTop(top, sectionHeight, anchorSide) {
+    const styleTop = `${top * 100}vw`;
+    switch (anchorSide) {
+        case ItemArea_1.AnchorSide.Center: return `calc(${styleTop} + ${sectionHeight} / 2)`;
+        case ItemArea_1.AnchorSide.Bottom: return `calc(${styleTop} + ${sectionHeight})`;
+        case ItemArea_1.AnchorSide.Top:
+        default:
+            return styleTop;
+    }
+}

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompoundHeight = getCompoundHeight;
+exports.getCompoundWidth = getCompoundWidth;
+exports.getCompoundTop = getCompoundTop;
+exports.getCompoundLeft = getCompoundLeft;
+exports.getCompoundTransform = getCompoundTransform;
+const ItemArea_1 = require("../../sdk/types/article/ItemArea");
+const positionMatrix = {
+    [ItemArea_1.AreaAnchor.TopLeft]: [0, 0],
+    [ItemArea_1.AreaAnchor.TopCenter]: [0, 0.5],
+    [ItemArea_1.AreaAnchor.TopRight]: [0, 1],
+    [ItemArea_1.AreaAnchor.MiddleLeft]: [0.5, 0],
+    [ItemArea_1.AreaAnchor.MiddleCenter]: [0.5, 0.5],
+    [ItemArea_1.AreaAnchor.MiddleRight]: [0.5, 1],
+    [ItemArea_1.AreaAnchor.BottomLeft]: [1, 0],
+    [ItemArea_1.AreaAnchor.BottomCenter]: [1, 0.5],
+    [ItemArea_1.AreaAnchor.BottomRight]: [1, 1]
+};
+function getCompoundHeight(compoundSettings, height) {
+    if (height === undefined || !compoundSettings)
+        return;
+    if (compoundSettings.heightMode === 'relative') {
+        return `${height * 100}%`;
+    }
+    return `${height * 100}vw`;
+}
+function getCompoundWidth(compoundSettings, width, isRichText, exemplary) {
+    if (width === undefined || !compoundSettings)
+        return;
+    if (compoundSettings.widthMode === 'relative') {
+        return `${width * 100}%`;
+    }
+    return isRichText && exemplary ? `${width * exemplary}px` : `${width * 100}vw`;
+}
+function getCompoundTop(compoundSettings, top) {
+    if (top === undefined || !compoundSettings)
+        return;
+    if (compoundSettings.heightMode === 'relative') {
+        return `${top * 100}%`;
+    }
+    const [ky] = positionMatrix[compoundSettings.positionAnchor];
+    return `calc(${ky * 100}% + ${top * 100}vw)`;
+}
+function getCompoundLeft(compoundSettings, left) {
+    if (left === undefined || !compoundSettings)
+        return;
+    if (compoundSettings.widthMode === 'relative') {
+        return `${left * 100}%`;
+    }
+    const [_, kx] = positionMatrix[compoundSettings.positionAnchor];
+    return `calc(${kx * 100}% + ${left * 100}vw)`;
+}
+function getCompoundTransform(compoundSettings) {
+    if (!compoundSettings)
+        return 'unset';
+    const areaAnchor = compoundSettings.positionAnchor;
+    const [ky, kx] = positionMatrix[areaAnchor];
+    return `translate(${kx * (-100)}%, ${ky * (-100)}%)`;
+}

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFill = getFill;
+function getFill(fill) {
+    var _a;
+    if (fill.type === 'linear-gradient' && Array.isArray(fill.colors)) {
+        return `linear-gradient(${fill.angle}deg, ${fill.colors
+            .map(c => `${c.value} ${c.position}%`)
+            .join(', ')})`;
+    }
+    if (fill.type === 'radial-gradient' && Array.isArray(fill.colors)) {
+        const center = fill.center
+            ? `${fill.center[0] * 100}% ${fill.center[1] * 100}%`
+            : '50% 50%';
+        const diameter = fill.diameter;
+        return `radial-gradient(circle ${diameter * 100} at ${center}, ${fill.colors
+            .map(c => `${c.value} ${c.position}%`)
+            .join(', ')})`;
+    }
+    if (fill.type === 'conic-gradient' && Array.isArray(fill.colors)) {
+        const center = fill.center
+            ? `${fill.center[0] * 100}% ${fill.center[1] * 100}%`
+            : '50% 50%';
+        const angle = ((_a = fill.angle) !== null && _a !== void 0 ? _a : 0);
+        const hasMultipleStops = fill.colors.length > 1;
+        const lastStop = fill.colors[fill.colors.length - 1];
+        const shouldAppendWrapStop = hasMultipleStops && typeof lastStop.position === 'number' && lastStop.position < 100;
+        const colorsWithWrap = shouldAppendWrapStop
+            ? [...fill.colors, { value: fill.colors[0].value, position: 100 }]
+            : fill.colors;
+        return `conic-gradient(from ${angle + 90}deg at ${center}, ${colorsWithWrap
+            .map(c => `${c.value} ${c.position}%`)
+            .join(', ')})`;
+    }
+    if (fill.type === 'image' && fill.src) {
+        return `url(${fill.src})`;
+    }
+    if (fill.type === 'solid') {
+        return fill.value;
+    }
+    return 'transparent';
+}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFontFamilyValue = getFontFamilyValue;
+function getFontFamilyValue(value) {
+    return value && value.includes('"') ? value : `"${value}"`;
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getItemTopStyle = getItemTopStyle;
+const ItemArea_1 = require("../../sdk/types/article/ItemArea");
+function getItemTopStyle(top, anchorSide) {
+    const defaultValue = `${top * 100}vw`;
+    if (!anchorSide)
+        return defaultValue;
+    switch (anchorSide) {
+        case ItemArea_1.AnchorSide.Top:
+            return defaultValue;
+        case ItemArea_1.AnchorSide.Center:
+            return `calc(50% + ${top * 100}vw)`;
+        case ItemArea_1.AnchorSide.Bottom:
+            return `calc(100% + ${top * 100}vw)`;
+    }
+}

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyleFromItemStateAndParams = getStyleFromItemStateAndParams;
+function getStyleFromItemStateAndParams(stateValue, paramsValue) {
+    return stateValue !== undefined
+        ? stateValue
+        : paramsValue;
+}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getYoutubeId = getYoutubeId;
+var Allowed;
+(function (Allowed) {
+    Allowed["Tiny"] = "youtu.be";
+    Allowed["Full"] = "www.youtube.com";
+})(Allowed || (Allowed = {}));
+function getYoutubeId({ hostname, pathname, search }) {
+    if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
+        throw new Error(`Cannot get valid YouTube ID from "${hostname}" - address is not whitelisted`);
+    }
+    switch (hostname) {
+        case Allowed.Tiny:
+            return pathname.replace('/', '');
+        case Allowed.Full:
+            if (pathname.startsWith('/shorts/')) {
+                const shortsId = pathname.split('/shorts/')[1];
+                if (!shortsId) {
+                    throw new Error('Cannot get valid YouTube Shorts ID from the pathname.');
+                }
+                return shortsId;
+            }
+            else {
+                const searchParams = new URLSearchParams(search);
+                const id = searchParams.get('v');
+                if (!id) {
+                    throw new Error('Cannot get valid YouTube ID from search params.');
+                }
+                return id;
+            }
+    }
+}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isItemType = isItemType;
+function isItemType(item, itemType) {
+    return item.type === itemType;
+}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rangeMap = rangeMap;
+function rangeMap(n, start1, stop1, start2, stop2, withinBounds = false) {
+    const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+    if (withinBounds && n < start1)
+        return start2;
+    if (withinBounds && n > stop1)
+        return stop2;
+    return mapped;
+}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementRect = useElementRect;
+const react_1 = require("react");
+function useElementRect(element) {
+    const [rect, setRect] = (0, react_1.useState)(() => element === null || element === void 0 ? void 0 : element.getBoundingClientRect());
+    (0, react_1.useEffect)(() => {
+        if (!element)
+            return;
+        const observer = new ResizeObserver(entries => {
+            const el = entries.find(entry => entry.target === element);
+            if (!el) {
+                throw new Error('Element is not found in observed entries');
+            }
+            setRect(el.target.getBoundingClientRect());
+        });
+        observer.observe(element);
+        return () => {
+            observer.unobserve(element);
+            observer.disconnect();
+        };
+    }, [element]);
+    return rect;
+}

package/lib/utils.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLayoutStyles = getLayoutStyles;
+exports.getLayoutMediaQuery = getLayoutMediaQuery;
+function getLayoutStyles(layouts, layoutValues, mapToStyles) {
+    const mediaQueries = layouts
+        .sort((a, b) => a.startsWith - b.startsWith)
+        .reduce((acc, layout) => {
+        const values = layoutValues.map(lv => lv[layout.id]);
+        return `
+        ${acc}
+        ${layout.startsWith !== 0
+            ? `@media (min-width: ${layout.startsWith}px) {${mapToStyles(values, layout.exemplary)}}`
+            : `${mapToStyles(values, layout.exemplary)}`}`;
+    }, '');
+    return mediaQueries;
+}
+function getLayoutMediaQuery(layoutId, layouts) {
+    const sorted = layouts.slice().sort((a, b) => a.startsWith - b.startsWith);
+    const layoutIndex = sorted.findIndex(l => l.id === layoutId);
+    if (layoutIndex === -1) {
+        throw new Error(`No layout was found by the given id #${layoutId}`);
+    }
+    const current = sorted[layoutIndex];
+    const next = sorted[layoutIndex + 1];
+    if (!next) {
+        return `@media (min-width: ${current.startsWith}px)`;
+    }
+    return `@media (min-width: ${current.startsWith}px) and (max-width: ${next.startsWith - 1}px)`;
+}

package/package.json

@@ -1,36 +1,20 @@
 {
   "name": "@gxpl/sdk",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Generic SDK for use in public websites.",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "style": "dist/sdk.css",
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./style/sdk.css": {
-      "default": "./dist/sdk.css"
-    }
-  },
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
     "test": "jest",
-    "dev": "vite development",
-    "prebuild": "rimraf ./dist",
-    "build": "vite build && tsc --project tsconfig.build.json",
+    "prebuild": "rimraf ./lib",
+    "build": "tsc --project tsconfig.build.json",
     "prepublishOnly": "cross-env NODE_ENV=production npm run build"
   },
   "bin": {
-    "gxpl-sdk": "dist/cli.js"
+    "gxpl-sdk": "lib/cli.js"
   },
   "files": [
-    "dist",
+    "lib",
     "resources"
   ],
   "repository": {
@@ -44,17 +28,21 @@
   },
   "homepage": "https://github.com/genesisxplatform/sdk#readme",
   "directories": {
-    "lib": "dist"
+    "lib": "lib"
+  },
+  "peerDependencies": {
+    "next": "^14.2.33"
   },
   "dependencies": {
     "@antfu/eslint-config": "^3.16.0",
     "@cntrl-site/color": "^1.0.0",
+    "@cntrl-site/components": "^0.0.2",
     "@cntrl-site/effects": "^1.4.0",
-    "@splidejs/react-splide": "^0.7.12",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@types/ejs": "^3.1.2",
     "@types/isomorphic-fetch": "^0.0.36",
+    "@types/lodash.isequal": "^4.5.8",
     "@types/ua-parser-js": "^0.7.39",
     "@types/vimeo__player": "^2.18.3",
     "@vimeo/player": "^2.25.0",
@@ -64,7 +52,9 @@
     "ejs": "^3.1.9",
     "html-react-parser": "^3.0.1",
     "isomorphic-fetch": "^3.0.0",
+    "lodash.isequal": "^4.5.0",
     "mp4box": "^0.5.2",
+    "next": "^14.2.33",
     "resize-observer-polyfill": "^1.5.1",
     "styled-jsx": "^5.0.2",
     "ts-node": "^10.9.1",
@@ -83,8 +73,6 @@
     "cross-env": "^10.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "rimraf": "^6.0.1",
     "sass": "^1.86.3",
     "ts-jest": "^29.0.3",