@cntrl-site/sdk-nextjs 1.6.12 → 1.6.14

package/src/components/Section/Section.tsx

@@ -1,77 +1,164 @@
-import { FC, ReactElement, useId, useRef } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import {
-  getLayoutMediaQuery,
-  getLayoutStyles,
-  Section as TSection,
-  SectionHeight,
-  SectionHeightMode
-} from '@cntrl-site/sdk';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useSectionRegistry } from '../../utils/ArticleRectManager/useSectionRegistry';
-import { CntrlColor } from '@cntrl-site/color';
-
-type SectionChild = ReactElement<any, any>;
-const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-
-interface Props {
-  section: TSection;
-  children: SectionChild[];
-  data?: any;
-}
-
-export const Section: FC<Props> = ({ section, data, children }) => {
-  const id = useId();
-  const sectionRef = useRef<HTMLDivElement | null>(null);
-  const { layouts, customSections } = useCntrlContext();
-  const layoutValues: Record<string, any>[] = [section.height, section.color];
-  const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
-  useSectionRegistry(section.id, sectionRef.current);
-  const getSectionVisibilityStyles = () => {
-    return layouts
-      .sort((a, b) => a.startsWith - b.startsWith)
-      .reduce((acc, layout) => {
-        const isHidden = section.hidden[layout.id];
-        return `
-          ${acc}
-          ${getLayoutMediaQuery(layout.id, layouts)} {
-            .section-${section.id} {
-              display: ${isHidden ? 'none': 'block'};
-            }
-          }`;
-      }, '');
-  };
-
-  if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
-
- return (
-    <>
-      <div
-        className={`section-${section.id}`}
-        id={section.name}
-        ref={sectionRef}
-      >
-        {children}
-      </div>
-      <JSXStyle id={id}>{`
-      ${
-        getLayoutStyles(layouts, layoutValues, ([height, color]) => (`
-         .section-${section.id} {
-            height: ${getSectionHeight(height)};
-            position: relative;
-            background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
-         }`
-        ))
-      }
-      ${getSectionVisibilityStyles()}
-    `}</JSXStyle>
-    </>
-  );
-};
-
-export function getSectionHeight(heightData: SectionHeight): string {
-  const { units, vhUnits, mode } = heightData;
-  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
-  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
-  return '0';
-}
+import { FC, ReactElement, useEffect, useId, useRef, useState, useContext } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import {
+  getLayoutMediaQuery,
+  getLayoutStyles,
+  Section as TSection,
+  SectionHeight,
+  SectionHeightMode
+} from '@cntrl-site/sdk';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useSectionRegistry } from '../../utils/ArticleRectManager/useSectionRegistry';
+import { CntrlColor } from '@cntrl-site/color';
+import { useLayoutContext } from '../useLayoutContext';
+
+type SectionChild = ReactElement<any, any>;
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
+
+interface Props {
+  section: TSection;
+  children: SectionChild[];
+  data?: any;
+}
+
+function isVideoUrl(url: string): boolean {
+  const videoExtensions = ['.mp4', '.webm', '.ogg'];
+  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
+}
+
+export const Section: FC<Props> = ({ section, data, children }) => {
+  const id = useId();
+  const sectionRef = useRef<HTMLDivElement | null>(null);
+  const { layouts, customSections } = useCntrlContext();
+  const layout = useLayoutContext();
+  const layoutValues: Record<string, any>[] = [section.height, section.color, section.media ?? {}];
+  const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
+  const isVideo = layout && section.media?.[layout]?.url ? isVideoUrl(String(section.media?.[layout]?.url)) : false;
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  useSectionRegistry(section.id, sectionRef.current);
+
+  const getSectionVisibilityStyles = () => {
+    return layouts
+      .sort((a, b) => a.startsWith - b.startsWith)
+      .reduce((acc, layout) => {
+        const isHidden = section.hidden[layout.id];
+        return `
+          ${acc}
+          ${getLayoutMediaQuery(layout.id, layouts)} {
+            .section-${section.id} {
+              display: ${isHidden ? 'none' : 'block'};
+            }
+          }`;
+      }, '');
+  };
+
+  useEffect(() => {
+    if (!isVideo || !sectionRef.current || !videoRef.current) return;
+    const video = videoRef.current;
+    const section = sectionRef.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          video.style.display = 'block';
+          video.play().catch(() => {});
+        } else {
+          video.style.display = 'none';
+          video.pause();
+        }
+      },
+      {
+        root: null,
+        rootMargin: '50px',
+        threshold: 0
+      }
+    );
+    observer.observe(section);
+    return () => observer.disconnect();
+  }, [isVideo]);
+
+  if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
+
+  return (
+    <>
+      <div
+        className={`section-${section.id}`}
+        id={section.name}
+        ref={sectionRef}
+      >
+        {layout && section.media?.[layout]?.url && section.media?.[layout]?.size !== 'none' && sectionRef.current && (
+          <div className={`section-background-overlay-${section.id}`}>
+            <div
+              key={`section-background-wrapper-${section.id}`}
+              className={`section-background-wrapper-${section.id}`}
+            >
+              {isVideo ? (
+                <video
+                  ref={videoRef}
+                  autoPlay
+                  loop
+                  muted
+                  playsInline
+                  preload="auto"
+                  className={`video-background-${section.id}`}
+                >
+                  <source src={section.media?.[layout]?.url ?? ''} />
+                </video>
+              ) : (
+                <img src={section.media?.[layout]?.url ?? ''} className={`image-background-${section.id}`} />
+              )}
+            </div>
+          </div>
+        )}
+        {children}
+      </div>
+      <JSXStyle id={id}>{`
+      ${
+    getLayoutStyles(layouts, layoutValues, ([height, color, media]) => (`
+         .section-${section.id} {
+            height: ${getSectionHeight(height)};
+            position: relative;
+            background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
+         }
+         .section-background-overlay-${section.id} {
+            height: ${getSectionHeight(height)};
+            width: 100%;
+            position: relative;
+            overflow: clip;
+         }
+         .section-background-wrapper-${section.id} {
+            transform: ${media?.position === 'fixed' ? 'translateY(-100vh)' : 'unset'};
+            left: 0;
+            position: relative;
+            height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)}};
+            width: 100%;
+         }
+         .video-background-${section.id} {
+            object-fit: ${media?.size ?? 'cover'};
+            width: 100%;
+            height: ${media?.position === 'fixed' ? '100vh' : '100%'};
+            position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
+            top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
+            left: 0;
+         }
+         .image-background-${section.id} {
+            object-fit: ${media?.size};
+            width: 100%;
+            height: ${media?.position === 'fixed' ? '100vh' : '100%'};
+            position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
+            top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
+         }
+        `
+    ))
+    }
+      ${getSectionVisibilityStyles()}
+    `}</JSXStyle>
+    </>
+  );
+};
+
+export function getSectionHeight(heightData: SectionHeight): string {
+  const { units, vhUnits, mode } = heightData;
+  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
+  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
+  return '0';
+}

