diff --git a/src/renderer/features/albums/components/album-detail-header.module.css b/src/renderer/features/albums/components/album-detail-header.module.css new file mode 100644 index 000000000..ee4d7f95a --- /dev/null +++ b/src/renderer/features/albums/components/album-detail-header.module.css @@ -0,0 +1,8 @@ +.metadata-group { + justify-content: center; + width: 100%; + + @container (min-width: $mantine-breakpoint-sm) { + justify-content: flex-start; + } +} diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx index 8e669b56b..f5e6c940b 100644 --- a/src/renderer/features/albums/components/album-detail-header.tsx +++ b/src/renderer/features/albums/components/album-detail-header.tsx @@ -1,6 +1,8 @@ import { useQuery } from '@tanstack/react-query'; import { forwardRef } from 'react'; -import { useParams } from 'react-router'; +import { generatePath, Link, useParams } from 'react-router'; + +import styles from './album-detail-header.module.css'; import { albumQueries } from '/@/renderer/features/albums/api/album-api'; import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller'; @@ -12,7 +14,9 @@ import { import { AppRoute } from '/@/renderer/router/routes'; import { useCurrentServer } from '/@/renderer/store'; import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; +import { Group } from '/@/shared/components/group/group'; import { Stack } from '/@/shared/components/stack/stack'; +import { Text } from '/@/shared/components/text/text'; import { LibraryItem, ServerType } from '/@/shared/types/domain-types'; import { Play } from '/@/shared/types/types'; @@ -75,6 +79,9 @@ export const AlbumDetailHeader = forwardRef((_props, ref) => { }); }; + const firstAlbumArtist = detailQuery?.data?.albumArtists?.[0]; + const releaseYear = detailQuery?.data?.releaseYear; + return ( ((_props, ref) => { item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }} title={detailQuery?.data?.name || ''} > - handlePlay(Play.NOW)} - onRating={handleUpdateRating} - onShuffle={() => handlePlay(Play.SHUFFLE)} - rating={detailQuery?.data?.userRating || 0} - /> + + {(firstAlbumArtist || releaseYear) && ( + + {firstAlbumArtist && ( + + {firstAlbumArtist.name} + + )} + {firstAlbumArtist && releaseYear && ( + + • + + )} + {releaseYear && ( + + {releaseYear} + + )} + + )} + handlePlay(Play.NOW)} + onRating={handleUpdateRating} + onShuffle={() => handlePlay(Play.SHUFFLE)} + rating={detailQuery?.data?.userRating || 0} + /> + );