mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-16 05:36:00 +02:00
various cleanup
This commit is contained in:
@@ -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>
|
||||
|
||||
+18
-108
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user