@graphcommerce/next-ui 10.1.0-canary.20 → 10.1.0-canary.22

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # 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
+
+### Patch Changes
+
+- [#2633](https://github.com/graphcommerce-org/graphcommerce/pull/2633) [`7554ad4`](https://github.com/graphcommerce-org/graphcommerce/commit/7554ad479cf78d790eeedd3f862c5d57403bda51) - Fix: `<Fab variant="extended">` no longer gets a fixed `width` from `MuiFabSizes`. The size-based width/height variants are now scoped to `variant: 'circular'` only, so extended Fabs can grow with their label (controlled via `min-width` instead) as MUI intends. Previously every extended Fab without an explicit `size` matched the default `large` rule and was forced to 54px wide. ([@paales](https://github.com/paales))
+
 ## 10.1.0-canary.20
 
 ## 10.1.0-canary.19

package/FramerScroller/SidebarGallery.tsx

@@ -254,13 +254,11 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   <MotionImageAspect
                     // eslint-disable-next-line react/no-array-index-key
                     key={idx}
+                    {...image}
                     layout
                     layoutDependency={zoomed}
-                    src={image.src}
-                    width={image.width}
-                    height={image.height}
                     loading={idx === 0 ? 'eager' : 'lazy'}
-                    sx={{ display: 'block', objectFit: 'contain' }}
+                    sx={sxx({ display: 'block', objectFit: 'contain' }, image.sx)}
                     sizes={{
                       0: '100vw',
                       [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',

package/Theme/MuiFab.ts

@@ -80,11 +80,14 @@ const sizes: FabSize[] = [
 /**
  * This defines the sizes for the added responsive variant.
  *
+ * Only applied to circular (default) Fabs — extended Fabs must keep `width: auto` and rely on their
+ * content + `min-width`, otherwise they collapse to a fixed square regardless of label.
+ *
  * To override the sizes, please do not add variant declarations direcly, but modify
  * `yourTheme.components.MuiFabExtra.sizes` instead.
  */
 export const MuiFabSizes: FabVariants = sizes.map((size) => ({
-  props: { size },
+  props: { size, variant: 'circular' },
   style: ({ theme }) => fabWidthHeight(size, theme),
 }))
 

package/YoutubeEmbed/YoutubeEmbed.tsx

@@ -0,0 +1,201 @@
+import { Box, type SxProps, type Theme } from '@mui/material'
+import * as React from 'react'
+import { extendableComponent } from '../Styles/extendableComponent'
+import { sxx } from '../utils/sxx'
+
+export type YoutubePosterResolution =
+  | 'default'
+  | 'mqdefault'
+  | 'hqdefault'
+  | 'sddefault'
+  | 'maxresdefault'
+
+export type YoutubeEmbedProps = {
+  id: string
+  title: string
+  announce?: string
+  adNetwork?: boolean
+  aspectHeight?: number
+  aspectWidth?: number
+  noCookie?: boolean
+  cookie?: boolean
+  params?: string
+  playlist?: boolean
+  playlistCoverId?: string
+  poster?: YoutubePosterResolution
+  webp?: boolean
+  muted?: boolean
+  thumbnail?: string
+  rel?: 'preload' | 'prefetch'
+  onIframeAdded?: () => void
+  sx?: SxProps<Theme>
+  ref?: React.Ref<HTMLIFrameElement>
+}
+
+const componentName = 'YoutubeEmbed' as const
+const parts = ['root', 'poster', 'playButton', 'iframe'] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function YoutubeEmbed(props: YoutubeEmbedProps) {
+  const {
+    id,
+    title,
+    announce = 'Watch',
+    adNetwork = false,
+    aspectHeight = 9,
+    aspectWidth = 16,
+    noCookie = true,
+    cookie = false,
+    params = '',
+    playlist = false,
+    playlistCoverId,
+    poster = 'hqdefault',
+    webp = false,
+    muted = false,
+    thumbnail,
+    rel = 'preload',
+    onIframeAdded,
+    sx,
+    ref,
+  } = props
+
+  const [preconnected, setPreconnected] = React.useState(false)
+  const [iframeReady, setIframeReady] = React.useState(false)
+
+  const videoId = encodeURIComponent(id)
+  const videoPlaylistCoverId =
+    typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null
+
+  const format = webp ? 'webp' : 'jpg'
+  const vi = webp ? 'vi_webp' : 'vi'
+  const posterUrl =
+    thumbnail ||
+    (!playlist
+      ? `https://i.ytimg.com/${vi}/${videoId}/${poster}.${format}`
+      : `https://i.ytimg.com/${vi}/${videoPlaylistCoverId}/${poster}.${format}`)
+
+  const ytUrl = cookie || !noCookie ? 'https://www.youtube.com' : 'https://www.youtube-nocookie.com'
+  const paramsSuffix = params ? `&${params}` : ''
+  const mutedSuffix = muted ? '&mute=1' : ''
+
+  const iframeSrc = !playlist
+    ? `${ytUrl}/embed/${videoId}?autoplay=1&state=1${mutedSuffix}${paramsSuffix}`
+    : `${ytUrl}/embed/videoseries?autoplay=1${mutedSuffix}&list=${videoId}${paramsSuffix}`
+
+  const warmConnections = () => {
+    if (!preconnected) setPreconnected(true)
+  }
+  const addIframe = () => {
+    if (!iframeReady) setIframeReady(true)
+  }
+
+  React.useEffect(() => {
+    if (iframeReady) onIframeAdded?.()
+  }, [iframeReady, onIframeAdded])
+
+  return (
+    <>
+      <link rel={rel} href={posterUrl} as='image' />
+      {preconnected && (
+        <>
+          <link rel='preconnect' href={ytUrl} />
+          <link rel='preconnect' href='https://www.google.com' />
+          {adNetwork && (
+            <>
+              <link rel='preconnect' href='https://static.doubleclick.net' />
+              <link rel='preconnect' href='https://googleads.g.doubleclick.net' />
+            </>
+          )}
+        </>
+      )}
+      <Box
+        className={classes.root}
+        onPointerOver={warmConnections}
+        onClick={addIframe}
+        data-title={title}
+        sx={sxx(
+          {
+            position: 'relative',
+            display: 'block',
+            contain: 'content',
+            backgroundPosition: 'center center',
+            backgroundSize: 'cover',
+            cursor: 'pointer',
+            maxWidth: '100%',
+            aspectRatio: `${aspectWidth} / ${aspectHeight}`,
+            backgroundImage: `url(${posterUrl})`,
+            '&::before': {
+              content: '""',
+              display: 'block',
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              left: 0,
+              height: '60px',
+              background:
+                'linear-gradient(180deg, rgba(0,0,0,0.247) 0%, rgba(0,0,0,0) 100%)',
+              pointerEvents: 'none',
+            },
+          },
+          sx,
+        )}
+      >
+        {!iframeReady && (
+          <Box
+            component='button'
+            type='button'
+            className={classes.playButton}
+            aria-label={`${announce} ${title}`}
+            sx={{
+              border: 0,
+              padding: 0,
+              cursor: 'pointer',
+              width: '68px',
+              height: '48px',
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              marginLeft: '-34px',
+              marginTop: '-24px',
+              borderRadius: '14%',
+              transition: 'background-color 100ms cubic-bezier(0, 0, 0.2, 1)',
+              backgroundColor: '#212121',
+              opacity: 0.8,
+              '&:hover, &:focus': { backgroundColor: 'red', opacity: 1 },
+              '&::before': {
+                content: '""',
+                borderStyle: 'solid',
+                borderWidth: '11px 0 11px 19px',
+                borderColor: 'transparent transparent transparent #fff',
+                display: 'block',
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate3d(-50%, -50%, 0)',
+              },
+            }}
+          />
+        )}
+        {iframeReady && (
+          <Box
+            component='iframe'
+            ref={ref}
+            className={classes.iframe}
+            title={title}
+            allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
+            allowFullScreen
+            src={iframeSrc}
+            sx={{
+              border: 0,
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+            }}
+          />
+        )}
+      </Box>
+    </>
+  )
+}

package/YoutubeEmbed/index.ts

@@ -0,0 +1 @@
+export * from './YoutubeEmbed'

package/index.ts

@@ -66,6 +66,7 @@ export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'
+export * from './YoutubeEmbed'
 export * from './utils/cookie'
 export * from './utils/cssFlags'
 export * from './utils/normalizeLocale'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.1.0-canary.20",
+  "version": "10.1.0-canary.22",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -43,13 +43,13 @@
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.1",
-    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.20",
-    "@graphcommerce/framer-next-pages": "^10.1.0-canary.20",
-    "@graphcommerce/framer-scroller": "^10.1.0-canary.20",
-    "@graphcommerce/framer-utils": "^10.1.0-canary.20",
-    "@graphcommerce/image": "^10.1.0-canary.20",
-    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.20",
-    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.20",
+    "@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/framer-utils": "^10.1.0-canary.22",
+    "@graphcommerce/image": "^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",