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

Update album/playlist headers with shared styles

Browse source
This commit is contained in:
jeffvli 2023-01-02 17:57:49 -08:00
parent d49bba42ef
commit a3804808b4
4 changed files with 230 additions and 296 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

229
src/renderer/features/albums/components/album-detail-header.tsx
View file

@ -1,72 +1,14 @@
import { Center, Group } from '@mantine/core'; import { Group, Stack } from '@mantine/core';
import { useMergedRef } from '@mantine/hooks';
import { forwardRef, Fragment, Ref } from 'react'; import { forwardRef, Fragment, Ref } from 'react';
import { RiAlbumFill } from 'react-icons/ri';
import { generatePath, useParams } from 'react-router'; import { generatePath, useParams } from 'react-router';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styled from 'styled-components'; import { Text } from '/@/renderer/components';
import { Text, TextTitle } from '/@/renderer/components';
import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query'; import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
import { LibraryHeader } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks'; import { useContainerQuery } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { LibraryItem } from '/@/renderer/types';
const HeaderContainer = styled.div` import { formatDurationString } from '/@/renderer/utils';
position: relative;
display: grid;
grid-auto-columns: 1fr;
grid-template-areas: 'image info';
grid-template-rows: 1fr;
grid-template-columns: 250px minmax(0, 1fr);
gap: 0.5rem;
width: 100%;
max-width: 100%;
height: 30vh;
min-height: 340px;
max-height: 500px;
padding: 5rem 2rem 2rem;
`;
const CoverImageWrapper = styled.div`
z-index: 15;
display: flex;
grid-area: image;
align-items: flex-end;
justify-content: center;
height: 100%;
filter: drop-shadow(0 0 8px rgb(0, 0, 0, 50%));
`;
const MetadataWrapper = styled.div`
z-index: 15;
display: flex;
flex-direction: column;
grid-area: info;
justify-content: flex-end;
width: 100%;
`;
const StyledImage = styled.img`
object-fit: cover;
`;
const BackgroundImage = styled.div<{ background: string }>`
position: absolute;
top: 0;
z-index: 0;
width: 100%;
height: 100%;
background: ${(props) => props.background};
`;
const BackgroundImageOverlay = styled.div`
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg)), var(--background-noise);
`;
interface AlbumDetailHeaderProps { interface AlbumDetailHeaderProps {
background: string; background: string;
@ -77,110 +19,81 @@ export const AlbumDetailHeader = forwardRef(
const { albumId } = useParams() as { albumId: string }; const { albumId } = useParams() as { albumId: string };
const detailQuery = useAlbumDetail({ id: albumId }); const detailQuery = useAlbumDetail({ id: albumId });
const cq = useContainerQuery(); const cq = useContainerQuery();
const mergedRef = useMergedRef(ref, cq.ref);
const titleSize = cq.isXl const metadataItems = [
? '6rem' {
: cq.isLg id: 'releaseYear',
? '5.5rem' secondary: false,
: cq.isMd value: detailQuery?.data?.releaseYear,
? '4.5rem' },
: cq.isSm {
? '3.5rem' id: 'songCount',
: '2rem'; secondary: false,
value: `${detailQuery?.data?.songCount} songs`,
},
{
id: 'duration',
secondary: true,
value: detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
},
];
console.log('detailQuery?.data?.duration :>> ', detailQuery?.data?.duration);
return ( return (
<HeaderContainer ref={mergedRef}> <Stack ref={cq.ref}>
<BackgroundImage background={background} /> <LibraryHeader
<BackgroundImageOverlay /> ref={ref}
<CoverImageWrapper> background={background}
{detailQuery?.data?.imageUrl ? ( imageUrl={detailQuery?.data?.imageUrl}
<StyledImage item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.ALBUM }}
alt="cover" title={detailQuery?.data?.name || ''}
height={225} >
src={detailQuery?.data.imageUrl} <Stack mt="1rem">
width={225} <Group>
/> {metadataItems.map((item, index) => (
) : ( <Fragment key={`item-${item.id}-${index}`}>
<Center {index > 0 && <Text $noSelect>•</Text>}
<Text $secondary={item.secondary}>{item.value}</Text>
</Fragment>
))}
</Group>
<Group
sx={{ sx={{
background: 'var(--placeholder-bg)', WebkitBoxOrient: 'vertical',
borderRadius: 'var(--card-default-radius)', WebkitLineClamp: 2,
height: `${225}px`, display: '-webkit-box',
width: `${225}px`, overflow: 'hidden',
}} }}
> >
<RiAlbumFill {detailQuery?.data?.albumArtists.map((artist, index) => (
color="var(--placeholder-fg)" <Fragment key={`artist-${artist.id}`}>
size={35} {index > 0 && (
/> <Text
</Center> sx={{
)} display: 'inline-block',
</CoverImageWrapper> padding: '0 0.5rem',
<MetadataWrapper> }}
<Group> >
<Text •
$link </Text>
component={Link} )}
fw="600"
sx={{ textTransform: 'uppercase' }}
to={AppRoute.LIBRARY_ALBUMS}
>
Album
</Text>
{detailQuery?.data?.releaseYear && (
<>
<Text>•</Text>
<Text>{detailQuery?.data?.releaseYear}</Text>
</>
)}
</Group>
<TextTitle
fw="900"
lh="1"
mb="0.12em"
mt=".08em"
sx={{ fontSize: titleSize }}
>
{detailQuery?.data?.name}
</TextTitle>
<Group
spacing="xs"
sx={{
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
display: '-webkit-box',
overflow: 'hidden',
}}
>
{detailQuery?.data?.albumArtists.map((artist, index) => (
<Fragment key={`artist-${artist.id}`}>
{index > 0 && (
<Text <Text
$noSelect $link
sx={{ component={Link}
display: 'inline-block', fw="600"
padding: '0 0.5rem', to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
}} albumArtistId: artist.id,
})}
> >
• {artist.name}
</Text> </Text>
)} </Fragment>
<Text ))}
$link </Group>
component={Link} </Stack>
fw="600" </LibraryHeader>
to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, { </Stack>
albumArtistId: artist.id,
})}
>
{artist.name}
</Text>
</Fragment>
))}
</Group>
</MetadataWrapper>
</HeaderContainer>
); );
}, },
); );