package/src/components/Section/useSectionColor.ts

@@ -1,19 +1,19 @@
-import { useMemo } from 'react';
-import { CntrlColor } from '@cntrl-site/color';
-import { useLayoutContext } from '../useLayoutContext';
-
-type LayoutIdentifier = string;
-const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-
-export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
-  const layoutId = useLayoutContext();
-   return useMemo(() => {
-     if (!layoutId) return CntrlColor.parse(DEFAULT_COLOR);
-     const layoutColor = colorData[layoutId];
-     return CntrlColor.parse(
-       !layoutColor
-         ? DEFAULT_COLOR
-         : layoutColor
-     );
-   }, [layoutId]);
-};
+import { useMemo } from 'react';
+import { CntrlColor } from '@cntrl-site/color';
+import { useLayoutContext } from '../useLayoutContext';
+
+type LayoutIdentifier = string;
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
+
+export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
+  const layoutId = useLayoutContext();
+   return useMemo(() => {
+     if (!layoutId) return CntrlColor.parse(DEFAULT_COLOR);
+     const layoutColor = colorData[layoutId];
+     return CntrlColor.parse(
+       !layoutColor
+         ? DEFAULT_COLOR
+         : layoutColor
+     );
+   }, [layoutId]);
+};

package/src/components/Section/useSectionHeightMap.ts

