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

Add playlist grid views

Browse source
This commit is contained in:
jeffvli 2023-07-15 11:21:44 -07:00
parent e980e31bd2
commit 63a77ae68c
7 changed files with 620 additions and 324 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

246
src/renderer/features/playlists/components/playlist-list-content.tsx
View file

@ -1,233 +1,45 @@
import { MutableRefObject, useCallback, useMemo } from 'react';
import type {
BodyScrollEvent,
ColDef,
GridReadyEvent,
IDatasource,
PaginationChangedEvent,
RowDoubleClickedEvent,
} from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Stack } from '@mantine/core';
import { useQueryClient } from '@tanstack/react-query';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import {
useCurrentServer,
usePlaylistListStore,
usePlaylistTablePagination,
useSetPlaylistTable,
useSetPlaylistTablePagination,
} from '/@/renderer/store';
import { lazy, MutableRefObject, Suspense } from 'react';
import { Spinner } from '/@/renderer/components';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { usePlaylistListStore } from '/@/renderer/store';
import { ListDisplayType } from '/@/renderer/types';
import { AnimatePresence } from 'framer-motion';
import debounce from 'lodash/debounce';
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
import { PLAYLIST_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { generatePath, useNavigate } from 'react-router';
import { AppRoute } from '/@/renderer/router/routes';
import { LibraryItem } from '/@/renderer/api/types';
import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
import { getColumnDefs, VirtualTable, TablePagination } from '/@/renderer/components/virtual-table';
const PlaylistListTableView = lazy(() =>
import('/@/renderer/features/playlists/components/playlist-list-table-view').then((module) => ({
default: module.PlaylistListTableView,
})),
);
const PlaylistListGridView = lazy(() =>
import('/@/renderer/features/playlists/components/playlist-list-grid-view').then((module) => ({
default: module.PlaylistListGridView,
})),
);
interface PlaylistListContentProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const PlaylistListContent = ({ tableRef, itemCount }: PlaylistListContentProps) => {
const navigate = useNavigate();
const queryClient = useQueryClient();
const server = useCurrentServer();
const page = usePlaylistListStore();
const pagination = usePlaylistTablePagination();
const setPagination = useSetPlaylistTablePagination();
const setTable = useSetPlaylistTable();
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
const columnDefs: ColDef[] = useMemo(
() => getColumnDefs(page.table.columns),
[page.table.columns],
);
const defaultColumnDefs: ColDef = useMemo(() => {
return {
lockPinned: true,
lockVisible: true,
resizable: true,
};
}, []);
const onGridReady = useCallback(
(params: GridReadyEvent) => {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const queryKey = queryKeys.playlists.list(server?.id || '', {
limit,
startIndex,
...page.filter,
});
const playlistsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getPlaylistList({
apiClientProps: {
server,
signal,
},
query: {
limit,
startIndex,
...page.filter,
},
}),
{ cacheTime: 1000 * 60 * 1 },
);
params.successCallback(
playlistsRes?.items || [],
playlistsRes?.totalRecordCount || 0,
);
},
rowCount: undefined,
};
params.api.setDatasource(dataSource);
params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
},
[page.filter, page.table.scrollOffset, queryClient, server],
);
const onPaginationChanged = useCallback(
(event: PaginationChangedEvent) => {
if (!isPaginationEnabled || !event.api) return;
try {
// Scroll to top of page on pagination change
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
} catch (err) {
console.log(err);
}
setPagination({
data: {
itemsPerPage: event.api.paginationGetPageSize(),
totalItems: event.api.paginationGetRowCount(),
totalPages: event.api.paginationGetTotalPages() + 1,
},
});
},
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
);
const handleGridSizeChange = () => {
if (page.table.autoFit) {
tableRef?.current?.api.sizeColumnsToFit();
}
};
const handleColumnChange = useCallback(() => {
const { columnApi } = tableRef?.current || {};
const columnsOrder = columnApi?.getAllGridColumns();
if (!columnsOrder) return;
const columnsInSettings = page.table.columns;
const updatedColumns = [];
for (const column of columnsOrder) {
const columnInSettings = columnsInSettings.find(
(c) => c.column === column.getColDef().colId,
);
if (columnInSettings) {
updatedColumns.push({
...columnInSettings,
...(!page.table.autoFit && {
width: column.getActualWidth(),
}),
});
}
}
setTable({ columns: updatedColumns });
}, [page.table.autoFit, page.table.columns, setTable, tableRef]);
const debouncedColumnChange = debounce(handleColumnChange, 200);
const handleScroll = (e: BodyScrollEvent) => {
const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
setTable({ scrollOffset });
};
const handleContextMenu = useHandleTableContextMenu(
LibraryItem.PLAYLIST,
PLAYLIST_CONTEXT_MENU_ITEMS,
);
const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
if (!e.data) return;
navigate(generatePath(AppRoute.PLAYLISTS_DETAIL, { playlistId: e.data.id }));
};
export const PlaylistListContent = ({ gridRef, tableRef, itemCount }: PlaylistListContentProps) => {
const { display } = usePlaylistListStore();
return (
<Stack
h="100%"
spacing={0}
>
<VirtualGridAutoSizerContainer>
<VirtualTable
// https://github.com/ag-grid/ag-grid/issues/5284
// Key is used to force remount of table when display, rowHeight, or server changes
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
ref={tableRef}
alwaysShowHorizontalScroll
suppressRowDrag
autoFitColumns={page.table.autoFit}
blockLoadDebounceMillis={200}
cacheBlockSize={200}
cacheOverflowSize={1}
columnDefs={columnDefs}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={itemCount || 100}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100}
rowBuffer={20}
rowHeight={page.table.rowHeight || 40}
rowModelType="infinite"
rowSelection="multiple"
onBodyScrollEnd={handleScroll}
onCellContextMenu={handleContextMenu}
onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange}
onGridReady={onGridReady}
onGridSizeChanged={handleGridSizeChange}
onPaginationChanged={onPaginationChanged}
onRowDoubleClicked={handleRowDoubleClick}
<Suspense fallback={<Spinner container />}>
{display === ListDisplayType.CARD || display === ListDisplayType.POSTER ? (
<PlaylistListGridView
gridRef={gridRef}
itemCount={itemCount}
/>
</VirtualGridAutoSizerContainer>
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
{page.display === ListDisplayType.TABLE_PAGINATED && (
<TablePagination
pageKey=""
pagination={pagination}
setPagination={setPagination}
) : (
<PlaylistListTableView
itemCount={itemCount}
tableRef={tableRef}
/>
)}
</AnimatePresence>
</Stack>
<div />
</Suspense>
);
};

