diff --git a/src/renderer/features/now-playing/components/play-queue.tsx b/src/renderer/features/now-playing/components/play-queue.tsx index 17f6b548d..4598b2cc0 100644 --- a/src/renderer/features/now-playing/components/play-queue.tsx +++ b/src/renderer/features/now-playing/components/play-queue.tsx @@ -5,12 +5,18 @@ import { forwardRef, useEffect, useMemo, useRef } from 'react'; import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list'; import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column'; -import { useIsPlayerFetching } from '/@/renderer/features/player/context/player-context'; +import { + useIsPlayerFetching, + usePlayerContext, +} from '/@/renderer/features/player/context/player-context'; +import { useDragDrop } from '/@/renderer/hooks/use-drag-drop'; import { useListSettings, usePlayerQueue } from '/@/renderer/store'; import { searchSongs } from '/@/renderer/utils/search-songs'; +import { Flex } from '/@/shared/components/flex/flex'; import { LoadingOverlay } from '/@/shared/components/loading-overlay/loading-overlay'; -import { LibraryItem, QueueSong } from '/@/shared/types/domain-types'; -import { ItemListKey } from '/@/shared/types/types'; +import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types'; +import { DragTarget } from '/@/shared/types/drag-and-drop'; +import { ItemListKey, Play } from '/@/shared/types/types'; type QueueProps = { listKey: ItemListKey; @@ -60,9 +66,11 @@ export const PlayQueue = forwardRef(({ listKey, searchTerm }: QueueProps, ref: R } }, [data.length, playQueueKeyRef]); + const isEmpty = data.length === 0; + return ( <> - + + {isEmpty && } ); }); + +const EmptyQueueDropZone = () => { + const playerContext = usePlayerContext(); + + const { isDraggedOver, ref } = useDragDrop({ + drop: { + canDrop: () => { + return true; + }, + getData: () => { + return { + id: [], + item: [], + itemType: LibraryItem.QUEUE_SONG, + type: DragTarget.QUEUE_SONG, + }; + }, + onDrag: () => { + return; + }, + onDragLeave: () => { + return; + }, + onDrop: (args) => { + if (args.self.type === DragTarget.QUEUE_SONG) { + const sourceServerId = ( + args.source.item?.[0] as unknown as { _serverId: string } + )?._serverId; + + const sourceItemType = args.source.itemType as LibraryItem; + + switch (args.source.type) { + case DragTarget.ALBUM: { + if (sourceServerId) { + playerContext.addToQueueByFetch( + sourceServerId, + args.source.id, + sourceItemType, + Play.NOW, + ); + } + break; + } + case DragTarget.ALBUM_ARTIST: { + if (sourceServerId) { + playerContext.addToQueueByFetch( + sourceServerId, + args.source.id, + sourceItemType, + Play.NOW, + ); + } + break; + } + case DragTarget.ARTIST: { + if (sourceServerId) { + playerContext.addToQueueByFetch( + sourceServerId, + args.source.id, + sourceItemType, + Play.NOW, + ); + } + break; + } + case DragTarget.GENRE: { + if (sourceServerId) { + playerContext.addToQueueByFetch( + sourceServerId, + args.source.id, + sourceItemType, + Play.NOW, + ); + } + break; + } + case DragTarget.PLAYLIST: { + if (sourceServerId) { + playerContext.addToQueueByFetch( + sourceServerId, + args.source.id, + sourceItemType, + Play.NOW, + ); + } + break; + } + case DragTarget.QUEUE_SONG: { + const sourceItems = (args.source.item || []) as QueueSong[]; + if (sourceItems.length > 0) { + playerContext.addToQueueByData(sourceItems, Play.NOW); + } + break; + } + case DragTarget.SONG: { + const sourceItems = (args.source.item || []) as Song[]; + if (sourceItems.length > 0) { + playerContext.addToQueueByData(sourceItems, Play.NOW); + } + break; + } + default: { + break; + } + } + } + + return; + }, + }, + isEnabled: true, + }); + + return ( + + ); +};