mirror of
https://github.com/jeffvli/feishin.git
synced 2024-11-20 06:27:09 +01:00
Add dedicated playlist song list page
This commit is contained in:
jeffvli
parent
737a05e2c5
commit
8b04f70106
@ -376,8 +376,11 @@ const getPlaylistSongList = async (args: PlaylistSongListArgs): Promise<JFSongLi
|
||||
const searchParams: JFSongListParams = {
|
||||
fields: 'Genres, DateCreated, MediaSources, UserData, ParentId',
|
||||
includeItemTypes: 'Audio',
|
||||
limit: query.limit,
|
||||
sortBy: query.sortBy ? songListSortMap.jellyfin[query.sortBy] : undefined,
|
||||
sortOrder: query.sortOrder ? sortOrderMap.jellyfin[query.sortOrder] : undefined,
|
||||
startIndex: 0,
|
||||
userId: server?.userId || '',
|
||||
};
|
||||
|
||||
const data = await api
|
||||
|
||||
@ -24,7 +24,6 @@ import {
|
||||
NDAlbumListSort,
|
||||
NDAlbumDetail,
|
||||
NDSongList,
|
||||
NDSongListSort,
|
||||
NDSongDetail,
|
||||
NDAlbumArtistList,
|
||||
NDAlbumArtistListSort,
|
||||
@ -33,6 +32,7 @@ import {
|
||||
NDPlaylistList,
|
||||
NDPlaylistListSort,
|
||||
NDPlaylistDetail,
|
||||
NDSongListSort,
|
||||
} from '/@/renderer/api/navidrome.types';
|
||||
import {
|
||||
SSAlbumList,
|
||||
@ -404,6 +404,7 @@ export enum SongListSort {
|
||||
DURATION = 'duration',
|
||||
FAVORITED = 'favorited',
|
||||
GENRE = 'genre',
|
||||
ID = 'id',
|
||||
NAME = 'name',
|
||||
PLAY_COUNT = 'playCount',
|
||||
RANDOM = 'random',
|
||||
@ -465,6 +466,7 @@ export const songListSortMap: SongListSortMap = {
|
||||
duration: JFSongListSort.DURATION,
|
||||
favorited: undefined,
|
||||
genre: undefined,
|
||||
id: undefined,
|
||||
name: JFSongListSort.NAME,
|
||||
playCount: JFSongListSort.PLAY_COUNT,
|
||||
random: JFSongListSort.RANDOM,
|
||||
@ -484,6 +486,7 @@ export const songListSortMap: SongListSortMap = {
|
||||
duration: NDSongListSort.DURATION,
|
||||
favorited: NDSongListSort.FAVORITED,
|
||||
genre: NDSongListSort.GENRE,
|
||||
id: NDSongListSort.ID,
|
||||
name: NDSongListSort.TITLE,
|
||||
playCount: NDSongListSort.PLAY_COUNT,
|
||||
random: undefined,
|
||||
@ -503,6 +506,7 @@ export const songListSortMap: SongListSortMap = {
|
||||
duration: undefined,
|
||||
favorited: undefined,
|
||||
genre: undefined,
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
playCount: undefined,
|
||||
random: undefined,
|
||||
|
||||
@ -1,156 +0,0 @@
|
||||
import { Center, Group } from '@mantine/core';
|
||||
import { useMergedRef } from '@mantine/hooks';
|
||||
import { forwardRef } from 'react';
|
||||
import { RiAlbumFill } from 'react-icons/ri';
|
||||
import { useParams } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
import { Text, TextTitle } from '/@/renderer/components';
|
||||
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
|
||||
import { PlayButton } from '/@/renderer/features/shared';
|
||||
import { useContainerQuery } from '/@/renderer/hooks';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
|
||||
const HeaderContainer = styled.div`
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-template-areas: 'image info';
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 250px minmax(0, 1fr);
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 30vh;
|
||||
min-height: 340px;
|
||||
max-height: 500px;
|
||||
padding: 5rem 2rem 2rem;
|
||||
`;
|
||||
|
||||
const CoverImageWrapper = styled.div`
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
grid-area: image;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
filter: drop-shadow(0 0 8px rgb(0, 0, 0, 50%));
|
||||
`;
|
||||
|
||||
const MetadataWrapper = styled.div`
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-area: info;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledImage = styled.img`
|
||||
object-fit: cover;
|
||||
`;
|
||||
|
||||
const BackgroundImage = styled.div<{ background: string }>`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: ${(props) => props.background};
|
||||
`;
|
||||
|
||||
const BackgroundImageOverlay = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg)), var(--background-noise);
|
||||
`;
|
||||
|
||||
interface PlaylistDetailHeaderProps {
|
||||
background: string;
|
||||
imageUrl?: string;
|
||||
}
|
||||
|
||||
export const PlaylistDetailHeader = forwardRef(
|
||||
({ background, imageUrl }: PlaylistDetailHeaderProps, ref) => {
|
||||
const { playlistId } = useParams() as { playlistId: string };
|
||||
const detailQuery = usePlaylistDetail({ id: playlistId });
|
||||
const cq = useContainerQuery();
|
||||
|
||||
const mergedRef = useMergedRef(ref, cq.ref);
|
||||
|
||||
const titleSize = cq.isXl
|
||||
? '6rem'
|
||||
: cq.isLg
|
||||
? '5.5rem'
|
||||
: cq.isMd
|
||||
? '4.5rem'
|
||||
: cq.isSm
|
||||
? '3.5rem'
|
||||
: '2rem';
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderContainer ref={mergedRef}>
|
||||
<BackgroundImage background={background} />
|
||||
<BackgroundImageOverlay />
|
||||
<CoverImageWrapper>
|
||||
{imageUrl ? (
|
||||
<StyledImage
|
||||
alt="cover"
|
||||
height={225}
|
||||
src={imageUrl}
|
||||
width={225}
|
||||
/>
|
||||
) : (
|
||||
<Center
|
||||
sx={{
|
||||
background: 'var(--placeholder-bg)',
|
||||
borderRadius: 'var(--card-default-radius)',
|
||||
height: `${225}px`,
|
||||
width: `${225}px`,
|
||||
}}
|
||||
>
|
||||
<RiAlbumFill
|
||||
color="var(--placeholder-fg)"
|
||||
size={35}
|
||||
/>
|
||||
</Center>
|
||||
)}
|
||||
</CoverImageWrapper>
|
||||
<MetadataWrapper>
|
||||
<Group>
|
||||
<Text
|
||||
$link
|
||||
component={Link}
|
||||
fw="600"
|
||||
sx={{ textTransform: 'uppercase' }}
|
||||
to={AppRoute.LIBRARY_ALBUMS}
|
||||
>
|
||||
Playlist
|
||||
</Text>
|
||||
</Group>
|
||||
<TextTitle
|
||||
fw="900"
|
||||
lh="1"
|
||||
mb="0.12em"
|
||||
mt=".08em"
|
||||
sx={{ fontSize: titleSize }}
|
||||
>
|
||||
{detailQuery?.data?.name}
|
||||
</TextTitle>
|
||||
<Group
|
||||
py="1rem"
|
||||
spacing="xs"
|
||||
>
|
||||
<PlayButton />
|
||||
</Group>
|
||||
</MetadataWrapper>
|
||||
</HeaderContainer>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
@ -3,72 +3,73 @@ import type {
|
||||
BodyScrollEvent,
|
||||
CellContextMenuEvent,
|
||||
ColDef,
|
||||
GridReadyEvent,
|
||||
IDatasource,
|
||||
PaginationChangedEvent,
|
||||
RowDoubleClickedEvent,
|
||||
} from '@ag-grid-community/core';
|
||||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
import { getColumnDefs, VirtualTable } from '/@/renderer/components';
|
||||
import { useCurrentServer, useSetSongTable, useSongListStore } from '/@/renderer/store';
|
||||
import { LibraryItem } from '/@/renderer/types';
|
||||
import { getColumnDefs, TablePagination, VirtualTable } from '/@/renderer/components';
|
||||
import {
|
||||
useCurrentServer,
|
||||
usePlaylistDetailStore,
|
||||
usePlaylistDetailTablePagination,
|
||||
useSetPlaylistDetailTable,
|
||||
useSetPlaylistDetailTablePagination,
|
||||
} from '/@/renderer/store';
|
||||
import { LibraryItem, ListDisplayType } from '/@/renderer/types';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { openContextMenu } from '/@/renderer/features/context-menu';
|
||||
import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
|
||||
import sortBy from 'lodash/sortBy';
|
||||
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
|
||||
import { QueueSong } from '/@/renderer/api/types';
|
||||
import { PlaylistSongListQuery, QueueSong, SongListSort, SortOrder } from '/@/renderer/api/types';
|
||||
import { usePlaylistSongList } from '/@/renderer/features/playlists/queries/playlist-song-list-query';
|
||||
import { useParams } from 'react-router';
|
||||
import styled from 'styled-components';
|
||||
import { usePlayQueueAdd } from '/@/renderer/features/player';
|
||||
|
||||
const ContentContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 1920px;
|
||||
padding: 1rem 2rem;
|
||||
overflow: hidden;
|
||||
|
||||
.ag-theme-alpine-dark {
|
||||
--ag-header-background-color: rgba(0, 0, 0, 0%);
|
||||
}
|
||||
|
||||
.ag-header-container {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.ag-header-cell-resize {
|
||||
top: 25%;
|
||||
width: 7px;
|
||||
height: 50%;
|
||||
background-color: rgb(70, 70, 70, 20%);
|
||||
}
|
||||
`;
|
||||
import { api } from '/@/renderer/api';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
|
||||
interface PlaylistDetailContentProps {
|
||||
tableRef: MutableRefObject<AgGridReactType | null>;
|
||||
}
|
||||
|
||||
export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps) => {
|
||||
export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailContentProps) => {
|
||||
const { playlistId } = useParams() as { playlistId: string };
|
||||
// const queryClient = useQueryClient();
|
||||
const queryClient = useQueryClient();
|
||||
const server = useCurrentServer();
|
||||
const page = useSongListStore();
|
||||
const page = usePlaylistDetailStore();
|
||||
const filters: Partial<PlaylistSongListQuery> = useMemo(() => {
|
||||
return {
|
||||
sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
|
||||
sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
|
||||
};
|
||||
}, [page?.table.id, playlistId]);
|
||||
|
||||
// const pagination = useSongTablePagination();
|
||||
// const setPagination = useSetSongTablePagination();
|
||||
const setTable = useSetSongTable();
|
||||
const p = usePlaylistDetailTablePagination(playlistId);
|
||||
const pagination = {
|
||||
currentPage: p?.currentPage || 0,
|
||||
itemsPerPage: p?.itemsPerPage || 100,
|
||||
scrollOffset: p?.scrollOffset || 0,
|
||||
totalItems: p?.totalItems || 1,
|
||||
totalPages: p?.totalPages || 1,
|
||||
};
|
||||
|
||||
const setPagination = useSetPlaylistDetailTablePagination();
|
||||
const setTable = useSetPlaylistDetailTable();
|
||||
const handlePlayQueueAdd = usePlayQueueAdd();
|
||||
const playButtonBehavior = usePlayButtonBehavior();
|
||||
|
||||
// const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
|
||||
const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
|
||||
|
||||
const playlistSongsQuery = usePlaylistSongList({
|
||||
const checkPlaylistList = usePlaylistSongList({
|
||||
id: playlistId,
|
||||
limit: 50,
|
||||
limit: 1,
|
||||
startIndex: 0,
|
||||
});
|
||||
|
||||
console.log('checkPlaylistList.data', playlistSongsQuery.data);
|
||||
|
||||
const columnDefs: ColDef[] = useMemo(
|
||||
() => getColumnDefs(page.table.columns),
|
||||
[page.table.columns],
|
||||
@ -82,58 +83,66 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
|
||||
};
|
||||
}, []);
|
||||
|
||||
// const onGridReady = useCallback(
|
||||
// (params: GridReadyEvent) => {
|
||||
// const dataSource: IDatasource = {
|
||||
// getRows: async (params) => {
|
||||
// const limit = params.endRow - params.startRow;
|
||||
// const startIndex = params.startRow;
|
||||
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.songList(server?.id || '', playlistId, {
|
||||
// id: playlistId,
|
||||
// limit,
|
||||
// startIndex,
|
||||
// });
|
||||
const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId, {
|
||||
id: playlistId,
|
||||
limit,
|
||||
startIndex,
|
||||
...filters,
|
||||
});
|
||||
|
||||
// const songsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
|
||||
// api.controller.getPlaylistSongList({
|
||||
// query: {
|
||||
// id: playlistId,
|
||||
// limit,
|
||||
// startIndex,
|
||||
// },
|
||||
// server,
|
||||
// signal,
|
||||
// }),
|
||||
// );
|
||||
const songsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
|
||||
api.controller.getPlaylistSongList({
|
||||
query: {
|
||||
id: playlistId,
|
||||
limit,
|
||||
startIndex,
|
||||
...filters,
|
||||
},
|
||||
server,
|
||||
signal,
|
||||
}),
|
||||
);
|
||||
|
||||
// const songs = api.normalize.songList(songsRes, server);
|
||||
// params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
|
||||
// },
|
||||
// rowCount: undefined,
|
||||
// };
|
||||
// params.api.setDatasource(dataSource);
|
||||
// params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
|
||||
// },
|
||||
// [page.table.scrollOffset, playlistId, queryClient, server],
|
||||
// );
|
||||
const songs = api.normalize.songList(songsRes, server);
|
||||
params.successCallback(songs?.items || [], songsRes?.totalRecordCount);
|
||||
},
|
||||
rowCount: undefined,
|
||||
};
|
||||
params.api.setDatasource(dataSource);
|
||||
params.api.ensureIndexVisible(pagination.scrollOffset, 'top');
|
||||
},
|
||||
[filters, pagination.scrollOffset, playlistId, queryClient, server],
|
||||
);
|
||||
|
||||
// const onPaginationChanged = useCallback(
|
||||
// (event: PaginationChangedEvent) => {
|
||||
// if (!isPaginationEnabled || !event.api) return;
|
||||
const onPaginationChanged = useCallback(
|
||||
(event: PaginationChangedEvent) => {
|
||||
if (!isPaginationEnabled || !event.api) return;
|
||||
|
||||
// // Scroll to top of page on pagination change
|
||||
// const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
|
||||
// event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
|
||||
// Scroll to top of page on pagination change
|
||||
const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
|
||||
event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
|
||||
|
||||
// setPagination({
|
||||
// itemsPerPage: event.api.paginationGetPageSize(),
|
||||
// totalItems: event.api.paginationGetRowCount(),
|
||||
// totalPages: event.api.paginationGetTotalPages() + 1,
|
||||
// });
|
||||
// },
|
||||
// [isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
|
||||
// );
|
||||
setPagination(playlistId, {
|
||||
itemsPerPage: event.api.paginationGetPageSize(),
|
||||
totalItems: event.api.paginationGetRowCount(),
|
||||
totalPages: event.api.paginationGetTotalPages() + 1,
|
||||
});
|
||||
},
|
||||
[
|
||||
isPaginationEnabled,
|
||||
pagination.currentPage,
|
||||
pagination.itemsPerPage,
|
||||
playlistId,
|
||||
setPagination,
|
||||
],
|
||||
);
|
||||
|
||||
const handleGridSizeChange = () => {
|
||||
if (page.table.autoFit) {
|
||||
@ -169,7 +178,7 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
|
||||
|
||||
const handleScroll = (e: BodyScrollEvent) => {
|
||||
const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
|
||||
setTable({ scrollOffset });
|
||||
setPagination(playlistId, { scrollOffset });
|
||||
};
|
||||
|
||||
const handleContextMenu = (e: CellContextMenuEvent) => {
|
||||
@ -205,50 +214,58 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
|
||||
};
|
||||
|
||||
return (
|
||||
<ContentContainer>
|
||||
<>
|
||||
<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
|
||||
animateRows
|
||||
detailRowAutoHeight
|
||||
maintainColumnOrder
|
||||
suppressCopyRowsToClipboard
|
||||
suppressMoveWhenRowDragging
|
||||
suppressPaginationPanel
|
||||
suppressRowDrag
|
||||
suppressScrollOnNewData
|
||||
blockLoadDebounceMillis={200}
|
||||
cacheBlockSize={500}
|
||||
cacheOverflowSize={1}
|
||||
columnDefs={columnDefs}
|
||||
defaultColDef={defaultColumnDefs}
|
||||
enableCellChangeFlash={false}
|
||||
rowData={playlistSongsQuery.data?.items}
|
||||
rowHeight={page.table.rowHeight || 60}
|
||||
getRowId={(data) => data.data.id}
|
||||
infiniteInitialRowCount={checkPlaylistList.data?.totalRecordCount || 100}
|
||||
pagination={isPaginationEnabled}
|
||||
paginationAutoPageSize={isPaginationEnabled}
|
||||
paginationPageSize={pagination.itemsPerPage || 100}
|
||||
rowBuffer={20}
|
||||
rowHeight={page.table.rowHeight || 40}
|
||||
rowModelType="infinite"
|
||||
rowSelection="multiple"
|
||||
onBodyScrollEnd={handleScroll}
|
||||
onCellContextMenu={handleContextMenu}
|
||||
onColumnMoved={handleColumnChange}
|
||||
onColumnResized={debouncedColumnChange}
|
||||
onGridReady={(params) => {
|
||||
params.api.setDomLayout('autoHeight');
|
||||
params.api.sizeColumnsToFit();
|
||||
}}
|
||||
onGridReady={onGridReady}
|
||||
onGridSizeChanged={handleGridSizeChange}
|
||||
onPaginationChanged={onPaginationChanged}
|
||||
onRowDoubleClicked={handleRowDoubleClick}
|
||||
/>
|
||||
{/* <AnimatePresence
|
||||
<AnimatePresence
|
||||
presenceAffectsLayout
|
||||
initial={false}
|
||||
mode="wait"
|
||||
>
|
||||
{page.display === ListDisplayType.TABLE_PAGINATED && (
|
||||
<TablePagination
|
||||
id={playlistId}
|
||||
pagination={pagination}
|
||||
setPagination={setPagination}
|
||||
setIdPagination={setPagination}
|
||||
tableRef={tableRef}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence> */}
|
||||
</ContentContainer>
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,393 @@
|
||||
import { IDatasource } from '@ag-grid-community/core';
|
||||
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
||||
import { Flex, Group, Stack } from '@mantine/core';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { ChangeEvent, MutableRefObject, useCallback, MouseEvent } from 'react';
|
||||
import { RiArrowDownSLine, RiMoreFill, RiSortAsc, RiSortDesc } from 'react-icons/ri';
|
||||
import { useParams } from 'react-router';
|
||||
import styled from 'styled-components';
|
||||
import { api } from '/@/renderer/api';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { PlaylistSongListQuery, SongListSort, SortOrder } from '/@/renderer/api/types';
|
||||
import {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
MultiSelect,
|
||||
PageHeader,
|
||||
Slider,
|
||||
SONG_TABLE_COLUMNS,
|
||||
Switch,
|
||||
Text,
|
||||
TextTitle,
|
||||
} from '/@/renderer/components';
|
||||
import { useContainerQuery } from '/@/renderer/hooks';
|
||||
import {
|
||||
useCurrentServer,
|
||||
usePlaylistDetailStore,
|
||||
useSetPlaylistTablePagination,
|
||||
useSetPlaylistDetailTable,
|
||||
SongListFilter,
|
||||
useSetPlaylistDetailFilters,
|
||||
useSetPlaylistStore,
|
||||
} from '/@/renderer/store';
|
||||
import { ListDisplayType, TableColumn } from '/@/renderer/types';
|
||||
|
||||
const FILTERS = {
|
||||
jellyfin: [
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Duration', value: SongListSort.DURATION },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Most Played', value: SongListSort.PLAY_COUNT },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Random', value: SongListSort.RANDOM },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Release Date', value: SongListSort.RELEASE_DATE },
|
||||
],
|
||||
navidrome: [
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Album', value: SongListSort.ALBUM },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Album Artist', value: SongListSort.ALBUM_ARTIST },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Artist', value: SongListSort.ARTIST },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'BPM', value: SongListSort.BPM },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Channels', value: SongListSort.CHANNELS },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Comment', value: SongListSort.COMMENT },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Duration', value: SongListSort.DURATION },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Favorited', value: SongListSort.FAVORITED },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Genre', value: SongListSort.GENRE },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Id', value: SongListSort.ID },
|
||||
{ defaultOrder: SortOrder.ASC, name: 'Name', value: SongListSort.NAME },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Play Count', value: SongListSort.PLAY_COUNT },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Rating', value: SongListSort.RATING },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Recently Added', value: SongListSort.RECENTLY_ADDED },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Recently Played', value: SongListSort.RECENTLY_PLAYED },
|
||||
{ defaultOrder: SortOrder.DESC, name: 'Year', value: SongListSort.YEAR },
|
||||
],
|
||||
};
|
||||
|
||||
const ORDER = [
|
||||
{ name: 'Ascending', value: SortOrder.ASC },
|
||||
{ name: 'Descending', value: SortOrder.DESC },
|
||||
];
|
||||
|
||||
const HeaderItems = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
interface PlaylistDetailHeaderProps {
|
||||
tableRef: MutableRefObject<AgGridReactType | null>;
|
||||
}
|
||||
|
||||
export const PlaylistDetailSongListHeader = ({ tableRef }: PlaylistDetailHeaderProps) => {
|
||||
const { playlistId } = useParams() as { playlistId: string };
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const server = useCurrentServer();
|
||||
const setPage = useSetPlaylistStore();
|
||||
const setFilter = useSetPlaylistDetailFilters();
|
||||
const page = usePlaylistDetailStore();
|
||||
const filters: Partial<PlaylistSongListQuery> = {
|
||||
sortBy: page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID,
|
||||
sortOrder: page?.table.id[playlistId]?.filter?.sortOrder || SortOrder.ASC,
|
||||
};
|
||||
|
||||
const cq = useContainerQuery();
|
||||
|
||||
const setPagination = useSetPlaylistTablePagination();
|
||||
const setTable = useSetPlaylistDetailTable();
|
||||
|
||||
const sortByLabel =
|
||||
(server?.type &&
|
||||
FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) ||
|
||||
'Unknown';
|
||||
|
||||
const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown';
|
||||
|
||||
const handleItemSize = (e: number) => {
|
||||
setTable({ rowHeight: e });
|
||||
};
|
||||
|
||||
const handleFilterChange = useCallback(
|
||||
async (filters: SongListFilter) => {
|
||||
const dataSource: IDatasource = {
|
||||
getRows: async (params) => {
|
||||
const limit = params.endRow - params.startRow;
|
||||
const startIndex = params.startRow;
|
||||
|
||||
const queryKey = queryKeys.playlists.songList(server?.id || '', playlistId, {
|
||||
id: playlistId,
|
||||
limit,
|
||||
startIndex,
|
||||
...filters,
|
||||
});
|
||||
|
||||
const songsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
|
||||
api.controller.getPlaylistSongList({
|
||||
query: {
|
||||
id: playlistId,
|
||||
limit,
|
||||
startIndex,
|
||||
...filters,
|
||||
},
|
||||
server,
|
||||
signal,
|
||||
}),
|
||||
);
|
||||
|
||||
const songs = api.normalize.songList(songsRes, server);
|
||||
params.successCallback(songs?.items || [], songsRes?.totalRecordCount || undefined);
|
||||
},
|
||||
rowCount: undefined,
|
||||
};
|
||||
tableRef.current?.api.setDatasource(dataSource);
|
||||
tableRef.current?.api.purgeInfiniteCache();
|
||||
tableRef.current?.api.ensureIndexVisible(0, 'top');
|
||||
|
||||
if (page.display === ListDisplayType.TABLE_PAGINATED) {
|
||||
setPagination({ currentPage: 0 });
|
||||
}
|
||||
},
|
||||
[tableRef, page.display, server, playlistId, queryClient, setPagination],
|
||||
);
|
||||
|
||||
const handleSetSortBy = useCallback(
|
||||
(e: MouseEvent<HTMLButtonElement>) => {
|
||||
if (!e.currentTarget?.value || !server?.type) return;
|
||||
|
||||
const sortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
|
||||
(f) => f.value === e.currentTarget.value,
|
||||
)?.defaultOrder;
|
||||
|
||||
const updatedFilters = setFilter(playlistId, {
|
||||
sortBy: e.currentTarget.value as SongListSort,
|
||||
sortOrder: sortOrder || SortOrder.ASC,
|
||||
});
|
||||
|
||||
handleFilterChange(updatedFilters);
|
||||
},
|
||||
[handleFilterChange, playlistId, server?.type, setFilter],
|
||||
);
|
||||
|
||||
const handleToggleSortOrder = useCallback(() => {
|
||||
const newSortOrder = filters.sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
|
||||
const updatedFilters = setFilter(playlistId, { sortOrder: newSortOrder });
|
||||
handleFilterChange(updatedFilters);
|
||||
}, [filters.sortOrder, handleFilterChange, playlistId, setFilter]);
|
||||
|
||||
const handleSetViewType = useCallback(
|
||||
(e: MouseEvent<HTMLButtonElement>) => {
|
||||
if (!e.currentTarget?.value) return;
|
||||
setPage({ detail: { ...page, display: e.currentTarget.value as ListDisplayType } });
|
||||
},
|
||||
[page, setPage],
|
||||
);
|
||||
|
||||
const handleTableColumns = (values: TableColumn[]) => {
|
||||
const existingColumns = page.table.columns;
|
||||
|
||||
if (values.length === 0) {
|
||||
return setTable({
|
||||
columns: [],
|
||||
});
|
||||
}
|
||||
|
||||
// If adding a column
|
||||
if (values.length > existingColumns.length) {
|
||||
const newColumn = { column: values[values.length - 1], width: 100 };
|
||||
|
||||
setTable({ columns: [...existingColumns, newColumn] });
|
||||
} else {
|
||||
// If removing a column
|
||||
const removed = existingColumns.filter((column) => !values.includes(column.column));
|
||||
const newColumns = existingColumns.filter((column) => !removed.includes(column));
|
||||
|
||||
setTable({ columns: newColumns });
|
||||
}
|
||||
|
||||
return tableRef.current?.api.sizeColumnsToFit();
|
||||
};
|
||||
|
||||
const handleAutoFitColumns = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setTable({ autoFit: e.currentTarget.checked });
|
||||
|
||||
if (e.currentTarget.checked) {
|
||||
tableRef.current?.api.sizeColumnsToFit();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PageHeader p="1rem">
|
||||
<HeaderItems ref={cq.ref}>
|
||||
<Flex
|
||||
align="center"
|
||||
gap="md"
|
||||
justify="center"
|
||||
>
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
compact
|
||||
px={0}
|
||||
rightIcon={<RiArrowDownSLine size={15} />}
|
||||
size="xl"
|
||||
variant="subtle"
|
||||
>
|
||||
<TextTitle
|
||||
fw="bold"
|
||||
order={3}
|
||||
>
|
||||
Playlist
|
||||
</TextTitle>
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
<DropdownMenu.Label>Display type</DropdownMenu.Label>
|
||||
<DropdownMenu.Item
|
||||
$isActive={page.display === ListDisplayType.TABLE}
|
||||
value={ListDisplayType.TABLE}
|
||||
onClick={handleSetViewType}
|
||||
>
|
||||
Table
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
$isActive={page.display === ListDisplayType.TABLE_PAGINATED}
|
||||
value={ListDisplayType.TABLE_PAGINATED}
|
||||
onClick={handleSetViewType}
|
||||
>
|
||||
Table (paginated)
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Divider />
|
||||
<DropdownMenu.Label>Item size</DropdownMenu.Label>
|
||||
<DropdownMenu.Item closeMenuOnClick={false}>
|
||||
<Slider
|
||||
defaultValue={page.table.rowHeight}
|
||||
label={null}
|
||||
max={100}
|
||||
min={25}
|
||||
onChangeEnd={handleItemSize}
|
||||
/>
|
||||
</DropdownMenu.Item>
|
||||
{(page.display === ListDisplayType.TABLE ||
|
||||
page.display === ListDisplayType.TABLE_PAGINATED) && (
|
||||
<>
|
||||
<DropdownMenu.Label>Table Columns</DropdownMenu.Label>
|
||||
<DropdownMenu.Item
|
||||
closeMenuOnClick={false}
|
||||
component="div"
|
||||
sx={{ cursor: 'default' }}
|
||||
>
|
||||
<Stack>
|
||||
<MultiSelect
|
||||
clearable
|
||||
data={SONG_TABLE_COLUMNS}
|
||||
defaultValue={page.table?.columns.map((column) => column.column)}
|
||||
width={300}
|
||||
onChange={handleTableColumns}
|
||||
/>
|
||||
<Group position="apart">
|
||||
<Text>Auto Fit Columns</Text>
|
||||
<Switch
|
||||
defaultChecked={page.table.autoFit}
|
||||
onChange={handleAutoFitColumns}
|
||||
/>
|
||||
</Group>
|
||||
</Stack>
|
||||
</DropdownMenu.Item>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
compact
|
||||
fw="600"
|
||||
variant="subtle"
|
||||
>
|
||||
{sortByLabel}
|
||||
</Button>
|
||||
</DropdownMenu.Target>
|
||||
<DropdownMenu.Dropdown>
|
||||
{FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
|
||||
<DropdownMenu.Item
|
||||
key={`filter-${filter.name}`}
|
||||
$isActive={filter.value === filters.sortBy}
|
||||
value={filter.value}
|
||||
onClick={handleSetSortBy}
|
||||
>
|
||||
{filter.name}
|
||||
</DropdownMenu.Item>
|
||||
))}
|
||||
</DropdownMenu.Dropdown>
|
||||
</DropdownMenu>
|
||||
<Button
|
||||
compact
|
||||
fw="600"
|
||||
variant="subtle"
|
||||
onClick={handleToggleSortOrder}
|
||||
>
|
||||
{cq.isMd ? (
|
||||
sortOrderLabel
|
||||
) : (
|
||||
<>
|
||||
{filters.sortOrder === SortOrder.ASC ? (
|
||||
<RiSortAsc size={15} />
|
||||
) : (
|
||||
<RiSortDesc size={15} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<DropdownMenu position="bottom-start">
|
||||
<DropdownMenu.Target>
|
||||
<Button
|
||||
compact
|
||||
variant="subtle"
|
||||
>
|
||||
<RiMoreFill size={15} />
|
||||
</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.Dropdown>
|
||||
</DropdownMenu>
|
||||
</Flex>
|
||||
</HeaderItems>
|
||||
{/* <HeaderContainer ref={mergedRef}> */}
|
||||
{/* <MetadataWrapper>
|
||||
<Group>
|
||||
<Text
|
||||
$link
|
||||
component={Link}
|
||||
fw="600"
|
||||
sx={{ textTransform: 'uppercase' }}
|
||||
to={AppRoute.LIBRARY_ALBUMS}
|
||||
>
|
||||
Playlist
|
||||
</Text>
|
||||
</Group>
|
||||
<TextTitle
|
||||
fw="900"
|
||||
lh="1"
|
||||
mb="0.12em"
|
||||
mt=".08em"
|
||||
sx={{ fontSize: titleSize }}
|
||||
>
|
||||
{detailQuery?.data?.name}
|
||||
</TextTitle>
|
||||
<Group
|
||||
py="1rem"
|
||||
spacing="xs"
|
||||
>
|
||||
<PlayButton />
|
||||
</Group>
|
||||
</MetadataWrapper> */}
|
||||
{/* </HeaderContainer> */}
|
||||
</PageHeader>
|
||||
);
|
||||
};
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
@ -78,7 +78,7 @@ export const Sidebar = () => {
|
||||
const showImage = sidebar.image;
|
||||
|
||||
const playlistsQuery = usePlaylistList({
|
||||
limit: 0,
|
||||
limit: 100,
|
||||
sortBy: PlaylistListSort.NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
startIndex: 0,
|
||||
|
||||
@ -26,6 +26,10 @@ const PlaylistDetailRoute = lazy(
|
||||
() => import('/@/renderer/features/playlists/routes/playlist-detail-route'),
|
||||
);
|
||||
|
||||
const PlaylistDetailSongListRoute = lazy(
|
||||
() => import('/@/renderer/features/playlists/routes/playlist-detail-song-list-route'),
|
||||
);
|
||||
|
||||
const PlaylistListRoute = lazy(
|
||||
() => import('/@/renderer/features/playlists/routes/playlist-list-route'),
|
||||
);
|
||||
@ -80,6 +84,10 @@ export const AppRouter = () => {
|
||||
element={<PlaylistDetailRoute />}
|
||||
path={AppRoute.PLAYLISTS_DETAIL}
|
||||
/>
|
||||
<Route
|
||||
element={<PlaylistDetailSongListRoute />}
|
||||
path={AppRoute.PLAYLISTS_DETAIL_SONGS}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumArtistListRoute />}
|
||||
path={AppRoute.LIBRARY_ALBUMARTISTS}
|
||||
|
||||
@ -16,6 +16,7 @@ export enum AppRoute {
|
||||
PLAYING = '/playing',
|
||||
PLAYLISTS = '/playlists',
|
||||
PLAYLISTS_DETAIL = '/playlists/:playlistId',
|
||||
PLAYLISTS_DETAIL_SONGS = '/playlists/:playlistId/songs',
|
||||
SEARCH = '/search',
|
||||
SERVERS = '/servers',
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import { devtools, persist } from 'zustand/middleware';
|
||||
import { immer } from 'zustand/middleware/immer';
|
||||
import { PlaylistListArgs, PlaylistListSort, SortOrder } from '/@/renderer/api/types';
|
||||
import { DataTableProps } from '/@/renderer/store/settings.store';
|
||||
import { SongListFilter } from '/@/renderer/store/song.store';
|
||||
import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types';
|
||||
|
||||
type TableProps = {
|
||||
@ -17,14 +18,33 @@ type ListProps<T> = {
|
||||
table: TableProps;
|
||||
};
|
||||
|
||||
type DetailPaginationProps = TablePagination & {
|
||||
scrollOffset: number;
|
||||
};
|
||||
|
||||
type DetailTableProps = DataTableProps & {
|
||||
id: {
|
||||
[key: string]: DetailPaginationProps & { filter: SongListFilter };
|
||||
};
|
||||
};
|
||||
|
||||
type DetailProps = {
|
||||
display: ListDisplayType;
|
||||
table: DetailTableProps;
|
||||
};
|
||||
|
||||
export type PlaylistListFilter = Omit<PlaylistListArgs['query'], 'startIndex' | 'limit'>;
|
||||
|
||||
interface PlaylistState {
|
||||
detail: DetailProps;
|
||||
list: ListProps<PlaylistListFilter>;
|
||||
}
|
||||
|
||||
export interface PlaylistSlice extends PlaylistState {
|
||||
actions: {
|
||||
setDetailFilters: (id: string, data: Partial<SongListFilter>) => SongListFilter;
|
||||
setDetailTable: (data: Partial<DetailTableProps>) => void;
|
||||
setDetailTablePagination: (id: string, data: Partial<DetailPaginationProps>) => void;
|
||||
setFilters: (data: Partial<PlaylistListFilter>) => PlaylistListFilter;
|
||||
setStore: (data: Partial<PlaylistSlice>) => void;
|
||||
setTable: (data: Partial<TableProps>) => void;
|
||||
@ -37,6 +57,32 @@ export const usePlaylistStore = create<PlaylistSlice>()(
|
||||
devtools(
|
||||
immer((set, get) => ({
|
||||
actions: {
|
||||
setDetailFilters: (id, data) => {
|
||||
set((state) => {
|
||||
state.detail.table.id[id] = {
|
||||
...state.detail.table.id[id],
|
||||
filter: {
|
||||
...state.detail.table.id[id].filter,
|
||||
...data,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return get().detail.table.id[id].filter;
|
||||
},
|
||||
setDetailTable: (data) => {
|
||||
set((state) => {
|
||||
state.detail.table = { ...state.detail.table, ...data };
|
||||
});
|
||||
},
|
||||
setDetailTablePagination: (id, data) => {
|
||||
set((state) => {
|
||||
state.detail.table.id[id] = {
|
||||
...state.detail.table.id[id],
|
||||
...data,
|
||||
};
|
||||
});
|
||||
},
|
||||
setFilters: (data) => {
|
||||
set((state) => {
|
||||
state.list.filter = { ...state.list.filter, ...data };
|
||||
@ -58,6 +104,32 @@ export const usePlaylistStore = create<PlaylistSlice>()(
|
||||
});
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
display: ListDisplayType.TABLE,
|
||||
table: {
|
||||
autoFit: true,
|
||||
columns: [
|
||||
{
|
||||
column: TableColumn.ROW_INDEX,
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
column: TableColumn.TITLE_COMBINED,
|
||||
width: 500,
|
||||
},
|
||||
{
|
||||
column: TableColumn.DURATION,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
column: TableColumn.ALBUM,
|
||||
width: 500,
|
||||
},
|
||||
],
|
||||
id: {},
|
||||
rowHeight: 60,
|
||||
},
|
||||
},
|
||||
list: {
|
||||
display: ListDisplayType.TABLE,
|
||||
filter: {
|
||||
@ -123,3 +195,17 @@ export const useSetPlaylistTablePagination = () =>
|
||||
usePlaylistStore((state) => state.actions.setTablePagination);
|
||||
|
||||
export const useSetPlaylistTable = () => usePlaylistStore((state) => state.actions.setTable);
|
||||
|
||||
export const usePlaylistDetailStore = () => usePlaylistStore((state) => state.detail);
|
||||
|
||||
export const usePlaylistDetailTablePagination = (id: string) =>
|
||||
usePlaylistStore((state) => state.detail.table.id[id]);
|
||||
|
||||
export const useSetPlaylistDetailTablePagination = () =>
|
||||
usePlaylistStore((state) => state.actions.setDetailTablePagination);
|
||||
|
||||
export const useSetPlaylistDetailTable = () =>
|
||||
usePlaylistStore((state) => state.actions.setDetailTable);
|
||||
|
||||
export const useSetPlaylistDetailFilters = () =>
|
||||
usePlaylistStore((state) => state.actions.setDetailFilters);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user