various cleanup

This commit is contained in:
jeffvli
2025-11-15 19:32:17 -08:00
parent 68318340e1
commit 88a0e0d1c1
44 changed files with 32 additions and 4021 deletions
@@ -1,6 +1,6 @@
import { useQuery } from '@tanstack/react-query';
import { ALBUMARTIST_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
import { ALBUM_ARTIST_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
import { ListMusicFolderDropdown } from '/@/renderer/features/shared/components/list-music-folder-dropdown';
@@ -52,7 +52,7 @@ export const ArtistListHeaderFilters = () => {
<Group gap="sm" wrap="nowrap">
<ListConfigMenu
listKey={ItemListKey.ARTIST}
tableColumnsData={ALBUMARTIST_TABLE_COLUMNS}
tableColumnsData={ALBUM_ARTIST_TABLE_COLUMNS}
/>
</Group>
</Flex>
@@ -259,6 +259,7 @@ export const AddToPlaylistAction = ({ items, itemType }: AddToPlaylistActionProp
resourceType: itemType,
},
modal: 'addToPlaylist',
size: 'lg',
title: t('page.contextMenu.addToPlaylist', { postProcess: 'sentenceCase' }),
});
}, [itemType, items, t]);
@@ -1,364 +0,0 @@
import React from 'react';
import { AppIconSelection } from '/@/shared/components/icon/icon';
export enum ContextMenuItemKey {
ADD_TO_FAVORITES = 'addToFavorites',
ADD_TO_PLAYLIST = 'addToPlaylist',
CREATE_PLAYLIST = 'createPlaylist',
DELETE_PLAYLIST = 'deletePlaylist',
DESELECT_ALL = 'deselectAll',
DOWNLOAD = 'download',
GO_TO_ALBUM = 'goToAlbum',
GO_TO_ALBUM_ARTIST = 'goToAlbumArtist',
MOVE_TO_BOTTOM_OF_QUEUE = 'moveToBottomOfQueue',
MOVE_TO_NEXT_OF_QUEUE = 'moveToNextOfQueue',
MOVE_TO_TOP_OF_QUEUE = 'moveToTopOfQueue',
PLAY = 'play',
PLAY_LAST = 'playLast',
PLAY_NEXT = 'playNext',
PLAY_SHUFFLED = 'playShuffled',
PLAY_SIMILAR_SONGS = 'playSimilarSongs',
REMOVE_FROM_FAVORITES = 'removeFromFavorites',
REMOVE_FROM_PLAYLIST = 'removeFromPlaylist',
REMOVE_FROM_QUEUE = 'removeFromQueue',
SET_RATING = 'setRating',
SET_RATING_1 = 'setRating1',
SET_RATING_2 = 'setRating2',
SET_RATING_3 = 'setRating3',
SET_RATING_4 = 'setRating4',
SET_RATING_5 = 'setRating5',
SHARE_ITEM = 'shareItem',
SHOW_DETAILS = 'showDetails',
}
export type ContextMenuHandlers = Partial<Record<ContextMenuItemKeys, () => void>>;
export interface ContextMenuItem {
disabled?: boolean;
hidden?: boolean;
icon?: React.ReactNode;
items?: ContextMenuItem[];
key: string;
onClick?: () => void;
}
export type ContextMenuItemDefinition = {
children?: ContextMenuItemDefinition[];
disabled?: boolean;
key: ContextMenuItemKeys;
};
export type ContextMenuItemKeys =
| ContextMenuItemKey.ADD_TO_FAVORITES
| ContextMenuItemKey.ADD_TO_PLAYLIST
| ContextMenuItemKey.CREATE_PLAYLIST
| ContextMenuItemKey.DELETE_PLAYLIST
| ContextMenuItemKey.DESELECT_ALL
| ContextMenuItemKey.DOWNLOAD
| ContextMenuItemKey.GO_TO_ALBUM
| ContextMenuItemKey.GO_TO_ALBUM_ARTIST
| ContextMenuItemKey.MOVE_TO_BOTTOM_OF_QUEUE
| ContextMenuItemKey.MOVE_TO_NEXT_OF_QUEUE
| ContextMenuItemKey.MOVE_TO_TOP_OF_QUEUE
| ContextMenuItemKey.PLAY
| ContextMenuItemKey.PLAY_LAST
| ContextMenuItemKey.PLAY_NEXT
| ContextMenuItemKey.PLAY_SHUFFLED
| ContextMenuItemKey.PLAY_SIMILAR_SONGS
| ContextMenuItemKey.REMOVE_FROM_FAVORITES
| ContextMenuItemKey.REMOVE_FROM_PLAYLIST
| ContextMenuItemKey.REMOVE_FROM_QUEUE
| ContextMenuItemKey.SET_RATING
| ContextMenuItemKey.SET_RATING_1
| ContextMenuItemKey.SET_RATING_2
| ContextMenuItemKey.SET_RATING_3
| ContextMenuItemKey.SET_RATING_4
| ContextMenuItemKey.SET_RATING_5
| ContextMenuItemKey.SHARE_ITEM
| ContextMenuItemKey.SHOW_DETAILS;
export type ContextMenuItems = Array<ContextMenuItem>;
const ICON_MAP: Partial<Record<ContextMenuItemKeys, AppIconSelection>> = {
[ContextMenuItemKey.ADD_TO_FAVORITES]: 'favorite',
[ContextMenuItemKey.ADD_TO_PLAYLIST]: 'playlistAdd',
[ContextMenuItemKey.DELETE_PLAYLIST]: 'playlistDelete',
[ContextMenuItemKey.DESELECT_ALL]: 'remove',
[ContextMenuItemKey.DOWNLOAD]: 'download',
[ContextMenuItemKey.GO_TO_ALBUM]: 'album',
[ContextMenuItemKey.GO_TO_ALBUM_ARTIST]: 'artist',
[ContextMenuItemKey.MOVE_TO_BOTTOM_OF_QUEUE]: 'arrowDownToLine',
[ContextMenuItemKey.MOVE_TO_NEXT_OF_QUEUE]: 'mediaPlayNext',
[ContextMenuItemKey.MOVE_TO_TOP_OF_QUEUE]: 'arrowUpToLine',
[ContextMenuItemKey.PLAY]: 'mediaPlay',
[ContextMenuItemKey.PLAY_LAST]: 'mediaPlayLast',
[ContextMenuItemKey.PLAY_NEXT]: 'mediaPlayNext',
[ContextMenuItemKey.PLAY_SHUFFLED]: 'mediaShuffle',
[ContextMenuItemKey.PLAY_SIMILAR_SONGS]: 'radio',
[ContextMenuItemKey.REMOVE_FROM_FAVORITES]: 'unfavorite',
[ContextMenuItemKey.REMOVE_FROM_PLAYLIST]: 'playlistDelete',
[ContextMenuItemKey.REMOVE_FROM_QUEUE]: 'delete',
[ContextMenuItemKey.SET_RATING]: 'star',
[ContextMenuItemKey.SHARE_ITEM]: 'share',
[ContextMenuItemKey.SHOW_DETAILS]: 'info',
};
// export const convertToContextMenuItems = (
// definitions: ContextMenuItemDefinition[],
// handlers: ContextMenuHandlers,
// ): ContextMenuItemOptions[] => {
// const items: ContextMenuItemOptions[] = [];
// for (const def of definitions) {
// if ('divider' in def && def.divider) {
// items.push({ key: 'divider' });
// continue;
// }
// if (!('key' in def)) {
// continue;
// }
// const handler = handlers[def.key];
// if (!handler) {
// continue;
// }
// const icon = ICON_MAP[def.key];
// const menuItem: ContextMenuItemOptions = {
// disabled: def.disabled,
// icon: icon ? <Icon icon={icon} /> : undefined,
// key: def.key,
// onClick: handler,
// };
// if (def.children) {
// menuItem.items = undefined;
// }
// items.push(menuItem);
// }
// // Remove trailing divider
// const lastItem = items[items.length - 1];
// if (items.length > 0 && lastItem && 'type' in lastItem && lastItem.type === 'divider') {
// items.pop();
// }
// return items;
// };
// export const QUEUE_CONTEXT_MENU_ITEMS = (): ContextMenuItemOptions[] => {
// return [
// { key: ContextMenuItemKey.REMOVE_FROM_QUEUE },
// // { key: ContextMenuItemKey.MOVE_TO_NEXT_OF_QUEUE },
// // { key: ContextMenuItemKey.MOVE_TO_BOTTOM_OF_QUEUE },
// // { key: 'divider_1' },
// // { key: ContextMenuItemKey.MOVE_TO_TOP_OF_QUEUE },
// // { key: 'divider_2' },
// // { key: ContextMenuItemKey.ADD_TO_PLAYLIST },
// // { key: ContextMenuItemKey.ADD_TO_FAVORITES },
// // { key: 'divider_3' },
// // { key: ContextMenuItemKey.REMOVE_FROM_FAVORITES },
// // { key: ContextMenuItemKey.SET_RATING },
// // { key: ContextMenuItemKey.DESELECT_ALL },
// // { key: 'divider_4' },
// // { key: ContextMenuItemKey.DOWNLOAD },
// // { key: 'divider_5' },
// // { key: ContextMenuItemKey.SHARE_ITEM },
// // { key: ContextMenuItemKey.GO_TO_ALBUM },
// // { key: ContextMenuItemKey.GO_TO_ALBUM_ARTIST },
// // { key: 'divider_6' },
// // { key: ContextMenuItemKey.SHOW_DETAILS },
// ];
// };
// export const SONG_CONTEXT_MENU_ITEMS: ContextMenuItemDefinition[] = [
// {
// children: [
// { key: ContextMenuItemKey.PLAY_LAST },
// { key: ContextMenuItemKey.PLAY_NEXT },
// { key: ContextMenuItemKey.PLAY_SHUFFLED },
// ],
// key: ContextMenuItemKey.PLAY,
// },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.PLAY_SIMILAR_SONGS },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.ADD_TO_PLAYLIST },
// { key: ContextMenuItemKey.ADD_TO_FAVORITES },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.REMOVE_FROM_FAVORITES },
// {
// children: [
// { key: ContextMenuItemKey.SET_RATING_1 },
// { key: ContextMenuItemKey.SET_RATING_2 },
// { key: ContextMenuItemKey.SET_RATING_3 },
// { key: ContextMenuItemKey.SET_RATING_4 },
// { key: ContextMenuItemKey.SET_RATING_5 },
// ],
// key: ContextMenuItemKey.SET_RATING,
// },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.DOWNLOAD },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHARE_ITEM },
// { key: ContextMenuItemKey.GO_TO_ALBUM },
// { key: ContextMenuItemKey.GO_TO_ALBUM_ARTIST },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHOW_DETAILS },
// ];
// export const SONG_ALBUM_PAGE: ContextMenuItemDefinition[] = [
// { key: ContextMenuItemKey.PLAY },
// { key: ContextMenuItemKey.PLAY_LAST },
// { key: ContextMenuItemKey.PLAY_NEXT },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.PLAY_SHUFFLED },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.ADD_TO_PLAYLIST },
// ];
// export const PLAYLIST_SONG_CONTEXT_MENU_ITEMS: ContextMenuItemDefinition[] = [
// { key: ContextMenuItemKey.PLAY },
// { key: ContextMenuItemKey.PLAY_LAST },
// { key: ContextMenuItemKey.PLAY_NEXT },
// { key: ContextMenuItemKey.PLAY_SHUFFLED },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.PLAY_SIMILAR_SONGS },
// { key: ContextMenuItemKey.ADD_TO_PLAYLIST },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.REMOVE_FROM_PLAYLIST },
// { key: ContextMenuItemKey.ADD_TO_FAVORITES },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.REMOVE_FROM_FAVORITES },
// {
// children: [
// { key: ContextMenuItemKey.SET_RATING_1 },
// { key: ContextMenuItemKey.SET_RATING_2 },
// { key: ContextMenuItemKey.SET_RATING_3 },
// { key: ContextMenuItemKey.SET_RATING_4 },
// { key: ContextMenuItemKey.SET_RATING_5 },
// ],
// key: ContextMenuItemKey.SET_RATING,
// },
// { key: ContextMenuItemKey.DOWNLOAD },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHARE_ITEM },
// { key: ContextMenuItemKey.GO_TO_ALBUM },
// { key: ContextMenuItemKey.GO_TO_ALBUM_ARTIST },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHOW_DETAILS },
// ];
// export const SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS: ContextMenuItemDefinition[] = [
// { key: ContextMenuItemKey.PLAY },
// { key: ContextMenuItemKey.PLAY_LAST },
// { key: ContextMenuItemKey.PLAY_NEXT },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.PLAY_SHUFFLED },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.PLAY_SIMILAR_SONGS },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.ADD_TO_PLAYLIST },
// { key: ContextMenuItemKey.ADD_TO_FAVORITES },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.REMOVE_FROM_FAVORITES },
// {
// children: [
// { key: ContextMenuItemKey.SET_RATING_1 },
// { key: ContextMenuItemKey.SET_RATING_2 },
// { key: ContextMenuItemKey.SET_RATING_3 },
// { key: ContextMenuItemKey.SET_RATING_4 },
// { key: ContextMenuItemKey.SET_RATING_5 },
// ],
// key: ContextMenuItemKey.SET_RATING,
// },
// { key: ContextMenuItemKey.DOWNLOAD },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHARE_ITEM },
// { key: ContextMenuItemKey.GO_TO_ALBUM },
// { key: ContextMenuItemKey.GO_TO_ALBUM_ARTIST },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHOW_DETAILS },
// ];
// export const ALBUM_CONTEXT_MENU_ITEMS: ContextMenuItemDefinition[] = [
// { key: ContextMenuItemKey.PLAY },
// { key: ContextMenuItemKey.PLAY_LAST },
// { key: ContextMenuItemKey.PLAY_NEXT },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.PLAY_SHUFFLED },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.ADD_TO_PLAYLIST },
// { key: ContextMenuItemKey.ADD_TO_FAVORITES },
// { key: ContextMenuItemKey.REMOVE_FROM_FAVORITES },
// {
// children: [
// { key: ContextMenuItemKey.SET_RATING_1 },
// { key: ContextMenuItemKey.SET_RATING_2 },
// { key: ContextMenuItemKey.SET_RATING_3 },
// { key: ContextMenuItemKey.SET_RATING_4 },
// { key: ContextMenuItemKey.SET_RATING_5 },
// ],
// key: ContextMenuItemKey.SET_RATING,
// },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHARE_ITEM },
// { key: ContextMenuItemKey.GO_TO_ALBUM_ARTIST },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHOW_DETAILS },
// ];
// export const GENRE_CONTEXT_MENU_ITEMS: ContextMenuItemDefinition[] = [
// { key: ContextMenuItemKey.PLAY },
// { key: ContextMenuItemKey.PLAY_LAST },
// { key: ContextMenuItemKey.PLAY_NEXT },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.PLAY_SHUFFLED },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.ADD_TO_PLAYLIST },
// ];
// export const ARTIST_CONTEXT_MENU_ITEMS: ContextMenuItemDefinition[] = [
// { key: ContextMenuItemKey.PLAY },
// { key: ContextMenuItemKey.PLAY_LAST },
// { key: ContextMenuItemKey.PLAY_NEXT },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.PLAY_SHUFFLED },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.ADD_TO_PLAYLIST },
// { key: ContextMenuItemKey.ADD_TO_FAVORITES },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.REMOVE_FROM_FAVORITES },
// {
// children: [
// { key: ContextMenuItemKey.SET_RATING_1 },
// { key: ContextMenuItemKey.SET_RATING_2 },
// { key: ContextMenuItemKey.SET_RATING_3 },
// { key: ContextMenuItemKey.SET_RATING_4 },
// { key: ContextMenuItemKey.SET_RATING_5 },
// ],
// key: ContextMenuItemKey.SET_RATING,
// },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHARE_ITEM },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHOW_DETAILS },
// ];
// export const PLAYLIST_CONTEXT_MENU_ITEMS: ContextMenuItemDefinition[] = [
// { key: ContextMenuItemKey.PLAY },
// { key: ContextMenuItemKey.PLAY_LAST },
// { key: ContextMenuItemKey.PLAY_NEXT },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.PLAY_SHUFFLED },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHARE_ITEM },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.DELETE_PLAYLIST },
// { key: ContextMenuItemKey.DIVIDER },
// { key: ContextMenuItemKey.SHOW_DETAILS },
// ];
@@ -1,30 +0,0 @@
import { GridOptions, RowNode } from '@ag-grid-community/core';
import { LibraryItem } from '/@/shared/types/domain-types';
import { createUseExternalEvents } from '/@/shared/utils/create-use-external-events';
export type ContextMenuEvents = {
closeContextMenu: () => void;
openContextMenu: (args: OpenContextMenuProps) => void;
};
export const CONTEXT_MENU_ITEM_MAPPING: { [k in ContextMenuItemKeys]?: string } = {
[ContextMenuItemKey.MOVE_TO_BOTTOM_OF_QUEUE]: 'moveToBottom',
[ContextMenuItemKey.MOVE_TO_TOP_OF_QUEUE]: 'moveToTop',
[ContextMenuItemKey.PLAY_LAST]: 'addLast',
[ContextMenuItemKey.PLAY_NEXT]: 'addNext',
};
export type SetContextMenuItems = {
children?: boolean;
disabled?: boolean;
divider?: boolean;
id: ContextMenuItemKeys;
onClick?: () => void;
}[];
export const [useContextMenuEvents, createEvent] =
createUseExternalEvents<ContextMenuEvents>('context-menu');
export const openContextMenu = createEvent('openContextMenu');
export const closeContextMenu = createEvent('closeContextMenu');
@@ -6,15 +6,14 @@ import { useLocation } from 'react-router';
import styles from './full-screen-player.module.css';
import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
import { FullScreenPlayerImage } from '/@/renderer/features/player/components/full-screen-player-image';
import { FullScreenPlayerQueue } from '/@/renderer/features/player/components/full-screen-player-queue';
import { useFastAverageColor } from '/@/renderer/hooks';
import {
usePlayerSong,
useFullScreenPlayerStore,
useFullScreenPlayerStoreActions,
useLyricsSettings,
usePlayerSong,
useSettingsStore,
useSettingsStoreActions,
useWindowSettings,
@@ -348,7 +347,6 @@ const Controls = ({ isPageHovered }: ControlsProps) => {
</Option.Control>
</Option>
<Divider my="sm" />
<TableConfigDropdown type="fullScreen" />
</Popover.Dropdown>
</Popover>
</Group>
@@ -1,32 +1,25 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { closeAllModals, openModal } from '@mantine/modals';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import debounce from 'lodash/debounce';
import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
import { ChangeEvent, MouseEvent, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router';
import i18n from '/@/i18n/i18n';
import { queryKeys } from '/@/renderer/api/query-keys';
import { SONG_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
import { openUpdatePlaylistModal } from '/@/renderer/features/playlists/components/update-playlist-form';
import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
import { MoreButton } from '/@/renderer/features/shared/components/more-button';
import { OrderToggleButton } from '/@/renderer/features/shared/components/order-toggle-button';
import { SearchInput } from '/@/renderer/features/shared/components/search-input';
import { useContainerQuery } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes';
import {
PersistedTableColumn,
useCurrentServer,
usePlaylistDetailStore,
useSetPlaylistDetailFilters,
useSetPlaylistDetailTable,
useSetPlaylistStore,
useSetPlaylistTablePagination,
} from '/@/renderer/store';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
@@ -242,7 +235,7 @@ const FILTERS = {
interface PlaylistDetailSongListHeaderFiltersProps {
handlePlay: (playType: Play) => void;
handleToggleShowQueryBuilder: () => void;
tableRef: MutableRefObject<AgGridReactType | null>;
tableRef: any;
}
export const PlaylistDetailSongListHeaderFilters = ({
@@ -269,107 +262,37 @@ export const PlaylistDetailSongListHeaderFilters = ({
const cq = useContainerQuery();
const setPagination = useSetPlaylistTablePagination();
const setTable = useSetPlaylistDetailTable();
const sortByLabel =
(server?.type &&
FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === sortBy)?.name) ||
'Unknown';
const handleItemSize = (e: number) => {
setTable({ rowHeight: e });
};
const debouncedHandleItemSize = debounce(handleItemSize, 20);
const handleFilterChange = useCallback(async () => {
tableRef.current?.api.redrawRows();
tableRef.current?.api.ensureIndexVisible(0, 'top');
if (page.display === ListDisplayType.TABLE_PAGINATED) {
setPagination({ data: { currentPage: 0 } });
}
}, [tableRef, page.display, setPagination]);
// tableRef.current?.api.redrawRows();
// tableRef.current?.api.ensureIndexVisible(0, 'top');
// if (page.display === ListDisplayType.TABLE) {
// setPagination({ data: { currentPage: 0 } });
// }
}, []);
const handleRefresh = () => {
queryClient.invalidateQueries({
queryKey: queryKeys.playlists.songList(server?.id || '', playlistId),
});
handleFilterChange();
};
const handleSetSortBy = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value || !server?.type) return;
const handleSetSortBy = useCallback((e: MouseEvent<HTMLButtonElement>) => {}, []);
const newSortOrder = FILTERS[server.type as keyof typeof FILTERS].find(
(f) => f.value === e.currentTarget.value,
)?.defaultOrder;
const handleToggleSortOrder = useCallback(() => {}, [
sortOrder,
handleFilterChange,
playlistId,
setFilter,
]);
setFilter(playlistId, {
sortBy: e.currentTarget.value as SongListSort,
sortOrder: newSortOrder || SortOrder.ASC,
});
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {}, 500);
handleFilterChange();
},
[handleFilterChange, playlistId, server?.type, setFilter],
);
const handleToggleSortOrder = useCallback(() => {
const newSortOrder = sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
setFilter(playlistId, { sortOrder: newSortOrder });
handleFilterChange();
}, [sortOrder, handleFilterChange, playlistId, setFilter]);
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
setFilter(playlistId, { searchTerm: e.target.value });
handleFilterChange();
}, 500);
const handleSetViewType = useCallback(
(displayType: ListDisplayType) => {
setPage({ detail: { ...page, display: displayType } });
},
[page, setPage],
);
const handleTableColumns = (values: string[]) => {
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,
} as PersistedTableColumn;
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 = (autoFitColumns: boolean) => {
setTable({ autoFit: autoFitColumns });
if (autoFitColumns) {
tableRef.current?.api.sizeColumnsToFit();
}
};
const handleSetViewType = useCallback((displayType: ListDisplayType) => {}, [page, setPage]);
const deletePlaylistMutation = useDeletePlaylist({});
@@ -501,20 +424,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
</DropdownMenu>
<SearchInput defaultValue={searchTerm} onChange={handleSearch} />
</Group>
<Group>
<ListConfigMenu
autoFitColumns={page.table.autoFit}
disabledViewTypes={[ListDisplayType.GRID, ListDisplayType.LIST]}
displayType={page.display}
itemSize={page.table.rowHeight}
onChangeAutoFitColumns={handleAutoFitColumns}
onChangeDisplayType={handleSetViewType}
onChangeItemSize={debouncedHandleItemSize}
onChangeTableColumns={handleTableColumns}
tableColumns={page.table.columns.map((column) => column.column)}
tableColumnsData={SONG_TABLE_COLUMNS}
/>
</Group>
<Group></Group>
</Flex>
);
};
@@ -1,7 +1,7 @@
import { closeAllModals, openModal } from '@mantine/modals';
import { useTranslation } from 'react-i18next';
import { PLAYLIST_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
import { PLAYLIST_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
import { ListFilters } from '/@/renderer/features/shared/components/list-filters';
@@ -3,9 +3,12 @@ import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath, Link, useParams, useSearchParams } from 'react-router';
import { ALBUM_ARTIST_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
import {
ALBUM_ARTIST_TABLE_COLUMNS,
ALBUM_TABLE_COLUMNS,
SONG_TABLE_COLUMNS,
} from '/@/renderer/components/item-list/item-table-list/default-columns';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
import { ALBUM_TABLE_COLUMNS, SONG_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
@@ -111,6 +111,7 @@ const PlaylistRowButton = ({ name, onPlay, to, ...props }: PlaylistRowButtonProp
openContextModal({
innerProps: modalProps,
modal: 'addToPlaylist',
size: 'lg',
title: t('form.addToPlaylist.title', { postProcess: 'titleCase' }),
});
},
@@ -1,16 +1,13 @@
import { RowDoubleClickedEvent } from '@ag-grid-community/core';
import { AgGridReact } from '@ag-grid-community/react';
import { useQuery } from '@tanstack/react-query';
import { useMemo, useRef } from 'react';
import { useRef } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table';
import { ErrorFallback } from '/@/renderer/features/action-required/components/error-fallback';
import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
import { usePlayButtonBehavior, useTableSettings } from '/@/renderer/store';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { LibraryItem, Song } from '/@/shared/types/domain-types';
import { Song } from '/@/shared/types/domain-types';
export type SimilarSongsListProps = {
count?: number;
@@ -56,26 +53,6 @@ export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListPr
return songQuery.isLoading ? (
<Spinner container size={25} />
) : (
<ErrorBoundary FallbackComponent={ErrorFallback}>
{/* <VirtualTable
autoFitColumns={tableConfig.autoFit}
columnDefs={columnDefs}
context={{
count,
itemType: LibraryItem.SONG,
onCellContextMenu,
song,
}}
deselectOnClickOutside={fullScreen}
getRowId={(data) => data.data.uniqueId}
onCellContextMenu={onCellContextMenu}
onCellDoubleClicked={handleRowDoubleClick}
ref={tableRef}
rowBuffer={50}
rowData={songQuery.data ?? []}
rowHeight={tableConfig.rowHeight || 40}
shouldUpdateSong
/> */}
</ErrorBoundary>
<ErrorBoundary FallbackComponent={ErrorFallback}></ErrorBoundary>
);
};