@akinon/pz-theme 2.0.112-rc.0 → 2.0.113-beta.0

package/CHANGELOG.md

@@ -1,40 +1,20 @@
 # @akinon/pz-theme
 
-## 2.0.112-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c2]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71d]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b1]
-- Updated dependencies [1595d45]
-- Updated dependencies [dca1281]
-  - @akinon/next@2.0.112-rc.0
-  - @akinon/theme-contract@2.0.112-rc.0
+## 2.0.113-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd757]
+  - @akinon/next@2.0.113-beta.0
+  - @akinon/theme-contract@2.0.113-beta.0
+
+## 2.0.112
+
+### Patch Changes
+
+- 4abc0fe: ZERO-5086: Read the video source type through the breakpoint and give a tablet the mobile video
+  - @akinon/next@2.0.112
+  - @akinon/theme-contract@2.0.112
 
 ## 2.0.111
 

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.112-rc.0",
+  "version": "2.0.113-beta.0",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.112-rc.0",
+    "@akinon/next": "2.0.113-beta.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.112-rc.0",
+    "@akinon/theme-contract": "2.0.113-beta.0",
     "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.112-rc.0",
+    "@akinon/next": "2.0.113-beta.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

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

@@ -316,6 +316,17 @@ describe('VideoBlock', () => {
       expect(container.querySelector('video')).toHaveAttribute('src', url);
     });
 
+    it('plays an extensionless URL when the editor said so per breakpoint', () => {
+      // What the editor ACTUALLY writes for that dropdown: a property stored
+      // per breakpoint, never a bare string. Compared raw, the escape hatch
+      // never fired for a single composition authored in the editor.
+      const url = 'https://cdn.example.com/asset/9f2a';
+      const { container } = renderBlock(url, {
+        sourceType: { desktop: 'file' }
+      });
+      expect(container.querySelector('video')).toHaveAttribute('src', url);
+    });
+
     it('refuses the same URL when they have not', () => {
       renderBlock('https://cdn.example.com/asset/9f2a');
       expect(screen.getByText('Invalid video URL')).toBeInTheDocument();
@@ -522,6 +533,40 @@ describe('VideoBlock', () => {
       ).toBe('https://cdn.example.com/mobile.mp4');
     });
 
+    it('plays the mobile file on a tablet too, the way the CSS already does', () => {
+      // The mobile media query is max-width: 1023px, so at 800px every style
+      // around this player is already the mobile one. Reading the source with
+      // `=== 'mobile'` left the tablet on the landscape clip inside a layout
+      // that had gone vertical.
+      const { container } = renderAt(
+        'https://cdn.example.com/desktop.mp4',
+        {
+          useDifferentMobileVideo: true,
+          mobileUrl: 'https://cdn.example.com/mobile.mp4'
+        },
+        'tablet'
+      );
+      expect((container.querySelector('video') as HTMLVideoElement).src).toBe(
+        'https://cdn.example.com/mobile.mp4'
+      );
+    });
+
+    it('takes the mobile poster on a tablet for the same reason', () => {
+      const { container } = renderAt(
+        'https://cdn.example.com/desktop.mp4',
+        {
+          useDifferentMobileVideo: true,
+          mobilePoster: 'https://cdn.example.com/mobile.jpg',
+          poster: 'https://cdn.example.com/desktop.jpg'
+        },
+        'tablet'
+      );
+      expect(container.querySelector('video')).toHaveAttribute(
+        'poster',
+        'https://cdn.example.com/mobile.jpg'
+      );
+    });
+
     it('still plays the desktop file on desktop even when a mobile override is set', () => {
       const { container } = renderAt(
         'https://cdn.example.com/desktop.mp4',

package/src/blocks/video-block.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef, useState } from 'react';
-import { getResponsiveValue } from '../utils';
+import { getResponsiveValue, isNarrowBreakpoint } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
 /**
@@ -194,7 +194,25 @@ const VideoBlock = ({
   const desktopUrl = block.value as string;
   const properties = (block.properties || {}) as VideoProperties;
 
-  const isMobile = currentBreakpoint === 'mobile';
+  /**
+   * "Narrower than desktop", not "is the phone".
+   *
+   * `=== 'mobile'` left the 768-1023 band on the DESKTOP video while every
+   * style around it was the mobile one — `MOBILE_MEDIA_QUERY` is
+   * `max-width: 1023px`, so a tablet reads the mobile rule unless a tablet rule
+   * narrows it, but `breakpointForWidth(800)` answers `'tablet'` and this
+   * comparison said no. A merchant who uploaded a portrait clip for phones got
+   * the landscape one on an iPad, inside a layout that had already gone
+   * vertical.
+   *
+   * `isNarrowBreakpoint` is the predicate written for exactly these call sites
+   * — the ones that asked `=== 'mobile'` back when mobile was the only other
+   * value — and it is what `hover-showcase-section.tsx` and
+   * `order-tracking-lookup-section.tsx` already use for their own `isMobile`.
+   * This also moves the custom play/pause button to its mobile corner on a
+   * tablet, which is the same inheritance every other mobile treatment has.
+   */
+  const isMobile = isNarrowBreakpoint(currentBreakpoint);
   const useDifferentMobileVideo = !!getResponsiveValue(
     properties.useDifferentMobileVideo,
     currentBreakpoint,
@@ -211,7 +229,24 @@ const VideoBlock = ({
   // `properties` handed over RAW, not resolved: `buildEmbedParams` reads
   // `autoplay`/`loop`/`muted`/`controls` the same way the native `<video>`
   // below deliberately still does — see the note there.
-  const parsed = parseVideoSource(videoUrl, properties);
+  //
+  // `sourceType` is the one exception, and it is the same defect that note
+  // records for `controls` and `poster`: the editor stores `{ desktop: 'file' }`,
+  // so `properties?.sourceType === 'file'` inside `parseVideoSource` has been
+  // comparing an OBJECT to a string and the escape hatch has never once fired
+  // for anything authored in the editor. An uploaded clip whose address carries
+  // no extension — the ordinary shape of a signed CDN link — therefore had no
+  // remedy at all. `getResponsiveValue` passes a plain string straight through,
+  // so reading it here handles both shapes and repairs what is already
+  // published. Unlike autoplay/loop/muted, reading this one correctly can only
+  // turn a dead "Invalid video URL" into a playing video.
+  const sourceType = getResponsiveValue(
+    properties.sourceType,
+    currentBreakpoint,
+    'auto'
+  ) as string;
+
+  const parsed = parseVideoSource(videoUrl, { ...properties, sourceType });
 
   /**
    * Read through the breakpoint, the way `aspect-ratio` already is.