From d37abe8f6f2cbb6045c3c8dbd23aa2770db5254b Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sun, 16 Feb 2025 17:13:38 +1300
Subject: [PATCH] Improved thumbnail

---
 .../src/lib/components/Thumbnail.svelte       | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/materialious/src/lib/components/Thumbnail.svelte b/materialious/src/lib/components/Thumbnail.svelte
index 51785c7c..3018ba8d 100644
--- a/materialious/src/lib/components/Thumbnail.svelte
+++ b/materialious/src/lib/components/Thumbnail.svelte
@@ -50,10 +50,7 @@
 		}
 	});
 
-	let loading = $state(true);
-	let loaded = $state(false);
-
-	let img: HTMLImageElement | undefined = $state();
+	let thumbnail: HTMLImageElement | undefined = $state();
 
 	let progress: string | undefined = $state();
 	if (get(playerSavePlaybackPositionStore)) {
@@ -183,15 +180,11 @@
 			}
 		}
 
-		img = new Image();
+		const img = new Image();
 		img.src = imageSrc;
 
 		img.onload = () => {
-			loaded = true;
-			loading = false;
-		};
-		img.onerror = () => {
-			loading = false;
+			thumbnail = img;
 		};
 
 		if (get(synciousStore) && get(synciousInstanceStore) && get(authStore)) {
@@ -250,15 +243,13 @@
 				onclick={syncChangeVideo}
 			>
 				{#if !$interfaceLowBandwidthMode}
-					{#if loading}
+					{#if !thumbnail}
 						<div
 							class="secondary-container"
 							style="width: 100%;height: {placeholderHeight}px;"
 						></div>
-					{:else if loaded && img}
-						<img class="responsive" src={img.src} alt="Thumbnail for video" />
 					{:else}
-						<p>{$_('thumbnail.failedToLoadImage')}</p>
+						<img class="responsive" src={thumbnail.src} alt="Thumbnail for video" />
 					{/if}
 				{/if}
 				{#if progress}