157
src/renderer/features/playlists/components/playlist-list-grid-view.tsx Normal file
View file

@ -0,0 +1,157 @@
import { useQueryClient } from '@tanstack/react-query';
import { MutableRefObject, useCallback, useMemo } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { ListOnScrollProps } from 'react-window';
import { usePlaylistGridStore, usePlaylistStoreActions } from '../../../store/playlist.store';
import { controller } from '/@/renderer/api/controller';
import { queryKeys } from '/@/renderer/api/query-keys';
import { LibraryItem, Playlist, PlaylistListQuery, PlaylistListSort } from '/@/renderer/api/types';
import { PLAYLIST_CARD_ROWS } from '/@/renderer/components';
import {
VirtualGridAutoSizerContainer,
VirtualInfiniteGrid,
VirtualInfiniteGridRef,
} from '/@/renderer/components/virtual-grid';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, usePlaylistListStore } from '/@/renderer/store';
import { CardRow, ListDisplayType } from '/@/renderer/types';
interface PlaylistListGridViewProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
itemCount?: number;
}
export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridViewProps) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const handlePlayQueueAdd = usePlayQueueAdd();
const { display } = usePlaylistListStore();
const grid = usePlaylistGridStore();
const { setGrid } = usePlaylistStoreActions();
const page = usePlaylistListStore();
const createFavoriteMutation = useCreateFavorite({});
const deleteFavoriteMutation = useDeleteFavorite({});
const handleFavorite = (options: {
id: string[];
isFavorite: boolean;
itemType: LibraryItem;
}) => {
const { id, itemType, isFavorite } = options;
if (isFavorite) {
deleteFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
} else {
createFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
}
};
const cardRows = useMemo(() => {
const rows: CardRow<Playlist>[] = [PLAYLIST_CARD_ROWS.name];
switch (page.filter.sortBy) {
case PlaylistListSort.DURATION:
rows.push(PLAYLIST_CARD_ROWS.duration);
break;
case PlaylistListSort.NAME:
rows.push(PLAYLIST_CARD_ROWS.songCount);
break;
case PlaylistListSort.SONG_COUNT:
rows.push(PLAYLIST_CARD_ROWS.songCount);
break;
case PlaylistListSort.OWNER:
rows.push(PLAYLIST_CARD_ROWS.owner);
break;
case PlaylistListSort.PUBLIC:
rows.push(PLAYLIST_CARD_ROWS.public);
break;
case PlaylistListSort.UPDATED_AT:
break;
}
return rows;
}, [page.filter.sortBy]);
const handleGridScroll = useCallback(
(e: ListOnScrollProps) => {
setGrid({ data: { scrollOffset: e.scrollOffset } });
},
[setGrid],
);
const fetch = useCallback(
async ({ skip, take }: { skip: number; take: number }) => {
if (!server) {
return [];
}
const query: PlaylistListQuery = {
limit: take,
startIndex: skip,
...page.filter,
_custom: {},
};
const queryKey = queryKeys.playlists.list(server?.id || '', query);
const playlists = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
controller.getPlaylistList({
apiClientProps: {
server,
signal,
},
query,
}),
);
return playlists;
},
[page.filter, queryClient, server],
);
return (
<VirtualGridAutoSizerContainer>
<AutoSizer>
{({ height, width }) => (
<VirtualInfiniteGrid
key={`playlist-list-${server?.id}`}
ref={gridRef}
cardRows={cardRows}
display={display || ListDisplayType.CARD}
fetchFn={fetch}
handleFavorite={handleFavorite}
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={grid?.scrollOffset || 0}
itemCount={itemCount || 0}
itemGap={20}
itemSize={grid?.itemsPerRow || 5}
itemType={LibraryItem.PLAYLIST}
loading={itemCount === undefined || itemCount === null}
minimumBatchSize={40}
route={{
route: AppRoute.PLAYLISTS_DETAIL,
slugs: [{ idProperty: 'id', slugProperty: 'playlistId' }],
}}
width={width}
onScroll={handleGridScroll}
/>
)}
</AutoSizer>
</VirtualGridAutoSizerContainer>
);
};

