Changes

web-player/src/lib/components/ui/Cover.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { gradientForHue } from '$lib/theme/color';
 	import { thumbnailSrc } from '$lib/thumbnails';
 
 	interface Props {
 		trackId: string | number;
-		hue: number;
 		size?: 'small' | 'medium' | 'large';
 		src?: string | null;
 		alt?: string;
@@ -16,7 +14,6 @@
 
 	let {
 		trackId,
-		hue,
 		size = 'medium',
 		src,
 		alt = '',
@@ -26,7 +23,6 @@
 	}: Props = $props();
 
 	let failed = $state(false);
-	let loaded = $state(false);
 
 	const imageSrc = $derived(
 		src ? (thumbnailSrc(src, size) ?? src) : `/api/tracks/${trackId}/cover?size=${size}`
@@ -35,16 +31,10 @@
 	$effect(() => {
 		imageSrc;
 		failed = false;
-		loaded = false;
 	});
 </script>
 
-<div
-	class="relative overflow-hidden {klass}"
-	style={loaded && !failed ? undefined : `background:${gradientForHue(hue)}`}
-	role="presentation"
-	{oncontextmenu}
->
+<div class="relative overflow-hidden bg-surface {klass}" role="presentation" {oncontextmenu}>
 	{#if !failed}
 		<img
 			src={imageSrc}
@@ -52,7 +42,6 @@
 			loading="lazy"
 			decoding="async"
 			fetchpriority="low"
-			onload={() => (loaded = true)}
 			onerror={() => (failed = true)}
 			class="h-full w-full object-cover"
 		/>