@graphcommerce/magento-product 10.1.0-canary.21 → 10.1.0-canary.22

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 10.1.0-canary.22
+
+### Minor Changes
+
+- [#2627](https://github.com/graphcommerce-org/graphcommerce/pull/2627) [`95c188f`](https://github.com/graphcommerce-org/graphcommerce/commit/95c188fcd0dc6cb4ca3edc9877d203d45fe18bb0) - Add `YoutubeEmbed` component — a lightweight lazy-loading YouTube player that defers iframe creation until the user clicks the poster. Uses preconnect on hover for fast playback start and is styled with MUI sx, so no external CSS is required. Supports playlists, no-cookie mode, custom aspect ratios and ad-network preconnect hints.
+
+  `ProductVideo` (used by `ProductPageGallery`) now delegates YouTube playback to `YoutubeEmbed`, so any product whose Magento `media_gallery` contains a YouTube video entry gets the new lazy-loading player on its product page. Vimeo and self-hosted video paths are unchanged. The Magento preview image is passed as the YoutubeEmbed `thumbnail` so the visible poster stays consistent with the rest of the gallery.
+
+  Fix `SidebarGallery` so it forwards the `Additional` and `slotProps` from each image to `MotionImageAspect`. Before this fix the gallery silently dropped both props, which meant any `Additional` overlay configured by `ProductPageGallery` (the `<ProductVideo>` overlay with its `PlayCircle` and the new `YoutubeEmbed`) never reached the DOM. That was a latent regression that made all video-gallery entries render as static images, with or without this PR's YouTube changes.
+
+  Fix `playwright.config.ts` so `npx playwright test` actually loads. The config previously imported `examples/magento-graphcms/next.config.ts`, which transitively pulled `@graphcommerce/next-config`'s ESM build into a CJS context and crashed with `ReferenceError: exports is not defined`. Replaced with an opt-in `PLAYWRIGHT_LOCALES` env var for the multi-locale projects that the next.config import was meant to drive. ([@paales](https://github.com/paales))
+
 ## 10.1.0-canary.21
 
 ## 10.1.0-canary.20

package/components/ProductPageGallery/ProductVideo.tsx

@@ -1,5 +1,5 @@
 import type { MotionImageAspectPropsAdditional } from '@graphcommerce/framer-scroller'
-import { Fab, iconPlay, IconSvg, sxx, type FabProps } from '@graphcommerce/next-ui'
+import { Fab, iconPlay, IconSvg, sxx, YoutubeEmbed, type FabProps } from '@graphcommerce/next-ui'
 import { Avatar, Box, IconButton, styled, type SxProps, type Theme } from '@mui/material'
 import { m, type MotionProps, type MotionStyle } from 'framer-motion'
 import React, { useState } from 'react'
@@ -90,6 +90,11 @@ function getEmbedUrl(regularUrl: string, noCookie: boolean = true, muted: boolea
   return null
 }
 
+function extractYoutubeId(src: string): string | null {
+  const match = src.match(youtubeRegExp)
+  return match?.[1] ?? null
+}
+
 export function ProductVideo(props: ProductVideoProps) {
   const { video, autoplay, iframeProps, videoProps, sx, style, layout, width, height } = props
 
@@ -102,6 +107,33 @@ export function ProductVideo(props: ProductVideoProps) {
   const src = videoContent.video_url
   const title = videoContent.video_title || undefined
 
+  const youtubeId = extractYoutubeId(src)
+  if (youtubeId) {
+    return (
+      <YoutubeEmbed
+        id={youtubeId}
+        title={title ?? ''}
+        thumbnail={video?.url ?? undefined}
+        aspectWidth={width ?? 16}
+        aspectHeight={height ?? 9}
+        sx={sxx(
+          {
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: '100%',
+            height: 'auto',
+            maxWidth: '99.6%',
+            maxHeight: '100%',
+            aspectRatio: width && height ? `${width} / ${height}` : '16 / 9',
+          },
+          sx,
+        )}
+      />
+    )
+  }
+
   const baseSx: SxProps<Theme> = (theme) => ({
     display: 'block',
     maxWidth: '99.6%',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.1.0-canary.21",
+  "version": "10.1.0-canary.22",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.1.0-canary.21",
-    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.21",
-    "@graphcommerce/framer-next-pages": "^10.1.0-canary.21",
-    "@graphcommerce/framer-scroller": "^10.1.0-canary.21",
-    "@graphcommerce/graphql": "^10.1.0-canary.21",
-    "@graphcommerce/graphql-mesh": "^10.1.0-canary.21",
-    "@graphcommerce/image": "^10.1.0-canary.21",
-    "@graphcommerce/magento-cart": "^10.1.0-canary.21",
-    "@graphcommerce/magento-store": "^10.1.0-canary.21",
-    "@graphcommerce/next-ui": "^10.1.0-canary.21",
-    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.21",
-    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.21",
+    "@graphcommerce/ecommerce-ui": "^10.1.0-canary.22",
+    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.22",
+    "@graphcommerce/framer-next-pages": "^10.1.0-canary.22",
+    "@graphcommerce/framer-scroller": "^10.1.0-canary.22",
+    "@graphcommerce/graphql": "^10.1.0-canary.22",
+    "@graphcommerce/graphql-mesh": "^10.1.0-canary.22",
+    "@graphcommerce/image": "^10.1.0-canary.22",
+    "@graphcommerce/magento-cart": "^10.1.0-canary.22",
+    "@graphcommerce/magento-store": "^10.1.0-canary.22",
+    "@graphcommerce/next-ui": "^10.1.0-canary.22",
+    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.22",
+    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.22",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",

package/test/youtubeEmbedInGallery.playwright.ts

@@ -0,0 +1,62 @@
+import { expect, test } from '@playwright/test'
+
+/**
+ * Validates that a product whose `media_gallery` contains a YouTube video
+ * renders the lazy-loading `YoutubeEmbed` component in the product gallery,
+ * shows the Magento preview image as the poster, and swaps in the YouTube
+ * iframe on click.
+ *
+ * Backend prerequisite: the configured Magento backend must have a product
+ * at the URL below with at least one `ProductVideo` entry pointing at a
+ * YouTube URL. Override with `PRODUCT_URL` and `EXPECTED_YOUTUBE_ID` env
+ * vars when running against a different backend.
+ */
+const PRODUCT_URL = process.env.PRODUCT_URL ?? '/p/spooky-girl-gc-1-sock'
+const EXPECTED_YOUTUBE_ID = process.env.EXPECTED_YOUTUBE_ID ?? 'u_pe6qAhz5U'
+
+test.describe('YoutubeEmbed in product media gallery', () => {
+  test('renders the YouTube poster, lazy-loads the iframe on click', async ({ page }) => {
+    await page.goto(PRODUCT_URL, { waitUntil: 'domcontentloaded' })
+
+    // Wait for the gallery to mount. We don't depend on a specific slide order
+    // — the YouTube slide may be 2nd, 3rd, etc. depending on the product.
+    await page.waitForSelector('[class*="SidebarGallery-root"]', { timeout: 30_000 })
+
+    const youtubeEmbed = page.locator('[class*="YoutubeEmbed-root"]').first()
+    await expect(youtubeEmbed).toBeAttached({ timeout: 15_000 })
+
+    // Magento preview image is forwarded as the YoutubeEmbed `thumbnail` prop,
+    // so the background should be the configured Magento media URL — not the
+    // YouTube auto-generated thumbnail at i.ytimg.com.
+    const initial = await youtubeEmbed.evaluate((el) => {
+      const styles = getComputedStyle(el)
+      return {
+        dataTitle: el.getAttribute('data-title'),
+        backgroundImage: styles.backgroundImage,
+        hasIframe: !!el.querySelector('iframe'),
+        playButtonLabel: el.querySelector('button[type="button"]')?.getAttribute('aria-label'),
+      }
+    })
+    expect(initial.hasIframe).toBe(false)
+    expect(initial.dataTitle).toBeTruthy()
+    expect(initial.playButtonLabel).toContain('Watch')
+    expect(initial.backgroundImage).not.toContain('i.ytimg.com')
+    expect(initial.backgroundImage).toContain('http')
+
+    // Hovering preconnects to youtube-nocookie.com so the iframe load is fast.
+    await youtubeEmbed.hover()
+    await expect(
+      page.locator('link[rel="preconnect"][href*="youtube"]'),
+    ).toHaveCount(1, { timeout: 5_000 })
+
+    // Click swaps the poster for the actual YouTube iframe with autoplay=1.
+    await youtubeEmbed.click()
+    const iframe = youtubeEmbed.locator('iframe')
+    await expect(iframe).toBeAttached({ timeout: 5_000 })
+
+    const src = await iframe.getAttribute('src')
+    expect(src).toContain(EXPECTED_YOUTUBE_ID)
+    expect(src).toContain('autoplay=1')
+    expect(src).toMatch(/youtube(-nocookie)?\.com/)
+  })
+})