138
src/renderer/features/playlists/components/playlist-list-header-filters.tsx
View file

@ -1,18 +1,20 @@
import { ChangeEvent, MutableRefObject, useCallback, MouseEvent } from 'react';
import { IDatasource } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Flex, Stack, Group } from '@mantine/core';
import { Flex, Stack, Group, Divider } from '@mantine/core';
import { useQueryClient } from '@tanstack/react-query';
import { RiSortAsc, RiSortDesc, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
import { RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { SortOrder, PlaylistListSort } from '/@/renderer/api/types';
import { SortOrder, PlaylistListSort, PlaylistListQuery } from '/@/renderer/api/types';
import { DropdownMenu, Text, Button, Slider, MultiSelect, Switch } from '/@/renderer/components';
import { useContainerQuery } from '/@/renderer/hooks';
import {
PlaylistListFilter,
useCurrentServer,
usePlaylistGridStore,
usePlaylistListStore,
usePlaylistStoreActions,
useSetPlaylistFilters,
useSetPlaylistStore,
useSetPlaylistTable,
@ -20,6 +22,8 @@ import {
} from '/@/renderer/store';
import { ListDisplayType, TableColumn } from '/@/renderer/types';
import { PLAYLIST_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { OrderToggleButton } from '/@/renderer/features/shared';
const FILTERS = {
jellyfin: [
@ -37,16 +41,15 @@ const FILTERS = {
],
};
const ORDER = [
{ name: 'Ascending', value: SortOrder.ASC },
{ name: 'Descending', value: SortOrder.DESC },
];
interface PlaylistListHeaderFiltersProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFiltersProps) => {
export const PlaylistListHeaderFilters = ({
gridRef,
tableRef,
}: PlaylistListHeaderFiltersProps) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const page = usePlaylistListStore();
@ -54,8 +57,13 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
const setFilter = useSetPlaylistFilters();
const setTable = useSetPlaylistTable();
const setPagination = useSetPlaylistTablePagination();
const grid = usePlaylistGridStore();
const { setGrid } = usePlaylistStoreActions();
const { display } = usePlaylistListStore();
const cq = useContainerQuery();
const isGrid = display === ListDisplayType.CARD || display === ListDisplayType.POSTER;
const sortByLabel =
(server?.type &&
(
@ -63,10 +71,49 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
).find((f) => f.value === page.filter.sortBy)?.name) ||
'Unknown';
const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name;
const fetch = useCallback(
async (skip: number, take: number, filters: PlaylistListFilter) => {
const query: PlaylistListQuery = {
_custom: {
jellyfin: {
...filters._custom?.jellyfin,
},
navidrome: {
...filters._custom?.navidrome,
},
},
limit: take,
startIndex: skip,
...filters,
};
const queryKey = queryKeys.playlists.list(server?.id || '', query);
const playlists = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
api.controller.getPlaylistList({
apiClientProps: {
server,
signal,
},
query,
}),
);
return playlists;
},
[queryClient, server],
);
const handleFilterChange = useCallback(
async (filters?: PlaylistListFilter) => {
if (isGrid) {
console.log('filter change', filters);
gridRef.current?.scrollTo(0);
gridRef.current?.resetLoadMoreItemsCache();
const data = await fetch(0, 200, filters || page.filter);
if (!data?.items) return;
gridRef.current?.setItemData(data.items);
} else {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
@ -94,7 +141,6 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
...pageFilters,
},
}),
{ cacheTime: 1000 * 60 * 1 },
);
params.successCallback(
@ -108,8 +154,9 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
tableRef.current?.api.purgeInfiniteCache();
tableRef.current?.api.ensureIndexVisible(0, 'top');
setPagination({ data: { currentPage: 0 } });
}
},
[page.filter, queryClient, server, setPagination, tableRef],
[fetch, gridRef, isGrid, page.filter, queryClient, server, setPagination, tableRef],
);
const handleSetSortBy = useCallback(
@ -186,12 +233,17 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
}
};
const handleRowHeight = (e: number) => {
const handleItemSize = (e: number) => {
if (isGrid) {
setGrid({ data: { itemsPerRow: e } });
} else {
setTable({ rowHeight: e });
}
};
const handleRefresh = () => {
tableRef?.current?.api?.purgeInfiniteCache();
queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || '', page.filter));
handleFilterChange(page.filter);
};
return (
@ -225,25 +277,12 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
))}
</DropdownMenu.Dropdown>
</DropdownMenu>
<Button
compact
fw="600"
size="md"
variant="subtle"
onClick={handleToggleSortOrder}
>
{cq.isSm ? (
sortOrderLabel
) : (
<>
{page.filter.sortOrder === SortOrder.ASC ? (
<RiSortAsc size="1.3rem" />
) : (
<RiSortDesc size="1.3rem" />
)}
</>
)}
</Button>
<Divider orientation="vertical" />
<OrderToggleButton
sortOrder={page.filter.sortOrder}
onToggle={handleToggleSortOrder}
/>
<Divider orientation="vertical" />
<DropdownMenu position="bottom-start">
<DropdownMenu.Target>
<Button
@ -278,6 +317,20 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Label>Display type</DropdownMenu.Label>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.CARD}
value={ListDisplayType.CARD}
onClick={handleSetViewType}
>
Card
</DropdownMenu.Item>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.POSTER}
value={ListDisplayType.POSTER}
onClick={handleSetViewType}
>
Poster
</DropdownMenu.Item>
<DropdownMenu.Item
$isActive={page.display === ListDisplayType.TABLE}
value={ListDisplayType.TABLE}
@ -293,16 +346,21 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
Table (paginated)
</DropdownMenu.Item>
<DropdownMenu.Divider />
<DropdownMenu.Label>Item Size</DropdownMenu.Label>
<DropdownMenu.Label>
{isGrid ? 'Items per row' : 'Item size'}
</DropdownMenu.Label>
<DropdownMenu.Item closeMenuOnClick={false}>
<Slider
defaultValue={page.table.rowHeight || 0}
label={null}
max={100}
min={25}
onChangeEnd={handleRowHeight}
defaultValue={
isGrid ? grid?.itemsPerRow || 0 : page.table.rowHeight
}
max={isGrid ? 14 : 100}
min={isGrid ? 2 : 25}
onChangeEnd={handleItemSize}
/>
</DropdownMenu.Item>
{!isGrid && (
<>
<DropdownMenu.Label>Table Columns</DropdownMenu.Label>
<DropdownMenu.Item
closeMenuOnClick={false}
@ -328,6 +386,8 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
</Group>
</Stack>
</DropdownMenu.Item>
</>
)}
</DropdownMenu.Dropdown>
</DropdownMenu>
</Group>

