@akinon/pz-theme 2.0.82-beta.0 → 2.0.82

package/src/blocks/slider-block.tsx

@@ -156,6 +156,74 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   const slideGap = parseNumber(getConfigEntry('slide-gap'), 16);
   const slidePadding = slideGap / 2;
 
+  /**
+   * Edge treatment, the same vocabulary the slider SECTIONS grew — this block
+   * is a second, independent renderer of the same carousel (a Featured Brand
+   * Collection is built from it), and an author who learned the setting on one
+   * should find it on the other.
+   *
+   * `flush-edges` moves the whole gap to one side so the outer edges carry
+   * none, which is what lets the last card's content reach the band; a
+   * FRACTIONAL item count is what slices the next one and says "there is
+   * more". `lead-in` is not padding — no padding is position-dependent — so it
+   * rides the library's own `additionalTransfrom` and is handed back the
+   * moment the track leaves the start.
+   */
+  const flushEdges =
+    getResponsiveValue(
+      getConfigEntry('flush-edges'),
+      currentBreakpoint,
+      false
+    ) === true;
+  const leadIn = clampNumber(
+    parseNumber(
+      getResponsiveValue(getConfigEntry('lead-in'), currentBreakpoint, 0),
+      0
+    ),
+    0,
+    400
+  );
+  /**
+   * Which edge the gap belongs to, and when it exists.
+   *
+   * `left` is a LEAD-IN: it sits before the first card while the track is at
+   * the start and slides away the moment it moves. `right` is its mirror, a
+   * TRAIL-OUT at the far end — because a right-hand gap at the START is not
+   * something the geometry can offer: what sits against the right edge there
+   * is the sliced next card, and how much of it shows is the item count's
+   * job, not a gap's.
+   *
+   * Both ride the library's own `additionalTransfrom`: +N pushes the track
+   * right and opens the left gap, -N pulls it left and opens the right one.
+   */
+  const leadInSide =
+    String(
+      getResponsiveValue(
+        getConfigEntry('lead-in-side'),
+        currentBreakpoint,
+        'left'
+      ) ?? 'left'
+    ) === 'right'
+      ? 'right'
+      : 'left';
+
+  // This renderer only distinguishes narrow from wide, so the item count it
+  // is actually showing is the one its own `slidesToSlide` picks from.
+  const itemsShown = isNarrowBreakpoint(currentBreakpoint)
+    ? mobileItems
+    : desktopItems;
+  const useLeadIn = leadIn > 0 && visibleCount > itemsShown && !useInfinite;
+  const [slidePosition, setSlidePosition] = React.useState(0);
+  const lastPosition = Math.max(0, visibleCount - itemsShown);
+  const edgeOffset =
+    leadInSide === 'left'
+      ? slidePosition <= 0
+        ? leadIn
+        : 0
+      : slidePosition >= lastPosition - 0.001
+      ? -leadIn
+      : 0;
+
   const blockStyles = block.styles || {};
   const sectionStyles = getCSSStyles(
     typeof blockStyles === 'object' && blockStyles !== null
@@ -620,6 +688,16 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
           autoPlaySpeed={autoPlaySpeed}
           containerClass="slider-carousel"
           dotListClass="slider-dots"
+          /*
+           * Spread conditionally so a slider that has not opted in is handed
+           * the identical prop object it was handed before.
+           */
+          {...(useLeadIn
+            ? {
+                additionalTransfrom: edgeOffset,
+                beforeChange: (nextSlide: number) => setSlidePosition(nextSlide)
+              }
+            : {})}
           customLeftArrow={
             !isDesigner && showArrows && !arrowsOutside ? (
               <CustomLeftArrow />
@@ -640,10 +718,20 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
             return (
               <div
                 key={childBlock.id}
-                style={{
-                  paddingLeft: slidePadding,
-                  paddingRight: slidePadding
-                }}
+                style={
+                  flushEdges
+                    ? {
+                        // The gap BETWEEN cards is unchanged — it just all sits
+                        // on one side, so the outer edges carry none.
+                        paddingLeft: 0,
+                        paddingRight:
+                          index === sortedBlocks.length - 1 ? 0 : slideGap
+                      }
+                    : {
+                        paddingLeft: slidePadding,
+                        paddingRight: slidePadding
+                      }
+                }
               >
                 <ThemeBlock
                   block={renderedChildBlock}

package/src/blocks/text-block.tsx

@@ -1,11 +1,39 @@
 'use client';
 
 import { useLocalization } from '@akinon/next/hooks';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { BlockRendererProps } from './block-renderer-registry';
 import { getCSSStyles } from '../utils';
 import { useThemeSettingsContext } from '../theme-settings-context';
 
+/**
+ * The block's box geometry, which this div must not wear.
+ *
+ * Everything else in a text block's style map has to be applied here, and not
+ * because the stylesheet forgot it: a bound value (`{{item.badgeColor}}`) is
+ * deliberately stripped from the shared `[data-block-id]` rule, because every
+ * row of an iterator shares that id and a rule cannot hold a different colour
+ * per row. Inline is the only place a per-row value can land.
+ *
+ * Margin and padding are the exception. They describe the block's box, the
+ * stylesheet already puts them on the `[data-block-id]` wrapper this div renders
+ * inside, and a box inside a box means they compound — a designer setting 29px
+ * under a heading got 29 on the wrapper and 29 again here, with nothing in the
+ * inspector to explain the second one. Measured on a live page: nine blocks
+ * carried the same margin at both levels.
+ *
+ * A BOUND margin is the one thing this gives up, and it is not a thing: row data
+ * carries prices and colours, not the spacing of the box it is drawn in.
+ */
+const BOX_GEOMETRY_PREFIXES = ['margin', 'padding'];
+
+const isBoxGeometryKey = (key: string): boolean => {
+  const normalized = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  return BOX_GEOMETRY_PREFIXES.some(
+    (prefix) => normalized === prefix || normalized.startsWith(`${prefix}-`)
+  );
+};
+
 const TextBlock = ({
   block,
   currentBreakpoint = 'desktop'
@@ -40,12 +68,22 @@ const TextBlock = ({
 
   const content = getLocalizedContent();
 
-  const wrapperStyles = useMemo(() => {
-    return getCSSStyles(block.styles || {}, themeSettings, currentBreakpoint);
+  const wrapperStyles = React.useMemo(() => {
+    const styles = block.styles || {};
+    const withoutBoxGeometry = Object.fromEntries(
+      Object.entries(styles).filter(([key]) => !isBoxGeometryKey(key))
+    );
+
+    return getCSSStyles(withoutBoxGeometry, themeSettings, currentBreakpoint);
   }, [block.styles, themeSettings, currentBreakpoint]);
 
+  const hasStyles = Object.keys(wrapperStyles).length > 0;
+
   return (
-    <div style={wrapperStyles} dangerouslySetInnerHTML={{ __html: content }} />
+    <div
+      {...(hasStyles ? { style: wrapperStyles } : null)}
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
   );
 };
 

package/src/blocks/video-block.tsx

@@ -1,78 +1,197 @@
 import React from 'react';
+import { getResponsiveValue } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
-const getVideoEmbedUrl = (
-  url: string,
-  properties?: {
-    autoplay?: boolean;
-    loop?: boolean;
-    muted?: boolean;
-    controls?: boolean;
+/**
+ * What an author's URL turned out to be.
+ *
+ * Tagged rather than inferred: the branch that picks `<iframe>` over `<video>`
+ * used to re-read the parser's own OUTPUT for the string 'youtube.com', so a
+ * file whose path happened to contain that text rendered in the wrong element.
+ * The parser already knows which it produced — it should say so.
+ */
+type ParsedVideo =
+  | { kind: 'embed'; src: string; defaultRatio?: string }
+  | { kind: 'file'; src: string }
+  | null;
+
+interface VideoProperties {
+  autoplay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  controls?: boolean;
+  poster?: unknown;
+  playsInline?: boolean;
+  /**
+   * `auto` reads the address; `file` says "trust me, this plays". The escape
+   * hatch exists because a signed CDN link often carries no extension at all,
+   * and guessing from a url that merely mentions `.mp4` somewhere would let
+   * `…/watch?ref=clip.mp4` through as a playable file.
+   */
+  sourceType?: string;
+}
+
+/** Hosts, not substrings: `evil.com/?u=youtube.com/watch?v=x` is not YouTube. */
+const YOUTUBE_HOSTS = /(^|\.)(youtube\.com|youtube-nocookie\.com|youtu\.be)$/i;
+
+/**
+ * The full YouTube id alphabet. Also the guard that stops an author-supplied
+ * fragment being interpolated into an embed URL unencoded.
+ */
+const YOUTUBE_ID = /^[A-Za-z0-9_-]{6,20}$/;
+
+const VIMEO_HOSTS = /(^|\.)vimeo\.com$/i;
+const VIMEO_ID = /^\d+$/;
+
+/** Extensions worth recognising on a path. Matched against the PATHNAME. */
+const FILE_EXTENSION = /\.(mp4|webm|ogg|ogv|m4v|mov)$/i;
+
+/**
+ * Only ever http(s). Verified before this guard existed:
+ * `javascript:alert(1)//x.mp4` and `data:text/html,…//x.mp4` both satisfied
+ * the old extension regex and were handed straight to `<video src>`.
+ */
+const SAFE_PROTOCOLS = new Set(['http:', 'https:']);
+
+const parseUrl = (url: string): URL | null => {
+  try {
+    // A base is needed for relative paths (`/media/clip.mp4`), which are a
+    // legitimate way to serve a clip from the storefront's own public folder.
+    return new URL(url, 'https://theme.invalid');
+  } catch {
+    return null;
   }
+};
+
+const buildEmbedParams = (
+  properties: VideoProperties | undefined,
+  videoId: string,
+  loopNeedsPlaylist: boolean
 ) => {
+  const params = new URLSearchParams();
+  if (properties?.autoplay) params.append('autoplay', '1');
+  if (properties?.loop) {
+    params.append('loop', '1');
+    if (loopNeedsPlaylist) params.append('playlist', videoId);
+  }
+  if (properties?.muted) {
+    params.append(loopNeedsPlaylist ? 'mute' : 'muted', '1');
+  }
+  if (properties?.controls === false) params.append('controls', '0');
+
+  const queryString = params.toString();
+  return queryString ? `?${queryString}` : '';
+};
+
+export const parseVideoSource = (
+  url: string,
+  properties?: VideoProperties
+): ParsedVideo => {
   if (!url || typeof url !== 'string') return null;
 
-  if (url.includes('youtube.com') || url.includes('youtu.be')) {
-    let videoId = '';
-    if (url.includes('youtu.be/')) {
-      videoId = url.split('youtu.be/')[1].split('?')[0];
-    } else if (url.includes('watch?v=')) {
-      videoId = url.split('watch?v=')[1].split('&')[0];
-    } else if (url.includes('embed/')) {
-      videoId = url.split('embed/')[1].split('?')[0];
-    }
+  const parsed = parseUrl(url.trim());
+  if (!parsed) return null;
 
-    if (!videoId) return null;
+  const host = parsed.hostname;
+  const path = parsed.pathname;
 
-    const params = new URLSearchParams();
-    if (properties?.autoplay) params.append('autoplay', '1');
-    if (properties?.loop) {
-      params.append('loop', '1');
-      params.append('playlist', videoId);
-    }
-    if (properties?.muted) params.append('mute', '1');
-    if (properties?.controls === false) params.append('controls', '0');
+  if (YOUTUBE_HOSTS.test(host)) {
+    let videoId = '';
+    let defaultRatio: string | undefined;
 
-    const queryString = params.toString();
-    return `https://www.youtube.com/embed/${videoId}${
-      queryString ? '?' + queryString : ''
-    }`;
-  }
+    if (/(^|\.)youtu\.be$/i.test(host)) {
+      videoId = path.slice(1);
+    } else if (path === '/watch') {
+      videoId = parsed.searchParams.get('v') ?? '';
+    } else if (path.startsWith('/embed/')) {
+      videoId = path.slice('/embed/'.length);
+    } else if (path.startsWith('/shorts/')) {
+      videoId = path.slice('/shorts/'.length);
+      // A Short is filmed vertical. Supplying the ratio here is what makes
+      // pasting the link enough — the author sets nothing.
+      defaultRatio = '9/16';
+    } else if (path.startsWith('/live/')) {
+      videoId = path.slice('/live/'.length);
+    }
 
-  if (url.includes('vimeo.com')) {
-    const videoId = url.split('vimeo.com/')[1]?.split('?')[0];
+    videoId = videoId.split('/')[0];
+    if (!YOUTUBE_ID.test(videoId)) return null;
 
-    if (!videoId) return null;
+    return {
+      kind: 'embed',
+      // The emitted host stays `www.youtube.com`. Accepting a nocookie link as
+      // INPUT is a parsing fix; switching what we emit is a privacy decision
+      // for the brand to make, and there is no consent gate here to hang it on.
+      src: `https://www.youtube.com/embed/${videoId}${buildEmbedParams(
+        properties,
+        videoId,
+        true
+      )}`,
+      defaultRatio
+    };
+  }
 
-    const params = new URLSearchParams();
-    if (properties?.autoplay) params.append('autoplay', '1');
-    if (properties?.loop) params.append('loop', '1');
-    if (properties?.muted) params.append('muted', '1');
-    if (properties?.controls === false) params.append('controls', '0');
+  if (VIMEO_HOSTS.test(host)) {
+    const videoId = path.slice(1).split('/')[0];
+    if (!VIMEO_ID.test(videoId)) return null;
 
-    const queryString = params.toString();
-    return `https://player.vimeo.com/video/${videoId}${
-      queryString ? '?' + queryString : ''
-    }`;
+    return {
+      kind: 'embed',
+      src: `https://player.vimeo.com/video/${videoId}${buildEmbedParams(
+        properties,
+        videoId,
+        false
+      )}`
+    };
   }
 
-  if (url.match(/\.(mp4|webm|ogg)$/i)) {
-    return url;
+  if (!SAFE_PROTOCOLS.has(parsed.protocol)) return null;
+
+  // The extension is read off the PATH, so a signed or cache-busted address
+  // (`…/clip.mp4?sig=…`) plays. The old test matched the whole string and
+  // anchored at its end, which rejected every url carrying a query — the
+  // ordinary shape of an uploaded asset.
+  if (FILE_EXTENSION.test(path) || properties?.sourceType === 'file') {
+    return { kind: 'file', src: url };
   }
 
   return null;
 };
 
-const VideoBlock = ({ block }: BlockRendererProps) => {
-  const videoUrl = block.value;
-  const properties = block.properties || {};
+/**
+ * A video: a YouTube or Vimeo embed, or a file the browser plays itself.
+ *
+ * Properties: url (on `block.value`), controls, autoplay, loop, muted,
+ * playsInline, poster, sourceType. Style: `aspect-ratio`.
+ */
+const VideoBlock = ({
+  block,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const videoUrl = block.value as string;
+  const properties = (block.properties || {}) as VideoProperties;
 
-  const embedUrl = getVideoEmbedUrl(videoUrl, properties);
+  const parsed = parseVideoSource(videoUrl, properties);
 
-  let content;
+  /**
+   * The author's choice wins; a Short supplies its own when they made none.
+   * With neither, the historic fixed height is kept, so every composition
+   * already rendering a video keeps its exact box.
+   */
+  const authored = getResponsiveValue(
+    block.styles?.['aspect-ratio'],
+    currentBreakpoint,
+    undefined
+  ) as string | undefined;
+  const ratio =
+    authored && authored !== 'auto'
+      ? authored
+      : parsed?.kind === 'embed'
+      ? parsed.defaultRatio
+      : undefined;
 
-  if (!videoUrl || !embedUrl) {
-    content = (
+  if (!videoUrl || !parsed) {
+    return (
       <div
         style={{
           minHeight: '300px',
@@ -87,42 +206,51 @@ const VideoBlock = ({ block }: BlockRendererProps) => {
         {!videoUrl ? 'No video URL provided' : 'Invalid video URL'}
       </div>
     );
-  } else if (embedUrl.includes('youtube.com') || embedUrl.includes('vimeo.com')) {
-    content = (
+  }
+
+  if (parsed.kind === 'embed') {
+    return (
       <iframe
-        src={embedUrl}
-        style={{
-          width: '100%',
-          height: '400px',
-          border: 'none'
-        }}
+        src={parsed.src}
+        style={
+          ratio
+            ? // The ratio decides the height. Asking for `height: 100%` instead
+              // collapses the player to nothing whenever the box around it is
+              // auto-height — which is what a block styled by its ratio is.
+              {
+                width: '100%',
+                height: 'auto',
+                aspectRatio: ratio,
+                border: 'none'
+              }
+            : { width: '100%', height: '400px', border: 'none' }
+        }
         allow="autoplay; fullscreen; picture-in-picture"
         allowFullScreen
       />
     );
-  } else {
-    content = (
-      <video
-        src={embedUrl}
-        controls={properties.controls !== false}
-        autoPlay={properties.autoplay}
-        loop={properties.loop}
-        muted={properties.muted}
-        poster={
-          typeof properties.poster === 'string' ? properties.poster : undefined
-        }
-        // Without it iOS opens the video full screen, which is never what an
-        // inline background clip is for.
-        playsInline={properties.playsInline !== false}
-        style={{
-          width: '100%',
-          height: 'auto'
-        }}
-      />
-    );
   }
 
-  return content;
+  return (
+    <video
+      src={parsed.src}
+      controls={properties.controls !== false}
+      autoPlay={properties.autoplay}
+      loop={properties.loop}
+      muted={properties.muted}
+      poster={
+        typeof properties.poster === 'string' ? properties.poster : undefined
+      }
+      // Without it iOS opens the video full screen, which is never what an
+      // inline background clip is for.
+      playsInline={properties.playsInline !== false}
+      style={
+        ratio
+          ? { width: '100%', aspectRatio: ratio, objectFit: 'cover' }
+          : { width: '100%', height: 'auto' }
+      }
+    />
+  );
 };
 
 export default VideoBlock;