master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dnd): ensure drop detects payload; set text/plain fallback; refresh playlist structure after add

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-08 13:11:40 +02:00
parent 597c8f994f
commit c7dd2e6d33
3 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/App.tsx
View File

@ -272,6 +272,7 @@ const RekordboxReader: React.FC = () => {
return null; return null;
}; };
const target = findNode(playlists); const target = findNode(playlists);
if (!target) return;
const existing = new Set(target?.tracks || []); const existing = new Set(target?.tracks || []);
const dupes = songIds.filter(id => existing.has(id)); const dupes = songIds.filter(id => existing.has(id));
@ -285,6 +286,11 @@ const RekordboxReader: React.FC = () => {
const finalIds = proceedMode === 'skip' ? songIds.filter(id => !existing.has(id)) : songIds; const finalIds = proceedMode === 'skip' ? songIds.filter(id => !existing.has(id)) : songIds;
if (finalIds.length === 0) return; if (finalIds.length === 0) return;
await handleAddSongsToPlaylist(finalIds, playlistName); await handleAddSongsToPlaylist(finalIds, playlistName);
// If we were on that playlist, refresh counters by reloading structure
try {
const updated = await api.getPlaylistStructure();
setPlaylists(updated);
} catch {}
}; };
const handleRemoveFromPlaylist = async (songIds: string[]) => { const handleRemoveFromPlaylist = async (songIds: string[]) => {

1
packages/frontend/src/components/PaginatedSongList.tsx
View File

@ -241,6 +241,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
setIsDragging(true); setIsDragging(true);
const payload = { type: 'songs', songIds: ids, count: ids.length }; const payload = { type: 'songs', songIds: ids, count: ids.length };
e.dataTransfer.setData('application/json', JSON.stringify(payload)); e.dataTransfer.setData('application/json', JSON.stringify(payload));
e.dataTransfer.setData('text/plain', JSON.stringify(payload));
e.dataTransfer.effectAllowed = 'copyMove'; e.dataTransfer.effectAllowed = 'copyMove';
}, [selectedSongs]); }, [selectedSongs]);

16
packages/frontend/src/components/PlaylistManager.tsx
View File

@ -143,7 +143,12 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
} }
onDragOver={(e) => { onDragOver={(e) => {
e.preventDefault(); e.preventDefault();
setIsDragOver(true); // Only highlight if payload looks like songs
const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain');
try {
const parsed = JSON.parse(json);
if (parsed?.type === 'songs') setIsDragOver(true);
} catch {}
}} }}
onDragLeave={() => setIsDragOver(false)} onDragLeave={() => setIsDragOver(false)}
onDrop={(e) => { onDrop={(e) => {
@ -217,7 +222,14 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
borderRight="1px solid" borderRight="1px solid"
borderRightColor="whiteAlpha.200" borderRightColor="whiteAlpha.200"
position="relative" position="relative"
onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }} onDragOver={(e) => {
e.preventDefault();
const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain');
try {
const parsed = JSON.parse(json);
if (parsed?.type === 'songs') setIsDragOver(true);
} catch {}
}}
onDragLeave={() => setIsDragOver(false)} onDragLeave={() => setIsDragOver(false)}
onDrop={(e) => { onDrop={(e) => {
try { try {