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

Add dedicated playlist song list page

Browse source
This commit is contained in:
jeffvli 2023-01-01 13:58:05 -08:00
parent 737a05e2c5
commit 8b04f70106
11 changed files with 653 additions and 318 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,76 +1,32 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Group } from '@mantine/core';
import { useIntersection } from '@mantine/hooks';
import { useRef } from 'react';
import { useParams } from 'react-router';
import { PageHeader, ScrollArea, TextTitle } 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 { usePlaylistSongList } from '/@/renderer/features/playlists/queries/playlist-song-list-query';
import { AnimatedPage, PlayButton } from '/@/renderer/features/shared';
import { useFastAverageColor } from '/@/renderer/hooks';
import { AnimatedPage } from '/@/renderer/features/shared';
const PlaylistDetailRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null);
// const tableRef = useRef<AgGridReactType | null>(null);
const { playlistId } = useParams() as { playlistId: string };
const detailsQuery = usePlaylistDetail({
id: playlistId,
});
// const detailsQuery = usePlaylistDetail({
// id: playlistId,
// });
const playlistSongsQuery = usePlaylistSongList({
id: playlistId,
limit: 50,
startIndex: 0,
});
// const playlistSongsQuery = usePlaylistSongList({
// id: playlistId,
// limit: 50,
// startIndex: 0,
// });
const imageUrl = playlistSongsQuery.data?.items?.[0]?.imageUrl;
const background = useFastAverageColor(imageUrl);
const containerRef = useRef();
// const imageUrl = playlistSongsQuery.data?.items?.[0]?.imageUrl;
// const background = useFastAverageColor(imageUrl);
// const containerRef = useRef();
const { ref, entry } = useIntersection({
root: containerRef.current,
threshold: 0.3,
});
// const { ref, entry } = useIntersection({
// root: containerRef.current,
// threshold: 0.3,
// });
return (
<AnimatedPage key={`playlist-detail-${playlistId}`}>
<PageHeader
backgroundColor={background}
isHidden={entry?.isIntersecting}
position="absolute"
>
<Group noWrap>
<PlayButton />
<TextTitle
fw="bold"
order={2}
overflow="hidden"
>
{detailsQuery?.data?.name}
</TextTitle>
</Group>
</PageHeader>
<ScrollArea
ref={containerRef}
h="100%"
offsetScrollbars={false}
styles={{ scrollbar: { marginTop: '35px' } }}
>
{background && (
<>
<PlaylistDetailHeader
ref={ref}
background={background}
imageUrl={imageUrl || undefined}
/>
<PlaylistDetailContent tableRef={tableRef} />
</>
)}
</ScrollArea>
</AnimatedPage>
);
return <AnimatedPage key={`playlist-detail-${playlistId}`}>Placeholder</AnimatedPage>;
};
export default PlaylistDetailRoute;

23
src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx Normal file
View file

@ -0,0 +1,23 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useRef } from 'react';
import { useParams } from 'react-router';
import { VirtualGridContainer } from '/@/renderer/components';
import { PlaylistDetailSongListContent } from '../components/playlist-detail-song-list-content';
import { PlaylistDetailSongListHeader } from '../components/playlist-detail-song-list-header';
import { AnimatedPage } from '/@/renderer/features/shared';
const PlaylistDetailSongListRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null);
const { playlistId } = useParams() as { playlistId: string };
return (
<AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
<VirtualGridContainer>
<PlaylistDetailSongListHeader tableRef={tableRef} />
<PlaylistDetailSongListContent tableRef={tableRef} />
</VirtualGridContainer>
</AnimatedPage>
);
};
export default PlaylistDetailSongListRoute;