@cntrl-site/sdk-nextjs 1.9.27-1 → 1.9.28

package/src/utils/effects/useVideoFx.ts

@@ -1,158 +1,158 @@
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { MediaEffect, VideoTextureManager } from '@cntrl-site/effects';
-import { rangeMap } from '../rangeMap';
-import { WebglContextManagerContext } from '../../provider/WebGLContextManagerContext';
-
-interface FxParams {
-  videoUrl?: string;
-  fragmentShader: string | null;
-  controls?: Record<string, number | [number, number]>;
-}
-
-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
-  }: FxParams,
-  width: number,
-  height: number
-): boolean {
-  const [isFXAllowed, setIsFXAllowed] = useState(true);
-  const [isReady, setIsReady] = useState(false);
-  const active = enabled && isReady;
-  const webGLContextManager = useContext(WebglContextManagerContext);
-  const glRef = useRef<WebGL2RenderingContext | null>(null);
-  const isRenderingRef = useRef(false);
-  const frameRef = useRef<number>();
-  const videoTextureManager = useMemo(() => {
-    if (!videoUrl || !enabled) return;
-    const handlePlayError = () => {
-      setIsFXAllowed(false);
-    };
-    return new VideoTextureManager(videoUrl, handlePlayError);
-  }, [videoUrl, enabled]);
-  const videoFx = useMemo<MediaEffect | undefined>(() => {
-    if (!videoTextureManager) return;
-    return new MediaEffect(
-      videoTextureManager,
-      PATTERN_URL,
-      PATTERN_2_URL,
-      fragmentShader!,
-      {
-        time: 0,
-        cursor: [0, 0],
-        ...controls
-      },
-      width,
-      height
-    );
-  }, [videoTextureManager, fragmentShader, width, height]);
-
-  useEffect(() => {
-    if (!videoTextureManager) return;
-    videoTextureManager.onReadyStatusChange(setIsReady);
-  }, [videoTextureManager]);
-
-  useEffect(() => {
-    if (!canvas || !videoFx) return;
-    const handleMouseMove = (evt: MouseEvent) => {
-      const rect = canvas.getBoundingClientRect();
-      const x = rangeMap(evt.clientX, rect.left, rect.left + rect.width, 0, 1, true);
-      const y = 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]);
-
-  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 {
-          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;
-}
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { MediaEffect, VideoTextureManager } from '@cntrl-site/effects';
+import { rangeMap } from '../rangeMap';
+import { WebglContextManagerContext } from '../../provider/WebGLContextManagerContext';
+
+interface FxParams {
+  videoUrl?: string;
+  fragmentShader: string | null;
+  controls?: Record<string, number | [number, number]>;
+}
+
+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
+  }: FxParams,
+  width: number,
+  height: number
+): boolean {
+  const [isFXAllowed, setIsFXAllowed] = useState(true);
+  const [isReady, setIsReady] = useState(false);
+  const active = enabled && isReady;
+  const webGLContextManager = useContext(WebglContextManagerContext);
+  const glRef = useRef<WebGL2RenderingContext | null>(null);
+  const isRenderingRef = useRef(false);
+  const frameRef = useRef<number>();
+  const videoTextureManager = useMemo(() => {
+    if (!videoUrl || !enabled) return;
+    const handlePlayError = () => {
+      setIsFXAllowed(false);
+    };
+    return new VideoTextureManager(videoUrl, handlePlayError);
+  }, [videoUrl, enabled]);
+  const videoFx = useMemo<MediaEffect | undefined>(() => {
+    if (!videoTextureManager) return;
+    return new MediaEffect(
+      videoTextureManager,
+      PATTERN_URL,
+      PATTERN_2_URL,
+      fragmentShader!,
+      {
+        time: 0,
+        cursor: [0, 0],
+        ...controls
+      },
+      width,
+      height
+    );
+  }, [videoTextureManager, fragmentShader, width, height]);
+
+  useEffect(() => {
+    if (!videoTextureManager) return;
+    videoTextureManager.onReadyStatusChange(setIsReady);
+  }, [videoTextureManager]);
+
+  useEffect(() => {
+    if (!canvas || !videoFx) return;
+    const handleMouseMove = (evt: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = rangeMap(evt.clientX, rect.left, rect.left + rect.width, 0, 1, true);
+      const y = 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]);
+
+  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 {
+          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/src/utils/getAnchoredItemTop.ts

@@ -1,12 +1,12 @@
-import { AnchorSide } from '@cntrl-site/sdk';
-
-export function getAnchoredItemTop(top: number, sectionHeight: string, anchorSide?: AnchorSide) {
-  const styleTop = `${top * 100}vw`;
-  switch (anchorSide) {
-    case AnchorSide.Center: return `calc(${styleTop} + ${sectionHeight} / 2)`;
-    case AnchorSide.Bottom: return `calc(${styleTop} + ${sectionHeight})`;
-    case AnchorSide.Top:
-    default:
-      return styleTop;
-  }
-}
+import { AnchorSide } from '@cntrl-site/sdk';
+
+export function getAnchoredItemTop(top: number, sectionHeight: string, anchorSide?: AnchorSide) {
+  const styleTop = `${top * 100}vw`;
+  switch (anchorSide) {
+    case AnchorSide.Center: return `calc(${styleTop} + ${sectionHeight} / 2)`;
+    case AnchorSide.Bottom: return `calc(${styleTop} + ${sectionHeight})`;
+    case AnchorSide.Top:
+    default:
+      return styleTop;
+  }
+}

package/src/utils/getCompoundBoundaryStyles.ts

@@ -1,60 +1,60 @@
-import { AreaAnchor, DimensionMode } from '@cntrl-site/sdk';
-
-const positionMatrix: Record<AreaAnchor, [number, number]> = {
-  [AreaAnchor.TopLeft]: [0, 0],
-  [AreaAnchor.TopCenter]: [0, 0.5],
-  [AreaAnchor.TopRight]: [0, 1],
-  [AreaAnchor.MiddleLeft]: [0.5, 0],
-  [AreaAnchor.MiddleCenter]: [0.5, 0.5],
-  [AreaAnchor.MiddleRight]: [0.5, 1],
-  [AreaAnchor.BottomLeft]: [1, 0],
-  [AreaAnchor.BottomCenter]: [1, 0.5],
-  [AreaAnchor.BottomRight]: [1, 1]
-};
-
-export function getCompoundHeight(compoundSettings: CompoundSettings | undefined, height: number | undefined) {
-  if (height === undefined || !compoundSettings) return;
-  if (compoundSettings.heightMode === 'relative') {
-    return `${height * 100}%`;
-  }
-  return `${height * 100}vw`;
-}
-
-export function getCompoundWidth(compoundSettings: CompoundSettings | undefined, width: number | undefined, isRichText: boolean, exemplary?: number) {
-  if (width === undefined || !compoundSettings) return;
-  if (compoundSettings.widthMode === 'relative') {
-    return `${width * 100}%`;
-  }
-  return isRichText && exemplary ? `${width * exemplary}px` : `${width * 100}vw`;
-}
-
-export function getCompoundTop(compoundSettings: CompoundSettings | undefined, top: number | undefined) {
-  if (top === undefined || !compoundSettings) return;
-  if (compoundSettings.heightMode === 'relative') {
-    return `${top * 100}%`;
-  }
-  const [ky] = positionMatrix[compoundSettings.positionAnchor];
-  return `calc(${ky * 100}% + ${top * 100}vw)`;
-}
-
-export function getCompoundLeft(compoundSettings: CompoundSettings | undefined, left: number | undefined) {
-  if (left === undefined || !compoundSettings) return;
-  if (compoundSettings.widthMode === 'relative') {
-    return `${left * 100}%`;
-  }
-  const [_, kx] = positionMatrix[compoundSettings.positionAnchor];
-  return `calc(${kx * 100}% + ${left * 100}vw)`;
-}
-
-export function getCompoundTransform(compoundSettings: CompoundSettings | undefined) {
-  if (!compoundSettings) return 'unset';
-  const areaAnchor = compoundSettings.positionAnchor as AreaAnchor;
-  const [ky, kx] = positionMatrix[areaAnchor];
-  return `translate(${kx * (-100)}%, ${ky * (-100)}%)`;
-}
-
-type CompoundSettings = {
-  positionAnchor: AreaAnchor;
-  widthMode: DimensionMode;
-  heightMode: DimensionMode;
-};
+import { AreaAnchor, DimensionMode } from '@cntrl-site/sdk';
+
+const positionMatrix: Record<AreaAnchor, [number, number]> = {
+  [AreaAnchor.TopLeft]: [0, 0],
+  [AreaAnchor.TopCenter]: [0, 0.5],
+  [AreaAnchor.TopRight]: [0, 1],
+  [AreaAnchor.MiddleLeft]: [0.5, 0],
+  [AreaAnchor.MiddleCenter]: [0.5, 0.5],
+  [AreaAnchor.MiddleRight]: [0.5, 1],
+  [AreaAnchor.BottomLeft]: [1, 0],
+  [AreaAnchor.BottomCenter]: [1, 0.5],
+  [AreaAnchor.BottomRight]: [1, 1]
+};
+
+export function getCompoundHeight(compoundSettings: CompoundSettings | undefined, height: number | undefined) {
+  if (height === undefined || !compoundSettings) return;
+  if (compoundSettings.heightMode === 'relative') {
+    return `${height * 100}%`;
+  }
+  return `${height * 100}vw`;
+}
+
+export function getCompoundWidth(compoundSettings: CompoundSettings | undefined, width: number | undefined, isRichText: boolean, exemplary?: number) {
+  if (width === undefined || !compoundSettings) return;
+  if (compoundSettings.widthMode === 'relative') {
+    return `${width * 100}%`;
+  }
+  return isRichText && exemplary ? `${width * exemplary}px` : `${width * 100}vw`;
+}
+
+export function getCompoundTop(compoundSettings: CompoundSettings | undefined, top: number | undefined) {
+  if (top === undefined || !compoundSettings) return;
+  if (compoundSettings.heightMode === 'relative') {
+    return `${top * 100}%`;
+  }
+  const [ky] = positionMatrix[compoundSettings.positionAnchor];
+  return `calc(${ky * 100}% + ${top * 100}vw)`;
+}
+
+export function getCompoundLeft(compoundSettings: CompoundSettings | undefined, left: number | undefined) {
+  if (left === undefined || !compoundSettings) return;
+  if (compoundSettings.widthMode === 'relative') {
+    return `${left * 100}%`;
+  }
+  const [_, kx] = positionMatrix[compoundSettings.positionAnchor];
+  return `calc(${kx * 100}% + ${left * 100}vw)`;
+}
+
+export function getCompoundTransform(compoundSettings: CompoundSettings | undefined) {
+  if (!compoundSettings) return 'unset';
+  const areaAnchor = compoundSettings.positionAnchor as AreaAnchor;
+  const [ky, kx] = positionMatrix[areaAnchor];
+  return `translate(${kx * (-100)}%, ${ky * (-100)}%)`;
+}
+
+type CompoundSettings = {
+  positionAnchor: AreaAnchor;
+  widthMode: DimensionMode;
+  heightMode: DimensionMode;
+};

package/src/utils/getFill.ts

@@ -1,46 +1,46 @@
-import { FillLayer } from '@cntrl-site/sdk';
-
-export function getFill(fill: FillLayer) {
-  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 = (fill.angle ?? 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';
-}
+import { FillLayer } from '@cntrl-site/sdk';
+
+export function getFill(fill: FillLayer) {
+  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 = (fill.angle ?? 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/src/utils/getFontFamilyValue.ts

@@ -1,3 +1,3 @@
-export function getFontFamilyValue(value: string | undefined) {
-  return value && value.includes('"') ? value : `"${value}"`;
-}
+export function getFontFamilyValue(value: string | undefined) {
+  return value && value.includes('"') ? value : `"${value}"`;
+}

package/src/utils/getInvertedRanges.ts

@@ -1,43 +1,43 @@
-interface Range {
-  start: number;
-  end: number;
-}
-
-/**
- * @param length
- * @param ranges - SORTED array of ranges [start, end)
- */
-
-export function getInvertedRanges(length: number, ranges: Range[]): Range[] {
-  if (ranges.length === 0) {
-    return [{
-      start: 0,
-      end: length
-    }];
-  }
-  const inverted: Range[] = [];
-  if (ranges[0].start > 0) {
-    inverted.push({
-      start: 0,
-      end: ranges[0].start
-    });
-  }
-  for (let i = 0; i < ranges.length - 1; i += 1) {
-    const left = ranges[i];
-    const right = ranges[i + 1];
-    if (right.start - left.end > 0) {
-      inverted.push({
-        start: left.end,
-        end: right.start
-      });
-    }
-  }
-  const lastRange = ranges[ranges.length - 1];
-  if (lastRange.end < length) {
-    inverted.push({
-      start: lastRange.end,
-      end: length
-    });
-  }
-  return inverted;
-}
+interface Range {
+  start: number;
+  end: number;
+}
+
+/**
+ * @param length
+ * @param ranges - SORTED array of ranges [start, end)
+ */
+
+export function getInvertedRanges(length: number, ranges: Range[]): Range[] {
+  if (ranges.length === 0) {
+    return [{
+      start: 0,
+      end: length
+    }];
+  }
+  const inverted: Range[] = [];
+  if (ranges[0].start > 0) {
+    inverted.push({
+      start: 0,
+      end: ranges[0].start
+    });
+  }
+  for (let i = 0; i < ranges.length - 1; i += 1) {
+    const left = ranges[i];
+    const right = ranges[i + 1];
+    if (right.start - left.end > 0) {
+      inverted.push({
+        start: left.end,
+        end: right.start
+      });
+    }
+  }
+  const lastRange = ranges[ranges.length - 1];
+  if (lastRange.end < length) {
+    inverted.push({
+      start: lastRange.end,
+      end: length
+    });
+  }
+  return inverted;
+}