Geert Rademakes
383f3476f0
Optimize PaginatedSongList performance to prevent re-renders
...
- Memoized drag handlers to prevent inline function recreation
- Added custom React.memo comparison for SongItem components
- Optimized hasMusicFile calculation with useMemo
- Removed debug console.log statements
- Fixed inline function creation in song mapping
This should significantly reduce re-renders and improve song selection performance.
2025-09-19 11:05:16 +02:00
Geert Rademakes
4c63228619
Fix song selection performance issue
...
- Identified root cause: React re-rendering was taking 800ms when selectedSong state changed
- Restored all original functionality with performance optimizations
- Song selection is now instant
- All UX improvements maintained:
- Clear selection on playlist change
- Actions dropdown instead of separate buttons
- Song key displayed next to duration
- Simplified playlist switching logic
2025-09-19 11:01:38 +02:00
Geert Rademakes
aa04849442
feat: UX improvements for frontend
...
- Clear selected song when changing playlists (already implemented)
- Replace 'Add to playlist...' and 'Remove from playlist' buttons with 'Actions' dropdown in PaginatedSongList
- Add key (tonality) next to duration in song list display format (e.g., 1:16 - A8)
- Update song matching page title to include storage provider (e.g., 'Sync and Matching (WEBDAV)')
- Remove storage provider text from sync buttons for cleaner interface
- Fix bulk selection state clearing when switching playlists to prevent stale selections
2025-09-19 10:19:40 +02:00
Geert Rademakes
837fed81e7
feat(frontend): show drag preview for single-item drag as '1 song' badge
2025-08-13 16:23:30 +02:00
Geert Rademakes
6d2eae9c7b
feat(frontend): custom drag preview with selection count badge when dragging multiple songs
2025-08-13 16:21:51 +02:00
Geert Rademakes
dd2c7d353e
style(frontend): dark scrollbars for song list, main content, and details panel to match theme
2025-08-13 16:06:02 +02:00
Geert Rademakes
017ba31d83
perf(frontend): use startTransition for selection updates to keep UI responsive on large sets
2025-08-13 16:03:26 +02:00
Geert Rademakes
1d290bdfa6
feat(frontend): shift-click range selection with optimistic checkbox feedback
2025-08-13 15:59:25 +02:00
Geert Rademakes
54b22d5cc5
perf(frontend): instant checkbox feedback via local optimistic selection in virtualized list
2025-08-13 15:57:26 +02:00
Geert Rademakes
52953d7e0d
feat(frontend): virtualize song list, gate DnD, remove double mapping, memoize PlaylistManager; fix TS build warnings
2025-08-13 15:20:38 +02:00
Geert Rademakes
924f36f4f7
feat(ui): adjust select-all behavior to clear then select; replace playlist menu chevron with more-horizontal icon
2025-08-08 16:32:01 +02:00
Geert Rademakes
0073f8146d
fix(reorder): enable landing indicator and drop handling for multi-drag; start reorder on multi-select; relax guards to allow multi block moves
2025-08-08 15:39:00 +02:00
Geert Rademakes
5f17380816
chore: remove verbose reorder/debug logs and tidy XML export logs; streamline FE reorder console noise
2025-08-08 15:05:10 +02:00
Geert Rademakes
9249a5a4a7
feat(reorder): support dragging multiple selected songs to a specific position and to end (block move)
2025-08-08 14:55:06 +02:00
Geert Rademakes
ac52441dd1
fix(reorder): only show end-of-list drop zone during active reorder drag; reset hover indicators on drag end
2025-08-08 14:53:26 +02:00
Geert Rademakes
d0a83a85f5
feat(reorder): add end-of-list drop zone to move track to end; show hover indicator
2025-08-08 14:52:48 +02:00
Geert Rademakes
2d42c6da71
fix(reorder): stop overwriting server move with stale client order; just refresh after move; improve dnd effectAllowed/dropEffect
2025-08-08 14:47:20 +02:00
Geert Rademakes
e2d6d55433
chore(reorder-debug): add server/client logs for move and playlist order slice to diagnose ordering issue
2025-08-08 14:37:45 +02:00
Geert Rademakes
8136bbb959
fix(reorder): backend move endpoint and frontend use precise move to persist order reliably; refresh after move
2025-08-08 14:30:58 +02:00
Geert Rademakes
5a21243f5b
chore(reorder): add client debug logs; refresh playlist after reorder; backend keeps missing ids at end when reordering
2025-08-08 14:15:55 +02:00
Geert Rademakes
50a486f6d8
feat(playlist-reorder): enable intra-playlist row drag&drop with landing indicator; persist order via backend
2025-08-08 14:09:36 +02:00
Geert Rademakes
32d545959d
feat(playlists): support custom per-playlist track order; backend /playlists/reorder; playlist songs endpoint honors order; frontend intra-playlist row DnD with reorder persist
2025-08-08 14:03:03 +02:00
Geert Rademakes
91fd5077d4
chore(dnd): remove debug logs and globals; keep clean drag/drop with proper handlers and UX; no functional changes
2025-08-08 13:52:32 +02:00
Geert Rademakes
5a6710b0eb
fix(dnd): robust drop parsing with window fallback; keep previous sidebar border look; add global payload for reliability
2025-08-08 13:27:46 +02:00
Geert Rademakes
b534485bde
chore(dnd-debug): add console.debug logs for dragover/drop, fix highlighting conditions, log drag payload
2025-08-08 13:22:20 +02:00
Geert Rademakes
c7dd2e6d33
fix(dnd): ensure drop detects payload; set text/plain fallback; refresh playlist structure after add
2025-08-08 13:11:40 +02:00
Geert Rademakes
597c8f994f
feat(dnd): highlight playlist drop target; show drag count badge; refine drag payload and lifecycle
2025-08-08 13:08:22 +02:00
Geert Rademakes
6917c22b94
feat(dnd): drag songs (with multiselect) into sidebar playlists; drop handler adds to playlist with duplicate confirm (allow or skip)
2025-08-08 13:00:40 +02:00
Geert Rademakes
dbf9dbcb8c
fix(sync): reference correct processed count in job result; fix(search): keep focus in search while playing by blurring audio and focusing search; cleanup lints
2025-08-08 11:30:59 +02:00
Geert Rademakes
a3d1b4d211
feat: Add searchable playlist selection modal
...
- Create PlaylistSelectionModal component with search functionality
- Replace long dropdown menu with 'Add to Playlist...' button
- Add search bar to easily find playlists by name
- Show playlist track counts in the modal
- Add success toast notifications when songs are added
- Support nested playlists (folders) in search results
- Improve UX for users with many playlists
The actions dropdown is now much cleaner and finding playlists is easier
with the searchable modal interface.
2025-08-06 15:25:36 +02:00
Geert Rademakes
6244c7c6b8
fix: Resolve main view player issues and clean up UI
...
- Fix ObjectId casting error in PersistentMusicPlayer by handling both string IDs and populated objects
- Remove music icon badge from main view song list (play button is sufficient)
- Clean up unused Badge import in PaginatedSongList
- Ensure proper musicFileId extraction for API calls
The main view music player should now work correctly, and the UI is cleaner
without redundant music icons.
2025-08-06 15:18:51 +02:00
Geert Rademakes
47276728df
feat: Add S3 playback to main view and improve Music Library layout
...
- Add play functionality to main browser view for songs with S3 files
- Add onPlaySong prop to PaginatedSongList and SongItem components
- Show 🎵 badge and play buttons for songs with S3 files in main view
- Change Music Library from tile view to list view for better organization
- Improve Music Library layout with better spacing and information display
- Add proper audio playback handling in main App.tsx
- Show linked status badges in Music Library list view
Users can now play S3-linked songs directly from the main browser view,
and the Music Library has a cleaner list layout for easier browsing.
2025-08-06 15:09:38 +02:00
Geert Rademakes
966240b0d1
perf: Streamline playlist switching flow for faster, cleaner transitions - Clear all state immediately (songs, totalSongs, totalDuration) on playlist switch - Combine switching and loading states into single spinner with dynamic text - Remove duplicate switching indicators to prevent UI flicker - Reset switching state when loading starts for immediate transition - Eliminates confusing flow: switching → old data → 0 of X → loading → new data - Now shows: switching → loading → new data (much cleaner)
2025-08-06 11:18:09 +02:00
Geert Rademakes
90bcd10ed9
feat: Reset song count indicator when switching playlists - Show '0 of 0 songs • Switching playlist...' during playlist switch - Provides consistent visual feedback across all UI elements - Makes playlist switching feel even more responsive and clear
2025-08-06 11:14:16 +02:00
Geert Rademakes
491235af29
feat: Add immediate visual feedback for playlist switching - Clear song list immediately when switching playlists for instant feedback - Add 'Switching playlist...' loading indicator with spinner - Set switching state immediately on playlist selection - Reset switching state when new songs are loaded - Makes playlist switching feel much more responsive and clear
2025-08-06 11:12:58 +02:00
Geert Rademakes
4c3b3e31d4
perf: Additional optimizations to reduce React violations and improve performance - Add early return for empty songs array in totalDuration calculation - Add null check for getAllPlaylists to prevent unnecessary processing - Use requestAnimationFrame in Intersection Observer for better performance - Should reduce 600-1400ms message handler violations
2025-08-06 11:10:28 +02:00
Geert Rademakes
c9541cffee
perf: Optimize song selection to fix 711ms click handler delay - Memoize formatted duration in SongItem to prevent recalculation - Remove handleSongSelect from songItems useMemo dependencies - Optimize SongItem component to prevent unnecessary re-renders - Should improve song selection responsiveness
2025-08-06 10:57:25 +02:00
Geert Rademakes
9268a4635f
perf: Remove unnecessary delays in playlist switching and infinite scroll - Remove setTimeout delay in playlist change handler - Reduce infinite scroll trigger delay from 1000ms to 100ms - Improve responsiveness when switching playlists and scrolling - Fixes 1-second delay between URL change and actual loading
2025-08-06 10:47:37 +02:00
Geert Rademakes
02ae12294c
feat: Show total playlist duration instead of loaded songs duration - Add totalDuration calculation in backend playlist endpoint - Update frontend to display total playlist duration - Duration now shows entire playlist length, not just loaded songs - Prevents duration from changing when scrolling through songs
2025-08-06 10:30:02 +02:00
Geert Rademakes
4f16c859db
fix: Prevent infinite scroll refresh by stabilizing intersection observer - Add trigger prevention mechanism to avoid multiple API calls - Use refs to store current values and avoid stale closures - Remove observer dependencies to prevent recreation - Add proper timeout cleanup to prevent memory leaks
2025-08-06 10:13:21 +02:00
Geert Rademakes
2e32a3c3b6
fix: Make playlist folders start collapsed by default - Change default state from expanded to collapsed for better UX
2025-08-06 10:05:32 +02:00
Geert Rademakes
7fb8614130
feat: Major performance optimizations - Add React.memo, useMemo, and useCallback to prevent unnecessary re-renders - Implement request cancellation with AbortController to prevent memory leaks - Add debounced search to reduce API calls - Optimize song selection and playlist switching performance - Fix browser crashes and memory leaks - Add proper cleanup functions
2025-08-06 10:03:26 +02:00
