Merge master into web-player-general-changes

web-player/src/lib/api/schema.d.ts

@@ -177,6 +177,40 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/genres": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get The Genres That Have At Least One Track, Most Populated First. Works Anonymously. */
+        get: operations["GetGenres"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/genres/available": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get Every Genre A Track Can Be Tagged With, Including The Genres It Cannot Be Combined With. Works Anonymously. */
+        get: operations["GetAvailableGenres"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/likes": {
         parameters: {
             query?: never;
@@ -391,7 +425,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        /** Get Paginated Tracks, Optionally Filtered By Name. */
+        /** Get Paginated Tracks, Optionally Filtered By Name And Genre. */
         get: operations["GetTracks"];
         put?: never;
         /** Create A New Track. */
@@ -453,6 +487,23 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/tracks/listens/{listenId}/progress": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        /** Report The Total Seconds Actually Played For A Listen Started By The Stream Endpoint. */
+        put: operations["RecordListeningProgress"];
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/tracks/users/{userId}": {
         parameters: {
             query?: never;
@@ -730,6 +781,10 @@ export interface components {
             hasPreviousPage: boolean;
             hasNextPage: boolean;
         };
+        AvailableGenreResponse: {
+            genre: components["schemas"]["Genre"];
+            incompatibleWith: components["schemas"]["Genre"][];
+        };
         CreateAlbumRequest: {
             title: string;
             description: null | string;
@@ -764,6 +819,11 @@ export interface components {
         };
         /** @enum {unknown} */
         Genre: "Pop" | "Rock" | "HipHop" | "RnB" | "Jazz" | "Blues" | "Classical" | "Electronic" | "House" | "Techno" | "Trance" | "Dubstep" | "DrumAndBass" | "Metal" | "Punk" | "Reggae" | "Reggaeton" | "Country" | "Folk" | "Indie" | "KPop" | "Latin" | "Soul" | "Funk" | "Ambient" | "Lofi";
+        GenreResponse: {
+            genre: components["schemas"]["Genre"];
+            /** Format: int32 */
+            trackCount: number | string;
+        };
         HttpValidationProblemDetails: {
             type?: null | string;
             title?: null | string;
@@ -854,6 +914,19 @@ export interface components {
             hasNextPage: boolean;
             hasPreviousPage: boolean;
         };
+        PaginatedResponseOfUserApplicationResponse: {
+            items: components["schemas"]["UserApplicationResponse"][];
+            /** Format: int32 */
+            pageNumber: number | string;
+            /** Format: int32 */
+            pageSize: number | string;
+            /** Format: int32 */
+            pageCount: number | string;
+            /** Format: int32 */
+            totalItemCount: number | string;
+            hasNextPage: boolean;
+            hasPreviousPage: boolean;
+        };
         PlaybackPublicConfigResponse: {
             allowAnonymousListening: boolean;
             /** Format: int32 */
@@ -889,6 +962,10 @@ export interface components {
         PlaylistVisibility: "Private" | "Public";
         /** @enum {unknown} */
         ProcessingStatus: "Pending" | "Processing" | "Completed" | "Failed";
+        RecordListeningProgressRequest: {
+            /** Format: double */
+            playedSeconds: number | string;
+        };
         RequestAlbumPictureUploadRequest: {
             fileType: string;
             contentType: string;
@@ -954,6 +1031,8 @@ export interface components {
             ticket: string;
             /** Format: int32 */
             expiresInSeconds: number | string;
+            /** Format: uuid */
+            listenId?: null | string;
         };
         TrackUploadUrlsResponse: {
             /** Format: uuid */
@@ -1479,6 +1558,46 @@ export interface operations {
             };
         };
     };
+    GetGenres: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GenreResponse"][];
+                };
+            };
+        };
+    };
+    GetAvailableGenres: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["AvailableGenreResponse"][];
+                };
+            };
+        };
+    };
     GetLikedTracks: {
         parameters: {
             query?: {
@@ -2013,6 +2132,7 @@ export interface operations {
         parameters: {
             query?: {
                 name?: string;
+                genre?: string;
                 pageNumber?: number | string;
                 pageSize?: number | string;
             };
@@ -2031,6 +2151,15 @@ export interface operations {
                     "application/json": components["schemas"]["TracksSearchResponse"];
                 };
             };
+            /** @description Bad Request */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/problem+json": components["schemas"]["HttpValidationProblemDetails"];
+                };
+            };
         };
     };
     CreateTrack: {
@@ -2181,6 +2310,44 @@ export interface operations {
             };
         };
     };