16
src/renderer/features/playlists/components/playlist-list-header.tsx
View file

@ -3,6 +3,7 @@ import { Flex, Stack } from '@mantine/core';
import { openModal, closeAllModals } from '@mantine/modals';
import { MutableRefObject } from 'react';
import { PageHeader, SpinnerIcon, Paper, Button } from '/@/renderer/components';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
import { LibraryHeaderBar } from '/@/renderer/features/shared';
@ -11,11 +12,12 @@ import { useCurrentServer } from '/@/renderer/store';
import { ServerType } from '/@/renderer/types';
interface PlaylistListHeaderProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
}
export const PlaylistListHeader = ({ itemCount, tableRef }: PlaylistListHeaderProps) => {
export const PlaylistListHeader = ({ itemCount, tableRef, gridRef }: PlaylistListHeaderProps) => {
const cq = useContainerQuery();
const server = useCurrentServer();
@ -56,11 +58,19 @@ export const PlaylistListHeader = ({ itemCount, tableRef }: PlaylistListHeaderPr
)}
</Paper>
</LibraryHeaderBar>
<Button onClick={handleCreatePlaylistModal}>Create playlist</Button>
<Button
variant="filled"
onClick={handleCreatePlaylistModal}
>
Create
</Button>
</Flex>
</PageHeader>
<Paper p="1rem">
<PlaylistListHeaderFilters tableRef={tableRef} />
<PlaylistListHeaderFilters
gridRef={gridRef}
tableRef={tableRef}
/>
</Paper>
</Stack>
);

