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}
- {:else if loaded && img} - Thumbnail for video {:else} -

{$_('thumbnail.failedToLoadImage')}

+ Thumbnail for video {/if} {/if} {#if progress}