From 4a021cc1cec4433b2bfd12c17d84ff705f71c45d Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 11 May 2026 20:26:50 +0300
Subject: [PATCH] Add useEffect clean up to YouTube embed

---
 app/components/YouTubeEmbed.tsx | 19 ++++++-------------
 types/youtube.d.ts              |  1 +
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/app/components/YouTubeEmbed.tsx b/app/components/YouTubeEmbed.tsx
index 1294447c0..9841b8ee3 100644
--- a/app/components/YouTubeEmbed.tsx
+++ b/app/components/YouTubeEmbed.tsx
@@ -64,19 +64,6 @@ export function YouTubeEmbed({
 	useEffect(() => {
 		if (!enableApi || !isApiReady || !containerRef.current) return;
 
-		if (playerRef.current) {
-			try {
-				playerRef.current.loadVideoById({ videoId: id, startSeconds: start });
-			} catch {
-				toastQueue.add({
-					message: t("vods:errors.youtubePreviewFailed"),
-					variant: "error",
-				});
-				setHasError(true);
-			}
-			return;
-		}
-
 		try {
 			const player = new window.YT.Player(containerRef.current, {
 				height: "281",
@@ -103,12 +90,18 @@ export function YouTubeEmbed({
 					},
 				},
 			});
+
+			return () => {
+				player.destroy();
+				playerRef.current = null;
+			};
 		} catch {
 			toastQueue.add({
 				message: t("vods:errors.youtubePreviewFailed"),
 				variant: "error",
 			});
 			setHasError(true);
+			return;
 		}
 	}, [enableApi, isApiReady, id, start, autoplay, onPlayerReady, t]);
 
diff --git a/types/youtube.d.ts b/types/youtube.d.ts
index 4bcef598b..bcb316ffd 100644
--- a/types/youtube.d.ts
+++ b/types/youtube.d.ts
@@ -26,5 +26,6 @@ declare namespace YT {
 		);
 		loadVideoById(options: { videoId: string; startSeconds?: number }): void;
 		getCurrentTime(): number;
+		destroy(): void;
 	}
 }