fix(frontend): show real cover art in the player for YouTube tracks

This commit is contained in:
2026-07-16 01:06:20 +02:00
parent 3baac742d0
commit 37e0a4a4bf
2 changed files with 12 additions and 2 deletions
@@ -7,6 +7,7 @@
{#if player.current.id} {#if player.current.id}
<Cover <Cover
trackId={player.current.id} trackId={player.current.id}
src={player.current.coverUrl}
hue={player.current.hue} hue={player.current.hue}
size="small" size="small"
alt={player.current.title} alt={player.current.title}
+11 -2
View File
@@ -6,15 +6,24 @@
trackId: string | number; trackId: string | number;
hue: number; hue: number;
size?: 'small' | 'medium' | 'large'; size?: 'small' | 'medium' | 'large';
src?: string;
alt?: string; alt?: string;
class?: string; class?: string;
children?: Snippet; children?: Snippet;
} }
let { trackId, hue, size = 'medium', alt = '', class: klass = '', children }: Props = $props(); let { trackId, hue, size = 'medium', src, alt = '', class: klass = '', children }: Props = $props();
let failed = $state(false); let failed = $state(false);
let loaded = $state(false); let loaded = $state(false);
const imageSrc = $derived(src ?? `/api/tracks/${trackId}/cover?size=${size}`);
$effect(() => {
imageSrc;
failed = false;
loaded = false;
});
</script> </script>
<div <div
@@ -23,7 +32,7 @@
> >
{#if !failed} {#if !failed}
<img <img
src="/api/tracks/{trackId}/cover?size={size}" src={imageSrc}
{alt} {alt}
loading="lazy" loading="lazy"
onload={() => (loaded = true)} onload={() => (loaded = true)}