Merge branch 'feat/frontend-performance-audit' into main
This commit is contained in:
Geert Rademakes
commit
517af140cf
26
package-lock.json
generated
26
package-lock.json
generated
@ -3569,6 +3569,31 @@
|
||||
"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",
|
||||
@ -8018,6 +8043,7 @@
|
||||
"@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,6 +19,7 @@
|
||||
"@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,7 +130,8 @@ const RekordboxReader: React.FC = () => {
|
||||
loadNextPage,
|
||||
searchSongs,
|
||||
searchQuery,
|
||||
refresh
|
||||
refresh,
|
||||
switchPlaylistImmediately
|
||||
} = usePaginatedSongs({ pageSize: 100, playlistName: currentPlaylist });
|
||||
|
||||
// Export library to XML
|
||||
@ -209,6 +210,10 @@ 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 });
|
||||
@ -305,8 +310,7 @@ const RekordboxReader: React.FC = () => {
|
||||
return nodes.map(node => {
|
||||
if (node.type === 'playlist' && node.name === currentPlaylist) {
|
||||
const remainingTracks = (node.tracks || []).filter(id => !songIds.includes(id));
|
||||
const remainingOrder = (node.order || []).filter(id => !songIds.includes(id));
|
||||
return { ...node, tracks: remainingTracks, order: remainingOrder } as PlaylistNode;
|
||||
return { ...node, tracks: remainingTracks } as PlaylistNode;
|
||||
}
|
||||
if (node.type === 'folder' && node.children) {
|
||||
return { ...node, children: applyRemove(node.children) } as PlaylistNode;
|
||||
|
||||
@ -8,7 +8,6 @@ import {
|
||||
VStack,
|
||||
HStack,
|
||||
Badge,
|
||||
IconButton,
|
||||
useDisclosure,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
@ -24,7 +23,6 @@ import {
|
||||
Td,
|
||||
Spinner,
|
||||
} from '@chakra-ui/react';
|
||||
import { CloseIcon } from '@chakra-ui/icons';
|
||||
import { api } from '../services/api';
|
||||
|
||||
interface JobProgress {
|
||||
@ -55,7 +53,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, onOpen, onClose } = useDisclosure();
|
||||
const { isOpen, onClose } = useDisclosure();
|
||||
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Load all jobs
|
||||
@ -180,7 +178,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 (
|
||||
<>
|
||||
|
||||
@ -20,6 +20,8 @@ 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[];
|
||||
@ -51,11 +53,12 @@ const SongItem = memo<{
|
||||
onToggleSelection: (songId: string) => void;
|
||||
showCheckbox: boolean;
|
||||
onPlaySong?: (song: Song) => void;
|
||||
onDragStart: (e: React.DragEvent, songIdsFallback: string[]) => void;
|
||||
showDropIndicatorTop?: boolean;
|
||||
onDragStart?: (e: React.DragEvent, songIdsFallback: string[]) => void;
|
||||
onRowDragOver?: (e: React.DragEvent) => void;
|
||||
onRowDrop?: (e: React.DragEvent) => void;
|
||||
onRowDragStartCapture?: (e: React.DragEvent) => void;
|
||||
}>(({ song, isSelected, isHighlighted, onSelect, onToggleSelection, showCheckbox, onPlaySong, onDragStart, onRowDragOver, onRowDrop, onRowDragStartCapture }) => {
|
||||
}>(({ song, isSelected, isHighlighted, onSelect, onToggleSelection, showCheckbox, onPlaySong, showDropIndicatorTop, onDragStart, onRowDragOver, onRowDrop, onRowDragStartCapture }) => {
|
||||
// Memoize the formatted duration to prevent recalculation
|
||||
const formattedDuration = useMemo(() => formatDuration(song.totalTime || ''), [song.totalTime]);
|
||||
const handleClick = useCallback(() => {
|
||||
@ -89,14 +92,15 @@ const SongItem = memo<{
|
||||
_hover={{ bg: isHighlighted ? "blue.800" : "gray.700" }}
|
||||
onClick={handleClick}
|
||||
transition="background-color 0.2s"
|
||||
draggable
|
||||
onDragStart={(e) => {
|
||||
onDragStart(e, [song.id]);
|
||||
}}
|
||||
onDragOver={onRowDragOver}
|
||||
onDrop={onRowDrop}
|
||||
onDragStartCapture={onRowDragStartCapture}
|
||||
{...(onDragStart ? { draggable: true, onDragStart: (e: React.DragEvent) => onDragStart(e, [song.id]) } : {})}
|
||||
{...(onRowDragOver ? { onDragOver: onRowDragOver } : {})}
|
||||
{...(onRowDrop ? { onDrop: onRowDrop } : {})}
|
||||
{...(onRowDragStartCapture ? { onDragStartCapture: onRowDragStartCapture } : {})}
|
||||
position="relative"
|
||||
>
|
||||
{showDropIndicatorTop && (
|
||||
<Box position="absolute" top={0} left={0} right={0} height="2px" bg="blue.400" zIndex={1} />
|
||||
)}
|
||||
{showCheckbox && (
|
||||
<Checkbox
|
||||
isChecked={isSelected}
|
||||
@ -277,67 +281,13 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
|
||||
dragSelectionRef.current = null;
|
||||
}, []);
|
||||
|
||||
// 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
|
||||
// Virtualizer for large lists
|
||||
const rowVirtualizer = useVirtualizer({
|
||||
count: songs.length,
|
||||
getScrollElement: () => scrollContainerRef.current,
|
||||
estimateSize: () => 64,
|
||||
overscan: 8
|
||||
});
|
||||
|
||||
// Use total playlist duration if available, otherwise calculate from current songs
|
||||
const totalDuration = useMemo(() => {
|
||||
@ -503,7 +453,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
{/* Scrollable Song List */}
|
||||
{/* Scrollable Song List (virtualized) */}
|
||||
<Box
|
||||
ref={scrollContainerRef}
|
||||
flex={1}
|
||||
@ -511,17 +461,77 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
|
||||
mt={2}
|
||||
id="song-list-container"
|
||||
>
|
||||
<Flex direction="column" gap={2}>
|
||||
<Box position="relative" height={`${rowVirtualizer.getTotalSize()}px`}>
|
||||
<Box onDragEnd={handleDragEnd}>
|
||||
{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>
|
||||
))}
|
||||
{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}
|
||||
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>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Drop zone to move item to end of playlist */}
|
||||
{onReorder && currentPlaylist && selectedSongs.size === 0 && isReorderDragging && (
|
||||
@ -607,7 +617,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(({
|
||||
);
|
||||
});
|
||||
|
||||
export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
|
||||
const PlaylistManagerComponent: React.FC<PlaylistManagerProps> = ({
|
||||
playlists,
|
||||
selectedItem,
|
||||
onPlaylistCreate,
|
||||
@ -562,4 +562,6 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
|
||||
</Modal>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
export const PlaylistManager = React.memo(PlaylistManagerComponent);
|
||||
@ -16,10 +16,9 @@ import {
|
||||
Icon,
|
||||
useToast,
|
||||
Box,
|
||||
Divider,
|
||||
} from '@chakra-ui/react';
|
||||
import { SearchIcon, FolderIcon } from '@chakra-ui/icons';
|
||||
import { FiFolder, FiMusic } from 'react-icons/fi';
|
||||
import { SearchIcon } from '@chakra-ui/icons';
|
||||
import { FiMusic } from 'react-icons/fi';
|
||||
import type { PlaylistNode } from '../types/interfaces';
|
||||
|
||||
interface PlaylistSelectionModalProps {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useState, useEffect, useLayoutEffect, 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
|
||||
useEffect(() => {
|
||||
useLayoutEffect(() => {
|
||||
if (previousPlaylistRef.current !== playlistName) {
|
||||
// Update refs immediately
|
||||
currentPlaylistRef.current = playlistName;
|
||||
@ -160,6 +160,26 @@ 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,
|
||||
@ -174,5 +194,6 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
|
||||
searchSongs,
|
||||
reset,
|
||||
refresh: () => loadPage(1)
|
||||
, switchPlaylistImmediately
|
||||
};
|
||||
};
|
||||
@ -18,13 +18,12 @@ import {
|
||||
CardBody,
|
||||
CardHeader,
|
||||
Spinner,
|
||||
Divider,
|
||||
Badge,
|
||||
Icon,
|
||||
Switch,
|
||||
FormHelperText,
|
||||
} from '@chakra-ui/react';
|
||||
import { FiCheck, FiX, FiSettings, FiZap, FiSave } from 'react-icons/fi';
|
||||
import { FiSettings, FiZap, FiSave } from 'react-icons/fi';
|
||||
|
||||
interface S3Config {
|
||||
endpoint: string;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user