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

Add playlist detail page

Browse source
This commit is contained in:
jeffvli 2023-01-02 02:04:23 -08:00
parent d6dc880ef4
commit 90dec929f4
7 changed files with 353 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,32 +1,42 @@
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 { 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';
const PlaylistDetailRoute = () => {
// const tableRef = useRef<AgGridReactType | null>(null);
const tableRef = useRef<AgGridReactType | null>(null);
const { playlistId } = useParams() as { playlistId: string };
const padTitlebar = useShouldPadTitlebar();
// const detailsQuery = usePlaylistDetail({
// id: playlistId,
// });
const detailQuery = usePlaylistDetail({ id: playlistId });
const background = useFastAverageColor(detailQuery?.data?.imageUrl, 'dominant');
// const playlistSongsQuery = usePlaylistSongList({
// id: playlistId,
// limit: 50,
// startIndex: 0,
// });
// const imageUrl = playlistSongsQuery.data?.items?.[0]?.imageUrl;
// const background = useFastAverageColor(imageUrl);
// const containerRef = useRef();
// const { ref, entry } = useIntersection({
// root: containerRef.current,
// threshold: 0.3,
// });
return <AnimatedPage key={`playlist-detail-${playlistId}`}>Placeholder</AnimatedPage>;
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>
)}
</>
);
};
export default PlaylistDetailRoute;