pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reorder album artist page

Browse source
This commit is contained in:
Kendall Garner 2024-09-01 16:48:43 -07:00
parent eb50c69a35
commit f7dd634f67
No known key found for this signature in database
GPG key ID: 18D2767419676C87
5 changed files with 201 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/i18n/locales/en.json
View file

@ -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",

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

@ -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>
);

25
src/renderer/features/settings/components/general/artist-settings.tsx Normal file
View file

@ -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"
/>
);
};

2
src/renderer/features/settings/components/general/general-tab.tsx
View file

@ -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 />

25
src/renderer/store/settings.store.ts
View file

@ -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;