@cntrl-site/sdk-nextjs 1.9.58 → 1.9.60

package/lib/common/useItemFXData.js

@@ -3,20 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useItemFXData = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("./useKeyframeValue");
+const react_1 = require("react");
 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;`;
 function useItemFXData(item, sectionId) {
-    const { fragmentShader: shaderBody, FXControls } = item.commonParams;
+    const { fragmentShader: shaderBody, FXControls, FXTextures } = item.commonParams;
     const controls = FXControls !== null && FXControls !== void 0 ? FXControls : [];
+    const texturesUrls = (0, react_1.useMemo)(() => (FXTextures !== null && FXTextures !== void 0 ? FXTextures : []), [FXTextures]);
     const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
         .join('\n');
-    const fragmentShader = `${baseVariables}\n${controlsVariables}\n${shaderBody}`;
+    const patternsVariables = texturesUrls
+        .map((_, i) => `uniform sampler2D ${mediaEffectPatternUniformNames(i).tex};\nuniform vec2 ${mediaEffectPatternUniformNames(i).dim};`)
+        .join('\n');
+    const fragmentShader = `${baseVariables}\n${controlsVariables}\n${patternsVariables}\n${shaderBody}`;
     const controlsValues = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.FXParams, () => {
         const defaultValue = controls.reduce((acc, control) => {
             if (Array.isArray(control.value)) {
@@ -31,7 +34,15 @@ function useItemFXData(item, sectionId) {
     }, (animator, scroll, value) => animator.getFXParams(value, scroll), sectionId);
     return {
         fragmentShader,
-        controlsValues
+        controlsValues,
+        texturesUrls
     };
 }
 exports.useItemFXData = useItemFXData;
+function mediaEffectPatternUniformNames(slotIndex) {
+    if (slotIndex === 0) {
+        return { tex: 'u_pattern', dim: 'u_patternDimensions' };
+    }
+    const n = slotIndex + 1;
+    return { tex: `u_pattern${n}`, dim: `u_pattern${n}Dimensions` };
+}

package/lib/components/items/FileItem/ImageItem.js

@@ -35,7 +35,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const fxCanvas = (0, react_1.useRef)(null);
     const isInitialRef = (0, react_1.useRef)(true);
     const layoutValues = [item.area, item.layoutParams];
-    const { controlsValues, fragmentShader } = (0, useItemFXData_1.useItemFXData)(item, sectionId);
+    const { controlsValues, fragmentShader, texturesUrls } = (0, useItemFXData_1.useItemFXData)(item, sectionId);
     const area = layoutId ? item.area[layoutId] : null;
     const exemplary = (_a = layouts === null || layouts === void 0 ? void 0 : layouts.find(l => l.id === layoutId)) === null || _a === void 0 ? void 0 : _a.exemplary;
     const width = area && exemplary ? area.width * exemplary : 0;
@@ -48,7 +48,8 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const isFXAllowed = (0, useImageFx_1.useImageFx)(fxCanvas.current, !!(hasGLEffect && !isInitialRef.current), {
         imageUrl: url,
         fragmentShader,
-        controlsValues
+        controlsValues,
+        texturesUrls
     }, width, height);
     const rect = (0, useElementRect_1.useElementRect)(wrapperRef);
     const rectWidth = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0);

package/lib/components/items/FileItem/VideoItem.js

@@ -43,7 +43,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const exemplary = (_a = layouts === null || layouts === void 0 ? void 0 : layouts.find(l => l.id === layoutId)) === null || _a === void 0 ? void 0 : _a.exemplary;
     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 { controlsValues, fragmentShader, texturesUrls } = (0, useItemFXData_1.useItemFXData)(item, sectionId);
     const rect = (0, useElementRect_1.useElementRect)(ref);
     const rectWidth = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0);
     const rectHeight = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0);
@@ -68,7 +68,8 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const isFXAllowed = (0, useVideoFx_1.useVideoFx)(fxCanvas.current, !!(hasGLEffect && !isInitialRef.current), {
         videoUrl: url,
         fragmentShader,
-        controls: controlsValues
+        controls: controlsValues,
+        texturesUrls
     }, width, height);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     (0, useItemGeometry_1.useItemGeometry)(item.id, ref);

package/lib/utils/effects/useImageFx.js

@@ -5,9 +5,7 @@ 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) {
+function useImageFx(canvas, enabled, { imageUrl, fragmentShader, controlsValues, texturesUrls }, 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);
@@ -21,8 +19,8 @@ function useImageFx(canvas, enabled, { imageUrl, fragmentShader, controlsValues
     const imageFx = (0, react_1.useMemo)(() => {
         if (!imageTextureManager)
             return;
-        return new effects_1.MediaEffect(imageTextureManager, PATTERN_URL, PATTERN_2_URL, fragmentShader, Object.assign({ time: 0, cursor: [0, 0] }, controlsValues), width, height);
-    }, [imageTextureManager, fragmentShader, width, height]);
+        return new effects_1.MediaEffect(imageTextureManager, texturesUrls, fragmentShader, Object.assign({ time: 0, cursor: [0, 0] }, controlsValues), width, height);
+    }, [imageTextureManager, fragmentShader, width, height, texturesUrls]);
     (0, react_1.useEffect)(() => {
         if (!imageFx || !controlsValues)
             return;

package/lib/utils/effects/useVideoFx.js

@@ -5,9 +5,7 @@ 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) {
+function useVideoFx(canvas, enabled, { videoUrl, fragmentShader, controls, texturesUrls }, width, height) {
     const [isFXAllowed, setIsFXAllowed] = (0, react_1.useState)(true);
     const [isReady, setIsReady] = (0, react_1.useState)(false);
     const active = enabled && isReady;
@@ -26,8 +24,8 @@ function useVideoFx(canvas, enabled, { videoUrl, fragmentShader, controls }, wid
     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]);
+        return new effects_1.MediaEffect(videoTextureManager, texturesUrls, fragmentShader, Object.assign({ time: 0, cursor: [0, 0] }, controls), width, height);
+    }, [videoTextureManager, fragmentShader, width, height, texturesUrls]);
     (0, react_1.useEffect)(() => {
         if (!videoTextureManager)
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.58",
+  "version": "1.9.60",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -32,8 +32,8 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/components": "^1.0.5",
-    "@cntrl-site/effects": "^1.4.0",
-    "@cntrl-site/sdk": "^1.26.2",
+    "@cntrl-site/effects": "^1.4.2",
+    "@cntrl-site/sdk": "^1.26.3",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/common/useItemFXData.ts

@@ -1,21 +1,24 @@
 import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from './useKeyframeValue';
+import { useMemo } from 'react';
 
 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 { fragmentShader: shaderBody, FXControls, FXTextures } = item.commonParams;
   const controls = FXControls ?? [];
+  const texturesUrls: string[] = useMemo(() => (FXTextures ?? []), [FXTextures]);
   const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
     .join('\n');
-  const fragmentShader = `${baseVariables}\n${controlsVariables}\n${shaderBody}`;
+  const patternsVariables = texturesUrls
+    .map((_, i) => `uniform sampler2D ${mediaEffectPatternUniformNames(i).tex};\nuniform vec2 ${mediaEffectPatternUniformNames(i).dim};`)
+    .join('\n');
+  const fragmentShader = `${baseVariables}\n${controlsVariables}\n${patternsVariables}\n${shaderBody}`;
   const controlsValues = useKeyframeValue(
     item,
     KeyframeType.FXParams,
@@ -35,13 +38,26 @@ export function useItemFXData(item: ImageItem | VideoItem, sectionId: string): F
   );
   return {
     fragmentShader,
-    controlsValues
+    controlsValues,
+    texturesUrls
   };
 }
 
+function mediaEffectPatternUniformNames(slotIndex: number): {
+  tex: string;
+  dim: string;
+} {
+  if (slotIndex === 0) {
+    return { tex: 'u_pattern', dim: 'u_patternDimensions' };
+  }
+  const n = slotIndex + 1;
+  return { tex: `u_pattern${n}`, dim: `u_pattern${n}Dimensions` };
+}
+
 type FXData = {
   fragmentShader: string;
   controlsValues: Record<string, ControlValue>;
+  texturesUrls: string[];
 }
 
 type ControlValue = number;

package/src/components/items/FileItem/ImageItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useId, useRef, useState } from 'react';
+import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { getLayoutStyles, ImageItem as TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
@@ -34,9 +34,8 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const { url, hasGLEffect } = item.commonParams;
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
   const isInitialRef = useRef(true);
-
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const { controlsValues, fragmentShader } = useItemFXData(item, sectionId);
+  const { controlsValues, fragmentShader, texturesUrls } = useItemFXData(item, sectionId);
   const area = layoutId ? item.area[layoutId] : null;
   const exemplary = layouts?.find(l => l.id === layoutId)?.exemplary;
   const width = area && exemplary ? area.width * exemplary : 0;
@@ -52,7 +51,8 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     {
       imageUrl: url,
       fragmentShader,
-      controlsValues
+      controlsValues,
+      texturesUrls
     },
     width,
     height

package/src/components/items/FileItem/VideoItem.tsx

@@ -43,7 +43,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const exemplary = layouts?.find(l => l.id === layoutId)?.exemplary;
   const width = area && exemplary ? area.width * exemplary : 0;
   const height = area && exemplary ? area.height * exemplary : 0;
-  const { controlsValues, fragmentShader } = useItemFXData(item, sectionId);
+  const { controlsValues, fragmentShader, texturesUrls } = useItemFXData(item, sectionId);
   const rect = useElementRect(ref);
   const rectWidth = Math.floor(rect?.width ?? 0);
   const rectHeight = Math.floor(rect?.height ?? 0);
@@ -71,7 +71,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
     {
       videoUrl: url,
       fragmentShader,
-      controls: controlsValues
+      controls: controlsValues,
+      texturesUrls
     },
     width,
     height

package/src/utils/effects/useImageFx.ts

@@ -7,18 +7,17 @@ interface FxParams {
   imageUrl?: string;
   fragmentShader: string | null;
   controlsValues?: Record<string, number | [number, number]>;
+  texturesUrls: string[];
 }
 
-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';
-
 export function useImageFx(
   canvas: HTMLCanvasElement | null | undefined,
   enabled: boolean,
   {
     imageUrl,
     fragmentShader,
-    controlsValues
+    controlsValues,
+    texturesUrls
   }: FxParams,
   width: number,
   height: number
@@ -36,8 +35,7 @@ export function useImageFx(
     if (!imageTextureManager) return;
     return new MediaEffect(
       imageTextureManager,
-      PATTERN_URL,
-      PATTERN_2_URL,
+      texturesUrls,
       fragmentShader!,
       {
         time: 0,
@@ -47,7 +45,7 @@ export function useImageFx(
       width,
       height
     );
-  }, [imageTextureManager, fragmentShader, width, height]);
+  }, [imageTextureManager, fragmentShader, width, height, texturesUrls]);
 
   useEffect(() => {
     if (!imageFx || !controlsValues) return;

package/src/utils/effects/useVideoFx.ts

@@ -7,18 +7,17 @@ interface FxParams {
   videoUrl?: string;
   fragmentShader: string | null;
   controls?: Record<string, number | [number, number]>;
+  texturesUrls: string[];
 }
 
-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';
-
 export function useVideoFx(
   canvas: HTMLCanvasElement | null | undefined,
   enabled: boolean,
   {
     videoUrl,
     fragmentShader,
-    controls
+    controls,
+    texturesUrls
   }: FxParams,
   width: number,
   height: number
@@ -41,8 +40,7 @@ export function useVideoFx(
     if (!videoTextureManager) return;
     return new MediaEffect(
       videoTextureManager,
-      PATTERN_URL,
-      PATTERN_2_URL,
+      texturesUrls,
       fragmentShader!,
       {
         time: 0,
@@ -52,7 +50,7 @@ export function useVideoFx(
       width,
       height
     );
-  }, [videoTextureManager, fragmentShader, width, height]);
+  }, [videoTextureManager, fragmentShader, width, height, texturesUrls]);
 
   useEffect(() => {
     if (!videoTextureManager) return;

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/sdk-nextjs.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>