From 7b563fb05d36ee2ce63438b06c21c76541a07bbb Mon Sep 17 00:00:00 2001
From: AlejandroSuero <asuerome@gmail.com>
Date: Sun, 31 Mar 2024 03:35:37 +0200
Subject: [PATCH 1/3] fix(#809): video playing when going back after closing

---
 src/components/ClipsModal.astro | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/ClipsModal.astro b/src/components/ClipsModal.astro
index 138b030ef..d42257e59 100644
--- a/src/components/ClipsModal.astro
+++ b/src/components/ClipsModal.astro
@@ -41,7 +41,8 @@
 		const $clipContainer = document.querySelectorAll(".clip-container")
 		const $clipDialog = document.querySelector(".clip-dialog") as HTMLDialogElement
 		const $closeButton = document.querySelector(".close-dialog")
-		const $ytFrame = document.querySelector(".yt-iframe")
+		let $ytFrame = document.querySelector(".yt-iframe") as HTMLIFrameElement
+		const ytFrameCopy = $ytFrame
 
 		if (!$clipDialog) return
 
@@ -49,7 +50,10 @@
 			$ytFrame?.setAttribute("src", "")
 		})
 
-		$closeButton?.addEventListener("click", () => $clipDialog.close())
+		$closeButton?.addEventListener("click", () => {
+			$clipDialog.close()
+			$ytFrame?.remove()
+		})
 
 		$clipDialog.addEventListener("click", (event) => {
 			const target = event.target as HTMLElement
@@ -61,7 +65,13 @@
 				const currentTarget = event.currentTarget as HTMLElement
 				const { url } = currentTarget.dataset
 				if (!url) return
-				$ytFrame?.setAttribute("src", `${url}&autoplay=1`)
+				$ytFrame = document.querySelector(".yt-iframe") as HTMLIFrameElement
+				if ($ytFrame !== null) {
+					$ytFrame.setAttribute("src", `${url}&autoplay=1`)
+				} else {
+					$clipDialog?.querySelector("div")?.prepend(ytFrameCopy)
+					ytFrameCopy.setAttribute("src", `${url}&autoplay=1`)
+				}
 				$clipDialog.showModal()
 			})
 		})

From a765c4a6f3306b7178673e81fcdcd810eb0f9d9a Mon Sep 17 00:00:00 2001
From: AlejandroSuero <asuerome@gmail.com>
Date: Sun, 31 Mar 2024 04:13:40 +0200
Subject: [PATCH 2/3] fix(#809): removing playing in background when using copy

---
 src/components/ClipsModal.astro | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/ClipsModal.astro b/src/components/ClipsModal.astro
index d42257e59..43726dccf 100644
--- a/src/components/ClipsModal.astro
+++ b/src/components/ClipsModal.astro
@@ -47,12 +47,20 @@
 		if (!$clipDialog) return
 
 		$clipDialog.addEventListener("close", () => {
-			$ytFrame?.setAttribute("src", "")
+			if ($ytFrame !== null) {
+				$ytFrame.setAttribute("src", "")
+			} else {
+				ytFrameCopy.setAttribute("src", "")
+			}
 		})
 
 		$closeButton?.addEventListener("click", () => {
 			$clipDialog.close()
-			$ytFrame?.remove()
+			if ($ytFrame !== null) {
+				$ytFrame.remove()
+			} else {
+				ytFrameCopy.remove()
+			}
 		})
 
 		$clipDialog.addEventListener("click", (event) => {

From 63960e74d92ce3fe55ddbf4ee839f1dfcd4e1740 Mon Sep 17 00:00:00 2001
From: AlejandroSuero <asuerome@gmail.com>
Date: Fri, 3 May 2024 15:01:08 +0200
Subject: [PATCH 3/3] fix(ClipsModal): linting errors

---
 src/components/ClipsModal.astro | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/ClipsModal.astro b/src/components/ClipsModal.astro
index 278cbde2b..02875b61f 100644
--- a/src/components/ClipsModal.astro
+++ b/src/components/ClipsModal.astro
@@ -63,8 +63,8 @@
 		const $clipContainer = $$(".clip-container")
 		const $clipDialog = $(".clip-dialog") as HTMLDialogElement
 		const $closeButton = $(".close-dialog")
-		const $ytFrame = $(".yt-iframe")
-	  const ytFrameCopy = $ytFrame
+		let $ytFrame = $(".yt-iframe")
+		const ytFrameCopy = $ytFrame
 
 		if (!$clipDialog) return
 
@@ -72,7 +72,7 @@
 			if ($ytFrame !== null) {
 				$ytFrame.setAttribute("src", "")
 			} else {
-				ytFrameCopy.setAttribute("src", "")
+				ytFrameCopy?.setAttribute("src", "")
 			}
 		})
 
@@ -81,7 +81,7 @@
 			if ($ytFrame !== null) {
 				$ytFrame.remove()
 			} else {
-				ytFrameCopy.remove()
+				ytFrameCopy?.remove()
 			}
 		})
 
@@ -95,12 +95,14 @@
 				const currentTarget = event.currentTarget as HTMLElement
 				const { url } = currentTarget.dataset
 				if (!url) return
-				$ytFrame = document.querySelector(".yt-iframe") as HTMLIFrameElement
+				$ytFrame = $(".yt-iframe") as HTMLIFrameElement
 				if ($ytFrame !== null) {
 					$ytFrame.setAttribute("src", `${url}&autoplay=1`)
 				} else {
-					$clipDialog?.querySelector("div")?.prepend(ytFrameCopy)
-					ytFrameCopy.setAttribute("src", `${url}&autoplay=1`)
+					if (ytFrameCopy) {
+						$clipDialog?.querySelector("div")?.prepend(ytFrameCopy)
+						ytFrameCopy.setAttribute("src", `${url}&autoplay=1`)
+					}
 				}
 				$clipDialog.showModal()
 			})