232
src/renderer/features/playlists/components/playlist-list-table-view.tsx Normal file
View file

@ -0,0 +1,232 @@
import {
ColDef,
GridReadyEvent,
IDatasource,
PaginationChangedEvent,
BodyScrollEvent,
RowDoubleClickedEvent,
} from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Stack } from '@mantine/core';
import { useQueryClient } from '@tanstack/react-query';
import { AnimatePresence } from 'framer-motion';
import debounce from 'lodash/debounce';
import { useMemo, useCallback } from 'react';
import { generatePath, useNavigate } from 'react-router';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { LibraryItem } from '/@/renderer/api/types';
import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
import { getColumnDefs, TablePagination, VirtualTable } from '/@/renderer/components/virtual-table';
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
import { PLAYLIST_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { AppRoute } from '/@/renderer/router/routes';
import {
usePlaylistTablePagination,
useSetPlaylistTablePagination,
useSetPlaylistTable,
useCurrentServer,
usePlaylistListStore,
} from '/@/renderer/store';
import { ListDisplayType } from '/@/renderer/types';
interface PlaylistListTableViewProps {
itemCount?: number;
tableRef: React.MutableRefObject<AgGridReactType | null>;
}
export const PlaylistListTableView = ({ tableRef, itemCount }: PlaylistListTableViewProps) => {
const queryClient = useQueryClient();
const navigate = useNavigate();
const server = useCurrentServer();
const page = usePlaylistListStore();
const pagination = usePlaylistTablePagination();
const setPagination = useSetPlaylistTablePagination();
const setTable = useSetPlaylistTable();
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
const columnDefs: ColDef[] = useMemo(
() => getColumnDefs(page.table.columns),
[page.table.columns],
);
const defaultColumnDefs: ColDef = useMemo(() => {
return {
lockPinned: true,
lockVisible: true,
resizable: true,
};
}, []);
const onGridReady = useCallback(
(params: GridReadyEvent) => {
const dataSource: IDatasource = {
getRows: async (params) => {
const limit = params.endRow - params.startRow;
const startIndex = params.startRow;
const queryKey = queryKeys.playlists.list(server?.id || '', {
limit,
startIndex,
...page.filter,
});
const playlistsRes = await queryClient.fetchQuery(
queryKey,
async ({ signal }) =>
api.controller.getPlaylistList({
apiClientProps: {
server,
signal,
},
query: {
limit,
startIndex,
...page.filter,
},
}),
{ cacheTime: 1000 * 60 * 1 },
);
params.successCallback(
playlistsRes?.items || [],
playlistsRes?.totalRecordCount || 0,
);
},
rowCount: undefined,
};
params.api.setDatasource(dataSource);
params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
},
[page.filter, page.table.scrollOffset, queryClient, server],
);
const onPaginationChanged = useCallback(
(event: PaginationChangedEvent) => {
if (!isPaginationEnabled || !event.api) return;
try {
// Scroll to top of page on pagination change
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
} catch (err) {
console.log(err);
}
setPagination({
data: {
itemsPerPage: event.api.paginationGetPageSize(),
totalItems: event.api.paginationGetRowCount(),
totalPages: event.api.paginationGetTotalPages() + 1,
},
});
},
[isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
);
const handleGridSizeChange = () => {
if (page.table.autoFit) {
tableRef?.current?.api.sizeColumnsToFit();
}
};
const handleColumnChange = useCallback(() => {
const { columnApi } = tableRef?.current || {};
const columnsOrder = columnApi?.getAllGridColumns();
if (!columnsOrder) return;
const columnsInSettings = page.table.columns;
const updatedColumns = [];
for (const column of columnsOrder) {
const columnInSettings = columnsInSettings.find(
(c) => c.column === column.getColDef().colId,
);
if (columnInSettings) {
updatedColumns.push({
...columnInSettings,
...(!page.table.autoFit && {
width: column.getActualWidth(),
}),
});
}
}
setTable({ columns: updatedColumns });
}, [page.table.autoFit, page.table.columns, setTable, tableRef]);
const debouncedColumnChange = debounce(handleColumnChange, 200);
const handleScroll = (e: BodyScrollEvent) => {
const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
setTable({ scrollOffset });
};
const handleContextMenu = useHandleTableContextMenu(
LibraryItem.PLAYLIST,
PLAYLIST_CONTEXT_MENU_ITEMS,
);
const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
if (!e.data) return;
navigate(generatePath(AppRoute.PLAYLISTS_DETAIL, { playlistId: e.data.id }));
};
return (
<Stack
h="100%"
spacing={0}
>
<VirtualGridAutoSizerContainer>
<VirtualTable
// https://github.com/ag-grid/ag-grid/issues/5284
// Key is used to force remount of table when display, rowHeight, or server changes
key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
ref={tableRef}
alwaysShowHorizontalScroll
suppressRowDrag
autoFitColumns={page.table.autoFit}
blockLoadDebounceMillis={200}
cacheBlockSize={200}
cacheOverflowSize={1}
columnDefs={columnDefs}
defaultColDef={defaultColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.id}
infiniteInitialRowCount={itemCount || 100}
pagination={isPaginationEnabled}
paginationAutoPageSize={isPaginationEnabled}
paginationPageSize={page.table.pagination.itemsPerPage || 100}
rowBuffer={20}
rowHeight={page.table.rowHeight || 40}
rowModelType="infinite"
rowSelection="multiple"
onBodyScrollEnd={handleScroll}
onCellContextMenu={handleContextMenu}
onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange}
onGridReady={onGridReady}
onGridSizeChanged={handleGridSizeChange}
onPaginationChanged={onPaginationChanged}
onRowDoubleClicked={handleRowDoubleClick}
/>
</VirtualGridAutoSizerContainer>
<AnimatePresence
presenceAffectsLayout
initial={false}
mode="wait"
>
{page.display === ListDisplayType.TABLE_PAGINATED && (
<TablePagination
pageKey=""
pagination={pagination}
setPagination={setPagination}
tableRef={tableRef}
/>
)}
</AnimatePresence>
</Stack>
);
};