@@ -1,19 +1,19 @@
-import { useContext } from 'react';
-import { CntrlContext } from '../../provider/CntrlContext';
-import { Layout, SectionHeight } from '@cntrl-site/sdk';
-import { getSectionHeight } from './Section';
-
-export const useSectionHeightData = (sectionId: string): Record<string, string> => {
-  const sectionHeightContext = useContext(CntrlContext);
-  const layouts = sectionHeightContext.layouts;
-  const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
-  return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
-};
-
-export function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string> {
-  return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
-}
-
-function getDefaultHeightData(layouts: Layout[]) {
-  return layouts.reduce((acc, layout) => ({...acc, [layout.id]: '0'}), {});
-}
+import { useContext } from 'react';
+import { CntrlContext } from '../../provider/CntrlContext';
+import { Layout, SectionHeight } from '@cntrl-site/sdk';
+import { getSectionHeight } from './Section';
+
+export const useSectionHeightData = (sectionId: string): Record<string, string> => {
+  const sectionHeightContext = useContext(CntrlContext);
+  const layouts = sectionHeightContext.layouts;
+  const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
+  return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
+};
+
+export function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string> {
+  return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
+}
+
+function getDefaultHeightData(layouts: Layout[]) {
+  return layouts.reduce((acc, layout) => ({...acc, [layout.id]: '0'}), {});
+}

package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx

