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

fix(dnd): avoid parsing during dragover; only inspect types; parse on drop with guards and log raw length

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-08 13:24:13 +02:00
parent b534485bde
commit 4e123d2597
1 changed files with 14 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -143,27 +143,22 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
} }
onDragOver={(e) => { onDragOver={(e) => {
e.preventDefault(); e.preventDefault();
// Only highlight if payload looks like songs const types = Array.from((e.dataTransfer.types || []) as any);
const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain'); const hasOurType = types.includes('application/json') || types.includes('text/plain');
try { if (hasOurType) {
const parsed = JSON.parse(json);
if (parsed?.type === 'songs') {
setIsDragOver(true); setIsDragOver(true);
} }
console.debug('[DnD] dragover folder', node.name, parsed); console.debug('[DnD] dragover folder types', node.name, types);
} catch (err) {
console.debug('[DnD] dragover folder parse failed', node.name, err);
}
}} }}
onDragLeave={() => setIsDragOver(false)} onDragLeave={() => setIsDragOver(false)}
onDrop={(e) => { onDrop={(e) => {
try { try {
const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain'); const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain');
const parsed = JSON.parse(json); const parsed = json ? JSON.parse(json) : null;
if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) { if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
onDropSongs(node.name, parsed.songIds); onDropSongs(node.name, parsed.songIds);
} }
console.debug('[DnD] drop folder', node.name, parsed); console.debug('[DnD] drop folder', node.name, parsed, 'raw len', json?.length || 0);
} catch (err) { } catch (err) {
console.debug('[DnD] drop folder parse failed', node.name, err); console.debug('[DnD] drop folder parse failed', node.name, err);
} }
@ -232,26 +227,22 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
position="relative" position="relative"
onDragOver={(e) => { onDragOver={(e) => {
e.preventDefault(); e.preventDefault();
const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain'); const types = Array.from((e.dataTransfer.types || []) as any);
try { const hasOurType = types.includes('application/json') || types.includes('text/plain');
const parsed = JSON.parse(json); if (hasOurType) {
if (parsed?.type === 'songs') {
setIsDragOver(true); setIsDragOver(true);
} }
console.debug('[DnD] dragover playlist', node.name, parsed); console.debug('[DnD] dragover playlist types', node.name, types);
} catch (err) {
console.debug('[DnD] dragover playlist parse failed', node.name, err);
}
}} }}
onDragLeave={() => setIsDragOver(false)} onDragLeave={() => setIsDragOver(false)}
onDrop={(e) => { onDrop={(e) => {
try { try {
const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain'); const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain');
const parsed = JSON.parse(json); const parsed = json ? JSON.parse(json) : null;
if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) { if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
onDropSongs(node.name, parsed.songIds); onDropSongs(node.name, parsed.songIds);
} }
console.debug('[DnD] drop playlist', node.name, parsed); console.debug('[DnD] drop playlist', node.name, parsed, 'raw len', json?.length || 0);
} catch (err) { } catch (err) {
console.debug('[DnD] drop playlist parse failed', node.name, err); console.debug('[DnD] drop playlist parse failed', node.name, err);
} }