85
src/renderer/features/albums/routes/album-detail-route.tsx
View file

@ -1,65 +1,60 @@
import { PageHeader, ScrollArea, TextTitle } from '/@/renderer/components'; import { NativeScrollArea } from '/@/renderer/components';
import { AnimatedPage, PlayButton } from '/@/renderer/features/shared'; import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useRef } from 'react'; import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query'; import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
import { useParams } from 'react-router'; import { useParams } from 'react-router';
import { useFastAverageColor, useShouldPadTitlebar } from '/@/renderer/hooks'; import { useFastAverageColor } from '/@/renderer/hooks';
import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content'; import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content';
import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-detail-header'; import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-detail-header';
import { useIntersection } from '@mantine/hooks'; import { usePlayQueueAdd } from '/@/renderer/features/player';
import { Group } from '@mantine/core'; import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/renderer/types';
const AlbumDetailRoute = () => { const AlbumDetailRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null); const tableRef = useRef<AgGridReactType | null>(null);
const scrollAreaRef = useRef<HTMLDivElement>(null);
const headerRef = useRef<HTMLDivElement>(null);
const { albumId } = useParams() as { albumId: string }; const { albumId } = useParams() as { albumId: string };
const detailQuery = useAlbumDetail({ id: albumId }); const detailQuery = useAlbumDetail({ id: albumId });
const background = useFastAverageColor(detailQuery.data?.imageUrl); const background = useFastAverageColor(detailQuery.data?.imageUrl);
const padTop = useShouldPadTitlebar(); const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior();
const containerRef = useRef(); const handlePlay = () => {
const { ref, entry } = useIntersection({ handlePlayQueueAdd?.({
root: containerRef.current, byItemType: {
threshold: 0, id: [albumId],
}); type: LibraryItem.ALBUM,
},
play: playButtonBehavior,
});
};
if (!background) return null;
return ( return (
<AnimatedPage key={`album-detail-${albumId}`}> <AnimatedPage key={`album-detail-${albumId}`}>
<PageHeader <NativeScrollArea
backgroundColor="black" ref={scrollAreaRef}
isHidden={entry?.isIntersecting} pageHeaderProps={{
position="absolute" backgroundColor: background,
children: (
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={handlePlay} />
<LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
</LibraryHeaderBar>
),
target: headerRef,
}}
> >
<Group p="1rem"> <AlbumDetailHeader
<PlayButton ref={headerRef}
h={40} background={background}
w={40} />
/> <AlbumDetailContent tableRef={tableRef} />
<TextTitle </NativeScrollArea>
fw="bold"
order={2}
>
{detailQuery?.data?.name}
</TextTitle>
</Group>
</PageHeader>
<ScrollArea
ref={containerRef}
h="100%"
offsetScrollbars={false}
styles={{ scrollbar: { marginTop: padTop ? '35px' : 0 } }}
>
{background && (
<>
<AlbumDetailHeader
ref={ref}
background={background}
/>
<AlbumDetailContent tableRef={tableRef} />
</>
)}
</ScrollArea>
</AnimatedPage> </AnimatedPage>
); );
}; };

