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

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.132-beta.0
+## 2.0.132
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.132-beta.0
-  - @akinon/theme-contract@2.0.132-beta.0
+- 6a296eb: ZERO-5161: resolve video clip and posters per storefront language
+  - @akinon/next@2.0.132
+  - @akinon/theme-contract@2.0.132
 
 ## 2.0.131
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.132-beta.0",
+  "version": "2.0.132",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.132-beta.0",
+    "@akinon/next": "2.0.132",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.132-beta.0",
+    "@akinon/theme-contract": "2.0.132",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "react-multi-carousel": "2.8.4",
@@ -21,7 +21,7 @@
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.132-beta.0",
+    "@akinon/next": "2.0.132",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/custom-catalog-announce.test.ts

@@ -375,7 +375,10 @@ describe('PLACEHOLDERS_AVAILABLE announce', () => {
     // The literal string rather than the constant: the editor matches it by
     // name and drops a name it does not know, so this pins the wire value a
     // rename would silently break.
-    expect(frames()[0].actionCapabilities).toEqual(['add-to-cart-after-add']);
+    expect(frames()[0].actionCapabilities).toEqual([
+      'add-to-cart-after-add',
+      'localized-video'
+    ]);
   });
 
   it('keeps the action capability on the designer re-announce too', () => {
@@ -401,8 +404,8 @@ describe('PLACEHOLDERS_AVAILABLE announce', () => {
     // panel back to "On Click" halfway through a session.
     expect(postMessage).toHaveBeenCalledTimes(2);
     expect(frames().map((frame) => frame.actionCapabilities)).toEqual([
-      ['add-to-cart-after-add'],
-      ['add-to-cart-after-add']
+      ['add-to-cart-after-add', 'localized-video'],
+      ['add-to-cart-after-add', 'localized-video']
     ]);
   });
 

package/src/action-capabilities.ts

@@ -31,8 +31,9 @@
  * the placeholder registry announces this, and it must not have to pull a
  * client component in to say one list of strings.
  */
-export type ActionCapability = 'add-to-cart-after-add';
+export type ActionCapability = 'add-to-cart-after-add' | 'localized-video';
 
 export const ACTION_CAPABILITIES: readonly ActionCapability[] = [
-  'add-to-cart-after-add'
+  'add-to-cart-after-add',
+  'localized-video'
 ];

package/src/blocks/__tests__/video-block-locale.test.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+let localizationValue: Record<string, unknown> = {};
+
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => localizationValue
+}));
+
+import VideoBlock from '../video-block';
+import type { BlockRendererProps } from '../block-renderer-registry';
+
+const setLocalization = (
+  locale: string,
+  locales: string[] = ['tr', 'en'],
+  defaultLocaleValue = 'tr'
+) => {
+  localizationValue = {
+    locale,
+    locales: locales.map((value) => ({ value, label: value.toUpperCase() })),
+    defaultLocaleValue
+  };
+};
+
+const TR = 'https://cdn.example.com/hero-tr.mp4';
+const EN = 'https://cdn.example.com/hero-en.mp4';
+const TR_MOBILE = 'https://cdn.example.com/hero-tr-mobile.mp4';
+const EN_MOBILE = 'https://cdn.example.com/hero-en-mobile.mp4';
+const TR_POSTER = 'https://cdn.example.com/poster-tr.jpg';
+const EN_POSTER = 'https://cdn.example.com/poster-en.jpg';
+
+const mount = (
+  value: unknown,
+  properties: Record<string, unknown> = {},
+  currentBreakpoint = 'desktop'
+) =>
+  render(
+    <VideoBlock
+      {...({
+        block: { id: 'v', type: 'video', value, properties },
+        placeholderId: 'p1',
+        sectionId: 's1',
+        isDesigner: false,
+        currentBreakpoint
+      } as unknown as BlockRendererProps)}
+    />
+  ).container;
+
+const srcOf = (
+  value: unknown,
+  properties: Record<string, unknown> = {},
+  currentBreakpoint = 'desktop'
+) =>
+  mount(value, properties, currentBreakpoint)
+    .querySelector('video')
+    ?.getAttribute('src') ?? null;
+
+const posterOf = (
+  properties: Record<string, unknown>,
+  currentBreakpoint = 'desktop'
+) =>
+  mount(TR, properties, currentBreakpoint)
+    .querySelector('video')
+    ?.getAttribute('poster') ?? null;
+
+const withViewport = (narrow: boolean, run: () => void) => {
+  const original = window.matchMedia;
+  window.matchMedia = ((query: string) => ({
+    matches: narrow && query.includes('max-width'),
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false
+  })) as unknown as typeof window.matchMedia;
+  try {
+    run();
+  } finally {
+    window.matchMedia = original;
+  }
+};
+
+beforeEach(() => setLocalization('tr'));
+
+describe('the clip, per language', () => {
+  it('keeps playing a plain address exactly as before', () => {
+    expect(srcOf(TR)).toBe(TR);
+
+    setLocalization('en');
+    expect(srcOf(TR)).toBe(TR);
+  });
+
+  it('picks the entry for the page’s language from a per-language map', () => {
+    expect(srcOf({ tr: TR, en: EN })).toBe(TR);
+
+    setLocalization('en');
+    expect(srcOf({ tr: TR, en: EN })).toBe(EN);
+  });
+
+  it('falls back to the default language, then to the first clip there is', () => {
+    setLocalization('en');
+    expect(srcOf({ tr: TR, en: '' })).toBe(TR);
+
+    setLocalization('en', ['tr', 'en'], 'de');
+    expect(srcOf({ tr: TR, en: '' })).toBe(TR);
+  });
+
+  it('reads the map the storefront receives serialised in a widget attribute', () => {
+    setLocalization('en');
+    expect(srcOf(JSON.stringify({ tr: TR, en: EN }))).toBe(EN);
+  });
+
+  it('shows nothing rather than breaking when the map names languages the store lacks', () => {
+    setLocalization('de', ['de']);
+    const container = mount({ tr: TR, en: EN });
+
+    expect(container.querySelector('video')).toBeNull();
+    expect(container.querySelector('iframe')).toBeNull();
+  });
+
+  it('resolves an embed per language too', () => {
+    const value = {
+      tr: 'https://www.youtube.com/watch?v=trclip01',
+      en: 'https://www.youtube.com/watch?v=enclip01'
+    };
+
+    expect(mount(value).querySelector('iframe')?.getAttribute('src')).toContain(
+      'trclip01'
+    );
+
+    setLocalization('en');
+    expect(mount(value).querySelector('iframe')?.getAttribute('src')).toContain(
+      'enclip01'
+    );
+  });
+});
+
+describe('the mobile clip, per language', () => {
+  const mobile = (mobileUrl: unknown) => ({
+    useDifferentMobileVideo: true,
+    mobileUrl
+  });
+
+  it('keeps honouring a plain address and the per-breakpoint shape older JSON holds', () => {
+    withViewport(true, () => {
+      expect(srcOf(TR, mobile(TR_MOBILE), 'mobile')).toBe(TR_MOBILE);
+      expect(srcOf(TR, mobile({ desktop: TR_MOBILE }), 'mobile')).toBe(
+        TR_MOBILE
+      );
+    });
+  });
+
+  it('picks the mobile clip for the page’s language', () => {
+    withViewport(true, () => {
+      expect(
+        srcOf(TR, mobile({ tr: TR_MOBILE, en: EN_MOBILE }), 'mobile')
+      ).toBe(TR_MOBILE);
+
+      setLocalization('en');
+      expect(
+        srcOf(EN, mobile({ tr: TR_MOBILE, en: EN_MOBILE }), 'mobile')
+      ).toBe(EN_MOBILE);
+    });
+  });
+
+  it('leaves the desktop clip alone on a wide screen', () => {
+    setLocalization('en');
+    withViewport(false, () => {
+      expect(
+        srcOf({ tr: TR, en: EN }, mobile({ tr: TR_MOBILE, en: EN_MOBILE }))
+      ).toBe(EN);
+    });
+  });
+});
+
+describe('the poster, per language', () => {
+  it('keeps a plain poster as it is', () => {
+    expect(posterOf({ poster: TR_POSTER })).toBe(TR_POSTER);
+  });
+
+  it('picks the poster for the page’s language, on desktop and on the phone', () => {
+    expect(posterOf({ poster: { tr: TR_POSTER, en: EN_POSTER } })).toBe(
+      TR_POSTER
+    );
+
+    setLocalization('en');
+    expect(posterOf({ poster: { tr: TR_POSTER, en: EN_POSTER } })).toBe(
+      EN_POSTER
+    );
+    expect(
+      posterOf(
+        {
+          useDifferentMobileVideo: true,
+          mobileUrl: EN_MOBILE,
+          mobilePoster: { tr: TR_POSTER, en: EN_POSTER }
+        },
+        'mobile'
+      )
+    ).toBe(EN_POSTER);
+  });
+});

