[bugfix] Restore video playback after view-transition navigation on comfy.org (#15010)

## 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
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
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.

Author: imick-io

apps/website/src/layouts/BaseLayout.astro

@@ -198,6 +198,7 @@ const structuredData = noindex
       import { initSmoothScroll, cancelScroll } from '../scripts/smoothScroll'
       import { ScrollTrigger } from '../scripts/gsapSetup'
       import { initPostHog, capturePageview } from '../scripts/posthog'
+      import { reifyMediaElements } from '../scripts/reifyMediaElements'
 
       initSmoothScroll()
 
@@ -213,6 +214,11 @@ const structuredData = noindex
       document.addEventListener('astro:before-preparation', () => {
         cancelScroll()
       })
+
+      // Synchronous, so it runs before island hydration touches the DOM.
+      document.addEventListener('astro:after-swap', () => {
+        reifyMediaElements(document.body)
+      })
     </script>
   </body>
 </html>

apps/website/src/scripts/reifyMediaElements.test.ts

@@ -0,0 +1,59 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+
+import { reifyMediaElements } from './reifyMediaElements'
+
+const swapInFromInertDocument = (html: string) => {
+  const inertDoc = new DOMParser().parseFromString(html, 'text/html')
+  document.body.replaceChildren(...inertDoc.body.children)
+  return document.body
+}
+
+describe('reifyMediaElements', () => {
+  it('replaces swapped-in media elements with live copies keeping attributes and children', () => {
+    const body = swapInFromInertDocument(`
+      <div>
+        <video src="https://cdn.example/clip.mp4" poster="p.jpg" autoplay muted playsinline>
+          <track src="captions.vtt" kind="captions" srclang="en" />
+        </video>
+        <audio preload="metadata">
+          <source src="a.ogg" type="audio/ogg" />
+        </audio>
+      </div>
+    `)
+    const parsedVideo = body.querySelector('video')!
+    const parsedAudio = body.querySelector('audio')!
+    parsedVideo.muted = true
+
+    reifyMediaElements(body)
+
+    const video = body.querySelector('video')!
+    expect(video).not.toBe(parsedVideo)
+    expect(video.getAttribute('src')).toBe('https://cdn.example/clip.mp4')
+    expect(video.getAttribute('poster')).toBe('p.jpg')
+    expect(video.hasAttribute('autoplay')).toBe(true)
+    expect(video.hasAttribute('muted')).toBe(true)
+    expect(video.hasAttribute('playsinline')).toBe(true)
+    expect(video.muted).toBe(true)
+    expect(video.querySelector('track')?.getAttribute('src')).toBe(
+      'captions.vtt'
+    )
+
+    const audio = body.querySelector('audio')!
+    expect(audio).not.toBe(parsedAudio)
+    expect(audio.getAttribute('preload')).toBe('metadata')
+    expect(audio.querySelector('source')?.getAttribute('src')).toBe('a.ogg')
+  })
+
+  it('keeps each media element in its original position', () => {
+    const body = swapInFromInertDocument(
+      '<p>before</p><video src="v.mp4"></video><p>after</p>'
+    )
+
+    reifyMediaElements(body)
+
+    expect(
+      [...body.children].map((el) => el.tagName.toLowerCase())
+    ).toStrictEqual(['p', 'video', 'p'])
+  })
+})

apps/website/src/scripts/reifyMediaElements.ts

@@ -0,0 +1,24 @@
+/**
+ * Replace media elements with fresh copies created in the live document.
+ *
+ * Astro's ClientRouter parses incoming pages with DOMParser, whose inert
+ * document never initialises the browser's media stack, so after a soft
+ * navigation every swapped-in <video>/<audio> reports "no supported
+ * sources" and cannot play. Mirrors the upstream fix
+ * (https://github.com/withastro/astro/issues/17601), which is not yet in
+ * a released Astro version — remove this once we're on a release that
+ * includes it.
+ */
+export function reifyMediaElements(root: ParentNode) {
+  for (const media of root.querySelectorAll<HTMLMediaElement>('video, audio')) {
+    const fresh = document.createElement(media.localName) as HTMLMediaElement
+    for (const attr of media.attributes) {
+      fresh.setAttribute(attr.name, attr.value)
+    }
+    // Copying the muted attribute only sets defaultMuted on an existing
+    // element, and unmuted autoplay is blocked without user engagement.
+    fresh.muted = media.muted
+    fresh.innerHTML = media.innerHTML
+    media.replaceWith(fresh)
+  }
+}