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

chore(dnd): remove debug logs and globals; keep clean drag/drop with proper handlers and UX; no functional changes

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-08 13:52:32 +02:00
parent e622219e12
commit 91fd5077d4
3 changed files with 5 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -250,9 +250,7 @@ const RekordboxReader: React.FC = () => {
};
const updatedFullTree = applyAdd(fullTree);
console.debug('[DnD] saving playlists with added tracks', { playlistName, addCount: songIds.length });
await api.savePlaylists(updatedFullTree);
console.debug('[DnD] playlists saved');
// Reload structure for UI counters
const structure = await api.getPlaylistStructure();
@ -261,7 +259,6 @@ const RekordboxReader: React.FC = () => {
// Handle drop from song list into playlist (with duplicate check and user choice)
const handleDropSongsToPlaylist = async (playlistName: string, songIds: string[]) => {
console.debug('[DnD] App received drop', { playlistName, count: songIds?.length, songIds });
// Find target playlist current tracks
const findNode = (nodes: PlaylistNode[]): PlaylistNode | null => {
for (const n of nodes) {
@ -274,10 +271,7 @@ const RekordboxReader: React.FC = () => {
return null;
};
const target = findNode(playlists);
if (!target) {
console.debug('[DnD] target playlist not found', playlistName);
return;
}
if (!target) return;
const existing = new Set(target?.tracks || []);
const dupes = songIds.filter(id => existing.has(id));
@ -289,12 +283,8 @@ const RekordboxReader: React.FC = () => {
}
const finalIds = proceedMode === 'skip' ? songIds.filter(id => !existing.has(id)) : songIds;
if (finalIds.length === 0) {
console.debug('[DnD] nothing to add after duplicate filter');
return;
}
if (finalIds.length === 0) return;
await handleAddSongsToPlaylist(finalIds, playlistName);
console.debug('[DnD] add completed');
toast({
title: 'Songs Added',
description: `${finalIds.length} song${finalIds.length === 1 ? '' : 's'} added to "${playlistName}"`,

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

@ -243,18 +243,11 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
e.dataTransfer.setData('application/json', JSON.stringify(payload));
e.dataTransfer.setData('text/plain', JSON.stringify(payload));
e.dataTransfer.effectAllowed = 'copyMove';
try {
(window as any).__rbDragPayload = payload;
} catch {}
try {
console.debug('[DnD] dragstart payload', payload);
} catch {}
}, [selectedSongs]);
const handleDragEnd = useCallback(() => {
setIsDragging(false);
dragSelectionRef.current = null;
try { (window as any).__rbDragPayload = null; } catch {}
}, []);
// Memoized song items to prevent unnecessary re-renders

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

@ -150,7 +150,6 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
try { e.dataTransfer.dropEffect = 'copy'; } catch {}
setIsDragOver(true);
}
console.debug('[DnD] dragover folder types', node.name, types);
}}
onDragLeave={() => setIsDragOver(false)}
onDrop={(e) => {
@ -162,10 +161,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
onDropSongs(node.name, parsed.songIds);
}
console.debug('[DnD] drop folder', node.name, parsed, 'raw len', json?.length || 0);
} catch (err) {
console.debug('[DnD] drop folder parse failed', node.name, err);
}
} catch {}
setIsDragOver(false);
}}
boxShadow={isDragOver ? 'inset 0 0 0 1px var(--chakra-colors-blue-400)' : 'none'}
@ -240,7 +236,6 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
try { e.dataTransfer.dropEffect = 'copy'; } catch {}
setIsDragOver(true);
}
console.debug('[DnD] dragover playlist types', node.name, types);
}}
onDragLeave={() => setIsDragOver(false)}
onDrop={(e) => {
@ -252,25 +247,11 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
let parsed: any = null;
if (json && json.trim().length > 0) {
parsed = JSON.parse(json);
} else if ((window as any).__rbDragPayload) {
parsed = (window as any).__rbDragPayload;
}
console.debug('[DnD] drop playlist handler presence', node.name, Boolean(onDropSongs));
if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
console.debug('[DnD] invoking onDropSongs', node.name, parsed.songIds.length);
onDropSongs(node.name, parsed.songIds);
} else {
console.debug('[DnD] drop playlist no action', node.name, {
hasParsed: Boolean(parsed),
type: parsed?.type,
isArray: Array.isArray(parsed?.songIds),
hasHandler: Boolean(onDropSongs)
});
}
console.debug('[DnD] drop playlist', node.name, parsed, 'raw len', json?.length || 0);
} catch (err) {
console.debug('[DnD] drop playlist parse failed', node.name, err);
}
} catch {}
setIsDragOver(false);
}}
boxShadow={isDragOver ? 'inset 0 0 0 1px var(--chakra-colors-blue-400)' : 'none'}
@ -366,6 +347,7 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
onPlaylistDelete,
onFolderCreate,
onPlaylistMove,
onDropSongs,
}) => {
const { isOpen: isPlaylistModalOpen, onOpen: onPlaylistModalOpen, onClose: onPlaylistModalClose } = useDisclosure();
const { isOpen: isFolderModalOpen, onOpen: onFolderModalOpen, onClose: onFolderModalClose } = useDisclosure();