package/src/blocks/video-block.tsx

@@ -9,6 +9,11 @@ import {
   partAttrs
 } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
+import {
+  resolveLocalizedValue,
+  useValueLocale,
+  type ValueLocale
+} from '../utils/localized-value';
 
 /**
  * What an author's URL turned out to be.
@@ -311,6 +316,17 @@ const setAtAnyBreakpoint = (value: unknown): boolean => {
 };
 
 /** The first address a per-breakpoint value carries, asked the same way. */
+const localizedMedia = (
+  value: unknown,
+  currentBreakpoint: string,
+  valueLocale: ValueLocale
+): string => {
+  const localized = resolveLocalizedValue(value, valueLocale);
+  const atBreakpoint = getResponsiveValue(localized, currentBreakpoint, '');
+  const resolved = resolveLocalizedValue(atBreakpoint, valueLocale);
+  return typeof resolved === 'string' ? resolved : '';
+};
+
 const firstUrlAtAnyBreakpoint = (value: unknown): string => {
   if (typeof value === 'string') return value;
   if (!value || typeof value !== 'object' || Array.isArray(value)) return '';
@@ -334,7 +350,11 @@ const VideoBlock = ({
   isDesigner = false,
   currentBreakpoint = 'desktop'
 }: BlockRendererProps) => {
-  const desktopUrl = block.value as string;
+  const valueLocale = useValueLocale();
+  const localizedValue = resolveLocalizedValue(block.value, valueLocale);
+  const desktopUrl = (
+    typeof localizedValue === 'string' ? localizedValue : block.value
+  ) as string;
   const properties = (block.properties || {}) as VideoProperties;
 
   /**
@@ -361,11 +381,11 @@ const VideoBlock = ({
     currentBreakpoint,
     false
   );
-  const mobileUrl = getResponsiveValue(
+  const mobileUrl = localizedMedia(
     properties.mobileUrl,
     currentBreakpoint,
-    ''
-  ) as string;
+    valueLocale
+  );
   const videoUrl =
     isMobile && useDifferentMobileVideo && mobileUrl ? mobileUrl : desktopUrl;
 
@@ -400,7 +420,9 @@ const VideoBlock = ({
    * the element with no source at all and the effect below names the one file
    * this viewport needs — see it for why the server cannot decide this.
    */
-  const mobileUrlAnywhere = firstUrlAtAnyBreakpoint(properties.mobileUrl);
+  const mobileUrlAnywhere = firstUrlAtAnyBreakpoint(
+    resolveLocalizedValue(properties.mobileUrl, valueLocale)
+  );
   const hasDistinctMobileVideo =
     setAtAnyBreakpoint(properties.useDifferentMobileVideo) &&
     !!mobileUrlAnywhere &&
@@ -430,16 +452,16 @@ const VideoBlock = ({
   const nativeControls =
     getResponsiveValue(properties.controls, currentBreakpoint, true) !== false;
 
-  const desktopPoster = getResponsiveValue(
+  const desktopPoster = localizedMedia(
     properties.poster,
     currentBreakpoint,
-    ''
-  ) as string;
-  const mobilePoster = getResponsiveValue(
+    valueLocale
+  );
+  const mobilePoster = localizedMedia(
     properties.mobilePoster,
     currentBreakpoint,
-    ''
-  ) as string;
+    valueLocale
+  );
   const posterUrl =
     isMobile && useDifferentMobileVideo && mobilePoster
       ? mobilePoster