+    RecordListeningProgress: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                listenId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["RecordListeningProgressRequest"];
+            };
+        };
+        responses: {
+            /** @description No Content */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not Found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     GetTracksByUserId: {
         parameters: {
             query?: {

web-player/src/lib/data/genres.ts

@@ -1,22 +1,75 @@
-export const GENRE_INFO: Record<string, { label: string; tagline: string }> = {
-	pop: { label: 'Pop', tagline: 'Éxitos que suenan en todas partes' },
-	rock: { label: 'Rock', tagline: 'Guitarras, actitud y ruido' },
-	reggaeton: { label: 'Reggaetón', tagline: 'El ritmo que no para' },
-	'lo-fi': { label: 'Lo-fi', tagline: 'Para concentrarte o relajarte' },
-	indie: { label: 'Indie', tagline: 'Voces fuera del radar' },
-	salsa: { label: 'Salsa', tagline: 'Para mover el cuerpo' },
-	'k-pop': { label: 'K-pop', tagline: 'Coreografías pegajosas' },
-	electrónica: { label: 'Electrónica', tagline: 'Beats para perderte' },
-	jazz: { label: 'Jazz', tagline: 'Improvisación y elegancia' },
-	baladas: { label: 'Baladas', tagline: 'Para sentir con calma' },
-	trap: { label: 'Trap', tagline: 'Autotune y bajos pesados' },
-	cumbia: { label: 'Cumbia', tagline: 'El sabor de siempre' },
-	'hip hop': { label: 'Hip hop', tagline: 'Rimas con actitud' },
-	'música clásica': { label: 'Clásica', tagline: 'Siglos de composición' }
+const GENRE_INFO: Record<string, { label: string; tagline: string }> = {
+	Pop: { label: 'Pop', tagline: 'Éxitos que suenan en todas partes' },
+	Rock: { label: 'Rock', tagline: 'Guitarras, actitud y ruido' },
+	HipHop: { label: 'Hip hop', tagline: 'Rimas con actitud' },
+	RnB: { label: 'R&B', tagline: 'Ritmo suave y voces con alma' },
+	Jazz: { label: 'Jazz', tagline: 'Improvisación y elegancia' },
+	Blues: { label: 'Blues', tagline: 'Sentimiento en cada nota' },
+	Classical: { label: 'Clásica', tagline: 'Siglos de composición' },
+	Electronic: { label: 'Electrónica', tagline: 'Beats para perderte' },
+	House: { label: 'House', tagline: 'Pista de baile sin fin' },
+	Techno: { label: 'Techno', tagline: 'Pulso hipnótico' },
+	Trance: { label: 'Trance', tagline: 'Melodías que te elevan' },
+	Dubstep: { label: 'Dubstep', tagline: 'Bajos que hacen temblar' },
+	DrumAndBass: { label: 'Drum and bass', tagline: 'Velocidad y graves' },
+	Metal: { label: 'Metal', tagline: 'Riffs pesados' },
+	Punk: { label: 'Punk', tagline: 'Rápido, crudo y directo' },
+	Reggae: { label: 'Reggae', tagline: 'Buenas vibraciones' },
+	Reggaeton: { label: 'Reggaetón', tagline: 'El ritmo que no para' },
+	Country: { label: 'Country', tagline: 'Historias con guitarra' },
+	Folk: { label: 'Folk', tagline: 'Raíces y acústico' },
+	Indie: { label: 'Indie', tagline: 'Voces fuera del radar' },
+	KPop: { label: 'K-pop', tagline: 'Coreografías pegajosas' },
+	Latin: { label: 'Latina', tagline: 'Sabor y ritmo' },
+	Soul: { label: 'Soul', tagline: 'Emoción en estado puro' },
+	Funk: { label: 'Funk', tagline: 'Groove imposible de quedarse quieto' },
+	Ambient: { label: 'Ambient', tagline: 'Paisajes sonoros' },
+	Lofi: { label: 'Lo-fi', tagline: 'Para concentrarte o relajarte' }
 };
 
-export const genreTiles = Object.entries(GENRE_INFO).map(([query, info], i, all) => ({
-	query,
-	hue: Math.round((i * 360) / all.length),
-	...info
-}));
+const KNOWN_GENRES = Object.keys(GENRE_INFO);
+
+function humanize(name: string): string {
+	return name.replace(/([a-z])([A-Z])/g, '$1 $2');
+}
+
+export function genreInfo(genre: string) {
+	return GENRE_INFO[genre] ?? { label: humanize(genre), tagline: '' };
+}
+
+export function genreHue(genre: string): number {
+	const known = KNOWN_GENRES.indexOf(genre);
+	if (known >= 0) return Math.round((known * 360) / KNOWN_GENRES.length);
+	let hash = 0;
+	for (const char of genre) hash = (hash * 31 + char.charCodeAt(0)) % 360;
+	return hash;
+}
+
+export function genreTiles(genres: { genre: string }[]) {
+	return genres.map(({ genre }) => ({
+		genre,
+		hue: genreHue(genre),
+		...genreInfo(genre)
+	}));
+}
+
+export function genreOptions(genres: { genre: string; incompatibleWith: string[] }[]) {
+	return genres.map(({ genre, incompatibleWith }) => ({
+		genre,
+		incompatibleWith,
+		label: genreInfo(genre).label
+	}));
+}
+
+export function findConflict(
+	tags: string[],
+	options: { genre: string; incompatibleWith: string[] }[]
+): [string, string] | undefined {
+	const byGenre = new Map(options.map((option) => [option.genre, option.incompatibleWith]));
+	for (let i = 0; i < tags.length; i++) {
+		for (let j = i + 1; j < tags.length; j++) {
+			if (byGenre.get(tags[i])?.includes(tags[j])) return [tags[i], tags[j]];
+		}
+	}
+	return undefined;
+}

web-player/src/lib/data/trackGenres.ts

@@ -1,56 +0,0 @@
-export const TRACK_GENRES = [
-	{ value: 'Pop', label: 'Pop' },
-	{ value: 'Rock', label: 'Rock' },
-	{ value: 'HipHop', label: 'Hip-hop' },
-	{ value: 'RnB', label: 'R&B' },
-	{ value: 'Jazz', label: 'Jazz' },
-	{ value: 'Blues', label: 'Blues' },
-	{ value: 'Classical', label: 'Clásica' },
-	{ value: 'Electronic', label: 'Electrónica' },
-	{ value: 'House', label: 'House' },
-	{ value: 'Techno', label: 'Techno' },
-	{ value: 'Trance', label: 'Trance' },
-	{ value: 'Dubstep', label: 'Dubstep' },
-	{ value: 'DrumAndBass', label: 'Drum and bass' },
-	{ value: 'Metal', label: 'Metal' },
-	{ value: 'Punk', label: 'Punk' },
-	{ value: 'Reggae', label: 'Reggae' },
-	{ value: 'Reggaeton', label: 'Reggaetón' },
-	{ value: 'Country', label: 'Country' },
-	{ value: 'Folk', label: 'Folk' },
-	{ value: 'Indie', label: 'Indie' },
-	{ value: 'KPop', label: 'K-pop' },
-	{ value: 'Latin', label: 'Latina' },
-	{ value: 'Soul', label: 'Soul' },
-	{ value: 'Funk', label: 'Funk' },
-	{ value: 'Ambient', label: 'Ambient' },
-	{ value: 'Lofi', label: 'Lo-fi' }
-] as const;
-
-export type TrackGenre = (typeof TRACK_GENRES)[number]['value'];
-
-const GENRE_VALUES: ReadonlySet<string> = new Set(TRACK_GENRES.map((genre) => genre.value));
-
-const INTENSE: ReadonlySet<TrackGenre> = new Set(['Metal', 'Punk', 'Dubstep', 'DrumAndBass']);
-const MELLOW: ReadonlySet<TrackGenre> = new Set(['Classical', 'Ambient', 'Lofi']);
-
-export function isTrackGenre(value: string): value is TrackGenre {
-	return GENRE_VALUES.has(value);
-}
-
-export function areCompatible(a: TrackGenre, b: TrackGenre): boolean {
-	return !((INTENSE.has(a) && MELLOW.has(b)) || (INTENSE.has(b) && MELLOW.has(a)));
-}
-
-export function genreLabel(value: TrackGenre): string {
-	return TRACK_GENRES.find((genre) => genre.value === value)?.label ?? value;
-}
-
-export function findConflict(tags: readonly TrackGenre[]): [TrackGenre, TrackGenre] | undefined {
-	for (let i = 0; i < tags.length; i++) {
-		for (let j = i + 1; j < tags.length; j++) {
-			if (!areCompatible(tags[i], tags[j])) return [tags[i], tags[j]];
-		}
-	}
-	return undefined;
-}

web-player/src/lib/player/listenTracker.ts

@@ -0,0 +1,52 @@
+const MAX_TICK_GAP_SECONDS = 2.5;
+const FLUSH_EVERY_SECONDS = 30;
+
+export class ListenTracker {
+	#listenId: string | null = null;
+	#played = 0;
+	#sent = 0;
+	#lastTime: number | null = null;
+	#lastFlushAt = 0;
+
+	begin(listenId: string | null | undefined) {
+		this.flush();
+		this.#listenId = listenId ?? null;
+		this.#played = 0;
+		this.#sent = 0;
+		this.#lastTime = null;
+		this.#lastFlushAt = Date.now();
+	}
+
+	resync(currentTime: number) {
+		this.#lastTime = currentTime;
+	}
+
+	interrupt() {
+		this.#lastTime = null;
+	}
+
+	tick(currentTime: number) {
+		if (this.#listenId === null) return;
+		const last = this.#lastTime;
+		this.#lastTime = currentTime;
+		if (last === null) return;
+		const delta = currentTime - last;
+		if (delta > 0 && delta <= MAX_TICK_GAP_SECONDS) this.#played += delta;
+		if (Date.now() - this.#lastFlushAt >= FLUSH_EVERY_SECONDS * 1000) this.flush();
+	}
+
+	flush() {
+		const id = this.#listenId;
+		if (id === null || this.#played <= this.#sent) return;
+		this.#sent = this.#played;
+		this.#lastFlushAt = Date.now();
+		fetch(`/api/listens/${id}/progress`, {
+			method: 'PUT',
+			headers: { 'content-type': 'application/json' },
+			body: JSON.stringify({ playedSeconds: this.#played }),
+			keepalive: true
+		}).catch(() => {
+			this.#sent = 0;
+		});
+	}
+}

web-player/src/lib/player/player.svelte.ts

@@ -3,6 +3,7 @@ import { DEFAULT_ACCENT } from '$lib/theme/color';
 import { extractAccent, type Accent } from '$lib/theme/palette';
 import { shuffle } from '$lib/data/collections';
 import { dialog } from '$lib/state/dialog.svelte';
+import { ListenTracker } from './listenTracker';
 
 export interface PlayerTrack {
 	id: string | number;
@@ -132,6 +133,7 @@ class PlayerState {
 	#loadToken = 0;
 	#accentCache = new Map<string, Accent>();
 	#rafId: number | null = null;
+	#listen = new ListenTracker();
 
 	current = $derived(this.tracks.find((t) => t.id === this.currentId) ?? EMPTY);
 	accent = $derived(this.accentColor ?? DEFAULT_ACCENT);
@@ -152,19 +154,30 @@ class PlayerState {
 		audio.muted = this.muted;
 		audio.addEventListener('durationchange', () => this.#syncDuration(audio.duration));
 		audio.addEventListener('loadedmetadata', () => this.#syncDuration(audio.duration));
+		audio.addEventListener('timeupdate', () => {
+			if (!audio.paused) this.#listen.tick(audio.currentTime);
+		});
+		audio.addEventListener('seeking', () => this.#listen.interrupt());
+		audio.addEventListener('seeked', () => this.#listen.resync(audio.currentTime));
 		audio.addEventListener('play', () => {
+			this.#listen.resync(audio.currentTime);
 			this.playing = true;
 			this.#startProgressLoop();
 			this.#syncMediaSessionPlaybackState();
 		});
 		audio.addEventListener('pause', () => {
+			this.#listen.interrupt();
+			this.#listen.flush();
 			this.playing = false;
 			this.#stopProgressLoop();
 			this.#syncMediaSessionPlaybackState();
 		});
 		audio.addEventListener('ended', () => {
 			this.#stopProgressLoop();
+			this.#listen.tick(audio.currentTime);
+			this.#listen.begin(null);
 			if (this.repeat) {
+				this.#beginRepeatListen();
 				audio.currentTime = 0;
 				audio.play().catch(() => {});
 				return;
@@ -178,6 +191,10 @@ class PlayerState {
 			this.#fail();
 		});
 		this.#audio = audio;
+		document.addEventListener('visibilitychange', () => {
+			if (document.visibilityState === 'hidden') this.#listen.flush();
+		});
+		window.addEventListener('pagehide', () => this.#listen.flush());
 		this.#setupMediaSession(audio);
 		return audio;
 	}
@@ -277,14 +294,16 @@ class PlayerState {
 		const track = this.tracks.find((t) => t.id === id);
 		this.#applyAccent(id);
 		if (track) this.#syncMediaSessionMetadata(track);
+		this.#listen.begin(null);
 		const token = ++this.#loadToken;
 		this.loading = true;
 		this.progress = 0;
 		try {
-			const src = await this.#resolveLocalSrc(String(id));
+			const { src, listenId } = await this.#resolveLocalSrc(String(id));
 			if (token !== this.#loadToken) return;
 			audio.src = src;
 			audio.volume = this.volume / 100;
+			this.#listen.begin(listenId);
 			await audio.play();
 			this.loading = false;
 			this.#pushRecent(this.current);
@@ -310,14 +329,28 @@ class PlayerState {
 		);
 	}
 
-	async #resolveLocalSrc(id: string): Promise<string> {
+	async #resolveLocalSrc(id: string): Promise<{ src: string; listenId: string | null }> {
 		const res = await fetch(`/api/tracks/${id}/stream`);
 		if (!res.ok) throw new Error(await readErrorMessage(res));
-		const { manifestUrl, ticket } = (await res.json()) as {
+		const { manifestUrl, ticket, listenId } = (await res.json()) as {
 			manifestUrl: string;
 			ticket: string;
+			listenId?: string | null;
 		};
-		return this.#withTicket(manifestUrl, ticket);
+		return { src: this.#withTicket(manifestUrl, ticket), listenId: listenId ?? null };
+	}
+
+	async #beginRepeatListen() {
+		const id = this.currentId;
+		if (id === null) return;
+		try {
+			const res = await fetch(`/api/tracks/${id}/stream`);
+			if (!res.ok) return;
+			const { listenId } = (await res.json()) as { listenId?: string | null };
+			if (this.currentId === id) this.#listen.begin(listenId ?? null);
+		} catch {
+			return;
+		}
 	}
 
 	#withTicket(url: string, ticket: string): string {

web-player/src/lib/state/navigation.svelte.ts

@@ -88,6 +88,10 @@ export function searchHref(query: string): string {
 	return query ? `/explore?q=${encodeURIComponent(query)}` : '/explore';
 }
 
+export function genreHref(genre: string): string {
+	return `/explore?genre=${encodeURIComponent(genre)}`;
+}
+
 export interface AppNavLink {
 	href: string;
 	label: string;

web-player/src/routes/(app)/explore/+page.server.ts

@@ -10,13 +10,25 @@ import {
 
 export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 	const query = url.searchParams.get('q')?.trim() ?? '';
+	const genreParam = url.searchParams.get('genre')?.trim() || null;
 	const page = Math.max(1, Number(url.searchParams.get('page')) || 1);
 
 	const user = locals.user;
 	const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });
 
+	const genresRes = await api.GET('/genres');
+	const genres = genresRes.data ?? [];
+	const genre = genres.find((item) => item.genre === genreParam)?.genre ?? null;
+
 	const tracksPromise = api.GET('/tracks', {
-		params: { query: { name: query || undefined, pageNumber: page, pageSize: PAGE_SIZE } }
+		params: {
+			query: {
+				name: query || undefined,
+				genre: genre ?? undefined,
+				pageNumber: page,
+				pageSize: PAGE_SIZE
+			}
+		}
 	});
 
 	const playlistsPromise = user
@@ -48,6 +60,8 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 
 	return {
 		query,
+		genre,
+		genres,
 		tracks,
 		albums: (albumsRes?.data?.items ?? []).map((item) => item.album),
 		users: usersRes?.data?.items ?? [],

web-player/src/routes/(app)/explore/+page.svelte

@@ -17,13 +17,13 @@
 	import Chip from '$lib/components/ui/primitives/Chip.svelte';
 	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
 	import { EXPLORE_PAGE_SIZE } from '$lib/config';
-	import { searchHref } from '$lib/state/navigation.svelte';
+	import { genreHref } from '$lib/state/navigation.svelte';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import ContextMenu, { contextMenuPosition } from '$lib/components/ui/overlay/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import ListEnd from '@lucide/svelte/icons/list-end';
 	import { appendUnique } from '$lib/data/collections';
-	import { genreTiles } from '$lib/data/genres';
+	import { genreInfo, genreTiles } from '$lib/data/genres';
 	import {
 		type SearchFilter,
 		showGroup,
@@ -59,7 +59,7 @@
 	$effect(() => {
 		trackMenu.close();
 		albumMenu = null;
-		sfilter = 'Todo';
+		sfilter = data.genre ? 'Canciones' : 'Todo';
 		localItems = data.tracks.items.map((item) => item.track);
 		localPage = Number(data.tracks.pageNumber);
 		hasMore = data.tracks.hasNextPage;
@@ -74,6 +74,9 @@
 
 	const items = $derived(songRows.map((row) => row.track));
 
+	const tiles = $derived(genreTiles(data.genres));
+	const activeGenre = $derived(data.genre ? genreInfo(data.genre) : null);
+
 	const albums = $derived(data.albums);
 	const users = $derived(data.users);
 
@@ -170,6 +173,7 @@
 				pageSize: String(EXPLORE_PAGE_SIZE)
 			});
 			if (data.query) params.set('name', data.query);
+			if (data.genre) params.set('genre', data.genre);
 			const res = await fetch(`/api/tracks?${params}`);
 			if (!res.ok) throw new Error(String(res.status));
 			const next = (await res.json()) as typeof data.tracks;
@@ -189,7 +193,9 @@
 </script>
 
 <svelte:head>
-	<title>{data.query ? `Buscar «${data.query}»` : 'Descubrir'}</title>
+	<title
+		>{activeGenre ? activeGenre.label : data.query ? `Buscar «${data.query}»` : 'Descubrir'}</title
+	>
 	<meta
 		name="description"
 		content="Busca canciones, álbumes y personas, o descubre por género en Musify."
@@ -197,7 +203,9 @@
 </svelte:head>
 
 <Page>
-	{#if !data.query}
+	{#if activeGenre}
+		<PageHeader eyebrow="Género" title={activeGenre.label} description={activeGenre.tagline} />
+	{:else if !data.query}
 		<PageHeader
 			title="Descubrir"
 			description="Encuentra tu próxima canción favorita explorando por género."
@@ -301,31 +309,34 @@
 				por playlist.
 			</p>
 			<div class="mt-5.5 flex flex-wrap justify-center gap-2">
-				{#each genreTiles.slice(0, 4) as genre (genre.query)}
-					<Chip href={searchHref(genre.query)}>{genre.label}</Chip>
+				{#each tiles.slice(0, 4) as tile (tile.genre)}
+					<Chip href={genreHref(tile.genre)}>{tile.label}</Chip>
 				{/each}
 			</div>
 		</div>
 	{/if}
 
-	{#if !data.query}
+	{#if !data.query && !data.genre}
 		<div class="grid-wide">
-			{#each genreTiles as genre, i (genre.query)}
+			{#each tiles as tile, i (tile.genre)}
 				<a
-					href={searchHref(genre.query)}
+					href={genreHref(tile.genre)}
 					class="animate-enter group relative flex h-28 flex-col gap-1 overflow-hidden rounded-panel p-4 transition-[filter] genre-tile hover:brightness-110"
-					style="--i:{i}; --tile-hue:{genre.hue}"
+					style="--i:{i}; --tile-hue:{tile.hue}"
 				>
 					<div class="text-on-art">
-						{genre.label}
+						{tile.label}
 					</div>
-					<div class="text-xs text-on-art-2">{genre.tagline}</div>
+					<div class="text-xs text-on-art-2">{tile.tagline}</div>
 				</a>
 			{/each}
 		</div>
+		{#if tiles.length === 0}
+			<EmptyState icon={Music} description="Todavía no hay géneros. Sube música para empezar." />
+		{/if}
 	{/if}
 
-	{#if data.query && !nothingFound}
+	{#if (data.query || data.genre) && !nothingFound}
 		<div class="mt-9 flex flex-col gap-9">
 			{#if showGroup(sfilter, 'Canciones')}
 				<div>
@@ -366,7 +377,9 @@
 					{:else}
 						<EmptyState
 							icon={Music}
-							description="No hay canciones que coincidan con «{data.query}»."
+							description={activeGenre
+								? 'Todavía no hay canciones de este género.'
+								: `No hay canciones que coincidan con «${data.query}».`}
 						/>
 					{/if}
 				</div>

web-player/src/routes/(app)/upload/+page.server.ts

@@ -7,12 +7,18 @@ import {
 	unwrapOrFail
 } from '$lib/server/api';
 import { putPresigned, extOf, contentTypeOf, AUDIO_TYPES, IMAGE_TYPES } from '$lib/server/upload';
-import { findConflict, genreLabel, isTrackGenre, type TrackGenre } from '$lib/data/trackGenres';
+import { findConflict, genreInfo } from '$lib/data/genres';
+import type { components } from '$lib/api/schema';
+
+type Genre = components['schemas']['Genre'];
 
 const MAX_TITLE = 100;
 
-export const load: PageServerLoad = ({ locals, url }) => {
+export const load: PageServerLoad = async ({ locals, url, fetch }) => {
 	requireUser(locals, url);
+	const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });
+	const { data } = await api.GET('/genres/available');
+	return { genres: data ?? [] };
 };
 
 export const actions: Actions = {
@@ -40,20 +46,23 @@ export const actions: Actions = {
 		if (rawTags.length === 0) {
 			return fail(400, { message: 'Elige al menos un género.' });
 		}
-		if (!rawTags.every(isTrackGenre)) {
+		const api = createApiClient({ fetch, accessToken });
+		const { data: available } = await api.GET('/genres/available');
+		const options = available ?? [];
+		const known = new Set<string>(options.map((option) => option.genre));
+		if (!rawTags.every((tag) => known.has(tag))) {
 			return fail(400, { message: 'Alguno de los géneros no es válido.' });
 		}
-		const tags: TrackGenre[] = [...new Set(rawTags)];
-		const conflict = findConflict(tags);
+		const tags = [...new Set(rawTags)] as Genre[];
+		const conflict = findConflict(tags, options);
 		if (conflict) {
 			return fail(400, {
-				message: `Los géneros ${genreLabel(conflict[0])} y ${genreLabel(conflict[1])} no se pueden combinar.`
+				message: `Los géneros ${genreInfo(conflict[0]).label} y ${genreInfo(conflict[1]).label} no se pueden combinar.`
 			});
 		}
 
 		const audioContentType = contentTypeOf(audio, AUDIO_TYPES);
 		const pictureContentType = contentTypeOf(cover, IMAGE_TYPES);
-		const api = createApiClient({ fetch, accessToken });
 
 		const urlsResult = await api.POST('/tracks/upload-urls', {
 			body: {

web-player/src/routes/(app)/upload/+page.svelte

@@ -15,13 +15,15 @@
 	import Button from '$lib/components/ui/primitives/Button.svelte';
 	import ExplicitBadge from '$lib/components/ui/media/ExplicitBadge.svelte';
 	import Chip from '$lib/components/ui/primitives/Chip.svelte';
-	import { TRACK_GENRES, areCompatible, type TrackGenre } from '$lib/data/trackGenres';
+	import { genreOptions } from '$lib/data/genres';
 
 	type Status = 'idle' | 'uploading' | 'done' | 'error';
 	type StepState = 'idle' | 'active' | 'done';
 
 	const MAX_TITLE = 100;
 
+	let { data } = $props();
+
 	let title = $state('');
 	let audioName = $state('');
 	let audioSize = $state(0);
@@ -33,7 +35,7 @@
 	let isExplicit = $state(false);
 	let errorMsg = $state('');
 	let errorDetail = $state('');
-	let tags = $state<TrackGenre[]>([]);
+	let tags = $state<string[]>([]);
 	let publishedTitle = $state('');
 	let audioInput = $state<HTMLInputElement>();
 
@@ -43,6 +45,15 @@
 		{ key: 'publish', label: 'Publicar', hint: 'Disponible en el catálogo.' }
 	];
 
+	const options = $derived(genreOptions(data.genres));
+	const blocked = $derived(
+		new Set(
+			options
+				.filter((option) => tags.includes(option.genre))
+				.flatMap((option) => option.incompatibleWith)
+		)
+	);
+
 	const busy = $derived(status === 'uploading');
 
 	const canPublish = $derived(
@@ -87,14 +98,10 @@
 		pickAudio(file);
 	}
 
-	function toggleTag(tag: TrackGenre) {
+	function toggleTag(tag: string) {
 		tags = tags.includes(tag) ? tags.filter((current) => current !== tag) : [...tags, tag];
 	}
 
-	function tagBlocked(tag: TrackGenre) {
-		return !tags.includes(tag) && tags.some((current) => !areCompatible(current, tag));
-	}
-
 	function reset() {
 		title = '';
 		audioName = '';
@@ -260,13 +267,13 @@
 
 						<Field label="Géneros">
 							<div class="mb-2 flex flex-wrap gap-2">
-								{#each TRACK_GENRES as genre (genre.value)}
+								{#each options as option (option.genre)}
 									<Chip
-										selected={tags.includes(genre.value)}
-										disabled={tagBlocked(genre.value)}
-										onclick={() => toggleTag(genre.value)}
+										selected={tags.includes(option.genre)}
+										disabled={blocked.has(option.genre)}
+										onclick={() => toggleTag(option.genre)}
 									>
-										{genre.label}
+										{option.label}
 									</Chip>
 								{/each}
 							</div>

web-player/src/routes/api/listens/[id]/progress/+server.ts

@@ -0,0 +1,25 @@
+import type { RequestHandler } from './$types';
+import { json } from '@sveltejs/kit';
+import { createApiClient } from '$lib/server/api';
+
+export const PUT: RequestHandler = async ({ params, request, locals, fetch }) => {
+	if (!locals.accessToken) return json({ message: 'Inicia sesión.' }, { status: 401 });
+
+	const { playedSeconds } = (await request.json()) as { playedSeconds?: number };
+	if (typeof playedSeconds !== 'number' || !Number.isFinite(playedSeconds) || playedSeconds < 0)
+		return json({ message: 'Tiempo inválido.' }, { status: 400 });
+
+	const api = createApiClient({ fetch, accessToken: locals.accessToken });
+	const result = await api.PUT('/tracks/listens/{listenId}/progress', {
+		params: { path: { listenId: params.id } },
+		body: { playedSeconds }
+	});
+
+	if (result.error !== undefined)
+		return json(
+			{ message: 'No se pudo registrar la escucha.' },
+			{ status: result.response.status === 404 ? 404 : 502 }
+		);
+
+	return new Response(null, { status: 204 });
+};

web-player/src/routes/api/tracks/+server.ts

@@ -5,12 +5,13 @@ import { EXPLORE_PAGE_SIZE } from '$lib/config';
 
 export const GET: RequestHandler = async ({ url, locals, fetch }) => {
 	const name = url.searchParams.get('name')?.trim() || undefined;
+	const genre = url.searchParams.get('genre')?.trim() || undefined;
 	const pageNumber = Math.max(1, Number(url.searchParams.get('pageNumber')) || 1);
 	const pageSize = Math.max(1, Number(url.searchParams.get('pageSize')) || EXPLORE_PAGE_SIZE);
 
 	const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });
 	const result = await api.GET('/tracks', {
-		params: { query: { name, pageNumber, pageSize } }
+		params: { query: { name, genre, pageNumber, pageSize } }
 	});
 
 	return json(unwrapOrError(result, 'No se pudieron cargar las canciones.'));