Fix video persistence regression (#8271)

* Fix video persistence regression * Adding a changeset
withastro · Aug 29, 2023 · 16f09df · 16f09df
1 parent 834a00d
commit 16f09df
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/.changeset/tame-knives-shake.md b/.changeset/tame-knives-shake.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix video persistence regression
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
@@ -165,18 +165,16 @@ const { fallback = 'animate' } = Astro.props as Props;
 
 			// Persist elements in the existing body
 			const oldBody = document.body;
+			document.body.replaceWith(doc.body);
 			for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) {
 				const id = el.getAttribute(PERSIST_ATTR);
-				const newEl = doc.querySelector(`[${PERSIST_ATTR}="${id}"]`);
+				const newEl = document.querySelector(`[${PERSIST_ATTR}="${id}"]`);
 				if (newEl) {
 					// The element exists in the new page, replace it with the element
 					// from the old page so that state is preserved.
 					newEl.replaceWith(el);
 				}
 			}
-			// Only replace the existing body *AFTER* persistent elements are moved over
-			// This avoids disconnecting `astro-island` nodes multiple times
-			document.body.replaceWith(doc.body);
 
 			// Simulate scroll behavior of Safari and
 			// Chromium based browsers (Chrome, Edge, Opera, ...)

diff --git a/packages/astro/src/runtime/server/astro-island.ts b/packages/astro/src/runtime/server/astro-island.ts
@@ -52,14 +52,8 @@ declare const Astro: {
 				public hydrator: any;
 				static observedAttributes = ['props'];
 				disconnectedCallback() {
-					document.addEventListener(
-						'astro:after-swap',
-						() => {
-							// If element wasn't persisted, fire unmount event
-							if (!this.isConnected) this.dispatchEvent(new CustomEvent('astro:unmount'));
-						},
-						{ once: true }
-					);
+					document.removeEventListener('astro:after-swap', this.unmount);
+					document.addEventListener('astro:after-swap', this.unmount, { once: true });
 				}
 				connectedCallback() {
 					if (!this.hasAttribute('await-children') || this.firstChild) {
@@ -176,6 +170,10 @@ declare const Astro: {
 				attributeChangedCallback() {
 					this.hydrate();
 				}
+				unmount = () => {
+					// If element wasn't persisted, fire unmount event
+					if (!this.isConnected) this.dispatchEvent(new CustomEvent('astro:unmount'));
+				}
 			}
 		);
 	}