143
src/renderer/features/playlists/components/playlist-detail-header.tsx
View file

@ -1,4 +1,5 @@
import { Group, Stack } from '@mantine/core'; import { Group, Stack } from '@mantine/core';
import { forwardRef, Ref } from 'react';
import { RiMoreFill } from 'react-icons/ri'; import { RiMoreFill } from 'react-icons/ri';
import { generatePath, useParams } from 'react-router'; import { generatePath, useParams } from 'react-router';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -16,77 +17,79 @@ interface PlaylistDetailHeaderProps {
imageUrl?: string | null; imageUrl?: string | null;
} }
export const PlaylistDetailHeader = ({ export const PlaylistDetailHeader = forwardRef(
background, (
imageUrl, { background, imageUrl, imagePlaceholderUrl }: PlaylistDetailHeaderProps,
imagePlaceholderUrl, ref: Ref<HTMLDivElement>,
}: PlaylistDetailHeaderProps) => { ) => {
const { playlistId } = useParams() as { playlistId: string }; const { playlistId } = useParams() as { playlistId: string };
const detailQuery = usePlaylistDetail({ id: playlistId }); const detailQuery = usePlaylistDetail({ id: playlistId });
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior(); const playButtonBehavior = usePlayButtonBehavior();
const handlePlay = (playType?: Play) => { const handlePlay = (playType?: Play) => {
handlePlayQueueAdd?.({ handlePlayQueueAdd?.({
byItemType: { byItemType: {
id: [playlistId], id: [playlistId],
type: LibraryItem.PLAYLIST, type: LibraryItem.PLAYLIST,
}, },
play: playType || playButtonBehavior, play: playType || playButtonBehavior,
}); });
}; };
return ( return (
<Stack> <Stack>
<LibraryHeader <LibraryHeader
background={background} ref={ref}
imagePlaceholderUrl={imagePlaceholderUrl} background={background}
imageUrl={imageUrl} imagePlaceholderUrl={imagePlaceholderUrl}
item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }} imageUrl={imageUrl}
title={detailQuery?.data?.name || ''} item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }}
> title={detailQuery?.data?.name || ''}
<Group> >
<Button <Group>
compact <Button
component={Link} compact
to={generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId })} component={Link}
variant="subtle" to={generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId })}
> variant="subtle"
View full playlist >
</Button> View full playlist
</Group> </Button>
</LibraryHeader> </Group>
<Group </LibraryHeader>
maw="1920px" <Group
p="1rem" maw="1920px"
position="apart" p="1rem"
> position="apart"
<Group> >
<PlayButton onClick={() => handlePlay()} /> <Group>
<DropdownMenu position="bottom-start"> <PlayButton onClick={() => handlePlay()} />
<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>Edit 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>Edit playlist</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</Group>
</Group> </Group>
</Group> </Stack>
</Stack> );
); },
}; );

