From 1f44b744808eac8ecc61fcafa03a1b7e4e5da909 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 7 Nov 2025 16:15:50 +1300
Subject: [PATCH] Fix playerElement not being set

---
 materialious/src/lib/components/Player.svelte |  5 ++
 materialious/src/routes/(app)/+layout.svelte  | 13 +--
 .../routes/(app)/watch/[slug]/+page.svelte    | 84 +++++++++++--------
 3 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte
index 820bcda7..c74f1fe0 100644
--- a/materialious/src/lib/components/Player.svelte
+++ b/materialious/src/lib/components/Player.svelte
@@ -32,6 +32,7 @@
 		playerDefaultQualityStore,
 		playerProxyVideosStore,
 		playerSavePlaybackPositionStore,
+		playerState,
 		playerStatisticsByDefault,
 		playerYouTubeJsFallback,
 		sponsorBlockCategoriesStore,
@@ -458,6 +459,10 @@
 		});
 		playerElement = document.getElementById('player') as HTMLMediaElement;
 
+		if ($playerState) {
+			playerState.set({ ...$playerState, playerElement: playerElement });
+		}
+
 		// Due to how our player is rendered in layout for stateful pip
 		// we calaculate player height to then allow children pages
 		// to wrap around it.
diff --git a/materialious/src/routes/(app)/+layout.svelte b/materialious/src/routes/(app)/+layout.svelte
index ef9f7646..3f7ba9e3 100644
--- a/materialious/src/routes/(app)/+layout.svelte
+++ b/materialious/src/routes/(app)/+layout.svelte
@@ -259,17 +259,6 @@
 	});
 
 	let webManifestLink = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '');
-
-	let playerElement: HTMLMediaElement | undefined = $state();
-	let playerElementCaught = false;
-
-	$effect(() => {
-		if ($playerState && playerElement && !playerElementCaught) {
-			playerElementCaught = true;
-
-			playerState.set({ ...$playerState, playerElement: playerElement });
-		}
-	});
 </script>
 
 <svelte:head>
@@ -423,7 +412,7 @@
 						<div class="space"></div>
 					{/if}
 					{#key $playerState.data.video.videoId}
-						<Player data={$playerState.data} isSyncing={$playerState.isSyncing} {playerElement} />
+						<Player data={$playerState.data} isSyncing={$playerState.isSyncing} />
 					{/key}
 					{#if playerIsPip}
 						<nav>
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index d4b7d3bd..c8ece6de 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -74,10 +74,6 @@
 		isSyncing: $syncPartyPeerStore !== null
 	});
 
-	playerState.subscribe((updatedPlayerState) => {
-		playerElement = updatedPlayerState?.playerElement;
-	});
-
 	$effect(() => {
 		if ($interfaceAutoExpandComments && comments) {
 			expandSummery('comment-section');
@@ -223,41 +219,52 @@
 		playerSyncEvents(connections[connections.length - 1]);
 	});
 
-	onMount(async () => {
-		if (data.playlistId) {
-			await goToCurrentPlaylistItem();
-			playerPlaylistHistory.set([data.video.videoId, ...$playerPlaylistHistory]);
-		}
+	onMount(() => {
+		// Required due to needing the playerElement
+		let loadedPlayer = false;
+		playerState.subscribe(async (updatedPlayerState) => {
+			if (!updatedPlayerState?.playerElement || loadedPlayer) {
+				return;
+			}
+			loadedPlayer = true;
 
-		if ($interfaceAutoExpandChapters) {
-			expandSummery('chapter-section');
-		}
+			playerElement = updatedPlayerState.playerElement;
 
-		if ($syncPartyConnectionsStore) {
-			$syncPartyConnectionsStore.forEach((conn) => {
-				playerSyncEvents(conn);
-			});
-		}
+			if (data.playlistId) {
+				await goToCurrentPlaylistItem();
+				playerPlaylistHistory.set([data.video.videoId, ...$playerPlaylistHistory]);
+			}
 
-		if (playerElement) {
-			playerElement.addEventListener('timeupdate', () => {
-				if (!playerElement) return;
-				playerCurrentTime = playerElement.currentTime;
-			});
-		}
+			if ($interfaceAutoExpandChapters) {
+				expandSummery('chapter-section');
+			}
 
-		if (data.video.premiereTimestamp) {
-			premiereTime = humanFriendlyTimestamp(data.video.premiereTimestamp);
-			premiereUpdateInterval = setInterval(async () => {
-				data = await getWatchDetails(data.video.videoId, page.url);
+			if ($syncPartyConnectionsStore) {
+				$syncPartyConnectionsStore.forEach((conn) => {
+					playerSyncEvents(conn);
+				});
+			}
 
-				if (data.video.premiereTimestamp) {
-					premiereTime = humanFriendlyTimestamp(data.video.premiereTimestamp);
-				} else {
-					clearInterval(premiereUpdateInterval);
-				}
-			}, 60000);
-		}
+			if (playerElement) {
+				playerElement.addEventListener('timeupdate', () => {
+					if (!playerElement) return;
+					playerCurrentTime = playerElement.currentTime;
+				});
+			}
+
+			if (data.video.premiereTimestamp) {
+				premiereTime = humanFriendlyTimestamp(data.video.premiereTimestamp);
+				premiereUpdateInterval = setInterval(async () => {
+					data = await getWatchDetails(data.video.videoId, page.url);
+
+					if (data.video.premiereTimestamp) {
+						premiereTime = humanFriendlyTimestamp(data.video.premiereTimestamp);
+					} else {
+						clearInterval(premiereUpdateInterval);
+					}
+				}, 60000);
+			}
+		});
 	});
 
 	onDestroy(() => {
@@ -271,6 +278,15 @@
 		if (premiereUpdateInterval) {
 			clearInterval(premiereUpdateInterval);
 		}
+
+		if (
+			playerElement?.paused ||
+			playerElement?.ended ||
+			playerElement?.currentTime === 0 ||
+			playerElement?.readyState === 2
+		) {
+			playerState.set(undefined);
+		}
 	});
 
 	async function goToCurrentPlaylistItem() {