@@ -1,132 +1,132 @@
-import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor, FontFaceGenerator } from '@cntrl-site/sdk';
-import { FC, useEffect, useId, useState } from 'react';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { ItemProps } from '../Item';
-import JSXStyle from 'styled-jsx/style';
-import { useRegisterResize } from '../../../common/useRegisterResize';
-import { useItemAngle } from '../useItemAngle';
-import { LinkWrapper } from '../LinkWrapper';
-import { useCodeEmbedItem } from './useCodeEmbedItem';
-
-const stylesMap = {
-  [AreaAnchor.TopLeft]: {},
-  [AreaAnchor.TopCenter]: { justifyContent: 'center' },
-  [AreaAnchor.TopRight]: { justifyContent: 'flex-end' },
-  [AreaAnchor.MiddleLeft]: { alignItems: 'center' },
-  [AreaAnchor.MiddleCenter]: { justifyContent: 'center', alignItems: 'center' },
-  [AreaAnchor.MiddleRight]: { justifyContent: 'flex-end', alignItems: 'center' },
-  [AreaAnchor.BottomLeft]: { alignItems: 'flex-end' },
-  [AreaAnchor.BottomCenter]: { justifyContent: 'center', alignItems: 'flex-end' },
-  [AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
-};
-
-export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
-  const { layouts, fonts } = useCntrlContext();
-  const fontGoogleTags = fonts?.google;
-  const fontAdobeTags = fonts?.adobe;
-  const fontCustomTags = new FontFaceGenerator(fonts?.custom ?? []).generate();
-  const { anchor, blur: itemBlur, opacity: itemOpacity } = useCodeEmbedItem(item, sectionId);
-  const itemAngle = useItemAngle(item, sectionId);
-  const { html } = item.commonParams;
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  useRegisterResize(ref, onResize);
-  const pos = stylesMap[anchor];
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const stateParams = interactionCtrl?.getState(['angle', 'blur', 'opacity']);
-  const blur = (stateParams?.styles?.blur ?? itemBlur) as number;
-  const opacity = stateParams?.styles?.opacity ?? itemOpacity;
-  const angle = stateParams?.styles?.angle ?? itemAngle;
-
-  useEffect(() => {
-    if (!ref) return;
-    const scripts = ref.querySelectorAll('script');
-    for (const script of scripts) {
-      const newScript = document.createElement('script');
-      for (const attr of script.getAttributeNames()) {
-        newScript.setAttribute(attr, script.getAttribute(attr)!);
-      }
-      newScript.textContent = script.textContent;
-      script.parentNode!.removeChild(script);
-      ref.appendChild(newScript);
-    }
-  }, [item.commonParams.html]);
-
-  useEffect(() => {
-    if (!ref) return;
-    const iframe: HTMLIFrameElement | null = ref.querySelector(`[data-embed="${item.id}"]`);
-    if (!iframe) return;
-    const htmlWithStyles = `
-      ${fontGoogleTags}
-      ${fontAdobeTags}
-      <style>
-        ${fontCustomTags}
-      </style>
-      ${item.commonParams.html}
-    `;
-    iframe.srcdoc = htmlWithStyles;
-  }, [item.commonParams.html, item.commonParams.iframe, ref]);
-
-  const isInteractive = opacity !== 0;
-  useEffect(() => {
-    onVisibilityChange?.(isInteractive);
-  }, [isInteractive, onVisibilityChange]);
-
-  return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target}>
-      <div
-        className={`embed-wrapper-${item.id}`}
-        style={{
-          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
-          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
-          ...(opacity !== undefined ? { opacity } : {}),
-          transition: stateParams?.transition ?? 'none'
-        }}
-        ref={setRef}
-      >
-        {item.commonParams.iframe ? (
-          <iframe
-            data-embed={item.id}
-            className={`embed-${item.id}`}
-            style={{
-              ...pos,
-              border: 'unset'
-            }}
-          />
-        ) : (
-          <div
-            className={`embed-${item.id}`}
-            style={{ ...pos }}
-            dangerouslySetInnerHTML={{ __html: html }}
-          />
-        )}
-      </div>
-      <JSXStyle id={id}>{`
-      .embed-wrapper-${item.id} {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-      .embed-${item.id} {
-        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
-        transform-origin: top left;
-        z-index: 1;
-        border: none;
-      }
-      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams], exemplary) => {
-      return (`
-          .embed-wrapper-${item.id} {
-            opacity: ${layoutParams.opacity};
-            transform: rotate(${area.angle}deg);
-            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-          }
-          .embed-${item.id} {
-            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
-            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
-          }
-        `);
-    })}
-    `}</JSXStyle>
-    </LinkWrapper>
-  );
-};
+import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor, FontFaceGenerator } from '@cntrl-site/sdk';
+import { FC, useEffect, useId, useState } from 'react';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { ItemProps } from '../Item';
+import JSXStyle from 'styled-jsx/style';
+import { useRegisterResize } from '../../../common/useRegisterResize';
+import { useItemAngle } from '../useItemAngle';
+import { LinkWrapper } from '../LinkWrapper';
+import { useCodeEmbedItem } from './useCodeEmbedItem';
+
+const stylesMap = {
+  [AreaAnchor.TopLeft]: {},
+  [AreaAnchor.TopCenter]: { justifyContent: 'center' },
+  [AreaAnchor.TopRight]: { justifyContent: 'flex-end' },
+  [AreaAnchor.MiddleLeft]: { alignItems: 'center' },
+  [AreaAnchor.MiddleCenter]: { justifyContent: 'center', alignItems: 'center' },
+  [AreaAnchor.MiddleRight]: { justifyContent: 'flex-end', alignItems: 'center' },
+  [AreaAnchor.BottomLeft]: { alignItems: 'flex-end' },
+  [AreaAnchor.BottomCenter]: { justifyContent: 'center', alignItems: 'flex-end' },
+  [AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
+};
+
+export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+  const id = useId();
+  const { layouts, fonts } = useCntrlContext();
+  const fontGoogleTags = fonts?.google;
+  const fontAdobeTags = fonts?.adobe;
+  const fontCustomTags = new FontFaceGenerator(fonts?.custom ?? []).generate();
+  const { anchor, blur: itemBlur, opacity: itemOpacity } = useCodeEmbedItem(item, sectionId);
+  const itemAngle = useItemAngle(item, sectionId);
+  const { html } = item.commonParams;
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
+  const pos = stylesMap[anchor];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const stateParams = interactionCtrl?.getState(['angle', 'blur', 'opacity']);
+  const blur = (stateParams?.styles?.blur ?? itemBlur) as number;
+  const opacity = stateParams?.styles?.opacity ?? itemOpacity;
+  const angle = stateParams?.styles?.angle ?? itemAngle;
+
+  useEffect(() => {
+    if (!ref) return;
+    const scripts = ref.querySelectorAll('script');
+    for (const script of scripts) {
+      const newScript = document.createElement('script');
+      for (const attr of script.getAttributeNames()) {
+        newScript.setAttribute(attr, script.getAttribute(attr)!);
+      }
+      newScript.textContent = script.textContent;
+      script.parentNode!.removeChild(script);
+      ref.appendChild(newScript);
+    }
+  }, [item.commonParams.html]);
+
+  useEffect(() => {
+    if (!ref) return;
+    const iframe: HTMLIFrameElement | null = ref.querySelector(`[data-embed="${item.id}"]`);
+    if (!iframe) return;
+    const htmlWithStyles = `
+      ${fontGoogleTags}
+      ${fontAdobeTags}
+      <style>
+        ${fontCustomTags}
+      </style>
+      ${item.commonParams.html}
+    `;
+    iframe.srcdoc = htmlWithStyles;
+  }, [item.commonParams.html, item.commonParams.iframe, ref]);
+
+  const isInteractive = opacity !== 0;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
+
+  return (
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
+      <div
+        className={`embed-wrapper-${item.id}`}
+        style={{
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+          ...(opacity !== undefined ? { opacity } : {}),
+          transition: stateParams?.transition ?? 'none'
+        }}
+        ref={setRef}
+      >
+        {item.commonParams.iframe ? (
+          <iframe
+            data-embed={item.id}
+            className={`embed-${item.id}`}
+            style={{
+              ...pos,
+              border: 'unset'
+            }}
+          />
+        ) : (
+          <div
+            className={`embed-${item.id}`}
+            style={{ ...pos }}
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        )}
+      </div>
+      <JSXStyle id={id}>{`
+      .embed-wrapper-${item.id} {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .embed-${item.id} {
+        transform: ${item.commonParams.scale ? 'scale(var(--layout-deviation))' : 'none'};
+        transform-origin: top left;
+        z-index: 1;
+        border: none;
+      }
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams], exemplary) => {
+      return (`
+          .embed-wrapper-${item.id} {
+            opacity: ${layoutParams.opacity};
+            transform: rotate(${area.angle}deg);
+            filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+          }
+          .embed-${item.id} {
+            width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
+            height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
+          }
+        `);
+    })}
+    `}</JSXStyle>
+    </LinkWrapper>
+  );
+};