69
src/renderer/features/playlists/routes/playlist-detail-route.tsx
View file

@ -1,41 +1,64 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useRef } from 'react'; import { useRef } from 'react';
import { useParams } from 'react-router'; import { useParams } from 'react-router';
import { PageHeader, ScrollArea } from '/@/renderer/components'; import { NativeScrollArea } from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { PlaylistDetailContent } from '/@/renderer/features/playlists/components/playlist-detail-content'; import { PlaylistDetailContent } from '/@/renderer/features/playlists/components/playlist-detail-content';
import { PlaylistDetailHeader } from '/@/renderer/features/playlists/components/playlist-detail-header'; import { PlaylistDetailHeader } from '/@/renderer/features/playlists/components/playlist-detail-header';
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query'; import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
import { AnimatedPage } from '/@/renderer/features/shared'; import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useFastAverageColor, useShouldPadTitlebar } from '/@/renderer/hooks'; import { useFastAverageColor } from '/@/renderer/hooks';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/renderer/types';
const PlaylistDetailRoute = () => { const PlaylistDetailRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null); const tableRef = useRef<AgGridReactType | null>(null);
const scrollAreaRef = useRef<HTMLDivElement>(null);
const headerRef = useRef<HTMLDivElement>(null);
const { playlistId } = useParams() as { playlistId: string }; const { playlistId } = useParams() as { playlistId: string };
const padTitlebar = useShouldPadTitlebar();
const detailQuery = usePlaylistDetail({ id: playlistId }); const detailQuery = usePlaylistDetail({ id: playlistId });
const background = useFastAverageColor(detailQuery?.data?.imageUrl, 'dominant'); const background = useFastAverageColor(detailQuery?.data?.imageUrl, 'dominant');
const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior();
const handlePlay = () => {
handlePlayQueueAdd?.({
byItemType: {
id: [playlistId],
type: LibraryItem.PLAYLIST,
},
play: playButtonBehavior,
});
};
if (!background) return null;
return ( return (
<> <AnimatedPage key={`playlist-detail-${playlistId}`}>
<PageHeader position="absolute" /> <NativeScrollArea
{background && ( ref={scrollAreaRef}
<AnimatedPage key={`playlist-detail-${playlistId}`}> pageHeaderProps={{
<ScrollArea backgroundColor: background,
h="100%" children: (
offsetScrollbars={false} <LibraryHeaderBar>
styles={{ scrollbar: { marginTop: padTitlebar ? '35px' : 0 } }} <LibraryHeaderBar.PlayButton onClick={handlePlay} />
> <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
<PlaylistDetailHeader </LibraryHeaderBar>
background={background} ),
imagePlaceholderUrl={detailQuery?.data?.imageUrl} target: headerRef,
imageUrl={detailQuery?.data?.imageUrl} }}
/> >
<PlaylistDetailContent tableRef={tableRef} /> <PlaylistDetailHeader
</ScrollArea> ref={headerRef}
</AnimatedPage> background={background}
)} imagePlaceholderUrl={detailQuery?.data?.imageUrl}
</> imageUrl={detailQuery?.data?.imageUrl}
/>
<PlaylistDetailContent tableRef={tableRef} />
</NativeScrollArea>
</AnimatedPage>
); );
}; };