[bugfix] Restore video playback after view-transition navigation on comfy.org

[imick-io]

Summary

A recent Chrome update broke every <video>/<audio> on comfy.org when the page is reached via Astro <ClientRouter /> soft navigation (e.g. /learning → a tutorial watch page): the router parses the incoming page with DOMParser into an inert document where the media stack is never initialised, so swapped-in media reports MEDIA_ERR_SRC_NOT_SUPPORTED ("no supported sources") despite a valid src. Hard refresh works; any client-side navigation does not.

Changes

• What: Add reifyMediaElements() (mirrors unreleased upstream fix Fix video and audio elements broken after view transition navigation withastro/astro#17603) that replaces swapped-in media elements with fresh document.createElement() copies, run on astro:after-swap in BaseLayout.astro — synchronously before Vue island hydration, so VideoPlayer.vue hydrates onto the live elements. Also copies the muted property across (setAttribute('muted') only sets defaultMuted), without which muted autoplay loops stay blocked; upstream's fix has this gap. Unit tests cover attribute/child/muted copying and element position.
• Removal path: Delete once Astro ships a release containing Fix video and audio elements broken after view transition navigation withastro/astro#17603 (not in 7.2.0; no 6.x backport).

Review Focus

• Timing: astro:after-swap fires synchronously after the swap, before island hydration microtasks run, so Vue never binds to the stale elements. Verified in Chromium: watch-page autoplay + custom controls, and home-page scroll-triggered loops all behave identically to a hard load after soft navigation.

[github-actions]

🌐 Website E2E

Tip

All tests passed.

Status	✅ Passed
Report	View Report

🔗 Website Preview

Website Preview: https://comfy-website-preview-pr-15010.vercel.app

_{This commit: https://website-frontend-29ht5al1a-comfyui.vercel.app}

_{Last updated: 2026-08-10T22:10:03Z for e5a77c5}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 5d5c67ee-7690-4610-bde7-7bc75c1660e3

📥 Commits

Reviewing files that changed from the base of the PR and between 26a6bf7 and e5a77c5.

📒 Files selected for processing (3)

• apps/website/src/layouts/BaseLayout.astro
• apps/website/src/scripts/reifyMediaElements.test.ts
• apps/website/src/scripts/reifyMediaElements.ts

---

📝 Walkthrough

Walkthrough

The change adds reifyMediaElements, which recreates video and audio elements after Astro navigation swaps. The helper preserves attributes, content, muted state, and DOM position. Tests cover the reification behavior.

Changes

Media reification after navigation

Layer / File(s)	Summary
Media element reification apps/website/src/scripts/reifyMediaElements.ts, apps/website/src/scripts/reifyMediaElements.test.ts	The new helper recreates video and audio descendants with preserved attributes, content, muted state, and positions. Tests cover these behaviors.
Post-swap integration apps/website/src/layouts/BaseLayout.astro	The layout calls reifyMediaElements(document.body) after each astro:after-swap event.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the primary bug fix: restoring video playback after view-transition navigation.
Description check	✅ Passed	The description includes the required summary, changes, and review focus sections with clear technical details.
Linked Issues check	✅ Passed	The implementation directly satisfies issue #17603 by reifying media elements after swaps and preserving playback-related state.
Out of Scope Changes check	✅ Passed	The code and tests are limited to restoring media functionality after client-side navigation.
End-To-End Regression Coverage For Fixes	✅ Passed	All listed changed files are under apps/website, and the check explicitly excludes changes exclusively in apps/website from failure.
Adr Compliance For Entity/Litegraph Changes	✅ Passed	The changed files are under apps/website/src and do not modify src/lib/litegraph/, src/ecs/, or graph entity files, so this check does not apply.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/view-transition-video-playback

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[deepme987]

blind approving, expectation is it's tested e2e