Compare commits
No commits in common. "febfb638b9a5ad47af8210b7114634464e5c4b1e" and "a7ccadc8ac4db29a2a9eb2bb22962bc6b17ed90b" have entirely different histories.
febfb638b9
...
a7ccadc8ac
26
package-lock.json
generated
26
package-lock.json
generated
@ -3569,31 +3569,6 @@
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-virtual": {
|
||||
"version": "3.13.12",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
|
||||
"integrity": "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==",
|
||||
"dependencies": {
|
||||
"@tanstack/virtual-core": "3.13.12"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/virtual-core": {
|
||||
"version": "3.13.12",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
|
||||
"integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tokenizer/token": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz",
|
||||
@ -8043,7 +8018,6 @@
|
||||
"@chakra-ui/transition": "^2.1.0",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@tanstack/react-virtual": "^3.13.12",
|
||||
"@types/uuid": "^10.0.0",
|
||||
"events": "^3.3.0",
|
||||
"framer-motion": "^12.5.0",
|
||||
|
||||
@ -19,7 +19,6 @@
|
||||
"@chakra-ui/transition": "^2.1.0",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@tanstack/react-virtual": "^3.13.12",
|
||||
"@types/uuid": "^10.0.0",
|
||||
"events": "^3.3.0",
|
||||
"framer-motion": "^12.5.0",
|
||||
|
||||
@ -130,8 +130,7 @@ const RekordboxReader: React.FC = () => {
|
||||
loadNextPage,
|
||||
searchSongs,
|
||||
searchQuery,
|
||||
refresh,
|
||||
switchPlaylistImmediately
|
||||
refresh
|
||||
} = usePaginatedSongs({ pageSize: 100, playlistName: currentPlaylist });
|
||||
|
||||
// Export library to XML
|
||||
@ -210,10 +209,6 @@ const RekordboxReader: React.FC = () => {
|
||||
// Clear selected song immediately to prevent stale state
|
||||
setSelectedSong(null);
|
||||
|
||||
// Kick off data load immediately to avoid delay before backend call
|
||||
const target = name || "All Songs";
|
||||
switchPlaylistImmediately(target);
|
||||
|
||||
// Navigate immediately without any delays
|
||||
if (name === "All Songs") {
|
||||
navigate("/", { replace: true });
|
||||
@ -310,7 +305,8 @@ const RekordboxReader: React.FC = () => {
|
||||
return nodes.map(node => {
|
||||
if (node.type === 'playlist' && node.name === currentPlaylist) {
|
||||
const remainingTracks = (node.tracks || []).filter(id => !songIds.includes(id));
|
||||
return { ...node, tracks: remainingTracks } as PlaylistNode;
|
||||
const remainingOrder = (node.order || []).filter(id => !songIds.includes(id));
|
||||
return { ...node, tracks: remainingTracks, order: remainingOrder } as PlaylistNode;
|
||||
}
|
||||
if (node.type === 'folder' && node.children) {
|
||||
return { ...node, children: applyRemove(node.children) } as PlaylistNode;
|
||||
@ -587,14 +583,6 @@ const RekordboxReader: React.FC = () => {
|
||||
borderColor="gray.700"
|
||||
overflowY="auto"
|
||||
bg="gray.900"
|
||||
sx={{
|
||||
scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
|
||||
scrollbarWidth: 'thin',
|
||||
'&::-webkit-scrollbar': { width: '8px', backgroundColor: 'var(--chakra-colors-gray-900)' },
|
||||
'&::-webkit-scrollbar-thumb': { backgroundColor: 'var(--chakra-colors-gray-700)', borderRadius: '8px' },
|
||||
'&::-webkit-scrollbar-thumb:hover': { backgroundColor: 'var(--chakra-colors-gray-600)' },
|
||||
'&::-webkit-scrollbar-track': { backgroundColor: 'var(--chakra-colors-gray-900)' }
|
||||
}}
|
||||
>
|
||||
{playlistManager}
|
||||
<ResizeHandle onMouseDown={handleResizeStart} />
|
||||
@ -629,14 +617,7 @@ const RekordboxReader: React.FC = () => {
|
||||
_hover={{ color: "blue.300", bg: "whiteAlpha.200" }}
|
||||
/>
|
||||
</DrawerHeader>
|
||||
<DrawerBody p={2} sx={{
|
||||
scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
|
||||
scrollbarWidth: 'thin',
|
||||
'&::-webkit-scrollbar': { width: '8px', backgroundColor: 'var(--chakra-colors-gray-900)' },
|
||||
'&::-webkit-scrollbar-thumb': { backgroundColor: 'var(--chakra-colors-gray-700)', borderRadius: '8px' },
|
||||
'&::-webkit-scrollbar-thumb:hover': { backgroundColor: 'var(--chakra-colors-gray-600)' },
|
||||
'&::-webkit-scrollbar-track': { backgroundColor: 'var(--chakra-colors-gray-900)' }
|
||||
}}>
|
||||
<DrawerBody p={2}>
|
||||
{playlistManager}
|
||||
</DrawerBody>
|
||||
</DrawerContent>
|
||||
@ -651,14 +632,7 @@ const RekordboxReader: React.FC = () => {
|
||||
overflow="hidden"
|
||||
>
|
||||
{/* Song List */}
|
||||
<Box flex={1} overflowY="auto" minH={0} sx={{
|
||||
scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
|
||||
scrollbarWidth: 'thin',
|
||||
'&::-webkit-scrollbar': { width: '8px', backgroundColor: 'var(--chakra-colors-gray-900)' },
|
||||
'&::-webkit-scrollbar-thumb': { backgroundColor: 'var(--chakra-colors-gray-700)', borderRadius: '8px' },
|
||||
'&::-webkit-scrollbar-thumb:hover': { backgroundColor: 'var(--chakra-colors-gray-600)' },
|
||||
'&::-webkit-scrollbar-track': { backgroundColor: 'var(--chakra-colors-gray-900)' }
|
||||
}}>
|
||||
<Box flex={1} overflowY="auto" minH={0}>
|
||||
<PaginatedSongList
|
||||
songs={songs}
|
||||
onAddToPlaylist={handleAddSongsToPlaylist}
|
||||
@ -698,12 +672,15 @@ const RekordboxReader: React.FC = () => {
|
||||
bg="gray.900"
|
||||
minH={0}
|
||||
sx={{
|
||||
scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
|
||||
scrollbarWidth: 'thin',
|
||||
'&::-webkit-scrollbar': { width: '8px', backgroundColor: 'var(--chakra-colors-gray-900)' },
|
||||
'&::-webkit-scrollbar-thumb': { backgroundColor: 'var(--chakra-colors-gray-700)', borderRadius: '8px' },
|
||||
'&::-webkit-scrollbar-thumb:hover': { backgroundColor: 'var(--chakra-colors-gray-600)' },
|
||||
'&::-webkit-scrollbar-track': { backgroundColor: 'var(--chakra-colors-gray-900)' },
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '8px',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: 'gray.900',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
backgroundColor: 'gray.700',
|
||||
borderRadius: '8px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SongDetails song={selectedSong} />
|
||||
|
||||
@ -8,6 +8,7 @@ import {
|
||||
VStack,
|
||||
HStack,
|
||||
Badge,
|
||||
IconButton,
|
||||
useDisclosure,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
@ -23,6 +24,7 @@ import {
|
||||
Td,
|
||||
Spinner,
|
||||
} from '@chakra-ui/react';
|
||||
import { CloseIcon } from '@chakra-ui/icons';
|
||||
import { api } from '../services/api';
|
||||
|
||||
interface JobProgress {
|
||||
@ -53,7 +55,7 @@ export const BackgroundJobProgress: React.FC<BackgroundJobProgressProps> = ({
|
||||
const [jobs, setJobs] = useState<JobProgress[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { isOpen, onClose } = useDisclosure();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Load all jobs
|
||||
@ -178,7 +180,7 @@ export const BackgroundJobProgress: React.FC<BackgroundJobProgressProps> = ({
|
||||
};
|
||||
|
||||
const activeJobs = jobs.filter(job => job.status === 'running');
|
||||
// const completedJobs = jobs.filter(job => job.status === 'completed' || job.status === 'failed');
|
||||
const completedJobs = jobs.filter(job => job.status === 'completed' || job.status === 'failed');
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useRef, useEffect, useCallback, useMemo, memo, startTransition } from 'react';
|
||||
import React, { useState, useRef, useEffect, useCallback, useMemo, memo } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
@ -20,8 +20,6 @@ import { api } from '../services/api';
|
||||
import { formatDuration, formatTotalDuration } from '../utils/formatters';
|
||||
import { useDebounce } from '../hooks/useDebounce';
|
||||
import { PlaylistSelectionModal } from './PlaylistSelectionModal';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import type { VirtualItem } from '@tanstack/react-virtual';
|
||||
|
||||
interface PaginatedSongListProps {
|
||||
songs: Song[];
|
||||
@ -53,34 +51,21 @@ const SongItem = memo<{
|
||||
onToggleSelection: (songId: string) => void;
|
||||
showCheckbox: boolean;
|
||||
onPlaySong?: (song: Song) => void;
|
||||
showDropIndicatorTop?: boolean;
|
||||
onDragStart?: (e: React.DragEvent, songIdsFallback: string[]) => void;
|
||||
onDragStart: (e: React.DragEvent, songIdsFallback: string[]) => void;
|
||||
onRowDragOver?: (e: React.DragEvent) => void;
|
||||
onRowDrop?: (e: React.DragEvent) => void;
|
||||
onRowDragStartCapture?: (e: React.DragEvent) => void;
|
||||
index: number;
|
||||
onCheckboxToggle?: (index: number, checked: boolean, shift: boolean) => void;
|
||||
}>(({ song, isSelected, isHighlighted, onSelect, onToggleSelection, showCheckbox, onPlaySong, showDropIndicatorTop, onDragStart, onRowDragOver, onRowDrop, onRowDragStartCapture, index, onCheckboxToggle }) => {
|
||||
}>(({ song, isSelected, isHighlighted, onSelect, onToggleSelection, showCheckbox, onPlaySong, onDragStart, onRowDragOver, onRowDrop, onRowDragStartCapture }) => {
|
||||
// Memoize the formatted duration to prevent recalculation
|
||||
const formattedDuration = useMemo(() => formatDuration(song.totalTime || ''), [song.totalTime]);
|
||||
// Local optimistic selection for instant visual feedback
|
||||
const [localChecked, setLocalChecked] = useState<boolean>(isSelected);
|
||||
useEffect(() => {
|
||||
setLocalChecked(isSelected);
|
||||
}, [isSelected]);
|
||||
const handleClick = useCallback(() => {
|
||||
onSelect(song);
|
||||
}, [onSelect, song]);
|
||||
|
||||
const handleCheckboxClick = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
e.stopPropagation();
|
||||
setLocalChecked(e.target.checked);
|
||||
if (onCheckboxToggle) {
|
||||
onCheckboxToggle(index, e.target.checked, (e as any).nativeEvent?.shiftKey === true || (e as any).shiftKey === true);
|
||||
} else {
|
||||
onToggleSelection(song.id);
|
||||
}
|
||||
}, [onCheckboxToggle, index, onToggleSelection, song.id]);
|
||||
onToggleSelection(song.id);
|
||||
}, [onToggleSelection, song.id]);
|
||||
|
||||
const handlePlayClick = useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
@ -104,18 +89,17 @@ const SongItem = memo<{
|
||||
_hover={{ bg: isHighlighted ? "blue.800" : "gray.700" }}
|
||||
onClick={handleClick}
|
||||
transition="background-color 0.2s"
|
||||
{...(onDragStart ? { draggable: true, onDragStart: (e: React.DragEvent) => onDragStart(e, [song.id]) } : {})}
|
||||
{...(onRowDragOver ? { onDragOver: onRowDragOver } : {})}
|
||||
{...(onRowDrop ? { onDrop: onRowDrop } : {})}
|
||||
{...(onRowDragStartCapture ? { onDragStartCapture: onRowDragStartCapture } : {})}
|
||||
position="relative"
|
||||
draggable
|
||||
onDragStart={(e) => {
|
||||
onDragStart(e, [song.id]);
|
||||
}}
|
||||
onDragOver={onRowDragOver}
|
||||
onDrop={onRowDrop}
|
||||
onDragStartCapture={onRowDragStartCapture}
|
||||
>
|
||||
{showDropIndicatorTop && (
|
||||
<Box position="absolute" top={0} left={0} right={0} height="2px" bg="blue.400" zIndex={1} />
|
||||
)}
|
||||
{showCheckbox && (
|
||||
<Checkbox
|
||||
isChecked={localChecked}
|
||||
isChecked={isSelected}
|
||||
onChange={handleCheckboxClick}
|
||||
mr={3}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
@ -188,7 +172,6 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
|
||||
const [dragHoverIndex, setDragHoverIndex] = useState<number | null>(null);
|
||||
const [endDropHover, setEndDropHover] = useState<boolean>(false);
|
||||
const [isReorderDragging, setIsReorderDragging] = useState<boolean>(false);
|
||||
const lastSelectedIndexRef = useRef<number | null>(null);
|
||||
|
||||
// Store current values in refs to avoid stale closures
|
||||
const hasMoreRef = useRef(hasMore);
|
||||
@ -224,60 +207,31 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
|
||||
// const allPlaylists = useMemo(() => getAllPlaylists(playlists), [playlists, getAllPlaylists]);
|
||||
|
||||
const toggleSelection = useCallback((songId: string) => {
|
||||
startTransition(() => {
|
||||
setSelectedSongs(prev => {
|
||||
const newSelection = new Set(prev);
|
||||
if (newSelection.has(songId)) {
|
||||
newSelection.delete(songId);
|
||||
} else {
|
||||
newSelection.add(songId);
|
||||
}
|
||||
return newSelection;
|
||||
});
|
||||
setSelectedSongs(prev => {
|
||||
const newSelection = new Set(prev);
|
||||
if (newSelection.has(songId)) {
|
||||
newSelection.delete(songId);
|
||||
} else {
|
||||
newSelection.add(songId);
|
||||
}
|
||||
return newSelection;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Range selection using shift-click between last selected and current
|
||||
const toggleSelectionRange = useCallback((fromIndex: number, toIndex: number, checked: boolean) => {
|
||||
if (fromIndex === null || toIndex === null) return;
|
||||
const [start, end] = fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
|
||||
startTransition(() => {
|
||||
setSelectedSongs(prev => {
|
||||
const next = new Set(prev);
|
||||
for (let i = start; i <= end; i++) {
|
||||
const id = songs[i]?.id;
|
||||
if (!id) continue;
|
||||
if (checked) next.add(id); else next.delete(id);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
});
|
||||
}, [songs]);
|
||||
|
||||
const handleCheckboxToggle = useCallback((index: number, checked: boolean, shift: boolean) => {
|
||||
const song = songs[index];
|
||||
if (!song) return;
|
||||
if (shift && lastSelectedIndexRef.current !== null) {
|
||||
toggleSelectionRange(lastSelectedIndexRef.current, index, checked);
|
||||
} else {
|
||||
toggleSelection(song.id);
|
||||
}
|
||||
lastSelectedIndexRef.current = index;
|
||||
}, [songs, toggleSelection, toggleSelectionRange]);
|
||||
|
||||
const toggleSelectAll = useCallback(() => {
|
||||
startTransition(() => {
|
||||
setSelectedSongs(prev => {
|
||||
const noneSelected = prev.size === 0;
|
||||
const allSelected = prev.size === songs.length && songs.length > 0;
|
||||
if (noneSelected) {
|
||||
return new Set(songs.map(s => s.id));
|
||||
}
|
||||
if (allSelected) {
|
||||
return new Set();
|
||||
}
|
||||
setSelectedSongs(prev => {
|
||||
const noneSelected = prev.size === 0;
|
||||
const allSelected = prev.size === songs.length && songs.length > 0;
|
||||
if (noneSelected) {
|
||||
// Select all from empty state
|
||||
return new Set(songs.map(s => s.id));
|
||||
});
|
||||
}
|
||||
if (allSelected) {
|
||||
// Deselect all when everything is selected
|
||||
return new Set();
|
||||
}
|
||||
// Mixed/some selected: clear first, then select all (single state update reflects final state)
|
||||
return new Set(songs.map(s => s.id));
|
||||
});
|
||||
}, [songs]);
|
||||
|
||||
@ -323,13 +277,67 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
|
||||
dragSelectionRef.current = null;
|
||||
}, []);
|
||||
|
||||
// Virtualizer for large lists
|
||||
const rowVirtualizer = useVirtualizer({
|
||||
count: songs.length,
|
||||
getScrollElement: () => scrollContainerRef.current,
|
||||
estimateSize: () => 64,
|
||||
overscan: 8
|
||||
});
|
||||
// Memoized song items to prevent unnecessary re-renders
|
||||
const songItems = useMemo(() => {
|
||||
return songs.map((song, index) => (
|
||||
<SongItem
|
||||
key={song.id}
|
||||
song={song}
|
||||
isSelected={selectedSongs.has(song.id)}
|
||||
isHighlighted={selectedSongId === song.id}
|
||||
onSelect={handleSongSelect}
|
||||
onToggleSelection={toggleSelection}
|
||||
showCheckbox={selectedSongs.size > 0 || depth === 0}
|
||||
onPlaySong={onPlaySong}
|
||||
onDragStart={handleDragStart}
|
||||
// Simple playlist reordering within same list by dragging rows
|
||||
onRowDragOver={(e: React.DragEvent) => {
|
||||
if (!onReorder || !currentPlaylist) return;
|
||||
e.preventDefault();
|
||||
setDragHoverIndex(index);
|
||||
}}
|
||||
onRowDrop={async (e: React.DragEvent) => {
|
||||
if (!onReorder || !currentPlaylist) return;
|
||||
e.preventDefault();
|
||||
const fromId = e.dataTransfer.getData('text/song-id');
|
||||
const multiJson = e.dataTransfer.getData('application/json');
|
||||
let multiIds: string[] | null = null;
|
||||
if (multiJson) {
|
||||
try {
|
||||
const parsed = JSON.parse(multiJson);
|
||||
if (parsed && parsed.type === 'songs' && Array.isArray(parsed.songIds)) {
|
||||
multiIds = parsed.songIds as string[];
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
if (!fromId && !multiIds) return;
|
||||
const fromIndex = fromId ? songs.findIndex(s => s.id === fromId) : -1;
|
||||
const toIndex = index;
|
||||
if (toIndex < 0) return;
|
||||
if (fromId && fromIndex >= 0 && fromIndex === toIndex) return;
|
||||
const toId = songs[index].id;
|
||||
// If multiple, move block; else move single
|
||||
if (multiIds && multiIds.length > 0) {
|
||||
await api.moveTracksInPlaylist(currentPlaylist, multiIds, toId);
|
||||
} else {
|
||||
await api.moveTrackInPlaylist(currentPlaylist, fromId!, toId);
|
||||
}
|
||||
await onReorder(songs.map(s => s.id)); // trigger refresh via parent
|
||||
setDragHoverIndex(null);
|
||||
setIsReorderDragging(false);
|
||||
}}
|
||||
onRowDragStartCapture={(e: React.DragEvent) => {
|
||||
// Provide a simple id for intra-list reorder
|
||||
if (!currentPlaylist) return;
|
||||
e.dataTransfer.setData('text/song-id', song.id);
|
||||
// Explicitly set effect to move for better UX
|
||||
try { e.dataTransfer.effectAllowed = 'move'; } catch {}
|
||||
try { e.dataTransfer.dropEffect = 'move'; } catch {}
|
||||
setIsReorderDragging(true);
|
||||
}}
|
||||
/>
|
||||
));
|
||||
}, [songs, selectedSongs, selectedSongId, toggleSelection, depth, onPlaySong, handleDragStart]); // Removed handleSongSelect since it's already memoized
|
||||
|
||||
// Use total playlist duration if available, otherwise calculate from current songs
|
||||
const totalDuration = useMemo(() => {
|
||||
@ -495,106 +503,25 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
{/* Scrollable Song List (virtualized) */}
|
||||
{/* Scrollable Song List */}
|
||||
<Box
|
||||
ref={scrollContainerRef}
|
||||
flex={1}
|
||||
overflowY="auto"
|
||||
mt={2}
|
||||
id="song-list-container"
|
||||
sx={{
|
||||
scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
|
||||
scrollbarWidth: 'thin',
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
backgroundColor: 'var(--chakra-colors-gray-900)'
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
backgroundColor: 'var(--chakra-colors-gray-700)',
|
||||
borderRadius: '8px',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb:hover': {
|
||||
backgroundColor: 'var(--chakra-colors-gray-600)'
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
backgroundColor: 'var(--chakra-colors-gray-900)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box position="relative" height={`${rowVirtualizer.getTotalSize()}px`}>
|
||||
<Flex direction="column" gap={2}>
|
||||
<Box onDragEnd={handleDragEnd}>
|
||||
{rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => {
|
||||
const index = virtualRow.index;
|
||||
const song = songs[index];
|
||||
const allowReorder = Boolean(onReorder && currentPlaylist);
|
||||
return (
|
||||
<Box
|
||||
key={song ? song.id : index}
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
transform={`translateY(${virtualRow.start}px)`}
|
||||
>
|
||||
{song && (
|
||||
<SongItem
|
||||
song={song}
|
||||
isSelected={selectedSongs.has(song.id)}
|
||||
isHighlighted={selectedSongId === song.id}
|
||||
onSelect={handleSongSelect}
|
||||
onToggleSelection={toggleSelection}
|
||||
showCheckbox={selectedSongs.size > 0 || depth === 0}
|
||||
index={index}
|
||||
onCheckboxToggle={handleCheckboxToggle}
|
||||
onPlaySong={onPlaySong}
|
||||
showDropIndicatorTop={dragHoverIndex === index}
|
||||
onDragStart={handleDragStart}
|
||||
onRowDragOver={allowReorder ? ((e: React.DragEvent) => {
|
||||
if (!onReorder || !currentPlaylist) return;
|
||||
e.preventDefault();
|
||||
setDragHoverIndex(index);
|
||||
}) : undefined}
|
||||
onRowDrop={allowReorder ? (async (e: React.DragEvent) => {
|
||||
if (!onReorder || !currentPlaylist) return;
|
||||
e.preventDefault();
|
||||
const fromId = e.dataTransfer.getData('text/song-id');
|
||||
const multiJson = e.dataTransfer.getData('application/json');
|
||||
let multiIds: string[] | null = null;
|
||||
if (multiJson) {
|
||||
try {
|
||||
const parsed = JSON.parse(multiJson);
|
||||
if (parsed && parsed.type === 'songs' && Array.isArray(parsed.songIds)) {
|
||||
multiIds = parsed.songIds as string[];
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
if (!fromId && !multiIds) return;
|
||||
const toId = songs[index]?.id;
|
||||
if (!toId) return;
|
||||
if (multiIds && multiIds.length > 0) {
|
||||
await api.moveTracksInPlaylist(currentPlaylist, multiIds, toId);
|
||||
} else {
|
||||
await api.moveTrackInPlaylist(currentPlaylist, fromId!, toId);
|
||||
}
|
||||
await onReorder(songs.map(s => s.id));
|
||||
setDragHoverIndex(null);
|
||||
setIsReorderDragging(false);
|
||||
}) : undefined}
|
||||
onRowDragStartCapture={allowReorder ? ((e: React.DragEvent) => {
|
||||
if (!currentPlaylist) return;
|
||||
e.dataTransfer.setData('text/song-id', song.id);
|
||||
try { e.dataTransfer.effectAllowed = 'move'; } catch {}
|
||||
try { e.dataTransfer.dropEffect = 'move'; } catch {}
|
||||
setIsReorderDragging(true);
|
||||
}) : undefined}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
{songs.map((song, index) => (
|
||||
<Box key={`row-${song.id}`} position="relative">
|
||||
{dragHoverIndex === index && (
|
||||
<Box position="absolute" top={0} left={0} right={0} height="2px" bg="blue.400" zIndex={1} />
|
||||
)}
|
||||
{songItems[index]}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Drop zone to move item to end of playlist */}
|
||||
{onReorder && currentPlaylist && selectedSongs.size === 0 && isReorderDragging && (
|
||||
@ -680,7 +607,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
|
||||
</Text>
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
{/* Playlist Selection Modal */}
|
||||
|
||||
@ -337,7 +337,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
|
||||
);
|
||||
});
|
||||
|
||||
const PlaylistManagerComponent: React.FC<PlaylistManagerProps> = ({
|
||||
export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
|
||||
playlists,
|
||||
selectedItem,
|
||||
onPlaylistCreate,
|
||||
@ -562,6 +562,4 @@ const PlaylistManagerComponent: React.FC<PlaylistManagerProps> = ({
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const PlaylistManager = React.memo(PlaylistManagerComponent);
|
||||
};
|
||||
@ -16,9 +16,10 @@ import {
|
||||
Icon,
|
||||
useToast,
|
||||
Box,
|
||||
Divider,
|
||||
} from '@chakra-ui/react';
|
||||
import { SearchIcon } from '@chakra-ui/icons';
|
||||
import { FiMusic } from 'react-icons/fi';
|
||||
import { SearchIcon, FolderIcon } from '@chakra-ui/icons';
|
||||
import { FiFolder, FiMusic } from 'react-icons/fi';
|
||||
import type { PlaylistNode } from '../types/interfaces';
|
||||
|
||||
interface PlaylistSelectionModalProps {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useLayoutEffect, useCallback, useRef } from 'react';
|
||||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { api, type SongsResponse } from '../services/api';
|
||||
import type { Song } from '../types/interfaces';
|
||||
|
||||
@ -139,7 +139,7 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
|
||||
}, []);
|
||||
|
||||
// Handle playlist changes - streamlined for immediate response
|
||||
useLayoutEffect(() => {
|
||||
useEffect(() => {
|
||||
if (previousPlaylistRef.current !== playlistName) {
|
||||
// Update refs immediately
|
||||
currentPlaylistRef.current = playlistName;
|
||||
@ -160,26 +160,6 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
|
||||
}
|
||||
}, [playlistName, initialSearch, loadPage]);
|
||||
|
||||
// Imperative method to switch playlist and start loading immediately
|
||||
const switchPlaylistImmediately = useCallback((targetPlaylistName: string) => {
|
||||
// Update refs immediately so effect does not double-trigger
|
||||
currentPlaylistRef.current = targetPlaylistName;
|
||||
previousPlaylistRef.current = targetPlaylistName;
|
||||
currentSearchQueryRef.current = searchQuery;
|
||||
|
||||
// Clear state for instant visual feedback
|
||||
setLoading(true);
|
||||
setSongs([]);
|
||||
setTotalSongs(0);
|
||||
setTotalDuration(undefined);
|
||||
setHasMore(true);
|
||||
setCurrentPage(1);
|
||||
setError(null);
|
||||
|
||||
// Start loading right away
|
||||
loadPage(1, initialSearch, targetPlaylistName);
|
||||
}, [initialSearch, loadPage, searchQuery]);
|
||||
|
||||
return {
|
||||
songs,
|
||||
loading,
|
||||
@ -194,6 +174,5 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
|
||||
searchSongs,
|
||||
reset,
|
||||
refresh: () => loadPage(1)
|
||||
, switchPlaylistImmediately
|
||||
};
|
||||
};
|
||||
@ -18,12 +18,13 @@ import {
|
||||
CardBody,
|
||||
CardHeader,
|
||||
Spinner,
|
||||
Divider,
|
||||
Badge,
|
||||
Icon,
|
||||
Switch,
|
||||
FormHelperText,
|
||||
} from '@chakra-ui/react';
|
||||
import { FiSettings, FiZap, FiSave } from 'react-icons/fi';
|
||||
import { FiCheck, FiX, FiSettings, FiZap, FiSave } from 'react-icons/fi';
|
||||
|
||||
interface S3Config {
|
||||
endpoint: string;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user