feat(genre): play, shuffle and queue buttons on the genre view (#926)

* feat(genre): add paginated songs-by-genre API

Wraps the Subsonic getSongsByGenre endpoint plus a fetchAllSongsByGenre
helper that paginates until exhausted, capped to keep the queue and the
burst of requests bounded for very large genres.

* refactor(playback): extract shared bulk play/shuffle/enqueue helper

A single fetchTracks-driven core (loading flag, empty guard, canonical
shuffleArray) so async detail-page play buttons stop growing divergent
copies. Artist detail now reuses it, dropping its weaker sort-random
shuffle.

* feat(genre): play, shuffle and queue buttons on the genre view

Header buttons load the genre's songs and start ordered or shuffled
playback, or append them to the queue. The slice is bounded to stay
within the queue resolver's cache budget so every row resolves instead
of rendering as a placeholder. Strings added across all nine locales.

* docs(changelog): genre play/shuffle buttons (#926)
This commit is contained in:
Frank Stellmacher
2026-05-30 12:59:44 +02:00
committed by GitHub
parent 6c74cae0b7
commit e734a8fc43
16 changed files with 276 additions and 20 deletions
+50
View File
@@ -0,0 +1,50 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fetchAllSongsByGenre, getSongsByGenre } from './subsonicGenres';
import type { SubsonicSong } from './subsonicTypes';
const { apiMock } = vi.hoisted(() => ({ apiMock: vi.fn() }));
vi.mock('./subsonicClient', () => ({
api: apiMock,
libraryFilterParams: () => ({}),
}));
function songs(n: number, startId = 0): SubsonicSong[] {
return Array.from({ length: n }, (_, i) => ({ id: String(startId + i), title: `t${startId + i}` }) as SubsonicSong);
}
describe('getSongsByGenre', () => {
beforeEach(() => apiMock.mockReset());
it('normalizes a single-song response into an array', async () => {
apiMock.mockResolvedValue({ songsByGenre: { song: { id: '1', title: 'only' } } });
expect(await getSongsByGenre('Metal')).toEqual([{ id: '1', title: 'only' }]);
});
it('returns an empty array when the genre has no songs', async () => {
apiMock.mockResolvedValue({ songsByGenre: {} });
expect(await getSongsByGenre('Empty')).toEqual([]);
});
});
describe('fetchAllSongsByGenre', () => {
beforeEach(() => apiMock.mockReset());
it('paginates until a short page signals the end', async () => {
apiMock
.mockResolvedValueOnce({ songsByGenre: { song: songs(500) } })
.mockResolvedValueOnce({ songsByGenre: { song: songs(30, 500) } });
const all = await fetchAllSongsByGenre('Metal');
expect(all).toHaveLength(530);
expect(apiMock).toHaveBeenCalledTimes(2);
expect(apiMock.mock.calls[0][1]).toMatchObject({ offset: 0, count: 500 });
expect(apiMock.mock.calls[1][1]).toMatchObject({ offset: 500 });
});
it('stops at the cap without fetching further pages', async () => {
apiMock.mockResolvedValue({ songsByGenre: { song: songs(500) } });
const all = await fetchAllSongsByGenre('Huge', 10);
expect(all).toHaveLength(10);
expect(apiMock).toHaveBeenCalledTimes(1);
});
});
+30 -1
View File
@@ -1,5 +1,5 @@
import { api, libraryFilterParams } from './subsonicClient';
import type { SubsonicAlbum, SubsonicGenre } from './subsonicTypes';
import type { SubsonicAlbum, SubsonicGenre, SubsonicSong } from './subsonicTypes';
export async function getGenres(): Promise<SubsonicGenre[]> {
const data = await api<{ genres: { genre: SubsonicGenre | SubsonicGenre[] } }>('getGenres.view');
@@ -21,3 +21,32 @@ export async function getAlbumsByGenre(genre: string, size = 50, offset = 0): Pr
if (!raw) return [];
return Array.isArray(raw) ? raw : [raw];
}
/** Single page of songs for a genre (Subsonic `getSongsByGenre`, supported by Navidrome). */
export async function getSongsByGenre(genre: string, count = 500, offset = 0): Promise<SubsonicSong[]> {
const data = await api<{ songsByGenre: { song: SubsonicSong | SubsonicSong[] } }>('getSongsByGenre.view', {
genre,
count,
offset,
_t: Date.now(),
...libraryFilterParams(),
});
const raw = data.songsByGenre?.song;
if (!raw) return [];
return Array.isArray(raw) ? raw : [raw];
}
/**
* Every song in a genre, paginated until exhausted. Capped to keep the queue and the
* burst of server requests bounded for very large genres (a handful of sequential pages).
*/
export async function fetchAllSongsByGenre(genre: string, cap = 5000): Promise<SubsonicSong[]> {
const PAGE = 500;
const songs: SubsonicSong[] = [];
for (let offset = 0; songs.length < cap; offset += PAGE) {
const page = await getSongsByGenre(genre, PAGE, offset);
songs.push(...page);
if (page.length < PAGE) break;
}
return songs.length > cap ? songs.slice(0, cap) : songs;
}