Instantly destroy player state on video change

materialious/src/lib/components/Thumbnail.svelte

@@ -16,6 +16,7 @@
 		interfaceLowBandwidthMode,
 		isAndroidTvStore,
 		playerSavePlaybackPositionStore,
+		playerState,
 		syncPartyConnectionsStore,
 		syncPartyPeerStore,
 		synciousInstanceStore,
@@ -119,7 +120,9 @@
 		removeEventListener('resize', disableSideways);
 	});
 
-	function syncChangeVideo() {
+	function onVideoSelected() {
+		playerState.set(undefined);
+
 		if ($syncPartyConnectionsStore) {
 			const events = {
 				events: [{ type: 'change-video', videoId: video.videoId }]
@@ -166,7 +169,7 @@
 			class="wave thumbnail"
 			href={watchUrl.toString()}
 			data-sveltekit-preload-data="off"
-			onclick={syncChangeVideo}
+			onclick={onVideoSelected}
 		>
 			{#if !$interfaceLowBandwidthMode}
 				{#if !thumbnail}
@@ -213,6 +216,7 @@
 				class="video-title"
 				data-sveltekit-preload-data="off"
 				href={watchUrl.toString()}
+				onclick={onVideoSelected}
 			>
 				<span class="bold">{letterCase(video.title.trimEnd())}</span>
 			</a>

materialious/src/routes/(app)/watch/[slug]/+page.svelte

@@ -390,6 +390,7 @@
 						{premiereTime}
 					</h6>
 				</article>
+				<div class="space"></div>
 			{/if}
 		</div>
 
@@ -718,6 +719,10 @@
 		justify-content: flex-end;
 	}
 
+	.video-placeholder {
+		height: 50vh;
+	}
+
 	@media screen and (max-width: 1000px) {
 		.video-actions {
 			align-items: flex-start;