feat: recommend server-generated mixes from Musify and YouTube Music

Mixes are their own concept, not playlists: they live in their own Mixes/MixItems tables, cannot be edited and never show up among the user's playlists. Each item is either a Musify track or a YouTube Music reference, so YouTube songs stream directly instead of being downloaded. A daily Hangfire job seeds the mixes from the listening history: one discovery mix, one daily mix and one per top artist. The per-user YouTube filler query was already in the working tree and rides along here because it shares files with this change.
2026-07-21 18:13:07 +02:00
parent 637e1ae583
commit 496a5f4a0b
36 changed files with 2667 additions and 13 deletions
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import Cover from './Cover.svelte';
+	import { gradientForHue, hueFor } from '$lib/theme/color';
+	import { mixItemKey, type MixItem } from '$lib/mixes';
+
+	interface Props {
+		items: MixItem[];
+		hue: number;
+		class?: string;
+	}
+
+	let { items, hue, class: klass = '' }: Props = $props();
+
+	const tiles = $derived(items.slice(0, 4));
+</script>
+
+{#if tiles.length >= 4}
+	<div class="grid grid-cols-2 grid-rows-2 overflow-hidden {klass}">
+		{#each tiles as item (mixItemKey(item))}
+			<Cover
+				trackId={item.trackId ?? item.videoId ?? ''}
+				src={item.thumbnailUrl}
+				hue={hueFor(mixItemKey(item))}
+				size="small"
+				class="h-full w-full"
+			/>
+		{/each}
+	</div>
+{:else if tiles.length > 0}
+	<Cover
+		trackId={tiles[0].trackId ?? tiles[0].videoId ?? ''}
+		src={tiles[0].thumbnailUrl}
+		hue={hueFor(mixItemKey(tiles[0]))}
+		size="medium"
+		class={klass}
+	/>
+{:else}
+	<div class={klass} style="background:{gradientForHue(hue)}"></div>
+{/if}
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import MixArt from './MixArt.svelte';
+	import { hueFor } from '$lib/theme/color';
+	import type { Mix } from '$lib/mixes';
+
+	interface Props {
+		mix: Mix;
+		index?: number;
+	}
+
+	let { mix, index = 0 }: Props = $props();
+
+	const count = $derived(Number(mix.itemCount));
+</script>
+
+<a
+	href="/mixes/{mix.id}"
+	class="group animate-enter min-w-0 text-left"
+	style="animation-delay:{index * 45}ms"
+>
+	<MixArt
+		items={mix.items}
+		hue={hueFor(mix.id)}
+		class="aspect-square w-full rounded-art shadow-art transition group-hover:shadow-art-lg"
+	/>
+	<div class="mt-2.5 truncate text-fg">{mix.title}</div>
+	<div class="mt-0.5 truncate text-sm text-fg-3">
+		{count}
+		{count === 1 ? 'canción' : 'canciones'} · Musify y YouTube Music
+	</div>
+</a>