antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 10:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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
Download patch file Download diff file Expand all files Collapse all files

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 { useRef } from 'react';
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 { PlaylistDetailHeader } from '/@/renderer/features/playlists/components/playlist-detail-header';
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
import { AnimatedPage } from '/@/renderer/features/shared';
import { useFastAverageColor, useShouldPadTitlebar } from '/@/renderer/hooks';
import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useFastAverageColor } from '/@/renderer/hooks';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/renderer/types';
const PlaylistDetailRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null);
const scrollAreaRef = useRef<HTMLDivElement>(null);
const headerRef = useRef<HTMLDivElement>(null);
const { playlistId } = useParams() as { playlistId: string };
const padTitlebar = useShouldPadTitlebar();
const detailQuery = usePlaylistDetail({ id: playlistId });
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 (
<>
<PageHeader position="absolute" />
{background && (
<AnimatedPage key={`playlist-detail-${playlistId}`}>
<ScrollArea
h="100%"
offsetScrollbars={false}
styles={{ scrollbar: { marginTop: padTitlebar ? '35px' : 0 } }}
>
<PlaylistDetailHeader
background={background}
imagePlaceholderUrl={detailQuery?.data?.imageUrl}
imageUrl={detailQuery?.data?.imageUrl}
/>
<PlaylistDetailContent tableRef={tableRef} />
</ScrollArea>
</AnimatedPage>
)}
</>
<AnimatedPage key={`playlist-detail-${playlistId}`}>
<NativeScrollArea
ref={scrollAreaRef}
pageHeaderProps={{
backgroundColor: background,
children: (
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={handlePlay} />
<LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
</LibraryHeaderBar>
),
target: headerRef,
}}
>
<PlaylistDetailHeader
ref={headerRef}
background={background}
imagePlaceholderUrl={detailQuery?.data?.imageUrl}
imageUrl={detailQuery?.data?.imageUrl}
/>
<PlaylistDetailContent tableRef={tableRef} />
</NativeScrollArea>
</AnimatedPage>
);
};