@cntrl-site/sdk-nextjs 1.8.13 → 1.8.15

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -61,13 +61,13 @@ class RichTextConverter {
                 const kids = [];
                 layouts.forEach(l => {
                     const ta = richText.layoutParams[l.id].textAlign;
-                    styleRules[l.id].push(`
-            .${blockClass} {
-              display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
-              text-align: ${ta};
-              white-space: pre-wrap;
-              overflow-wrap: break-word;
-            }
+                    styleRules[l.id].push(`
+            .${blockClass} {
+              display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
+              text-align: ${ta};
+              white-space: pre-wrap;
+              overflow-wrap: break-word;
+            }
           `);
                 });
                 const item = group[0];
@@ -111,18 +111,18 @@ class RichTextConverter {
                             if (lineHeight === null || lineHeight === void 0 ? void 0 : lineHeight.value) {
                                 currentLineHeight[item.layout] = lineHeight.value;
                             }
-                            styleRules[item.layout].push(`
-                .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
-                }
+                            styleRules[item.layout].push(`
+                .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
+                }
               `);
                             if (color) {
-                                styleRules[item.layout].push(`
-                @supports not (color: oklch(42% 0.3 90 / 1)) {
-                  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                    color: ${color_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
-                  }
-                }
+                                styleRules[item.layout].push(`
+                @supports not (color: oklch(42% 0.3 90 / 1)) {
+                  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                    color: ${color_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
+                  }
+                }
               `);
                             }
                         }
@@ -131,10 +131,10 @@ class RichTextConverter {
                 root.push((0, jsx_runtime_1.jsx)("div", { className: blockClass, children: kids }, blockClass));
             }
         }
-        const styles = layouts.map(l => `
-      ${(0, sdk_1.getLayoutMediaQuery)(l.id, layouts)} {
-        ${styleRules[l.id].join('\n')}
-      }
+        const styles = layouts.map(l => `
+      ${(0, sdk_1.getLayoutMediaQuery)(l.id, layouts)} {
+        ${styleRules[l.id].join('\n')}
+      }
     `).join('\n');
         return [
             root,

package/lib/utils/effects/useImageFx.js

@@ -4,10 +4,15 @@ exports.useImageFx = void 0;
 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 useImageFx(canvas, enabled, { imageUrl, fragmentShader, controlsValues }, width, height) {
+    const webGLContextManager = (0, react_1.useContext)(WebGLContextManagerContext_1.WebglContextManagerContext);
     const [isFXAllowed, setIsFXAllowed] = (0, react_1.useState)(true);
+    const glRef = (0, react_1.useRef)(null);
+    const isRenderingRef = (0, react_1.useRef)(false);
+    const frameRef = (0, react_1.useRef)();
     const imageTextureManager = (0, react_1.useMemo)(() => {
         if (!imageUrl || !enabled)
             return;
@@ -40,46 +45,68 @@ function useImageFx(canvas, enabled, { imageUrl, fragmentShader, controlsValues
         };
     }, [canvas, imageFx]);
     (0, react_1.useEffect)(() => {
-        const gl = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('webgl2');
-        if (!enabled || !canvas || !gl || !imageFx)
+        if (!enabled || !canvas || !imageFx)
             return;
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        let running = false;
         let time = 0;
-        let frame;
-        const renderFrame = () => {
-            time += 0.1;
-            imageFx.setViewport(Math.floor(canvas.width), Math.floor(canvas.height));
-            imageFx.setParam('time', time);
-            try {
-                imageFx.render(gl);
+        const startRendering = () => {
+            if (isRenderingRef.current)
+                return;
+            const gl = webGLContextManager.getContext(canvas);
+            if (!gl) {
+                return;
+            }
+            glRef.current = gl;
+            isRenderingRef.current = true;
+            imageFx.prepare(gl);
+            const renderFrame = () => {
+                if (!isRenderingRef.current || !glRef.current)
+                    return;
+                time += 0.1;
+                webGLContextManager.updateContextSize(glRef.current, canvas.width, canvas.height);
+                imageFx.setViewport(Math.floor(canvas.width), Math.floor(canvas.height));
+                imageFx.setParam('time', time);
+                try {
+                    imageFx.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;
             }
-            catch (_a) {
-                setIsFXAllowed(false);
+            if (glRef.current) {
+                webGLContextManager.releaseContext(canvas);
+                glRef.current = null;
             }
-            frame = requestAnimationFrame(renderFrame);
+            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 && !running) {
-                frame = requestAnimationFrame(renderFrame);
-                running = true;
-                return;
+            if (entry.isIntersecting) {
+                startRendering();
             }
-            if (!entry.isIntersecting && running) {
-                window.cancelAnimationFrame(frame);
-                running = false;
+            else {
+                stopRendering();
             }
+        }, {
+            threshold: 0.1,
+            rootMargin: '50px'
         });
         observer.observe(canvas);
-        try {
-            imageFx.prepare(gl);
-        }
-        catch (_a) {
-            setIsFXAllowed(false);
-        }
         return () => {
-            window.cancelAnimationFrame(frame);
+            stopRendering();
             observer.disconnect();
         };
     }, [canvas, imageFx, enabled]);

package/lib/utils/effects/useVideoFx.js

@@ -4,12 +4,17 @@ exports.useVideoFx = void 0;
 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;
@@ -43,46 +48,68 @@ function useVideoFx(canvas, enabled, { videoUrl, fragmentShader, controls }, wid
         };
     }, [canvas, videoFx]);
     (0, react_1.useEffect)(() => {
-        const gl = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('webgl2');
-        if (!active || !canvas || !gl || !videoFx)
+        if (!active || !canvas || !videoFx)
             return;
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        let running = false;
         let time = 0;
-        let frame;
-        const renderFrame = () => {
-            time += 0.1;
-            videoFx.setViewport(Math.floor(canvas.width), Math.floor(canvas.height));
-            videoFx.setParam('time', time);
-            try {
-                videoFx.render(gl);
+        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;
             }
-            catch (_a) {
-                setIsFXAllowed(false);
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
             }
-            frame = requestAnimationFrame(renderFrame);
+            isRenderingRef.current = false;
         };
         const observer = new IntersectionObserver(([entry]) => {
-            if (entry.isIntersecting && !running) {
-                frame = requestAnimationFrame(renderFrame);
-                running = true;
-                return;
+            if (entry.isIntersecting) {
+                startRendering();
             }
-            if (!entry.isIntersecting && running) {
-                window.cancelAnimationFrame(frame);
-                running = false;
+            else {
+                stopRendering();
             }
+        }, {
+            threshold: 0.1,
+            rootMargin: '50px'
         });
         observer.observe(canvas);
-        try {
-            videoFx.prepare(gl);
-        }
-        catch (_a) {
-            setIsFXAllowed(false);
-        }
         return () => {
-            window.cancelAnimationFrame(frame);
+            stopRendering();
             observer.disconnect();
         };
     }, [canvas, videoFx, active]);

package/package.json

@@ -1,57 +1,57 @@
-{
-  "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.8.13",
-  "description": "SDK for Next.js",
-  "author": "arsen@momdesign.nyc",
-  "license": "MIT",
-  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cntrl-site/sdk-nextjs.git"
-  },
-  "bugs": {
-    "url": "https://github.com/cntrl-site/sdk-nextjs/issues"
-  },
-  "main": "lib/index.js",
-  "types": "src/index.ts",
-  "scripts": {
-    "test": "jest",
-    "prebuild": "rm -rf ./lib",
-    "build": "tsc --project tsconfig.build.json",
-    "prepublishOnly": "NODE_ENV=production npm run build"
-  },
-  "peerDependencies": {
-    "@types/lodash.isequal": "^4.5.6",
-    "lodash.isequal": "^4.5.0",
-    "next": "^14.2.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "dependencies": {
-    "@antfu/eslint-config": "^3.8.0",
-    "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/effects": "^1.3.2",
-    "@cntrl-site/sdk": "^1.22.15",
-    "@types/vimeo__player": "^2.18.0",
-    "@vimeo/player": "^2.25.0",
-    "html-react-parser": "^3.0.1",
-    "resize-observer-polyfill": "^1.5.1",
-    "styled-jsx": "^5.0.2"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
-    "@tsconfig/node16": "^1.0.3",
-    "@tsconfig/recommended": "^1.0.1",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^18.11.7",
-    "@types/react": "^18.0.15",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "ts-jest": "^29.0.3",
-    "typescript": "^5.2.2"
-  },
-  "directories": {
-    "lib": "lib"
-  }
-}
+{
+  "name": "@cntrl-site/sdk-nextjs",
+  "version": "1.8.15",
+  "description": "SDK for Next.js",
+  "author": "arsen@momdesign.nyc",
+  "license": "MIT",
+  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cntrl-site/sdk-nextjs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cntrl-site/sdk-nextjs/issues"
+  },
+  "main": "lib/index.js",
+  "types": "src/index.ts",
+  "scripts": {
+    "test": "jest",
+    "prebuild": "rm -rf ./lib",
+    "build": "tsc --project tsconfig.build.json",
+    "prepublishOnly": "set NODE_ENV=production && npm run build"
+  },
+  "peerDependencies": {
+    "@types/lodash.isequal": "^4.5.6",
+    "lodash.isequal": "^4.5.0",
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@antfu/eslint-config": "^3.8.0",
+    "@cntrl-site/color": "^1.0.0",
+    "@cntrl-site/effects": "^1.4.0",
+    "@cntrl-site/sdk": "^1.22.15",
+    "@types/vimeo__player": "^2.18.0",
+    "@vimeo/player": "^2.25.0",
+    "html-react-parser": "^3.0.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "styled-jsx": "^5.0.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@tsconfig/node16": "^1.0.3",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.15",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.0.3",
+    "typescript": "^5.2.2"
+  },
+  "directories": {
+    "lib": "lib"
+  }
+}

package/src/common/useCurrentLayout.ts

@@ -1,52 +1,52 @@
-import { useCntrlContext } from '../provider/useCntrlContext';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { ArticleRectContext } from '../provider/ArticleRectContext';
-
-interface LayoutData {
-  layoutId: string;
-  exemplary: number;
-  start: number;
-  end: number;
-}
-
-type UseCurrentLayoutReturn = {
-  layoutId: string | undefined;
-  layoutDeviation: number;
-};
-
-export function useCurrentLayout(): UseCurrentLayoutReturn {
-  const { layouts } = useCntrlContext();
-  const articleRectObserver = useContext(ArticleRectContext);
-  const layoutRanges = useMemo(() => {
-    const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
-    return sorted.reduce<LayoutData[]>((acc, layout, i, layouts) => {
-      const next = layouts[i + 1];
-      return [
-        ...acc,
-        {
-          layoutId: layout.id,
-          exemplary: layout.exemplary,
-          start: layout.startsWith,
-          end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
-        }
-      ];
-    }, []);
-  }, [layouts]);
-  const getCurrentLayout = useCallback((articleWidth: number) => {
-    const range = layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end);
-    return range;
-  }, [layoutRanges]);
-  const [layoutId, setLayoutId] = useState<string | undefined>(undefined);
-  const [deviation, setDeviation] = useState(1);
-  useEffect(() => {
-    if (!articleRectObserver) return;
-    return articleRectObserver.on('resize', () => {
-      const articleWidth = articleRectObserver.width;
-      const { layoutId, exemplary } = getCurrentLayout(articleWidth)!;
-      setLayoutId(layoutId);
-      setDeviation(articleWidth / exemplary);
-    });
-  }, [articleRectObserver, getCurrentLayout]);
-
-  return { layoutId, layoutDeviation: deviation };
-}
+import { useCntrlContext } from '../provider/useCntrlContext';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+
+interface LayoutData {
+  layoutId: string;
+  exemplary: number;
+  start: number;
+  end: number;
+}
+
+type UseCurrentLayoutReturn = {
+  layoutId: string | undefined;
+  layoutDeviation: number;
+};
+
+export function useCurrentLayout(): UseCurrentLayoutReturn {
+  const { layouts } = useCntrlContext();
+  const articleRectObserver = useContext(ArticleRectContext);
+  const layoutRanges = useMemo(() => {
+    const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
+    return sorted.reduce<LayoutData[]>((acc, layout, i, layouts) => {
+      const next = layouts[i + 1];
+      return [
+        ...acc,
+        {
+          layoutId: layout.id,
+          exemplary: layout.exemplary,
+          start: layout.startsWith,
+          end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
+        }
+      ];
+    }, []);
+  }, [layouts]);
+  const getCurrentLayout = useCallback((articleWidth: number) => {
+    const range = layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end);
+    return range;
+  }, [layoutRanges]);
+  const [layoutId, setLayoutId] = useState<string | undefined>(undefined);
+  const [deviation, setDeviation] = useState(1);
+  useEffect(() => {
+    if (!articleRectObserver) return;
+    return articleRectObserver.on('resize', () => {
+      const articleWidth = articleRectObserver.width;
+      const { layoutId, exemplary } = getCurrentLayout(articleWidth)!;
+      setLayoutId(layoutId);
+      setDeviation(articleWidth / exemplary);
+    });
+  }, [articleRectObserver, getCurrentLayout]);
+
+  return { layoutId, layoutDeviation: deviation };
+}

package/src/common/useExemplary.ts

@@ -1,9 +1,9 @@
-import { useCntrlContext } from "../provider/useCntrlContext";
-import { useLayoutContext } from "../components/useLayoutContext";
-
-export const useExemplary = () => {
-  const { layouts } = useCntrlContext();
-  const layout = useLayoutContext();
-  const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
-  return exemplary;
-};
+import { useCntrlContext } from "../provider/useCntrlContext";
+import { useLayoutContext } from "../components/useLayoutContext";
+
+export const useExemplary = () => {
+  const { layouts } = useCntrlContext();
+  const layout = useLayoutContext();
+  const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
+  return exemplary;
+};

package/src/common/useItemFXData.ts

@@ -1,47 +1,47 @@
-import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
-import { useKeyframeValue } from './useKeyframeValue';
-
-const baseVariables = `precision mediump float;
-uniform sampler2D u_image;
-uniform sampler2D u_pattern;
-uniform vec2 u_imgDimensions;
-uniform vec2 u_patternDimensions;
-uniform float u_time;
-uniform vec2 u_cursor;
-varying vec2 v_texCoord;`;
-
-export function useItemFXData(item: ImageItem | VideoItem, sectionId: string): FXData {
-  const { fragmentShader: shaderBody, FXControls } = item.commonParams;
-  const controls = FXControls ?? [];
-  const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
-    .join('\n');
-  const fragmentShader = `${baseVariables}\n${controlsVariables}\n${shaderBody}`;
-  const controlsValues = useKeyframeValue(
-    item,
-    KeyframeType.FXParams,
-    () => {
-      const defaultValue = controls.reduce<Record<string, ControlValue>>((acc, control) => {
-        if (Array.isArray(control.value)) {
-          acc[control.shaderParam] = control.value[0];
-        } else {
-          acc[control.shaderParam] = control.value;
-        }
-        return acc;
-      }, {});
-      return defaultValue;
-    },
-    (animator, scroll, value) => animator.getFXParams(value, scroll),
-    sectionId,
-  );
-  return {
-    fragmentShader,
-    controlsValues
-  };
-}
-
-type FXData = {
-  fragmentShader: string;
-  controlsValues: Record<string, ControlValue>;
-}
-
-type ControlValue = number;
+import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
+import { useKeyframeValue } from './useKeyframeValue';
+
+const baseVariables = `precision mediump float;
+uniform sampler2D u_image;
+uniform sampler2D u_pattern;
+uniform vec2 u_imgDimensions;
+uniform vec2 u_patternDimensions;
+uniform float u_time;
+uniform vec2 u_cursor;
+varying vec2 v_texCoord;`;
+
+export function useItemFXData(item: ImageItem | VideoItem, sectionId: string): FXData {
+  const { fragmentShader: shaderBody, FXControls } = item.commonParams;
+  const controls = FXControls ?? [];
+  const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
+    .join('\n');
+  const fragmentShader = `${baseVariables}\n${controlsVariables}\n${shaderBody}`;
+  const controlsValues = useKeyframeValue(
+    item,
+    KeyframeType.FXParams,
+    () => {
+      const defaultValue = controls.reduce<Record<string, ControlValue>>((acc, control) => {
+        if (Array.isArray(control.value)) {
+          acc[control.shaderParam] = control.value[0];
+        } else {
+          acc[control.shaderParam] = control.value;
+        }
+        return acc;
+      }, {});
+      return defaultValue;
+    },
+    (animator, scroll, value) => animator.getFXParams(value, scroll),
+    sectionId,
+  );
+  return {
+    fragmentShader,
+    controlsValues
+  };
+}
+
+type FXData = {
+  fragmentShader: string;
+  controlsValues: Record<string, ControlValue>;
+}
+
+type ControlValue = number;