feat(next-ui): add YoutubeEmbed component#2627
Merged
Merged
Conversation
Lightweight lazy-loaded YouTube player that defers iframe creation until the user clicks the poster. Uses preconnect on hover for fast playback start and is styled entirely with MUI sx, so no external CSS is required. Ported from the unfinished `feature/todo-list-paul` branch and modernised: - styling moved from external `react-lite-youtube-embed` CSS classes to MUI `Box` + `sx`, so the component works out of the box - React 19 ref-as-prop pattern (no `forwardRef`) - supports playlists, no-cookie mode, custom aspect ratios, and ad-network preconnect hints
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 45b3c66 The changes in this PR will be included in the next version bump. This PR includes changesets to release 86 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Add `copy/pages/test/youtube-embed.tsx` that demonstrates the new `YoutubeEmbed` component in four configurations: - default 16:9 - custom 1:1 aspect - playlist with `cookie` (youtube.com instead of youtube-nocookie.com) - muted with `maxresdefault` poster Link from the `/test` overview page so the demo is discoverable.
`ProductVideo` (rendered by `ProductPageGallery`) previously embedded YouTube videos with a plain `<iframe>` that loaded only after the user clicked the play overlay. Switch the YouTube path to the new `YoutubeEmbed` component from next-ui, which preconnects to YouTube on hover and lazy-loads the iframe on click. Vimeo and self-hosted video paths are unchanged. The Magento media-gallery preview image is forwarded as the `thumbnail` prop, so the poster the user sees before playback stays consistent with the rest of the product gallery (no jump to a YouTube-generated thumbnail). Replaces the throwaway `demo-magento-graphcommerce/copy/pages/test/youtube-embed.tsx` demo route — a feature lands in the example storefronts by wiring it into an existing flow (here: product page → media gallery → YouTube entry), not by adding a separate test route.
`SidebarGallery` was spreading only `src`, `width`, `height`, `loading`,
`sx`, `sizes`, and `alt` onto each `MotionImageAspect`. The `Additional`
component and `slotProps` set by `ProductPageGallery` for video entries
were silently dropped, so `<ProductVideo>` (and now `<YoutubeEmbed>`)
never reached the DOM — every gallery video slide rendered as a static
image with no play button at all.
Spread the full `image` props onto `MotionImageAspect` instead, and
merge `image.sx` into the gallery's default `{ display: 'block',
objectFit: 'contain' }` via `sxx` so the per-image `objectFit: 'cover'`
that ProductPageGallery sets for non-image slides also takes effect.
Also: fix playwright.config.ts so `npx playwright test` actually loads.
The previous config imported `examples/magento-graphcms/next.config.ts`,
which transitively pulls `@graphcommerce/next-config`'s ESM build into
a CJS context and crashes Playwright's TS loader with
`ReferenceError: exports is not defined in ES module scope`. The
import was only used to read i18n locales for multi-locale project
generation; replace it with an opt-in `PLAYWRIGHT_LOCALES=nl,de` env
var so the default config no longer touches Next.js internals.
Add the first playwright test for this PR's showcase:
`packages/magento-product/test/youtubeEmbedInGallery.playwright.ts`
navigates to a product with a YouTube video in its media gallery,
asserts that `YoutubeEmbed-root` is present, that the poster comes
from the Magento preview image (not `i.ytimg.com`), that hovering
adds the `<link rel="preconnect">` to YouTube, and that clicking
swaps in the iframe with the expected video id and `autoplay=1`.
`PRODUCT_URL` and `EXPECTED_YOUTUBE_ID` env vars override the
backend-specific defaults.
`npx playwright test` writes `test-results/.last-run.json` (and a full `playwright-report/` on failures) next to the runner. These are local artifacts, not source — exclude them from git.
Member
Author
|
poster |
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
YoutubeEmbedcomponent to@graphcommerce/next-ui— a lightweight, lazy-loaded YouTube player that defers iframe creation until the user clicks the poster.Box+sxstyling, no external CSS file to import.Ported from the unfinished
feature/todo-list-paulbranch. The original component depended on externalreact-lite-youtube-embedCSS classes; this version is styled entirely with MUI so consumers can drop it in without extra wiring.Usage
Test plan
npx --package=@typescript/native-preview tsgo --noEmit -p .fromexamples/magento-graphcmspasses (no new type errors)yarn testfrom the repo root passes (all 11 vitest files, 56 tests)🤖 Generated with Claude Code