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

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
Show stats 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}> <ContentContainer ref={cq.ref}>
<LibraryBackgroundOverlay backgroundColor={background} /> <LibraryBackgroundOverlay backgroundColor={background} />
<DetailContainer> <DetailContainer>
<Box component="section"> <Stack spacing="lg">
<Group spacing="md"> <Group spacing="md">
<PlayButton onClick={() => handlePlay(playButtonBehavior)} /> <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Group spacing="xs"> <Group spacing="xs">
@ -367,27 +367,29 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
> >
<RiMoreFill size={20} /> <RiMoreFill size={20} />
</Button> </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>
</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 ? ( {showGenres ? (
<Box component="section"> <Box component="section">
<Group spacing="sm"> <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 { Text } from '/@/renderer/components';
import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query'; import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
import { LibraryHeader, useSetRating } from '/@/renderer/features/shared'; import { LibraryHeader, useSetRating } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { formatDurationString } from '/@/renderer/utils'; import { formatDurationString } from '/@/renderer/utils';
import { useCurrentServer } from '../../../store/auth.store'; import { useCurrentServer } from '../../../store/auth.store';
@ -22,7 +21,6 @@ export const AlbumArtistDetailHeader = forwardRef(
query: { id: albumArtistId }, query: { id: albumArtistId },
serverId: server?.id, serverId: server?.id,
}); });
const cq = useContainerQuery();
const metadataItems = [ const metadataItems = [
{ {
@ -75,50 +73,39 @@ export const AlbumArtistDetailHeader = forwardRef(
const showRating = detailQuery?.data?.serverType === ServerType.NAVIDROME; const showRating = detailQuery?.data?.serverType === ServerType.NAVIDROME;
return ( return (
<Stack ref={cq.ref}> <LibraryHeader
<LibraryHeader ref={ref}
ref={ref} background={background}
background={background} imageUrl={detailQuery?.data?.imageUrl}
imageUrl={detailQuery?.data?.imageUrl} item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }} title={detailQuery?.data?.name || ''}
title={detailQuery?.data?.name || ''} >
> <Stack>
<Stack> <Group>
<Group> {metadataItems
{metadataItems .filter((i) => i.value)
.filter((i) => i.value) .map((item, index) => (
.map((item, index) => ( <Fragment key={`item-${item.id}-${index}`}>
<Fragment key={`item-${item.id}-${index}`}> {index > 0 && <Text $noSelect>•</Text>}
{index > 0 && <Text $noSelect>•</Text>} <Text $secondary={item.secondary}>{item.value}</Text>
<Text $secondary={item.secondary}>{item.value}</Text> </Fragment>
</Fragment> ))}
))} {showRating && (
{showRating && ( <>
<> <Text $noSelect>•</Text>
<Text $noSelect>•</Text> <Rating
<Rating readOnly={
readOnly={ detailQuery?.isFetching || updateRatingMutation.isLoading
detailQuery?.isFetching || }
updateRatingMutation.isLoading value={detailQuery?.data?.userRating || 0}
} onChange={handleUpdateRating}
value={detailQuery?.data?.userRating || 0} onClick={handleClearRating}
onChange={handleUpdateRating} />
onClick={handleClearRating} </>
/> )}
</> </Group>
)} </Stack>
</Group> </LibraryHeader>
<Group
sx={{
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
display: '-webkit-box',
overflow: 'hidden',
}}
/>
</Stack>
</LibraryHeader>
</Stack>
); );
}, },
); );

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

@ -1,15 +1,15 @@
import { NativeScrollArea, Spinner } from '/@/renderer/components';
import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useRef } from 'react'; import { useRef } from 'react';
import { useParams } from 'react-router'; import { useParams } from 'react-router';
import { useFastAverageColor } from '/@/renderer/hooks';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/renderer/api/types'; import { LibraryItem } from '/@/renderer/api/types';
import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query'; import { NativeScrollArea, Spinner } from '/@/renderer/components';
import { AlbumArtistDetailHeader } from '/@/renderer/features/artists/components/album-artist-detail-header';
import { AlbumArtistDetailContent } from '/@/renderer/features/artists/components/album-artist-detail-content'; import { AlbumArtistDetailContent } from '/@/renderer/features/artists/components/album-artist-detail-content';
import { AlbumArtistDetailHeader } from '/@/renderer/features/artists/components/album-artist-detail-header';
import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useFastAverageColor } from '/@/renderer/hooks';
import { useCurrentServer } from '/@/renderer/store'; import { useCurrentServer } from '/@/renderer/store';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
const AlbumArtistDetailRoute = () => { const AlbumArtistDetailRoute = () => {
const scrollAreaRef = useRef<HTMLDivElement>(null); const scrollAreaRef = useRef<HTMLDivElement>(null);
@ -23,7 +23,7 @@ const AlbumArtistDetailRoute = () => {
query: { id: albumArtistId }, query: { id: albumArtistId },
serverId: server?.id, serverId: server?.id,
}); });
const { color, colorId } = useFastAverageColor({ const { color: background, colorId } = useFastAverageColor({
id: albumArtistId, id: albumArtistId,
src: detailQuery.data?.imageUrl, src: detailQuery.data?.imageUrl,
srcLoaded: !detailQuery.isLoading, srcLoaded: !detailQuery.isLoading,
@ -39,7 +39,7 @@ const AlbumArtistDetailRoute = () => {
}); });
}; };
if (detailQuery.isLoading || !color || colorId !== albumArtistId) { if (!background || colorId !== albumArtistId) {
return <Spinner container />; return <Spinner container />;
} }
@ -48,7 +48,7 @@ const AlbumArtistDetailRoute = () => {
<NativeScrollArea <NativeScrollArea
ref={scrollAreaRef} ref={scrollAreaRef}
pageHeaderProps={{ pageHeaderProps={{
backgroundColor: color, backgroundColor: background,
children: ( children: (
<LibraryHeaderBar> <LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={handlePlay} /> <LibraryHeaderBar.PlayButton onClick={handlePlay} />
@ -63,9 +63,9 @@ const AlbumArtistDetailRoute = () => {
> >
<AlbumArtistDetailHeader <AlbumArtistDetailHeader
ref={headerRef} ref={headerRef}
background={color} background={background}
/> />
<AlbumArtistDetailContent background={color} /> <AlbumArtistDetailContent background={background} />
</NativeScrollArea> </NativeScrollArea>
</AnimatedPage> </AnimatedPage>
); );