feat: Support role filters for (album) artist role for Navidrome

- Adds an optional (Navidrome only, currently) field `roles` to type `AlbumArtist`
- `roles` is populated using artist.stats (excludign maincredit)
- `getAlbumList` supports a role filter; if specified, only filter artists with that role (ND only)
- Album list on artist page can filter by role if specified (only one)
- Album query is no longer suspend, as it can change multiple times

package.json

@@ -1,6 +1,6 @@
 {
     "name": "feishin",
-    "version": "1.12.1",
+    "version": "1.13.0",
     "description": "A modern self-hosted music player.",
     "keywords": [
         "subsonic",

src/i18n/i18n.ts

@@ -8,6 +8,7 @@ import cs from './locales/cs.json';
 import de from './locales/de.json';
 import en from './locales/en.json';
 import es from './locales/es.json';
+import et from './locales/et.json';
 import eu from './locales/eu.json';
 import fa from './locales/fa.json';
 import fi from './locales/fi.json';
@@ -27,6 +28,8 @@ import sl from './locales/sl.json';
 import sr from './locales/sr.json';
 import sv from './locales/sv.json';
 import ta from './locales/ta.json';
+import th from './locales/th.json';
+import tl from './locales/tl.json';
 import tr from './locales/tr.json';
 import zhHans from './locales/zh-Hans.json';
 import zhHant from './locales/zh-Hant.json';
@@ -38,6 +41,7 @@ const resources = {
     de: { translation: de },
     en: { translation: en },
     es: { translation: es },
+    et: { translation: et },
     eu: { translation: eu },
     fa: { translation: fa },
     fi: { translation: fi },
@@ -57,6 +61,8 @@ const resources = {
     sr: { translation: sr },
     sv: { translation: sv },
     ta: { translation: ta },
+    th: { translation: th },
+    tl: { translation: tl },
     tr: { translation: tr },
     'zh-Hans': { translation: zhHans },
     'zh-Hant': { translation: zhHant },
@@ -87,6 +93,10 @@ export const languages = [
         label: 'Español',
         value: 'es',
     },
+    {
+        label: 'Eesti',
+        value: 'et',
+    },
     {
         label: 'Basque',
         value: 'eu',
@@ -163,6 +173,14 @@ export const languages = [
         label: 'Tamil',
         value: 'ta',
     },
+    {
+        label: 'Thai',
+        value: 'th',
+    },
+    {
+        label: 'Tagalog',
+        value: 'tl',
+    },
     {
         label: 'Türkçe',
         value: 'tr',

src/i18n/locales/en.json

@@ -143,6 +143,7 @@
         "resetToDefault": "Reset to default",
         "restartRequired": "Restart required",
         "right": "Right",
+        "role": "Role",
         "sampleRate": "Sample rate",
         "save": "Save",
         "saveAndReplace": "Save and replace",
@@ -699,6 +700,7 @@
         "viewQueue": "View queue",
         "sleepTimer": "Sleep timer",
         "sleepTimer_endOfSong": "End of current song",
+        "sleepTimer_endOfAlbum": "End of current album",
         "sleepTimer_minutes": "{{count}} min",
         "sleepTimer_hours": "{{count}} hr",
         "sleepTimer_custom": "Custom",

src/i18n/locales/et.json

@@ -288,6 +288,29 @@
         "releaseDate": "Ilmumiskuupäev",
         "releaseYear": "Ilmumisaasta",
         "search": "Otsing",
-        "songCount": "Lugude arv"
+        "songCount": "Lugude arv",
+        "explicitStatus": "$t(common.explicitStatus)",
+        "title": "Pealkiri",
+        "sortName": "Sortimisnimi",
+        "trackNumber": "Lugu"
+    },
+    "filterOperator": {
+        "contains": "Sisaldab",
+        "endsWith": "Lõpeb",
+        "is": "On",
+        "isNot": "Ei ole",
+        "isGreaterThan": "On suurem kui",
+        "isLessThan": "On väiksem kui",
+        "matchesRegex": "Vastab regulaaravaldisele",
+        "notContains": "Ei sisalda",
+        "inTheRangeDate": "Jääb vahemikku (kuupäev)",
+        "inTheRange": "Jääb vahemikku",
+        "inTheLast": "Viimase",
+        "inPlaylist": "On",
+        "beforeDate": "On enne (kuupäeva)",
+        "before": "On enne",
+        "afterDate": "On pärast (kuupäeva)",
+        "after": "On pärast",
+        "notInPlaylist": "Ei ole"
     }
 }

src/i18n/locales/zh-Hant.json

@@ -420,7 +420,8 @@
         "sleepTimer_setCustom": "設定定時器",
         "sleepTimer_cancel": "取消定時器",
         "albumRadio": "專輯電台",
-        "scrobbleForceSubmit": "強制紀錄"
+        "scrobbleForceSubmit": "強制紀錄",
+        "sleepTimer_endOfAlbum": "專輯播完時"
     },
     "setting": {
         "audioPlayer_description": "選擇用於播放的音訊播放器",

src/main/features/core/settings/index.ts

@@ -141,6 +141,14 @@ ipcMain.on('settings-set', (__event, data: { property: string; value: any }) =>
     }
 });
 
+ipcMain.handle('settings-set-sync', (__event, data: { property: string; value: any }) => {
+    if (data.value === null) {
+        store.delete(data.property);
+    } else {
+        store.set(data.property, data.value);
+    }
+});
+
 ipcMain.handle('password-get', (_event, server: string): null | string => {
     if (safeStorage.isEncryptionAvailable()) {
         const servers = store.get('server') as Record<string, string> | undefined;

src/main/index.ts

@@ -252,7 +252,9 @@ function createAlphaUpdaterInstance(): AppImageUpdater | MacUpdater | NsisUpdate
     return new NsisUpdater(ALPHA_UPDATER_CONFIG);
 }
 
-protocol.registerSchemesAsPrivileged([{ privileges: { bypassCSP: true }, scheme: 'feishin' }]);
+protocol.registerSchemesAsPrivileged([
+    { privileges: { bypassCSP: true, corsEnabled: true }, scheme: 'feishin' },
+]);
 
 process.on('uncaughtException', (error: any) => {
     console.error('Error in main process', error);
@@ -989,14 +991,33 @@ app.on('window-all-closed', () => {
     }
 });
 
-const FONT_HEADERS = [
+const FONT_HEADERS = new Set([
     'font/collection',
     'font/otf',
     'font/sfnt',
     'font/ttf',
     'font/woff',
     'font/woff2',
-];
+]);
+
+const bytesToInt = (array: Uint8Array, length: number): number => {
+    let value = 0;
+    for (let i = 0; i < length; i++) {
+        value = (value << 8) + array[i];
+    }
+
+    return value;
+};
+
+const FONT_FOUR_BYTE_MAGIC_NUMBERS = new Set([
+    0x4f54544f, // font/otf
+    0x774f4632, // font/woff2
+    0x774f4646, // font/woff
+]);
+
+const FONT_FIVE_BYTE_MAGIC_NUMBERS = new Set([
+    0x0001000000, // ttf, collection, sfnt
+]);
 
 const singleInstance = isDevelopment ? true : app.requestSingleInstanceLock();
 
@@ -1017,12 +1038,9 @@ if (!singleInstance) {
 
     app.whenReady()
         .then(() => {
-            protocol.handle('feishin', async (request) => {
-                const filePath = `file:${request.url.slice('feishin:'.length)}`;
-                const response = await net.fetch(filePath);
-                const contentType = response.headers.get('content-type');
-
-                if (!contentType || !FONT_HEADERS.includes(contentType)) {
+            protocol.handle('feishin', async () => {
+                const filePath = store.get('local_font_path');
+                if (typeof filePath !== 'string') {
                     getMainWindow()?.webContents.send('custom-font-error', filePath);
 
                     return new Response(null, {
@@ -1031,7 +1049,38 @@ if (!singleInstance) {
                     });
                 }
 
-                return response;
+                const response = await net.fetch('file:' + filePath);
+                const contentType = response.headers.get('content-type');
+
+                // On Linux, the mime type is included in the response header
+                // In this case, we can forward the response with no further processing
+                if (contentType && FONT_HEADERS.has(contentType)) {
+                    return response;
+                }
+
+                // Otherwise, let's check the magic number to see if
+                // the file is a font type. This is either four or five bytes
+                const payload = await response.arrayBuffer();
+                const magicNumber = new Uint8Array(payload.slice(0, 5));
+                const fiveHex = bytesToInt(magicNumber, 5);
+                const fourHex = bytesToInt(magicNumber, 4);
+
+                if (
+                    FONT_FIVE_BYTE_MAGIC_NUMBERS.has(fiveHex) ||
+                    FONT_FOUR_BYTE_MAGIC_NUMBERS.has(fourHex)
+                ) {
+                    // We have to create a new response with the payload, since it has been read now
+                    return new Response(payload, {
+                        headers: response.headers,
+                    });
+                }
+
+                getMainWindow()?.webContents.send('custom-font-error', filePath);
+
+                return new Response(null, {
+                    status: 403,
+                    statusText: 'Forbidden',
+                });
             });
 
             session.defaultSession.webRequest.onHeadersReceived((details, callback) => {

src/preload/local-settings.ts

@@ -9,6 +9,13 @@ const set = (
     ipcRenderer.send('settings-set', { property, value });
 };
 
+const setSync = async (
+    property: string,
+    value: boolean | null | Record<string, unknown> | string | string[],
+) => {
+    return ipcRenderer.invoke('settings-set-sync', { property, value });
+};
+
 const get = async (property: string) => {
     return ipcRenderer.invoke('settings-get', { property });
 };
@@ -99,6 +106,7 @@ export const localSettings = {
     passwordSet,
     restart,
     set,
+    setSync,
     setZoomFactor,
     themeSet,
 };

src/preload/utils.ts

@@ -139,6 +139,7 @@ export const utils = {
     rendererToggleSidebar,
     rendererUpdateAvailable,
     saveCustomCss,
+    separator: isWindows() ? '\\' : '/',
     setInputFocused,
     startPowerSaveBlocker,
     stopPowerSaveBlocker,

src/renderer/api/jellyfin/jellyfin-api.ts

@@ -54,6 +54,15 @@ export const contract = c.router({
             400: jfType._response.error,
         },
     },
+    deleteArtistImage: {
+        body: null,
+        method: 'DELETE',
+        path: 'Items/:id/Images/Primary',
+        responses: {
+            204: jfType._response.deleteArtistImage,
+            400: jfType._response.error,
+        },
+    },
     deletePlaylist: {
         body: null,
         method: 'DELETE',
@@ -63,6 +72,15 @@ export const contract = c.router({
             400: jfType._response.error,
         },
     },
+    deletePlaylistImage: {
+        body: null,
+        method: 'DELETE',
+        path: 'Items/:id/Images/Primary',
+        responses: {
+            204: jfType._response.deletePlaylistImage,
+            400: jfType._response.error,
+        },
+    },
     getAlbumArtistDetail: {
         method: 'GET',
         path: 'users/:userId/items/:id',
@@ -356,6 +374,24 @@ export const contract = c.router({
             400: jfType._response.error,
         },
     },
+    uploadArtistImage: {
+        body: z.string(),
+        method: 'POST',
+        path: 'Items/:id/Images/Primary',
+        responses: {
+            204: jfType._response.uploadArtistImage,
+            400: jfType._response.error,
+        },
+    },
+    uploadPlaylistImage: {
+        body: z.string(),
+        method: 'POST',
+        path: 'Items/:id/Images/Primary',
+        responses: {
+            204: jfType._response.uploadPlaylistImage,
+            400: jfType._response.error,
+        },
+    },
 });
 
 const axiosClient = axios.create({});

src/renderer/api/jellyfin/jellyfin-controller.ts

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { set } from 'idb-keyval';
 import chunk from 'lodash/chunk';
 import filter from 'lodash/filter';
@@ -13,6 +14,10 @@ import { getFeatures, hasFeature, sortSongList, VersionInfo } from '/@/shared/ap
 import {
     albumArtistListSortMap,
     albumListSortMap,
+    DeleteArtistImageArgs,
+    DeleteArtistImageResponse,
+    DeletePlaylistImageArgs,
+    DeletePlaylistImageResponse,
     Folder,
     genreListSortMap,
     ImageArgs,
@@ -29,6 +34,10 @@ import {
     SortOrder,
     sortOrderMap,
     Tag,
+    UploadArtistImageArgs,
+    UploadArtistImageResponse,
+    UploadPlaylistImageArgs,
+    UploadPlaylistImageResponse,
 } from '/@/shared/types/domain-types';
 import { ServerFeature } from '/@/shared/types/features-types';
 
@@ -63,6 +72,94 @@ const formatCommaDelimitedString = (value: string[]) => {
     return value.join(',');
 };
 
+const getImageContentType = (bytes: Uint8Array): string => {
+    if (bytes[0] === 0x89 && bytes[1] === 0x50) {
+        return 'image/png';
+    }
+    if (bytes[0] === 0xff && bytes[1] === 0xd8) {
+        return 'image/jpeg';
+    }
+    if (bytes[0] === 0x47 && bytes[1] === 0x49) {
+        return 'image/gif';
+    }
+    if (bytes[0] === 0x52 && bytes[1] === 0x49) {
+        return 'image/webp';
+    }
+
+    return 'image/jpeg';
+};
+
+const uint8ArrayToBase64 = (bytes: Uint8Array): string => {
+    let binary = '';
+    const chunkSize = 0x8000;
+
+    for (let i = 0; i < bytes.length; i += chunkSize) {
+        const chunk = bytes.subarray(i, i + chunkSize);
+        binary += String.fromCharCode(...chunk);
+    }
+
+    return btoa(binary);
+};
+
+type JellyfinApiClientProps = DeletePlaylistImageArgs['apiClientProps'];
+
+const deleteItemPrimaryImage = async (
+    apiClientProps: JellyfinApiClientProps,
+    id: string,
+    errorMessage: string,
+): Promise<boolean> => {
+    const res = await jfApiClient({
+        ...apiClientProps,
+        server: apiClientProps.server ?? null,
+    }).deleteArtistImage({
+        params: {
+            id,
+        },
+    });
+
+    if (res.status !== 204) {
+        throw new Error(errorMessage);
+    }
+
+    return true;
+};
+
+const uploadItemPrimaryImage = async (
+    apiClientProps: JellyfinApiClientProps,
+    id: string,
+    image: Uint8Array,
+    errorMessage: string,
+): Promise<boolean> => {
+    const server = apiClientProps.server;
+    const serverUrl = getServerUrl(server);
+
+    if (!serverUrl) {
+        throw new Error('Server is required');
+    }
+
+    const contentType = getImageContentType(image);
+    const base64 = uint8ArrayToBase64(image);
+
+    const authHeader = createAuthHeader();
+    const authorization = server?.credential
+        ? authHeader.concat(`, Token="${server.credential}"`)
+        : authHeader;
+
+    const res = await axios.post(`${serverUrl}/Items/${id}/Images/Primary`, base64, {
+        headers: {
+            Authorization: authorization,
+            'Content-Type': contentType,
+        },
+        signal: apiClientProps.signal,
+    });
+
+    if (res.status !== 204) {
+        throw new Error(errorMessage);
+    }
+
+    return true;
+};
+
 // Limit the query to 50 at a time to be *extremely* conservative on the
 // length of the full URL, since the ids are part of the query string and
 // not the POST body
@@ -80,7 +177,14 @@ const VERSION_INFO: VersionInfo = [
             [ServerFeature.PUBLIC_PLAYLIST]: [1],
         },
     ],
-    ['10.0.0', { [ServerFeature.TAGS]: [1] }],
+    [
+        '10.0.0',
+        {
+            [ServerFeature.ARTIST_IMAGE_UPLOAD]: [1],
+            [ServerFeature.PLAYLIST_IMAGE_UPLOAD]: [1],
+            [ServerFeature.TAGS]: [1],
+        },
+    ],
 ];
 
 const JF_FIELDS = {
@@ -231,6 +335,11 @@ export const JellyfinController: InternalControllerEndpoint = {
             id: res.body.Id,
         };
     },
+    deleteArtistImage: async (args: DeleteArtistImageArgs): Promise<DeleteArtistImageResponse> => {
+        const { apiClientProps, query } = args;
+
+        return deleteItemPrimaryImage(apiClientProps, query.id, 'Failed to delete artist image');
+    },
     deleteFavorite: async (args) => {
         const { apiClientProps, query } = args;
 
@@ -281,6 +390,13 @@ export const JellyfinController: InternalControllerEndpoint = {
 
         return null;
     },
+    deletePlaylistImage: async (
+        args: DeletePlaylistImageArgs,
+    ): Promise<DeletePlaylistImageResponse> => {
+        const { apiClientProps, query } = args;
+
+        return deleteItemPrimaryImage(apiClientProps, query.id, 'Failed to delete playlist image');
+    },
     getAlbumArtistDetail: async (args) => {
         const { apiClientProps, query } = args;
 
@@ -1847,6 +1963,28 @@ export const JellyfinController: InternalControllerEndpoint = {
 
         return null;
     },
+    uploadArtistImage: async (args: UploadArtistImageArgs): Promise<UploadArtistImageResponse> => {
+        const { apiClientProps, body, query } = args;
+
+        return uploadItemPrimaryImage(
+            apiClientProps,
+            query.id,
+            body.image,
+            'Failed to upload artist image',
+        );
+    },
+    uploadPlaylistImage: async (
+        args: UploadPlaylistImageArgs,
+    ): Promise<UploadPlaylistImageResponse> => {
+        const { apiClientProps, body, query } = args;
+
+        return uploadItemPrimaryImage(
+            apiClientProps,
+            query.id,
+            body.image,
+            'Failed to upload playlist image',
+        );
+    },
 };
 
 function getLibraryId(musicFolderId?: string | string[]) {

src/renderer/api/navidrome/navidrome-controller.ts

@@ -428,16 +428,18 @@ export const NavidromeController: InternalControllerEndpoint = {
             ? query.artistIds
             : query.artistIds?.[0];
 
+        const key = query.role ? `role_${query.role}_id` : 'artist_id';
+
         const res = await ndApiClient(apiClientProps).getAlbumList({
             query: {
                 _end: query.startIndex + (query.limit || 0),
                 _order: sortOrderMap.navidrome[query.sortOrder],
                 _sort: albumListSortMap.navidrome[query.sortBy],
                 _start: query.startIndex,
-                artist_id: artistIds,
                 compilation: query.compilation,
                 genre_id: genres,
                 has_rating: query.hasRating,
+                [key]: artistIds,
                 library_id: getLibraryId(query.musicFolderId),
                 name: query.searchTerm,
                 recently_played: query.isRecentlyPlayed,

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -1,6 +1,7 @@
 import {
     useQuery,
     useQueryClient,
+    UseQueryResult,
     useSuspenseQuery,
     UseSuspenseQueryResult,
 } from '@tanstack/react-query';
@@ -1061,6 +1062,7 @@ const AlbumArtistMetadataSimilarArtists = ({
                 mbz: null,
                 name: relatedArtist.name,
                 playCount: null,
+                roles: null,
                 similarArtists: null,
                 songCount: null,
                 userFavorite: relatedArtist.userFavorite,
@@ -1101,13 +1103,17 @@ const AlbumArtistMetadataSimilarArtists = ({
 };
 
 interface AlbumArtistDetailContentProps {
-    albumsQuery: UseSuspenseQueryResult<AlbumListResponse, Error>;
+    albumsQuery: UseQueryResult<AlbumListResponse, Error>;
     detailQuery: UseSuspenseQueryResult<AlbumArtistDetailResponse, Error>;
+    role: null | string;
+    setRole: (role: null | string) => void;
 }
 
 export const AlbumArtistDetailContent = ({
     albumsQuery,
     detailQuery,
+    role,
+    setRole,
 }: AlbumArtistDetailContentProps) => {
     const artistItems = useArtistItems();
     const artistRadioCount = useArtistRadioCount();
@@ -1220,7 +1226,13 @@ export const AlbumArtistDetailContent = ({
                             routeId={routeId}
                         />
                     )}
-                    <ArtistAlbums albumsQuery={albumsQuery} order={itemOrder.recentAlbums} />
+                    <ArtistAlbums
+                        albumsQuery={albumsQuery}
+                        order={itemOrder.recentAlbums}
+                        role={role}
+                        roles={detailQuery.data?.roles}
+                        setRole={setRole}
+                    />
                     {enabledItem.similarArtists && (
                         <AlbumArtistMetadataSimilarArtists
                             order={itemOrder.similarArtists}
@@ -1420,13 +1432,17 @@ const AlbumSection = memo(function AlbumSection({
 });
 
 import { useArtistAlbumsGrouped } from '/@/renderer/features/artists/hooks/use-artist-albums-grouped';
+import { Select } from '/@/shared/components/select/select';
 
 interface ArtistAlbumsProps {
-    albumsQuery: UseSuspenseQueryResult<AlbumListResponse, Error>;
+    albumsQuery: UseQueryResult<AlbumListResponse, Error>;
     order?: number;
+    role: null | string;
+    roles?: null | string[];
+    setRole: (role: null | string) => void;
 }
 
-const ArtistAlbums = ({ albumsQuery, order }: ArtistAlbumsProps) => {
+const ArtistAlbums = ({ albumsQuery, order, role, roles, setRole }: ArtistAlbumsProps) => {
     const { t } = useTranslation();
     const [searchTerm, setSearchTerm] = useState('');
     const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 300);
@@ -1521,6 +1537,17 @@ const ArtistAlbums = ({ albumsQuery, order }: ArtistAlbumsProps) => {
                         }}
                         value={searchTerm}
                     />
+                    {roles?.length && (
+                        <Select
+                            aria-label="role"
+                            clearable
+                            data={roles}
+                            onChange={setRole}
+                            placeholder={t('common.role')}
+                            value={role}
+                            w={200}
+                        />
+                    )}
                     <ListSortByDropdownControlled
                         filters={CLIENT_SIDE_ALBUM_FILTERS}
                         itemType={LibraryItem.ALBUM}

src/renderer/features/artists/components/album-artist-detail-header.tsx

@@ -1,4 +1,4 @@
-import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
+import { UseQueryResult, useSuspenseQuery } from '@tanstack/react-query';
 import { forwardRef, Fragment, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
@@ -38,7 +38,7 @@ import { ServerFeature } from '/@/shared/types/features-types';
 import { Play } from '/@/shared/types/types';
 
 interface AlbumArtistDetailHeaderProps {
-    albumsQuery: UseSuspenseQueryResult<AlbumListResponse, Error>;
+    albumsQuery: UseQueryResult<AlbumListResponse, Error>;
 }
 
 function ArtistImageUploadOverlay({

src/renderer/features/artists/routes/album-artist-detail-route.tsx

@@ -1,5 +1,5 @@
-import { useSuspenseQueries } from '@tanstack/react-query';
-import { Suspense, useRef } from 'react';
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { Suspense, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 
 import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
@@ -34,22 +34,24 @@ const AlbumArtistDetailRouteContent = () => {
     };
 
     const routeId = (artistId || albumArtistId) as string;
+    const [role, setRole] = useState<null | string>(null);
 
-    const [detailQuery, albumsQuery] = useSuspenseQueries({
-        queries: [
-            artistsQueries.albumArtistDetail({ query: { id: routeId }, serverId: server?.id }),
-            albumQueries.list({
-                query: {
-                    artistIds: [routeId],
-                    limit: -1,
-                    sortBy: AlbumListSort.RELEASE_DATE,
-                    sortOrder: SortOrder.DESC,
-                    startIndex: 0,
-                },
-                serverId,
-            }),
-        ],
-    });
+    const detailQuery = useSuspenseQuery(
+        artistsQueries.albumArtistDetail({ query: { id: routeId }, serverId: server?.id }),
+    );
+    const albumsQuery = useQuery(
+        albumQueries.list({
+            query: {
+                artistIds: [routeId],
+                limit: -1,
+                role: role || undefined,
+                sortBy: AlbumListSort.RELEASE_DATE,
+                sortOrder: SortOrder.DESC,
+                startIndex: 0,
+            },
+            serverId,
+        }),
+    );
 
     const imageUrl = useItemImageUrl({
         id: detailQuery.data?.imageId || undefined,
@@ -117,7 +119,12 @@ const AlbumArtistDetailRouteContent = () => {
                         albumsQuery={albumsQuery}
                         ref={headerRef as React.Ref<HTMLDivElement>}
                     />
-                    <AlbumArtistDetailContent albumsQuery={albumsQuery} detailQuery={detailQuery} />
+                    <AlbumArtistDetailContent
+                        albumsQuery={albumsQuery}
+                        detailQuery={detailQuery}
+                        role={role}
+                        setRole={setRole}
+                    />
                 </LibraryContainer>
             </NativeScrollArea>
         </AnimatedPage>

src/renderer/features/lyrics/api/lyrics-api.ts

@@ -109,12 +109,8 @@ export function computeSelectedFromResult(
         };
     }
 
-    const hasLocalLocal =
-        (Array.isArray(local) && local.length > 0) ||
-        (local != null && !Array.isArray(local) && 'lyrics' in local && Boolean(local.lyrics));
-
     // If setting is set to prefer local lyrics, return the local lyrics if available
-    if (preferLocalLyrics && hasLocalLocal) {
+    if (preferLocalLyrics && hasLocalLyrics(local)) {
         if (Array.isArray(local) && local.length > 0) {
             const item = local[Math.min(selectedStructuredIndex, local.length - 1)];
             return { selected: item, selectedSynced: item.synced };
@@ -236,6 +232,13 @@ export function getDisplayOffset(
     return storedOffsetMs;
 }
 
+export function hasLocalLyrics(local: FullLyricsMetadata | null | StructuredLyric[]): boolean {
+    return (
+        (Array.isArray(local) && local.length > 0) ||
+        (local != null && !Array.isArray(local) && 'lyrics' in local && Boolean(local.lyrics))
+    );
+}
+
 const emptyResult = (): LyricsQueryResult => ({
     local: null,
     overrideData: null,
@@ -277,16 +280,11 @@ export const lyricsQueries = {
                 const selectedOffsetMs = prev?.selectedOffsetMs ?? 0;
                 const preferLocalLyrics = useSettingsStore.getState().lyrics.preferLocalLyrics;
 
-                // Fetch local lyrics
-                const localPromise = fetchLocalLyrics({ serverId: args.serverId, signal, song });
-
-                // Fetch remote auto lyrics
                 const remoteAutoPromise =
                     suppressRemoteAuto || !useSettingsStore.getState().lyrics.fetch
                         ? null
                         : fetchRemoteLyricsAuto(song);
 
-                // Fetch override data
                 const overrideDataPromise = overrideSelection
                     ? fetchRemoteLyricsById({
                           remoteSongId: overrideSelection.id,
@@ -295,11 +293,40 @@ export const lyricsQueries = {
                       })
                     : null;
 
-                const [local, remoteAuto, overrideData] = await Promise.all([
-                    localPromise,
-                    remoteAutoPromise,
-                    overrideDataPromise,
-                ]);
+                const localPromise = fetchLocalLyrics({ serverId: args.serverId, signal, song });
+
+                let local: FullLyricsMetadata | null | StructuredLyric[];
+                let remoteAuto: FullLyricsMetadata | null;
+                let overrideData: LyricsResponse | null;
+
+                if (preferLocalLyrics) {
+                    local = await localPromise;
+
+                    if (hasLocalLyrics(local)) {
+                        overrideData = overrideDataPromise ? await overrideDataPromise : null;
+                        remoteAuto = null;
+
+                        if (remoteAutoPromise) {
+                            void remoteAutoPromise.then((fetchedRemoteAuto) => {
+                                if (signal.aborted || !fetchedRemoteAuto) return;
+                                queryClient.setQueryData<LyricsQueryResult>(lyricsKey, (prev) =>
+                                    prev ? { ...prev, remoteAuto: fetchedRemoteAuto } : prev,
+                                );
+                            });
+                        }
+                    } else {
+                        [remoteAuto, overrideData] = await Promise.all([
+                            remoteAutoPromise,
+                            overrideDataPromise,
+                        ]);
+                    }
+                } else {
+                    [local, remoteAuto, overrideData] = await Promise.all([
+                        localPromise,
+                        remoteAutoPromise,
+                        overrideDataPromise,
+                    ]);
+                }
 
                 const partial: Pick<
                     LyricsQueryResult,
@@ -320,13 +347,12 @@ export const lyricsQueries = {
                     preferLocalLyrics,
                     selectedStructuredIndex,
                 );
-                const displayOffset = getDisplayOffset(
+                const resultSelectedOffsetMs = getDisplayOffset(
                     selected,
                     selectedOffsetMs,
                     selectedStructuredIndex,
                     local,
                 );
-                const resultSelectedOffsetMs = displayOffset;
 
                 return {
                     ...emptyResult(),

src/renderer/features/now-playing/components/play-queue-list-controls.tsx

@@ -1,6 +1,6 @@
 import { useIsFetching } from '@tanstack/react-query';
 import { t } from 'i18next';
-import { RefObject } from 'react';
+import { RefObject, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './play-queue-list-controls.module.css';
@@ -21,6 +21,7 @@ import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Box } from '/@/shared/components/box/box';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
+import { toast } from '/@/shared/components/toast/toast';
 import { ServerFeature } from '/@/shared/types/features-types';
 import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
 
@@ -135,7 +136,17 @@ const QueueRestoreActions = () => {
 
     const isFetching = useIsFetching({ queryKey: queryKeys.player.fetch({ type: 'queue' }) });
 
-    const { isPending: isSavingQueue, mutate: handleSaveQueue } = useSaveQueue();
+    const { isPending: isSavingQueue, mutate: saveQueue } = useSaveQueue();
+
+    const handleSaveQueue = useCallback(() => {
+        saveQueue(undefined, {
+            onSuccess: () => {
+                toast.success({
+                    message: t('form.saveQueue.success'),
+                });
+            },
+        });
+    }, [saveQueue]);
 
     const handleRestoreQueue = useRestoreQueue();
 

src/renderer/features/player/components/sleep-timer-button.tsx

@@ -3,7 +3,11 @@ import { useTranslation } from 'react-i18next';
 
 import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/use-player-events';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
-import { usePlayerStatus, usePlayerStoreBase } from '/@/renderer/store/player.store';
+import {
+    usePlayerShuffle,
+    usePlayerStatus,
+    usePlayerStoreBase,
+} from '/@/renderer/store/player.store';
 import {
     useSleepTimerActions,
     useSleepTimerActive,
@@ -21,10 +25,11 @@ import { NumberInput } from '/@/shared/components/number-input/number-input';
 import { Popover } from '/@/shared/components/popover/popover';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
-import { PlayerStatus } from '/@/shared/types/types';
+import { PlayerShuffle, PlayerStatus } from '/@/shared/types/types';
 
 const PRESET_OPTIONS = [
     { minutes: 0, mode: 'endOfSong' as const },
+    { minutes: 0, mode: 'endOfAlbum' as const },
     { minutes: 5, mode: 'timed' as const },
     { minutes: 10, mode: 'timed' as const },
     { minutes: 15, mode: 'timed' as const },
@@ -50,12 +55,38 @@ function formatRemaining(totalSeconds: number): string {
 const useSleepTimer = () => {
     const active = useSleepTimerActive();
     const mode = useSleepTimerMode();
-    const { cancelTimer, setRemaining } = useSleepTimerActions();
+    const { cancelTimer, setRemaining, setTargetAlbumId } = useSleepTimerActions();
     const { mediaPause } = usePlayer();
 
     const mediaPauseRef = useRef(mediaPause);
     mediaPauseRef.current = mediaPause;
 
+    // End of album mode. Set the pauseOnNextSongEnd flag whenever the current track
+    // is the last one of the target album.
+    const evaluateEndOfAlbum = useCallback(() => {
+        const { currentSong, nextSong } = usePlayerStoreBase.getState().getPlayerData();
+
+        if (!currentSong) {
+            return;
+        }
+
+        let target = useSleepTimerStore.getState().targetAlbumId;
+
+        if (target === null) {
+            target = currentSong.albumId;
+            setTargetAlbumId(target);
+        }
+
+        if (currentSong.albumId !== target) {
+            usePlayerStoreBase.getState().setPauseOnNextSongEnd(false);
+            cancelTimer();
+            return;
+        }
+
+        const isLastOfAlbum = !nextSong || nextSong.albumId !== currentSong.albumId;
+        usePlayerStoreBase.getState().setPauseOnNextSongEnd(isLastOfAlbum);
+    }, [cancelTimer, setTargetAlbumId]);
+
     const handleOnCurrentSongChange = useCallback(() => {
         if (!active) {
             return;
@@ -65,8 +96,14 @@ const useSleepTimer = () => {
         if (mode === 'endOfSong') {
             cancelTimer();
             mediaPauseRef.current();
+            return;
         }
-    }, [active, mode, cancelTimer, mediaPauseRef]);
+
+        // Cancel and pause song change in end-of-album mode
+        if (mode === 'endOfAlbum') {
+            evaluateEndOfAlbum();
+        }
+    }, [active, mode, cancelTimer, evaluateEndOfAlbum, mediaPauseRef]);
 
     const status = usePlayerStatus();
 
@@ -104,15 +141,32 @@ const useSleepTimer = () => {
     // mediaAutoNext returns PAUSED status when the current song ends.
     // This is a generic player mechanism — the web player handles it
     // without needing to know about the sleep timer.
+    // End-of-album mode: set the same flag conditionally, here we run
+    // the intial evaluation in case the timer was started while already
+    // on the last track of the album
     useEffect(() => {
-        if (!active || mode !== 'endOfSong') return;
+        if (!active) {
+            return;
+        }
 
-        usePlayerStoreBase.getState().setPauseOnNextSongEnd(true);
+        if (mode === 'endOfSong') {
+            usePlayerStoreBase.getState().setPauseOnNextSongEnd(true);
 
-        return () => {
-            usePlayerStoreBase.getState().setPauseOnNextSongEnd(false);
-        };
-    }, [active, mode]);
+            return () => {
+                usePlayerStoreBase.getState().setPauseOnNextSongEnd(false);
+            };
+        }
+
+        if (mode === 'endOfAlbum') {
+            evaluateEndOfAlbum();
+
+            return () => {
+                usePlayerStoreBase.getState().setPauseOnNextSongEnd(false);
+            };
+        }
+
+        return undefined;
+    }, [active, mode, evaluateEndOfAlbum]);
 };
 
 export const SleepTimerHookInner = () => {
@@ -135,8 +189,14 @@ export const SleepTimerButton = () => {
     const active = useSleepTimerActive();
     const mode = useSleepTimerMode();
     const remaining = useSleepTimerRemaining();
-    const { cancelTimer, startEndOfSongTimer, startTimedTimer } = useSleepTimerActions();
+    const { cancelTimer, startEndOfAlbumTimer, startEndOfSongTimer, startTimedTimer } =
+        useSleepTimerActions();
     const { mediaPause } = usePlayer();
+    const shuffle = usePlayerShuffle();
+    // Track level shuffle scatters and album across a play queue making 'end-of-album'
+    // meaningless. Album shuffle keeps each album intact, so keep 'end-of-'album
+    // enabled there
+    const isTrackShuffle = shuffle === PlayerShuffle.TRACK;
 
     const [showCustom, setShowCustom] = useState(false);
     const [customHours, setCustomHours] = useState<number>(0);
@@ -151,13 +211,15 @@ export const SleepTimerButton = () => {
         (option: (typeof PRESET_OPTIONS)[number]) => {
             if (option.mode === 'endOfSong') {
                 startEndOfSongTimer();
+            } else if (option.mode === 'endOfAlbum') {
+                startEndOfAlbumTimer();
             } else {
                 startTimedTimer(option.minutes * 60);
             }
             setShowCustom(false);
             setOpened(false);
         },
-        [startEndOfSongTimer, startTimedTimer],
+        [startEndOfAlbumTimer, startEndOfSongTimer, startTimedTimer],
     );
 
     const handleCustomStart = useCallback(() => {
@@ -178,6 +240,9 @@ export const SleepTimerButton = () => {
         if (option.mode === 'endOfSong') {
             return t('player.sleepTimer_endOfSong');
         }
+        if (option.mode === 'endOfAlbum') {
+            return t('player.sleepTimer_endOfAlbum');
+        }
         if (option.minutes >= 60) {
             return t('player.sleepTimer_hours', {
                 count: option.minutes / 60,
@@ -231,6 +296,10 @@ export const SleepTimerButton = () => {
                                 <Text c="primary" size="sm">
                                     {t('player.sleepTimer_endOfSong')}
                                 </Text>
+                            ) : mode === 'endOfAlbum' ? (
+                                <Text c="primary" size="sm">
+                                    {t('player.sleepTimer_endOfAlbum')}
+                                </Text>
                             ) : (
                                 <Text c="primary" fw="600" size="lg">
                                     {formatRemaining(remaining)}
@@ -249,12 +318,17 @@ export const SleepTimerButton = () => {
                         </Flex>
                     )}
 
-                    {PRESET_OPTIONS.filter((option) => option.mode === 'endOfSong').map(
-                        (option, index) => (
+                    {PRESET_OPTIONS.filter(
+                        (option) => option.mode === 'endOfSong' || option.mode === 'endOfAlbum',
+                    ).map((option) => {
+                        const disabled = option.mode === 'endOfAlbum' && isTrackShuffle;
+
+                        return (
                             <Button
+                                disabled={disabled}
                                 fullWidth
                                 justify="flex-start"
-                                key={index}
+                                key={option.mode}
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     handlePreset(option);
@@ -264,8 +338,8 @@ export const SleepTimerButton = () => {
                             >
                                 {getPresetLabel(option)}
                             </Button>
-                        ),
-                    )}
+                        );
+                    })}
 
                     <Divider my="md" />
 

src/renderer/features/player/hooks/use-queue-restore.ts

@@ -170,26 +170,20 @@ export const useSaveQueue = () => {
                 throw new Error(`${t('error.multipleServerSaveQueueError')}`);
             }
 
-            try {
-                await api.controller.savePlayQueue({
-                    apiClientProps: { serverId },
-                    query: {
-                        currentIndex: queue.items.length > 0 ? state.player.index : undefined,
-                        positionMs: useTimestampStoreBase.getState().timestamp * 1000,
-                        songs: queue.items.map((item) => item.id),
-                    },
-                });
-
-                toast.success({
-                    message: t('form.saveQueue.success'),
-                });
-            } catch (error) {
-                toast.error({
-                    message: (error as Error).message,
-                    title: t('error.saveQueueFailed'),
-                });
-                throw error;
-            }
+            return api.controller.savePlayQueue({
+                apiClientProps: { serverId },
+                query: {
+                    currentIndex: queue.items.length > 0 ? state.player.index : undefined,
+                    positionMs: useTimestampStoreBase.getState().timestamp * 1000,
+                    songs: queue.items.map((item) => item.id),
+                },
+            });
+        },
+        onError: (error) => {
+            toast.error({
+                message: (error as Error).message,
+                title: t('error.saveQueueFailed'),
+            });
         },
     });
 

src/renderer/features/settings/components/general/application-settings.tsx

@@ -36,6 +36,7 @@ import { FontType } from '/@/shared/types/types';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
 const ipc = isElectron() ? window.api.ipc : null;
+const utils = isElectron() ? window.api.utils : null;
 // Electron 32+ removed file.path, use this which is exposed in preload to get real path
 const getPathForFile = isElectron() ? window.api.getPathForFile : null;
 
@@ -289,21 +290,29 @@ export const ApplicationSettings = memo(() => {
             control: (
                 <FileInput
                     accept=".ttc,.ttf,.otf,.woff,.woff2"
-                    onChange={(e) =>
+                    clearable
+                    defaultValue={
+                        fontSettings.custom
+                            ? new File([], fontSettings.custom.split(utils?.separator || '').pop()!)
+                            : null
+                    }
+                    onChange={async (e) => {
+                        const custom = e ? getPathForFile?.(e) || null : null;
+                        await localSettings?.setSync('local_font_path', custom);
                         setSettings({
                             font: {
                                 ...fontSettings,
-                                custom: e ? getPathForFile?.(e) || null : null,
+                                custom,
                             },
-                        })
-                    }
+                        });
+                    }}
                     w={300}
                 />
             ),
             description: t('setting.customFontPath', {
                 context: 'description',
             }),
-            isHidden: fontSettings.type !== FontType.CUSTOM,
+            isHidden: !isElectron() || fontSettings.type !== FontType.CUSTOM,
             title: t('setting.customFontPath'),
         },
         {

src/renderer/hooks/use-sync-settings-to-main.ts

@@ -32,6 +32,7 @@ export const useSyncSettingsToMain = () => {
             const settingsFromStore = useSettingsStore.getState();
 
             const settings = {
+                font: settingsFromStore.font,
                 general: settingsFromStore.general,
                 hotkeys: settingsFromStore.hotkeys,
                 lyrics: settingsFromStore.lyrics,
@@ -101,6 +102,10 @@ export const useSyncSettingsToMain = () => {
                     mainStoreKey: 'enableNeteaseTranslation',
                     rendererValue: settings.lyrics.enableNeteaseTranslation,
                 },
+                {
+                    mainStoreKey: 'local_font_path',
+                    rendererValue: settings.font.custom,
+                },
             ];
 
             // Compare and sync each setting

src/renderer/store/player.store.ts

@@ -1185,6 +1185,9 @@ export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
                     });
                 },
                 mediaSeekToTimestamp: (timestamp: number) => {
+                    // See mediaSkipBackward: update the timestamp store right away to
+                    // avoid the stale-read left by the ~500ms engine poll.
+                    setTimestampStore(timestamp);
                     set((state) => {
                         state.player.seekToTimestamp = uniqueSeekToTimestamp(timestamp);
                     });
@@ -1196,6 +1199,11 @@ export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
                     const currentTimestamp = useTimestampStoreBase.getState().timestamp;
                     const newTimestamp = Math.max(0, currentTimestamp - timeToSkip);
 
+                    // Update the timestamp store right away so the UI and any
+                    // subsequent seek compute from the new position instead of the
+                    // stale value left by the ~500ms engine poll (otherwise mashing
+                    // the seek keys repeatedly lands on the same time).
+                    setTimestampStore(newTimestamp);
                     set((state) => {
                         state.player.seekToTimestamp = uniqueSeekToTimestamp(newTimestamp);
                     });
@@ -1217,6 +1225,9 @@ export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
                     const currentTimestamp = useTimestampStoreBase.getState().timestamp;
                     const newTimestamp = Math.min(duration - 1, currentTimestamp + timeToSkip);
 
+                    // See mediaSkipBackward: update the timestamp store right away to
+                    // avoid the stale-read left by the ~500ms engine poll.
+                    setTimestampStore(newTimestamp);
                     set((state) => {
                         state.player.seekToTimestamp = uniqueSeekToTimestamp(newTimestamp);
                     });

src/renderer/store/sleep-timer.store.ts

@@ -1,11 +1,13 @@
 import { useShallow } from 'zustand/react/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 
-export type SleepTimerMode = 'endOfSong' | 'timed';
+export type SleepTimerMode = 'endOfAlbum' | 'endOfSong' | 'timed';
 
 interface SleepTimerActions {
     cancelTimer: () => void;
     setRemaining: (remaining: number) => void;
+    setTargetAlbumId: (albumId: null | string) => void;
+    startEndOfAlbumTimer: () => void;
     startEndOfSongTimer: () => void;
     startTimedTimer: (durationSeconds: number) => void;
 }
@@ -17,6 +19,8 @@ interface SleepTimerState {
     mode: SleepTimerMode;
     /** Remaining seconds (only ticks while playing) */
     remaining: number;
+    /** Album Id for song when mode activated */
+    targetAlbumId: null | string;
 }
 
 export const useSleepTimerStore = createWithEqualityFn<SleepTimerActions & SleepTimerState>()(
@@ -27,6 +31,7 @@ export const useSleepTimerStore = createWithEqualityFn<SleepTimerActions & Sleep
                 active: false,
                 mode: 'timed',
                 remaining: 0,
+                targetAlbumId: null,
             });
         },
         mode: 'timed',
@@ -36,11 +41,25 @@ export const useSleepTimerStore = createWithEqualityFn<SleepTimerActions & Sleep
             set({ remaining });
         },
 
+        setTargetAlbumId: (albumId: null | string) => {
+            set({ targetAlbumId: albumId });
+        },
+
+        startEndOfAlbumTimer: () => {
+            set({
+                active: true,
+                mode: 'endOfAlbum',
+                remaining: 0,
+                targetAlbumId: null,
+            });
+        },
+
         startEndOfSongTimer: () => {
             set({
                 active: true,
                 mode: 'endOfSong',
                 remaining: 0,
+                targetAlbumId: null,
             });
         },
 
@@ -49,8 +68,11 @@ export const useSleepTimerStore = createWithEqualityFn<SleepTimerActions & Sleep
                 active: true,
                 mode: 'timed',
                 remaining: durationSeconds,
+                targetAlbumId: null,
             });
         },
+
+        targetAlbumId: null,
     }),
 );
 
@@ -63,6 +85,8 @@ export const useSleepTimerActions = () =>
         useShallow((s) => ({
             cancelTimer: s.cancelTimer,
             setRemaining: s.setRemaining,
+            setTargetAlbumId: s.setTargetAlbumId,
+            startEndOfAlbumTimer: s.startEndOfAlbumTimer,
             startEndOfSongTimer: s.startEndOfSongTimer,
             startTimedTimer: s.startTimedTimer,
         })),

src/renderer/themes/use-app-theme.ts

@@ -134,6 +134,11 @@ export const useAppTheme = (overrideTheme?: AppTheme) => {
                 document.body.appendChild(textStyleRef.current);
             }
 
+            // Note: we change the url to bust caches when changing the path
+            // The url provided here does NOT matter, validation is done
+            // on the main process. Any feishin:/ url will fetch the same
+            // item, which the renderer will check via magic number to be
+            // some font item
             textStyleRef.current.textContent = `
             @font-face {
                 font-family: "dynamic-font";

src/shared/api/jellyfin/jellyfin-normalize.ts

@@ -395,8 +395,10 @@ const normalizeAlbumArtist = (
         mbz: item.ProviderIds?.MusicBrainzArtist || null,
         name: item.Name,
         playCount: item.UserData?.PlayCount || 0,
+        roles: null,
         similarArtists,
         songCount: item.SongCount ?? null,
+        uploadedImage: item.ImageTags?.Primary ?? undefined,
         userFavorite: item.UserData?.IsFavorite || false,
         userRating: null,
     };
@@ -434,6 +436,7 @@ const normalizePlaylist = (
         size: null,
         songCount: item?.ChildCount || null,
         sync: null,
+        uploadedImage: item.ImageTags?.Primary ?? undefined,
     };
 };
 

src/shared/api/jellyfin/jellyfin-types.ts

@@ -705,6 +705,14 @@ const removeFromPlaylistParameters = z.object({
 
 const deletePlaylist = z.null();
 
+const deletePlaylistImage = z.null();
+
+const deleteArtistImage = deletePlaylistImage;
+
+const uploadPlaylistImage = z.null();
+
+const uploadArtistImage = uploadPlaylistImage;
+
 const deletePlaylistParameters = z.object({
     Id: z.string(),
 });
@@ -886,7 +894,9 @@ export const jfType = {
         albumList,
         authenticate,
         createPlaylist,
+        deleteArtistImage,
         deletePlaylist,
+        deletePlaylistImage,
         error,
         favorite,
         filters,
@@ -912,6 +922,8 @@ export const jfType = {
         studioList,
         topSongsList,
         updatePlaylist,
+        uploadArtistImage,
+        uploadPlaylistImage,
         user,
     },
 };

src/shared/api/navidrome/navidrome-normalize.ts

@@ -410,10 +410,12 @@ const normalizeAlbumArtist = (
 
     if (item.stats) {
         albumCount = Math.max(
+            item.stats.maincredit?.albumCount ?? 0,
             item.stats.albumartist?.albumCount ?? 0,
             item.stats.artist?.albumCount ?? 0,
         );
         songCount = Math.max(
+            item.stats.maincredit?.songCount ?? 0,
             item.stats.albumartist?.songCount ?? 0,
             item.stats.artist?.songCount ?? 0,
         );
@@ -453,6 +455,8 @@ const normalizeAlbumArtist = (
         mbz: item.mbzArtistId || null,
         name: item.name,
         playCount: item.playCount || 0,
+        // filter out specifically maincredit. This is not filterable properly
+        roles: item.stats ? Object.keys(item.stats).filter((key) => key !== 'maincredit') : null,
         similarArtists:
             item.similarArtists?.map((artist) => ({
                 id: artist.id,

src/shared/api/subsonic/subsonic-normalize.ts

@@ -274,6 +274,7 @@ const normalizeAlbumArtist = (
         mbz: null,
         name: item.name,
         playCount: null,
+        roles: null,
         similarArtists:
             item.similarArtists?.map((artist) => ({
                 id: artist.id,

src/shared/types/domain-types.ts

@@ -223,6 +223,7 @@ export type AlbumArtist = {
     mbz: null | string;
     name: string;
     playCount: null | number;
+    roles: null | string[];
     similarArtists: null | RelatedArtist[];
     songCount: null | number;
     uploadedImage?: string;
@@ -500,6 +501,7 @@ export interface AlbumListQuery extends AlbumListNavidromeQuery, BaseQuery<Album
     maxYear?: number;
     minYear?: number;
     musicFolderId?: string | string[];
+    role?: string;
     searchTerm?: string;
     startIndex: number;
 }