@cntrl-site/sdk-nextjs 1.10.8 → 1.11.0-0

package/src/components/StructuredBlockItem/StructuredVideo/StructuredVideo.tsx

@@ -0,0 +1,106 @@
+import { VideoStructuredBlock } from '@cntrl-site/sdk';
+import { FC, useId, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { useLayoutContext } from '../../useLayoutContext';
+import { StructuredBlockItemProps } from '../StructuredBlockItem';
+
+/**
+ * A video at its own proportions, playing on its own, once pointed at, or once clicked, as the
+ * layout says; its cover shows until it first plays. It takes the 16:9 of a video until its own
+ * proportions are known.
+ */
+export const StructuredVideo: FC<StructuredBlockItemProps<VideoStructuredBlock>> = ({ block }) => {
+  const reactId = useId();
+  const layoutId = useLayoutContext();
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  const [video, setVideo] = useState<HTMLVideoElement | null>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [hasPlayed, setHasPlayed] = useState(false);
+  useItemGeometry(block.id, ref);
+  const { url, coverUrl } = block.commonParams;
+  const layoutParams = layoutId ? block.layoutParams[layoutId] : undefined;
+  const play = layoutParams?.play;
+  const start = () => {
+    if (!video) return;
+    setHasPlayed(true);
+    video.play();
+  };
+  return (
+    <div ref={setRef} className={`structured-video-${block.id}${isLoaded ? '' : ` structured-video-loading-${block.id}`}`}>
+      {layoutParams && (
+        <>
+          <video
+            key={layoutId}
+            ref={setVideo}
+            className={`structured-video-el-${block.id}`}
+            src={url}
+            autoPlay={play === 'auto'}
+            muted={layoutParams.muted}
+            controls={layoutParams.controls}
+            loop
+            playsInline
+            preload="auto"
+            onLoadedMetadata={() => setIsLoaded(true)}
+            onPlay={() => {
+              setIsPlaying(true);
+              setHasPlayed(true);
+            }}
+            onPause={() => setIsPlaying(false)}
+            onMouseEnter={() => {
+              if (play === 'on-hover') start();
+            }}
+            onMouseLeave={() => {
+              if (play === 'on-hover') video?.pause();
+            }}
+          />
+          {coverUrl && play !== 'auto' && !hasPlayed && (
+            <img
+              className={`structured-video-cover-${block.id}`}
+              src={coverUrl}
+              alt=""
+              onMouseEnter={() => {
+                if (play === 'on-hover') start();
+              }}
+              onClick={start}
+            />
+          )}
+          {play === 'on-click' && !layoutParams.controls && (
+            <div
+              className={`structured-video-overlay-${block.id}`}
+              onClick={() => (isPlaying ? video?.pause() : start())}
+            />
+          )}
+        </>
+      )}
+      <JSXStyle id={`${reactId}-video-${block.id}`}>{`
+        .structured-video-${block.id} {
+          position: relative;
+          width: 100%;
+        }
+        .structured-video-loading-${block.id} {
+          aspect-ratio: 16 / 9;
+        }
+        .structured-video-el-${block.id} {
+          display: block;
+          width: 100%;
+          height: auto;
+        }
+        .structured-video-cover-${block.id},
+        .structured-video-overlay-${block.id} {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          cursor: pointer;
+        }
+        .structured-video-cover-${block.id} {
+          object-fit: cover;
+        }
+      `}
+      </JSXStyle>
+    </div>
+  );
+};

package/src/components/StructuredBlockItem/blockPlacement.ts

@@ -0,0 +1,39 @@
+import { StructuredBlockArea } from '@cntrl-site/sdk';
+import { parseSizing } from '../items/useSizing';
+
+/**
+ * Where a block sits in a column of blocks, as CSS declarations: on the content grid where it is
+ * drawn from a preset, the area then carrying its `left` and its inner paddings; anywhere else sized
+ * and aligned by itself.
+ */
+export function blockPlacement(area: StructuredBlockArea, layoutParams: object): string {
+  const sizing = parseSizing('sizing' in layoutParams ? layoutParams.sizing as string | undefined : undefined);
+  const height = sizing.y === 'manual' && area.height !== undefined ? `${area.height * 100}vw` : 'auto';
+  if (area.left !== undefined) {
+    return `
+      align-self: flex-start;
+      left: ${area.left * 100}vw;
+      width: ${(area.width ?? 1) * 100}vw;
+      height: ${height};
+      padding-top: ${(area.innerPaddingTop ?? 0) * 100}vw;
+      padding-bottom: ${(area.innerPaddingBottom ?? 0) * 100}vw;
+    `;
+  }
+  return `
+    align-self: ${getAlignSelf(area.alignment ?? 'center')};
+    left: ${(area.horizontalOffset ?? 0) * 100}vw;
+    width: ${sizing.x === 'manual' && area.width ? `${area.width * 100}vw` : 'max-content'};
+    height: ${height};
+  `;
+}
+
+function getAlignSelf(alignment: 'left' | 'center' | 'right') {
+  switch (alignment) {
+    case 'left':
+      return 'flex-start';
+    case 'right':
+      return 'flex-end';
+    default:
+      return 'center';
+  }
+}

package/src/components/StructuredBlockItem/blocksMap.ts

@@ -0,0 +1,30 @@
+import { StructuredBlockType } from '@cntrl-site/sdk';
+import { ComponentType } from 'react';
+import type { StructuredBlockItemProps } from './StructuredBlockItem';
+import { StructuredComponent } from './StructuredComponent/StructuredComponent';
+import { StructuredRichText } from './StructuredRichText/StructuredRichText';
+import { StructuredImage } from './StructuredImage/StructuredImage';
+import { StructuredHeaderImage } from './StructuredHeaderImage/StructuredHeaderImage';
+import { StructuredVideo } from './StructuredVideo/StructuredVideo';
+import { StructuredDivider } from './StructuredDivider/StructuredDivider';
+import { StructuredCode } from './StructuredCode/StructuredCode';
+import { StructuredVimeoEmbed } from './StructuredEmbed/StructuredVimeoEmbed';
+import { StructuredYoutubeEmbed } from './StructuredEmbed/StructuredYoutubeEmbed';
+
+const noop = () => null;
+
+export const blocksMap: Record<StructuredBlockType, ComponentType<StructuredBlockItemProps<any>>> = {
+  [StructuredBlockType.Component]: StructuredComponent,
+  [StructuredBlockType.RichText]: StructuredRichText,
+  [StructuredBlockType.Quote]: StructuredRichText,
+  [StructuredBlockType.Date]: StructuredRichText,
+  [StructuredBlockType.Image]: StructuredImage,
+  [StructuredBlockType.HeaderImage]: StructuredHeaderImage,
+  [StructuredBlockType.Video]: StructuredVideo,
+  [StructuredBlockType.Divider]: StructuredDivider,
+  [StructuredBlockType.Code]: StructuredCode,
+  [StructuredBlockType.VimeoEmbed]: StructuredVimeoEmbed,
+  [StructuredBlockType.YoutubeEmbed]: StructuredYoutubeEmbed,
+  // a section's header is drawn by its section, never in the stack
+  [StructuredBlockType.Header]: noop
+};

package/src/components/StructuredBlockItem/textStylesRule.ts

@@ -0,0 +1,44 @@
+import { CntrlColor } from '@cntrl-site/color';
+import { StructuredBlockTextStyles } from '@cntrl-site/sdk';
+import { getFontFamilyValue } from '../../utils/getFontFamilyValue';
+
+/** A block's text styles as a CSS rule for `selector`, its lengths in viewport units as the block's own. */
+export function textStylesRule(selector: string, styles: StructuredBlockTextStyles): string {
+  const color = CntrlColor.parse(styles.color);
+  return `
+    ${selector} {
+      font-family: ${getFontFamilyValue(styles.typeFace)};
+      font-size: ${styles.fontSize * 100}vw;
+      line-height: ${styles.lineHeight * 100}vw;
+      letter-spacing: ${styles.letterSpacing * 100}vw;
+      word-spacing: ${styles.wordSpacing * 100}vw;
+      font-weight: ${styles.fontWeight};
+      font-style: ${styles.fontStyle || 'normal'};
+      font-variant: ${styles.fontVariant};
+      text-transform: ${styles.textTransform};
+      vertical-align: ${styles.verticalAlign};
+      text-align: ${styles.textAlign};
+      color: ${color.fmt('oklch')};
+    }
+    @supports not (color: oklch(42% 0.3 90 / 1)) {
+      ${selector} {
+        color: ${color.fmt('rgba')};
+      }
+    }
+  `;
+}
+
+/** A colour of the palette as CSS for `property`, with a fallback where oklch is not supported. */
+export function colorRule(selector: string, property: string, value: string): string {
+  const color = CntrlColor.parse(value);
+  return `
+    ${selector} {
+      ${property}: ${color.fmt('oklch')};
+    }
+    @supports not (color: oklch(42% 0.3 90 / 1)) {
+      ${selector} {
+        ${property}: ${color.fmt('rgba')};
+      }
+    }
+  `;
+}

package/src/components/StructuredContent/StructuredContent.test.tsx

@@ -0,0 +1,217 @@
+import { fireEvent, render } from '@testing-library/react';
+import { Layout, Section, StructuredBlockType } from '@cntrl-site/sdk';
+import { CntrlContext } from '../../provider/CntrlContext';
+import { CntrlSdkContext } from '../../provider/CntrlSdkContext';
+import { CustomItemRegistry } from '../../provider/CustomItemRegistry';
+import { CustomSectionRegistry } from '../../provider/CustomSectionRegistry';
+import { LayoutContext } from '../../provider/LayoutContext';
+import { StructuredContent } from './StructuredContent';
+
+// the styles each component writes, drawn where it is for the test to read them
+jest.mock('styled-jsx/style', () => ({ __esModule: true, default: ({ children }: { children: string | string[] }) => <style>{children}</style> }));
+jest.mock('@vimeo/player', () => jest.fn().mockImplementation(() => ({ on: jest.fn(), off: jest.fn(), play: jest.fn(), pause: jest.fn() })));
+
+const layouts: Layout[] = [
+  { id: 'desktop', title: 'Desktop', startsWith: 800, exemplary: 1440 },
+  { id: 'mobile', title: 'Mobile', startsWith: 0, exemplary: 375 }
+];
+
+const textStyles = {
+  typeFace: 'Arial',
+  fontSize: 0.02,
+  lineHeight: 0.03,
+  letterSpacing: 0,
+  wordSpacing: 0,
+  fontWeight: 400,
+  fontStyle: 'normal',
+  fontVariant: 'normal',
+  textTransform: 'none',
+  verticalAlign: 'unset',
+  textAlign: 'center',
+  color: '#000000'
+};
+
+const onGrid = { zIndex: 1, paddingTop: 0.01, left: 0.35, width: 0.3, innerPaddingTop: 0.005, innerPaddingBottom: 0.006 };
+
+function block(type: StructuredBlockType, id: string, commonParams: object, layoutParams: object, area: object = onGrid) {
+  return {
+    id,
+    type,
+    hidden: {},
+    state: {},
+    area: { desktop: area, mobile: area },
+    layoutParams: { desktop: layoutParams, mobile: layoutParams },
+    commonParams
+  };
+}
+
+const paragraph = (text: string) => ({ text: `${text}\n`, blocks: [{ start: 0, end: text.length, type: 'unstyled', entities: [] }] });
+
+const title = block(StructuredBlockType.RichText, 'title', paragraph('The title'), { ...textStyles, rangeStyles: [] });
+const headerImage = block(StructuredBlockType.HeaderImage, 'key-image', { url: 'https://cdn.cntrl.site/key.jpg', altText: 'Key', caption: 'Under the key image' }, { opacity: 1 });
+const text = block(StructuredBlockType.RichText, 'text', paragraph('Read the post'), {
+  ...textStyles,
+  rangeStyles: [{ start: 0, end: 4, style: 'FONTSIZE', value: '0.04' }]
+});
+const quote = block(StructuredBlockType.Quote, 'quote', { ...paragraph('A quote'), kind: 'boxed' }, {
+  ...textStyles,
+  rangeStyles: [],
+  background: '#EEEEEE',
+  boxPadding: 0.02,
+  boxRadius: 0.01
+});
+const date = block(StructuredBlockType.Date, 'date', { ...paragraph('23 Sep 2026'), date: '2026-09-23', format: 'D MMM YYYY' }, {
+  ...textStyles,
+  rangeStyles: [{ start: 3, end: 6, style: 'FONTWEIGHT', value: '700' }]
+});
+const gallery = block(StructuredBlockType.Image, 'gallery', {
+  urls: ['https://cdn.cntrl.site/a.jpg', 'https://cdn.cntrl.site/b.jpg'],
+  altText: 'Two views',
+  caption: 'Seen from the hill'
+}, { opacity: 0.8, captionStyles: { ...textStyles, fontSize: 0.01 } });
+const video = block(StructuredBlockType.Video, 'video', { url: 'https://cdn.cntrl.site/clip.mp4', coverUrl: 'https://cdn.cntrl.site/cover.jpg' }, {
+  play: 'on-click',
+  muted: true,
+  controls: false
+});
+const code = block(StructuredBlockType.Code, 'code', {
+  code: 'const a = 1;',
+  language: 'typescript',
+  theme: 'dracula',
+  lines: [[{ content: 'const', color: '#FF79C6', fontStyle: 2 }, { content: ' a = 1;', color: '#F8F8F2' }]],
+  colors: { background: '#282A36', foreground: '#F8F8F2' }
+}, {});
+const divider = block(StructuredBlockType.Divider, 'divider', {}, { color: '#C0C0C0' }, { ...onGrid, height: 0.001 });
+const vimeo = block(StructuredBlockType.VimeoEmbed, 'vimeo', {
+  url: 'https://player.vimeo.com/video/1',
+  coverUrl: null,
+  ratioLock: true
+}, { play: 'auto', controls: true, loop: true, muted: true, pictureInPicture: false, radius: 0.01, blur: 0, opacity: 1 });
+const component = block(StructuredBlockType.Component, 'component', { componentId: 'unknown', content: [] }, { parameters: {}, opacity: 1, blur: 0 }, { zIndex: 1, alignment: 'left' });
+
+const header = {
+  id: 'header',
+  type: StructuredBlockType.Header,
+  hidden: {},
+  state: {},
+  area: { desktop: { zIndex: 2 }, mobile: { zIndex: 2 } },
+  commonParams: { title: 'title', subtitle: 'subtitle', date: 'header-date', image: 'key-image' },
+  layoutParams: {
+    desktop: { variant: 'A', order: ['image', 'title', 'subtitle', 'date'], hiddenElements: [], imageFit: 'cover', coverHeight: 0.8 },
+    mobile: { variant: 'B', order: ['title', 'image', 'subtitle', 'date'], hiddenElements: ['image'], imageFit: 'original', coverHeight: 1 }
+  }
+};
+
+const stack = [text, quote, date, gallery, video, code, divider, vimeo, component];
+
+function section(withHeader: boolean) {
+  return {
+    id: 'content',
+    items: [],
+    position: {},
+    minHeight: {},
+    color: {},
+    hidden: {},
+    type: 'content-based',
+    structuredContent: [title, headerImage, ...stack],
+    structuredContentSettings: { paddingBottom: { desktop: 0.02, mobile: 0.02 }, defaultWidth: { desktop: 0.3, mobile: 0.8 } },
+    ...(withHeader && { header })
+  } as unknown as Section;
+}
+
+function draw(section: Section) {
+  const sdk = new CntrlSdkContext(new CustomItemRegistry(), new CustomSectionRegistry());
+  sdk.setLayouts(layouts);
+  return render(
+    <CntrlContext.Provider value={sdk}>
+      <LayoutContext.Provider value="desktop">
+        <StructuredContent section={section} />
+      </LayoutContext.Provider>
+    </CntrlContext.Provider>
+  );
+}
+
+const css = () => [...document.body.querySelectorAll('style')].map(style => style.textContent).join('\n');
+
+describe('StructuredContent', () => {
+  it('draws every block of the stack in order', () => {
+    const { container } = draw(section(false));
+    const items = [...container.querySelectorAll('[class^="structured-block-item-"]')].map(item => item.className.replace('structured-block-item-', ''));
+    expect(items).toEqual(['title', 'key-image', ...stack.map(block => block.id)]);
+  });
+
+  it('places a block drawn from a preset on the content grid, its inner paddings apart from the gap above it', () => {
+    draw(section(false));
+    expect(css()).toMatch(/\.structured-block-item-text \{[^}]*margin-top: 1vw;[^}]*left: 35vw;[^}]*width: 30vw;[^}]*padding-top: 0\.5vw;[^}]*padding-bottom: 0\.6vw;/);
+    expect(css()).toMatch(/\.structured-block-item-component \{[^}]*align-self: flex-start;/);
+  });
+
+  it('sets text in its styles, its ranges in viewport units', () => {
+    const { container } = draw(section(false));
+    expect(container.querySelector('.structured-text-text')!.textContent!.trim()).toBe('Read the post');
+    expect(css()).toMatch(/\.structured-text-text \{[^}]*font-size: 2vw;[^}]*line-height: 3vw;/);
+    expect(css()).toContain('font-size: 4vw');
+  });
+
+  it('draws a quote in its box and a date as the text it reads as', () => {
+    const { container } = draw(section(false));
+    expect(container.querySelector('.structured-quote-box-quote')!.textContent!.trim()).toBe('A quote');
+    expect(css()).toMatch(/\.structured-quote-box-quote \{[^}]*padding: 2vw;[^}]*border-radius: 1vw;/);
+    expect(container.querySelector('.structured-text-date')!.textContent!.trim()).toBe('23 Sep 2026');
+  });
+
+  it('draws a gallery\'s images side by side, its caption under them', () => {
+    const { container } = draw(section(false));
+    const images = [...container.querySelectorAll<HTMLImageElement>('.structured-gallery-image-gallery')];
+    expect(images.map(image => image.alt)).toEqual(['Two views', 'Two views']);
+    // equally wide until their own proportions are known
+    expect(images.map(image => image.style.flexGrow)).toEqual(['0.5', '0.5']);
+    expect(container.querySelector('.structured-caption-gallery')!.textContent).toBe('Seen from the hill');
+  });
+
+  it('fills a gallery\'s row whatever its images\' proportions, a lone portrait image as wide as the block', () => {
+    const portrait = block(StructuredBlockType.Image, 'portrait', { urls: ['https://cdn.cntrl.site/p.jpg'], altText: '', caption: '' }, { opacity: 1 });
+    const { container } = draw({ ...section(false), structuredContent: [portrait] } as Section);
+    const image = container.querySelector<HTMLImageElement>('.structured-gallery-image-portrait')!;
+    Object.defineProperties(image, { complete: { value: true }, naturalWidth: { value: 300 }, naturalHeight: { value: 400 } });
+    fireEvent.load(image);
+    expect(image.style.flexGrow).toBe('1');
+  });
+
+  it('draws code coloured as it comes, in its theme\'s box', () => {
+    const { container } = draw(section(false));
+    const tokens = [...container.querySelectorAll<HTMLSpanElement>('.structured-code-text-code span')];
+    expect(tokens.map(token => [token.textContent, token.style.color, token.style.fontWeight])).toEqual([
+      ['const', 'rgb(255, 121, 198)', 'bold'],
+      [' a = 1;', 'rgb(248, 248, 242)', '']
+    ]);
+    expect(css()).toContain('background: #282A36');
+  });
+
+  it('covers a video played on click until it plays', () => {
+    const { container } = draw(section(false));
+    expect(container.querySelector('video')!.getAttribute('src')).toBe('https://cdn.cntrl.site/clip.mp4');
+    expect(container.querySelector('.structured-video-cover-video')).not.toBeNull();
+    expect(container.querySelector('.structured-video-overlay-video')).not.toBeNull();
+  });
+
+  it('draws the header first, with its elements left out of the stack', () => {
+    const { container } = draw(section(true));
+    const content = container.firstElementChild!;
+    expect(content.firstElementChild!.className).toBe('structured-header-header');
+    expect(container.querySelectorAll('.structured-text-title')).toHaveLength(1);
+    const items = [...container.querySelectorAll('[class^="structured-block-item-"]')].map(item => item.className.replace('structured-block-item-', ''));
+    expect(items).toEqual(stack.map(block => block.id));
+  });
+
+  it('arranges the header by the variant of each layout', () => {
+    draw(section(true));
+    // desktop, variant A: the key image covers the header, the text on its bottom edge, no caption
+    expect(css()).toMatch(/@media \(min-width: 800px\) \{[\s\S]*\.structured-header-header \{[^}]*height: 80svh;/);
+    expect(css()).toMatch(/\.structured-header-stack-header \{[^}]*position: absolute;/);
+    expect(css()).toMatch(/\.structured-header-element-key-image \.structured-caption-key-image \{\s*display: none;/);
+    // mobile, variant B: the elements flow in its order, the image hidden there
+    expect(css()).toMatch(/\.structured-header-stack-header \{\s*display: contents;/);
+    expect(css()).toMatch(/\.structured-header-element-key-image \{\s*display: none;/);
+  });
+});

package/src/components/StructuredContent/StructuredContent.tsx

@@ -3,38 +3,44 @@ import { FC, useId } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { StructuredBlockItem } from '../StructuredBlockItem/StructuredBlockItem';
+import { StructuredHeader } from './StructuredHeader';
 
 interface Props {
   section: Section;
 }
 
+/**
+ * A section's blocks, one under another across the section's whole width: a block drawn from a
+ * preset is placed on the content grid by its own area. A content-based section's header comes
+ * first, drawing the blocks it points at, which the stack leaves out.
+ */
 export const StructuredContent: FC<Props> = ({ section }) => {
   const reactId = useId();
   const id = `${reactId}-structured-content-${section.id}`;
   const { layouts } = useCntrlContext();
-  const structuredContentLength = section.structuredContent.length;
-  const defaultWidthRecord = section.type === 'content-based' ? section.structuredContentSettings.defaultWidth : {};
-  const layoutValues: Record<string, any>[] = [section.structuredContentSettings.paddingBottom, defaultWidthRecord];
-  if (structuredContentLength === 0) return null;
+  const header = section.type === 'content-based' ? section.header : undefined;
+  const headerElementIds: string[] = header ? Object.values(header.commonParams) : [];
+  const readingWidth = section.type === 'content-based' ? section.structuredContentSettings.defaultWidth : {};
+  const layoutValues: Record<string, any>[] = [section.structuredContentSettings.paddingBottom];
+  if (section.structuredContent.length === 0 && !header) return null;
   return (
     <div className={`structured-content-${section.id}`}>
-      {section.structuredContent.map(block => (
-        <StructuredBlockItem block={block} key={block.id} maxWidthMap={defaultWidthRecord} />
-      ))}
+      {header && <StructuredHeader header={header} blocks={section.structuredContent} readingWidth={readingWidth} />}
+      {section.structuredContent
+        .filter(block => !headerElementIds.includes(block.id))
+        .map(block => <StructuredBlockItem block={block} key={block.id} readingWidth={readingWidth} />)}
       <JSXStyle id={id}>
         {`
-          ${getLayoutStyles(layouts, layoutValues, ([paddingBottom, defaultWidth]) => {
-            return (`
-              .structured-content-${section.id} {
-                padding-bottom: ${paddingBottom * 100}vw;
-                max-width: ${defaultWidth < 1 ? `${defaultWidth * 100}vw` : 'unset'};
-                display: flex;
-                flex-direction: column;
-                margin: 0 auto;
-                width: 100%;
-              }
-            `);
-          })}
+          .structured-content-${section.id} {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+          }
+          ${getLayoutStyles(layouts, layoutValues, ([paddingBottom]) => (`
+            .structured-content-${section.id} {
+              padding-bottom: ${(paddingBottom ?? 0) * 100}vw;
+            }
+          `))}
         `}
       </JSXStyle>
     </div>

package/src/components/StructuredContent/StructuredHeader.tsx

@@ -0,0 +1,119 @@
+import {
+  getLayoutStyles,
+  HeaderElementKind,
+  HeaderImageStructuredBlock,
+  HeaderStructuredBlock,
+  StructuredBlockAny,
+  StructuredBlockType
+} from '@cntrl-site/sdk';
+import { FC, useId } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { blockPlacement } from '../StructuredBlockItem/blockPlacement';
+import { blocksMap } from '../StructuredBlockItem/blocksMap';
+
+interface Props {
+  header: HeaderStructuredBlock;
+  /** The section's blocks, the header's elements among them. */
+  blocks: StructuredBlockAny[];
+  readingWidth: Record<string, number>;
+}
+
+const TEXT_KINDS: HeaderElementKind[] = ['title', 'subtitle', 'date'];
+
+/**
+ * A content-based section's header, drawn first. Variant A draws the key image full width with the
+ * other elements on its bottom edge, the image covering a share of the viewport's height if set to;
+ * variant B flows the shown elements in order, each placed as in the stack. The variant, the order
+ * and what is shown are a layout's, so every element is drawn once and arranged per layout.
+ */
+export const StructuredHeader: FC<Props> = ({ header, blocks, readingWidth }) => {
+  const reactId = useId();
+  const { layouts } = useCntrlContext();
+  const elementOf = (kind: HeaderElementKind) => blocks.find(block => block.id === header.commonParams[kind]);
+  const image = elementOf('image');
+  const hasImage = image?.type === StructuredBlockType.HeaderImage && Boolean((image as HeaderImageStructuredBlock).commonParams.url);
+  const texts = TEXT_KINDS.flatMap((kind) => {
+    const block = elementOf(kind);
+    return block ? [{ kind, block }] : [];
+  });
+  const headerClass = `structured-header-${header.id}`;
+  const stackClass = `structured-header-stack-${header.id}`;
+  const elementClass = (block: StructuredBlockAny) => `structured-header-element-${block.id}`;
+  const renderElement = (block: StructuredBlockAny) => {
+    const BlockComponent = blocksMap[block.type];
+    return (
+      <div key={block.id} className={elementClass(block)}>
+        <BlockComponent block={block} readingWidth={readingWidth} />
+      </div>
+    );
+  };
+  const elementStyles = (kind: HeaderElementKind, block: StructuredBlockAny) => getLayoutStyles(
+    layouts,
+    [header.layoutParams, block.area, block.layoutParams] as Record<string, any>[],
+    ([layoutParams, area, blockLayoutParams]) => {
+      const isBackdrop = kind === 'image' && layoutParams.variant === 'A';
+      const isHidden = !isBackdrop && layoutParams.hiddenElements.includes(kind);
+      const isCover = isBackdrop && layoutParams.imageFit === 'cover';
+      return (`
+        .${elementClass(block)} {
+          display: ${isHidden ? 'none' : 'block'};
+          position: relative;
+          order: ${layoutParams.order.indexOf(kind)};
+          ${isBackdrop
+          ? `width: 100%; left: 0; height: ${isCover ? '100%' : 'auto'}; padding: 0;`
+          : blockPlacement(area, blockLayoutParams)}
+        }
+        ${isBackdrop ? `
+          .${elementClass(block)} .structured-caption-${block.id} {
+            display: none;
+          }
+        ` : ''}
+        ${isCover ? `
+          .${elementClass(block)} .structured-header-image-${block.id},
+          .${elementClass(block)} .structured-header-picture-${block.id} {
+            height: 100%;
+          }
+          .${elementClass(block)} .structured-header-picture-${block.id} {
+            object-fit: cover;
+          }
+        ` : ''}
+      `);
+    }
+  );
+  return (
+    <div className={headerClass}>
+      {image && renderElement(image)}
+      <div className={stackClass}>
+        {texts.map(({ block }) => renderElement(block))}
+      </div>
+      <JSXStyle id={`${reactId}-header-${header.id}`}>{`
+        .${headerClass} {
+          position: relative;
+          width: 100%;
+        }
+        ${getLayoutStyles(layouts, [header.layoutParams, header.area] as Record<string, any>[], ([layoutParams, area]) => {
+      const isA = layoutParams.variant === 'A';
+      const isCover = isA && layoutParams.imageFit === 'cover';
+      return (`
+            .${headerClass} {
+              display: ${isA ? 'block' : 'flex'};
+              flex-direction: column;
+              z-index: ${area?.zIndex ?? 0};
+              height: ${isCover ? `${layoutParams.coverHeight * 100}vh` : 'auto'};
+              height: ${isCover ? `${layoutParams.coverHeight * 100}svh` : 'auto'};
+            }
+            .${stackClass} {
+              ${isA
+          ? `display: flex; flex-direction: column; position: ${hasImage ? 'absolute' : 'relative'}; left: 0; right: 0; bottom: 0;`
+          : 'display: contents;'}
+            }
+          `);
+    })}
+        ${image ? elementStyles('image', image) : ''}
+        ${texts.map(({ kind, block }) => elementStyles(kind, block)).join('\n')}
+      `}
+      </JSXStyle>
+    </div>
+  );
+};

package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx

@@ -13,6 +13,7 @@ import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { LinkWrapper } from '../LinkWrapper';
 import { useLayoutContext } from '../../useLayoutContext';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { getVimeoEmbedUrl } from '../../../utils/getVimeoEmbedUrl';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const reactId = useId();
@@ -41,20 +42,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const radius = getStyleFromItemStateAndParams(frameStateParams?.styles?.radius, itemRadius);
   useRegisterResize(ref, onResize);
   useItemGeometry(item.id, ref);
-  const validUrl = useMemo(() => {
-    if (!layoutParams) return url;
-    const validURL = new URL(url);
-    validURL.searchParams.append('controls', String(layoutParams.controls));
-    validURL.searchParams.append('autoplay', String(layoutParams.play === 'auto'));
-    validURL.searchParams.append('muted', String(layoutParams.muted));
-    validURL.searchParams.append('loop', String(layoutParams.loop));
-    validURL.searchParams.append('pip', String(layoutParams.pictureInPicture));
-    validURL.searchParams.append('title', '0');
-    validURL.searchParams.append('byline', '0');
-    validURL.searchParams.append('portrait', '0');
-    validURL.searchParams.append('autopause', 'false');
-    return validURL.href;
-  }, [url, layoutParams]);
+  const validUrl = useMemo(() => (layoutParams ? getVimeoEmbedUrl(url, layoutParams) : url), [url, layoutParams]);
 
   useEffect(() => {
     if (!vimeoPlayer || !imgRef || !layoutParams) return;