4
src/renderer/features/playlists/routes/playlist-list-route.tsx
View file

@ -1,6 +1,7 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useRef } from 'react';
import { PlaylistListSort, SortOrder } from '/@/renderer/api/types';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { PlaylistListContent } from '/@/renderer/features/playlists/components/playlist-list-content';
import { PlaylistListHeader } from '/@/renderer/features/playlists/components/playlist-list-header';
import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
@ -8,6 +9,7 @@ import { AnimatedPage } from '/@/renderer/features/shared';
import { useCurrentServer } from '/@/renderer/store';
const PlaylistListRoute = () => {
const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
const tableRef = useRef<AgGridReactType | null>(null);
const server = useCurrentServer();
@ -33,10 +35,12 @@ const PlaylistListRoute = () => {
return (
<AnimatedPage>
<PlaylistListHeader
gridRef={gridRef}
itemCount={itemCount}
tableRef={tableRef}
/>
<PlaylistListContent
gridRef={gridRef}
itemCount={itemCount}
tableRef={tableRef}
/>

21
src/renderer/store/playlist.store.ts
View file

@ -33,10 +33,16 @@ type DetailProps = {
table: DetailTableProps;
};
type ListGridProps = {
itemsPerRow?: number;
scrollOffset?: number;
};
export type PlaylistListFilter = Omit<PlaylistListArgs['query'], 'startIndex' | 'limit'>;
interface PlaylistState {
detail: DetailProps;
grid: ListGridProps;
list: ListProps<PlaylistListFilter>;
}
@ -46,6 +52,7 @@ export interface PlaylistSlice extends PlaylistState {
setDetailTable: (data: Partial<DetailTableProps>) => void;
setDetailTablePagination: (id: string, data: Partial<DetailPaginationProps>) => void;
setFilters: (data: Partial<PlaylistListFilter>) => PlaylistListFilter;
setGrid: (args: { data: Partial<ListGridProps> }) => void;
setStore: (data: Partial<PlaylistSlice>) => void;
setTable: (data: Partial<TableProps>) => void;
setTablePagination: (args: { data: Partial<TablePagination> }) => void;
@ -90,6 +97,14 @@ export const usePlaylistStore = create<PlaylistSlice>()(
return get().list.filter;
},
setGrid: (args) => {
set((state) => {
state.grid = {
...state.grid,
...args.data,
};
});
},
setStore: (data) => {
set({ ...get(), ...data });
},
@ -133,6 +148,10 @@ export const usePlaylistStore = create<PlaylistSlice>()(
rowHeight: 60,
},
},
grid: {
itemsPerRow: 5,
scrollOffset: 0,
},
list: {
display: ListDisplayType.TABLE,
filter: {
@ -189,6 +208,8 @@ export const usePlaylistFilters = () => {
return usePlaylistStore((state) => [state.list.filter, state.actions.setFilters]);
};
export const usePlaylistGridStore = () => usePlaylistStore((state) => state.grid);
export const usePlaylistListStore = () => usePlaylistStore((state) => state.list);
export const usePlaylistTablePagination = () =>