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

fix(dnd): robust drop parsing with window fallback; keep previous sidebar border look; add global payload for reliability

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-08 13:27:46 +02:00
parent 8394f4b42f
commit 5a6710b0eb
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -224,9 +224,8 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
borderRight="1px solid" borderRight="1px solid"
borderRightColor="whiteAlpha.200" borderRightColor="whiteAlpha.200"
position="relative" position="relative"
border="1px solid" border={selectedItem === node.name ? '1px solid' : undefined}
borderColor={selectedItem === node.name ? 'blue.800' : 'transparent'} borderColor={selectedItem === node.name ? 'blue.800' : undefined}
_hover={{ ...(selectedItem === node.name ? {} : { borderColor: 'whiteAlpha.300' }) }}
onDragOver={(e) => { onDragOver={(e) => {
e.preventDefault(); e.preventDefault();
const types = Array.from((e.dataTransfer.types || []) as any); const types = Array.from((e.dataTransfer.types || []) as any);
@ -239,8 +238,14 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
onDragLeave={() => setIsDragOver(false)} onDragLeave={() => setIsDragOver(false)}
onDrop={(e) => { onDrop={(e) => {
try { try {
const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain'); let json = e.dataTransfer.getData('application/json');
const parsed = json ? JSON.parse(json) : null; if (!json) json = e.dataTransfer.getData('text/plain');
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;
}
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);
} }