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

Add genres to album detail page

Browse source
This commit is contained in:
jeffvli 2023-01-13 14:07:57 -08:00
parent 92cde507d9
commit 6bdf0736ec
1 changed files with 75 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
src/renderer/features/albums/components/album-detail-content.tsx
View file

@ -13,9 +13,10 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
import { Box, Group, Stack } from '@mantine/core'; import { Box, Group, Stack } from '@mantine/core';
import { useSetState } from '@mantine/hooks'; import { useSetState } from '@mantine/hooks';
import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri'; import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
import { useParams } from 'react-router'; import { generatePath, useParams } from 'react-router';
import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query'; import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
import { useSongListStore } from '/@/renderer/store'; import { useSongListStore } from '/@/renderer/store';
import { Link } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { useContainerQuery } from '/@/renderer/hooks'; import { useContainerQuery } from '/@/renderer/hooks';
@ -177,58 +178,85 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
} }
}; };
const showGenres = detailQuery?.data?.genres ? detailQuery?.data?.genres.length !== 0 : false;
const { intersectRef, tableContainerRef } = useFixedTableHeader(); const { intersectRef, tableContainerRef } = useFixedTableHeader();
return ( return (
<ContentContainer> <ContentContainer>
<Group <Box component="section">
ref={intersectRef} <Group
className="test" ref={showGenres ? null : intersectRef}
pb="2rem" className="test"
pt="1rem" pb="2rem"
spacing="lg" pt="1rem"
> spacing="lg"
<PlayButton onClick={() => handlePlay(playButtonBehavior)} /> >
<Group spacing="xs"> <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Button <Group spacing="xs">
compact <Button
loading={createFavoriteMutation.isLoading || deleteFavoriteMutation.isLoading} compact
variant="subtle" loading={createFavoriteMutation.isLoading || deleteFavoriteMutation.isLoading}
onClick={handleFavorite} variant="subtle"
> onClick={handleFavorite}
{detailQuery?.data?.userFavorite ? ( >
<RiHeartFill {detailQuery?.data?.userFavorite ? (
color="red" <RiHeartFill
size={20} color="red"
/> size={20}
) : ( />
<RiHeartLine size={20} /> ) : (
)} <RiHeartLine size={20} />
</Button> )}
<DropdownMenu position="bottom-start"> </Button>
<DropdownMenu.Target> <DropdownMenu position="bottom-start">
<Button <DropdownMenu.Target>
compact <Button
variant="subtle" compact
> variant="subtle"
<RiMoreFill size={20} />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
{PLAY_TYPES.filter((type) => type.play !== playButtonBehavior).map((type) => (
<DropdownMenu.Item
key={`playtype-${type.play}`}
onClick={() => handlePlay(type.play)}
> >
{type.label} <RiMoreFill size={20} />
</DropdownMenu.Item> </Button>
))} </DropdownMenu.Target>
<DropdownMenu.Divider /> <DropdownMenu.Dropdown>
<DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item> {PLAY_TYPES.filter((type) => type.play !== playButtonBehavior).map((type) => (
</DropdownMenu.Dropdown> <DropdownMenu.Item
</DropdownMenu> key={`playtype-${type.play}`}
onClick={() => handlePlay(type.play)}
>
{type.label}
</DropdownMenu.Item>
))}
<DropdownMenu.Divider />
<DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</Group>
</Group> </Group>
</Group> </Box>
{showGenres && (
<Box
ref={showGenres ? intersectRef : null}
component="section"
py="1rem"
>
<Group>
{detailQuery?.data?.genres?.map((genre) => (
<Button
key={`genre-${genre.id}`}
compact
component={Link}
radius="md"
size="sm"
to={generatePath(`${AppRoute.LIBRARY_ALBUMS}?genre=${genre.id}`, { albumId })}
variant="default"
>
{genre.name}
</Button>
))}
</Group>
</Box>
)}
<Box ref={tableContainerRef}> <Box ref={tableContainerRef}>
<VirtualTable <VirtualTable
ref={tableRef} ref={tableRef}