From 16f09dfff7722fda99dd0412e3006a7a39c80829 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Tue, 29 Aug 2023 15:46:06 -0400
Subject: [PATCH] Fix video persistence regression (#8271)

* Fix video persistence regression

* Adding a changeset
---
 .changeset/tame-knives-shake.md                   |  5 +++++
 packages/astro/components/ViewTransitions.astro   |  6 ++----
 packages/astro/src/runtime/server/astro-island.ts | 14 ++++++--------
 3 files changed, 13 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/tame-knives-shake.md

diff --git a/.changeset/tame-knives-shake.md b/.changeset/tame-knives-shake.md
new file mode 100644
index 000000000000..3801de2b3b8f
--- /dev/null
+++ 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
index 15bad445d817..0800b0033386 100644
--- 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
index 2c88f0373be9..b45bdcbdd36b 100644
--- 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'));
+				}
 			}
 		);
 	}