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

Change type name, add paginated table

Browse source
This commit is contained in:
jeffvli 2022-12-26 04:47:40 -08:00
parent 1883164150
commit 5ed06f79b3
8 changed files with 25 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/renderer/components/virtual-grid/grid-card/index.tsx
View file

@ -4,7 +4,7 @@ import { areEqual } from 'react-window';
import { DefaultCard } from '/@/renderer/components/virtual-grid/grid-card/default-card'; import { DefaultCard } from '/@/renderer/components/virtual-grid/grid-card/default-card';
import { PosterCard } from '/@/renderer/components/virtual-grid/grid-card/poster-card'; import { PosterCard } from '/@/renderer/components/virtual-grid/grid-card/poster-card';
import type { GridCardData } from '/@/renderer/types'; import type { GridCardData } from '/@/renderer/types';
import { CardDisplayType } from '/@/renderer/types'; import { ListDisplayType } from '/@/renderer/types';
export const GridCard = memo(({ data, index, style }: ListChildComponentProps) => { export const GridCard = memo(({ data, index, style }: ListChildComponentProps) => {
const { const {
@ -26,7 +26,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
const startIndex = index * columnCount; const startIndex = index * columnCount;
const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1); const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1);
const View = display === CardDisplayType.CARD ? DefaultCard : PosterCard; const View = display === ListDisplayType.CARD ? DefaultCard : PosterCard;
for (let i = startIndex; i <= stopIndex; i += 1) { for (let i = startIndex; i <= stopIndex; i += 1) {
cards.push( cards.push(

4
src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx
View file

@ -8,7 +8,7 @@ import { GridCard } from '/@/renderer/components/virtual-grid/grid-card';
import type { import type {
CardRow, CardRow,
LibraryItem, LibraryItem,
CardDisplayType, ListDisplayType,
CardRoute, CardRoute,
PlayQueueAddOptions, PlayQueueAddOptions,
} from '/@/renderer/types'; } from '/@/renderer/types';
@ -64,7 +64,7 @@ export const VirtualGridWrapper = ({
}: Omit<FixedSizeListProps, 'ref' | 'itemSize' | 'children'> & { }: Omit<FixedSizeListProps, 'ref' | 'itemSize' | 'children'> & {
cardRows: CardRow<Album | AlbumArtist | Artist>[]; cardRows: CardRow<Album | AlbumArtist | Artist>[];
columnCount: number; columnCount: number;
display: CardDisplayType; display: ListDisplayType;
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void; handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
itemData: any[]; itemData: any[];
itemGap: number; itemGap: number;

8
src/renderer/components/virtual-grid/virtual-infinite-grid.tsx
View file

@ -12,7 +12,7 @@ import type { FixedSizeListProps } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader'; import InfiniteLoader from 'react-window-infinite-loader';
import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper'; import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper';
import type { CardRoute, CardRow, LibraryItem, PlayQueueAddOptions } from '/@/renderer/types'; import type { CardRoute, CardRow, LibraryItem, PlayQueueAddOptions } from '/@/renderer/types';
import { CardDisplayType } from '/@/renderer/types'; import { ListDisplayType } from '/@/renderer/types';
export type VirtualInfiniteGridRef = { export type VirtualInfiniteGridRef = {
resetLoadMoreItemsCache: () => void; resetLoadMoreItemsCache: () => void;
@ -22,7 +22,7 @@ export type VirtualInfiniteGridRef = {
interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSize'> { interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSize'> {
cardRows: CardRow<any>[]; cardRows: CardRow<any>[];
display?: CardDisplayType; display?: ListDisplayType;
fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>; fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void; handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
itemGap: number; itemGap: number;
@ -144,7 +144,7 @@ export const VirtualInfiniteGrid = forwardRef(
<VirtualGridWrapper <VirtualGridWrapper
cardRows={cardRows} cardRows={cardRows}
columnCount={columnCount} columnCount={columnCount}
display={display || CardDisplayType.CARD} display={display || ListDisplayType.CARD}
handlePlayQueueAdd={handlePlayQueueAdd} handlePlayQueueAdd={handlePlayQueueAdd}
height={height} height={height}
initialScrollOffset={initialScrollOffset} initialScrollOffset={initialScrollOffset}
@ -171,7 +171,7 @@ export const VirtualInfiniteGrid = forwardRef(
); );
VirtualInfiniteGrid.defaultProps = { VirtualInfiniteGrid.defaultProps = {
display: CardDisplayType.CARD, display: ListDisplayType.CARD,
minimumBatchSize: 20, minimumBatchSize: 20,
route: undefined, route: undefined,
}; };

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

@ -5,7 +5,7 @@ import {
VirtualInfiniteGridRef, VirtualInfiniteGridRef,
} from '/@/renderer/components'; } from '/@/renderer/components';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { CardDisplayType, CardRow, LibraryItem } from '/@/renderer/types'; import { ListDisplayType, CardRow, LibraryItem } from '/@/renderer/types';
import AutoSizer from 'react-virtualized-auto-sizer'; import AutoSizer from 'react-virtualized-auto-sizer';
import { MutableRefObject, useCallback, useMemo } from 'react'; import { MutableRefObject, useCallback, useMemo } from 'react';
import { ListOnScrollProps } from 'react-window'; import { ListOnScrollProps } from 'react-window';
@ -145,7 +145,7 @@ export const AlbumListContent = ({ gridRef }: AlbumListContentProps) => {
<VirtualInfiniteGrid <VirtualInfiniteGrid
ref={gridRef} ref={gridRef}
cardRows={cardRows} cardRows={cardRows}
display={page.display || CardDisplayType.CARD} display={page.display || ListDisplayType.CARD}
fetchFn={fetch} fetchFn={fetch}
handlePlayQueueAdd={handlePlayQueueAdd} handlePlayQueueAdd={handlePlayQueueAdd}
height={height} height={height}

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

@ -37,7 +37,7 @@ import {
useSetAlbumFilters, useSetAlbumFilters,
useSetAlbumStore, useSetAlbumStore,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { CardDisplayType } from '/@/renderer/types'; import { ListDisplayType } from '/@/renderer/types';
const FILTERS = { const FILTERS = {
jellyfin: [ jellyfin: [
@ -198,12 +198,12 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
(e: MouseEvent<HTMLButtonElement>) => { (e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return; if (!e.currentTarget?.value) return;
const type = e.currentTarget.value; const type = e.currentTarget.value;
if (type === CardDisplayType.CARD) { if (type === ListDisplayType.CARD) {
setPage({ list: { ...page, display: CardDisplayType.CARD } }); setPage({ list: { ...page, display: ListDisplayType.CARD } });
} else if (type === CardDisplayType.POSTER) { } else if (type === ListDisplayType.POSTER) {
setPage({ list: { ...page, display: CardDisplayType.POSTER } }); setPage({ list: { ...page, display: ListDisplayType.POSTER } });
} else { } else {
setPage({ list: { ...page, display: CardDisplayType.TABLE } }); setPage({ list: { ...page, display: ListDisplayType.TABLE } });
} }
}, },
[page, setPage], [page, setPage],
@ -264,7 +264,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item
disabled disabled
$isActive={page.display === CardDisplayType.TABLE} $isActive={page.display === ListDisplayType.TABLE}
value="list" value="list"
onClick={handleSetViewType} onClick={handleSetViewType}
> >

6
src/renderer/store/album.store.ts
View file

@ -3,14 +3,14 @@ import create from 'zustand';
import { devtools, persist } from 'zustand/middleware'; import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer'; import { immer } from 'zustand/middleware/immer';
import { AlbumListArgs, AlbumListSort, SortOrder } from '/@/renderer/api/types'; import { AlbumListArgs, AlbumListSort, SortOrder } from '/@/renderer/api/types';
import { CardDisplayType } from '/@/renderer/types'; import { ListDisplayType } from '/@/renderer/types';
type TableProps = { type TableProps = {
scrollOffset: number; scrollOffset: number;
}; };
type ListProps<T> = { type ListProps<T> = {
display: CardDisplayType; display: ListDisplayType;
filter: T; filter: T;
grid: { grid: {
scrollOffset: number; scrollOffset: number;
@ -49,7 +49,7 @@ export const useAlbumStore = create<AlbumSlice>()(
}, },
}, },
list: { list: {
display: CardDisplayType.CARD, display: ListDisplayType.CARD,
filter: { filter: {
musicFolderId: undefined, musicFolderId: undefined,
sortBy: AlbumListSort.RECENTLY_ADDED, sortBy: AlbumListSort.RECENTLY_ADDED,

6
src/renderer/store/song.store.ts
View file

@ -4,14 +4,14 @@ import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer'; import { immer } from 'zustand/middleware/immer';
import { SongListArgs, SongListSort, SortOrder } from '/@/renderer/api/types'; import { SongListArgs, SongListSort, SortOrder } from '/@/renderer/api/types';
import { DataTableProps } from '/@/renderer/store/settings.store'; import { DataTableProps } from '/@/renderer/store/settings.store';
import { CardDisplayType, TableColumn } from '/@/renderer/types'; import { ListDisplayType, TableColumn } from '/@/renderer/types';
type TableProps = { type TableProps = {
scrollOffset: number; scrollOffset: number;
} & DataTableProps; } & DataTableProps;
type ListProps<T> = { type ListProps<T> = {
display: CardDisplayType; display: ListDisplayType;
filter: T; filter: T;
table: TableProps; table: TableProps;
}; };
@ -44,7 +44,7 @@ export const useSongStore = create<SongSlice>()(
}, },
}, },
list: { list: {
display: CardDisplayType.TABLE, display: ListDisplayType.TABLE,
filter: { filter: {
musicFolderId: undefined, musicFolderId: undefined,
sortBy: SongListSort.RECENTLY_ADDED, sortBy: SongListSort.RECENTLY_ADDED,

9
src/renderer/types.ts
View file

@ -19,16 +19,11 @@ export type CardRow<T> = {
route?: CardRoute; route?: CardRoute;
}; };
export enum CardDisplayType {
CARD = 'card',
POSTER = 'poster',
TABLE = 'table',
}
export enum ListDisplayType { export enum ListDisplayType {
CARD = 'card', CARD = 'card',
POSTER = 'poster', POSTER = 'poster',
TABLE = 'table', TABLE = 'table',
TABLE_PAGINATED = 'paginatedTable',
} }
export enum LibraryItem { export enum LibraryItem {
@ -164,7 +159,7 @@ export type GridCardData = {
cardControls: any; cardControls: any;
cardRows: CardRow<Album | AlbumArtist | Artist>[]; cardRows: CardRow<Album | AlbumArtist | Artist>[];
columnCount: number; columnCount: number;
display: CardDisplayType; display: ListDisplayType;
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void; handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
itemCount: number; itemCount: number;
itemData: any[]; itemData: any[];