reorder album artist page

src/i18n/locales/en.json

@@ -457,6 +457,8 @@
         "albumBackgroundBlur_description": "adjusts the amount of blur applied to the album background image",
         "applicationHotkeys": "application hotkeys",
         "applicationHotkeys_description": "configure application hotkeys. toggle the checkbox to set as a global hotkey (desktop only)",
+        "artistConfiguration": "album artist page configuration",
+        "artistConfiguration_description": "configure what items are shown, and in what order, on the album artist page",
         "audioDevice": "audio device",
         "audioDevice_description": "select the audio device to use for playback (web player only)",
         "audioExclusiveMode": "audio exclusive mode",

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { ColDef, RowDoubleClickedEvent } from '@ag-grid-community/core';
-import { Box, Group, Stack } from '@mantine/core';
+import { Box, Grid, Group, Stack } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { FaLastfmSquare } from 'react-icons/fa';
 import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
@@ -36,7 +36,7 @@ import { PlayButton, useCreateFavorite, useDeleteFavorite } from '/@/renderer/fe
 import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer } from '/@/renderer/store';
+import { ArtistItem, useCurrentServer } from '/@/renderer/store';
 import { useGeneralSettings, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { CardRow, Play, TableColumn } from '/@/renderer/types';
 import { sanitize } from '/@/renderer/utils/sanitize';
@@ -65,13 +65,25 @@ interface AlbumArtistDetailContentProps {
 
 export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailContentProps) => {
     const { t } = useTranslation();
-    const { externalLinks } = useGeneralSettings();
+    const { artistItems, externalLinks } = useGeneralSettings();
     const { albumArtistId } = useParams() as { albumArtistId: string };
     const cq = useContainerQuery();
     const handlePlayQueueAdd = usePlayQueueAdd();
     const server = useCurrentServer();
     const genrePath = useGenreRoute();
 
+    const [enabledItem, itemOrder] = useMemo(() => {
+        const enabled: { [key in ArtistItem]?: boolean } = {};
+        const order: { [key in ArtistItem]?: number } = {};
+
+        for (const [idx, item] of artistItems.entries()) {
+            enabled[item.id] = !item.disabled;
+            order[item.id] = idx + 1;
+        }
+
+        return [enabled, order];
+    }, [artistItems]);
+
     const detailQuery = useAlbumArtistDetail({
         query: { id: albumArtistId },
         serverId: server?.id,
@@ -95,6 +107,9 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
     })}`;
 
     const recentAlbumsQuery = useAlbumList({
+        options: {
+            enabled: enabledItem.recentAlbums,
+        },
         query: {
             _custom: {
                 jellyfin: {
@@ -117,6 +132,9 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
     });
 
     const compilationAlbumsQuery = useAlbumList({
+        options: {
+            enabled: enabledItem.compilations,
+        },
         query: {
             _custom: {
                 jellyfin: {
@@ -140,7 +158,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
 
     const topSongsQuery = useTopSongsList({
         options: {
-            enabled: !!detailQuery?.data?.name,
+            enabled: !!detailQuery?.data?.name && enabledItem.topSongs,
         },
         query: {
             artist: detailQuery?.data?.name || '',
@@ -207,9 +225,10 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         return [
             {
                 data: recentAlbumsQuery?.data?.items,
-                isHidden: !recentAlbumsQuery?.data?.items?.length,
+                isHidden: !recentAlbumsQuery?.data?.items?.length || !enabledItem.recentAlbums,
                 itemType: LibraryItem.ALBUM,
                 loading: recentAlbumsQuery?.isLoading || recentAlbumsQuery.isFetching,
+                order: itemOrder.recentAlbums,
                 title: (
                     <Group align="flex-end">
                         <TextTitle
@@ -235,9 +254,10 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
             },
             {
                 data: compilationAlbumsQuery?.data?.items,
-                isHidden: !compilationAlbumsQuery?.data?.items?.length,
+                isHidden: !compilationAlbumsQuery?.data?.items?.length || !enabledItem.compilations,
                 itemType: LibraryItem.ALBUM,
                 loading: compilationAlbumsQuery?.isLoading || compilationAlbumsQuery.isFetching,
+                order: itemOrder.compilations,
                 title: (
                     <TextTitle
                         order={2}
@@ -250,8 +270,9 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
             },
             {
                 data: detailQuery?.data?.similarArtists || [],
-                isHidden: !detailQuery?.data?.similarArtists,
+                isHidden: !detailQuery?.data?.similarArtists || !enabledItem.similarArtists,
                 itemType: LibraryItem.ALBUM_ARTIST,
+                order: itemOrder.similarArtists,
                 title: (
                     <TextTitle
                         order={2}
@@ -271,6 +292,12 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         compilationAlbumsQuery.isFetching,
         compilationAlbumsQuery?.isLoading,
         detailQuery?.data?.similarArtists,
+        enabledItem.compilations,
+        enabledItem.recentAlbums,
+        enabledItem.similarArtists,
+        itemOrder.compilations,
+        itemOrder.recentAlbums,
+        itemOrder.similarArtists,
         recentAlbumsQuery?.data?.items,
         recentAlbumsQuery.isFetching,
         recentAlbumsQuery?.isLoading,
@@ -336,11 +363,11 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
     const biography = useMemo(() => {
         const bio = detailQuery?.data?.biography;
 
-        if (!bio) return null;
+        if (!bio || !enabledItem.biography) return null;
         return sanitize(bio);
-    }, [detailQuery?.data?.biography]);
+    }, [detailQuery?.data?.biography, enabledItem.biography]);
 
-    const showTopSongs = topSongsQuery?.data?.items?.length;
+    const showTopSongs = topSongsQuery?.data?.items?.length && enabledItem.topSongs;
     const showGenres = detailQuery?.data?.genres ? detailQuery?.data?.genres.length !== 0 : false;
     const mbzId = detailQuery?.data?.mbz;
 
@@ -467,7 +494,12 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                         </Group>
                     </Box>
                 ) : null}
+                <Grid>
                     {biography ? (
+                        <Grid.Col
+                            order={itemOrder.biography}
+                            span={12}
+                        >
                             <Box
                                 component="section"
                                 maw="1280px"
@@ -482,8 +514,13 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                 </TextTitle>
                                 <Spoiler dangerouslySetInnerHTML={{ __html: biography }} />
                             </Box>
+                        </Grid.Col>
                     ) : null}
                     {showTopSongs ? (
+                        <Grid.Col
+                            order={itemOrder.topSongs}
+                            span={12}
+                        >
                             <Box component="section">
                                 <Group
                                     noWrap
@@ -538,19 +575,31 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                     onRowDoubleClicked={handleRowDoubleClick}
                                 />
                             </Box>
+                        </Grid.Col>
                     ) : null}
-                <Box component="section">
+
-                    <Stack spacing="xl">
                     {carousels
                         .filter((c) => !c.isHidden)
                         .map((carousel) => (
-                                <MemoizedSwiperGridCarousel
+                            <Grid.Col
                                 key={`carousel-${carousel.uniqueId}`}
-                                    cardRows={cardRows[carousel.itemType as keyof typeof cardRows]}
+                                order={carousel.order}
+                                span={12}
+                            >
+                                <Box component="section">
+                                    <Stack spacing="xl">
+                                        <MemoizedSwiperGridCarousel
+                                            cardRows={
+                                                cardRows[carousel.itemType as keyof typeof cardRows]
+                                            }
                                             data={carousel.data}
                                             isLoading={carousel.loading}
                                             itemType={carousel.itemType}
-                                    route={cardRoutes[carousel.itemType as keyof typeof cardRoutes]}
+                                            route={
+                                                cardRoutes[
+                                                    carousel.itemType as keyof typeof cardRoutes
+                                                ]
+                                            }
                                             swiperProps={{
                                                 grid: {
                                                     rows: 2,
@@ -561,9 +610,11 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                             }}
                                             uniqueId={carousel.uniqueId}
                                         />
-                            ))}
                                     </Stack>
                                 </Box>
+                            </Grid.Col>
+                        ))}
+                </Grid>
             </DetailContainer>
         </ContentContainer>
     );

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

@@ -0,0 +1,25 @@
+import { DraggableItems } from '/@/renderer/features/settings/components/general/draggable-items';
+import { ArtistItem, useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
+
+const ARTIST_ITEMS: Array<[ArtistItem, string]> = [
+    [ArtistItem.BIOGRAPHY, 'table.column.biography'],
+    [ArtistItem.TOP_SONGS, 'page.albumArtistDetail.topSongs'],
+    [ArtistItem.RECENT_ALBUMS, 'page.albumArtistDetail.recentReleases'],
+    [ArtistItem.COMPILATIONS, 'page.albumArtistDetail.appearsOn'],
+    [ArtistItem.SIMILAR_ARTISTS, 'page.albumArtistDetail.relatedArtists'],
+];
+
+export const ArtistSettings = () => {
+    const { artistItems } = useGeneralSettings();
+    const { setArtistItems } = useSettingsStoreActions();
+
+    return (
+        <DraggableItems
+            description="setting.artistConfiguration"
+            itemLabels={ARTIST_ITEMS}
+            setItems={setArtistItems}
+            settings={artistItems}
+            title="setting.artistConfiguration"
+        />
+    );
+};

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

@@ -9,6 +9,7 @@ import isElectron from 'is-electron';
 import { HomeSettings } from '/@/renderer/features/settings/components/general/home-settings';
 import { SidebarReorder } from '/@/renderer/features/settings/components/general/sidebar-reorder';
 import { ContextMenuSettings } from '/@/renderer/features/settings/components/general/context-menu-settings';
+import { ArtistSettings } from '/@/renderer/features/settings/components/general/artist-settings';
 
 export const GeneralTab = () => {
     return (
@@ -17,6 +18,7 @@ export const GeneralTab = () => {
             <ThemeSettings />
             <ControlSettings />
             <HomeSettings />
+            <ArtistSettings />
             <SidebarReorder />
             <SidebarSettings />
             <ContextMenuSettings />

src/renderer/store/settings.store.ts

@@ -105,7 +105,22 @@ export enum HomeItem {
     RECENTLY_PLAYED = 'recentlyPlayed',
 }
 
-export const homeItems = Object.values(HomeItem).map((item) => ({
+const homeItems = Object.values(HomeItem).map((item) => ({
+    disabled: false,
+    id: item,
+}));
+
+/* eslint-disable typescript-sort-keys/string-enum */
+export enum ArtistItem {
+    BIOGRAPHY = 'biography',
+    TOP_SONGS = 'topSongs',
+    RECENT_ALBUMS = 'recentAlbums',
+    COMPILATIONS = 'compilations',
+    SIMILAR_ARTISTS = 'similarArtists',
+}
+/* eslint-enable typescript-sort-keys/string-enum */
+
+const artistItems = Object.values(ArtistItem).map((item) => ({
     disabled: false,
     id: item,
 }));
@@ -207,6 +222,7 @@ export interface SettingsState {
         albumArtRes?: number | null;
         albumBackground: boolean;
         albumBackgroundBlur: number;
+        artistItems: SortableItem<ArtistItem>[];
         buttonSize: number;
         defaultFullPlaylist: boolean;
         disabledContextMenu: { [k in ContextMenuItemType]?: boolean };
@@ -305,6 +321,7 @@ export interface SettingsSlice extends SettingsState {
     actions: {
         reset: () => void;
         resetSampleRate: () => void;
+        setArtistItems: (item: SortableItem<ArtistItem>[]) => void;
         setGenreBehavior: (target: GenreTarget) => void;
         setHomeItems: (item: SortableItem<HomeItem>[]) => void;
         setSettings: (data: Partial<SettingsState>) => void;
@@ -347,6 +364,7 @@ const initialState: SettingsState = {
         albumArtRes: undefined,
         albumBackground: false,
         albumBackgroundBlur: 6,
+        artistItems,
         buttonSize: 20,
         defaultFullPlaylist: true,
         disabledContextMenu: {},
@@ -656,6 +674,11 @@ export const useSettingsStore = create<SettingsSlice>()(
                             state.playback.mpvProperties.audioSampleRateHz = 0;
                         });
                     },
+                    setArtistItems: (items) => {
+                        set((state) => {
+                            state.general.artistItems = items;
+                        });
+                    },
                     setGenreBehavior: (target: GenreTarget) => {
                         set((state) => {
                             state.general.genreTarget = target;