antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 18:13:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Adjust various elements on album artist page

Browse source
This commit is contained in:
jeffvli 2023-07-24 14:50:54 -07:00
parent ed070850a4
commit 230fa33525
3 changed files with 67 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -335,7 +335,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
<ContentContainer ref={cq.ref}>
<LibraryBackgroundOverlay backgroundColor={background} />
<DetailContainer>
<Box component="section">
<Stack spacing="lg">
<Group spacing="md">
<PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Group spacing="xs">
@ -367,27 +367,29 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
>
<RiMoreFill size={20} />
</Button>
<Button
compact
uppercase
component={Link}
to={artistDiscographyLink}
variant="subtle"
>
View discography
</Button>
<Button
compact
uppercase
component={Link}
to={artistSongsLink}
variant="subtle"
>
View all songs
</Button>
</Group>
</Group>
</Box>
<Group spacing="md">
<Button
compact
uppercase
component={Link}
to={artistDiscographyLink}
variant="subtle"
>
View discography
</Button>
<Button
compact
uppercase
component={Link}
to={artistSongsLink}
variant="subtle"
>
View all songs
</Button>
</Group>
</Stack>
{showGenres ? (
<Box component="section">
<Group spacing="sm">

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

@ -5,7 +5,6 @@ import { LibraryItem, ServerType } from '/@/renderer/api/types';
import { Text } from '/@/renderer/components';
import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
import { LibraryHeader, useSetRating } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes';
import { formatDurationString } from '/@/renderer/utils';
import { useCurrentServer } from '../../../store/auth.store';
@ -22,7 +21,6 @@ export const AlbumArtistDetailHeader = forwardRef(
query: { id: albumArtistId },
serverId: server?.id,
});
const cq = useContainerQuery();
const metadataItems = [
{
@ -75,50 +73,39 @@ export const AlbumArtistDetailHeader = forwardRef(
const showRating = detailQuery?.data?.serverType === ServerType.NAVIDROME;
return (
<Stack ref={cq.ref}>
<LibraryHeader
ref={ref}
background={background}
imageUrl={detailQuery?.data?.imageUrl}
item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
title={detailQuery?.data?.name || ''}
>
<Stack>
<Group>
{metadataItems
.filter((i) => i.value)
.map((item, index) => (
<Fragment key={`item-${item.id}-${index}`}>
{index > 0 && <Text $noSelect>•</Text>}
<Text $secondary={item.secondary}>{item.value}</Text>
</Fragment>
))}
{showRating && (
<>
<Text $noSelect>•</Text>
<Rating
readOnly={
detailQuery?.isFetching ||
updateRatingMutation.isLoading
}
value={detailQuery?.data?.userRating || 0}
onChange={handleUpdateRating}
onClick={handleClearRating}
/>
</>
)}
</Group>
<Group
sx={{
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
display: '-webkit-box',
overflow: 'hidden',
}}
/>
</Stack>
</LibraryHeader>
</Stack>
<LibraryHeader
ref={ref}
background={background}
imageUrl={detailQuery?.data?.imageUrl}
item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
title={detailQuery?.data?.name || ''}
>
<Stack>
<Group>
{metadataItems
.filter((i) => i.value)
.map((item, index) => (
<Fragment key={`item-${item.id}-${index}`}>
{index > 0 && <Text $noSelect>•</Text>}
<Text $secondary={item.secondary}>{item.value}</Text>
</Fragment>
))}
{showRating && (
<>
<Text $noSelect>•</Text>
<Rating
readOnly={
detailQuery?.isFetching || updateRatingMutation.isLoading
}
value={detailQuery?.data?.userRating || 0}
onChange={handleUpdateRating}
onClick={handleClearRating}
/>
</>
)}
</Group>
</Stack>
</LibraryHeader>
);
},
);