package/src/components/items/CodeEmbedItem/useCodeEmbedItem.ts

@@ -1,36 +1,36 @@
-import { CodeEmbedItem, AreaAnchor, KeyframeType } from '@cntrl-site/sdk';
-import { useLayoutContext } from '../../useLayoutContext';
-import { useKeyframeValue } from '../../../common/useKeyframeValue';
-
-export const useCodeEmbedItem = (item: CodeEmbedItem, sectionId: string) => {
-  const layoutId = useLayoutContext();
-
-  const blur = useKeyframeValue(
-    item,
-    KeyframeType.Blur,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'blur' in layoutParams ? layoutParams.blur : 0;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
-    sectionId,
-    [layoutId]
-  );
-
-  const opacity = useKeyframeValue(
-    item,
-    KeyframeType.Opacity,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
-    sectionId,
-    [layoutId]
-  );
-
-  const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : AreaAnchor.TopLeft;
-  return { anchor, blur, opacity };
-};
+import { CodeEmbedItem, AreaAnchor, KeyframeType } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
+
+export const useCodeEmbedItem = (item: CodeEmbedItem, sectionId: string) => {
+  const layoutId = useLayoutContext();
+
+  const blur = useKeyframeValue(
+    item,
+    KeyframeType.Blur,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  const opacity = useKeyframeValue(
+    item,
+    KeyframeType.Opacity,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : AreaAnchor.TopLeft;
+  return { anchor, blur, opacity };
+};