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

Add play handlers and item count to list pages

Browse source
This commit is contained in:
jeffvli 2023-01-07 03:28:03 -08:00
parent 6bb0474d62
commit 915b0eb372
6 changed files with 183 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/renderer/features/albums/components/album-list-content.tsx
View file

@ -16,7 +16,6 @@ import { api } from '/@/renderer/api';
import { controller } from '/@/renderer/api/controller';
import { queryKeys } from '/@/renderer/api/query-keys';
import { Album, AlbumListSort, LibraryItem } from '/@/renderer/api/types';
import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query';
import { useQueryClient } from '@tanstack/react-query';
import {
useCurrentServer,
@ -47,10 +46,11 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
interface AlbumListContentProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) => {
export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListContentProps) => {
const queryClient = useQueryClient();
const navigate = useNavigate();
const server = useCurrentServer();
@ -66,12 +66,6 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
const checkAlbumList = useAlbumList({
limit: 1,
startIndex: 0,
...page.filter,
});
const columnDefs: ColDef[] = useMemo(
() => getColumnDefs(page.table.columns),
[page.table.columns],
@ -311,12 +305,12 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={page?.grid.scrollOffset || 0}
itemCount={checkAlbumList?.data?.totalRecordCount || 0}
itemCount={itemCount || 0}
itemData={itemData}
itemGap={20}
itemSize={150 + page.grid?.size}
itemType={LibraryItem.ALBUM}
loading={checkAlbumList.isLoading}
loading={!itemCount}
minimumBatchSize={40}
route={{
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
@ -340,7 +334,7 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
blockLoadDebounceMillis={200}
columnDefs={columnDefs}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={checkAlbumList.data?.totalRecordCount || 1}
infiniteInitialRowCount={itemCount || 1}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100}

89
src/renderer/features/albums/components/album-list-header.tsx
View file

@ -17,9 +17,10 @@ import styled from 'styled-components';
import { api } from '/@/renderer/api';
import { controller } from '/@/renderer/api/controller';
import { queryKeys } from '/@/renderer/api/query-keys';
import { AlbumListSort, ServerType, SortOrder } from '/@/renderer/api/types';
import { AlbumListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
import {
ALBUM_TABLE_COLUMNS,
Badge,
Button,
DropdownMenu,
MultiSelect,
@ -27,6 +28,7 @@ import {
Popover,
SearchInput,
Slider,
SpinnerIcon,
Switch,
Text,
TextTitle,
@ -45,7 +47,8 @@ import {
useSetAlbumTable,
useSetAlbumTablePagination,
} from '/@/renderer/store';
import { ListDisplayType, TableColumn } from '/@/renderer/types';
import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
import { usePlayQueueAdd } from '/@/renderer/features/player';
const FILTERS = {
jellyfin: [
@ -90,10 +93,11 @@ const HeaderItems = styled.div`
interface AlbumListHeaderProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) => {
export const AlbumListHeader = ({ itemCount, gridRef, tableRef }: AlbumListHeaderProps) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const setPage = useSetAlbumStore();
@ -213,6 +217,11 @@ export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) =>
[page.display, tableRef, setPagination, server, queryClient, gridRef, fetch],
);
const handleRefresh = useCallback(() => {
queryClient.invalidateQueries(queryKeys.albums.list(server?.id || ''));
handleFilterChange(filters);
}, [filters, handleFilterChange, queryClient, server?.id]);
const handleSetSortBy = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value || !server?.type) return;
@ -301,6 +310,31 @@ export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) =>
}
};
const handlePlayQueueAdd = usePlayQueueAdd();
const handlePlay = async (play: Play) => {
if (!itemCount || itemCount === 0) return;
const query = { startIndex: 0, ...filters };
const queryKey = queryKeys.albums.list(server?.id || '', query);
const albumListRes = await queryClient.fetchQuery({
queryFn: ({ signal }) => api.controller.getAlbumList({ query, server, signal }),
queryKey,
});
const albumIds =
api.normalize.albumList(albumListRes, server).items?.map((item) => item.id) || [];
handlePlayQueueAdd?.({
byItemType: {
id: albumIds,
type: LibraryItem.ALBUM,
},
play,
});
};
return (
<PageHeader p="1rem">
<HeaderItems ref={cq.ref}>
@ -311,20 +345,30 @@ export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) =>
>
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
compact
px={0}
rightIcon={<RiArrowDownSLine size={15} />}
size="xl"
variant="subtle"
>
<TextTitle
fw="bold"
order={3}
<Group>
<Button
compact
px={0}
rightIcon={<RiArrowDownSLine size={15} />}
size="xl"
variant="subtle"
>
Albums
</TextTitle>
</Button>
<Group>
<TextTitle
fw="bold"
order={3}
>
Albums
</TextTitle>
<Badge
radius="xl"
size="lg"
>
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
</Badge>
</Group>
</Button>
</Group>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Label>Display type</DropdownMenu.Label>
@ -495,10 +539,15 @@ export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) =>
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item disabled>Play</DropdownMenu.Item>
<DropdownMenu.Item disabled>Add to queue (next)</DropdownMenu.Item>
<DropdownMenu.Item disabled>Add to queue (last)</DropdownMenu.Item>
<DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
Add to queue (last)
</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
Add to queue (next)
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</Flex>

22
src/renderer/features/albums/routes/album-list-route.tsx
View file

@ -4,20 +4,42 @@ import { AlbumListHeader } from '/@/renderer/features/albums/components/album-li
import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query';
import { useAlbumListFilters } from '/@/renderer/store';
const AlbumListRoute = () => {
const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
const tableRef = useRef<AgGridReactType | null>(null);
const filters = useAlbumListFilters();
const itemCountCheck = useAlbumList(
{
limit: 1,
startIndex: 0,
...filters,
},
{
cacheTime: 1000 * 60 * 60 * 2,
staleTime: 1000 * 60 * 60 * 2,
},
);
const itemCount =
itemCountCheck.data?.totalRecordCount === null
? undefined
: itemCountCheck.data?.totalRecordCount;
return (
<AnimatedPage>
<VirtualGridContainer>
<AlbumListHeader
gridRef={gridRef}
itemCount={itemCount}
tableRef={tableRef}
/>
<AlbumListContent
gridRef={gridRef}
itemCount={itemCount}
tableRef={tableRef}
/>
</VirtualGridContainer>

12
src/renderer/features/songs/components/song-list-content.tsx
View file

@ -19,7 +19,6 @@ import {
VirtualGridAutoSizerContainer,
VirtualTable,
} from '/@/renderer/components';
import { useSongList } from '/@/renderer/features/songs/queries/song-list-query';
import {
useCurrentServer,
useSetSongTable,
@ -38,10 +37,11 @@ import { LibraryItem, QueueSong } from '/@/renderer/api/types';
import { usePlayQueueAdd } from '/@/renderer/features/player';
interface SongListContentProps {
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const SongListContent = ({ tableRef }: SongListContentProps) => {
export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const page = useSongListStore();
@ -54,12 +54,6 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
const checkSongList = useSongList({
limit: 1,
startIndex: 0,
...page.filter,
});
const columnDefs: ColDef[] = useMemo(
() => getColumnDefs(page.table.columns),
[page.table.columns],
@ -224,7 +218,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={checkSongList.data?.totalRecordCount || 100}
infiniteInitialRowCount={itemCount || 100}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100}

68
src/renderer/features/songs/components/song-list-header.tsx
View file

@ -13,7 +13,13 @@ import {
} from 'react-icons/ri';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { ServerType, SongListSort, SortOrder } from '/@/renderer/api/types';
import {
LibraryItem,
ServerType,
SongListQuery,
SongListSort,
SortOrder,
} from '/@/renderer/api/types';
import {
Button,
DropdownMenu,
@ -25,7 +31,10 @@ import {
MultiSelect,
Text,
SONG_TABLE_COLUMNS,
Badge,
SpinnerIcon,
} from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useMusicFolders } from '/@/renderer/features/shared';
import { JellyfinSongFilters } from '/@/renderer/features/songs/components/jellyfin-song-filters';
import { NavidromeSongFilters } from '/@/renderer/features/songs/components/navidrome-song-filters';
@ -40,7 +49,7 @@ import {
useSetSongTablePagination,
useSongListStore,
} from '/@/renderer/store';
import { ListDisplayType, TableColumn } from '/@/renderer/types';
import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
const FILTERS = {
jellyfin: [
@ -80,16 +89,18 @@ const ORDER = [
];
interface SongListHeaderProps {
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) => {
const server = useCurrentServer();
const page = useSongListStore();
const setPage = useSetSongStore();
const setFilter = useSetSongFilters();
const setTable = useSetSongTable();
const setPagination = useSetSongTablePagination();
const handlePlayQueueAdd = usePlayQueueAdd();
const cq = useContainerQuery();
const musicFoldersQuery = useMusicFolders();
@ -244,6 +255,24 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
setTable({ rowHeight: e });
};
const handleRefresh = () => {
queryClient.invalidateQueries(queryKeys.songs.list(server?.id || ''));
handleFilterChange(page.filter);
};
const handlePlay = async (play: Play) => {
if (!itemCount || itemCount === 0) return;
const query: SongListQuery = { startIndex: 0, ...page.filter };
handlePlayQueueAdd?.({
byItemType: {
id: query,
type: LibraryItem.SONG,
},
play,
});
};
return (
<PageHeader p="1rem">
<Flex
@ -265,12 +294,20 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
sx={{ paddingLeft: 0, paddingRight: 0 }}
variant="subtle"
>
<TextTitle
fw="bold"
order={3}
>
Tracks
</TextTitle>
<Group>
<TextTitle
fw="bold"
order={3}
>
Tracks
</TextTitle>
<Badge
radius="xl"
size="lg"
>
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
</Badge>
</Group>
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
@ -420,10 +457,15 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item disabled>Play</DropdownMenu.Item>
<DropdownMenu.Item disabled>Add to queue (last)</DropdownMenu.Item>
<DropdownMenu.Item disabled>Add to queue (next)</DropdownMenu.Item>
<DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
Add to queue (last)
</DropdownMenu.Item>
<DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
Add to queue (next)
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</Flex>

31
src/renderer/features/songs/routes/song-list-route.tsx
View file

@ -4,15 +4,42 @@ import { VirtualGridContainer } from '/@/renderer/components';
import { AnimatedPage } from '/@/renderer/features/shared';
import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
import { useSongList } from '/@/renderer/features/songs/queries/song-list-query';
import { useSongListFilters } from '/@/renderer/store';
const TrackListRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null);
const filters = useSongListFilters();
const itemCountCheck = useSongList(
{
limit: 1,
startIndex: 0,
...filters,
},
{
cacheTime: 1000 * 60 * 60 * 2,
staleTime: 1000 * 60 * 60 * 2,
},
);
const itemCount =
itemCountCheck.data?.totalRecordCount === null
? undefined
: itemCountCheck.data?.totalRecordCount;
return (
<AnimatedPage>
<VirtualGridContainer>
<SongListHeader tableRef={tableRef} />
<SongListContent tableRef={tableRef} />
<SongListHeader
itemCount={itemCount}
tableRef={tableRef}
/>
<SongListContent
itemCount={itemCount}
tableRef={tableRef}
/>
</VirtualGridContainer>
</AnimatedPage>
);